Merge branch 'release-1.52.0'

oat-sa · Mar 2, 2022 · a0ee3d3 · a0ee3d3
2 parents 2737e7a + 1c45d97
commit a0ee3d3
Show file tree

Hide file tree

Showing 7 changed files with 345 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "1.51.1",
+    "version": "1.52.0",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

diff --git a/src/itemButtonList.js b/src/itemButtonList.js
@@ -50,7 +50,8 @@ const cssSelectors = {
  * @property {String} ariaLabel
  * @property {String} status - 'answered'/'viewed'/'unseen'
  * @property {String} scoreType - 'correct'/'incorrect'/null
- * @property {String} icon - 'info' or null
+ * @property {String} icon - 'info'/'flagged'/null
+ * @property {Boolean} disabled
  */
 /**
  * Item Button List
@@ -59,6 +60,7 @@ const cssSelectors = {
  *
  * @param {Object} config
  * @param {ItemButton[]} [config.items] - The list of entries to display
+ * @param {String|jQuery|HTMLElement} [scrollContainer] - scroll container element, for autoscroll
  * @returns {component}
  * @fires ready - When the component is ready to work
  * @fires click When an item is selected by the user
@@ -67,6 +69,15 @@ function itemButtonListFactory(config = {}) {
     let component;
     let activeItemId = null;
 
+    //jQuery or HTMLElement!
+    /**
+     * Get scroll container element
+     * @returns {HTMLElement}
+     */
+    const getScrollContainer = () => {
+        return config.scrollContainer || component.getElement();
+    };
+
     /**
      * Selects the active item
      * @param {String|null} itemId
@@ -75,7 +86,7 @@ function itemButtonListFactory(config = {}) {
         // first deactivate already active elements
         component.getElement().find(cssSelectors.active)
             .removeClass(cssClasses.active);
-        component.getElement().find(cssSelectors.navigable)
+        component.getElement().find(`${cssSelectors.navigable}[aria-current]`)
             .removeAttr('aria-current');
 
         // activate element
@@ -84,15 +95,43 @@ function itemButtonListFactory(config = {}) {
             if ($target.length) {
                 $target.addClass(cssClasses.active);
                 // finally make sure the item is visible
-                autoscroll($target, component.getElement());
-            }
-            const $ariaTarget = component.getElement().find(cssSelectors.navigableById(itemId));
-            if ($ariaTarget.length) {
+                autoscroll($target, getScrollContainer());
+
+                const $ariaTarget = component.getElement().find(cssSelectors.navigableById(itemId));
                 $ariaTarget.attr('aria-current', 'location');
             }
         }
     };
 
+    /**
+     * Update single item properties:
+     * Only `icon`, `numericLabel`, `ariaLabel` are supported
+     * @param {String} itemId
+     * @param {Object} itemData
+     */
+    const updateItemData = (itemId, itemData) => {
+        const $target = component.getElement().find(cssSelectors.itemById(itemId));
+        if ($target.length) {
+            if (typeof itemData.icon !== 'undefined') {
+                const iconElem = $target.find('.buttonlist-icon').get(0);
+                for (let i = 0; i < iconElem.classList.length; i++) {
+                    if (iconElem.classList[i].startsWith('icon-')) {
+                        iconElem.classList.remove(iconElem.classList[i]);
+                    }
+                }
+                if (itemData.icon) {
+                    iconElem.classList.add(`icon-${itemData.icon}`);
+                }
+            }
+            if (typeof itemData.numericLabel !== 'undefined') {
+                $target.find('.buttonlist-label').text(itemData.numericLabel !== null ? itemData.numericLabel : '');
+            }
+            if (typeof itemData.ariaLabel !== 'undefined') {
+                $target.find('.buttonlist-btn').attr('aria-label', itemData.ariaLabel);
+            }
+        }
+    };
+
     /**
      * 'tabfocus' styling, for Safari until :focus-visible supported
      * @param {jQuery|null}  $target
@@ -141,7 +180,6 @@ function itemButtonListFactory(config = {}) {
         /**
          * @event click
          * @param {String} itemId
-         * @param {Number} position
          */
         component.trigger('click', { id: itemId });
     };
@@ -162,6 +200,20 @@ function itemButtonListFactory(config = {}) {
                 selectItem(itemId);
             }
             return this;
+        },
+
+        /**
+         * Update single item properties:
+         * Only `icon`, `numericLabel`, `ariaLabel` are supported
+         * @param {String} itemId
+         * @param {Object} itemData
+         * @returns {buttonList}
+         */
+        updateItem(itemId, itemData) {
+            if (this.is('rendered')) {
+                updateItemData(itemId, itemData);
+            }
+            return this;
         }
     };
 
@@ -186,6 +238,7 @@ function itemButtonListFactory(config = {}) {
             });
 
             component.getElement().on('click', cssSelectors.navigable, e => {
+                //does not check `disabled` property of clicked item, should be checked by consumer
                 if (!this.is('disabled')) {
                     onClick(e.currentTarget.dataset.id);
                 }

diff --git a/src/itemButtonList/scss/item-button-list.scss b/src/itemButtonList/scss/item-button-list.scss
@@ -73,12 +73,17 @@ $borderMedium: 0.25rem;
         white-space: nowrap;
         line-height: initial;
     }
-
     .buttonlist-icon {
         padding: 0;
         top: 0;
         left: 0;
     }
+    .buttonlist-icon:not([class*="icon-"]) {
+        display: none;
+    }
+    .buttonlist-icon[class*="icon-"] ~ .buttonlist-label {
+        display: none;
+    }
 
     .indicator {
         display: none;
@@ -97,7 +102,6 @@ $borderMedium: 0.25rem;
         justify-content: center;
         align-items: center;
     }
-
     .buttonlist-score-icon {
         font-size: 1.2rem;
         padding: 0;
@@ -166,31 +170,31 @@ $borderMedium: 0.25rem;
                 background-color: $incorrectColor;
             }
         }
-
     }
 
-    /* disabling is applied at the buttonlist-items level */
-    &:not(.disabled) {
+    /* disabling is applied at buttonlist-item or buttonlist-items level */
+    &:not(.disabled) .buttonlist-item:not(.disabled) {
         .buttonlist-btn:hover {
             background-color: $hoverBgColor;
             color: $uiReviewPanelPrimaryHighlight;
             border-color: $uiReviewPanelPrimaryHighlight;
         }
     }
-    &.disabled {
+    &.disabled,
+    .buttonlist-item.disabled {
          /* reset global styles */
-        background-color: unset !important;
-        opacity: 1 !important;
-        text-shadow: none !important;
+         background-color: unset !important;
+         opacity: 1 !important;
+         text-shadow: none !important;
 
         .buttonlist-btn {
             cursor: not-allowed;
             /* reset global styles */
-            opacity: 0.5;
             text-shadow: none;
         }
     }
 
+
     /****** keyboard focus styles *******/
     .buttonlist-item {
         &.key-navigation-highlight .buttonlist-btn::before,

diff --git a/src/itemButtonList/tpl/itemButtonList.tpl b/src/itemButtonList/tpl/itemButtonList.tpl
@@ -1,23 +1,20 @@
 <ol class="buttonlist-items">
     {{#each items}}
-    <li class="buttonlist-item {{status}} {{#if scoreType}}{{scoreType}}{{/if}} {{#if ../disabled}}disabled{{/if}}" data-id="{{id}}">
+    <li class="buttonlist-item {{status}}{{#if scoreType}} {{scoreType}}{{/if}}{{#if disabled}} disabled{{/if}}" data-id="{{id}}">
         <button class="buttonlist-btn"
                 role="link"
                 aria-label="{{ariaLabel}}"
-                {{#if ../disabled}}aria-disabled="true"{{/if}}
+                {{#if disabled}}aria-disabled="true"{{/if}}
                 data-id="{{id}}">
             <span class="icon-indicator indicator" aria-hidden="true"></span>
             {{#if scoreType}}
                 <span class="buttonlist-score-badge">
                     <span class="buttonlist-score-icon icon-{{scoreType}}" aria-hidden="true"></span>
                 </span>
             {{/if}}
-            {{#if icon}}
-                <span class="buttonlist-icon icon-{{icon}}" aria-hidden="true"></span>
-            {{else}}
-                <span class="buttonlist-label" aria-hidden="true">{{numericLabel}}</span>
-            {{/if}}
+            <span class="buttonlist-icon{{#if icon}} icon-{{icon}}{{/if}}" aria-hidden="true"></span>
+            <span class="buttonlist-label" aria-hidden="true">{{#if numericLabel}}{{numericLabel}}{{/if}}</span>
         </button>
     </li>
     {{/each}}
-</ol>
+</ol>
diff --git a/test/itemButtonList/test.html b/test/itemButtonList/test.html
@@ -25,15 +25,25 @@
             .test {
                 border: 1px solid rgba(0,0,0,0.3);
                 width: 300px;
-                overflow: hidden;
+                overflow: scroll;
                 resize: both;
             }
+            input[type="text"].api-index {
+                min-width: 50px;
+                width: 50px;
+            }
         </style>
     </head>
     <body>
         <div id="visual-test">
             <h2>Visual test</h2>
-            <div class="test"></div>
+            <div class="test">
+                <div>
+                    <input class='api-index' type='text' placeholder="index">
+                    <a class='api-active'>|setActiveItem</a>
+                    <a class='api-update'>|updateItem</a>
+                </div>
+            </div>
         </div>
         <div id="qunit"></div>
         <div id="qunit-fixture">