Skip to content
This repository has been archived by the owner on Aug 13, 2019. It is now read-only.

Feature/open 57: Openingsuren component (STIJ-238) #164

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/21-atoms/openinghours/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Currently in Alpha since Openinghours isn't in production yet.
1 change: 1 addition & 0 deletions components/21-atoms/openinghours/openinghours--month.twig
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions components/21-atoms/openinghours/openinghours--week.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div class="openinghours" data-service="1" data-channel="12" data-type="week"></div>
21 changes: 21 additions & 0 deletions components/21-atoms/openinghours/openinghours.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"title": "Openinghours",
"name": "openinghours",
"status": "alpha",
"handle": "openinghours",
"default": "open-now",
"variants": [
{
"name": "open-now",
"title": "Open now"
},
{
"name": "week",
"title": "Open now"
},
{
"name": "month",
"title": "Open now"
}
]
}
98 changes: 98 additions & 0 deletions components/21-atoms/openinghours/openinghours.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
window.openingHours = (function () {
'use strict';

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++) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

try for(var i = items.length; i--;)

This will only calculate the length of your array once, plus comparing to zero is faster.
Only really matters for very big arrays, but it's a nice habit ;)

https://stackoverflow.com/questions/1340589/are-loops-really-faster-in-reverse

this._current = items[i];
this.init(items[i]);
}

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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd put these strings in a function variable, so it's easy to change version numbers etc.

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

OpeningHours.prototype.print = function (element, data) {
element.innerHTML = data;
};

var openinghours = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

variable is redundant

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();
}
};
1 change: 1 addition & 0 deletions components/21-atoms/openinghours/openinghours.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div class="openinghours" data-service="1" data-channel="12" data-type="open-now"></div>
81 changes: 41 additions & 40 deletions components/_preview.twig
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,53 @@

<html lang="en">
<head>
<meta charset="utf-8">
<title>{% block title %}Preview Layout{% endblock %}</title>
<meta charset="utf-8">
<title>{% block title %}Preview Layout{% endblock %}</title>

<link media="all" rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link media="all" rel="stylesheet" href="{{ '/styleguide/vendor/chosen-js/chosen.min.css'| path }}">
<link media="all" rel="stylesheet" href="{{ '/styleguide/vendor/lightgallery/dist/css/lightgallery.min.css'| path }}">
<link media="all" rel="stylesheet" href="{{ '/css/main.css' | path }}">
<link media="all" rel="stylesheet" href="{{ '/css/styleguide.css'| path }}">
<link media="all" rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link media="all" rel="stylesheet" href="{{ '/styleguide/vendor/chosen-js/chosen.min.css'| path }}">
<link media="all" rel="stylesheet" href="{{ '/styleguide/vendor/lightgallery/dist/css/lightgallery.min.css'| path }}">
<link media="all" rel="stylesheet" href="{{ '/css/main.css' | path }}">
<link media="all" rel="stylesheet" href="{{ '/css/styleguide.css'| path }}">

<script>
(function(d) {
var config = {
kitId: 'kgt4wbp',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
<script>
(function(d) {
var config = {
kitId: 'kgt4wbp',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>

<!-- Load jQuery -->
<script type="text/javascript" src="{{ '/styleguide/vendor/jquery/dist/jquery.min.js'|path }}"></script>
<!-- Load jQuery -->
<script type="text/javascript" src="{{ '/styleguide/vendor/jquery/dist/jquery.min.js'|path }}"></script>

<!-- Load jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<!-- Load jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<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-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/hamburger-menu.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/hamburger-menu.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/breadcrumbs.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/breadcrumbs.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/header.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/header.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/button-drop.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/button-drop.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/gallery.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/gallery.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/input-multiselect-chosen.binding-min.js'|path }}"></script>
<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/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-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/hamburger-menu.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/hamburger-menu.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/breadcrumbs.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/breadcrumbs.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/header.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/header.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/button-drop.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/button-drop.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/gallery.functions-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/gallery.binding-min.js'|path }}"></script>
<script type="text/javascript" src="{{ '/styleguide/js/input-multiselect-chosen.binding-min.js'|path }}"></script>
<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-min.js'|path }}"></script>

<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container ">
Expand Down
5 changes: 5 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,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.",
Expand Down