adapt-authoring-ui 0.0.1

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

@@ -0,0 +1,73 @@
+.sweet-alert .sa-input-error {
+  top: 24px !important;
+}
+
+.sidebar {
+  button.short {
+    height: 35px !important;
+    padding: 0;
+  }
+}
+
+.theming-inner {
+  .error {
+    position: inherit;
+    padding: 30px 30px 0 30px;
+    color: @alert-color;
+    font-size: 17px;
+    font-weight: @font-weight-bold;
+    text-align: center;
+    max-width: 800px;
+  }
+  .header {
+    .form-container-style;
+    .description {
+      padding-bottom: 15px;
+    }
+    .tip {
+      padding-top: 35px;
+    }
+  }
+  .title {
+    font-size: 16px;
+    font-weight: @font-weight-bold;
+    margin-bottom: 30px;
+  }
+  button {
+    margin-right: 5px;
+  }
+  .theme-selector {
+    .tile {
+      label {
+        font-weight: @font-weight-bold;
+        padding-right: 5px;
+      }
+      padding-right: 15px;
+      display: inline-block;
+      select {
+        min-width: 150px;
+      }
+    }
+
+    &.show-preset-select {
+      select {
+        width: 180px;
+      }
+    }
+    .edit.btn.secondary {
+      display: inline-block;
+      padding: 7px;
+      margin-left: 15px;
+    }
+  }
+
+  .theme-customiser {
+    .form-container {
+      fieldset {
+        &.empty-fieldset {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/app/modules/editor/themeEditor/models/editorModel.js

@@ -0,0 +1,62 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+    var Backbone = require('backbone');
+    var Origin = require('core/origin');
+
+    var EditorModel = Backbone.Model.extend({
+      idAttribute: '_id',
+      whitelistAttributes: null,
+      _type: 'theme',
+
+      initialize : function() {
+        this.on('sync change', this.loadedData, this);
+        this.fetch();
+      },
+
+      loadedData: function() {
+        if(this._siblings) this._type = this._siblings;
+        Origin.trigger('editorModel:dataLoaded', this._type);
+      },
+
+      getParent: function() {
+        if(this.get('_type') !== 'course') {
+          return Origin.editor.data.content.findWhere({ _id: this.get('_parentId') });
+        }
+      },
+
+      getSiblings: function(shouldIncludeSelf) {
+        var siblings = Origin.editor.data.content.where({ _parentId: this.get('_parentId') });
+        if (!shouldIncludeSelf) siblings.remove(this.get('id'));
+        return new Backbone.Collection(siblings);
+      },
+
+      getChildren: function() {
+        return new Backbone.Collection(Origin.editor.data.content.where({ _parentId: this.get("_id") }));
+      },
+
+      setOnChildren: function(key, value, options) {           
+        if(this._children) {
+          this.getChildren().each(function(child) { child.setOnChildren.apply(child, arguments); });
+        }
+      },
+      // Remove any attributes which are not on the whitelist (useful to call before a save)
+      pruneAttributes: function() {
+        if(this.whitelistAttributes) { 
+          Object.keys(this.attributes).forEach(function(key) {
+            if (!_.contains(this.whitelistAttributes, key)) this.unset(key);
+          }, this);
+        }
+      },
+
+      serialize: function() {
+        return JSON.stringify(this);
+      },
+
+      serializeChildren: function() {
+        return this.getChildren().reduce(function(s,c) { return s + c.serialize(); }, '');  
+      }
+    });
+
+    return EditorModel;
+
+});

package/app/modules/editor/themeEditor/models/editorPresetModel.js

@@ -0,0 +1,6 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var EditorModel = require('./editorModel');
+  var EditorPresetModel = EditorModel.extend({ urlRoot: 'api/coursethemepresets' });
+  return EditorPresetModel;
+});

package/app/modules/editor/themeEditor/templates/editorPresetEdit.hbs

@@ -0,0 +1,31 @@
+<div class="presetEdit-inner">
+  <button class="button close"><i class="fa fa-times"></i></button>
+  <div class="title">{{t 'app.presetedittitle'}}</div>
+  <div class="description">{{t 'app.preseteditdesc'}}</div>
+  <div class="presets">
+    {{#each presets.models}}
+      <div class="preset" data-name="{{attributes.displayName}}">
+        <div class="name">
+          <div class="label">{{attributes.displayName}}</div>
+          <button class="button edit btn secondary">
+            {{t 'app.themepresetedit'}}
+          </button>
+          <button class="button delete btn alert">
+            {{t 'app.themepresetdelete'}}
+          </button>
+        </div>
+        <div class="nameEdit">
+          <div class="preset-error display-none"></div>
+          <input type="text" value="{{attributes.displayName}}">
+          <button class="button save btn secondary">
+            {{t 'app.themepresetsave'}}
+          </button>
+          <button class="button cancel btn primary-hollow">
+            {{t 'app.themepresetcancel'}}
+          </button>
+        </div>
+      </div>
+    {{/each}}
+  </div>
+</div>
+<div class="screenlock"></div>

package/app/modules/editor/themeEditor/templates/editorTheming.hbs

@@ -0,0 +1,35 @@
+<div class="theming-inner">
+  <div class="error display-none">
+    {{! content dynamically replaced with error messages }}
+  </div>
+  <div class="header">
+    <div class="inner">
+      <div class="title">{{t 'app.choosethemetitle'}}</div>
+      <div class="description editable-theme">{{{t 'app.choosethemedesc'}}}</div>
+      <div class="empty-message description">{{t 'app.themenoteditablebody'}}</div>
+      <div class="theme-selector">
+        <div class="theme tile">
+          <label>{{t 'app.themeselectlabel'}}</label>
+          <select id="theme" disabled="true">
+            <option value="" disabled selected>{{t 'app.themeselectinstr'}}</option>
+          </select>
+        </div>
+        <div class="preset tile editable-theme">
+          <label>{{t 'app.presetselectlabel'}}</label>
+          <select id="preset" disabled="true">
+            <option value="" disabled selected>{{t 'app.presetselectinstr'}}</option>
+          </select>
+        </div>
+        <button class="edit btn secondary editable-theme">
+          {{t 'app.presetedit'}}
+        </button>
+      </div>
+      <div class="tip editable-theme">{{{t 'app.themepresettip'}}}</div>
+    </div>
+  </div>
+  <div class="theme-customiser">
+    <div class="form-container">
+      {{! Leave this div empty, anything inside will be replaced with the form. }}
+    </div>
+  </div>
+</div>

package/app/modules/editor/themeEditor/templates/editorThemingSidebar.hbs

@@ -0,0 +1,23 @@
+<div class="separator"></div>
+<div class="sidebar-item-inner">
+  <button class="editor-theming-sidebar-save action-primary">
+    <span>
+      {{t 'app.save'}}
+    </span>
+  </button>
+  <button class="editor-theming-sidebar-savePreset short secondary-hollow action-btn">
+    <span>
+      {{t 'app.savepreset'}}
+    </span>
+  </button>
+  <button class="editor-theming-sidebar-reset short action-secondary">
+    <span>
+      {{t 'app.restorepreset'}}
+    </span>
+  </button>
+  <button class="editor-theming-sidebar-cancel action-secondary">
+    <span>
+      {{t 'app.cancel'}}
+    </span>
+  </button>
+</div>

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

@@ -0,0 +1,98 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var _ = require('underscore');
+  var Backbone = require('backbone');
+  var Handlebars = require('handlebars');
+  var Origin = require('core/origin');
+  var Helpers = require('core/helpers');
+
+  var PresetEditView = Backbone.View.extend({
+    tagName: 'div',
+    className: 'presetEdit',
+
+    events: {
+      'click button.button.close': 'onCloseClicked',
+      'click button.button.edit': 'onEditClicked',
+      'click button.button.save': 'onSaveClicked',
+      'click button.button.cancel': 'onCancelClicked',
+      'click button.button.delete': 'onDeleteClicked'
+    },
+
+    initialize: function() {
+      this.listenTo(this.model.get('presets'), 'change', this.render);
+      this.render();
+    },
+
+    render: function() {
+      var template = Handlebars.templates[this.constructor.template];
+      this.$el.html(template(this.model.toJSON()));
+      return this;
+    },
+
+    onCloseClicked: function(event) {
+      event && event.preventDefault();
+      this.remove();
+    },
+
+    onEditClicked: function(event) {
+      event && event.preventDefault();
+      var $preset = $(event.currentTarget).closest('.preset');
+      $('.name', $preset).hide();
+      var $nameEdit = $('.nameEdit', $preset);
+      var $nameEditInput = $nameEdit.find('input');
+      var existingName = $nameEditInput.val();
+      $nameEdit.show();
+      $nameEditInput.val('').focus().val(existingName);
+    },
+
+    onSaveClicked: function(event) {
+      event && event.preventDefault();
+      var $preset = $(event.currentTarget).closest('.preset');
+      // look out for injection attacks
+      var newValue = Helpers.escapeText($('input', $preset).val());
+
+      if (newValue === '') {
+        $preset.find('.preset-error').text(Origin.l10n.t('app.required')).removeClass('display-none');
+        return;
+      }
+
+      var theme = $('.theme select').val();
+      var presets = this.model.get('presets').where({ parentTheme: theme, displayName: newValue });
+      if (presets.length > 0) {
+          $preset.find('.preset-error').text(Origin.l10n.t('app.duplicatepreseterror')).removeClass('display-none');
+          return;
+      }
+
+      Origin.trigger('managePresets:edit', {
+        oldValue: $preset.attr('data-name'),
+        newValue: newValue
+      });
+    },
+
+    onCancelClicked: function(event) {
+      event && event.preventDefault();
+      var $preset = $(event.currentTarget).closest('.preset');
+      $preset.find('.preset-error').addClass('display-none');
+      $('.nameEdit', $preset).hide();
+      $('.name', $preset).show();
+    },
+
+    onDeleteClicked: function(event) {
+      event && event.preventDefault();
+      var self = this;
+      var presetName = $(event.currentTarget).closest('.preset').attr('data-name');
+      Origin.Notify.confirm({
+        text: Origin.l10n.t('app.presetdeletetext', { preset: presetName }),
+        callback: function(result) {
+          if (!result.isConfirmed) return;
+          Origin.trigger('managePresets:delete', presetName);
+          self.render();
+        }
+      });
+    }
+  }, {
+    template: 'editorPresetEdit'
+  });
+
+  return PresetEditView;
+});

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

@@ -0,0 +1,62 @@
+// 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 EditorThemingSidebarView = SidebarItemView.extend({
+    events: {
+      'click .editor-theming-sidebar-save': 'saveEditing',
+      'click .editor-theming-sidebar-savePreset': 'savePreset',
+      'click .editor-theming-sidebar-reset': 'reset',
+      'click .editor-theming-sidebar-cancel': 'cancelEditing'
+    },
+
+    initialize: function() {
+      SidebarItemView.prototype.initialize.apply(this, arguments);
+      this.listenTo(Origin, 'theming:showPresetButton', this.showPresetButton);
+    },
+
+    showPresetButton: function(show) {
+      var btn = this.$('.editor-theming-sidebar-savePreset');
+      if (show) {
+        btn.show();
+      } else {
+        btn.hide();
+      }
+    },
+
+    saveEditing: function(event) {
+      event && event.preventDefault();
+      this.updateButton('.editor-theming-sidebar-save', Origin.l10n.t('app.saving'));
+      Origin.trigger('editorThemingSidebar:views:save');
+    },
+
+    savePreset: function(event) {
+      event && event.preventDefault();
+      Origin.trigger('editorThemingSidebar:views:savePreset');
+    },
+
+    reset: function(event) {
+      event && event.preventDefault();
+      Origin.Notify.confirm({
+        type: 'warning',
+        text: Origin.l10n.t('app.restorepresettext'),
+        callback: result => {
+          if(result.isConfirmed) Origin.trigger('editorThemingSidebar:views:resetToPreset')
+        }
+      });
+    },
+
+    cancelEditing: function(event) {
+      event && event.preventDefault();
+      Origin.trigger('editorThemingSidebar:views:cancel');
+      Backbone.history.history.back();
+      Origin.trigger('editingOverlay:views:hide');
+    }
+  }, {
+    template: 'editorThemingSidebar'
+  });
+
+  return EditorThemingSidebarView;
+});