adapt-authoring-ui 0.0.1

package/app/modules/editor/global/less/editor.less

@@ -0,0 +1,204 @@
+@import 'colours';
+
+.editor-view {
+
+  .editor-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .editor-panel {
+    float: right;
+    width: 10%;
+  }
+
+  .editor {
+    float: left;
+    width: 90%;
+    height: 100%;
+    background-color: lightgrey;
+  }
+
+  .paste-zone {
+
+    &.paste-zone-block,
+    &.paste-zone-article {
+      margin-bottom: 20px;
+    }
+
+    &-inner {
+      padding: 20px 30px;
+      border: 1px dashed lighten(@primary-color, 15%);
+      border-radius: 3px;
+    }
+
+    &-component-left {
+      width: 48%;
+      float: left;
+    }
+
+    &-component-right {
+      width: 48%;
+      float: right;
+    }
+
+    &-component-full {
+      margin-bottom: 20px;
+    }
+
+  }
+
+  .paste-zone-available {
+    background-color: #d6f3f9;
+    border: 1px dashed #31b8cc;
+  }
+
+  .paste-zone-droppable {
+    visibility: visible;
+    background-color: #beebf5;
+    border-style: solid;
+  }
+
+  .drop-only {
+    display: none;
+  }
+
+  .component-full {
+    float: left;
+    width: 100%;
+  }
+
+  .page-article-components:after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+
+  .editor-item-sidebar {
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 30px;
+    height: 100%;
+    background: #454545;
+
+    &.handle {
+      cursor: move;
+    }
+  }
+
+  .drag-helper {
+    color: #DEDEDE;
+    border: 1px solid #C9C9C9;
+    background: #7A7A7A;
+    padding: 10px;
+    margin: 10px;
+    cursor: move;
+    min-width: 100px;
+  }
+}
+
+.editor-item-settings {
+    font-size: 16px;
+    width: 100%;
+    opacity: 1;
+    background-color: transparent;
+    transition: all 0.3s;
+
+    a {
+      text-decoration: none;
+    }
+
+    &:hover {
+      cursor: move;
+    }
+
+    &-inner {
+      button {
+        padding: 10px;
+        font-size: 16px;
+        line-height: 16px;
+        height: 16px;
+        box-sizing: content-box;
+        text-align: center;
+      }
+
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      padding: 0 10px;
+
+      .editor-delete-page-element {
+        order: 2;
+      }
+      .editor-page-element-detail-inner {
+        width: 100%;
+        padding: 0 10px;
+        overflow: hidden;
+        order: 1;
+        display: flex;
+        align-items: center;
+        .title {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        &.component-detail-inner {
+          opacity: 0;  // we need the element to move the trash-icon to the right
+        }
+      }
+      .component-move {
+        order: 1;
+      }
+      .editor-collapse-article {
+        order: 2;
+      }
+    }
+}
+
+.editor-item-settings button,
+.editor-menu-item-settings button {
+  color: @primary-color;
+  transition: all 0.3s;
+  &:hover {
+    color:darken(@primary-color,5%);
+  }
+}
+
+i.asset-selector {
+  cursor: pointer;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+i.asset-clear {
+  cursor: pointer;
+}
+
+.sweet-alert .key {
+  font-weight: @font-weight-bold;
+}
+
+.page-content-syncing {
+  &.block {
+    min-height: 150px;
+    .component {
+      &-inner {
+        display: none;
+      }
+    }
+  }
+}
+
+.syncing {
+  transform: scale(0.8, 0.8);
+  opacity: 0.6;
+}
+
+.not-synced {
+  transition:transform 0.3s cubic-bezier(0.8, 0.0, 0.2, 1), opacity 0.3s cubic-bezier(0.8, 0.0, 0.2, 1)!important;
+  transform: scale(0.4, 0.4);
+  opacity:0;
+}

package/app/modules/editor/global/templates/editor.hbs

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

package/app/modules/editor/global/templates/editorPasteZone.hbs

@@ -0,0 +1,4 @@
+<div class="paste-zone-inner">
+  <a href="#" class="editor-paste-zone-paste paste-{{_type}} btn action-primary" data-sort-order="{{_pasteZoneSortOrder}}">{{t 'app.paste'}}</a>
+  <a href="#" class="editor-paste-zone-cancel paste-cancel btn action-secondary">{{t 'app.cancel'}}</a>
+</div>

package/app/modules/editor/global/templates/partials/part_editorCommon.hbs

@@ -0,0 +1,70 @@
+<div class="sidebar-item-inner">
+  <div class="editor-common-sidebar-preview-wrapper">
+    <button class="editor-common-sidebar-preview action-primary">
+      <span class="editor-common-sidebar-preview-inner">{{ t 'app.preview'}}</span>
+      <span class="editor-common-sidebar-previewing display-none">
+        <i class="fa fa-circle-o-notch fa-spin"></i>{{ t 'app.previewing'}}
+      </span>
+    </button>
+  </div>
+
+  <button class="editor-common-sidebar-download action-secondary">
+    <span class="editor-common-sidebar-download-inner">{{ t 'app.download'}}</span>
+    <span class="editor-common-sidebar-downloading display-none">
+      <i class="fa fa-circle-o-notch fa-spin"></i>{{ t 'app.downloading'}}
+    </span>
+  </button>
+
+  {{#ifHasScopes "export:adapt"}}
+  <button class="editor-common-sidebar-export action-secondary">
+    <span class="editor-common-sidebar-export-inner">{{ t 'app.export'}}</span>
+    <span class="editor-common-sidebar-exporting display-none">
+      <i class="fa fa-circle-o-notch fa-spin"></i>{{ t 'app.exporting'}}
+    </span>
+  </button>
+  {{/ifHasScopes}}
+
+  <div class="separator" />
+
+  <div class="sidebar-row">
+    <button class="editor-common-sidebar-project">
+      <span class="editor-common-sidebar-project-inner">
+        <i class="fa fa-chevron-right primary-color"/>{{ t 'app.editorsettings'}}
+      </span>
+    </button>
+  </div>
+
+  <div class="sidebar-row">
+    <button class="editor-common-sidebar-config">
+      <span class="editor-common-sidebar-config-inner">
+        <i class="fa fa-chevron-right primary-color"/>{{ t 'app.configurationsettings'}}
+      </span>
+    </button>
+  </div>
+
+  <div class="sidebar-row">
+    <button class="editor-common-sidebar-select-theme">
+      <span class="editor-common-sidebar-select-theme-inner">
+        <i class="fa fa-chevron-right primary-color"/></i>{{ t 'app.editorselecttheme'}}
+      </span>
+    </button>
+  </div>
+
+  <div class="sidebar-row">
+    <button class="editor-common-sidebar-menusettings">
+      <span class="editor-common-sidebar-menusettings-inner">
+        <i class="fa fa-chevron-right primary-color"/></i>{{ t 'app.editorselectmenu'}}
+      </span>
+    </button>
+  </div>
+
+  <div class="sidebar-row">
+    <button class="editor-common-sidebar-extensions">
+      <span class="editor-common-sidebar-extensions-inner">
+        <i class="fa fa-chevron-right primary-color"/></i>{{ t 'app.manageextensions'}}
+      </span>
+    </button>
+  </div>
+
+  <form id="downloadForm" method="get" action=""></form>
+</div>

package/app/modules/editor/global/templates/partials/part_editorItemSidebar.hbs

@@ -0,0 +1,40 @@
+<div class="editor-item-settings handle">
+  <div class="editor-item-settings-inner">
+
+    <button class="open-context-icon open-context-{{_type}}" title="{{t 'app.clicktoedit'}}">
+      <i class="fa fa-cog fa-fw"></i>
+    </button>
+    <button class="{{_type}}-delete editor-delete-page-element" title="{{ t 'app.clicktodelete'}}">
+      <i class="fa fa-trash-o"></i>
+    </button>
+
+    {{#if _movePositions}}
+      {{#if _movePositions.left}}
+        <button class="{{_type}}-move {{_type}}-move-left editor-move-page-element" title="{{ t 'app.layoutleft'}}">
+          <i class="fa fa-long-arrow-left"></i>
+        </button>
+      {{/if}}
+      {{#if _movePositions.right}}
+        <button class="{{_type}}-move {{_type}}-move-right editor-move-page-element" title="{{ t 'app.layoutright'}}">
+          <i class="fa fa-long-arrow-right"></i>
+        </button>
+      {{/if}}
+      {{#if _movePositions.full}}
+        <button class="{{_type}}-move {{_type}}-move-full editor-move-page-element" title="{{ t 'app.layoutfull'}}">
+          <i class="fa fa-arrows-h"></i>
+        </button>
+      {{/if}}
+    {{/if}}
+
+    <div class="{{_type}}-detail-inner editor-page-element-detail-inner">
+      <h4 class="{{_type}}-title title">{{#if displayTitle}}{{{displayTitle}}}{{else}}{{{title}}}{{/if}}</h4>
+    </div>
+
+    {{#if _isCollapsible}}
+    <button class="editor-collapse-{{_type}} {{#if _isCollapsed}}iscollapsed{{/if}}" title="{{ t 'app.collapsearticle'}}">
+      <i class="fa fa-minus"></i>
+    </button>
+    {{/if}}
+
+  </div>
+</div>

package/app/modules/editor/global/templates/partials/part_editorMenu.hbs

@@ -0,0 +1,4 @@
+<div class="editor-menu-options">
+  <a class="page-add-link" href="#">Add new page</a>
+</div>
+<div class="editor-page-list"></div>

package/app/modules/editor/global/templates/partials/part_settingsGeneral.hbs

@@ -0,0 +1,27 @@
+<div class="editing-overlay-panel-content">
+  <div class="editing-overlay-panel-content-inner">
+
+    <form role="form">
+      <div class="form-group">
+        <label for="setting-title">{{t 'app.title'}}</label>
+        <input type="text" class="form-control setting-title" placeholder="{{t 'app.title'}}" value="{{title}}">
+      </div>
+
+      <div class="form-group">
+        <label for="setting-displaytitle">{{t 'app.displaytitle'}}</label>
+        <input type="text" class="form-control setting-displaytitle" placeholder="{{t 'app.displaytitle'}}" value="{{displayTitle}}">
+      </div>
+
+      <div class="form-group">
+        <label for="setting-class">{{t 'app.class'}}</label>
+        <input type="text" class="form-control setting-class" placeholder="{{t 'app.class'}}" value="{{_classes}}">
+      </div>
+
+      <div class="form-group">
+        <label for="setting-body">{{t 'app.bodytext'}}</label>
+        <textarea class="text-editor form-control setting-body" id="setting-body" placeholder="{{t 'app.bodytext'}}">{{body}}</textarea>
+      </div>
+    </form>
+
+  </div>
+</div>

package/app/modules/editor/global/views/editorOriginView.js

@@ -0,0 +1,255 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Origin = require('core/origin');
+  var OriginView = require('core/views/originView');
+
+  var EditorOriginView = OriginView.extend({
+    events: {
+      'click .paste-cancel': 'onPasteCancel',
+      'click .field-object .legend': 'onFieldObjectClicked',
+      'dblclick .editor-item-settings-inner > button': 'onDbClick'
+    },
+
+    attributes: function() {
+      var colorLabel = this.model && this.model.get('_colorLabel');
+      if (colorLabel) return { 'data-colorlabel': colorLabel };
+    },
+
+    initialize: function(options) {
+      // Set form on view
+      if (options && options.form) {
+        this.form = options.form;
+        this.filters = [];
+      }
+      OriginView.prototype.initialize.apply(this, arguments);
+
+      this.listenTo(Origin, {
+        'sidebarFieldsetFilter:filterForm': this.filterForm,
+        'editorView:pasteCancel': this.hidePasteZones
+      });
+    },
+
+    getChildren: function() {
+      return Origin.editor.data.content.where({ _parentId: this.model.get('_id') }).sort((a,b) => {
+        return a._sortOrder < b._sortOrder ? -1 : 1;
+      });
+    },
+
+    getSiblings: function() {
+      return Origin.editor.data.content.models.filter(m => {
+        const sameParent = m.get('_parentId') === this.model.get('_parentId')
+        const isMe = m.get('_id') === this.model.get('_id');
+        return sameParent & !isMe;
+      });
+    },
+
+    render: function() {
+      OriginView.prototype.render.apply(this, arguments);
+
+      if(this.model) this.$el.attr('data-id', this.model.get('_id'));
+
+      return this;
+    },
+
+    postRender: function() {
+      if (!this.form) {
+        return this.setViewToReady();
+      }
+      this.$('.form-container').append(this.form.el);
+      // Set the delays going to stop jumping pages
+      _.delay(_.bind(this.setViewToReady, this, 400));
+    },
+
+    filterForm: function(filter) {
+      // toggle filter
+      if(this.filters.includes(filter)) {
+        this.filters = _.reject(this.filters, filterItem => filterItem === filter);
+      } else {
+        this.filters.push(filter);
+      }
+      // Now actually filter the form
+      if(this.filters.length) {
+        $('.form-container > form > div > fieldset').addClass('display-none');
+        this.filters.forEach(f => $(`fieldset[data-key=${f}]`).removeClass('display-none'));
+      } else {
+        $('.form-container > form > div > fieldset').removeClass('display-none');
+      }
+    },
+
+    componentPasteLocation: function(type) {
+      if ($('.block-inner .add-control').length > 0 || type !== 'component') return;
+      Origin.Notify.alert({
+        type: 'error',
+        text: Origin.l10n.t('app.componentcopyerror')
+      });
+      $('.add-control').removeClass('display-none');
+    },
+
+    showPasteZones: function(type) {
+      $('.paste-zone').addClass('display-none');
+      $('.add-control').addClass('display-none');
+      if(type) $('.paste-zone-' + type).removeClass('display-none').addClass('show');
+      if(this.currentView === "page") {
+        this.componentPasteLocation(type);
+      }
+    },
+
+    hidePasteZones: function() {
+      $('.paste-zone').removeClass('show');
+      // FIXME timeout for animation
+      setTimeout(function() { $('.paste-zone').addClass('display-none'); }, 300);
+      $('.add-control').removeClass('display-none');
+    },
+
+    showDropZones: function (supportedLayout) {
+      $('.paste-zone').addClass('display-none');
+      $('.add-control').addClass('display-none');
+      $(`.paste-zone-${this.model.get('_type')} a`).addClass('display-none');
+      // Components may be restricted to either full or half width so
+      // make sure only the appropriate paste zones are displayed
+      var type = this.model.get('_type');
+      var pasteZoneSelector = '.paste-zone-'+ type;
+      var $pasteZones;
+
+      if (type === 'component') {
+        $pasteZones = $();
+        if (supportedLayout.full) {
+          $pasteZones = $pasteZones.add('.paste-zone-component-full');
+        }
+        if (supportedLayout.half) {
+          $pasteZones = $pasteZones.add('.paste-zone-component-left, .paste-zone-component-right');
+        }
+      } else {
+        $pasteZones = $(pasteZoneSelector);
+      }
+      $(pasteZoneSelector + ' a').addClass('display-none');
+
+      $pasteZones
+        .addClass('paste-zone-available')
+        .removeClass('display-none');
+
+      this.$el.parent()
+        .children('.drop-only')
+        .removeClass('display-none');
+    },
+
+    hideDropZones: function() {
+      $('.paste-zone')
+        .addClass('display-none')
+        .removeClass('paste-zone-available');
+
+      $('.add-control').removeClass('display-none');
+      $('.paste-zone a').removeClass('display-none');
+
+      this.$el.parent()
+        .children('.drop-only')
+        .addClass('display-none');
+    },
+
+    save: function() {
+      if(!this.form) {
+        return;
+      }
+      var errors = this.form.validate();
+      // MUST trigger as sidebar needs to know when the form has been resubmitted
+      Origin.trigger('editorSidebar:showErrors', errors);
+
+      if(errors) {
+        var errorText = `${Origin.l10n.t('app.validationfailedmessage')}<br/><br/>${this.buildErrorMessage(errors)}`;
+        // TODO remove when we've got a better solution
+        this.onSaveError(Origin.l10n.t('app.validationfailed'), errorText);
+        return;
+      }
+      this.form.commit();
+      this.model.pruneAttributes();
+
+      var attrs = this.getAttributesToSave();
+      if(attrs) attrs._type = this.model.get('_type');
+
+      this.model.save(attrs, {
+        patch: !!attrs,
+        success: this.onSaveSuccess.bind(this),
+        error: (model, jqXhr) => this.onSaveError(undefined, jqXhr.responseJSON && jqXhr.responseJSON.message)
+      });
+    },
+
+    buildErrorMessage: function(errorObjs, message = "") {
+      _.each(errorObjs, function(item, key) {
+        if(item.hasOwnProperty('message')) {
+          message += `<span class="key">${item.title || key}</span>: ${item.message}<br/>`;
+        } else if(_.isObject(item)) { // recurse
+          message = this.buildErrorMessage(item, message);
+        }
+      }, this);
+      return message;
+    },
+
+    getAttributesToSave: function() {
+      return this.model.changedAttributes() || undefined;
+    },
+
+    // Event handling
+
+    openContextMenu: function (e) {
+      if(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      Origin.trigger('contextMenu:open', this, e);
+    },
+
+    onFieldObjectClicked: function(event) {
+      $(event.currentTarget)
+        .closest('.field-object')
+        .children('.collapsed')
+        .first()
+        .toggleClass('expanded');
+    },
+
+    onDbClick: function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    onCopy: function(e) {
+      e && e.preventDefault();
+      Origin.trigger('editorView:copy', this.model);
+    },
+
+    onCopyID: function(e) {
+      e && e.preventDefault();
+      Origin.trigger('editorView:copyID', this.model);
+    },
+
+    onPaste: function(e) {
+      if(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      Origin.trigger('editorView:paste', this.model.get('_parentId'), $(e.target).data('sort-order'), $(e.target).data('paste-layout'));
+    },
+
+    onPasteCancel: function(e) {
+      e && e.preventDefault();
+      Origin.trigger('editorView:pasteCancel', this.model);
+    },
+
+    onSaveSuccess: function() {
+      Origin.trigger('editor:refreshData', () => {
+        Origin.router.navigateBack();
+        this.remove();
+      });
+    },
+
+    onSaveError: function(pTitle, pText) {
+      Origin.Notify.alert({
+        type: 'error',
+        title: _.isString(pTitle) ? pTitle : Origin.l10n.t('app.errordefaulttitle'),
+        text: _.isString(pText) ? pText : Origin.l10n.t('app.errorsave')
+      });
+      Origin.trigger('sidebar:resetButtons');
+    }
+  });
+
+  return EditorOriginView;
+});

package/app/modules/editor/global/views/editorPasteZoneView.js

@@ -0,0 +1,69 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Origin = require('core/origin');
+  var Helpers = require('core/helpers');
+  var EditorOriginView = require('./editorOriginView');
+
+  var EditorPasteZoneView = EditorOriginView.extend({
+    className: 'display-none paste-zone',
+    events: {
+      'click .editor-paste-zone-paste': 'onPasteElementClicked'
+    },
+
+    preRender: function() {
+      this.listenTo(this.model, 'destroy', this.remove);
+      this.listenTo(Origin, 'editorView:removeSubViews editorPageView:removePageSubViews', this.remove);
+      this.listenTo(Origin, 'editor:dataLoaded', () => Origin.trigger('editorView:renderPage'))
+    },
+
+    postRender: function () {
+      var type = this.model.get('_type');
+      this.$el.addClass(`paste-zone-${type}`);
+      this.$el.droppable({
+        accept: `.${type}-draggable`,
+        hoverClass: 'paste-zone-droppable',
+        drop: _.bind(this.onDrop, this)
+      });
+    },
+
+    // Event handling
+
+    onPasteElementClicked: function(event) {
+      event && event.preventDefault();
+
+      var parentId = this.model.get('_parentId');
+      var sortOrder = this.model.get('_pasteZoneSortOrder');
+      var layout = this.model.get('_pasteZoneLayout');
+      Origin.trigger('editorView:paste', parentId, sortOrder, layout);
+    },
+
+    onDrop: function(e, ui) {
+      var type = this.model.get('_type');
+      var $component = $(ui.draggable);
+      var contentId = $component.attr(`data-${type}-id`);
+      var _parentId = this.model.get('_parentId');
+      var droppedOnId = $component.attr(`data-${this.model.get('_parent')}-id`);
+      var _sortOrder = Number($(`.paste-${type}`, this.$el).attr('data-sort-order'));
+      $.ajax({
+        url: `api/content/${contentId}`,
+        type: 'PATCH',
+        contentType: 'application/json',
+        data: JSON.stringify({ _parentId, _sortOrder }),
+        success: function() {
+          var eventPrefix = `editorView:move${Helpers.capitalise(type)}:`;
+          Origin.trigger(eventPrefix + droppedOnId);
+          // notify the old parent that the child's gone
+          if(droppedOnId !== _parentId) Origin.trigger(eventPrefix + _parentId);
+          Origin.trigger('editor:refreshData');
+        },
+        error: function(jqXHR) {
+          Origin.Notify.alert({ type: 'error', text: jqXHR.responseJSON.message });
+        }
+      });
+    }
+  }, {
+    template: 'editorPasteZone'
+  });
+
+  return EditorPasteZoneView;
+});