Add string function to date picker
diff --git a/Changes b/Changes
index 3560880..eb4d59c 100755
--- a/Changes
+++ b/Changes
@@ -1,3 +1,6 @@
+0.19 2016-04-20
+ - Improved datepicker to enter date strings.
+
0.18 2016-02-29
- Support for dashes in identifiers.
- Minor changes to the layout.
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
index 84243a9..0fd47dd 100644
--- a/dev/js/src/datepicker.js
+++ b/dev/js/src/datepicker.js
@@ -99,9 +99,6 @@
*/
show : function (year, month) {
- // Create text view
- this.showText();
-
var e = this._element = d.createElement('div');
e.setAttribute('tabindex', 0);
e.style.outline = 0;
@@ -123,64 +120,40 @@
this._element.appendChild(this._monthHelper());
this._element.appendChild(this._yearHelper());
this._element.appendChild(this._dayHelper());
- this._element.appendChild(this._closer());
+ this._element.appendChild(this._stringHelper());
return this._element;
},
- showText : function () {
+ _stringHelper : function () {
// Create element
- this._elementText = document.createElement('div');
- var et = this._elementText;
- et.setAttribute('tabindex', 0);
- et.style.outline = 0;
- et.classList.add('value');
-
// Add input field
- this._input = et.appendChild(
- document.createElement('input')
- );
- this._input.value = this.toString();
+ var input = document.createElement('input');
+ input.value = this.toString();
+ input.setAttribute('tabindex', 0);
- // Add toggle button
- var datepicker = et.appendChild(
- document.createElement('div')
- );
-
- datepicker.onclick =
- this.viewCalendar.bind(this);
-
- datepicker.appendChild(
- document.createTextNode('x')
- );
-
- // Check for enter
- this._input.addEventListener(
- 'keypress',
+ input.addEventListener(
+ 'keyup',
function (e) {
if (e.keyCode == 13) {
- this.fromString(this._input.value);
- this.store();
+ if (this.fromString(input.value))
+ this.store();
+
e.halt();
return false;
+ }
+ else {
+ if (this.fromString(input.value)) {
+ this._updateYear();
+ this._updateMonth();
+ this._updateDay();
+ };
};
}.bind(this)
);
- /*
- var that = this;
- et.addEventListener(
- 'blur',
- function (e) {
- that.fromString(input.value);
-
- // Better: Hide!
- this.parentNode.removeChild(this);
- e.halt();
- }
- );
- */
+ return input;
},
/**
@@ -190,35 +163,6 @@
return this._element;
},
- elementText : function () {
- return this._elementText;
- },
-
- viewText : function () {
-
- // Replace calendar view with text view
- this._element.parentNode.replaceChild(
- this._elementText,
- this._element
- );
- },
-
- viewCalendar : function () {
- // Update calendar
- this.fromString(this._input.value);
-
- this._updateYear();
- this._updateMonth();
- this._updateDay();
-
- // Replace calendar view with text view
- this._elementText.parentNode.replaceChild(
- this._element,
- this._elementText
- );
- },
-
-
/**
* Get the current date in string format.
*/
@@ -383,6 +327,9 @@
// Update the month helper view.
_updateMonth : function () {
+ if (this._showMonth === undefined || this._showMonth > 12)
+ this._showMonth = 1;
+
this._mElement.firstChild.data = loc.MONTH[this._showMonth-1];
this._selectMonth();
},
@@ -416,15 +363,6 @@
return table;
},
- // Create the day (calendar) helper element.
- _closer : function () {
- var closer = d.createElement('span');
- closer.classList.add('closer');
- closer.appendChild(d.createTextNode('x'));
- closer.onclick = this.viewText.bind(this);
- return closer;
- },
-
_dayBody : function () {
var showDate = new Date(
this._showYear,
@@ -522,16 +460,20 @@
},
fromString : function (v) {
- if (v !== undefined) {
+ if (v === undefined)
+ return false;
- var d = v.split('-', 3);
- d[0] = parseInt(d[0]);
- if (d[1]) d[1] = parseInt(d[1]);
- if (d[2]) d[2] = parseInt(d[2]);
+ if (!KorAP._validDateRE.test(v))
+ return false;
- // Select values
- this.select(d[0], d[1], d[2]);
- };
+ var d = v.split('-', 3);
+ d[0] = parseInt(d[0]);
+ if (d[1]) d[1] = parseInt(d[1]);
+ if (d[2]) d[2] = parseInt(d[2]);
+
+ // Select values
+ this.select(d[0], d[1], d[2]);
+ return true;
}
};
});
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 72bdeee..f22f3b4 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -451,10 +451,15 @@
);
dpElem.focus();
+ /*
dpElem.addEventListener('blur', function (e) {
+ e.halt();
+
// Remove datepicker
+ // TODO: If focus is not set to string input
that._element.removeChild(this);
});
+ */
}
else {
var regex = this.type() === 'regex' ? true : false;
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index 79640b6..5386d3c 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -79,6 +79,17 @@
border-spacing: 1px;
}
+ input {
+ @include standard-text-padding;
+ border: {
+ style: solid;
+ width: 1px;
+ }
+ @include choose-item;
+ background-color: $nearly-white;
+ width: 100%;
+ }
+
td {
@include standard-text-padding;
text-align: center;
diff --git a/lib/Kalamar.pm b/lib/Kalamar.pm
index 27c1814..d6e0cb7 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -4,7 +4,7 @@
use Mojo::JSON 'decode_json';
# Minor version - may be patched from package.json
-our $VERSION = '0.17';
+our $VERSION = '0.19';
# TODO: The FAQ-Page has a contact form for new questions
# TODO: Embed query serialization
diff --git a/package.json b/package.json
index 471bdac..885590b 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "Kalamar",
"description": "Mojolicious-based Frontend for KorAP",
- "version": "0.18.0",
+ "version": "0.19.0",
"repository" : {
"type": "git",
"url": "https://github.com/KorAP/Kalamar.git"