-
Notifications
You must be signed in to change notification settings - Fork 2
/
pick.html
432 lines (413 loc) · 13.9 KB
/
pick.html
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
/* common */
ul {
list-style-type: none;
}
form input {
display: block;
margin: 10px;
}
button {
margin: 5px;
}
.ui-button .ui-button-text
{
font-size: 0.7em;
}
#sortable {
margin: 0;
padding: 0;
width:330px; /* (width+(padding+border+margin)*2)*15 */
/* Dimenzija jedne kockice je 2cm, a cele ploce mozaika 32,7x32,7cm. Dimenzija fuge je 2mm. */
}
#sortable li {
margin: 1px 1px 1px 1px;
border-width: 0px;
padding: 0px;
float: left;
width: 20px;
height: 20px;
font-size: 0.6em;
text-align: center;
}
#sortable img {
width: 20px;
height: 20px;
}
/* pick tile */
#pick_tile {
width:220px; /* (20+2*2+2*1)*15*/
/* display: none; */
position: absolute;
background: white;
border-style: outset;
padding: 3px;
z-index: 1;
}
#pick_tile li {
float: left;
}
#pick_tile img {
width: 20px;
height: 20px;
margin: 2px;
}
/* chose tile */
#chosen_tiles input {
vertical-align: middle;
font-size: 1em;
}
#chosen_tiles input[name=quantity] {
width: 41px;
}
#chosen_tiles input[name=percentage] {
width: 90px;
}
#chosen_tiles input[name=percentage_number] {
width: 39px;
font-size: 0.8em;
}
#chosen_tiles img {
width: 22px;
vertical-align: middle;
}
#chosen_tiles button {
margin: 0px;
}
#chosen_tiles .ui-button-text {
padding: 4px 20px 4px 4px;
}
#chosen_tiles > li > button > span.ui-button-icon-primary.ui-icon.ui-icon-circle-close {
right: 0.2em;
left: inherit;
}
#help-text {
clear: both;
}
.order {
display: none;
}
</style>
<script>
// http://api.jqueryui.com/menu/
// http://api.jqueryui.com/tooltip/
// http://api.jqueryui.com/sortable/
// example
// http://jqueryui.com/tooltip/
// http://javascriptobfuscator.com/
var LOG = true;
var N = 15;
var is_event_change_input_active = true;
$(function() {
// loading table
for(i=1;i<=N*N;i++)
{
$('#sortable').append('<li class="ui-state-default">'+i+'</li>');
}
$( "#sortable" ).sortable({
items: "li",
update: update_order,
});
$( "#sortable" ).disableSelection();
// loading tiles
list_of_images = "S20.jpg S22.jpg S25.jpg S57.jpg S56.jpg S06.jpg S05.jpg S04.jpg S831.jpg P53.jpg P07.jpg P08.jpg P30.jpg P01.jpg P35.jpg P37.jpg P64.jpg P63.jpg Z32.jpg Z23.jpg Z28.jpg Z26.jpg Z15.jpg Z55.jpg Z54.jpg Z10.jpg Z02.jpg B331.jpg B70.jpg B14.jpg B69.jpg B333.jpg B32.jpg B335.jpg B33.jpg B39.jpg C131.jpg C434.jpg C77.jpg C84.jpg C60.jpg C94.jpg C62.jpg WA91.jpg WA90.jpg L130.jpg F931.jpg E521.jpg F751.jpg L90.jpg L51.jpg L73.jpg 20G61.jpg 20GY92.jpg 20G12.jpg E403.jpg NE169.jpg 20R82.jpg F530.jpg 20Y22.jpg 20G41.jpg SL1.jpg SL2.jpg 20R10.jpg 20R20.jpg 20R22.jpg 20R56.jpg 20R96.jpg GL1.jpg GL2.jpg KR0.jpg KR3.jpg".match(/[^ ]+/g)
list_of_images.forEach(function(img) {
$('#pick_tile').append('<li><img src="img/'+img+'" title="'+img.substring(0,img.length-4)+'"></li>');
});
// create button
$( "button,input[type='submit']" ).each(function() {
var button = $( this ).button({
icons: {
primary: $( this ).data( "icon" )
},
text: !!$( this ).attr( "title" )
});
button.not( ".menu" ).click(function() {
//notify( button );
});
});
// popup pick_tile
$("#add-tile").click(function() {
var menu = $('#pick_tile').show().position({
my: "left top",
at: "left-10 bottom",
of: this
});
$( document ).one( "click", function() {
menu.hide();
});
return false;
});
$('#pick_tile').hide();
// refresh tiles
$("#refresh-tiles").click(function() {
refresh_tiles();
});
// tooltip for buttons
$( document ).tooltip({
position: {
my: "left top",
at: "right bottom"
},
show: {
duration: "fast"
},
hide: {
effect: "hide"
}
});
// pick one tile from
$('#pick_tile').on('click','li',function(){
LOG && console.log("#pick_tile click li");
var new_row = $('#row_template').clone();
new_row.removeAttr('id');
new_row.children('input[name=quantity]').prop('max',N*N);
var img_path = $(this).children('img').attr('src');
new_row.children('img').prop('src',img_path);
new_row.children('img').prop('title',img_path.substring(4,img_path.length-4));
var button_element = new_row.children('button');
button_element.html(img_path.substring(4,img_path.length-4));
button_element.button({
icons: {
primary: button_element.data( "icon" )
},
text: !!button_element.attr( "title" )
});
if ($("#chosen_tiles input[name=quantity]").length == 0)
{
// its the first one so put max
new_row.children('input[name=quantity]').val(N*N);
new_row.children('input[name=percentage]').val("100");
new_row.children('input[name=percentage_number]').val("100");
}
$('#chosen_tiles').append(new_row);
$('#chosen_tiles input').first().trigger('change');
$('.order').show('highlight');
});
// remove one row
$('#chosen_tiles').on('click','button.remove',function(){
$(this).parent('li').remove();
$('#chosen_tiles input').first().trigger('change');
});
// change the number or slider
$('#chosen_tiles').on('change','input',function(){
var changed_value;
if (this.name == "percentage" || this.name == "percentage_number")
{
// synchronize values
changed_value = Math.floor(parseFloat(this.value)*N*N/100);
$(this).parent().children('input[name=quantity]').val(changed_value);
$(this).parent().children('input[name=percentage]').val(changed_value*100/(N*N));
$(this).parent().children('input[name=percentage_number]').val(changed_value*100/(N*N));
}
else
{
// synchronize values
changed_value = parseInt(this.value);
$(this).siblings('input[name=percentage]').val(changed_value*100/(N*N));
$(this).siblings('input[name=percentage_number]').val(changed_value*100/(N*N));
}
if (changed_value<0)
{
alert('Morate uneti pozitivan broj')
return;
}
if (changed_value>N*N)
{
alert('Morate uneti broj koji nije veci od '+N*N)
return;
}
if (!is_event_change_input_active)
return;
is_event_change_input_active = false;
var delta_per_row, delta_remainder;
var sum = 0;
var num_of_rows = $("#chosen_tiles input[name=quantity]").length;
if (num_of_rows == 1)
{
// we have only one row so it should always be N*N
$(this).parent().children('input[name=quantity]').val(N*N);
$(this).parent().children('input[name=percentage]').val(100);
$(this).parent().children('input[name=percentage_number]').val(100);
}
else
{
$("#chosen_tiles input[name=quantity]").each(function(){ sum += parseInt(this.value)})
if (sum - N*N > 0)
{
delta_per_row = Math.floor((sum - N*N)/(num_of_rows-1));
}
else
{
// floor for negative we should take higher
delta_per_row = Math.ceil((sum - N*N)/(num_of_rows-1));
}
delta_remainder = (sum - N*N)%(num_of_rows-1);
}
LOG && console.log("sum-N*N="+(sum-N*N)+" delta_per_row="+delta_per_row+" delta_remainder="+delta_remainder);
var target_row = this.parentElement;
$("#chosen_tiles input[name=quantity]").each(function() {
if (this.parentElement == target_row)
{
// to not need to adapt current row that was changed
return true;
}
var new_value = parseInt(this.value) - delta_per_row;
if (new_value < 0 )
{
delta_remainder -= new_value;
new_value = 0;
}
this.value = new_value;
$(this).siblings('input[name=percentage]').val(new_value*100/(N*N));
$(this).siblings('input[name=percentage_number]').val(new_value*100/(N*N));
});
// find element that can hold delta_remainder
$("#chosen_tiles input[name=quantity]").each(function() {
if (delta_remainder == 0)
{
// if there is no more delta remainder, exit
return;
}
if (this.parentElement == target_row)
{
// to not need to adapt current row that was changed
return true; // next
}
var new_value = parseInt(this.value) - delta_remainder;
if (new_value < 0 )
{
delta_remainder = -new_value;
new_value = 0;
}
else
{
delta_remainder = 0;
}
this.value = new_value;
$(this).siblings('input[name=percentage]').val(new_value*100/(N*N));
$(this).siblings('input[name=percentage_number]').val(new_value*100/(N*N));
});
is_event_change_input_active = true;
var test = 0;
$("#chosen_tiles input[name=quantity]").each(function() { test += parseInt(this.value)});
if (test != N*N)
alert(test);
LOG && console.log(test);
// adapt number in tile
$('#sortable').html('');
$("#chosen_tiles input[name=quantity]").each(function() {
for(i=0;i<this.value;i++)
{
var img_path = $(this).siblings('img').attr('src');
$('#sortable').append('<li><img title="'+img_path.substring(4,img_path.length-4)+'" src="'+img_path+'"></li>');
}
});
refresh_tiles();
}); // end of change the number
});
function refresh_tiles(){
var all = $('#sortable').children();
var shuffled = shuffle(all);
$('#sortable').html('').append(shuffled);
update_order();
}
function update_order() {
var email_href="mailto:[email protected]?Subject=Narucivanje%20mozaika&Body=Naručujem%3A%0D%0D";
$('#chosen_tiles').children().each(function() {
email_href += $(this).children('input[name=quantity]').val();
email_href += "%20x%20";
var img_path = $(this).children('img').attr('src');
email_href += img_path.substring(4,img_path.length-4);
email_href += "%0D";
});
email_href += "%0D";
$('#sortable').children().each( function(index) {
if (index % N == 0)
{
email_href += "%0D";
}
var img_path = $(this).children('img').attr('src');
email_href += img_path.substring(4,img_path.length-4) +"%2C";
});
var text_email = email_href.replace(/%2C/gi,',').replace(/%0D/gi,'\n').replace(/%20/gi,' ');
$('#send_email').prop('href',email_href);
$('#send_email_form').val(text_email);
}
// http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex ;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
</script>
</head>
<body>
<ul id="sortable">
</ul>
<ul id="pick_tile">
</ul>
<button data-icon="ui-icon-circle-plus" title="Dodajte novu vrstu ploćice" id="add-tile">Dodaj</button>
<button data-icon="ui-icon-refresh" title="Ponovo promešaj sve pločice" id="refresh-tiles">Promešaj</button>
<br>
<ul id="chosen_tiles">
</ul>
<ul style="display:none">
<li id="row_template">
<input type="number" name="quantity" min="0" value="0" title="Broj pločica">
<img src="" title="sifra">
<input type="range" name="percentage" min="0" max="100" value="0" title="Procentualni udeo">
<input name="percentage_number" min="0" max="100" step="2" value="0" title="Procentualni udeo">
<button title="Ukloni ovu pločicu" data-icon="ui-icon-circle-close" class="remove">sifra</button>
</li>
</ul>
<div class="order">
<form id='contact_form' action="//formspree.io/[email protected]" method="post">
<input type="text" id="contact_field" name="_replyto" placeholder="Vaša imejl adresa ili telefon">
<input type="text" name="first_name" placeholder="Vaše ime i prezime">
<input type="text" name="message" placeholder="Kvadratura i ostali podaci">
<input type="hidden" name="table" value="sadsad" id="send_email_form">
<input type="submit" value="Naruči" data-icon="ui-icon-mail-closed" title="Naruči ovu kombinaciju" >
</form>
<script>
$('#contact_form').submit(function(e) {
if ($('#contact_field').val() == "")
{
alert("Molim Vas da unesete kontakt podatke");
e.preventDefault();
}
});
</script>
ili sam <a href="mailto:[email protected]?Subject=Narucivanje%20mozaika&Body=Naručujuem%0D" data-icon="ui-icon-mail-closed" title="Pošalji email sa ovom kombinacijom" id="send_email">pošalji email</a>
</div>
<p id="help-text">
Iz opcije „Dodaj“ izabrati željene vrste mozaika za miksovanje.
<br>
<br>
U levoj kućici pored slike izabrane boje iskazan je broj kockica u miksu, a sa desne strane se nalazi procentualni udeo. Uneti željene vrednosti (u procentima ili broju kockica).
<br>
<br>
Opcija „Promešaj“ služi za dodatno mešanje boja u miksu.
<br>
<br>
Uz pomoć opcije „Naruči“ može se poručiti željeni mix mozaika.
</p>
</body>
</html>