adapt-authoring-ui 0.0.1

package/app/modules/editor/course/views/editorCourseEditSidebarView.js

@@ -0,0 +1,28 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var Origin = require('core/origin');
+  var SidebarItemView = require('modules/sidebar/views/sidebarItemView');
+
+  var EditorCourseEditSidebarView = SidebarItemView.extend({
+    events: {
+      'click .editor-project-edit-sidebar-save': 'save',
+      'click .editor-project-edit-sidebar-cancel': 'cancel'
+    },
+
+    save: function(event) {
+      event && event.preventDefault();
+      this.updateButton('.editor-project-edit-sidebar-save', Origin.l10n.t('app.saving'));
+      Origin.trigger('projectEditSidebar:views:save');
+    },
+
+    cancel: function(event) {
+      event && event.preventDefault();
+      Backbone.history.history.back();
+    }
+  }, {
+    template: 'editorCourseEditSidebar'
+  });
+
+  return EditorCourseEditSidebarView;
+});

package/app/modules/editor/course/views/editorCourseEditView.js

@@ -0,0 +1,56 @@
+// 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 EditorCourseEditView = EditorOriginView.extend({
+    className: "course-edit",
+    tagName: "div",
+
+    preRender: function() {
+      this.listenTo(Origin, 'projectEditSidebar:views:save', this.save);
+
+      if (this.model.isNew()) {
+        this.isNew = true;
+        this.$el.addClass('project-detail-hide-hero');
+      }
+      // This next line is important for a proper PATCH request on saveProject()
+      this.originalAttributes = _.clone(this.model.attributes);
+    },
+
+    getAttributesToSave: function() {
+      var changedAttributes = this.model.changedAttributes(this.originalAttributes);
+      // should also include anything that's new 
+      var newAttributes = _.omit(this.model.attributes, Object.keys(this.originalAttributes));
+      _.extend(changedAttributes, newAttributes);
+
+      if(!changedAttributes) {
+        return null;
+      }
+      return _.pick(this.model.attributes, Object.keys(changedAttributes));
+    },
+
+    save: async function() {
+      if(!this.isNew) {
+        return EditorOriginView.prototype.save.apply(this);
+      }
+      this.form.commit();
+      this.model.pruneAttributes();
+      try {
+        const course = await $.ajax({ 
+          url: '/api/content/insertrecusive',
+          method: 'POST',
+          data: JSON.stringify(this.model.attributes), 
+          contentType: 'application/json' 
+        });
+        Origin.router.navigateTo(`editor/${course._id}/menu`);
+      } catch(jqXhr) {
+        this.onSaveError(undefined, jqXhr.responseJSON && jqXhr.responseJSON.message)
+      }
+    },
+  }, {
+    template: 'editorCourseEdit'
+  });
+
+  return EditorCourseEditView;
+});

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

@@ -0,0 +1,26 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var EditorExtensionsEditSidebarView = require('./views/editorExtensionsEditSidebarView');
+  var EditorExtensionsEditView = require('./views/editorExtensionsEditView');
+  var Origin = require('core/origin');
+
+  Origin.on('editor:extensions', function() {
+    Origin.trigger('contentHeader:updateTitle', {
+      breadcrumbs: ['dashboard', 'course', { title: Origin.l10n.t('app.editorextensions') }],
+      title: Origin.editor.data.course.get('title')
+    });
+    // Check whether the user came from the page editor or menu editor
+    var backButtonRoute = `#/editor/${Origin.location.route1}/menu`;
+    var backButtonText = Origin.l10n.t('app.backtomenu');
+    if (Origin.previousLocation.route2 === "page") {
+      backButtonRoute = `#/editor/${Origin.location.route1}/page/${Origin.previousLocation.route3}`;
+      backButtonText = Origin.l10n.t('app.backtopage');
+    }
+    Origin.sidebar.addView(new EditorExtensionsEditSidebarView().$el, {
+      backButtonText: backButtonText,
+      backButtonRoute: backButtonRoute
+    });
+    Origin.contentPane.setView(EditorExtensionsEditView, { model: new Backbone.Model({ _id: Origin.location.route1 }) });
+  });
+});

package/app/modules/editor/extensions/less/extensions.less

@@ -0,0 +1,22 @@
+@import 'fonts';
+
+.extension-checkbox-column {
+  vertical-align: middle;
+  text-align: center;
+}
+
+.extension-management {
+  background-color: @white;
+  border: 1px solid #d6f2f9;
+  margin: 20px;
+  font: @font-title;
+  .tb-title {
+    background-color: transparent;
+    font-size: 110%;
+    color: inherit;
+    text-align: left;
+    padding-top: 40px !important;
+    padding-left: 20px !important;
+    border: none;
+  }
+}

package/app/modules/editor/extensions/templates/editorExtensionsEdit.hbs

@@ -0,0 +1,85 @@
+<div class="extension-management-inner">
+  <div class="extension-management-enabled-extensions-title tb-row tb-title">
+    <h2>{{ t 'app.enabledextensions'}}</h2>
+  </div>
+
+  <div class="extension-management-heading col-row tb-row tb-heading">
+    <div class="extension-management-heading extension-management-heading-title col-20">
+      <h4 class="extension-management-heading-title-inner tb-col-inner">{{t 'app.extension'}}</h4>
+    </div>
+    <div class="extension-management-heading extension-management-heading-description col-60">
+      <h4 class="extension-management-heading-description-inner tb-col-inner">{{t 'app.description'}}</h4>
+    </div>
+    <div class="extension-management-heading extension-management-heading-options col-20 col-centered">
+      <h4 class="pluginType-heading-version-inner tb-col-inner">{{t 'app.options'}}</h4>
+    </div>
+  </div>
+
+  <div class="extension-management-plugins clearfix grid-layout">
+    {{#if enabledExtensions}}
+      {{!-- plugins rendered in here --}}
+      {{#each enabledExtensions}}
+        <div class="extension-management-plugin tb-row tb-row-{{odd @index}}">
+          <div class="extension-management-plugin-inner col-row">
+            <div class="extension-management-plugin-title col-20">
+              <h4 class="extension-management-plugin-title-inner tb-col-inner">{{attributes.displayName}}</h4>
+            </div>
+            <div class="extension-management-plugin-description col-60">
+              <div class="extension-management-plugin-description-inner tb-col-inner">{{attributes.description}}</div>
+            </div>
+            <div class="extension-management-plugin-remove col-20 col-centered">
+              <div class="extension-management-plugin-remove-inner tb-col-inner">
+                <button class="btn alert remove-extension" data-displayName="{{attributes.displayName}}" data-name="{{attributes.name}}" data-id="{{attributes._id}}">{{t 'app.remove'}}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      {{/each}}
+    {{else}}
+      <div class="tb-row">{{t 'app.noextensionsenabled'}}</div>
+    {{/if}}
+  </div>
+
+  <div class="extension-management-enabled-extensions-title tb-row tb-title">
+    <h2>{{ t 'app.availableextensions'}}</h2>
+  </div>
+  <div class="extension-management-heading tb-row col-row tb-heading">
+    <div class="extension-management-heading extension-management-heading-title col-20">
+      <h4 class="extension-management-heading-title-inner tb-col-inner">{{t 'app.extension'}}</h4>
+    </div>
+    <div class="extension-management-heading extension-management-heading-description col-60">
+      <h4 class="extension-management-heading-description-inner tb-col-inner">{{t 'app.description'}}</h4>
+    </div>
+    <div class="extension-management-heading extension-management-heading-options col-20 col-centered">
+      <h4 class="pluginType-heading-version-inner tb-col-inner">{{t 'app.options'}}</h4>
+    </div>
+  </div>
+
+  <div class="extension-management-plugins clearfix grid-layout">
+    {{#if availableExtensions}}
+      {{!-- plugins rendered in here --}}
+      {{#each availableExtensions}}
+        <div class="extension-management-plugin tb-row tb-row-{{odd @index}}">
+            <div class="extension-management-plugin-inner col-row">
+                <div class="extension-management-plugin-title col-20">
+                    <h4 class="extension-management-plugin-title-inner tb-col-inner">{{attributes.displayName}}</h4>
+                </div>
+
+                <div class="extension-management-plugin-description col-60">
+                    <div class="extension-management-plugin-description-inner tb-col-inner">{{attributes.description}}</div>
+                </div>
+
+                <div class="extension-management-plugin-remove col-20 col-centered">
+                    <div class="extension-management-plugin-remove-inner tb-col-inner">
+                        <button class="btn secondary add-extension" data-displayName="{{attributes.displayName}}" data-name="{{attributes.name}}" data-id="{{attributes._id}}">{{t 'app.add'}}</button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+      {{/each}}
+    {{else}}
+    <div class="tb-row">{{t 'app.noextensionsavailable'}}</div>
+    {{/if}}
+  </div>
+</div>

package/app/modules/editor/extensions/templates/editorExtensionsEditSidebar.hbs

@@ -0,0 +1 @@
+<div class="sidebar-item-inner"></div>

package/app/modules/editor/extensions/views/editorExtensionsEditSidebarView.js

@@ -0,0 +1,10 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var SidebarItemView = require('modules/sidebar/views/sidebarItemView');
+
+  var EditorExtensionsEditSidebarView = SidebarItemView.extend({}, {
+    template: 'editorExtensionsEditSidebar'
+  });
+
+  return EditorExtensionsEditSidebarView;
+});

package/app/modules/editor/extensions/views/editorExtensionsEditView.js

@@ -0,0 +1,85 @@
+// 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 EditorExtensionsEditView = EditorOriginView.extend({
+    className: "extension-management",
+    tagName: "div",
+    events: {
+      'click button.remove-extension': 'onRemoveExtensionClicked',
+      'click button.add-extension': 'onAddExtensionClicked'
+    },
+
+    preRender: function() {
+      this.ajaxOptions = {
+        url: `api/content/${Origin.editor.data.config.get('_id')}`, 
+        method: 'PATCH',
+        success: () => Origin.editor.data.config.fetch({ success: () => this.setupExtensions() }), 
+        error: jqXhr => Origin.Notify.alert({ type: 'error', text: jqXhr.responseJSON && jqXhr.responseJSON.message })
+      };
+      this.listenTo(this.model, 'change:enabledExtensions', this.render);
+      this.setupExtensions(() => this.setViewToReady());
+    },
+
+    setupExtensions: function(callback) {
+      var plugins = new ContentPluginCollection(undefined, { type: 'extension' });
+      plugins.fetch({
+        success: () => {
+          const enabledPlugins = Origin.editor.data.config.get('_enabledPlugins');
+          var [enabled, available] = _.partition(plugins.models, e => enabledPlugins.includes(e.get('name')));
+          this.model.set({
+            enabledExtensions: enabled.sort(this.sortByDisplayName),
+            availableExtensions: available.filter(e => e.get('isEnabled')).sort(this.sortByDisplayName)
+          });
+          if(callback) callback();
+
+        },
+        error: e => callback && callback(e)
+      })
+    },
+
+    sortByDisplayName: function(a, b) {
+      if(a.get('displayName') < b.get('displayName')) return -1;
+      if(a.get('displayName') > b.get('displayName')) return 1;
+      return 0;
+    },
+
+    // Event handling
+
+    onAddExtensionClicked: function(event) {
+      $.ajax(Object.assign(this.ajaxOptions, {
+        data: { 
+          _enabledPlugins: [
+            ...Origin.editor.data.config.get('_enabledPlugins'), 
+            $(event.currentTarget).attr('data-name')
+          ]
+        } 
+      }));
+    },
+
+    onRemoveExtensionClicked: function(event) {
+      Origin.Notify.confirm({
+        type: 'warning',
+        title: Origin.l10n.t('app.deleteextension'),
+        text: Origin.l10n.t('app.confirmdeleteextension'),
+        callback: result => {
+          if(!result.isConfirmed) {
+            return;
+          }
+            const toRemove = $(event.currentTarget).attr('data-name');
+            $.ajax(Object.assign(this.ajaxOptions, {
+              data: { 
+                _enabledPlugins: Origin.editor.data.config.get('_enabledPlugins').filter(e => e !== toRemove) 
+              }
+            }));
+        }
+      });
+    }
+  }, {
+    template: 'editorExtensionsEdit'
+  });
+
+  return EditorExtensionsEditView;
+});

package/app/modules/editor/global/collections/editorCollection.js

@@ -0,0 +1,24 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var Origin = require('core/origin');
+
+  var EditorCollection = Backbone.Collection.extend({
+    comparator: 'displayName',
+
+    initialize : function(models, options){
+      this.url = options.url;
+      this._type = options._type;
+      this.on('reset', this.loadedData, this);
+      if(options.autoFetch !== false){
+        this.fetch({ reset:true });
+      }
+    },
+
+    loadedData: function() {
+      Origin.trigger('editorCollection:dataLoaded', this._type);
+    }
+  });
+
+  return EditorCollection;
+});

package/app/modules/editor/global/editorDataLoader.js

@@ -0,0 +1,91 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var _ = require('underscore');
+  var ContentCollection = require('core/collections/contentCollection');
+  var ContentPluginCollection = require('core/collections/contentPluginCollection');
+  var Origin = require('core/origin');
+
+  var isLoaded;
+
+  var Preloader = {
+    /**
+    * Loads course-specific data
+    * Accepts callback for editor:refreshData
+    */
+    load: async function(callback) {
+      if(!Origin.sessionModel.get('isAuthenticated')) {
+        return;
+      }
+      if(!Origin.editor) Origin.editor = {};
+      if(!Origin.editor.data) Origin.editor.data = {};
+
+      isLoaded = false;
+
+      if(await isOutdated()) {
+        try {
+          await Promise.all([
+            new Promise (async (resolve) => {
+              const content = new ContentCollection(undefined, { _courseId: Origin.location.route1 });
+              await content.fetch();
+              Origin.editor.data.content = content;
+              Origin.editor.data.course = content.findWhere({ _type: 'course' });
+              Origin.editor.data.config = content.findWhere({ _type: 'config' });
+              if(!Origin.editor.data.course || !Origin.editor.data.config) {
+                return handleError();
+              }
+              resolve()
+            }),
+            new Promise (async (resolve) => {
+              const componentTypes = new ContentPluginCollection(undefined, { type: 'component' });
+              await componentTypes.fetch();
+              Origin.editor.data.componentTypes = componentTypes;
+              resolve()
+            })
+          ]);
+        } catch(e) {
+          return handleError();
+        }
+      }
+      isLoaded = true;
+
+      Origin.editor.data.lastFetch = new Date().toISOString();
+      if(_.isFunction(callback)) {
+        callback();
+      }
+      Origin.trigger('editor:dataLoaded');
+    },
+    resetCourseData: function() {
+      if(Origin.editor) {
+        Origin.editor.data.course = undefined;
+        Origin.editor.data.config = undefined;
+      }
+    },
+    /**
+    * Makes sure all data has been loaded and calls callback
+    */
+    waitForLoad: function(callback) {
+      isLoaded ? callback.apply(this) : Origin.once('editor:dataLoaded', callback.bind(this));
+    }
+  };
+
+  async function isOutdated() {
+    try {
+      if(Origin.editor.data.course.get('_id') !== Origin.location.route1) {
+        Origin.editor.data.lastFetch = 0
+        return true;
+      }
+    } catch(e) {
+      Origin.editor.data.lastFetch = 0
+      return true;
+    }
+    const [latestDoc] = await $.post('/api/content/query?sort={%22updatedAt%22:-1}&limit=1', {_courseId:Origin.editor.data.course.get('_id')});
+    return !latestDoc || new Date(Origin.editor.data.lastFetch) < new Date(latestDoc.updatedAt);
+  }
+
+  function handleError() {
+    Origin.Notify.alert({ type: 'error', text: 'Failed to fetch course data' });
+    Origin.router.navigateTo('projects');
+  }
+
+  return Preloader;
+});

package/app/modules/editor/global/helpers.js

@@ -0,0 +1,99 @@
+define(function(require) {
+  var Handlebars = require('handlebars');
+  var Origin = require('core/origin');
+
+  var Helpers = {
+    /**
+    * set the page title based on location
+    * expects backbone model
+    */
+    setPageTitle: function(model) {
+      getNearestPage(model, function(page) {
+        var data = {
+          model: model || {},
+          page: page,
+          langString: Origin.l10n.t('app.' + getLangKey())
+        };
+        Origin.trigger('contentHeader:updateTitle', {
+          breadcrumbs: generateBreadcrumbs(data),
+          title: getTitleForModel(data)
+        });
+      });
+    }
+  }
+
+  /**
+  * Private functons
+  */
+
+  function getType() {
+    return Origin.location.route2 || Origin.location.route1;
+  }
+
+  function getAction() {
+    if(Origin.location.route2 === 'component' && Origin.location.route3 === 'new') {
+      return 'edit';
+    }
+    return Origin.location.route4;
+  }
+
+  function generateBreadcrumbs(data) {
+    var type = getType();
+    var action = getAction();
+    var isMenu = type === 'menu';
+    var isEditor = action === 'edit';
+    var crumbs = ['dashboard'];
+
+    if (!isMenu || isEditor) {
+      crumbs.push('course');
+    }
+    if (!isMenu && isEditor) {
+      crumbs.push({
+        title: Origin.l10n.t('app.editorpage'),
+        url: '#/editor/' + data.page.get('_courseId') + '/page/' + data.page.get('_id')
+      });
+    }
+    crumbs.push({ title: data.langString });
+    return crumbs;
+  }
+
+  function getTitleForModel(data) {
+    var modelTitle = data.model.title || data.model.get && data.model.get('title');
+    return modelTitle || Origin.editor.data.course.get('title');
+  }
+
+  function getLangKey() {
+    var type = getType();
+    var action = getAction();
+
+    if ((type === 'page' || type === 'menu') && action === 'edit') {
+      return 'editorpagesettings';
+    }
+    return 'editor' + type;
+  }
+
+  function getNearestPage(model, cb) {
+    var _recurse = function(model) {
+      var type = model.get('_type');
+      
+      if(!type || type === 'course' || type === 'config') {
+        return cb(); // pages don't apply here, so just return
+      }
+      if (type === 'page' || type === 'menu') {
+        return cb(model); // we're at the top of the hierarchy
+      }
+      _recurse(Origin.editor.data.content.findWhere({ _id: model.get('_parentId') }));
+    };
+    // start recursion
+    _recurse(model);
+  }
+
+  function getComponentDisplayName(name) {
+    const plugin = Origin.editor.data.componentTypes.findWhere({ name });
+    return plugin ? plugin.get('displayName') : '';
+  }
+
+  Handlebars.registerHelper('getComponentDisplayName', getComponentDisplayName);
+
+  return Helpers;
+});

package/app/modules/editor/global/less/colorLabels.less

@@ -0,0 +1,55 @@
+[data-colorlabel="colorlabel-1"] {
+    .colorLabel(@colorlabel-1);
+}
+[data-colorlabel="colorlabel-2"] {
+    .colorLabel(@colorlabel-2);
+}
+[data-colorlabel="colorlabel-3"] {
+    .colorLabel(@colorlabel-3);
+}
+[data-colorlabel="colorlabel-4"] {
+    .colorLabel(@colorlabel-4);
+}
+[data-colorlabel="colorlabel-5"] {
+    .colorLabel(@colorlabel-5);
+}
+[data-colorlabel="colorlabel-6"] {
+    .colorLabel(@colorlabel-6);
+}
+[data-colorlabel="colorlabel-7"] {
+    .colorLabel(@colorlabel-7);
+}
+[data-colorlabel="colorlabel-8"] {
+    .colorLabel(@colorlabel-8);
+}
+[data-colorlabel="colorlabel-9"] {
+    .colorLabel(@colorlabel-9);
+}
+[data-colorlabel="colorlabel-10"] {
+    .colorLabel(@colorlabel-10);
+}
+[data-colorlabel="colorlabel-11"] {
+    .colorLabel(@colorlabel-11);
+}
+[data-colorlabel="colorlabel-12"] {
+    .colorLabel(@colorlabel-12);
+}
+[data-colorlabel="colorlabel-13"] {
+    .colorLabel(@colorlabel-13);
+}
+[data-colorlabel="colorlabel-14"] {
+    .colorLabel(@colorlabel-14);
+}
+
+.colorLabel(@colorlabel) {
+    .editor-menu &.editor-menu-item .editor-menu-item-inner,
+    .editor-view &.article,
+    .editor-view &.block,
+    .editor-view &.component,
+    .editor-view &.page .page-detail {
+        box-shadow: -4px 0 0 @colorlabel;
+        &.hovering {
+            box-shadow: -4px 0 0 @colorlabel, 0px 0 4px @colorlabel;
+        }
+    }
+}