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 4 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>
22 changes: 22 additions & 0 deletions components/21-atoms/openinghours/openinghours.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"title": "Openinghours",
"name": "openinghours",
"status": "alpha",
"preview": "@preview",
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think this is necessary if you use the default preview.

"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