feat: nswdesignsystem v3.13.0

ckanext/nswdesignsystem/assets/vendor/main.js

@@ -434,6 +434,7 @@
       this.headings = element.querySelectorAll(this.accordionHeadingClass);
       this.expandAllBtn = expandAll;
       this.collapseAllBtn = collapseAll;
+      this.isExpandedOnLoad = element.querySelectorAll('.nsw-accordion__open');
       this.buttons = [];
       this.content = [];
       this.toggleEvent = e => this.toggle(e);
@@ -461,6 +462,12 @@
         this.content.push(contentElem);
         this.buttons.push(buttonElem);
       });
+      if (this.isExpandedOnLoad) {
+        this.isExpandedOnLoad.forEach(element => {
+          const openButton = element.querySelector('button');
+          this.setAccordionState(openButton, 'open');
+        });
+      }
     }
     controls() {
       this.buttons.forEach(element => {
@@ -1016,6 +1023,7 @@
       this.selectedTab = null;
       this.clickTabEvent = e => this.clickTab(e);
       this.arrowKeysEvent = e => this.arrowKeys(e);
+      this.owns = [];
     }
     init() {
       this.setUpDom();
@@ -1033,10 +1041,12 @@
         const itemLink = item.querySelector(this.tablistLinkClass);
         const panel = this.tab.querySelector(itemLink.hash);
         const uID = uniqueId('tab');
+        this.owns.push(uID);
         itemElem.setAttribute('role', 'presentation');
         this.enhanceTabLink(itemLink, uID);
         this.enhanceTabPanel(panel, uID);
       });
+      this.tabList.setAttribute('aria-owns', this.owns.join(' '));
     }
     enhanceTabLink(link, id) {
       link.setAttribute('role', 'tab');
@@ -3401,6 +3411,127 @@
     }
   }
 
+  class BackTop {
+    constructor(element) {
+      this.element = element;
+      this.dataElement = this.element.getAttribute('data-element');
+      this.scrollOffset = this.element.getAttribute('data-offset');
+      this.text = false;
+      this.icon = false;
+      this.scrollElement = this.dataElement ? document.querySelector(this.dataElement) : window;
+      this.scrollPosition = 0;
+      this.width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+      this.height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+      this.condition = false;
+    }
+    init() {
+      this.createButton();
+      this.element.addEventListener('click', event => {
+        event.preventDefault();
+        if (!window.requestAnimationFrame) {
+          this.scrollElement.scrollTo(0, 0);
+        } else if (this.dataElement) {
+          this.scrollElement.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
+        } else {
+          window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
+        }
+      });
+      this.checkBackToTop();
+      const debounceEvent = this.debounce(this.checkBackToTop);
+      this.scrollElement.addEventListener('scroll', () => {
+        debounceEvent();
+      });
+      const debounceResize = this.debounce(this.resizeHandler);
+      window.addEventListener('resize', () => {
+        debounceResize();
+      });
+    }
+    createButton() {
+      const textSpan = this.constructor.createElement('span');
+      const iconSpan = this.constructor.createElement('span', ['material-icons', 'nsw-material-icons'], {
+        title: 'Back to top',
+        focusable: 'false',
+        'aria-hidden': 'true'
+      });
+      this.element.append(textSpan, iconSpan);
+      this.text = this.element.querySelector('span:not(.material-icons)');
+      this.icon = this.element.querySelector('span.material-icons');
+      this.createButtonContent();
+    }
+    createButtonContent() {
+      if (this.width < 768) {
+        this.text.innerText = 'Top';
+        this.icon.innerText = 'keyboard_arrow_up';
+      } else {
+        this.text.innerText = 'Back to top';
+        this.icon.innerText = 'north';
+      }
+    }
+    checkBackToTop() {
+      let windowTop = this.scrollElement.scrollTop || document.documentElement.scrollTop;
+      if (!this.dataElement) windowTop = window.scrollY || document.documentElement.scrollTop;
+      const scroll = this.scrollPosition;
+      this.scrollPosition = window.scrollY;
+      if (this.scrollOffset && this.scrollOffset > 0) {
+        this.condition = windowTop >= this.scrollOffset;
+        this.element.classList.toggle('active', this.condition);
+      } else {
+        this.condition = scroll > this.scrollPosition && this.scrollPosition > 200;
+        this.element.classList.toggle('active', this.condition);
+      }
+    }
+    resizeHandler() {
+      const oldWidth = this.width;
+      const oldHeight = this.height;
+      this.width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+      this.height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+      if (oldWidth !== this.width && oldHeight === this.height) {
+        this.createButtonContent();
+      }
+    }
+    debounce(fn) {
+      var _this = this;
+      let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 250;
+      let timeout;
+      return function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        const context = _this;
+        if (!window.requestAnimationFrame) {
+          clearTimeout(timeout);
+          timeout = setTimeout(() => fn.apply(context, args), wait);
+        } else {
+          if (timeout) {
+            window.cancelAnimationFrame(timeout);
+          }
+          timeout = window.requestAnimationFrame(() => {
+            fn.apply(context, args);
+          });
+        }
+      };
+    }
+    static createElement(tag) {
+      let classes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      let attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      const element = document.createElement(tag);
+      if (classes.length > 0) {
+        element.classList.add(...classes);
+      }
+      Object.entries(attributes).forEach(_ref => {
+        let [key, value] = _ref;
+        element.setAttribute(key, value);
+      });
+      return element;
+    }
+  }
+
   /* eslint-disable max-len */
   if (window.NodeList && !NodeList.prototype.forEach) {
     NodeList.prototype.forEach = Array.prototype.forEach;
@@ -3436,12 +3567,17 @@
     const toggletip = document.querySelectorAll('.js-toggletip');
     const link = document.querySelectorAll('.js-link');
     const popover = document.querySelectorAll('.js-popover');
-    openSearchButton.forEach(element => {
-      new SiteSearch(element).init();
-    });
-    closeSearchButton.forEach(element => {
-      new SiteSearch(element).init();
-    });
+    const backTop = document.querySelectorAll('.js-back-to-top');
+    if (openSearchButton) {
+      openSearchButton.forEach(element => {
+        new SiteSearch(element).init();
+      });
+    }
+    if (closeSearchButton) {
+      closeSearchButton.forEach(element => {
+        new SiteSearch(element).init();
+      });
+    }
     if (navigation) {
       new Navigation(navigation).init();
     }
@@ -3496,9 +3632,15 @@
         new Popover(element).init();
       });
     }
+    if (backTop) {
+      backTop.forEach(element => {
+        new BackTop(element).init();
+      });
+    }
   }
 
   exports.Accordion = Accordion;
+  exports.BackTop = BackTop;
   exports.Dialog = Dialog;
   exports.ExternalLink = ExternalLink;
   exports.FileUpload = FileUpload;

package.json

@@ -19,6 +19,6 @@
   "homepage": "https://github.com/DataShades/ckanext-nswdesignsystem#readme",
   "dependencies": {
     "highlight.js": "github:highlightjs/highlight.js#11.8.0",
-    "nsw-design-system": "^3.11.2"
+    "nsw-design-system": "^3.13.0"
   }
 }