gent_styleguide 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -8,11 +8,19 @@ Refer to upcoming changes in our README.md under "Roadmap"
 
 All notable changes to this style guide are documented here.
 
-### 2.10.0
+### 2.11.0
 
 * DTGB-140: Removed some files from the NPM package.
 * DTGB-140: Fixed a bug where `npm install` breaks 
   the install of the style guide.
+* DTGB-276: Fixed a bug where the breadcrumb alignment was not correct. 
+
+  > **Some markup changes have been introduced so you might need some 
+    refactoring.**
+* DTGB-397: Changed the markup of radio buttons and checkboxes. They are
+  now inside their own fieldset.
+* DTGB-401: Updated links to new public gent_base repository. 
+* DTGB-402: Added a required form fields indicator at the top of forms. 
 
 ### 2.9.0
 

package/README.md

@@ -18,11 +18,11 @@ This repository is a read only version of the style guide part of our own
 Drupal 8 base theme.
 
 If you want to develop for this style guide you need to do it in 
-[this repository](https://github.com/digipolisgent/drupal_theme_gent-base)
+[this repository](https://github.com/StadGent/drupal_theme_gent-base)
 
 > Please do not create any pull requests directly here. 
 > Instead use 
-> [this repo](https://github.com/digipolisgent/drupal_theme_gent-base) to 
+> [this repo](https://github.com/StadGent/drupal_theme_gent-base) to 
 > create your pull requests.
 
 To contribute to the style guide please refer to the 

package/build/styleguide/js/base-min.js

@@ -1 +1,68 @@
-"use strict";var gent_styleguide=function(){return{TabTrap:function(t){var e=-1,n=function(t){var e=t.querySelectorAll('a[href], area[href], input:not([disabled]):not([hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');return Array.prototype.slice.call(e)}(t);this.next=function(){++e>n.length-1&&(e=0),n[e].focus()},this.back=function(){--e<0&&(e=n.length-1),n[e].focus()},this.home=function(){n[e=0].focus()},this.end=function(){e=n.length-1,n[e].focus()},this.reset=function(){e=-1},this.hasFocusables=n&&n.length>0}}}();
+'use strict';
+
+var gent_styleguide = (function () { // eslint-disable-line no-unused-vars
+
+  /**
+   * Generates a tabTrap object
+   *
+   * @param {object} container DOM-element
+   * @constructor
+   */
+  function TabTrap(container) {
+    var focusPosition = -1;
+    var focusables = getFocusables(container);
+
+    /**
+     * Returns all focusable elements within a given container.
+     *
+     * @param {object} container hamburger DOM-element
+     * @return {array} focusable elements
+     */
+    function getFocusables(container) {
+      var focusables = container
+        .querySelectorAll('a[href], ' +
+          'area[href], ' +
+          'input:not([disabled]):not([hidden]), ' +
+          'select:not([disabled]), ' +
+          'textarea:not([disabled]), ' +
+          'button:not([disabled]), ' +
+          '[tabindex="0"]');
+      return Array.prototype.slice.call(focusables);
+    }
+
+    this.next = function () {
+      if (++focusPosition > focusables.length - 1) {
+        focusPosition = 0;
+      }
+      focusables[focusPosition].focus();
+    };
+
+    this.back = function () {
+      if (--focusPosition < 0) {
+        focusPosition = focusables.length - 1;
+      }
+      focusables[focusPosition].focus();
+    };
+
+    this.home = function () {
+      focusPosition = 0;
+      focusables[focusPosition].focus();
+    };
+
+    this.end = function () {
+      focusPosition = focusables.length - 1;
+      focusables[focusPosition].focus();
+    };
+
+    this.reset = function () {
+      focusPosition = -1;
+    };
+
+    this.hasFocusables = focusables && focusables.length > 0;
+  }
+
+  return {
+    TabTrap: TabTrap
+  };
+
+})();

package/build/styleguide/js/breadcrumbs.binding-min.js

@@ -1 +1,13 @@
-"use strict";jQuery(window).on("load",function(e){this.gentStyleGuideBreadcrumb.updateMobileBreadcrumb()});
+/**
+ * @file
+ * Javascript binding of breadcrumb.functions.js
+ */
+
+'use strict';
+
+(function ($) {
+  $(window).on('load', function (e) {
+    this.gentStyleGuideBreadcrumb.updateMobileBreadcrumb();
+  });
+
+})(jQuery);

package/build/styleguide/js/breadcrumbs.functions-min.js

@@ -1 +1,131 @@
-"use strict";var gentStyleGuideBreadcrumb={};!function(e){function r(r,t,a){e("a, span",r).each(function(){var r=e(this),n=r.text().trim();n.length>t&&(n=!1!==a?n.substr(0,t-3).trim()+"...":n.substr(0,t).trim(),r.text(n))})}function t(r,t,a,n,l){null==a&&(a=2),null==n&&(n=a),t=Math.max(t,a+n+1);var i=e("li",r).length;if(i>=t){for(var u=a+1;u<=i-n;u++)e("li:nth-of-type("+u+")",r).hide();var s=e("<li>").append(e("<a>").text(l||"...").attr("href","#").click(function(t){t.preventDefault(),e(this).parent().remove(),e("li",r).show()}));a?e("li:nth-of-type("+a+")",r).after(s):r.prepend(s)}}gentStyleGuideBreadcrumb.updateMobileBreadcrumb=function(){var a=e("ol.breadcrumb, ul.nav--breadcrumb, ul.breadcrumb");if(a.length&&!a.hasClass("gentbe-processed")){a.addClass("gentbe-processed"),a.addClass("mobile-breadcrumb-processed"),e("select.nav--mobile-breadcrumb").remove();var n=a.clone();n.removeAttr("id").addClass("nav--mobile-breadcrumb"),a.after(n),r(a,150),r(n,100),t(a,6),t(n,5,1,2)}}}(jQuery);
+/**
+ * @file
+ * Breadcrumb handling and rendering.
+ */
+
+// Breadcrumb namespace definition.
+
+'use strict';
+
+var gentStyleGuideBreadcrumb = {};
+
+(function ($) {
+
+  /**
+   * Replace the mobile breadcrumb of Gent base by our own.
+   *
+   * Adds this function to a global gentStyleBreadcrumb namespace.
+   */
+  gentStyleGuideBreadcrumb.updateMobileBreadcrumb = function () {
+    var breadcrumb = $('ol.breadcrumb, ul.nav--breadcrumb, ul.breadcrumb');
+    if (breadcrumb.length && !breadcrumb.hasClass('gentbe-processed')) {
+      // Prevent duplicate processing by us or Gent base.
+      breadcrumb.addClass('gentbe-processed');
+      breadcrumb.addClass('mobile-breadcrumb-processed');
+
+      // Remove the mobile breadcrumb of Gent base.
+      $('select.nav--mobile-breadcrumb').remove();
+
+      // Duplicate the original breadcrumb as mobile version.
+      var mobile = breadcrumb.clone();
+      mobile.removeAttr('id').addClass('nav--mobile-breadcrumb');
+      breadcrumb.after(mobile);
+
+      // Truncate the labels.
+      truncateBreadcrumbLabels_(breadcrumb, 150);
+      truncateBreadcrumbLabels_(mobile, 100);
+
+      // Collapse the trail.
+      collapseBreadcrumbTrail_(breadcrumb, 6);
+      collapseBreadcrumbTrail_(mobile, 5, 1, 2);
+    }
+  };
+
+  /**
+   * Truncate the breadcrumb labels to a maximum length.
+   *
+   * @param {Object} breadcrumb
+   *   The breadcrumb element as jQuery object.
+   * @param {int} length
+   *   Maximum length of a label.
+   * @param {boolean} [ellipsis]
+   *   Wether an elipsis should be added, defaults to true.
+   */
+  function truncateBreadcrumbLabels_(breadcrumb, length, ellipsis) {
+    $('a, span', breadcrumb).each(function () {
+      var element = $(this);
+      var text = element.text().trim();
+
+      if (text.length > length) {
+        if (ellipsis !== false) {
+          text = text.substr(0, (length - 3)).trim() + '...';
+        }
+        else {
+          text = text.substr(0, length).trim();
+        }
+
+        element.text(text);
+      }
+    });
+  }
+
+  /**
+   * Collapse the breadcrumb trail by hiding some elements.
+   *
+   * @param {Object} breadcrumb
+   *   The breadcrumb element as jQuery object.
+   * @param {int} min_length
+   *   Only collapse if the trail has at least this many items.
+   * @param {int} [head]
+   *   Number of items to show at the start of the trail, defaults to 2.
+   * @param {int} [tail]
+   *   Number of items to show at the end of the trail, defaults to the same value as head.
+   * @param {string} [text]
+   *   Text to use as link to show the collapsed items, defaults to "...".
+   */
+  function collapseBreadcrumbTrail_(breadcrumb, min_length, head, tail, text) {
+    // Set the default head and tail.
+    if (head == null) {
+      head = 2;
+    }
+
+    if (tail == null) {
+      tail = head;
+    }
+
+    // Make sure we have a sensible minimum length.
+    min_length = Math.max(min_length, (head + tail + 1));
+
+    // Get the number of items.
+    var length = $('li', breadcrumb).length;
+
+    // Check if the trail has the minimum length.
+    if (length >= min_length) {
+      // Hide the items.
+      for (var i = (head + 1); i <= (length - tail); i++) {
+        $('li:nth-of-type(' + i + ')', breadcrumb).hide();
+      }
+
+      // Create the uncollapse  link.
+      var link = $('<li>').append(
+        $('<a>')
+          .text(text ? text : '...')
+          .attr('href', '#')
+          .click(function (e) {
+            e.preventDefault();
+
+            $(this).parent().remove();
+            $('li', breadcrumb).show();
+          })
+      );
+
+      // Add it.
+      if (head) {
+        $('li:nth-of-type(' + head + ')', breadcrumb).after(link);
+      }
+      else {
+        breadcrumb.prepend(link);
+      }
+    }
+  }
+})(jQuery);

package/build/styleguide/js/button-drop-min.js

@@ -1 +1,38 @@
-"use strict";!function(o){o(window).on("load",function(){var n=o(".dropbutton-wrapper");n.find(".dropbutton-toggle button").on("click",function(o){o.stopPropagation(),n.hasClass("open")?n.removeClass("open"):n.addClass("open")}),o(document).on("click",function(o){n.removeClass("open")})})}(jQuery);
+'use strict';
+
+(function ($) {
+
+  /**
+   * Invoked after after loading the initial page and after each AJAX request.
+   *
+   * @param context
+   *   The DOM context.
+   * @param settings
+   *   Object of additional settings.
+   */
+  $(window).on('load', dropButtonLoad);
+
+  /**
+   * Replace the mobile breadcrumb of Gent base by our own.
+   */
+  function dropButtonLoad() {
+    var dropButton = $('.dropbutton-wrapper');
+    var dropButtonToggle = dropButton.find('.dropbutton-toggle button');
+
+    dropButtonToggle.on('click', function (e) {
+      e.stopPropagation();
+      if (dropButton.hasClass('open')) {
+        dropButton.removeClass('open');
+      }
+      else {
+        dropButton.addClass('open');
+      }
+    });
+
+    $(document).on('click', function (e) {
+      dropButton.removeClass('open');
+    });
+
+  }
+
+})(jQuery);

package/build/styleguide/js/button-drop.binding-min.js

@@ -1 +1,13 @@
-"use strict";!function(o){o(window).on("load",function(n){o(".dropbutton-wrapper").dropButtonLoad()})}(jQuery);
+/**
+ * @file
+ * binding of button-drop.functions.js
+ */
+
+'use strict';
+
+(function ($) {
+  $(window).on('load', function (e) {
+    $('.dropbutton-wrapper').dropButtonLoad();
+  });
+
+})(jQuery);

package/build/styleguide/js/button-drop.functions-min.js

@@ -1 +1,48 @@
-"use strict";!function(o){o.fn.extend({dropButtonLoad:function(){var n=o(this);n.find(".dropbutton-toggle button").on("click",function(o){o.stopPropagation(),n.hasClass("open")?n.removeClass("open"):n.addClass("open")}),o(document).on("click",function(o){n.removeClass("open")})}})}(jQuery);
+/**
+ * @file
+ * Implements a dropdown button.
+ *
+ * @author
+ * Wim Vantomme
+ *
+ */
+'use strict';
+
+(function ($) {
+  $.fn.extend({
+
+    /**
+     * Implements a jQuery extension function.
+     *
+     * @fires event:click
+     */
+    dropButtonLoad: function () {
+      var dropButton = $(this);
+      var dropButtonToggle = dropButton.find('.dropbutton-toggle button');
+
+      /**
+       * Opens or closes the drop-down botton on click.
+       *
+       * @event click
+       */
+      dropButtonToggle.on('click', function (e) {
+        e.stopPropagation();
+        if (dropButton.hasClass('open')) {
+          dropButton.removeClass('open');
+        }
+        else {
+          dropButton.addClass('open');
+        }
+      });
+
+      /**
+       * Closes the drop-down button
+       *
+       * @event click
+       */
+      $(document).on('click', function (e) {
+        dropButton.removeClass('open');
+      });
+    }
+  });
+})(jQuery);

package/build/styleguide/js/gallery.binding-min.js

@@ -1 +1,12 @@
-"use strict";!function(e){e(document).ready(function(){var t=e(".gallery");t.length>0&&t.loadLightGallery()})}(jQuery);
+'use strict';
+
+(function ($) {
+  $(document).ready(function () {
+    var $gallery = $('.gallery');
+
+    if ($gallery.length > 0) {
+      $gallery.loadLightGallery();
+    }
+  });
+
+})(jQuery);

package/build/styleguide/js/gallery.functions-min.js

@@ -1 +1,29 @@
-"use strict";!function(t){t.fn.extend({loadLightGallery:function(){t(this).lightGallery({download:!1,getCaptionFromTitleOrAlt:!1,counter:!1})}})}(jQuery);
+/**
+ * @file
+ * Implements the jQuery light gallery plugin.
+ *
+ * @author
+ * Gert-Jan Meire
+ *
+ */
+
+'use strict';
+
+(function ($) {
+  $.fn.extend({
+
+    /**
+     * Creates a jQuery extension function.
+     *
+     */
+    loadLightGallery: function () {
+      $(this).lightGallery({
+        download: false,
+        getCaptionFromTitleOrAlt: false,
+        counter: false
+      });
+
+    }
+
+  });
+})(jQuery);

package/build/styleguide/js/hamburger-menu.binding-min.js

@@ -1 +1,17 @@
-"use strict";!function(n){n(window).on("load",function(u){var e=n(".hamburger-menu");e.length>0&&e.loadHamburgerMenu()})}(jQuery);
+/**
+ * @file
+ * Javascript binding of hamburger-menu.functions.js.
+ */
+
+'use strict';
+
+(function ($) {
+  $(window).on('load', function (e) {
+    var $hamburgerMenu = $('.hamburger-menu');
+
+    if ($hamburgerMenu.length > 0) {
+      $hamburgerMenu.loadHamburgerMenu();
+    }
+  });
+
+})(jQuery);

package/build/styleguide/js/hamburger-menu.functions-min.js

@@ -1 +1,166 @@
-"use strict";!function(e){e.fn.extend({loadHamburgerMenu:function(){var t,n=e(this[0]).find(".hamburger-menu__drawer"),a=n.find(".close"),s=e(".hamburger-menu__overlay");if("undefined"!=typeof gent_styleguide){var r=new gent_styleguide.TabTrap(n[0]),o=function(e){e&&e.preventDefault(),n.removeClass("js-opened"),s.removeClass("js-opened"),document.removeEventListener("keydown",u),r.reset(),t&&(t.focus(),t.setAttribute("aria-expanded",!1)),setTimeout(function(){n.attr("style","display: none")},500)},u=function(e){if(r&&r.hasFocusables&&e)switch(e.keyCode||e.which){case 9:e.preventDefault(),e.shiftKey?r.back():r.next();break;case 40:case 39:e.preventDefault(),r.next();break;case 38:case 37:e.preventDefault(),r.back();break;case 36:e.preventDefault(),r.home();break;case 35:e.preventDefault(),r.end();break;case 27:o(e)}};e(".hamburger-menu__toggle").on("click",function(e){e&&e.preventDefault(),n.attr("style","display: block"),setTimeout(function(){n.addClass("js-opened"),s.addClass("js-opened")}),(t=e.target).setAttribute("aria-expanded",!0),n.focus(),document.addEventListener("keydown",u)}),a.add(s).on("click",o),o()}else console.error("You need to include base.js.")}})}(jQuery);
+/**
+ * @file
+ * Implements a hamburger-menu button combined with
+ * a slide-in panel for easy mobile navigation.
+ *
+ * @authors
+ * Wim Vantomme
+ * Bart Delrue
+ *
+ */
+
+'use strict';
+
+(function ($) {
+
+  $.fn.extend({
+
+    /**
+     * Creates a jQuery extension function.
+     *
+     * @fires event:click
+     */
+    loadHamburgerMenu: function () {
+      var $drawer = $(this[0]).find('.hamburger-menu__drawer');
+      var $closeBtn = $drawer.find('.close');
+      var $overlay = $('.hamburger-menu__overlay');
+      var trigger;
+
+      if (typeof gent_styleguide === 'undefined') {
+        console.error('You need to include base.js.'); // eslint-disable-line no-console
+        return;
+      }
+
+      // TabTrap doens't use jquery opbjects.
+      var tabTrap = new gent_styleguide.TabTrap($drawer[0]); // eslint-disable-line no-undef
+
+      /**
+       * Closes the hamburger menu
+       *
+       * @param {event} e onclick or keydown:escape
+       */
+      var close = function (e) {
+        if (e) {
+          e.preventDefault();
+        }
+        $drawer.removeClass('js-opened');
+        $overlay.removeClass('js-opened');
+        document.removeEventListener('keydown', handleKeyboardInput);
+        tabTrap.reset();
+
+        // return focus to the trigger
+        if (trigger) {
+          trigger.focus();
+          trigger.setAttribute('aria-expanded', false);
+        }
+
+        // remove the menu from the tabindex
+        // jquery .css() doesn't now 'important'
+        setTimeout(function () {
+          $drawer.attr('style', 'display: none');
+        }, 500);
+      };
+
+      /**
+       * Opens the hamburger menu
+       *
+       * @param {event} e onclick
+       */
+      var open = function (e) {
+        if (e) {
+          e.preventDefault();
+        }
+
+        // add the menu to the tabindex
+        // jquery .css() doesn't now 'important'
+        $drawer.attr('style', 'display: block');
+
+        setTimeout(function () {
+          $drawer.addClass('js-opened');
+          $overlay.addClass('js-opened');
+        });
+
+
+        // remember the trigger
+        trigger = e.target;
+        trigger.setAttribute('aria-expanded', true);
+
+        // set focus to the menu
+        $drawer.focus();
+
+        // handle keyboard input
+        document.addEventListener('keydown', handleKeyboardInput);
+      };
+
+      /**
+       * Handle keyboard input
+       *
+       * @param {object} e event
+       */
+      var handleKeyboardInput = function (e) {
+
+        if (!tabTrap || !tabTrap.hasFocusables || !e) {
+          return;
+        }
+
+        var keyCode = e.keyCode || e.which;
+
+        switch (keyCode) {
+          case 9: // tab
+            e.preventDefault();
+            if (e.shiftKey) {
+              tabTrap.back();
+            }
+            else {
+              tabTrap.next();
+            }
+            break;
+          case 40: // arrow down
+          case 39: // arrow right
+            e.preventDefault();
+            tabTrap.next();
+            break;
+          case 38: // arrow up
+          case 37: // arrow left
+            e.preventDefault();
+            tabTrap.back();
+            break;
+          case 36: // home
+            e.preventDefault();
+            tabTrap.home();
+            break;
+          case 35: // end
+            e.preventDefault();
+            tabTrap.end();
+            break;
+          case 27: // esc
+            close(e);
+            break;
+        }
+      };
+
+      /**
+       * Indicates that a user has clicked on the hamburger toggle.
+       *
+       * Opens the overlay and hamburgerMenu.
+       *
+       * @event click
+       */
+      $('.hamburger-menu__toggle').on('click', open);
+
+
+      /**
+       * Indicates that a user has clicked on the closeBtn hamburger menu
+       * toggle.
+       *
+       * Closes the overlay and hamburgerMenu.
+       *
+       * @event click
+       */
+      $closeBtn.add($overlay).on('click', close);
+
+      // init the menu as closed on startup
+      close();
+    }
+  });
+})(jQuery);

package/build/styleguide/js/header.binding-min.js

@@ -1 +1,18 @@
-"use strict";!function(e){e(window).on("load",function(n){e(".header-search-mobile").loadMobileHeader(),e("header.header .content-container").displaySiteName()}),e(window).on("resize",function(n){e("header.header .content-container").displaySiteName()})}(jQuery);
+/**
+ * @file
+ * Javascript binding of header.functions.js.
+ */
+
+'use strict';
+
+(function ($) {
+  $(window).on('load', function (e) {
+    $('.header-search-mobile').loadMobileHeader();
+    $('header.header .content-container').displaySiteName();
+  });
+
+  $(window).on('resize', function (e) {
+    $('header.header .content-container').displaySiteName();
+  });
+
+})(jQuery);

package/build/styleguide/js/header.functions-min.js

@@ -1 +1,73 @@
-"use strict";!function(e){e.fn.extend({loadMobileHeader:function(){var s=e(this),n=s.find(".form-search"),o=s.find('input[type="search"]'),i=n.find('input[type="submit"]'),a=s.find(".close");i.on("click",function(e){i.hasClass("js-form-search-opened")||e.preventDefault(),s.addClass("js-form-search-opened"),o.addClass("js-form-search-opened"),a.addClass("js-form-search-opened")}),a.on("click",function(e){e.preventDefault(),s.removeClass("js-form-search-opened"),o.removeClass("js-form-search-opened"),a.removeClass("js-form-search-opened")})},displaySiteName:function(){var s=70,n=null;this.children(".header-component:visible").each(function(){0===e(this).has(".site-logo").length?s+=e(this).width():n=this}),e(n).width(this.width()-s)}})}(jQuery);
+/**
+ * @file
+ * Implements a responsive search element in
+ * the header of a website.
+ *
+ * @author
+ * Wim Vantomme
+ *
+ */
+'use strict';
+
+(function ($) {
+  $.fn.extend({
+
+    /**
+     * Implements a jQuery extension function.
+     *
+     * @fires event:click
+     */
+    loadMobileHeader: function () {
+      var mobileHeader = $(this);
+      var searchForm = mobileHeader.find('.form-search');
+      var searchInput = mobileHeader.find('input[type="search"]');
+      var searchButton = searchForm.find('input[type="submit"]');
+      var closeButton = mobileHeader.find('.close');
+
+      /**
+       * Opens, submits or closes the mobile form.
+       *
+       * @event click
+       */
+      searchButton.on('click', function (e) {
+        // Prevent button submission when form is closed.
+        if (!searchButton.hasClass('js-form-search-opened')) {
+          e.preventDefault();
+        }
+
+        mobileHeader.addClass('js-form-search-opened');
+        searchInput.addClass('js-form-search-opened');
+        closeButton.addClass('js-form-search-opened');
+      });
+
+      // Close the mobile form.
+      closeButton.on('click', function (e) {
+        e.preventDefault();
+        mobileHeader.removeClass('js-form-search-opened');
+        searchInput.removeClass('js-form-search-opened');
+        closeButton.removeClass('js-form-search-opened');
+      });
+    },
+
+    /**
+     * Implements a jQuery extension function.
+     */
+    displaySiteName: function () {
+      var componentsWidth = 70;
+      var logo = null;
+
+      // Calculate component width except for logo.
+      this.children('.header-component:visible').each(function () {
+        if ($(this).has('.site-logo').length === 0) {
+          componentsWidth += $(this).width();
+        }
+        else {
+          logo = this;
+        }
+      });
+
+      // Set available width on the logo component to show the site title.
+      $(logo).width(this.width() - componentsWidth);
+    }
+  });
+})(jQuery);