|
1
|
|
|
<?php |
|
2
|
|
|
function get_primitive_field($type, $name, $data, $list, $extras) { |
|
3
|
|
|
$out = ""; |
|
4
|
|
|
$field_name = "data[$name]" . ($list ? "[]" : ""); |
|
5
|
|
|
switch ($type) { |
|
6
|
|
|
case 'color': |
|
7
|
|
|
if (!$data) { |
|
8
|
|
|
$data = 'rgba(0, 0, 0, 0)'; |
|
9
|
|
|
} |
|
10
|
|
|
$out .= "<input type='text' data-type='color' name='$field_name' value='" . htmlentities($data, ENT_QUOTES) . "' $extras/>"; |
|
11
|
|
|
break; |
|
12
|
|
|
case 'longtext': |
|
13
|
|
|
$out .= "<br><textarea name='$field_name' rows='10' cols='50' $extras>" . htmlentities($data, ENT_QUOTES) . "</textarea>"; |
|
14
|
|
|
break; |
|
15
|
|
|
case 'time': |
|
16
|
|
|
case 'date': |
|
17
|
|
|
case 'datetime': |
|
18
|
|
|
$out .= "<input type='text' data-type='$type' name='$field_name' value='" . htmlentities($data, ENT_QUOTES) . "' $extras/>"; |
|
19
|
|
|
break; |
|
20
|
|
|
case 'text': |
|
21
|
|
|
default: |
|
22
|
|
|
$out .= "<input type='text' name='$field_name' value='" . htmlentities($data, ENT_QUOTES) . "' $extras/>"; |
|
23
|
|
|
} |
|
24
|
|
|
return $out; |
|
25
|
|
|
} |
|
26
|
|
|
|
|
27
|
|
|
function get_field($name, $meta, $data) { |
|
28
|
|
|
$opt = empty($meta['optional']) ? 'required' : ''; |
|
29
|
|
|
$required_notice = empty($meta['optional']) ? '(*)' : '(optional)'; |
|
30
|
|
|
|
|
31
|
|
|
$out = "<label for='$name'>$meta[name] $required_notice: "; |
|
32
|
|
|
|
|
33
|
|
|
switch ($meta["type"]) { |
|
34
|
|
|
case "list": |
|
35
|
|
|
$item_actions = " <a onclick='removeListItem(this)' href='javascript:void(0)'><i class='fa fa-trash'></i> Remove</a>" |
|
36
|
|
|
. " <a onclick='moveUpListItem(this)' href='javascript:void(0)'><i class='fa fa-angle-up'></i> Move Up</a>" |
|
37
|
|
|
. " <a onclick='moveDownListItem(this)' href='javascript:void(0)'><i class='fa fa-angle-down'></i> Move Down</a>"; |
|
38
|
|
|
|
|
39
|
|
|
$out .= "<div class='jugaad-list' data-type='$meta[listType]'>" |
|
40
|
|
|
. "<div class='example-input' style='display:none'>" |
|
41
|
|
|
. get_primitive_field($meta["listType"], $name, "", true, "disabled") |
|
42
|
|
|
. $item_actions |
|
43
|
|
|
. "</div><input type='hidden' name='data[$name]' value='' />" |
|
44
|
|
|
. "<br><div class='input-list'>"; |
|
45
|
|
|
|
|
46
|
|
|
if (!is_array($data)) { |
|
47
|
|
|
$data = []; |
|
48
|
|
|
} |
|
49
|
|
|
foreach ($data as $list_elem) { |
|
50
|
|
|
$out .= "<div>" |
|
51
|
|
|
. get_primitive_field($meta["listType"], $name, $list_elem, true, "") |
|
52
|
|
|
. $item_actions |
|
53
|
|
|
. "</div>"; |
|
54
|
|
|
} |
|
55
|
|
|
$out .= "</div><br><a onclick='addListItem(this)' href='javascript:void(0)'><i class='fa fa-plus'></i> Add item</a></div>"; |
|
56
|
|
|
break; |
|
57
|
|
|
case 'external': |
|
58
|
|
|
$out .= "<a onclick='foldNext(this)' href='javascript:void(0)'>Show</a>" |
|
59
|
|
|
. "<pre style='display: none'>" |
|
60
|
|
|
. htmlentities(json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES), ENT_QUOTES) |
|
61
|
|
|
. "</pre>"; |
|
62
|
|
|
break; |
|
63
|
|
|
default: |
|
64
|
|
|
$out .= get_primitive_field($meta["type"], $name, $data, false, $opt); |
|
65
|
|
|
} |
|
66
|
|
|
|
|
67
|
|
|
return $out . "</label>"; |
|
68
|
|
|
} |
|
69
|
|
|
?> |
|
70
|
|
|
<?php |
|
71
|
|
|
if (is_array($template_meta)): |
|
72
|
|
|
foreach ($template_meta as $name => $meta): |
|
73
|
|
|
echo get_field($name, $meta, $data[$name]); |
|
74
|
|
|
endforeach; |
|
75
|
|
|
endif; |
|
76
|
|
|
?> |
|
77
|
|
|
<script> |
|
78
|
|
|
/* exported foldNext */ |
|
79
|
|
|
function foldNext(elem) { |
|
80
|
|
|
var nextElem = elem.nextElementSibling; |
|
81
|
|
|
var display = nextElem.style.display; |
|
82
|
|
|
if (display == "none") { |
|
83
|
|
|
nextElem.style.display = ""; |
|
84
|
|
|
elem.innerHTML = "Hide"; |
|
85
|
|
|
} else { |
|
86
|
|
|
nextElem.style.display = "none"; |
|
87
|
|
|
elem.innerHTML = "Show"; |
|
88
|
|
|
} |
|
89
|
|
|
} |
|
90
|
|
|
|
|
91
|
|
|
/* exported addListItem, moveUpListItem, moveDownListItem */ |
|
92
|
|
|
function addListItem(elem) { |
|
93
|
|
|
var jugaadList = elem.parentNode; |
|
94
|
|
|
var exampleListItem = jugaadList.getElementsByClassName("example-input")[0]; |
|
95
|
|
|
var listItem = exampleListItem.cloneNode(true); |
|
96
|
|
|
listItem.className = ""; |
|
97
|
|
|
listItem.style.display = ""; |
|
98
|
|
|
var inputElem; |
|
99
|
|
|
switch (jugaadList.dataset.type) { |
|
100
|
|
|
case "text": |
|
101
|
|
|
inputElem = listItem.getElementsByTagName('input')[0]; |
|
102
|
|
|
inputElem.disabled = false; |
|
103
|
|
|
break; |
|
104
|
|
|
case "color": |
|
105
|
|
|
inputElem = listItem.getElementsByTagName('input')[0]; |
|
106
|
|
|
inputElem.disabled = false; |
|
107
|
|
|
setupColorInput($(inputElem)); |
|
108
|
|
|
break; |
|
109
|
|
|
case "longtext": |
|
110
|
|
|
inputElem = listItem.getElementsByTagName('textarea')[0]; |
|
111
|
|
|
inputElem.disabled = false; |
|
112
|
|
|
break; |
|
113
|
|
|
case "time": |
|
114
|
|
|
case "date": |
|
115
|
|
|
case "datetime": |
|
116
|
|
|
inputElem = listItem.getElementsByTagName('input')[0]; |
|
117
|
|
|
inputElem.disabled = false; |
|
118
|
|
|
setupDateTime($(inputElem)); |
|
119
|
|
|
break; |
|
120
|
|
|
default: |
|
121
|
|
|
|
|
122
|
|
|
} |
|
123
|
|
|
jugaadList.getElementsByClassName("input-list")[0].appendChild(listItem); |
|
124
|
|
|
} |
|
125
|
|
|
|
|
126
|
|
|
function moveUpListItem(elem) { |
|
127
|
|
|
var listItem = elem.parentNode; |
|
128
|
|
|
var prevItem = listItem.previousElementSibling; |
|
129
|
|
|
if (prevItem) { |
|
130
|
|
|
prevItem.parentNode.insertBefore(listItem, prevItem); |
|
131
|
|
|
} |
|
132
|
|
|
} |
|
133
|
|
|
|
|
134
|
|
|
function moveDownListItem(elem) { |
|
135
|
|
|
var listItem = elem.parentNode; |
|
136
|
|
|
var nextItem = listItem.nextElementSibling; |
|
137
|
|
|
if (nextItem) { |
|
138
|
|
|
nextItem.parentNode.insertBefore(listItem, nextItem.nextSibling); |
|
139
|
|
|
} |
|
140
|
|
|
} |
|
141
|
|
|
|
|
142
|
|
|
/* exported removeListItem */ |
|
143
|
|
|
function removeListItem(elem) { |
|
144
|
|
|
var listItem = elem.parentNode; |
|
145
|
|
|
listItem.parentNode.removeChild(listItem); |
|
146
|
|
|
} |
|
147
|
|
|
|
|
148
|
|
|
/* global $ */ |
|
149
|
|
|
function setupColorInput($elem) { |
|
150
|
|
|
$elem.spectrum({ |
|
151
|
|
|
showInput: true, |
|
152
|
|
|
showAlpha: true, |
|
153
|
|
|
showPalette: true, |
|
154
|
|
|
palette: [ |
|
155
|
|
|
["transparent"], |
|
156
|
|
|
["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"], |
|
157
|
|
|
["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"], |
|
158
|
|
|
["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"], |
|
159
|
|
|
["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"], |
|
160
|
|
|
["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"], |
|
161
|
|
|
["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"], |
|
162
|
|
|
["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], |
|
163
|
|
|
["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] |
|
164
|
|
|
], |
|
165
|
|
|
preferredFormat: "rgb" |
|
166
|
|
|
}); |
|
167
|
|
|
} |
|
168
|
|
|
|
|
169
|
|
|
function setupDateTime($elem) { |
|
170
|
|
|
$elem.each(function() { |
|
171
|
|
|
var $this = $(this); |
|
172
|
|
|
var pickerType = $this.data('type'); |
|
173
|
|
|
var datepicker = (pickerType == 'date' || pickerType == 'datetime'); |
|
174
|
|
|
var timepicker = (pickerType == 'time' || pickerType == 'datetime'); |
|
175
|
|
|
var format = ((datepicker ? "Y-m-d" : "") + " " + (timepicker ? "H:i": "")).trim(); |
|
176
|
|
|
$this.datetimepicker({ |
|
177
|
|
|
datepicker: datepicker, |
|
178
|
|
|
timepicker: timepicker, |
|
179
|
|
|
format: format, |
|
180
|
|
|
defaultTime: "8:00", |
|
181
|
|
|
step: 15 |
|
182
|
|
|
}); |
|
183
|
|
|
}); |
|
184
|
|
|
} |
|
185
|
|
|
|
|
186
|
|
|
setupColorInput($('input[data-type=color]:enabled')); |
|
187
|
|
|
setupDateTime( |
|
188
|
|
|
$('input[data-type=time]:enabled, input[data-type=date]:enabled, input[data-type=datetime]:enabled') |
|
189
|
|
|
); |
|
190
|
|
|
</script> |
|
191
|
|
|
|
felicity-iiith /
felicity18-website
