Introduced simple datepicker
diff --git a/dev/demo/datepicker.html b/dev/demo/datepicker.html
new file mode 100644
index 0000000..e99f021
--- /dev/null
+++ b/dev/demo/datepicker.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Datepicker demo</title>
+ <meta charset="utf-8" />
+ <script data-main="datepickerdemo.js" src="../js/lib/require.js" async="async"></script>
+ <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+ </head>
+ <body>
+ <div id="dp"></div>
+ </body>
+</html>
diff --git a/dev/demo/datepickerdemo.js b/dev/demo/datepickerdemo.js
new file mode 100644
index 0000000..ce0913e
--- /dev/null
+++ b/dev/demo/datepickerdemo.js
@@ -0,0 +1,15 @@
+requirejs.config({
+ baseUrl: '../js/src',
+ paths : {
+ 'lib': '../lib'
+ }
+});
+
+require(['datepicker', 'lib/domReady'], function (dpClass, domReady) {
+ domReady(function () {
+ var dp = dpClass.create();
+ document.getElementById('dp').appendChild(
+ dp.select(2015,4,12).show(2015,4)
+ );
+ });
+});
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
new file mode 100644
index 0000000..1a1d9fe
--- /dev/null
+++ b/dev/js/src/datepicker.js
@@ -0,0 +1,222 @@
+/**
+ * Date picker for the
+ * Virtual Collection builder.
+ */
+define(['util'], function () {
+ "use strict";
+
+ var loc = KorAP.Locale;
+
+ loc.WDAY = loc.WDAY || [
+ 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'
+ ];
+
+ loc.MONTH = loc.MONTH || [
+ 'January', 'February', 'March', 'April',
+ 'May', 'June', 'July', 'August',
+ 'September', 'October', 'November',
+ 'December'
+ ];
+
+ var d = document;
+
+ return {
+ create : function () {
+ return Object.create(this)._init();
+ },
+
+ _init : function () {
+ return this;
+ },
+
+ select : function (year, month, day) {
+ if (arguments.length >= 1) {
+ this._selected = {'year' : year};
+ if (arguments.length >= 2) {
+ this._selected['month'] = month;
+ if (arguments.length >= 3)
+ this._selected['day'] = day;
+ };
+ return this;
+ };
+ return this._selected;
+ },
+
+ show : function (year, month) {
+ var picker = d.createElement('div');
+ picker.classList.add('datepicker');
+ this._showYear = year;
+ this._showMonth = month;
+ picker.appendChild(this._yearHelper());
+ picker.appendChild(this._monthHelper());
+ picker.appendChild(this._dayHelper());
+ return picker;
+ },
+
+ incrYear : function () {
+ this._showYear++;
+ this._updateYear();
+ this._updateMonth();
+ this._updateDay();
+ return;
+ },
+
+ decrYear : function () {
+ this._showYear--;
+ this._updateYear();
+ this._updateMonth();
+ this._updateDay();
+ return;
+ },
+
+ incrMonth : function () {
+ this._showMonth++;
+ if (this._showMonth > 12) {
+ this._showMonth = 1;
+ this.incrYear();
+ }
+ else {
+ this._updateMonth();
+ this._updateDay();
+ };
+ },
+
+ decrMonth : function () {
+ this._showMonth--;
+ if (this._showMonth < 1) {
+ this._showMonth = 12;
+ this.decrYear();
+ }
+ else {
+ this._updateMonth();
+ this._updateDay();
+ };
+ },
+
+ _yearHelper : function () {
+ var year = d.createElement('div');
+ year.classList.add('year');
+
+ // Decrement year
+ year.appendChild(d.createElement('span'))
+ .onclick = this.decrYear.bind(this);
+
+ this._yElement = year.appendChild(d.createElement('span'));
+ this._yElement.appendChild(document.createTextNode(this._showYear));
+
+ // Increment year
+ year.appendChild(d.createElement('span'))
+ .onclick = this.incrYear.bind(this);
+
+ return year;
+ },
+
+ _updateYear : function () {
+ this._yElement.firstChild.data = this._showYear;
+ },
+
+ _monthHelper : function () {
+ var month = d.createElement('div');
+ month.classList.add('month');
+
+ // Decrement month
+ month.appendChild(d.createElement('span'))
+ .onclick = this.decrMonth.bind(this);
+
+ this._mElement = month.appendChild(d.createElement('span'));
+ this._mElement.appendChild(
+ document.createTextNode(loc.MONTH[this._showMonth-1])
+ );
+
+ // Increment month
+ month.appendChild(d.createElement('span'))
+ .onclick = this.incrMonth.bind(this);
+
+ return month;
+ },
+
+ _updateMonth : function () {
+ this._mElement.firstChild.data = loc.MONTH[this._showMonth-1];
+ },
+
+ _dayHelper : function () {
+ var table = d.createElement('table');
+
+ var tr = table.appendChild(d.createElement('thead'))
+ .appendChild(d.createElement('tr'));
+ for (var i = 0; i < 7; i++) {
+ tr.appendChild(d.createElement('th'))
+ .appendChild(d.createTextNode(loc.WDAY[i]));
+ };
+
+ this._dBElement = this._dayBody();
+
+ table.appendChild(this._dBElement);
+ return table;
+ },
+
+ _dayBody : function () {
+ var showDate = new Date(this._showYear, this._showMonth - 1, 1, 0, 0, 0, 0);
+ var date = new Date(this._showYear, this._showMonth - 1, 1, 0, 0, 0, 0);
+ var today = new Date();
+
+ // Skip back to the previous monday (may be in the last month)
+ date.setDate(date.getDate() - ((date.getDay() + 6) % 7));
+
+ var tb = d.createElement('tbody');
+
+ var s = this.select();
+
+ // Iterate over all days of the table
+ while (1) {
+
+ // Loop through the week
+ var tr = tb.appendChild(d.createElement('tr'));
+ for (var i = 0; i < 7; i++) {
+ var td = tr.appendChild(d.createElement('td'));
+
+ // Not part of the current month
+ if (date.getMonth() !== showDate.getMonth())
+ td.classList.add('out');
+
+ // This is the current day
+ if (date.getDate() === today.getDate() &&
+ date.getMonth() === today.getMonth() &&
+ date.getFullYear() === today.getFullYear()) {
+ td.classList.add('today');
+ };
+
+ // This is the day selected
+ if (s['day']) {
+ if (date.getDate() === s['day'] &&
+ date.getMonth() === s['month']-1 &&
+ date.getFullYear() === s['year']) {
+ td.classList.add('selected');
+ };
+ };
+
+ // Add the current day to the table
+ td.appendChild(
+ d.createTextNode(date.getDate())
+ );
+
+ // Next day
+ date.setDate(date.getDate() + 1);
+ };
+
+ if (date.getMonth() !== showDate.getMonth())
+ break;
+ };
+ return tb;
+ },
+
+ _updateDay : function () {
+ var newBody = this._dayBody();
+ this._dBElement.parentNode.replaceChild(
+ newBody,
+ this._dBElement
+ );
+ this._dBElement = newBody;
+ }
+ };
+});
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
new file mode 100644
index 0000000..bf8f43a
--- /dev/null
+++ b/dev/scss/header/datepicker.scss
@@ -0,0 +1,73 @@
+@charset "utf-8";
+@import "../util";
+
+div.datepicker {
+ display: inline-block;
+ padding: 4pt;
+ box-shadow: $choose-box-shadow;
+ border: {
+ width: 2px;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ > div {
+ font-size: 120%;
+ width: 45%;
+ }
+ > div.year {
+ float: right;
+ }
+
+ @include choose-item;
+ > div > span {
+ display: inline-block;
+ &:first-child::before {
+ cursor: pointer;
+ font-family: 'FontAwesome';
+ content: $fa-previous;
+ width: 10%;
+ }
+ &:last-child::after {
+ cursor: pointer;
+ font-family: 'FontAwesome';
+ content: $fa-next;
+ width: 10%;
+ }
+ &:nth-child(2) {
+ display: inline-block;
+ width: 80%;
+ text-align: center;
+ }
+ }
+ table {
+ border-collapse: separate;
+ border-spacing: 1px;
+ }
+ td {
+ @include standard-text-padding;
+ text-align: center;
+ border: {
+ style: solid;
+ width: 1px;
+ }
+ &:not(.out) {
+ cursor: pointer;
+ @include choose-item;
+ background-color: $nearly-white;
+ &.today {
+ background-color: $light-blue;
+ color: $dark-blue;
+ text-shadow: none;
+ }
+ &.selected {
+ @include choose-active;
+ }
+ &:hover {
+ @include choose-hover;
+ }
+ }
+ &.out {
+ border-color: transparent;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 60a3bf4..e63283a 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -4,6 +4,7 @@
@import "menu"; // Menu list
@import "searchbar"; // The search bar
@import "vc"; // Virtual collection builder
+@import "datepicker"; // Datepicker
header {
position: relative;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 6d2172f..f0e10de 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -38,8 +38,8 @@
$darkest-blue: darken($dark-blue, 40%);
-/*
- * Grey
+/**
+ * Grey Colors
*/
$middle-grey: $ids-grey-1; // #999;
$light-grey: $ids-grey-2; // #ddd;
@@ -114,6 +114,13 @@
border-color: $darker-orange;
}
+@mixin choose-inactive {
+ color: lighten($choose-color, 20%);
+ background-color: lighten($choose-bg, 20%);
+ border-color: transparent;
+ text-shadow: none;
+}
+
@mixin choose-active {
color: $dark-green;
text-shadow: none;