blob: eaa9000d086757a33168acdaabbe117c3217efdd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/select2.min.css" /><!-- v4.0.10 -->
<style>
body { margin: 1em; font-family: Roboto, sans-serif; font-size: .92em; }
.container { width: 100%; max-width: 640px; margin: 1em auto; }
</style>
</head>
<body>
<div class="container">
<select class="" name="store_id[]" multiple="multiple">
</select>
<br/>
<br/>
<h2><say>Καλημέρα</say></h2>
<br/>
<i><say>Όλα καλά;</say></i>
<br/>
<h3><say>Τι στο διάλο ειν' τούτο;</say></h3>
<br/>
<pre id="console">
</pre>
<a class="-echo-" href="#">Show Values</a> —
<a class="-select-" href="#">Select two Specific</a> —
<a class="-clear-" href="#">Clear Values</a>
</div>
</body>
<?php
$translate = array(
"Καλημέρα" => 'Good Morning!',
"Τι στο διάλο ειν' τούτο;" => "what the fuck is that?"
);
?>
<script>
// translations
var trans = <?=json_encode($translate, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE)?>;
const tr_ = document.querySelectorAll("say"); // <say> tags host texts-to-translate
for (var i = 0; i < tr_.length; i++) {
tr_[i].outerHTML = _dotr(tr_[i].innerHTML); // replace innerHTML; remove <say> tag
// credits: izzulmakin@ https://stackoverflow.com/questions/4232961/
}
function _dotr(x) {
for (var key in trans) {
if ((trans.hasOwnProperty(key)) && (key == x))
return trans[key];
}
console.log(x); // log un-translated phrases
return x;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/i18n/el.js"></script>
<script type="text/javascript">
var store_select2;
var storesData;
// FUNCTION: Get selected value(s) of Select2 control
// pass arg: source-element
// return: value(s) comma-separated
// ---------------------------------------------------------------------------
function getValues(srcElm) {
var values = [];
var obj = srcElm.select2('data'); // get data array
if (obj.length === 0) return ''; // if empty list then nothig is selected
else {
obj.forEach(function(elm) { // loop through object elements array
values.push(elm.id); // push id
});
}
return values.join(',');
}
$(document).ready(function() { // ON DOCUMENT READY (code-block start)
$.getJSON("/tests/stores.json", // ask for data
function(data) {
storesData = data.results; // when response arrives, construct select2
store_select2 = $('select[name="store_id[]"]').select2({
data: storesData,
width: '100%'
});
}
);
$('.-echo-').click(function() {
$('#console').text( getValues(store_select2) ); // echo selected values
});
$('.-select-').click(function() {
store_select2.val([51,401]).trigger('change'); // set values 51,401 (Athens + Heraklion)
$('.-echo-').trigger('click');
});
$('.-clear-').click(function() {
store_select2.val([]).trigger('change');
$('.-echo-').trigger('click');
});
}); //// on document ready (code-block start)
</script>
</html>
|
