Added clientside logging and integrated datepicker
diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
index e92b324..d7dc0d2 100644
--- a/dev/demo/vcdemo.js
+++ b/dev/demo/vcdemo.js
@@ -83,6 +83,7 @@
['pubDate', 'date'],
['author', 'string']
]).fromJson(json);
+
document.getElementById('vc').appendChild(vc.element());
// show the current JSON serialization
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
index 01bb0d7..90b0572 100644
--- a/dev/js/src/datepicker.js
+++ b/dev/js/src/datepicker.js
@@ -31,7 +31,14 @@
set : function (year, month, day) {
this.select(year, month, day);
- console.dir(this._selected);
+ if (this._click !== undefined)
+ this._click(this._selected);
+ else
+ console.dir(this._selected);
+ },
+
+ onclick : function (cb) {
+ this._click = cb;
},
select : function (year, month, day) {
@@ -48,14 +55,18 @@
},
show : function (year, month) {
- var picker = d.createElement('div');
- picker.classList.add('datepicker');
- this._showYear = year;
- this._showMonth = month;
- picker.appendChild(this._monthHelper());
- picker.appendChild(this._yearHelper());
- picker.appendChild(this._dayHelper());
- return picker;
+ this._element = d.createElement('div');
+ this._element.classList.add('datepicker');
+ this._showYear = year ? year : (this._selected['year'] ? this._selected['year'] : 2012);
+ this._showMonth = month ? month : (this._selected['month'] ? this._selected['month'] : 2);
+ this._element.appendChild(this._monthHelper());
+ this._element.appendChild(this._yearHelper());
+ this._element.appendChild(this._dayHelper());
+ return this._element;
+ },
+
+ element : function () {
+ return this._element;
},
incrYear : function () {
@@ -211,7 +222,7 @@
};
// This is the day selected
- if (s['day']) {
+ if (s && s['day']) {
if (date.getDate() === s['day'] &&
date.getMonth() === s['month']-1 &&
date.getFullYear() === s['year']) {
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index c816883..1bb3b15 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -47,8 +47,9 @@
'vc/doc',
'vc/docgroup',
'vc/menu',
+ 'datepicker',
'util'
-], function (unspecDocClass, docClass, docGroupClass, menuClass) {
+], function (unspecDocClass, docClass, docGroupClass, menuClass, dpClass) {
"use strict";
// ???
@@ -60,6 +61,7 @@
var loc = KorAP.Locale;
KorAP._vcKeyMenu = undefined;
+ KorAP._vcDatePicker = dpClass.create();
/**
* Virtual Collection
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 5571cf7..2635b2f 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -418,8 +418,49 @@
// Click on the match operator, show me the menu
_changeValue : function (e) {
// TODO: Just kidding - this is temporary!
- this.value(window.prompt('Enter new value'));
- this.update();
+
+ if (this.type() === 'date') {
+ var dp = KorAP._vcDatePicker;
+
+ var v = this.value();
+ if (v !== undefined) {
+ var d = v.split('-');
+ dp.select(parseInt(d[0]), parseInt(d[1]), parseInt(d[2]));
+ };
+
+ var that = this;
+ dp.onclick(function (selected) {
+
+ // There are values selected
+ if (selected['year']) {
+ var v = selected['year'];
+ if (selected['month']) {
+ v += '-';
+ v += selected['month'] < 10 ? '0' + selected['month'] : selected['month'];
+ if (selected['day'])
+ v += '-';
+ v += selected['day'] < 10 ? '0' + selected['day'] : selected['day'];
+ };
+ that.value(v);
+ that.update();
+ return;
+ };
+
+ // Remove datepicker
+ that._element.removeChild(
+ dp.element()
+ );
+ });
+
+ this._element.insertBefore(
+ dp.show(),
+ this._valueE
+ );
+ }
+ else {
+ this.value(window.prompt('Enter new value'));
+ this.update();
+ };
},
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index b653ef1..8a3fbcd 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -5,6 +5,8 @@
div.datepicker {
display: inline-block;
+ position: absolute;
+ font-size: 80%;
padding: 4pt;
box-shadow: $choose-box-shadow;
border: {