STIJ-196: Added JS namespaces setup.

.eslintrc

@@ -7,6 +7,13 @@
     "Drupal": true,
     "jQuery": true
   },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
   "rules": {
     // Errors.
     "array-bracket-spacing": [2, "never"],

.gitignore

@@ -5,3 +5,4 @@ scss
 public/css
 public/styleguide/js
 public/styleguide/vendor
+components/main_cli.scss

components/11-base/base/base.js

@@ -1,67 +1,116 @@
-var gent_styleguide = (function () { // eslint-disable-line no-unused-vars
-  'use strict';
+var gent_styleguide = gent_styleguide || {};
+
+/**
+ * Generates a tabTrap object.
+ *
+ * @param {object} container DOM-element.
+ * @constructor
+ */
+export class TabTrap {
+  constructor(container) {
+    this.focusPosition = -1;
+    this.focusables = this.getFocusables(container);
+    this.hasFocusables = this.focusables && this.focusables.length > 0;
+  }
 
   /**
-   * Generates a tabTrap object
+   * Returns all focusable elements within a given container.
    *
-   * @param {object} container DOM-element
-   * @constructor
+   * @param {object} container hamburger DOM-element
+   * @return {array} focusable elements
    */
-  function TabTrap(container) {
-    var focusPosition = -1;
-    var focusables = getFocusables(container);
+  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);
+  }
 
-    /**
-     * 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);
+  next() {
+    if (++this.focusPosition > this.focusables.length - 1) {
+      this.focusPosition = 0;
     }
+    this.focusables[this.focusPosition].focus();
+  }
 
-    this.next = function () {
-      if (++focusPosition > focusables.length - 1) {
-        focusPosition = 0;
-      }
-      focusables[focusPosition].focus();
-    };
+  back() {
+    if (--this.focusPosition < 0) {
+      this.focusPosition = this.focusables.length - 1;
+    }
+    this.focusables[this.focusPosition].focus();
+  }
 
-    this.back = function () {
-      if (--focusPosition < 0) {
-        focusPosition = focusables.length - 1;
-      }
-      focusables[focusPosition].focus();
-    };
+  home() {
+    this.focusPosition = 0;
+    this.focusables[this.focusPosition].focus();
+  }
 
-    this.home = function () {
-      focusPosition = 0;
-      focusables[focusPosition].focus();
-    };
+  end() {
+    this.focusPosition = this.focusables.length - 1;
+    this.focusables[this.focusPosition].focus();
+  }
 
-    this.end = function () {
-      focusPosition = focusables.length - 1;
-      focusables[focusPosition].focus();
-    };
+  reset() {
+    this.focusPosition = -1;
+  }
+}
 
-    this.reset = function () {
-      focusPosition = -1;
-    };
+gent_styleguide.helper = (function () {
 
-    this.hasFocusables = focusables && focusables.length > 0;
-  }
+  // @todo document functions
+  // @todo refactor or remove addClass, removeClass
+  /**
+   * Removes a class from a DOM-element.
+   *
+   * @param {object} element DOM-element.
+   * @param {string} className A class name.
+   */
+  var removeClass = function (element, className) {
+    if (element.classList) {
+      element.classList.remove(className);
+    }
+  };
+
+  /**
+   * Adds a class from a DOM-element.
+   *
+   * @param {object} element DOM-element.
+   * @param {string} className A class name.
+   */
+  var addClass = function (element, className) {
+    if (element.classList) {
+      element.classList.add(className);
+    }
+    else {
+      element.classList += ' ' + className;
+    }
+  };
+
+  /**
+   * Adds an animation event to a DOM-element for
+   * mozilla, IE, chrome and opera
+   *
+   * @param {object} element DOM-element.
+   * @param {string} type geneneric name of the event.
+   * @param {function} next callback function for the event.
+   */
+  var prefixedAnimationEvent = function (element, type, next) {
+    var prefixes = ['webkit', 'moz', 'MS', 'o', ''];
+
+    for (var i = prefixes.length; i--;) {
+      element.addEventListener(prefixes[i] + type, next);
+    }
+  };
 
   return {
-    TabTrap: TabTrap
+    removeClass: removeClass,
+    addClass: addClass,
+    prefixedAnimationEvent: prefixedAnimationEvent
   };
 
 })();

components/21-atoms/button-drop/button-drop.binding.js

@@ -3,7 +3,6 @@
  * binding of button-drop.functions.js
  */
 (function ($) {
-  'use strict';
 
   $(window).on('load', function (e) {
     $('.dropbutton-wrapper').dropButtonLoad();

components/21-atoms/button-drop/button-drop.functions.js

@@ -7,7 +7,6 @@
  *
  */
 (function ($) {
-  'use strict';
 
   $.fn.extend({
 

components/21-atoms/button-drop/button-drop.js

@@ -1,5 +1,4 @@
 (function ($) {
-  'use strict';
 
   /**
    * Invoked after after loading the initial page and after each AJAX request.

components/21-atoms/inputs/input-date/input-date.binding.js

@@ -1,5 +1,4 @@
 (function ($) {
-  'use strict';
 
   $(document).ready(function () {
     $('.datepicker').loadDatepicker();

components/21-atoms/inputs/input-date/input-date.functions.js

@@ -7,7 +7,6 @@
  *
  */
 (function ($) {
-  'use strict';
 
   $.fn.extend({
 

components/21-atoms/inputs/input-multiselect-chosen/input-multiselect-chosen.binding.js

@@ -1,5 +1,4 @@
 (function ($) {
-  'use strict';
 
   /**
    * Invoked after after loading the initial page and after each AJAX request.

components/21-atoms/inputs/input-multiselect-chosen/input-multiselect-chosen.functions.js

@@ -7,7 +7,6 @@
  *
  */
 (function ($) {
-  'use strict';
 
   $.fn.extend({
 

components/31-molecules/building-blocks/breadcrumbs/breadcrumbs.binding.js

@@ -3,7 +3,6 @@
  * Javascript binding of breadcrumb.functions.js
  */
 (function ($) {
-  'use strict';
 
   $(window).on('load', function (e) {
     this.gentStyleGuideBreadcrumb.updateMobileBreadcrumb();

components/31-molecules/building-blocks/breadcrumbs/breadcrumbs.functions.js

@@ -7,7 +7,6 @@
 var gentStyleGuideBreadcrumb = {};
 
 (function ($) {
-  'use strict';
 
   /**
    * Replace the mobile breadcrumb of Gent base by our own.

components/31-molecules/building-blocks/gallery/gallery.binding.js

@@ -1,5 +1,4 @@
 (function ($) {
-  'use strict';
 
   $(document).ready(function () {
     var $gallery = $('.gallery');

components/31-molecules/building-blocks/gallery/gallery.functions.js

@@ -7,7 +7,6 @@
  *
  */
 (function ($) {
-  'use strict';
 
   $.fn.extend({
 

components/31-molecules/building-blocks/hamburger-menu/hamburger-menu.binding.js

@@ -2,15 +2,16 @@
  * @file
  * Javascript binding of hamburger-menu.functions.js.
  */
-(function ($) {
-  'use strict';
 
-  $(window).on('load', function (e) {
-    var $hamburgerMenu = $('.hamburger-menu');
+document.addEventListener('DOMContentLoaded', function () {
 
-    if ($hamburgerMenu.length > 0) {
-      $hamburgerMenu.loadHamburgerMenu();
-    }
-  });
+  var hamburgerMenus = document.querySelectorAll('.hamburger-menu');
 
-})(jQuery);
+  for (var i = hamburgerMenus.length; i--;) {
+    console.log('test'); // eslint-disable-line no-console
+
+    new gent_styleguide.components.HamburgerMenu(hamburgerMenus[i]); // eslint-disable-line no-undef
+  }
+
+
+});