adapt-authoring-ui 0.0.1

package/app/modules/assetManagement/templates/assetManagementModalTags.hbs

@@ -0,0 +1,26 @@
+<div class="asset-management-modal-tags-inner">
+    <div class="asset-management-modal-tags-toolbar">
+        <div class="asset-management-modal-tags-toolbar-inner clearfix">
+            <div class="asset-management-modal-tags-toolbar-title sidebar-filter-toolbar-title">
+                {{title}}
+            </div>
+            <div class="asset-management-modal-tags-toolbar-close sidebar-filter-toolbar-close">
+                <button class="fa fa-times"></button>
+            </div>
+        </div>
+    </div>
+    <div class="asset-management-modal-tags-search sidebar-filter-search">
+        <input type="text" class="asset-management-modal-tags-search-input sidebar-filter-search-input" />
+    </div>
+    <div class="asset-management-modal-tags-items sidebar-filter-items">
+        <div class="asset-management-modal-tags-items-inner">
+            {{#each items}}
+            <button class="asset-management-modal-tags-item sidebar-filter-item" data-title="{{title}}" data-id="{{_id}}">
+                <div class="asset-management-modal-tags-item-inner">
+                    {{#if _isUsed}}<i class="fa fa-check"></i>{{/if}}{{title}}
+                </div>
+            </button>
+            {{/each}}
+        </div>
+    </div>
+</div>

package/app/modules/assetManagement/templates/assetManagementPreview.hbs

@@ -0,0 +1,53 @@
+<div class="asset-preview-details text-centered">
+  <div class="asset-preview-details-preview">
+    {{#ifValueEquals type "image"}}
+      <img src="api/assets/serve/{{_id}}?{{timestring updatedAt}}"/>
+    {{/ifValueEquals}}
+
+    {{#ifValueEquals type "video"}}
+      <video preload="auto" controls width="640px" height="360px" poster="" style="width:100%; height:100%;">
+        <source src="api/assets/serve/{{_id}}?{{timestring updatedAt}}" type="{{type}}/{{subtype}}"/>
+      </video>
+    {{/ifValueEquals}}
+
+    {{#ifValueEquals type "audio"}}
+      <audio src="api/assets/serve/{{_id}}?{{timestring updatedAt}}" type="{{type}}/{{subtype}}" controls="controls" style="width:100%;"></audio>
+    {{/ifValueEquals}}
+  </div>
+
+  <h1 class="asset-preview-title">{{title}}</h1>
+  <div class="asset-preview-description">{{description}}</div>
+  
+  <div class="asset-type">
+    <i class="fa {{iconName}}"></i>&nbsp;<span>{{type}}/{{subtype}}</span>
+  </div>
+  
+  <div class="asset-size">{{t 'app.assetsize'}}: {{{bytesToSize size}}}</div>
+
+  {{#if duration}}
+    <div class="asset-duration break">{{t 'app.assetduration'}}: {{{formatDuration metadata.duration}}}</div>
+  {{/if}}
+
+  {{#if resolution}}
+    <div class="asset-height">{{t 'app.assetdimensions'}}: {{resolution}}</div>
+  {{/if}}
+
+  {{#if tagsMapped.length}}
+    <div class="asset-tags">{{t 'app.tags'}}: {{renderTags tagsMapped "title"}}</div>
+  {{/if}}
+
+  {{#if isSelectable}}
+  <div class="assset-select">
+   <a href="#" class="btn primary confirm-select-asset">Select</a>
+  </div>
+  {{/if}}
+  <div class="asset-preview-edit">
+    {{#if _isDeleted}}
+    <button class="asset-preview-restore-button btn alert">{{t 'app.restore'}}</button>
+    {{else}}
+    <button class="asset-preview-edit-button btn primary">{{t 'app.edit'}}</button>
+    <button class="asset-preview-delete-button btn alert">{{t 'app.delete'}}</button>
+    {{/if}}
+  </div>
+
+</div>

package/app/modules/assetManagement/templates/assetManagementSidebar.hbs

@@ -0,0 +1,93 @@
+<div class="sidebar-item-inner">
+
+{{!--     <div class="sidebar-row sidebar-item-title">
+        <h2 class="sidebar-item-title-inner">
+            Asset Management
+        </h2>
+    </div> --}}
+
+    <div class="separator"></div>
+
+    <button class="asset-management-sidebar-new action-primary">
+        <span class="asset-management-sidebar-new-inner">
+            {{t 'app.uploadnewasset'}}
+        </span>
+    </button>
+
+    <div class="separator"></div>
+
+    {{!-- ASSET FILTERS --}}
+
+    <div class="sidebar-row sidebar-divide">
+        <h3 class="sidebar-divide-inner">
+            <i class="fa fa-filter"></i>{{t 'app.assetfilters'}}
+        </h3>
+    </div>
+
+    {{!-- inline search field with close button --}}
+    <div class="sidebar-row">
+        <div class="sidebar-row-input">
+            <input type="text" class="asset-management-sidebar-filter-search" placeholder="{{t 'app.searchbyname'}}"/>
+            <button class="sidebar-filter-clear">
+                <i class="fa fa-times"></i>
+            </button>
+        </div>
+    </div>
+
+    <div class="sidebar-row">
+        <button class="asset-management-sidebar-filter-image sidebar-tag asset-management-sidebar-filter-button" data-filter-type="image">
+            <span class="asset-management-sidebar-filter-image-inner">
+                <i class="fa fa-toggle-off"></i>{{t 'app.filetypeimage' }}
+            </span>
+            <span class="asset-management-sidebar-filter-image-icon">
+                <i class="fa fa-image"></i>
+            </span>
+        </button>
+    </div>
+
+    <div class="sidebar-row">
+        <button class="asset-management-sidebar-filter-audio sidebar-tag asset-management-sidebar-filter-button" data-filter-type="audio">
+            <span class="asset-management-sidebar-filter-audio-inner">
+                <i class="fa fa-toggle-off"></i>{{t 'app.filetypeaudio' }}
+            </span>
+            <span class="asset-management-sidebar-filter-image-icon">
+                <i class="fa fa-file-audio-o"></i>
+            </span>
+        </button>
+    </div>
+
+    <div class="sidebar-row">
+        <button class="asset-management-sidebar-filter-video sidebar-tag asset-management-sidebar-filter-button" data-filter-type="video">
+            <span class="asset-management-sidebar-filter-video-inner">
+                <i class="fa fa-toggle-off"></i>{{t 'app.filetypevideo' }}
+            </span>
+            <span class="asset-management-sidebar-filter-image-icon">
+                <i class="fa fa-file-video-o"></i>
+            </span>
+        </button>
+    </div>
+
+    <div class="sidebar-row">
+        <button class="asset-management-sidebar-filter-other sidebar-tag asset-management-sidebar-filter-button" data-filter-type="other">
+            <span class="asset-management-sidebar-filter-other-inner">
+                <i class="fa fa-toggle-off"></i>{{t 'app.filetypeother' }}
+            </span>
+            <span class="asset-management-sidebar-filter-image-icon">
+                <i class="fa fa-file-o"></i>
+            </span>
+        </button>
+    </div>
+
+    <div class="sidebar-row sidebar-divide">
+        <h3 class="sidebar-divide-inner">
+            <i class="fa fa-tags"></i>{{t 'app.tags'}}
+        </h3>
+    </div>
+
+        <button class="asset-management-sidebar-add-tag sidebar-filter-button sidebar-tag action-secondary">
+            <span class="dashboard-sidebar-add-tag-inner">
+                {{t 'app.searchbytag' }}
+            </span>
+        </button>
+
+</div>

package/app/modules/assetManagement/templates/assetPicker.hbs

@@ -0,0 +1,45 @@
+<div class="asset-picker-filters">
+    {{!-- inline search field with close button --}}
+    <label for="asset-picker-filter-search">{{t 'app.filter'}}</label>
+    <input type="text" name="asset-picker-filter-search" class="asset-management-sidebar-filter-search" placeholder="{{t 'app.searchtitleordescription'}}"/>
+    <button class="sidebar-inline-input-button asset-picker-sidebar-filter-clear-search">
+        <i class="fa fa-times"></i>
+    </button>
+    <button class="asset-picker-sidebar-filter-image asset-picker-sidebar-filter-button" data-filter-type="image">
+        <span class="asset-picker-sidebar-filter-image-inner">
+            {{t 'app.filetypeimage' }}
+        </span>
+    </button>
+
+    <button class="asset-picker-sidebar-filter-audio asset-picker-sidebar-filter-button" data-filter-type="audio">
+        <span class="asset-picker-sidebar-filter-audio-inner">
+            {{t 'app.filetypeaudio' }}
+        </span>
+    </button>
+
+    <button class="asset-picker-sidebar-filter-video asset-picker-sidebar-filter-button" data-filter-type="video">
+        <span class="asset-picker-sidebar-filter-video-inner">
+            {{t 'app.filetypevideo' }}
+        </span>
+    </button>
+
+    <button class="asset-picker-sidebar-filter-other asset-picker-sidebar-filter-button" data-filter-type="other">
+        <span class="asset-picker-sidebar-filter-other-inner">
+            {{t 'app.filetypeother' }}
+        </span>
+    </button>
+</div>
+
+
+<div class="asset-management-inner">
+    <div class="asset-management-assets-container">
+        <div class="asset-management-no-assets">{{t 'app.noassetsfound'}}</div>
+        <div class="asset-management-assets-container-inner">
+        </div>
+    </div>
+    <div class="asset-management-preview-container">
+        <div class="asset-management-no-preview">{{t 'app.assetpreviewinstruction'}}</div>
+        <div class="asset-management-preview-container-inner">
+        </div>
+    </div>
+</div>

package/app/modules/assetManagement/views/assetManagementCollectionView.js

@@ -0,0 +1,216 @@
+// 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 AssetItemView = require('./assetManagementItemView');
+  var AssetModel = require('../models/assetModel');
+  var TagsCollection = require('core/collections/tagsCollection');
+
+  var AssetCollectionView = OriginView.extend({
+    className: "asset-management-collection",
+
+    sort: { createdAt: -1 },
+    search: undefined,
+    filters: [],
+    tags: [],
+    fetchCount: 0,
+    shouldStopFetches: false,
+    page: 1,
+    pageSize: 1,
+    assets: [],
+
+    preRender: function(options) {
+      this.initEventListeners();
+
+      this.isModal = options.isModal || false;
+
+      if(options.types) {
+        this.filters = options.types;
+      }
+      this.tagsCollection = new TagsCollection();
+
+      this._doLazyScroll = _.bind(_.throttle(this.doLazyScroll, 250), this);
+      this._onResize = _.bind(_.debounce(this.onResize, 400), this);
+    },
+
+    postRender: function() {
+      if(this.isModal) {
+        this.initPaging();
+      } else {
+        Origin.once('contentPane:ready', () => this.initPaging());
+      }
+      // init lazy scrolling
+      $('.asset-management-assets-container').on('scroll', this._doLazyScroll);
+      $(window).on('resize', this._onResize);
+    },
+
+    initEventListeners: function() {
+      this.listenTo(Origin, {
+        'assetManagement:sidebarFilter:add': this.addFilter,
+        'assetManagement:sidebarFilter:remove': this.removeFilter,
+        'assetManagement:sidebarView:filter': this.filterBySearchInput,
+        'assetManagement:assetManagementSidebarView:filterByTags': this.filterByTags,
+        'assetManagement:collection:refresh': this.resetCollection
+      });
+    },
+
+    initPaging: function() {
+      var $item = new AssetItemView({ model: new AssetModel() }).$el;
+      $item.css({
+        visibility: 'hidden'
+      }).appendTo('body');
+      var containerHeight = $('.asset-management-assets-container').outerHeight();
+      var itemHeight = $item.outerHeight(true);
+      var columns = Math.floor($('.asset-management-assets-container').outerWidth()/$item.outerWidth(true));
+      var rows = Math.max(1, Math.ceil(containerHeight/itemHeight));
+      $item.remove();
+      // columns stack nicely, but need to add extra row if it's not a clean split
+      if((containerHeight % itemHeight) > 0) rows++;
+      this.pageSize = columns*rows;
+      this.resetCollection(this.setViewToReady);
+    },
+
+    appendAssetItem: function (asset) {
+      if(!asset) {
+        return;
+      }
+      const tagsMapped = [];
+      const assetTags = asset.get('tags');
+      if(assetTags) {
+        assetTags.forEach(tId => {
+          tagsMapped.push(this.tagsCollection.find(t => t.get('_id') === tId).attributes);
+        });
+        asset.set('tagsMapped', tagsMapped);
+      }
+      this.$('.asset-management-collection-inner').append(new AssetItemView({ model: asset }).$el);
+    },
+
+    // Collection manipulation
+
+    fetchCollection: async function(cb) {
+      if(this.shouldStopFetches || this.isCollectionFetching) {
+        return;
+      }
+      this.isCollectionFetching = true;
+
+      this.collection.customQuery.tags = { $all: this.tags };
+
+      if(this.search) {
+        this.collection.customQuery.$or = [
+          { title: {  $regex: `.*${this.search.toLowerCase()}.*`, $options: 'i' } },
+          { description: {  $regex: `.*${this.search.toLowerCase()}.*`, $options: 'i' } }
+        ]
+      } else {
+        delete this.collection.customQuery.$or;
+      }
+      if(this.filters.length) {
+        this.collection.customQuery.type = { $in: this.filters };
+      } else {
+        delete this.collection.customQuery.type;
+      }
+      Object.assign(this.collection.queryOptions, {
+        skip: this.allAssets.length,
+        limit: this.pageSize,
+        page: this.page+1,
+        sort: this.sort
+      });
+      await this.tagsCollection.fetch();
+
+      this.collection.fetch({
+        success: _.bind(function(collection, response) {
+          this.allAssets.push(...collection.models);
+          this.isCollectionFetching = false;
+          // stop further fetching if this is the last page
+          if(response.length < this.pageSize) this.shouldStopFetches = true;
+
+          $('.asset-management-no-assets').toggleClass('display-none', this.allAssets.length > 0);
+
+          this.$('.asset-management-list-item').remove();
+          this.allAssets.forEach(a => this.appendAssetItem(a));
+
+          this.isCollectionFetching = false;
+
+          Origin.trigger('assetManagement:assetManagementCollection:fetched');
+          if(typeof cb === 'function') cb(collection);
+        }, this),
+        error: function(error) {
+          console.log(error);
+          this.isCollectionFetching = false;
+        }
+      });
+    },
+
+    resetCollection: function(cb, shouldFetch = true, selectedId) {
+      // to remove old views
+      Origin.trigger('assetManagement:assetViews:remove');
+
+      this.allAssets = [];
+      this.shouldStopFetches = false;
+      this.fetchCount = 0;
+      this.page = 0;
+      this.collection.reset();
+
+      if(!shouldFetch) {
+        return;
+      }
+      this.fetchCollection(() => {
+        if(selectedId) Origin.trigger('assetManagement:assetItemView:preview', this.collection.findWhere({ _id: selectedId }));
+        if(cb) cb()
+      });
+    },
+
+    // Filtering
+
+    addFilter: function(filterType) {
+      this.filters.push(filterType);
+      this.resetCollection();
+    },
+
+    removeFilter: function(filterType) {
+      // remove filter from this.filters
+      this.filters = this.filters.filter(item => item !== filterType);
+      this.resetCollection();
+    },
+
+    filterBySearchInput: function (filterText) {
+      this.resetCollection(null, false);
+      this.search = filterText;
+      this.fetchCollection();
+
+      $(".asset-management-modal-filter-search" ).focus();
+    },
+
+    filterByTags: function(tags) {
+      this.resetCollection(null, false);
+      this.tags = _.pluck(tags, 'id');
+      this.fetchCollection();
+    },
+
+    // Event handling
+
+    onResize: function() {
+      this.initPaging();
+    },
+
+    doLazyScroll: function(e) {
+      if(this.isCollectionFetching) {
+        return;
+      }
+      const $last = $('.asset-management-list-item').last();
+      const triggerY = ($('.asset-management').offset().top + this.$el.height()) - ($last.height()/2) ;
+
+      if($last.offset().top < triggerY) this.fetchCollection();
+    },
+
+    remove: function() {
+      $('.asset-management-assets-container').off('scroll', this._doLazyScroll);
+      $(window).off('resize', this._onResize);
+
+      OriginView.prototype.remove.apply(this, arguments);
+    }
+
+  }, {
+    template: 'assetManagementCollection'
+  });
+  return AssetCollectionView;
+});

package/app/modules/assetManagement/views/assetManagementEditAssetSidebarView.js

@@ -0,0 +1,25 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var SidebarItemView = require('modules/sidebar/views/sidebarItemView');
+
+  var AssetManagementEditAssetSidebarView = SidebarItemView.extend({
+    events: {
+      'click .asset-management-edit-sidebar-save-button': 'onSaveNewAssetClicked',
+      'click .asset-management-edit-sidebar-cancel-button': 'onCancelNewAssetClicked'
+    },
+
+    onSaveNewAssetClicked: function() {
+      this.updateButton('.asset-management-edit-sidebar-save-button', Origin.l10n.t('app.saving'));
+      Origin.trigger('assetManagement:editAsset');
+    },
+
+    onCancelNewAssetClicked: function() {
+      Origin.router.navigateTo('assetManagement');
+    }
+  }, {
+    template: 'assetManagementEditAssetSidebar'
+  });
+
+  return AssetManagementEditAssetSidebarView;
+});

package/app/modules/assetManagement/views/assetManagementEditAssetView.js

@@ -0,0 +1,123 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define([
+  'core/origin',
+  'core/views/originView',
+  'modules/scaffold/views/scaffoldFileView'
+], function(Origin, OriginView, ScaffoldFileView){
+  var AssetManagementEditAssetView = OriginView.extend({
+    className: 'asset-management-edit-asset',
+    events: {
+      'change .scaffold-file': 'updateTitle',
+    },
+
+    preRender: function() {
+      this.listenTo(Origin, 'assetManagement:editAsset', this.save);
+      this.originalAttributes = _.clone(this.model.attributes);
+    },
+
+    postRender: async function() {
+      this.model.set('_type', 'asset');
+      this.form = await Origin.scaffold.buildForm({ model: this.model });
+
+      const input = new ScaffoldFileView({ schema: { file: { type: "File" }, editorClass: 'field' }, key: 'file' });
+      input.$el.insertBefore($('.field', this.form.$el).first());
+      input.render();
+
+      $('.form-container', this.$el).append(this.form.el);
+
+      this.form.on('url:change', () => this.updateTitle());
+
+      this.setViewToReady();
+    },
+
+    updateTitle: function(e) {
+      if(!this.form.fields.title.getValue()) { // add the asset file name if there isn't already a title
+        this.form.fields.title.setValue($(e.currentTarget).val().replace("C:\\fakepath\\", ""));
+      }
+    },
+
+    buildErrorMessage: function(errors, message = "") {
+      Object.values(errors).forEach((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);
+        }
+      });
+      return message;
+    },
+
+    sanitiseData: function(dataArr) {
+      const isArray = Array.isArray(dataArr)
+      if(!isArray) {
+        dataArr = Object.entries(dataArr).map(([k,v]) => Object.create({ name: k, value: v }));
+      }
+      for (let i = 0; i < dataArr.length; i++) {
+        const d = dataArr[i];
+        if(d.name === "tags") {
+          if(!d.value.length) dataArr.splice(i--, 1);
+        } else if(d.name === "url" && d.value === "") {
+          dataArr.splice(i--, 1);
+        }
+      }
+      if(isArray) return dataArr;
+      const data = dataArr.reduce((m, d) => Object.assign(m, { [d.name]: d.value }), {});
+      if(Object.keys(data).length) return data;
+    },
+
+    getAttributesToSave: function() {
+      if(this.model.isNew()) {
+        return this.model.attributes;
+      }
+      var changedAttributes = this.model.changedAttributes();
+      return Object.keys(changedAttributes).length ? changedAttributes : undefined;
+    },
+
+    save: function() {
+      const errors = this.form.validate();
+      if(errors) {
+        return this.onSaveError(`${Origin.l10n.t('app.validationfailedmessage')}<br/><br/>${this.buildErrorMessage(errors)}`);
+      }
+      const callbacks = {
+        success: data => this.onSaveSuccess(data),
+        error: (model, xhr) => {
+          if(typeof xhr === 'string') xhr = model;
+          this.onSaveError(xhr.responseJSON && xhr.responseJSON.message || xhr.statusText);
+        }
+      };
+      if($('input[name="file"]').val()) { // handle file upload
+        this.form.$el.ajaxSubmit(Object.assign({
+          method: this.model.isNew() ? 'POST' : 'PATCH',
+          url: `/api/assets/${this.model.get('_id') ? this.model.get('_id') : ''}`,
+          beforeSubmit: this.sanitiseData,
+        }, callbacks));
+        return;
+      }
+      this.form.commit();
+      const data = this.sanitiseData(this.getAttributesToSave());
+      data ? this.model.save(data, Object.assign({ patch: true }, callbacks)) : this.onSaveSuccess();
+    },
+
+    onSaveSuccess: async function(data) {
+      const modelData = data ? Array.isArray(data) ? data[0] : data : undefined;
+      const _id = modelData && modelData._id;
+
+      if(this.model.get('isModal')) {
+        if(_id) Origin.trigger('assetManagement:collection:refresh', null, true, _id);
+        Origin.trigger('assetManagement:modalEdit:remove');
+        return;
+      }
+      Origin.router.navigateTo('assetManagement');
+    },
+
+    onSaveError: function(errorMessage) {
+      Origin.trigger('sidebar:resetButtons');
+      Origin.Notify.alert({ type: 'error', text: errorMessage });
+    }
+
+  }, {
+    template: 'assetManagementEditAsset'
+  });
+
+  return AssetManagementEditAssetView;
+});

package/app/modules/assetManagement/views/assetManagementItemView.js

@@ -0,0 +1,68 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var OriginView = require('core/views/originView');
+  var Origin = require('core/origin');
+
+  var AssetItemView = OriginView.extend({
+    tagName: 'div',
+
+    className: function() {
+      return `asset-management-list-item id-${this.model.get('_id')}`;
+    },
+
+    events: {
+      'click' : 'onAssetClicked'
+    },
+
+    preRender: function() {
+      this.listenTo(this, 'remove', this.remove);
+      this.listenTo(Origin, {
+        'assetManagement:modal:selectItem': this.onAssetClicked,
+        'assetManagement:assetViews:remove': this.remove
+      });
+      this.listenTo(this.model, {
+        'destroy': this.remove,
+        'change:_isDeleted': this.render
+      });
+      this.model.set({ iconName: this.getIconName() });
+    },
+    
+    postRender: function() {
+      this.$el.toggleClass('selected', !!this.model.get('_isSelected'));
+      if (this.model.get('_isSelected')) {
+        Origin.trigger('assetManagement:assetItemView:preview', this.model);
+      }
+    },
+
+    getIconName: function() {
+      const type = this.model.get('type');
+      const subtype = this.model.get('subtype');
+
+      switch(type) {
+        case 'audio': return 'fa-file-audio-o';
+        case 'image': return 'fa-file-image-o';
+        case 'font': return 'fa-font';
+        case 'video': return 'fa-file-video-o';
+      }
+      switch(subtype) {
+        case 'pdf': return 'fa-file-pdf-o';
+        case 'zip': return 'fa-file-archive-o';
+      }
+      return 'fa-file-o';
+    },
+    
+    onAssetClicked: function (model) {
+      if(model instanceof $.Event) {
+        this.model.set('_isSelected', true);
+        Origin.trigger('assetManagement:modal:selectItem', this.model);
+      } else if(model.get('_id') !== this.model.get('_id')) {
+        this.model.set('_isSelected', false);
+      }
+      this.render();
+    }
+  }, {
+    template: 'assetManagementListItem'
+  });
+
+  return AssetItemView;
+});