adapt-authoring-ui 0.0.1

package/app/modules/contentHeader/views/contentHeaderButtonView.js

@@ -0,0 +1,42 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var Backbone = require('backbone');
+
+  var ContentHeaderButtonView = Backbone.View.extend({
+    className: 'contentHeader-button',
+    tagName: 'span',
+
+    events: {
+      'click button': 'onClicked'
+    },
+
+    async initialize(options) {
+      this.listenTo(Origin, 'remove:views', this.remove);
+
+      this.data = options;
+      if(!this.data.buttonClass) this.data.buttonClass = 'action-primary';
+      try {
+        await this.preRender();
+      } catch(e) {
+        return Origin.Notify.alert({ type: 'error', text: e.toString() });
+      }
+      this.render();
+    },
+    
+    render() {
+      this.$el.html(Handlebars.templates[this.constructor.template](this.data));
+      return this;
+    },
+
+    postRender() {},
+
+    onClicked(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      Origin.trigger(`${this.data.type}:${this.data.eventName}`);
+    }
+  });
+
+  return ContentHeaderButtonView;
+});

package/app/modules/contentHeader/views/contentHeaderToggleButtonView.js

@@ -0,0 +1,52 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var ContentHeaderButtonView = require('./contentHeaderButtonView');
+
+  var ContentHeaderToggleButtonView = ContentHeaderButtonView.extend({
+    events() {
+      return Object.assign(ContentHeaderButtonView.prototype.events, {
+        'click .item': 'onItemClicked'
+      });
+    },
+    constructor() {
+      ContentHeaderButtonView.prototype.constructor.apply(this, arguments);
+      $('.appHeader, .contentHeader, .contentPane').on('click', () => $('.buttons-container').removeClass('show'));
+    },
+    preRender() {
+
+    },
+    render() {
+      if(!this.constructor.template) this.constructor.template = 'contentHeaderToggleButton';
+      if(!this.data.buttonIcon) this.data.buttonIcon = this.constructor.defaultButtonIcon;
+      if(!this.data.buttonText) this.data.buttonText = this.constructor.defaultButtonText;
+
+      var itemTemplate = Handlebars.templates[this.constructor.itemTemplate];
+      this.data.items = this.data.items.map((item, i) => {
+        var data = Object.assign(item, { index: i });
+        data.itemHtml = itemTemplate(data);
+        return item;
+      });
+
+      ContentHeaderButtonView.prototype.render.apply(this);
+
+      setTimeout(this.repositionButtons.bind(this), 500);
+    },
+    repositionButtons() {
+      var $btns = $('.buttons-container', this.$el);
+      var width = $btns.outerWidth(true);
+      var maxX = $(window).width() - width - 5;
+      if($btns.offset().left > maxX) $btns.css('left', maxX - $('.contentHeader .buttons').offset().left);
+    },
+    onClicked() {
+      event.preventDefault();
+      event.stopPropagation();
+      var $btns = $('.buttons-container', this.$el);
+      if(!$btns.hasClass('show')) $('.buttons-container').removeClass('show');
+      $btns.toggleClass('show');
+    },
+    onItemClicked(event) {
+    }
+  });
+
+  return ContentHeaderToggleButtonView;
+});

package/app/modules/contentHeader/views/contentHeaderView.js

@@ -0,0 +1,96 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  const Backbone = require('backbone');
+  const Origin = require('core/origin');
+  const ActionsButtonView = require('./actionsButtonView');
+  const FiltersButtonView = require('./filtersButtonView');
+  const OptionsView = require('./optionsView');
+  const SortsButtonView = require('./sortsButtonView');
+
+  const VIEWS = {
+    actions: ActionsButtonView,
+    filters: FiltersButtonView,
+    options: OptionsView,
+    sorts: SortsButtonView,
+  };
+
+  class ContentHeaderView {
+    get BUTTON_TYPES() {
+      return {
+        OPTIONS: 'options',
+        SORTS: 'sorts',
+        FILTERS: 'filters',
+        ACTIONS: 'actions'
+      };
+    }
+    constructor() {
+      this.data = {
+        buttons: Object.values(this.BUTTON_TYPES).reduce((data, type) => {
+          return Object.assign(data, { [type]: { items: [], ViewClass: VIEWS[type] } });
+        }, {})
+      };
+      Origin.on('contentHeader:updateTitle', this.updateTitle.bind(this));
+      Origin.on('contentHeader:hide', this.remove.bind(this));
+      Origin.on('remove:views', this.remove.bind(this));
+    }
+    render() {
+      this.remove(false);
+      const template = Handlebars.templates.contentHeader;
+      this.$el = $(template(this.getTemplateData()));
+      $('#app').prepend(this.$el);
+      // items
+      for (let type in this.data.buttons) {
+        const { ViewClass, items } = this.data.buttons[type];
+        if(!items.length) {
+          continue;
+        }
+        const $el = $(`.buttons > .${type}`, this.$el);
+        if(type === 'options') { // legacy
+          $el.append(new ViewClass({ collection: new Backbone.Collection(items) }).$el);
+          continue;
+        }
+        for (let item of items) $el.append(new ViewClass(Object.assign(type, item)).$el);
+      }
+    }
+    getTemplateData() {
+      if(!this.data.breadcrumbs) {
+        return this.data;
+      }
+      const course = Origin.editor && Origin.editor.data && Origin.editor.data.course;
+
+      return Object.assign(this.data, {
+        course: course && course.get('title') !== this.data.title ? { title: course.get('title') } : undefined,
+        breadcrumbs: this.data.breadcrumbs.map(b => {
+          if(b === 'dashboard') {
+            return { title: Origin.l10n.t('app.dashboard'), url: '#' };
+          }
+          if(b === 'course') {
+            return { title: Origin.l10n.t('app.editormenu'), url: `#/editor/${course.get('_id')}/menu` };
+          }
+          return b;
+        })
+      });
+    }
+    updateTitle(data) {
+      Object.assign(this.data, data);
+      this.render();
+    }
+    setButtons(type, items) {
+      if(!this.data.buttons[type]) {
+        return console.error(`Unknown ContentHeader type '${type}', must be one of ${Object.keys(this.data.buttons)}`);
+      }
+      this.data.buttons[type].items = items;
+      this.render();
+    }
+    remove(resetData = true) {
+      if(this.$el) this.$el.remove();
+      if(resetData) {
+        delete this.data.course;
+        delete this.data.breadcrumbs;
+        for (let type in this.data.buttons) this.data.buttons[type].items = [];
+      }
+    }
+  }
+
+  return ContentHeaderView;
+});

package/app/modules/contentHeader/views/filtersButtonView.js

@@ -0,0 +1,31 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var ContentHeaderToggleButtonView = require('./contentHeaderToggleButtonView');
+  
+  var FiltersButtonView = ContentHeaderToggleButtonView.extend({
+    async preRender() {
+      if(this.data.items.some(f => f.type === 'tags')) {
+        this.data.tags = (await $.post('api/tags/query'));
+      }
+    },
+    onItemClicked(event) {
+      event.stopPropagation();
+      const $target = $(event.target);
+      let eventData = $target.val() || $target.attr('data-value');
+      
+      if($target.hasClass('tag')) {
+        $target.toggleClass('selected');
+        eventData = $('.tag.selected', this.$el).toArray().map(t => $(t).attr('data-value'));
+      }
+      const eventName = `${this.data.type}:${$(event.currentTarget).attr('data-event')}`;
+      Origin.trigger(eventName, eventData);
+    }
+  }, {
+    defaultButtonIcon: 'fa-filter',
+    defaultButtonText: Origin.l10n.t('app.filter'),
+    itemTemplate: 'filterItem'
+  });
+
+  return FiltersButtonView;
+});

package/app/modules/contentHeader/views/optionsView.js

@@ -0,0 +1,88 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var Backbone = require('backbone');
+
+  var OptionsView = Backbone.View.extend({
+    className: 'options',
+
+    events: {
+    'click button': 'onOptionClicked'
+    },
+
+    initialize: function() {
+      this.eventsToTrigger = [];
+
+      this.listenTo(Origin, {
+        'remove:views': this.remove,
+        'options:update:ui': this.updateUI,
+        'options:reset:ui': this.resetUI
+      });
+      this.render();
+    },
+
+    render: function() {
+      var template = Handlebars.templates[this.constructor.template];
+      this.$el.html(template(this.getRenderData()));
+      return this;
+    },
+
+    getRenderData: function() {
+      const groups = {};
+      this.collection.each(function(item) {
+        if (_.indexOf(this.eventsToTrigger, item.get('callbackEvent')) > -1) {
+          item.set('selected', true);
+        }
+        var itemGroup = item.get('group');
+        if(!groups[itemGroup]) groups[itemGroup] = { items: [] };
+        groups[itemGroup].items.push(item.toJSON());
+      }, this);
+      return { groups: Object.values(groups) };
+    },
+
+    updateUI: function(userPreferences) {
+      // set selected preferences
+      _.defer(_.bind(function() {
+        _.each(userPreferences, function(preference) {
+          if (_.isArray(preference)) return;
+          this.$('button.option-value-' + preference).addClass('selected');
+        }, this);
+      }, this));
+    },
+
+    resetUI: function(group) {
+      _.defer(_.bind(function() {
+        this.$('button[data-group="'+group+'"]').removeClass('selected');
+      }, this));
+    },
+
+    sortAndRenderGroups: function() {
+      var availableGroups = _.uniq(this.collection.pluck('group'));
+      var template = Handlebars.templates['optionsGroup'];
+      _.each(availableGroups, function(group) {
+        this.$('.options-inner').append(template({ group: group }));
+      });
+    },
+
+    setSelectedOption: function(selectedOption) {
+      var group = selectedOption.attr('data-group');
+      if(group) {
+        this.$('.options-group-' + group + ' button').removeClass('selected');
+        selectedOption.addClass('selected');
+      }
+      var callbackEvent = selectedOption.attr('data-callback');
+      if(callbackEvent) {
+        Origin.trigger(callbackEvent);
+      }
+    },
+
+    onOptionClicked: function(event) {
+      event && event.preventDefault();
+      this.setSelectedOption($(event.currentTarget));
+    }
+  }, {
+    template: 'options'
+  });
+
+  return OptionsView;
+});

package/app/modules/contentHeader/views/sortsButtonView.js

@@ -0,0 +1,45 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var ContentHeaderToggleButtonView = require('./contentHeaderToggleButtonView');
+  
+  var SortsButtonView = ContentHeaderToggleButtonView.extend({
+    render() {
+      ContentHeaderToggleButtonView.prototype.render.apply(this);
+      this.updateIcon();
+    },
+    updateIcon() {
+      this.$('.item').each((i, item) => {
+        var $i = $(item);
+        $('i', $i).hide();
+        if(!$i.hasClass('selected') || this.direction === undefined) {
+          $('i.default', $i).show();
+        } else {
+          $(`i.${this.direction === 1 ? 'asc' : 'desc'}`, $i).show();
+        }
+      });
+    },
+    onItemClicked(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      const $selected = $(event.currentTarget);
+      if(!$selected.hasClass('selected')) {
+        this.direction = 1;
+        this.$('.item').removeClass('selected');
+        $selected.addClass('selected');
+      } else {
+        this.direction = this.direction === 1 ? -1 : 1;
+      }
+      this.updateIcon();
+
+      const eventName = `${this.data.type}:${$selected.attr('data-event')}`;
+      Origin.trigger(eventName, this.direction);
+    }
+  }, {
+    defaultButtonIcon: 'fa-sort',
+    defaultButtonText: Origin.l10n.t('app.sort'),
+    itemTemplate: 'sortItem'
+  });
+
+  return SortsButtonView;
+});

package/app/modules/contentPane/index.js

@@ -0,0 +1,20 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var ContentPaneView = require('./views/contentPaneView');
+
+  var cpv = new ContentPaneView();
+  $('.app-inner').append(cpv.$el);
+
+  Origin.contentPane = {
+    setView: function(ViewClass, options) {
+      cpv.setView(new ViewClass(options));
+    },
+    enableScroll: function() {
+      cpv.$el.removeClass('no-scroll');
+    },
+    disableScroll: function() {
+      cpv.$el.addClass('no-scroll');
+    }
+  };
+});

package/app/modules/contentPane/less/contentPane.less

@@ -0,0 +1,8 @@
+.contentPane {
+  position: absolute;
+  overflow-y: auto;
+  width: 100%;
+  &-inner {
+    height: 100%;
+  }
+}

package/app/modules/contentPane/templates/contentPane.hbs

@@ -0,0 +1,2 @@
+<div class="contentPane-inner">
+</div>

package/app/modules/contentPane/views/contentPaneView.js

@@ -0,0 +1,77 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+
+  var ContentPaneView = Backbone.View.extend({
+    className: 'contentPane',
+
+    visibleCSS: {
+      opacity: 1
+    },
+    hiddenCSS: {
+      opacity: 0
+    },
+    animDuration: 500,
+
+    initialize: function() {
+      this.listenToEvents();
+      this.render();
+    },
+
+    listenToEvents: function() {
+      this.listenTo(Origin, 'remove:views', this.removeView);
+      this.$el.scroll(_.bind(this.onScroll, this));
+      $(window).on('resize', _.bind(this.resize, this));
+    },
+
+    render: function() {
+      var template = Handlebars.templates[this.constructor.template];
+      this.$el.html(template());
+      return this;
+    },
+
+    // expects a backbone view
+    setView: function(view) {
+      if(!view.$el || !view.$el[0] || !_.isElement(view.$el[0])) {
+        console.log('ContentPaneView.setView: expects a Backbone.View instance, received', view);
+      }
+      if(this.$('.contentPane-inner').html() !== '') {
+        this.removeView();
+      }
+      this.$('.contentPane-inner').html(view.$el);
+      Origin.trigger('contentPane:changed');
+      this.animateIn(_.bind(this.resize, this));
+    },
+
+    removeView: function(cb) {
+      this.$('.contentPane-inner').empty();
+      if(cb) cb.apply(this);
+      Origin.trigger('contentPane:emptied');
+    },
+
+    animateIn: function(cb) {
+      this.$el.css(this.hiddenCSS);
+      this.$el.velocity(
+        this.visibleCSS,
+        this.animDuration,
+        () => {
+          Origin.trigger('contentPane:ready');
+          if(cb) cb();
+        }
+      );
+    },
+
+    resize: function() {
+      var windowHeight = $(window).height();
+      this.$el.height(windowHeight - this.$el.offset().top);
+    },
+
+    onScroll: function(e) {
+      Origin.trigger('contentPane:scroll', this.$el.scrollTop());
+    }
+  }, {
+    template: 'contentPane'
+  });
+
+  return ContentPaneView;
+});

package/app/modules/contextMenu/index.js

@@ -0,0 +1,85 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var Origin = require('core/origin');
+  var ContextMenuView = require('./views/contextMenuView');
+
+  // Public API
+  Origin.contextMenu = ContextMenu = {
+    addItem: function(type, contextMenuObject) {
+      if (contextMenuObject.length > 1) {
+        _.each(contextMenuObject, function (object) {
+          object.type = type;
+          menuItems.add(object);
+        });
+      } else {
+        contextMenuObject.type = type;
+        menuItems.add(contextMenuObject);
+      }
+    }
+  };
+
+  Origin.on('origin:dataReady login:changed', init);
+
+  // Privates
+
+  var menuItems;
+  var view;
+
+  function init() {
+    menuItems = new Backbone.Collection();
+    setUpMenuItems();
+
+    if(view) view.remove();
+    view = new ContextMenuView({ collection: menuItems });
+  };
+
+  function setUpMenuItems() {
+    ContextMenu.addItem('article', getDefaultItems());
+    ContextMenu.addItem('block', getDefaultItems());
+    ContextMenu.addItem('component', getDefaultItems());
+    ContextMenu.addItem('page', getDefaultItems());
+    ContextMenu.addItem('menu', getDefaultItems(['copy']));
+    ContextMenu.addItem('page-min', getDefaultItems(['copy','delete','colorLabel']));
+    ContextMenu.addItem('course', getDefaultItems(['colorLabel']));
+  };
+
+  /*
+  * returns the default list excluding anything in [blacklist] (uses callbackEvent to filter)
+  */
+  function getDefaultItems(blacklist) {
+    var DEFAULT_ITEMS = [
+      {
+        title: Origin.l10n.t('app.edit'),
+        className: 'context-menu-item',
+        callbackEvent: "edit"
+      },
+      {
+        title: Origin.l10n.t('app.copy'),
+        className: 'context-menu-item',
+        callbackEvent: "copy"
+      },
+      {
+        title: Origin.l10n.t('app.copyidtoclipboard'),
+        className: 'context-menu-item',
+        callbackEvent: "copyID"
+      },
+      {
+        title: Origin.l10n.t('app.delete'),
+        className: 'context-menu-item',
+        callbackEvent: "delete"
+      },
+      {
+        title: Origin.l10n.t('app.colourLabel'),
+        className: 'context-menu-item',
+        callbackEvent: "colorLabel"
+      }
+    ];
+    if(!blacklist) {
+      return DEFAULT_ITEMS;
+    }
+    return _.filter(DEFAULT_ITEMS, function(item) {
+      return blacklist.indexOf(item.callbackEvent) < 0;
+    });
+  };
+});

package/app/modules/contextMenu/less/contextMenu.less

@@ -0,0 +1,54 @@
+// Context Menu styling
+// ==============
+@context-menu-color: @primary-color;
+@context-menu-text-color: @white;
+
+@context-menu-icon-color: @white;
+
+@context-menu-item-color:@context-menu-color;
+@context-menu-item-hover-color: lighten(@context-menu-item-color, 10%);
+
+@context-menu-item-text-color: @white;
+@context-menu-item-text-hover-color:@context-menu-item-text-color;
+
+@contect-menu-item-border:1px solid #3e4a5f;
+
+.context-menu {
+    position:absolute;
+    background-color: @context-menu-color;
+    color: @context-menu-text-color;
+    box-shadow: 0 0 12px 1px rgba(0,0,0,0.15);
+    z-index: 100;
+
+    /*.context-menu-pin {
+        position:absolute;
+        top:0px;
+        left:-8px;
+        width: 0;
+        height: 0;
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+        border-right:8px solid darken(@context-menu-color, 10%);
+    }*/
+
+    .context-menu-item {
+        /*border-left:4px solid darken(@context-menu-color, 10%);*/
+        min-width:130px;
+        .context-menu-item-open {
+            display:block;
+            padding:12px;
+            text-decoration: none;
+            color: @context-menu-item-text-color;
+            border-top: 1px solid @context-menu-item-hover-color;
+            transition:all 0.3s;
+            &:hover {
+                color:@context-menu-item-text-hover-color;
+                background-color: @context-menu-item-hover-color;
+            }
+        }
+    }
+}
+
+a.open-context-icon {
+    color: @context-menu-icon-color;
+}

package/app/modules/contextMenu/templates/contextMenu.hbs

@@ -0,0 +1,6 @@
+<div class="context-menu-pin">
+</div>
+<div class="context-menu-inner">
+    <div class="context-menu-holder">
+    </div>
+</div>

package/app/modules/contextMenu/templates/contextMenuItem.hbs

@@ -0,0 +1,8 @@
+<a class="context-menu-item-open" href="#">
+    <div class="context-menu-item-title">
+        <div class="context-menu-item-title-inner">{{title}}</div>
+    </div>
+    <div class="context-menu-item-description">
+        <div class="context-menu-item-description-inner">{{description}}</div>
+    </div>
+</a>

package/app/modules/contextMenu/views/contextMenuItemView.js

@@ -0,0 +1,37 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var Handlebars = require('handlebars');
+  var Origin = require('core/origin');
+
+  var ContextMenuItemView = Backbone.View.extend({
+    className: 'context-menu-item',
+
+    events: {
+      'click .context-menu-item-open': 'onContextMenuItemClicked'
+    },
+
+    initialize: function() {
+      this.listenTo(Origin, 'contextMenu:empty', this.remove);
+      this.render();
+    },
+
+    render: function() {
+      var data = this.model.toJSON();
+      var template = Handlebars.templates['contextMenuItem'];
+      $(this.el).html(template(data)).appendTo('.context-menu-holder');
+      return this;
+    },
+
+    onContextMenuItemClicked: function(event) {
+      event && event.preventDefault();
+
+      var callbackEvent = this.model.get('callbackEvent');
+      this.model.get('contextView').trigger('contextMenu:' + this.model.get('type') + ':' + callbackEvent);
+
+      Origin.trigger('contextMenu:closeContextMenu');
+    }
+  });
+
+  return ContextMenuItemView;
+});