adapt-authoring-ui 0.0.1

package/app/modules/scaffold/templates/scaffoldDisplayTitle.hbs

@@ -0,0 +1,8 @@
+<input type="text" autocomplete="off">
+<button class="scaffold-display-title-lock">
+  <i class="fa fa-lock" title="{{t 'app.titlelock'}}"></i>
+  <i class="fa fa-unlink" title="{{t 'app.titleunlock'}}"></i>
+</button>
+<button class="scaffold-display-title-clear">
+  <i class="fa fa-times-circle" title="{{t 'app.delete'}}"></i>
+</button>

package/app/modules/scaffold/templates/scaffoldEditHtml.hbs

@@ -0,0 +1 @@
+<div class="ql-edit-html-overlay-inner" contenteditable=true></div>

package/app/modules/scaffold/templates/scaffoldFile.hbs

@@ -0,0 +1 @@
+<input class="scaffold-file" type="file" name="{{name}}"/>

package/app/modules/scaffold/templates/scaffoldItemsModal.hbs

@@ -0,0 +1,14 @@
+<div class="scaffold-items-modal-sidebar">
+  <div class="scaffold-items-modal-sidebar-inner">
+    {{#if title}}
+    <div class="scaffold-items-modal-header">
+      <h4>{{title}}</h4>
+    </div>
+    {{/if}}
+    <div class="scaffold-items-modal-body">{{content}}</div>
+    <div class="scaffold-items-modal-footer">
+      <a href="#" class="btn primary scaffold-items-modal-ok" data-action="ok">{{t 'app.ok'}}</a>
+      <a href="#" class="btn primary-hollow scaffold-items-modal-cancel" data-action="cancel">{{t 'app.cancel'}}</a>
+    </div>
+  </div>
+</div>

package/app/modules/scaffold/templates/scaffoldModalOverlay.hbs

@@ -0,0 +1 @@
+<div class="scaffold-modal-overlay"></div>

package/app/modules/scaffold/templates/scaffoldUsersOption.hbs

@@ -0,0 +1,8 @@
+<div class="option" data-disabled={{disabled}}>
+  {{#if name}}
+    <span class="name">{{name}}</span>
+    <span class="email">&lt;{{email}}&gt;</span>
+  {{else}}
+    <span class="name">{{email}}</span>
+  {{/if}}
+</div>

package/app/modules/scaffold/views/scaffoldAssetItemView.js

@@ -0,0 +1,203 @@
+define([
+  'core/origin',
+  'backboneForms',
+  'core/helpers',
+  './scaffoldAssetView',
+  'modules/assetManagement/views/assetManagementModalView',
+  'modules/assetManagement/collections/assetCollection'
+], function(Origin, BackboneForms, Helpers, ScaffoldAssetView, AssetManagementModalView, AssetCollection) {
+
+  var ScaffoldAssetItemView = ScaffoldAssetView.extend({
+
+    events: function() {
+      return _.extend({}, ScaffoldAssetView.prototype.events, {
+        'click .add-item': 'onAddItemClick',
+        'click .ui-draggable': 'onDragItemClick'
+      });
+    },
+
+  	onAddItemClick: function(event) {
+      event.preventDefault();
+      this.itemListView.addItem();
+    },
+
+    onDragItemClick: function(event) {
+      var item = _.find(this.dragItems, function(i) {
+        return i.$el[0] === event.currentTarget;
+      });
+      item.view.openEditor();
+    },
+
+    initialize: function(options) {
+      ScaffoldAssetView.prototype.initialize.apply(this, arguments);
+      this.init(options);
+    },
+
+    init: function(options) {
+      var attrs = options.schema.inputType;
+      this.dragItems = [];
+      this.precision = attrs.precision || 3;
+      this.topAttr = attrs.topAttribute || '_top';
+      this.leftAttr = attrs.leftAttribute || '_left';
+      this.items = attrs.items || '_items';
+    },
+
+    postRender: function() {
+      if (!this.itemListView) {
+        this.itemListView = this.findItemView();
+        this.listenTo(this.itemListView, {
+          add: this.onItemListAdd,
+          remove: this.onItemListRemove,
+          change: this.onItemListChange
+        });
+      }
+      // double defer:
+      // if external asset, postRender is triggered before el is injected into Dom
+      _.defer(function() {
+        var items = this.itemListView.items;
+        this.removeDragItems();
+        items && items.forEach(function(item) {
+          this.addDragItem(item.editor);
+        }, this);
+      }.bind(this));
+    },
+
+    findItemView: function() {
+      var form = Origin.scaffold.getCurrentForm();
+      var inputType = this.schema.inputType;
+      var targetAttr = inputType.targetAttribute;
+
+      var baseEditor;
+
+      switch (inputType.pluginType) {
+        case 'extension':
+          baseEditor = form.fields._extensions.editor.nestedForm.fields[targetAttr].editor;
+          break;
+        case 'menu':
+          baseEditor = form.fields.menuSettings.editor.nestedForm.fields[targetAttr].editor;
+          break;
+        case 'theme':
+          baseEditor = form.fields.themeSettings.editor.nestedForm.fields[targetAttr].editor;
+          break;
+        default:
+          baseEditor = form.fields.properties.editor;
+          break;
+      }
+
+      return baseEditor.nestedForm.fields[this.items].editor;
+    },
+
+    removeDragItems: function() {
+      this.dragItems.forEach(this.removeDragItem, this);
+      this.dragItems = [];
+    },
+
+    addDragItem: function(itemView) {
+      var value = itemView.value;
+      var index = itemView.$el.closest('.list-item').index();
+      var elm = $('<div></div>', {
+        css: {
+          top: parseInt(value[this.topAttr]).toFixed(this.precision)+'%',
+          left: parseInt(value[this.leftAttr]).toFixed(this.precision)+'%',
+          position: 'absolute'
+        },
+        text: index + 1
+      });
+
+      this.dragItems.push({
+        $el: elm,
+        view: itemView
+      });
+
+      elm.appendTo('.scaffold-asset-item-img-holder').draggable({
+        containment: 'parent',
+        stop: this.onDragStop.bind(this)
+      });
+    },
+
+    updateDragItem: function(item) {
+      var index = item.view.$el.closest('.list-item').index();
+      item.$el.css({
+        top: parseInt(item.view.value[this.topAttr]).toFixed(this.precision)+'%',
+        left: parseInt(item.view.value[this.leftAttr]).toFixed(this.precision)+'%',
+      }).text(index + 1);
+    },
+
+    removeDragItem: function(item) {
+      if (!item.$el.hasClass('ui-draggable')) return;
+      item.$el.draggable('destroy').remove();
+    },
+
+    onItemListRemove: function(listView, listItemView) {
+      var index = -1;
+      for (var i = 0; i < this.dragItems.length; i++) {
+        if (this.dragItems[i].view === listItemView) {
+          index = i;
+          break;
+        }
+      }
+      this.removeDragItem(this.dragItems[index]);
+      this.dragItems.splice(index, 1);
+    },
+
+    onItemListAdd: function(listView, listItemView) {
+      this.addDragItem(listItemView);
+    },
+
+    onItemListChange: function(listView) {
+      this.dragItems.forEach(this.updateDragItem, this);
+    },
+
+    onDragStop: function(event, ui) {
+      var $dragHandle = $(event.target);
+      var $parent = this.$('.scaffold-asset-item-img-holder');
+      var left = (parseInt($dragHandle.css("left")) / ($parent.width() / 100)).toFixed(this.precision);
+      var top = (parseInt($dragHandle.css("top")) / ($parent.height() / 100)).toFixed(this.precision);
+      var child = _.find(this.dragItems, i => i.$el[0] === event.target);
+
+      if (!child) {
+        return;
+      }
+      child.view.setValue(_.extend({}, child.view.value, { [this.leftAttr]: left, [this.topAttr]: top }));
+      child.view.renderSummary();
+    },
+
+    onAssetButtonClicked: function(event) {
+      event.preventDefault();
+
+      Origin.trigger('modal:open', AssetManagementModalView, {
+        collection: new AssetCollection,
+        assetType: 'image',
+        _shouldShowScrollbar: false,
+        onUpdate: data => data && this.setValue(data.assetId)
+      }, this);
+    },
+
+    renderData: function(id) {
+      var dataUrl = Helpers.isAssetExternal(this.value) ? this.value : '';
+
+      this.$el.html(Handlebars.templates[this.constructor.template]({
+        value: this.value,
+        type: 'image',
+        url: id ? `api/asset/serve/${id}` : dataUrl,
+        addLabel: this.schema.inputType.addLabel || Origin.l10n.t('app.add')
+      }));
+
+      _.defer(this.postRender.bind(this));
+    },
+
+    remove: function() {
+      this.removeDragItems();
+      this.dragItems = [];
+      ScaffoldAssetView.prototype.remove.apply(this, arguments);
+    }
+
+  }, { template: 'scaffoldAssetItem' });
+
+  Origin.on('origin:dataReady', function() {
+    Origin.scaffold.addCustomField('AssetItem', ScaffoldAssetItemView);
+  });
+
+  return ScaffoldAssetItemView;
+
+});

package/app/modules/scaffold/views/scaffoldAssetView.js

@@ -0,0 +1,157 @@
+define([
+  'modules/assetManagement/collections/assetCollection',
+  'modules/assetManagement/views/assetManagementModalView',
+  'core/helpers',
+  'core/origin'
+], function(AssetCollection, AssetManagementModalView, Helpers, Origin) {
+  var ScaffoldAssetView = Backbone.Form.editors.Base.extend({
+    assetType: null,
+    events: {
+      'change input': function() { this.trigger('change', this); },
+      'focus input': function() { this.trigger('focus', this); },
+      'blur input': function() { this.trigger('blur', this); },
+      'click .scaffold-asset-picker': 'onAssetButtonClicked',
+      'click .scaffold-asset-clear': 'onClearButtonClicked',
+      'click .scaffold-asset-external': 'onExternalAssetButtonClicked',
+      'click .scaffold-asset-external-input-save': 'onExternalAssetSaveClicked',
+      'click .scaffold-asset-external-input-cancel': 'onExternalAssetCancelClicked',
+    },
+
+    initialize: function(options) {
+      Backbone.Form.editors.Base.prototype.initialize.call(this, options);
+      this.listenTo(Origin, 'scaffold:assets:autofill', this.setValue);
+      this.setValue(this.value);
+    },
+
+    render: function() {
+      this.renderData();
+      return this;
+    },
+
+    renderData: async function() {
+      this.assetType = this.schema.inputType.media || this.schema.inputType.replace(/Asset|:/g, '');
+
+      let url = thumbUrl = this.value;
+      
+      if(!Helpers.isAssetExternal(this.value)) {
+        url = `api/assets/serve/${this.value}`;
+        thumbUrl = `${url}?thumb=true`;
+      }
+      const template = Handlebars.templates[this.constructor.template];
+      this.$el.html(template({ value: this.value, type: this.assetType, url, thumbUrl }));
+    },
+
+    checkValueHasChanged: function() {
+      var value = this.getValue();
+      if (this.key === 'heroImage') return this.saveModel({ heroImage: value });
+      if (Helpers.isAssetExternal(value)) return this.saveModel();
+    },
+
+    saveModel: function(attributesToSave) {
+      var currentModel = Origin.scaffold.getCurrentModel();
+      var alternativeModel = Origin.scaffold.getAlternativeModel();
+      var alternativeAttribute = Origin.scaffold.getAlternativeAttribute();
+      // Check if alternative model should be used
+      if (alternativeModel) {
+        currentModel = alternativeModel;
+      }
+      // run schema validation
+      Origin.scaffold.getCurrentForm().commit({ validate: false });
+      // Check if alternative attribute should be used
+      if (alternativeAttribute) {
+        attributesToSave[alternativeAttribute] = Origin.scaffold.getCurrentModel().attributes;
+      }
+      if (!attributesToSave) {
+        currentModel.pruneAttributes();
+      }
+      currentModel.save(attributesToSave, {
+        patch: attributesToSave !== undefined,
+        success: () => this.trigger('change', this),
+        error: () => Origin.Notify.alert({ type: 'error', text: Origin.l10n.t('app.errorsaveasset') })
+      });
+    },
+
+    setValue: function(value) {
+      Backbone.Form.editors.Base.prototype.setValue.call(this, value);
+      this.render();
+    },
+    
+    getValue: function() {
+      return Backbone.Form.editors.Base.prototype.getValue.call(this) || undefined;
+    },
+
+    // Event handling
+
+    focus: function() {
+      if (!this.hasFocus) this.$('input').focus();
+    },
+
+    blur: function() {
+      if (this.hasFocus) this.$('input').blur();
+    },
+
+    onAssetButtonClicked: function(event) {
+      event.preventDefault();
+
+      Origin.trigger('modal:open', AssetManagementModalView, {
+        collection: new AssetCollection,
+        assetType: this.assetType,
+        _shouldShowScrollbar: false,
+        onUpdate: function(data) {
+          if(data) {
+            this.setValue(data.assetId);
+            if(data._shouldAutofill) {
+              Origin.trigger('scaffold:assets:autofill', data.assetId);
+            }
+          }
+        }
+      }, this);
+    },
+
+    onClearButtonClicked: function(event) {
+      event.preventDefault();
+
+      this.checkValueHasChanged();
+      this.setValue('');
+    },
+
+    onExternalAssetButtonClicked: function(event) {
+      event.preventDefault();
+
+      this.toggleExternalAssetField(true);
+    },
+
+    onExternalAssetSaveClicked: function(event) {
+      event.preventDefault();
+
+      var inputValue = this.$('.scaffold-asset-external-input-field').val();
+
+      if (!inputValue.length) return this.toggleExternalAssetField(false);
+
+      this.setValue(inputValue);
+    },
+
+    onExternalAssetCancelClicked: function(event) {
+      event.preventDefault();
+
+      this.toggleExternalAssetField(false);
+    },
+
+    toggleExternalAssetField: function(shouldShow) {
+      this.$('.scaffold-asset-external-input').toggleClass('display-none', !shouldShow);
+      this.$('.scaffold-asset-buttons').toggleClass('display-none', shouldShow);
+    }
+
+  }, { template: 'scaffoldAsset' });
+
+  Origin.on('origin:dataReady', function() {
+    Origin.scaffold.addCustomField('Asset:image', ScaffoldAssetView);
+    Origin.scaffold.addCustomField('Asset:audio', ScaffoldAssetView);
+    Origin.scaffold.addCustomField('Asset:video', ScaffoldAssetView);
+    Origin.scaffold.addCustomField('Asset:other', ScaffoldAssetView);
+    Origin.scaffold.addCustomField('Asset', ScaffoldAssetView);
+  });
+
+  return ScaffoldAssetView;
+
+});

package/app/modules/scaffold/views/scaffoldCodeEditorView.js

@@ -0,0 +1,64 @@
+define(['core/origin', 'backboneForms'], function(Origin) {
+  var ScaffoldCodeEditorView =  Backbone.Form.editors.Base.extend({
+    defaultValue: '',
+    className: 'scaffold-code-editor',
+    editor: null,
+    mode: 'text',
+    session: null,
+
+    initialize: function(options) {
+      Backbone.Form.editors.Base.prototype.initialize.call(this, options);
+
+      var inputType = options.schema.inputType;
+      var mode = inputType.mode || inputType.split(':')[1];
+
+      if(mode) this.mode = mode;
+    },
+
+    render: function() {
+      this.editor = window.ace.edit(this.$el[0], {
+        maxLines: 50,
+        minLines: 14,
+        mode: `ace/mode/${this.mode}`,
+      });
+      this.editor.on('change', () => this.trigger('change', this));
+      this.setValue(this.value);
+
+      return this;
+    },
+
+    setValue: function(value) {
+      this.editor.setValue(this.mode === 'json' ? JSON.stringify(value, null, '\t') : value);
+    },
+
+    getValue: function() {
+      var value = this.editor.getValue();
+
+      if(this.mode !== 'json') return value;
+
+      try {
+        return JSON.parse(value);
+      } catch(e) {
+        return value;
+      }
+    },
+
+    validate: function() {
+      var error = Backbone.Form.editors.Base.prototype.validate.call(this);
+      if(error) return error;
+      if(this.isSyntaxError()) return { message: Origin.l10n.t('app.errorsyntax') };
+    },
+
+    isSyntaxError: function() {
+      return this.editor.getSession().getAnnotations().some(a => a.type === 'error');
+    }
+  });
+
+  Origin.on('origin:dataReady', function() {
+    Origin.scaffold.addCustomField('CodeEditor', ScaffoldCodeEditorView);
+    Origin.scaffold.addCustomField('CodeEditor:javascript', ScaffoldCodeEditorView);
+    Origin.scaffold.addCustomField('CodeEditor:less', ScaffoldCodeEditorView);
+  });
+
+  return ScaffoldCodeEditorView;
+});

package/app/modules/scaffold/views/scaffoldColourPickerView.js

@@ -0,0 +1,70 @@
+define(['core/origin', 'libraries/spectrum/spectrum'], function(Origin) {
+  var ScaffoldColourPickerView = Backbone.Form.editors.Base.extend({
+    tagName: 'input',
+    className: 'scaffold-colour-picker',
+    events: {
+      'change': function() { this.trigger('change', this) },
+      'focus': function() { this.trigger('focus', this) },
+      'blur': function() { this.trigger('blur', this) }
+    },
+
+    render: function() {
+      _.defer(this.postRender.bind(this));
+      return this;
+    },
+
+    postRender: function() {
+      this.$el.spectrum({
+        color: this.value,
+        showAlpha: true,
+        showInitial: true,
+        showInput: true,
+        showPalette: true,
+        showButtons: true,
+        cancelText: Origin.l10n.t('app.scaffold.colourPickerCancel'),
+        allowEmpty: true, // to allow empty strings in schema default value
+        palette: [],
+        preferredFormat: "hex3",
+        showSelectionPalette: true,
+        maxSelectionSize: 24,
+        localStorageKey: "adapt-authoring.spectrum.colourpicker",
+        show: () => Origin.contentPane.disableScroll(),
+        hide: () => Origin.contentPane.enableScroll()
+      });
+      // remove class beacuse we aren't using the clear button
+      $('.sp-container').removeClass('sp-clear-enabled');
+    },
+
+    getValue: function() {
+      var colour = this.$el.spectrum('get');
+
+      if(!colour || !colour.getAlpha) {
+        return this.value;
+      }
+      return (colour.getAlpha() < 1) ? colour.toRgbString() : colour.toHexString();
+    },
+
+    setValue: function(value) {
+      this.$el.spectrum('set', value);
+    },
+
+    focus: function() {
+      if(!this.hasFocus) this.$el.focus();
+    },
+
+    blur: function() {
+      if(this.hasFocus) this.$el.blur();
+    },
+
+    remove: function() {
+      this.$el.spectrum('destroy');
+      Backbone.Form.editors.Text.prototype.remove.call(this);
+    }
+  });
+
+  Origin.on('origin:dataReady', function() {
+    Origin.scaffold.addCustomField('ColourPicker', ScaffoldColourPickerView);
+  });
+
+  return ScaffoldColourPickerView;
+});

package/app/modules/scaffold/views/scaffoldDisplayTitleView.js

@@ -0,0 +1,112 @@
+define([ 'core/origin', 'backboneForms' ], function(Origin, BackboneForms) {
+
+  var ScaffoldDisplayTitleView = Backbone.Form.editors.Text.extend({
+
+    tagName: 'div',
+
+    form: null,
+
+    isLocked: null,
+
+    events: {
+      'change input': 'triggerChange',
+      'keyup input': 'triggerChange',
+      'focus input': function() {
+        this.trigger('focus', this);
+      },
+      'blur input': function() {
+        this.trigger('blur', this);
+      },
+      'click .scaffold-display-title-clear': function(event) {
+        event.preventDefault();
+
+        this.isLocked = false;
+        this.setValue('');
+      },
+      'click .scaffold-display-title-lock': function(event) {
+        event.preventDefault();
+
+        this.isLocked = !this.isLocked;
+        this.toggleLockButton();
+
+        if (this.isLocked) {
+          this.setValue(this.form.fields.title.editor.getValue());
+        }
+      }
+    },
+
+    initialize: function(options) {
+      Backbone.Form.editors.Text.prototype.initialize.call(this, options);
+
+      this.form = options.form;
+      this.listenTo(this, 'change', this.onDisplayTitleChange);
+      this.listenTo(this.form, 'title:change', this.onTitleChange);
+    },
+
+    render: function() {
+      this.$el.append(Handlebars.templates[this.constructor.template]({ field: '' }));
+      this.setValue(this.value);
+      this.isLocked = this.form.fields.title.editor.getValue() === this.getValue();
+      _.defer(this.postRender.bind(this));
+
+      return this;
+    },
+
+    postRender: function() {
+      this.toggleLockButton();
+    },
+
+    triggerChange: function() {
+      this.trigger('change', this);
+    },
+
+    onDisplayTitleChange: function() {
+      this.toggleLockButton();
+      this.toggleClearButton();
+    },
+
+    onTitleChange: function(form, titleEditor) {
+      if (this.isLocked) {
+        this.setValue(titleEditor.getValue());
+      }
+    },
+
+    getValue: function() {
+      return this.$('input').val();
+    },
+
+    setValue: function(value) {
+      this.$('input').val(value).trigger('change');
+    },
+
+    focus: function() {
+      if (!this.hasFocus) {
+        this.$('input').focus();
+      }
+    },
+
+    blur: function() {
+      if (this.hasFocus) {
+        this.$('input').blur();
+      }
+    },
+
+    toggleLockButton: function() {
+      this.$el.parents('.field').toggleClass('unlocked', !this.isLocked);
+      this.$('input').prop('disabled', this.isLocked);
+    },
+
+    toggleClearButton: function() {
+      this.$('.scaffold-display-title-clear')
+        .toggleClass('display-none', !this.getValue());
+    }
+
+  }, { template: 'scaffoldDisplayTitle' });
+
+  Origin.on('origin:dataReady', function() {
+    Origin.scaffold.addCustomField('DisplayTitle', ScaffoldDisplayTitleView);
+  });
+
+  return ScaffoldDisplayTitleView;
+
+});

package/app/modules/scaffold/views/scaffoldFileView.js

@@ -0,0 +1,18 @@
+define([
+  'backboneForms',
+  'core/origin'
+], function(BackboneForms, Origin) {
+    var ScaffoldFileView = Backbone.Form.editors.Base.extend({
+      render: function() {
+        this.$el.html(Handlebars.templates[this.constructor.template]({ name: this.getName() }));
+        return this;
+      },
+      getValue: function() {
+        return this.$el ? this.$el.val() : undefined;
+      },
+    }, { template: 'scaffoldFile' });
+  
+  Origin.on('origin:dataReady', () => Origin.scaffold.addCustomField('File', ScaffoldFileView));
+
+  return ScaffoldFileView;
+});