adapt-authoring-ui 0.0.1

package/app/modules/editor/contentObject/less/editorPageComponentList.less

@@ -0,0 +1,234 @@
+@import 'colours';
+
+.editor-component-list {
+  position: fixed;
+  top: 0px;
+  // to avoid flicker when first rendered
+  right: -100vw;
+  height: 100%;
+  z-index: 500;
+
+  .click-capture {
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+  }
+
+  &-sidebar {
+    z-index: 5;
+    float: right;
+    width: 440px;
+    height: 100%;
+    background-color: @white;
+    box-shadow: 0px 0px 4px 0px #454545;
+  }
+
+  &-sidebar-exit {
+    float: right;
+    margin: 3px 10px;
+    font-size: 150%;
+    color: #7D7D7D;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &-sidebar-header {
+    border-bottom: 1px solid #CCCCCC;
+  }
+
+  &-sidebar-title-inner {
+    padding: 20px 20px 0px;
+  }
+
+  &-sidebar-body-inner {
+    padding-left: 20px;
+  }
+
+  &-sidebar-search {
+    &-icon {
+      position: relative;
+      left: 380px;
+      top: 33px;
+      font-size: 130%;
+      color: #B7B4B4;
+    }
+
+    &-field input {
+      margin: 0 0 25px 20px;
+      border-radius: 0;
+      background-color: #F2F0F1;
+    }
+  }
+
+  &-sidebar-list {
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  &-sidebar-filter-half {
+    float: left;
+    width: 50%;
+    padding: 18px 0px;
+    text-align: center;
+  }
+
+  &-sidebar-filter-full {
+    float: left;
+    width: 50%;
+    padding: 18px 0px;
+    text-align: center;
+  }
+
+  &-sidebar-filter-single {
+    width: 100%;
+    padding: 18px 0px;
+    background-color: #333c4e;
+    color: @white;
+    text-align: center;
+  }
+
+  &-sidebar-filter button {
+    background-color: #333c4e;
+    color: #9cabc4;
+    transition: all 0.3s;
+    &:hover {
+      background-color: #293141;
+      color: @white;
+    }
+    &.selected {
+      background-color: #15a4fa;
+      color: @white;
+    }
+  }
+}
+
+.editor-component-list-item {
+  position: relative;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+  border-bottom: 1px solid #ccc;
+  transition: background-color 0.3s;
+  cursor: pointer;
+
+  &.restricted {
+    color: lightgray;
+  }
+
+  &.selected {
+    background-color: darken(#e9f0fa, 10%);
+    &:hover {
+      background-color: darken(#e9f0fa, 10%);
+    }
+    &.restricted {
+      color: black;
+    }
+  }
+
+  &-details {
+    padding-left: 75px;
+  }
+
+  &:hover {
+    background-color: @ui-content-color;
+  }
+
+  &-inner {
+    padding: 20px;
+    min-height: 44px;
+  }
+
+  &-display-name {
+    font-weight: @font-weight-bold;
+  }
+
+  &-version,
+  &-name {
+    margin-top: 6px;
+    font-size: 11px;
+  }
+
+  &-overlay {
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-overlay-inner {
+    text-align: center;
+    padding-bottom: 10px;
+  }
+
+  &-overlay-left {
+    float: left;
+  }
+
+  &-overlay-right {
+    float: right;
+  }
+
+  &-overlay-button {
+    width: 20%;
+  }
+
+  &-overlay-button-inner {
+    display: block;
+    padding: 16px;
+    border-right: 1px solid #454545;
+  }
+
+  &-icon {
+    width: 55px;
+    height: 40px;
+    float: left;
+    margin: 5px 20px 0 0;
+    background-repeat: no-repeat;
+    background-image: url("assets/icon-default.png");
+    // core components, override above
+    &.adapt-contrib- {
+      &assessmentResults {
+        background-image: url("assets/icon-assessment.png");
+      }
+      &blank {
+        background-image: url("assets/icon-blank.png");
+      }
+      &accordion {
+        background-image: url("assets/icon-accordion.png");
+      }
+      &graphic {
+        background-image: url("assets/icon-graphic.png");
+      }
+      &gmcq {
+        background-image: url("assets/icon-gmcq.png");
+      }
+      &hotgraphic {
+        background-image: url("assets/icon-hot-graphic.png");
+      }
+      &matching {
+        background-image: url("assets/icon-matching.png");
+      }
+      &media {
+        background-image: url("assets/icon-media.png");
+      }
+      &mcq {
+        background-image: url("assets/icon-mcq.png");
+      }
+      &narrative {
+        background-image: url("assets/icon-narrative.png");
+      }
+      &slider {
+        background-image: url("assets/icon-slider.png");
+      }
+      &text {
+        background-image: url("assets/icon-text.png");
+      }
+      &textInput {
+        background-image: url("assets/icon-text.png");
+      }
+    }
+  }
+}

package/app/modules/editor/contentObject/templates/editorMenu.hbs

@@ -0,0 +1 @@
+<div class="editor-menu-inner clearfix"></div>

package/app/modules/editor/contentObject/templates/editorMenuItem.hbs

@@ -0,0 +1,23 @@
+<div data-id="{{_id}}" data-parentId="{{_parentId}}" class="editor-menu-item-inner clearfix no-select">
+  <div class="editor-menu-item-settings handle">
+    <div class="editor-menu-item-settings-inner">
+      <button class="open-context-contentObject"><i class="fa fa-cog fa-fw"></i></button>
+      <button class="contentObject-delete editor-delete-contentobject-element" title="{{ t 'app.clicktodelete'}}"><i class="fa fa-trash-o"></i></button>
+    </div>
+  </div>
+  <div class="editor-menu-item-content">
+    <div class="editor-menu-item-icon {{_type}}">
+      {{#ifValueEquals _type "menu"}}
+        <i class="fa fa-folder-o"></i>
+      {{/ifValueEquals}}
+      {{#ifValueEquals _type "page"}}
+        <i class="fa fa-file-o"></i>
+      {{/ifValueEquals}}
+    </div>
+    <div class="editor-menu-item-title">
+      <h3 class="editor-menu-item-title-text">{{{title}}}</h3>
+    </div>
+  </div>
+</div>
+
+<div class="editor-menu-item-pin"></div>

package/app/modules/editor/contentObject/templates/editorMenuLayer.hbs

@@ -0,0 +1,12 @@
+<div class="editor-menu-layer-controls clearfix">
+  <div class="editor-menu-layer-actions add-control">
+    <button class="editor-menu-layer-add-page btn primary"><i class="fa fa-file"></i>{{t 'app.addpage'}}</button>
+    <button class="editor-menu-layer-add-menu btn primary-hollow"><i class="fa fa-folder"></i> {{t 'app.addsubmenu'}}</button>
+  </div>
+  <div class="editor-menu-layer-actions paste-zone paste-zone-page">
+    <button class="editor-menu-layer-paste btn secondary">{{t 'app.paste'}}</button>
+    <button class="editor-menu-layer-paste-cancel btn secondary-hollow">{{t 'app.cancel'}}</button>
+  </div>
+</div>
+
+<div class="editor-menu-layer-inner"></div>

package/app/modules/editor/contentObject/templates/editorMenuSidebar.hbs

@@ -0,0 +1 @@
+{{> part_editorCommon}}

package/app/modules/editor/contentObject/templates/editorPage.hbs

@@ -0,0 +1,15 @@
+<div class="page-inner">
+  <div class="page-detail">
+    <h4 class="page-name title">
+      <button class="page-edit-button" title="{{t 'app.clicktoedit'}}"><i class="fa fa-cog fa-fw"></i></button>
+      {{#if displayTitle}}{{{displayTitle}}}{{else}}{{{title}}}{{/if}}
+    </h4>
+    <div class="page-body">{{{body}}}</div>
+  </div>
+
+  <div class="page-articles"></div>
+
+  <div class="add-control">
+    <button class="btn add-article">{{t 'app.addarticle'}}</button>
+  </div>
+</div>

package/app/modules/editor/contentObject/templates/editorPageArticle.hbs

@@ -0,0 +1,15 @@
+<div class="article-inner">
+  <div class="article-detail no-select">
+    {{>part_editorItemSidebar}}
+  </div>
+  <div class="article-content">
+    {{#if body}}
+      <div class="{{_type}}-body">{{{body}}}</div>
+    {{/if}}
+
+    <div class="article-blocks"></div>
+    <div class="add-control">
+      <button class="btn add-block">{{t 'app.addblock'}}</button>
+    </div>
+  </div>
+</div>

package/app/modules/editor/contentObject/templates/editorPageBlock.hbs

@@ -0,0 +1,14 @@
+{{>part_editorItemSidebar}}
+
+<div class="block-inner">
+  {{#if body}}
+    <div class="{{_type}}-body">{{{body}}}</div>
+  {{/if}}
+  <div class="page-components clearfix"></div>
+
+  {{#if layoutOptions}}
+    <div class="add-control">
+      <button class="btn add-component">{{t 'app.addcomponent'}}</button>
+    </div>
+  {{/if}}
+</div>

package/app/modules/editor/contentObject/templates/editorPageComponent.hbs

@@ -0,0 +1,9 @@
+{{>part_editorItemSidebar}}
+
+<div class="component-inner">
+  <div class="component-detail no-select">
+    <div class="component-type">{{getComponentDisplayName _component}}</div>
+    <h4 class="component-title">{{#if displayTitle}}{{{displayTitle}}}{{else}}{{{title}}}{{/if}}</h4>
+    <div class="component-body">{{{body}}}</div>
+  </div>
+</div>

package/app/modules/editor/contentObject/templates/editorPageComponentList.hbs

@@ -0,0 +1,33 @@
+<div class="editor-component-list-sidebar">
+    <div class="editor-component-list-sidebar-inner">
+
+        <div class="editor-component-list-sidebar-exit">
+          <i class="fa fa-times"></i>
+        </div>
+
+        <div class="editor-component-list-sidebar-header">
+          <div class="editor-component-list-sidebar-title">
+            <h2 class="editor-component-list-sidebar-title-inner">{{t 'app.addcomponent'}}</h2>
+          </div>
+          <div class="editor-component-list-sidebar-body">
+              <div class="editor-component-list-sidebar-body-inner">
+                {{t 'app.pleaseselectcomponent'}}
+              </div>
+          </div>
+
+          <div class="editor-component-list-sidebar-search">
+            <div class="editor-component-list-sidebar-search-icon">
+              <i class="fa fa-search"></i>
+            </div>
+            <div class="editor-component-list-sidebar-search-field">
+              <input type="search" placeholder="{{t 'app.typetofiltercomponents'}}"/>
+            </div>
+          </div>
+
+        </div>
+
+        <div class="editor-component-list-sidebar-list"></div>
+    </div>
+</div>
+
+<div class="click-capture"></div>

package/app/modules/editor/contentObject/templates/editorPageComponentListItem.hbs

@@ -0,0 +1,24 @@
+<div class="editor-component-list-item-inner">
+  <div class="editor-component-list-item-icon {{#if name}}{{name}}{{/if}}"></div>
+  {{#if displayName}}
+    <div class="editor-component-list-item-details">
+      <span class="editor-component-list-item-display-name" {{#if description}}title="{{description}}"{{/if}}>{{displayName}}</span>
+      {{#if description}}
+        <br/><span class="editor-component-list-item-description">{{description}}</span>
+      {{/if}}
+    </div>
+  {{/if}}
+</div>
+<div class="editor-component-list-item-overlay display-none">
+  <div class="editor-component-list-item-overlay-inner clearfix">
+    {{#if availablePositions.left}}
+      <a class="btn primary editor-component-list-item-overlay-button editor-component-list-item-overlay-left" data-position="left">{{t 'app.addtoleft'}}</a>
+    {{/if}}
+    {{#if availablePositions.full}}
+      <a class="btn primary editor-component-list-item-overlay-button editor-component-list-item-overlay-add" data-position="full">{{t 'app.addfullwidth'}}</a>
+    {{/if}}
+    {{#if availablePositions.right}}
+      <a class="btn primary editor-component-list-item-overlay-button editor-component-list-item-overlay-right" data-position="right">{{t 'app.addtoright'}}</a>
+    {{/if}}
+  </div>
+</div>

package/app/modules/editor/contentObject/templates/editorPageComponentPasteZone.hbs

@@ -0,0 +1,4 @@
+<div class="paste-zone-inner">
+  <a href="#" class="editor-paste-zone-paste paste-component btn secondary" data-paste-layout="{{_pasteZoneLayout}}">{{t 'app.paste'}}</a>
+  <a href="#" class="editor-paste-zone-cancel paste-cancel btn secondary-hollow">{{t 'app.cancel'}}</a>
+</div>

package/app/modules/editor/contentObject/templates/editorPageEdit.hbs

@@ -0,0 +1 @@
+<div class="page-edit-inner form-container"></div>

package/app/modules/editor/contentObject/templates/editorPageEditSidebar.hbs

@@ -0,0 +1,10 @@
+<div class="sidebar-item-inner">
+  <div class="separator"></div>
+  <button class="editor-page-edit-sidebar-save action-primary">
+    <span class="editor-page-edit-sidebar-save-inner">{{t 'app.save'}}</span>
+  </button>
+  <button class="editor-page-edit-sidebar-cancel action-secondary">
+    <span class="editor-page-edit-sidebar-cancel-inner">{{t 'app.cancel'}}</span>
+  </button>
+  <div class="separator"></div>
+</div>

package/app/modules/editor/contentObject/templates/editorPageSidebar.hbs

@@ -0,0 +1 @@
+{{> part_editorCommon}}

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

@@ -0,0 +1,174 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Origin = require('core/origin');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+
+  var EditorMenuItemView = EditorOriginView.extend({
+    autoScrollTimer: false,
+    className: "editor-menu-item",
+    clickTimer: undefined,
+    clickTimerActive: false,
+    tagName: "div",
+
+    events: {
+      'click .editor-menu-item-inner': 'onMenuItemClicked',
+      'click .open-context-contentObject': 'openContextMenu',
+      'click .contentObject-delete': 'deleteItemPrompt',
+      'mousedown .handle': 'enableDrag'
+    },
+
+    preRender: function() {
+      this.setupClasses();
+    },
+
+    postRender: function() {
+      this.setupEvents();
+    },
+
+    remove: function() {
+      this.$el.closest('.editor-menu-layer').off('mousemove');
+      EditorOriginView.prototype.remove.apply(this, arguments);
+    },
+
+    setupEvents: function() {
+      this.listenTo(Origin, 'editorView:removeSubViews', this.remove);
+
+      var type = this.model.get('_type');
+
+      this.on(`contextMenu:${type}:copy`, this.copyMenuItem);
+      this.on(`contextMenu:${type}:copyID`, this.copyID);
+      this.on(`contextMenu:${type}:delete`, this.deleteItemPrompt);
+      this.on(`contextMenu:${type}:edit`, this.editMenuItem);
+
+      this.$el.closest('.editor-menu').on('mousemove', _.bind(this.handleDrag, this));
+    },
+
+    setupClasses: function() {
+      this.$el.addClass('content-type-' + this.model.get('_type'));
+    },
+
+    onMenuItemClicked: function(event) {
+      event && event.preventDefault();
+      this.trigger('click', this);
+      // handle double-click
+      if(this.clickTimerActive) {
+        return this.onMenuItemDoubleClicked(event);
+      }
+      this.clickTimerActive = true;
+      // jQuery doesn't allow dblclick and click on the same element, so have to do it ourselves
+      this.clickTimer = window.setTimeout(_.bind(function() {
+        this.clickTimerActive = false;
+        window.clearTimeout(this.clickTimer);
+      }, this), 300);
+    },
+
+    onMenuItemDoubleClicked: function(event) {
+      event && event.preventDefault();
+      this.trigger('dblclick', this);
+    },
+
+    editMenuItem: function() {
+      var courseId = Origin.editor.data.course.get('_id');
+      var type = this.model.get('_type');
+      var menuItemId = this.model.get('_id');
+      Origin.router.navigateTo(`editor/${courseId}/${type}/${menuItemId}/edit`);
+    },
+
+    deleteItemPrompt: function(event) {
+      event && event.preventDefault();
+
+      this.listenToOnce(Origin, 'editorView:removeItem:'+ this.model.get('_id'), this.deleteItem);
+      this.listenToOnce(Origin, 'editorView:cancelRemoveItem:'+ this.model.get('_id'), this.cancelDeleteItem);
+
+      var self = this;
+
+      Origin.Notify.confirm({
+        type: 'warning',
+        title: Origin.l10n.t('app.deleteitem'+ this.model.get('_type')),
+        text: Origin.l10n.t('app.confirmdelete' + this.model.get('_type')) + '<br/><br/>' + Origin.l10n.t('app.confirmdeletewarning' + this.model.get('_type')),
+        callback: result => self.onConfirmRemovePopup(result.isConfirmed)
+      });
+    },
+
+    onConfirmRemovePopup: function(isConfirmed) {
+      var id = this.model.get('_id');
+      if (isConfirmed) {
+        Origin.trigger('editorView:removeItem:' + id);
+      } else {
+        Origin.trigger('editorView:cancelRemoveItem:' + id);
+      }
+    },
+
+    copyMenuItem: function() {
+      Origin.trigger('editorView:copy', this.model);
+    },
+
+    copyID: function() {
+      Origin.trigger('editorView:copyID', this.model);
+    },
+
+    deleteItem: function(event) {
+      this.stopListening(Origin, 'editorView:cancelRemoveItem:'+ this.model.get('_id'), this.cancelDeleteItem);
+      // We also need to navigate to the parent element - but if it's the courseId let's
+      // navigate up to the menu
+      var type = this.model.get('_type');
+      var isTopLevel = (type === 'page' || type === 'menu');
+      var parentId = isTopLevel ? '' : '/' + this.model.get('_parentId');
+      Origin.router.navigateTo('editor/' + Origin.editor.data.course.id + '/menu' + parentId);
+
+      this.model.destroy({
+        success: _.bind(function(model) {
+          Origin.trigger('editorView:itemDeleted', model);
+          this.remove()
+        }, this),
+        error: () => Origin.Notify.alert({ type: 'error', text: 'app.errordelete' })
+      });
+    },
+
+    cancelDeleteItem: function() {
+      this.stopListening(Origin, 'editorView:removeItem:'+ this.model.get('_id'), this.deleteItem);
+    },
+
+    enableDrag: function(event) {
+      this.model.set('_isDragging', true);
+    },
+
+    handleDrag: function(event) {
+      window.clearInterval(this.autoScrollTimer);
+      this.autoScrollTimer = false;
+
+      if(!this.model.get('_isDragging')) {
+        return;
+      }
+
+      var $currentLayer = $(".editor-menu-layer[data-over='true'] > .editor-menu-layer-inner");
+
+      if(!$currentLayer.length) {
+        return;
+      }
+
+      this.autoScrollTimer = window.setInterval(function() {
+        var SCROLL_THRESHOLD = $currentLayer.height()*0.2;
+        var SCROLL_INCREMENT = 4;
+
+        var offsetTop = $currentLayer.offset().top;
+        var clientY = event.clientY;
+        var scrollAmount;
+
+        if (clientY < (offsetTop+SCROLL_THRESHOLD)) {
+          scrollAmount = -SCROLL_INCREMENT;
+        }
+        else if (clientY > (($currentLayer.height()+offsetTop) - SCROLL_THRESHOLD)) {
+          scrollAmount = SCROLL_INCREMENT;
+        }
+        if(scrollAmount) {
+          $currentLayer.scrollTop($currentLayer.scrollTop()+scrollAmount);
+        }
+      }, 10);
+    }
+  }, {
+    template: 'editorMenuItem'
+  });
+
+  return EditorMenuItemView;
+});