From e85d84528c398f94068adafc79071f22b541ff39 Mon Sep 17 00:00:00 2001
From: Jeroen Goossens <jeroen@pau.be>
Date: Mon, 20 Nov 2017 13:30:58 +0100
Subject: [PATCH 1/3] OPEN-57: Added openinghours widget.

---
 components/21-atoms/openinghours/README.md    |  1 +
 .../openinghours/openinghours--month.twig     |  1 +
 .../openinghours/openinghours--week.twig      |  1 +
 .../openinghours/openinghours.binding.js      | 12 ++++
 .../openinghours/openinghours.config.json     | 22 ++++++
 .../21-atoms/openinghours/openinghours.js     | 72 +++++++++++++++++++
 .../21-atoms/openinghours/openinghours.twig   |  1 +
 components/41-organisms/header/header.twig    | 20 +++---
 components/_preview.twig                      |  3 +
 gulpfile.js                                   |  5 ++
 10 files changed, 129 insertions(+), 9 deletions(-)
 create mode 100644 components/21-atoms/openinghours/README.md
 create mode 100644 components/21-atoms/openinghours/openinghours--month.twig
 create mode 100644 components/21-atoms/openinghours/openinghours--week.twig
 create mode 100644 components/21-atoms/openinghours/openinghours.binding.js
 create mode 100644 components/21-atoms/openinghours/openinghours.config.json
 create mode 100644 components/21-atoms/openinghours/openinghours.js
 create mode 100644 components/21-atoms/openinghours/openinghours.twig

diff --git a/components/21-atoms/openinghours/README.md b/components/21-atoms/openinghours/README.md
new file mode 100644
index 0000000..cb62055
--- /dev/null
+++ b/components/21-atoms/openinghours/README.md
@@ -0,0 +1 @@
+Currently in Alpha since Openinghours isn't in production yet.
\ No newline at end of file
diff --git a/components/21-atoms/openinghours/openinghours--month.twig b/components/21-atoms/openinghours/openinghours--month.twig
new file mode 100644
index 0000000..e26c505
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours--month.twig
@@ -0,0 +1 @@
+<div class="openinghours" data-date="Mon Jan 01 2018 00:00:00 GMT+0100 (CET)" data-service="1" data-channel="12" data-type="month"></div>
\ No newline at end of file
diff --git a/components/21-atoms/openinghours/openinghours--week.twig b/components/21-atoms/openinghours/openinghours--week.twig
new file mode 100644
index 0000000..d951b12
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours--week.twig
@@ -0,0 +1 @@
+<div class="openinghours" data-service="1" data-channel="12" data-type="week"></div>
\ No newline at end of file
diff --git a/components/21-atoms/openinghours/openinghours.binding.js b/components/21-atoms/openinghours/openinghours.binding.js
new file mode 100644
index 0000000..7728f30
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours.binding.js
@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Javascript binding of header.functions.js.
+ */
+(function ($) {
+  'use strict';
+
+  $(window).on('load', function (e) {
+    $('.openinghours').openingHours();
+  });
+
+})(jQuery);
diff --git a/components/21-atoms/openinghours/openinghours.config.json b/components/21-atoms/openinghours/openinghours.config.json
new file mode 100644
index 0000000..20cc842
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours.config.json
@@ -0,0 +1,22 @@
+{
+  "title": "Openinghours",
+  "name": "openinghours",
+  "status": "alpha",
+  "preview": "@preview",
+  "handle": "openinghours",
+  "default": "open-now",
+  "variants": [
+    {
+      "name": "open-now",
+      "title": "Open now"
+    },
+    {
+      "name": "week",
+      "title": "Open now"
+    },
+    {
+      "name": "month",
+      "title": "Open now"
+    }
+  ]
+}
diff --git a/components/21-atoms/openinghours/openinghours.js b/components/21-atoms/openinghours/openinghours.js
new file mode 100644
index 0000000..4a43b36
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours.js
@@ -0,0 +1,72 @@
+/**
+ * @file
+ * Implements Ghent's opening hours widgets.
+ *
+ * @author
+ * Jeroen Goossens
+ *
+ */
+(function ($) {
+  'use strict';
+
+  $.fn.openingHours = function (options) {
+    function _getDate(date) {
+      return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
+    }
+
+    var now = new Date();
+    var defaults = {
+      endpoint: '//openingsuren.stad.gent'
+    };
+    options = $.extend(defaults, options);
+
+    $(this).each(function (i) {
+      function _getOpeningHours(element) {
+        if (typeof element.data('service') !== 'number' || typeof element.data('channel') !== 'number') {
+          element.html('Error: Please provide a service and channel.');
+          return null;
+        }
+
+        if (typeof element.data('date') === 'string' && element.data('type') === 'open-now') {
+          element.html('Error: Date is not supported in the "open now" widget.');
+          return null;
+        }
+
+        var date;
+        if (typeof element.data('date') !== 'string') {
+          date = new Date();
+        }
+        else {
+          date = new Date(element.data('date'));
+        }
+        date = _getDate(date);
+
+        switch (element.data('type')) {
+          case 'open-now':
+            _request(options.endpoint + '/api/v1/services/' + element.data('service') + '/channels/' + element.data('channel') + '/open-now');
+            break;
+          case 'month':
+            _request(options.endpoint + '/api/v1/services/' + element.data('service') + '/channels/' + element.data('channel') + '/openinghours/month?date=' + date);
+            break;
+          default:
+            var until = new Date();
+            until.setDate(now.getDate() + 6);
+            _request(options.endpoint + '/api/v1/services/' + element.data('service') + '/channels/' + element.data('channel') + '/openinghours?from=' + date + '&until=' + _getDate(until));
+            break;
+        }
+      }
+      function _request(request) {
+        $.ajax({
+          url: request,
+          dataType: 'html',
+          success: function (html) {
+            element.html(html);
+          }
+        });
+      }
+
+      var element = $(this);
+      _getOpeningHours(element);
+    });
+  };
+}(jQuery));
diff --git a/components/21-atoms/openinghours/openinghours.twig b/components/21-atoms/openinghours/openinghours.twig
new file mode 100644
index 0000000..98e9ea5
--- /dev/null
+++ b/components/21-atoms/openinghours/openinghours.twig
@@ -0,0 +1 @@
+<div class="openinghours" data-service="1" data-channel="12" data-type="open-now"></div>
\ No newline at end of file
diff --git a/components/41-organisms/header/header.twig b/components/41-organisms/header/header.twig
index e2a5ee9..eafaa6f 100644
--- a/components/41-organisms/header/header.twig
+++ b/components/41-organisms/header/header.twig
@@ -1,14 +1,16 @@
 <header class="header section--wrapper">
   <div class="content-container">
-
-    {% include '@hamburger-menu' with {
-      "items": [
-        "<a href='javascript:void(0);'>Menu item 1</a>",
-        "<a href='javascript:void(0);' class='active'>Menu item 2</a>",
-        "<a href='javascript:void(0);'>Menu item 3</a>",
-        "<a href='javascript:void(0);'>Menu item 4</a>"
-      ]
-    } %}
+    <nav class="visible-mobile header-component">
+      <button class="hamburger-toggle">{{ 'Menu' }}</button>
+      {% include '@hamburger-menu' with {
+        "items": [
+          "<a href='javascript:void(0);'>Menu item 1</a>",
+          "<a href='javascript:void(0);' class='active'>Menu item 2</a>",
+          "<a href='javascript:void(0);'>Menu item 3</a>",
+          "<a href='javascript:void(0);'>Menu item 4</a>"
+        ]
+      } %}
+    </nav>
 
     <div id="logo" class="header-component">
       {% include '@logo' %}
diff --git a/components/_preview.twig b/components/_preview.twig
index 198261a..5cbdbca 100644
--- a/components/_preview.twig
+++ b/components/_preview.twig
@@ -30,7 +30,10 @@
 
     <script type="text/javascript" src="{{ '/styleguide/vendor/lightgallery/dist/js/lightgallery.min.js'|path }}"></script>
     <script type="text/javascript" src="{{ '/styleguide/vendor/chosen-js/chosen.jquery.min.js'|path }}"></script>
+
     <script type="text/javascript" src="{{ '/styleguide/js/base.js'|path }}"></script>
+    <script type="text/javascript" src="{{ '/styleguide/js/openinghours.js'|path }}"></script>
+    <script type="text/javascript" src="{{ '/styleguide/js/openinghours.binding.js'|path }}"></script>
     <script type="text/javascript" src="{{ '/styleguide/js/hamburger-menu.functions.js'|path }}"></script>
     <script type="text/javascript" src="{{ '/styleguide/js/hamburger-menu.binding.js'|path }}"></script>
     <script type="text/javascript" src="{{ '/styleguide/js/breadcrumbs.functions.js'|path }}"></script>
diff --git a/gulpfile.js b/gulpfile.js
index d45f7f4..a5869e8 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -34,6 +34,11 @@ fractal.components.set('statuses', {
     description: "Deprecated.",
     color: "#dd5e01"
   },
+  alpha: {
+    label: "alpha",
+    description: "Alpha software can be unstable and could cause crashes or data loss.",
+    color: "#551A8B"
+  },
   beta: {
     label: "beta",
     description: "Work in progress. Implement with caution.",

From c29f2350409390843a6a0f3c8e5edb4c72aa519d Mon Sep 17 00:00:00 2001
From: Jeroen Goossens <jeroen@pau.be>
Date: Wed, 29 Nov 2017 15:32:06 +0100
Subject: [PATCH 2/3] OPEN-57: Refactored opening hours js lib.

---
 .../openinghours/openinghours.binding.js      |  12 --
 .../21-atoms/openinghours/openinghours.js     | 156 ++++++++++--------
 components/_preview.twig                      |   3 +-
 3 files changed, 92 insertions(+), 79 deletions(-)
 delete mode 100644 components/21-atoms/openinghours/openinghours.binding.js

diff --git a/components/21-atoms/openinghours/openinghours.binding.js b/components/21-atoms/openinghours/openinghours.binding.js
deleted file mode 100644
index 7728f30..0000000
--- a/components/21-atoms/openinghours/openinghours.binding.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @file
- * Javascript binding of header.functions.js.
- */
-(function ($) {
-  'use strict';
-
-  $(window).on('load', function (e) {
-    $('.openinghours').openingHours();
-  });
-
-})(jQuery);
diff --git a/components/21-atoms/openinghours/openinghours.js b/components/21-atoms/openinghours/openinghours.js
index 4a43b36..254dbe8 100644
--- a/components/21-atoms/openinghours/openinghours.js
+++ b/components/21-atoms/openinghours/openinghours.js
@@ -1,72 +1,98 @@
-/**
- * @file
- * Implements Ghent's opening hours widgets.
- *
- * @author
- * Jeroen Goossens
- *
- */
-(function ($) {
+window.openingHours = (function () {
   'use strict';
 
-  $.fn.openingHours = function (options) {
-    function _getDate(date) {
-      return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
+  var defaults = {
+    endpoint: 'https://openingsuren.gentgrp.gent.be'
+  };
+
+  function OpeningHours(items, options) {
+    this.s = Object.assign({}, defaults, options);
+    this.items = items;
+
+    for (var i = 0; i < items.length; i++) {
+      this._current = items[i];
+      this.init(items[i]);
     }
 
-    var now = new Date();
-    var defaults = {
-      endpoint: '//openingsuren.stad.gent'
-    };
-    options = $.extend(defaults, options);
-
-    $(this).each(function (i) {
-      function _getOpeningHours(element) {
-        if (typeof element.data('service') !== 'number' || typeof element.data('channel') !== 'number') {
-          element.html('Error: Please provide a service and channel.');
-          return null;
-        }
-
-        if (typeof element.data('date') === 'string' && element.data('type') === 'open-now') {
-          element.html('Error: Date is not supported in the "open now" widget.');
-          return null;
-        }
-
-        var date;
-        if (typeof element.data('date') !== 'string') {
-          date = new Date();
-        }
-        else {
-          date = new Date(element.data('date'));
-        }
-        date = _getDate(date);
-
-        switch (element.data('type')) {
-          case 'open-now':
-            _request(options.endpoint + '/api/v1/services/' + element.data('service') + '/channels/' + element.data('channel') + '/open-now');
-            break;
-          case 'month':
-            _request(options.endpoint + '/api/v1/services/' + element.data('service') + '/channels/' + element.data('channel') + '/openinghours/month?date=' + date);
-            break;
-          default:
-            var until = new Date();
-            until.setDate(now.getDate() + 6);
-            _request(options.endpoint + '/api/v1/services/' + element.data('service') + '/channels/' + element.data('channel') + '/openinghours?from=' + date + '&until=' + _getDate(until));
-            break;
-        }
-      }
-      function _request(request) {
-        $.ajax({
-          url: request,
-          dataType: 'html',
-          success: function (html) {
-            element.html(html);
-          }
-        });
+    return this;
+  }
+
+  OpeningHours.prototype.init = function () {
+    if (isNaN(this._current.dataset.service) || isNaN(this._current.dataset.channel)) {
+      this._current.innerHTML = 'Error: Please provide a service and channel.';
+      return false;
+    }
+
+    if (typeof this._current.dataset.date === 'string' && this._current.dataset.type === 'open-now') {
+      this._current.innerHTML = 'Error: Date is not supported in the "open now" widget.';
+      return false;
+    }
+
+    if (typeof this._current.dataset.date === 'undefined') {
+      this._current.dataset.date = new Date().toUTCString();
+    }
+
+    var url = this.constructRequest();
+    this.request(url, this.print);
+  };
+
+  OpeningHours.prototype.formattedDate = function (d) {
+    var date;
+    if (!d) {
+      date = new Date();
+    }
+    else {
+      date = new Date(d);
+    }
+
+    return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
+  };
+
+  OpeningHours.prototype.constructRequest = function () {
+    switch (this._current.dataset.type) {
+      case 'open-now':
+        return this.s.endpoint + '/api/v1/services/' + this._current.dataset.service + '/channels/' + this._current.dataset.channel + '/open-now';
+      case 'month':
+        return this.s.endpoint + '/api/v1/services/' + this._current.dataset.service + '/channels/' + this._current.dataset.channel + '/openinghours/month?date=' + this.formattedDate(this._current.dataset.date);
+      default:
+        var until = new Date(this._current.dataset.date);
+        until.setDate(until.getDate() + 6);
+        return this.s.endpoint + '/api/v1/services/' + this._current.dataset.service + '/channels/' + this._current.dataset.channel + '/openinghours?from=' + this.formattedDate(this._current.dataset.date) + '&until=' + this.formattedDate(until);
+    }
+  };
+
+  OpeningHours.prototype.request = function (url, callback) {
+    var xmlhttp;
+    xmlhttp = new XMLHttpRequest();
+    xmlhttp.element = this._current;
+    xmlhttp.onreadystatechange = function () {
+      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
+        callback(xmlhttp.element, xmlhttp.responseText);
       }
+    };
+    xmlhttp.open('GET', url, true);
+    xmlhttp.setRequestHeader('Accept', 'text/html');
+    xmlhttp.send();
+  };
 
-      var element = $(this);
-      _getOpeningHours(element);
-    });
+  OpeningHours.prototype.print = function (element, data) {
+    element.innerHTML = data;
   };
-}(jQuery));
+
+  var openinghours = {
+    load: function (options) {
+      var items = document.querySelectorAll('.openinghours');
+      new OpeningHours(items, options);
+    }
+  };
+
+  return openinghours;
+}());
+
+document.onreadystatechange = function () {
+  'use strict';
+
+  if (document.readyState === 'interactive') {
+    window.openingHours.load();
+  }
+};
diff --git a/components/_preview.twig b/components/_preview.twig
index b5524e6..a3130a9 100644
--- a/components/_preview.twig
+++ b/components/_preview.twig
@@ -45,8 +45,7 @@
     <script type="text/javascript" src="{{ '/styleguide/js/input-multiselect-chosen.functions-min.js'|path }}"></script>
     <script type="text/javascript" src="{{ '/styleguide/js/input-date.binding-min.js'|path }}"></script>
     <script type="text/javascript" src="{{ '/styleguide/js/input-date.functions-min.js'|path }}"></script>
-    <script type="text/javascript" src="{{ '/styleguide/js/openinghours.js'|path }}"></script>
-    <script type="text/javascript" src="{{ '/styleguide/js/openinghours.binding.js'|path }}"></script>
+    <script type="text/javascript" src="{{ '/styleguide/js/openinghours-min.js'|path }}"></script>
 
     <meta name="MobileOptimized" content="320">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

From e391c25d823f8630a2267335ab580a7246fb05a3 Mon Sep 17 00:00:00 2001
From: Jeroen Goossens <jeroen@pau.be>
Date: Wed, 29 Nov 2017 16:25:01 +0100
Subject: [PATCH 3/3] OPEN-57: Removed preview since this value is default.

---
 components/21-atoms/openinghours/openinghours.config.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/21-atoms/openinghours/openinghours.config.json b/components/21-atoms/openinghours/openinghours.config.json
index 20cc842..326bea3 100644
--- a/components/21-atoms/openinghours/openinghours.config.json
+++ b/components/21-atoms/openinghours/openinghours.config.json
@@ -2,7 +2,6 @@
   "title": "Openinghours",
   "name": "openinghours",
   "status": "alpha",
-  "preview": "@preview",
   "handle": "openinghours",
   "default": "open-now",
   "variants": [