Merge pull request #2 from deltanet/authoringTool

Authoring tool compatibility
deltanet · Jun 29, 2016 · 822faac · 822faac
2 parents 682ee50 + 29e7947
commit 822faac
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
-# adapt-hotgrid
+# adapt-hotgrid-audio
 
 **Hotgrid** is a *presentation component* which displays a set of images in a grid layout. 
 
 When a learner selects an image, a pop-up is displayed that consists of text with an image.
 
 ## Settings Overview
 
-The attributes listed below are used in *components.json* to configure **Hotgrid**, and are properly formatted as JSON in [*example.json*](https://github.com/cgkineo/adapt-hotgrid/blob/master/example.json). 
+The attributes listed below are used in *components.json* to configure **Hotgrid**, and are properly formatted as JSON in [*example.json*](https://github.com/deltanet/adapt-hotgrid-audio/blob/master/example.json). 
 
 ### Attributes
 
@@ -54,4 +54,5 @@ Hotgrid automatically switches to 2 columns in mobile mode for the best user exp
 **Author / maintainer:**   
 **Accessibility support:** WAI AA   
 **RTL support:** yes  
-**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), IE 11, IE10, IE9, IE8, IE Mobile 11, Safari for iPhone (iOS 7+8), Safari for iPad (iOS 7+8), Safari 8, Opera  
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), IE 11, IE10, IE9, IE8, IE Mobile 11, Safari for iPhone (iOS 7+8), Safari for iPad (iOS 7+8), Safari 8, Opera  
+**Authoring tool support:** yes  
diff --git a/bower.json b/bower.json
@@ -1,18 +1,19 @@
 {
   "name": "adapt-hotgrid-audio",
   "version": "2.0.4",
-  "framework": "2.0.4",
+  "framework": "^2.0.4",
   "homepage": "https://github.com/deltanet/adapt-hotgrid-audio",
-  "displayName": "Hotgrid",
-  "component": "hotgrid",
+  "displayName": "Hotgrid Audio",
+  "component": "hotgrid-audio",
   "assetFields": [
     "_items[]._graphic.src",
     "_items[]._graphic.srcHover",
     "_items[]._graphic.srcVisited",
-    "_items[]._itemGraphic.src"
+    "_items[]._itemGraphic.src",
+    "_items[]._audio.src"
   ],
   "description": "A component that displays selectable images in a grid format.",
-  "main": "/js/adapt-hotgrid.js",
+  "main": "/js/adapt-hotgrid-audio.js",
   "keywords": [
     "adapt-plugin",
     "adapt-component"

diff --git a/example.json b/example.json
@@ -2,7 +2,7 @@
         "_id":"c-05",
         "_parentId":"b-05",
         "_type":"component",
-        "_component":"hotgrid",
+        "_component":"hotgrid-audio",
         "_classes":"",
         "_layout":"full",
         "title":"Adapt Hotgrid",
@@ -15,17 +15,6 @@
         "_reducedText": {
             "_isEnabled": true
         },
-        "_audio": {
-            "_isEnabled": true,
-            "_showControls": true,
-            "_autoplay": true,
-            "_channel": 0,
-            "_location": "top-right",
-            "_media": {
-                "desktop": "course/en/audio/***.mp3",
-                "mobile": "course/en/audio/***.mp3"
-            }
-        },
         "_items": [
             {
                 "title": "Grid Item 1",

diff --git a/js/adapt-hotgrid.js → js/adapt-hotgrid-audio.js b/js/adapt-hotgrid.js → js/adapt-hotgrid-audio.js
@@ -4,7 +4,7 @@ define(function(require) {
     var ComponentView = require("coreViews/componentView");
     var Adapt = require("coreJS/adapt");
 
-    var Hotgrid = ComponentView.extend({
+    var HotgridAudio = ComponentView.extend({
 
         events: {
             "click .hotgrid-item-image":"onItemClicked"
@@ -59,7 +59,7 @@ define(function(require) {
                 this.setReadyStatus();
             }, this));
 
-            if (this.model.get('_reducedText') && this.model.get('_reducedText')._isEnabled) {
+            if (Adapt.config.get('_audio') && Adapt.config.get('_audio')._isReducedTextEnabled && this.model.get('_reducedText') && this.model.get('_reducedText')._isEnabled) {
                 this.replaceText(Adapt.audio.textSize);
             }
             var componentActive = false;
@@ -162,7 +162,7 @@ define(function(require) {
             var interactionObject_body = "";
 
             // If reduced text is enabled and selected
-            if (this.model.get('_reducedText') && this.model.get('_reducedText')._isEnabled && Adapt.audio.textSize == 1) {
+            if (Adapt.config.get('_audio') && Adapt.config.get('_audio')._isReducedTextEnabled && this.model.get('_reducedText') && this.model.get('_reducedText')._isEnabled && Adapt.audio.textSize == 1) {
                 popupObject_title = itemModel.titleReduced;
                 popupObject_body = itemModel.bodyReduced;
             }
@@ -212,7 +212,7 @@ define(function(require) {
 
 
             ///// Audio /////
-            if (this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status==1) {
+            if (Adapt.config.get('_audio') && Adapt.config.get('_audio')._isEnabled && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status==1) {
                 // Trigger audio
                 Adapt.trigger('audio:playAudio', itemModel._audio.src, this.model.get('_id'), this.model.get('_audio')._channel);
             }
@@ -221,7 +221,7 @@ define(function(require) {
             Adapt.once("notify:closed", _.bind(function() {
                 //this.isPopupOpen = false;
                 ///// Audio /////
-                if (this.model.has('_audio') && this.model.get('_audio')._isEnabled) {
+                if (Adapt.config.get('_audio') && Adapt.config.get('_audio')._isEnabled && this.model.has('_audio') && this.model.get('_audio')._isEnabled) {
                     Adapt.trigger('audio:pauseAudio', this.model.get('_audio')._channel);
                 }
                 ///// End of Audio /////
@@ -276,7 +276,7 @@ define(function(require) {
             var interactionObject_body = "";
 
             // If reduced text is enabled and selected
-            if (this.model.get('_reducedText') && this.model.get('_reducedText')._isEnabled && Adapt.audio.textSize == 1) {
+            if (Adapt.config.get('_audio') && Adapt.config.get('_audio')._isReducedTextEnabled && this.model.get('_reducedText') && this.model.get('_reducedText')._isEnabled && Adapt.audio.textSize == 1) {
                 popupObject_title = itemModel.titleReduced;
                 popupObject_body = itemModel.bodyReduced;
             }
@@ -298,7 +298,7 @@ define(function(require) {
             $('.notify-popup-body-inner').html(interactionObject_body);
 
             ///// Audio /////
-            if (this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status==1) {
+            if (Adapt.config.get('_audio') && Adapt.config.get('_audio')._isEnabled && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status==1) {
                 // Trigger audio
                 Adapt.trigger('audio:playAudio', itemModel._audio.src, this.model.get('_id'), this.model.get('_audio')._channel);
             }
@@ -337,7 +337,7 @@ define(function(require) {
         // Reduced text
         replaceText: function(value) {
             // If enabled
-            if (this.model.get('_reducedText') && this.model.get('_reducedText')._isEnabled) {
+            if (Adapt.config.get('_audio') && Adapt.config.get('_audio')._isReducedTextEnabled && this.model.get('_reducedText') && this.model.get('_reducedText')._isEnabled) {
                 // Change component title and body
                 if(value == 0) {
                     this.$('.component-title-inner').html(this.model.get('displayTitle')).a11y_text();
@@ -360,11 +360,11 @@ define(function(require) {
         }
 
     },{
-        template: "hotgrid"
+        template: "hotgrid-audio"
     });
 
-    Adapt.register("hotgrid", Hotgrid);
+    Adapt.register("hotgrid-audio", HotgridAudio);
 
-    return Hotgrid;
+    return HotgridAudio;
 
 });
diff --git a/less/hotgrid.less → less/hotgrid-audio.less b/less/hotgrid.less → less/hotgrid-audio.less
@@ -1,4 +1,4 @@
-.hotgrid-component {
+.hotgrid-audio-component {
 	.hotgrid-widget {
 		position: relative;
 	}

diff --git a/properties.schema b/properties.schema
@@ -13,6 +13,14 @@
     }
   },
   "properties":{
+    "instruction": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "inputType": "Text",
+      "validators": [],
+      "help": "This is the instruction text"
+    },
     "_columns": {
       "type":"number",
       "required":true,
@@ -22,6 +30,22 @@
       "validators": ["number"],
       "help": "This value determines the number of columns within the grid. Any number of columns can be set however keep in mind the more columns there are the smaller the items will be."
     },
+    "displayTitleReduced": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "title": "Reduced Text Display Title",
+      "inputType": "Text",
+      "validators": []
+    },
+    "bodyReduced": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "title": "Reduced Text Body",
+      "inputType": "TextArea",
+      "validators": []
+    },
     "_items": {
       "type":"array",
       "required":true,
@@ -39,6 +63,15 @@
             "validators": [],
             "help": "This is the title text for a grid item pop-up."
           },
+          "titleReduced": {
+            "type":"string",
+            "required":false,
+            "default": "",
+            "title": "Item Popup Title - Reduced Text",
+            "inputType": "Text",
+            "validators": [],
+            "help": "This is the title text for a grid item pop-up when reduced text is shown."
+          },
           "body": {
             "type":"string",
             "required":false,
@@ -48,6 +81,15 @@
             "validators": [],
             "help": "This is the body text for a grid item pop-up."
           },
+          "bodyReduced": {
+            "type":"string",
+            "required":false,
+            "default": "",
+            "title": "Item Popup Body - Reduced Text",
+            "inputType": "Text",
+            "validators": [],
+            "help": "This is the body text for a grid item pop-up when reduced text is shown."
+          },
           "_graphic": {
             "type":"object",
             "required":true,
@@ -119,9 +161,40 @@
               }
             },
             "help": "This is the image for a grid item pop-up."
+          },
+          "_audio": {
+            "type": "object",
+            "required": false,
+            "properties": {
+              "src": {
+                "type": "string",
+                "required": false,
+                "default": "",
+                "title": "Audio",
+                "inputType": "Asset:audio",
+                "validators": [],
+                "help": "Optional audio for this grid item"
+              }
+            }
           }
         }
       }
+    },
+    "_reducedText": {
+      "type":"object",
+      "required":false,
+      "title": "Reduced Text Options",
+      "help": "The Audio extension must be installed for reduced text options to work",
+      "properties":{
+        "_isEnabled": {
+          "type":"boolean",
+          "required":false,
+          "default": true,
+          "title": "Reduced Text Enabled",
+          "inputType": { "type": "Boolean", "options": [false, true]},
+          "validators": []
+        }
+      }
     }
   }
 }
diff --git a/templates/hotgrid.hbs → templates/hotgrid-audio.hbs b/templates/hotgrid.hbs → templates/hotgrid-audio.hbs