@erst-vg/dkfds-vite 8.0.1

package/src/js/components/accordion.js

@@ -0,0 +1,164 @@
+'use strict';
+import '../polyfills/Function/prototype/bind';
+const toggle = require('../utils/toggle');
+const isElementInViewport = require('../utils/is-in-viewport');
+const BUTTON = `.accordion-button[aria-controls]`;
+const EXPANDED = 'aria-expanded';
+const MULTISELECTABLE = 'aria-multiselectable';
+const MULTISELECTABLE_CLASS = 'accordion-multiselectable';
+const BULK_FUNCTION_OPEN_TEXT = "Åbn alle";
+const BULK_FUNCTION_CLOSE_TEXT = "Luk alle";
+const BULK_FUNCTION_ACTION_ATTRIBUTE = "data-accordion-bulk-expand";
+
+/**
+ * Adds click functionality to accordion list
+ * @param {HTMLElement} $accordion the accordion ul element
+ */
+function Accordion($accordion){
+  if(!$accordion){
+    throw new Error(`Missing accordion group element`);
+  }
+  this.accordion = $accordion;
+}
+
+/**
+ * Set eventlisteners on click elements in accordion list
+ */
+Accordion.prototype.init = function(){
+  this.buttons = this.accordion.querySelectorAll(BUTTON);
+  if(this.buttons.length == 0){
+    throw new Error(`Missing accordion buttons`);
+  }
+
+  // loop buttons in list
+  for (var i = 0; i < this.buttons.length; i++){
+    let currentButton = this.buttons[i];
+    
+    // Verify state on button and state on panel
+    let expanded = currentButton.getAttribute(EXPANDED) === 'true';
+    this.toggleButton(currentButton, expanded);
+    
+    // Set click event on accordion buttons
+    currentButton.removeEventListener('click', this.eventOnClick.bind(this, currentButton), false);
+    currentButton.addEventListener('click', this.eventOnClick.bind(this, currentButton), false);
+  }
+  // Set click event on bulk button if present
+  let prevSibling = this.accordion.previousElementSibling ;
+  if(prevSibling !== null && prevSibling.classList.contains('accordion-bulk-button')){
+    this.bulkFunctionButton = prevSibling;
+    this.bulkFunctionButton.addEventListener('click', this.bulkEvent.bind(this));
+  }
+}
+
+/**
+ * Bulk event handler: Triggered when clicking on .accordion-bulk-button
+ */
+Accordion.prototype.bulkEvent = function(){
+  var $module = this;
+  if(!$module.accordion.classList.contains('accordion')){  
+    throw new Error(`Could not find accordion.`);
+  }
+  if($module.buttons.length == 0){
+    throw new Error(`Missing accordion buttons`);
+  }
+    
+  let expand = true;
+  if($module.bulkFunctionButton.getAttribute(BULK_FUNCTION_ACTION_ATTRIBUTE) === "false") {
+    expand = false;
+  }
+  for (var i = 0; i < $module.buttons.length; i++){
+    $module.toggleButton($module.buttons[i], expand, true);
+  }
+  
+  $module.bulkFunctionButton.setAttribute(BULK_FUNCTION_ACTION_ATTRIBUTE, !expand);
+  if(!expand === true){
+    $module.bulkFunctionButton.innerText = BULK_FUNCTION_OPEN_TEXT;
+  } else{
+    $module.bulkFunctionButton.innerText = BULK_FUNCTION_CLOSE_TEXT;
+  }
+}
+
+/**
+ * Accordion button event handler: Toggles accordion
+ * @param {HTMLButtonElement} $button 
+ * @param {PointerEvent} e 
+ */
+Accordion.prototype.eventOnClick = function ($button, e) {
+  var $module = this;
+  e.stopPropagation();
+  e.preventDefault();
+  $module.toggleButton($button);
+  if ($button.getAttribute(EXPANDED) === 'true') {
+    // We were just expanded, but if another accordion was also just
+    // collapsed, we may no longer be in the viewport. This ensures
+    // that we are still visible, so the user isn't confused.
+    if (!isElementInViewport($button)) $button.scrollIntoView();
+  }
+}
+
+/**
+ * Toggle a button's "pressed" state, optionally providing a target
+ * state.
+ *
+ * @param {HTMLButtonElement} button
+ * @param {boolean?} expanded If no state is provided, the current
+ * state will be toggled (from false to true, and vice-versa).
+ * @return {boolean} the resulting state
+ */
+ Accordion.prototype.toggleButton = function (button, expanded, bulk = false) {
+  let accordion = null;
+  if(button.parentNode.parentNode.classList.contains('accordion')){
+    accordion = button.parentNode.parentNode;
+  } else if(button.parentNode.parentNode.parentNode.classList.contains('accordion')){
+    accordion = button.parentNode.parentNode.parentNode;
+  }
+  expanded = toggle(button, expanded);
+  if(expanded){    
+    let eventOpen = new Event('fds.accordion.open');
+    button.dispatchEvent(eventOpen);
+  } else{
+    let eventClose = new Event('fds.accordion.close');
+    button.dispatchEvent(eventClose);
+  }
+
+  let multiselectable = false;
+  if(accordion !== null && (accordion.getAttribute(MULTISELECTABLE) === 'true' || accordion.classList.contains(MULTISELECTABLE_CLASS))){
+    multiselectable = true;
+    let bulkFunction = accordion.previousElementSibling;
+    if(bulkFunction !== null && bulkFunction.classList.contains('accordion-bulk-button')){
+      let buttons = accordion.querySelectorAll(BUTTON);
+      if(bulk === false){
+        let buttonsOpen = accordion.querySelectorAll(BUTTON+'[aria-expanded="true"]');
+        let newStatus = true;
+
+        if(buttons.length === buttonsOpen.length){
+          newStatus = false;
+        }
+        
+        bulkFunction.setAttribute(BULK_FUNCTION_ACTION_ATTRIBUTE, newStatus);
+        if(newStatus === true){
+          bulkFunction.innerText = BULK_FUNCTION_OPEN_TEXT;
+        } else{
+          bulkFunction.innerText = BULK_FUNCTION_CLOSE_TEXT;
+        }
+      }
+    }
+  }
+
+  if (expanded && !multiselectable) {
+    let buttons = [ button ];
+    if(accordion !== null) {
+      buttons = accordion.querySelectorAll(BUTTON);
+    }
+    for(let i = 0; i < buttons.length; i++) {
+      let currentButtton = buttons[i];
+      if (currentButtton !== button && currentButtton.getAttribute('aria-expanded' === true)) {
+        toggle(currentButtton, false);
+        let eventClose = new Event('fds.accordion.close');
+        currentButtton.dispatchEvent(eventClose);
+      }
+    }
+  }
+};
+
+export default Accordion;

package/src/js/components/alert.js

@@ -0,0 +1,26 @@
+'use strict';
+function Alert(alert){
+    this.alert = alert;
+}
+
+Alert.prototype.init = function(){
+    let close = this.alert.getElementsByClassName('alert-close');
+    if(close.length === 1){
+        close[0].addEventListener('click', this.hide.bind(this));
+    }
+}
+
+Alert.prototype.hide = function(){
+    this.alert.classList.add('d-none');
+    let eventHide = new Event('fds.alert.hide');
+    this.alert.dispatchEvent(eventHide);
+};
+
+Alert.prototype.show = function(){
+    this.alert.classList.remove('d-none');
+    
+    let eventShow = new Event('fds.alert.show');
+    this.alert.dispatchEvent(eventShow);
+};
+
+export default Alert;

package/src/js/components/checkbox-toggle-content.js

@@ -0,0 +1,71 @@
+'use strict';
+import '../polyfills/Function/prototype/bind';
+
+const TOGGLE_TARGET_ATTRIBUTE = 'data-aria-controls';
+
+/**
+ * Adds click functionality to checkbox collapse component
+ * @param {HTMLInputElement} checkboxElement 
+ */
+function CheckboxToggleContent(checkboxElement){
+    this.checkboxElement = checkboxElement;
+    this.targetElement = null;
+}
+
+/**
+ * Set events on checkbox state change
+ */
+CheckboxToggleContent.prototype.init = function(){
+    this.checkboxElement.addEventListener('change', this.toggle.bind(this));
+    this.toggle();
+}
+
+/**
+ * Toggle checkbox content
+ */
+CheckboxToggleContent.prototype.toggle = function(){
+    var $module = this;
+    var targetAttr = this.checkboxElement.getAttribute(TOGGLE_TARGET_ATTRIBUTE)
+    var targetEl = document.getElementById(targetAttr);
+    if(targetEl === null || targetEl === undefined){
+        throw new Error(`Could not find panel element. Verify value of attribute `+ TOGGLE_TARGET_ATTRIBUTE);
+    }
+    if(this.checkboxElement.checked){
+        $module.expand(this.checkboxElement, targetEl);
+    }else{
+        $module.collapse(this.checkboxElement, targetEl);
+    }
+}
+
+/**
+ * Expand content
+ * @param {HTMLInputElement} checkboxElement Checkbox input element 
+ * @param {HTMLElement} contentElement Content container element 
+ */
+CheckboxToggleContent.prototype.expand = function(checkboxElement, contentElement){
+    if(checkboxElement !== null && checkboxElement !== undefined && contentElement !== null && contentElement !== undefined){
+        checkboxElement.setAttribute('data-aria-expanded', 'true');
+        contentElement.classList.remove('collapsed');
+        contentElement.setAttribute('aria-hidden', 'false');
+        let eventOpen = new Event('fds.collapse.expanded');
+        checkboxElement.dispatchEvent(eventOpen);
+    }
+}
+
+/**
+ * Collapse content
+ * @param {HTMLInputElement} checkboxElement Checkbox input element 
+ * @param {HTMLElement} contentElement Content container element 
+ */
+CheckboxToggleContent.prototype.collapse = function(triggerEl, targetEl){
+    if(triggerEl !== null && triggerEl !== undefined && targetEl !== null && targetEl !== undefined){
+        triggerEl.setAttribute('data-aria-expanded', 'false');
+        targetEl.classList.add('collapsed');
+        targetEl.setAttribute('aria-hidden', 'true');
+        
+        let eventClose = new Event('fds.collapse.collapsed');
+        triggerEl.dispatchEvent(eventClose);
+    }
+}
+
+export default CheckboxToggleContent;