Estructura

This project uses yarn for managing the dependencies and node.js for running the development server. The project is based on 2 React applications: the editor and the visor (viewer). Both run in the webpack-dev-server in development mode, and they are bundled by webpack for production The editor additionally uses Redux for managing the state of the application in a centralized way. This same state is inherited by the visor, but it does not require Redux since in the visor, information is mainly read-only.

The project's directory stucture is as follows:

ediphy
├── _editor
|  ├── components
|  └── containers
├── _visor
|  ├── components
|  └── containers
├── common
├── core
|  ├── editor
|  ├── scorm
|  ├── store
|  └── visor
├── dist
|  ├── images
|  ├── js
|  └── lib
├── doc
├── ediphy_server
├── locales
├── plugins
├── reducers
├── sass
└── webpack_plugins

_editor

In the editor folder we find the React components and stylesheets corresponding to the editor application. Inside this folder there are 2 other folders (containers and components), which at the same time are divided into subfolders for organizing the different components. All of them have very indicative names so it is easy to figure out which part of the application they belong to. In the Components section of the documentation all components are thoroughly detailed. The root component is ReduxProvider.jsx, where the application is initialized and the connection with Redux is made.

_visor

This folder is equivalent to the previous one but for the viewer's application. The main component is Visor.jsx which, even though it is rendered in the editor, it contains the iframe in which the visor app is rendered. The VisorApp component is the root of the application.

common

This directory has all the JavaScript (ES6) files that are common to the whole project:

• common: Folder that contains components that are used in the editor as well as in the visor.
• actions.es6: Defines Redux's actions.
• common_tools.es6: Defines recurring functions that are used all over the project.
• constants.es6: Defines text constants that are used in different contexts; mainly the prefixes used for boxes, pages, slides, etc.
• plugins_inside_plugins.es6: Defines recurring functions for creating and editing complex plugins (plugins inside plugins).
• utils.es6: Defines recurring functions for manipulating and consulting the state of the application.

core

This folder holds most of the files that make up the core of the plugin-base functionality of the application.

• editor
  • accordion_provider.es6: Contains recurring functions for creating the plugin toolbars.
  • base_plugin.es6: Base JavaScript class for plugin creation.
  • main.es6: Main file of the editor, which unifies all of its parts.
  • plugins.es6: Contains the necessary functions for managing the rendering of the plugins.
  • print.es6: Contains the necessary functions for converting the document's content to PDF.
• visor
  • base_plugin.es6: Base JavaScript class for plugin creation in viewer mode.
  • correction_functions.es6: Contains the correction functions for the evaluation plugins.
  • main.es6: Contains the functionality for exporting the application to HTML format (ZIP).
  • plugins.es6: Contains the necessary functions for managing the rendering of the plugins in the viewer.
  • visor_entrypoint.es6: Transfers the necessary information from the editor to the visor.
• scorm
  • main.es6: Contains the functionality for exporting the application to SCORM format (ZIP).
  • SCORM_API.es6: Contains the SCORM API.
  • SCORM_WRAPPER.es6: It is a SCORM API wrapper, that makes use of the SCORM API functions in order to create high level functions that manage the score and progress of the lesson.
• store: Folder that holds a series of default initial states for Ediphy.
• config.es6: General configuration for the project in development mode.
• config_noserver.es6: General configuration for the project for its deployment on Github pages.
• config_production.es6: General configuration for the project for its deployment on ViSH.

dist

It is the public directory of the project, so to speak. Here are the files that can be accessed in the development server, including the production bundles. Here you can also find some images and scripts that are not included in the bundled which are needed for the application, such as the text editor CKEditor.

doc

This directory is where the project documentation application is. It is another React application that loads the wiki pages and the code comments.

ediphy_server

It is a server used for testing the saving and opening functions in a remote server. It is written in the server.js file and the state is saved in JSON format in the file config.json.

locales

This folder manages the project's internationalization. It is where the text strings in each language are defined. As for now, the application is available in English and Spanish. All the application files have access to the library i18next like so:

import i18n from 'i18next';

An example of use is the following:

i18n.t("word_key")

In our locales files we would have previously defined the value for the key word_key in all available languages.

plugins

This folder includes the directories for each one of the plugins. In the plugin API section you can learn how to develop your own plugin.

reducers

It is the folder that includes Redux's reducer functions. In the Redux section of the documentation you will learn more about them.

sass

This folder contains the general styles of the application, written in SCSS.

webpack_plugins

This folder contains custom webpack plugins, like the ones for generating the ZIP files for exporting Ediphy documents.