adapt-authoring-ui 0.0.1

package/app/modules/sidebar/less/sidebar.less

@@ -0,0 +1,298 @@
+@import 'colours';
+
+@sidebar-input-font-size: 110%;
+
+.sidebar {
+  position: fixed;
+  top: 61px;
+  left: 0px;
+  width: 250px;
+  height: calc(~"100vh - 61px");
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: @sidebar-color;
+  color: @sidebar-text-color;
+
+  button {
+    &[class^="action-"],
+    &[class*=" action-"] {
+      margin: 5px 25px;
+      width: 200px;
+      height: 50px;
+      border-width: 1px;
+      border-style: solid;
+      border-radius:@button-radius;
+      font-size: 15px;
+      text-align: center;
+      i {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .editor-common-sidebar-preview-wrapper {
+    display: flex;
+    width: 200px;
+    margin: 5px 25px;
+
+     .editor-common-sidebar-preview {
+      flex-grow: 1;
+      width: auto;
+      margin: 0;
+      margin-right: 1px;
+    }
+
+     .dropdown {
+      > button {
+        width: auto;
+        height: 100%;
+        margin: 0;
+        background-color: @button-secondary-color;
+        border-radius: 0 5px 5px 0;
+        color: @white;
+        .fa {
+        }
+      }
+
+      ul {
+        position: absolute;
+        left: 0;
+        border-radius: 5px;
+        display: none;
+        width: 200px;
+        margin: 0 25px;
+        list-style: none;
+        padding: 1px 0;
+        background-color: @sidebar-color;
+
+         li {
+          padding: 0;
+          margin: 0;
+
+          button {
+            height: 50px;
+            font-size: 15px;
+            width: 100%;
+            border-radius: 5px;
+            color: @white;
+            border-color: @button-secondary-color;
+            background-color: @button-secondary-color;
+            position: absolute;
+            z-index: 1;
+            &:hover {
+              border-color: @button-secondary-hover-color;
+              background-color: @button-secondary-hover-color;
+            }
+          }
+        }
+      }
+      &.active {
+        ul {
+          display: block;
+        }
+        > button {
+          border-color: @button-secondary-hover-color;
+          background-color: @button-secondary-hover-color;
+        }
+      }
+    }
+  }
+
+  a {
+    color:@sidebar-text-color;
+    text-decoration: none;
+    transition:all 0.3s;
+    &:hover,
+    &:focus {
+      color:darken(@sidebar-text-color, 10%);
+    }
+  }
+  .sidebar-filter-clear {
+    display:inline;
+    position: absolute;
+    left: 205px;
+    top: 25px;
+    padding: 0;
+    background: none;
+    color: @sidebar-input-text-color;
+  }
+
+  .sidebar-item-container {
+    position: relative;
+    height:100%;
+  }
+
+  .separator {
+    margin-top: 20px;
+  }
+
+  .sidebar-row, .sidebar-breadcrumb {
+    button, a {
+      margin: 0;
+      color:@sidebar-text-color;
+      transition:all 0.3s;
+      &:hover {
+        color:@sidebar-item-hover-text-color;
+      }
+    }
+  }
+
+  .sidebar-row {
+    .error {
+      position: inherit;
+      top: inherit;
+      left: inherit;
+      color: @white !important;
+      i {
+        color: @white !important;
+      }
+    }
+  }
+}
+
+.sidebar-hide {
+  #app {
+    margin-left: 0px;
+  }
+  .sidebar {
+    display: none;
+  }
+}
+
+.sidebar-inner {
+  padding: 0;
+}
+
+.sidebar-breadcrumb {
+  position:relative;
+  top: -40px;
+}
+
+.sidebar-breadcrumb-inner {
+  display:block;
+  padding:30px 30px;
+  font-size: @sidebar-input-font-size;
+  i {
+    color: @secondary-color;
+    margin-right:8px;
+  }
+}
+
+.sidebar-item {
+  position:relative;
+  left:10%;
+  opacity:0;
+  label {
+    display:block;
+    margin-bottom:4px;
+  }
+}
+
+.sidebar-row, select.sidebar-row {
+  display:block;
+  position: relative;
+  button {
+    font-size: @sidebar-input-font-size;
+    background:none;
+    border:none;
+    width:100%;
+    padding:18px 30px;
+    text-align:left;
+
+    i {
+      margin-right:8px;
+
+      &.fa-toggle-off,
+      .fa-toggle-on {
+        float: right;
+        color:@secondary-color;
+        font-size: 20px;
+      }
+      &.fa-chevron-right,
+      &.primary-color {
+        color:@secondary-color;
+      }
+      &.fa-times {
+        color:@sidebar-input-text-color;
+      }
+    }
+  }
+}
+
+.sidebar-row-input {
+  margin: 10px 25px;
+}
+
+.sidebar input[type="text"] {
+  height: 25px;
+  background: @sidebar-input-color;
+  border-color: @sidebar-input-border-color;
+  color: @sidebar-input-text-color;
+  font-size: @sidebar-input-font-size;
+
+  &::-webkit-input-placeholder {
+    color: @sidebar-input-placeholder-color;
+  }
+  &:-moz-placeholder {
+    color: @sidebar-input-placeholder-color;
+  }
+  &::-moz-placeholder {
+    color: @sidebar-input-placeholder-color;
+  }
+  &:-ms-input-placeholder {
+    color: @sidebar-input-placeholder-color;
+  }
+
+  ~ button {
+    top: 25%;
+    i {
+      color: @sidebar-input-button-color;
+      margin-right: 0;
+      font-size: @font-size;
+    }
+    &:hover i {
+      color: lighten(@sidebar-input-border-color, 15%);
+    }
+  }
+}
+
+.sidebar-item-title {
+  background-color:@sidebar-color;
+  color:@sidebar-title-text-color;
+  text-align:center;
+}
+
+.sidebar-item-title-inner {
+  padding:30px 20px;
+  font-size: @sidebar-input-font-size;
+  font-weight: @font-weight;
+}
+
+.sidebar-divide {
+  background-color:@sidebar-color;
+  text-align:center;
+
+  h3 {
+    font-size:13px;
+  }
+  i {
+    margin-right:4px;
+  }
+}
+
+.sidebar-divide-inner {
+  padding:20px;
+}
+
+.sidebar-fieldset-filter.error {
+  @alert-color:#de6262;
+  background: @alert-color;
+  color: @white;
+  &:hover {
+    background: darken(@alert-color, 10%);
+  }
+}
+
+button.sidebar-tag {
+  padding: 14px 15px 14px 30px;
+}

package/app/modules/sidebar/less/sidebarFilter.less

@@ -0,0 +1,91 @@
+.sidebar-filter {
+    position: fixed;
+    left: 240px;
+    top: 40%;
+    width:250px;
+    max-height: 366px;
+    border: 1px solid #e2e2e2;
+    background-color: @white;
+    overflow-y: hidden;
+    display:none;
+}
+
+.sidebar-filter-toolbar-title {
+    padding:10px;
+    margin-left: 10px;
+    font-weight: @font-weight-bold;
+}
+
+.sidebar-filter-toolbar-subtitle {
+    margin-left: 20px;
+}
+
+.sidebar-filter-toolbar-close {
+    position: absolute;
+    top: 5px;
+    right: 0px;
+    & button {
+        color: @primary-color;
+        &:hover {
+            color: darken(@primary-color, 5%);
+        }
+    }
+}
+
+.sidebar-filter-search {
+    padding: 15px;
+    border-bottom: 1px solid #e2e2e2;
+    input{
+        border: 0;
+        background-color: #e2e2e2;
+    }
+    input::-webkit-input-placeholder {
+        color:#333;
+    }
+    input:-moz-placeholder {
+        color:#333;
+    }
+    i {
+        position: absolute;
+        top: 85px;
+        right: 30px;
+        color: #808080;
+    }
+}
+
+.sidebar-filter-items {
+    overflow-y: auto;
+    max-height: 260px;
+}
+
+.sidebar-filter-item {
+    display:block;
+    width:100%;
+    text-align: left;
+    padding: 20px;
+    font-weight: @font-weight-bold;
+    border-bottom:1px solid #e2e2e2;
+    &:hover {
+        background-color:#f7f7f7;
+    }
+}
+
+.sidebar-row-filter {
+    border-bottom:1px solid #3e4a5f;
+    padding: 0 20px 0 30px;
+    &.sidebar-row span {
+        padding:8px;
+        float:left;
+    }
+    &.sidebar-row button {
+        display: inline;
+        float:right;
+        padding:10px;
+        width: auto;
+        border: none;
+        i {
+            width: 10px;
+            margin-right:0px;
+        }
+    }
+}

package/app/modules/sidebar/templates/sidebar.hbs

@@ -0,0 +1,7 @@
+<div class="sidebar-inner">
+	<div class="sidebar-breadcrumb">
+	</div>
+	<div class="sidebar-item-container">
+	</div>
+	<div class="sidebar-fieldset-container">
+</div>

package/app/modules/sidebar/templates/sidebarBreadcrumb.hbs

@@ -0,0 +1,3 @@
+<a href="{{backButtonRoute}}" class="sidebar-breadcrumb-inner">
+    <i class="fa fa-chevron-left"></i>{{backButtonText}}
+</a>

package/app/modules/sidebar/templates/sidebarDivide.hbs

@@ -0,0 +1,5 @@
+{{!-- <div class="sidebar-row sidebar-divide">
+    <h3 class="sidebar-divide-inner">
+        <i class="fa fa-search"></i>{{title}}
+    </h3>
+</div> --}}

package/app/modules/sidebar/templates/sidebarFieldsetFilter.hbs

@@ -0,0 +1,6 @@
+<button class="sidebar-fieldset-filter sidebar-fieldset-filter-{{stringToClassName legend}}">
+	<span class="sidebar-fieldset-filter-inner">
+		<i class="fa fa-toggle-off"></i>
+		{{legend}}
+	</span>
+</button>

package/app/modules/sidebar/templates/sidebarFilter.hbs

@@ -0,0 +1,30 @@
+<div class="sidebar-filter-inner">
+    <div class="sidebar-filter-toolbar">
+        <div class="sidebar-filter-toolbar-inner clearfix">
+            <div class="sidebar-filter-toolbar-title">
+                {{t 'app.filterbytags'}}
+            </div>
+            <div class="sidebar-filter-toolbar-subtitle">
+                {{t 'app.pleaseselectcomponent'}}:
+            </div>
+            <div class="sidebar-filter-toolbar-close">
+                <button class="fa fa-times"></button>
+            </div>
+        </div>
+    </div>
+    <div class="sidebar-filter-search">
+        <input type="text" placeholder="{{t 'app.filterbytags'}}" class="sidebar-filter-search-input" />
+        <i class="fa fa-search"></i>
+    </div>
+    <div class="sidebar-filter-items">
+        <div class="sidebar-filter-items-inner">
+            {{#each items}}
+            <button class="sidebar-filter-item" data-title="{{title}}" data-id="{{_id}}">
+                <div class="sidebar-filter-item-inner">
+                    {{title}}
+                </div>
+            </button>
+            {{/each}}
+        </div>
+    </div>
+</div>

package/app/modules/sidebar/templates/sidebarRowFilter.hbs

@@ -0,0 +1,4 @@
+<div class="sidebar-row clearfix {{rowClasses}}">
+    <span>{{tag.title}}</span>
+    <button data-title="{{tag.title}}" data-id="{{tag.id}}" class="{{buttonClasses}}"><i class="fa fa-times"></i></button>
+</div>

package/app/modules/sidebar/templates/sidebarUpdateButton.hbs

@@ -0,0 +1,3 @@
+<span class="sidebar-update-button">
+    <i class="fa fa-circle-o-notch fa-spin"></i>{{updateText}}
+</span>

package/app/modules/sidebar/views/sidebarFieldsetFilterView.js

@@ -0,0 +1,43 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+	var Origin = require('core/origin');
+	var Backbone = require('backbone');
+
+	var SidebarFieldsetFilterView = Backbone.View.extend({
+		className: 'sidebar-row',
+		events: {
+			'click button': 'onFilterClicked'
+		},
+
+		initialize: function() {
+			this.listenTo(Origin, 'remove:views', this.remove);
+			this.render();
+		},
+
+		render: function() {
+			var data = this.model ? this.model.toJSON() : null;
+			var template = Handlebars.templates[this.constructor.template];
+			this.$el.html(template(data));
+			return this;
+		},
+
+		onFilterClicked: function(event) {
+			if (this.model.get('_isSelected')) {
+				this.model.set('_isSelected', false);
+				this.$('i').removeClass('fa-toggle-on');
+			} else {
+				this.model.set('_isSelected', true);
+				this.$('i').addClass('fa-toggle-on');
+			}
+
+			Origin.trigger('sidebarFieldsetFilter:filterForm', this.model.get('key'));
+
+		}
+
+	}, {
+		template: 'sidebarFieldsetFilter'
+	});
+
+	return SidebarFieldsetFilterView;
+
+});

package/app/modules/sidebar/views/sidebarFilterView.js

@@ -0,0 +1,132 @@
+// 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 SidebarFilterView = OriginView.extend({
+        className: 'sidebar-filter',
+        events: {
+            'click .sidebar-filter-toolbar-close': 'onCloseButtonClicked',
+            'keydown .sidebar-filter-search-input': 'onSearchKeyDown',
+            'keyup .sidebar-filter-search-input': 'onSearchKeyUp',
+            'click .sidebar-filter-item': 'onFilterItemClicked'
+        },
+
+        initialize: function(options) {
+            this.data = { title: options.title, items: options.items };
+            this.listenTo(Origin, 'remove:views sidebar:sidebarFilter:remove', this.remove);
+            this.render();
+        },
+
+        render: function() {
+            var template = Handlebars.templates[this.constructor.template];
+            this.$el.html(template(this.data));
+            _.defer(() => this.postRender());
+            return this;
+        },
+
+        postRender: function() {
+            // Position sidebar filter to filter button
+            var offsetTop = $('.sidebar-filter-button').offset().top;
+            var sidebarHeight = $('.sidebar-filter').height();
+            var windowHeight = $(window).height();
+            
+            if(offsetTop+sidebarHeight > windowHeight) {
+                offsetTop = windowHeight - (sidebarHeight + 10); 
+            }
+            this.$el.css({ top: offsetTop, display: 'block' });
+            // resize
+            var popupHeight = $('.sidebar-filter').outerHeight();
+            var top = $('.sidebar-filter').offset().top;
+            var containerTop = $('.sidebar-filter-items').offset().top;
+            $('.sidebar-filter-items').height(popupHeight-(containerTop-top));
+            // Bring focus to the filter input field
+            this.$('.sidebar-filter-search-input').focus();
+            // First item should be selected so the user can press enter
+            this.$('.sidebar-filter-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.which === 40) event.preventDefault();
+        },
+
+        onSearchKeyUp: function(event) {
+            switch(event.which) {
+              case 38: return this.moveUpThroughItems(); // up
+              case 40: return this.moveDownThroughItems(); // down
+              case 13: return this.addFilter(); // enter
+            }
+            this.searchItems(event);
+        },
+
+        moveUpThroughItems: function() {
+            var $selectedItem = this.$('.sidebar-filter-item.selected');
+            var $prevItem = $selectedItem.prevAll('.sidebar-filter-item:visible:first');
+            if($prevItem.length === 0 || $selectedItem.is(':first-child')) {
+                return; // no more items
+            }
+            this.$('.sidebar-filter-item.selected')
+                .removeClass('selected')
+                .prevAll('.sidebar-filter-item:visible:first')
+                .addClass('selected')
+                .focus();
+                
+            this.$('.sidebar-filter-search-input').focus();
+        },
+
+        moveDownThroughItems: function() {
+            var $selectedItem = this.$('.sidebar-filter-item.selected');
+            var $nextItem = $selectedItem.nextAll('.sidebar-filter-item:visible:first');
+            if($nextItem.length === 0 || $selectedItem.is(':last-child')) {
+                return; // no more items
+            }
+            this.$('.sidebar-filter-item.selected')
+                .removeClass('selected')
+                .nextAll('.sidebar-filter-item:visible:first')
+                .addClass('selected')
+                .focus();
+                
+            this.$('.sidebar-filter-search-input').focus();
+        },
+
+        searchItems: function(event) {
+            var search = $(event.currentTarget).val().toLowerCase();
+            this.$('.sidebar-filter-item').each(function(event) {
+                var itemText = $('.sidebar-filter-item-inner', $(this)).text().toLowerCase();
+                $(this).toggleClass('display-none', !itemText.includes(search));
+            });
+            // Should always select the top one on search
+            this.$('.sidebar-filter-item').removeClass('selected');
+            this.$('.sidebar-filter-item:visible:first').addClass('selected').focus();
+            this.$('.sidebar-filter-search-input').focus();
+        },
+
+        addFilter: function() {
+            var selectedTag = {
+                title: this.$('.sidebar-filter-item.selected').attr('data-title'),
+                id: this.$('.sidebar-filter-item.selected').attr('data-id')
+            };
+            if(!selectedTag.title || !selectedTag.id) {
+                return;
+            }
+            Origin.trigger('sidebarFilter:filterByTags', selectedTag);
+            Origin.trigger('sidebarFilter:addTagToSidebar', selectedTag);
+            this.remove();
+        },
+
+        onFilterItemClicked: function(event) {
+            this.$('.sidebar-filter-item').removeClass('selected');
+            $(event.currentTarget).addClass('selected');
+            this.addFilter();
+        }
+    }, {
+        template: 'sidebarFilter'
+    });
+
+    return SidebarFilterView;
+})