adapt-authoring-ui 0.0.1

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

@@ -0,0 +1,100 @@
+define([ 'core/origin' ], function(Origin) {
+
+  var ScaffoldItemsModalView = Backbone.View.extend({
+
+    className: 'scaffold-items-modal',
+
+    content: null,
+
+    initialize: function(options) {
+      this.content = options.content;
+      this.listenTo(Origin, 'remove:views', this.remove);
+      Origin.trigger('scaffold:increaseActiveModals');
+      this.toggleModalOverlay();
+      this._onKeyUp = this.onKeyUp.bind(this);
+    },
+
+    events: {
+      'click .scaffold-items-modal-footer a': function(event) {
+        event.preventDefault();
+
+        this.trigger($(event.currentTarget).data('action'));
+        this.close();
+      }
+    },
+
+    render: function() {
+      var template = Handlebars.templates[this.constructor.template];
+      var data = this.model && this.model.toJSON();
+
+      $('body').append(this.$el.html(template(data)));
+      this.$('.scaffold-items-modal-body').html(this.content.render().$el);
+      _.defer(this.postRender.bind(this));
+
+      return this;
+    },
+
+    postRender: function() {
+      this.$el.addClass('show');
+    },
+
+    onKeyUp: function(event) {
+      if (event.which !== 27) return;
+
+      this.trigger('cancel');
+      this.close();
+    },
+
+    open: function() {
+      this.render();
+      $(document).keyup(this._onKeyUp);
+    },
+
+    close: function() {
+      if (this._preventClose) {
+        this._preventClose = false;
+        return;
+      }
+
+      Origin.trigger('scaffold:decreaseActiveModals');
+      this.toggleModalOverlay();
+      $(document).off('keyup', this._onKeyUp);
+      this.remove();
+    },
+
+    preventClose: function() {
+      this._preventClose = true;
+    },
+
+    toggleModalOverlay: function() {
+      var modalCount = Origin.scaffold.getCurrentActiveModals();
+
+      switch (modalCount) {
+        case 1:
+          if (Origin.scaffold.isOverlayActive()) return;
+
+          Origin.scaffold.setOverlayActive(true);
+          $('body').append(Handlebars.templates.scaffoldModalOverlay);
+          break;
+        case 0:
+          if (!Origin.scaffold.isOverlayActive()) return;
+
+          Origin.scaffold.setOverlayActive(false);
+          $('.scaffold-modal-overlay').remove();
+      }
+    },
+
+    remove: function() {
+      for (var title in this.content.fields) {
+        if (!this.content.fields.hasOwnProperty(title)) continue;
+        this.content.fields[title].remove();
+      }
+      this.content.remove();
+      Backbone.View.prototype.remove.apply(this, arguments);
+    }
+
+  }, { template: 'scaffoldItemsModal' });
+
+  return ScaffoldItemsModalView;
+
+});

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

@@ -0,0 +1,158 @@
+define([
+  'core/origin',
+  'backboneForms',
+  'backboneFormsLists'
+], function(Origin) {
+
+  var ScaffoldListView = Backbone.Form.editors.List.extend({
+    defaultValue: [],
+
+    render: function() {
+      var instance = Backbone.Form.editors.__List.prototype.render.apply(this, arguments);
+      // set-up drag 'n drop
+      this.$list.sortable({
+        placeholder: 'sortable-placeholder',
+        containment: '.app-inner',
+        update: this.updateItemPositions.bind(this),
+        start: function(event, ui) {
+          Origin.scaffold.getCurrentModel().set('_isDragging', true);
+          ui.placeholder.height(ui.item.height());
+        },
+        stop: function(event, ui) {
+          _.defer(function() {
+            Origin.scaffold.getCurrentModel().set('_isDragging', false);
+          });
+        }
+      });
+      return instance;
+    },
+
+    updateItemPositions: function(e, ui) {
+      var $items = $('.list-item', this.$el);
+      var newIndex = $items.index(ui.item);
+
+      for(var i = 0, count = this.items.length; i < count; i++) {
+        var item = this.items[i];
+
+        if(!item.$el.is(ui.item)) continue;
+
+        this.items.splice(i, 1);
+        this.items.splice(newIndex, 0, item);
+
+        this.trigger('change', this);
+        return; // found our match, end here
+      }
+    },
+
+    // HACK needed to fix reset functionality (see https://github.com/powmedia/backbone-forms/issues/517)
+    setValue: function(value) {
+      this.value = value;
+      // remove previous items, and add new ones
+      this.items.forEach(function(item) { item.remove(); });
+      this.items = [];
+      this.value.forEach(this.addItem.bind(this));
+    },
+
+    // Accomodate sweetalert in item removal
+    removeItem: function(item) {
+      var remove = function(confirm) {
+        if(confirm.isConfirmed === false) return;
+
+        var index = this.items.indexOf(item);
+        this.items[index].remove();
+        this.items.splice(index, 1);
+
+        if(item.addEventTriggered) {
+          this.trigger('remove', this, item.editor);
+          this.trigger('change', this);
+        }
+        if(!this.items.length && !this.Editor.isAsync) {
+          this.addItem();
+        }
+      }.bind(this);
+      // no confirmation needed, just remove
+      if(! this.schema.confirmDelete) return remove();
+      // confirm delete action
+      window.confirm({
+        title: this.schema.confirmDelete,
+        type: 'warning',
+        callback: remove
+      });
+    }
+  });
+
+  var ScaffoldListItemView = Backbone.Form.editors.List.Item.extend({
+
+    events: function() {
+      return _.extend({}, Backbone.Form.editors.__List.__Item.prototype.events, {
+        'click [data-action="clone"]': 'cloneItem'
+      });
+    },
+
+    cloneItem: function(event) {
+      this.list.addItem(this.editor.value, true);
+    }
+  });
+
+  Origin.on('origin:dataReady', function() {
+    // NOTE override default list view (keep the old one in case...)
+    Backbone.Form.editors.__List = Backbone.Form.editors.List;
+    Backbone.Form.editors.__List.__Item = Backbone.Form.editors.List.Item;
+
+    Backbone.Form.editors.List = ScaffoldListView;
+    Backbone.Form.editors.List.Item = ScaffoldListItemView;
+    // overrides
+    Backbone.Form.editors.List.prototype.constructor.template = Handlebars.templates.list;
+    Backbone.Form.editors.List.Item.prototype.constructor.template = Handlebars.templates.listItem;
+    Backbone.Form.editors.List.Modal.prototype.itemToString = modalItemToString;
+
+    Backbone.Form.editors.List.Modal.prototype.__openEditor = Backbone.Form.editors.List.Modal.prototype.openEditor;
+    Backbone.Form.editors.List.Modal.prototype.openEditor = openEditor;
+  });
+
+  // Helper functions
+
+  // Builds a string from nested values
+  // OVERRIDES Backbone.Form.editors.List.Modal.prototype.itemToString
+  function modalItemToString(value) {
+    if(!value) {
+      return '';
+    }
+    return Object.keys(this.nestedSchema).reduce(function(parts, key) {
+      var val = getModalItemValueString(value[key]);
+      var title = this.nestedSchema[key].title || Backbone.Form.Field.prototype.createTitle.call({ key: key });
+      return parts + '<p class="list-item-modal-item">' + wrapSchemaTitle(title) + val + '</p>';
+    }.bind(this), '');
+  }
+
+  // FIX to avoid opening the modal after stopping dragging a list item
+  // OVERRIDES Backbone.Form.editors.List.Modal.prototype.openEditor
+  function openEditor() {
+    if(Origin.scaffold.getCurrentModel().get('_isDragging')) {
+      return;
+    }
+    Backbone.Form.editors.List.Modal.prototype.__openEditor.apply(this, arguments);
+  }
+
+  // Returns an apt string value from Modal.Item value
+  function getModalItemValueString(value) {
+    if (typeof value !== 'object') {
+      return value;
+    }
+    if(Array.isArray(value)) {
+      return Origin.l10n.t('app.items', { smart_count: Object.keys(value).length });
+    }
+    // print nested name/value pairs
+    var pairs = '';
+    for (var name in value) {
+      if(value.hasOwnProperty(name)) pairs += '<br />' + wrapSchemaTitle(name) + value[name];
+    }
+    return '<p class="list-item-modal-object">' + pairs + '</p>';
+  }
+
+  function wrapSchemaTitle(value) {
+    return '<span class="list-item-description">' + value + ':</span>';
+  }
+
+  return ScaffoldListView;
+});

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

@@ -0,0 +1,71 @@
+define([ 'core/origin', 'backboneForms' ], function(Origin, BackboneForms) {
+  var ScaffoldTagsView = Backbone.Form.editors.Base.extend({
+    tagName: 'input',
+    className: 'scaffold-tags',
+    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.selectize({
+        create: (title, callback) => {
+          $.post('api/tags', { title })
+            .done(callback)
+            .fail(() => callback())
+        },
+        valueField: '_id',
+        labelField: 'title',
+        searchField: 'title',
+        loadingClass: 'selectize-loading',
+        preload: true,
+        load: (query, callback) => {
+          $.post('api/tags/query', { title: { $regex: `.*${query}.*`, $options: 'i' } })
+            .done(callback)
+            .fail(() => callback());
+        },
+        onLoad: () => this.setValue(this.getValue()),
+        onItemAdd: this.onAddTag.bind(this),
+        onItemRemove: this.onRemoveTag.bind(this)
+      });
+    },
+
+    getValue: function() {
+      const val = this.$el[0].selectize.getValue();
+      return val ? val.split(',') : [];
+    },
+
+    setValue: function(value) {
+      this.$el[0].selectize.setValue((value.length > 0) ? value : this.model.get('tags'));
+      if (this.$el[0].selectize.isFocused) this.$el[0].selectize.focus()
+    },
+
+    focus: function() {
+      if (!this.hasFocus) this.$el.focus();
+    },
+
+    blur: function() {
+      if (this.hasFocus) this.$el.blur();
+    },
+
+    onAddTag: async function(_id) {
+      this.model.set('tags', (this.model.get('tags')) ? [...this.model.get('tags'), _id] : [_id]);
+    },
+
+    onRemoveTag: function(title) {
+      this.model.set('tags', this.model.get('tags').filter(tag => tag.title !== title));
+    }
+  });
+
+  Origin.on('origin:dataReady', function() {
+    Origin.scaffold.addCustomField('Tags', ScaffoldTagsView);
+  });
+
+  return ScaffoldTagsView;
+});

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

@@ -0,0 +1,89 @@
+define([ 'core/origin', 'backboneForms' ], function(Origin, BackboneForms) {
+  var ScaffoldUsersView = Backbone.Form.editors.Base.extend({
+    tagName: 'input',
+    className: 'scaffold-users',
+    idField: 'email',
+    events: {
+      'change': function() { this.trigger('change', this); },
+      'focus': function() { this.trigger('focus', this); },
+      'blur': function() { this.trigger('blur', this); }
+    },
+
+    render: function() {
+      this.fetchUsers(this.initSelectize);
+      return this;
+    },
+
+    renderItem: function(item, escape) {
+      return Handlebars.templates.scaffoldUsersOption({
+        name: item.firstName && item.lastName ? escape(item.firstName  + ' ' +  item.lastName) : false,
+        email: escape(item.email),
+        disabled: item.disabled
+      });
+    },
+
+    fetchUsers: function(callback) {
+      $.get('api/users')
+        .done(callback.bind(this))
+        .fail(error => Origin.Notify.alert({ type: 'error', text: error }));
+    },
+
+    initSelectize: function(users) {
+      this.setValue(this.value);
+
+      var meId = Origin.sessionModel.get('id');
+
+      users.forEach(function(user) {
+        if(user._id === meId) user.disabled = true;
+      });
+
+      this.$el.selectize({
+        labelField: 'email',
+        valueField: '_id',
+        options: users,
+        searchField: [ 'email', 'firstName', 'lastName' ],
+        render: {
+          item: this.renderItem,
+          option: this.renderItem
+        },
+        onItemRemove: function(value, $item) {
+          if(value !== Origin.sessionModel.get('id')) {
+            return;
+          }
+          Origin.Notify.alert({
+            type: 'warning',
+            text: Origin.l10n.t('app.stopsharingwithyourself')
+          });
+          this.addItem(value, true);
+          this.close();
+        }
+      });
+    },
+
+    getValue: function() {
+      if(this.$el.val() === "") {
+        return [];
+      }
+      return this.$el.val().split(',');
+    },
+
+    setValue: function(value) {
+      this.$el.val(value);
+    },
+
+    focus: function() {
+      if(!this.hasFocus) this.$el.focus();
+    },
+
+    blur: function() {
+      if(this.hasFocus) this.$el.blur();
+    }
+  });
+
+  Origin.on('origin:dataReady', function() {
+    Origin.scaffold.addCustomField('Users', ScaffoldUsersView);
+  });
+
+  return ScaffoldUsersView;
+
+});

package/app/modules/sidebar/index.js

@@ -0,0 +1,22 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var SidebarContainerView = require('./views/sidebarView');
+
+  Origin.once('origin:dataReady', function() {
+    $('body').append(new SidebarContainerView().$el);
+  });
+
+  Origin.sidebar = {
+    addView: function($el, options) {
+      // Trigger to remove current views
+      Origin.trigger('sidebar:views:remove');
+      // Check if element is a view element
+      if (_.isElement($el[0]) !== true) {
+          return console.log("Sidebar - Cannot add this object to the sidebar view. Please make sure it's the views $el");
+      }
+      // Trigger update of views
+      Origin.trigger('sidebar:sidebarContainer:update', $el, options);
+    }
+  };
+})