2808 convert to es6

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "adapt-contrib-triggered",
   "version": "2.2.0",
-  "framework": "^2.0.0",
+  "framework": "^5.8.0",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-triggered",
   "issues": "https://github.com/adaptlearning/adapt-contrib-triggered/issues",
   "repository": "[email protected]/adaptlearning/adapt-contrib-triggered.git",

js/adapt-contrib-triggered.js

@@ -1,120 +1,27 @@
-define([
-  'coreJS/adapt'
-], function(Adapt) {
+import Adapt from 'coreJS/adapt';
+import TriggeredView from './triggeredView';
 
-    function setupTriggeredViews(componentView) {
+class Triggered extends Backbone.Controller {
 
-        var TriggeredShowView = Backbone.View.extend({
-
-            tagName: 'button',
-
-            className: 'base triggered-button-show',
-
-            initialize: function() {
-                this.listenTo(Adapt, 'remove', this.remove);
-                this.$el.attr({
-                    'data-triggered-id': this.model.get('_id'),
-                    'tabindex': 0
-                });
-                this.triggeredView = componentView;
-                this.render();
-            },
-
-            events: {
-                'click': 'show'
-            },
-
-            render: function() {
-                var data = this.model.toJSON();
-                var template = Handlebars.templates['triggered-show-button'];
-                var $container = $(".component-container", $("." + this.model.get("_parentId")));
-                $container.addClass('triggered-container');
-
-                var showButton = this.triggeredView.model.get('_triggered').showButton;
-                this.$el.html(template(data)).css({
-                    top:showButton._top,
-                    right: showButton._right,
-                    bottom: showButton._bottom,
-                    left:showButton._left,
-                }).appendTo($container);
-                return this;
-            },
-
-            show: function(event) {
-                event && event.preventDefault();
-                var $currentTarget = $(event.currentTarget);
-                var currentTriggeredId = $currentTarget.attr('data-triggered-id');
-
-                $currentTarget.addClass('triggered-hidden');
-
-                this.triggeredView.model.set('_isVisible', true, {pluginName:'_triggered'});
-                $('.' + currentTriggeredId).removeClass('triggered-hidden');
-                this.triggeredView.$el.data('inview', false);
-                $(window).scroll();
-                this.triggeredView.$el.a11y_focus();
-            }
-
-        });
-
-        var TriggeredHideView = Backbone.View.extend({
-
-            el: function() {
-                return componentView.el;
-            },
-
-            initialize: function() {
-                this.listenTo(Adapt, 'remove', this.remove);
-                this.render();
-            },
-
-            events: {
-                'click .triggered-button-hide': 'hide'
-            },
-
-            render: function() {
-                var data = this.model.toJSON();
-                var template = Handlebars.templates['triggered-hide-button'];
-                this.$el.addClass('triggered-component triggered-hidden').append(template(data));
-                return this;
-            },
-
-            hide: function(event) {
-                event && event.preventDefault();
-                var currentTriggeredId = this.model.get('_id');
-                this.model.set('_isVisible', false, {pluginName:'_triggered'});
-                this.$el.addClass('triggered-hidden');
-                $('.triggered-button-show[data-triggered-id="'+currentTriggeredId+'"]').removeClass('triggered-hidden').a11y_focus();
-            }
-
-        });
-
-        new TriggeredShowView({model: componentView.model});
-        new TriggeredHideView({model: componentView.model});
+  initialize() {
+    this.listenTo(Adapt, 'app:dataReady', this.onDataReady);
+  }
 
+  onDataReady() {
+    if (!Adapt.course.get('_triggered')?._isEnabled) {
+      return;
     }
 
-    function onComponentViewPreRender(view) {
-        if (view.model.get('_triggered') && view.model.get('_triggered')._isEnabled === true) {
-            view.model.set('_isVisible', false, {pluginName:'_triggered'});
-        }
-    }
-
-    function onComponentViewPostRender(componentView) {
-        if (componentView.model.get('_triggered') && componentView.model.get('_triggered')._isEnabled === true) {
-            setupTriggeredViews(componentView);
-        }
-    }
-
-    function onDataReady() {
-        // do not proceed until triggered enabled on course.json
-        if (!Adapt.course.get('_triggered') || !Adapt.course.get('_triggered')._isEnabled) {
-            return;
-        }
-
-        Adapt.on('componentView:preRender', onComponentViewPreRender);
-        Adapt.on('componentView:postRender', onComponentViewPostRender);
-    }
+    this.listenTo(Adapt, {
+      remove: this.remove,
+      'componentView:postRender': this.onComponentViewPostRender
+    });
+  }
 
-    Adapt.once('app:dataReady', onDataReady);
+  onComponentViewPostRender(componentView) {
+    if (!componentView.model.get('_triggered')._isEnabled) return;
+    new TriggeredView({ componentView });
+  }
+}
 
-});
+export default new Triggered();

js/triggeredView.js

@@ -0,0 +1,63 @@
+import Adapt from 'coreJS/adapt';
+
+export default class TriggeredView extends Backbone.View {
+
+  get template() {
+    return 'triggered-button';
+  }
+
+  initialize() {
+    this.triggeredView = this.constructor.arguments[0].componentView;
+    this.triggeredView.model.set('_isVisible', false, { pluginName: '_triggered' });
+    this.listenTo(Adapt, 'remove', this.remove);
+    this.render();
+  }
+
+  className() {
+    return 'triggered__container';
+  }
+
+  events() {
+    return {
+      'click .triggered__button-show': 'show',
+      'click .triggered__button-hide': 'hide'
+    };
+  }
+
+  render() {
+    const data = this.triggeredView.model.toJSON();
+    const template = Handlebars.templates[this.template];
+    const $container = $('.component__container', $('.' + this.triggeredView.model.get('_parentId')));
+    $container
+      .addClass('triggered__hidden')
+      .append(this.$el.html(template(data)));
+  }
+
+  show(event) {
+    event && event.preventDefault();
+    const $currentTarget = $(event.currentTarget);
+    const currentTriggeredId = this.triggeredView.model.get('_id');
+    this.triggeredView.model.set('_isVisible', true, { pluginName: '_triggered' });
+    $currentTarget.addClass('u-display-none');
+    const $container = $('.component__container', $(`.${this.triggeredView.model.get('_parentId')}`));
+    $container.removeClass('triggered__hidden');
+    $(`.triggered__button-hide[data-triggered-id='${currentTriggeredId}']`)
+      .removeClass('u-display-none');
+    this.triggeredView.$el.data('inview', false);
+    $(window).scroll();
+    Adapt.a11y.focusFirst(this.$el, { defer: true });
+  }
+
+  hide(event) {
+    event && event.preventDefault();
+    const $currentTarget = $(event.currentTarget);
+    const currentTriggeredId = this.triggeredView.model.get('_id');
+    this.triggeredView.model.set('_isVisible', false, { pluginName: '_triggered' });
+    $currentTarget.addClass('u-display-none');
+    const $container = $('.component__container', $(`.${this.triggeredView.model.get('_parentId')}`));
+    $container.addClass('triggered__hidden');
+    $(`.triggered__button-show[data-triggered-id='${currentTriggeredId}']`)
+      .removeClass('u-display-none');
+    Adapt.a11y.focusFirst(this.$el, { defer: true });
+  }
+}

less/triggered.less

@@ -1,36 +1,14 @@
- .triggered-container {
-    position: relative;
-
-    .triggered-icon-colors {
-        .icon, .triggered-button-text {
-            padding: @button-padding;
-            color: @button-text-color;
-            background-color: @button-color;
-
-            .no-touch &:hover {
-                color: @button-text-color-hover;
-                background-color: @button-color-hover;
-            }
-        }
-    }
-
-    .triggered-component {
-        position: relative;
-
-        .triggered-button-hide {
-            display: block;
-            position: absolute;
-            .triggered-icon-colors;
-        }
-    }
-
-    .triggered-button-show {
-        position: absolute;
-        .triggered-icon-colors;
-    }
+.triggered__container {
+  position: relative;
+  width: 100%;
+
+  .triggered__button-hide,
+  .triggered__button-show {
+    position: absolute;
+  }
 }
 
-.triggered-hidden {
-    visibility: hidden;
-    display: none;
+.triggered__hidden .component__inner {
+  visibility: hidden;
+  display: none;
 }

templates/triggered-button.hbs

@@ -0,0 +1,15 @@
+<button class="btn-text triggered__button-show" data-triggered-id="{{_id}}" style="top:{{_triggered.showButton._top}}; right:{{_triggered.showButton._right}}; bottom:{{_triggered.showButton._bottom}}; left:{{_triggered.showButton._left}};">
+     {{#if _triggered.showButton.buttonText}}
+        <div class="triggered__button-text">{{{_triggered.showButton.buttonText}}}</div>
+    {{else}}
+        <span class="icon icon-plus"></span>
+    {{/if}}
+</button>
+
+<button class='btn-text triggered__button-hide u-display-none' data-triggered-id="{{_id}}" style="top:{{_triggered.hideButton._top}}; right:{{_triggered.hideButton._right}}; bottom:{{_triggered.hideButton._bottom}}; left:{{_triggered.hideButton._left}};">
+    {{#if _triggered.hideButton.buttonText}}
+        <div class="triggered__button-text">{{{_triggered.hideButton.buttonText}}}</div>
+    {{else}}
+        <span class='icon icon-cross'></span>
+    {{/if}}
+</button>