adapt-authoring-ui 0.0.1

package/app/modules/editor/contentObject/views/editorPageArticleView.js

@@ -0,0 +1,278 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Origin = require('core/origin');
+  var Helpers = require('core/helpers');
+  var BlockModel = require('core/models/blockModel');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+  var EditorPageBlockView = require('./editorPageBlockView');
+  var EditorPasteZoneView = require('../../global/views/editorPasteZoneView');
+
+  var EditorPageArticleView = EditorOriginView.extend({
+    className: 'article editable article-draggable',
+    tagName: 'div',
+
+    events: _.extend({}, EditorOriginView.prototype.events, {
+      'click .add-block': 'addBlock',
+      'click .article-delete': 'deleteArticlePrompt',
+      'click .open-context-article': 'openContextMenu',
+      'dblclick': 'loadArticleEdit',
+      'click .editor-collapse-article': 'toggleCollapseArticle'
+    }),
+
+    preRender: function() {
+      this.listenToEvents();
+      Origin.editor.data._collapsedArticles = Origin.editor.data._collapsedArticles || {};
+    },
+    
+    postRender: function() {
+      if (!this._skipRender) {
+        this.addBlockViews();
+      }
+      this.setupDragDrop();
+      this.restoreCollapsedState();
+
+      _.defer(_.bind(function(){
+        this.trigger('articleView:postRender');
+        Origin.trigger('pageView:itemRendered');
+      }, this));
+    },
+
+    listenToEvents: function() {
+      this.listenTo(Origin, {
+        'editorView:collapseArticle:collapse': this.collapseAllArticles,
+        'editorView:collapseArticle:expand': this.expandAllArticles,
+        'editorView:removeSubViews editorPageView:removePageSubViews': this.remove
+      });
+      if (!this.model.isNew()) {
+        this.listenTo(Origin, `editorView:deleteArticle:${this.model.get('_id')}`, this.deletePageArticle);
+      }
+      this.listenTo(this.model, 'change:_isCollapsed', this.onIsCollapsedChange);
+
+      this.listenTo(this, {
+        'contextMenu:article:edit': this.loadArticleEdit,
+        'contextMenu:article:copy': this.onCopy,
+        'contextMenu:article:copyID': this.onCopyID,
+        'contextMenu:article:cut': this.onCut,
+        'contextMenu:article:delete': this.deleteArticlePrompt,
+        'contextMenu:article:collapse': this.toggleCollapseArticle,
+        'contextMenu:article:delete': this.deleteArticlePrompt
+      });
+    },
+
+    addBlockViews: function() {
+      this.$('.article-blocks').empty();
+      // Insert the 'pre' paste zone for blocks
+      var view = new EditorPasteZoneView({
+        model: new BlockModel({
+          _parentId: this.model.get('_id'),
+          _type: 'block',
+          _pasteZoneSortOrder: 1
+        })
+      });
+      this.$('.article-blocks').append(view.$el);
+      // Iterate over each block and add it to the article
+      const children = this.getChildren().sort(Helpers.sortContentObjects);
+      Origin.editor.blockCount += children.length;
+      children.forEach(c => this.addBlockView(c));
+    },
+
+    addBlockView: function(blockModel, scrollIntoView) {
+      scrollIntoView = scrollIntoView || false;
+
+      var newBlockView = new EditorPageBlockView({ model: blockModel });
+      var $blocks = this.$('.article-blocks .block');
+      var sortOrder = blockModel.get('_sortOrder');
+      var index = sortOrder > 0 ? sortOrder-1 : undefined;
+      var shouldAppend = index === undefined || index >= $blocks.length || $blocks.length === 0;
+
+      if(shouldAppend) { // add to the end of the article
+        this.$('.article-blocks').append(newBlockView.$el);
+      } else { // 'splice' block into the new position
+        $($blocks[index]).before(newBlockView.$el);
+      }
+      if (scrollIntoView) $.scrollTo(newBlockView.$el, 200);
+      // Increment the sortOrder property
+      blockModel.set('_pasteZoneSortOrder', (blockModel.get('_sortOrder')+1));
+      // Post-block paste zone - sort order of placeholder will be one greater
+      this.$('.article-blocks').append(new EditorPasteZoneView({ model: blockModel }).$el);
+    },
+
+    addBlock: function(event) {
+      event && event.preventDefault();
+      var model = new BlockModel();
+      model.save({
+        _parentId: this.model.get('_id'),
+        _courseId: Origin.editor.data.course.get('_id'),
+        layoutOptions: [{
+            type: 'left',
+            name: 'app.layoutleft',
+            pasteZoneRenderOrder: 2
+          }, {
+            type: 'full',
+            name: 'app.layoutfull',
+            pasteZoneRenderOrder: 1
+          }, {
+            type: 'right',
+            name: 'app.layoutright',
+            pasteZoneRenderOrder: 3
+        }],
+        _type: 'block'
+      }, {
+        success: model => {
+          this.addBlockView(model, true);
+          Origin.trigger('editor:refreshData');
+        },
+        error: () => Origin.Notify.alert({ type: 'error', text: Origin.l10n.t('app.erroraddingblock') })
+      });
+    },
+
+    deleteArticlePrompt: function(event) {
+      event && event.preventDefault();
+
+      Origin.Notify.confirm({
+        type: 'warning',
+        title: Origin.l10n.t('app.deletearticle'),
+        text: Origin.l10n.t('app.confirmdeletearticle') + '<br />' + '<br />' + Origin.l10n.t('app.confirmdeletearticlewarning'),
+        callback: _.bind(this.deleteArticleConfirm, this)
+      });
+
+    },
+
+    deleteArticleConfirm: function(result) {
+      if (result.isConfirmed) {
+        Origin.trigger('editorView:deleteArticle:' + this.model.get('_id'));
+      }
+    },
+
+    deletePageArticle: function(event) {
+      event && event.preventDefault();
+
+      this.model.destroy({
+        success: () => this.remove(),
+        error: () => Origin.Notify.alert({ type: 'error', text: Origin.l10n.t('app.errorgeneric') })
+      });
+    },
+
+    loadArticleEdit: function (event) {
+      var courseId = Origin.editor.data.course.get('_id');
+      Origin.router.navigateTo(`editor/${courseId}/${this.model.get('_type')}/${this.model.get('_id')}/edit`);
+    },
+
+    setupDragDrop: function() {
+      var view = this;
+      var autoScrollTimer = false;
+      var $container = $('.contentPane');
+
+      this.$el.draggable({
+        scroll: true,
+        opacity: 0.8,
+        handle: '.handle',
+        revert: 'invalid',
+        zIndex: 10000,
+        cursorAt: {
+          top: 22,
+          left: 0
+        },
+        appendTo:'.contentPane',
+        containment: '.contentPane',
+        helper: function (e) {
+          // Store the offset to stop the page jumping during the start of drag
+          // because of the drop zones changing the scroll position on the page
+          view.offsetTopFromWindow = view.$el.offset().top - $(window).scrollTop();
+          // This is in the helper method because the height needs to be
+          // manipulated before the drag start method due to adding drop zones
+          view.showDropZones();
+          $(this).attr(`data-${view.model.get('_type')}-id`, view.model.get('_id'));
+          $(this).attr(`data-${view.model.get('_parent')}-id`, view.model.get('_parentId'));
+          return $(`<div class="drag-helper">${view.model.get('title')}</div>`);
+        },
+        start: function(event) {
+          // Using the initial offset we're able to position the window back in place
+          $(window).scrollTop(view.$el.offset().top -view.offsetTopFromWindow);
+        },
+        // adds a scroll if dragging near the top/bottom
+        drag: function(event) {
+          window.clearInterval(autoScrollTimer);
+
+          var SCROLL_THRESHOLD = $container.height()*0.2;
+          var SCROLL_INCREMENT = 7;
+
+          var offsetTop = $container.offset().top;
+          var clientY = event.originalEvent.clientY;
+          var scrollAmount;
+
+          if (clientY < (offsetTop+SCROLL_THRESHOLD)) {
+            scrollAmount = -SCROLL_INCREMENT;
+          }
+          else if (clientY > (($container.height()+offsetTop) - SCROLL_THRESHOLD)) {
+            scrollAmount = SCROLL_INCREMENT;
+          }
+
+          if(scrollAmount) {
+            autoScrollTimer = window.setInterval(function() {
+              $container.scrollTop($container.scrollTop()+scrollAmount);
+            }, 10);
+          }
+        },
+        stop: function () {
+          window.clearInterval(autoScrollTimer);
+          view.hideDropZones();
+          $container.scrollTop($(this).offset().top*-1);
+        }
+      });
+    },
+
+    restoreCollapsedState: function() {
+      if (!Origin.editor.data._collapsedArticles.hasOwnProperty(this.model.get('_id'))) return;
+      this.skipAnimation = true;
+      this.model.set('_isCollapsed', Origin.editor.data._collapsedArticles[this.model.get('_id')]);
+    },
+
+    toggleCollapseArticle: function(event) {
+      event && event.preventDefault();
+
+      Origin.trigger('options:reset:ui', 'collapseArticle');
+      var isCollapsed = this.model.get('_isCollapsed');
+      this.model.set('_isCollapsed', !isCollapsed);
+    },
+
+    onIsCollapsedChange: function(model, isCollapsed) {
+      var title;
+      if (isCollapsed) {
+        title = Origin.l10n.t('app.expandarticle');
+      } else {
+        title = Origin.l10n.t('app.collapsearticle');
+      }
+      this.$('.editor-collapse-article').attr('title', title);
+      Origin.editor.data._collapsedArticles[this.model.get('_id')] = isCollapsed;
+      this.collapseArticle();
+    },
+
+    collapseAllArticles: function() {
+      if (this.model.get('_isCollapsed') === true) return; 
+      this.model.set('_isCollapsed', true);
+    },
+
+    expandAllArticles: function() {
+      if (this.model.get('_isCollapsed') === false) return; 
+      this.model.set('_isCollapsed', false);
+    },
+
+    collapseArticle: function() {
+      var shouldCollapse = this.model.get('_isCollapsed');
+
+      this.$el.toggleClass('collapsed-view', shouldCollapse);
+      var duration = 200;
+      if (this.skipAnimation) {
+        this.skipAnimation = false;
+        duration = 0;
+      }
+      this.$('.article-content').velocity(shouldCollapse ? 'slideUp' : 'slideDown', duration);
+    }
+
+  }, {
+    template: 'editorPageArticle'
+  });
+
+  return EditorPageArticleView;
+});

package/app/modules/editor/contentObject/views/editorPageBlockView.js

@@ -0,0 +1,280 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Backbone = require('backbone');
+  var Origin = require('core/origin');
+  var ComponentModel = require('core/models/componentModel');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+  var EditorPageComponentView = require('./editorPageComponentView');
+  var EditorPageComponentPasteZoneView = require('./editorPageComponentPasteZoneView');
+  var EditorPageComponentListView = require('./editorPageComponentListView');
+
+  var EditorPageBlockView = EditorOriginView.extend({
+    className: 'block editable block-draggable page-content-syncing',
+    tagName: 'div',
+    settings: _.extend({}, EditorOriginView.prototype.settings, {
+      hasAsyncPostRender: true,
+      autoRender: false
+    }),
+    events: _.extend({}, EditorOriginView.prototype.events, {
+      'click .block-delete': 'deleteBlockPrompt',
+      'click .add-component': 'showComponentList',
+      'click .open-context-block': 'openContextMenu',
+      'dblclick': 'loadBlockEdit'
+    }),
+
+    preRender: function() {
+      this.listenToEvents();
+      this.render();
+    },
+
+    render: function() {
+      this.children = this.getChildren();
+      var layouts = this.getAvailableLayouts();
+      // FIXME why do we have two attributes with the same value?
+      this.model.set({ layoutOptions: layouts, dragLayoutOptions: layouts });
+
+      EditorOriginView.prototype.render.apply(this);
+
+      this.addComponentViews();
+      this.setupDragDrop();
+
+      this.handleAsyncPostRender();
+    },
+
+    animateIn: function() {
+      this.$el.velocity({
+        scale: [1, 0.95],
+        opacity: [1, 0.4]
+      }, {
+        duration: 400,
+        begin: function() {
+          this.$el.removeClass('page-content-syncing');
+        }.bind(this),
+        complete: function() {
+          Origin.trigger('pageView:itemAnimated', this);
+        }.bind(this)
+      })
+    },
+
+    handleAsyncPostRender: function() {
+      var renderedChildren = [];
+      if(this.children.length === 0) {
+        return this.animateIn();
+      }
+      this.listenTo(Origin, 'editorPageComponent:postRender', function(view) {
+        var id = view.model.get('_id');
+        if(this.children.indexOf(view.model) !== -1 && renderedChildren.indexOf(id) === -1) {
+          renderedChildren.push(id);
+        }
+        if(renderedChildren.length === this.children.length) {
+          this.stopListening(Origin, 'editorPageComponent:postRender');
+          this.animateIn();
+        }
+      });
+    },
+
+    listenToEvents: function() {
+      this.listenTo(Origin, 'editorView:removeSubViews editorPageView:removePageSubViews', this.remove);
+      this.listenTo(this, {
+        'contextMenu:block:edit': this.loadBlockEdit,
+        'contextMenu:block:copy': this.onCopy,
+        'contextMenu:block:copyID': this.onCopyID,
+        'contextMenu:block:delete': this.deleteBlockPrompt
+      });
+    },
+
+    postRender: function() {
+      this.trigger('blockView:postRender');
+      Origin.trigger('pageView:itemRendered', this);
+    },
+
+    getAvailableLayouts: function() {
+      var layoutOptions = {
+        full: { type: 'full', name: 'app.layoutfull', pasteZoneRenderOrder: 1 },
+        left: { type: 'left', name: 'app.layoutleft', pasteZoneRenderOrder: 2 },
+        right: { type: 'right', name: 'app.layoutright', pasteZoneRenderOrder: 3 }
+      };
+      if (this.children.length === 0) {
+        return [layoutOptions.full,layoutOptions.left,layoutOptions.right];
+      }
+      if (this.children.length === 1) {
+        var layout = this.children[0].get('_layout');
+        if(layout === layoutOptions.left.type) return [layoutOptions.right];
+        if(layout === layoutOptions.right.type) return [layoutOptions.left];
+      }
+      return [];
+    },
+
+    deleteBlockPrompt: function(event) {
+      event && event.preventDefault();
+
+      Origin.Notify.confirm({
+        type: 'warning',
+        title: Origin.l10n.t('app.deleteblock'),
+        text: `${Origin.l10n.t('app.confirmdeleteblock')}<br/><br/>${Origin.l10n.t('app.confirmdeleteblockwarning')}`,
+        callback: result => result.isConfirmed && this.deleteBlock()
+      });
+    },
+
+    deleteBlock: function(event) {
+      this.model.destroy({
+        success: () => this.remove(),
+        error: () => Origin.Notify.alert({ type: 'error', text: Origin.l10n.t('app.errorgeneric') })
+      });
+    },
+
+    setupDragDrop: function() {
+      var view = this;
+      var autoScrollTimer = false;
+      var $container = $('.contentPane');
+
+      this.$el.draggable({
+        opacity: 0.8,
+        handle: '.handle',
+        revert: 'invalid',
+        zIndex: 10000,
+        cursorAt: {
+          top: 22,
+          left: 0
+        },
+        appendTo:'.contentPane',
+        containment: '.contentPane',
+        helper: function (e) {
+          // Store the offset to stop the page jumping during the start of drag
+          // because of the drop zones changing the scroll position on the page
+          view.offsetTopFromWindow = view.$el.offset().top - $(window).scrollTop();
+          // This is in the helper method because the height needs to be
+          // manipulated before the drag start method due to adding drop zones
+          view.showDropZones();
+          $(this).attr('data-' + view.model.get('_type') + '-id', view.model.get('_id'));
+          $(this).attr('data-' + view.model.get('_parent') + '-id', view.model.get('_parentId'));
+          return $('<div class="drag-helper">' + view.model.get('title') + '</div>');
+        },
+        start: function(event) {
+          // Using the initial offset we're able to position the window back in place
+          $(window).scrollTop(view.$el.offset().top -view.offsetTopFromWindow);
+        },
+        drag: function(event) {
+          window.clearInterval(autoScrollTimer);
+
+          var SCROLL_THRESHOLD = $container.height()*0.2;
+          var SCROLL_INCREMENT = 7;
+
+          var offsetTop = $container.offset().top;
+          var clientY = event.originalEvent.clientY;
+          var scrollAmount;
+
+          if(clientY < (offsetTop + SCROLL_THRESHOLD)) {
+            scrollAmount = -SCROLL_INCREMENT;
+          }
+          else if(clientY > (($container.height() + offsetTop) - SCROLL_THRESHOLD)) {
+            scrollAmount = SCROLL_INCREMENT;
+          }
+
+          if(scrollAmount) {
+            autoScrollTimer = window.setInterval(function() {
+              $container.scrollTop($container.scrollTop() + scrollAmount);
+            }, 10);
+          }
+        },
+        stop: function () {
+          window.clearInterval(autoScrollTimer);
+          view.hideDropZones();
+          $container.scrollTop($(this).offset().top*-1);
+        }
+      });
+    },
+
+    addComponentViews: function() {
+      this.$('.page-components').empty();
+
+      var addPasteZonesFirst = this.children.length && this.children[0].get('_layout') !== 'full';
+      this.addComponentButtonLayout(this.children);
+
+      if (addPasteZonesFirst) this.setupPasteZones();
+      // Add component elements
+      for(var i = 0, count = this.children.length; i < count; i++) {
+        var view = new EditorPageComponentView({ model: this.children[i] });
+        this.$('.page-components').append(view.$el);
+      }
+      if (!addPasteZonesFirst) this.setupPasteZones();
+    },
+
+    addComponentButtonLayout: function(components) {
+      if(components.length === 2) {
+        return;
+      }
+      if(components.length === 0) {
+        this.$('.add-component').addClass('full');
+        return;
+      }
+      var layout = components[0].get('_layout');
+      var className = '';
+      if(layout === 'left') className = 'right';
+      if(layout === 'right') className = 'left';
+      this.$('.add-component').addClass(className);
+    },
+
+    loadBlockEdit: function (event) {
+      var courseId = Origin.editor.data.course.get('_id');
+      var type = this.model.get('_type');
+      var id = this.model.get('_id');
+      Origin.router.navigateTo(`editor/${courseId}/${type}/${id}/edit`);
+    },
+
+    showComponentList: function(event) {
+      event.preventDefault();
+
+      $('body').append(new EditorPageComponentListView({
+        model: new Backbone.Model({
+          title: Origin.l10n.t('app.addcomponent'),
+          body: Origin.l10n.t('app.pleaseselectcomponent'),
+          _parentId: this.model.get('_id'),
+          layoutOptions: this.model.get('layoutOptions')
+        }),
+        $parentElement: this.$el,
+        parentView: this
+      }).$el);
+    },
+
+    setupPasteZones: function() {
+      // Add available paste zones
+      var layouts = this.model.get('layoutOptions').slice();
+      var dragLayouts = this.model.get('dragLayoutOptions').slice();
+
+      _.each(this.sortArrayByKey(dragLayouts, 'pasteZoneRenderOrder'), function(layout) {
+        var pasteComponent = new ComponentModel();
+        pasteComponent.set('_parentId', this.model.get('_id'));
+        pasteComponent.set('_type', 'component');
+        pasteComponent.set('_pasteZoneLayout', layout.type);
+        var $pasteEl = new EditorPageComponentPasteZoneView({ model: pasteComponent }).$el;
+        $pasteEl.addClass('drop-only');
+        this.$('.page-components').append($pasteEl);
+      }, this);
+
+      _.each(this.sortArrayByKey(layouts, 'pasteZoneRenderOrder'), function(layout) {
+        var pasteComponent = new ComponentModel();
+        pasteComponent.set('_parentId', this.model.get('_id'));
+        pasteComponent.set('_type', 'component');
+        pasteComponent.set('_pasteZoneLayout', layout.type);
+        this.$('.page-components').append(new EditorPageComponentPasteZoneView({ model: pasteComponent }).$el);
+      }, this);
+    },
+
+    onPaste: function(data) {
+      (new ComponentModel({ _id: data._id })).fetch({
+        success: _.bind(function(model) {
+          this.children.push(model);
+          this.render();
+        }, this),
+        error: () => Origin.Notify.alert({ type: 'error', text: 'app.errorfetchingdata' })
+      });
+    }
+
+  }, {
+    template: 'editorPageBlock'
+  });
+
+  return EditorPageBlockView;
+
+});

package/app/modules/editor/contentObject/views/editorPageComponentListItemView.js

@@ -0,0 +1,80 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var ComponentModel = require('core/models/componentModel');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+  var EditorPageComponentView = require('./editorPageComponentView');
+
+  var EditorPageComponentListItemView = EditorOriginView.extend({
+    className: 'editor-component-list-item',
+    tagName: 'div',
+
+    events: {
+      'click': 'onItemClicked',
+      'click div.editor-component-list-item-overlay-inner > a': 'onButtonClicked'
+    },
+
+    preRender: function(options) {
+      this.listenTo(Origin, {
+        'editorComponentListView:removeSubviews': this.remove,
+        'editorComponentListItemView:deselect': this.deselectItem,
+        'editorComponentListView:searchKeyup': this.onSearchValueChanged
+      });
+
+      this.model.set('availablePositions', options.availablePositions);
+
+      this._parentId = options._parentId;
+      this.$parentElement = options.$parentElement;
+      this.parentView = options.parentView;
+      this.searchTerms = options.searchTerms;
+    },
+
+    postRender: function() {
+      if (this.model.get('isEnabled') == false) {
+        this.$el.addClass('restricted');
+      }
+    },
+
+    onItemClicked: function(event) {
+      event && event.preventDefault();
+
+      Origin.trigger('editorComponentListItemView:deselect')
+
+      this.$el.addClass('selected');
+      this.$('.editor-component-list-item-overlay').removeClass('display-none');
+    },
+
+    deselectItem: function() {
+      $('.editor-component-list-item').removeClass('selected');
+      this.$('.editor-component-list-item-overlay').addClass('display-none');
+    },
+
+    onSearchValueChanged: function(searchValue) {
+      var isSearchTerms = this.searchTerms.indexOf(searchValue.toLowerCase()) > -1 || searchValue.length === 0;
+      this.$el.toggleClass('display-none', !isSearchTerms);
+    },
+
+    onButtonClicked: function(event) {
+      event && event.preventDefault();
+      this.addComponent(event.currentTarget.getAttribute('data-position'));
+    },
+
+    addComponent: function(layout) {
+      Origin.trigger('editorComponentListView:remove');
+      const componentType = Origin.editor.data.componentTypes.findWhere({ name: this.model.get('name') });
+      const _courseId = Origin.editor.data.course.get('_id');
+      Origin.editor.data.newcomponent = new ComponentModel({
+        _parentId: this._parentId,
+        _courseId,
+        _type: 'component',
+        _component: componentType.get('name'),
+        _layout: layout
+      });
+      Origin.router.navigateTo(`editor/${_courseId}/component/new/`);
+    }
+  }, {
+    template: 'editorPageComponentListItem'
+  });
+
+  return EditorPageComponentListItemView;
+});