alchemymvc 1.4.0-alpha.10 → 1.4.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/app/element/al_time.js +126 -0
- package/package.json +1 -1
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
const DATETIME = Symbol('datetime');
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The custom al-time element
|
|
5
|
+
*
|
|
6
|
+
* @author Jelle De Loecker <jelle@elevenways.be>
|
|
7
|
+
* @since 1.4.0
|
|
8
|
+
* @version 1.4.0
|
|
9
|
+
*/
|
|
10
|
+
const AlTime = Function.inherits('Alchemy.Element', 'AlTime');
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* The preferred format
|
|
14
|
+
*
|
|
15
|
+
* @author Jelle De Loecker <jelle@elevenways.be>
|
|
16
|
+
* @since 0.3.0
|
|
17
|
+
* @version 0.3.0
|
|
18
|
+
*/
|
|
19
|
+
AlTime.setAttribute('format', null, function setFormat(format) {
|
|
20
|
+
this._populate({value: this.datetime, format: format});
|
|
21
|
+
return format;
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Get/set the datetime value
|
|
26
|
+
*
|
|
27
|
+
* @author Jelle De Loecker <jelle@elevenways.be>
|
|
28
|
+
* @since 0.3.0
|
|
29
|
+
* @version 0.3.0
|
|
30
|
+
*/
|
|
31
|
+
AlTime.setAttribute('datetime', null, function setDatetime(value) {
|
|
32
|
+
this._populate({value: value});
|
|
33
|
+
return this[DATETIME];
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Set the value with a function call
|
|
38
|
+
*
|
|
39
|
+
* @author Jelle De Loecker <jelle@elevenways.be>
|
|
40
|
+
* @since 0.3.0
|
|
41
|
+
* @version 0.3.0
|
|
42
|
+
*/
|
|
43
|
+
AlTime.setMethod(function setDatetime(value) {
|
|
44
|
+
this.datetime = value;
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Populate the element
|
|
49
|
+
*
|
|
50
|
+
* @author Jelle De Loecker <jelle@elevenways.be>
|
|
51
|
+
* @since 0.3.0
|
|
52
|
+
* @version 0.3.0
|
|
53
|
+
*
|
|
54
|
+
* @return {Object[]}
|
|
55
|
+
*/
|
|
56
|
+
AlTime.setMethod(function populate() {
|
|
57
|
+
let iso_string = this._populate({value: this.value, format: this.format});
|
|
58
|
+
this[DATETIME] = iso_string;
|
|
59
|
+
return iso_string;
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Populate the element
|
|
64
|
+
*
|
|
65
|
+
* @author Jelle De Loecker <jelle@elevenways.be>
|
|
66
|
+
* @since 0.3.0
|
|
67
|
+
* @version 0.3.0
|
|
68
|
+
*/
|
|
69
|
+
AlTime.setMethod(function _populate(input) {
|
|
70
|
+
|
|
71
|
+
if (!input) {
|
|
72
|
+
input = {};
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
let {value, format} = input;
|
|
76
|
+
|
|
77
|
+
if (value == null) {
|
|
78
|
+
value = this[DATETIME];
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if (format == null) {
|
|
82
|
+
format = this.format;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
let iso_date,
|
|
86
|
+
date;
|
|
87
|
+
|
|
88
|
+
if (value) {
|
|
89
|
+
date = Date.create(value);
|
|
90
|
+
iso_date = date.toISOString();
|
|
91
|
+
} else {
|
|
92
|
+
iso_date = '';
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
value = iso_date;
|
|
96
|
+
|
|
97
|
+
if (Blast.isServer) {
|
|
98
|
+
return value;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
let target_element = this.children?.[0];
|
|
102
|
+
|
|
103
|
+
if (!target_element) {
|
|
104
|
+
target_element = this.createElement('time');
|
|
105
|
+
this.append(target_element);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
let tag_name = target_element.tagName;
|
|
109
|
+
let formatted;
|
|
110
|
+
|
|
111
|
+
if (format) {
|
|
112
|
+
formatted = date.format(format);
|
|
113
|
+
} else {
|
|
114
|
+
formatted = date + '';
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
if (tag_name == 'INPUT') {
|
|
118
|
+
target_element.value = formatted;
|
|
119
|
+
} else {
|
|
120
|
+
if (tag_name == 'TIME') {
|
|
121
|
+
target_element.setAttribute('datetime', iso_date);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
target_element.textContent = formatted;
|
|
125
|
+
}
|
|
126
|
+
});
|