adapt-authoring-ui 0.0.1

package/app/modules/editor/global/views/editorView.js

@@ -0,0 +1,288 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+/*
+ * TODO I think this exists to add extra functionality to the menu/page structure pages
+ */
+define(function(require) {
+  var ArticleModel = require('core/models/articleModel');
+  var BlockModel = require('core/models/blockModel');
+  var ComponentModel = require('core/models/componentModel');
+  var ContentObjectModel = require('core/models/contentObjectModel');
+  var EditorMenuView = require('../../contentObject/views/editorMenuView');
+  var EditorOriginView = require('./editorOriginView');
+  var EditorPageView = require('../../contentObject/views/editorPageView');
+  var helpers = require('core/helpers');
+  var Origin = require('core/origin');
+
+  var EditorView = EditorOriginView.extend({
+    className: "editor-view",
+    tagName: "div",
+    settings: {
+      autoRender: false
+    },
+    exporting: false,
+    events: {
+      "click a.page-add-link": "addNewPage",
+      "click a.load-page": "loadPage",
+      "mouseover div.editable": "onEditableHoverOver",
+      "mouseout div.editable": "onEditableHoverOut"
+    },
+
+    preRender: function(options) {
+      this.currentView = options.currentView;
+      Origin.editor.isPreviewPending = false;
+      this.currentCourseId = Origin.editor.data.course.get('_id');
+      this.currentCourse = Origin.editor.data.course;
+      this.currentPageId = options.currentPageId;
+
+      this.listenTo(Origin, {
+        'editorView:refreshView': this.setupEditor,
+        'editorView:copy': this.addToClipboard,
+        'editorView:copyID': this.copyIdToClipboard,
+        'editorView:paste': this.pasteFromClipboard,
+        'editorCommon:download': this.downloadProject,
+        'editorCommon:preview': this.previewProject,
+        'editorCommon:export': this.exportProject
+      });
+      this.render();
+      this.setupEditor();
+    },
+
+    postRender: function() {
+
+    },
+
+    setupEditor: function() {
+      this.renderCurrentEditorView();
+    },
+
+    previewProject: function() {
+      if(Origin.editor.isPreviewPending) {
+        return;
+      }
+      if(!this.validateCourse()) {
+        return;
+      }
+      Origin.editor.isPreviewPending = true;
+      $('.editor-common-sidebar-preview-inner').addClass('display-none');
+      $('.editor-common-sidebar-previewing').removeClass('display-none');
+      
+      const previewWindow = window.open('loading', 'preview');
+      
+      $.post(`api/adapt/preview/${this.currentCourseId}`)
+        .done(data => {
+          this.resetPreviewProgress();
+          previewWindow.location.href = data.preview_url;
+        })
+        .fail((jqXHR, textStatus, errorThrown) => {
+          this.resetPreviewProgress();
+          Origin.Notify.alert({
+            type: 'error',
+            text: Origin.l10n.t('app.errorgeneratingpreview') + Origin.l10n.t('app.debuginfo', { message: jqXHR.responseJSON.message })
+          });
+          previewWindow.close();
+        });
+    },
+
+    validateCourse: function() {
+      const errors = [];
+      const validateChildren = item => {
+        if(item.get('_type') === 'component') {
+          return;
+        }
+        const children = Origin.editor.data.content.where({ _parentId: item.get('_id') });
+        if(!children.length) {
+          return errors.push(Origin.l10n.t('app.emptycontentobject', { type: item.get('_type'), title: item.get('title') }));
+        }
+        children.forEach(c => validateChildren(c));
+      };
+      
+      validateChildren(this.currentCourse);
+
+      if(errors.length) {
+        Origin.Notify.alert({ type: 'error', html: errors.join('<br/>') });
+      }
+      return errors.length === 0;
+    },
+
+    exportProject: async function(error) {
+      // TODO - very similar to export in project/views/projectView.js, remove duplication
+      // aleady processing, don't try again
+      if(error || this.exporting) return;
+
+      this.showExportAnimation();
+      this.exporting = true;
+      if(!this.validateCourse()) {
+        return;
+      }
+      $.ajax({
+        url: `api/adapt/export/${Origin.editor.data.course.get('_id')}`,
+        method: 'POST',
+        success: data => {
+          this.showExportAnimation(false);
+          this.exporting = false;
+          var $downloadForm = $('#downloadForm');
+          $downloadForm.attr('action', data.export_url);
+          $downloadForm.submit();
+        },
+        error: jqXHR => {
+          this.showExportAnimation(false);
+          this.exporting = false;
+          Origin.Notify.alert({
+            type: 'error',
+            title: Origin.l10n.t('app.exporterrortitle'),
+            text: Origin.l10n.t('app.errorgeneric') + Origin.l10n.t('app.debuginfo', { message: jqXHR.responseJSON.message })
+          });
+        }
+      });
+    },
+
+    showExportAnimation: function(show = true) {
+      const $btn = $('button.editor-common-sidebar-export');
+      if(show) {
+        $('.editor-common-sidebar-export-inner', $btn).addClass('display-none');
+        $('.editor-common-sidebar-exporting', $btn).removeClass('display-none');
+      } else {
+        $('.editor-common-sidebar-export-inner', $btn).removeClass('display-none');
+        $('.editor-common-sidebar-exporting', $btn).addClass('display-none');
+      }
+    },
+
+    downloadProject: function() {
+      if(Origin.editor.isDownloadPending) {
+        return;
+      }
+      if(!this.validateCourse()) {
+        return;
+      }
+      $('.editor-common-sidebar-download-inner').addClass('display-none');
+      $('.editor-common-sidebar-downloading').removeClass('display-none');
+
+      $.ajax({
+        url: `api/adapt/publish/${this.currentCourseId}`,
+        method: 'POST',
+        success: (data, textStatus, jqXHR) => {
+          this.resetDownloadProgress();
+          var $downloadForm = $('#downloadForm');
+          $downloadForm.attr('action', data.publish_url);
+          $downloadForm.submit();
+        },
+        error: jqXHR => {
+          this.resetDownloadProgress();
+          Origin.Notify.alert({
+            type: 'error',
+            text: Origin.l10n.t('app.errorgeneric') + Origin.l10n.t('app.debuginfo', { message: jqXHR.responseJSON.message })
+          });
+        }
+      });
+    },
+  
+    resetPreviewProgress: function() {
+      $('.editor-common-sidebar-preview-inner').removeClass('display-none');
+      $('.editor-common-sidebar-previewing').addClass('display-none');
+      $('.editor-common-sidebar-preview-wrapper .dropdown').removeClass('active');
+      Origin.editor.isPreviewPending = false;
+    },
+
+    resetDownloadProgress: function() {
+      $('.editor-common-sidebar-download-inner').removeClass('display-none');
+      $('.editor-common-sidebar-downloading').addClass('display-none');
+      Origin.editor.isDownloadPending = false;
+    },
+
+    addToClipboard: function(model) {
+      this.showPasteZones(model.get('_type'));
+      Origin.editor.clipboardId = model.get('_id');
+    },
+
+    copyIdToClipboard: function(model) {
+      var id = model.get('_id');
+
+      if (helpers.copyStringToClipboard(id)) {
+        Origin.Notify.alert({
+          type: 'info',
+          text: Origin.l10n.t('app.copyidtoclipboardsuccess', { id: id })
+        });
+      } else {
+        Origin.Notify.alert({
+          type: 'warning',
+          text: Origin.l10n.t('app.copyidtoclipboarderror', { id: id })
+        });
+      }
+    },
+
+    pasteFromClipboard: function(_parentId, _sortOrder, _layout) {
+      Origin.trigger('editorView:pasteCancel');
+
+      const { SweetAlert } = Origin.Notify.alert({
+        title: Origin.l10n.t('app.loading')
+      });
+      SweetAlert.showLoading();
+      
+      $.ajax({
+        method: 'POST',
+        url: 'api/content/clone',
+        headers: { 'Content-Type': 'application/json' },
+        data: JSON.stringify({ _id: Origin.editor.clipboardId, _layout, _parentId, _sortOrder }),
+        success: newData => {
+          Origin.editor.clipboardId = null;
+          Origin.trigger('editorView:menuView:addItem', new ContentObjectModel(newData))
+          Origin.trigger(`editorView:pasted:${_parentId}`, newData);
+          Origin.trigger('editor:refreshData', () => {
+            Origin.trigger(`editorView:refreshView`);
+          });
+          SweetAlert.close();
+        },
+        fail: ({ message }) => {
+          SweetAlert.close();
+          Origin.Notify.alert({ type: 'error', text: `${Origin.l10n.t('app.errorpaste')}${message ? `\n\n${message}` : ''}` });
+        }
+      });
+    },
+
+    createModel: function (type) {
+      switch (type) {
+        case 'contentObjects': return new ContentObjectModel();
+        case 'articles': return new ArticleModel();
+        case 'blocks': return new BlockModel();
+        case 'components': return new ComponentModel();
+      }
+    },
+
+    renderCurrentEditorView: function() {
+      Origin.trigger('editorView:removeSubViews');
+
+      if(this.currentView === 'menu') {
+        this.renderEditorMenu();
+      } else if(this.currentView === 'page') {
+        this.renderEditorPage();
+      }
+      Origin.trigger('editorSidebarView:addOverviewView');
+    },
+
+    renderEditorMenu: function() {
+      var view = new EditorMenuView({ model: Origin.editor.data.course });
+      this.$('.editor-inner').html(view.$el);
+    },
+
+    renderEditorPage: function() {
+      var model = Origin.editor.data.content.findWhere({ _id: this.currentPageId });
+      var view = new EditorPageView({ model });
+      this.$('.editor-inner').html(view.$el);
+    },
+
+    // Event handling
+
+    onEditableHoverOver: function(e) {
+      e && e.stopPropagation();
+      $(e.currentTarget).addClass('hovering');
+    },
+
+    onEditableHoverOut: function(e) {
+      $(e.currentTarget).removeClass('hovering');
+    }
+  }, {
+    template: 'editor'
+  });
+
+  return EditorView;
+});

package/app/modules/editor/index.js

@@ -0,0 +1,52 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define([
+  'core/origin',
+  './global/editorDataLoader',
+  './article/index',
+  './block/index',
+  './component/index',
+  './config/index',
+  './contentObject/index',
+  './course/index',
+  './extensions/index',
+  './menuSettings/index',
+  './themeEditor/index'
+], function(Origin, EditorData) {
+  // loads editor data
+  Origin.on('router:editor editor:refreshData', EditorData.load);
+  Origin.on('router', mod => {
+    if(mod !== 'editor') EditorData.resetCourseData();
+  });
+  // handle routing
+  Origin.on('router:editor', () => EditorData.waitForLoad(triggerEvent));
+  /**
+  * Acts as a sub-router to send out more useful events
+  */
+  function triggerEvent() {
+    var route2 = Origin.location.route2;
+    var type;
+    switch(route2) {
+      case 'article':
+      case 'block':
+      case 'component':
+      case 'config':
+      case 'extensions':
+      case 'menusettings':
+      case 'selecttheme':
+        type = route2;
+        break;
+      case 'page':
+      case 'menu':
+        type = 'contentObject';
+        break;
+      case 'settings':
+        type = 'course';
+        break;
+    }
+    Origin.trigger(`editor:${type}`, {
+      type: route2,
+      id: Origin.location.route3,
+      action: Origin.location.route4
+    });
+  }
+});

package/app/modules/editor/menuSettings/index.js

@@ -0,0 +1,27 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var EditorMenuSettingsEditSidebarView = require('./views/editorMenuSettingsEditSidebarView');
+  var EditorMenuSettingsEditView = require('./views/editorMenuSettingsEditView');
+  var Helpers = require('../global/helpers');
+  var Origin = require('core/origin');
+
+  Origin.on('editor:menusettings', function(data) {
+    var route1 = Origin.location.route1;
+    var model = Origin.editor.data.config;
+    
+    Helpers.setPageTitle(model);
+    
+    var backButtonRoute = `#/editor/${route1}/menu`;
+    var backButtonText = Origin.l10n.t('app.backtomenu');
+    
+    if (Origin.previousLocation.route2 === "page") {
+      backButtonRoute = `#/editor/${route1}/page/${Origin.previousLocation.route3}`;
+      backButtonText = Origin.l10n.t('app.backtopage');
+    }
+    Origin.sidebar.addView(new EditorMenuSettingsEditSidebarView().$el, {
+      backButtonText,
+      backButtonRoute
+    });
+    Origin.contentPane.setView(EditorMenuSettingsEditView, { model });
+  });
+});

package/app/modules/editor/menuSettings/less/menusettings.less

@@ -0,0 +1,55 @@
+@import 'colours';
+
+.menu-settings-list-item {
+
+
+  .display-name {
+    font-size: 175%;
+  }
+  .description {
+    font-size: 110%;
+    color: #a6c2ca;
+  }
+}
+
+
+
+.menu-settings-list {
+  padding-left: 30px;
+  padding-top: 30px;
+}
+
+.menu-settings-list-item {
+  height: 175px;
+  width: 275px;
+  margin-left:0px;
+  margin-right: 30px;
+  margin-bottom: 30px;
+  list-style-type: none;
+  overflow: hidden;
+  border-radius: 3px;
+  float: left;
+  background-color: @white;
+  border: 1px solid #d6f2f9;
+  transition:background-color 0.3s;
+  transition:all 0.3s;
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 0 5px 2px #CBE1E6;
+  }
+  &.selected {
+    background-color: @primary-color;
+    color: @button-primary-text-color;
+    .name {
+      color: #d6f2f9;
+    }
+    .description {
+      color: @white;
+    }
+  }
+
+  &-inner {
+    padding: 20px;
+  }
+}

package/app/modules/editor/menuSettings/templates/editorMenuSettingsEdit.hbs

@@ -0,0 +1 @@
+<div class="menu-settings-list clearfix"></div>

package/app/modules/editor/menuSettings/templates/editorMenuSettingsEditSidebar.hbs

@@ -0,0 +1,5 @@
+<div class="sidebar-item-inner">
+  <button class="editor-menusettings-edit-sidebar-save action-primary">
+    <span class="editor-menusettings-edit-sidebar-save-inner">{{t 'app.save'}}</span>
+  </button>
+</div>

package/app/modules/editor/menuSettings/templates/editorMenuSettingsItem.hbs

@@ -0,0 +1,4 @@
+<div class="menu-settings-list-item-inner">
+  <div class="display-name">{{displayName}}</div>
+  <div class="description">{{description}}</div>
+</div>

package/app/modules/editor/menuSettings/views/editorMenuSettingsEditSidebarView.js

@@ -0,0 +1,21 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var SidebarItemView = require('modules/sidebar/views/sidebarItemView');
+
+  var EditorMenuSettingsEditSidebarView = SidebarItemView.extend({
+    events: {
+      'click .editor-menusettings-edit-sidebar-save': 'saveEditing'
+    },
+
+    saveEditing: function(event) {
+      event && event.preventDefault();
+      this.updateButton('.editor-menusettings-edit-sidebar-save', Origin.l10n.t('app.saving'));
+      Origin.trigger('editorMenuSettingsEditSidebar:views:save');
+    }
+  }, {
+    template: 'editorMenuSettingsEditSidebar'
+  });
+
+  return EditorMenuSettingsEditSidebarView;
+});

package/app/modules/editor/menuSettings/views/editorMenuSettingsEditView.js

@@ -0,0 +1,71 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+  var ContentPluginCollection = require('core/collections/contentPluginCollection');
+  var MenuSettingsView = require('./editorMenuSettingsView');
+
+  var EditorMenuSettingsEditView = EditorOriginView.extend({
+    className: "editor-menu-settings-edit",
+    tagName: "ul",
+
+    preRender: function() {
+      this.collection = new ContentPluginCollection(undefined, { type: 'menu' });
+      this.listenTo(this.collection, 'sync', this.addMenuItemView);
+      this.collection.fetch();
+
+      this.listenTo(Origin, {
+        'editorSideBarView:removeEditView': this.remove,
+        'editorMenuSettingsEditSidebar:views:save': this.saveData
+      });
+    },
+
+    addMenuItemView: function() {
+      this.renderMenuItemViews();
+    },
+
+    renderMenuItemViews: function() {
+      this.collection.each(function(menu) {
+        menu.set('_isSelected', menu.get('name') === Origin.editor.data.config.get('_menu'));
+        this.$('.menu-settings-list').append(new MenuSettingsView({ model: menu }).$el);
+      }, this);
+      this.setViewToReady();
+    },
+
+    cancel: function(event) {
+      event && event.preventDefault();
+      Origin.trigger('editorSidebarView:removeEditView', this.model);
+    },
+
+    saveData: function(event) {
+      event && event.preventDefault();
+
+      const selectedMenu = this.collection.findWhere({ _isSelected: true });
+      const oldMenu = Origin.editor.data.config.get('_menu');
+      
+      if(!selectedMenu) {
+        return this.onSaveError(null, Origin.l10n.t('app.errornomenuselected'));
+      }
+      if(selectedMenu.get('name') === oldMenu) {
+        return this.onSaveSuccess();
+      }
+      $.ajax({
+        url: `api/content/${this.model.get('_courseId')}`,
+        method: 'PATCH',
+        data: { 
+          _menu: selectedMenu.get('name'),
+          _enabledPlugins: [
+            ...Origin.editor.data.config.get('_enabledPlugins').filter(p => p !== oldMenu),
+            selectedMenu.get('name')
+          ]
+        },
+        success: () => this.onSaveSuccess(),
+        error: () => this.onSaveError()
+      });
+    }
+  }, {
+    template: "editorMenuSettingsEdit"
+  });
+
+  return EditorMenuSettingsEditView;
+});

package/app/modules/editor/menuSettings/views/editorMenuSettingsView.js

@@ -0,0 +1,44 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Origin = require('core/origin');
+  var OriginView = require('core/views/originView');
+
+  var MenuSettingsView = OriginView.extend({
+    tagName: 'li',
+
+    className: function() {
+      var isSelectedClass = (this.model.get('_isSelected')) ? ' selected' : '';
+      return 'menu-settings-list-item' + isSelectedClass;
+    },
+
+    events: {
+      'click': 'toggleSelect'
+    },
+
+    preRender: function() {
+      this.listenTo(Origin, 'editor:menuSettings:selected', this.deselectMenu);
+    },
+
+    toggleSelect: function(e) {
+      e && e.stopPropagation();
+      if (!this.model.get('_isSelected')) {
+        this.selectMenu();
+      }
+    },
+
+    selectMenu: function() {
+      Origin.trigger('editor:menuSettings:selected');
+      this.$el.addClass('selected');
+      this.model.set({_isSelected: true});
+    },
+
+    deselectMenu: function() {
+      this.$el.removeClass('selected');
+      this.model.set({_isSelected: false});
+    }
+  }, {
+    template: 'editorMenuSettingsItem'
+  });
+
+  return MenuSettingsView;
+});

package/app/modules/editor/themeEditor/collections/editorPresetCollection.js

@@ -0,0 +1,13 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var PresetModel = require('../models/editorPresetModel.js');
+
+  var PresetCollection = Backbone.Collection.extend({
+    url: 'api/coursethemepresets',
+    comparator: 'parentTheme',
+    model: PresetModel
+  });
+
+  return PresetCollection;
+});

package/app/modules/editor/themeEditor/index.js

@@ -0,0 +1,15 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var EditorThemingView = require('./views/editorThemingView.js');
+  var EditorThemingSidebarView = require('./views/editorThemingSidebarView.js');
+
+  Origin.on('editorCommon:theme', function() {
+    Origin.router.navigate(`#/editor/${Origin.editor.data.course.get('_id')}/${ROUTE}`, { trigger: true });
+  });
+
+  Origin.on('editor:selecttheme', () => {
+    Origin.sidebar.addView(new EditorThemingSidebarView().$el);
+    Origin.contentPane.setView(EditorThemingView);
+  });
+});

package/app/modules/editor/themeEditor/less/editorPresetEdit.less

@@ -0,0 +1,78 @@
+.presetEdit {
+  display: flex;
+  position: fixed;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  z-index: 1000;
+
+  .presetEdit-inner {
+    background-color: @white;
+    border-radius: 5px;
+    margin: 0 auto;
+    padding: 35px;
+    max-height: 90%;
+    min-width: 552px;
+    position: relative;
+
+    .button {
+        display: inline-block;
+        width: 115px;
+        text-align: center;
+        vertical-align: middle;
+        &.close {
+          position: absolute;
+          right: 15px;
+          top: 0px;
+          width: 20px;
+        }
+    }
+
+    .title {
+      font-size: 18px;
+      padding-bottom: 12px;
+    }
+
+    .description {
+      padding-bottom: 25px;
+    }
+
+    .presets {
+      .preset {
+        padding-bottom: 10px;
+
+        .nameEdit {
+          display: none;
+
+          .preset-error {
+            color: red;
+          }
+        }
+
+        .label,
+        .nameEdit input {
+          padding: 11px;
+          margin-right: 15px;
+          display: inline-block;
+          width: 50%;
+          border: 1px solid #f1f1f1;
+          border-radius: 5px;
+          vertical-align: middle;
+          font-weight: @font-weight-bold;
+          word-break: break-word;
+        }
+      }
+    }
+  }
+
+  .screenlock {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -5;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+  }
+}