@erst-vg/dkfds-vite 8.0.1

package/src/js/components/tabnav.js

@@ -0,0 +1,300 @@
+'use strict';
+let breakpoints = {
+  'xs': 0,
+  'sm': 576,
+  'md': 768,
+  'lg': 992,
+  'xl': 1200
+};
+
+// For easy reference
+var keys = {
+  end: 35,
+  home: 36,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  delete: 46
+};
+
+// Add or substract depending on key pressed
+var direction = {
+  37: -1,
+  38: -1,
+  39: 1,
+  40: 1
+};
+
+/**
+ * Add functionality to tabnav component
+ * @param {HTMLElement} tabnav Tabnav container
+ */
+function Tabnav (tabnav) {
+  this.tabnav = tabnav;
+  this.tabs = this.tabnav.querySelectorAll('button.tabnav-item');
+}
+
+/**
+ * Set event on component
+ */
+Tabnav.prototype.init = function(){
+  if(this.tabs.length === 0){
+    throw new Error(`Tabnav HTML seems to be missing tabnav-item. Add tabnav items to ensure each panel has a button in the tabnavs navigation.`);
+  }
+
+  // if no hash is set on load, set active tab
+  if (!setActiveHashTab()) {
+    // set first tab as active
+    let tab = this.tabs[ 0 ];
+
+    // check no other tabs as been set at default
+    let alreadyActive = getActiveTabs(this.tabnav);
+    if (alreadyActive.length === 0) {
+      tab = alreadyActive[ 0 ];
+    }
+
+    // activate and deactivate tabs
+    this.activateTab(tab, false);
+  }
+  let $module = this;
+  // add eventlisteners on buttons
+  for(let t = 0; t < this.tabs.length; t ++){
+    this.tabs[ t ].addEventListener('click', function(){$module.activateTab(this, false)});
+    this.tabs[ t ].addEventListener('keydown', keydownEventListener);
+    this.tabs[ t ].addEventListener('keyup', keyupEventListener);
+  }
+}
+
+/***
+ * Show tab and hide others
+ * @param {HTMLButtonElement} tab button element
+ * @param {boolean} setFocus True if tab button should be focused
+ */
+ Tabnav.prototype.activateTab = function(tab, setFocus) {
+  let tabs = getAllTabsInList(tab);
+
+  // close all tabs except selected
+  for (let i = 0; i < this.tabs.length; i++) {
+    if (tabs[ i ] === tab) {
+      continue;
+    }
+
+    if (tabs[ i ].getAttribute('aria-selected') === 'true') {
+      let eventClose = new Event('fds.tabnav.close');
+      tabs[ i ].dispatchEvent(eventClose);
+    }
+
+    tabs[ i ].setAttribute('tabindex', '-1');
+    tabs[ i ].setAttribute('aria-selected', 'false');
+    let tabpanelID = tabs[ i ].getAttribute('aria-controls');
+    let tabpanel = document.getElementById(tabpanelID)
+    if(tabpanel === null){
+      throw new Error(`Could not find tabpanel.`);
+    }
+    tabpanel.setAttribute('aria-hidden', 'true');
+  }
+  
+  // Set selected tab to active
+  let tabpanelID = tab.getAttribute('aria-controls');
+  let tabpanel = document.getElementById(tabpanelID);
+  if(tabpanel === null){
+    throw new Error(`Could not find accordion panel.`);
+  }
+
+  tab.setAttribute('aria-selected', 'true');
+  tabpanel.setAttribute('aria-hidden', 'false');
+  tab.removeAttribute('tabindex');
+
+  // Set focus when required
+  if (setFocus) {
+    tab.focus();
+  }
+
+  let eventChanged = new Event('fds.tabnav.changed');
+  tab.parentNode.dispatchEvent(eventChanged);
+
+  let eventOpen = new Event('fds.tabnav.open');
+  tab.dispatchEvent(eventOpen);
+}
+
+/**
+ * Add keydown events to tabnav component
+ * @param {KeyboardEvent} event 
+ */
+function keydownEventListener (event) {
+  let key = event.keyCode;
+
+  switch (key) {
+    case keys.end:
+      event.preventDefault();
+      // Activate last tab
+      focusLastTab(event.target);
+      break;
+    case keys.home:
+      event.preventDefault();
+      // Activate first tab
+      focusFirstTab(event.target);
+      break;
+    // Up and down are in keydown
+    // because we need to prevent page scroll >:)
+    case keys.up:
+    case keys.down:
+      determineOrientation(event);
+      break;
+  }
+}
+
+/**
+ * Add keyup events to tabnav component
+ * @param {KeyboardEvent} event 
+ */
+function keyupEventListener (event) {
+  let key = event.keyCode;
+
+  switch (key) {
+    case keys.left:
+    case keys.right:
+      determineOrientation(event);
+      break;
+    case keys.delete:
+      break;
+    case keys.enter:
+    case keys.space:
+      new Tabnav(event.target.parentNode).activateTab(event.target, true);
+      break;
+  }
+}
+
+/**
+ * When a tablist aria-orientation is set to vertical,
+ * only up and down arrow should function.
+ * In all other cases only left and right arrow function.
+ */
+function determineOrientation (event) {
+  let key = event.keyCode;
+
+  let w=window,
+    d=document,
+    e=d.documentElement,
+    g=d.getElementsByTagName('body')[ 0 ],
+    x=w.innerWidth||e.clientWidth||g.clientWidth,
+    y=w.innerHeight||e.clientHeight||g.clientHeight;
+
+  let vertical = x < breakpoints.md;
+  let proceed = false;
+
+  if (vertical) {
+    if (key === keys.up || key === keys.down) {
+      event.preventDefault();
+      proceed = true;
+    }
+  }
+  else {
+    if (key === keys.left || key === keys.right) {
+      proceed = true;
+    }
+  }
+  if (proceed) {
+    switchTabOnArrowPress(event);
+  }
+}
+
+/**
+ * Either focus the next, previous, first, or last tab
+ * depending on key pressed
+ */
+function switchTabOnArrowPress (event) {
+  var pressed = event.keyCode;
+  if (direction[ pressed ]) {
+    let target = event.target;
+    let tabs = getAllTabsInList(target);
+    let index = getIndexOfElementInList(target, tabs);
+    if (index !== -1) {
+      if (tabs[ index + direction[ pressed ] ]) {
+        tabs[ index + direction[ pressed ] ].focus();
+      }
+      else if (pressed === keys.left || pressed === keys.up) {
+        focusLastTab(target);
+      }
+      else if (pressed === keys.right || pressed == keys.down) {
+        focusFirstTab(target);
+      }
+    }
+  }
+}
+
+/**
+ * Get all active tabs in list
+ * @param tabnav parent .tabnav element
+ * @returns returns list of active tabs if any
+ */
+function getActiveTabs (tabnav) {
+  return tabnav.querySelectorAll('button.tabnav-item[aria-selected=true]');
+}
+
+/**
+ * Get a list of all button tabs in current tablist
+ * @param tab Button tab element
+ * @returns {*} return array of tabs
+ */
+function getAllTabsInList (tab) {
+  let parentNode = tab.parentNode;
+  if (parentNode.classList.contains('tabnav')) {
+    return parentNode.querySelectorAll('button.tabnav-item');
+  }
+  return [];
+}
+
+/**
+ * Get index of element in list
+ * @param {HTMLElement} element 
+ * @param {HTMLCollection} list 
+ * @returns {index}
+ */
+function getIndexOfElementInList (element, list){
+  let index = -1;
+  for (let i = 0; i < list.length; i++ ){
+    if(list[ i ] === element){
+      index = i;
+      break;
+    }
+  }
+
+  return index;
+}
+
+/**
+ * Checks if there is a tab hash in the url and activates the tab accordingly
+ * @returns {boolean} returns true if tab has been set - returns false if no tab has been set to active
+ */
+function setActiveHashTab () {
+  let hash = location.hash.replace('#', '');
+  if (hash !== '') {
+    let tab = document.querySelector('button.tabnav-item[aria-controls="#' + hash + '"]');
+    if (tab !== null) {
+      activateTab(tab, false);
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Get first tab by tab in list
+ * @param {HTMLButtonElement} tab 
+ */
+function focusFirstTab (tab) {
+  getAllTabsInList(tab)[ 0 ].focus();
+}
+
+/**
+ * Get last tab by tab in list
+ * @param {HTMLButtonElement} tab 
+ */
+function focusLastTab (tab) {
+  let tabs = getAllTabsInList(tab);
+  tabs[ tabs.length - 1 ].focus();
+}
+
+export default Tabnav;

package/src/js/components/toast.js

@@ -0,0 +1,43 @@
+'use strict';
+/**
+ * Show/hide toast component
+ * @param {HTMLElement} element 
+ */
+function Toast (element){
+    this.element = element;
+}
+
+/**
+ * Show toast
+ */
+Toast.prototype.show = function(){
+    this.element.classList.remove('hide');
+    this.element.classList.add('showing');
+    this.element.getElementsByClassName('toast-close')[0].addEventListener('click', function(){
+        let toast = this.parentNode.parentNode;
+        new Toast(toast).hide();
+    });
+    requestAnimationFrame(showToast);
+}
+
+/**
+ * Hide toast
+ */
+Toast.prototype.hide = function(){
+    this.element.classList.remove('show');
+    this.element.classList.add('hide');         
+}
+
+/**
+ * Adds classes to make show animation
+ */
+function showToast(){
+    let toasts = document.querySelectorAll('.toast.showing');
+    for(let t = 0; t < toasts.length; t++){
+        let toast = toasts[t];
+        toast.classList.remove('showing');
+        toast.classList.add('show');
+    }
+}
+
+export default Toast;

package/src/js/components/tooltip.js

@@ -0,0 +1,249 @@
+'use strict';
+/**
+ * Set tooltip on element
+ * @param {HTMLElement} element Element which has tooltip
+ */
+function Tooltip(element){
+  this.element = element;
+  if(this.element.getAttribute('data-tooltip') === null){
+    throw new Error(`Tooltip text is missing. Add attribute data-tooltip and the content of the tooltip as value.`);
+  }
+}
+
+/**
+ * Set eventlisteners
+ */
+Tooltip.prototype.init = function (){
+  let module = this;
+    this.element.addEventListener('mouseenter', function (e) {
+      let trigger = e.target;
+      if(trigger.classList.contains('tooltip-hover') === false && trigger.classList.contains('tooltip-focus') === false){
+        closeAllTooltips(e);
+        trigger.classList.add("tooltip-hover");
+        setTimeout(function(){ 
+          if(trigger.classList.contains('tooltip-hover')){
+            var element = e.target;
+
+            if (element.getAttribute('aria-describedby') !== null) return;
+            addTooltip(element);
+          }
+        }, 300);
+      }
+    });
+
+    this.element.addEventListener('mouseleave', function (e) {
+      let trigger = e.target;
+      if(trigger.classList.contains('tooltip-hover')){
+        trigger.classList.remove('tooltip-hover');
+        var tooltipId = trigger.getAttribute('aria-describedby'); 
+        let tooltipElement = document.getElementById(tooltipId);
+        if(tooltipElement !== null){
+          closeHoverTooltip(trigger);
+        }
+      }
+    });
+
+    this.element.addEventListener('keyup', function(event){
+      var key = event.which || event.keyCode;
+      if (key === 27) {
+        var tooltip = this.getAttribute('aria-describedby');
+        if(tooltip !== null && document.getElementById(tooltip) !== null){
+          document.body.removeChild(document.getElementById(tooltip));
+        }
+        this.classList.remove('active');
+        this.removeAttribute('aria-describedby');
+      }
+    });
+    
+  if(this.element.getAttribute('data-tooltip-trigger') === 'click'){
+    this.element.addEventListener('click', function (e) {
+      var trigger = e.target;
+      closeAllTooltips(e);
+      trigger.classList.add('tooltip-focus');
+      trigger.classList.remove('tooltip-hover');
+      if (trigger.getAttribute('aria-describedby') !== null) return;
+      addTooltip(trigger);
+    });
+  }
+  
+  document.getElementsByTagName('body')[0].removeEventListener('click', closeAllTooltips);
+  document.getElementsByTagName('body')[0].addEventListener('click', closeAllTooltips);
+};
+/**
+ * Close all tooltips
+ */
+function closeAll (){
+  var elements = document.querySelectorAll('.js-tooltip[aria-describedby]');
+  for(var i = 0; i < elements.length; i++) {
+    var popper = elements[ i ].getAttribute('aria-describedby');
+    elements[ i ].removeAttribute('aria-describedby');
+    document.body.removeChild(document.getElementById(popper));
+  }
+}
+
+function addTooltip(trigger){
+  var pos = trigger.getAttribute('data-tooltip-position') || 'top';
+
+  var tooltip = createTooltip(trigger, pos);
+
+  document.body.appendChild(tooltip);
+
+  positionAt(trigger, tooltip, pos);
+}
+/**
+ * Create tooltip element
+ * @param {HTMLElement} element Element which the tooltip is attached
+ * @param {string} pos Position of tooltip (top | bottom)
+ * @returns 
+ */
+function createTooltip (element, pos) {
+  var tooltip = document.createElement('div');
+  tooltip.className = 'tooltip-popper';
+  var poppers = document.getElementsByClassName('tooltip-popper');
+  var id = 'tooltip-'+poppers.length+1;
+  tooltip.setAttribute('id', id);
+  tooltip.setAttribute('role', 'tooltip');
+  tooltip.setAttribute('x-placement', pos);
+  element.setAttribute('aria-describedby', id);
+
+  var tooltipInner = document.createElement('div');
+  tooltipInner.className = 'tooltip';
+
+  var tooltipArrow = document.createElement('div');
+  tooltipArrow.className = 'tooltip-arrow';
+  tooltipInner.appendChild(tooltipArrow);
+
+  var tooltipContent = document.createElement('div');
+  tooltipContent.className = 'tooltip-content';
+  tooltipContent.innerHTML = element.getAttribute('data-tooltip');
+  tooltipInner.appendChild(tooltipContent);
+  tooltip.appendChild(tooltipInner);
+
+  return tooltip;
+}
+
+
+/**
+ * Positions the tooltip.
+ *
+ * @param {object} parent - The trigger of the tooltip.
+ * @param {object} tooltip - The tooltip itself.
+ * @param {string} posHorizontal - Desired horizontal position of the tooltip relatively to the trigger (left/center/right)
+ * @param {string} posVertical - Desired vertical position of the tooltip relatively to the trigger (top/center/bottom)
+ *
+ */
+ function positionAt (parent, tooltip, pos) {
+  let trigger = parent;
+  let arrow = tooltip.getElementsByClassName('tooltip-arrow')[0];
+  let triggerPosition = parent.getBoundingClientRect();
+  
+  var parentCoords = parent.getBoundingClientRect(), left, top;
+
+  var tooltipWidth = tooltip.offsetWidth;
+
+  var dist = 12;
+  let arrowDirection = "down";
+  left = parseInt(parentCoords.left) + ((parent.offsetWidth - tooltip.offsetWidth) / 2);
+
+  switch (pos) {
+    case 'bottom':
+      top = parseInt(parentCoords.bottom) + dist;
+      arrowDirection = "up";
+      break;
+
+    default:
+    case 'top':
+      top = parseInt(parentCoords.top) - tooltip.offsetHeight - dist;
+  }
+
+  // if tooltip is out of bounds on left side
+  if(left < 0) {
+    left = dist;
+    let endPositionOnPage = triggerPosition.left + (trigger.offsetWidth / 2);
+    let tooltipArrowHalfWidth = 8;
+    let arrowLeftPosition = endPositionOnPage - dist - tooltipArrowHalfWidth;
+    tooltip.getElementsByClassName('tooltip-arrow')[0].style.left = arrowLeftPosition+'px';
+  }
+
+  // 
+  if((top + tooltip.offsetHeight) >= window.innerHeight){
+    top = parseInt(parentCoords.top) - tooltip.offsetHeight - dist;
+    arrowDirection = "up";
+  }
+  
+  if(top < 0) {
+    top = parseInt(parentCoords.bottom) + dist;
+    arrowDirection = "up";
+  }
+  if(window.innerWidth < (left + tooltipWidth)){
+    tooltip.style.right = dist + 'px';
+    let endPositionOnPage = triggerPosition.right - (trigger.offsetWidth / 2);
+    let tooltipArrowHalfWidth = 8;
+    let arrowRightPosition = window.innerWidth - endPositionOnPage - dist - tooltipArrowHalfWidth;
+    tooltip.getElementsByClassName('tooltip-arrow')[0].style.right = arrowRightPosition+'px';
+    tooltip.getElementsByClassName('tooltip-arrow')[0].style.left = 'auto';
+  } else {
+    tooltip.style.left = left + 'px';
+  }
+  tooltip.style.top  = top + pageYOffset + 'px';
+  tooltip.getElementsByClassName('tooltip-arrow')[0].classList.add(arrowDirection);
+}
+
+
+function closeAllTooltips(event, force = false){
+  if (force || (!event.target.classList.contains('js-tooltip') && !event.target.classList.contains('tooltip') && !event.target.classList.contains('tooltip-content'))) {  
+    var elements = document.querySelectorAll('.tooltip-popper');
+    for(var i = 0; i < elements.length; i++) {
+      let trigger = document.querySelector('[aria-describedby='+elements[i].getAttribute('id')+']');
+      trigger.removeAttribute('data-tooltip-active');
+      trigger.removeAttribute('aria-describedby');
+      trigger.classList.remove('tooltip-focus');
+      trigger.classList.remove('tooltip-hover');
+      document.body.removeChild(elements[i]);
+    }
+  }
+}
+
+function closeHoverTooltip(trigger){
+    var tooltipId = trigger.getAttribute('aria-describedby'); 
+    let tooltipElement = document.getElementById(tooltipId);
+    tooltipElement.removeEventListener('mouseenter', onTooltipHover);
+    tooltipElement.addEventListener('mouseenter', onTooltipHover);
+    setTimeout(function(){   
+      let tooltipElement = document.getElementById(tooltipId);
+      if(tooltipElement !== null){
+        if(!trigger.classList.contains("tooltip-hover")){
+          removeTooltip(trigger);
+        }
+      }
+    }, 300);
+}
+
+function onTooltipHover(e){
+  let tooltipElement = this;
+
+  let trigger = document.querySelector('[aria-describedby='+tooltipElement.getAttribute('id')+']');
+  trigger.classList.add('tooltip-hover');
+  
+  tooltipElement.addEventListener('mouseleave', function(){
+    let trigger = document.querySelector('[aria-describedby='+tooltipElement.getAttribute('id')+']');
+    if(trigger !== null){
+      trigger.classList.remove('tooltip-hover');
+      closeHoverTooltip(trigger);
+    }
+  });
+}
+
+function removeTooltip(trigger){
+  var tooltipId = trigger.getAttribute('aria-describedby'); 
+  let tooltipElement = document.getElementById(tooltipId);
+  
+  if(tooltipId !== null && tooltipElement !== null){
+    document.body.removeChild(tooltipElement);
+  }
+  trigger.removeAttribute('aria-describedby');
+  trigger.classList.remove('tooltip-hover');
+  trigger.classList.remove('tooltip-focus');
+}
+
+module.exports = Tooltip;

package/src/js/config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  prefix: '',
+};