adapt-authoring-ui 0.0.1

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

@@ -0,0 +1,51 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+
+    var Origin = require('core/origin');
+    var Backbone = require('backbone');
+
+    var AssetManagementModalAutofillView = Backbone.View.extend({
+
+        className: 'asset-management-modal-autofill',
+
+        tagName: 'button',
+
+        events: {
+            'click': 'onAutofillClicked'
+        },
+
+        initialize: function(options) {
+            this.options = options;
+            this.listenTo(Origin, 'modal:closed', this.remove);
+            this.listenTo(Origin, 'remove:views', this.remove);
+            this.render();
+        },
+
+        render: function() {
+            var data = this.options;
+            var template = Handlebars.templates['assetManagementModalAutofill'];
+            this.$el.html(template(data)).prependTo('.model-popup-toolbar-buttons');
+            _.defer(_.bind(this.postRender, this));
+
+            return this;
+        },
+
+        postRender: function() {
+        },
+
+        onAutofillClicked: function(event) {
+            event.preventDefault();
+            // Sometimes the button can be clicked without selecting an asset
+            if (this.options.modalView.data) {
+                this.options.modalView.data._shouldAutofill = true;
+                Origin.trigger('modal:onUpdate');
+            } else {
+                Origin.trigger('modal:onCancel');
+            }
+        }
+
+    });
+
+    return AssetManagementModalAutofillView;
+
+});

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

@@ -0,0 +1,38 @@
+// 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 assetManagementEditAssetView = require('modules/assetManagement/views/assetManagementEditAssetView');
+
+  var assetManagementModalEditAssetView = OriginView.extend({
+    className: 'asset-management-modal-new-asset',
+
+    events: {
+      'click .asset-management-modal-edit-asset-save': 'onSaveClicked',
+      'click .asset-management-modal-edit-asset-cancel': 'onCancelClicked'
+    },
+
+    postRender: function() {
+      Origin.once('assetManagement:modalEdit:remove', this.remove.bind(this));
+
+      this.childView = new assetManagementEditAssetView({ 
+        model: this.model.set('isModal', true) 
+      });
+      $('.wrapper', this.$el).append(this.childView.$el);
+    },
+
+    onSaveClicked: function(event) {
+      event.preventDefault();
+      this.childView.save();
+    },
+
+    onCancelClicked: function(event) {
+      event.preventDefault();
+      this.remove();
+    }
+  }, {
+    template: 'assetManagementModalEditAsset'
+  });
+
+  return assetManagementModalEditAssetView;
+});

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

@@ -0,0 +1,132 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+    var Origin = require('core/origin');
+    var Backbone = require('backbone');
+    var AssetManagementModalTagsView = require('./assetManagementModalTagsView');
+    var assetManagementModalEditAssetView = require('./assetManagementModalEditAssetView');
+    var AssetModel = require('../models/assetModel');
+    var TagsCollection = require('core/collections/tagsCollection');
+
+    var AssetManagementModalFiltersView = Backbone.View.extend({
+
+        className: 'asset-management-modal-filters',
+
+        events: {
+            'click .asset-management-modal-filter-button': 'onFilterButtonClicked',
+            'click .asset-management-modal-filter-clear-search': 'onClearSearchClicked',
+            'keyup .asset-management-modal-filter-search': 'onSearchKeyDown',
+            'click .asset-management-modal-add-tag': 'onAddTagClicked',
+            'click .asset-management-modal-add-asset': 'onAddAssetClicked'
+        },
+
+        initialize: function(options) {
+            this.options = options;
+            this.usedTags = [];
+            this.tags = [];
+            this.availableTags = [];
+            this.tagsCollection = new TagsCollection();
+            this.listenTo(this.tagsCollection, 'sync', this.setupTags);
+            this.tagsCollection.fetch({reset: true});
+            this.listenTo(Origin, 'modal:closed', this.remove);
+            this.listenTo(Origin, 'remove:views', this.remove);
+            this.listenTo(Origin, 'assetManagement:modalTags:filterByTags', this.filterAssetsByTags);
+            this.render();
+
+            // used to delay filter
+            this.filterDelay = null;
+        },
+
+        setupTags: function() {
+            this.tagsCollection.each(function(tag) {
+                this.availableTags.push(tag.toJSON());
+            }, this);
+        },
+
+        render: function() {
+            var data = this.options;
+            var template = Handlebars.templates['assetManagementModalFilters'];
+            var $popupToolbar = $('.modal-popup-toolbar');
+            if (this.options.modalView) {
+                $popupToolbar = this.options.modalView.$el.find('.modal-popup-toolbar');
+            }
+            this.$el.html(template(data)).prependTo($popupToolbar);
+            _.defer(_.bind(this.postRender, this));
+
+            return this;
+        },
+
+        postRender: function() {},
+
+        onFilterButtonClicked: function(event) {
+            $currentTarget = $(event.currentTarget);
+            var filterType = $currentTarget.attr('data-filter-type');
+
+            // If this filter is already selected - remove filter
+            // else add the filter
+            if ($currentTarget.hasClass('selected')) {
+                $currentTarget.removeClass('selected');
+                Origin.trigger('assetManagement:sidebarFilter:remove', filterType);
+            } else {
+                $currentTarget.addClass('selected');
+                Origin.trigger('assetManagement:sidebarFilter:add', filterType);
+            }
+
+        },
+
+        onSearchKeyDown: function(event, filter) {
+          switch(event.which) {
+            case 16: // shift
+            case 18: // alt
+              return;
+            default:
+              window.clearTimeout(this.filterDelay);
+              this.filterDelay = window.setTimeout(function() {
+                var filterText = $(event.currentTarget).val();
+                Origin.trigger('assetManagement:sidebarView:filter', filterText);
+              }, 500);
+              break;
+          }
+        },
+
+        onClearSearchClicked: function(event) {
+            event && event.preventDefault();
+            this.$('.asset-management-modal-filter-search').val('').trigger('keydown', [true]);
+        },
+
+        onAddTagClicked: function(event) {
+            event && event.preventDefault();
+            var exists = $('.asset-management-modal-tags').length > 0;
+            if(!exists) {
+              $('.modal-popup-toolbar').after(new AssetManagementModalTagsView({title: 'Filter by tags', items: this.availableTags}).$el);
+            }
+        },
+
+        filterAssetsByTags: function(tag) {
+
+            if (_.findWhere(this.usedTags, {id: tag.id})) {
+                this.usedTags = _.reject(this.usedTags, function(tagItem) {
+                    return tagItem.id === tag.id;
+                });
+                var availableTag = _.findWhere(this.availableTags, {_id: tag.id});
+                availableTag._isUsed = false;
+
+            } else {
+                this.usedTags.push(tag);
+                var availableTag = _.findWhere(this.availableTags, {_id: tag.id});
+                availableTag._isUsed = true;
+            }
+
+            Origin.trigger('assetManagement:assetManagementSidebarView:filterByTags', this.usedTags);
+
+        },
+
+        onAddAssetClicked: function(event) {
+            event && event.preventDefault();
+            Origin.trigger('assetManagement:modal:newAssetOpened');
+            $('.modal-popup-content').append(new assetManagementModalEditAssetView({model: new AssetModel()}).$el);
+        }
+
+    });
+
+    return AssetManagementModalFiltersView;
+});

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

@@ -0,0 +1,169 @@
+// 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 AssetManagementModalTagsView = OriginView.extend({
+
+        className: 'asset-management-modal-tags sidebar-filter',
+
+        events: {
+            'click .asset-management-modal-tags-toolbar-close': 'onCloseButtonClicked',
+            'keydown .asset-management-modal-tags-search-input': 'onSearchKeyDown',
+            'keyup .asset-management-modal-tags-search-input': 'onSearchKeyUp',
+            'click .asset-management-modal-tags-item': 'onFilterItemClicked'
+        },
+
+        initialize: function(options) {
+            this.data = {};
+            this.data.title = options.title;
+            this.data.items = options.items;
+            this.listenTo(Origin, 'remove:views', this.remove);
+            this.listenTo(Origin, 'assetManagement:modalTags:remove', this.remove);
+            this.render();
+        },
+
+        render: function() {
+            var template = Handlebars.templates[this.constructor.template];
+            this.$el.html(template(this.data));
+            _.defer(_.bind(function() {
+                this.postRender();
+            }, this));
+            return this;
+        },
+
+        postRender: function() {
+            // Position filter to filter button
+            var offsetLeft = $('.asset-management-modal-add-tag').offset().left;
+            this.$el.css({'left': offsetLeft, 'display': 'block'});
+            // Bring focus to the filter input field
+            this.$('.asset-management-modal-tags-search-input').focus();
+            // First item should be selected so the user can press enter
+            this.$('.asset-management-modal-tags-item').first().addClass('selected');
+        },
+
+        onCloseButtonClicked: function() {
+            this.remove();
+        },
+
+        onSearchKeyDown: function(event) {
+            // This is to stop the cursor moving around the input
+            // element when pressing up and down
+            if (event.which === 38) {
+                event.preventDefault();
+            }
+
+            if (event.which === 40) {
+                event.preventDefault();
+            }
+
+        },
+
+        onSearchKeyUp: function(event) {
+            // Check whether the key pressed is up or down
+            if (event.which === 38) {
+                return this.moveUpThroughItems();
+            }
+
+            if (event.which === 40) {
+                return this.moveDownThroughItems();
+            }
+
+            if (event.which === 13) {
+                return this.addFilter();
+            }
+
+            this.searchItems(event);
+
+        },
+
+        moveUpThroughItems: function() {
+            // Check if the element is the first one
+            // as the first item cannot go any further
+            var $selectedItem = this.$('.asset-management-modal-tags-item.selected');
+            var $prevItem = $selectedItem.prevAll('.asset-management-modal-tags-item:visible:first');
+
+            // First check if there's any more visible elements to navigate through
+            if ($prevItem.length === 0) {
+                return;
+            }
+
+            if (!$selectedItem.is(':first-child')) {
+                this.$('.asset-management-modal-tags-item.selected')
+                    .removeClass('selected')
+                    .prevAll('.asset-management-modal-tags-item:visible:first')
+                    .addClass('selected')
+                    .focus();
+                this.$('.asset-management-modal-tags-search-input').focus();
+            }
+
+        },
+
+        moveDownThroughItems: function() {
+            // Check if the element is the last visible one
+            // as the last item cannot go any further
+            var $selectedItem = this.$('.asset-management-modal-tags-item.selected');
+            var $nextItem = $selectedItem.nextAll('.asset-management-modal-tags-item:visible:first');
+
+            // First check if there's any more visible elements to navigate through
+            if ($nextItem.length === 0) {
+                return;
+            }
+
+            if (!$selectedItem.is(':last-child')) {
+                this.$('.asset-management-modal-tags-item.selected')
+                    .removeClass('selected')
+                    .nextAll('.asset-management-modal-tags-item:visible:first')
+                    .addClass('selected')
+                    .focus();
+                this.$('.asset-management-modal-tags-search-input').focus();
+            }
+
+        },
+
+        searchItems: function(event) {
+
+            var searchText = $(event.currentTarget).val().toLowerCase();
+            this.$('.asset-management-modal-tags-item').removeClass('selected');
+
+            this.$('.asset-management-modal-tags-item').each(function(event) {
+
+                var itemText = $('.asset-management-modal-tags-item-inner', $(this)).text().toLowerCase();
+
+                if (itemText.indexOf(searchText) > -1) {
+                    $(this).removeClass('display-none');
+                } else {
+                    $(this).addClass('display-none');
+                }
+
+            });
+
+            // Should always select the top one on search
+            this.$('.asset-management-modal-tags-item:visible:first').addClass('selected').focus();
+            this.$('.asset-management-modal-tags-search-input').focus();
+        },
+
+        addFilter: function() {
+            var selectedTag = {
+                title: this.$('.asset-management-modal-tags-item.selected').attr('data-title'),
+                id: this.$('.asset-management-modal-tags-item.selected').attr('data-id')
+            };
+            // TODO - fix these events up
+            Origin.trigger('assetManagement:modalTags:filterByTags', selectedTag);
+            this.remove();
+        },
+
+        onFilterItemClicked: function(event) {
+            this.$('.asset-management-modal-tags-item').removeClass('selected');
+            $(event.currentTarget).addClass('selected');
+            this.addFilter();
+        }
+
+    }, {
+        template: 'assetManagementModalTags'
+    });
+
+    return AssetManagementModalTagsView;
+
+})

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

@@ -0,0 +1,62 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var AssetManagementCollectionView = require('./assetManagementCollectionView');
+  var AssetManagementPreviewView = require('./assetManagementPreviewView');
+  var AssetManagementView = require('./assetManagementView');
+  var AssetManagementModalFiltersView = require('./assetManagementModalFiltersView');
+  var AssetManagementModelAutofillView = require('./assetManagementModalAutofillView');
+
+  var AssetManagementModalView = AssetManagementView.extend({
+    preRender: function(options) {
+      this.options = options;
+      AssetManagementView.prototype.preRender.apply(this, arguments);
+    },
+
+    postRender: function() {
+      this.setupSubViews();
+      this.setupFilterAndSearchView();
+      if (this.options.assetType === "image" && Origin.scaffold.getCurrentModel().get('_component') === 'adapt-contrib-graphic') {
+      	this.setupImageAutofillButton();
+      }
+    },
+
+    setupSubViews: function() {
+      const types = this.options.assetType ? [this.options.assetType] : undefined;
+      var view = new AssetManagementCollectionView({
+        collection: this.collection,
+        types,
+        isModal: true
+      });
+      this.$('.asset-management-assets-container-inner').append(view.$el);
+    },
+
+    setupFilterAndSearchView: function() {
+    	new AssetManagementModalFiltersView(this.options);
+    },
+
+    setupImageAutofillButton: function() {
+    	new AssetManagementModelAutofillView({ modalView: this });
+    },
+
+    onAssetClicked: function(model) {
+      this.$('.asset-management-no-preview').hide();
+
+      var previewView = new AssetManagementPreviewView({ model: model });
+      this.$('.asset-management-preview-container-inner').html(previewView.$el);
+
+    	this.data = {
+    		assetLink: `course/assets/${model.get('path')}`,
+    		assetId: model.get('_id'),
+    		assetFilename: model.get('path')
+    	};
+      Origin.trigger('modal:assetSelected', this.data);
+    },
+
+    getData: function() {
+    	return this.data;
+    }
+  });
+
+  return AssetManagementModalView;
+});

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

@@ -0,0 +1,69 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+
+  var Backbone = require('backbone');
+  var OriginView = require('core/views/originView');
+  var Origin = require('core/origin');
+
+  var AssetManagementPreviewView = OriginView.extend({
+
+    tagName: 'div',
+
+    className: 'asset-management-preview',
+
+    events: {
+      'click a.confirm-select-asset' : 'selectAsset',
+      'click .asset-preview-edit-button': 'onEditButtonClicked',
+      'click .asset-preview-delete-button': 'onDeleteButtonClicked'
+    },
+
+    preRender: function() {
+      this.listenTo(this, 'remove', this.remove);
+    },
+
+    selectAsset: function (event) {
+      event && event.preventDefault();
+
+      var data = {eventToTrigger: 'assetModal:assetSelected', model: this.model};
+      Origin.trigger('modal:passThrough', data);
+    },
+
+    onEditButtonClicked: function(event) {
+      event.preventDefault();
+      var assetId = this.model.get('_id');
+      Origin.router.navigateTo(`assetManagement/${assetId}/edit`);
+    },
+
+    onDeleteButtonClicked: function(event) {
+      event.preventDefault();
+
+      Origin.Notify.confirm({
+        type: 'warning',
+        text: Origin.l10n.t('app.assetconfirmdelete'),
+        callback: _.bind(this.onDeleteConfirmed, this)
+      });
+    },
+
+    onDeleteConfirmed: async function(result) {
+      if (!result.isConfirmed) {
+        return;
+      }
+      try {
+        await $.ajax({ url: `api/assets/${this.model.get('_id')}`, type: 'DELETE' });
+        this.model.trigger('destroy', this.model, this.model.collection);
+        Origin.trigger('assetManagement:assetPreviewView:delete');
+        this.remove();
+      } catch(e) {
+        Origin.Notify.alert({
+          type: 'error',
+          text: e.responseJSON && e.responseJSON.message || e.responseText
+        });
+      }
+    }
+  }, {
+    template: 'assetManagementPreview'
+  });
+
+  return AssetManagementPreviewView;
+
+});

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

@@ -0,0 +1,126 @@
+// 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 AssetManagementSidebarView = SidebarItemView.extend({
+
+        events: {
+            'click .asset-management-sidebar-new': 'onAddNewAssetClicked',
+            'click .asset-management-sidebar-filter-button': 'onFilterButtonClicked',
+            'click .sidebar-filter-clear': 'onClearSearchClicked',
+            'keyup .asset-management-sidebar-filter-search': 'onSearchKeyup',
+            'click .asset-management-sidebar-add-tag': 'onAddTagClicked',
+            'click .asset-management-sidebar-row-filter': 'onFilterRemovedClicked'
+        },
+
+        postRender: function() {
+            this.listenTo(Origin, 'sidebarFilter:filterByTags', this.filterProjectsByTags);
+            this.listenTo(Origin, 'sidebarFilter:addTagToSidebar', this.addTagToSidebar);
+            this.tags = [];
+            this.usedTags = [];
+        },
+
+        onAddNewAssetClicked: function() {
+            Origin.router.navigateTo('assetManagement/new');
+        },
+
+        onFilterButtonClicked: function(event) {
+            $currentTarget = $(event.currentTarget);
+            var filterType = $currentTarget.attr('data-filter-type');
+
+            // If this filter is already selected - remove filter
+            // else add the filter
+            if ($currentTarget.hasClass('selected')) {
+                $currentTarget.removeClass('selected');
+                Origin.trigger('assetManagement:sidebarFilter:remove', filterType);
+            } else {
+                $currentTarget.addClass('selected');
+                Origin.trigger('assetManagement:sidebarFilter:add', filterType);
+            }
+
+        },
+
+        onSearchKeyup: function(event, filter) {
+            var filterText = $(event.currentTarget).val();
+            Origin.trigger('assetManagement:sidebarView:filter', filterText);
+        },
+
+        onClearSearchClicked: function(event) {
+            event.preventDefault();
+            this.$('.asset-management-sidebar-filter-search').val('').trigger('keyup', [true]);
+        },
+
+        onAddTagClicked: function(event) {
+            event.preventDefault();
+            var availableTags = [];
+
+            // Go through each tag in the collection and filter out duplicate tags
+            // to create an array of unique asset tags
+            this.collection.each(function(tag) {
+                var titles = _.pluck(availableTags, 'title');
+                var usedTagsTitles = _.pluck(this.usedTags, 'title');
+                if (!_.contains(titles, tag.get('title')) && !_.contains(usedTagsTitles, tag.get('title'))) {
+                    availableTags.push(tag.attributes);
+                }
+            }, this);
+
+            Origin.trigger('sidebar:sidebarFilter:add', {
+                title:'Filter by Tags',
+                items: availableTags
+            });
+        },
+
+
+        addTagToSidebar: function(tag) {
+            this.usedTags.push(tag);
+
+            var template = Handlebars.templates['sidebarRowFilter'];
+            var data = {
+                rowClasses: 'sidebar-row-filter',
+                buttonClasses:'asset-management-sidebar-row-filter',
+                tag: tag
+            };
+
+            this.$('.asset-management-sidebar-add-tag').parent().after(template(data));
+        },
+
+        onFilterRemovedClicked: function(event) {
+            var tag = {
+                id: $(event.currentTarget).attr('data-id'),
+                title: $(event.currentTarget).attr('data-title')
+            };
+
+            // Remove this tag from the usedTags
+            this.usedTags = _.reject(this.usedTags, function(item) {
+                return item.id === tag.id;
+            });
+
+            this.filterProjectsByTags(tag);
+
+            $(event.currentTarget).parent().remove();
+        },
+
+        filterProjectsByTags: function(tag) {
+            // Check if the tag is already being filtered and remove it
+            if (_.findWhere(this.tags, { id: tag.id } )) {
+                this.tags = _.reject(this.tags, function(tagItem) {
+                    return tagItem.id === tag.id;
+                });
+            } else {
+                // Else add it to array
+                this.tags.push(tag);
+            }
+
+            Origin.trigger('assetManagement:assetManagementSidebarView:filterByTags', this.tags);
+
+        }
+
+    }, {
+        template: 'assetManagementSidebar'
+    });
+
+    return AssetManagementSidebarView;
+
+});