fix for issue #43 (#44)

* fix for #43 whilst allowing _itemGraphic.src to be left out if you just want to display the same image in the popup

* hotgrid doesn't actually have support for graphic attribution

* default layout should really be full-width, as per hotgraphic

README.md

@@ -12,15 +12,15 @@ The attributes listed below are used in *components.json* to configure **Hotgrid
 
 [**core model attributes**](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes): These are inherited by every Adapt component. [Read more](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes).
 
-**_component** (string): This value must be: `hotgrid`. (One word.)
+**\_component** (string): This value must be: `hotgrid`. (One word.)
 
 **\_classes** (string): CSS class name to be applied to **Hotgrid**’s containing `div`. The class must be predefined in one of the Less files. Separate multiple classes with a space.
 
 **\_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.  
 
 **instruction** (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.  
 
-**_canCycleThroughPagination** (boolean): Enables the pop-ups to be cycled through endlessly using either the previous or next icon. When set to `true`, clicking "next" on the final stage will display the very first stage. When set to `false`, the final stage will display only a "previous" icon. The default is `false`.  
+**\_canCycleThroughPagination** (boolean): Enables the pop-ups to be cycled through endlessly using either the previous or next icon. When set to `true`, clicking "next" on the final stage will display the very first stage. When set to `false`, the final stage will display only a "previous" icon. The default is `false`.  
 
 **_hidePagination** (boolean): When set to `true`, hides the "previous" and "next" icons and progress indicator (e.g., "1/5") on the pop-up's toolbar. The default is `false`.  
 
@@ -42,17 +42,17 @@ Hotgrid has a dynamic layout system. If you have 5 items but set the columns to
 
 >>**title** (string): This is optional text which is displayed under the grid item image.
 
->**\_itemGraphic** (string): This is the image for a grid item pop-up. This also contains values **src** and **alt**. 
+>**\_itemGraphic** (string): This is the image for a grid item pop-up. This also contains values **src** and **alt**. You only need to set this if you want to display a different image in the popup.
 
 ### Accessibility
-**Hotgrid** has a label assigned using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) attribute: **ariaRegion**. These labels are not visible elements. They are utilized by assistive technology such as screen readers. This label is included within the *example.json* and will need adding to the _globals in *course.json*.
+**Hotgrid** has a label assigned using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) attribute: **ariaRegion**. These labels are not visible elements. They are utilized by assistive technology such as screen readers. This label is included within the *example.json* and may need to be added to the _globals in *course.json*.
 
 ## Limitations
 
 Hotgrid automatically switches to 2 columns in mobile mode for the best user experience however this can be overridden in the css. 
 
 ----------------------------
-**Version number:**  3.0.0  
+**Version number:**  3.0.1  
 **Framework versions:**  3.2+     
 **Author / maintainer:**  Kineo  
 **Accessibility support:** WAI AA  

bower.json

@@ -5,7 +5,7 @@
         "url": "git://github.com/cgkineo/adapt-hotgrid"
     },
     "framework": ">=3.2",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "homepage": "https://github.com/cgkineo/adapt-hotgrid",
     "issues": "https://github.com/cgkineo/adapt-hotgrid/issues/",
     "displayName": "Hotgrid",

properties.schema

@@ -26,7 +26,7 @@
       "type": "string",
       "required": true,
       "enum": ["full-width", "half-width", "both"],
-      "default": "half-width",
+      "default": "full-width",
       "editorOnly": true
     },
     "instruction": {
@@ -135,7 +135,7 @@
                 "title": "Item Title",
                 "inputType": "Text",
                 "validators": [],
-                "help": "Optional image title,  displayed under the grid item image.",
+                "help": "Optional image title, displayed under the grid item image.",
                 "translatable": true
               }
             }
@@ -147,10 +147,11 @@
             "properties": {
               "src": {
                 "type": "string",
-                "required": true,
+                "required": false,
                 "default": "",
                 "inputType": "Asset:image",
-                "validators": ["required"]
+                "validators": [],
+                "help": "Only needs to be set if you want a different image to be shown. If left blank, the Item Graphic (default state) will be displayed in the popup."
               },
               "alt": {
                 "type": "string",

templates/hotgridPopup.hbs

@@ -13,11 +13,12 @@
         </div>
         <div class="hotgrid-item-graphic">
             <div class="hotgrid-item-graphic-inner">
-            <img src="{{_graphic.src}}" aria-label="{{_graphic.alt}}"/>
+                {{#if _itemGraphic.src}}
+                <img src="{{_itemGraphic.src}}" aria-label="{{_itemGraphic.alt}}"/>
+                {{else}}
+                <img src="{{_graphic.src}}" aria-label="{{_graphic.alt}}"/>
+                {{/if}}
             </div>
-            {{#if _graphic.attribution}}
-            <div class="graphic-attribution">{{{_graphic.attribution}}}</div>
-            {{/if}}
         </div>
     </div>
     {{/each}}