Added v5 changes back in

deltanet · Aug 13, 2021 · ab0361f · ab0361f
1 parent 9228576
commit ab0361f
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -58,8 +58,8 @@ The attributes listed below are used in *components.json* to configure **Hotgrid
 Hotgrid automatically switches to 2 columns in small and medium device mode for the best user experience.
 
 ----------------------------
-**Version number:**  3.1.0  
-**Framework versions:**  4+     
+**Version number:**  4.0.0  
+**Framework versions:**  5+     
 **Author / maintainer:**   
 **Accessibility support:** WAI AA   
 **RTL support:** yes  

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "adapt-hotgrid-audio",
-  "version": "3.1.0",
-  "framework": ">=4",
+  "version": "4.0.0",
+  "framework": ">=5",
   "homepage": "https://github.com/deltanet/adapt-hotgrid-audio",
   "displayName": "Hotgrid Audio",
   "component": "hotgrid-audio",

diff --git a/js/hotgridPopupView.js b/js/hotgridPopupView.js
@@ -8,8 +8,8 @@ define([
         className: 'hotgrid-audio-popup',
 
         events: {
-            'click .hotgrid-close-button': 'closePopup',
-            'click .hotgrid-popup-controls': 'onControlClick'
+            'click .js-hotgrid-close-btn': 'closePopup',
+            'click .js-hotgrid-popup-controls': 'onControlClick'
         },
 
         initialize: function() {
@@ -37,17 +37,16 @@ define([
             var shouldEnableNext = index < itemCount - 1 && canCycleThroughPagination;
             var $controls = this.$('.hotgrid-popup-controls');
 
-            this.$('hotgrid-popup-nav')
-                .toggleClass('first', !shouldEnableBack)
-                .toggleClass('last', !shouldEnableNext);
+            this.$('hotgrid-popup-nav').filter('.back').toggleClass('is-disabled', shouldEnableBack);
+            this.$('hotgrid-popup-nav').filter('.next').toggleClass('is-disabled', shouldEnableNext);
 
             $controls.filter('.back').a11y_cntrl_enabled(shouldEnableBack);
             $controls.filter('.next').a11y_cntrl_enabled(shouldEnableNext);
         },
 
         handleTabs: function() {
-            this.$('.hotgrid-item:not(.active) *').a11y_on(false);
-            this.$('.hotgrid-item.active *').a11y_on(true);
+            this.$('.hotgrid-item:not(.is-active) *').a11y_on(false);
+            this.$('.hotgrid-item.is-active *').a11y_on(true);
         },
 
         onItemsActiveChange: function(item, _isActive) {
@@ -59,14 +58,14 @@ define([
         },
 
         applyItemClasses: function(index) {
-            this.$('.hotgrid-item[data-index="' + index + '"]').addClass('active').removeAttr('aria-hidden');
+            this.$('.hotgrid-item[data-index="' + index + '"]').addClass('is-active').removeAttr('aria-hidden');
             this.$('.hotgrid-item[data-index="' + index + '"] .notify-popup-title').attr("id", "notify-heading");
-            this.$('.hotgrid-item:not([data-index="' + index + '"])').removeClass('active').attr('aria-hidden', 'true');
+            this.$('.hotgrid-item:not([data-index="' + index + '"])').removeClass('is-active').attr('aria-hidden', 'true');
             this.$('.hotgrid-item:not([data-index="' + index + '"]) .notify-popup-title').removeAttr("id");
         },
 
         handleFocus: function(index) {
-            this.$('.hotgrid-popup-inner .active').a11y_focus();
+            this.$('.hotgrid-popup-inner .is-active').a11y_focus();
             this.applyNavigationClasses(index);
         },
 
@@ -75,7 +74,7 @@ define([
 
             this.$('.hotgrid-item')
                 .filter('[data-index="' + item.get('_index') + '"]')
-                .addClass('visited');
+                .addClass('is-visited');
         },
 
         render: function() {

diff --git a/js/hotgridView.js b/js/hotgridView.js
@@ -69,7 +69,7 @@ define([
 
         postRender: function() {
             this.setUpColumns();
-            this.$('.hotgrid-widget').imageready(this.setReadyStatus.bind(this));
+            this.$('.hotgrid__widget').imageready(this.setReadyStatus.bind(this));
         },
 
         resizeControl: function() {
@@ -86,7 +86,7 @@ define([
         },
 
         onItemsActiveChange: function(model, _isActive) {
-            this.getItemElement(model).toggleClass('active', _isActive);
+            this.getItemElement(model).toggleClass('is-active', _isActive);
         },
 
         getItemElement: function(model) {
@@ -104,7 +104,7 @@ define([
                 ariaLabel.innerHTML += ' ' + visitedLabel;
             });
 
-            $item.addClass('visited');
+            $item.addClass('is-visited');
         },
 
         onItemClicked: function(event) {
@@ -128,7 +128,7 @@ define([
                 model: this.model
             });
 
-            Adapt.trigger('notify:popup', {
+            Adapt.notify.popup({
                 _view: this.popupView,
                 _isCancellable: true,
                 _showCloseButton: false,

diff --git a/less/hotgrid-audio.less b/less/hotgrid-audio.less
@@ -1,6 +1,6 @@
-.hotgrid-audio-component {
+.hotgrid-audio {
 
-	.hotgrid-widget {
+	.hotgrid__widget {
 		// Font size set to 0 so there's no gap between items
 		font-size: 0;
 		position: relative;
@@ -11,7 +11,7 @@
 		display: flex;
 		flex-flow: wrap;
 		justify-content: center;
-		padding-top: @component-padding / 2;
+		padding-top: @item-title-margin / 2;
 	}
 
 	.hotgrid-grid-listitem {
@@ -23,6 +23,9 @@
 		text-align: center;
 		vertical-align: top;
 		width: 100%;
+		background-color: transparent;
+
+		.button-text;
 
 		&.hotgrid-item-states-css {
 			.hotgrid-item-image {
@@ -35,9 +38,9 @@
 				}
 			}
 
-			&.visited {
+			&.is-visited {
 				.hotgrid-item-image {
-					border: 3px solid @item-color-visited;
+					border: 3px solid @visited;
 				}
 			}
 		}
@@ -62,7 +65,7 @@
     		}
 			}
 
-			&.visited {
+			&.is-visited {
 				img.hotgrid-item-image-default {
 	    		display: none !important;
 	    	}
@@ -92,31 +95,31 @@
 	.hotgrid-item-title {
 		text-align: center;
 		color: @font-color;
-		font-size: @body-text-font-size;
-		padding: @component-padding/2;
+		font-weight: @font-weight-bold;
+		padding: @item-title-margin/2;
 	}
 
 	&.item-titles {
 		.hotgrid-grid-item {
 			.hotgrid-item-title {
-				color: @item-text-color;
+				color: @item-color-inverted;
 				background-color: @item-color;
 				font-weight: @font-weight-bold;
 			}
 
 			.no-touch & {
 				&:hover {
 					.hotgrid-item-title {
-						color: @item-text-color-hover;
+						color: @item-color-inverted-hover;
 						background-color: @item-color-hover;
 					}
 				}
 			}
 
-			&.visited {
+			&.is-visited {
 				.hotgrid-item-title {
-					color: @item-text-color-visited;
-					background-color: @item-color-visited;
+					color: @visited-inverted;
+					background-color: @visited;
 				}
 			}
 		}
@@ -125,44 +128,32 @@
 
 .hotgrid-audio-popup {
 
-	.hotgrid-item:not(.active) {
+	.hotgrid-item:not(.is-active) {
     display: none;
 	}
 
-	.notify-popup-title {
-    text-align: center;
-    padding-right: 0 !important;
-  }
-
-	.notify-popup-buttons {
-		margin-top: 0 !important;
-	}
-
 	.hotgrid-popup-body {
-		padding-bottom: @notify-padding-bottom;
-		font-size: @body-text-font-size;
+		padding-bottom: @notify-padding-ver;
+
 		float: left;
-		text-align: left;
 		.dir-rtl & {
 			float: right;
-			text-align: right;
 		}
+
 		width: 60%;
 		overflow: hidden;
 
 		@media (max-width: @device-width-medium) {
 			width: 100%;
-			padding-bottom: (@notify-padding-bottom / 3);
 		}
 
-		&.fullwidth {
+		&.is-fullwidth {
 			width: 100%;
 		}
 	}
 
 	.hotgrid-popup-graphic {
 		float: right;
-		padding-bottom: @button-padding-bottom;
 		width: 38%;
 		margin-left: 2%;
 
@@ -184,42 +175,37 @@
 			margin-right: auto;
 		}
 
-		&.fullwidth {
+		&.is-fullwidth {
 			width: 100%;
 			margin-left: 0px;
 		}
 
-		&.hidden {
+		&.is-hidden {
 			display: none;
 		}
 	}
 
 	.hotgrid-popup-nav {
-		margin-top: @button-margin-top;
+		position: relative;
+		margin-top: @btn-margin;
 		clear: both;
 	}
 
 	.hotgrid-popup-controls {
-		display: block;
-	  width: (@icon-size*2);
-	  height: (@icon-size*2);
-	  position: absolute;
-	  text-decoration: none;
-	  background-color: @notify-button-color;
-
-		.icon {
-			margin: (@icon-size/2);
-	    color: @notify-button-text-color;
-		}
+		position: absolute;
+    border-radius: @btn-border-radius;
 
-	  .no-touch &:hover {
-			background-color: @notify-button-color-hover;
-	    .icon {
-				color: @notify-button-text-color-hover;
-	    }
-		}
+		padding: @btn-padding / 2;
+    background-color: @notify-icon;
+    color: @notify-icon-inverted;
+
+    .no-touch &:hover {
+      background-color: @notify-icon-hover;
+      color: @notify-icon-inverted-hover;
+      .transition(background-color @duration ease-in, color @duration ease-in;);
+    }
 
-		&.disabled {
+		&.is-disabled {
 			visibility: hidden;
     }
 	}

diff --git a/templates/hotgrid-audio.hbs b/templates/hotgrid-audio.hbs
@@ -1,11 +1,11 @@
-<div class="component-inner hotgrid-inner">
+<div class="component__inner hotgrid__inner">
   {{> component this}}
-  <div class="component-widget hotgrid-widget">
+  <div class="component__widget hotgrid__widget">
     <div role="list" class="hotgrid-grid">
-      <div class="hotgrid-grid-inner clearfix">
+      <div class="hotgrid-grid-inner u-clearfix">
         {{#each _items}}
         <div role="listitem" class="hotgrid-grid-listitem">
-          <button class="base hotgrid-grid-item hotgrid-item-states-{{#all _graphic.srcHover _graphic.srcVisited}}image{{else}}css{{/all}}{{#if _isVisited}} visited{{/if}}" data-index="{{@index}}">
+          <button class="hotgrid-grid-item hotgrid-item-states-{{#all _graphic.srcHover _graphic.srcVisited}}image{{else}}css{{/all}}{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}">
 
             <span class="aria-label">
               {{#if _graphic.title}}{{_graphic.title}}{{else}}{{../_globals._accessibility._ariaLabels.item}} {{numbers @index}}{{/if}}.{{#if _graphic.alt}} {{_graphic.alt}}.{{/if}}
@@ -25,6 +25,7 @@
               </div>
               {{/if}}
             </div>
+
           </button>
         </div>
         {{/each}}