gent_styleguide 2.9.2 → 2.12.0

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);

package/build/styleguide/js/input-date.binding-min.js

@@ -1 +1,8 @@
-"use strict";!function(e){e(document).ready(function(){e(".datepicker").loadDatepicker()})}(jQuery);
+'use strict';
+
+(function ($) {
+  $(document).ready(function () {
+    $('.datepicker').loadDatepicker();
+  });
+
+})(jQuery);

package/build/styleguide/js/input-date.functions-min.js

@@ -1 +1,27 @@
-"use strict";!function(t){t.fn.extend({loadDatepicker:function(){t(this).datepicker({showWeek:!0,dateFormat:"dd/mm/yy",altFormat:"dd/mm/yy"})}})}(jQuery);
+/**
+ * @file
+ * Implements the jQuery UI datepicker plugin.
+ *
+ * @author
+ * Gert-Jan Meire
+ *
+ */
+
+'use strict';
+
+(function ($) {
+  $.fn.extend({
+
+    /**
+     * Creates a jQuery extension function.
+     *
+     */
+    loadDatepicker: function () {
+      $(this).datepicker({
+        showWeek: true,
+        dateFormat: 'dd/mm/yy',
+        altFormat: 'dd/mm/yy'
+      });
+    }
+  });
+})(jQuery);

package/build/styleguide/js/input-multiselect-chosen.binding-min.js

@@ -1 +1,31 @@
-"use strict";!function(e){e(window).on("load",function(){var n=null!=navigator.userAgent.match(/iPad/i),o=null!=navigator.userAgent.match(/iPhone/i);!1===n&&e(".chosen-select").loadChosenSelect(),(n||o)&&e(".chosen-select").addClass("no-chosen-select")})}(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', initMultiselectChosen);
+
+  /**
+   * Replace the mobile breadcrumb of Gent base by our own.
+   */
+  function initMultiselectChosen() {
+    var isIpad = navigator.userAgent.match(/iPad/i) != null;
+    var isIphone = navigator.userAgent.match(/iPhone/i) != null;
+
+    if (isIpad === false) {
+      $('.chosen-select').loadChosenSelect();
+    }
+
+    if (isIpad || isIphone) {
+      $('.chosen-select').addClass('no-chosen-select');
+    }
+  }
+
+})(jQuery);

package/build/styleguide/js/input-multiselect-chosen.functions-min.js

@@ -1 +1,24 @@
-"use strict";!function(e){e.fn.extend({loadChosenSelect:function(){e(this).chosen({disable_search:!0})}})}(jQuery);
+/**
+ * @file
+ * Implements the jQuery Chosen plugin.
+ *
+ * @author
+ * Gert-Jan Meire
+ *
+ */
+'use strict';
+
+(function ($) {
+
+  $.fn.extend({
+
+    /**
+     * Creates a jQuery extension function.
+     *
+     */
+    loadChosenSelect: function () {
+      $(this).chosen({disable_search: true});
+    }
+
+  });
+})(jQuery);

package/build/styleguide/js/teaser-collection.binding-min.js

@@ -1 +1,14 @@
-"use strict";!function(o){o(window).on("load",function(n){o(".js-masonry-layout").masonry({itemSelector:"li",columnWidth:"li",percentPosition:!0})})}(jQuery);
+/**
+* @file
+*/
+'use strict';
+
+(function ($) {
+  $(window).on('load', function (e) {
+    $('.js-masonry-layout').masonry({
+      itemSelector: 'li',
+      columnWidth: 'li',
+      percentPosition: true
+    });
+  });
+})(jQuery);

package/build/styleguide/sass/00-settings/_vars.scss

@@ -12,14 +12,13 @@ $color-darkest-gray: #2c3f46 !default;
 $color-dark-gray: #595f60 !default;
 $color-gray: #9da8af !default;
 $color-light-gray: #e2e2e2 !default;
-$color-lightest-gray: #f4f4f4 !default;
 $color-medium-lighter-gray: #d5dadd !default;
-$color-orange: #f39200 !default;
+$color-lightest-gray: #f4f4f4 !default;
 $color-white: #fff !default;
 $color-green: #4da22e !default;
 $color-red: #a31b00 !default;
-
 $color-white-blue: #c2e2f0 !default;
+$color-orange: #f39200 !default;
 $color-orange-light: #ffa927 !default;
 $color-orange-lighter: #ffbd5a !default;
 

package/build/styleguide/sass/01-mixins/grid/_default_classes.scss

@@ -7,6 +7,8 @@
 //
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
+@use "sass:math";
+
 @mixin make-grid-columns($i: 1, $list: '.col-mobile-#{$i}, .col-tablet-#{$i}, .col-desktop-#{$i}') {
   @for $i from (1 + 1) through $grid-columns {
     $list: '#{$list}, .col-mobile-#{$i}, .col-tablet-#{$i}, .col-desktop-#{$i}';
@@ -17,8 +19,8 @@
     // Prevent columns from collapsing when empty
     min-height: 1px;
     // Inner gutter via padding
-    padding-right: $gutter-width / 2;
-    padding-left:  $gutter-width / 2;
+    padding-right: $gutter-width * .5;
+    padding-left:  $gutter-width * .5;
   }
 }
 
@@ -36,12 +38,12 @@
 @mixin calc-grid-column($index, $class, $type) {
   @if ($type == width) and ($index > 0) {
     .col-#{$class}-#{$index} {
-      width: percentage(($index / $grid-columns));
+      width: percentage(math.div($index, $grid-columns));
     }
   }
   @if ($type == push) and ($index > 0) {
     .col-#{$class}-push-#{$index} {
-      left: percentage(($index / $grid-columns));
+      left: percentage(math.div($index, $grid-columns));
     }
   }
   @if ($type == push) and ($index == 0) {
@@ -51,7 +53,7 @@
   }
   @if ($type == pull) and ($index > 0) {
     .col-#{$class}-pull-#{$index} {
-      right: percentage(($index / $grid-columns));
+      right: percentage(math.div($index, $grid-columns));
     }
   }
   @if ($type == pull) and ($index == 0) {
@@ -61,7 +63,7 @@
   }
   @if ($type == offset) {
     .col-#{$class}-offset-#{$index} {
-      margin-left: percentage(($index / $grid-columns));
+      margin-left: percentage(math.div($index, $grid-columns));
     }
   }
 }

package/build/styleguide/sass/01-mixins/grid/_mixins.scss

@@ -10,10 +10,12 @@
 //
 // @param $gutter [$gutter-width] - The width of grid gutters in rems.
 //
+@use "sass:math";
+
 @mixin make-row($gutter: $gutter-width) {
   @include clearfix();
-  margin-right: -($gutter / 2);
-  margin-left: -($gutter / 2);
+  margin-right: -($gutter * .5);
+  margin-left: -($gutter * .5);
 }
 
 //
@@ -26,10 +28,10 @@
 //
 @mixin make-mobile-column($columns, $gutter: $gutter-width) {
   position: relative;
-  width: percentage(($columns / $grid-columns));
+  width: percentage(math.div($columns, $grid-columns));
   min-height: 1px;
-  padding-right: ($gutter / 2);
-  padding-left:  ($gutter / 2);
+  padding-right: ($gutter * .5);
+  padding-left:  ($gutter * .5);
   float: left;
 }
 
@@ -41,7 +43,7 @@
 // @param $columns - The number of columns for the offset of this element.
 //
 @mixin make-mobile-column-offset($columns) {
-  margin-left: percentage(($columns / $grid-columns));
+  margin-left: percentage(math.div($columns, $grid-columns));
 }
 
 //
@@ -52,7 +54,7 @@
 // @param $columns - The number of columns to push this element.
 //
 @mixin make-mobile-column-push($columns) {
-  left: percentage(($columns / $grid-columns));
+  left: percentage(math.div($columns, $grid-columns));
 }
 
 //
@@ -63,7 +65,7 @@
 // @param $columns - The number of columns to pull this element.
 //
 @mixin make-mobile-column-pull($columns) {
-  right: percentage(($columns / $grid-columns));
+  right: percentage(math.div($columns, $grid-columns));
 }
 
 //
@@ -77,11 +79,11 @@
 @mixin make-tablet-column($columns, $gutter: $gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-right: ($gutter / 2);
-  padding-left:  ($gutter / 2);
+  padding-right: ($gutter * .5);
+  padding-left:  ($gutter * .5);
 
   @media (min-width: $bp-tablet) {
-    width: percentage(($columns / $grid-columns));
+    width: percentage(math.div($columns, $grid-columns));
     float: left;
   }
 }
@@ -95,7 +97,7 @@
 //
 @mixin make-tablet-column-offset($columns) {
   @media (min-width: $bp-tablet) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(math.div($columns, $grid-columns));
   }
 }
 
@@ -108,7 +110,7 @@
 //
 @mixin make-tablet-column-push($columns) {
   @media (min-width: $bp-tablet) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(math.div($columns, $grid-columns));
   }
 }
 
@@ -121,7 +123,7 @@
 //
 @mixin make-tablet-column-pull($columns) {
   @media (min-width: $bp-tablet) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(math.div($columns, $grid-columns));
   }
 }
 
@@ -136,11 +138,11 @@
 @mixin make-desktop-column($columns, $gutter: $gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-right: ($gutter / 2);
-  padding-left:  ($gutter / 2);
+  padding-right: ($gutter * .5);
+  padding-left:  ($gutter * .5);
 
   @media (min-width: $bp-desktop) {
-    width: percentage(($columns / $grid-columns));
+    width: percentage(math.div($columns, $grid-columns));
     float: left;
   }
 }
@@ -150,7 +152,7 @@
 //
 @mixin make-desktop-column-offset($columns) {
   @media (min-width: $bp-desktop) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(math.div($columns, $grid-columns));
   }
 }
 
@@ -163,7 +165,7 @@
 //
 @mixin make-desktop-column-push($columns) {
   @media (min-width: $bp-desktop) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(math.div($columns, $grid-columns));
   }
 }
 
@@ -172,6 +174,6 @@
 //
 @mixin make-desktop-column-pull($columns) {
   @media (min-width: $bp-desktop) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(math.div($columns, $grid-columns));
   }
 }

package/build/styleguide/sass/11-base/forms/_forms.scss

@@ -0,0 +1,3 @@
+.required-fields-indicator {
+  margin-bottom: 1.5rem;
+}

package/build/styleguide/sass/11-base/grid/_grid.scss

@@ -21,10 +21,10 @@ $susy: (
 .content-container {
   max-width: $bp-max-content;
   margin: 0 auto;
-  padding: 0 ($gutter-width / 2);
+  padding: 0 ($gutter-width * .5);
 
   @include tablet {
-    padding: 0 $gutter-width + ($gutter-width / 2); // gutter + padding cols
+    padding: 0 $gutter-width + ($gutter-width * .5); // gutter + padding cols
   }
 }
 

package/build/styleguide/sass/21-atoms/fieldset/_fieldset.scss

@@ -1,3 +1,3 @@
 fieldset .fieldset-wrapper {
-  padding: 0 $gutter-width / 2;
+  padding: 0 $gutter-width * .5;
 }

package/build/styleguide/sass/21-atoms/inputs/input-multiselect-chosen/_input-multiselect-chosen.scss

@@ -69,7 +69,7 @@
   display: inline-block;
   width: auto;
   min-height: 2rem;
-  margin: .18rem $gutter-width/2 0 0;
+  margin: .18rem $gutter-width*.5 0 0;
   padding-right: 1.875rem;
   line-height: 1.6rem;
 }

package/build/styleguide/sass/21-atoms/tag/_tag.scss

@@ -17,11 +17,6 @@
   @at-root a#{&} {
     text-decoration: none;
 
-    &:active,
-    &:visited {
-      text-decoration: none;
-    }
-
     &:hover,
     &:focus {
       cursor: pointer;