adapt-authoring-ui 0.0.1

package/app/modules/frameworkImport/views/frameworkImportView.js

@@ -0,0 +1,109 @@
+// 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 Helpers = require('core/helpers');
+
+  var FrameworkImportView = OriginView.extend({
+    tagName: 'div',
+    className: 'frameworkImport',
+    createdCourseId: false,
+
+    preRender: function() {
+      Origin.trigger('contentHeader:updateTitle', { title: Origin.l10n.t('app.frameworkimporttitle') });
+      this.listenTo(Origin, {
+        'frameworkImport:check': this.checkCourse,
+        'frameworkImport:import': this.importCourse
+      });
+    },
+
+    postRender: function() {
+      // tagging
+      this.$('#tags_control').tagsInput({
+        autocomplete_url: 'api/tags/autocomplete',
+        onAddTag: this.onAddTag.bind(this),
+        onRemoveTag: this.onRemoveTag.bind(this),
+        minChars : 3,
+        maxChars : 30
+      });
+      this.setViewToReady();
+    },
+
+    isValid: function() {
+      var $uploadFile = this.$('.asset-file');
+      const isValid = $uploadFile.val() !== '';
+      $uploadFile.toggleClass('input-error', !isValid);
+      $('.field-file').find('span.error').text(isValid ? '' : Origin.l10n.t('app.pleaseaddfile'));
+      return isValid;
+    },
+
+    checkCourse: async function() {
+      if(!this.isValid()) return;
+      try {
+        const data = await this.doImport(true);
+        $('button.frameworkimport.check').addClass('display-none');
+        if(data.canImport) $('button.frameworkimport.import').removeClass('display-none');
+        this.$('#import_upload').addClass('display-none');
+        this.$el.append(Handlebars.templates.frameworkImportSummary(this.transformStatusData(data)));
+      } catch(e) {
+        this.onError(e);
+      } finally {
+        Origin.trigger('sidebar:resetButtons');
+      }
+    },
+
+    transformStatusData: function(data) {
+      Object.values(data.statusReport).forEach(v => {
+        v.forEach(v2 => v2.codeKey = `app.import.status.${v2.code}`);
+      });
+      Object.values(data.versions).forEach(v => {
+        v.statusKey = `app.import.status.${v.status}`;
+      });
+      return data;
+    },
+    
+    importCourse: function() {
+      if(!this.isValid()) return;
+      this.doImport()
+        .then(() => Origin.router.navigateToDashboard())
+        .catch(this.onError);
+    },
+
+    doImport: async function(dryRun = false) {
+      Origin.trigger('sidebar:updateButton', 'button.frameworkimport', Origin.l10n.t('app.working'));
+
+      if(this.model.get('tags')) {
+        this.$('#tags').val(this.model.get('tags').map(t => t.title));
+      }
+      const data = await Helpers.submitForm(this.$('form.frameworkImport'), { extendedData: { dryRun } })
+      return Object.assign(data, { canImport: data.statusReport.error === undefined });
+    },
+
+    onAddTag: function (tag) {
+      $.ajax({ url: 'api/tags', method: 'POST', data: { title: tag } })
+        .done(data => {
+          const tags = this.model.get('tags') || [];
+          this.model.set({ tags: [...tags, { _id: data._id, title: data.title }] });
+        });
+    },
+
+    onRemoveTag: function (tag) {
+      var tags = [];
+      _.each(this.model.get('tags'), function (item) {
+        if (item.title !== tag) {
+          tags.push(item);
+        }
+      });
+      this.model.set({ tags: tags });
+    },
+
+    onError: function(e) {
+      Origin.Notify.alert({ type: 'error', text: e.message });
+      Origin.trigger('sidebar:resetButtons');
+    }
+  }, {
+    template: 'frameworkImport'
+  });
+
+  return FrameworkImportView;
+});

package/app/modules/globalMenu/index.js

@@ -0,0 +1,86 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+    var Backbone = require('backbone');
+    var Origin = require('core/origin');
+    var GlobalMenuView = require('./views/globalMenuView');
+
+    class GlobalMenu {
+        constructor() {
+            this.isOpen = false;
+            this.itemStore = new Backbone.Collection([
+                {
+                    location: "global",
+                    text: Origin.l10n.t('app.dashboard'),
+                    icon: "fa-home",
+                    sortOrder: 1,
+                    callback: () => Origin.router.navigateToDashboard()
+                }
+            ]);
+            this.itemStore.comparator = 'sortOrder';
+            
+            Origin.on('appHeader:postRender', this.renderButton.bind(this));
+            Origin.on('remove:views globalMenu:close', this.close.bind(this));
+            $(document).on('click', '#app,.sidebar,.appHeader', this.close.bind(this));
+            this.itemStore.on('update', this.renderButton.bind(this));
+
+            _.defer(() => Origin.trigger('globalMenu:ready'));
+
+            return this;
+        }
+        renderButton() {
+            if(!this.itemStore.length) {
+                return;
+            }
+            var $btn = $(Handlebars.partials.part_globalMenuButton());
+            $('.appHeader .appHeader-left').prepend($btn);
+            $btn.on('click', this.onButtonClick.bind(this));
+        }
+        addItem(item, isSubItem) {
+            const isValid = this.validateItem(item, isSubItem);
+            if(!isValid) {
+                return;
+            }
+            if (!item.hasOwnProperty('sortOrder')) item.sortOrder = 99;
+            if(isSubItem) {
+                item.isSubItem = true;
+                if (!this.itemStore.findWhere({ text: item.parent })) {
+                    return console.log("Cannot add Sub Menu item as there's no parentItem", item.text);
+                }
+            }
+            if (!this.itemStore.findWhere({ text: item.text })) this.itemStore.add(item);
+        }
+        validateItem(item, isSubItem = false) {
+            const keys = ['location', 'text', 'icon', ['callback', 'callbackEvent', 'route']];
+            if(isSubItem) keys.push('parent');
+            for (const k of keys) {
+                const errorMsg = 'Cannot add global menu item,';
+                if(Array.isArray(k)) {
+                    if(!k.some(k2 => item.hasOwnProperty(k2))) return console.log(errorMsg, `must define one of: ${k.join(', ')}`);
+                    continue;
+                }
+                if(!item.hasOwnProperty(k)) return console.log(errorMsg, `missing ${k}`);
+            }
+            return true;
+        }
+        open() {
+            this.isOpen = true;
+            $('#global-menu-icon').toggleClass('open', this.isOpen);
+            $('.appHeader').append(new GlobalMenuView({ collection: this.itemStore }).$el);
+        }
+        close() {
+            if(!this.isOpen) {
+                return;
+            }
+            this.isOpen = false;
+            $('#global-menu-icon').toggleClass('open', this.isOpen);
+            Origin.trigger('globalMenu:globalMenuView:remove');
+        }
+        onButtonClick(event) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.isOpen ? this.close() : this.open();
+        }
+    };
+
+    Origin.globalMenu = new GlobalMenu();
+});

package/app/modules/globalMenu/less/globalMenu.less

@@ -0,0 +1,117 @@
+@import 'colours';
+
+.global-menu {
+  display:none;
+  top:61px;
+  position:absolute;
+  width:260px;
+  background-color:@primary-color;
+
+  a {
+    display:block;
+    color:@appHeader-text-color;
+    text-decoration: none;
+    border-bottom:1px solid lighten(@primary-color, 10%);
+    &:hover {
+      background-color:lighten(@primary-color, 10%);
+      color:@appHeader-text-color;
+    }
+  }
+
+  .global-menu-inner {
+    border-left: 1px solid rgba(0,0,0,0.1);
+    border-right: 1px solid rgba(0,0,0,0.1);
+  }
+
+  .global-menu-submenu {
+    display:none;
+    width:260px;
+    position:absolute;
+    background-color: @white;
+    border-top: 1px solid @white;
+    border-left: 1px solid @white;
+  }
+
+  .global-menu-item-inner {
+    padding:14px 18px;
+  }
+
+  .global-menu-item-text-inner {
+    color: @white;
+  }
+}
+
+.appHeader-global-menu {
+  .appHeader-item;
+}
+
+#global-menu-icon {
+  width: 30px;
+  position: relative;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: .5s ease-in-out;
+  -moz-transition: .5s ease-in-out;
+  -o-transition: .5s ease-in-out;
+  transition: .5s ease-in-out;
+  cursor: pointer;
+}
+
+#global-menu-icon span {
+  display: block;
+  position: absolute;
+  height: 2px;
+  width: 22px;
+  background: @white;
+  border-radius: 5px;
+  -webkit-transform-origin: left center;
+  -moz-transform-origin: left center;
+  -o-transform-origin: left center;
+  transform-origin: left center;
+  -webkit-transition: .25s ease-in-out;
+  -moz-transition: .25s ease-in-out;
+  -o-transition: .25s ease-in-out;
+  transition: .25s ease-in-out;
+}
+
+#global-menu-icon.open span{
+  height: 12px;
+  width: 12px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+  border-radius: 0;
+}
+
+#global-menu-icon span:nth-child(1) {
+  top: 12px;
+  left: 10px;
+}
+
+#global-menu-icon span:nth-child(2) {
+  top: 19px;
+  left: 10px;
+}
+
+#global-menu-icon span:nth-child(3) {
+  top: 26px;
+  left: 10px;
+}
+
+#global-menu-icon.open span:nth-child(1) {
+  top: 6px;
+  left: 15px;
+}
+
+#global-menu-icon.open span:nth-child(2) {
+  top: 14px;
+  left: 23px;
+}
+
+#global-menu-icon.open span:nth-child(3) {
+  top: 14px;
+  left: 7px;
+}

package/app/modules/globalMenu/templates/globalMenu.hbs

@@ -0,0 +1,6 @@
+<div class="global-menu-inner">
+</div>
+<div class="global-menu-submenu">
+    <div class="global-menu-submenu-inner">
+    </div>
+</div>

package/app/modules/globalMenu/templates/globalMenuItem.hbs

@@ -0,0 +1,10 @@
+<a href="#" class="global-menu-item-inner">
+    <div class="global-menu-item-icon">
+        <span class="icon"></span>
+    </div>
+    <div class="global-menu-item-text">
+        <div class="global-menu-item-text-inner"><i class="fa {{icon}} fa-fw"></i>&nbsp;
+            {{text}}
+        </div>
+    </div>
+</a>

package/app/modules/globalMenu/templates/partials/part_globalMenuButton.hbs

@@ -0,0 +1,7 @@
+<a href="#" class="appHeader-global-menu" data-event="globalMenu:toggle">
+  <div id="global-menu-icon">
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+</a>

package/app/modules/globalMenu/views/globalMenuItemView.js

@@ -0,0 +1,108 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+
+    var Origin = require('core/origin');
+
+    var GlobalMenuItemView = Backbone.View.extend({
+
+        className: 'global-menu-item',
+
+        events: {
+            'click a.global-menu-item-inner': 'onMenuItemClicked'
+        },
+
+        initialize: function() {
+            // Used to clean up view when closing the menu
+            this.listenTo(Origin, 'globalMenu:globalMenuView:remove', this.remove);
+            this.render();
+            _.defer(_.bind(function() {
+                // Setup children items and hover events if the menu item is not a subMenuItem
+                if (!this.model.get('_isSubMenuItem')) {
+                    // Only setup hover events if menu item has children
+                    if (this.setupChildren()) {
+                        this.setupHover();
+                    };
+                } else {
+                    this.listenTo(Origin, 'globalMenu:globalSubMenuView:remove', this.remove);
+                }
+            }, this));
+        },
+
+        render: function() {
+            var data = this.model.toJSON();
+            var template = Handlebars.templates[this.constructor.template];
+            this.$el.html(template(data));
+            return this;
+        },
+
+        setupChildren: function() {
+            // Find children subItems
+            this.children = this.collection.where({parent: this.model.get('text')});
+
+            // If this item has subItems return true else return false
+            // This helps decide whether hover events get added or not
+            if (this.children.length >= 1) {
+                return true;
+            } else {
+                return false;
+            }
+
+        },
+
+        setupHover: function() {
+            // On hover show subItems
+            this.$('.global-menu-item-inner').hover(_.bind(function() {
+                if (!this.model.get('_isActive')) {
+                    this.model.set('_isActive', true);
+                } else {
+                    return;
+                }
+                _.each(this.children, function(subMenuItem) {
+
+                    $('.global-menu-submenu-inner').append(new GlobalMenuItemView({
+                        model:subMenuItem,
+                        collection: this.collection
+                    }).$el)
+                    $('.global-menu-submenu').stop().fadeIn(300);
+
+                }, this);
+
+            }, this), _.bind(function() {
+
+                // Check if subMenuItems are not being hovered before removing
+                if ($('.global-menu-submenu').is(":hover")) {
+                    return;
+                }
+
+                // Trigger event to remove subMenuViews
+                Origin.trigger('globalMenu:globalSubMenuView:remove');
+                $('.global-menu-submenu').hide();
+                // Set _isActive to false to enable the menu to reset
+                this.model.set('_isActive', false);
+
+            }, this));
+        },
+
+        onMenuItemClicked: function(event) {
+            event.preventDefault();
+            // Set all active menu items to false
+            this.collection.invoke('set', {"_isActive": false});
+            // Handle callback
+            const callbackEvent = this.model.get('callbackEvent');
+            const callback = this.model.get('callback');
+            const route = this.model.get('route');
+
+            if(route) Origin.router.navigateTo(route);
+            if(callback) callback(this.model);
+            if(callbackEvent) Origin.trigger('globalMenu:' + this.model.get('callbackEvent'));
+            // Trigger navigation toggle to close
+            Origin.trigger('globalMenu:close');
+        }
+
+    }, {
+        template: 'globalMenuItem'
+    });
+
+    return GlobalMenuItemView;
+
+})

package/app/modules/globalMenu/views/globalMenuView.js

@@ -0,0 +1,45 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+    var Origin = require('core/origin');
+    var GlobalMenuItemView = require('./globalMenuItemView');
+
+    var GlobalMenuView = Backbone.View.extend({
+        className: 'global-menu',
+
+        initialize: function() {
+            this.listenTo(Origin, 'globalMenu:globalMenuView:remove', this.removeMenu);
+            this.render();
+        },
+
+        render: function() {
+            var template = Handlebars.templates[this.constructor.template];
+            this.$el.html(template());
+            _.defer(() => this.postRender());
+            return this;
+        },
+
+        postRender: function() {
+            this.collection.each(this.renderItem, this);
+            _.defer(() => this.$el.fadeIn(300));
+        },
+
+        renderItem(item) {
+            var scopes = item.get('scopes');
+            var hasPermission = !scopes || Origin.sessionModel.hasScopes(scopes);
+            var location = item.get('location');
+            var atItemLocation = location === 'global' || location === Origin.location.module;
+            if(!hasPermission || !atItemLocation || item.get('isSubItem')) {
+                return;
+            }
+            this.$('.global-menu-inner').append(new GlobalMenuItemView({ collection: this.collection, model: item }).$el);
+        },
+
+        removeMenu: function() {
+            this.$el.fadeOut(300, () => this.remove());
+        }
+    }, {
+        template: 'globalMenu'
+    });
+
+    return GlobalMenuView;
+})

package/app/modules/limiteduser/index.js

@@ -0,0 +1,17 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var LimitedUserViewView = require('./views/limitedUserView');
+
+  Origin.on('router:limiteduser', (location, subLocation, action) => {
+    Origin.contentPane.setView(LimitedUserViewView);
+    Origin.trigger('sidebar:sidebarContainer:hide');
+    Origin.trigger('contentHeader:hide');
+  });
+
+  Origin.on('router:initialize login:changed', function() {
+    Origin.router.addDashboardHandler(() => {
+      if(!Origin.sessionModel.hasScopes(['read:content'])) return 'limiteduser';
+    });
+  });
+});

package/app/modules/limiteduser/less/limitedUser.less

@@ -0,0 +1,29 @@
+body.module-limiteduser {
+  .contentPane {
+    overflow: hidden;
+  }
+  .limiteduser {
+    &-inner {
+      max-width: 600px;
+      margin: 0 auto;
+      margin-top: 50px;
+      
+      .logo {
+        text-align: center;
+        margin-bottom: 30px;
+      }
+  
+      h1 {
+        font-size: 60px;
+        text-align: center;
+      }
+      h3 {
+        font-size: 26px;
+        text-align: center;
+      }
+      p {
+        margin: 30px;
+      }
+    }
+  }
+}

package/app/modules/limiteduser/templates/limitedUser.hbs

@@ -0,0 +1,8 @@
+<div class="limiteduser-inner">
+	<div class="logo">
+		<img src="css/assets/adapt-learning-logo-outline.png">
+	</div>
+	<h1>{{t 'app.welcometitle'}}</h1>
+	<h3>{{t 'app.welcomelimitedtitle'}}</h3>
+	<p>{{t 'app.welcomelimitedmessage'}}</p>
+</div>

package/app/modules/limiteduser/views/limitedUserView.js

@@ -0,0 +1,12 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var OriginView = require('core/views/originView');
+
+  var LimitedUserView = OriginView.extend({
+    className: 'limiteduser'
+  }, {
+    template: 'limitedUser'
+  });
+
+  return LimitedUserView;
+});

package/app/modules/modal/index.js

@@ -0,0 +1,13 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var ModalView = require('./views/modalView');
+
+  Origin.on('modal:open', function(view, options, context) {
+    new ModalView({
+      view: view,
+      options: options,
+      context: context
+    });
+  });
+});

package/app/modules/modal/less/modal.less

@@ -0,0 +1,61 @@
+@import 'colours';
+
+.modal {
+    position: fixed;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    padding: 30px;
+    box-sizing: border-box;
+    z-index:4000;
+    overflow-y: scroll;
+    background: rgba(0,0,0,0.4);
+    .modal-popup {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background-color: @ui-content-color;
+        &-inner {
+            height: 100%;
+        }
+    }
+
+    i {
+        margin-right:4px;
+    }
+
+    .modal-popup-toolbar {
+        background-color: @tertiary-color;
+        text-align:right;
+        color: @white;
+        padding: 5px 10px;
+        button {
+            color: @primary-color;
+            padding:0px 10px 0px 10px;
+            height:40px;
+            display:inline-block;
+            transition:background-color 0.3s;
+            i {
+                color: @secondary-color;
+            }
+            &:hover {
+                color: @white;
+            }
+            &:disabled {
+                color:#666;
+            }
+        }
+    }
+    .modal-popup-inner {
+        flex: 1 1 auto;
+        overflow: auto;
+        .modal-popup-content {
+            height: 100%;
+            .modal-popup-content-inner {
+                height: 100%;
+                overflow-y:auto;
+            }
+        }
+    }
+}

package/app/modules/modal/models/modalModel.js

@@ -0,0 +1,14 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+
+  var Backbone = require('backbone');
+
+  var ModalModel = Backbone.Model.extend({
+    defaults: {
+      _isActive:false
+    }
+  });
+
+  return ModalModel;
+
+});

package/app/modules/modal/templates/modal.hbs

@@ -0,0 +1,34 @@
+<div class="modal-popup">
+  <div class="modal-popup-toolbar clearfix">
+    {{#if title}}
+    <div class="modal-popup-title">
+      <h2 class="modal-popup-title-inner">{{title}}</h2>
+    </div>
+    {{/if}}
+    <div class="model-popup-toolbar-buttons">
+      {{#if _shouldShowDoneButton}}
+      <button href="#" class="modal-popup-done">
+        <i class="fa fa-check"></i>{{t 'app.done'}}
+      </button>
+      {{/if}}
+      {{#if _shouldShowCancelButton}}
+      <button href="#" class="modal-popup-close">
+        <i class="fa fa-times"></i>{{t 'app.cancel'}}
+      </button>
+      {{/if}}
+    </div>
+  </div>
+  <div class="modal-popup-inner">
+    {{#if body}}
+    <div class="modal-popup-body">
+      <div class="modal-popup-body-inner">
+        {{body}}
+      </div>
+    </div>
+    {{/if}}
+    <div class="modal-popup-content">
+      <div class="modal-popup-content-inner">
+      </div>
+    </div>
+  </div>
+</div>