adapt-authoring-ui 0.0.1

package/app/modules/editor/themeEditor/views/editorThemingView.js

@@ -0,0 +1,304 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var ContentPluginCollection = require('core/collections/contentPluginCollection');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+  var Helpers = require('core/helpers');
+  var Origin = require('core/origin');
+  var PresetCollection = require('../collections/editorPresetCollection.js');
+  var PresetModel = require('../models/editorPresetModel.js');
+  var PresetEditView = require('./editorPresetEditView.js');
+
+  var ThemingView = EditorOriginView.extend({
+    tagName: 'div',
+    className: 'theming',
+    events: {
+      'change .theme select': 'onThemeChanged',
+      'change .preset select': 'resetFormSettings',
+      'change .form-container form': 'updateRestorePresetButton',
+      'click button.edit': 'showPresetEdit'
+    },
+
+    initialize: async function() {
+      this.listenTo(Origin, {
+        'editorThemingSidebar:views:save': this.saveData,
+        'editorThemingSidebar:views:savePreset': this.onSavePresetClicked,
+        'editorThemingSidebar:views:resetToPreset': this.resetFormSettings,
+        'managePresets:edit': this.onEditPreset,
+        'managePresets:delete': this.onDeletePreset
+      });
+      await this.initData();
+      EditorOriginView.prototype.initialize.apply(this, arguments);
+      this.render();
+    },
+
+    initData: async function() {
+      this.model = new Backbone.Model(Origin.editor.data.course.get('themeVariables'));
+      this.themes = new ContentPluginCollection(undefined, { type: 'theme' });
+      this.presets = new PresetCollection();
+      
+      await Promise.all([this.themes.fetch(), this.presets.fetch()]);
+
+      this.listenTo(this.model, 'change', this.renderForm);
+      this.listenTo(this.themes, 'change', this.updateThemeSelect);
+      this.listenTo(this.presets, 'change, destroy', this.updatePresetSelect);
+    },
+
+    render: async function() {
+      this.$el.hide();
+
+      EditorOriginView.prototype.render.apply(this, arguments);
+
+      Origin.trigger('contentHeader:updateTitle', {
+        breadcrumbs: ['dashboard','course', { title: Origin.l10n.t('app.themeeditor') }],
+        title: Origin.l10n.t('app.themingtitle')
+      });
+      await this.renderForm();
+      this.updateThemeSelect();
+      this.updatePresetSelect();
+      this.updateRestorePresetButton();
+      this.setViewToReady();
+
+      this.$el.show();
+    },
+
+    renderForm: async function() {
+      this.removeForm();
+      let didError = false;
+      try {
+        this.schemaName = `${this.getSelectedTheme().get('targetAttribute').slice(1)}-theme`;
+        this.form = await Origin.scaffold.buildForm({ model: this.model, schemaType: this.schemaName });
+        this.$('.form-container').html(this.form.el);  
+      } catch(e) {
+        didError = true;
+      }
+      this.$('.theme-selector').toggleClass('show-preset-select', !didError);
+      this.$('.empty-message').toggle(didError);
+      this.$('.editable-theme').toggle(!didError);
+      $('.editor-theming-sidebar-reset').toggle(!didError);
+      
+      this.$el.find('fieldset:not(:has(>.field))').addClass('empty-fieldset');
+      this.$('.theme-customiser').show();
+      Origin.trigger('theming:showPresetButton', true);
+      // HACK defer needed to allow colour pickers to render
+      return new Promise((resolve) => _.defer(() => resolve()));
+    },
+
+    removeForm: function() {
+      this.$('.form-container').empty();
+      this.$('.theme-customiser').hide();
+
+      this.form = null;
+
+      Origin.trigger('theming:showPresetButton', false);
+    },
+
+    updateSelect: function({ className, items, value }) {
+      var $select = this.$(`.${className} select`);
+      $('option', $select).remove();
+      if(items.length) {
+        items.forEach(i => {
+          if(i.value === value) i.selected = 'selected';
+          $select.append($(`<option>`, i));
+        });
+      }
+      $select.attr({ disabled: !items.length });
+    },
+
+    updateThemeSelect: function() {
+      this.updateSelect({
+        className: 'theme',
+        value: this.getSelectedTheme().get('name'),
+        items: [
+          { value: "", disabled: 'disabled', text: Origin.l10n.t('app.selectinstr') },
+          ...this.themes.where({ isEnabled: true }).map(t => Object({ value: t.get('name'), text: t.get('displayName') }))
+        ]
+      });
+    },
+
+    updatePresetSelect: function() {
+      var theme = this.$('.theme select').val();
+      var presets = this.presets.where({ parentTheme: theme });
+      var selectedPresetId = this.getSelectedPreset(undefined, '_id');
+
+      this.updateSelect({
+        className: 'preset',
+        value: selectedPresetId,
+        items: [
+          { value: "", text: Origin.l10n.t('app.nopresets') },
+          ...presets.map(t => Object({ value: t.get('_id'), text: t.get('displayName') }))
+        ]
+      });
+      presets.length ? this.$('button.edit').show() : this.$('button.edit').hide();
+    },
+
+    showPresetEdit: function(event) {
+      event && event.preventDefault();
+      var theme = this.$('.theme select').val();
+      var presets = new Backbone.Collection(this.presets.where({ parentTheme: theme }));
+      var view = new PresetEditView({ model: new Backbone.Model({ presets }) });
+      $('body').append(view.el);
+    },
+    
+    resetFormSettings: function() {
+      this.updateRestorePresetButton(false);
+      this.model.set(this.getSelectedPreset() || this.getDefaultThemeSettings());
+    },
+
+    // Data persistence
+
+    validateForm: function() {
+      if (!this.getSelectedTheme()) {
+        Origin.Notify.alert({ type: 'error', text: Origin.l10n.t('app.errornothemeselected') });
+        return false;
+      }
+      return true;
+    },
+
+    savePreset: function(presetName) {
+      this.form.commit();
+      new PresetModel().save({
+        displayName: presetName,
+        parentTheme: this.getSelectedTheme().get('name'),
+        properties: this.model.attributes
+      }, {
+        success: model => {
+          this.presets.add(model);
+          this.updateRestorePresetButton(false);
+          window.setTimeout(() => this.$('.preset select').val(model.get('_id')), 1);
+        },
+        error: this.onError
+      });
+    },
+
+    saveData: async function(event) {
+      event && event.preventDefault();
+
+      if (!this.validateForm()) {
+        return Origin.trigger('sidebar:resetButtons');
+      }
+      try {
+        await this.postThemeData();
+        await this.postPresetData();
+        await this.postSettingsData();
+        Origin.trigger('editingOverlay:views:hide');
+        Origin.trigger('editor:refreshData', this.navigateBack.bind(this), this);
+
+      } catch(e) {
+        this.onError(undefined, Origin.l10n.t('app.errorsave'));
+        this.navigateBack();
+      }
+    },
+
+    postThemeData: function() {
+      const oldTheme = Origin.editor.data.config.get('_theme');
+      const newTheme = this.getSelectedTheme().get('name');
+      if(newTheme === oldTheme) {
+        return;
+      }
+      return $.ajax({
+        url: `api/content/${Origin.editor.data.config.get('_id')}`,
+        method: 'PATCH',
+        data: { 
+          _theme: newTheme,
+          _enabledPlugins: [...Origin.editor.data.config.get('_enabledPlugins').filter(p => p !== oldTheme), newTheme]
+        }
+      });
+    },
+
+    postPresetData: function() {
+      var selectedPresetId = this.getSelectedPreset(false, '_id');
+      if(!selectedPresetId) return Promise.resolve();
+      return $.post(`api/coursethemepresets/${selectedPresetId}/apply/${Origin.editor.data.config.get('_courseId')}`);
+    },
+
+    postSettingsData: function() {
+      return new Promise((resolve, reject) => {
+        if(!this.form) return resolve();
+        this.form.commit();
+        Origin.editor.data.course.save({ themeVariables: this.model.attributes }, { error: () => reject(), success: () => resolve() });
+      });
+    },
+
+    navigateBack: function(event) {
+      event && event.preventDefault();
+      Backbone.history.history.back();
+      this.remove();
+    },
+
+    getSelectedTheme: function() {
+      return this.themes.findWhere({ name: $('select#theme', this.$el).val() || Origin.editor.data.config.get('_theme') });
+    },
+    // param used to only return the val() (and ignore model data)
+    getSelectedPreset: function(includeCached = true, key = 'properties') {
+      var $select = $('select#preset', this.$el);
+      var presetId = $select && $select.val();
+      var preset = this.presets.findWhere({ _id: presetId ? presetId : includeCached && Origin.editor.data.config.get('_themePreset') })
+      return preset && preset.get(key);
+    },
+
+    getDefaultThemeSettings: function() {
+      const getSchemaDefaults = (m, o) => {
+        Object.entries(o).forEach(([k,v]) => m[k] = v.subSchema ? getSchemaDefaults({}, v.subSchema) : v.default);
+        return m;
+      };
+      return getSchemaDefaults({}, this.form.schema);
+    },
+
+    getCurrentSettings: function() {
+      return !this.form ? this.model.attributes : _.mapObject(this.form.fields, field => field.getValue());
+    },
+
+    updateRestorePresetButton: function(shouldShow) {
+      if(typeof shouldShow === 'undefined') { // no flag, so determine button visibility based on changed settings
+        shouldShow = !_.isEqual(this.getSelectedPreset() || this.getDefaultThemeSettings(), this.getCurrentSettings());
+      }
+      $('.editor-theming-sidebar-reset').css('visibility', shouldShow ? 'visible' : 'hidden');
+    },
+
+    // Event handling
+
+    onEditPreset: function({ oldValue, newValue }) {
+      this.presets.findWhere({ displayName: oldValue }).save({ displayName: newValue });
+    },
+
+    onDeletePreset: function(preset) {
+      this.presets.findWhere({ displayName: preset }).destroy();
+    },
+
+    onError: function(collection, response, options) {
+      Origin.Notify.alert({ type: 'error', text: response });
+    },
+
+    onThemeChanged: function() {
+      this.updatePresetSelect();
+      this.renderForm();
+      this.updateRestorePresetButton(false);
+    },
+
+    onSavePresetClicked: function() {
+      Origin.Notify.alert({
+        type: 'input',
+        text: Origin.l10n.t('app.presetinputtext'),
+        preConfirm: presetName => {
+          let msg;
+          if(!presetName) {
+            msg = Origin.l10n.t('app.invalidempty'); // no falsies
+          }
+          if(this.presets.findWhere({ displayName: presetName, parentTheme: this.$('.theme select').val() })) {
+            msg = Origin.l10n.t('app.duplicatepreseterror'); // name already exists
+          }
+          if(msg) {
+            Origin.Notify.Swal.showValidationMessage(msg);
+            return false;
+          }
+        }, // escape text to avoid injection attacks
+        callback: ({ value, isConfirmed }) => isConfirmed && this.savePreset(Helpers.escapeText(value))
+      });
+    }
+  }, {
+    template: 'editorTheming'
+  });
+
+  return ThemingView;
+});

package/app/modules/frameworkImport/index.js

@@ -0,0 +1,32 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var FrameworkImportView = require('./views/frameworkImportView.js');
+  var FrameworkImportSidebarView = require('./views/frameworkImportSidebarView.js');
+
+  var featureScopes = ["import:adapt"];
+  var hasPermission = false;
+
+  Origin.on('origin:dataReady login:changed', function init() {
+    Origin.router.restrictRoute('frameworkImport', featureScopes);
+    hasPermission = Origin.sessionModel.hasScopes(featureScopes);
+  });
+
+  Origin.on('router:frameworkImport', renderMainView);
+  Origin.on('projects:postRender', data => hasPermission && data.action !== 'edit' && renderImportButton(data));
+
+  function renderImportButton(data) {
+    $('button.projects-sidebar-import-course').remove(); // remove existing button
+    if(!hasPermission) {
+      return;
+    }
+    var $btn = $(Handlebars.partials.part_frameworkImportButton());
+    $('.projects-sidebar-add-course').after($btn);
+    $btn.click(() => Origin.router.navigateTo('frameworkImport'));
+  }
+
+  function renderMainView(location, subLocation, action) {
+    Origin.contentPane.setView(FrameworkImportView, { model: new Backbone.Model() });
+    Origin.sidebar.addView(new FrameworkImportSidebarView().$el);
+  }
+});

package/app/modules/frameworkImport/less/frameworkImport.less

@@ -0,0 +1,101 @@
+@import 'colours';
+@import 'sharedStyles';
+
+@color-error: @alert-color;
+@color-warn: @warning-color;
+@color-info: @info-color;
+@color-success: @success-color;
+
+.frameworkImport {
+  .summaryText {
+    margin-bottom: 30px;;
+    padding: 15px;
+    background-color: @color-success;
+    &.error { background-color: @color-error; }
+    color: white;
+    font-size: 16px;
+    font-weight: @font-weight-bold;
+    text-align: center;
+    border-radius: 3px;
+  }
+  .inner {
+    .form-container-style;
+    padding: 30px;
+
+    p {
+      margin-bottom: 30px;
+    }
+
+    form .form-group {
+      border: none;
+      .field-error {
+        padding-bottom: 5px;
+      }
+    }
+    
+    .content,
+    .versions {
+      margin-bottom: 20px;
+      h2 {
+        font-size: 16px;
+      }
+      table {
+        &.full-width { width: 100%; }
+        th { 
+          padding: 15px 10px;
+          font-size: 14px;
+        }
+        td { 
+          padding: 10px;
+          text-align: center; 
+        }
+        .left { text-align: left; }
+      }
+      tr.UPDATE_BLOCKED, tr.INVALID { color: @color-error; }
+      tr.INSTALLED { color: @color-info; }
+      tr.UPDATED { color: @color-success; }
+      tr.OLDER { color: @color-warn; }
+      tr.NO_CHANGE { color: rgba(0,0,0,0.7); }
+    }
+
+    .statusReport > div {
+      border-radius: 3px;
+      border: 1px solid;
+      margin-bottom: 20px;
+      h3 {
+        color: white;
+        padding: 15px;
+        font-size: 16px;
+      }
+      .messages {
+        padding: 10px;
+        .message {
+          margin-bottom: 10px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+          .code {
+            font-weight: bold;
+          }
+          .data {
+            .key {
+              font-weight: bold;
+            }
+          }
+        }
+      }
+      &.error {
+        border-color: @color-error;
+        h3 { background-color: @color-error; }
+      }
+      &.warn {
+        border-color: @color-warn;
+        h3 { background-color: @color-warn; }
+      }
+      &.info {
+        border-color: @color-info;
+        h3 { background-color: @color-info; }
+      }
+    }
+  }
+}

package/app/modules/frameworkImport/templates/frameworkImport.hbs

@@ -0,0 +1,58 @@
+<div id="import_upload" class="inner">
+  <form class="frameworkImport forms" action="api/adapt/import" method="post" autocomplete="off">
+    <div class="form-group">
+      <div class="field field-file">
+        <label for="course">
+          {{t 'app.assetfile'}} <span class="req">*</span>
+          <span class="error"></span>
+        </label>
+        <div class="field-help">
+          {{t 'app.importframeworkinstruction'}}
+        </div>
+        {{#if path}}
+        <div class="asset-management-edit-asset-file">
+          {{t 'app.importframeworkfileuploaded'}}
+        </div>
+        {{else}}
+        <input type="file" class="asset-file" name="course">
+        {{maxUploadSize}}
+        <div class="progress-container">
+          <div class="progress-bar">
+            <div class="progress-percent">0%</div>
+          </div>
+        </div>
+        {{/if}}
+      </div>
+      <div class="field field-assets">
+        <label for="tags">{{t 'app.importassetfolderstitle'}}</label>
+        <div class="field-help">
+          {{t 'app.importassetfoldersinstruction'}}
+        </div>
+        <div>
+          <input type="text" autocomplete="off" class="width-30" id="formAssetFolders" name="formAssetFolders" placeholder="{{t 'app.importassetfoldersplaceholder'}}" value="" />
+        </div>
+      </div>
+      <div class="field field-tags">
+        <label for="tags">{{t 'app.tags'}}</label>
+        <input type="text" autocomplete="off" class="width-30" id="tags_control" name="tags_control" value="{{pickCSV tags "title"}}" />
+      </div>
+      <input type="hidden" name="tags" id="tags" />
+    </div>
+  </form>
+</div>
+
+<div id="import_details" class="display-none">
+  <form class="frameworkImportDetails forms" action="importsource" method="post" autocomplete="off">
+    <div class="inner framework-versions display-none"></div>
+    <div class="inner import-summary">
+      <div class="title"></div>
+      <div class="description"></div>
+    </div>
+    <div class="inner plugin-list display-none">
+      <div class="red key-field display-none"><span class="key">{{t 'app.pluginredlabel'}}</span> - {{t 'app.pluginredkey'}}</div>
+      <div class="amber key-field display-none"><span class="key">{{t 'app.pluginamberlabel'}}</span> - {{t 'app.pluginamberkey'}}</div>
+      <div class="green-update key-field display-none"><span class="key">{{t 'app.plugingreenupdatelabel'}}</span> - {{t 'app.plugingreenupdatekey'}}</div>
+      <div class="green-install key-field display-none"><span class="key">{{t 'app.plugingreeninstalllabel'}}</span> - {{t 'app.plugingreeninstallkey'}}</div>
+    </div>
+  </form>
+</div>

package/app/modules/frameworkImport/templates/frameworkImportSidebar.hbs

@@ -0,0 +1,12 @@
+<div class="separator"></div>
+<div class="sidebar-item-inner">
+  <button type="submit" class="action-primary frameworkimport import display-none">
+    <span>{{t 'app.importcourse'}}</span>
+  </button>
+  <button type="submit" class="action-tertiary frameworkimport check">
+    <span>{{t 'app.checkimport'}}</span>
+  </button>
+  <button type="button" class="cancel action-secondary">
+    <span>{{t 'app.cancel'}}</span>
+  </button>
+</div>

package/app/modules/frameworkImport/templates/frameworkImportSummary.hbs

@@ -0,0 +1,40 @@
+<div class="frameworkImport">
+    <div class="summaryText {{#unless canImport}}error{{/unless}}">
+      {{#if canImport}}
+        {{t 'app.coursecanbeimported'}}
+      {{else}}
+        {{t 'app.coursecannotbeimported'}}
+      {{/if}}
+    </div>
+  <div class="inner">
+    <p>Find below a summary of the course being imported.</p>
+    <div class="statusReport">
+      {{> part_frameworkImportStatusMessages type='error' messages=statusReport.error heading='Errors'}}
+      {{> part_frameworkImportStatusMessages type='warn' messages=statusReport.warn heading='Warnings'}}
+      {{> part_frameworkImportStatusMessages type='info' messages=statusReport.info heading='Information'}}
+    </div>
+    <div class="versions">
+      <h2>Plugin versions</h2>
+      <p>See below for a summary of the actions to be taken on the course's installed plugins.</p>
+      <table class="full-width">
+        <thead>
+          <tr>
+            <th class="left" scope="col">Name</th>
+            <th scope="col">Installed version</th>
+            <th scope="col">Import version</th>
+            <th scope="col">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{#each versions}}
+            <tr class="{{status}}">
+              <td class="left" scope="col">{{name}}</td>
+              <td scope="col">{{versions.[0]}}</td>
+              <td scope="col">{{versions.[1]}}</td>
+              <td scope="col">{{t statusKey}}</td>
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </div>
+</div>

package/app/modules/frameworkImport/templates/partials/part_frameworkImportButton.hbs

@@ -0,0 +1,3 @@
+<button class="projects-sidebar-import-course action-secondary">
+  <span class="projects-sidebar-import-course-inner">{{t 'app.importcourse'}}</span>
+</button>

package/app/modules/frameworkImport/templates/partials/part_frameworkImportStatusMessages.hbs

@@ -0,0 +1,22 @@
+{{#if messages}}
+  <div class="{{type}}">
+    <h3>{{heading}}</h3>
+    <div class="messages">
+      {{#each messages}}
+        <div class="message">
+          <div class="code">{{t codeKey}}</div>
+          {{#if data}}
+            <div class="data">
+              {{#each data}}
+                <div>
+                  <span class="key">{{@key}}</span>
+                  <span class="value">{{this}}</span>
+                </div>
+              {{/each}}
+            </div>
+          {{/if}}
+        </div>
+      {{/each}}
+    </div>
+  </div>
+{{/if}}

package/app/modules/frameworkImport/views/frameworkImportSidebarView.js

@@ -0,0 +1,31 @@
+// 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 FrameworkImportSidebarView = SidebarItemView.extend({
+    events: {
+      'click button.check': 'check',
+      'click button.import': 'import',
+      'click button.cancel': 'goBack'
+    },
+
+    check: function(event) {
+      event && event.preventDefault();
+      Origin.trigger('frameworkImport:check');
+    },
+
+    import: function(event) {
+      event && event.preventDefault();
+      Origin.trigger('frameworkImport:import');
+    },
+
+    goBack: function(event) {
+      event && event.preventDefault();
+      Origin.router.navigateToDashboard();
+    }
+  }, {
+    template: 'frameworkImportSidebar'
+  });
+  return FrameworkImportSidebarView;
+});