-
Notifications
You must be signed in to change notification settings - Fork 13
Componentes_es
A continuación, se va a hacer una pequeña reseña de todos los componentes creados y la relación entre ellos. En el icono de código a la derecha de algunos de ellos se muestran en detalle las props de cada uno.
Componentes que pertenecen al editor
Componentes principales que contienen a todos los demás
Es el componente principal, padre del resto y el único que implementa las funcionalidades de Redux. Es de destacar su método componentDidMount ya que la mayoría de los eventos de la API se escuchan o lanzan desde este componente y es en esta función donde se registra eso. Por ejemplo, es el que hace que se carguen los plugins o el que escucha el evento de render y en función de los detalles lanza la acción de UPDATE_BOX o la de ADD_BOX realizando un procesamiento previo. También escucha el evento de getPluginsInView y devuelve, en función de lo especificado, los plugins en la vista actual o en la dada y todos o sólo los que han registrado un alias.
Parte del procesamiento mencionado anteriormente que hace al recibir el evento de render es asignar los identificadores a los plugins si no los tuvieran ya o la altura especificada en el estado. También es aquí donde se reconoce si se desea que el plugin contenga otros por defecto y si es el caso, lo hace.
Herramientas de desarrollador para Redux, aparecen como una barra lateral colapsable. En ella aparceen todas las acciones lanzadas y el estado tras aplicar cada acción. Se puede consultar su documentación aquí;
Es el componente raíz, donde se declara EditorApp y se conecta con Redux. También aquí se define el estado inicial de la aplicación.
Componentes específicos
Componente que se encarga de gestionar el autoguardado periódico del estado de la aplicación.
Componentes que se encargan de mostrar el contenido del documento
Representa el espacio donde se sitúa el contenido de la vista seleccionada.
Se encarga de decidir si se pinta un EditorCanvasSli o EditorCanvasDoc.
Se trata de un canvas para páginas de tipo documento. Consta de un EditorBoxSortable en el que se colocan todos los EditorBox según el estado de la aplicación.
Se trata de un canvas para páginas de tipo diapositiva. Es similar a EditorCanvasDoc pero mantiene la relación de aspecto y el contenido es flotante y escala con la página. Además, está preparado para recibir plugins, por lo que cuando se arrastra uno desde PluginRibbon, se activa mostrando una ayuda visual.
Muestra el título asignado a la vista seleccionada de manera automática (si se cambia el nombre de la vista, esto se verá reflejado aquí) y permite mostrar además el título del documento, subtítulo, nº de página, etc
En una vista contenida, muestra información sobre su procedencia: página, plugin, marca, etc.
Es un tipo de EditorBox especial (en el estado apenas se puede diferenciar de una normal) que se añade de manera automática cuando se crea un documento. No puede moverse ni cambiarse de tamaño, se situa al principio de la vista, ocupa todo el ancho disponible y va creciendo en función del contenido. Además tiene unos contenedores de plugins (sortableContainer) que se pueden reordenar entre si (de ahí el nombre). El objetivo de todo esto es crear la ilusión de estar trabajando con un documento, ya que todo el contenido va creciendo hacia abajo pero permite ciertas facilidades, ya que por ejemplo si se quisiera crear una lista de ejercicios, posicionarlos todos de manera absoluta (usando el sistema de cajas flotantes) sería algo tedioso y en caso de querer hacer algún cambio, ya sea de contenido o de posición, habría que mover el resto. Dentro de si puede contener EditorBox.
También está preparado para recibir plugins de PluginRibbon, pero aquí el caso es más complejo que en EditorCanvasSli ya que pueden recibir tanto el propio EditorBoxSortable, como el sortableContainer (cualquiera de las celdas definidas) y también ha de estar preparado para permitir el intercambio de una celda a otra dentro de un mismo sortableContainer de un EditorBox mediante el sistema de arrastrar y soltar.
Es el componente principal y el más complejo con diferencia. Es el que se encarga de pintar la plantilla de un plugin y por tanto tiene muchas partes condicionadas al tipo de plugin. Por ejemplo, si se usa texto, se encarga de crear, mostrar y ocultar cuando debe la instancia de CKEditor asignada, además del espacio de trabajo. También tiene toda la lógica de la aplicación para permitir que se pueda cambiar de posición o de tamaño arrastrando o de mantener la relación de aspecto del plugin.
Por si no fuera suficiente, debido a la posibilidad de crear plugins dentro de plugins, tiene que ser capaz de crear dentro de si un contenido que no sabe cuál es. Esto se consigue gracias al método renderChildren que recorre el JSON devuelto de la plantilla del plugin, creando los elementos HTML que corresponda, y cuando se encuentra con un <plugin />, crea un PluginPlaceholder que recibe todas las "props" necesarias.
Se encarga de pintar dentro de un EditorBox los EditorBox correspondientes siguiendo el mismo sistema de filas y columnas usado en los sortableContainer de EditorBoxSortable (de hecho, un PluginPlaceholder se crea a partir de la propiedad sortableContainers del EditorBox padre, tal y como se indica en el estado de la aplicación). En estos momentos se encuentra en desuso.
Se trata de un menú flotante que permite editar de forma más rápida y conveniente la EditorBox seleccionada. Al ser flotante debe recalcular su posición cada vez que una caja se mueve o se redimensiona la pantalla.
Componentes que se encargan de la navegación del documento
Situado a la izquierda, es el menú de navegación para cambiar entre distintas vistas. Puede replegarse si se desea.
Hijo de EditorCarrousel, por el momento es la única manera de mostrar las vistas, como si fueran un índice. Contiene los controles para añadirlas o borrarlas y lo que hace es, leyendo del estado de la aplicación, generar recursivamente las páginas y componentes Section (donde corresponda una sección).
Botones para la edición de los elementos del índice
Cabecera del índice, que contiene el título del documento y lis botones de expandir y colapsar
Muestra todas las vistas que dependen de la sección correspondiente en el estado y permite minimizarlas o maximizarlas.
Se trata de los títulos de cada element del índice, que al hacer doble click se pueden editar in situ.
Componente para crear una diapositiva de una lista de plantillas
Componente para renderizar una miniatura de una plantilla
Componente para administrar el portapapeles
Componentes genéricos que se usan en todo el proyecto
Sistema personalizado de alertas, configurable para poder prescindir de las alertas, prompts y confirms del navegador.
Selector customizado de colores que permite también seleccionar niveles de transparencia
Componente que renderiza una zona para poder arrastrar ficheros desde el ordenador del usuario.
Modal para recordar guardar antes de salir
Esta carpeta contiene toda la lógica y vistas para suvir contenido y buscarlo en distintas APIs.
Es el componente principal de esta sección. Su lógica se separa principalmente en dos ficheros: FileHandlers.es6 y APIProviders.es6. El primero determina los tipos de ficheros admitidos en Ediphy y las acciones asociadas con cada uno de ellos. El segundo permite definir distintas fuentes de contenido para Ediphy: subida, biblioteca del usuario y distintas APIs.
Este es un ejemplo de API incluida en Ediphy. Cada una tiene sus particularidades pero todas tienen un funcionamiento muy similar.
Componente que provee una zona de arrastre para un input de archivo.
Componente que provee una miniatura para las distintas APIs
Componente que provee una barra de búsqueda para las distintas APIs
Componente que proporciona un botón para acceder a la biblioteca de contenido desde la toolbar de los plugins.
Componente que se encarga de gestionar la importación de PDF.
Componente que muestra una guía interactiva para Ediphy.
Barra de navegación superior
Es la barra que se encuentra en la parte superior. Contiene los componentes que se describen a continuación.
Contiene los botones de la parte superior derecha de la barra de navegación; con acciones como previsualizar, hacer/deshacer, etc.
Contiene el menú desplegable de la parte superior derecha.
Contiene una serie de botones básicos (previsualizar, guardar, importar, etc.) y un selector de plugins por categoría. En función de lo seleccionado, PluginRibbon mostrará unos u otros.
Situado debajo de EditorNavBar, muestra los plugins que existen en la categoría seleccionada. Estos son añadidos usando un sistema de arrastrar y soltar.
Modal de configuración global del documento
Modal para exportar el documento a distintos formatos como SCORM.
Es el modal encargado de mostrar lo que se indique en la plantilla de configuración de un plugin (si es que se especifica que lo necesite).
Situado a la derecha, es el componente encargado de pintar la barra de herramientas correspondiente al plugin o vista seleccionados.
Componente que se encarga de renderizar los distintos botones correspondientes al plugin seleccionado en la barra de herramientas. Es relativamente complejo ya que la configuración de las barras de herramientas de los plugins así lo permite y además crea una serie de botones de manera automática en función de la configuración (por ejemplo, el botón de "Editar texto" si el plugin declaró que lo necesitaba).
Similar al anterior pero para las barras de herramientas de las vistas.
Componente que se incluye de manera automática por cada contenedor de un EditorBoxSortable. Permite configurar el número y la distribución de columnas de manera porcentual y el número y distribución de filas por cada columna.
Tipo de input radio que muestra botones con material-icons como labels.
Componentes de apoyo a los plugins enriquecidos (con marcas que enlazan a vistas contenidas, otras secciones o URLs externas)
Es igual que EditorCanvas pero para vistas contenidas. Una vista contenida sólo puede enlazarse desde una marca de un plugin enriquecido, es algo parecido a una ventana emergente que se superpone al contenido inicial.
Superpone un overlay para poder arrastrar desde EditorShortcuts una marca a un EditorBox de un plugin enriquecido.
Es similar a MarkCreator, pero en este caso se trata de un wrapper para las marcas que hay que incluír en la definición del plugin. Él se encarga de crear un overlay cuando se arrastra una marca para editarla.
Muestra la lista de marcas en la PluginToolbar
Modal que permite editar el comportamiento, nombre, posición y color de las marcas.
Consiste en una alerta para mostrar el estado del servidor remoto al abrir/guardar un documento.
Componentes contenedores del visor
Es el modal que muestra el visor dentro del editor. Contiene un iframe que muestra la aplicación React del visor.
Es el componente raíz de la aplicación del visor. Es el equivalente a EditorApp en el editor.
Componentes específicos del visor
Contiene los componentes equivalentes al canvas del editor pero adaptados al visor.
Similar al canvas del editor (EditorCanvas), este componente muestra el contenido del documento, sólo que en modo "solo lectura" ya que, como su propio nombre indica, el visor es solo para visualización.
Equivalente a EditorCanvasDoc.
Equivalente a EditorCanvasSli.
Equivalente a EditorBoxSortable.
Equivalente a EditorBox.
Equivalente a ContainedCanvas.
Equivalente a EditorHeader.
Equivalente a PluginPlaceholder.
Contiene los componentes para navegar por el contenido del documento
Barra lateral de navegación. Equivalente a CarrouselList pero sin botones de edición.
Equivalente a Section.
Botones para navegar por el documento como si fuese un slideshow.
Circulo que se rellena si una página o sección ha sido completada por el usuario.
Integración de SCORM en en documento. Ediphy Editor presenta la opción de exportar los documentos creados en formato SCORM, el estándar más famoso de e-Learning. En las próximas versiones introduciremos plugins de ejercicios puntuables, lo que dará más sentido al uso de este estándar. Mientras tanto, nuestra forma de puntuar es mediante la monitorización del número de páginas que ha leido el "alumno".
Puedes probar los documentos exportados en cualquier LMS que implemente SCORM, como Moodle o SCORM Cloud.
Gran parte de la configuración necesaria para un documento SCORM se incluye en la Configuración Global del documento.
Componente invisible que se encarga de interactuar con la API de SCORM.
Componente que muestra la puntuación del documento en la esquina superior derecha
Componente que muestra la puntuación del documento en la barra de navegación
Componente que muestra la puntuación de una página
Componente que muestra un botón para corregir un cuestionario