· 5 years ago · Feb 26, 2020, 11:32 AM
1 /*
2 *
3 * Lumise Designer Tool ver1.7
4 *
5 * https://www.lumise.com
6 * Copyright 2018-2019 : Lumise product designer tool
7 * All rights reserved by Lumise Inc
8 *
9 * This source code is licensed under non-distrbutable rights of Lumise
10 * https://www.lumise.com/terms-conditions/
11 *
12 */
13
14jQuery(document).ready(function($) {
15
16 // Use strict for the private workspace
17
18 var lumise = {
19
20 e : {
21 tools : $('#lumise-top-tools'),
22 layers : $('#lumise-layers'),
23 main : $('#LumiseDesign')
24 },
25
26 i : function(s){
27 return lumise.data.js_lang[s.toString()];
28 },
29
30 f : function(msg) {
31
32 if (msg === undefined || msg === '' || msg === false) {
33 clearTimeout(lumise.ops.ftimer);
34 document.getElementById('LumiseDesign').setAttribute('data-processing', '');
35 document.getElementById('LumiseDesign').setAttribute('data-msg', '');
36 } else {
37 clearTimeout(lumise.ops.ftimer);
38 lumise.ops.ftimer = setTimeout(function(msg) {
39 document.getElementById('LumiseDesign').setAttribute('data-processing', 'true');
40 document.getElementById('LumiseDesign').setAttribute('data-msg', msg);
41 }, 300, msg);
42 }
43
44 },
45
46 filters : [],
47
48 ops : {
49 downon: null,
50 drag_start: null,
51 first: {},
52 categories: {},
53 before_unload: null,
54 excmobile: false,
55 first_completed: false,
56 session_designs: [], // save currelly designs of all stages
57 my_designs: {}, // Save currently my designs list
58 export_list: [
59 'id',
60 'src',
61 'origin_src',
62 'evented',
63 'visible',
64 'selectable',
65 'text',
66 'fontFamily',
67 'fontSize',
68 'fontStyle',
69 'textDecoration',
70 'fontWeight',
71 'font',
72 'angle',
73 'bridge',
74 'name',
75 'charSpacing',
76 'lineHeight',
77 'fill',
78 'price',
79 'resource',
80 'fx',
81 'opacity',
82 'fxOrigin',
83 'colors',
84 'originX',
85 'originY',
86 'lockPosition',
87 'group_pos',
88 'imagebox',
89 'boxbtn',
90 'template',
91 ],
92 color_maps : {"#000000":"black","#000080":"navy","#00008b":"darkblue","#0000cd":"mediumblue","#0000ff":"blue","#006400":"darkgreen","#008000":"green","#008080":"teal","#008b8b":"darkcyan","#00bfff":"deepskyblue","#00ced1":"darkturquoise","#00fa9a":"mediumspringgreen","#00ff00":"lime","#00ff7f":"springgreen","#00ffff":"cyan","#191970":"midnightblue","#1e90ff":"dodgerblue","#20b2aa":"lightseagreen","#228b22":"forestgreen","#2e8b57":"seagreen","#2f4f4f":"darkslategrey","#32cd32":"limegreen","#3cb371":"mediumseagreen","#40e0d0":"turquoise","#4169e1":"royalblue","#4682b4":"steelblue","#483d8b":"darkslateblue","#48d1cc":"mediumturquoise","#4b0082":"indigo","#556b2f":"darkolivegreen","#5f9ea0":"cadetblue","#6495ed":"cornflowerblue","#663399":"rebeccapurple","#66cdaa":"mediumaquamarine","#696969":"dimgrey","#6a5acd":"slateblue","#6b8e23":"olivedrab","#708090":"slategrey","#778899":"lightslategrey","#7b68ee":"mediumslateblue","#7cfc00":"lawngreen","#7fff00":"chartreuse","#7fffd4":"aquamarine","#800000":"maroon","#800080":"purple","#808000":"olive","#808080":"grey","#87ceeb":"skyblue","#87cefa":"lightskyblue","#8a2be2":"blueviolet","#8b0000":"darkred","#8b008b":"darkmagenta","#8b4513":"saddlebrown","#8fbc8f":"darkseagreen","#90ee90":"lightgreen","#9370db":"mediumpurple","#9400d3":"darkviolet","#98fb98":"palegreen","#9932cc":"darkorchid","#9acd32":"yellowgreen","#a0522d":"sienna","#a52a2a":"brown","#a9a9a9":"darkgrey","#add8e6":"lightblue","#adff2f":"greenyellow","#afeeee":"paleturquoise","#b0c4de":"lightsteelblue","#b0e0e6":"powderblue","#b22222":"firebrick","#b8860b":"darkgoldenrod","#ba55d3":"mediumorchid","#bc8f8f":"rosybrown","#bdb76b":"darkkhaki","#c0c0c0":"silver","#c71585":"mediumvioletred","#cd5c5c":"indianred","#cd853f":"peru","#d2691e":"chocolate","#d2b48c":"tan","#d3d3d3":"lightgrey","#d8bfd8":"thistle","#da70d6":"orchid","#daa520":"goldenrod","#db7093":"palevioletred","#dc143c":"crimson","#dcdcdc":"gainsboro","#dda0dd":"plum","#deb887":"burlywood","#e0ffff":"lightcyan","#e6e6fa":"lavender","#e9967a":"darksalmon","#ee82ee":"violet","#eee8aa":"palegoldenrod","#f08080":"lightcoral","#f0e68c":"khaki","#f0f8ff":"aliceblue","#f0fff0":"honeydew","#f0ffff":"azure","#f4a460":"sandybrown","#f5deb3":"wheat","#f5f5dc":"beige","#f5f5f5":"whitesmoke","#f5fffa":"mintcream","#f8f8ff":"ghostwhite","#fa8072":"salmon","#faebd7":"antiquewhite","#faf0e6":"linen","#fafad2":"lightgoldenrodyellow","#fdf5e6":"oldlace","#ff0000":"red","#ff00ff":"magenta","#ff1493":"deeppink","#ff4500":"orangered","#ff6347":"tomato","#ff69b4":"hotpink","#ff7f50":"coral","#ff8c00":"darkorange","#ffa07a":"lightsalmon","#ffa500":"orange","#ffb6c1":"lightpink","#ffc0cb":"pink","#ffd700":"gold","#ffdab9":"peachpuff","#ffdead":"navajowhite","#ffe4b5":"moccasin","#ffe4c4":"bisque","#ffe4e1":"mistyrose","#ffebcd":"blanchedalmond","#ffefd5":"papayawhip","#fff0f5":"lavenderblush","#fff5ee":"seashell","#fff8dc":"cornsilk","#fffacd":"lemonchiffon","#fffaf0":"floralwhite","#fffafa":"snow","#ffff00":"yellow","#ffffe0":"lightyellow","#fffff0":"ivory","#ffffff":"white"}
93 },
94
95 trigger : function( obj ) {
96
97 var func;
98 for( var ev in obj.events ){
99
100 if( typeof obj.events[ev] == 'function' )
101 func = obj.events[ev];
102 else if( typeof obj[obj.events[ev]] == 'function' )
103 func = obj[obj.events[ev]];
104 else continue;
105
106 ev = ev.split(',');
107
108 ev.map(function(evs){
109
110 evs = evs.split(':');
111
112 if(evs[1] === undefined)evs[1] = 'click';
113
114 if (evs[0] === '')
115 obj.el.off(evs[1]).on( evs[1], obj, func );
116 else obj.el.find( evs[0] ).off(evs[1]).on( evs[1], obj, func );
117
118 });
119
120 }
121 },
122
123 add_filter : function(name, callback, priority) {
124
125 if (priority === undefined)
126 priority = 10;
127
128 if (this.filters[priority] === undefined)
129 this.filters[priority] = {};
130
131 if (this.filters[priority][name] === undefined)
132 this.filters[priority][name] = [];
133
134 if (typeof callback == 'function')
135 this.filters[priority][name].push(callback);
136
137 },
138
139 apply_filter : function(name, obj, p) {
140
141 return this.apply_filters(name, obj, p);
142
143 },
144
145 apply_filters : function(name, obj, p) {
146
147 this.filters.map(function(filters) {
148 if (filters[name] !== undefined) {
149 filters[name].map(function(filter){
150 if (typeof filter == 'function')
151 obj = filter(obj, p);
152 });
153 }
154 });
155
156 return obj;
157
158 },
159
160 add_action : function(name, callback, priority) {
161
162 this.actions.add(name, callback, priority);
163
164 },
165
166 do_action : function(name, obj, p) {
167
168 return this.actions.do(name, obj, p);
169 },
170
171 extends : {
172
173 controls : {
174
175 calcCoords: function(absolute) {
176
177 var theta = this.angle * (Math.PI / 180),
178 vpt = this.getViewportTransform(),
179 dim = absolute ? this._getTransformedDimensions() : this._calculateCurrentDimensions(),
180 currentWidth = dim.x, currentHeight = dim.y,
181 sinTh = Math.sin(theta),
182 cosTh = Math.cos(theta),
183 _angle = currentWidth > 0 ? Math.atan(currentHeight / currentWidth) : 0,
184 _hypotenuse = (currentWidth / Math.cos(_angle)) / 2,
185 offsetX = Math.cos(_angle + theta) * _hypotenuse,
186 offsetY = Math.sin(_angle + theta) * _hypotenuse,
187 center = this.getCenterPoint(),
188 // offset added for rotate and scale actions
189 coords = absolute ? center : fabric.util.transformPoint(center, vpt),
190 tl = new fabric.Point(coords.x - offsetX, coords.y - offsetY),
191 tr = new fabric.Point(tl.x + (currentWidth * cosTh), tl.y + (currentWidth * sinTh)),
192 bl = new fabric.Point(tl.x - (currentHeight * sinTh), tl.y + (currentHeight * cosTh)),
193 br = new fabric.Point(coords.x + offsetX, coords.y + offsetY);
194
195 if (!absolute) {
196 var ml = new fabric.Point((tl.x + bl.x) / 2, (tl.y + bl.y) / 2),
197 mt = new fabric.Point((tr.x + tl.x) / 2, (tr.y + tl.y) / 2),
198 mr = new fabric.Point((br.x + tr.x) / 2, (br.y + tr.y) / 2),
199 mb = new fabric.Point((br.x + bl.x) / 2, (br.y + bl.y) / 2),
200 mtr = new fabric.Point(tl.x + (currentWidth * cosTh), tl.y + (currentWidth * sinTh));
201 //mtr = new fabric.Point(mt.x + sinTh * this.rotatingPointOffset, mt.y - cosTh * this.rotatingPointOffset);
202 }
203
204 var coords = {
205 // corners
206 tl: tl, tr: tr, br: br, bl: bl,
207 };
208
209 if (!absolute) {
210 // middle
211 coords.ml = ml;
212 coords.mt = mt;
213 coords.mr = mr;
214 coords.mb = mb;
215 // rotating point
216 coords.mtr = mtr;
217 }
218
219 return coords;
220
221 },
222
223 drawControls: function(ctx) {
224
225 if (!this.hasControls) {
226 return this;
227 }
228
229 var wh = this._calculateCurrentDimensions(),
230 width = wh.x,
231 height = wh.y,
232 scaleOffset = this.cornerSize,
233 left = -(width + scaleOffset) / 2,
234 top = -(height + scaleOffset) / 2,
235 methodName = this.transparentCorners ? 'stroke' : 'fill',
236 active = lumise.stage().canvas.getActiveObject();
237
238 ctx.save();
239
240 if (this.hasRotatingPoint) {
241
242 if (active !== null && active.get('lockPosition') === true) {
243 ctx.fillStyle = '#f75555';
244 ctx.fillRect(left, top,this.cornerSize,this.cornerSize);
245 ctx.drawImage(
246 lumise.objects.icons['del'],
247 left+this.cornerSize*0.1,
248 top+this.cornerSize*0.1,
249 this.cornerSize*0.8, this.cornerSize*0.8
250 );
251 } else {
252
253 var canvas = lumise.stage().canvas,
254 isobj = canvas.getActiveObject(),
255 isgroup = canvas.getActiveGroup(),
256 invert = lumise.get.color('invert');
257
258
259 ctx.fillStyle = invert == '#333' ? '#777' : '#ccc';
260
261 var pos = {
262 'rot': [left+width+this.cornerSize*0.1, top+this.cornerSize*0.1],
263 'rez': [left+width+this.cornerSize*0.1, top+height+this.cornerSize*0.1],
264 'del': [left+this.cornerSize*0.1, top+this.cornerSize*0.1]
265 }, c = this.cornerSize*0.8;
266
267 if (
268 isobj &&
269 (
270 isobj.imagebox === undefined ||
271 isobj.imagebox === '' ||
272 canvas.getObjects().filter(function(o) {
273 return o.id == isobj.imagebox;
274 }).length === 0
275 )
276 ) {
277 pos.dou = [left+this.cornerSize*0.1, top+height+this.cornerSize*0.1];
278 ctx.fillRect(left, top+height,this.cornerSize,this.cornerSize);
279 };
280
281 // Top Right
282 ctx.fillRect(left+width, top,this.cornerSize,this.cornerSize);
283 //Bottom Right
284 ctx.fillRect(left+width, top+height,this.cornerSize,this.cornerSize);
285
286 // Center Top
287 ctx.beginPath();
288 ctx.arc(left+(width/2)+(this.cornerSize/2), top+(this.cornerSize/2), 3, 0, 2 * Math.PI, false);
289 ctx.fill();
290 ctx.closePath();
291
292 // Center Bottom
293 ctx.beginPath();
294 ctx.arc(left+(width/2)+(this.cornerSize/2), top+height+(this.cornerSize/2), 3, 0, 2 * Math.PI, false);
295 ctx.fill();
296 ctx.closePath();
297
298 // Right Midle
299 ctx.beginPath();
300 ctx.arc(left+(this.cornerSize/2)-.5, top+(height/2)+(this.cornerSize/2), 3, 0, 2 * Math.PI, false);
301 ctx.fill();
302 ctx.closePath();
303
304 // Left Midle
305 ctx.beginPath();
306 ctx.arc(left+width+(this.cornerSize/2)+.5, top+(height/2)+(this.cornerSize/2), 3, 0, 2 * Math.PI, false);
307 ctx.fill();
308 ctx.closePath();
309
310 // Top Left
311 ctx.fillStyle = '#f75555';
312 ctx.fillRect(left, top,this.cornerSize,this.cornerSize);
313
314
315 Object.keys(pos).map(function(p){
316 ctx.drawImage(
317 lumise.objects.icons[(invert == '#333' || p == 'del' ? '' : 'w')+p],
318 pos[p][0],
319 pos[p][1],
320 c, c
321 );
322 });
323 }
324
325 }
326
327 ctx.restore();
328
329 return this;
330
331 },
332
333 drawBorders: function(ctx) {
334
335 if (!this.hasBorders) {
336 return this;
337 }
338
339 var wh = this._calculateCurrentDimensions(),
340 strokeWidth = 1 / this.borderScaleFactor,
341 width = wh.x + strokeWidth,
342 height = wh.y + strokeWidth;
343
344 ctx.save();
345 ctx.strokeStyle = lumise.get.color('invert') == '#333' ? 'rgba(30, 30, 30, 0.35)' : 'rgba(230, 230, 230, 0.6)';
346
347 this._setLineDash(ctx, [1, 1], null);
348
349 ctx.strokeRect(
350 -width / 2,
351 -height / 2,
352 width,
353 height
354 );
355
356 if (
357 this.hasRotatingPoint &&
358 this.isControlVisible('mtr') &&
359 !this.get('lockRotation') &&
360 this.hasControls
361 ) {
362
363 var rotateHeight = -height / 2;
364
365 ctx.beginPath();
366 ctx.moveTo(0, rotateHeight);
367 ctx.lineTo(0, rotateHeight - this.rotatingPointOffset);
368 ctx.closePath();
369 ctx.stroke();
370 }
371
372 ctx.restore();
373
374 return this;
375
376 },
377
378 targetCorner: function(pointer) {
379
380 if (!this.hasControls || !this.active) {
381 return false;
382 }
383
384 var ex = pointer.x,
385 ey = pointer.y,
386 xPoints,
387 lines;
388 this.__corner = 0;
389 for (var i in this.oCoords) {
390
391 if (!this.isControlVisible(i)) {
392 continue;
393 }
394
395 if (i === 'mtr' && !this.hasRotatingPoint) {
396 continue;
397 }
398
399 if (this.get('lockUniScaling') &&
400 (i === 'mt' || i === 'mr' /*|| i === 'mb'*/ || i === 'ml')) {
401 continue;
402 }
403
404 lines = this._getImageLines(this.oCoords[i].corner);
405
406 //FPD: target corner not working when canvas has zoom greater than 1
407 var zoom = this.canvas.getZoom() ? this.canvas.getZoom() : 1;
408
409 xPoints = this._findCrossPoints({ x: ex*zoom, y: ey*zoom }, lines);
410 if (xPoints !== 0 && xPoints % 2 === 1) {
411 this.__corner = i;
412 return i;
413 }
414 }
415 return false;
416 },
417
418 },
419
420 canvas : {
421
422 _getRotatedCornerCursor: function(corner, target, e) {
423
424 var cu = 'move';
425
426 switch (corner) {
427 case 'tr': cu = 'crosshair'; break;
428 case 'tl': cu = 'pointer'; break;
429 case 'br': cu = 'nwse-resize'; break;
430 case 'bl': cu = 'pointer'; break;
431 case 'mt': cu = 'n-resize'; break;
432 case 'mr': cu = 'e-resize'; break;
433 case 'mb': cu = 's-resize'; break;
434 case 'ml': cu = 'w-resize'; break;
435 }
436
437 return cu;
438
439 var n = Math.round((target.getAngle() % 360) / 45);
440
441 if (n < 0) {
442 n += 8; // full circle ahead
443 }
444 n += cursorOffset[corner];
445 if (e[this.altActionKey] && cursorOffset[corner] % 2 === 0) {
446 //if we are holding shift and we are on a mx corner...
447 n += 2;
448 }
449 // normalize n to be from 0 to 7
450 n %= 8;
451
452 if (corner == 'tl')
453 return 'pointer';
454
455 return this.cursorMap[n];
456
457 },
458
459 _setupCurrentTransform: function (e, target) {
460
461 if (!target) {
462 return;
463 }
464
465 var pointer = this.getPointer(e),
466 corner = target._findTargetCorner(this.getPointer(e, true)),
467 action = this._getActionFromCorner(target, corner, e),
468 origin = this._getOriginFromCorner(target, corner);
469
470 if (lumise.func.ctrl_btns({e: e, target: target}) === true)
471 return;
472
473 if (action == 'drag') {
474 lumise.ops.downon = target;
475 lumise.ops.moved = false;
476 }
477
478 this._currentTransform = {
479 target: target,
480 action: action,
481 corner: corner,
482 scaleX: target.scaleX,
483 scaleY: target.scaleY,
484 skewX: target.skewX,
485 skewY: target.skewY,
486 offsetX: pointer.x - target.left,
487 offsetY: pointer.y - target.top,
488 originX: origin.x,
489 originY: origin.y,
490 ex: pointer.x,
491 ey: pointer.y,
492 lastX: pointer.x,
493 lastY: pointer.y,
494 left: target.left,
495 top: target.top,
496 theta: fabric.util.degreesToRadians(target.angle),
497 width: target.width * target.scaleX,
498 mouseXSign: 1,
499 mouseYSign: 1,
500 shiftKey: e.shiftKey,
501 altKey: e[this.centeredKey]
502 };
503
504 this._currentTransform.original = {
505 left: target.left,
506 top: target.top,
507 scaleX: target.scaleX,
508 scaleY: target.scaleY,
509 skewX: target.skewX,
510 skewY: target.skewY,
511 originX: origin.x,
512 originY: origin.y
513 };
514
515 this._resetCurrentTransform();
516
517 },
518
519 }
520
521 },
522
523 objects : {
524
525 events : {
526
527 'selection:cleared' : function(opts) {
528 lumise.e.layers.find('li.active').removeClass('active');
529 lumise.actions.do('selection:cleared', opts);
530 lumise.stack.save();
531 },
532
533 'object:selected' : function(opts) {
534
535 lumise.stage().selected_object = opts.target;
536 opts.target.setControlVisible('tr', false);
537
538 if (opts.target.get('lockPosition') === true ) {
539 opts.target.lockMovementX = true;
540 opts.target.lockMovementY = true;
541 opts.target.setControlsVisibility({
542 mt: false,
543 mb: false,
544 ml: false,
545 mr: false,
546 bl: false,
547 br: false,
548 tl: true,
549 tr: false,
550 mtr: false
551 });
552 } else {
553 opts.target.lockMovementX = false;
554 opts.target.lockMovementY = false;
555 opts.target.setControlsVisibility({
556 mt: true,
557 mb: true,
558 ml: true,
559 mr: true,
560 bl: true,
561 br: true,
562 tl: true,
563 tr: false,
564 mtr: true
565 });
566 };
567
568 lumise.actions.do('object:selected', opts);
569
570 },
571
572 'object:added' : function(opts) {
573 lumise.actions.do('object:added', opts);
574 },
575
576 'object:modified' : function(opts) {
577 lumise.actions.do('object:modified', opts);
578 },
579
580 'object:rotating': function(opts){
581
582 [0, 45, 90, 135, 180, 225, 270, 315, 360].map(function(a){
583 if (Math.abs(opts.target.angle-a) < 5)
584 opts.target.angle = a;
585 });
586
587 lumise.get.el('rotate').val(opts.target.angle).attr({'data-value': Math.round(opts.target.angle)+'º'});
588 },
589
590 'mouse:down': function(opts) {
591
592 var stage = lumise.stage(),
593 objs = stage.canvas.getObjects();
594
595 lumise.ops.limit_snap = stage.limit_zone;
596
597 if (stage.canvas.isDrawingMode && opts.e.shiftKey === false)
598 return;
599
600 lumise.func.navigation('clear');
601 lumise.ops.mousedown = true;
602
603 if (opts.e && opts.e.shiftKey)
604 stage.canvas.set('selection', false);
605
606 if (
607 opts.target === null ||
608 (
609 opts.target.__corner === 0 &&
610 opts.target.imagebox !== undefined &&
611 opts.target.imagebox !== ''
612 )
613 ) {
614 objs.map(function(o){
615 if (o.type == 'imagebox' &&
616 opts.e.layerX > o.left-(o.width/2) &&
617 opts.e.layerX < o.left+(o.width/2) &&
618 opts.e.layerY > o.top-(o.height/2) &&
619 opts.e.layerY < o.top+(o.height/2)
620 ){
621 var img_in = stage.canvas.getObjects().filter(function(im){
622 return im.imagebox == o.id;
623 });
624 if (img_in.length > 0) {
625 stage.canvas.setActiveObject(img_in[img_in.length-1]);
626 opts.target = img_in[img_in.length-1];
627 stage.canvas._setupCurrentTransform(opts.e, opts.target);
628 }
629 }
630 });
631 };
632
633 if (opts.target !== null) {
634
635 lumise.ops.corner = opts.target.__corner;
636
637 if (opts.target.group_pos) {
638
639 lumise.ops.original_pos = {};
640 objs.map(function(o) {
641 if (o.group_pos == opts.target.group_pos)
642 lumise.ops.original_pos[o.id] = [o.left, o.top]
643 });
644
645 if (Object.keys(lumise.ops.original_pos).length === 1) {
646 lumise.ops.original_pos = null;
647 opts.target.set({group_pos: null});
648 }
649 }
650
651 if (opts.target.imagebox !== undefined) {
652 lumise.ops.limit_snap = objs.filter(function(o){return o.id == opts.target.imagebox;});
653 if (lumise.ops.limit_snap.length > 0)
654 lumise.ops.limit_snap = lumise.ops.limit_snap[0];
655 else lumise.ops.limit_snap = stage.limit_zone;
656 }
657
658 } else {
659 lumise.ops.corner = '';
660 lumise.ops.original_pos = null;
661 }
662
663 lumise.ops.auto_snap = lumise.get.el('auto-alignment').prop('checked');
664
665 },
666
667 'path:created' : function(path){
668
669 var stage = lumise.stage();
670 stage.limit_zone.visible = true;
671
672 lumise.get.el('top-tools').attr({'data-view': 'drawing'});
673
674 lumise.stack.save();
675
676 },
677
678 'mouse:up': function(opts) {
679
680 if (opts.e === undefined)
681 return;
682
683 var stage = lumise.stage(),
684 actv = stage.canvas.getActiveObject(),
685 onbox = null;
686
687 if (stage.canvas.isDrawingMode)
688 return;
689
690 stage.canvas.getObjects().map(function(o){
691 if (o.type == 'imagebox') {
692 if(
693 opts.e.layerX > o.left-(o.boxbtn[0]/4) &&
694 opts.e.layerX < o.left+(o.boxbtn[0]/4) &&
695 opts.e.layerY > o.top-(o.boxbtn[1]/4) &&
696 opts.e.layerY < o.top+(o.boxbtn[1]/4)
697 ) {
698 onbox = o;
699 }
700 }
701 });
702
703 if (onbox !== null) {
704 if (actv) {
705 if (actv.type == 'image')
706 return actv.set('imagebox', onbox.id);
707 } else if (lumise.ops.moved !== true)
708 return lumise.func.imagebox_select_file(onbox);
709 };
710
711 stage.lineX.css({display: 'none'});
712 stage.lineY.css({display: 'none'});
713
714 lumise.ops.mousedown = false;
715 stage.canvas.set('selection', true);
716
717 /*lumise.func.reversePortView();*/
718
719 if (lumise.ops.moved !== false) {
720
721 if (lumise.ops.downon !== null) {
722
723 stage.lineX.hide();
724 stage.lineY.hide();
725
726 }
727
728 };
729
730 var active = stage.canvas.getActiveObject(),
731 gactive = stage.canvas.getActiveGroup(),
732 type = (active ? active.type : (gactive ? 'group' : 'standard'));
733
734 lumise.e.tools.attr({'data-view': type});
735
736 if (!gactive) {
737 lumise.stack.save();
738 } else {
739 var fh = true, fg = '';
740 gactive._objects.map(function(o) {
741 if (!o.get('group_pos')) {
742 fh = false;
743 } else {
744 if (fg !== '' && o.get('group_pos') != fg)
745 fh = false;
746 fg = o.get('group_pos');
747 }
748 });
749 $('#lumise-top-tools ul[data-mode="group"]').attr({'data-grouped': fh ? 'true' : 'false'});
750 };
751
752 lumise.ops.downon = null;
753 lumise.ops.moved = false;
754 lumise.ops.corner = '';
755 lumise.ops.original_pos = null;
756
757 },
758
759 'mouse:move': function(opts) {
760
761 var stage = lumise.stage(),
762 zoom = stage.canvas.getZoom(),
763 view = stage.canvas.viewportTransform,
764 gri = false;
765
766 if (opts.target === null) {
767
768 var objs = stage.canvas.getObjects(),
769 actv = stage.canvas.getActiveObject(),
770 vry = [];
771
772 objs.map(function(o){
773 if (
774 o.imagebox !== undefined &&
775 o.imagebox !== '' &&
776 vry.indexOf(o.imagebox) === -1
777 ) vry.push(o.imagebox);
778 });
779
780 objs.map(function(o){
781
782 if (o.type == 'imagebox' && (actv === null || actv === undefined || actv.type == 'image')) {
783
784 if(
785 opts.e.layerX > o.left-(o.boxbtn[0]/4) &&
786 opts.e.layerX < o.left+(o.boxbtn[0]/4) &&
787 opts.e.layerY > o.top-(o.boxbtn[1]/4) &&
788 opts.e.layerY < o.top+(o.boxbtn[1]/4)
789 ) {
790 if (o.stroke != 'red') {
791 o.set({stroke: 'red', strokeWidth: 2});
792 stage.canvas.defaultCursor = 'pointer';
793 stage.canvas.renderAll();
794 }
795 } else if (o.stroke == 'red'){
796 o.set({stroke: '', strokeWidth: 0});
797 stage.canvas.defaultCursor = 'default';
798 stage.canvas.renderAll();
799 };
800
801 if (vry.indexOf(o.id) === -1)
802 o.set('opacity', 1);
803
804 }
805 });
806
807 }
808
809 if (
810 opts && opts.e && opts.e.shiftKey &&
811 (lumise.ops.mousedown === true || stage.canvas.isDrawingMode) &&
812 zoom > 1 &&
813 lumise.ops.corner != 'br'
814 ) {
815 // Move viewing mode
816 var units = 10;
817 var delta = new fabric.Point(opts.e.movementX, opts.e.movementY);
818
819 stage.canvas.relativePan(delta);
820 return;
821 }
822
823 if (lumise.ops.downon === null)
824 return;
825
826 if (lumise.ops.moved !== true)
827 lumise.ops.moved = true;
828
829 if (lumise.ops.auto_snap === true) {
830
831 var el = {
832 top: lumise.ops.downon.top-(lumise.ops.downon.height*lumise.ops.downon.scaleY*0.5),
833 left: lumise.ops.downon.left-(lumise.ops.downon.width*lumise.ops.downon.scaleX*0.5),
834 height: lumise.ops.downon.height*lumise.ops.downon.scaleY,
835 width: lumise.ops.downon.width*lumise.ops.downon.scaleX,
836 },
837 limit = lumise.ops.limit_snap,
838 lmx = limit.originX == 'left' ? (limit.width/2) : 0,
839 lmy = limit.originY == 'top' ? (limit.height/2) : 0,
840 yct = limit.left+lmx,
841 xct = limit.top+lmy,
842 xt = '',
843 yl = '',
844 xp = '',
845 yp = '';
846
847 if (Math.abs(lumise.ops.downon.left-yct) <= 3) {
848 yv = 'block';
849 yl = yct;
850 yp = 'center';
851 }else if(Math.abs(el.left-yct) <= 3){
852 yv = 'block';
853 yl = yct;
854 yp = 'left';
855 }else if(Math.abs(el.left+el.width-yct) <= 3){
856 yv = 'block';
857 yl = yct;
858 yp = 'right';
859 }else yv = 'none';
860
861 if (Math.abs(lumise.ops.downon.top-xct) <= 3) {
862 xv = 'block';
863 xt = xct;
864 xp = 'center';
865 }else if(Math.abs(el.top-xct) <= 3){
866 xv = 'block';
867 xt = xct;
868 xp = 'top';
869 }else if(Math.abs(el.top+el.height-xct) <= 3){
870 xv = 'block';
871 xt = xct;
872 xp = 'bottom';
873 }else xv = 'none';
874
875 if (yv === 'none' || xv === 'none') {
876 stage.canvas.getObjects().map(function(obj){
877 if (obj.visible !== false && obj.evented !== false && obj !== lumise.ops.downon){
878
879 ob = {
880 top: obj.top-(obj.height*obj.scaleY*0.5),
881 left: obj.left-(obj.width*obj.scaleX*0.5),
882 height: obj.height*obj.scaleY,
883 width: obj.width*obj.scaleX,
884 };
885
886 if (yv === 'none'){
887 if (Math.abs(el.left- ob.left) <= 2){
888 yl = ob.left;
889 yv = 'block';
890 yp = 'left';
891 }else if (
892 Math.abs(
893 (el.left + el.width) - (ob.left + ob.width)
894 ) <= 2
895 ){
896 yl = ob.left + ob.width;
897 yv = 'block';
898 yp = 'right';
899 }else if (
900 Math.abs(el.left - (ob.left+ob.width)) <= 2
901 ){
902 yl = ob.left+ob.width;
903 yv = 'block';
904 yp = 'left';
905 }else if (
906 Math.abs((el.left + el.width) - ob.left) <= 2
907 ){
908 yl = ob.left;
909 yv = 'block';
910 yp = 'right';
911 }else if (Math.abs((el.left+(el.width/2)) - (ob.left+(ob.width/2))) <= 2){
912 yl = ob.left+(ob.width/2);
913 yv = 'block';
914 yp = 'ycenter';
915 }
916 }
917 if (xv === 'none'){
918 if (
919 Math.abs(el.top - ob.top) <= 2
920 ){
921 xt = ob.top;
922 xv= 'block';
923 xp = 'top';
924 }else if (
925 Math.abs(
926 (el.top + el.height) - (ob.top + ob.height)
927 ) <= 2
928 ){
929 xt = ob.top + ob.height;
930 xv = 'block';
931 xp = 'bottom';
932 }else if (
933 Math.abs(el.top - (ob.top+ob.height)) <= 2
934 ){
935 xt = ob.top+ob.height;
936 xv = 'block';
937 xp = 'top';
938 }else if (
939 Math.abs((el.top + el.height) - ob.top) <= 2
940 ){
941 xt = ob.top;
942 xv = 'block';
943 xp = 'bottom';
944 }else if (Math.abs((el.top+(el.height/2)) - (ob.top+(ob.height/2))) <= 2){
945 xt = ob.top+(ob.height/2);
946 xv = 'block';
947 xp = 'ycenter';
948 }
949 }
950 }
951 });
952 }
953
954 stage.lineX.css({'top': ((xt*zoom)+view[5])+'px', 'display': xv});
955 stage.lineY.css({'left': ((yl*zoom)+view[4])+'px', 'display': yv});
956
957 if (yv == 'block') {
958
959 switch (yp) {
960 case 'center' :
961 lumise.ops.downon.set('left', limit.left+lmx);
962 break;
963 case 'left' :
964 lumise.ops.downon.set('left', yl+(el.width/2));
965 break;
966 case 'right' :
967 lumise.ops.downon.set('left', yl-(el.width/2));
968 break;
969 case 'ycenter' :
970 lumise.ops.downon.set('left', yl);
971 break;
972 }
973 gri = true;
974 }
975
976 if (xv == 'block') {
977
978 switch (xp) {
979 case 'center' :
980 lumise.ops.downon.set('top', limit.top+lmy);
981 break;
982 case 'top' :
983 lumise.ops.downon.set('top', xt+(el.height/2));
984 break;
985 case 'bottom' :
986 lumise.ops.downon.set('top', xt-(el.height/2));
987 break;
988 case 'xcenter' :
989 lumise.ops.downon.set('top', xt);
990 break;
991 }
992 gri = true;
993 }
994
995 };
996
997 if (
998 limit === stage.limit_zone &&
999 lumise.ops.downon.group_pos &&
1000 lumise.ops.original_pos &&
1001 lumise.ops.original_pos[lumise.ops.downon.id] &&
1002 (
1003
1004 lumise.ops.downon.left != lumise.ops.original_pos[lumise.ops.downon.id][0] ||
1005 lumise.ops.downon.top != lumise.ops.original_pos[lumise.ops.downon.id][1]
1006 )
1007 ) {
1008
1009
1010 var oldpos = lumise.ops.original_pos[lumise.ops.downon.id];
1011
1012 stage.canvas.getObjects().map(function(o) {
1013 if (
1014 o.group_pos == lumise.ops.downon.group_pos &&
1015 o.id != lumise.ops.downon.id
1016 ) {
1017 o.set({
1018 left: lumise.ops.original_pos[o.id][0] + (lumise.ops.downon.left-oldpos[0]),
1019 top: lumise.ops.original_pos[o.id][1] + (lumise.ops.downon.top-oldpos[1]),
1020 });
1021 }
1022 });
1023 gri = true;
1024 }
1025
1026 if (gri === true)
1027 stage.canvas.renderAll();
1028
1029 },
1030
1031 'after:render': function(e){
1032 lumise.actions.do('after:render');
1033 }
1034
1035 },
1036
1037 do : {
1038
1039 deactiveAll : function() {
1040 lumise.stage().canvas.deactivateAll();
1041 lumise.stage().canvas.renderAll();
1042 lumise.e.tools.attr({'data-view': 'standard'});
1043 $('#lumise-layers li.active').removeClass('active');
1044 }
1045
1046 },
1047
1048 roundRect : function (ctx, x, y, width, height, radius, fill, stroke) {
1049
1050 if (typeof stroke == 'undefined') {
1051 stroke = true;
1052 };
1053
1054 if (typeof radius === 'undefined') {
1055 radius = 5;
1056 };
1057
1058 if (typeof radius === 'number') {
1059 radius = {tl: radius, tr: radius, br: radius, bl: radius};
1060 } else {
1061 var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
1062 for (var side in defaultRadius) {
1063 radius[side] = radius[side] || defaultRadius[side];
1064 }
1065 };
1066
1067
1068 ctx.beginPath();
1069 ctx.moveTo(x + radius.tl, y);
1070 ctx.lineTo(x + width - radius.tr, y);
1071 ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
1072 ctx.lineTo(x + width, y + height - radius.br);
1073 ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
1074 ctx.lineTo(x + radius.bl, y + height);
1075 ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
1076 ctx.lineTo(x, y + radius.tl);
1077 ctx.quadraticCurveTo(x, y, x + radius.tl, y);
1078 ctx.closePath();
1079 if (fill) {
1080 ctx.fill();
1081 };
1082
1083 if (stroke) {
1084 ctx.strokeStyle="red";
1085 ctx.stroke();
1086 };
1087
1088 },
1089
1090 clipto : function (ctx, obj) {
1091
1092 if (!obj || !obj.canvas)
1093 return;
1094
1095 var stage = lumise.stage();
1096
1097 if (stage.canvas.getActiveGroup())
1098 obj = stage.canvas.getActiveGroup();
1099
1100 var centerPoint = obj.getCenterPoint(),
1101 clipRect = stage.limit_zone,
1102 scaleXTo = (1 / obj.scaleX),
1103 scaleYTo = (1 / obj.scaleY),
1104 skewXTo = -obj.skewX/52,
1105 skewYTo = -obj.skewY/52;
1106
1107 if (obj.imagebox !== undefined && obj.imagebox !== '') {
1108
1109 var bss = {},
1110 obs = stage.canvas.getObjects();
1111
1112 obs.map(function(o) {
1113 if (o.type == 'imagebox')
1114 o.set('opacity', 1);
1115 });
1116
1117 obs.map(function(o) {
1118 if (o.id == obj.imagebox) {
1119 clipRect = {
1120 left: o.left - (o.width/2),
1121 top: o.top - (o.height/2),
1122 strokeWidth: 1,
1123 width: o.width,
1124 height: o.height
1125 };
1126 o.set('opacity', 0.25);
1127 }
1128 });
1129
1130
1131 }
1132
1133 if (obj.flipX)
1134 scaleXTo = -scaleXTo;
1135 if (obj.flipY)
1136 scaleYTo = -scaleYTo;
1137
1138
1139 ctx.save();
1140 ctx.translate(0, 0);
1141 ctx.transform(1, skewYTo, 0, 1, 0, 0);
1142 ctx.transform(1, 0, skewXTo, 1, 0, 0);
1143 ctx.scale(scaleXTo, scaleYTo);
1144 ctx.rotate((obj.angle * -1) * (Math.PI / 180));
1145
1146 var x = (clipRect.left) - centerPoint.x + clipRect.strokeWidth,
1147 y = (clipRect.top) - centerPoint.y + clipRect.strokeWidth,
1148 w = clipRect.width - clipRect.strokeWidth,
1149 h = clipRect.height - clipRect.strokeWidth;
1150
1151 ctx.beginPath();
1152 ctx.roundRect(x, y, w, h, clipRect.radius ? clipRect.radius : 0);
1153
1154 ctx.fillStyle = 'transparent';
1155 ctx.fill();
1156 ctx.closePath();
1157 ctx.restore();
1158
1159 },
1160
1161 sides : {},
1162
1163 text : function(ops){
1164
1165 if (ops.fontFamily && ops.fontFamily.indexOf('"') === -1)
1166 ops.fontFamily = '"'+ops.fontFamily+'"';
1167
1168 if (lumise.data.text_direction == '1') {
1169 ops.originX = lumise.data.rtl == '1' ? 'right' : 'left';
1170 ops.originY = 'top';
1171 };
1172
1173 var fill_default = lumise.get.color('invert');
1174
1175 if (lumise.data.colors !== undefined && lumise.data.colors !== '') {
1176 fill_default = lumise.data.colors.split(',')[0];
1177 if (fill_default.indexOf(':') > -1)
1178 fill_default = fill_default.split(':')[1];
1179 fill_default = fill_default.split('@')[0];
1180 };
1181
1182 ops.editable = (lumise.data.rtl != '1');
1183
1184 var limit = lumise.stage().limit_zone,
1185 _ops = $.extend({
1186 left: limit.left + (limit.width/2),
1187 top: limit.top + (limit.height/2),
1188 angle: 0,
1189 textAlign: 'center',
1190 fill: fill_default,
1191 name: ops.text ? ops.text : 'Sample Text'
1192 }, ops),
1193 object = new fabric.IText(ops.text ? ops.text : 'Sample Text', _ops);
1194
1195 object.set({
1196 clipTo: function(ctx) {
1197 try{
1198 return lumise.objects.clipto(ctx, object);
1199 }catch(ex){}
1200 }
1201 });
1202
1203 return object;
1204
1205 },
1206
1207 qrcode : function(text, color, callback) {
1208
1209 var canvas = lumise.tools.qrcode({
1210 text: text,
1211 foreground: color,
1212 });
1213
1214 fabric.Image.fromURL(canvas.toDataURL(), function(image) {
1215
1216 var stage = lumise.stage();
1217
1218 image.set({
1219 left: stage.limit_zone.left + (stage.limit_zone.width/2),
1220 top: stage.limit_zone.top + (stage.limit_zone.height/2),
1221 width: stage.limit_zone.width*0.7,
1222 height: image.height * ((stage.limit_zone.width*0.7)/image.width),
1223 fill: color,
1224 backgroundColor: lumise.func.invert(color),
1225 name: text,
1226 text: text,
1227 type: 'qrcode',
1228 clipTo: function(ctx) {
1229 return lumise.objects.clipto(ctx, image);
1230 }
1231 });
1232
1233 lumise.design.layers.create({type: 'image', image: image});
1234
1235 callback(image);
1236
1237 });
1238
1239 },
1240
1241 lumise : {
1242
1243 'i-text' : function(ops, callback) {
1244
1245 return callback(lumise.objects.text(ops));
1246
1247
1248 ops.src = 'data:image/svg+xml;base64,'+btoa(lumise.func.buildText(ops));
1249
1250 return this.svg(ops, callback);
1251
1252 /*var svg_text = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100" viewBox="0 0 100 100" xml:space="preserve"><text font-family="Roboto" font-size="30" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(25,25,112);" direction="rtl" text-anchor="end"><tspan x="0" y="50" fill="#191970" direction="rtl" text-anchor="end">ab5@!</tspan></text></svg>';
1253
1254 svg_text = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 500 500">\
1255 <path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />\
1256 <text width="500" font-size="40">\
1257 <textPath xlink:href="#curve">\
1258 Dangerous Curves Ahead\
1259 </textPath>\
1260 </text>\
1261 </svg>';
1262
1263 svg_text = '<svg width="140.453125" height="70.265625" viewBox="58.984375 0 140.453125 70.265625" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="0.843894627118865"><text fill="#FF0000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="" y="" text-anchor="start" font-size="24px" font-family="arial" pattclass="none" data-textcurve="180" data-itemzoom="1 1" data-textspacing="11"><textPath xlink:href="#textPath-item-0"><tspan dy="-11">Hello world</tspan></textPath></text></g><defs><path id="textPath-item-0" d="M 91.609375 70.1074415696873 A 37.5605665696873 37.5605665696873 0 0 1 166.7305081393746 70.1074415696873"></path></defs></svg>';
1264
1265 ops.src = 'data:image/svg+xml;base64,'+btoa(svg_text);
1266
1267 return this.image(ops, callback);*/
1268
1269 ops.editable = false;
1270
1271 callback(lumise.objects.text(ops));
1272
1273 },
1274
1275 'curvedText' : function(ops, callback) {
1276
1277 var limit = lumise.stage().limit_zone;
1278 var fill_default = lumise.get.color('invert');
1279
1280 if (lumise.data.colors !== undefined && lumise.data.colors !== '') {
1281 fill_default = lumise.data.colors.split(',')[0];
1282 if (fill_default.indexOf(':') > -1)
1283 fill_default = fill_default.split(':')[1];
1284 fill_default = fill_default.split('@')[0];
1285 };
1286 ops = $.extend({
1287
1288 left: limit.left + (limit.width/2),
1289 top: limit.top + (limit.height/2),
1290 angle: 0,
1291 textAlign: 'center',
1292 fill: fill_default,
1293 textAlign: 'center',
1294 radius: 50,
1295 spacing: 5
1296
1297 }, ops);
1298
1299 var object = new fabric.CurvedText(ops.text ? ops.text : 'Sample Text', ops);
1300
1301 object.set({
1302 clipTo: function(ctx) {
1303 try{
1304 return lumise.objects.clipto(ctx, object);
1305 }catch(ex){}
1306 }
1307 });
1308
1309 callback(object);
1310
1311 },
1312
1313 'image' : function(ops, callback) {
1314
1315 if (ops.src.indexOf('.svg') == ops.src.length-4)
1316 return this.svg(ops, callback);
1317
1318 var stage = lumise.stage(),
1319 active = stage.canvas.getActiveObject(),
1320 replace_active = ops.replace,
1321 do_replace = (
1322 replace_active !== false &&
1323 active !== null &&
1324 active !== undefined &&
1325 typeof active.setElement == 'function' &&
1326 localStorage.getItem('LUMISE-REPLACE-IMAGE') == 'true'
1327 );
1328
1329 if (
1330 do_replace &&
1331 ops.src.indexOf('.svg') !== ops.src.length-4 &&
1332 ops.src.indexOf('data:image/svg+xml;base64') === -1
1333 ) return lumise.func.replace_image(ops.src, active);
1334
1335 fabric.util.loadImage(ops.src, function(img) {
1336
1337 if(img == null) {
1338 lumise.func.notice(lumise.i(33)+ops.src, 'error', 5000);
1339 callback(null);
1340 }else {
1341
1342 var src_data = lumise.func.check_upload_dimensions(img);
1343
1344 if (src_data === null)
1345 return callback(null);
1346
1347 ops.src = src_data;
1348
1349 if (ops.src.indexOf('http') === 0) {
1350
1351 var cv = document.createElement('canvas');
1352
1353 cv.height = img.naturalHeight;
1354 cv.width = img.naturalWidth;
1355 cv.getContext('2d').drawImage(img, 0, 0);
1356 ops.src = cv.toDataURL('image/'+(ops.src.indexOf('.png') === ops.src.length-4 ? 'png' : 'jpeg'));
1357 img.onload = function() {
1358 lumise.stage().canvas.renderAll();
1359 };
1360 img.src = ops.src;
1361 delete cv;
1362 };
1363
1364 if (ops.src.length > 2400000)
1365 lumise.func.notice(lumise.i(53), '', 5000);
1366
1367 var image = new fabric.Image(img),
1368 stage = lumise.stage(),
1369 objs = stage.canvas.getObjects(),
1370 ibx = null;
1371
1372 delete ops.replace;
1373
1374 var imbs = objs.filter(function(o3){return o3.type == 'imagebox'});
1375
1376 if (imbs.length > 0) {
1377 imbs.map(function(o) {
1378 if (objs.filter(function(o3){return o3.imagebox == o.id}).length === 0)
1379 ibx = o;
1380 });
1381 if (ibx === null)
1382 ibx = imbs[0];
1383 }
1384
1385 if (ops.width == undefined) {
1386 ops.width = stage.limit_zone.width*0.85;
1387 ops.height = ops.width*(image.height/image.width);
1388 };
1389
1390 if (ops.height == undefined) {
1391 ops.height = stage.limit_zone.height*0.85;
1392 ops.width = ops.height*(image.width/image.height);
1393 };
1394
1395 if (ops.evented === undefined) {
1396 if (ibx !== null && !do_replace) {
1397
1398 objs.map(function(o) {
1399 if (o.imagebox == ibx.id && o.id != ops.id)
1400 stage.canvas.remove(o);
1401 });
1402
1403 ops.width = ibx.width;
1404 ops.height = image.height*(ibx.width/image.width);
1405 ops.left = ibx.left;
1406 ops.top = ibx.top;
1407
1408 if (ops.height < ibx.height) {
1409 ops.height = ibx.height;
1410 ops.width = image.width*(ops.height/image.height);
1411 };
1412
1413 ibx.ibadded = new Date().getTime();
1414 ops.imagebox = ibx.id;
1415
1416 } else {
1417 if (ops.width > stage.limit_zone.width*0.85) {
1418 ops.height = (stage.limit_zone.width*0.85)*(ops.height/ops.width);
1419 ops.width = stage.limit_zone.width*0.85;
1420 }
1421 if (ops.height > stage.limit_zone.height*0.85) {
1422 ops.width = (stage.limit_zone.height*0.85)*(ops.width/ops.height);
1423 ops.height = stage.limit_zone.height*0.85;
1424 }
1425 }
1426 };
1427
1428 image.set($.extend({
1429 left: stage.limit_zone.left + (stage.limit_zone.width/2),
1430 top: stage.limit_zone.top + (stage.limit_zone.height/2),
1431 width: ops.width,
1432 height: ops.height
1433 }, ops));
1434
1435 if ((ops.filters && ops.filters.length > 0)) {
1436
1437 ops.filters.map(function(fil, ind){
1438 if (fil.color){
1439 ops.filters[ind] = new fabric.Image.filters.Tint({
1440 color: fil.color,
1441 });
1442 }
1443 });
1444
1445 image.set('filters', ops.filters);
1446
1447 image.applyFilters(stage.canvas.renderAll.bind(stage.canvas));
1448
1449 };
1450
1451 image.set('clipTo', function(ctx) {
1452 return lumise.objects.clipto(ctx, image);
1453 });
1454
1455 if (do_replace) {
1456
1457 var olds = {
1458 width: active.width,
1459 height: active.height,
1460 src: image.src,
1461 origin_src: image.src
1462 };
1463
1464 if (
1465 image.src.indexOf('.svg') == image.src.length-4 ||
1466 image.src.indexOf('data:image/svg+xml;base64') === 0
1467 ) {
1468 olds.type = 'svg';
1469 } else olds.type = 'image';
1470
1471 active.setElement(image._element);
1472 active.set(olds);
1473
1474 lumise.ops.importing = false;
1475 lumise.stack.save();
1476
1477 lumise.ops.set_active = active;
1478
1479 callback(null);
1480
1481 } else callback(image);
1482
1483 }
1484 }, { crossOrigin: 'anonymous' });
1485
1486 },
1487
1488 'text-fx' : function(ops, callback) {
1489
1490 var newobj = lumise.objects.text(ops);
1491
1492 ops.width = newobj.width;
1493 ops.height = newobj.height;
1494
1495 delete ops['type'];
1496 delete ops['clipTo'];
1497
1498 if (ops['bridge'] === undefined) {
1499 ops['bridge'] ={
1500 curve: -2.5,
1501 offsetY: 0.5,
1502 bottom: 2.5,
1503 trident: false,
1504 oblique: false,
1505 }
1506 }
1507
1508 var ls = ['angle', 'skewX', 'skewY', 'opacity'], ol = {};
1509
1510 ls.map(function(l){
1511 ol[l] = ops[l];
1512 delete ops[l];
1513 });
1514
1515 var textImage = new fabric.Text(ops.text.trim(), ops);
1516 var cacheTextImage = new Image();
1517
1518 cacheTextImage.src = textImage.toDataURL();
1519
1520 var rs = ['width', 'height', 'scaleX', 'scaleY', 'fontSize', 'stroke', 'strokeWidth'];
1521
1522 rs.map(function(r){
1523 ops[r] = ops[r]*2;
1524 });
1525
1526 textImage = new fabric.Text(ops.text.trim(), ops);
1527 var cacheTextImageLarge = new Image();
1528 cacheTextImageLarge.src = textImage.toDataURL();
1529
1530 rs.map(function(r){
1531 ops[r] = ops[r]/2;
1532 });
1533
1534 ls.map(function(l){
1535 ops[l] = ol[l];
1536 });
1537
1538 fabric.Image.fromURL(textImage.toDataURL(), function(image) {
1539
1540 ops['type'] = 'text-fx';
1541 ops['cacheTextImage'] = cacheTextImage;
1542 ops['cacheTextImageLarge'] = cacheTextImageLarge;
1543 ops.height = ops.height*2.5;
1544 ops['clipTo'] = function(ctx) {
1545 return lumise.objects.clipto(ctx, image);
1546 };
1547
1548 var cdata = lumise.func.bridgeText(image._element, ops['bridge']);
1549
1550 delete ops.stroke;
1551 delete ops.strokeWidth;
1552
1553 image.set(ops);
1554
1555 if ((ops.filters && ops.filters.length > 0)) {
1556
1557 var stage = lumise.stage();
1558
1559 ops.filters.map(function(fil, ind){
1560 if (fil.color){
1561 ops.filters[ind] = new fabric.Image.filters.Tint({
1562 color: fil.color,
1563 });
1564 }
1565 });
1566
1567 image.set('filters', ops.filters);
1568
1569 image.applyFilters(stage.canvas.renderAll.bind(stage.canvas));
1570
1571 };
1572
1573
1574 var _w = ops.width,
1575 _h = ops.height;
1576
1577 image.setSrc(cdata, function(){
1578 image.set({height: _h, width: _w});
1579 return callback(image);
1580 });
1581
1582 });
1583
1584 },
1585
1586 'qrcode' : function(ops, callback) {
1587
1588 this.image(ops, callback);
1589
1590 },
1591
1592 'svg' : function(ops, callback) {
1593
1594 if (ops.src === undefined)
1595 return callback(null);
1596
1597 var donow = function(ops) {
1598
1599 if (ops.src && ops.src.indexOf('data:image/svg+xml;base64,') === 0) {
1600
1601 var xsvg = atob(ops.src.split('base64,')[1]);
1602
1603 xsvg = xsvg.replace('width="undefined"', '').replace('height="undefined"', '');
1604
1605 var wrp = $('<div>'+xsvg+'</div>'),
1606 svg = wrp.find('svg').get(0),
1607 vb = svg.getAttribute('viewBox') ?
1608 svg.getAttribute('viewBox') :
1609 svg.getAttribute('viewbox');
1610
1611 vb = vb.replace(/\,/g, ' ').replace(/ /g, ' ').split(' ');
1612
1613 if (!svg.getAttribute('width') || !svg.getAttribute('height')) {
1614 svg.setAttribute('width', vb[2]);
1615 svg.setAttribute('height', vb[3]);
1616 };
1617
1618 if (ops.height === undefined)
1619 ops.height = ops.width*(vb[3]/vb[2]);
1620
1621 ops.src = 'data:image/svg+xml;base64,'+btoa(wrp.html());
1622
1623 delete wrp;
1624 delete svg;
1625 delete vb;
1626
1627 };
1628
1629 return lumise.objects.lumise.image(ops, callback);
1630
1631 /*
1632 * Apply a solution to fix SVG for FireFox
1633 * Try to add width & height attributes in <svg>
1634 */
1635
1636 fabric.loadSVGFromURL(ops.src, function(objects, options) {
1637
1638 delete ops.type;
1639 delete ops.width;
1640 delete ops.height;
1641
1642 var shape = fabric.util.groupSVGElements(objects, options),
1643 editzone = lumise.stage().edit_zone;
1644
1645 if (ops.height === undefined) {
1646 ops.width = shape.width;
1647 ops.height = shape.height;
1648 if (ops.scaleX == 1 && ops.width > editzone.width) {
1649 ops.scaleX = (editzone.width*0.8)/ops.width;
1650 ops.scaleY = (editzone.width*0.8)/ops.width;
1651 };
1652 };
1653
1654 shape.set(ops);
1655
1656 shape.set('clipTo', function(ctx) {
1657 return lumise.objects.clipto(ctx, shape);
1658 });
1659
1660 callback(shape);
1661
1662 });
1663
1664 };
1665
1666 if (/*ops.paths === undefined && */ops.src.indexOf('http') === 0) {
1667 $.ajax({
1668 url: ops.src,
1669 method: 'GET',
1670 dataType: 'text',
1671 statusCode: {
1672 403: function(){
1673 lumise.func.notice(lumise.i(33)+'(403) '+ops.src, 'error', 3500);
1674 callback(null);
1675 },
1676 404: function() {
1677 lumise.func.notice(lumise.i(33)+'(404) '+ops.src, 'error', 3500);
1678 callback(null);
1679 }
1680 },
1681 success: function(res) {
1682 ops.src = 'data:image/svg+xml;base64,'+btoa(res);
1683 ops.fill = '';
1684 donow(ops);
1685 }
1686 });
1687
1688 }else{
1689
1690 donow(ops);
1691 }
1692
1693 },
1694
1695 'path' : function(ops, callback) {
1696
1697 var limit = lumise.stage().limit_zone,
1698 path = new fabric.Path(ops.path, $.extend({
1699 left: limit.left + (limit.width/2),
1700 top: limit.top + (limit.height/2),
1701 }, ops));
1702
1703 path.set('clipTo', function(ctx) {
1704 return lumise.objects.clipto(ctx, path);
1705 });
1706
1707 path.set('fill', null);
1708
1709 callback(path);
1710
1711 },
1712
1713 'path-group' : function(ops, callback) {
1714 return this.svg(ops, callback);
1715 },
1716
1717 'imagebox' : function(ops, callback) {
1718
1719 if (ops.src !== undefined)
1720 return this.image(ops, callback);
1721
1722 var img = new Image(),
1723 st = lumise.stage();
1724
1725 ops = $.extend({
1726 width: st.limit_zone.width,
1727 height: st.limit_zone.height,
1728 left: st.limit_zone.left,
1729 top: st.limit_zone.top,
1730 border: 10,
1731 background: '#eee',
1732 button: lumise.data.assets+'assets/images/imagebox-btn.png',
1733 imagebox: ''
1734 }, ops, true);
1735
1736 ops.width -= (ops.border*2);
1737 ops.height -= (ops.border*2);
1738 //ops.top += ops.border;
1739 //ops.left += ops.border;
1740
1741 ops.border = 0;
1742
1743 ops.evented = false;
1744 ops.selectable = false;
1745 ops.lockMovementX = true;
1746 ops.lockMovementY = true;
1747
1748 //ops.originX = 'left';
1749 //ops.originY = 'top';
1750
1751 var canvas = document.createElement('canvas');
1752 ctx = canvas.getContext('2d'),
1753
1754 canvas.width = (ops.width*2);
1755 canvas.height = (ops.height*2);
1756
1757 ctx.fillStyle = ops.background;
1758 ctx.fillRect(0, 0, canvas.width, canvas.height);
1759
1760 img.onload = function() {
1761
1762 ops.boxbtn = [this.width, this.height];
1763
1764 ctx.drawImage(this,
1765 ops.width - (this.width/2),
1766 ops.height - (this.height/2),
1767 ops.boxbtn[0], ops.boxbtn[1]
1768 );
1769
1770 ops.src = canvas.toDataURL('image/jpeg');
1771
1772 return lumise.objects.lumise.image(ops, callback);
1773
1774 };
1775 img.src = ops.button;
1776
1777 }
1778
1779 },
1780
1781 icons : {
1782
1783 init: function (){
1784
1785 var maps = {
1786 'del': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ccc"><path d="m405 137l-30-30-119 119-119-119-30 30 119 119-119 119 30 30 119-119 119 119 30-30-119-119z"></path></svg>'),
1787 'rot': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ccc"><path d="m295 66c-96 0-175 66-187 160l-81-16l80 118l118-79l-75-15c10-60 73-126 146-126c81 0 146 69 146 150c0 80-80 146-144 146l0 42c107 0 187-86 187-190c0-104-86-190-190-190z"></path></svg>'),
1788 'rez': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ccc"><path d="M96,96v128l50.078-50l9.014,9l183.286,183L288.3,416h128.2V288l-50.078,50l-128.2-128l-64.1-64L224.2,96H96z"/></svg>'),
1789 'dou': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ccc"><path d="m160 352l160 0l0-128l96 0l0 256l-256 0z m-160-320l0 320l128 0l0 160l320 0l0-320l-128 0l0-160z"></path></svg>'),
1790 'gro': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ccc"><path d="m388 140l-31-31-140 139 31 31z m93-31l-233 231-92-91-30 31 122 123 264-263z m-481 171l123 123 31-31-122-123z"></path></svg>'),
1791 'wrot': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#777"><path d="m295 66c-96 0-175 66-187 160l-81-16l80 118l118-79l-75-15c10-60 73-126 146-126c81 0 146 69 146 150c0 80-80 146-144 146l0 42c107 0 187-86 187-190c0-104-86-190-190-190z"></path></svg>'),
1792 'wrez': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#777"><path d="M96,96v128l50.078-50l9.014,9l183.286,183L288.3,416h128.2V288l-50.078,50l-128.2-128l-64.1-64L224.2,96H96z"/></svg>'),
1793 'wdou': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#777"><path d="m160 352l160 0l0-128l96 0l0 256l-256 0z m-160-320l0 320l128 0l0 160l320 0l0-320l-128 0l0-160z"></path></svg>'),
1794 'wgro': btoa('<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#777"><path d="m388 140l-31-31-140 139 31 31z m93-31l-233 231-92-91-30 31 122 123 264-263z m-481 171l123 123 31-31-122-123z"></path></svg>')
1795 };
1796
1797 Object.keys(maps).map(function(i) {
1798 lumise.objects.icons[i] = new Image();
1799 lumise.objects.icons[i].src = 'data:image/svg+xml;base64,'+maps[i];
1800 });
1801 }
1802 }
1803
1804 },
1805
1806 design : {
1807
1808 events : function(){
1809
1810 var onInput = function(e){
1811
1812 var c = lumise.stage().canvas,
1813 a = c.getActiveObject(),
1814 callback = this.getAttribute('data-callback'),
1815 action = this.getAttribute('data-action'),
1816 ratio = parseFloat(this.getAttribute('data-ratio')) || 1,
1817 val = showInput(e, this);
1818
1819 if (callback) {
1820
1821 if (lumise.design.nav.callback[callback])
1822 lumise.design.nav.callback[callback](this, e, ratio);
1823
1824 }else if (action && a && !e.isTrigger){
1825 a.set(action, val*ratio);
1826 c.renderAll();
1827 }
1828
1829 },
1830 showInput = function(e, el) {
1831
1832 if (!el)
1833 el = this;
1834
1835 var val = el.value,
1836 unit = el.getAttribute('data-unit') || '',
1837 ratio = parseFloat(el.getAttribute('data-ratio')) || 1;
1838
1839 if (el.getAttribute('data-range')) {
1840 el.getAttribute('data-range').split(',').map(function(m){
1841 if (Math.abs(val-parseFloat(m)) < 5)
1842 val = m;
1843 });
1844 }
1845
1846 el.setAttribute('data-value', val+unit);
1847
1848 if (el.parentNode.getAttribute('data-range') == 'helper')
1849 el.parentNode.setAttribute('data-value', val+unit);
1850
1851 return val;
1852
1853 };
1854
1855 lumise.trigger({
1856
1857 el: $('#LumiseDesign'),
1858
1859 events: {
1860
1861 'input[type="range"][data-view="lumise"]:input': showInput,
1862 'input[type="range"][data-action]:input, input[type="range"][data-callback]:input': onInput,
1863 'input[type="range"][data-callback="textFX"]:change': 'textFX',
1864 '#lumise-stroke-fix-colors li': 'strokeColor',
1865
1866 'div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li[data-tab]': 'leftNav',
1867 '#lumise-general-status': 'general_status',
1868 'div#lumise-left #lumise-side-close': 'close_side',
1869 'svg#lumise-nav-file': 'resp_file',
1870 '#lumise-stage-nav': 'stages',
1871 '#lumise-cliparts': 'cliparts',
1872 '#lumise-uploads header button': 'upload_nav',
1873 '#lumise-left .lumise-x-thumbn:mouseover,#lumise-left .lumise-x-thumbn:mouseout': 'x_thumbn_preview',
1874 '#lumise-left button[data-func="show-categories"]': 'x_thumbn_categories',
1875 '#lumise-cliparts-list:scroll': 'cliparts_more',
1876 '#lumise-templates-list:scroll': 'templates_more',
1877 '#lumise-uploads div[data-tab="internal"]:scroll': 'images_more',
1878 '#lumise-shapes:scroll': 'shapes_more',
1879
1880 '.lumise-tab-body-wrp .lumise-xitems-list:scroll': lumise.xitems.scroll_more,
1881
1882 '#lumise-saved-designs:scroll': 'designs_more',
1883
1884 '#lumise-templates-search-inp:click,#lumise-templates-search-inp:keydown,#lumise-templates-search-categories:change': 'templates_search',
1885 '#lumise-cliparts-search-inp:click,#lumise-cliparts-search-inp:keydown,#lumise-cliparts-search-categories:change': 'cliparts_search',
1886 '.lumise-xitems-search>input:click,.lumise-xitems-search>input:keydown,.lumise-xitems-search>input:change': lumise.xitems.search,
1887
1888 'div#lumise-top-tools>ul.lumise-top-nav>li[data-tool], div#lumise-navigations ul li[data-tool]': 'topTools',
1889
1890 'input#lumise-zoom[type="range"]:input, #lumise-zoom-wrp i[data-zoom], #lumise-zoom-wrp:mousewheel': 'doZoom',
1891 'ul[data-mode="text"] .text-format': 'textFormat',
1892
1893 '.lumise-edit-text:input': 'editText',
1894 '#lumise-text-mask-guide': function(){
1895 lumise.tools.lightbox({
1896 content: '<img src="'+lumise.data.assets+'/assets/images/text-mask-guide.jpg" />'
1897 });
1898 },
1899
1900 '#lumise-flip-x:change, #lumise-flip-y:change': 'flip',
1901 '#lumise-lock-position:change': 'lock_position',
1902 '#lumise-reset-transform': 'resetTransform',
1903
1904 'input#lumise-curved:change': 'enableCurved',
1905 'input#lumise-fill:input,input#lumise-fill:change': 'fillColor',
1906 'span.lumise-save-color': 'saveColor',
1907 'input#lumise-stroke:input, input#lumise-stroke:change': 'fillStroke',
1908
1909 'input#lumise-svg-fill:input,input#lumise-svg-fill:change': 'svgFillColor',
1910 '#lumise-svg-colors [data-func]': 'svgFuncs',
1911
1912 'li[data-tool="arrange"] button[data-arrange]' : 'doArrange',
1913 '.lumise-more-fonts': 'load_fonts',
1914 '#lumise-fonts' : 'select_font',
1915
1916 '#lumise-upload-form input[type="file"]:change': function(){
1917 lumise.func.process_files(this.files);
1918 },
1919
1920 '#lumise-design-undo': lumise.stack.back,
1921 '#lumise-design-redo': lumise.stack.forward,
1922 '#lumise-save-btn': lumise.tools.save,
1923
1924 '#lumise-discard-drawing': 'exit_drawing',
1925 '#lumise-text-effect img[data-effect]': 'text_effect',
1926 '#lumise-text-fx-trident:change': 'textFX',
1927 'input[data-image-fx][type="range"]:change': 'imageFX',
1928
1929 '#lumise-drawing-color:change': function(e){
1930 lumise.design.nav.callback.drawing(e);
1931 },
1932 '#lumise-auto-alignment:change, #lumise-template-append:change, #lumise-replace-image:change': 'options',
1933
1934 'button[data-func="update-text-fx"]': lumise.func.update_text_fx,
1935 '#lumise-bug button.submit': 'bug_submit',
1936
1937 '#lumise-image-fx-mode:change': 'selectImageFX',
1938 '#lumise-image-fx-fx>li[data-fx]': 'imageColorFX',
1939
1940 '#lumise-saved-designs': 'saved_designs',
1941 '#lumise-designs-search input:input': 'saved_designs_search',
1942 '#lumise-languages li': 'change_lang',
1943 'button#lumise-change-product, button#lumise-select-product': 'change_product',
1944
1945 '#lumise-file-nav li[data-func]': 'fileNav',
1946 '#lumise-print-nav .doPrint:change, #lumise-print-nav button[data-func]': 'doPrint',
1947 '.lumise-tabs-nav': 'nav',
1948 '#lumise-shares-wrp': 'doShare',
1949
1950 '#lumise-cart-items': 'my_cart',
1951 'a[data-view="cart-details"]': lumise.render.cart_details,
1952
1953 },
1954
1955 leftNav: function(e) {
1956
1957 var tab = this.getAttribute('data-tab'),
1958 stage = lumise.stage();
1959
1960 if (stage === undefined || stage.canvas === undefined)
1961 return;
1962
1963 /*lumise.tools.discard();*/
1964
1965 if (tab == 'drawing') {
1966 stage.canvas.isDrawingMode = true;
1967 stage.limit_zone.visible = true;
1968 var fill_default = lumise.get.color('invert');
1969
1970 if (lumise.data.colors !== undefined && lumise.data.colors !== '') {
1971 fill_default = lumise.data.colors.split(',')[0];
1972 if (fill_default.indexOf(':') > -1)
1973 fill_default = fill_default.split(':')[1];
1974 fill_default = fill_default.split('@')[0];
1975 };
1976 stage.canvas.freeDrawingBrush.color = fill_default;
1977 lumise.get.el('top-tools').attr({'data-view': 'drawing'});
1978 } else if (tab == 'uploads') {
1979 if (lumise.get.el('external-images').hasClass('active')) {
1980 $('#lumise-external-images iframe').each(function(){
1981 this.contentWindow.postMessage({
1982 action : 'refresh'
1983 }, "*");
1984 });
1985 }
1986 } else if (stage && stage.canvas) {
1987 stage.canvas.isDrawingMode = false;
1988 stage.limit_zone.visible = false;
1989 lumise.get.el('top-tools').attr({'data-view': 'standard'});
1990 stage.canvas.renderAll();
1991 };
1992
1993 if (this.getAttribute('data-load')) {
1994 if (typeof lumise.design.nav.load[this.getAttribute('data-load')] == 'function')
1995 lumise.design.nav.load[this.getAttribute('data-load')](e);
1996 this.removeAttribute('data-load');
1997 };
1998
1999 $('#lumise-left .lumise-tab-body-wrp.active,#lumise-left ul.lumise-left-nav li[data-tab].active').removeClass('active');
2000 $('#lumise-left [data-view="preactive"]').removeAttr('data-view');
2001 $(this).addClass('active').prev('li[data-tab]').attr({'data-view': 'preactive'});
2002
2003 $('#lumise-'+this.getAttribute('data-tab')).addClass('active');
2004 $('#lumise-side-close').addClass('active');
2005
2006 if (
2007 this.getAttribute('data-callback') &&
2008 typeof lumise.design.nav.callback[this.getAttribute('data-callback')] == 'function'
2009 )
2010 lumise.design.nav.callback[this.getAttribute('data-callback')](e);
2011
2012 },
2013
2014 general_status: function(e) {
2015
2016 var func = e.target.getAttribute('data-func');
2017
2018 if (!func)
2019 return;
2020
2021 e.preventDefault();
2022
2023 switch (func) {
2024
2025 case 'cancel-cart':
2026
2027 lumise.func.set_url('cart', null);
2028
2029 lumise.get.el('general-status').html(
2030 '<span>\
2031 <text>\
2032 <i class="lumisex-android-alert"></i> '+
2033 lumise.i(184)+
2034 '</text>\
2035 <a href="#clear-designs" data-btn="cancel" data-func="clear-designs">\
2036 '+lumise.i(185)+'\
2037 </a>\
2038 </span>'
2039 );
2040
2041 lumise.render.cart_change();
2042
2043 break;
2044
2045 case 'cancel-design':
2046
2047 lumise.func.set_url('my_design', null);
2048
2049 lumise.get.el('general-status').html(
2050 '<span>\
2051 <text>\
2052 <i class="lumisex-android-alert"></i> '+
2053 lumise.i(184)+
2054 '</text>\
2055 <a href="#clear-designs" data-btn="cancel" data-func="clear-designs">\
2056 '+lumise.i(185)+'\
2057 </a>\
2058 </span>'
2059 );
2060
2061 lumise.render.cart_change();
2062
2063 break;
2064
2065 case 'save-design':
2066 lumise.func.export('designs');
2067 lumise.render.refresh_my_designs();
2068 break;
2069
2070 case 'clear-designs':
2071 lumise.tools.clearAll();
2072 lumise.render.cart_change();
2073 lumise.get.el('general-status').html('');
2074 break;
2075 }
2076
2077 },
2078
2079 close_side: function(e) {
2080 $(this).removeClass('active');
2081 $('#lumise-left ul.lumise-left-nav li.active, .lumise-tab-body-wrp.active').removeClass('active');
2082 },
2083
2084 resp_file: function() {
2085
2086 if (!$(this).prev().hasClass('active')){
2087 $(this).prev().addClass('active');
2088 $(this).find('#__m').hide();
2089 $(this).find('#__x').show();
2090 }else{
2091 $(this).prev().removeClass('active');
2092 $(this).find('#__m').show();
2093 $(this).find('#__x').hide();
2094 }
2095
2096 },
2097
2098 stages: function(e) {
2099
2100 var stage = e.target.getAttribute('data-stage'),
2101 wrp = $(this),
2102 prev = $(this).hasClass('preview-designs');
2103
2104 lumise.do_action('stage_nav_click', e);
2105
2106 if (e.target.id == 'lumise-stage-nav' && prev) {
2107 wrp.removeClass('preview-designs').removeClass('stages-expand');
2108 wrp.find('li[data-stage].active').removeClass('active');
2109 wrp.find('li[data-stage="'+lumise.current_stage+'"]').addClass('active');
2110 return;
2111 };
2112
2113 if (!stage) {
2114
2115 var nav = e.target.getAttribute('data-nav') ||
2116 e.target.parentNode.getAttribute('data-nav') ||
2117 e.target.parentNode.parentNode.getAttribute('data-nav'),
2118 actv = lumise.get.el('stage-nav').find('li.active');
2119
2120 if (nav && nav != 'func') {
2121 if (nav == 'prev' && actv.prev('li[data-stage]'))
2122 stage = actv.prev('li[data-stage]').data('stage');
2123 else if (nav == 'next' && actv.next('li[data-stage]'))
2124 stage = actv.next('li[data-stage]').data('stage');
2125 }
2126
2127
2128 } else if (!wrp.hasClass('stages-expand') && !prev){
2129 wrp.addClass('stages-expand');
2130 return;
2131 };
2132
2133 if (
2134 !stage ||
2135 (stage == lumise.current_stage && !prev) ||
2136 !lumise.data.stages[stage]
2137 )return;
2138
2139 if (wrp.hasClass('preview-designs')) {
2140 lumise.func.stage_nav(stage);
2141 return;
2142 };
2143
2144 wrp.removeClass('stages-expand preview-designs');
2145
2146 lumise.active_stage(stage, function() {
2147 lumise.design.layers.build();
2148 lumise.get.el('zoom').val(lumise.stage().canvas.getZoom()*100).trigger('input');
2149 lumise.e.tools.attr({'data-view': 'standard'});
2150 });
2151
2152 },
2153
2154 cliparts: function(e) {
2155
2156 var el = e.target.getAttribute('data-act') ? $(e.target) : $(e.target).closest('[data-act]'),
2157 act = null;
2158
2159 if (el.get(0))
2160 act = el.data('act');
2161
2162 if (!act) return;
2163
2164 switch (act) {
2165
2166 case 'category' :
2167
2168 var tm = lumise.get.el('cliparts-list');
2169
2170 lumise.get.el('cliparts').find('.lumise-cliparts-category.selected').removeClass('selected');
2171 el.addClass('selected');
2172 lumise.get.el('cliparts').addClass('selected');
2173
2174 lumise.get.el('cliparts-list')
2175 .data({'category': el.data('category')})
2176 .html('<header>\
2177 <span data-act="back" title="'+lumise.i(43)+'">\
2178 <i class="lumisex-android-arrow-back"></i>\
2179 </span>\
2180 <span class="lumise-category-title">'+lumise.i(44)+'</span>\
2181 </header><i class="lumise-spinner white x3 mt2"></i>');
2182
2183 lumise.post({
2184 action: 'cliparts',
2185 category: el.data('category'),
2186 q: lumise.ops.cliparts_q,
2187 index: 0
2188 });
2189 lumise.ops.cliparts_index = 0;
2190 break;
2191
2192 case 'back' :
2193 lumise.get.el('cliparts').find('.lumise-cliparts-category.selected').removeClass('selected');
2194 lumise.get.el('cliparts').removeClass('selected');
2195 lumise.get.el('cliparts-list').data({'category': ''});
2196 break;
2197 }
2198
2199 },
2200
2201 do_search: function(type) {
2202
2203 lumise.ops[type+'_index'] = 0;
2204 lumise.ops[type+'_loading'] = false;
2205
2206 lumise.get.el(type+'-list').find('ul').html('');
2207 lumise.get.el(type+'-list').trigger('scroll');
2208
2209 },
2210
2211 templates_search: function(e) {
2212
2213 if (e.type == 'click') {
2214 setTimeout(function(el){
2215 if (lumise.ops.templates_q != el.value && el.value === '') {
2216 lumise.ops.templates_q = el.value;
2217 e.data.do_search('templates');
2218 }
2219 }, 100, this);
2220 }
2221
2222 if (this.tagName == 'INPUT' && e.keyCode !== 13)
2223 return;
2224
2225 if (this.tagName == 'INPUT')
2226 lumise.ops.templates_q = this.value;
2227
2228 e.data.do_search('templates');
2229
2230 },
2231
2232 cliparts_search: function(e) {
2233
2234 if (e.type == 'click') {
2235 setTimeout(function(el){
2236 if (lumise.ops.cliparts_q != el.value && el.value === '') {
2237 lumise.ops.cliparts_q = el.value;
2238 e.data.do_search('cliparts');
2239 }
2240 }, 100, this);
2241 }
2242
2243 if (this.tagName == 'INPUT' && e.keyCode !== 13)
2244 return;
2245
2246 if (this.tagName == 'INPUT')
2247 lumise.ops.cliparts_q = this.value;
2248
2249 e.data.do_search('cliparts');
2250
2251 },
2252
2253 upload_nav : function(e) {
2254
2255 var wrp = $(this).closest('#lumise-uploads'),
2256 nav = this.getAttribute('data-nav'),
2257 tab = wrp.find('div[data-tab="'+nav+'"]');
2258
2259 if (nav == 'external') {
2260 if (tab.find('iframe').length === 0)
2261 tab.html('<iframe src="https://services.lumise.com/images/"></iframe>');
2262 else if($(this).hasClass('active')) {
2263 tab.scrollTop(0);
2264 tab.find('iframe').get(0).contentWindow.postMessage({
2265 action : 'scrollTop'
2266 }, "*");
2267 }
2268 }
2269
2270 wrp.find('header button.active, div[data-tab].active').removeClass('active');
2271
2272 $(this).addClass('active');
2273 tab.addClass('active');
2274
2275 e.preventDefault();
2276
2277 },
2278
2279 x_thumbn_preview : function(e) {
2280
2281 if (
2282 e.target.tagName == 'I' &&
2283 e.target.getAttribute('data-info') &&
2284 e.target.parentNode.getAttribute('data-ops')
2285 ) {
2286 if (
2287 e.type == 'mouseover' &&
2288 lumise.ops.drag_start === null
2289 ) {
2290
2291 if (lumise.ops.xtc_timer !== undefined)
2292 clearTimeout(lumise.ops.xtc_timer);
2293 try {
2294 var ops = JSON.parse(e.target.parentNode.getAttribute('data-ops'))[0];
2295 } catch(ex) {
2296 console.warn(ex.message);
2297 console.log(ex);
2298 return;
2299 };
2300
2301 var price = (
2302 (ops.type == 'image' || ops.type == 'template') ?
2303 (ops.price > 0) ? lumise.func.price(ops.price) :
2304 lumise.i(100) : ''
2305 ),
2306 tags = (
2307 ops.type == 'upload' ? lumise.i(84): ops.cates != 'null' && ops.cates != '' ? ops.cates : (
2308 ops.tags != '' && ops.tags != 'null' ? ops.tags : ''
2309 )
2310 ),
2311 do_view = function() {
2312
2313 if (ops.component !== undefined)
2314 ops.url = lumise.xitems.resources[ops.component].url[ops.id];
2315
2316 lumise.get.el('x-thumbn-preview').show().find('>div').html('<img src="'+ops.url+'" />');
2317 lumise.get.el('x-thumbn-preview').find('>header').html(
2318 (ops.name ? ops.name : ops.url.split('/').pop().substr(0, 50))
2319 +'<span>'+price+'</span>'
2320 );
2321
2322 if (tags !== '')
2323 lumise.get.el('x-thumbn-preview').find('>footer').show().html(lumise.i(105) +' '+tags);
2324 else
2325 lumise.get.el('x-thumbn-preview').find('>footer').hide().html('');
2326
2327 },
2328 template_view = function() {
2329
2330 var s = lumise.stage(),
2331 c = lumise.get.color();
2332
2333 lumise.get.el('x-thumbn-preview').show().find('>div').html(
2334 '<div class="lumise-template-preview">\
2335 <img style="background:'+c+'" src="'+s.product._element.src+'" />\
2336 <div class="lumise-tp-limit"></div>\
2337 </div>'
2338 );
2339
2340 lumise.get.el('x-thumbn-preview').find('img').on('load', function(){
2341
2342 var el = $(this).parent().find('.lumise-tp-limit'),
2343 ratio = s.product_width ? this.offsetWidth/s.product_width : 1,
2344 w = Math.round(s.edit_zone.width*ratio),
2345 h = Math.round(s.edit_zone.height*ratio),
2346 t = (s.edit_zone.top*ratio),
2347 l = (s.edit_zone.left*ratio);
2348
2349 el.css({
2350 marginLeft: l+'px',
2351 marginTop: t+'px',
2352 height: (h%2 != 0 ? h+1 : h)+'px',
2353 width: (w%2 != 0 ? w+1 : w)+'px',
2354 borderColor: lumise.func.invert(c)
2355 }).html('<img src="'+ops.screenshot+'" />');
2356
2357 });
2358
2359 lumise.get.el('x-thumbn-preview').find('>header').html(
2360 (ops.name ? ops.name : ops.url.split('/').pop().substr(0, 50))
2361 +'<span>'+price+'</span>'
2362 );
2363 if (tags !== '')
2364 lumise.get.el('x-thumbn-preview').find('>footer').show().html(lumise.i(105) +' '+tags);
2365 else
2366 lumise.get.el('x-thumbn-preview').find('>footer').hide().html('');
2367 };
2368
2369 if (ops.type == 'template') {
2370 return template_view();
2371 }
2372
2373 if (ops.url === undefined) {
2374 ops.url = lumise.cliparts.storage[ops.id] || lumise.cliparts.uploads[ops.id];
2375 }
2376
2377 if (ops.url !== undefined && ops.url.indexOf('dumb-') === 0) {
2378 lumise.indexed.get(ops.url.split('dumb-')[1], 'dumb', function(res){
2379 if (res !== null && res !== undefined) {
2380 lumise.cliparts.uploads[ops.id] = res[0];
2381 ops.url = res[0];
2382 do_view();
2383 delete res;
2384 } else {
2385 lumise.func.notice(lumise.i(165));
2386 }
2387 });
2388 ops.url = '';
2389 }
2390
2391 do_view();
2392
2393 }else{
2394
2395 lumise.ops.xtc_timer = setTimeout(function(){
2396 lumise.get.el('x-thumbn-preview').hide();
2397 }, 350);
2398
2399 }
2400 }
2401
2402 },
2403
2404 x_thumbn_categories : function(e) {
2405
2406 var wrp = lumise.get.el('x-thumbn-preview'),
2407 type = this.getAttribute('data-type');
2408
2409 if (lumise.ops.xtc_timer !== undefined)
2410 clearTimeout(lumise.ops.xtc_timer);
2411
2412 if (wrp.css('display') == 'block' && wrp.find('div.lumise-categories-wrp').length !== 0)
2413 return wrp.hide();
2414
2415 wrp.show().find('>div').html('');
2416 wrp.find('>header').html('<strong>'+lumise.i(56)+'<i class="lumisex-android-close close"></i></strong>');
2417 wrp.find('>footer').html('').hide();
2418
2419 lumise.render.categories(type);
2420
2421 },
2422
2423 templates_more: function(e) {
2424
2425 if (lumise.ops.templates_loading === true)
2426 return;
2427
2428 if (this.scrollTop + this.offsetHeight >= this.scrollHeight/* - 100*/) {
2429 lumise.post({
2430 action: 'templates',
2431 category: lumise.ops.templates_category,
2432 q: lumise.ops.templates_q,
2433 index: lumise.ops.templates_index
2434 });
2435 lumise.get.el('templates-list').append('<i class="lumise-spinner white x3 mt1 mb1"></i>');
2436 lumise.ops.templates_loading = true;
2437 }
2438
2439
2440 },
2441
2442 cliparts_more: function(e) {
2443
2444 if (lumise.ops.cliparts_loading === true)
2445 return;
2446
2447 if (this.scrollTop + this.offsetHeight >= this.scrollHeight/* - 100*/) {
2448 lumise.post({
2449 action: 'cliparts',
2450 category: lumise.ops.cliparts_category,
2451 q: lumise.ops.cliparts_q,
2452 index: lumise.ops.cliparts_index
2453 });
2454 lumise.get.el('cliparts-list').append('<i class="lumise-spinner white x3 mt1 mb1"></i>');
2455 lumise.ops.cliparts_loading = true;
2456 }
2457
2458
2459 },
2460
2461 images_more : function(e) {
2462
2463 if (lumise.ops.images_loading === true)
2464 return;
2465
2466 if (this.scrollTop + this.offsetHeight >= this.scrollHeight - 100) {
2467
2468 lumise.ops.images_loading = true;
2469 lumise.indexed.list(function(data){
2470 lumise.cliparts.import(data.id, {
2471 url: 'dumb-'+data.id,
2472 thumbn: data.thumbn,
2473 name: data.name,
2474 save: false
2475 });
2476 lumise.ops.uploads_cursor = data.id;
2477 delete data;
2478 }, 'uploads', function(st){
2479 lumise.ops.images_loading = false;
2480 if (st == 'done') {
2481 $('#lumise-uploads').off('scroll');
2482 }
2483 });
2484 }
2485 },
2486
2487 shapes_more: function(e) {
2488
2489 if (lumise.ops.shapes_loading === true)
2490 return;
2491
2492 if (this.scrollTop + this.offsetHeight >= this.scrollHeight - 100) {
2493 lumise.post({
2494 action: 'shapes',
2495 index: lumise.ops.shapes_index
2496 });
2497 lumise.get.el('shapes').append('<i class="lumise-spinner white x3 mt3 mb1"></i>');
2498 lumise.ops.shapes_loading = true;
2499 }
2500 },
2501
2502 designs_more : function(e) {
2503
2504 if (lumise.ops.designs_loading === true)
2505 return;
2506
2507 if (this.scrollTop + this.offsetHeight >= this.scrollHeight - 100) {
2508 lumise.ops.designs_loading = true;
2509 lumise.ops.designs_cursor = $('#lumise-saved-designs>li[data-id]:not([data-id="new"])').last().data('id');
2510 lumise.indexed.list(function(data){
2511 lumise.render.my_designs(data);
2512 lumise.ops.designs_cursor = data.id;
2513 delete data;
2514 }, 'designs', function(st){
2515 lumise.ops.designs_loading = false;
2516 if (st == 'done') {
2517 $('#lumise-my-designs').off('scroll');
2518 }
2519 });
2520 }
2521 },
2522
2523 dragPop : function(e) {
2524
2525 if (e.target.tagName != 'H3')
2526 return;
2527
2528 var el = this;
2529
2530 el.dragging = true;
2531
2532 if (el.dragSetup === undefined) {
2533
2534 $(document).on('mousemove', function(e){
2535
2536 if (!el.dragging || lumise.e.tools.hasClass('minisize'))
2537 return;
2538
2539 var scroll = lumise.get.scroll();
2540
2541 lumise.e.tools.css({
2542 top: (e.clientY - el.rect.clientY + el.rect.top)+'px',
2543 left: (e.clientX - el.rect.clientX + el.rect.left)+'px',
2544 });
2545
2546
2547 }).on('mouseup', function(e){
2548 el.dragging = false;
2549 });
2550
2551 el.dragSetup = true;
2552
2553 }
2554
2555 var rect = document.querySelector('#lumise-workspace').getBoundingClientRect(),
2556 scroll = {
2557 top: (lumise.body.scrollTop?lumise.body.scrollTop:lumise.html.scrollTop),
2558 left: (lumise.body.scrollLeft?lumise.body.scrollLeft:lumise.html.scrollLeft)
2559 };
2560
2561 el.rect = {
2562 left: lumise.e.tools.offset().left-rect.left-scroll.left,
2563 top: lumise.e.tools.offset().top-rect.top-scroll.top,
2564 clientX: e.clientX,
2565 clientY: e.clientY
2566 };
2567
2568 },
2569
2570 topTools : function(e) {
2571
2572 var act = this.getAttribute('data-tool'),
2573 cb = this.getAttribute('data-callback');
2574
2575 if (this.getAttribute('data-load')) {
2576 if (typeof lumise.design.nav.load[this.getAttribute('data-load')] == 'function')
2577 lumise.design.nav.load[this.getAttribute('data-load')](e);
2578 this.removeAttribute('data-load');
2579 }
2580
2581 if (act == 'callback' && cb && typeof lumise.design.nav.callback[cb] == 'function') {
2582 return lumise.design.nav.callback[cb](this, e);
2583 };
2584
2585 if (
2586 (!act || $(e.target).closest('[data-view="sub"]').length > 0) &&
2587 (
2588 e.target.className.toString().indexOf('close') === -1 ||
2589 e.target.getAttribute('data-noclose')
2590 )
2591 ) {
2592 if (act && e.data[act] && typeof e.data[act] == 'function')
2593 e.data[act](e);
2594 return;
2595 }
2596
2597 lumise.func.navigation(this, e);
2598
2599 if (cb && typeof lumise.design.nav.callback[cb] == 'function')
2600 lumise.design.nav.callback[cb](this, e);
2601
2602 },
2603
2604 position : function(e) {
2605
2606 var pos = e.target.getAttribute('data-position') ||
2607 e.target.parentNode.getAttribute('data-position') ||
2608 e.target.parentNode.parentNode.getAttribute('data-position'),
2609 stage = lumise.stage(),
2610 limit = stage.limit_zone,
2611 active = stage.canvas.getActiveObject() || stage.canvas.getActiveGroup();
2612
2613 if (active.imagebox !== undefined && active.imagebox !== '') {
2614 var imb = stage.canvas.getObjects().filter(function(o) {
2615 return o.type == 'imagebox' && o.id == active.imagebox;
2616 });
2617 if (imb.length > 0)
2618 limit = {
2619 width: imb[0].width,
2620 height: imb[0].height,
2621 top: imb[0].top-(imb[0].height/2),
2622 left: imb[0].left-(imb[0].width/2),
2623 };
2624 };
2625
2626 if (!active || !pos)
2627 return;
2628
2629 var left = active.left,
2630 top = active.top;
2631
2632 switch (pos) {
2633
2634 case 'tl' :
2635 left = limit.left + (active.getWidth()/2);
2636 top = limit.top + (active.getHeight()/2);
2637 break;
2638 case 'tc' :
2639 left = limit.left+(limit.width/2);
2640 top = limit.top+(active.getHeight()/2);
2641 break;
2642 case 'tr' :
2643 left = limit.left+limit.width-(active.getWidth()/2);
2644 top = limit.top + (active.getHeight()/2);
2645 break;
2646
2647
2648 case 'ml' :
2649 left = limit.left + (active.getWidth()/2);
2650 top = limit.top+(limit.height/2);
2651 break;
2652 case 'mc' :
2653 left = limit.left+(limit.width/2);
2654 top = limit.top+(limit.height/2);
2655 break;
2656 case 'mr' :
2657 left = limit.left+limit.width-(active.getWidth()/2);
2658 top = limit.top+(limit.height/2);
2659 break;
2660
2661
2662 case 'bl' :
2663 left = limit.left + (active.getWidth()/2);
2664 top = limit.top+limit.height-(active.getHeight()/2);
2665 break;
2666 case 'bc' :
2667 left = limit.left+(limit.width/2);
2668 top = limit.top+limit.height-(active.getHeight()/2);
2669 break;
2670 case 'br' :
2671 left = limit.left+limit.width-(active.getWidth()/2);
2672 top = limit.top+limit.height-(active.getHeight()/2);
2673 break;
2674
2675 case 'cv' :
2676 top = limit.top+(limit.height/2);
2677 break;
2678
2679 case 'ch' :
2680 left = limit.left+(limit.width/2);
2681 break;
2682
2683 };
2684
2685 if (active.group_pos) {
2686 stage.canvas.getObjects().map(function(o) {
2687 if (o.group_pos && o.id != active.id) {
2688 o.set({
2689 left: o.left + (left-active.left),
2690 top: o.top + (top-active.top),
2691 });
2692 }
2693 });
2694 };
2695
2696 active.set({top: top, left: left});
2697 active.setCoords();
2698 stage.canvas.renderAll();
2699
2700 },
2701
2702 doZoom : function(e){
2703
2704 var s = lumise.stage();
2705
2706 if (!s)
2707 return;
2708
2709 var c = s.canvas,
2710 val = parseInt(lumise.get.el('zoom').val());
2711
2712 if (e.originalEvent !== undefined && e.originalEvent.deltaY !== undefined) {
2713 val -= e.originalEvent.deltaY;
2714 if (val < 100)
2715 val = 100;
2716 if (val > 300)
2717 val = 300;
2718 e.preventDefault();
2719 return lumise.get.el('zoom').val(val).trigger('input');
2720 }
2721
2722 if (this.tagName == 'I') {
2723 if (this.getAttribute('data-zoom') == 'out')
2724 val -= 10;
2725 else val += 10;
2726 if (val < 100)
2727 val = 100;
2728 if (val > 300)
2729 val = 300;
2730 lumise.get.el('zoom').val(val).trigger('input');
2731 return false;
2732 }
2733
2734 [125, 150, 175, 200].map(function(m){
2735 if (Math.abs(val-m) < 5)
2736 val = m;
2737 });
2738
2739 this.setAttribute('data-value', val+'%');
2740 this.parentNode.setAttribute('data-value', val+'%');
2741
2742
2743 var wrp = lumise.get.el('stage-'+lumise.current_stage);
2744
2745 if (!wrp.data('w'))
2746 wrp.data({'w': wrp.width(), 'h': wrp.height()});
2747
2748 var w = wrp.data('w')*(val/100),
2749 h = wrp.data('h')*(val/100),
2750 v = c.viewportTransform;
2751
2752 val /= 100;
2753
2754 c.zoomToPoint(
2755 new fabric.Point(
2756 (s.limit_zone.left+(s.limit_zone.width/2)),
2757 (s.limit_zone.top+(s.limit_zone.height/2))
2758 ),
2759 val
2760 );
2761
2762 lumise.func.reversePortView(false);
2763
2764 },
2765
2766 moveZoom : function(e) {
2767
2768 var wrp = this.parentNode;
2769
2770 var onstopmove = function(e){
2771 document.removeEventListener('mouseup', onstopmove, false);
2772 wrp.removeEventListener('mousemove', lumise.func.onZoomThumnMove, false);
2773 };
2774 lumise.ops.preventClick = true;
2775 wrp.addEventListener('mousemove', lumise.func.onZoomThumnMove, false);
2776 document.addEventListener('mouseup', onstopmove, false);
2777
2778
2779 },
2780
2781 wheelZoom : function(e) {
2782
2783 var zoom = parseFloat(lumise.get.el('zoom').val());
2784
2785 zoom += e.originalEvent.wheelDelta*0.15;
2786
2787 if (zoom < 100)
2788 zoom = 100;
2789 else if (zoom > 250)
2790 zoom = 250;
2791
2792 lumise.get.el('zoom').val(zoom).trigger('input');
2793
2794 e.preventDefault();
2795
2796 },
2797
2798 fillColor : function(e){
2799
2800 var c = lumise.stage().canvas,
2801 a = c.getActiveObject();
2802
2803 /*if (a.type == 'text-fx' && e.isTrigger !== undefined)
2804 return;*/
2805
2806 if (a && a.fill !== this.value) {
2807
2808 if (a.type == 'image' || a.type == 'qrcode' || a.type == 'text-fx') {
2809
2810 lumise.get.el('fill').closest('li[data-tool="fill"]').css({'border-bottom': '3px solid '+this.value});
2811 a.set('fill', this.value);
2812
2813 if (a._element && a._element.src.indexOf('data:image/svg+xml;base64') > -1){
2814
2815 var svg = lumise.func.fill_svg(a._element.src, this.value);
2816
2817 a._element.src = svg;
2818 a._element.onload = function(){
2819 c.renderAll();
2820 };
2821 a.set({'colors': [this.value], origin_src: svg, src: svg});
2822 return;
2823
2824 }else{
2825
2826 if (this.value !== '') {
2827
2828 var tint = new fabric.Image.filters.Tint({
2829 color: this.value,
2830 });
2831
2832 if (!a.filters)
2833 a.filters = [];
2834
2835 if (a.filters.length == 0)
2836 a.filters.push(tint);
2837 else{
2838 var fil = a.filters.filter(function(f){return (f.color !== undefined);});
2839 if (fil.length > 0)
2840 fil[0].color = this.value;
2841 else a.filters.push(tint);
2842 }
2843
2844 if (a.type == 'qrcode')
2845 a.backgroundColor = lumise.func.invert(this.value);
2846
2847 }else{
2848 var fils = [];
2849 a.filters.map(function(f){
2850 if (f.color === undefined)
2851 fils.push(f);
2852 });
2853 a.filters = fils;
2854 };
2855
2856 if (typeof a.applyFilters == 'function')
2857 a.applyFilters(c.renderAll.bind(c));
2858
2859 }
2860
2861 } else if (a.type != 'path-group' && a.type != 'svg') {
2862 a.set('fill', this.value);
2863 };
2864
2865 if (a.type != 'text-fx')
2866 c.renderAll();
2867 else lumise.func.update_text_fx();
2868
2869 lumise.design.layers.build();
2870
2871 }
2872
2873 },
2874
2875 fillStroke : function(e){
2876
2877 var c = lumise.stage().canvas,
2878 a = c.getActiveObject();
2879
2880 if (a && a.strokeWidth >0/*!e.isTrigger*/) {
2881 a.set('stroke', this.value);
2882 c.renderAll();
2883 }
2884
2885 },
2886
2887 svgFillColor : function(e) {
2888
2889 var canvas = lumise.stage().canvas,
2890 active = canvas.getActiveObject(),
2891 c = this.value,
2892 o = this.getAttribute('data-active-color');
2893
2894 if (active === undefined || active === null)
2895 return;
2896
2897 if (active.j_object === undefined) {
2898 $('#lumise-color-picker-header i').click();
2899 return;
2900 };
2901
2902 lumise.tools.svg.replace(active.j_object, c, o);
2903 var src = 'data:image/svg+xml;base64,'+btoa(active.j_object.html());
2904
2905 lumise.get.el('svg-colors').find('span[data-color="'+o+'"] input').css({'background-color': c});
2906
2907 active.set('fill', '');
2908 active.set('src', src);
2909 active.set('origin_src', src);
2910 active._element.src = src;
2911 active._originalElement.src = src;
2912 active._element.onload = function(){
2913 canvas.renderAll();
2914 }
2915
2916 },
2917
2918 saveColor : function(e){
2919
2920 var color = lumise.get.el(this.getAttribute('data-target')).val().toString().toLowerCase();
2921 var colors = '#F4511E|#546E7A|#00ACC1|#3949AB|#5E35B1|#e53935|#FDD835|#7CB342|#6D4C41|#8E24AA';
2922
2923 if (color.indexOf('rgb') === 0)
2924 color = lumise.tools.svg.rgb2hex(color);
2925
2926 color = color.toUpperCase();
2927
2928 if (localStorage.getItem('lumise_color_presets'))
2929 colors = localStorage.getItem('lumise_color_presets');
2930
2931 colors = colors.split('|');
2932
2933 if (color === '' || colors.indexOf(color) > -1)
2934 return;
2935
2936 colors.unshift(color);
2937 while(colors.length > 10)
2938 colors.pop();
2939
2940 localStorage.setItem('lumise_color_presets', colors.join('|'));
2941
2942 lumise.render.colorPresets();
2943
2944 },
2945
2946 enableCurved : function(e){
2947
2948 if (e.isTrigger)
2949 return;
2950
2951 var canvas = lumise.stage().canvas,
2952 active = canvas.getActiveObject(),
2953 props, text, newobj = null;
2954
2955 if (!active)
2956 return;
2957
2958 if (this.checked && active.type == 'i-text') {
2959
2960 props = active.toObject(lumise.ops.export_list);
2961 delete props['type'];
2962
2963 props['clipTo'] = function(ctx) {
2964 return lumise.objects.clipto(ctx, newobj);
2965 };
2966
2967 [
2968 ['textAlign', 'center'],
2969 ['radius', 50],
2970 ['spacing', 5],
2971 ['angle', 0],
2972 ['effect', 'bridge']
2973 ].map(function(p){
2974 if (props[p[0]] === undefined)
2975 props[p[0]] = p[1];
2976 });
2977
2978 newobj = new fabric.CurvedText(active.getText().trim(), props);
2979
2980 }else if (!this.checked && active.type == 'curvedText'){
2981
2982 props = active.toObject(lumise.ops.export_list);
2983 props['text'] = active.getText().trim();
2984 delete props['type'];
2985
2986 props['clipTo'] = function(ctx) {
2987 return lumise.objects.clipto(ctx, newobj);
2988 };
2989
2990 newobj = lumise.objects.text(props);
2991
2992 }
2993
2994 if (newobj !== null) {
2995 var index = canvas.getObjects().indexOf(active);
2996 canvas.remove(active);
2997 lumise.stage().stack.data.pop();
2998 canvas.add(newobj);
2999 newobj.moveTo(index);
3000 canvas.setActiveObject(newobj).renderAll();
3001 lumise.design.layers.build();
3002 }else{
3003 alert(lumise.i(18));
3004 }
3005
3006 },
3007
3008 text_effect: function(e) {
3009
3010 if (e.isTrigger)
3011 return;
3012
3013 var canvas = lumise.stage().canvas,
3014 active = canvas.getActiveObject(),
3015 effect = this.getAttribute('data-effect'),
3016 props = active.toObject(lumise.ops.export_list), text, newobj = null,
3017 _this = this;
3018
3019 if (!active)
3020 return;
3021
3022 lumise.f('Processing..');
3023
3024
3025 $(this.parentNode).find('[data-selected]').attr({'data-selected': ''});
3026 $(this).attr({'data-selected': 'true'});
3027
3028 if (effect == 'curved') {
3029
3030 delete props['type'];
3031
3032 props['clipTo'] = function(ctx) {
3033 return lumise.objects.clipto(ctx, newobj);
3034 };
3035
3036 [
3037 ['textAlign', 'center'],
3038 ['radius', 50],
3039 ['spacing', 5],
3040 ['angle', 0],
3041 ['effect', 'bridge']
3042 ].map(function(p){
3043 if (props[p[0]] === undefined)
3044 props[p[0]] = p[1];
3045 });
3046
3047 newobj = new fabric.CurvedText(active.text.trim(), props);
3048
3049 lumise.func.switch_type (newobj);
3050 newobj.set('radius', 50);
3051 canvas.renderAll();
3052
3053 }else{
3054
3055 props['text'] = active.text.trim();
3056 delete props['type'];
3057
3058 props['clipTo'] = function(ctx) {
3059 return lumise.objects.clipto(ctx, newobj);
3060 };
3061
3062 if (effect == 'normal')
3063 return lumise.func.switch_type(lumise.objects.text(props));
3064
3065 if (props['bridge'] === undefined) {
3066 props['bridge'] ={
3067 curve: -2.5,
3068 offsetY: 0.5,
3069 bottom: 2.5,
3070 trident: false,
3071 oblique: false,
3072 }
3073 }
3074
3075 props.bridge.oblique = (effect == 'oblique');
3076
3077 if (effect == 'oblique')
3078 lumise.get.el('text-fx-trident').closest('li[data-func="text-fx"]').hide();
3079 else lumise.get.el('text-fx-trident').closest('li[data-func="text-fx"]').css({'display': ''});
3080
3081 if (active.type == 'text-fx') {
3082
3083 active.set({
3084 bridge: props.bridge
3085 });
3086
3087 var dataSrc = lumise.func.bridgeText(active.cacheTextImageLarge, active.bridge);
3088
3089 active._element.onload = function(){
3090 canvas.renderAll();
3091 lumise.f(false);
3092 lumise.get.el('text-effect').find('img[data-effect]').attr({'data-selected': null});
3093 lumise.get.el('text-effect').find('img[data-effect="'+effect+'"]').attr({'data-selected': 'true'});
3094 };
3095
3096 active._element.src = dataSrc;
3097 active._originalElement.src = dataSrc;
3098
3099 }else{
3100 lumise.objects.lumise['text-fx'](props, lumise.func.switch_type);
3101 }
3102
3103 }
3104
3105
3106 },
3107
3108 editText : function(e){
3109
3110 var c = lumise.stage().canvas,
3111 a = c.getActiveObject(),
3112 t = this,
3113 done = function(){
3114 c.renderAll();
3115 lumise.get.el('workspace').find('.lumise-edit-text').val(t.value);
3116 };
3117
3118 if (a) {
3119
3120 if (!e.isTrigger) {
3121
3122
3123 switch (a.type) {
3124 case 'curvedText' :
3125 a.setText(this.value);
3126 break;
3127 case 'i-text' :
3128 a.setText(this.value);
3129 break;
3130 case 'qrcode':
3131 var qrcode = lumise.tools.qrcode({
3132 text: this.value,
3133 foreground: a.fill
3134 });
3135
3136 a._element.onload = done;
3137
3138 a._element.src = qrcode.toDataURL();
3139
3140 a.set({
3141 'text': this.value,
3142 'name': a.name ? a.name : this.value,
3143 'fill': a.fill
3144 });
3145
3146 return delete qrcode;
3147
3148 break;
3149 case 'text-fx':
3150 a.set('text', this.value);
3151 break;
3152 }
3153
3154 done();
3155
3156 }
3157
3158 }
3159
3160 },
3161
3162 textFormat : function(e){
3163
3164 var c = lumise.stage().canvas,
3165 a = c.getActiveObject(),
3166 fm = this.getAttribute('data-format'),
3167 _this = this;
3168
3169 if (a && !e.isTrigger) {
3170
3171 if (_this.getAttribute('data-align')) {
3172
3173 $(_this.parentNode).find('[data-align].selected').removeClass('selected');
3174 $(_this).addClass('selected');
3175 a.set('textAlign', _this.getAttribute('data-align'));
3176 lumise.get.el('text-align').attr({'class': 'lumisex-align-'+(_this.getAttribute('data-align') ? _this.getAttribute('data-align') : 'center')});
3177
3178 }else if (fm) {
3179
3180 if (fm == 'upper') {
3181 if (a.get('text').toString() != a.get('text').toString().toUpperCase())
3182 a.setText(a.get('text').toString().toUpperCase());
3183 else a.setText(a.get('text').toString().toLowerCase());
3184 }else{
3185 [['bold', 'fontWeight'], ['italic', 'fontStyle'], ['underline', 'textDecoration']].map(
3186 function(f){
3187 if (fm == f[0]) {
3188 if ($(_this).hasClass('selected')) {
3189 $(_this).removeClass('selected');
3190 a.set(f[1], '');
3191 }else{
3192 $(_this).addClass('selected');
3193 a.set(f[1], f[0]);
3194 }
3195 }
3196 });
3197 }
3198
3199 }
3200
3201 if (a.type != 'text-fx'){
3202 document.fonts.load(a.fontStyle+' '+a.fontWeight+' 1px '+a.fontFamily, 'a').then(function(){
3203 fabric.util.clearFabricFontCache(a.fontFamily);
3204 c.renderAll();
3205 });
3206 }else lumise.func.update_text_fx();
3207
3208 }
3209 },
3210
3211 textFX : function(el, e, ratio) {
3212
3213 if (e !== undefined && e.isTrigger !== undefined)
3214 return;
3215
3216 var s = lumise.get.stage();
3217 if (!s.active)
3218 return;
3219
3220 if (!s.active.bridge)
3221 s.active.bridge = {};
3222
3223 var ev = 'input';
3224
3225 if (el.target) {
3226 el = this;
3227 ratio = parseFloat(this.getAttribute('data-ratio')) || 1;
3228 ev = 'change';
3229 }
3230
3231 var fx = el.getAttribute('data-fx');
3232
3233 if (fx == 'trident')
3234 s.active.bridge[fx] = el.checked;
3235 else s.active.bridge[fx] = parseFloat(el.value)*ratio;
3236
3237 var dataSrc;
3238
3239 if (ev == 'change')
3240 dataSrc = lumise.func.bridgeText(s.active.cacheTextImageLarge, s.active.bridge);
3241 else dataSrc = lumise.func.bridgeText(s.active.cacheTextImage, s.active.bridge);
3242
3243 s.active._element.onload = function(){
3244 s.active.set('fill', s.active.fill);
3245 s.canvas.renderAll();
3246 };
3247
3248 s.active._element.src = dataSrc;
3249 s.active._originalElement.src = dataSrc;
3250
3251 },
3252
3253 strokeColor : function(e) {
3254
3255 var act = lumise.stage().canvas.getActiveObject(),
3256 color = this.getAttribute('data-color'),
3257 stk = lumise.get.el('stroke').get(0),
3258 strwidth = lumise.get.el('stroke-width').val();
3259
3260 if (stk.color && typeof stk.color.fromString == 'function')
3261 stk.color.fromString(color);
3262
3263 act.set('stroke', this.getAttribute('data-color'));
3264 lumise.stage().canvas.renderAll();
3265 //act.set('stroke-width', strwidth/10);
3266
3267 },
3268
3269 imageFX: function(e) {
3270
3271 this.setAttribute('data-value', this.value);
3272 lumise.func.update_image_fx(this.getAttribute('data-image-fx'), this.value);
3273
3274 },
3275
3276 doArrange : function(e) {
3277
3278 var canvas = lumise.stage().canvas,
3279 active = canvas.getActiveObject();
3280
3281 if (!active)
3282 return;
3283
3284 var objects = canvas.getObjects(),
3285 index = objects.indexOf(active);
3286
3287 if (this.getAttribute('data-arrange') == 'forward')
3288 {
3289 if (objects[index+1] !== undefined)
3290 {
3291
3292 active.moveTo(index+1);
3293 canvas.renderAll();
3294
3295 return lumise.design.layers.build();
3296
3297 }
3298 else
3299 return $(this).addClass('disabled');
3300 }
3301 else
3302 if (this.getAttribute('data-arrange') == 'back')
3303 {
3304 if (
3305 objects[index-1] !== undefined &&
3306 objects[index-1].evented !== false
3307 ) {
3308
3309 active.moveTo(index-1);
3310 canvas.renderAll();
3311
3312 return lumise.design.layers.build();
3313
3314 }
3315 else
3316 return $(this).addClass('disabled');
3317 }
3318
3319 },
3320
3321 load_fonts : function() {
3322
3323 lumise.tools.lightbox({
3324 width: 1020,
3325 content: '<iframe src="https://services.lumise.com/fonts/"></iframe>\
3326 <span data-view="loading"><i class="lumise-spinner x3"></i></span>'
3327 });
3328
3329 $('#lumise-lightbox iframe').on('load', function() {
3330 this.contentWindow.postMessage({
3331 action: 'fonts',
3332 fonts: localStorage.getItem('LUMISE_FONTS')
3333 }, "*");
3334 $('#lumise-lightbox span[data-view="loading"]').remove();
3335 });
3336
3337 },
3338
3339 select_font : function(e) {
3340
3341 var family = e.target.getAttribute('data-family');
3342
3343 if (family) {
3344
3345 lumise.get.el('fonts').find('font.selected').removeClass('selected');
3346
3347 $(e.target).addClass('selected').
3348 closest('li[data-tool="font"]').
3349 find('button.dropdown').html('<font style="font-family:\''+family+'\'">'+family+'</font>');
3350
3351 var canvas = lumise.stage().canvas,
3352 active = canvas.getActiveObject();
3353
3354 if (active.fontFamily == family)
3355 return;
3356
3357 active.set('fontFamily', '"'+family+'"');
3358
3359 if (e.target.getAttribute('data-source')) {
3360 active.set('font', e.target.getAttribute('data-source'));
3361 lumise.func.font_blob(active);
3362 }else{
3363 fonts = JSON.parse(localStorage.getItem('LUMISE_FONTS'));
3364 if (fonts[encodeURIComponent(family)])
3365 active.set({font: fonts[encodeURIComponent(family)]});
3366 }
3367
3368 if (active.type != 'text-fx')
3369 canvas.renderAll();
3370 else lumise.func.update_text_fx();
3371 }
3372
3373 },
3374
3375 flip : function(e) {
3376
3377 var canvas = lumise.stage().canvas,
3378 active = canvas.getActiveObject();
3379
3380 if (this.id == 'lumise-flip-x')
3381 active.set('flipX', this.checked);
3382 else active.set('flipY', this.checked);
3383
3384 canvas.renderAll();
3385
3386 },
3387
3388 lock_position : function(e) {
3389
3390 var canvas = lumise.stage().canvas,
3391 active = canvas.getActiveObject();
3392
3393 active.set({
3394 'lockPosition': this.checked,
3395 'lockMovementX': this.checked,
3396 'lockMovementY': this.checked
3397 });
3398
3399 lumise.get.el('position-wrp').attr({'data-lock': this.checked === true ? 'true' : 'false'});
3400
3401 canvas.renderAll();
3402
3403 },
3404
3405 resetTransform: function() {
3406
3407 var canvas = lumise.stage().canvas,
3408 active = canvas.getActiveObject();
3409
3410 active.set({
3411 scaleY: active.scaleX,
3412 skewX: 0,
3413 skewY: 0,
3414 angle: 0,
3415 flipX: false,
3416 flipY: false
3417 });
3418
3419 canvas.renderAll();
3420 lumise.tools.set(active);
3421
3422 },
3423
3424 selectImageFX: function(e) {
3425
3426 lumise.func.update_image_fx(this.getAttribute('data-fx'), this.value);
3427
3428 },
3429
3430 imageColorFX: function(e) {
3431
3432 var s = lumise.get.stage();
3433
3434 if (this.getAttribute('data-fx') == 'bnw') {
3435 $('#lumise-image-fx-saturation').val(15).trigger('input');
3436 lumise.func.update_image_fx('saturation', 15);
3437 }else if (s.active.fx && s.active.fx.saturation == 15) {
3438 s.active.fx.saturation = 100;
3439 $('#lumise-image-fx-saturation').val(100).trigger('input');
3440 }else if (this.getAttribute('data-fx') === '') {
3441 s.active.fx.saturation = 100;
3442 s.active.fx.brightness = 0;
3443 s.active.fx.contrast = 0;
3444 lumise.get.el('image-fx-brightness').val(0).attr({'data-value': 0});
3445 lumise.get.el('image-fx-contrast').val(0).attr({'data-value': 0});
3446 lumise.get.el('image-fx-saturation').val(100).attr({'data-value': 100});
3447 }
3448
3449
3450 $(this.parentNode).find('[data-selected="true"]').removeAttr('data-selected');
3451 $(this).attr({'data-selected': 'true'});
3452 lumise.func.update_image_fx('fx', this.getAttribute('data-fx'));
3453
3454 },
3455
3456 bug_submit: function(e) {
3457
3458 var wrp = lumise.get.el('bug'),
3459 content = wrp.find('textarea[data-id="report-content"]').val();
3460
3461 if (content.length < 30)
3462 return wrp.find('textarea[data-id="report-content"]').shake();
3463
3464 content = btoa(encodeURIComponent(content.substr(0, 1500)));
3465
3466 wrp.attr({'data-view': 'sending'});
3467 lumise.post({
3468 action: 'send_bug',
3469 content: content
3470 }, function(res) {
3471 try {
3472 res = JSON.parse(res);
3473 }catch(ex) {
3474 res = {};
3475 };
3476 if (res.success != 1) {
3477 wrp.removeAttr('data-view');
3478 lumise.func.notice(res.message, 'error', 3500);
3479 return;
3480 };
3481 wrp.attr({'data-view': 'success'});
3482 setTimeout(function(){
3483 wrp.removeAttr('data-view');
3484 wrp.find('textarea[data-id="report-content"]').val('');
3485 }, 10000);
3486 });
3487
3488 },
3489
3490 options: function() {
3491 if (typeof this.getAttribute == 'function')
3492 localStorage.setItem('LUMISE-'+this.getAttribute('data-name'), this.checked);
3493 },
3494
3495 exit_drawing : function(){
3496 lumise.get.el('left .lumise-left-nav li[data-tab="layers"]').trigger('click');
3497 },
3498
3499 saved_designs : function(e) {
3500
3501 var act = e.target.getAttribute('data-func');
3502
3503 if (!act)
3504 return;
3505
3506 lumise.ops.preventClick = true;
3507
3508 var id = $(e.target).closest('li[data-id]').data('id');
3509
3510 if (!id && act != 'new')
3511 return;
3512
3513 switch (act) {
3514
3515 case 'edit' :
3516
3517 if (id == 'new') {
3518
3519 var is_empty_design = true;
3520 Object.keys(lumise.cart.printing.states_data).map(function(s) {
3521 Object.keys(lumise.cart.printing.states_data[s]).map(function(d) {
3522 if (
3523 typeof lumise.cart.printing.states_data[s][d] == 'number' &&
3524 lumise.cart.printing.states_data[s][d] !== 0
3525 )
3526 is_empty_design = false;
3527 });
3528 });
3529
3530 if (is_empty_design)
3531 return lumise.func.notice(lumise.i(96), 'error', 3500);
3532
3533 lumise.func.set_url('my_design', null);
3534 lumise.func.export('designs');
3535
3536 return lumise.render.refresh_my_designs();
3537
3538 } else if ($(e.target).closest('li.active[data-id="'+id+'"]').length > 0) {
3539 return;
3540 };
3541
3542 lumise.indexed.get(id, 'dumb', function(res){
3543 if (res !== null) {
3544 lumise.ops.my_designs[id].stages = res.stages;
3545 lumise.func.edit_design(lumise.ops.my_designs[id]);
3546 } else {
3547 lumise.func.notice(lumise.i(166), 'error', 3500);
3548 }
3549 });
3550
3551 break;
3552
3553 case 'name' :
3554 var name = $(e.target).text();
3555 e.target.onblur = function(){
3556 if (name != $(this).text()) {
3557 name = $(this).text();
3558 setTimeout(function(){
3559 lumise.indexed.get(id, 'designs', function(res){
3560 if (res !== null) {
3561 res.name = name;
3562 lumise.indexed.get(id, 'dumb', function(res_dumb){
3563 if (res_dumb !== null) {
3564 res_dumb.name = name;
3565 lumise.indexed.save([res, res_dumb], 'designs');
3566 delete res;
3567 delete res_dumb;
3568 }
3569 });
3570 }
3571 });
3572 }, 300);
3573 }
3574 };
3575
3576 break;
3577
3578 case 'delete' :
3579
3580 if (!confirm(lumise.i('sure')))
3581 return;
3582
3583 lumise.indexed.delete(id, 'designs');
3584
3585 $(e.target).closest('li[data-id]').find('img').each(function(){
3586 if (this.src.indexOf('blob:') === 0)
3587 URL.revokeObjectURL(this.src);
3588 });
3589
3590 $(e.target).closest('li[data-id]').remove();
3591
3592 break;
3593 }
3594
3595 },
3596
3597 saved_designs_search : function(e) {
3598
3599 var val = this.value.trim().toLowerCase();
3600
3601 lumise.get.el('saved-designs').find('li').each(function(){
3602 if (val === '' || $(this).find('span[data-view="name"]').text().trim().toLowerCase().indexOf(val) > -1)
3603 this.style.display = '';
3604 else this.style.display = 'none';
3605 });
3606 },
3607
3608 change_lang : function(e) {
3609
3610 lumise.post({
3611 action: 'change_lang',
3612 code: this.getAttribute('data-id')
3613 });
3614
3615 $(this).closest('li[data-tool="languages"]').
3616 removeClass('active').
3617 html('<i class="lumise-spinner white"></i>');
3618 },
3619
3620 change_product : function(e) {
3621
3622 var btn_txt = lumise.func.url_var('product') ? lumise.i(80) : lumise.i(87);
3623
3624 lumise.render.products_list(btn_txt);
3625
3626 },
3627
3628 fileNav : function(e) {
3629
3630 var func = this.getAttribute('data-func');
3631
3632 switch (func) {
3633
3634 case 'new' : lumise.design.my_designs['new'](); break;
3635
3636 case 'import' :
3637
3638 var inp = lumise.get.el('import-json').get(0);
3639
3640 inp.type = '';
3641 inp.type = 'file';
3642 inp.click();
3643
3644 if (lumise.get.el('import-json').data('addEvent') !== true) {
3645
3646 lumise.get.el('import-json').data({'addEvent': true}).on('change', function(){
3647
3648 lumise.design.my_designs['import'](this.files[0]);
3649
3650 });
3651 }
3652
3653 break;
3654 case 'clear' :
3655 lumise.tools.clearAll();
3656 lumise.func.notice(lumise.i(29), 'success');
3657 break;
3658 case 'saveas' :
3659 lumise.func.download_design({type: 'json'});
3660 break;
3661 case 'save' :
3662
3663 lumise.func.export('designs');
3664 return;
3665
3666 if (lumise.get.el('saved-designs').find('li[data-view="add"]').length === 0) {
3667 lumise.get.el('saved-designs').prepend(
3668 '<li data-view="add" data-func="edit" data-id="new">\
3669 <b data-func="edit">+</b>\
3670 <span data-func="edit">'+lumise.i(107)+'</span>\
3671 </li>'
3672 );
3673 };
3674
3675 return;
3676
3677 break;
3678 case 'download' :
3679
3680 lumise.func.download_design({type: this.getAttribute('data-type')});
3681
3682 break;
3683 }
3684
3685 lumise.func.navigation('clear');
3686
3687 },
3688
3689 doPrint : function(e) {
3690
3691 var pcfg = localStorage.getItem('LUMISE_PRINT_CFG'),
3692 format = this.getAttribute('data-format');
3693
3694 if (!pcfg || pcfg === '')
3695 pcfg = {};
3696 else pcfg = JSON.parse(pcfg);
3697
3698 switch (this.getAttribute('data-dp')) {
3699
3700 case 'format':
3701
3702 var inps = ['li[data-row="size"]',
3703 'li[data-row="csize"]',
3704 'li[data-row="unit"]',
3705 'li[data-row="orien"]',
3706 'button[data-func="print"]'],
3707 stage = lumise.stage(),
3708 size = (stage !== undefined && stage.size !== undefined ? stage.size : '');
3709
3710 inps = $('#lumise-print-nav').find(inps.join(','));
3711
3712 pcfg.format = format;
3713
3714 if (format == 'png') {
3715 if (size !== '') {
3716 inps.hide();
3717 if ($('#lumise-print-nav li[data-row="size"] select option[value="'+size+'"]').length > 0) {
3718 $('#lumise-print-nav').find('li[data-row="size"]').show();
3719 } else {
3720 $('#lumise-print-nav').find('li[data-row="csize"],li[data-row="unit"]').show();
3721 }
3722 } else inps.show();
3723 $('#lumise-print-nav lumise-btn[data-func="print"]').show();
3724 } else {
3725 inps.hide();
3726 $('#lumise-print-nav lumise-btn[data-func="print"]').hide();
3727 $('#lumise-print-nav').find('li[data-row="size"]').hide();
3728 }
3729
3730 if (format == 'pdf')
3731 $('#lumise-print-nav').find('li[data-row="full"], li[data-row="cropmarks"]').show();
3732 else $('#lumise-print-nav').find('li[data-row="full"], li[data-row="cropmarks"]').hide();
3733
3734 break;
3735
3736 case 'csize' :
3737 pcfg.csize = this.value;
3738 break;
3739 case 'orien' :
3740 pcfg.orien = this.value;
3741 break;
3742 case 'base' :
3743 pcfg.base = this.checked;
3744 break;
3745 case 'overflow' :
3746 pcfg.overflow = this.checked;
3747 break;
3748 case 'cropmarks' :
3749 pcfg.cropmarks = this.checked;
3750 break;
3751 case 'all_pages' :
3752 pcfg.all_pages = this.checked;
3753 break;
3754
3755 case 'unit':
3756
3757 var val = $('#lumise-print-nav select[name="select-size"]').val();
3758 inp = $('#lumise-print-nav input[name="size"]'),
3759 unit = this.getAttribute('data-unit');
3760
3761 if (val === '' || val === null)
3762 return;
3763
3764 pcfg.unit = unit;
3765
3766 val = val.split('x');
3767
3768 val[0] = parseFloat(val[0].trim());
3769 val[1] = parseFloat(val[1].trim());
3770
3771 if (unit == 'inch') {
3772 val[0] = (val[0]/2.54).toFixed(2);
3773 val[1] = (val[1]/2.54).toFixed(2);
3774 } else if (unit == 'px') {
3775 val[0] = (val[0]*118.095238).toFixed(2);
3776 val[1] = (val[1]*118.095238).toFixed(2);
3777 }
3778
3779 val = val.join(' x ');
3780
3781 inp.val(val);
3782
3783 pcfg.csize = val;
3784
3785 break;
3786
3787 case 'size':
3788
3789 var unit = $('#lumise-print-nav input[name="print-unit"]:checked').data('unit'),
3790 val = this.value;
3791
3792 if (val === '')
3793 return;
3794
3795 pcfg.size = val;
3796
3797 val = val.split('x');
3798 val[0] = parseFloat(val[0].trim());
3799 val[1] = parseFloat(val[1].trim());
3800
3801 if (unit == 'inch') {
3802 val[0] = (val[0]/2.54).toFixed(2);
3803 val[1] = (val[1]/2.54).toFixed(2);
3804 } else if (unit == 'px') {
3805 val[0] = (val[0]*118.1).toFixed(0);
3806 val[1] = (val[1]*118.1).toFixed(0);
3807 }
3808
3809 val = val.join(' x ');
3810
3811 pcfg.csize = val;
3812
3813 lumise.get.el('print-nav').find('input[name="size"]').val(val);
3814
3815 break;
3816 };
3817
3818 if (this.tagName == 'BUTTON') {
3819
3820 var format = $('#lumise-print-nav input[name="print-format"]:checked').attr('data-format'),
3821 include_base = $('#lumise-print-base').prop('checked'),
3822 full = $('#lumise-print-full').prop('checked'),
3823 overflow = $('#lumise-print-overflow').prop('checked'),
3824 stage = lumise.stage(),
3825 func = this.getAttribute('data-func');
3826
3827 if (format == 'svg' || format == 'pdf')
3828 return lumise.func.download_design({type: format, include_base: include_base, full: full});
3829
3830 document.getElementById('LumiseDesign').setAttribute('data-processing', 'true');
3831 document.getElementById('LumiseDesign').setAttribute('data-msg', lumise.i('render'));
3832
3833 lumise.get.el('zoom').val('100').trigger('input');
3834
3835 var psize = lumise.get.size();
3836
3837 setTimeout(function(el) {
3838 lumise.func.download_design({
3839 type: 'png',
3840 orien: psize.o,
3841 height: psize.h,
3842 width: psize.w,
3843 include_base: include_base,
3844 callback: function(data) {
3845
3846 lumise.f(false);
3847
3848 if (func == 'download') {
3849 name = lumise.data.prefix_file+'_print_'+lumise.current_stage+'.png';
3850 if (lumise.func.url_var('order_print', '') !== '') {
3851 name = 'order-'+lumise.func.url_var('order_print')+'__product-'+lumise.func.url_var('product_cms')+'__base-'+lumise.func.url_var('product')+'__stage-'+(Object.keys(lumise.data.stages).indexOf(lumise.current_stage)+1)+'.png';
3852 };
3853 lumise.func.download(data, name);
3854 return;
3855 };
3856
3857 if (data.length < 10)
3858 return alert(lumise.i(36));
3859
3860 var print_window = window.open();
3861 print_window.document.write(
3862 '<img style="width:100%" src="'+data+'" onload="window.print();window.close();" />'
3863 );
3864
3865 }
3866 });
3867
3868 }, 10, this);
3869
3870 };
3871
3872 localStorage.setItem('LUMISE_PRINT_CFG', JSON.stringify(pcfg));
3873
3874 },
3875
3876 nav : function(e) {
3877
3878 if (e.target.getAttribute('data-func') == 'nav') {
3879
3880 var el = $(e.target),
3881 nav = el.data('nav'),
3882 wrp = el.closest('.lumise-tabs-nav').find('li[data-view="'+nav+'"]');
3883
3884 el.closest('.lumise-tabs-nav').attr({'data-nav': nav}).find('[data-active="true"]').removeAttr('data-active');
3885 el.attr({'data-active': 'true'});
3886 wrp.attr({'data-active': 'true'});
3887
3888 e.preventDefault();
3889 }
3890 },
3891
3892 doShare : function(e) {
3893
3894 var func = e.target.getAttribute('data-func');
3895
3896 if (!func)
3897 return;
3898
3899 var share_history = localStorage.getItem('LUMISE_SHARE_HISTORY'),
3900 el = $(e.target);
3901
3902 if (!share_history) {
3903 share_history = [];
3904 } else {
3905 try {
3906 share_history = JSON.parse(share_history);
3907 }catch(ex){
3908 share_history = [];
3909 }
3910 };
3911
3912 if (share_history.length > 3)
3913 share_history.splice(3);
3914
3915 var load_history = function(index) {
3916
3917 var wrp = lumise.get.el('shares-wrp').find('li[data-view="history"]');
3918 wrp.attr({'data-process': 'true'});
3919
3920 lumise.post({
3921 action: 'get_shares',
3922 index: index,
3923 stream: lumise.func.url_var('stream', '')
3924 }, function(res){
3925
3926 wrp.removeAttr('data-process');
3927
3928 var res = JSON.parse(res);
3929
3930 if (res.result.length > 0) {
3931
3932 var html = '', share_url = '';
3933 res.result.map(function(s){
3934
3935 share_url = lumise.data.tool_url;
3936
3937 if (share_url.indexOf('?') > -1)
3938 share_url += '&';
3939 else share_url += '?';
3940
3941 share_url += 'product='+s.product;
3942 share_url += '&product_cms='+s.product_cms;
3943 share_url += '&share='+s.share_id;
3944
3945 share_url = share_url.replace('?&', '?');
3946
3947 html += '<span data-item>\
3948 <a href="'+share_url+'" target="_blank">\
3949 <img src="'+lumise.data.upload_url+'shares/'+lumise.func.date('Y/t', s.created)+'/'+s.share_id+'.jpg'+'" height="150" />\
3950 </a>\
3951 <name>'+s.name+'</name>\
3952 <span data-view="func">\
3953 <i class="lumise-icon-menu"></i>\
3954 <span data-view="fsub" data-id="'+s.share_id+'" data-aid="'+s.aid+'" data-link="'+ encodeURIComponent(share_url)+'" data-created="'+s.created+'">\
3955 <date data-func="date">'+lumise.func.date('h:m D d M, Y', s.updated*1000)+'</date>\
3956 <button data-func="copy-link">\
3957 <i class="lumise-icon-doc"></i> '+lumise.i(130)+'\
3958 </button>\
3959 <button data-func="open">\
3960 <i class="lumise-icon-link"></i> '+lumise.i(131)+'\
3961 </button>\
3962 <button data-func="delete">\
3963 <i class="lumise-icon-trash"></i> '+lumise.i(132)+'\
3964 </button>\
3965 </span>\
3966 </span>\
3967 </span>';
3968 });
3969
3970 wrp.html(html);
3971
3972 } else {
3973 wrp.html('<p class="notice mt2 mb2">'+lumise.i(129)+'</p>');
3974 };
3975
3976 if (res.per_page < res.total) {
3977
3978 var nav = '<ul data-view="pagenation">';
3979
3980 if (res.index > res.per_page) {
3981 nav += '<li data-func="pagination" data-p="0"><i data-func="pagination" data-p="0" class="lumisex-ios-arrow-back"></i><i data-func="pagination" data-p="0" class="lumisex-ios-arrow-back"></i></li>';
3982 };
3983
3984 for (var i=1; i<=Math.ceil(res.total/res.per_page); i++) {
3985 nav += '<li data-func="pagination" data-p="'+((i-1)*res.per_page)+'"'+(res.index == i*res.per_page ? ' data-active="true"' : '')+'>'+i+'</li>';
3986 };
3987
3988 if (res.index < res.total) {
3989 nav += '<li data-func="pagination" data-p="'+((Math.ceil(res.total/res.per_page)-1)*res.per_page)+'"><i data-func="pagination" data-p="'+((Math.ceil(res.total/res.per_page)-1)*res.per_page)+'" class="lumisex-ios-arrow-forward"></i><i data-func="pagination" data-p="'+((Math.ceil(res.total/res.per_page)-1)*res.per_page)+'" class="lumisex-ios-arrow-forward"></i></li>';
3990 };
3991 nav += '</ul>';
3992
3993 wrp.append(nav);
3994
3995 } else if (res.index > res.per_page && res.result.length > 0){
3996 wrp.append('<p class="center">'+lumise.i(134)+'</p>');
3997 }
3998
3999 });
4000 };
4001
4002 if (el.data('nav') == 'history')
4003 load_history(0);
4004
4005 switch (func) {
4006
4007 case 'nav' :
4008 return e.data.nav(e);
4009 break;
4010
4011 case 'pagination' :
4012 load_history(el.data('p'));
4013 break;
4014
4015 case 'copy-link' :
4016 lumise.func.copy(decodeURIComponent(el.closest('[data-view="fsub"]').data('link')));
4017 lumise.func.notice(lumise.i(135), 'success');
4018 break;
4019
4020 case 'open' :
4021 window.open(decodeURIComponent(el.closest('[data-view="fsub"]').data('link')));
4022 break;
4023
4024 case 'delete' :
4025 lumise.func.confirm({
4026 title: lumise.i(133),
4027 primary: {
4028 text: 'Delete',
4029 callback: function(e) {
4030 el.closest('span[data-item]').css({opacity: 0.25});
4031 lumise.post({
4032 action: 'delete_link_share',
4033 aid: el.closest('[data-view="fsub"]').data('aid'),
4034 id: el.closest('[data-view="fsub"]').data('id')
4035 }, function(res){
4036 res = JSON.parse(res);
4037 if (res.success == 0) {
4038 el.closest('span[data-item]').css({opacity: 1});
4039 lumise.func.notice(res.message, 'error');
4040 } else el.closest('span[data-item]').remove();
4041 });
4042
4043 }
4044 },
4045 second: {
4046 text: 'Cancel'
4047 }
4048 });
4049 break;
4050
4051 case 'create-link' :
4052
4053 var restrict = false;
4054
4055 if (
4056 share_history.length == 3 &&
4057 new Date().getTime() - (parseInt(share_history[0]*1000)) < 5*60*1000
4058 ) {
4059 restrict = true;
4060 };
4061
4062 if (restrict === true) {
4063
4064 lumise.func.confirm({
4065 title: lumise.i(128),
4066 primary: {},
4067 second: {
4068 text: 'Ok'
4069 },
4070 type: 'notice'
4071 });
4072
4073 return;
4074 };
4075
4076 if ($('#lumise-share-link-title').val() === '') {
4077 $('#lumise-share-link-title').shake();
4078 e.preventDefault();
4079 return;
4080 };
4081
4082 var has_design = 0;
4083 Object.keys(lumise.data.stages).map(function(s){
4084 if (
4085 typeof lumise.data.stages[s] !== 'undefined' &&
4086 typeof lumise.data.stages[s].canvas !== 'undefined'
4087 ){
4088 var canvas = lumise.data.stages[s].canvas,
4089 objs = canvas.getObjects();
4090
4091 objs.map(function (obj){
4092 if(obj.evented == true) has_design++;
4093 });
4094 }
4095 });
4096
4097 if (has_design === 0){
4098 lumise.func.notice(lumise.i(96), 'error');
4099 return false;
4100 };
4101
4102 var wrp = $(e.target).closest('#lumise-shares-wrp'),
4103 share = {
4104 data: lumise.func.export('share'),
4105 product: lumise.func.url_var('product', ''),
4106 product_cms: lumise.func.url_var('product_cms', ''),
4107 label: $('#lumise-share-link-title').val(),
4108 aid: lumise.func.get_cookie('lumise-AID'),
4109 action: 'upload_share_design'
4110 };
4111
4112 share.screenshot = btoa(encodeURIComponent(
4113 share.data.stages[Object.keys(share.data.stages)[0]].screenshot
4114 )
4115 );
4116
4117 Object.keys(share.data.stages).map(function(s){
4118 share.data.stages[s].screenshot = '';
4119 });
4120
4121 share.data = btoa(encodeURIComponent(JSON.stringify(share.data)));
4122
4123 lumise.post(share, function(res) {
4124
4125 res = JSON.parse(res);
4126
4127 wrp.removeAttr('data-process').find('.lumise-notice').remove();
4128
4129 if (res.success === 0) {
4130 wrp.find('li[data-view="link"]').prepend('<p class="notice error mb1" data-phase="1">'+res.message+'</p>');
4131 } else {
4132
4133 wrp.attr({'data-phase': '2'});
4134
4135 var share_url = lumise.data.tool_url;
4136
4137 if (share_url.indexOf('?') > -1)
4138 share_url += '&';
4139 else share_url += '?';
4140
4141 share_url += 'product='+res.product;
4142 if (res.product_cms !== null && res.product_cms !== '')
4143 share_url += '&product_cms='+res.product_cms;
4144 share_url += '&share='+res.id;
4145
4146 share_url = share_url.replace('?&', '?');
4147
4148 wrp.find('p[data-view="link-share"]').html(share_url);
4149
4150 wrp.find('button[data-network]').off('click').on('click', function(e){
4151 var nw = this.getAttribute('data-network'),
4152 link = '';
4153 if (nw == 'facebook') {
4154 link = 'https://www.facebook.com/dialog/share?href='+encodeURIComponent(share_url)+'&display=popup&app_id='+lumise.apply_filters('fbappid', '1430309103691863');
4155 } else if (nw == 'twitter') {
4156 link = 'https://twitter.com/intent/tweet?url='+encodeURIComponent(share_url)+'&text='+encodeURIComponent(share.label)+'&via=Lumise&related=Lumise,LumiseCom,LumiseProductDesigner'
4157 } else if (nw == 'pinterest') {
4158 link = 'https://www.pinterest.com/pin/create/button/?url='+encodeURIComponent(share_url)+'&description='+encodeURIComponent(share.label)+'&is_video=false&media='+encodeURIComponent(lumise.data.upload_url+'shares/'+res.path+'/'+res.id+'.jpg')
4159 }
4160
4161 if (link !== '')
4162 window.open(link);
4163
4164 e.preventDefault();
4165 });
4166
4167 share_history.push(res.created);
4168
4169 localStorage.setItem('LUMISE_SHARE_HISTORY', JSON.stringify(share_history));
4170
4171 }
4172
4173 });
4174
4175 wrp.attr({'data-process': 'Creating...'});
4176
4177 break;
4178
4179 case 'do-again' :
4180 lumise.get.el('shares-wrp').removeAttr('data-phase');
4181 break;
4182
4183 case 'copy' :
4184
4185 var el = e.target;
4186
4187 lumise.func.copy(el.innerHTML.trim());
4188
4189 el.setAttribute("data-copied", "true");
4190 setTimeout(function(){
4191 el.removeAttribute("data-copied");
4192 }, 1500);
4193
4194 break;
4195 }
4196 },
4197
4198 my_cart : function(e) {
4199
4200 var func = e.target.getAttribute('data-func'),
4201 current = lumise.func.url_var('cart', ''),
4202 id = e.target.getAttribute('data-id');
4203
4204 if (!func || func === '')
4205 return;
4206
4207 switch (func) {
4208 case 'remove':
4209 if (confirm(lumise.i('sure'))) {
4210 if (current == id)
4211 lumise.func.set_url('cart', null);
4212 var items = JSON.parse(localStorage.getItem('LUMISE-CART-DATA'));
4213 delete items[id];
4214 localStorage.setItem('LUMISE-CART-DATA', JSON.stringify(items));
4215 setTimeout(lumise.render.cart_change, 150);
4216 }
4217 break;
4218 case 'edit':
4219 lumise.cart.edit_item(id, e);
4220 break;
4221 case 'checkout':
4222 lumise.cart.do_checkout();
4223 break;
4224 }
4225
4226 e.preventDefault();
4227
4228 }
4229
4230 });
4231
4232 $('#lumise-left #lumise-text *[draggable="true"]').each(function(){
4233 lumise.design.event_add_text(this);
4234 });
4235
4236 var aa = localStorage.getItem('LUMISE-AUTO-ALIGNMENT'),
4237 ta = localStorage.getItem('LUMISE-TEMPLATE-APPEND'),
4238 ri = localStorage.getItem('LUMISE-REPLACE-IMAGE'),
4239 a_a = $('#lumise-auto-alignment'),
4240 t_a = $('#lumise-template-append'),
4241 r_i = $('#lumise-replace-image');
4242
4243 if (aa === null)
4244 localStorage.setItem('LUMISE-AUTO-ALIGNMENT', a_a.prop('checked'));
4245 else
4246 a_a.prop({checked: aa == 'true' ? true : false});
4247
4248 if (ta === null)
4249 localStorage.setItem('LUMISE-TEMPLATE-APPEND', t_a.prop('checked'));
4250 else
4251 t_a.prop({checked: ta == 'true' ? true : false});
4252
4253 if (ri === null)
4254 localStorage.setItem('LUMISE-REPLACE-IMAGE', r_i.prop('checked'));
4255 else
4256 r_i.prop({checked: ri == 'true' ? true : false});
4257
4258 $(document).on('click', function(e){
4259
4260 if (e.isTrigger !== undefined)
4261 return;
4262
4263 var except = lumise.apply_filters('click_except', '');
4264
4265 if (
4266 !$(e.target).is(except) &&
4267 $(e.target).closest('#lumise-stage-nav').length === 0 &&
4268 lumise.get.el('stage-nav').hasClass('stages-expand')
4269 )lumise.get.el('stage-nav').removeClass('stages-expand').removeClass('preview-designs');
4270
4271 var el = $(e.target);
4272
4273 if (e.target.tagName != 'INPUT' && el.closest('div.lumise_color_picker').length === 0)
4274 $('#lumise-color-picker-header i').click();
4275
4276 if (el.hasClass('close') || el.closest('div#lumise-x-thumbn-preview,[data-prevent-click="true"]').length === 0) {
4277 lumise.get.el('x-thumbn-preview').hide();
4278 }else if (
4279 !lumise.ops.preventClick &&
4280 !el.hasClass('upper-canvas') &&
4281 !el.hasClass('close') &&
4282 lumise.ops.preventClick !== true &&
4283 el.closest(
4284 'div.lumise-stage.canvas-wrapper,'+
4285 '[data-view="sub"],'+
4286 'div.lumise_color_picker,'+
4287 'div.lumise-lightbox,'+
4288 'ul.lumise-top-nav,'+
4289 '[data-prevent-click="true"],'+
4290 '#lumise-navigations'
4291 ).length === 0
4292 ){
4293 if (lumise.e.main.find('li[data-tool].active').length > 0)
4294 lumise.func.navigation('clear');
4295 else lumise.tools.discard();
4296 };
4297
4298 delete lumise.ops.preventClick;
4299
4300 $('iframe').each(function(){
4301 this.contentWindow.postMessage({
4302 action : 'parentClick'
4303 }, "*");
4304 });
4305
4306 })
4307 .on('keydown', function(e) {
4308
4309 if (['TEXTAREA', 'INPUT'].indexOf(e.target.tagName) > -1 || e.target.getAttribute('contenteditable'))
4310 return true;
4311
4312 if ([37, 38, 39, 40].indexOf(e.keyCode) > -1)
4313 return lumise.actions.do('key-move', e);
4314
4315 if (e.keyCode === 13)
4316 return lumise.actions.do('key-enter', e);
4317
4318 if (e.metaKey === true || e.ctrlKey === true) {
4319
4320 if (e.keyCode === 90) {
4321 if (e.shiftKey === false)
4322 return lumise.actions.do('ctrl-z');
4323 else return lumise.actions.do('ctrl-shift-z');
4324 }else if (e.keyCode === 83) {
4325 if (e.shiftKey === true)
4326 return lumise.actions.do('ctrl-shift-s', e);
4327 else return lumise.actions.do('ctrl-s', e);
4328 }else if (e.keyCode === 80)
4329 return lumise.actions.do('ctrl-p', e);
4330 else if (e.keyCode === 79)
4331 return lumise.actions.do('ctrl-o', e);
4332 else if (e.keyCode === 69)
4333 return lumise.actions.do('ctrl-e', e);
4334
4335 };
4336
4337 if (e.keyCode === 27)
4338 return lumise.actions.do('key-esc');
4339
4340 switch (e.keyCode) {
4341 case 8: return lumise.actions.do('key-delete', e); break;
4342 case 46: return lumise.actions.do('key-delete', e); break;
4343 case 13: return lumise.actions.do('key-enter', e); break;
4344 case 27: return lumise.actions.do('key-esc', e); break;
4345 case 37:
4346 case 38:
4347 case 39:
4348 case 40: return lumise.actions.do('key-move', e); break;
4349
4350 };
4351
4352 if (e.metaKey === true || e.ctrlKey === true) {
4353
4354 switch (e.keyCode) {
4355 case 48: return lumise.actions.do('ctrl-0', e); break;
4356 case 65: return lumise.actions.do('ctrl-a', e); break;
4357 case 68: return lumise.actions.do('ctrl-d', e); break;
4358 case 69: return lumise.actions.do('ctrl-e', e); break;
4359 case 79: return lumise.actions.do('ctrl-o', e); break;
4360 case 80: return lumise.actions.do('ctrl-p', e); break;
4361 case 83:
4362 if (e.shiftKey === true)
4363 return lumise.actions.do('ctrl-shift-s', e);
4364 else return lumise.actions.do('ctrl-s', e);
4365 break;
4366 case 90:
4367 if (e.shiftKey === false)
4368 return lumise.actions.do('ctrl-z');
4369 else return lumise.actions.do('ctrl-shift-z');
4370 break;
4371 case 61: return lumise.actions.do('ctrl+', e); break;
4372 case 173: return lumise.actions.do('ctrl-', e); break;
4373 case 107: return lumise.actions.do('ctrl+', e); break;
4374 case 109: return lumise.actions.do('ctrl-', e); break;
4375 case 187: return lumise.actions.do('ctrl+', e); break;
4376 case 189: return lumise.actions.do('ctrl-', e); break;
4377 }
4378
4379 }
4380
4381 })
4382 .on('mouseup', function(e){
4383 lumise.actions.do('globalMouseUp', e);
4384 });
4385
4386 $('#lumise-upload-form').on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
4387 e.preventDefault();
4388 e.stopPropagation();
4389 })
4390 .on('dragover dragenter', function() {
4391 $(this).addClass('is-dragover');
4392 })
4393 .on('dragleave dragend drop', function() {
4394 $(this).removeClass('is-dragover');
4395 })
4396 .on('drop', function(e) {
4397 lumise.func.process_files(e.originalEvent.dataTransfer.files);
4398 })
4399 .on('click', function(){
4400 $(this).find('input[type="file"]').get(0).click();
4401 });
4402
4403 var pcfg = localStorage.getItem('LUMISE_PRINT_CFG');
4404
4405 if (pcfg && pcfg !== '') {
4406 pcfg = JSON.parse(pcfg);
4407 if (pcfg.format !== undefined)
4408 $('#lumise-print-nav input[data-format="'+pcfg.format+'"]').prop({checked: true}).change();
4409 if (pcfg.unit !== undefined)
4410 $('#lumise-print-nav input[data-unit="'+pcfg.unit+'"]').prop({checked: true}).change();
4411 if (pcfg.size !== undefined)
4412 $('#lumise-print-nav select[name="select-size"]').val(pcfg.size).change();
4413 if (pcfg.csize !== undefined)
4414 $('#lumise-print-nav input[name="size"]').val(pcfg.csize).change();
4415 if (pcfg.orien !== undefined)
4416 $('#lumise-print-nav select[name="orientation"]').val(pcfg.orien).change();
4417 if (pcfg.base !== undefined)
4418 $('#lumise-print-nav input[data-dp="base"]').prop({checked: pcfg.base});
4419 if (pcfg.overflow === undefined || pcfg.overflow == true)
4420 $('#lumise-print-nav input[data-dp="overflow"]').prop({checked: true});
4421 if (pcfg.cropmarks !== undefined)
4422 $('#lumise-print-nav input[data-dp="cropmarks"]').prop({checked: pcfg.cropmarks});
4423 if (pcfg.all_pages !== undefined)
4424 $('#lumise-print-nav input[data-dp="all_pages"]').prop({checked: pcfg.all_pages});
4425 };
4426
4427 lumise.cliparts.add_events();
4428
4429 },
4430
4431 event_add_text : function(el) {
4432
4433 [['dragstart', function(e){
4434
4435 lumise.ops.drag_start = this;
4436
4437 var offs = $(this).offset();
4438
4439 lumise.ops.drag_start.distance = {
4440 x : (e.pageX - offs.left) - (this.offsetWidth/2),
4441 y : (e.pageY - offs.top) - (this.offsetHeight/2),
4442 w : this.offsetWidth,
4443 h : this.offsetHeight
4444 };
4445
4446 }],
4447 ['dragend', function(e){
4448
4449 lumise.ops.drag_start = null;
4450
4451 }],
4452 ['click', function(e){
4453
4454 var ops = JSON.parse(this.getAttribute('data-ops'));
4455
4456 if (window.is_first_text === undefined) {
4457 window.is_first_text = true;
4458 $('#lumise-text-tools li[data-tool="spacing"]').trigger('click');
4459 }
4460
4461 if (this.getAttribute('data-act')) {
4462 lumise.func.preset_import(ops, {}, function() {
4463 if (ops[0].type == 'text-fx')
4464 lumise.func.update_text_fx();
4465 });
4466 }
4467
4468 }]].map(function(ev){
4469 el.addEventListener(ev[0], ev[1], false);
4470 });
4471
4472 },
4473
4474 layers : {
4475
4476 current: null,
4477
4478 create : function(opt){
4479
4480 switch (opt.type) {
4481
4482 case 'text':
4483
4484 var text = lumise.objects.text(opt.ops);
4485
4486 lumise.stage().canvas.add(text).setActiveObject(text).renderAll();
4487 lumise.tools.set(text);
4488 lumise.design.layers.build();
4489
4490 break;
4491
4492 case 'image':
4493
4494 lumise.stage().canvas.add(opt.image).setActiveObject(opt.image).renderAll();
4495
4496 lumise.tools.set(opt.image);
4497
4498 lumise.design.layers.build();
4499
4500 break;
4501
4502 }
4503
4504 lumise.stack.save();
4505
4506 },
4507
4508 arrange : function() {
4509
4510 var canvas = lumise.stage().canvas,
4511 active = canvas.getActiveObject();
4512
4513 if (!active)
4514 return;
4515
4516 var objects = canvas.getObjects(),
4517 index = objects.indexOf(active),
4518 btn = $('#lumise-top-tools li[data-tool="arrange"] button[data-arrange]');
4519
4520 if (
4521 objects[index-1] !== undefined &&
4522 objects[index-1].evented !== false
4523 )
4524 btn.filter('[data-arrange="back"]').removeClass('disabled');
4525 else
4526 btn.filter('[data-arrange="back"]').addClass('disabled');
4527
4528 if (
4529 objects[index+1] !== undefined &&
4530 objects[index+1].evented !== false
4531 )
4532 btn.filter('[data-arrange="forward"]').removeClass('disabled');
4533 else
4534 btn.filter('[data-arrange="forward"]').addClass('disabled');
4535
4536 },
4537
4538 sort : function(el){
4539
4540 var L = lumise.design.layers, events = {
4541
4542 dragstart : function( e ){
4543 L.eldrag = this;
4544 this.setAttribute('data-holder', 'true');
4545 this.parentNode.setAttribute('data-holder', 'true');
4546 },
4547 dragover : function(e){
4548
4549 L.elover = this;
4550
4551 if (this == L.eldrag){
4552 e.preventDefault();
4553 return false;
4554 }
4555
4556 var rect = this.getBoundingClientRect();
4557
4558 if (rect.bottom - e.clientY < (rect.height/2) && $(this).next().get(0) !== L.eldrag)
4559 $(this).after(L.eldrag);
4560 else if (rect.bottom - e.clientY > (rect.height/2) && $(this).prev().get(0) !== L.eldrag)
4561 $(this).before(L.eldrag);
4562
4563 e.preventDefault();
4564 return false;
4565 },
4566
4567 dragleave : function( e ){
4568 e.preventDefault();
4569 return false;
4570 },
4571 dragend : function( e ){
4572
4573 L.eldrag.removeAttribute('data-holder');
4574 L.eldrag.parentNode.removeAttribute('data-holder');
4575
4576 var items = lumise.e.layers.find('li[data-id]'),
4577 total = lumise.stage().canvas.getObjects().length-1;
4578
4579 items.each(function(i){
4580 $(this).data('canvas').moveTo(total-i);
4581 });
4582
4583 L.build();
4584
4585 e.preventDefault();
4586 return false;
4587 }
4588
4589 };
4590
4591 for (var ev in events)
4592 el.addEventListener(ev, events[ev], false);
4593
4594 },
4595
4596 item : function(o) {
4597
4598 if (!o.id) {
4599 var date = new Date();
4600 o.set('id', parseInt(date.getTime()/1000).toString(36)+':'+(Math.random().toString(36).substr(2)));
4601 }
4602
4603 var thumbn = o.get('thumbn');
4604
4605 o.fill = (o.fill == 'rgb(0,0,0)' ? '#000' : o.fill);
4606
4607 var args = {
4608 name: '',
4609 thumbn: thumbn,
4610 color: o.fill ? lumise.func.invert(o.fill) : '#eee',
4611 bgcolor: o.fill ? o.fill : '#333',
4612 class: o.active ? 'active' : '',
4613 visible: (o.visible !== undefined && o.visible === false) ? 'data-active="true" ' : '',
4614 selectable: (o.selectable !== undefined && o.selectable === false) ? 'data-active="true" ' : '',
4615 id: o.id
4616 };
4617
4618 var name = o.name ? o.name : (o.text ? o.text : 'New layer');
4619 args.name = name.substr(0, 20).replace(/\n/g, ' ').replace(/[^a-z0-9A-Z ]/g, '');
4620
4621 if (o.type == 'path')
4622 args.name = 'Drawing';
4623
4624 return args;
4625
4626 },
4627
4628 build : function() {
4629
4630 if (!lumise.get.el('left').find('li[data-tab="layers"]').hasClass('active'))
4631 return this.arrange();
4632
4633 var tmpl = "<li draggable=\"true\" class=\"%class%\" data-id=\"%id%\">\
4634 %thumbn%\
4635 <span class=\"layer-name\" contenteditable=\"true\" title=\"%name%\">%name%</span> \
4636 <span class=\"layer-func\">\
4637 <i class=\"lumise-icon-eye\" %visible%title=\""+lumise.i('14')+"\" data-act=\"visible\"></i>\
4638 <i class=\"lumise-icon-lock-open\" %selectable%title=\""+lumise.i('15')+"\" data-act=\"selectable\"></i>\
4639 <i class=\"lumise-icon-close\" title=\""+lumise.i('16')+"\" data-act=\"delete\"></i>\
4640 </span>\
4641 </li>",
4642 layers = lumise.get.el('layers>ul').html(''),
4643 index = 0,
4644 is_empty = true,
4645 stage = lumise.stage();
4646
4647 if (stage === undefined)
4648 return;
4649
4650 stage.canvas.getObjects().map(function(o) {
4651
4652 if (o.evented === false)
4653 return index++;
4654
4655 is_empty = false;
4656
4657 var args = lumise.design.layers.item(o), tmp = tmpl;
4658
4659 Object.keys(args).map(function(n){
4660 tmp = tmp.replace(new RegExp('%'+n+'%', 'g'), args[n]);
4661 });
4662
4663 var layer = $(tmp);
4664
4665 layers.prepend(layer.data({canvas: o}).on('click', function(e){
4666
4667 e.preventDefault();
4668 lumise.ops.preventClick = true;
4669
4670 var act = e.target.getAttribute('data-act'),
4671 evt = lumise.design.layers.event,
4672 stage = lumise.stage(),
4673 target = $(this).data('canvas');
4674
4675 if (act && evt[act])
4676 return evt[act](this, e.target);
4677
4678 if (target.selectable !== false) {
4679 if ($(this).hasClass('active'))
4680 return;
4681 $(this.parentNode).find('li.active').removeClass('active');
4682 stage.limit_zone.set('visible', true);
4683 stage.canvas.setActiveObject(target);
4684 }
4685
4686 }));
4687
4688 layer.find('span.layer-name').on('keyup', function(e){
4689
4690 $(this.parentNode).data('canvas').name = this.innerText;
4691
4692 if (e.keyCode === 13) {
4693 e.preventDefault();
4694 lumise.design.layers.build();
4695 return false;
4696 }
4697
4698 });
4699
4700 lumise.design.layers.sort(layer.get(0));
4701
4702 });
4703
4704 if (is_empty)
4705 lumise.get.el('layers>ul')
4706 .html('<h3 class="mt2" style="border:none;text-align:center">'+lumise.i('06')+'</h3>');
4707 else
4708 lumise.design.layers.arrange();
4709
4710 },
4711
4712 event : {
4713
4714 visible: function(el, tar) {
4715 tar.setAttribute('data-active', (tar.getAttribute('data-active') != 'true'));
4716 $(el).data('canvas').set('visible', (tar.getAttribute('data-active') != 'true'));
4717 lumise.objects.do.deactiveAll();
4718 },
4719
4720 selectable: function(el, tar) {
4721 tar.setAttribute('data-active', (tar.getAttribute('data-active') != 'true'));
4722 $(el).data('canvas').set('selectable', (tar.getAttribute('data-active') != 'true'));
4723 lumise.objects.do.deactiveAll();
4724 },
4725
4726 delete: function(el, tar) {
4727
4728 canvas = lumise.stage().canvas;
4729 canvas.discardActiveGroup();
4730 canvas.discardActiveObject();
4731
4732 lumise.stack.save();
4733
4734 canvas.remove($(el).data('canvas'));
4735
4736 lumise.stack.save();
4737
4738 lumise.design.layers.build();
4739
4740 }
4741 }
4742
4743 },
4744
4745 my_designs : {
4746
4747 'import' : function(file) {
4748
4749 if (
4750 typeof file != 'object' ||
4751 (
4752 file.type.indexOf('application/json') !== 0 &&
4753 file.name.substr(file.name.length-5) != '.json' &&
4754 file.name.substr(file.name.length-5) != '.lumi'
4755 )
4756 )return alert(lumise.i(32));
4757
4758 if (lumise.cliparts.uploads[file.lastModified] === undefined) {
4759
4760 var reader = new FileReader();
4761 reader.addEventListener("load", function () {
4762
4763 try{
4764 var data = JSON.parse(decodeURIComponent(this.result));
4765 }catch(ex){
4766 return lumise.func.notice(ex.message, 'error', 3500);
4767 }
4768
4769 if (data.stages === undefined)
4770 return lumise.func.notice(lumise.i(32), 'error', 3500);
4771
4772 lumise.tools.imports(data);
4773
4774 delete reader;
4775
4776 }, false);
4777
4778 reader.readAsText(file);
4779
4780 }
4781 }
4782
4783 },
4784
4785 nav : {
4786
4787 callback : {
4788
4789 layers: function() {
4790 lumise.design.layers.build();
4791 },
4792
4793 textFX: function(el, e, ratio){
4794 e.data.textFX(el, e, ratio);
4795 },
4796
4797 replace : function(el, e) {
4798
4799 var active = lumise.stage().canvas.getActiveObject();
4800
4801 if (!active)
4802 return;
4803
4804 lumise.func.select_image(function(opt) {
4805
4806 lumise.func.replace_image(opt.url, active);
4807
4808 }, false /*do not save to uploaded list*/);
4809
4810
4811 e.preventDefault();
4812 },
4813
4814 crop: function(el, e){
4815
4816 var s = lumise.get.stage(),
4817 src = s.active.fxOrigin ? s.active.fxOrigin.src :
4818 (s.active._element ? s.active._element.src : s.active._cacheCanvas.toDataURL());
4819
4820 lumise.func.crop({
4821 src: src,
4822 width: Math.round(s.active.width),
4823 save: function(crop) {
4824
4825 var s = lumise.get.stage(),
4826 el = crop.find('.lumise_crop_selArea');
4827
4828 if (s.active) {
4829
4830 var _e = el.get(0),
4831 _c = crop.get(0),
4832 cv = document.createElement('canvas'),
4833 ctx = cv.getContext('2d'),
4834 type = lumise.func.get_type(s.active.src),
4835 w = s.active.width*(_e.offsetWidth/_c.offsetWidth),
4836 h = s.active.height*(_e.offsetHeight/_c.offsetHeight);
4837
4838 cv.width = _e.offsetWidth;
4839 cv.height = _e.offsetHeight;
4840
4841 ctx.drawImage(
4842 crop.find('img.lumise_crop_img').get(0),
4843 -_e.offsetLeft,
4844 -_e.offsetTop,
4845 _c.offsetWidth,
4846 _c.offsetHeight
4847 );
4848
4849 var url = cv.toDataURL('image/'+type);
4850
4851 s.active.setSrc(url, function() {
4852 s.active.set({
4853 width: w,
4854 height: h,
4855 origin_src: url,
4856 src: url,
4857 type: 'image'
4858 });
4859 s.canvas.renderAll();
4860 });
4861
4862 return;
4863
4864 lumise.func.update_image_fx('crop', {
4865 top: _e.offsetTop/_c.offsetHeight,
4866 left: _e.offsetLeft/_c.offsetWidth,
4867 height: _e.offsetHeight/_c.offsetHeight,
4868 width: _e.offsetWidth/_c.offsetWidth,
4869 });
4870 }
4871
4872 }
4873 });
4874
4875 },
4876
4877 select_mask: function(el, e) {
4878
4879 var $this = $(el);
4880
4881 var s = lumise.get.stage(),
4882 objs = s.canvas.getObjects(),
4883 wrp = $this.find('li[data-view="list"]');
4884
4885 wrp.html('');
4886
4887 if (!s.active)
4888 return;
4889
4890 objs.map(function(o) {
4891 if (o.evented !== false && o.active !== true){
4892 var args = lumise.design.layers.item(o);
4893 wrp.append('<span data-id="'+o.id+'">'+args.thumbn.replace('%color%', '').replace('%bgcolor%', '')+' '+args.name+'</span>');
4894 }
4895 });
4896
4897 if (wrp.html() === '') {
4898 wrp.html('<p><center>'+lumise.i('07')+'</center></p>');
4899 $this.find('li.bttm').hide();
4900 } else {
4901 if (s.active && s.active.fx && s.active.fx.mask)
4902 $this.find('li.bttm').show();
4903 else $this.find('li.bttm').hide();
4904
4905 wrp.find('>span').on('click', function(){
4906
4907 var id = this.getAttribute('data-id'),
4908 tar = objs.filter(function(o){ return o.id == id; })[0];
4909
4910 if (
4911 tar.left - (tar.width/2) > s.active.left + (s.active.width/2) ||
4912 tar.left + (tar.width/2) < s.active.left - (s.active.width/2) ||
4913 tar.top - (tar.height/2) > s.active.top + (s.active.height/2) ||
4914 tar.top + (tar.height/2) < s.active.top - (s.active.height/2)
4915 ){
4916 return alert(lumise.i('08'));
4917 }
4918
4919 lumise.stack.save();
4920 lumise.ops.importing = true;
4921 tar.setCoords();
4922
4923 var arect = s.active.getBoundingRect(),
4924 brect = tar.getBoundingRect();
4925
4926 var group = [];
4927 delete tar.clipTo;
4928 tar.set({
4929 scaleX: tar.scaleX*5,
4930 scaleY: tar.scaleY*5,
4931 });
4932 group.push(tar);
4933 var new_group = new fabric.Group(group, {});
4934
4935 var mask = {
4936 left: (brect.left-arect.left)/arect.width,
4937 top: (brect.top-arect.top)/arect.height,
4938 width: brect.width/arect.width,
4939 height: brect.height/arect.height,
4940 dataURL: new_group.toDataURL()
4941 };
4942
4943 $this.find('li.bttm').show();
4944 $(this).remove();
4945 s.canvas.remove(tar);
4946
4947 lumise.func.update_image_fx('mask', mask, function(){
4948 lumise.ops.importing = false;
4949 lumise.stack.save();
4950 });
4951
4952 });
4953
4954 }
4955 },
4956
4957 qrcode: function(){
4958
4959 var fill_default = lumise.get.color('invert');
4960
4961 if (lumise.data.colors !== undefined && lumise.data.colors !== '') {
4962 fill_default = lumise.data.colors.split(',')[0];
4963 if (fill_default.indexOf(':') > -1)
4964 fill_default = fill_default.split(':')[1];
4965 fill_default = fill_default.split('@')[0];
4966 };
4967
4968 lumise.objects.qrcode(lumise.i('09'), fill_default, function(obj){
4969 lumise.get.el('top-tools').
4970 find('li[data-tool="qrcode-text"]').
4971 addClass('active').
4972 find('textarea').focus();
4973 });
4974 return;
4975
4976 lumise.tools.lightbox({
4977 width: 500,
4978 content: '<div id="lumise-create-qrcode" class="lumise-lightbox-form">\
4979 <h3 class="title">'+lumise.i('10')+'</h3>\
4980 <p>\
4981 <label>'+lumise.i('11')+':</label>\
4982 <input name="text" type="text" placeholder="'+lumise.i('11')+'" /></p>\
4983 <p>\
4984 <label>'+lumise.i('12')+':</label>\
4985 <input name="color" type="search" placeholder="'+lumise.i('13')+'" value="'+fill_default+'" />\
4986 </p>\
4987 <p class="right"><button class="primary">'+lumise.i('10')+'</button></p>\
4988 </div>'
4989 });
4990
4991 new jscolor.color(lumise.func.q('#lumise-create-qrcode input[name="color"]'), {});
4992 $('#lumise-create-qrcode button').on('click', function(e){
4993
4994 var text = lumise.func.q('#lumise-create-qrcode input[name="text"]').value,
4995 color = lumise.func.q('#lumise-create-qrcode input[name="color"]').value;
4996
4997 if (text === '')
4998 return $('#lumise-create-qrcode input[name="text"]').shake();
4999 if (color === '')
5000 return $('#lumise-create-qrcode input[name="color"]').shake();
5001
5002 lumise.objects.qrcode(text, color);
5003 lumise.get.el('left .lumise-left-nav li[data-tab="layers"]').trigger('click');
5004
5005 });
5006 lumise.func.q('#lumise-create-qrcode input[name="text"]').focus();
5007
5008 },
5009
5010 drawing: function(el, e) {
5011
5012 var canvas = lumise.stage().canvas;
5013 var fill_default = lumise.get.color('invert');
5014
5015 if (lumise.data.colors !== undefined && lumise.data.colors !== '') {
5016 fill_default = lumise.data.colors.split(',')[0];
5017 if (fill_default.indexOf(':') > -1)
5018 fill_default = fill_default.split(':')[1];
5019 fill_default = fill_default.split('@')[0];
5020 };
5021
5022 if (!canvas.isDrawingMode)
5023 return;
5024
5025 canvas.freeDrawingBrush.width = parseFloat(lumise.get.el('drawing-width').val());
5026 canvas.freeDrawingBrush.color = lumise.get.el('drawing-color').val() ?
5027 lumise.get.el('drawing-color').val() :
5028 fill_default;
5029 },
5030
5031 imageFXReset: function() {
5032
5033 var s = lumise.get.stage();
5034 if (!s.active || !s.active.fxOrigin)
5035 return lumise.tools.discard();
5036
5037 lumise.stack.save();
5038
5039 delete s.active.fx;
5040
5041 s.active._element.src = s.active.fxOrigin.src;
5042 s.active._originalElement.src = s.active.fxOrigin.src;
5043
5044 s.canvas.renderAll();
5045 lumise.tools.discard();
5046
5047
5048 },
5049
5050 designs: function(){
5051
5052 if ($('#lumise-saved-designs p.empty').length > 0)
5053 lumise.render.refresh_my_designs();
5054
5055 return;
5056
5057 lumise.get.el('saved-designs').html('<i class="lumise-spinner x2 margin-2"></i>');
5058 lumise.post({
5059 action: 'my_designs',
5060 index: 0
5061 });
5062
5063 },
5064
5065 proceed: function(el, e) {
5066
5067 var printings = lumise.get.el('cart-wrp').find('input[name="printing"].lumise-cart-param'),
5068 prtsel = printings.filter(function() {
5069 return $(this).prop('checked');
5070 });
5071
5072 if (printings.length > 0 && prtsel.length === 0)
5073 printings.eq(0).prop({'checked': true}).trigger('change');
5074
5075 },
5076
5077 svg : function(el, e) {
5078
5079 if (e.target.tagName == 'INPUT' && e.target.getAttribute('data-color')) {
5080
5081 var se = lumise.get.el('svg-fill').get(0),
5082 cl = e.target.getAttribute('data-color');
5083
5084 se.setAttribute('data-active-color', e.target.getAttribute('data-color'));
5085 /*if (se.color && typeof se.color.fromString == 'function')
5086 se.color.fromString(cl);*/
5087 se.value = cl;
5088 se.style.background = cl;
5089 se.style.color = lumise.tools.svg.invertColor(cl);
5090
5091 lumise.get.el('svg-colors').addClass('active');
5092
5093 return;
5094
5095 }else if (e.target.getAttribute('data-func') == 'editor'){
5096 lumise.tools.svg.edit();
5097 };
5098
5099 lumise.get.el('svg-colors').removeClass('active');
5100
5101 },
5102
5103 group : function(el, e) {
5104
5105 var stage = lumise.stage(),
5106 group = stage.canvas.getActiveGroup(),
5107 tel = $('#lumise-top-tools ul[data-mode="group"]'),
5108 gr = tel.attr('data-grouped'),
5109 id = new Date().getTime().toString(36);
5110
5111 if (group && group._objects) {
5112 group._objects.map(function(o) {
5113 if (gr == 'false')
5114 o.set({group_pos: id});
5115 else o.set({group_pos: null});
5116 });
5117 $('#lumise-top-tools ul[data-mode="group"]').attr({'data-grouped': gr == 'false' ? 'true' : 'false'});
5118 };
5119
5120 e.preventDefault();
5121
5122 },
5123
5124 ungroup: function(el, e) {
5125 lumise.stage().canvas.getActiveObject().set({'group_pos': null});
5126 el.style.display = 'none';
5127 }
5128
5129 },
5130
5131 load : {
5132
5133 cliparts: function() {
5134
5135 lumise.post({
5136 action: 'cliparts',
5137 category: ''
5138 });
5139
5140 },
5141
5142 templates: function() {
5143
5144 lumise.post({
5145 action: 'templates',
5146 category: ''
5147 });
5148
5149 },
5150
5151 images: function(){
5152
5153 $('#lumise-uploads div[data-tab="internal"]').trigger('scroll');
5154
5155 },
5156
5157 shapes: function(){
5158
5159 $('#lumise-shapes').trigger('scroll');
5160
5161 }
5162
5163 }
5164
5165 }
5166
5167 },
5168
5169 xitems : {
5170
5171 resources : {},
5172
5173 load : function(comp, ops) {
5174
5175 this.resources[comp] = {
5176 url: [],
5177 ops: ops
5178 };
5179
5180 lumise.post({
5181 action: 'addon',
5182 component: comp,
5183 category: '',
5184 rayid: Math.random()
5185 }, function(res) {
5186
5187 if (typeof ops.load == 'function')
5188 res = ops.load(res);
5189
5190 lumise.xitems.response(res, comp);
5191
5192 });
5193 },
5194
5195 response: function (res, comp) {
5196
5197 if (typeof lumise.xitems.resources[comp].ops.response == 'function')
5198 res = lumise.xitems.resources[comp].ops.response(res);
5199
5200 var html = '', wrp = $('#lumise-'+comp+'-list');
5201
5202 if (res.items && res.items.length > 0) {
5203
5204 res.items.map(function(item) {
5205
5206 lumise.xitems.resources[comp].url[item.id] = lumise.data.upload_url+item.upload;
5207
5208 html += '<li style="background-image: url(\''+(
5209 item.thumbnail_url !== undefined ?
5210 item.thumbnail_url :
5211 item.screenshot
5212 )+'\')" \data-ops=\'[{'+
5213 '"type": "'+lumise.xitems.resources[comp].ops.preview+'",'+
5214 '"component": "'+comp+'",'+
5215 '"name": "'+item.name+'",'+
5216 '"id": "'+item.id+'",'+
5217 '"tags": "'+(item.tags?item.tags:'')+'",'+
5218 '"cates": "'+(item.cates?item.cates:'')+'",'+
5219 '"resource": "backgrounds",'+
5220 '"price": "'+item.price+'",'+
5221 '"screenshot": "'+(
5222 item.thumbnail_url !== undefined ?
5223 item.thumbnail_url :
5224 item.screenshot
5225 )+'"'+
5226 '}]\' class="lumise-xitem">'+
5227 '<i data-tag="'+item.id+'">'+(
5228 item.price > 0 ?
5229 lumise.func.price(item.price) :
5230 lumise.i(100)
5231 )+'</i>'+
5232 '<i data-info="'+item.id+'"></i>'+
5233 '</li>';
5234 });
5235
5236 var total = res.total ? res.total : 0;
5237
5238 lumise.ops[comp+'_q'] = res.q;
5239 lumise.ops[comp+'_category'] = res.category;
5240 lumise.ops[comp+'_index'] = parseInt(res.index)+res.items.length;
5241
5242 if (lumise.ops[comp+'_index']<total)
5243 lumise.ops[comp+'_loading'] = false;
5244
5245 }else html += '<span class="noitems">'+lumise.i(42)+'</span>';
5246
5247 wrp.find('i.lumise-spinner').remove();
5248 wrp.find('ul.lumise-list-items').append(html);
5249
5250 lumise.render.categories(comp, res);
5251
5252 wrp.find('ul.lumise-list-items li.lumise-xitem:not([data-event="true"])').off('click').on('click', function(e) {
5253
5254 e.preventDefault();
5255
5256 var o = JSON.parse(this.getAttribute('data-ops'))[0];
5257
5258 o.url = lumise.xitems.resources[comp].url[o.id];
5259
5260 if (
5261 lumise.xitems.resources[comp].ops !== undefined &&
5262 typeof lumise.xitems.resources[comp].ops.click == 'function'
5263 )lumise.xitems.resources[comp].ops.click(o, this);
5264
5265 });
5266
5267 },
5268
5269 scroll_more : function(e) {
5270
5271 var comp = this.getAttribute('data-component');
5272
5273 if (!comp || lumise.ops[comp+'_loading'] === true)
5274 return;
5275
5276 if (this.scrollTop + this.offsetHeight >= this.scrollHeight/* - 100*/) {
5277
5278 lumise.post({
5279 action: 'addon',
5280 component: comp,
5281 category: lumise.ops[comp+'_category'],
5282 q: lumise.ops[comp+'_q'],
5283 index: lumise.ops[comp+'_index']
5284 }, function(res) {
5285 lumise.xitems.response(res, comp);
5286 });
5287
5288 $(this).append('<i class="lumise-spinner white x3 mt1 mb1"></i>');
5289 lumise.ops[comp+'_loading'] = true;
5290
5291 }
5292
5293
5294 },
5295
5296 search : function(e) {
5297
5298 var comp = this.getAttribute('data-component');
5299
5300 if (e.type == 'click') {
5301 setTimeout(function(el){
5302 if (lumise.ops[comp+'_q'] != el.value && el.value === '') {
5303 lumise.ops[comp+'_q'] = el.value;
5304 lumise.xitems.do_search(comp);
5305 }
5306 }, 100, this);
5307 }
5308
5309 if (this.tagName == 'INPUT' && e.keyCode !== 13)
5310 return;
5311
5312 if (this.tagName == 'INPUT')
5313 lumise.ops[comp+'_q'] = this.value;
5314
5315 lumise.xitems.do_search(comp);
5316
5317 },
5318
5319 do_search: function(type) {
5320
5321 lumise.ops[type+'_index'] = 0;
5322 lumise.ops[type+'_loading'] = false;
5323
5324 lumise.get.el(type+'-list').find('ul').html('');
5325 lumise.get.el(type+'-list').trigger('scroll');
5326
5327 }
5328
5329 },
5330
5331 templates : {
5332
5333 storage : [],
5334
5335 add_events : function() {
5336
5337 var events = [['click', function(e){
5338
5339 var t = this,
5340 ops = JSON.parse(this.getAttribute('data-ops'));
5341
5342 if (lumise.templates.storage[ops[0].id]) {
5343 lumise.templates.load({
5344 upload: lumise.templates.storage[ops[0].id],
5345 id: ops[0].id,
5346 price: ops[0].price
5347 });
5348 if (lumise.stage().template !== undefined)
5349 lumise.stage().template.loaded = true;
5350 }
5351
5352 }]];
5353
5354 lumise.get.el('left').find('ul.lumise-list-items li.lumise-template:not([data-event="true"])').each(function(){
5355
5356 if (this.getAttribute('data-event'))
5357 return;
5358
5359 this.setAttribute('data-event', true);
5360
5361 var _this = this;
5362 events.map(function(ev){
5363 _this.addEventListener(ev[0], ev[1], false);
5364 });
5365 });
5366 },
5367
5368 load : function(tmp, callback) {
5369
5370 if (tmp.upload !== undefined && tmp.upload.indexOf('.lumi') > -1) {
5371
5372 if (tmp.upload.toString().trim().indexOf('http') !== 0)
5373 tmp.upload = lumise.data.upload_url+tmp.upload;
5374
5375 lumise.f(lumise.i('loading')+'..');
5376
5377 $.ajax({
5378 url: tmp.upload,
5379 method: 'GET',
5380 statusCode: {
5381 403: lumise.response.statusCode[403],
5382 404: function(){
5383 lumise.func.notice(lumise.i(83), 'error', 3500);
5384 lumise.f(false);
5385 },
5386 200: function(res) {
5387 lumise.templates.response(res, tmp, callback);
5388 }
5389 }
5390 });
5391 } else {
5392 if (lumise.ops.first_completed !== true) {
5393 lumise.actions.do('first-completed');
5394 lumise.ops.first_completed = true;
5395 };
5396 }
5397
5398 },
5399
5400 response : function(res, tmp, callback) {
5401
5402 try {
5403 if (typeof res === ' string' || res.stages === undefined)
5404 res = JSON.parse(decodeURIComponent(typeof res === 'string' ? res : res.responseText));
5405 }catch(ex) {
5406 console.warn(ex);
5407 console.log(ex);
5408 lumise.f(false);
5409 return;
5410 };
5411
5412 if (typeof res !== 'object' || res.stages === undefined || res.stages.length === 0)
5413 return false;
5414
5415 if (res.stages.lumise === undefined)
5416 res.stages.lumise = res.stages[Object.keys(res.stages)[0]];
5417
5418 if (typeof res.stages.lumise.data == 'string')
5419 res.stages.lumise.data = JSON.parse(res.stages.lumise.data);
5420
5421 var objects = res.stages.lumise.data.objects;
5422
5423 if (objects !== undefined) {
5424 for (var item in objects){
5425 if(
5426 objects[item] !== null &&
5427 typeof objects[item]['type'] !== 'undefined'
5428 ){
5429 objects[item]['price'] = 0;
5430 objects[item]['template'] = [tmp.id, !isNaN(tmp.price) ? parseFloat(tmp.price) : 0];
5431 }
5432 }
5433 };
5434
5435 lumise.cart.template[lumise.current_stage] = [];
5436 lumise.cart.price.template[lumise.current_stage] = 0;
5437
5438 res.clear = tmp.clear;
5439
5440 lumise.actions.do('template', tmp, res);
5441
5442 lumise.tools.imports(res, function(stage) {
5443
5444 if (
5445 stage.template !== undefined &&
5446 stage.template.offset !== undefined &&
5447 stage.template.scale !== undefined &&
5448 stage.template.loaded !== true
5449 ) {
5450
5451 var ez = lumise.stage().limit_zone,
5452 scale = (stage.template.scale/(100/(stage.data.devicePixelRatio ? stage.data.devicePixelRatio : 1)))*
5453 (ez.width/stage.edit_zone.width),
5454 rt = (ez.width/stage.edit_zone.width),
5455 left = (((stage.edit_zone.width - stage.template.offset.width)/2) - stage.template.offset.left),
5456 top = (((stage.edit_zone.height - stage.template.offset.height)/2) - stage.template.offset.top);
5457
5458 lumise.func.scale_designs(scale, {left: left, top: top});
5459 stage.template.loaded = true;
5460
5461 };
5462
5463 if (lumise.ops.first_completed !== true) {
5464 lumise.actions.do('first-completed');
5465 lumise.ops.first_completed = true;
5466 };
5467
5468 if (typeof callback === 'function')
5469 callback();
5470
5471 });
5472
5473 }
5474 },
5475
5476 cliparts : {
5477
5478 storage : [],
5479
5480 uploads : [],
5481
5482 add : function(el, ops) {
5483
5484 if (!el.getAttribute('data-ops'))
5485 return;
5486
5487 lumise.ops.preventClick = true;
5488
5489 lumise.f(lumise.i('loading')+'..');
5490
5491 var ops = $.extend(JSON.parse(el.getAttribute('data-ops')), (ops ? ops : {})),
5492 sto = ops.type == 'image' ? lumise.cliparts.storage[ops.id] : (lumise.cliparts.uploads[ops.id] || {}),
5493 stage = lumise.stage();
5494
5495 if (ops.type == 'shape')
5496 sto.url = 'data:image/svg+xml;base64,'+btoa(el.innerHTML.trim());
5497
5498 sto.width = sto.width ? sto.width : stage.limit_zone.width*0.8;
5499
5500 if (ops.text && !ops.name)
5501 ops.name = ops.text.substr(0, 30);
5502
5503 if (sto.url){
5504 if (sto.url.indexOf('data:image/svg+xml;base64,') > -1 || sto.url.split('.').pop().trim() == 'svg') {
5505 ops.type = 'svg';
5506 }else ops.type = 'image';
5507 }
5508
5509 ops = $.extend({
5510 left: stage.limit_zone.left + (stage.limit_zone.width/2),
5511 top: stage.limit_zone.top + (stage.limit_zone.height/2),
5512 width: sto.width,
5513 name: sto.name ? sto.name : (
5514 sto.url && sto.url.indexOf('data:image') === -1 ?
5515 sto.url.split('/').pop() :
5516 ops.type == 'svg' ? 'New SVG' : 'New Image'
5517 )
5518 }, ops);
5519
5520 var fill_default = lumise.get.color('invert');
5521
5522 if (lumise.data.colors !== undefined && lumise.data.colors !== '') {
5523 fill_default = lumise.data.colors.split(',')[0];
5524 if (fill_default.indexOf(':') > -1)
5525 fill_default = fill_default.split(':')[1];
5526 fill_default = fill_default.split('@')[0];
5527 };
5528
5529 if (ops.type == 'i-text') {
5530
5531 ops.fill = fill_default;
5532
5533 lumise.design.layers.create({type: 'text', ops: ops});
5534 lumise.f(false);
5535 return;
5536 }else if (ops.type == 'text-fx') {
5537 ops.fill = fill_default;
5538 };
5539
5540 fabric.Image.fromURL(sto.url, function(image) {
5541
5542 lumise.f(false);
5543
5544 if (ops.height === undefined)
5545 ops.height = image.height * (sto.width/image.width),
5546
5547 ops.clipTo = function(ctx) {
5548 return lumise.objects.clipto(ctx, image);
5549 };
5550
5551 image.set(ops);
5552
5553 lumise.design.layers.create({
5554 type: 'image',
5555 src: sto.url,
5556 image: image
5557 });
5558
5559 lumise.get.el('x-thumbn-preview').hide();
5560
5561 stage.canvas.setActiveObject(image);
5562
5563 });
5564
5565 },
5566
5567 add_events : function() {
5568
5569 var events = [['dragstart', function(e){
5570
5571 lumise.ops.drag_start = this;
5572
5573 var offs = $(this).offset();
5574
5575 lumise.ops.drag_start.distance = {
5576 x : (e.pageX - offs.left) - (this.offsetWidth/2),
5577 y : (e.pageY - offs.top) - (this.offsetHeight/2),
5578 w : this.offsetWidth,
5579 h : this.offsetHeight
5580 };
5581
5582 lumise.get.el('x-thumbn-preview').hide();
5583
5584 }],
5585 ['dragend', function(e){
5586
5587 lumise.ops.drag_start = null;
5588
5589 }],
5590 ['click', function(e){
5591
5592 var del = e.target.getAttribute('data-delete');
5593 if (del) {
5594 if (confirm(lumise.i('sure'))) {
5595 $(this).remove();
5596 URL.revokeObjectURL($(e.target).parent().find('img').attr('src'));
5597 delete lumise.cliparts.uploads[del];
5598 return lumise.indexed.delete(del, 'uploads');
5599 }
5600 }
5601
5602 var t = this, ops = JSON.parse(this.getAttribute('data-ops'));
5603
5604 if (ops[0].type == 'shape')
5605 ops[0].url = 'data:image/svg+xml;base64,'+btoa(t.innerHTML.trim());
5606 else if (ops[0].url === undefined)
5607 ops[0].url = lumise.cliparts.storage[ops[0].id] || lumise.cliparts.uploads[ops[0].id];
5608
5609 if (ops[0].url && ops[0].url.indexOf('dumb-') === 0) {
5610 lumise.indexed.get(ops[0].url.split('dumb-')[1], 'dumb', function(res){
5611 if (res !== null & res !== undefined) {
5612 lumise.cliparts.uploads[ops[0].id] = res[0];
5613 ops[0].url = res[0];
5614 lumise.func.preset_import(ops, {});
5615 delete res;
5616 } else lumise.func.notice(lumise.i(165));
5617 });
5618 } else {
5619 lumise.func.preset_import(ops, {});
5620 }
5621
5622 }]];
5623
5624 lumise.get.el('left').find('ul.lumise-list-items li.lumise-clipart:not([draggable="true"])').each(function(){
5625
5626 if (this.getAttribute('draggable'))
5627 return;
5628
5629 this.setAttribute('draggable', true);
5630 var _this = this;
5631 events.map(function(ev){
5632 _this.addEventListener(ev[0], ev[1], false);
5633 });
5634 });
5635 },
5636
5637 external : function(url, callback) {
5638
5639 var image = new Image();
5640
5641 image.crossOrigin = "Anonymous";
5642 image.onload = function () {
5643
5644 var canvas = document.createElement('canvas');
5645
5646 canvas.width = this.naturalWidth;
5647 canvas.height = this.naturalHeight;
5648 canvas.getContext('2d').drawImage(this, 0, 0);
5649 this.callback(canvas);//.toDataURL('image/jpeg')
5650
5651 delete this;
5652 delete canvas;
5653 };
5654
5655 image.callback = callback;
5656 image.src = url;
5657
5658 },
5659
5660 import : function(id, ops, dir) {
5661
5662 var do_import = function() {
5663
5664 lumise.cliparts.uploads[id] = ops.url;
5665
5666 if (ops.thumbn && typeof ops.thumbn == 'string' && ops.thumbn.indexOf('data:image') === 0)
5667 ops.thumbn = lumise.func.url2blob(ops.thumbn);
5668
5669 if (ops.save !== false) {
5670 try{
5671 lumise.indexed.save([{
5672 thumbn: ops.thumbn,
5673 name: ops.name,
5674 id: id
5675 }, [ops.url]], 'uploads');
5676 }catch(ex){console.log(ex);}
5677 }
5678
5679 var html = '<li style="background-image: url(\''+URL.createObjectURL(ops.thumbn ? ops.thumbn : ops.url)+'\')" \
5680 data-ops=\'[{"type": "upload", "name": "'+ops.name+'", "id": "'+id+'"}]\' class="lumise-clipart">\
5681 <i data-info="'+id+'"></i>\
5682 <i class="lumise-icon-close" data-delete="'+id+'" title="'+lumise.i(47)+'"></i>\
5683 </li>';
5684
5685 if (dir == 'prepend')
5686 lumise.get.el('upload-list').find('ul.lumise-list-items').prepend(html);
5687 else lumise.get.el('upload-list').find('ul.lumise-list-items').append(html);
5688
5689 lumise.cliparts.add_events();
5690
5691 };
5692
5693 if (ops.thumbn === undefined) {
5694
5695 lumise.func.createThumbn({
5696 source: ops.url,
5697 width: 300,
5698 height: 240,
5699 callback: function(canvas) {
5700 ops.thumbn = lumise.func.url2blob(canvas.toDataURL('image/jpeg', 0.3));
5701 do_import();
5702 }
5703 });
5704
5705 return;
5706 };
5707
5708 do_import();
5709
5710
5711 }
5712
5713 },
5714
5715 actions : {
5716
5717 stack : [],
5718
5719 add : function(name, callback, priority) {
5720
5721 if (priority === undefined)
5722 priority = 10;
5723
5724 if (this.stack[priority] === undefined)
5725 this.stack[priority] = {};
5726
5727 if (this.stack[priority][name] === undefined)
5728 this.stack[priority][name] = [];
5729
5730 this.stack[priority][name].push(callback);
5731
5732 },
5733
5734 do : function(name, opts, p) {
5735
5736 lumise.actions.stack.map(function(stack) {
5737 if (stack[name] !== undefined) {
5738 var res;
5739 stack[name].map(function(evt){
5740 if (typeof evt == 'function') {
5741 try {
5742 res = evt(opts, p);
5743 }catch(ex){
5744 console.warn(ex.message+' - do action '+name);
5745 console.log(ex);
5746 lumise.func.notice(ex.message+' - do action '+name, 'error');
5747 }
5748 }
5749 });
5750 return res;
5751 }
5752 });
5753
5754 }
5755
5756 },
5757
5758 tools : {
5759
5760 set : function(obj) {
5761
5762 if (!obj)
5763 obj = lumise.stage().canvas.getActiveObject();
5764
5765 if (!obj)
5766 return;
5767
5768 var el = lumise.get.el;
5769
5770 el('transparent').val(obj.opacity !== undefined && obj.opacity !== null ? parseFloat(obj.opacity)*100 : 100).trigger('input');
5771 el('rotate').val(obj.angle !== undefined ? obj.angle : 0).trigger('input');
5772
5773 el('curved-radius').val(obj.radius !== undefined ? obj.radius : 50).trigger('input');
5774 el('curved-spacing').val(obj.spacing !== undefined ? obj.spacing : 50).trigger('input');
5775 el('workspace').find('.lumise-edit-text').val(obj.text ? obj.text.trim() : '');
5776
5777 el('font-size').val(obj.fontSize ? obj.fontSize : 14).trigger('input');
5778 el('letter-spacing').val(obj.charSpacing !== undefined ? obj.charSpacing : 0).trigger('input');
5779 el('line-height').val(obj.lineHeight !== undefined ? obj.lineHeight*10 : 10).trigger('input');
5780
5781 if (obj.type == 'path'){
5782 el('stroke-width').attr({'data-ratio': '1'}).val(obj.strokeWidth !== undefined ? obj.strokeWidth : 0).trigger('input');
5783 }else{
5784 el('stroke-width').attr({'data-ratio': '0.1'}).val(obj.strokeWidth !== undefined ? obj.strokeWidth*10 : 0).trigger('input');
5785 }
5786
5787 el('skew-x').val(obj.skewX !== undefined ? obj.skewX : 0).trigger('input');
5788 el('skew-y').val(obj.skewY !== undefined ? obj.skewY : 0).trigger('input');
5789
5790 if (
5791 obj.type != 'path' &&
5792 (
5793 obj.type != 'image' ||
5794 (obj.type == 'image' && obj.fill != 'rgb(0,0,0)' && obj.fill !== '#000' && obj.fill !== '')
5795 ) &&
5796 (
5797 obj.type != 'svg' ||
5798 (obj.type == 'svg' && obj.fill != 'rgb(0,0,0)' && obj.fill !== '#000' && obj.fill !== '')
5799 )
5800 ) {
5801
5802 var fill_default = lumise.get.color('invert');
5803
5804 if (lumise.data.colors !== undefined && lumise.data.colors !== '') {
5805 fill_default = lumise.data.colors.split(',')[0];
5806 if (fill_default.indexOf(':') > -1)
5807 fill_default = fill_default.split(':')[1];
5808 fill_default = fill_default.split('@')[0];
5809 };
5810
5811 var fill = obj.fill ? obj.fill : fill_default;
5812
5813 if (el('fill').get(0).color && typeof el('fill').get(0).color.fromString == 'function')
5814 el('fill').get(0).color.fromString(fill);
5815 el('fill').closest('li[data-tool="fill"]').css({'border-bottom': '3px solid '+(fill)});
5816
5817 }else{
5818 el('fill').val('').attr({style: ''});
5819 el('fill').closest('li[data-tool="fill"]').css({'border-bottom': ''});
5820 }
5821
5822 var stroke = obj.stroke ? obj.stroke : '';
5823 if (el('stroke').get(0).color && typeof el('stroke').get(0).color.fromString == 'function')
5824 el('stroke').val(stroke).css({background: ''}).get(0).color.fromString(stroke);
5825 el('text-tools .text-format').removeClass('selected');
5826 el('text-tools .text-format.lumisex-align-'+obj.textAlign).addClass('selected');
5827 el('text-align').attr({'class': 'lumisex-align-'+(obj.textAlign ? obj.textAlign : 'center')});
5828
5829 el('curved').get(0).checked = (obj.type === 'curvedText');
5830 el('flip-x').get(0).checked = obj.flipX;
5831 el('flip-y').get(0).checked = obj.flipY;
5832 el('lock-position').get(0).checked = obj.lockPosition;
5833 el('position-wrp').attr({'data-lock': obj.lockPosition === true ? 'true' : 'false'});
5834
5835 el('qrcode-text').val(obj.text ? obj.text.trim() : '');
5836
5837 var format = el('text-tools .text-format');
5838
5839 [['bold', 'fontWeight'], ['italic', 'fontStyle'], ['underline', 'textDecoration']].map(function(f){
5840 if (obj[f[1]] == f[0])
5841 format.filter('[data-format="'+f[0]+'"]').addClass('selected');
5842 });
5843
5844 if (obj.fontFamily){
5845
5846 var fml = obj.fontFamily.replace(/\"/g, '');
5847 if (el('fonts').find('font[data-family="'+fml+'"]').length > 0) {
5848 el('fonts').find('.selected').removeClass('selected');
5849 el('fonts').find('font[data-family="'+fml+'"]').addClass('selected');
5850 }
5851 el('text-tools').find('button.dropdown').html('<font style="font-family:\''+fml+'\'">'+fml+'</font>');
5852 }
5853
5854 el('text-effect').find('img[data-effect]').attr({'data-selected': null});
5855
5856 if (obj.type == 'text-fx') {
5857
5858 if (obj.bridge === undefined)
5859 obj.bridge = {};
5860
5861 el('text-fx-offsety').val(obj.bridge.offsetY !== undefined ? obj.bridge.offsetY*100 : 50).trigger('input');
5862 el('text-fx-bottom').val(obj.bridge.bottom !== undefined ? obj.bridge.bottom*10 : 25).trigger('input');
5863 el('text-fx-curve').val(obj.bridge.curve !== undefined ? obj.bridge.curve*10 : -25).trigger('input');
5864 el('text-fx-trident').prop({checked: obj.bridge.trident});
5865
5866 if (obj.bridge.oblique === true)
5867 el('text-effect').find('img[data-effect="oblique"]').attr({'data-selected': 'true'});
5868 else el('text-effect').find('img[data-effect="bridge"]').attr({'data-selected': 'true'});
5869
5870 }else if (obj.type == 'curvedText') {
5871 el('text-effect').find('img[data-effect="curved"]').attr({'data-selected': 'true'});
5872 }else if (obj.type == 'text-fx') {
5873 el('text-effect').find('img[data-effect="normal"]').attr({'data-selected': 'true'});
5874 }else if (obj.type == 'image') {
5875
5876 el('image-fx-brightness').val(obj.fx && obj.fx.brightness ? obj.fx.brightness : 0).trigger('input');
5877 el('image-fx-saturation').val(obj.fx && obj.fx.saturation ? obj.fx.saturation : 100).trigger('input');
5878 el('image-fx-contrast').val(obj.fx && obj.fx.contrast ? obj.fx.contrast : 0).trigger('input');
5879 el('image-fx-deep').val(obj.fx && obj.fx.deep ? obj.fx.deep : 0).trigger('input');
5880 el('image-fx-mode').val(obj.fx && obj.fx.mode ? obj.fx.mode : 'light');
5881 el('image-fx-fx').find('[data-selected]').removeAttr('data-selected');
5882 el('image-fx-fx').find('li[data-fx="'+(obj.fx && obj.fx.fx ? obj.fx.fx : '')+'"]').attr({'data-selected': 'true'});
5883 }else if (obj.type == 'svg' && obj.src !== undefined && obj.src.indexOf('data:image/svg+xml;base64,') === 0) {
5884
5885 lumise.func.set_svg_colors(obj);
5886
5887 };
5888
5889 lumise.design.layers.arrange();
5890
5891 if (obj.type == 'image' && obj._element && obj._element.src.indexOf('data:image/svg+xml;base64,') > -1)
5892 obj.set('type', 'svg');
5893
5894 lumise.e.tools.attr({'data-view': obj.type});
5895
5896 el('top-tools').find('li[data-tool="un-group"]').css({display: obj.group_pos ? 'inline-block' : 'none'});
5897
5898 switch (el('text-effect').find('img[data-effect][data-selected="true"]').attr('data-effect')) {
5899 case 'bridge':
5900 case 'oblique':
5901 $('[data-tool="text-effect"] li[data-func]').removeAttr('data-active');
5902 $('[data-tool="text-effect"] li[data-func="text-fx"]').attr({'data-active': 'true'});
5903 break;
5904 case 'curved':
5905 $('[data-tool="text-effect"] li[data-func]').removeAttr('data-active');
5906 $('[data-tool="text-effect"] li[data-func="curved"]').attr({'data-active': 'true'});
5907 break;
5908 default:
5909 $('[data-tool="text-effect"] li[data-func]').removeAttr('data-active');
5910 break;
5911 }
5912
5913 },
5914
5915 export : function(stage) {
5916
5917 if (!stage || !stage.canvas)
5918 return null;
5919
5920 var data = stage.canvas.toJSON(lumise.ops.export_list);
5921
5922 data.objects.map(function(obj, ind){
5923
5924 if (obj.evented === false && obj.type != 'imagebox') {
5925 delete data.objects[ind];
5926 } else delete data.objects[ind].clipTo;
5927
5928 Object.keys(obj).map(function(k){
5929 if (obj[k] === undefined || obj[k] === null)
5930 delete obj[k];
5931 });
5932
5933 if (obj.fontFamily !== undefined && obj.font === undefined) {
5934 fonts = JSON.parse(localStorage.getItem('LUMISE_FONTS'));
5935 if (fonts[encodeURIComponent(obj.fontFamily)])
5936 obj.font = fonts[encodeURIComponent(obj.fontFamily)];
5937 };
5938
5939 if (
5940 obj.fontFamily !== undefined &&
5941 typeof obj.font == 'string' &&
5942 obj.font.indexOf('.woff') > -1 &&
5943 obj.font.indexOf('http') === -1
5944 )obj.font = lumise.data.upload_url+obj.font;
5945
5946 if (obj.fontFamily && obj.fontFamily.indexOf('"') > -1)
5947 obj.fontFamily = obj.fontFamily.replace(/\"/g, '');
5948
5949 if (obj.origin_src) {
5950 obj.src = obj.origin_src;
5951 delete obj.origin_src;
5952 };
5953
5954 if (obj.type == 'text-fx' || obj.type == 'i-text' || obj.type == 'curvedText')
5955 delete obj.src;
5956
5957 if (obj.type == 'path-group') {
5958 obj.type = 'svg';
5959 delete obj.paths;
5960 };
5961
5962 });
5963
5964 data.devicePixelRatio = window.devicePixelRatio;
5965 data.product_color = lumise.get.color();
5966 data.limit_zone = {};
5967 data.product_width = stage.product.width;
5968 data.product_height = stage.product.height;
5969 data.screenshot = stage.screenshot;
5970
5971 ['width', 'height', 'top', 'left'].map(function(f){
5972 data.limit_zone[f] = stage.limit_zone ? stage.limit_zone[f] : 0;
5973 });
5974
5975 data = lumise.apply_filters('export', data, stage);
5976
5977 return data;
5978
5979 },
5980
5981 toImage : function(ops) {
5982
5983 var s = ops.stage,
5984 dpr = window.devicePixelRatio !== undefined ? window.devicePixelRatio : 1;
5985
5986 if (!s || !s.limit_zone)
5987 return null;
5988
5989 ops = $.extend({
5990 is_bg: false,
5991 format: ops.is_bg !== true ? 'png' : 'jpeg',
5992 multiplier: dpr/2,
5993 top: s.limit_zone.top,
5994 left: s.limit_zone.left,//-(((s.limit_zone.height*(w/h))-s.limit_zone.width)/2),
5995 width: s.limit_zone.width,//s.limit_zone.height*(w/h),
5996 height: s.limit_zone.height
5997 }, ops);
5998
5999 ops.multiplier = ops.multiplier/dpr;
6000
6001 if (ops.is_bg == 'full') {
6002 ops.left = s.product.left-(s.product.width/2);
6003 ops.top = s.product.top-(s.product.height/2);
6004 ops.width = s.product.width;
6005 ops.height = s.product.height;
6006 } else {
6007 ops.left += 1;
6008 ops.top += 1;
6009 ops.width -= 1;
6010 ops.height -= 1;
6011 };
6012
6013 if (
6014 ops.is_bg === false ||
6015 (
6016 s.productColor &&
6017 s.productColor.fill == '#dedede'
6018 )
6019 ) {
6020 var bg = s.canvas.backgroundColor;
6021 s.canvas.backgroundColor = 'transparent';
6022
6023 if (s.productColor)
6024 s.productColor.visible = false;
6025 };
6026
6027 if (ops.is_bg === false) {
6028 if (s.product)
6029 s.product.visible = false;
6030 if (s.canvas.overlayImage)
6031 s.canvas.overlayImage.visible = false;
6032 };
6033
6034 var lm = s.limit_zone.visible;
6035 s.limit_zone.visible = false;
6036
6037 var data = s.canvas.toDataURL(ops);
6038
6039 if (
6040 ops.is_bg === false ||
6041 (
6042 s.productColor &&
6043 s.productColor.fill == '#dedede'
6044 )
6045 ) {
6046 s.canvas.backgroundColor = bg;
6047
6048 if (s.productColor)
6049 s.productColor.visible = true;
6050 };
6051
6052 if (ops.is_bg === false) {
6053 if (s.product)
6054 s.product.visible = true;
6055 if (s.canvas.overlayImage)
6056 s.canvas.overlayImage.visible = true;
6057
6058 };
6059
6060 s.limit_zone.visible = lm;
6061 s.canvas.renderAll();
6062
6063 return data;
6064
6065 },
6066
6067 qrcode : function(options) {
6068
6069 if( typeof options === 'string' ){
6070 options = { text: options };
6071 }
6072
6073 options = $.extend( {}, {
6074 render : "canvas",
6075 width : 500,
6076 height : 500,
6077 typeNumber : -1,
6078 correctLevel : QRErrorCorrectLevel.H,
6079 background : "rgba(255,255,255,0)",
6080 foreground : lumise.get.color('invert')
6081 }, options);
6082
6083
6084 var qrcode = new QRCode(options.typeNumber, options.correctLevel);
6085 qrcode.addData(options.text);
6086 qrcode.make();
6087
6088
6089 var canvas = document.createElement('canvas');
6090 canvas.width = options.width+50;
6091 canvas.height = options.height+50;
6092 var ctx = canvas.getContext('2d');
6093
6094
6095 var tileW = options.width / qrcode.getModuleCount();
6096 var tileH = options.height / qrcode.getModuleCount();
6097
6098
6099 for( var row = 0; row < qrcode.getModuleCount(); row++ ){
6100 for( var col = 0; col < qrcode.getModuleCount(); col++ ){
6101 ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
6102 var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
6103 var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
6104 ctx.fillRect(Math.round(col*tileW)+25,Math.round(row*tileH)+25, w, h);
6105 }
6106 }
6107
6108 return canvas;
6109
6110 },
6111
6112 clear : function(){
6113
6114 this.discard();
6115
6116 var canvas = lumise.stage().canvas,
6117 objs = canvas.getObjects();
6118
6119 while (objs.filter(function(obj){return obj.evented}).length > 0){
6120 objs.map(function(obj) {
6121 if (obj.evented === true)
6122 canvas.remove(obj);
6123 });
6124 }
6125
6126 },
6127
6128 clearAll : function(){
6129
6130 var canvas, objs;
6131
6132 Object.keys(lumise.data.stages).map(function(s){
6133
6134 canvas = lumise.data.stages[s].canvas;
6135
6136 if (canvas === undefined)
6137 return;
6138
6139 objs = canvas.getObjects();
6140
6141 while (objs.filter(function(obj){return obj.evented}).length > 0) {
6142 objs.map(function(obj) {
6143 if (obj.evented === true)
6144 canvas.remove(obj);
6145 });
6146 }
6147
6148 });
6149
6150 },
6151
6152 import : function (data, callback) {
6153
6154 if (!data || !data.objects) {
6155 lumise.ops.importing = false;
6156 return callback();
6157 };
6158
6159 if (typeof callback != 'function')
6160 callback = function() {};
6161
6162 data = lumise.apply_filters('import', data);
6163 data.objects = data.objects.filter(function(val){return val});
6164
6165 var stage = lumise.stage(),
6166 canvas = stage.canvas,
6167 do_import = function(i) {
6168
6169 if (i === -1) {
6170 /*Scann and load all fonts before importing*/
6171 var gfonts = [], custom = [], families = [], cfo, uco;
6172 /* Life hack, display font for the first time*/
6173 if ($('#lumise-fonts-preload').length === 0)
6174 $('body').append('<div id="fonts-preload" style="position: fixed;opacity: 0;"></div>');
6175
6176 data.objects.map(function(o) {
6177
6178 if (
6179 o !== null &&
6180 o.fontFamily !== undefined &&
6181 o.fontFamily !== '' &&
6182 o.fontFamily.toLowerCase() != 'arial'
6183 ) {
6184
6185 cfo = decodeURIComponent(o.fontFamily.replace(/\"/g, ''));
6186
6187 if (families.indexOf(cfo) === -1 && cfo.toLowerCase() != 'arial') {
6188
6189 families.push(cfo);
6190 $('#fonts-preload').append('<font style="font-family:\''+cfo+'\'">abcdefghijkl<b>mnopqrx</b><u>tywxz098</u><i>7654321</i></font>');
6191 if (
6192 o.font !== undefined &&
6193 o.font.indexOf('fonts.gstatic.com') === -1 &&
6194 (o.font.indexOf('.woff') > -1 || o.font.indexOf('data:') === 0)
6195 ) {
6196
6197 custom.push(cfo);
6198
6199 uco = o.font;
6200 if (o.font.indexOf('.woff') > -1 && o.font.indexOf('http') === -1)
6201 uco = lumise.data.upload_url+o.font;
6202
6203 $('head').append('<style type="text/css">@font-face {font-family:"'+cfo+'";src: url("'+uco+'") format("woff");}</style>');
6204
6205 }else{
6206
6207 if (
6208 o.font === undefined ||
6209 o.font.indexOf('fonts.gstatic.com') > -1
6210 )o.font = ["latin","regular"];
6211
6212 gfonts.push(cfo.replace(/ /g, '+')+':'+o.font[1]);
6213
6214 }
6215 }
6216 }
6217
6218 });
6219
6220 if (gfonts.length > 0 || custom.length > 0) {
6221
6222 var fload = {
6223 inactive: function() {
6224 this.active();
6225 },
6226 active: function () {
6227
6228 lumise.f(lumise.i('importing'));
6229
6230 var loo = 0,
6231 loop_check = function() {
6232 var pass = true;
6233 loo++;
6234 families.map(function(f){
6235 if (!document.fonts.check('12px "'+f+'"'))
6236 pass = false;
6237 });
6238 if (pass === false && loo < 20)
6239 setTimeout(loop_check, 350);
6240 else setTimeout(do_import, 100, 0);
6241 };
6242
6243 loop_check();
6244
6245 },
6246 text: 'abcdefghijklmnopqrxtywxz0987654321'
6247 };
6248
6249 if (gfonts.length > 0)
6250 fload.google = { families: gfonts };
6251
6252 if (custom.length > 0)
6253 fload.custom = { families: custom };
6254
6255 return WebFont.load(fload);
6256
6257 }else i = 0;
6258
6259 };
6260
6261 if (data.objects[i] !== undefined) {
6262
6263 lumise.f(lumise.i('importing'));
6264 lumise.ops.importing = true;
6265
6266 if (data.objects[i] !== null) {
6267
6268 delete data.objects[i].clipTo;
6269 delete data.objects[i].active;
6270
6271 data.objects[i] = $.extend({
6272 stroke: '',
6273 strokeWidth: 0,
6274 scaleX: 1,
6275 scaleY: 1,
6276 angle: 0,
6277 skewX: 0,
6278 skewY: 0,
6279 left: stage.limit_zone.left + (stage.limit_zone.width/2),
6280 top: stage.limit_zone.top + (stage.limit_zone.height/2)
6281 }, data.objects[i]);
6282
6283 if (lumise.objects.lumise[data.objects[i].type]) {
6284
6285 data.objects[i].top += yCenter;
6286 data.objects[i].left += xCenter;
6287 if (
6288 data.objects[i].src !== undefined &&
6289 data.objects[i].src.indexOf('http') !== 0 &&
6290 data.objects[i].src.indexOf('blob:') !== 0 &&
6291 data.objects[i].src.indexOf('data:image/') !== 0
6292 ) data.objects[i].src = lumise.data.upload_url+data.objects[i].src;
6293
6294 var do_add = function() {
6295
6296 lumise.objects.lumise[data.objects[i].type](
6297 data.objects[i],
6298 function (obj) {
6299
6300 if (obj === null) {
6301 err = true;
6302 return do_import(i+1);
6303 };
6304
6305 canvas.add(obj);
6306
6307 if (obj.type == 'curvedText')
6308 obj.set('radius', obj.radius);
6309
6310 if (obj.type =='image' && obj.fx !== undefined) {
6311
6312 obj.fxOrigin = obj._originalElement.cloneNode(true);
6313
6314 setTimeout (function() {
6315
6316 lumise.func.image_fx(obj.fxOrigin, obj.fx, function(cdata, colors){
6317
6318 obj._element.src = cdata;
6319 obj._originalElement.src = cdata;
6320
6321 obj.colors = colors;
6322
6323 obj._element.onload = function() {
6324 lumise.f(false);
6325 do_import(i+1);
6326 }
6327
6328 });
6329
6330 }, 1);
6331
6332 }else do_import(i+1);
6333
6334 }
6335 );
6336 };
6337
6338 do_add();
6339
6340 }else do_import(i+1);
6341
6342 }else do_import(i+1);
6343
6344 }else{
6345
6346 canvas.renderAll();
6347 lumise.design.layers.build();
6348
6349 lumise.ops.importing = false;
6350
6351 lumise.f(false);
6352
6353 if (typeof callback == 'function') {
6354 if (typeof data['template'] !== 'undefined'){
6355 lumise.cart.template = data.template.stages;
6356 lumise.cart.price.template = data.template.price;
6357 };
6358
6359 if (typeof data['extra'] !== 'undefined')
6360 lumise.cart.price.extra = data.extra;
6361
6362 callback(err);
6363 }
6364
6365 if (lumise.func.url_var('print_download', '') !== '') {
6366
6367 $('li[data-tool="print"]').trigger('click');
6368
6369 $('#lumise-print-full').prop({checked: true});
6370 $('#lumise-print-base').prop({checked: false});
6371 $('#print-format-'+lumise.func.url_var('print_download')).prop({checked: true}).change();
6372
6373 $('#lumise-print-nav button[data-func="download"]').trigger('click');
6374
6375 lumise.func.set_url('print_download', null);
6376
6377 }
6378
6379 }
6380 },
6381 err = false;
6382
6383 if (stage.limit_zone === undefined)
6384 return callback();
6385
6386 xCenter = data.limit_zone !== undefined ? data.limit_zone.left+(data.limit_zone.width/2) : 0,
6387 yCenter = data.limit_zone !== undefined ? data.limit_zone.top+(data.limit_zone.height/2) : 0;
6388
6389 //limit_zone
6390 xCenter = xCenter !== 0 ? (stage.limit_zone.left+(stage.limit_zone.width/2)) - xCenter : 0;
6391 yCenter = yCenter !== 0 ? (stage.limit_zone.top+(stage.limit_zone.height/2)) - yCenter : 0;
6392
6393 lumise.f(lumise.i(88));
6394
6395 setTimeout(do_import, 1, -1);
6396
6397 },
6398
6399 imports : function(data, callback) {
6400
6401 if (!data || !data.stages) {
6402 return lumise.func.notice(lumise.i(25), 'error');
6403 };
6404
6405 this.discard();
6406
6407 if (Object.keys(data.stages).length === 1 && Object.keys(data.stages)[0] == 'lumise') {
6408 /*
6409 * Install template file *.lumi
6410 */
6411 if (data.clear !== false && localStorage.getItem('LUMISE-TEMPLATE-APPEND') != 'true')
6412 this.clear();
6413
6414 var cur = lumise.current_stage;
6415
6416 if (lumise.data.stages[cur] && data.stages['lumise'].data) {
6417
6418 if (typeof data.stages['lumise'].data == 'string')
6419 lumise.data.stages[cur].data = JSON.parse(data.stages['lumise'].data);
6420 else lumise.data.stages[cur].data = data.stages['lumise'].data;
6421
6422 lumise.data.stages[cur].screenshot = data.stages['lumise'].screenshot;
6423 lumise.data.stages[cur].updated = data.stages['lumise'].updated;
6424 }
6425
6426 } else {
6427
6428 this.clearAll();
6429
6430 /*
6431 Object.keys(lumise.data.stages).map(function(s){
6432
6433 delete lumise.data.stages[s].data;
6434 delete lumise.data.stages[s].screenshot;
6435 delete lumise.data.stages[s].updated;
6436
6437 lumise.data.stages[s].stack = {
6438 data : [],
6439 state : true,
6440 index : 0
6441 };
6442
6443 });*/
6444
6445 var _stages = {};
6446
6447 Object.keys(data.stages).map(function(s){
6448
6449 if (data.stages[s].data !== '' && typeof data.stages[s].data == 'string')
6450 data.stages[s].data = JSON.parse(data.stages[s].data);
6451
6452 if (s == lumise.current_stage) {
6453 _stages[s] = lumise.data.stages[s];
6454 _stages[s].data = data.stages[s].data;
6455 _stages[s].screenshot = data.stages[s].screenshot;
6456 _stages[s].updated = data.stages[s].updated;
6457 } else {
6458 _stages[s] = data.stages[s];
6459 _stages[s].stack = {
6460 data : [],
6461 state : true,
6462 index : 0
6463 };
6464 if (lumise.data.stages[s] !== undefined) {
6465 _stages[s].src = lumise.data.stages[s].src;
6466 _stages[s].thumbnail = lumise.data.stages[s].thumbnail;
6467 _stages[s].source = lumise.data.stages[s].source;
6468 }
6469 }
6470
6471 if (
6472 lumise.data.stages[s] !== undefined &&
6473 _stages[s].product_width === undefined &&
6474 lumise.data.stages[s].product_width !== undefined
6475 )
6476 _stages[s].product_width = lumise.data.stages[s].product_width;
6477
6478 if (
6479 lumise.data.stages[s] !== undefined &&
6480 _stages[s].product_height === undefined &&
6481 lumise.data.stages[s].product_height !== undefined
6482 )
6483 _stages[s].product_height = lumise.data.stages[s].product_height;
6484
6485 });
6486
6487 if (data.system_version === undefined) {
6488 Object.keys(lumise.data.stages).map(function(s){
6489 if (_stages[s] === undefined) {
6490 _stages[s] = lumise.data.stages[s];
6491 }
6492 });
6493 }
6494
6495 lumise.data.stages = _stages;
6496
6497 lumise.render.stage_nav();
6498
6499 };
6500
6501 if (lumise.data.stages[lumise.current_stage] !== undefined) {
6502
6503 var stage = scale = (lumise.data.stages[lumise.current_stage].data.product_height ?
6504 lumise.data.stages[lumise.current_stage].product.height/
6505 lumise.data.stages[lumise.current_stage].data.product_height :
6506 1
6507 );
6508
6509 this.import(lumise.data.stages[lumise.current_stage].data, function(){
6510
6511 if (scale !== 1)
6512 lumise.func.scale_designs(scale);
6513
6514 lumise.stack.save();
6515 lumise.func.update_state();
6516
6517 if (typeof callback == 'function') {
6518 callback(lumise.data.stages[lumise.current_stage]);
6519 };
6520
6521 delete lumise.data.color;
6522 delete lumise.data.stages[lumise.current_stage].data;
6523
6524 });
6525 } else {
6526 lumise.active_stage(lumise.render.stage_nav(), callback);
6527 };
6528
6529 lumise.func.navigation('clear');
6530
6531 },
6532
6533 discard : function() {
6534
6535 if (!lumise.stage())
6536 return;
6537
6538 var canvas = lumise.stage().canvas;
6539
6540 canvas.discardActiveObject();
6541 canvas.discardActiveGroup();
6542 canvas.renderAll();
6543
6544 },
6545
6546 save : function(e, id, created){
6547
6548 if (lumise.ops.importing === true)
6549 return;
6550
6551 if (lumise.get.el('main').find('.lumise-stage').length === 0)
6552 return;
6553
6554 lumise.func.export(e == 'designs' ? 'designs' : true, id/*save to db*/, created);
6555
6556 lumise.actions.do('save');
6557
6558 if (e && typeof e.preventDefault == 'function')
6559 e.preventDefault();
6560
6561 },
6562
6563 load_font : function(family, font, callback) {
6564
6565 var is_returned = false;
6566
6567 if (!document.fonts)
6568 return;
6569
6570 var ff = (family.indexOf('"') === -1 ? '"'+family+'"': family);
6571
6572 if (navigator.userAgent.indexOf("Firefox") === -1 && document.fonts.check('1px '+ff)) {
6573
6574 document.fonts.load('1px '+ff, 'a').then(function(){
6575 document.fonts.load('italic bold 1px '+ff, 'a').then(function(){
6576 callback(family);
6577 });
6578 });
6579 return;
6580 };
6581
6582 if (typeof font == 'string') {
6583
6584 if (font.trim().indexOf('http') === -1 && font.trim().indexOf('data:') !== 0)
6585 font = lumise.data.upload_url+font;
6586 else if (font.trim().indexOf('data:text/plain;') > -1)
6587 font = font.trim().replace('data:text/plain;', 'data:font/truetype;charset=utf-8;');
6588
6589 if (font.trim().indexOf('url(') !== 0)
6590 font = 'url('+font+')';
6591
6592 $('head').append('<style type="text/css">@font-face {font-family:'+ff+';src: '+font+' format("woff2");}</style>');
6593 WebFont.load({
6594 custom: {families: [ff]},
6595 active: function () {
6596 callback(family);
6597 }
6598 });
6599 return;
6600 };
6601
6602 var txt = decodeURIComponent(family).replace(/ /g, '+').replace(/\"/g, '')+':'+font[1]+':'+font[0];
6603
6604 WebFont.load({
6605 google: { families: [txt] },
6606 active: function () {
6607 callback(family);
6608 }
6609 });
6610 },
6611
6612 lightbox : function(ops) {
6613
6614 if (ops == 'close')
6615 return $('#lumise-lightbox').remove();
6616
6617 var cfg = $.extend({
6618 width: 1000,
6619 footer: '',
6620 content: '',
6621 onload: function(){},
6622 onclose: function(){}
6623 }, ops),
6624
6625 tmpl = '<div id="lumise-lightbox" class="lumise-lightbox">\
6626 <div id="lumise-lightbox-body">\
6627 <div id="lumise-lightbox-content" style="min-width:'+cfg.width+'px">\
6628 '+cfg.content+'\
6629 </div>\
6630 '+cfg.footer+'\
6631 <a class="kalb-close" href="#close" title="Close">\
6632 <i class="lumisex-android-close"></i>\
6633 </a>\
6634 </div>\
6635 <div class="kalb-overlay"></div>\
6636 </div>';
6637
6638 if (cfg.footer !== '')
6639 cfg.footer = '<div id="lumise-lightbox-footer">'+cfg.footer+'</div>';
6640
6641 tmpl = tmpl.replace(/\%width\%/g, cfg.width).
6642 replace(/\%content\%/g, cfg.content).
6643 replace(/\%footer\%/g, cfg.footer);
6644
6645 tmpl = $(tmpl);
6646
6647 $('.lumise-lightbox').remove();
6648 $('body').append(tmpl);
6649
6650 cfg.onload(tmpl);
6651 tmpl.find('a.kalb-close,div.kalb-overlay').on('click', function(e){
6652 cfg.onclose(tmpl);
6653 $('.lumise-lightbox').remove();
6654 e.preventDefault();
6655 });
6656
6657 },
6658
6659 svg : {
6660
6661 rgb2hex : function(rgb){
6662 if (rgb === null || rgb === undefined || rgb === '' || rgb.indexOf('#') === 0)
6663 return rgb;
6664 rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
6665 return (rgb && rgb.length === 4) ? "#" +
6666 ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
6667 ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
6668 ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
6669 },
6670
6671 invertColor : function(hexTripletColor) {
6672 var color = hexTripletColor;
6673 color = color.substring(1); // remove #
6674 color = parseInt(color, 16); // convert to integer
6675 color = 0xFFFFFF ^ color; // invert three bytes
6676 color = color.toString(16); // convert to hex
6677 color = ("000000" + color).slice(-6); // pad with leading zeros
6678 color = "#" + color; // prepend #
6679 return color;
6680 },
6681
6682 getColors : function(svg) {
6683
6684 var fills = [], strokes = [], stops = [];
6685
6686 svg.find('[fill]').map(function () {
6687 if (this.getAttribute('fill').indexOf('rgb') > -1)
6688 this.setAttribute('fill', lumise.tools.svg.rgb2hex(this.getAttribute('fill')));
6689 this.setAttribute('data-fill-attr-color', this.getAttribute('fill'));
6690 fills.push(this.getAttribute('fill'));
6691 });
6692
6693 svg.find('[stroke]').each(function () {
6694 this.setAttribute('data-stroke-attr-color', this.getAttribute('stroke'));
6695 strokes.push(this.getAttribute('stroke'));
6696 });
6697
6698 svg.find('[stop-color]').map(function () {
6699 this.setAttribute('data-stop-attr-color', this.getAttribute('stop-color'));
6700 stops.push(this.getAttribute('stop-color'));
6701 });
6702
6703 svg.find('[style]').each(function () {
6704
6705 if (this.style.fill && this.style.fill !== '') {
6706 fills.push(this.style.fill);
6707 this.setAttribute('data-fill-style-color', this.style.fill);
6708 };
6709
6710 if (this.style.stroke && this.style.stroke !== '') {
6711 strokes.push(this.style.stroke);
6712 this.setAttribute('data-stroke-style-color', this.style.stroke);
6713 };
6714
6715 if (this.style.stopColor && this.style.stopColor !== '') {
6716 stops.push(this.style.stopColor);
6717 this.setAttribute('data-stop-style-color', this.style.stopColor);
6718 };
6719
6720 });
6721
6722 var colors = {};
6723
6724 for (var i=0; i<fills.length; i++) {
6725 if (fills[i].indexOf('url') === -1 && fills[i] != 'none') {
6726 if (colors[fills[i]] === undefined)
6727 colors[fills[i]] = 1;
6728 else colors[fills[i]]++;
6729 }
6730 }
6731
6732 for (var i=0; i<strokes.length; i++) {
6733 if (strokes[i].indexOf('url') === -1 && strokes[i] != 'none') {
6734 if (colors[strokes[i]] === undefined)
6735 colors[strokes[i]] = 1;
6736 else colors[strokes[i]]++;
6737 }
6738 }
6739
6740 for (var i=0; i<stops.length; i++) {
6741 if (stops[i].indexOf('url') === -1 && stops[i] != 'none') {
6742 if (colors[stops[i]] === undefined)
6743 colors[stops[i]] = 1;
6744 else colors[stops[i]]++;
6745 }
6746 }
6747
6748 return Object.keys(colors).sort(function(a, b) {
6749 return (colors[a] < colors[b]) ? 1 : ((colors[a] > colors[b]) ? -1 : 0);
6750 });
6751
6752 },
6753
6754 renderColors : function(el) {
6755
6756 var _this = this,
6757 colors = this.getColors($('#lumise-svg-edit>svg')),
6758 inps = $('#lumise-svg-tool div[data-view="current-colors"]');
6759
6760 inps.html('');
6761
6762 colors.map(function(color){
6763 inps.append('<span><input type="color" data-color="'+color+'" value="'+_this.rgb2hex(color)+'" style="background-color:'+color+';color: '+color+'" /></span>');
6764 });
6765
6766 inps.find('input[type="color"]').on('input', function(e) {
6767
6768 var color = this.getAttribute('data-color'),
6769 new_color = this.value,
6770 svg = $('#lumise-svg-edit svg');
6771
6772 svg.find('[fill][data-fill-attr-color="'+color+'"]').attr({fill: new_color});
6773 svg.find('[fill][data-stroke-attr-color="'+color+'"]').attr({stroke: new_color});
6774 svg.find('[fill][data-stop-attr-color="'+color+'"]').attr({'stop-color': new_color});
6775
6776 svg.find('[data-fill-style-color="'+color+'"]').css({fill: new_color});
6777 svg.find('[data-stroke-style-color="'+color+'"]').css({stroke: new_color});
6778 svg.find('[data-stop-style-color="'+color+'"]').css({stopColor: new_color});
6779
6780 });
6781
6782 if (el !== undefined)
6783 this.render_fills(el);
6784
6785 },
6786
6787 render_fills : function(e_l) {
6788
6789 var _this = this,
6790 fill = e_l.getAttribute('fill') ? e_l.getAttribute('fill') :
6791 e_l.style.fill.replace(/\ /g, '').replace(/\"/g, ''),
6792 stroke = e_l.getAttribute('stroke') ? e_l.getAttribute('stroke') :
6793 e_l.style.stroke.replace(/\ /g, '').replace(/\"/g, ''),
6794 stroke_width = e_l.getAttribute('stroke-width') ? e_l.getAttribute('stroke-width') :
6795 e_l.style.strokeWidth.replace(/\ /g, '').replace(/\"/g, ''),
6796 inps = $('#lumise-svg-fills-custom'),
6797 inpz = $('#lumise-svg-strokes-custom'),
6798 el = $(e_l);
6799
6800 inps.html('');
6801
6802 if (fill.indexOf('url') > -1) {
6803
6804 var linear = $(fill.replace('url(', '').replace(')', ''));
6805
6806 linear.find('stop').each(function(i) {
6807 inps.append('<span><input type="color" value="'+_this.rgb2hex(this.style.stopColor)+'" data-i="'+i+'" /><small data-i="'+i+'" title="Delete">x</small></span>');
6808 });
6809 inps.find('input').on('input', function(e) {
6810 linear.find('stop').eq(this.getAttribute('data-i')).css({stopColor: this.value});
6811 _this.renderColors();
6812 });
6813 inps.find('small[data-i]').on('click', function(e) {
6814 linear.find('stop').eq(this.getAttribute('data-i')).remove();
6815 $(this).parent().remove();
6816 _this.renderColors(e_l);
6817 });
6818 }else if (fill !== ''){
6819 inps.append('<span><input type="color" value="'+(fill.indexOf('rgb') > -1 ? _this.rgb2hex(fill) : fill)+'" /><small data-i="0" title="Delete">x</small></span>');
6820 inps.find('input').on('input', function(e) {
6821 el.css({'fill': this.value});
6822 el.removeAttr('fill');
6823 _this.renderColors();
6824 });
6825 inps.find('small[data-i]').on('click', function(e) {
6826 el.css({'fill': ''});
6827 el.removeAttr('fill');
6828 $(this).parent().remove();
6829 _this.renderColors(e_l);
6830 });
6831 }else{
6832 var a = $('<a href="#">Add fill color</a>');
6833 inps.html('').append(a);
6834 a.on('click', function(e){
6835 el.css({'fill': '#4ca722'});
6836 _this.renderColors(e_l);
6837 e.preventDefault();
6838 });
6839 };
6840
6841 if (stroke !== ''){
6842 inpz.html('<input type="color" value="'+(stroke.indexOf('rgb') > -1 ? _this.rgb2hex(stroke) : stroke)+'" /><input placeholder="Stroke width" type="range" min="0" max="50" value="'+parseFloat(stroke_width)+'" /><p><a href="#">Remove stroke</a></p>');
6843 inpz.find('input').on('input', function(e) {
6844
6845 if (this.type === 'color')
6846 el.css({'stroke': this.value});
6847 else el.css({'stroke-width': this.value});
6848 _this.renderColors();
6849 });
6850 inpz.find('a').on('click', function(e){
6851 el.css({'stroke': '', 'stroke-width': ''});
6852 _this.renderColors(e_l);
6853 e.preventDefault();
6854 });
6855 }else{
6856 var a = $('<a href="#">Add stroke</a>');
6857 inpz.html('').append(a);
6858 a.on('click', function(e){
6859 el.css({'stroke': '#4ca722', 'stroke-width': '1px'});
6860 _this.renderColors(e_l);
6861 e.preventDefault();
6862 });
6863 }
6864
6865 },
6866
6867 replace : function(svg, new_color, color) {
6868
6869 if (svg === undefined) {
6870 $('#lumise-color-picker-header i').click();
6871 return;
6872 };
6873
6874 svg.find('[fill][data-fill-attr-color="'+color+'"]').attr({fill: new_color});
6875 svg.find('[fill][data-stroke-attr-color="'+color+'"]').attr({stroke: new_color});
6876 svg.find('[fill][data-stop-attr-color="'+color+'"]').attr({'stop-color': new_color});
6877
6878 svg.find('[data-fill-style-color="'+color+'"]').css({fill: new_color});
6879 svg.find('[data-stroke-style-color="'+color+'"]').css({stroke: new_color});
6880 svg.find('[data-stop-style-color="'+color+'"]').css({stopColor: new_color});
6881
6882 },
6883
6884 edit : function() {
6885
6886 var _this = this,
6887 canvas = lumise.stage().canvas,
6888 active = canvas.getActiveObject(),
6889 svg = atob(active.src.split('base64,')[1]);
6890
6891 $('#LumiseDesign').append(
6892 '<div id="lumise-svg-workspace">\
6893 <div id="lumise-svg-edit">'+
6894 svg.substr(svg.indexOf('<svg'))+'\
6895 </div>\
6896 <div data-view="zoom">\
6897 <i class="lumisex-android-search"></i> zoom <input type="range" min="100" max="300" value="100" />\
6898 </div>\
6899 <div id="lumise-svg-tool">\
6900 <ul data-view="nav">\
6901 <li data-func="save" title="'+lumise.i('save')+'"><i class="lumisex-android-done"></i></li>\
6902 <li data-func="reset" title="'+lumise.i('reset')+'"><i class="lumisex-android-refresh"></i></li>\
6903 <li data-func="cancel" title="'+lumise.i('cancel')+'"><i class="lumisex-android-close"></i></li>\
6904 </ul>\
6905 <h3>All colors</h3>\
6906 <div data-view="current-colors"></div>\
6907 </div>\
6908 </div>'
6909 );
6910
6911 var svg = $('#lumise-svg-edit>svg');
6912
6913 if (svg.attr('width')) {
6914 svg.attr('data-width', svg.attr('width'));
6915 svg.removeAttr('width');
6916 };
6917
6918 if (svg.attr('height')) {
6919 svg.attr('data-height', svg.attr('height'));
6920 svg.removeAttr('height');
6921 };
6922
6923 var w = svg.width(),
6924 h = svg.height();
6925
6926 svg.on('click', function(e) {
6927
6928 var allw = ['a', 'audio', 'canvas', 'circle', 'ellipse', 'foreignObject', 'g', 'iframe', 'image', 'line', 'mesh', 'path', 'polygon', 'polyline', 'rect', 'svg', 'switch', 'symbol', 'text', 'textPath', 'tspan', 'unknown', 'use', 'video'];
6929
6930 if (allw.indexOf(e.target.tagName.toLowerCase()) > -1) {
6931
6932 if ($('#lumise-svg-tool div[data-view="customize"]').length === 0) {
6933 $('#lumise-svg-tool>ul[data-view="nav"]').
6934 after(
6935 '<h3>Selection</h3>\
6936 <div data-view="customize">\
6937 <label>Fill:</label>\
6938 <div class="lumst" id="lumise-svg-fills">\
6939 <div id="lumise-svg-fills-custom"></div>\
6940 </div>\
6941 </div>\
6942 <div data-view="customize">\
6943 <label>Stroke:</label>\
6944 <div class="lumst" id="lumise-svg-strokes">\
6945 <div id="lumise-svg-strokes-custom"></div>\
6946 </div>\
6947 </div>'
6948 );
6949 }
6950
6951 _this.render_fills(e.target);
6952
6953 }
6954 });
6955
6956 $('#lumise-svg-workspace input[type="range"]').on('input', function(){
6957 svg.css({
6958 'width': (w*(this.value/100))+'px',
6959 'max-width': (w*(this.value/100))+'px',
6960 'height': (h*(this.value/100))+'px',
6961 'max-height': (h*(this.value/100))+'px'
6962 });
6963 });
6964
6965 $('#lumise-svg-tool ul li').on('click', function(e) {
6966 switch (this.getAttribute('data-func')) {
6967 case 'save' :
6968
6969 svg.removeAttr('style');
6970 svg.attr({width: svg.data('width'), height: svg.data('height')});
6971 svg.removeAttr('data-width');
6972 svg.removeAttr('data-height');
6973
6974 var canvas = lumise.stage().canvas,
6975 active = canvas.getActiveObject(),
6976 colors = _this.getColors(svg),
6977 svg_html = svg.parent().html(),
6978 src = 'data:image/svg+xml;base64,'+btoa(svg_html);
6979
6980 $('#lumise-svg-workspace').remove();
6981
6982 if (active === undefined || active === null)
6983 return;
6984
6985 active.set('fill', '');
6986 active.set('src', src);
6987 active.set('origin_src', src);
6988 delete active.j_object;
6989 active.colors = colors;
6990 active._element.src = src;
6991 active._originalElement.src = src;
6992 active._element.onload = function(){
6993 canvas.renderAll();
6994 lumise.func.set_svg_colors(active);
6995 };
6996
6997 break;
6998 case 'reset' :
6999 $('#lumise-svg-workspace').remove();
7000 lumise.tools.svg.edit();
7001 break;
7002 case 'cancel' :
7003 $('#lumise-svg-workspace').remove();
7004 break;
7005 }
7006 });
7007
7008 this.renderColors();
7009
7010 }
7011
7012 }
7013
7014 },
7015
7016 stack : {
7017
7018 save : function() {
7019
7020 if (lumise.ops.importing === true)
7021 return;
7022
7023 var stack = lumise.stage().stack,
7024 canvas = lumise.stage().canvas,
7025 apply = false;
7026
7027 canvas.getObjects().map(function(obj){
7028 if (obj.evented === true && typeof obj.clipTo != 'function') {
7029 obj.set('clipTo', function(ctx){
7030 return lumise.objects.clipto(ctx, obj);
7031 });
7032 apply = true;
7033 }
7034 });
7035
7036 if (apply) {
7037 canvas.renderAll();
7038 lumise.design.layers.build();
7039 }
7040
7041 if (stack.data.length > 50)
7042 stack.data = stack.data.splice(stack.data.length-50);
7043
7044 var current = lumise.tools.export(lumise.stage());
7045
7046 current['template'] = {
7047 stages : lumise.cart.template,
7048 price : lumise.cart.price.template
7049 };
7050 current = JSON.stringify(current);
7051
7052 if (current != stack.data[stack.index]) {
7053
7054 stack.data.splice(stack.index+1);
7055
7056 stack.data.push(current);
7057 stack.index = stack.data.length - 1;
7058
7059 lumise.get.el('design-redo').addClass("disabled");
7060 if (stack.data.length > 1)
7061 lumise.get.el('design-undo').removeClass("disabled");
7062
7063 }else return;
7064
7065 lumise.actions.do('stack:save:complete');
7066
7067 if (stack.data.length > 1) {
7068 lumise.tools.save();
7069 }else{
7070 lumise.ops.before_unload = null;
7071 }
7072 },
7073
7074 back : function(e) {
7075
7076 var stack = lumise.stage().stack,
7077 canvas = lumise.stage().canvas;
7078
7079 if (stack.index > 0) {
7080 stack.state = false;
7081 var current = JSON.parse(stack.data[stack.index - 1]);
7082 lumise.tools.clear();
7083 lumise.tools.import(current, function (){
7084 lumise.func.update_state();
7085 });
7086
7087 stack.index--;
7088 lumise.get.el('design-redo').removeClass("disabled");
7089 }
7090
7091 if (stack.index === 0){
7092 lumise.get.el('design-undo').addClass("disabled");
7093 }
7094
7095 if (e)e.preventDefault();
7096
7097 },
7098
7099 forward : function(e) {
7100
7101 var stack = lumise.stage().stack,
7102 canvas = lumise.stage().canvas;
7103
7104 if (stack.data[stack.index + 1]) {
7105 stack.state = false;
7106 var current = JSON.parse(stack.data[stack.index + 1]);
7107 lumise.tools.clear();
7108 lumise.tools.import(current, function (){
7109 lumise.func.update_state();
7110 });
7111 stack.index++;
7112 lumise.get.el('design-undo').removeClass("disabled");
7113 }
7114
7115 if (!stack.data[stack.index + 1]) {
7116 lumise.get.el('design-redo').addClass("disabled");
7117 }
7118
7119 if (e)e.preventDefault();
7120
7121 }
7122
7123 },
7124
7125 get : {
7126
7127 els : {},
7128
7129 color : function(s){
7130
7131 var color = $('.lumise-cart-field[data-type="product_color"]').find('li[data-color].choosed').attr('data-color');
7132
7133 if (!color)
7134 color = '#dedede';
7135 else color = decodeURIComponent(color);
7136
7137 return (s != 'invert' ? color : lumise.func.invert(color));
7138
7139 },
7140
7141 color_name : function(s){
7142
7143 var elm = lumise.get.el('product-color').find('li[data-color].choosed');
7144 return ( !elm.get(0) )? '': elm.attr('title');
7145
7146 },
7147
7148 scroll : function() {
7149 return {
7150 top: (lumise.body.scrollTop?lumise.body.scrollTop:lumise.html.scrollTop),
7151 left: (lumise.body.scrollLeft?lumise.body.scrollLeft:lumise.html.scrollLeft)
7152 }
7153 },
7154
7155 active : function() {
7156 return lumise.stage().canvas.getActiveObject() || lumise.stage().canvas.getActiveGroup();
7157 },
7158
7159 stage : function() {
7160 return {
7161 stage: lumise.stage(),
7162 canvas: lumise.stage().canvas,
7163 active: lumise.stage().canvas.getActiveObject(),
7164 limit: lumise.stage().limit_zone
7165 }
7166 },
7167
7168 size : function() {
7169
7170 var stage = lumise.stage(),
7171 size = lumise.get.el('print-nav').find('input[name="size"]').val().split('x'),
7172 unit = $('#lumise-print-nav input[name="print-unit"]:checked').data('unit'),
7173 o = lumise.get.el('print-nav').find('select[name="orientation"]').val(),
7174 w = parseFloat(size[0].trim()),
7175 h = parseFloat(size[1] ? size[1].trim() : 0);
7176
7177 if (stage.size === undefined || stage.size === '') {
7178
7179 if (unit == 'inch') {
7180 w *= 2.54*118.095238;
7181 h *= 2.54*118.095238;
7182 } else if (unit == 'cm') {
7183 w *= 118.095238;
7184 h *= 118.095238;
7185 };
7186
7187 if (size[0] === '' || size[1] === undefined || size[1] === '') {
7188 lumise.get.el('print-nav').find('input[name="size"]').focus();
7189 return alert(lumise.i(35));
7190 };
7191
7192 } else if (typeof stage.size == 'string') {
7193
7194 Object.keys(lumise.data.size_default).map(function(s) {
7195 if (lumise.data.size_default[s].cm == stage.size) {
7196 size = lumise.data.size_default[s].px.split('x');
7197 }
7198 });
7199
7200 w = parseFloat(size[0].trim()),
7201 h = parseFloat(size[1] ? size[1].trim() : 0);
7202
7203 } else if (typeof stage.size == 'object') {
7204
7205 w = parseFloat(stage.size.width);
7206 h = parseFloat(stage.size.height);
7207
7208 if (stage.size.unit == 'inch') {
7209 w *= 2.54*118.095238;
7210 h *= 2.54*118.095238;
7211 } else if (stage.size.unit == 'cm') {
7212 w *= 118.095238;
7213 h *= 118.095238;
7214 };
7215 };
7216
7217 return {
7218 o: o,
7219 w: w,
7220 h: h
7221 };
7222
7223 },
7224
7225 el : function(s) {
7226
7227 if (!lumise.get.els[s]) {
7228 if ($('#lumise-'+s).length > 0)
7229 lumise.get.els[s] = $('#lumise-'+s);
7230 else return $('#lumise-'+s);
7231 }
7232
7233 return lumise.get.els[s];
7234
7235 },
7236
7237 },
7238
7239 func : {
7240
7241 version_compare : function(a, b) {
7242
7243 if (a === undefined || b === undefined)
7244 return 0;
7245
7246 var pa = a.split('.');
7247 var pb = b.split('.');
7248
7249 for ( var i = 0; i < 3; i++ ) {
7250
7251 var na = Number(pa[i]);
7252 var nb = Number(pb[i]);
7253
7254 if (na > nb)
7255 return 1;
7256
7257 if (nb > na)
7258 return -1;
7259
7260 if (!isNaN(na) && isNaN(nb))
7261 return 1;
7262
7263 if (isNaN(na) && !isNaN(nb))
7264 return -1;
7265 }
7266
7267 return 0;
7268
7269 },
7270
7271 invert : function(color) {
7272
7273 var r,g,b;
7274
7275 if (color.indexOf('rgb') > -1) {
7276
7277 color = color.split(',');
7278 r = parseInt(color[0].trim());
7279 g = parseInt(color[1].trim());
7280 b = parseInt(color[2].trim());
7281
7282 } else {
7283 if (color.length < 6)
7284 color += color.replace('#', '');
7285 var cut = (color.charAt(0)=="#" ? color.substring(1,7) : color.substring(0,6));
7286 r = (parseInt(cut.substring(0,2),16)/255)*0.213;
7287 g = (parseInt(cut.substring(2,4),16)/255)*0.715;
7288 b = (parseInt(cut.substring(4,6),16)/255)*0.072;
7289 }
7290
7291 return (r+g+b < 0.5) ? '#DDD' : '#333';
7292 },
7293
7294 reversePortView : function(eff){
7295
7296
7297 var m = lumise.get.el('stage-'+lumise.current_stage).get(0);
7298
7299 if (m === undefined)
7300 return;
7301
7302 var stage = lumise.stage(),
7303 canvas = stage.canvas,
7304 view = canvas.viewportTransform,
7305 ratio = lumise.get.el('zoom').val()/100,
7306 wr = ((m.offsetWidth*ratio)/100),
7307 hr = ((m.offsetHeight*ratio)/100),
7308 p = {
7309 w: (stage.product.width*ratio),
7310 h: (stage.product.height*ratio),
7311 l: (stage.product.left-(stage.product.width/2))*ratio,
7312 t: (stage.product.top-(stage.product.height/2))*ratio,
7313 },
7314 w = {
7315 w: m.offsetWidth,
7316 h: m.offsetHeight
7317 },
7318 _rw = p.w/w.w > 1 ? p.w/w.w : 1,
7319 _rh = p.h/w.h > 1 ? p.h/w.h : 1;
7320
7321 var anicfg = {
7322 x: view[4] > 0 ? 0 : ((view[4] > -p.l && p.w > w.w) ? 0 : (
7323 view[4] < -(canvas.width*view[0] - canvas.width) ?
7324 -(canvas.width*view[0] - canvas.width) :
7325 view[4])
7326 ),
7327 y: view[5] > 0 ? 0 : ((view[5] > -p.t && p.h > w.h) ? 0 : (
7328 view[5] < -(canvas.height*view[0] - canvas.height) ?
7329 -(canvas.height*view[0] - canvas.height) :
7330 view[5])
7331 )
7332 };
7333
7334 /*anicfg.x = -((canvas.width*view[0])-canvas.width)/2;*/
7335 /*
7336 if (view[0] > 1) {
7337 anicfg.x = (
7338 ((canvas.width/2)/view[0])+(stage.limit_zone.left/view[0]) -
7339 ((canvas.width/2)+stage.limit_zone.left)
7340 );
7341 } else {
7342 anicfg.x = 0;
7343 anicfg.y = 0;
7344 };*/
7345
7346 if (anicfg.x == view[4] && anicfg.y == view[5])
7347 return true;
7348
7349 if (eff === false) {
7350 //view[4] = anicfg.x;
7351 view[5] = anicfg.y;
7352 canvas.set('viewportTransform', view);
7353 canvas.renderAll();
7354 }
7355
7356 return false;
7357
7358 },
7359
7360 onZoomThumnMove : function(e) {
7361
7362 var ratio = lumise.get.el('zoom').val()/100,
7363 m = lumise.get.el('main').get(0),
7364 delta = new fabric.Point(-e.movementX*((m.offsetWidth*ratio)/100), -e.movementY*((m.offsetHeight*ratio)/100));
7365
7366 lumise.stage().canvas.relativePan(delta);
7367 lumise.func.reversePortView(false);
7368
7369 },
7370
7371 notice : function(content, type, delay) {
7372
7373 var i = 'bulb';
7374 switch (type) {
7375 case 'success': i = 'done'; break;
7376 case 'error': i = 'close'; break;
7377 };
7378
7379 var el = lumise.get.el('notices');
7380 clearTimeout(lumise.ops.notice_timer);
7381
7382 if (el.data('working')) {
7383 el.stop()
7384 .append('<span data-type="'+type+'"><i class="lumisex-android-'+i+'"></i> '+content+'</span>')
7385 .animate({opacity: 1, top: 55}, 250);
7386 }else{
7387 el.data({'working': true}).stop()
7388 .html('<span data-type="'+type+'"><i class="lumisex-android-'+i+'"></i> '+content+'</span>')
7389 .css({opacity: 0, top: 0, display: 'block'})
7390 .animate({opacity: 1, top: 55}, 250);
7391 }
7392
7393 lumise.ops.notice_timer = setTimeout(function(){
7394 el.animate({top: 0, opacity: 0}, 250, function(){
7395 this.style.display = 'none';
7396 el.data({'working': false});
7397 });
7398 },(delay ? delay : 1500), el);
7399
7400 },
7401
7402 bridgeText : function(image, ops) {
7403
7404 if (!ops)
7405 ops = {
7406 curve: -2.5,
7407 offsetY: 0.4,
7408 bottom: 2.5,
7409 trident: false,
7410 oblique: false
7411 };
7412
7413 var s = lumise.get.stage(),
7414 w = image.width,
7415 h = image.height*2.5,
7416
7417 curve = ops.curve !== undefined ? (ops.curve/2)*image.height : -0.3*image.height,
7418 top = ops.offsetY !== undefined ? ops.offsetY*image.height : 0.5*image.height,
7419 bottom = ops.bottom !== undefined ? ops.bottom*image.height : 0.2*image.height,
7420 trident = ops.trident !== undefined ? ops.trident: false,
7421 d, i = w, y = 0, angle = (ops.oblique === true ? 45 : 180) / w;
7422
7423 if (ops.oblique === true)
7424 trident = false;
7425
7426 if (lumise.ops.brid === undefined) {
7427 lumise.ops.brid = document.createElement('canvas');
7428 lumise.ops.bctx = lumise.ops.brid.getContext('2d');
7429 }
7430
7431 lumise.ops.brid.width = w;
7432 lumise.ops.brid.height = h;
7433
7434 lumise.ops.bctx.clearRect(0, 0, w, h);
7435
7436 if (trident) {
7437 y = bottom;
7438 d = (curve) / (h*0.25);
7439 if ((d*w*0.5) > bottom) {
7440 d = bottom/(w*0.5);
7441 }
7442 }else if (ops.oblique){
7443 if (curve > bottom+(h*0.25))
7444 curve = bottom+(h*0.25);
7445 }else{
7446 if (curve > bottom)
7447 curve = bottom;
7448 }
7449
7450 while (i-- > 0) {
7451
7452 if (trident) {
7453
7454 if (i >(w * 0.5))
7455 y -= d;
7456 else y += d;
7457
7458 } else {
7459 y = bottom - curve * Math.sin(i * angle * Math.PI / 180);
7460 }
7461
7462 lumise.ops.bctx.drawImage(
7463 image,
7464 i, 0, 1, h,
7465 i, h * 0.5 - top / h * y, 1, y
7466 );
7467 }
7468
7469 return lumise.ops.brid.toDataURL();
7470
7471 },
7472
7473 update_text_fx : function() {
7474
7475 var s = lumise.get.stage();
7476
7477 if (!s.active)
7478 return;
7479
7480 lumise.f('Processing..');
7481
7482 var props = s.active.toObject(lumise.ops.export_list);
7483 delete props['type'];
7484 var newobj = lumise.objects.text(props);
7485 props.width = newobj.width;
7486 props.height = newobj.height;
7487
7488 lumise.objects.lumise['text-fx'](props, lumise.func.switch_type);
7489
7490 },
7491
7492 image_fx : function(img, fx, callback){
7493
7494 if (
7495 fx &&
7496 fx.mask &&
7497 fx.mask.dataURL &&
7498 (fx.mask.image === undefined || fx.mask.image.src === undefined)
7499 ) {
7500
7501 fx.mask.image = new Image();
7502 fx.mask.image.onload = function(){
7503 lumise.func.image_fx(img, fx, callback);
7504 };
7505
7506 if (
7507 fx.mask.dataURL.indexOf('http') !== 0 &&
7508 fx.mask.dataURL.indexOf('data:image/') !== 0
7509 )fx.mask.dataURL = lumise.data.upload_url+fx.mask.dataURL;
7510
7511 return fx.mask.image.src = fx.mask.dataURL;
7512 }
7513
7514 var cfg = $.extend({
7515 fx: '',
7516 brightness: 0,
7517 saturation: 100,
7518 contrast: 0,
7519 deep: 0,
7520 mode: 'light',
7521 mask: null
7522 }, fx);
7523
7524 if (cfg.brightness !== 0)
7525 cfg.brightness /= 2;
7526
7527 if (!lumise.ops.imageFXcanvas) {
7528 lumise.ops.imageFXcanvas = document.createElement('canvas');
7529 lumise.ops.fxctx = lumise.ops.imageFXcanvas.getContext("2d");
7530 };
7531
7532 var cv = lumise.ops.imageFXcanvas,
7533 ctx = lumise.ops.fxctx,
7534 w = img.width,
7535 h = img.height;
7536
7537 cv.width = w;
7538 cv.height = h;
7539
7540 ctx.clearRect(0, 0, w, h);
7541
7542 if (cfg.mask !== null && cfg.mask.image) {
7543 ctx.drawImage(cfg.mask.image, cfg.mask.left*w, cfg.mask.top*h, cfg.mask.width*w, cfg.mask.height*h);
7544 ctx.globalCompositeOperation = 'source-in';
7545 };
7546
7547 ctx.drawImage(img, 0, 0, w, h);
7548
7549 if (fx && fx.crop) {
7550 ctx.clearRect(0, 0, w, h*fx.crop.top);
7551 ctx.clearRect(0, 0, w*fx.crop.left, h);
7552 ctx.clearRect((w*fx.crop.left)+(w*fx.crop.width), 0, w, h);
7553 ctx.clearRect(0, (h*fx.crop.top)+(h*fx.crop.height), w, h);
7554 };
7555
7556 var imageData = ctx.getImageData(0, 0, w, h);
7557 var data = imageData.data;
7558
7559 if (cfg.fx !== '' && lumise_fx_map[cfg.fx])
7560 cfg.fx = lumise_fx_map[cfg.fx]();
7561
7562 var R, G, B, CT, brightness;
7563
7564 var rfx, gfx, bfx;
7565
7566 var vgrid = 0;
7567
7568 for (var i = 0; i < data.length; i += 4) {
7569
7570 if (typeof cfg.fx == 'object') {
7571
7572 data[i] = cfg.fx.r[ data[i] ];
7573 data[i+1] = cfg.fx.g[ data[i+1] ];
7574 data[i+2] = cfg.fx.b[ data[i+2] ];
7575
7576 };
7577
7578 brightness = (0.4 * (data[i] + cfg.brightness)) + (0.4 * (data[i+1] + cfg.brightness)) + (0.2 * (data[i+2] + cfg.brightness));
7579
7580 brightness *= ( 1 - cfg.saturation/100 );
7581
7582 R = brightness + data[i]*( cfg.saturation/100 ) + cfg.brightness;
7583 G = brightness + data[i+1]*( cfg.saturation/100 ) + cfg.brightness;
7584 B = brightness + data[i+2]*( cfg.saturation/100 ) + cfg.brightness;
7585
7586 if( cfg.contrast != 0 ) {
7587
7588 CT = 1 + (cfg.contrast*0.01);
7589 R /= 255;
7590 G /= 255;
7591 B /= 255;
7592
7593 R = (((R - 0.5) * CT) + 0.5) * 255;
7594 G = (((G - 0.5) * CT) + 0.5) * 255;
7595 B = (((B - 0.5) * CT) + 0.5) * 255;
7596
7597 R = R > 255 ? 255 : R;
7598 R = R < 0 ? 0 : R;
7599
7600 G = G > 255 ? 255 : G;
7601 G = G < 0 ? 0 : G;
7602
7603 B = B > 255 ? 255 : B;
7604 B = B < 0 ? 0 : B;
7605
7606 };
7607
7608 data[i] = R;
7609 data[i+1] = G;
7610 data[i+2] = B;
7611
7612 if (cfg.deep > 0) {
7613
7614 if (cfg.mode != 'dark') {
7615 if (255-R < cfg.deep && 255-G < cfg.deep && 255-B < cfg.deep) {
7616 data[i+3] = ((((255-R)/cfg.deep) + ((255-G)/cfg.deep) + ((255-B)/cfg.deep))/3);
7617 data[i+3] = (data[i+3]>0 ? data[i+3]*100 : 0);
7618 }
7619 }else{
7620 if (R < cfg.deep && G < cfg.deep && B < cfg.deep) {
7621 data[i+3] = (((R/cfg.deep) + (G/cfg.deep) + (B/cfg.deep))/3);
7622 data[i+3] = (data[i+3]>0 ? data[i+3]*100 : 0);
7623 }
7624 }
7625 }
7626
7627 };
7628
7629 ctx.putImageData( imageData, 0 , 0 );
7630 return callback(cv.toDataURL(), lumise.func.count_colors(cv, true));
7631
7632 },
7633
7634 update_image_fx : function(fx, val, callback) {
7635
7636 var s = lumise.get.stage();
7637
7638 if (!s.active)
7639 return;
7640
7641 lumise.f('Processing..');
7642
7643 clearTimeout(lumise.ops.update_image_fx_timer);
7644
7645 lumise.ops.update_image_fx_timer = setTimeout(function(){
7646
7647 if (!s.active.fxOrigin || !s.active.fxOrigin.tagName)
7648 s.active.fxOrigin = s.active._originalElement.cloneNode(true);
7649
7650 if (s.active.fx === undefined || s.active.fx === null)
7651 s.active.fx = {};
7652
7653 if (fx !== undefined)
7654 s.active.fx[fx] = val;
7655
7656 lumise.func.image_fx(s.active.fxOrigin, s.active.fx, function(cdata, colors){
7657
7658 s.active._element.src = cdata;
7659 s.active._originalElement.src = cdata;
7660 s.active.colors = colors;
7661
7662 s.active._element.onload = function() {
7663 s.canvas.renderAll();
7664 lumise.f(false);
7665 if (typeof callback == 'function')
7666 callback();
7667 }
7668
7669 });
7670
7671 }, 1);
7672
7673 },
7674
7675 fill_svg : function(data, color) {
7676
7677 if (data.toString().indexOf('data:image/svg+xml;base64,') === -1)
7678 return data;
7679
7680 var svg = atob(data.split(',')[1]),
7681 span = $('<span>'+svg.substr(svg.indexOf('<svg'))+'</span>');
7682
7683 if (color && color !== '')
7684 span.find('svg,path').attr({'fill': color});
7685
7686 svg = 'data:image/svg+xml;base64,'+btoa(span.html());
7687 delete span;
7688
7689 return svg;
7690
7691 },
7692
7693 product_color : function(color) {
7694
7695 if (color === undefined || color === '')
7696 color = '#dedede';
7697
7698 var stage = lumise.stage();
7699
7700 if (stage.limit_zone) {
7701
7702 var invert = lumise.func.invert(color);
7703 stage.limit_zone.set('stroke', invert);
7704
7705 stage.productColor.set('fill', color);
7706 stage.canvas.renderAll();
7707
7708 Object.keys(lumise.data.stages).map(function(s){
7709 if (s != lumise.current_stage && lumise.data.stages[s].canvas !== undefined) {
7710 lumise.data.stages[s].productColor.set('fill', color);
7711 lumise.data.stages[s].canvas.renderAll();
7712 }
7713 });
7714
7715 lumise.tools.save();
7716
7717 }
7718
7719 lumise.actions.do('product-color', color);
7720
7721 },
7722
7723 set_svg_colors : function(obj) {
7724
7725 if (obj.j_object === undefined) {
7726 var svg_source = obj.src.split('base64,')[1];
7727 svg_source = atob(svg_source);
7728 svg_source = svg_source.substr(svg_source.indexOf('<svg'));
7729 obj.j_object = $('<div>'+svg_source+'</div>');
7730 };
7731
7732 var max = (lumise.get.el('svg-colors').parent().width()-180)/33,
7733 colors = lumise.tools.svg.getColors(obj.j_object),
7734 total = colors.length;
7735
7736 if (max < 6)
7737 max = 6;
7738 else if (max > 15)
7739 max = 15;
7740
7741 if (total === 0) {
7742 obj.j_object.find('svg>*').css({fill: '#000000'});
7743 colors = lumise.tools.svg.getColors(obj.j_object);
7744 };
7745
7746 obj.colors = colors.slice();
7747 colors.splice(max);
7748
7749 lumise.get.el('svg-colors').find('>span').remove();
7750
7751 colors.map(function(c){
7752 lumise.get.el('svg-colors').append(
7753 '<span data-view="noicon" data-color="'+c+'"><input type="text" data-color="'+c+'" readonly value="" style="background:'+c+'" /></span>'
7754 );
7755 });
7756
7757 if (total > colors.length) {
7758 lumise.get.el('svg-colors').append('<span data-view="more">+'+(total-colors.length)+'</span>');
7759 };
7760
7761 lumise.get.el('svg-colors').append('<span data-view="btn" data-tip="true"><i class="lumisex-wand" data-func="editor"></i><span>'+lumise.i(138)+'</span></span>');
7762
7763 },
7764
7765 switch_type : function(newobj) {
7766
7767 var s = lumise.get.stage();
7768
7769 if (newobj !== null) {
7770 lumise.ops.importing = true;
7771 var index = s.canvas.getObjects().indexOf(s.active);
7772 s.canvas.remove(s.active);
7773 s.canvas.add(newobj);
7774 newobj.moveTo(index);
7775 s.canvas.setActiveObject(newobj).renderAll();
7776 lumise.get.el('top-tools').attr({'data-view': newobj.type});
7777 lumise.design.layers.build();
7778 lumise.ops.importing = false;
7779 }else alert(lumise.i(19));
7780
7781 lumise.f(false);
7782
7783 },
7784
7785 download_design : function (ops) {
7786
7787 var type = ops.type,
7788 include_base = ops.include_base,
7789 stage = lumise.stage(),
7790 canvas = stage.canvas,
7791 wcf = "menubar=0,status=0,titlebar=0,toolbar=0,location=0,directories=0",
7792 ex = {
7793 format: 'png',
7794 multiplier: 2/**(2/window.devicePixelRatio)*/,
7795 width: stage.product.width,
7796 height: stage.product.height,
7797 top: stage.product.top-(stage.product.height/2),
7798 left: stage.product.left-(stage.product.width/2)
7799 },
7800 name = lumise.data.prefix_file+'_'+lumise.func.slugify(
7801 $('#lumise-product header name t').text()
7802 )+'_'+lumise.current_stage;
7803
7804 if (lumise.func.url_var('order_print', '') !== '') {
7805 name = 'order-'+lumise.func.url_var('order_print')+'__product-'+lumise.func.url_var('product_cms')+'__base-'+lumise.func.url_var('product')+'__stage-'+(Object.keys(lumise.data.stages).indexOf(lumise.current_stage)+1);
7806 }
7807
7808 lumise.get.el('zoom').val(100).trigger('input');
7809
7810 switch (type) {
7811
7812 case 'svg':
7813
7814 var svg_obj = lumise.func.export_svg(include_base);
7815
7816 if (svg_obj !== null) {
7817 lumise.func.download(
7818 'data:image/svg+xml;base64,'+
7819 btoa(svg_obj),
7820 name+'.svg'
7821 );
7822
7823 delete svg_obj;
7824 } else lumise.func.notice('Error on render SVG', 'error');
7825
7826 break;
7827 case 'png':
7828
7829 var h = ops.height,
7830 w = ops.width,
7831 o = ops.orien,
7832 bg = canvas.backgroundColor,
7833 multiplier = h/stage.limit_zone.height,
7834 mp = o != 'landscape' ? multiplier : multiplier*(canvas.width/canvas.height),
7835 dops = {
7836 stage: stage,
7837 top: stage.limit_zone.top,
7838 left: stage.limit_zone.left,
7839 width: stage.limit_zone.width,
7840 height: stage.limit_zone.height,
7841 multiplier: mp,//Math.ceil(mp),
7842 is_bg: include_base === true ? 'full' : false
7843 },
7844 data = lumise.tools.toImage(dops),
7845 _canvas = document.createElement('canvas'),
7846 ctx = _canvas.getContext("2d"),
7847 img = new Image();
7848
7849 if (multiplier > 33)
7850 multiplier = 33;
7851
7852 if (typeof ops.callback != 'function') {
7853 ops.callback = function(data) {
7854 lumise.func.download(data, name+'.png');
7855 }
7856 };
7857
7858 if (o != 'landscape') {
7859
7860 _canvas.width = w;
7861 _canvas.height = h;
7862
7863 img.onload = function() {
7864
7865 var _w = this.width,
7866 _h = this.height;
7867
7868 if (_w != w) {
7869 _h = (_h/_w)*w;
7870 _w = w;
7871 }
7872
7873 if (_h > h) {
7874 _w = (_w/_h)*h;
7875 _h = h;
7876 }
7877
7878 ctx.drawImage(this, (w-_w)/2, (h-_h)/2, _w, _h);
7879
7880 lumise.f('false');
7881
7882 ops.callback(_canvas.toDataURL());
7883
7884 };
7885
7886 img.src = data;
7887
7888 } else {
7889
7890 multiplier = (w/stage.limit_zone.width) < 33 ? h/stage.limit_zone.width : 33;
7891
7892 var data = lumise.tools.toImage({
7893 stage: stage,
7894 width: stage.limit_zone.width,
7895 left: stage.limit_zone.left,
7896 multiplier: mp,
7897 is_bg: include_base === true ? 'full' : false
7898 });
7899
7900 _canvas.width = w;
7901 _canvas.height = h;
7902
7903 img.onload = function() {
7904
7905 ctx.translate(_canvas.width / 2, _canvas.height / 2);
7906 ctx.rotate(Math.PI / 2);
7907
7908 var ih = w,
7909 iw = w*(this.width/this.height);
7910
7911 if (iw > w) {
7912 ih = ih * (w/iw);
7913 iw = w;
7914 }
7915
7916 if (ih > h) {
7917 iw = iw * (h/ih);
7918 ih = h;
7919 }
7920
7921 ctx.drawImage(this, -iw / 2, -ih / 2, iw, ih);
7922
7923 ctx.rotate(-Math.PI / 2);
7924 ctx.translate(-_canvas.width / 2, -_canvas.height / 2);
7925
7926 lumise.f('false');
7927 ops.callback(_canvas.toDataURL());
7928
7929 };
7930
7931 img.src = data;
7932
7933 };
7934
7935 break;
7936 case 'jpg':
7937
7938 ex.format = 'jpeg';
7939 lumise.func.download(
7940 canvas.toDataURL(ex),
7941 name+'.jpg'
7942 );
7943
7944 break;
7945 case 'pdf':
7946
7947 lumise.tools.discard();
7948
7949 var stages = Object.keys(lumise.data.stages),
7950 data = [],
7951 ratio = [],
7952 fonts = [],
7953 do_export = function() {
7954
7955 var exp = lumise.func.export_svg(include_base, true),
7956 stage = lumise.stage();
7957
7958 data.push(exp[0]);
7959 if (!lumise.get.el('print-base').prop('checked'))
7960 ratio.push((stage.edit_zone.width/stage.edit_zone.height).toFixed(5));
7961 else ratio.push((stage.product.width/stage.product.height).toFixed(5));
7962
7963 exp[1].map(function(f) {
7964 if (fonts.indexOf(f) === -1)
7965 fonts.push(f);
7966 });
7967
7968 },
7969 do_activ = function(i) {
7970
7971 lumise.active_stage(stages[i], function() {
7972
7973 do_export();
7974
7975 if (stages[i+1] !== undefined)
7976 do_activ(i+1);
7977 else
7978 do_upload(data, fonts);
7979 });
7980
7981 },
7982 do_upload = function(data, fonts) {
7983
7984 var pdf_render = window.open(
7985 lumise.data.ajax+'&action=pdf&nonce=LUMISE-SECURITY:'+
7986 lumise.data.nonce+(fonts.length > 0 ? '&fonts='+encodeURIComponent(fonts.join('|')) : '')+
7987 (lumise.get.el('print-cropmarks').prop('checked') ? '&cropmarks=1' : '')+
7988 '&ratio='+ratio.join(',')
7989 );
7990
7991 lumise.f(false);
7992
7993 if (pdf_render === null) {
7994 alert('Please allow popup on this site');
7995 return;
7996 };
7997
7998 pdf_render.addEventListener('load', function() {
7999 this.window.renderPDF(data, URL);
8000 });
8001 return;
8002
8003
8004
8005 lumise.f('Start uploading..');
8006
8007 var boundary = "---------------------------7da24f2e50046";
8008 var body = '--' + boundary + '\r\n'
8009 + 'Content-Disposition: form-data; name="file";'
8010 + 'filename="temp.txt"\r\n'
8011 + 'Content-type: plain/text\r\n\r\n'
8012 + data.join('<!-----Lumise break page------>') + '\r\n'+ '--'+ boundary + '--';
8013
8014 $.ajax({
8015 contentType: "multipart/form-data; boundary="+boundary,
8016 data : body,
8017 type : "POST",
8018 url : lumise.data.ajax+
8019 '&action=render_pdf'+
8020 '&ajax=frontend'+
8021 '&name='+encodeURIComponent($('#lumise-product header name t').text())+
8022 '&nonce=LUMISE-SECURITY:'+lumise.data.nonce,
8023 xhr : function() {
8024 var xhr = new window.XMLHttpRequest();
8025 xhr.upload.addEventListener("progress", function(evt){
8026 if (evt.lengthComputable) {
8027 var percentComplete = evt.loaded / evt.total;
8028 if (percentComplete < 1)
8029 $('div#LumiseDesign').attr({'data-msg': parseInt(percentComplete*100)+'% upload complete'});
8030 else $('div#LumiseDesign').attr({'data-msg': lumise.i(159)});
8031 }
8032 }, false);
8033 return xhr;
8034 },
8035 success : function (res, status) {
8036 lumise.f(false);
8037 if (res.indexOf('user_data') !== 0 || res.indexOf('.pdf') === -1) {
8038 alert(res);
8039 return;
8040 }
8041 var a = document.createElement('a');
8042 a.download = name+'.pdf';
8043 a.href = lumise.data.upload_url+res;
8044 a.click();
8045 delete a;
8046
8047 }
8048 });
8049 };
8050
8051 if (ops.full === undefined || ops.full !== true) {
8052 do_export();
8053 return do_upload(data, fonts);
8054 };
8055
8056 if (stages.filter(function(s) {return lumise.data.stages[s].canvas === undefined;}).length > 0) {
8057 alert(lumise.i(196));
8058 return;
8059 };
8060
8061 lumise.f('Start rendering..');
8062
8063 do_activ(0);
8064
8065 break;
8066 case 'json':
8067
8068 var data = {
8069 stages : {},
8070 type : lumise.data.type,
8071 updated: new Date().getTime()/1000,
8072 name : lumise.data.name
8073 }, sts = [];
8074
8075 //ONLY EXPORT THE CURENT STAGE FOR TEMPLATE PURPOSE (.active)
8076
8077 lumise.get.el('stage-nav').find('li[data-stage].active').each(function(){
8078
8079 var s = this.getAttribute('data-stage'),
8080 stage = lumise.data.stages[s];
8081
8082 if (stage.canvas) {
8083 data.stages['lumise'] = {
8084 data : lumise.tools.export(stage),
8085 screenshot: lumise.tools.toImage({stage: stage}),
8086 edit_zone: stage.edit_zone,
8087 image: stage.image,
8088 overlay: stage.overlay,
8089 updated: data.updated
8090 };
8091 sts.push(s);
8092 }else if (stage.data) {
8093 data.stages['lumise'] = {
8094 data : stage.data,
8095 screenshot: '',
8096 edit_zone: '',
8097 image: '',
8098 overlay: stage.overlay,
8099 updated: stage.data.updated
8100 };
8101 sts.push(s);
8102 }
8103
8104 });
8105
8106 lumise.func.download(
8107 'data:application/octet-stream;charset=utf-16le;base64,'+lumise.func.enjson(data),
8108 name+'.lumi'
8109 );
8110
8111 break;
8112 }
8113
8114 },
8115
8116 download : function(data, name) {
8117
8118 lumise.func.dataURL2Blob(data, function(blob) {
8119 if ("webkitAppearance" in document.body.style === false) {
8120 lumise.func.notice('After saving the download file, change the file type to .'+name.split('.')[1].toUpperCase(), 'notice', 5000);
8121 return window.open(URL.createObjectURL(blob));
8122 };
8123 var a = document.createElement('a');
8124 a.download = name;
8125 a.href = URL.createObjectURL(blob);
8126 a.click();
8127 URL.revokeObjectURL(a.href);
8128 delete a;
8129 });
8130
8131 },
8132
8133 export_svg : function (include_base, is_pdf) {
8134
8135 var stage = lumise.stage(),
8136 canvas = stage.canvas,
8137 fonts = [];
8138
8139 if (is_pdf === undefined)
8140 is_pdf = false;
8141
8142 if (include_base !== undefined && include_base === false) {
8143 stage.productColor.set('visible', false);
8144 stage.product.set('visible', false);
8145 var cbc = canvas.backgroundColor;
8146 canvas.backgroundColor = 'rgba(0,0,0,0)'
8147 };
8148
8149 var svg_obj = $('<div>'+canvas.toSVG()+'</div>'),
8150 objs = canvas.getObjects(),
8151 fml = [],
8152 svg = svg_obj.find('svg'),
8153 lz = stage.limit_zone,
8154 ov = $('#lumise-print-overflow').prop('checked'),
8155 has_imagebox = (objs.filter(function(ie) {return ie.type == 'imagebox';}).length > 0),
8156 radius = lumise.stage().edit_zone.radius,
8157 toUni = function(txt) {
8158 var result = "";
8159 for(var i = 0; i < txt.length; i++){
8160 result += '&#x' + ('000' + txt[i].charCodeAt(0).toString(16)).substr(-4)+';';
8161 };
8162 return result;
8163 };
8164
8165 if (include_base !== undefined && include_base === false) {
8166 stage.productColor.set('visible', true);
8167 stage.product.set('visible', true);
8168 canvas.backgroundColor = cbc;
8169 };
8170
8171 svg_obj.find('tspan').each(function(){
8172 this.innerHTML = '<!--lmstart-->'+toUni(this.innerHTML)+'<!--lmend-->';
8173 });
8174
8175 svg_obj.find('text').each(function(){
8176
8177 var id = this.parentNode.getAttribute('id'),
8178 obj = objs.filter(function(o){
8179 return o.id == id;
8180 });
8181
8182 if (obj.length > 0 && obj[0].charSpacing > 0)
8183 this.setAttribute('letter-spacing', (obj[0].charSpacing*0.001)+'em');
8184
8185 this.setAttribute('font-family', this.getAttribute('font-family').replace(/\'/g, ''));
8186
8187 var text_style = this.getAttribute('style')+'paint-order: stroke;';
8188
8189 this.setAttribute('style', text_style);
8190
8191 });
8192
8193 if (svg_obj.find('defs').length === 0)
8194 svg_obj.find('svg').append("<defs></defs>");
8195
8196 if (has_imagebox !== true) {
8197 var limitZ = $('<g'+(ov === true ? ' clip-path="url(#limit-zone-path)"' : '')+'></g>');
8198 svg.append(limitZ);
8199 svg.find('defs').append(
8200 '<clipPath id="limit-zone-path">\
8201 <rect x="'+lz.left+'" y="'+lz.top+'" rx="'+radius+'" ry="'+radius+'" width="'+lz.width+'" height="'+lz.height+'" />\
8202 </clipPath>'
8203 );
8204 };
8205
8206 objs.map(function(o){
8207
8208 var font = '';
8209
8210 if (
8211 o && o.evented &&
8212 o.fontFamily !== undefined && o.fontFamily !== '' &&
8213 typeof o.font == 'object' && o.font.length === 2 &&
8214 fml.indexOf(o.fontFamily.replace(/\"/g, '')) === -1
8215 ) {
8216 font = o.fontFamily.replace(/\"/g, '');
8217 fml.push(font);
8218 };
8219
8220 if (
8221 o.fontFamily !== undefined &&
8222 o.fontFamily !== '' &&
8223 typeof o.font == 'string' &&
8224 o.font.indexOf('data:text/plain;base64') === 0
8225 ) {
8226 var ff = o.font.replace(
8227 'data:text/plain;base64,',
8228 'data:font/truetype;charset=utf-8;base64,'
8229 );
8230 font = o.fontFamily.replace(/\"/g, '');
8231 svg_obj.find('defs').append(
8232 "<style type=\"text/css\">"+
8233 "@font-face {font-family: '"+font+"';"+"src: url("+ff+") format('woff2');}"+
8234 "</style>"
8235 );
8236 };
8237
8238 if (o.type == 'imagebox') {
8239
8240 var ib = svg_obj.find('#'+o.id);
8241
8242 var ib_el = objs.filter(function(ie) {return ie.imagebox !== undefined && ie.imagebox == o.id;});
8243
8244 if (ib_el.length > 0) {
8245
8246 var trn1 = ib.parent().attr('transform').split('(')[1].split(')')[0].split(' '),
8247 trn2 = svg_obj.find('#'+ib_el[0].id).parent().attr('transform').split('(')[1].split(')')[0].split(' ');
8248 svg_obj.find('defs').append(
8249 '<clipPath id="imagebox-'+o.id+'">\
8250 <rect transform="translate('+(parseFloat(trn1[0])-parseFloat(trn2[0]))+' '+(parseFloat(trn1[1])-parseFloat(trn2[1]))+')" x="'+ib.attr('x')+'" y="'+ib.attr('y')+'" rx="0" ry="0" width="'+o.width+'" height="'+o.height+'" />\
8251 </clipPath>'
8252 );
8253 svg_obj.find('#'+ib_el[0].id).parent().get(0).setAttribute('clip-path', 'url(#imagebox-'+o.id+')');
8254 };
8255
8256 if (ib.parent().get(0).tagName == 'g')
8257 ib.parent().remove();
8258 else ib.remove();
8259
8260 };
8261
8262 if (o && o.evented && !has_imagebox) {
8263 limitZ.append(
8264 svg_obj.find('#'+o.id).parent().get(0).tagName == 'g' ?
8265 svg_obj.find('#'+o.id).parent() :
8266 svg_obj.find('#'+o.id)
8267 );
8268 };
8269
8270 if (font !== '' && fonts.indexOf(font) === -1)
8271 fonts.push(font);
8272
8273 });
8274
8275 if (fml.length > 0) {
8276 svg_obj.find('defs').append(
8277 '<style type="text/css">@import url(\'http://fonts.googleapis.com/css?family='+fml.join('|')+'\');</style>'
8278 );
8279 };
8280
8281 svg_obj.find('desc').html(
8282 'Created with Lumise Product Designer Tool (https://www.lumise.com)'
8283 );
8284
8285 svg_obj.find('image').each(function() {
8286
8287 var src = this.getAttribute('xlink:href');
8288
8289 if (src.indexOf('http') === 0) {
8290
8291 var id = this.getAttribute('id'),
8292 canvas = document.createElement('canvas'),
8293 ctx = canvas.getContext('2d'),
8294 obj = lumise.stage().canvas.getObjects().filter(function(o){
8295 return o.id == id;
8296 });
8297
8298 if (obj.length === 0 && src == lumise.stage().product._element.src)
8299 obj = [lumise.stage().product];
8300
8301 if (obj.length === 0)
8302 return;
8303
8304 var el = obj[0]._element;
8305
8306 canvas.width = el.width;
8307 canvas.height = el.height;
8308
8309 ctx.drawImage(el, 0, 0, el.width, el.height);
8310
8311 this.setAttribute(
8312 'xlink:href',
8313 canvas.toDataURL('image/'+(src.indexOf('.png') ? 'png' : 'jpeg'))
8314 );
8315
8316 }
8317 });
8318
8319 var stage = lumise.stage();
8320
8321 stage.canvas.getObjects().
8322 filter(function(o){
8323 return o.type == 'svg';
8324 }).
8325 map(function(o, i){
8326
8327 var el = svg_obj.find('image[id="'+o.id+'"]'),
8328 sv = $('<div>'+atob(o.src.split(',')[1])+'</div>'),
8329 s_v = sv.find('svg').get(0),
8330 vb = s_v.getAttribute('viewBox') ?
8331 s_v.getAttribute('viewBox') :
8332 s_v.getAttribute('viewbox');
8333
8334 vb = vb.replace(/\,/g, ' ').replace(/ /g, ' ').split(' ');
8335
8336 if (!s_v.getAttribute('width'))
8337 s_v.setAttribute('width', vb[2]);
8338
8339 if (!s_v.getAttribute('height'))
8340 s_v.setAttribute('height', vb[3]);
8341
8342 var x = parseFloat(vb[0]),
8343 y = parseFloat(vb[1]),
8344
8345 w = parseFloat(s_v.getAttribute('width').toString().replace(/[^0-9.\-]/g, '')),
8346 h = parseFloat(s_v.getAttribute('height').toString().replace(/[^0-9.\-]/g, '')),
8347 rx = o.width/parseFloat(vb[2]),
8348 ry = o.height/parseFloat(vb[3]),
8349
8350 l = (o.width/2)+(x*rx),
8351 t = (o.height/2)+(y*ry),
8352 g = '<g transform="translate(-'+l+' -'+t+') scale('+rx+' '+ry+')">';
8353
8354 $.each(s_v.attributes, function(){
8355 if (this.name.indexOf('xmlns:') === 0 && !svg_obj.find('svg').attr(this.name))
8356 svg_obj.find('svg').attr(this.name, this.value);
8357 });
8358 /*
8359 * Fix stroke width of inner svg object
8360 */
8361 $(s_v).find('[stroke-width]').each(function(){
8362 this.setAttribute('stroke-width', parseFloat(this.getAttribute('stroke-width')*rx));
8363 });
8364
8365 g += s_v.innerHTML+'</g>';
8366
8367 el.after(g);
8368 el.remove();
8369
8370 return;
8371
8372
8373 var canvas = document.createElement('canvas'),
8374 ctx = canvas.getContext('2d');
8375 canvas.width = o._element.width*5;
8376 canvas.height = o._element.height*5;
8377 ctx.drawImage(o._element, 0, 0, o._element.width*5, o._element.height*5);
8378
8379 svg_obj.find('image[id="'+o.id+'"]').get(0).setAttribute(
8380 'xlink:href',
8381 canvas.toDataURL('image/png')
8382 );
8383
8384 });
8385
8386 if (include_base !== undefined && include_base === false) {
8387
8388 svg.attr({
8389 width: 800,
8390 height: lz.height*(800/lz.width)
8391 });
8392
8393 svg.get(0).setAttribute('viewBox', (lz.left)+' '+(lz.top)+' '+(lz.width)+' '+(lz.height));
8394
8395 } else if (include_base !== undefined && include_base === true) {
8396 svg.attr({
8397 width: stage.product.width,
8398 height: stage.product.height
8399 });
8400
8401 svg.get(0).setAttribute('viewBox', (stage.product.left-(stage.product.width/2))+' '+(stage.product.top-(stage.product.height/2))+' '+(stage.product.width)+' '+(stage.product.height));
8402
8403 }
8404
8405 if (is_pdf) {
8406 svg.removeAttr('width');
8407 svg.removeAttr('height');
8408 };
8409
8410 var svg_data = svg_obj.html();
8411
8412 svg_data = svg_data.split('<!--lmstart-->');
8413
8414 svg_data.map(function(s, i) {
8415 if (i>0 && s.indexOf('<!--lmend-->') > -1) {
8416 s = s.split('<!--lmend-->');
8417 s[0] = toUni(s[0]);
8418 svg_data[i] = s.join('');
8419 };
8420 });
8421
8422 svg_data = svg_data.join('').replace(/gradienttransform/g, 'gradientTransform').
8423 replace(/gradientunits/g, 'gradientUnits').
8424 replace(/lineargradient/g, 'linearGradient').
8425 replace(/radialgradient/g, 'radialGradient').
8426 replace(/\<\/clippath\>/g, '</clipPath>').
8427 replace(/\<clippath\ /g, '<clipPath ').
8428 replace(/\>\<\/stop\>/g, '/>');
8429
8430 /*$('#svg-preview').remove();
8431 $('body').append('<div id="svg-preview" style="position: fixed; top: 50px; right: 50px;z-index: 100000000000000000">'+svg_data+'</div>');
8432 return null;*/
8433
8434 if (is_pdf === false)
8435 return svg_data;
8436 else return [svg_data, fonts];
8437
8438 },
8439
8440 dataURL2Blob : function(dataURL, callback) {
8441
8442 callback(this.url2blob(dataURL));
8443
8444 },
8445
8446 process_files: function(files, callback, saveas) {
8447
8448 var tmpl = '', file, reader = {};
8449
8450 for (f in files) {
8451
8452 if (typeof files[f] != 'object')
8453 return;
8454
8455 if (files[f].type.indexOf('image/') !== 0)
8456 return lumise.func.notice(lumise.i('148'), 'error', 5000);
8457
8458 file = files[f];
8459
8460 reader[f] = new FileReader();
8461 reader[f].f = f;
8462 reader[f].file = file;
8463 reader[f].addEventListener("load", function () {
8464
8465 if (!lumise.func.check_upload_size(reader[this.f].file)) {
8466 delete reader[this.f];
8467 return;
8468 };
8469
8470 var id = parseInt(reader[this.f].file.lastModified/1000).toString(36);
8471
8472 id = parseInt((new Date().getTime()/1000)).toString(36)+'-'+id;
8473
8474 var url_data = this.result,
8475 img_opt = {
8476 url: url_data,
8477 type: reader[this.f].file.type,
8478 size: reader[this.f].file.size,
8479 name: reader[this.f].file.name.replace(/[^0-9a-zA-Z\.\-\_]/g, "").trim().replace(/\ /g, '+')
8480 };
8481
8482 if (url_data.indexOf('data:image/svg+xml;base64,') === 0) {
8483
8484 var wrp = $('<div>'+atob(url_data.split('base64,')[1]).replace('viewbox=', 'viewBox=')+'</div>'),
8485 svg = wrp.find('svg').get(0),
8486 vb = svg.getAttribute('viewBox') ?
8487 svg.getAttribute('viewBox') :
8488 svg.getAttribute('viewbox');
8489
8490 vb = vb.replace(/\,/g, ' ').replace(/ /g, ' ').split(' ');
8491
8492 if (!svg.getAttribute('width'))
8493 svg.setAttribute('width', vb[2]);
8494
8495 if (!svg.getAttribute('height'))
8496 svg.setAttribute('height', vb[3]);
8497
8498 wrp.find('[id]').each(function(){
8499 this.id = this.id.replace(/[\u{0080}-\u{FFFF}]/gu,"");
8500 });
8501
8502 img_opt.url = 'data:image/svg+xml;base64,'+btoa(wrp.html());
8503
8504 if (saveas !== false)
8505 new lumise.cliparts.import(id, img_opt, 'prepend');
8506
8507 } else if (saveas !== false) {
8508 new lumise.cliparts.import(id, img_opt, 'prepend');
8509 };
8510
8511 if (typeof callback == 'function')
8512 callback(img_opt);
8513
8514 delete reader[this.f];
8515
8516 }, false);
8517
8518 reader[f].readAsDataURL(file);
8519
8520 };
8521
8522 },
8523
8524 select_image: function(callback, saveas) {
8525
8526 var ops = lumise.ops;
8527
8528 if (ops.image_inp === undefined) {
8529 ops.image_inp = document.createElement('input');
8530 ops.image_inp.type = 'file';
8531 ops.image_inp.accept = '.jpg,.png,.jpeg,.svg';
8532 ops.image_inp.onchange = function(){
8533 lumise.func.process_files(this.files, this.callback, this.saveas);
8534 };
8535 };
8536
8537 ops.image_inp.type = 'text';
8538 ops.image_inp.value = '';
8539 ops.image_inp.type = 'file';
8540 ops.image_inp.callback = callback;
8541 ops.image_inp.saveas = saveas;
8542 ops.image_inp.click();
8543
8544 },
8545
8546 replace_image: function(url, image) {
8547
8548 lumise.f(false);
8549
8550 lumise.func.crop({
8551 src: url,
8552 width: image.width,
8553 dimension: image.width/image.height,
8554 square: false,
8555 load: function(img, crop) {
8556
8557 var are = crop.find('div.lumise_crop_selArea'),
8558 pw = are.parent().width(),
8559 ph = are.parent().height(),
8560 w = pw*0.9,
8561 h = w*(image.height/image.width);
8562
8563 if (h < ph) {
8564 are.css({
8565 width: w+'px',
8566 height: h+'px',
8567 top: ((ph-h)/2)+'px',
8568 left: ((pw-w)/2)+'px',
8569 });
8570 } else {
8571 h = ph*0.9;
8572 w = h*(image.width/image.height);
8573 are.css({
8574 width: w+'px',
8575 height: h+'px',
8576 top: ((ph-h)/2)+'px',
8577 left: ((pw-w)/2)+'px',
8578 });
8579 }
8580
8581 crop.trigger('mousedown').off('mousemove touchmove');
8582
8583 },
8584 save: function(crop) {
8585
8586 var main_canvas = lumise.stage().canvas,
8587 active = image,
8588 img = crop.find('img.lumise_crop_img').get(0),
8589 type = img.src.indexOf('data:image/jpeg') ? 'jpeg' : 'png',
8590 canvas = document.createElement('canvas'),
8591 ctx = canvas.getContext('2d'),
8592 area = crop.find('div.lumise_crop_selArea'),
8593 w = area.width(),
8594 h = area.height(),
8595 t = area.get(0).offsetTop,
8596 l = area.get(0).offsetLeft;
8597
8598 canvas.width = w;
8599 canvas.height = h;
8600
8601 ctx.drawImage(img, -l, -t, area.parent().width(), area.parent().height());
8602
8603 var ow = active.width,
8604 oh = active.height,
8605 src = canvas.toDataURL('image/'+type);
8606
8607 active.setSrc(src, function() {
8608 active.set({
8609 width: ow,
8610 height: ow*(h/w),
8611 origin_src: src,
8612 src: src,
8613 type: 'image'
8614 });
8615 main_canvas.renderAll();
8616 });
8617
8618 delete canvas;
8619
8620 }
8621 });
8622
8623 },
8624
8625 imagebox_select_file: function(ib) {
8626
8627 this.select_image(function(opt) {
8628 lumise.tools.import ({objects: [{
8629 type: 'image',
8630 src: opt.url,
8631 width: ib.width,
8632 left: ib.left,
8633 top: ib.top,
8634 imagebox: ib.id,
8635 evented: true
8636 }]}, function(){});
8637 });
8638
8639 },
8640
8641 imagebox_arrange: function() {
8642
8643 var stage = lumise.stage(),
8644 canvas = stage.canvas,
8645 objs = canvas.getObjects();
8646
8647 objs.map(function(o) {
8648 if (o.type == 'imagebox')
8649 o.moveTo(2);
8650 });
8651
8652 canvas.renderAll();
8653
8654 },
8655
8656 preset_import : function(data, pos, callback) {
8657
8658 var stage = lumise.stage();
8659
8660 lumise.f('Loading..');
8661
8662 pos = $.extend({
8663 width: stage.limit_zone.width*0.8,
8664 left: stage.limit_zone.left + (stage.limit_zone.width/2),
8665 top: stage.limit_zone.top + (stage.limit_zone.height/2)
8666 }, pos);
8667
8668 data.map(function(d, i) {
8669
8670 if (d.type == 'upload')
8671 d.type = 'image';
8672
8673 if (d.id) {
8674 if (lumise.cliparts.uploads[d.id])
8675 d.url = lumise.cliparts.uploads[d.id];
8676 else if (lumise.cliparts.storage[d.id])
8677 d.url = lumise.cliparts.storage[d.id];
8678 }
8679
8680 if (d.text && !d.name)
8681 d.name = d.text.substr(0, 30);
8682
8683 if (d.url){
8684 if (d.url.indexOf('data:image/svg+xml;base64,') > -1 || d.url.split('.').pop().trim() == 'svg') {
8685 d.type = 'svg';
8686 }else d.type = 'image';
8687 d.src = d.url;
8688 delete d.url;
8689 }
8690
8691 if (d.font !== undefined && decodeURIComponent(d.font) != d.font)
8692 d.font = JSON.parse(decodeURIComponent(d.font));
8693
8694 Object.keys(pos).map(function(i){
8695 if (['left', 'top'].indexOf(i) > -1 && d[i] !== undefined)
8696 d[i] += pos[i];
8697 else if (d[i] === undefined)
8698 d[i] = pos[i];
8699 });
8700
8701 if (!d.name)
8702 (d.name = d.url && d.url.indexOf('data:image') === -1) ?
8703 d.url.split('/').pop() :
8704 (d.type == 'svg' ? 'New SVG' : 'New Image');
8705
8706 var fill_default = lumise.get.color('invert');
8707
8708 if (lumise.data.colors !== undefined && lumise.data.colors !== '') {
8709 fill_default = lumise.data.colors.split(',')[0];
8710 if (fill_default.indexOf(':') > -1)
8711 fill_default = fill_default.split(':')[1];
8712 fill_default = fill_default.split('@')[0];
8713 };
8714
8715 if (d.type == 'i-text' || d.type == 'text-fx') {
8716 d.fill = fill_default;
8717 }
8718
8719 delete d.save;
8720 data[i] = d;
8721
8722 });
8723
8724 lumise.tools.import ({objects: data}, function(){
8725 lumise.get.el('x-thumbn-preview').hide();
8726 setTimeout(function(){
8727 if (lumise.ops.set_active) {
8728 stage.canvas.setActiveObject(lumise.ops.set_active);
8729 delete lumise.ops.set_active;
8730 } else stage.canvas.setActiveObject(stage.canvas._objects[stage.canvas._objects.length-1]);
8731 lumise.tools.save();
8732 if (typeof callback == 'function')
8733 callback();
8734 }, 10);
8735 });
8736
8737 },
8738
8739 update_edit_zone : function(img, stage) {
8740
8741 var ratio = stage.product.height/img.naturalHeight;
8742
8743 if (ratio !== 1) {
8744 stage.limit_zone.set({
8745 height: stage.edit_zone.height*ratio,
8746 width: stage.edit_zone.width*ratio,
8747 left: (stage.edit_zone.left*ratio)+(stage.canvas.width/2),
8748 top: (stage.edit_zone.top*ratio)+(stage.canvas.height/2)
8749 });
8750 }
8751
8752 if (img.naturalWidth > 600) {
8753 stage.product.set({
8754 width: 600,
8755 height: img.naturalHeight*(600/img.naturalWidth)
8756 });
8757 }else{
8758 stage.product.set({
8759 width: img.naturalWidth,
8760 height: img.naturalHeight*(600/img.naturalWidth)
8761 });
8762 }
8763 stage.canvas.renderAll();
8764 },
8765
8766 ctrl_btns : function(opts) {
8767
8768 if (!opts.e)
8769 return false;
8770
8771 var target = opts.target,
8772 objs = target._objects,
8773 canvas = lumise.stage().canvas,
8774 active = canvas.getActiveObject(),
8775 group = canvas.getActiveGroup(),
8776 corner = target._findTargetCorner(canvas.getPointer(opts.e, true));
8777
8778 if (canvas.isDrawingMode === true)
8779 return;
8780
8781 if (corner == 'tl') {
8782
8783 lumise.tools.discard();
8784 lumise.stack.save();
8785
8786 if (objs && objs.length > 0)
8787 objs.map(function(obj){
8788 canvas.remove(obj);
8789 });
8790 else canvas.remove(target);
8791
8792 lumise.stack.save();
8793 lumise.design.layers.build();
8794 lumise.actions.do('object:remove');
8795 return true;
8796
8797 }else if (corner == 'bl') {
8798
8799 var canvas = lumise.stage().canvas,
8800 active = canvas.getActiveObject(),
8801 group = canvas.getActiveGroup(),
8802 do_clone = function(ids) {
8803
8804 var clones = [];
8805 canvas.getObjects().map(function(obj){
8806
8807 if (!obj.id || ids.indexOf(obj.id) === -1)
8808 return;
8809
8810 var clone = obj.toJSON();
8811 delete clone.toClip;
8812 lumise.ops.export_list.map(function(l){
8813 clone[l] = obj[l];
8814 });
8815
8816 clone.left = ((group ? group.left : 1)+obj.left)*1.1;
8817 clone.top = ((group ? group.top : 1)+obj.top)*1.1;
8818 clone.thumbn = obj.thumbn;
8819 clone.replace = false;
8820 clone.id = parseInt(new Date().getTime()/1000).toString(36)+'-'+Math.random().toString(36).substr(2);
8821
8822 clones.push(clone);
8823
8824 });
8825
8826 lumise.tools.import ({objects: clones}, function(){});
8827
8828 };
8829
8830 if (active) {
8831
8832 if (
8833 active.imagebox !== undefined &&
8834 active.imagebox !== '' &&
8835 canvas.getObjects().filter(function(o) {return o.id == active.imagebox;}).length > 0
8836 ) return;
8837
8838 lumise.tools.discard();
8839 clearTimeout(lumise.ops.preventDbl);
8840 lumise.ops.preventDbl = setTimeout(do_clone, 100, [active.id]);
8841
8842 }else if(group){
8843
8844 return;
8845
8846 var ids = [];
8847 group._objects.map(function(o){
8848 if (o.id && ids.indexOf(o.id) === -1)
8849 ids.push(o.id);
8850 });
8851
8852 lumise.tools.discard();
8853 do_clone(ids);
8854
8855 return true;
8856 // && confirm(lumise.i('05'))
8857 var clones = [];
8858
8859 group._objects.map(function(obj){
8860 delete obj.clipTo;
8861 clones.push(obj.clone() ? obj.clone() : obj);
8862 });
8863
8864 var new_group = new fabric.Group(clones, {
8865 left: group.left,
8866 top: group.top,
8867 scaleX: group.scaleX*5,
8868 scaleY: group.scaleY*5,
8869 });
8870
8871 var ops = {
8872 left: group.left,
8873 top: group.top,
8874 height: group.height,
8875 width: group.width,
8876 scaleX: group.scaleX,
8877 scaleY: group.scaleY,
8878 angle: group.angle,
8879 name: 'Group objects',
8880 text: 'Group objects',
8881 src: new_group.toDataURL()
8882 };
8883
8884 new_group.set('scaleX', new_group.scaleX/5);
8885 new_group.set('scaleY', new_group.scaleY/5);
8886
8887 lumise.objects.lumise.image(ops, function(obj){
8888
8889 var index = canvas.getObjects().indexOf(group._objects[0]);
8890
8891 lumise.stage().canvas.discardActiveGroup();
8892
8893 group._objects.map(function(c){
8894 canvas.remove(c);
8895 });
8896
8897 canvas.add(obj);
8898 obj.moveTo(index);
8899
8900 lumise.stack.save();
8901 lumise.design.layers.build();
8902
8903 });
8904
8905 }
8906
8907 return true;
8908
8909 }
8910
8911 },
8912
8913 navigation : function(el, e) {
8914
8915 if (lumise.ops.preventClick === true)
8916 return delete lumise.ops.preventClick;
8917
8918 if (el === 'clear' || $(el).hasClass('active')){
8919
8920 if(
8921 el !== 'clear' &&
8922 typeof e !== 'undefined' &&
8923 el.getAttribute('data-tool') === 'cart' &&
8924 e.target.getAttribute('data-func') === 'remove'
8925 )return;
8926
8927 $('[data-navigation="active"]').attr({'data-navigation': ''});
8928 lumise.e.main.find('li[data-tool].active').removeClass('active');
8929
8930 }else{
8931
8932 $('[data-navigation="active"]').attr({'data-navigation': ''});
8933
8934 if (el.getAttribute('data-tool') === 'languages' && !lumise.data.switch_lang)
8935 return;
8936
8937 lumise.e.main.find('li[data-tool].active').removeClass('active');
8938
8939 $(el).addClass('active');
8940 $(el).closest('[data-navigation]').attr({'data-navigation': 'active'});
8941
8942 }
8943 },
8944
8945 set_cookie : function(cname, cvalue, exdays) {
8946
8947 var d = new Date();
8948 if (!exdays)
8949 exdays = 365;
8950
8951 d.setTime(d.getTime() + (exdays*24*60*60*1000));
8952 var expires = "expires="+ d.toUTCString();
8953 document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
8954
8955 },
8956
8957 get_cookie : function(cname) {
8958
8959 var name = cname + "=";
8960 var decodedCookie = decodeURIComponent(document.cookie);
8961 var ca = decodedCookie.split(';');
8962 for(var i = 0; i <ca.length; i++) {
8963 var c = ca[i];
8964 while (c.charAt(0) == ' ') {
8965 c = c.substring(1);
8966 }
8967 if (c.indexOf(name) == 0) {
8968 return c.substring(name.length, c.length);
8969 }
8970 }
8971
8972 return "";
8973
8974 },
8975
8976 getTextWidth : function(op, callback) {
8977
8978 if (typeof callback != 'function')
8979 return;
8980
8981 if (!document.fonts) {
8982 return callback({width: 0, height: 0});
8983 }
8984
8985 document.fonts.load(op.size+'px "'+op.family+'"', op.text).then(function(){
8986
8987 var canvas = lumise.ops.getTextWidthCanvas || (lumise.ops.getTextWidthCanvas = document.createElement("canvas"));
8988 var context = canvas.getContext("2d");
8989 context.font = op.size+'px '+op.family;
8990 var metrics = context.measureText(op.text);
8991
8992 callback (metrics);
8993
8994 });
8995
8996 },
8997
8998 buildText : function(ops) {
8999
9000 if (lumise.ops.texttmpl === undefined) {
9001 lumise.ops.texttmpl = $('<div style="display: inline-block;visibility:hidden;white-space: nowrap;position:fixed;top: -10000px;left: -1000px;"></div>');
9002 $('body').append(lumise.ops.texttmpl);
9003 };
9004
9005 if (ops.curved === undefined || ops.curved === 0)
9006 ops.curved = 1;
9007
9008 if (ops.curved > 1)
9009 ops.text = ops.text.trim().replace(/\n/g, ' ');
9010
9011 lumise.ops.texttmpl.html(ops.text.trim().replace(/\n/g, '<br>')).
9012 css({
9013 'line-height': ops.lineHeight+'px',
9014 'letter-spacing': (ops.charSpacing)+'px',
9015 'font-size': ops.fontSize+'px',
9016 'font-family': ops.fontFamily
9017 });
9018
9019 var h = lumise.ops.texttmpl[0].getBoundingClientRect(),
9020 w = h.width-ops.charSpacing,
9021 h = h.height,
9022 m1 = 0, m2 = 0, a4 = 0, a5 = 0, a6 = 0, a7 = 0,
9023 e = ops.curved,
9024 rtl = ops.rtl,
9025 spc = ops.charSpacing !== undefined ? ops.charSpacing : 0,
9026 txt = ops.text,
9027 lh = ops.lineHeight !== undefined && ops.lineHeight !== 0 ? ops.lineHeight : ops.fontSize;
9028
9029 if (e > 1) {
9030
9031 e >= 360 && (e = 359.999),
9032 -360 >= e && (e = -359.999),
9033 e >= 0 && 180 >= e ? (a4 = 0, a5 = 1) : e > 180 && 360 >= e ? (a4 = 1, a5 = 1) : 0 > e && e > -180 ? (a4 = 0, a5 = 0) : -180 >= e && e >= -360 && (a4 = 1, a5 = 0);
9034
9035 var r = (180 * w) / (Math.abs(e) * Math.PI),
9036 b = 90 - Math.abs(e) / 2,
9037 c = 90 + Math.abs(e) / 2,
9038 v = b * Math.PI / 180,
9039 M = c * Math.PI / 180,
9040 f = r * Math.cos(v),
9041 g = r * Math.sin(v),
9042 N = r * Math.cos(M),
9043 S = r * Math.sin(M),
9044 tp = new Date().getTime();
9045
9046 e > 0 ? (
9047 f = -1 * f,
9048 g = -1 * g,
9049 N = -1 * N,
9050 S = -1 * S
9051 ) : (
9052 f = -1 * f,
9053 N = -1 * N
9054 ),
9055 Math.abs(e) > 180 ? r + Math.abs(g) : r - Math.abs(g),
9056 e > 0 ? (
9057 m1 = f + r,
9058 m2 = g + r,
9059 a6 = N + r,
9060 a7 = S + r
9061 ) : (
9062 m1 = f,
9063 m2 = g,
9064 a6 = N,
9065 a7 = S
9066 );
9067
9068 };
9069
9070 var svg_text = '';
9071
9072 txt.trim().split("\n").map(function(t, i) {
9073 svg_text += '<text fill="'+ops.fill+'" stroke="'+ops.stroke+'" stroke-width="'+(ops.strokeWidth*10)+'" stroke-linecap="butt" stroke-linejoin="miter" font-size="'+ops.fontSize+'" font-family="'+ops.fontFamily+'" letter-spacing="'+spc+'" '+(rtl ? 'text-anchor="end" direction="rtl"' : 'text-anchor="start" direction="ltr"')+'>'+(e == 1 ? '' : '<textPath xlink:href="#tp-'+tp+'">');
9074 svg_text += '<tspan dy="'+(i*lh)+'" x="'+(e == 1 ? spc/2 : 0)+'">'+t+'</tspan>'+(e == 1 ? '' : '</textPath>')+'</text>';
9075 });
9076
9077 var svg = $('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g>'+svg_text+(e == 1 ? '' : '</g><path id="tp-'+tp+'" d="M '+m1+' '+m2+' A '+r+' '+r+' 0 '+ a4 + ' ' + a5 + ' ' + a6 + " " + a7+'" fill="transparent"></path>')+'</svg>');
9078
9079 lumise.ops.texttmpl.html('').append(svg);
9080
9081 var text = svg.find('g').get(0).getBoundingClientRect();
9082
9083 if (
9084 (ops.textAlign == 'center' || ops.textAlign == 'right') &&
9085 svg.find('text tspan').length > 1
9086 ) {
9087 svg.find('text tspan').each(function(){
9088 var tbc = this.getBoundingClientRect().width;
9089 if (ops.textAlign == 'center' && tbc < text.width)
9090 this.setAttribute('x', (text.width-tbc)/2);
9091 if (ops.textAlign == 'right' && tbc < text.width)
9092 this.setAttribute('x', (text.width-tbc));
9093 });
9094 };
9095
9096 svg.attr({
9097 height: text.height,
9098 width: text.width+spc,
9099 viewBox: (e == 1 ? 0 : m1-f-(text.width/2))+' -'+(ops.fontSize*0.9)+' '+(text.width+spc)+' '+(text.height)
9100 });
9101
9102 return lumise.ops.texttmpl.html();
9103
9104 },
9105
9106 url2blob : function(dataURL) {
9107
9108 if(typeof dataURL !== 'string'){
9109 throw new Error('Invalid argument: dataURI must be a string');
9110 }
9111
9112 dataURL = dataURL.split(',');
9113
9114 var binStr = atob(dataURL[1]),
9115 len = binStr.length,
9116 arr = new Uint8Array(len);
9117
9118 for (var i = 0; i < len; i++) {
9119 arr[i] = binStr.charCodeAt(i);
9120 }
9121
9122 return new Blob([arr], {
9123 type: dataURL[0].substring(dataURL[0].indexOf('image/'), dataURL[0].indexOf(';')-1)
9124 });
9125 },
9126
9127 createThumbn : function(ops) {
9128
9129 var img = new Image();
9130 img.onload = function(){
9131
9132 var cv = lumise.ops.creatThumbnCanvas ?
9133 lumise.ops.creatThumbnCanvas :
9134 lumise.ops.creatThumbnCanvas = document.createElement('canvas');
9135
9136 cv.width = ops.width;
9137 cv.height = ops.height;
9138 var ctx = cv.getContext('2d'),
9139 w = this.naturalHeight*(cv.width/this.naturalWidth) >= cv.height ?
9140 cv.width : this.naturalWidth*(cv.height/this.naturalHeight),
9141 h = w == cv.width ? this.naturalHeight*(cv.width/this.naturalWidth) : cv.height,
9142 l = w == cv.width ? 0 : -(w-cv.width)/2,
9143 t = h == cv.height ? 0 : -(h-cv.height)/2;
9144
9145 ctx.fillStyle = ops.background? ops.background : '#eee';
9146 ctx.fillRect(0, 0, cv.width, cv.height);
9147 ctx.drawImage(this, l, t, w, h);
9148
9149 ops.callback(cv);
9150
9151 };
9152
9153 img.src = ops.source;
9154
9155 },
9156
9157 check_upload_size : function(file) {
9158
9159 var show_notice = lumise.apply_filters('upload_notice', true);
9160
9161 if (
9162 !isNaN(lumise.data.min_upload) &&
9163 lumise.data.min_upload > 0 &&
9164 file.size/1024 < lumise.data.min_upload
9165 ) {
9166 if (show_notice)
9167 lumise.func.notice(lumise.i('147')+' '+(file.size/1024).toFixed(2)+'KB (Minimum '+lumise.data.min_upload+'KB)', 'error', 8000);
9168
9169 lumise.do_action('upload_minimum_limit');
9170 return false;
9171 };
9172
9173 if (
9174 !isNaN(lumise.data.max_upload) &&
9175 lumise.data.max_upload > 0 &&
9176 file.size/1024 > lumise.data.max_upload
9177 ) {
9178 if (show_notice)
9179 lumise.func.notice(lumise.i('147')+' '+(file.size/1024).toFixed(2)+'KB (Maximum '+lumise.data.max_upload+'KB)', 'error', 8000);
9180
9181 lumise.do_action('upload_maximum_limit');
9182 return false;
9183 };
9184
9185 return true;
9186
9187 },
9188
9189 check_upload_dimensions : function(img) {
9190
9191 var type = img.src.indexOf('data:image/png') === 0 ? 'png' : 'jpeg';
9192
9193 if (img.src.indexOf('data:image/svg+xml') === 0)
9194 return img.src;
9195
9196 if (
9197 lumise.data.min_dimensions !== '' &&
9198 typeof lumise.data.min_dimensions == 'object'
9199 ) {
9200 if (
9201 parseFloat(lumise.data.min_dimensions[0]) > img.width ||
9202 parseFloat(lumise.data.min_dimensions[1]) > img.height
9203 ) {
9204 lumise.func.notice(lumise.i(160)+' '+lumise.data.min_dimensions.join('x'), 'notice', 3500);
9205 return null;
9206 }
9207 };
9208
9209 if (
9210 lumise.data.max_dimensions !== '' &&
9211 typeof lumise.data.max_dimensions == 'object'
9212 ) {
9213
9214 if (
9215 parseFloat(lumise.data.max_dimensions[0]) < img.width ||
9216 parseFloat(lumise.data.max_dimensions[1]) < img.height
9217 ) {
9218
9219 var cv = document.createElement('canvas');
9220
9221 if (parseFloat(lumise.data.max_dimensions[0]) < img.width) {
9222
9223 cv.width = parseFloat(lumise.data.max_dimensions[0]);
9224 cv.height = cv.width*(img.height/img.width);
9225
9226 if (cv.height > lumise.data.max_dimensions[1]) {
9227 cv.width = lumise.data.max_dimensions[1]*(cv.width/cv.height);
9228 cv.height = lumise.data.max_dimensions[1];
9229 };
9230
9231 } else if (parseFloat(lumise.data.max_dimensions[1]) < img.height) {
9232
9233 cv.height = parseFloat(lumise.data.max_dimensions[1]);
9234 cv.width = cv.height*(img.width/img.height);
9235
9236 if (cv.width > lumise.data.max_dimensions[0]) {
9237 cv.height = lumise.data.max_dimensions[0]*(cv.height/cv.width);
9238 cv.width = lumise.data.max_dimensions[0];
9239 };
9240
9241 };
9242
9243 cv.getContext('2d').drawImage(img, 0, 0, cv.width, cv.height);
9244
9245 return cv.toDataURL('image/'+type);
9246
9247 }
9248
9249 };
9250
9251 var size = lumise.get.size();
9252
9253 if (lumise.data.min_ppi !== '') {
9254
9255 var pi = parseFloat(lumise.data.min_ppi)/300;
9256
9257 if (
9258 img.width*pi < size.w ||
9259 img.height*pi < size.h
9260 ) {
9261 lumise.func.notice(lumise.i(194)+' '+lumise.data.min_ppi, 'notice', 3500);
9262 return null;
9263 }
9264 };
9265
9266 if (lumise.data.max_ppi !== '') {
9267
9268 var pi = parseFloat(lumise.data.max_ppi)/300;
9269
9270 if (
9271 img.width*pi > size.w ||
9272 img.height*pi > size.h
9273 ) {
9274 lumise.func.notice(lumise.i(195)+' '+lumise.data.max_ppi, 'notice', 3500);
9275 return null;
9276 }
9277 };
9278
9279 return img.src;
9280
9281 },
9282
9283 get_blob : function(url, callback) {
9284
9285 var xhr = new XMLHttpRequest();
9286
9287 xhr.open("GET", url, true);
9288 xhr.responseType = "blob";
9289 xhr.overrideMimeType("text/plain;charset=utf-8");
9290 xhr.onload = function(){
9291 var a = new FileReader();
9292 a.onload = callback;
9293 a.readAsDataURL(this.response);
9294 };
9295 xhr.onreadystatechange = function (e) {
9296 if (xhr.readyState === 4 && xhr.status !== 200)
9297 callback(1);
9298 };
9299
9300 xhr.send(null);
9301
9302 },
9303
9304 count_colors : function(url, callback) {
9305
9306 if (!lumise.ops.count_colors_canvas)
9307 lumise.ops.count_colors_canvas = document.createElement('canvas');
9308
9309 var toHex = function(c) {
9310 var hex = c.toString(16);
9311 return hex.length == 1 ? "0" + hex : hex;
9312 },
9313 nearest = function(x, a) {
9314 return Math.floor(x / (255 / a)) * (255 / a);
9315 },
9316 process = function(img, w, h) {
9317
9318 lumise.ops.count_colors_canvas.width = w;
9319 lumise.ops.count_colors_canvas.height = h;
9320
9321 var stats = [],
9322 ctx = lumise.ops.count_colors_canvas.getContext("2d");
9323
9324 ctx.drawImage(img, 0, 0, w, h);
9325
9326 // get bitmap
9327 var idata = ctx.getImageData(0, 0, w, h),
9328 data = idata.data;
9329
9330 for (var i = 0; i < data.length; i += 4) {
9331
9332 data[i] = nearest(data[i], 8);
9333 data[i + 1] = nearest(data[i + 1], 8);
9334 data[i + 2] = nearest(data[i +2], 4);
9335
9336 c = '#'+toHex(data[i])+toHex(data[i+1])+toHex(data[i+2]);
9337 if (stats.indexOf(c) === -1)
9338 stats.push(c);
9339
9340 }
9341
9342 return stats;
9343
9344 };
9345
9346 if (callback === true)
9347 return process(url, url.width/10, url.height/10);
9348
9349 var img = new Image();
9350
9351 img.cb = callback;
9352 img.onload = function(){
9353
9354 var w = this.naturalWidth/5,
9355 h = this.naturalHeight/5,
9356 stats = [],
9357 nearest = function(x, a) {
9358 return Math.floor(x / (255 / a)) * (255 / a);
9359 };
9360
9361 if (typeof this.cb == 'function')
9362 this.cb(process(this, w, h));
9363
9364 delete this;
9365
9366 };
9367
9368 img.src = url;
9369
9370 },
9371
9372 update_state : function() {
9373
9374 clearTimeout(lumise.ops.preventDbl);
9375
9376 lumise.ops.preventDbl = setTimeout(function() {
9377
9378 var states = {},
9379 objs = [],
9380 bg = [],
9381 colors = [],
9382 c;
9383
9384 Object.keys(lumise.data.stages).map(function(s){
9385
9386 var scolors = [], image = 0, text = 0, clipart = 0, vector = 0, upload=0;
9387
9388 objs = [];
9389
9390 if (lumise.data.stages[s].canvas)
9391 objs = lumise.data.stages[s].canvas.getObjects();
9392 else if (lumise.data.stages[s].data && lumise.data.stages[s].data.objects)
9393 objs = lumise.data.stages[s].data.objects;
9394
9395 if (objs.length > 0) {
9396 objs.map(function(o){
9397 if (o && o.evented) {
9398
9399 if (o.colors && o.colors.length > 0) {
9400 o.colors.map(function(c){
9401
9402 c = lumise.tools.svg.rgb2hex(c);
9403
9404 if (colors.indexOf(c) === -1) {
9405 colors.push(c);
9406 bg.push(c);
9407 }
9408 if (scolors.indexOf(c) === -1)
9409 scolors.push(c);
9410 });
9411 }
9412 //stage colors
9413 if (o.stroke !== '' && o.type != 'svg') {
9414
9415 c = lumise.tools.svg.rgb2hex(o.stroke);
9416
9417 if(colors.indexOf(o.stroke) === -1){
9418 colors.push(o.stroke);
9419 bg.push(c);
9420 }
9421 if(scolors.indexOf(c) === -1)
9422 scolors.push(c);
9423
9424 };
9425
9426 if (o.fill !== '' && o.type != 'svg') {
9427
9428 c = lumise.tools.svg.rgb2hex(o.fill);
9429
9430 if(colors.indexOf(c) === -1){
9431 colors.push(c);
9432 bg.push(c);
9433 }
9434 if(scolors.indexOf(c) === -1)
9435 scolors.push(c);
9436 };
9437
9438 // Do not count printing for template's objects
9439 if (
9440 o.template !== undefined && o.template.length != 0
9441 ) {
9442 o.price = 0;
9443 };
9444
9445 if (typeof o.resource !== 'undefined') {
9446 switch (o.resource) {
9447 case 'cliparts':
9448 clipart++;
9449 break;
9450 case 'shape':
9451 vector++;
9452 break;
9453 case 'svg':
9454 vector++;
9455 break;
9456 default:
9457
9458 }
9459 } else {
9460 switch (o.type) {
9461 case 'image':
9462 case 'image-fx':
9463 case 'qrcode':
9464 image++;
9465 break;
9466
9467 case 'path':
9468 vector++;
9469 break;
9470 case 'svg':
9471 vector++;
9472 break;
9473 case 'i-text':
9474 case 'text-fx':
9475 case 'curvedText':
9476 text++;
9477 break;
9478 default:
9479
9480 }
9481 }
9482
9483 }
9484 });
9485 };
9486
9487 states[s] = {
9488 colors: scolors,
9489 images: image,
9490 vector: vector,
9491 clipart: clipart,
9492 text: text
9493 }
9494
9495 });
9496
9497 if (bg.length > 6) {
9498 mo = (colors.length-6)+'+';
9499 bg = bg.splice(bg.length - 6);
9500 } else mo = '';
9501
9502 $('#lumise-count-colors i').html(mo).css({background: 'linear-gradient(to right, '+bg.join(', ')+')'}).attr({title: 'Used '+bg.length+' colors'});
9503
9504 lumise.actions.do('updated', states);
9505
9506 lumise.get.el('status').hide();
9507 lumise.ops.before_unload = null;
9508
9509 lumise.render.stage_nav();
9510
9511 }, 250);
9512
9513 //return states;
9514
9515 },
9516
9517 create_canvas : function(stage, img) {
9518
9519 var main = lumise.get.el('main'),
9520 name = stage.name,
9521 mw = main.width()-(lumise.ops.window_width < 1025 ? 0 : 20),
9522 mh = main.height()-(lumise.ops.window_width < 1025 ? -40 : 10);
9523
9524 //if (mw < img.naturalWidth)
9525 // mw = img.naturalWidth;
9526
9527 main.append(
9528 '<div id="lumise-stage-'+name+'" class="lumise-stage canvas-wrapper" style="height: '+mh+'px;">\
9529 <canvas id="lumise-stage-'+name+'-canvas" width="'+mw+'" height="'+mh+'"></canvas>\
9530 <div class="lumise-snap-line-x"></div>\
9531 <div class="lumise-snap-line-y"></div>\
9532 </div>'
9533 );
9534
9535 stage.canvas = new fabric.Canvas('lumise-stage-'+name+'-canvas', {
9536 preserveObjectStacking: true,
9537 controlsAboveOverlay: true
9538 });
9539
9540 stage.product = {};
9541 stage.stack = {
9542 data : [],
9543 state : true,
9544 index : 0
9545 };
9546
9547 var wrp = lumise.func.q('#lumise-stage-'+name);
9548
9549 stage.lineX = $('#lumise-stage-'+name+' .lumise-snap-line-x');
9550 stage.lineY = $('#lumise-stage-'+name+' .lumise-snap-line-y');
9551
9552 [
9553 ['dragover', function(e){
9554
9555 e.preventDefault();
9556
9557 if (!lumise.ops.drag_start || !lumise.ops.drag_start.getAttribute('data-ops'))
9558 return;
9559
9560 var cur = stage.limit_zone.visible,
9561 zoom = lumise.stage().canvas.getZoom(),
9562 disc = lumise.ops.drag_start.distance,
9563 view = lumise.stage().canvas.viewportTransform,
9564 limit = {
9565 l : (stage.limit_zone.left*zoom)+view[4],
9566 t : (stage.limit_zone.top*zoom)+view[5],
9567 w : stage.limit_zone.width*zoom,
9568 h : stage.limit_zone.height*zoom
9569 };
9570
9571 if (
9572 (e.layerX - disc.x + (disc.w/2) > limit.l) &&
9573 (e.layerX - disc.x - (disc.w/2) < limit.l+limit.w) &&
9574 (e.layerY - disc.y + (disc.h/2) > limit.t) &&
9575 (e.layerY - disc.y - (disc.h/2) < limit.t+limit.h)
9576 ) {
9577 stage.limit_zone.set('visible', true);
9578 }else{
9579 stage.limit_zone.set('visible', false);
9580 }
9581
9582 if (cur != stage.limit_zone.visible)
9583 stage.canvas.renderAll();
9584
9585 }],
9586 ['dragleave', function(e){
9587
9588 e.preventDefault();
9589
9590 if (stage.limit_zone.visible === true) {
9591 stage.limit_zone.set('visible', false);
9592 stage.canvas.renderAll();
9593 }
9594
9595 }],
9596 ['drop', function(e){
9597
9598 e.preventDefault();
9599
9600 if (!lumise.ops.drag_start || !lumise.ops.drag_start.getAttribute('data-ops') || stage.limit_zone.visible !== true)
9601 return;
9602
9603 var rect = this.getBoundingClientRect(),
9604 ops = JSON.parse(lumise.ops.drag_start.getAttribute('data-ops'));
9605
9606 var disc = lumise.ops.drag_start.distance,
9607 zoom = lumise.stage().canvas.getZoom(),
9608 view = lumise.stage().canvas.viewportTransform;
9609
9610 if (ops[0].type == 'shape')
9611 ops[0].url = 'data:image/svg+xml;base64,'+btoa(lumise.ops.drag_start.innerHTML.trim());
9612 else if (ops[0].url === undefined)
9613 ops[0].url = lumise.cliparts.storage[ops[0].id] || lumise.cliparts.uploads[ops[0].id];
9614
9615 if (ops[0].url && ops[0].url.indexOf('dumb-') === 0) {
9616 lumise.indexed.get(ops[0].url.split('dumb-')[1], 'dumb', function(res){
9617 if (res !== null) {
9618 lumise.cliparts.uploads[ops[0].id] = res[0];
9619 ops[0].url = res[0];
9620 lumise.func.preset_import(ops, {
9621 left: (((e.clientX - rect.left)/zoom) - disc.x)-(view[4]/zoom),
9622 top: (((e.clientY - rect.top)/zoom) - disc.y)-(view[5]/zoom)
9623 });
9624 delete res;
9625 }
9626 });
9627 }else{
9628 lumise.func.preset_import(ops, {
9629 left: (((e.clientX - rect.left)/zoom) - disc.x)-(view[4]/zoom),
9630 top: (((e.clientY - rect.top)/zoom) - disc.y)-(view[5]/zoom)
9631 });
9632 }
9633
9634 }],
9635 ['mousewheel', function(e){
9636
9637 var zoom = parseFloat(lumise.get.el('zoom').val());
9638
9639 if (e.shiftKey) {
9640
9641 zoom += e.wheelDelta*0.15;
9642
9643 if (zoom < 100)
9644 zoom = 100;
9645 else if (zoom > 250)
9646 zoom = 250;
9647
9648 lumise.get.el('zoom').val(zoom).trigger('input');
9649
9650 } else {
9651
9652 if (lumise.stage().canvas.isDrawingMode === true) {
9653
9654 var range = lumise.get.el('drawing-width'),
9655 val = parseFloat(range.val())+(e.wheelDelta*0.1);
9656
9657 range.val(val).trigger('input');
9658
9659 } else {
9660
9661 var rel = {
9662 x: 0,
9663 y: (e.wheelDeltaY !== undefined ? e.wheelDeltaY*0.25 : e.wheelDelta*0.25)
9664 },
9665 canvas = lumise.stage().canvas,
9666 view = canvas.viewportTransform;
9667
9668 if (
9669 (view[5] > 0 && rel.y > 0) ||
9670 (view[5] < -((canvas.height*view[0]) - canvas.height) && rel.y < 0) ||
9671 zoom === 100
9672 ) rel.y = 0;
9673
9674 canvas.relativePan(rel);
9675 return true;
9676 }
9677
9678 e.preventDefault();
9679
9680 }
9681
9682
9683 }],
9684 ['dblclick', function(e) {
9685 var actv = stage.canvas.getActiveObject();
9686 if (actv && actv.type == 'i-text')
9687 lumise.get.el('text-tools li[data-tool="spacing"]').trigger('click').find('textarea.lumise-edit-text').focus();
9688 }]
9689 ].map(function(ev){
9690 wrp.addEventListener(ev[0], ev[1], false);
9691 });
9692
9693 stage.canvas.backgroundColor = '#ebeced';
9694
9695 stage.canvas.on(lumise.objects.events);
9696
9697 /*
9698 * Add product base
9699 */
9700
9701 var product = new fabric.Image(img);
9702
9703 stage.product = product;
9704
9705 lumise.f(false);
9706
9707 if (product.width > mw) {
9708 product.height = product.height*(mw/product.width);
9709 product.width = mw;
9710 };
9711
9712 if (product.height > mh) {
9713 product.width = product.width*(mh/product.height);
9714 product.height = mh;
9715 };
9716
9717
9718
9719 var ph = stage.canvas.height*0.9,
9720 pw = (product.width*(stage.canvas.height/product.height))*0.9;
9721
9722 if (product.height <= stage.canvas.height*0.9) {
9723 ph = product.height;
9724 pw = product.width;
9725 /*ph = stage.canvas.height*0.9;
9726 pw = (product.width/product.height)*ph;
9727 if (pw > mw) {
9728 ph = (mw/pw)*ph;
9729 pw = mw;
9730 }*/
9731 };
9732
9733 product.set({
9734 left: stage.canvas.width/2,
9735 top: (stage.canvas.height-40)/2,
9736 width: pw,
9737 height: ph,
9738 selectable: false,
9739 evented: false,
9740 });
9741
9742 /*
9743 * Add product color
9744 */
9745
9746 var color = lumise.get.color();
9747
9748 stage.productColor = new fabric.Rect({
9749 width: pw-2,
9750 height: ph-2,
9751 left: (stage.canvas.width/2),
9752 top: ((stage.canvas.height-40)/2),
9753 fill: color,
9754 /*stroke: '#ebeced',
9755 strokeWidth: 2,*/
9756 selectable: false,
9757 evented: false,
9758 stroke: 'transparent'
9759 });
9760
9761 var ez_ratio = stage.product_width ? pw/stage.product_width : 1,
9762 editing = {
9763 width: stage.edit_zone.width*ez_ratio,
9764 height: stage.edit_zone.height*ez_ratio,
9765 top: (stage.edit_zone.top*ez_ratio)+(((stage.canvas.height-40)/2)-(ph/2)),
9766 left: stage.edit_zone.left*ez_ratio
9767 };
9768
9769 var radius = (stage.edit_zone.radius !== undefined && stage.edit_zone.radius !== '') ?
9770 stage.edit_zone.radius : 0;
9771
9772 stage.limit_zone = new fabric.Rect({
9773 fill: 'transparent',
9774 left: ((stage.canvas.width/2)+editing.left) - (editing.width/2),
9775 top: (((ph/2)+editing.top) - (editing.height/2)),
9776 height: editing.height,
9777 width: editing.width,
9778 originX: 'left',
9779 originY: 'top',
9780 stroke: lumise.func.invert(color),
9781 strokeDashArray: [5, 5],
9782 selectable: false,
9783 evented: false,
9784 visible: false,
9785 radius: radius,
9786 rx: radius,
9787 ry: radius,
9788 });
9789
9790 if (stage.overlay) {
9791 stage.canvas.setOverlayImage(product);
9792 stage.canvas.add(stage.productColor, stage.limit_zone);
9793 } else {
9794 stage.canvas.add(stage.productColor, product, stage.limit_zone);
9795 };
9796
9797 if ($(window).width() > 1024) {
9798
9799 var zoom = 1;
9800
9801 if (ph < mh) {
9802 zoom = (mh/ph);
9803 if (zoom*pw > mw)
9804 zoom = (mw/pw);
9805 };
9806
9807 if (pw < mw && zoom < mw/pw) {
9808 zoom = (mw/pw);
9809 if (zoom*ph > mh)
9810 zoom = (mh/ph);
9811 };
9812
9813 if (zoom*98 > 100) {
9814 $('#lumise-zoom').
9815 val(zoom*98).
9816 attr({'data-value': parseInt(zoom*98)+'%'}).
9817 parent().
9818 attr({'data-value': parseInt(zoom*98)+'%'});
9819
9820 stage.canvas.zoomToPoint(
9821 new fabric.Point(
9822 (mw/2),
9823 ((mh-40)/2)
9824 ),
9825 zoom*0.98
9826 )
9827 }
9828
9829 };
9830
9831 lumise.mobile(true);
9832
9833 },
9834
9835 stage_nav : function(name, ty) {
9836
9837 var nav = lumise.get.el('stage-nav'),
9838 ww = lumise.ops.window_width;
9839
9840 if (name !== undefined) {
9841 nav.attr({'data-name': name});
9842 if (ty !== undefined)
9843 nav.attr({'data-pos': 'right', 'data-ty': ty});
9844 } else name = nav.attr('data-name');
9845
9846 nav.find('li.active').removeClass('active');
9847 nav.find('li[data-stage="'+name+'"]').addClass('active');
9848
9849 var nex = nav.find('li.active').nextAll('li[data-stage]'),
9850 pre = nav.find('li.active').prevAll('li[data-stage]');
9851
9852 if (nex.length > 0)
9853 nav.find('li[data-nav="next"]').removeClass('disbl').find('span').html(
9854 nex.first().find('p, span').text()
9855 );
9856 else nav.find('li[data-nav="next"]').addClass('disbl');
9857
9858 if (pre.length > 0)
9859 nav.find('li[data-nav="prev"]').removeClass('disbl').find('span').html(
9860 pre.first().find('p, span').text()
9861 );
9862 else nav.find('li[data-nav="prev"]').addClass('disbl');
9863
9864 },
9865
9866 process_variations : function(values, el) {
9867
9868 var stages = lumise.ops.product_data.stages,
9869 vari_data = {
9870 name: lumise.ops.product_data.name,
9871 description: lumise.ops.product_data.description,
9872 price: lumise.ops.product_data.price,
9873 printings: $.extend(true, [], lumise.ops.product_data.printings),
9874 attributes: $.extend(true, {}, lumise.ops.product_data.attributes),
9875 stages: $.extend(true, {}, stages.stages ? stages.stages : stages),
9876 printing: null // active print, if not the first will be actived
9877 };
9878
9879 vari_data.variation = null;
9880
9881 // Set default form values
9882 if (values !== null && typeof values == 'object') {
9883 Object.keys(values).map(function(k) {
9884 if (values[k] !== undefined && typeof values[k].trim == 'function')
9885 values[k] = values[k].trim();
9886 if (vari_data.attributes[k] !== undefined) {
9887 vari_data.attributes[k].value = values[k];
9888 } else if (k == 'printing') {
9889 vari_data.printing = values[k];
9890 }
9891 });
9892 }
9893 // if there are no variations
9894 if (
9895 typeof lumise.data.variations != 'object' ||
9896 lumise.data.variations.variations === undefined ||
9897 Object.keys(lumise.data.variations.variations).length === 0
9898 )
9899 return vari_data;
9900
9901 // Get matched variation
9902
9903 var obj = null,
9904 varis = lumise.data.variations;
9905
9906 // Keep options of current trigger element
9907
9908 varis.attrs.map(function(a) {
9909 vari_data.attributes[a].allows = [];
9910 if (el !== null && el !== undefined && a == el.name) {
9911 vari_data.attributes[a].allows = lumise.ops.product_data.attributes[a].allows;
9912 vari_data.attributes[a].value = values[el.name];
9913 }
9914 });
9915
9916 // Only show options of other attributes match with trigger_id
9917
9918 Object.keys(varis.variations).map(function(v) {
9919
9920 var valid = true;
9921
9922 Object.keys(varis.variations[v].conditions).map(function(c) {
9923
9924 // Collect all match option value of OTHER attributes
9925
9926 if (vari_data.attributes[c].allows === undefined)
9927 vari_data.attributes[c].allows = [''];
9928
9929 if (
9930 el !== null &&
9931 el !== undefined &&
9932 c != el.name &&
9933 (
9934 varis.variations[v].conditions[el.name] == '' || // condition attr c is any
9935 values[el.name] == '' || // trigger is any
9936 varis.variations[v].conditions[el.name] == values[el.name]
9937 // condition attr c match with trigger
9938 ) &&
9939 vari_data.attributes[c].allows.indexOf(varis.variations[v].conditions[c]) === -1
9940 ) {
9941
9942 if (varis.variations[v].conditions[c] !== '')
9943 vari_data.attributes[c].allows.push(varis.variations[v].conditions[c]);
9944 else {
9945 // if condition of variation is any, set allow all options of attr
9946 vari_data.attributes[c].values.split("\n").map(function(g) {
9947 g = g.split('|');
9948 if (vari_data.attributes[c].allows.indexOf(g[0].trim()) === -1)
9949 vari_data.attributes[c].allows.push(g[0].trim());
9950 });
9951 }
9952
9953 if (values[c] == varis.variations[v].conditions[c])
9954 vari_data.attributes[c].value = values[c];
9955 } else if (el === null || el === undefined) {
9956 if (varis.variations[v].conditions[c] == '') {
9957 vari_data.attributes[c].allows = [''];
9958 vari_data.attributes[c].values.split("\n").map(function(v) {
9959 vari_data.attributes[c].allows.push(v.split('|')[0].trim());
9960 });
9961 } else if (vari_data.attributes[c].allows.indexOf(varis.variations[v].conditions[c]) === -1)
9962 vari_data.attributes[c].allows.push(varis.variations[v].conditions[c]);
9963 }
9964
9965 // Check valid variation
9966
9967 if (
9968 varis.variations[v].conditions[c] !== '' &&
9969 (
9970 values[c] === undefined ||
9971 varis.variations[v].conditions[c] != values[c]
9972 )
9973 ) valid = false;
9974 });
9975
9976 // Valid first variation
9977
9978 if (valid && obj === null) {
9979 obj = varis.variations[v];
9980 obj.id = v;
9981 }
9982
9983 });
9984
9985 // Found a variation matchs with attribute values selected
9986
9987 if (obj !== null) {
9988
9989 ['price', 'sku', 'description', 'minqty', 'maxqty'].map(function(p) {
9990 if (obj[p] !== undefined && obj[p] !== null && obj[p] !== '')
9991 vari_data[p] = obj[p];
9992 });
9993
9994 if (
9995 obj['cfgprinting'] === true &&
9996 obj['printings'] !== undefined &&
9997 obj['printings'] !== null &&
9998 obj['printings'] !== ''
9999 ) {
10000 obj['printings'].map(function(p) {
10001 if (p['calculate'] && typeof p['calculate'] == 'string')
10002 p['calculate'] = lumise.func.dejson(p['calculate']);
10003 });
10004 vari_data['printings'] = $.extend(true, [], obj['printings']);
10005 vari_data['printings_cfg'] = obj['printings_cfg'];
10006 vari_data['cfgprinting'] = true;
10007 };
10008
10009 if (
10010 obj['cfgstages'] === true &&
10011 obj['stages'] !== undefined &&
10012 obj['stages'] !== null &&
10013 obj['stages'] !== ''
10014 ) {
10015 vari_data['stages'] = $.extend(true, {}, obj['stages']);
10016 vari_data['cfgstages'] = true;
10017 };
10018
10019 vari_data.variation = obj.id;
10020
10021 }
10022
10023 return vari_data;
10024
10025 },
10026
10027 keep_current_designs : function(new_stages) {
10028
10029 if (lumise.ops.first_completed === false)
10030 return new_stages;
10031
10032 var curent_designs = lumise.func.export().stages;
10033
10034 Object.keys(curent_designs).map(function(c, i) {
10035 if (typeof curent_designs[c].data == 'string')
10036 curent_designs[c].data = JSON.parse(curent_designs[c].data);
10037 lumise.ops.session_designs[i] = curent_designs[c].data;
10038 });
10039
10040 Object.keys(new_stages).map(function(s, i) {
10041 if (lumise.ops.session_designs[i] !== undefined) {
10042 new_stages[s].data = lumise.ops.session_designs[i];
10043 }
10044 });
10045
10046 return new_stages;
10047
10048 },
10049
10050 preview_designs : function() {
10051
10052 lumise.get.el('stage-nav').addClass('stages-expand preview-designs')
10053 },
10054
10055 print_detail : function(id) {
10056
10057 var table_content = qkey = '', qkeys = [], qkeyind,
10058 print = lumise.data.printings.filter(function (print){
10059 if(print.id == id)
10060 return print;
10061 })[0];
10062
10063 lumise.tools.lightbox({
10064 content: '<div class="lumise_content lumise_wrapper_table">\
10065 <h3 class="title">'+lumise.i(67)+' ('+print.title+')</h3>\
10066 <div id="lumise-print-detail">\
10067 <i class="lumise-spinner x3 margin-2"></i>\
10068 </div>\
10069 </div>'
10070 });
10071
10072 $('#lumise-print-detail').html((print.description !== '' ? '<div>'+print.description+'</div><br>' : ''));
10073
10074 if (typeof print.calculate == 'string')
10075 print.calculate = lumise.func.dejson(print.calculate);
10076
10077 var tab_nav = '<ul class="lumise_tab_nav ' + ((print.calculate.multi) ? '': 'hidden') +'">';
10078
10079 if (print.calculate !== undefined && print.calculate.show_detail == '1') {
10080
10081 var j = 1,
10082 fi = Object.keys(print.calculate.values)[0];
10083
10084 for (var i in print.calculate.values){
10085
10086 if (print.calculate.multi) {
10087 tab_nav += '<li class=><a href="#" data-side="'+i+'">'+lumise.i('stage')+' '+(j++)+'</a></li>';
10088 table_content += '<div class="lumise_tab_content" data-lumise-tab="'+i+'">'
10089 };
10090
10091 table_content += '<table>\
10092 <thead>\
10093 <tr>\
10094 <th>'+lumise.i(66)+'</th>';
10095
10096 for (var r in
10097 print.calculate.values[fi][Object.keys(print.calculate.values[fi])[0]]
10098 ) {
10099 table_content += '<th>'+decodeURIComponent(r)+'</th>';
10100 };
10101
10102 table_content += '</tr></thead><tbody>';
10103
10104 qkeys = Object.keys(print.calculate.values[i]);
10105
10106 for (var r in print.calculate.values[i]){
10107 qkeyind = qkeys.indexOf(r);
10108
10109 qkey = (typeof qkeys[qkeyind-1] !== 'undefined') ?
10110 ((r.indexOf('>') > -1)? r :
10111 (parseInt(qkeys[qkeyind-1]) + 1) + ' - ' + r) :
10112 '0' + ' - ' +r;
10113
10114 table_content += '<tr><td>'+qkey+'</td>';
10115
10116 for (var td in print.calculate.values[i][r]) {
10117 table_content += '<td>' +
10118 ((print.calculate.values[i][r][td]*1>0) ?
10119 lumise.func.price(print.calculate.values[i][r][td]) :
10120 lumise.i(100))+ '</td>';
10121 };
10122 table_content += '</tr>';
10123 };
10124
10125 table_content += '\
10126 </tbody>\
10127 </table>';
10128
10129 if (print.calculate.multi)
10130 table_content += '</div>';
10131
10132 };
10133
10134 tab_nav += '</ul>';
10135
10136 var elm = $('#lumise-print-detail');
10137
10138 elm.append(tab_nav+table_content);
10139
10140 lumise.trigger({
10141 el : elm,
10142 events : {
10143 '.lumise_tab_nav a:click' : 'active_tab'
10144 },
10145 active_tab : function (e){
10146
10147 e.preventDefault();
10148
10149 elm.find('li').removeClass('active');
10150 elm.find('[data-lumise-tab]').removeClass('active');
10151 $(this).closest('li').addClass('active');
10152 elm.find('[data-lumise-tab=' +$(this).
10153 addClass('active').data('side')+ ']').
10154 addClass('active');
10155 }
10156 });
10157
10158 elm.find('.lumise_tab_nav a:first').trigger('click');
10159
10160 }
10161
10162 },
10163
10164 edit_design : function(ops) {
10165
10166 lumise.tools.save();
10167 lumise.func.set_url('my_design', ops.id);
10168
10169 lumise.func.load_product({
10170 id: ops.product,
10171 cms: ops.product_cms,
10172 printing: ops.printing,
10173 options: ops.options,
10174 template: ops.template,
10175 stages: ops.stages,
10176 callback: function(res) {
10177
10178 if (res.id === undefined) {
10179 lumise.f(false);
10180 lumise.func.notice('ERROR_LOAD_PRODUCT', 'error', 3500);
10181 return;
10182 } else {
10183
10184 lumise.get.el('general-status').html(
10185 '<span>\
10186 <text>\
10187 <i class="lumisex-android-alert"></i> '+
10188 lumise.i(186)+
10189 ' <strong>#'+ops.id+'</strong></text>\
10190 <a href="#cancel-design" data-btn="cancel" data-func="cancel-design">\
10191 '+lumise.i(187)+'\
10192 </a>\
10193 </span>'
10194 );
10195
10196 }
10197 }
10198 });
10199
10200 lumise.func.clear_url(['my_design']);
10201
10202 lumise.get.el('saved-designs').find('>li.editing').removeClass('editing');
10203 lumise.get.el('saved-designs').find('>li[data-id="'+ops.id+'"]').addClass('editing');
10204
10205 },
10206
10207 load_product : function(ops) {
10208
10209 lumise.f(lumise.i('loading'));
10210
10211 var product = null;
10212 donow = function(res) {
10213
10214 if (res === null || res === undefined) {
10215 lumise.f(false);
10216 lumise.actions.do('noproduct');
10217 return;
10218 };
10219
10220 if (typeof res.variations == 'string' && res.variations !== '')
10221 res.variations = lumise.func.dejson(res.variations);
10222 else res.variations = {};
10223
10224 if (typeof res.attributes == 'string' && res.attributes !== '')
10225 res.attributes = lumise.func.dejson(res.attributes);
10226 else res.attributes = {};
10227
10228 if (typeof res.stages == 'string')
10229 res.stages = lumise.func.dejson(res.stages);
10230
10231 res.variations.default = ops.options;
10232
10233 if (ops.printing)
10234 res.variations.default.printing = ops.printing;
10235
10236 if (res.variations.variations) {
10237 Object.keys(res.variations.variations).map(function(v) {
10238 res.variations.variations[v].printings.map(function(p) {
10239 if (typeof p.calculate == 'string')
10240 p.calculate = lumise.func.dejson(p.calculate);
10241 })
10242 });
10243 };
10244
10245 if (typeof ops.template == 'object') {
10246 lumise.cart.template = ops.template.stages;
10247 lumise.cart.price.template = ops.template.price;
10248 res.template = ops.template;
10249 };
10250
10251 res.saved_stages = ops.stages;
10252
10253 lumise.render.product(res, function() {
10254 if (lumise.ops.first_completed !== true) {
10255 lumise.actions.do('first-completed');
10256 lumise.ops.first_completed = true;
10257 };
10258 lumise.func.update_state();
10259 });
10260
10261 if (typeof ops.callback == 'function')
10262 ops.callback(res);
10263
10264 };
10265
10266 if (
10267 lumise.ops.products !== undefined &&
10268 typeof lumise.ops.products.products == 'object'
10269 )
10270 product = lumise.ops.products.products.filter(function(p) {return p.id == ops.id;});
10271
10272 if (product !== null && product.length > 0)
10273 return donow(product[0]);
10274
10275 lumise.post({
10276 action: 'load_product',
10277 id: ops.id
10278 }, donow);
10279
10280 },
10281
10282 export : function(save, id, created) {
10283
10284 // Editing design before add to cart
10285 var data = {
10286 stages : {},
10287 type : lumise.data.type,
10288 extra : lumise.cart.price.extra,
10289 updated: new Date().getTime()/1000,
10290 name : lumise.get.el('product header name t').text().trim(),
10291 id: lumise.ops.product_data.id,
10292 system_version: lumise.data.version
10293 },
10294 thumbn = {
10295 screenshot: '',
10296 stages: 0,
10297 name: data.name,
10298 updated: data.updated,
10299 id: data.id,
10300 system_version: lumise.data.version
10301 };
10302
10303 if (created !== undefined) {
10304 data.created = created;
10305 thumbn.created = created;
10306 };
10307
10308 lumise.get.el('stage-nav').find('li[data-stage]').each(function(i){
10309
10310 var s = this.getAttribute('data-stage'),
10311 stage = lumise.data.stages[s];
10312
10313 if (!stage)
10314 return;
10315
10316 if (stage.canvas) {
10317
10318 var view_port = stage.canvas.viewportTransform;
10319
10320 stage.canvas.set('viewportTransform', [1, 0, 0, 1, 0, 0]);
10321
10322 data.stages[s] = {
10323 data : lumise.tools.export(stage),
10324 screenshot: lumise.tools.toImage({
10325 stage: stage,
10326 //is_bg: (save == 'cart' || save == 'share') ? 'full' : false,
10327 is_bg: 'full',
10328 multiplier: 1/window.devicePixelRatio
10329 }),
10330 edit_zone: stage.edit_zone,
10331 image: stage.image,
10332 overlay: stage.overlay,
10333 updated: data.updated,
10334 product_width: stage.product_width !== undefined ? stage.product_width : stage.product.width,
10335 product_height: stage.product_height !== undefined ? stage.product_height : stage.product.height,
10336 devicePixelRatio: window.devicePixelRatio
10337 };
10338
10339 lumise.data.stages[s].screenshot = data.stages[s].screenshot;
10340
10341 stage.canvas.set('viewportTransform', view_port);
10342 stage.canvas.renderAll();
10343
10344 }else {
10345
10346 data.stages[s] = {
10347 data : stage.data,
10348 screenshot: stage.screenshot,
10349 edit_zone: stage.edit_zone,
10350 image: stage.image,
10351 overlay: stage.overlay,
10352 updated: data.updated
10353 };
10354
10355 };
10356
10357 thumbn.stages++;
10358
10359 if (thumbn.screenshot === '')
10360 thumbn.screenshot = stage.screenshot;
10361
10362 });
10363
10364 if (
10365 lumise.ops.first_completed === true &&
10366 lumise.func.url_var('order_print', '') === '' &&
10367 (save === true || save == 'designs' || save == 'share' || typeof save == 'function')
10368 ) {
10369
10370 //store template info before save
10371 data['template'] = {
10372 'stages' : lumise.cart.template,
10373 'price' : lumise.cart.price.template
10374 };
10375
10376 if (lumise.func.url_var('cart', '') !== '') {
10377
10378 lumise.actions.do('cart-changed', data);
10379
10380 /*
10381 // Auto save design of cart item editting
10382 data.id = cart_id;
10383 lumise.indexed.save([data], 'cart');
10384 */
10385 }
10386 else if (save == 'share') {
10387 return data;
10388 }
10389 else if (typeof save == 'function') {
10390 save(data, thumbn);
10391 }
10392
10393 if (
10394 save == 'designs' || (
10395 lumise.ops.importing !== true &&
10396 lumise.func.url_var('my_design', '') !== ''
10397 )
10398 ) {
10399
10400 var design_id = lumise.func.url_var('my_design', ''),
10401 product_id = lumise.func.url_var('product', '');
10402 product_cms = lumise.func.url_var('product_cms', '');
10403
10404 if (design_id === '')
10405 design_id = new Date().getTime().toString(36).toUpperCase();
10406
10407 data.id = design_id;
10408
10409 thumbn = $.extend(true, thumbn, {
10410 id : design_id,
10411 product : product_id,
10412 product_cms : product_cms,
10413 product_cms : product_cms,
10414 printing : lumise.cart.printing.current,
10415 options: lumise.cart.data.options,
10416 template: {
10417 'stages' : lumise.cart.template,
10418 'price' : lumise.cart.price.template
10419 }
10420 });
10421
10422 try {
10423 lumise.indexed.save([thumbn, data], 'designs', function(){
10424 delete data;
10425 delete thumbn;
10426 lumise.actions.do('save-design', design_id);
10427 });
10428 }catch (ex){console.log(ex);}
10429
10430 delete lumise.ops.designs_loading;
10431 delete lumise.ops.designs_cursor;
10432
10433 }
10434
10435 delete data;
10436 delete thumbn;
10437
10438 };
10439
10440 return data;
10441
10442 },
10443
10444 set_url : function(name, val) {
10445
10446 var url = window.location.href;
10447
10448 url = url.split('#')[0].replace(/\,/g, '').split('?');
10449
10450 if (url[1]) {
10451
10452 var ur = {};
10453
10454 url[1].split('&').map(function(s){
10455 s = s.split('=');
10456 ur[s[0]] = s[1];
10457 });
10458
10459 url[1] = [];
10460
10461 if (val === null)
10462 delete ur[name];
10463 else ur[name] = val;
10464
10465 Object.keys(ur).map(function(s){
10466 url[1].push(s+'='+ur[s]);
10467 });
10468
10469 url = url[0]+'?'+url[1].join('&');
10470
10471 }else if(val !== null) url = url[0]+'?'+name+'='+val;
10472
10473
10474 window.history.pushState({}, "", url);
10475
10476 },
10477
10478 url_var : function(name, def) {
10479
10480 var url = window.location.href.split('#')[0].split('?'),
10481 result = def;
10482
10483 if (!url[1])
10484 return def;
10485
10486 url[1].split('&').map(function(pam){
10487 pam = pam.split('=');
10488 if (pam[0] == name)
10489 result = pam[1];
10490 });
10491
10492 return result;
10493
10494 },
10495
10496 date : function(f, t){
10497
10498 if (t === undefined || t === '')
10499 return '';
10500
10501 if (typeof t == 'string' && (t.indexOf('-') > -1 || t.indexOf(':') > -1))
10502 t = new Date(t);
10503 else if (t.toString().split('.')[0].length === 10)
10504 t = new Date(parseFloat(t)*1000);
10505 else t = new Date(parseFloat(t));
10506
10507 var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
10508 days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
10509 map = {
10510 't': (t.getMonth() < 10 ? '0' : '')+(t.getMonth()+1),
10511 'h': t.getHours(),
10512 'm': t.getMinutes(),
10513 'd': t.getDate(),
10514 'D': days[t.getDay()],
10515 'M': months[t.getMonth()],
10516 'y': t.getYear(),
10517 'Y': t.getFullYear(),
10518 };
10519 str = '';
10520
10521
10522 f.split('').map(function(s){
10523 str += map[s] ? map[s] : s;
10524 });
10525
10526 return str;
10527
10528 },
10529
10530 cart_thumbn : function(id) {
10531
10532 lumise.indexed.get(id, 'cart', function(res){
10533
10534 if (res === null || res === undefined)
10535 return;
10536
10537 var stage = res.stages[Object.keys(res.stages)[0]],
10538 ratio = 180/stage.product_height;
10539 img = '<img data-view="layer" style="height: 180px;width: '+(stage.product_width*ratio)+'px;" src="'+stage.screenshot+'" />';
10540
10541 $('div[data-design-layer="'+id+'"]').html(img);
10542
10543 });
10544 },
10545
10546 get_type : function(src) {
10547
10548 if (src.indexOf('data:image/jpeg') > -1)
10549 return 'jpeg';
10550 else if (src.indexOf('data:image/png') > -1)
10551 return 'png';
10552 else if (src.indexOf('data:image/svg') > -1)
10553 return 'svg';
10554 if (src.split('.').pop() == 'jpg')
10555 return 'jpeg';
10556 else if (src.split('.').pop() == 'png')
10557 return 'png';
10558 else if (src.split('.').pop() == 'svg')
10559 return 'svg';
10560
10561 return 'jpeg';
10562
10563 },
10564
10565 scale_designs : function(scale, pos) {
10566
10567 var stage = lumise.stage(),
10568 canvas = stage.canvas,
10569 objs = canvas.getObjects().filter(function(o) {
10570 if (o.evented === true) {
10571 o.set('active', true);
10572 return true;
10573 } else return false;
10574 });
10575
10576 if (objs.length === 0) {
10577 //e.preventDefault();
10578 return false;
10579 };
10580
10581 var group = new fabric.Group(objs, {
10582 scaleX: scale,
10583 scaleY: scale,
10584 originX: 'center',
10585 originY: 'center'
10586 });
10587
10588 if (pos !== undefined) {
10589 group.set({
10590 left: group.left-(pos.left !== undefined ? pos.left : 0),
10591 top: group.top-(pos.top !== undefined ? pos.top : 0)
10592 });
10593 } else {
10594
10595 var xl = (stage.limit_zone.width/2)+stage.limit_zone.left,
10596 yl = (stage.limit_zone.height/2)+stage.limit_zone.top;
10597
10598
10599 group.set({
10600 left: xl-((xl - group.left)*scale),
10601 top: yl-((yl - group.top)*scale)
10602 });
10603 };
10604
10605 canvas._activeObject = null;
10606
10607 canvas.setActiveGroup(group.setCoords()).renderAll();
10608
10609 lumise.tools.discard();
10610
10611 },
10612
10613 font_blob : function(obj) {
10614
10615 if (typeof obj.font == 'string' && obj.font.trim().indexOf('data:') === -1) {
10616
10617 if (obj.font.indexOf('http') === -1)
10618 obj.font = lumise.data.upload_url+obj.font;
10619
10620 lumise.func.get_blob(obj.font, function() {
10621 obj.set('font', this.result);
10622 lumise.tools.save();
10623 });
10624
10625 }
10626
10627 },
10628
10629 clear_url: function(ex) {
10630
10631 ['car', 'design_print', 'order_print', 'design', 'share', 'my_design'].map(function(i) {
10632 if (typeof ex !== 'object' || ex.indexOf(i) === -1)
10633 lumise.func.set_url(i, null);
10634 });
10635
10636 },
10637
10638 enjson : function(str) {
10639 return btoa(encodeURIComponent(JSON.stringify(str)));
10640 },
10641
10642 dejson : function(str) {
10643 return JSON.parse(decodeURIComponent(atob(str)));
10644 },
10645
10646 slugify : function(text) {
10647
10648 var a = 'àáạäâãấầẫậạăắằẵặèéëêếềễẹệìíĩïîịòóöôốồỗộọùúüûũụùúũđñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;',
10649 b = 'aaaaaaaaaaaaaaaaeeeeeeeeeiiiiiiooooooooouuuuuuuuudncsyoarsnpwgnmuxzh------',
10650 p = new RegExp(a.split('').join('|'), 'g');
10651
10652 return text.toString().toLowerCase()
10653 .replace(/\s+/g, '-')
10654 .replace(p, function(c) {return b.charAt(a.indexOf(c));})
10655 .replace(/&/g, '-and-')
10656 .replace(/[^\w\-]+/g, '')
10657 .replace(/\-\-+/g, '-')
10658 .replace(/^-+/, '')
10659 .replace(/-+$/, '');
10660
10661 },
10662
10663 pimage : function(stages) {
10664
10665 for(var s in stages) {
10666 if (!stages[s].image) {
10667 stages[s].image = (
10668 stages[s].source == 'raws' ?
10669 lumise.data.assets+'raws/' :
10670 lumise.data.upload_url
10671 )+stages[s].url;
10672 }
10673 }
10674
10675 return stages;
10676
10677 },
10678
10679 price : function(p) {
10680 let price = this.number_format(
10681 parseFloat(p*1),
10682 parseInt(lumise.data.number_decimals),
10683 lumise.data.decimal_separator,
10684 lumise.data.thousand_separator,
10685 );
10686 return (lumise.data.currency_position === '0' ? price+lumise.data.currency : lumise.data.currency+price);
10687 },
10688
10689 number_format: function (number, decimals, dec_point, thousands_sep) {
10690 // Strip all characters but numerical ones.
10691 number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
10692 var n = !isFinite(+number) ? 0 : +number,
10693 prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
10694 sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
10695 dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
10696 s = '',
10697 toFixedFix = function (n, prec) {
10698 var k = Math.pow(10, prec);
10699 return '' + Math.round(n * k) / k;
10700 };
10701 // Fix for IE parseFloat(0.55).toFixed(0) = 0;
10702 s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
10703 if (s[0].length > 3) {
10704 s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
10705 }
10706 if ((s[1] || '').length < prec) {
10707 s[1] = s[1] || '';
10708 s[1] += new Array(prec - s[1].length + 1).join('0');
10709 }
10710 return s.join(dec);
10711 },
10712
10713 distance : function(p1, p2) {
10714
10715 var lat1 = p1.x,
10716 lon1 = p1.y,
10717 lat2 = p2.x,
10718 lon2 = p2.y;
10719
10720 var deg2rad = function(deg) {
10721 return deg * (Math.PI/180);
10722 },
10723 dLat = deg2rad(lat2-lat1),
10724 dLon = deg2rad(lon2-lon1),
10725 a = Math.sin(dLat/2) * Math.sin(dLat/2) +
10726 Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
10727 Math.sin(dLon/2) * Math.sin(dLon/2);
10728
10729 return 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
10730
10731 },
10732
10733 confirm : function(opt) {
10734
10735 var html = '<div id="lumise-confirm"'+(opt.type !== undefined ? ' data-type="'+opt.type+'"' :'')+'>\
10736 <conf data-label="'+(opt.label ? opt.label : 'Confirmation')+'">\
10737 <p>'+opt.title+'</p>'+(opt.primary.text !== undefined ?
10738 '<button class="lumise-btn" data-btn="primary">'+
10739 opt.primary.text+(opt.primary.icon ? ' <i class="'+opt.primary.icon+'"></i>' : '')+
10740 '</button>' : '')+(opt.second.text !== undefined ?
10741 '<button class="lumise-btn white" data-btn="second">'+
10742 opt.second.text+(opt.second.icon ? ' <i class="'+opt.second.icon+'"></i>' : '')+
10743 '</button>' : '')+'\
10744 <i class="lumisex-android-close" data-btn="close"></i>\
10745 </conf>\
10746 </div>';
10747
10748 $('#lumise-confirm').remove();
10749 $('#LumiseDesign').append(html);
10750
10751 lumise.trigger({
10752 el: $('#lumise-confirm'),
10753 events: {
10754 '[data-btn="primary"]': function(e) {
10755 if (typeof opt.primary.callback != 'function' || opt.primary.callback(e) !== false)
10756 $('#lumise-confirm').remove();
10757 e.preventDefault();
10758 },
10759 '[data-btn="second"]': function(e) {
10760 if (typeof opt.second.callback == 'function')
10761 opt.second.callback(e);
10762 $('#lumise-confirm').remove();
10763 e.preventDefault();
10764 },
10765 '[data-btn="close"]': function(e) {
10766 $('#lumise-confirm').remove();
10767 e.preventDefault();
10768 }
10769 }
10770 });
10771 },
10772
10773 copy : function(text) {
10774
10775 var input = document.createElement('input');
10776 input.setAttribute('value', text.replace(/\&\;/g, '&'));
10777 document.body.appendChild(input);
10778 input.select();
10779 document.execCommand('copy');
10780 document.body.removeChild(input);
10781
10782 },
10783
10784 crop : function(ops) {
10785
10786 lumise.tools.lightbox({
10787 width: ops.width !== undefined ? ops.width : 500,
10788 content: '<div class="lumise_crop_dragArea">\
10789 <img src="'+ops.src+'" class="lumise_crop_img" style="max-height: 520px;" />\
10790 <div class="lumise_crop_selArea">\
10791 <div class="lumise_crop_marqueeHoriz lumise_crop_marqueeNorth"><span></span></div>\
10792 <div class="lumise_crop_marqueeVert lumise_crop_marqueeEast"><span></span></div>\
10793 <div class="lumise_crop_marqueeHoriz lumise_crop_marqueeSouth"><span></span></div>\
10794 <div class="lumise_crop_marqueeVert lumise_crop_marqueeWest"><span></span></div>\
10795 <div class="lumise_crop_handle lumise_crop_handleN" data-target="n"></div>\
10796 <div class="lumise_crop_handle lumise_crop_handleNE" data-target="ne"></div>\
10797 <div class="lumise_crop_handle lumise_crop_handleE" data-target="e"></div>\
10798 <div class="lumise_crop_handle lumise_crop_handleSE" data-target="se"></div>\
10799 <div class="lumise_crop_handle lumise_crop_handleS" data-target="s"></div>\
10800 <div class="lumise_crop_handle lumise_crop_handleSW" data-target="sw"></div>\
10801 <div class="lumise_crop_handle lumise_crop_handleW" data-target="w"></div>\
10802 <div class="lumise_crop_handle lumise_crop_handleNW" data-target="nw"></div>\
10803 <div class="lumise_crop_clickArea" style="background-image: url(\''+ops.src+'\');" data-target="visible" title="Enter to apply">\
10804 </div>\
10805 <div class="lumise_crop_info">0 x 0</div>\
10806 </div>\
10807 <div class="lumise_crop_clickArea_scan" data-target="darken"></div>\
10808 </div>\
10809 <ul class="lumise-crop-btns">\
10810 <li data-func="center">\
10811 <i class="lumisex-resize-arrow-down"></i>\
10812 <span>'+lumise.i('01')+'</span>\
10813 </li>\
10814 <li data-func="horizontal">\
10815 <i class="lumisex-move-horizontal"></i>\
10816 <span>'+lumise.i('02')+'</span>\
10817 </li>\
10818 <li data-func="vertical">\
10819 <i class="lumisex-move-vertical"></i>\
10820 <span>'+lumise.i('03')+'</span>\
10821 </li>\
10822 '+(ops.square !== false ? '<li data-func="square">\
10823 <i class="lumisex-android-checkbox-outline-blank"></i>\
10824 <span>'+lumise.i('04')+'</span>\
10825 </li>\
10826 ' : '')+(ops.dimension !== undefined ? '<li data-func="dimension" class="active">\
10827 <i class="lumisex-link"></i>\
10828 <span>'+lumise.i('168')+'</span>\
10829 </li>\
10830 ' : '')+'<li data-func="save">\
10831 '+lumise.i('save')+'\
10832 </li>\
10833 <li data-func="cancel">\
10834 '+lumise.i('cancel')+'\
10835 </li>\
10836 </ul>'
10837 });
10838
10839 var crop = $('#lumise-lightbox-content div.lumise_crop_dragArea');
10840
10841 crop.on('mousedown touchstart', function(e){
10842
10843 if (e.type == 'touchstart') {
10844 e.clientX = e.originalEvent.pageX;
10845 e.clientY = e.originalEvent.pageY;
10846 }
10847
10848 var wrp = $(this),
10849 lightbox = $('#lumise-lightbox-content'),
10850 img = wrp.find('>img').get(0),
10851 el = wrp.find('.lumise_crop_selArea'),
10852 i = wrp.find('.lumise_crop_info'),
10853 c = wrp.find('.lumise_crop_clickArea');
10854
10855 var ratio = img.width/img.naturalWidth,
10856 target = e.target.getAttribute('data-target'),
10857 square = lightbox.find('li[data-func="square"]').hasClass('active'),
10858 lock_dimension = lightbox.find('li[data-func="dimension"]').hasClass('active'),
10859 dimension = ops.dimension !== undefined ? ops.dimension : 0; // width:height
10860
10861 if (square && dimension === 0)
10862 dimension = 1;
10863
10864 if (
10865 lightbox.find('li[data-func="dimension"]').length > 0 &&
10866 !lock_dimension
10867 ) dimension = 0;
10868
10869 crop.attr({'data-dimension': dimension});
10870
10871 var _el = el.get(0),
10872 _o = {
10873 t: _el.offsetTop,
10874 l: _el.offsetLeft,
10875 h: _el.offsetHeight,
10876 w: _el.offsetWidth,
10877 ph: wrp.get(0).offsetHeight,
10878 pw: wrp.get(0).offsetWidth,
10879 pl: wrp.get(0).offsetLeft,
10880 pt: wrp.get(0).offsetTop,
10881 clientX: e.clientX,
10882 clientY: e.clientY
10883 };
10884
10885 var dark_zone = function() {
10886
10887 var o = {
10888 t: _el.offsetTop,
10889 l: _el.offsetLeft,
10890 h: _el.offsetHeight,
10891 w: _el.offsetWidth
10892 };
10893
10894 c.css({
10895 backgroundPosition: ((-o.l)+'px '+(-o.t)+'px')
10896 });
10897
10898 i.html(Math.round(o.w/ratio)+' x '+Math.round(o.h/ratio));
10899
10900 };
10901
10902 if (target == 'darken') {
10903
10904 _o.l = e.clientX-$('#lumise-lightbox-body').get(0).offsetLeft + (_o.pw/2);
10905 _o.t = e.clientY-$('#lumise-lightbox-body').get(0).offsetTop + (_o.ph/2) + 23;
10906
10907 el.css({
10908 left: _o.l+'px',
10909 top: _o.t+'px',
10910 width: '0px',
10911 height: '0px',
10912 });
10913 }
10914
10915 dark_zone();
10916
10917 $(this).on('mousemove touchmove', function(e){
10918
10919 if (!target)
10920 return true;
10921
10922 if (e.type == 'touchmove') {
10923 e.clientX = e.originalEvent.pageX;
10924 e.clientY = e.originalEvent.pageY;
10925 }
10926
10927 var _l = _o.l + (e.clientX - _o.clientX),
10928 _t = _o.t + (e.clientY - _o.clientY),
10929 _w = _o.w + (e.clientX - _o.clientX),
10930 _h = _o.h + (e.clientY - _o.clientY);
10931
10932 if (target == 'visible') {
10933
10934 if (_l < 0){
10935 _l = 0;
10936 _o.clientX = e.clientX;
10937 _o.l = _l;
10938 }
10939 if (_t < 0){
10940 _t = 0;
10941 _o.clientY = e.clientY;
10942 _o.t = _t;
10943 }
10944 if (_l + _o.w > _o.pw){
10945 _l = _o.pw - _o.w;
10946 _o.clientX = e.clientX;
10947 _o.l = _l;
10948 }
10949 if (_t + _o.h > _o.ph){
10950 _t = _o.ph - _o.h;
10951 _o.clientY = e.clientY;
10952 _o.t = _t;
10953 }
10954
10955 el.css({left: _l+'px', top: _t+'px'});
10956
10957 dark_zone();
10958
10959 }else if (target == 'darken'){
10960
10961 _w = _w - _o.w;
10962 _h = _h - _o.h;
10963
10964 if (_w < 0) {
10965 _w = -_w;
10966 el.css({left: _l+'px'});
10967 }
10968
10969 if (_h < 0) {
10970 _h = -_h;
10971 el.css({top: _t+'px'});
10972 }
10973
10974 if (dimension !== 0)
10975 _h = _w/dimension;
10976
10977 el.css({width: _w+'px', height: _h+'px'});
10978 dark_zone();
10979
10980 }else {
10981
10982 if (['nw', 'ne', 'n'].indexOf(target) > -1) {
10983 el.css({top: _t+'px'});
10984 _h = _o.h - (e.clientY - _o.clientY);
10985 }
10986
10987 if (['nw', 'sw', 'w'].indexOf(target) > -1) {
10988 el.css({left: _l+'px'});
10989 _w = _o.w - (e.clientX - _o.clientX);
10990 }
10991
10992 if (['w', 'e', 'nw', 'ne', 'se', 'sw'].indexOf(target) > -1) {
10993 el.css({width: _w+'px'});
10994 if (dimension !== 0)
10995 el.css({height: (_w/dimension)+'px'});
10996 }
10997
10998 if (['n', 's', 'nw', 'ne', 'se', 'sw'].indexOf(target) > -1) {
10999 el.css({height: _h+'px'});
11000 if (dimension !== 0)
11001 el.css({width: (_h*dimension)+'px'});
11002 }
11003
11004 dark_zone();
11005
11006 }
11007
11008 e.preventDefault();
11009
11010 });
11011
11012 });
11013
11014 crop.find('img.lumise_crop_img').on('load', function(){
11015
11016 var s = lumise.get.stage(), lb = $('#lumise-lightbox-content'), p;
11017
11018 if (!s.active)
11019 return;
11020
11021 if (!s.active.fx || !s.active.fx.crop) {
11022 p = {
11023 width: Math.round(this.offsetWidth*0.8)+'px',
11024 height: Math.round(this.offsetHeight*0.8)+'px',
11025 left: Math.round(this.offsetWidth*0.1)+'px',
11026 top: Math.round(this.offsetHeight*0.1)+'px',
11027 }
11028 } else {
11029 p = {
11030 width: (this.offsetWidth*s.active.fx.crop.width)+'px',
11031 height: (this.offsetHeight*s.active.fx.crop.height)+'px',
11032 left: (this.offsetWidth*s.active.fx.crop.left)+'px',
11033 top: (this.offsetHeight*s.active.fx.crop.top)+'px',
11034 }
11035 };
11036
11037 if (ops.width === undefined && this.offsetWidth < 500)
11038 lb.css({'min-width': this.offsetWidth});
11039
11040 lb.find('div.lumise_crop_selArea').css(p);
11041 lb.find('div.lumise_crop_dragArea').trigger('mousedown touchstart').off('mousemove');
11042 lb.find('div.lumise_crop_clickArea').css({
11043 backgroundSize: this.offsetWidth+'px '+this.offsetHeight+'px',
11044 backgroundPosition: '-'+p.left+' -'+p.top,
11045 opacity: 1
11046 });
11047
11048 crop.trigger('mousedown').off('mousemove touchmove');
11049
11050 if (typeof ops.load == 'function')
11051 ops.load(this, crop);
11052
11053 });
11054
11055 $('#lumise-lightbox-content .lumise-crop-btns li[data-func]').on('click', function(e){
11056
11057 var func = this.getAttribute('data-func'),
11058 el = crop.find('.lumise_crop_selArea');
11059
11060 switch (func) {
11061 case 'square' :
11062
11063 if ($(this).hasClass('active'))
11064 return $(this).removeClass('active');
11065 else $(this).addClass('active');
11066
11067 if (crop.width() > el.height())
11068 el.css({width: el.height()+'px'});
11069 else if (crop.height() > el.width())
11070 el.css({height: el.width()+'px'});
11071
11072 break;
11073 case 'dimension' :
11074
11075 if ($(this).hasClass('active'))
11076 return $(this).removeClass('active');
11077 else $(this).addClass('active');
11078
11079 break;
11080 case 'center' :
11081 el.css({top: ((crop.height()/2)-(el.height()/2))+'px', left: ((crop.width()/2)-(el.width()/2))+'px'});
11082 break;
11083 case 'horizontal' :
11084 el.css({left: ((crop.width()/2)-(el.width()/2))+'px'});
11085 break;
11086 case 'vertical' :
11087 el.css({top: ((crop.height()/2)-(el.height()/2))+'px'});
11088 break;
11089 case 'save':
11090
11091 if (typeof ops.save == 'function')
11092 ops.save(crop);
11093
11094 return $('#lumise-lightbox').remove();
11095
11096 break;
11097 case 'cancel':
11098 return $('#lumise-lightbox').remove();
11099 break;
11100 }
11101
11102 $('#lumise-lightbox-content div.lumise_crop_dragArea').
11103 trigger('mousedown').
11104 off('mousemove').
11105 off('touchmove');
11106
11107 });
11108
11109 if (!lumise.actions['globalMouseUp']) {
11110
11111 lumise.actions.add('globalMouseUp', function(e){
11112
11113 if (document.querySelectorAll('#lumise-lightbox-content .lumise_crop_dragArea').length > 0) {
11114
11115 var crop = $('#lumise-lightbox-content div.lumise_crop_dragArea'),
11116 area = crop.find('div.lumise_crop_selArea'),
11117 w = area.width(),
11118 h = area.height(),
11119 l = area.get(0).offsetLeft,
11120 t = area.get(0).offsetTop,
11121 pw = area.parent().width(),
11122 ph = area.parent().height();
11123
11124 if (
11125 w > pw ||
11126 w+l > pw
11127 ) {
11128 area.css({
11129 width: (pw-l)+'px',
11130 height: (h*((pw-l)/w))+'px'
11131 });
11132 } else if (
11133 h > ph ||
11134 h+t > ph
11135 ) {
11136 area.css({
11137 height: (ph-t)+'px',
11138 width: (w*((ph-t)/h))+'px'
11139 });
11140 };
11141
11142 crop.trigger('mousedown').off('mousemove').off('touchmove');
11143
11144 }
11145 });
11146 }
11147
11148 return crop;
11149
11150 },
11151
11152 q : function(s, m) {
11153 return (m ? document.querySelectorAll(s) : document.querySelector(s));
11154 }
11155
11156 },
11157
11158 render : {
11159
11160 colorPresets : function() {
11161
11162 var colors = lumise.data.colors,
11163 el = $('.lumise-color-presets'),
11164 lb;
11165
11166 if (colors !== undefined && colors.indexOf(':') > -1)
11167 colors = colors.split(':')[1].replace(/\|/g, ',');
11168
11169 if (lumise.data.enable_colors != '0' && localStorage.getItem('lumise_color_presets')) {
11170 colors = localStorage.getItem('lumise_color_presets').replace(/\|/g, ',');
11171 };
11172
11173 el.html('');
11174
11175 colors.split(',').map(function(c){
11176
11177 c = c.split('@'); lb = c[0];
11178
11179 if (c[1] !== undefined && c[1] !== '')
11180 lb = decodeURIComponent(c[1]).replace(/\"/g, '');
11181 else if (lumise.ops.color_maps[c[0]] !== undefined)
11182 lb = lumise.ops.color_maps[c[0]];
11183
11184 el.append('<li data-color="'+c[0]+'" title="'+lb+'" style="background:'+c[0]+'"></li>');
11185
11186 });
11187
11188 el.find('li').on('click', function(){
11189 var el = lumise.get.el($(this).closest('ul.lumise-color-presets').data('target'));
11190 el.val(this.getAttribute('data-color'));
11191 if (el.get(0).color && typeof el.get(0).color.fromString == 'function')
11192 el.get(0).color.fromString(this.getAttribute('data-color'));
11193
11194 });
11195 },
11196
11197 refresh_my_designs : function(){
11198
11199 var wrp = lumise.get.el('saved-designs'),
11200 items = wrp.find('>li'),
11201 k = lumise.get.el('designs-search').find('input').val(),
11202 timer = null;
11203
11204 if (items.length === 0)
11205 return lumise.get.el('saved-designs').trigger('scroll');
11206
11207 var cursor = items.last().data('id');
11208
11209 items.remove();
11210
11211 delete lumise.ops.designs_cursor;
11212 delete lumise.ops.myDesignThumbns;
11213
11214 lumise.indexed.list(function(data){
11215 lumise.ops.designs_cursor = data.id;
11216 lumise.render.my_designs(data);
11217 if (k !== '') {
11218 if (timer === null)
11219 return lumise.get.el('designs-search').find('input').trigger('input');
11220 clearTimeout(timer);
11221 timer = setTimeout(function(){
11222 lumise.get.el('designs-search').find('input').trigger('input');
11223 }, 500);
11224 }
11225 }, 'designs');
11226
11227 },
11228
11229 my_designs : function(design){
11230
11231 // delete old data not combine version 1.7.1+
11232 if (lumise.func.version_compare('1.7.1', design.system_version) > 0) {
11233 lumise.indexed.delete(design.id, 'designs');
11234 lumise.indexed.delete(design.id, 'dumb');
11235 return;
11236 };
11237
11238 design.screenshot = typeof design.screenshot == 'string' ?
11239 URL.createObjectURL(lumise.func.url2blob(design.screenshot)) :
11240 lumise.data.assets+'assets/images/default_category.jpg';
11241
11242 lumise.ops.my_designs[design.id] = design;
11243
11244 var el = lumise.get.el('saved-designs'),
11245 cur = lumise.func.url_var('my_design'),
11246 lis = '';
11247
11248 el.find('p.empty').remove();
11249
11250 if (el.find('>li[data-view="add"]').length === 0) {
11251 lis = '<li data-view="add" data-func="edit" data-id="new">\
11252 <b data-func="edit">+</b>\
11253 <span data-func="edit">'+lumise.i(107)+'</span>\
11254 </li>';
11255 };
11256
11257 lis += '<li data-id="'+design.id+'" class="bgcolorafter'+(cur == design.id ? ' editing' : '')+'">\
11258 <div data-func="edit" data-view="stages" title="'+lumise.i(48)+'">\
11259 <span data-func="edit">\
11260 <img data-func="edit" src="'+design.screenshot+'" height="150" />\
11261 </span>\
11262 </div>\
11263 <span data-view="name" data-id="'+design.id+'" data-func="name" title="'+lumise.i(52)+'" data-enter="blur" contenteditable>'+(design.name ? design.name : 'Untitled')+'</span>\
11264 <em data-view="date">'+lumise.func.date('h:m D d M, Y', design.updated*1000)+'</em>\
11265 <i class="lumisex-android-close" data-func="delete" title="'+lumise.i(51)+'"></i>\
11266 </li>';
11267
11268 el.append(lis);
11269
11270
11271 },
11272
11273 shapes : function(data) {
11274
11275 if (lumise.get.el('shapes').find('ul.lumise-list-items').length === 0) {
11276 lumise.get.el('shapes').html(
11277 '<p class="gray">'+lumise.i(158)+'</p>\
11278 <div class="lumise-tab-body">\
11279 <ul class="lumise-list-items"></ul>\
11280 </div>');
11281 }
11282
11283 if (data.length > 0) {
11284 var ul = lumise.get.el('shapes').find('ul.lumise-list-items');
11285 data.map(function(sh) {
11286 ul.append(
11287 '<li class="lumise-clipart" \
11288 data-ops="[{\
11289 "type": "shape",\
11290 "resource": "shape",\
11291 "width": 60,\
11292 "height": 60 ,\
11293 "name": "'+sh.name+'"\
11294 }]">'+sh.content+'</li>'
11295 );
11296 });
11297
11298 lumise.cliparts.add_events();
11299
11300 }else html += '<h3>No item found</h3>';
11301
11302 },
11303
11304 fonts : function(fonts){
11305
11306 var uri = '//fonts.googleapis.com/css?family=',
11307 txt = '',
11308 id = '',
11309 active = '',
11310 list = '';
11311
11312 if (fonts) {
11313 localStorage.setItem('LUMISE_FONTS', JSON.stringify(fonts));
11314 }else{
11315 if (!localStorage.getItem('LUMISE_FONTS')) {
11316 localStorage.setItem('LUMISE_FONTS', typeof lumise.data.default_fonts == 'string' ? lumise.data.default_fonts : JSON.stringify(lumise.data.default_fonts));
11317 }
11318 fonts = JSON.parse(localStorage.getItem('LUMISE_FONTS'));
11319 }
11320
11321 lumise.get.el('text-ext').html('');
11322
11323 try {
11324 active = lumise.stage().canvas.getActiveObject().fontFamily;
11325 }catch(ex){active = '';};
11326
11327 window.lumise_render_text = function(family, font) {
11328
11329 if ($('#lumise-text-ext li[data-family="'+family+'"]').length > 0)
11330 return;
11331
11332 var el = $('<span data-family="'+family+'" draggable="true" data-act="add" '+
11333 'data-ops=\'[{"type":"i-text", "fontSize": "30", "fontFamily": "'+family+'", '+
11334 (font !== undefined ? '"font": "'+font.replace('\\', '/')+'",': '')+
11335 '"textAlign": "center", "text": "'+family+'"}]\'>\
11336 <svg width="10" height="40" xmlns="http://www.w3.org/2000/svg" \
11337 xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">\
11338 <g>\
11339 <text fill="#FFFFFF" stroke="none" stroke-width="0" stroke-linecap="round" \
11340 stroke-linejoin="round" x="0" y="30" text-anchor="middle" \
11341 font-size="30px" font-family="'+family+'">\
11342 <tspan x="50%" dy="0">'+family+'</tspan>\
11343 </text>\
11344 </g>\
11345 </svg>\
11346 </span>');
11347
11348 $('#lumise-text-ext').append(el);
11349
11350 lumise.design.event_add_text(el.get(0));
11351
11352 lumise.func.getTextWidth({family: family, size: 30, text: family}, function(m){
11353 el.find('svg').attr({width: (m.width+18)});
11354 });
11355
11356 };
11357
11358 lumise_render_text('Arial');
11359
11360 if (lumise.data.fonts && lumise.data.fonts.length > 0) {
11361 lumise.data.fonts.map(function(font){
11362
11363 if (font.name.indexOf('"') > -1)
11364 return;
11365
11366 list += '<font'+(active == font.name ? ' class="selected"' : '')+
11367 ' data-family="'+font.name+'" \
11368 style="font-family: \''+font.name+'\'" \
11369 data-source="'+font.upload+'">'+font.name+
11370 '</font>';
11371
11372 lumise.tools.load_font(
11373 font.name,
11374 'url('+lumise.data.upload_url+font.upload.replace(/\\/g, '/')+')',
11375 function(family){
11376 lumise_render_text(family, font.upload);
11377 }
11378 );
11379
11380 });
11381 }
11382
11383 Object.keys(fonts).map(function(family){
11384
11385 txt = decodeURIComponent(family).replace(/ /g, '+')+':'+
11386 decodeURIComponent(fonts[family][1]);
11387
11388 list += '<link onload="lumise_render_text(\''+decodeURIComponent(family)+'\', \''+ encodeURIComponent(JSON.stringify(fonts[family]))+'\')" rel="stylesheet" href="'+(uri+txt)+'" \
11389 type="text/css" media="all" />\
11390 <font'+(active == decodeURIComponent(family) ? ' class="selected"' : '')+
11391 ' data-family="'+decodeURIComponent(family)+'" \
11392 style="font-family: \''+decodeURIComponent(family)+'\'">'+
11393 decodeURIComponent(family)+
11394 '</font>';
11395
11396 });
11397
11398 lumise.get.el('fonts').html(list);
11399
11400 },
11401
11402 stage_nav : function () {
11403
11404 var stages = lumise.data.stages,
11405 stage_nav = [],
11406 i = 1,
11407 first_stage = '',
11408 thumbn_url = '',
11409 total = stages['colors'] === undefined ? Object.keys(stages).length : Object.keys(stages).length-1;
11410
11411 if (typeof stages == 'object') {
11412
11413 Object.keys(stages).map(function(s){
11414
11415 if (s != 'colors') {
11416
11417 if (first_stage === '')
11418 first_stage = s;
11419
11420 if (stages[s].overlay !== false)
11421 stages[s].overlay = true;
11422
11423 stages[s].color = lumise.data._color;
11424
11425 if (
11426 (stages[s].url !== undefined && stages[s].url !== '') ||
11427 stages[s].image !== undefined
11428 ) {
11429
11430 if (!stages[s].image) {
11431 stages[s].image = (
11432 stages[s].source == 'raws' ?
11433 lumise.data.assets+'raws/' :
11434 lumise.data.upload_url
11435 )+stages[s].url;
11436 };
11437
11438 if (stages[s].screenshot === undefined) {
11439 if (
11440 stages[s].data !== undefined &&
11441 stages[s].data.screenshot !== undefined &&
11442 stages[s].data.screenshot !== ''
11443 )
11444 stages[s].screenshot = stages[s].data.screenshot;
11445 else if (
11446 stages[s].template !== undefined &&
11447 stages[s].template.screenshot !== undefined
11448 )
11449 stages[s].screenshot = stages[s].template.screenshot;
11450 else if (stages[s].image)
11451 stages[s].screenshot = stages[s].image;
11452 };
11453
11454 thumbn_url = '';
11455
11456 if (stages[s].screenshot !== undefined && stages[s].screenshot !== '')
11457 thumbn_url = stages[s].screenshot;
11458 else if (stages[s].thumbnail !== undefined && stages[s].thumbnail !== '')
11459 thumbn_url = lumise.data.upload_url+stages[s].thumbnail;
11460 else thumbn_url = stages[s].image;
11461
11462 label =(
11463 stages[s].label !== undefined &&
11464 stages[s].label !== ''
11465 ) ? stages[s].label : (lumise.i('_'+s) ? lumise.i('_'+s) : '');
11466
11467 stage_nav.push(
11468 '<li data-stage="'+s+'" data-tip="true"'+(s === lumise.current_stage ? ' class="active"' : '')+'>\
11469 <img style="background:'+lumise.get.color()+'" data-stage="'+s+'" src="'+thumbn_url+'" />\
11470 <span data-stage="'+s+'">'+(label !== '' ? label+' ('+i+'/'+total+')' : i+'/'+total)+'</span>\
11471 </li>'
11472 );
11473
11474 i++;
11475
11476 };
11477
11478 }
11479 });
11480
11481 if (stage_nav.length > 1) {
11482 stage_nav.unshift('<li data-nav="prev" data-tip="true"><i data-svg="prev"></i><span></span></li>');
11483 stage_nav.push('<li data-nav="next" data-tip="true"><i data-svg="next"></i><span></span></li>');
11484 };
11485
11486 stage_nav = lumise.apply_filters('stage_nav', stage_nav);
11487
11488 };
11489
11490 lumise.get.el('stage-nav').find('>ul').html(stage_nav.join('')).css({
11491 display: stage_nav.length > 1 ? 'inline-block' : 'none'
11492 });
11493
11494 $('#lumise-stage-nav ul').sortable({
11495 items: '>li[data-stage]',
11496 start: function(e, ui) {
11497 if (
11498 !ui.item.closest('#lumise-stage-nav').hasClass('stages-expand') ||
11499 ui.item.closest('#lumise-stage-nav').hasClass('preview-designs')
11500 ) {
11501 setTimeout(function(el) {
11502 try {el.sortable("cancel");}catch(ex){};
11503 }, 0, $(this));
11504 }
11505 },
11506 beforeStop: function() {
11507 var _stages = {};
11508 $('#lumise-stage-nav ul li[data-stage]').each(function() {
11509 _stages[this.getAttribute('data-stage')] = lumise.data.stages[this.getAttribute('data-stage')];
11510 });
11511 lumise.data.stages = _stages;
11512 lumise.render.stage_nav();
11513 }
11514 });
11515
11516 lumise.func.stage_nav();
11517
11518 lumise.actions.do('render_stage_nav');
11519
11520 return first_stage;
11521
11522 },
11523
11524 product : function(data, callback, designs) {
11525
11526 data = lumise.apply_filters('product', data);
11527 data = $.extend(true, {}, data);
11528
11529 if (data.variations !== undefined && data.variations !== '' && typeof data.variations == 'string')
11530 data.variations = lumise.func.dejson(data.variations);
11531
11532 if (data.attributes !== undefined && data.attributes !== '' && typeof data.attributes == 'string')
11533 data.attributes = lumise.func.dejson(data.attributes);
11534
11535 if (data.stages !== undefined && data.stages !== '' && typeof data.stages == 'string')
11536 data.stages = lumise.func.dejson(data.stages);
11537
11538 lumise.ops.product_data = data;
11539 lumise.data.printings_cfg = data.printings_cfg;
11540
11541 if (Object.keys(data.stages).length === 0) {
11542 lumise.f(false);
11543 $('#lumise-main').html(
11544 '<div id="lumise-no-product" style="display: block;">\
11545 <p>Error, no configuration for the product you choose</p>\
11546 <button class="lumise-btn" id="lumise-select-product">\
11547 <i class="lumisex-android-apps"></i> \
11548 Select product\
11549 </button>\
11550 </div>');
11551
11552 $('#lumise-select-product').on('click', lumise.render.products_list);
11553
11554 return lumise.func.notice('Error, no configuration for this product', 'error', 5000);
11555 }
11556
11557 var variations = data.variations !== undefined ? data.variations : {};
11558
11559 lumise.data.variations = variations;
11560 // Get data from variation if valid one of variations
11561 var vari_data = lumise.func.process_variations(variations.default, null);
11562
11563 lumise.data.variation = vari_data.variation;
11564 lumise.data.cfgstages = vari_data.cfgstages;
11565
11566 if (
11567 typeof data.templates == 'object' &&
11568 Object.keys(data.templates).length > 0
11569 ) {
11570 Object.keys(data.templates).map(function(s) {
11571 if (data.stages[s] !== undefined) {
11572 data.stages[s].template = data.templates[s];
11573 }
11574 });
11575 };
11576
11577 lumise.data.product = data.id;
11578
11579 if (data.saved_stages === undefined) {
11580 lumise.data.stages = lumise.func.keep_current_designs(vari_data.stages);
11581 } else {
11582 var _stages = {};
11583 Object.keys(data.saved_stages).map(function(s) {
11584 if (vari_data.stages[s] !== undefined) {
11585 _stages[s] = vari_data.stages[s];
11586 _stages[s].data = data.saved_stages[s].data;
11587 } else _stages[s] = data.saved_stages[s];
11588 });
11589 lumise.data.stages = _stages;
11590 };
11591
11592 lumise.data.cfgprinting = vari_data.cfgprinting;
11593
11594 if (vari_data.cfgprinting)
11595 lumise.data.printings_cfg = vari_data.printings_cfg;
11596
11597 lumise.data.printings = vari_data.printings;
11598
11599 lumise.func.set_url('product', data.id);
11600
11601 if (data.product !== undefined && data.product !== 0)
11602 lumise.func.set_url('product_cms', data.product);
11603
11604 lumise.get.el('main').find('.lumise-stage,#lumise-no-product').remove();
11605 lumise.get.el('navigations').find('ul[data-block] li.active').removeClass('active');
11606
11607 lumise.active_stage(lumise.render.stage_nav(), function(){
11608
11609 var stage = lumise.stage();
11610
11611 if (lumise.data.share !== undefined)
11612 {
11613
11614 lumise.f('Loading share data..');
11615
11616 $.get(lumise.data.upload_url+'shares/'+lumise.data.share+'.lumi', function(res) {
11617 try {
11618 res = JSON.parse(res);
11619 }catch(ex){
11620 res = {};
11621 };
11622 if (res.stages !== undefined) {
11623
11624 lumise.tools.imports(res, function(){
11625 if (lumise.ops.first_completed !== true) {
11626 lumise.actions.do('first-completed');
11627 lumise.ops.first_completed = true;
11628 };
11629 $('#lumise-general-status').html(
11630 '<span>\
11631 <i class="lumisex-android-checkmark-circle"></i> '+
11632 lumise.i(136)+
11633 '</span>'
11634 );
11635 });
11636
11637 delete res;
11638
11639 };
11640
11641 }).done(function() {}).fail(function(data, textStatus, xhr) {
11642 lumise.func.notice('SHARE LINK ERROR: '+data.status, 'error', 5000);
11643 }).always(function() {
11644 lumise.f(false);
11645 });
11646 delete lumise.data.share;
11647
11648 }
11649 else if (lumise.func.url_var('cart', '') !== '')
11650 {
11651
11652 lumise.f('Processing..');
11653
11654 lumise.indexed.get(lumise.func.url_var('cart'), 'cart', function(res){
11655
11656 if (res === undefined)
11657 return lumise.f(false);
11658
11659 if (res['template'] !== undefined){
11660 lumise.cart.template = res.template.stages;
11661 lumise.cart.price.template = res.template.price;
11662 }
11663
11664 if (res['extra'] !== undefined){
11665 lumise.cart.price.extra = res.extra;
11666 }
11667
11668 lumise.tools.imports(res, function(){
11669 if (lumise.ops.first_completed !== true) {
11670 lumise.actions.do('first-completed');
11671 lumise.ops.first_completed = true;
11672 };
11673 });
11674
11675 });
11676
11677 for (var s in lumise.data.stages) {
11678 if (lumise.data.stages[s].template !== undefined)
11679 lumise.data.stages[s].template.noload = true;
11680 };
11681
11682 return;
11683
11684 }
11685
11686 stage.screenshot = lumise.tools.toImage({
11687 stage: stage,
11688 is_bg: 'full',
11689 multiplier: 1/window.devicePixelRatio
11690 });
11691
11692 $('#lumise-stage-nav img[data-stage="'+lumise.current_stage+'"]').attr({
11693 src: stage.screenshot
11694 });
11695
11696 if (typeof callback == 'function')
11697 callback();
11698
11699 });
11700
11701 lumise.render.product_attrs(vari_data);
11702 lumise.actions.do('product', vari_data);
11703
11704 },
11705
11706 product_attrs : function(data) {
11707
11708 var p = lumise.get.el('product');
11709
11710 if (lumise.ops.doctitle === undefined)
11711 lumise.ops.doctitle = document.title;
11712
11713 document.title = data.name+' | '+lumise.ops.doctitle;
11714
11715 p.find('nav.lumise-add-cart-action').show();
11716 p.find('header').show().find('>name').html('<t>'+(data.name ? data.name : '')+' </t>');
11717 p.find('header>price').html(lumise.func.price(data.price));
11718 p.find('header>sku').html(data.sku ? 'SKU: '+data.sku : '');
11719
11720 if (data.description !== undefined && data.description !== '') {
11721
11722 var maxl = 100,
11723 more = false,
11724 des = data.description.substr(0, maxl);
11725
11726 p.find('desc').data({desc: data.description});
11727
11728 if (data.description.length > maxl)
11729 more = true;
11730
11731 p.find('span').show().html(des);
11732 p.find('desc').show().find('a[href="#more"]')
11733 .css({display: (more ? 'inline-block' : 'none')})
11734 .off('click')
11735 .on('click', function(e) {
11736 $(this).toggleClass('open');
11737 if ($(this).hasClass('open')) {
11738 $(this).html(lumise.i(137));
11739 $(this).closest('desc').find('span').html($(this).closest('desc').data('desc'));
11740 } else{
11741 $(this).html(lumise.i(69));
11742 $(this).closest('desc').find('span').html($(this).closest('desc').data('desc').substr(0, maxl));
11743 }
11744 e.preventDefault();
11745 });
11746 } else p.find('desc').hide();
11747
11748 lumise.get.el('cart-options').show();
11749
11750 lumise.render.cart_change();
11751 lumise.cart.render(data);
11752
11753 },
11754
11755 cart_change : function() {
11756
11757 var current_id = lumise.func.url_var('cart', ''),
11758 btn = lumise.get.el('cart-action'),
11759 items = localStorage.getItem('LUMISE-CART-DATA'),
11760 wrp = lumise.get.el('cart-items'),
11761 ul = wrp.find('ul[data-view="items"]'),
11762 total = 0, item, keys, color;
11763
11764 if (btn.length > 0) {
11765 if (current_id === '')
11766 btn.attr({'data-action': 'add-cart'}).find('>span').html(btn.data('add'));
11767 else
11768 btn.attr({'data-action': 'update-cart'}).find('>span').html(btn.data('update'));
11769 }
11770
11771 ul.html('');
11772
11773 try {
11774 items = JSON.parse(items);
11775 keys = Object.keys(items);
11776 }catch(ex) {
11777 items = {};
11778 keys = [];
11779 }
11780
11781 var item, color;
11782
11783 if (Object.keys(items).length > 0) {
11784 Object.keys(items).map(function(id) {
11785 item = items[id];
11786 if (lumise.func.version_compare('1.7.1', item.system_version) <= 0) {
11787 color = '#fefdfe';
11788 if (
11789 typeof item.attributes == 'object' &&
11790 typeof item.options == 'object' &&
11791 Object.keys(item.attributes).length > 0
11792 ) {
11793 Object.keys(item.attributes).map(function(im) {
11794 if (
11795 item.attributes[im].type == 'product_color' &&
11796 item.options[im] !== undefined
11797 ) color = item.options[im];
11798 });
11799 }
11800
11801 ul.append(
11802 '<li data-func="edit" data-id="'+id+'">\
11803 <span data-view="thumbn">\
11804 <img data-func="edit" title="'+lumise.i('edit')+'" data-id="'+id+'" style="background: '+color+'" src="'+item.screenshot+'" />\
11805 </span>\
11806 <span data-view="info">\
11807 '+(id != current_id ?
11808 '<name>\
11809 <a href="#edit" data-func="edit" title="'+lumise.i('edit')+'" data-id="'+id+'">'+
11810 item.name+'\
11811 </a>\
11812 </name>' :
11813 '<name>'+item.name+'</name>'
11814 )+'<price>'+lumise.func.price(item.price_total)+'</price> \
11815 <a href="#remove" title="'+lumise.i('remove')+'">\
11816 <i class="lumisex-android-close" data-func="remove" data-id="'+id+'"></i>\
11817 </a>\
11818 '+(id == current_id ? '<small>'+lumise.i(72)+'</small> ' : '')+'\
11819 </span>\
11820 </li>');
11821 total += parseFloat(item.price_total);
11822 }
11823 });
11824 ul.append('<li><strong>'+lumise.i(74)+': '+lumise.func.price(total.toFixed(2))+'</strong></li>');
11825 ul.attr({'data-empty': 'false'});
11826 }else {
11827 ul.attr({'data-empty': 'true'}).html('<p><i class="lumisex-bag"></i> '+lumise.i(71)+'</p>');
11828 }
11829
11830 lumise.get.el('addToCart').find('small').remove();
11831 lumise.get.el('addToCart').append(' <small>'+keys.length+'</small>');
11832
11833 lumise.actions.do('cart-change');
11834
11835 },
11836
11837 cart_details : function(e) {
11838
11839 var items = JSON.parse(localStorage.getItem('LUMISE-CART-DATA') || '{}'),
11840 ind = 1, item, attr, total = 0, current = lumise.func.url_var('cart'),
11841 table = ['<table class="lumise-table sty2"><thead>',
11842 '<tr>',
11843 '<th> # </th>',
11844 '<th>'+lumise.i(76)+'</th>',
11845 '<th data-align="left"><div style="width: 240px;">'+lumise.i(77)+'</div></th>',
11846 '<th data-align="center">'+lumise.i(104)+'</th>',
11847 '<th data-align="center">'+lumise.i(79)+'</th>',
11848 '<th data-align="center"><div style="width: 120px;">'+lumise.i(78)+'</div></th>',
11849 '</tr>',
11850 '</thead>',
11851 '<tbody>'],
11852 ext_qty = function (val){
11853 if(val.indexOf('-') > -1){
11854 val = val.split('-');
11855 var qty = val[val.length-1];
11856 val = val.slice(0, -1);
11857 return val.join('-') + ' ('+qty+')';
11858 }
11859
11860 return val;
11861
11862 };
11863
11864 if (Object.keys(items).length > 0) {
11865 Object.keys(items).map(function(id) {
11866
11867 if (lumise.func.version_compare('1.7.1', items[id].system_version) > 0) {
11868 delete items[id];
11869 localStorage.setItem('LUMISE-CART-DATA', JSON.stringify(items));
11870 lumise.indexed.delete(id, 'cart');
11871 return;
11872 };
11873
11874 var item = items[id], val, attr = '';
11875
11876 Object.keys(item.options).map(function(at) {
11877 val = item.options[at];
11878 if (
11879 item.attributes[at].type == 'product_color' ||
11880 item.attributes[at].type == 'color'
11881 ) {
11882 item.attributes[at].values.split("\n").map(function(v) {
11883 v = v.split('|');
11884 if (v[0].trim() == val) {
11885 if (v[1] !== undefined && v[1] !== '')
11886 val = v[1].trim();
11887 }
11888 });
11889 val = '<span title="'+item.options[at]+'" style="background: '+item.options[at]+';padding: 3px 5px;border-radius: 2px;color:'+lumise.func.invert(item.options[at])+'">'+val+'</span>';
11890 }
11891 attr += '<strong>'+item.attributes[at].name+':</strong> '+val+'<br />';
11892 });
11893
11894 table = table.concat([
11895 '<tr>',
11896 '<td>'+(ind++)+'</td>',
11897 '<td class="product-thumb">',
11898 '<div data-design-layer="'+id+'"></div>',
11899 '</td>',
11900 '<td>'+attr+'<strong>'+lumise.i(191)+':</strong> '+item.stages+'</td>',
11901 '<td data-align="center">'+lumise.func.price(item.price_total)+'</td>',
11902 '<td data-align="center">'+lumise.func.date('h:m D d M, Y', item.updated)+'</td>',
11903 '<td data-align="center">',
11904 (current != id ? '<a href="#edit" data-id="'+id+'">'+lumise.i('edit')+'</a>' : lumise.i(72)),
11905 ' | <a href="#remove" data-id="'+id+'">'+lumise.i('remove')+'</a>',
11906 '</td>'
11907 ]);
11908
11909 setTimeout(lumise.func.cart_thumbn, 100, id);
11910
11911 total += parseFloat(item.price_total);
11912
11913 });
11914
11915 table = table.concat(['</tbody>',
11916 '<tfoot>',
11917 '<tr>',
11918 '<td colspan="3" class="lumise-total">'+lumise.i(74)+': '+lumise.func.price(total.toFixed(2)),
11919 '</td>',
11920 '<td colspan="3" data-align="right">',
11921 '<button class="lumise-btn-primary">'+lumise.i(75)+' <i class="lumisex-android-arrow-forward"></i></button>',
11922 '</td>',
11923 '</tr>',
11924 '</tfoot>',
11925 '</table>']);
11926
11927 }else{
11928 table = table.concat(['<tr>', '<td colspan="6"><h3>'+lumise.i(42)+'</h3></td>','</tr>','</table>']);
11929 };
11930
11931 lumise.tools.lightbox({
11932 content: '<div id="lumise-cart-details" class="lumise_content lumise_wrapper_table">\
11933 <h3 class="title">'+lumise.i(73)+'</h3>\
11934 <div>'+table.join('')+'</div>\
11935 </div>'
11936 });
11937
11938 lumise.trigger({
11939
11940 el: $('#lumise-cart-details'),
11941
11942 events: {
11943 'a[href="#edit"]': 'edit_item',
11944 'a[href="#remove"]': 'remove_item',
11945 'tfoot button.lumise-btn-primary': lumise.cart.do_checkout
11946 },
11947
11948 edit_item: function(e) {
11949 lumise.cart.edit_item(this.getAttribute('data-id'), e);
11950 e.preventDefault();
11951 },
11952
11953 remove_item: function(e) {
11954
11955 if (confirm(lumise.i('sure'))) {
11956
11957 var id = this.getAttribute('data-id'),
11958 total_elm = $('#lumise-cart-details').find('tfoot tr:first td'),
11959 total = 0;
11960
11961 if (lumise.func.url_var('cart', null) == id)
11962 lumise.func.set_url('cart', null);
11963
11964 var items = JSON.parse(localStorage.getItem('LUMISE-CART-DATA'));
11965 delete items[id];
11966
11967 localStorage.setItem('LUMISE-CART-DATA', JSON.stringify(items));
11968 lumise.render.cart_change();
11969
11970 $(this).closest('tr').remove();
11971
11972 //calc total
11973 Object.keys(items).map(function(i) {
11974 if (items[i].price_total !== undefined)
11975 total += parseFloat(items[i].price_total);
11976 });
11977
11978 $(total_elm[0]).html(
11979 lumise.i(74)+': '+lumise.func.price(total.toFixed(2))
11980 );
11981
11982 if(total == 0) {
11983 $(total_elm[1]).html('');
11984 $('#lumise-cart-details').find('tfoot .lumise-btn-primary').hide();
11985 }
11986
11987 };
11988 e.preventDefault();
11989
11990 }
11991
11992 });
11993
11994 e.preventDefault();
11995
11996 },
11997
11998 categories : function (type, res) {
11999
12000 var btn = $('button[data-func="show-categories"][data-type="'+type+'"]');
12001
12002 if (res !== undefined) {
12003 lumise.ops.categories[type] = res;
12004 if (res.category !== 0 && res.category !== '' && res.category_name !== '')
12005 btn.find('span').html(res.category_name);
12006 else btn.find('span').html(lumise.i(57));
12007 }else res = lumise.ops.categories[type];
12008
12009 var items = res.categories,
12010 curr = res.category,
12011 wrp = lumise.get.el('x-thumbn-preview'),
12012 html = '<div class="lumise-categories-wrp" data-type="'+type+'">';
12013
12014 if (items === undefined || items.length === 0)
12015 wrp.find('>div').html('<div class="lumise-categories-wrp" data-type="'+type+'"><br><br>'+lumise.i(42)+'</div>');
12016 else {
12017
12018 if (res.category_parents.length > 0) {
12019
12020 if (res.category_parents.length === 1 && res.category_parents[0].id === '') {
12021 html += '<nav><span>'+res.category_parents[0].name+'</span></nav>';
12022 }else{
12023
12024 html += '<nav><a href="#category-all" data-act="item" data-id="">'+lumise.i(57)+'</a>';
12025
12026 res.category_parents.map(function(cp){
12027 if (cp.id != res.category)
12028 html += '<i class="lumisex-ios-arrow-forward"></i><a href="#category-'+cp.id+'" data-act="item" data-id="'+cp.id+'">'+cp.name+'</a>';
12029 else html += '<i class="lumisex-ios-arrow-forward"></i><span>'+cp.name+'</span>';
12030 });
12031 html += '</nav>';
12032
12033 }
12034 }
12035
12036 html += '<ul class="smooth">';
12037 items.map(function(item) {
12038 var thumbn = item.thumbnail;
12039 if (thumbn === null || thumbn === undefined || thumbn === '')
12040 thumbn = lumise.data.assets+'assets/images/default_category.jpg';
12041 else if(thumbn.indexOf('http') !== 0)
12042 thumbn = lumise.data.upload_url+'thumbnails/'+thumbn;
12043 html += '<li data-act="item" data-id="'+item.id+'"'+(curr == item.id ? ' class="active"' : '')+'>\
12044 <span style="background-image:url(\''+thumbn+'\');"></span>\
12045 <p>'+item.name+'</p>\
12046 </li>';
12047 });
12048 html += '</ul></div>';
12049
12050 var scrt = wrp.find('.lumise-categories-wrp ul').scrollTop();
12051 wrp.find('>div').html(html);
12052 wrp.find('.lumise-categories-wrp ul').scrollTop(scrt);
12053
12054 lumise.trigger({
12055
12056 el: wrp,
12057
12058 events: {
12059 'div.lumise-categories-wrp': 'click'
12060 },
12061 click: function(e) {
12062
12063 var el = e.target.getAttribute('data-act') ? $(e.target) : $(e.target).closest('[data-act]'),
12064 type = this.getAttribute('data-type'),
12065 act = el.data('act');
12066
12067 if (!act)return;
12068
12069 switch (act) {
12070 case 'item':
12071
12072 $('.lumise-categories-wrp').attr({'data-process': 'true'});
12073
12074 lumise.ops[type+'_category'] = el.data('id');
12075
12076 lumise.ops[type+'_index'] = 0;
12077 lumise.ops[type+'_loading'] = false;
12078
12079 lumise.get.el(type+'-list').find('ul').html('');
12080 lumise.get.el(type+'-list').trigger('scroll');
12081
12082 break;
12083 }
12084
12085 e.preventDefault();
12086
12087 }
12088 });
12089
12090 }
12091 1},
12092
12093 products_list : function (btn_txt) {
12094
12095 if (!btn_txt)
12096 btn_txt = lumise.i(87);
12097
12098 lumise.tools.lightbox({
12099 content: '<div id="lumise-change-products-wrp" data-btn="'+btn_txt+'" >\
12100 <center><i class="lumise-spinner x3"></i></center>\
12101 </div>'
12102 });
12103
12104 if (lumise.ops.products !== undefined)
12105 return lumise.response.list_products(lumise.ops.products);
12106
12107 lumise.post({
12108 action: 'list_products',
12109 s: '',
12110 category: '',
12111 index: 0
12112 });
12113
12114 },
12115
12116 cart_confirm : function() {
12117
12118 var el = $('<div id="lumise-update-cart-confirm" data-func="close" style="opacity:0">\
12119 <div>\
12120 <img src="'+lumise.data.assets+'assets/images/done.svg" alt="" />\
12121 <em>'+lumise.i(172)+'!</em>\
12122 <ul>\
12123 <li>\
12124 <a href="#details" data-func="details">'+lumise.i(173)+'</a>\
12125 </li>\
12126 <li>\
12127 <a href="#new" data-func="new">'+lumise.i(174)+'</a>\
12128 </li>\
12129 </ul>\
12130 <br>\
12131 <button class="lumise-btn-primary" data-func="checkout">\
12132 '+lumise.i(175)+'\
12133 <i class="lumisex-android-arrow-forward" data-func="checkout"></i>\
12134 </button>\
12135 <i class="lumisex-android-close close" title="'+lumise.i(176)+'" data-func="close"></i>\
12136 </div>\
12137 </div>');
12138
12139 $('#LumiseDesign').append(el);
12140
12141 el.animate({opacity: 1}, 150).on('click', function(e) {
12142
12143 e.preventDefault();
12144
12145 var _this = $(this),
12146 func = e.target.getAttribute('data-func');
12147
12148 lumise.get.el('proceed').removeClass('active');
12149
12150 switch (func) {
12151 case 'close':
12152 $(this).fadeOut(150, function() {$(this).remove();});
12153 break;
12154 case 'details' :
12155 lumise.render.cart_details(e);
12156 break;
12157 case 'new' :
12158 lumise.func.set_url('cart', null);
12159 lumise.get.el('general-status').html('');
12160 lumise.render.products_list();
12161 break;
12162 case 'checkout' :
12163 lumise.cart.do_checkout(e);
12164 break;
12165 }
12166
12167 if (func)
12168 $(this).fadeOut(150, function() {$(this).remove();});
12169
12170 });
12171
12172 }
12173
12174 },
12175
12176 indexed : {
12177
12178 req: null,
12179 db: null,
12180 stores: {
12181 'uploads': null,
12182 'designs': null,
12183 'dumb': null,
12184 'cart': null,
12185 'categories': null
12186 },
12187
12188 init: function() {
12189
12190 var t = this;
12191
12192 t.req = indexedDB.open("lumise", 8);
12193 t.req.onsuccess = function (e) {
12194
12195 if ( e.target.result.setVersion) {
12196 if ( e.target.result.version != t.ver) {
12197 var setVersion = e.target.result.setVersion(t.ver);
12198 setVersion.onsuccess = function () {
12199 window.alert("Hello world");
12200 console.warn("This is a warning!");
12201 t.store(e.target.result);
12202 t.ready(e.target.result);
12203 console.log("lumise 8 ");
12204 };
12205 }
12206 else t.ready(e.target.result);
12207 }
12208 else t.ready(e.target.result);
12209 };
12210
12211 t.req.onupgradeneeded = function (e) {
12212 t.store(e.target.result);
12213 };
12214
12215 },
12216
12217 ready : function(db) {
12218
12219 this.db = db;
12220
12221 /*
12222 * Addons callback
12223 */
12224 if (lumise.data.access_core !== '') {
12225 lumise.data.access_core.split(',').map(function(a) {
12226 if (
12227 window[a] !== undefined &&
12228 typeof window[a] == 'function'
12229 ) {
12230 try {
12231 window[a](lumise);
12232 } catch (ex) {
12233 console.warn('Error on lumise addon callback "'+a+'": '+ex.message);
12234 console.log(ex);
12235 }
12236 }
12237 });
12238 };
12239
12240 try {
12241 lumise.actions.do('db-ready');
12242 } catch (ex) {
12243 console.warn(ex.message);
12244 console.log(ex);
12245 };
12246
12247 },
12248
12249 save : function(ob, storeName, callback) {
12250
12251 if (this.db == null)
12252 return callback(null);
12253
12254 var trans = this.db.transaction(ob.length === 2 ? [storeName, 'dumb'] : [storeName], "readwrite");
12255 var store = trans.objectStore(storeName);
12256
12257 if (ob.id === null || ob.id === undefined)
12258 ob.id = parseInt(new Date().getTime()/1000).toString(36)+':'+Math.random().toString(36).substr(2);
12259
12260 var obj = $.extend({
12261 created: new Date().getTime()
12262 }, (ob[0] !== undefined ? ob[0] : ob));
12263
12264 var process = store.put(obj, obj.id);
12265
12266 if (typeof callback == 'function')
12267 process.onsuccess = callback;
12268 console.log("ABC");
12269
12270 if (ob[1] !== undefined) {
12271
12272 var obj_dumb = $.extend({
12273 id: obj.id,
12274 created: obj.created
12275 }, ob[1]);
12276
12277 trans.objectStore('dumb').put(obj_dumb, obj.id);
12278
12279 }
12280
12281
12282 },
12283
12284 get : function(id, storeName, callback){
12285
12286 if (this.db == null)
12287 return callback(null);
12288
12289 var trans = this.db.transaction([storeName], "readwrite");
12290 var store = trans.objectStore(storeName);
12291 try{
12292 var process = store.get(id);
12293 }catch(ex){}
12294 trans.oncomplete = function(event){
12295 callback(process !== undefined ? process.result : null);
12296 delete process;
12297 delete trans;
12298 delete store;
12299 delete go;
12300 };
12301 trans.onerror = function(){
12302 callback(null);
12303 };
12304
12305 },
12306
12307 list : function(callback, storeName, onComplete){
12308
12309 var t = this;
12310 if (t.db == null)
12311 return onComplete(null);
12312
12313 var trans = t.db.transaction([storeName], "readwrite");
12314 var store = trans.objectStore(storeName);
12315 var i = 0;
12316
12317 trans.oncomplete = onComplete;
12318
12319 var range = lumise.ops[storeName+'_cursor'] ?
12320 IDBKeyRange.upperBound(lumise.ops[storeName+'_cursor'], true) : null,
12321 cursorRequest = store.openCursor(range ,'prev');
12322
12323 cursorRequest.onerror = function(error) {
12324 console.log(error);
12325 };
12326
12327 cursorRequest.onsuccess = function(evt) {
12328 console.log("lumise store & trans");
12329 if (i++ > 11 && typeof onComplete == 'function')
12330 return onComplete();
12331
12332 var cursor = evt.target.result;
12333 if (cursor) {
12334 callback(cursor.value);
12335 if (onComplete != cursor.id)
12336 cursor.continue();
12337 }else{
12338 delete cursor;
12339 delete cursorRequest;
12340 delete range;
12341 delete trans;
12342 delete go;
12343 return (typeof onComplete == 'function' ? onComplete('done') : null);
12344 }
12345 };
12346
12347 },
12348
12349 store : function(db) {
12350 Object.keys(this.stores).map(function(s){
12351 try {
12352 db.createObjectStore(s);
12353 }catch(ex){};
12354 });
12355 },
12356
12357 delete : function(id, store) {
12358
12359 var tranc = this.db.transaction([store, 'dumb'], "readwrite");
12360 tranc.objectStore(store).delete(id);
12361 tranc.objectStore('dumb').delete(id);
12362
12363 }
12364
12365 },
12366
12367 post : function(ops, callback){
12368
12369 if (!ops.action)
12370 return lumise.func.notice('lumise.post() missing param action', 'error');
12371
12372 $.ajax({
12373 url: lumise.data.ajax,
12374 method: 'POST',
12375 data: lumise.apply_filters('ajax', $.extend({
12376 nonce: 'LUMISE-SECURITY:'+lumise.data.nonce,
12377 ajax: 'frontend'
12378 }, ops)),
12379 statusCode: lumise.response.statusCode,
12380 success: function(res) {
12381 if (typeof callback == 'function')
12382 return callback(res);
12383 else if (typeof lumise.response[ops.action] == 'function')
12384 lumise.response[ops.action](res);
12385 }
12386 });
12387
12388 },
12389
12390 response : {
12391
12392 templates : function(res) {
12393
12394 var html = '';
12395
12396 if (res.items && res.items.length > 0) {
12397 res.items.map(function(item) {
12398 lumise.templates.storage[item.id] = lumise.data.upload_url+item.upload;
12399 html += '<li style="background-image: url(\''+item.screenshot+'\')" \
12400 data-ops=\'[{\
12401 "type": "template", \
12402 "name": "'+item.name+'", \
12403 "id": "'+item.id+'", \
12404 "tags": "'+(item.tags?item.tags:'')+'", \
12405 "cates": "'+(item.cates?item.cates:'')+'", \
12406 "screenshot": "'+item.screenshot+'", \
12407 "price": "'+item.price+'"\
12408 }]\' class="lumise-template">\
12409 <i data-tag="'+item.id+'">'+(item.price?lumise.func.price(item.price) : lumise.i(100))+'</i><i data-info="'+item.id+'"></i>\
12410 </li>';
12411 });
12412 var total = res.total ? res.total : 0;
12413 lumise.ops.templates_q = res.q;
12414 lumise.ops.templates_category = res.category;
12415 lumise.ops.templates_index = parseInt(res.index)+res.items.length;
12416 if (lumise.ops.templates_index<total)
12417 lumise.ops.templates_loading = false;
12418
12419 }else html += '<span class="noitems">'+lumise.i(42)+'</span>';
12420
12421 lumise.get.el('templates-list').find('i.lumise-spinner').remove();
12422 lumise.get.el('templates-list').find('ul.lumise-list-items').append(html);
12423
12424 lumise.render.categories('templates', res);
12425 lumise.templates.add_events();
12426
12427 },
12428
12429 cliparts : function(res) {
12430
12431 var html = '';
12432
12433 if (res.items && res.items.length > 0) {
12434
12435 res.items.map(function(item) {
12436 lumise.cliparts.storage[item.id] = lumise.data.upload_url+item.upload;
12437 html += '<li style="background-image: url(\''+item.thumbnail_url+'\')" \data-ops=\'[{\
12438 "type": "image", \
12439 "name": "'+item.name+'", \
12440 "id": "'+item.id+'", \
12441 "tags": "'+(item.tags?item.tags:'')+'", \
12442 "cates": "'+(item.cates?item.cates:'')+'", \
12443 "resource": "cliparts", \
12444 "price": "'+item.price+'" \
12445 }]\' class="lumise-clipart">\
12446 <i data-tag="'+item.id+'">'+(item.price>0?lumise.func.price(item.price) : lumise.i(100))+'</i><i data-info="'+item.id+'"></i>\
12447 </li>';
12448 });
12449 var total = res.total ? res.total : 0;
12450 lumise.ops.cliparts_q = res.q;
12451 lumise.ops.cliparts_category = res.category;
12452 lumise.ops.cliparts_index = parseInt(res.index)+res.items.length;
12453 if (lumise.ops.cliparts_index<total)
12454 lumise.ops.cliparts_loading = false;
12455
12456 }else html += '<span class="noitems">'+lumise.i(42)+'</span>';
12457
12458 lumise.get.el('cliparts-list').find('i.lumise-spinner').remove();
12459 lumise.get.el('cliparts-list').find('ul.lumise-list-items').append(html);
12460
12461 lumise.render.categories('cliparts', res);
12462 lumise.cliparts.add_events();
12463
12464 },
12465
12466 save_design : function(res) {
12467
12468 lumise.f(false);
12469
12470 if (res.success) {
12471
12472 lumise.func.notice(lumise.i(21), 'success');
12473
12474 lumise.data.design = res.id;
12475 lumise.get.el('navigations').find('li[data-tool="designs"]').attr({'data-load': 'designs'});
12476 /*
12477 if ( window.location.href.indexOf('design='+res.id+'&') === -1)
12478 window.history.pushState({},"", lumise.data.url+'?design='+res.id+'&product='+res.pid);
12479 */
12480 }else if(res.error) {
12481 lumise.func.notice(res.error, 'error');
12482 }
12483
12484 },
12485
12486 my_designs : function(res) {
12487
12488 if(res.error)
12489 return lumise.func.notice(res.error, 'error');
12490
12491 lumise.render.my_designs(res);
12492
12493 },
12494
12495 edit_design : function(res) {
12496
12497 if(res.error)
12498 return lumise.func.notice(res.error, 'error');
12499
12500 try{
12501 var data = JSON.parse(res.data);
12502 }catch(ex) {
12503 return lumise.func.notice(ex.message, 'error');
12504 };
12505
12506 lumise.tools.imports(data);
12507
12508 lumise.get.el('share-link').val(lumise.data.url+'?design='+res.id+'&product='+res.pid+'&private_key='+res.share_token)
12509 .closest('li[data-view="link"]').removeAttr('data-msg');
12510
12511 lumise.get.el('navigations')
12512 .find('li[data-tool="share"] p[data-view="radio"] input[name="lumise-share-permission"]')
12513 .get(res.share_permission).checked = true;
12514
12515 lumise.data.design = res.id;
12516 lumise.data.private_key = res.share_token;
12517 lumise.get.el('navigations').find('li[data-tool="designs"]').attr({'data-load': 'designs'});
12518
12519 if ( window.location.href.indexOf('design='+res.id+'&') === -1) {
12520 window.history.pushState({},"", lumise.data.url+'?design='+res.id+'&product='+res.pid);
12521 }
12522
12523 },
12524
12525 delete_design : function(res) {
12526
12527 if(res.error) {
12528 return lumise.func.notice(res.error, 'error');
12529 }
12530
12531 $('ul#lumise-saved-designs li[data-id="'+res.id+'"]').remove();
12532 lumise.func.notice(lumise.i(22), 'success');
12533
12534 },
12535
12536 design_permission : function(res) {
12537
12538 if(res.error)
12539 lumise.get.el('navigations')
12540 .find('li[data-tool="share"] li[data-view="link"]').attr({'data-msg': res.error});
12541
12542 lumise.get.el('navigations')
12543 .find('li[data-tool="share"] button[data-func="copy-link"]')
12544 .removeClass('disabled').next('i').remove();
12545
12546 },
12547
12548 shapes : function(res) {
12549
12550 if(res.error) {
12551 return lumise.func.notice(res.error, 'error');
12552 }
12553
12554 $('#lumise-shapes i.lumise-spinner').remove();
12555
12556 if (res.items && res.items.length > 0) {
12557
12558 lumise.ops.shapes_index = parseInt(res.index)+res.items.length;
12559 lumise.ops.shapes_loading = false;
12560 lumise.render.shapes(res.items);
12561 var shapewrp = $('#lumise-shapes .lumise-tab-body').get(0);
12562
12563 if (shapewrp.scrollHeight == shapewrp.clientHeight) {
12564 $(shapewrp).trigger('scroll');
12565 }
12566
12567 }else $('#lumise-shapes ul').append('<span class="noitems">'+lumise.i(42)+'</span>');
12568
12569 },
12570
12571 change_lang : function() {
12572 location.reload();
12573 },
12574
12575 list_products : function(res) {
12576
12577 var wrp = $('#lumise-change-products-wrp'),
12578 btn_text = wrp.data('btn');
12579
12580 lumise.ops.products = res;
12581
12582 var cates = ['<ul data-view="categories">',
12583 '<h3>'+lumise.i(56)+'</h3>',
12584 '<li data-id="" '+(res.category === '' ? 'class="active"' : '')+' data-lv="0"> '+lumise.i(57)+'</li>'],
12585 prods = ['<h3 data-view="top"><input type="search" value="'+res.s+'" placeholder="'+lumise.i(63)+'" /></h3>','<ul data-view="products" class="smooth">'];
12586
12587 if (res.categories) {
12588 res.categories.map(function(c) {
12589 cates.push('<li '+(res.category == c.id ? 'class="active"' : '')+' data-id="'+c.id+'" data-lv="'+c.lv+'">'+'—'.repeat(c.lv)+' '+c.name+'</li>');
12590 });
12591 }
12592
12593 if (res.products && res.products.length > 0) {
12594
12595 res.products.map(function(p) {
12596
12597 if (p === null)
12598 return;
12599
12600 if (p.stages !== '' && typeof p.stages == 'string')
12601 p.stages = lumise.func.dejson(p.stages);
12602
12603 var stages = lumise.func.pimage(p.stages.stages !== undefined ? p.stages.stages : p.stages);
12604
12605 var cates = '',
12606 color = (
12607 p.stages.options !== undefined ? p.stages.options.color :
12608 (p.stages.colors !== undefined ? p.stages.colors.active :
12609 (typeof p.color == 'string' ? p.color.split(':')[0] : '')
12610 )
12611 );
12612
12613 if (stages.colors !== undefined)
12614 delete stages.colors;
12615
12616 var first = Object.keys(stages)[0],
12617 template = '';
12618
12619 /*if (typeof p.templates == 'object' && p.templates[first] !== undefined)
12620 template = 'data-template="'+encodeURIComponent
12621 (JSON.stringify([
12622 stages[first].edit_zone,
12623 p.templates[first],
12624 stages[first].product_width,
12625 stages[first].product_height
12626 ])
12627 )+'"';*/
12628
12629 prods.push(
12630 '<li data-id="'+p.id+'"'+(
12631 (lumise.data.product == p.id) ? ' data-current="true"':''
12632 )+' data-name="'+
12633 p.name.toLowerCase().trim().replace(/[^a-z0-9 ]/gmi, "")+
12634 '"'+((p.id !== p.product)? ' data-cms="'+p.product+'"': '')+'>\
12635 <span data-view="thumbn" data-start="'+btn_text+'">\
12636 <img '+template+' style="background:'+color+'" src="'+(stages[first] ? stages[first].image : lumise.data.assets+'assets/images/default_category.jpg')+'" />\
12637 </span>\
12638 <span data-view="name">'+p.name+'</span>\
12639 <span data-view="price">'+lumise.func.price(p.price)+'</span>\
12640 </li>'
12641 )
12642 });
12643
12644 }else prods.push('<li data-view="noitem">'+lumise.i(42)+'</li>');
12645
12646 if (res.limit < res.total) {
12647 var pagination = ['<li data-view="pagination">', '<ul>'],
12648 pages = Math.ceil(res.total/res.limit),
12649 page = Math.ceil(res.index/res.limit);
12650 for(var i=1; i<=pages; i++) {
12651 pagination.push('<li data-page="'+i+'" '+(page == i ? ' class="lumise-color"' : '')+'>'+i+'</li>');
12652 }
12653 pagination.push('</ul></li>');
12654 prods.push(pagination.join(''));
12655 }
12656
12657 prods.push('</ul>');
12658
12659 wrp.html(cates.join('')).append(prods.join(''));
12660
12661 /*
12662 wrp.find('img[data-template]').on('load', function(e) {
12663
12664 var ops = JSON.parse(decodeURIComponent(this.getAttribute('data-template')));
12665
12666 this.removeAttribute('data-template');
12667
12668 var edz = ops[0],
12669 tem = ops[1],
12670 rat = this.offsetWidth/ops[2],
12671 t = rat*(edz.top+(ops[3]/2)-(edz.height/2)),
12672 l = rat*(edz.left+(ops[2]/2)-(edz.width/2)),
12673 w = rat*edz.width,
12674 h = rat*edz.height;
12675
12676
12677 $(this).after(
12678 '<span style="top: '+t+'px; left: '+l+'px; width: '+w+'px; height: '+h+'px;border-radius: '+(rat*edz.radius)+'px" data-view="template">\
12679 <img style="top: '+(rat*tem.offset.top)+'px; left: '+(rat*tem.offset.left)+'px; height: '+(rat*tem.offset.height)+'px; width: '+(rat*tem.offset.width)+'px; position: absolute;" src="'+tem.screenshot+'" />\
12680 </span>'
12681 );
12682
12683 });
12684 */
12685
12686 lumise.trigger({
12687 el: $('#lumise-change-products-wrp'),
12688 events: {
12689 'ul[data-view="categories"] li': 'category',
12690 'ul[data-view="products"] li[data-id]': 'product',
12691 'h3[data-view="top"] input:keydown': 'search',
12692 'li[data-view="pagination"] li[data-page]': 'page'
12693 },
12694
12695 category: function() {
12696
12697 var wrp = $(this).closest('#lumise-change-products-wrp'),
12698 id = this.getAttribute('data-id');
12699
12700 lumise.ops.products.category = id;
12701
12702 $('#lumise-change-products-wrp').html('<center><i class="lumise-spinner x3"></i></center>');
12703
12704 lumise.post({
12705 action: 'list_products',
12706 s: lumise.ops.products.s,
12707 category: id,
12708 index: 0
12709 });
12710
12711 },
12712
12713 product: function() {
12714
12715 if (this.getAttribute('data-current') == 'true')
12716 return;
12717
12718 var id = this.getAttribute('data-id'),
12719 product = lumise.ops.products.products.filter(function(p){return p.id == id;});
12720
12721 if (product.length > 0) {
12722 if (typeof wrp.data('callback') == 'function') {
12723 wrp.data('callback')(product[0]);
12724 } else {
12725
12726 if (lumise.func.url_var('cart', '') !== '') {
12727 lumise.func.confirm({
12728 title: lumise.i(119),
12729 primary: {
12730 text: lumise.i(124),
12731 callback: function(e) {
12732 $('lumise-general-status').html('');
12733 lumise.func.clear_url([]);
12734 lumise.render.product(product[0]);
12735 }
12736 },
12737 second: {
12738 text: lumise.i(125),
12739 callback: function(e) {
12740 lumise.func.clear_url(['cart']);
12741 lumise.render.product(product[0]);
12742 }
12743 }
12744 });
12745 }else{
12746 lumise.func.clear_url([]);
12747 lumise.render.product(product[0]);
12748 }
12749
12750 lumise.actions.do('select-product', product[0]);
12751
12752 }
12753 }
12754
12755 $(this).closest('#lumise-lightbox').remove();
12756
12757 },
12758
12759 search: function(e) {
12760
12761 if (e.keyCode !== 13)
12762 return;
12763
12764 e.data.el.find('ul[data-view="categories"] li.active').removeClass('active');
12765 e.data.el.find('ul[data-view="categories"] li[data-id="all"]').addClass('active');
12766
12767 var s = this.value.toLowerCase();
12768
12769 $('#lumise-change-products-wrp').html('<center><i class="lumise-spinner x3"></i></center>');
12770
12771 lumise.post({
12772 action: 'list_products',
12773 s: s,
12774 category: (lumise.ops.products.category ? lumise.ops.products.category : ''),
12775 index: 0
12776 });
12777
12778 e.preventDefault();
12779
12780 },
12781
12782 page: function(e) {
12783
12784 var p = parseInt(this.getAttribute('data-page'));
12785
12786 $('#lumise-change-products-wrp').html('<center><i class="lumise-spinner x3"></i></center>');
12787
12788 var limit = parseInt(lumise.ops.products.limit);
12789
12790 if (isNaN(limit))
12791 limit = 10;
12792
12793 lumise.post({
12794 action: 'list_products',
12795 s: lumise.ops.products.s,
12796 category: lumise.ops.products.category,
12797 index: (p*limit)-limit
12798 });
12799 }
12800
12801 });
12802
12803 },
12804
12805 categories : function(res) {
12806 if (res.length > 0) {
12807 var type = res[0].type;
12808 lumise.ops.categories[type] = res;
12809 lumise.render.categories(type);
12810 }
12811 },
12812
12813 statusCode: {
12814
12815 403: function() {
12816
12817 $.post(
12818 lumise.data.ajax,
12819 lumise.apply_filters('ajax', {
12820 action: 'extend',
12821 name: 'general',
12822 nonce: lumise.data.nonce,
12823 }), function(res){
12824
12825 lumise.f(false);
12826
12827 if (res == '-1')
12828 return lumise.func.notice(lumise.i(23), 'error', 3000);
12829
12830 lumise.data.nonce = res;
12831 return lumise.func.notice(lumise.i(24), 'notice', 3000);
12832
12833 });
12834
12835 }
12836
12837 }
12838
12839 },
12840
12841 mobile : function(canvas_view) {
12842
12843 var ww = $(window).width(),
12844 wh = $(window).height();
12845
12846 if (canvas_view === true) {
12847
12848 var main = lumise.get.el('main'),
12849 stage = lumise.stage(),
12850 mw = stage.canvas.width,
12851 mh = stage.canvas.height;
12852
12853 main.css({transform: '', top: '', left: ''});
12854
12855 if (ww<450 && stage.product.width > main.width()-20) {
12856
12857 var rati = (main.width()-20)/stage.product.width,
12858 top = ((mh*rati)-mh);
12859
12860 main.css({
12861 'transform': 'scale('+rati+')',
12862 'top': top+'px',
12863 'left': -(((mw-(main.width()-0))/2)*rati)+'px'
12864 });
12865
12866 if (lumise.data.rtl == '1') {
12867 main.css({
12868 'right': -(((mw-main.width())/2)*rati)+'px',
12869 'left': 'auto'
12870 });
12871 main.css({
12872 'left': main.css('left'),
12873 'right': 'auto'
12874 });
12875 }
12876
12877 }
12878
12879 return;
12880
12881 };
12882
12883 if (lumise.ops.excmobile)
12884 return;
12885
12886 lumise.ops.window_width = ww;
12887
12888 if (ww<1025) {
12889
12890 $(window).on('scroll', function(e){
12891 e.stopPropagation();
12892 e.preventDefault();
12893 return false;
12894 });
12895
12896 $(document.body).on('scroll touchEnd', function(e) {
12897 document.body.scrollTop = -1;
12898 e.preventDefault();
12899 });
12900
12901 document.ontouchmove = function(event){
12902 event.preventDefault();
12903 };
12904
12905 setInterval(function() {document.body.scrollTop = -1;}, 500);
12906
12907 $('#lumise-main')
12908 .on('mousedown touchstart', function(e) {
12909
12910 this.t = this.offsetTop;
12911 this.l = this.offsetLeft;
12912 this.x = e.originalEvent.pageX ? e.originalEvent.pageX : e.originalEvent.touches[0].pageX;
12913 this.y = e.originalEvent.pageY ? e.originalEvent.pageY : e.originalEvent.touches[0].pageY;
12914 this._do = ($('#lumise-top-tools').attr('data-view') == 'standard');
12915 this._gest = this.gest;
12916
12917 if (e.originalEvent.touches && e.originalEvent.touches.length === 2) {
12918
12919 this.gest = true;
12920
12921 if (!this.sc)
12922 this.sc = 1;
12923
12924 this.a = e.originalEvent.touches[0].pageX - e.originalEvent.touches[1].pageX;
12925 this.b = e.originalEvent.touches[0].pageY - e.originalEvent.touches[1].pageY;
12926
12927 this.scale_start = Math.sqrt((this.a*this.a) + (this.b*this.b));
12928
12929 }else this.gest = false;
12930
12931 this.start_move = true;
12932
12933 })
12934 .on('mousemove touchmove', function(e) {
12935
12936 if ((e.originalEvent.touches && e.originalEvent.touches.length === 1) || this.start_move !== true)
12937 return true;
12938
12939 if (this.gest === true) {
12940
12941 this.a = e.originalEvent.touches[0].pageX - e.originalEvent.touches[1].pageX;
12942 this.b = e.originalEvent.touches[0].pageY - e.originalEvent.touches[1].pageY;
12943
12944 this.scale_move = Math.sqrt((this.a*this.a) + (this.b*this.b));
12945
12946 this.scale = this.scale_move/this.scale_start;
12947
12948 var sc = this.sc*this.scale;
12949
12950 if (sc > 2) {
12951 sc = 2;
12952 }else if (sc < 0.5){
12953 sc = 0.5;
12954 };
12955
12956 this.style.transform = 'scale('+sc+')';
12957
12958 };
12959
12960 if (this._do !== true) {
12961 e.preventDefault();
12962 return true;
12963 };
12964
12965 this.style.top = (
12966 this.t+(
12967 (
12968 e.originalEvent.pageY ?
12969 e.originalEvent.pageY :
12970 e.originalEvent.touches[0].pageY
12971 )-this.y
12972 )
12973 )+'px';
12974
12975 this.style.left = (
12976 this.l+(
12977 (
12978 e.originalEvent.pageX ?
12979 e.originalEvent.pageX :
12980 e.originalEvent.touches[0].pageX
12981 )-this.x
12982 )
12983 )+'px';
12984
12985 })
12986 .on('mouseup touchend', function(e) {
12987
12988 this.sc = parseFloat(this.style.transform.toString().replace('scale(', '').replace(')', ''));
12989
12990 if (this.sc > 2) {
12991 this.sc = 2;
12992 }else if (this.sc < 0.5){
12993 this.sc = 0.5;
12994 };
12995
12996 this.start_move = false;
12997 this.gest = false;
12998
12999 });
13000
13001 if (!localStorage.getItem('LUMISE-GUIDE')) {
13002 var img = $('<img id="mobile-guide" src="'+lumise.data.assets+'assets/images/mobile-guide.jpg" />');
13003 $('body').append(img);
13004 img.on('click', function() {
13005 $(this).remove();
13006 localStorage.setItem('LUMISE-GUIDE', '{}');
13007 });
13008 }
13009
13010 };
13011
13012 if (ww<450) {
13013
13014 $('li[data-tab="design"]').trigger('click');
13015
13016 var wrp = $('div#lumise-left .lumise-left-nav,#lumise-top-tools');
13017
13018 if ($('div#lumise-left .lumise-left-nav').width() < 450)
13019 var wrp = $('#lumise-top-tools');
13020
13021 wrp.on('mousedown touchstart', function(e){
13022 this.sub = $(e.target).closest('[data-view="sub"]');
13023 if (this.sub.length > 0)
13024 return true;
13025 this.l = this.offsetLeft;
13026 this.x = e.originalEvent.pageX ? e.originalEvent.pageX : e.originalEvent.touches[0].pageX;
13027 this.w = $(window).width();
13028 e.preventDefault();
13029 })
13030 .on('mousemove touchmove', function(e){
13031 if (this.sub !== undefined && this.sub.length > 0)
13032 return true;
13033 var l = (this.l+((e.originalEvent.pageX ? e.originalEvent.pageX : e.originalEvent.touches[0].pageX)-this.x));
13034 if (l > 0)
13035 l = l*0.1;
13036 else if (this.offsetWidth + l < this.w)
13037 l = (this.w - this.offsetWidth)+((l-(this.w - this.offsetWidth))*0.1);
13038 this.style.left = Math.round(l)+'px';
13039 e.preventDefault();
13040 })
13041 .on('mouseup touchend', function(e){
13042
13043 if (this.sub !== undefined && this.sub.length > 0)
13044 return true;
13045
13046 if (Math.abs(this.offsetLeft-this.l) <= 2)
13047 e.target.click();
13048 else if (this.offsetLeft > 0)
13049 $(this).animate({left: 0}, 150);
13050 else if (this.offsetWidth + this.offsetLeft < this.w)
13051 $(this).animate({left: -(this.offsetWidth-this.w)}, 150);
13052
13053 e.preventDefault();
13054
13055 });
13056
13057 lumise.actions.add('object:added', function(){
13058 $('li[data-tab="design"]').trigger('click');
13059 $('div#lumise-left .lumise-left-nav').css({left: '0px'});
13060 });
13061 lumise.actions.add('selection:cleared', function(){
13062 $('#lumise-top-tools').css({left: ''});
13063 });
13064 lumise.actions.add('object:selected', function(){
13065 $('#lumise-top-tools').css({left: ''});
13066 });
13067 lumise.actions.add('after:render', function(){
13068 /*$('#lumise-top-tools [data-tool].active').removeClass('active');*/
13069 });
13070
13071 $('#lumise-templates-list,#lumise-cliparts-list').css({'max-height': (wh-224)+'px'});
13072 $('div#lumise-left .lumise-tab-body-wrp').css({height: (wh-110)+'px'});
13073 $('#lumise-cart-wrp').css({'max-height': (wh - 200)+'px'});
13074 $('div#lumise-left>div.lumise-left-nav-wrp,div#lumise-stage-nav').css({top: wh+'px'});
13075 $('#lumise-left #lumise-uploads div[data-tab]').css({height: (wh-169)+'px'});
13076
13077 }else if (ww<1025) {
13078
13079 $('#lumise-main').on('touchstart', function(){
13080 $('#lumise-side-close').trigger('click');
13081 });
13082 lumise.actions.add('object:added', function(){
13083 $('#lumise-side-close').trigger('click');
13084 });
13085 $('#lumise-templates-list,#lumise-cliparts-list').css({'max-height': (wh-170)+'px'});
13086 $('div#lumise-left .lumise-tab-body-wrp').css({height: (wh-54)+'px'});
13087 $('div#lumise-stage-nav').css({top: (wh-30)+'px'});
13088 $('#lumise-left #lumise-uploads div[data-tab]').css({height: (wh-115)+'px'});
13089 };
13090
13091 lumise.ops.excmobile = true;
13092
13093 },
13094
13095 stage : function(){
13096 return lumise.data.stages[lumise.current_stage];
13097 },
13098
13099 active_stage : function(name, callback) {
13100
13101 if (typeof callback != 'function')
13102 callback = function(){};
13103
13104 if (name === '')
13105 return callback();
13106
13107 this.current_stage = name;
13108
13109 if (!this.current_stage || !this.data.stages[this.current_stage])
13110 return alert(lumise.i(20));
13111
13112 var stage = this.data.stages[this.current_stage],
13113 nav = $('#lumise-print-nav');
13114
13115 stage.name = name;
13116
13117 $('#lumise-main div.lumise-stage').hide();
13118
13119 if ( stage.orientation !== undefined && stage.orientation !== '' ) {
13120
13121 nav.find('select[name="orientation"]').val(stage.orientation);
13122 nav.find('li[data-row="orien"]').hide();
13123
13124 } else nav.find('li[data-row="orien"]').show();
13125
13126 if ( stage.size !== undefined && stage.size !== '' ) {
13127
13128 if ( typeof stage.size == 'string' ) {
13129
13130 if (nav.find('input[name="print-format"]:checked').attr('data-format') == 'png')
13131 nav.find('li[data-row="size"]').show();
13132 else nav.find('li[data-row="size"]').hide();
13133
13134 nav.find('select[name="select-size"]').val(stage.size).attr({disabled: true});
13135 nav.find('input[name="size"]').val(stage.size);
13136 nav.find('input[data-unit="cm"]').prop({checked: true});
13137 nav.find('li[data-row="csize"],li[data-row="unit"]').hide();
13138 } else {
13139 nav.find('li[data-row="size"]').hide();
13140 nav.find('li[data-row="csize"],li[data-row="unit"]').show();
13141 nav.find('input[name="size"]').val(stage.size.width+' x '+stage.size.height).attr({disabled: true});
13142 nav.find('input[data-unit="'+stage.size.unit+'"]').prop({checked: true});
13143 nav.find('input[data-unit]').attr({disabled: true});
13144 }
13145
13146 } else {
13147
13148 nav.find('select[name="select-size"],input[name="size"],input[data-unit]').attr({disabled: null});
13149 nav.find('li[data-row="csize"],li[data-row="unit"],li[data-row="size"],li[data-row="orien"]').show();
13150
13151 var pcfg = localStorage.getItem('LUMISE_PRINT_CFG');
13152
13153 if (pcfg && pcfg !== '') {
13154 pcfg = JSON.parse(pcfg);
13155 if (pcfg.format !== undefined)
13156 nav.find('input[data-format="'+pcfg.format+'"]').prop({checked: true}).change();
13157 if (pcfg.unit !== undefined)
13158 nav.find('input[data-unit="'+pcfg.unit+'"]').prop({checked: true}).change();
13159 if (pcfg.size !== undefined)
13160 nav.find('select[name="select-size"]').val(pcfg.size).change();
13161 if (pcfg.csize !== undefined)
13162 nav.find('input[name="size"]').val(pcfg.csize).change();
13163 }
13164 };
13165
13166 if (stage.canvas) {
13167
13168 // the stage has been rendered
13169 if (stage.productColor != lumise.get.color()) {
13170 stage.productColor.set('fill', lumise.get.color());
13171 }
13172
13173 lumise.tools.discard();
13174
13175 $('#lumise-stage-'+name).show();
13176
13177 if (stage.data) {
13178
13179 lumise.tools.import(stage.data, function(){
13180 lumise.stack.save();
13181 lumise.actions.do('active_stage', stage);
13182 });
13183 delete stage.data;
13184 } else lumise.actions.do('active_stage', stage);;
13185
13186 lumise.func.stage_nav(name, stage.product.width/stage.product.height);
13187
13188 lumise.mobile(true);
13189
13190 return callback();
13191
13192 };
13193
13194 lumise.f('Loading..');
13195
13196 fabric.util.loadImage(stage.image, function(img) {
13197
13198 lumise.f(false);
13199
13200 if(img === null) {
13201 lumise.func.notice(lumise.i(33)+stage.image, 'error', 5000);
13202 }
13203 else
13204 {
13205
13206 lumise.func.create_canvas(stage, img);
13207
13208 stage.canvas.renderAll();
13209
13210 lumise.actions.do('render_stage', stage);
13211
13212 if (stage.data) {
13213 var scale = (stage.data.product_height ? stage.product.height/stage.data.product_height : 1);
13214 lumise.tools.import(stage.data, function(){
13215 if (scale !== 1)
13216 lumise.func.scale_designs(scale);
13217 lumise.stack.save();
13218 lumise.actions.do('active_stage', stage);
13219 callback();
13220 });
13221 delete stage.data;
13222 }
13223 else if(
13224 stage.template !== undefined &&
13225 stage.template.upload !== undefined &&
13226 stage.template.noload !== true
13227 ) {
13228 lumise.templates.load(stage.template, function() {
13229 lumise.actions.do('active_stage', stage);
13230 callback();
13231 });
13232 }
13233 else {
13234 lumise.stack.save();
13235 if (lumise.ops.first_completed !== true) {
13236 lumise.actions.do('first-completed');
13237 lumise.ops.first_completed = true;
13238 };
13239 lumise.actions.do('active_stage', stage);
13240 callback();
13241 }
13242 };
13243
13244 lumise.func.stage_nav(name, stage.product.width/stage.product.height);
13245
13246 });
13247
13248 },
13249
13250 cart : {
13251
13252 data : {},
13253 price : {
13254 template : {},
13255 extra : {},
13256 base : 0,
13257 color: 0,
13258 attr : 0
13259 },
13260 template : {},
13261 qty : 0,
13262 attr_tmpl : null,
13263 timer : null,
13264
13265 sum_calc : function (){
13266
13267 var prices = {},
13268 extra_filter = lumise.apply_filters('product_extra_price', {}),
13269 price = Object.values(lumise.cart.price).filter(
13270 price => typeof price !== 'object' && parseFloat(price) > 0
13271 );
13272
13273 if (price.length > 0)
13274 price = price.reduce((a, b) => parseFloat(a) + parseFloat(b));
13275 else price = 0;
13276
13277 prices.base = price; price = 0;
13278
13279 // base price
13280
13281 var ext_price = Object.values(extra_filter).filter(
13282 price => typeof price !== 'object' && parseFloat(price) > 0
13283 );
13284
13285 if (ext_price.length > 0)
13286 price += ext_price.reduce((a, b) => parseFloat(a) + parseFloat(b));
13287
13288 //calc extra price from addons
13289
13290 if( Object.keys(lumise.cart.price.extra).length > 0 ) {
13291 Object.values(lumise.cart.price.extra).map(function (objs){
13292 objs.map(function (obj) {
13293 price += parseFloat(obj.price);
13294 });
13295 });
13296 }
13297
13298 prices.ext = price;
13299 price = 0;
13300
13301 // price template
13302
13303 price += (
13304 Object.keys(lumise.cart.price.template).length > 0 &&
13305 Object.values(lumise.cart.price.template).filter(price => parseFloat(price)).length > 0 ?
13306 Object.values(lumise.cart.price.template).
13307 filter(price => parseFloat(price) >= 0).
13308 reduce((a, b) => parseFloat(a) + parseFloat(b)) :
13309 0
13310 );
13311
13312 prices.template = price;
13313
13314 return prices;
13315
13316 },
13317
13318 sum : function (){
13319
13320 var price = this.sum_calc();
13321
13322 return price.base+price.ext+price.template;
13323
13324 },
13325
13326 extra_price : function ( ext_id, data ) {
13327
13328 if (data == null) {
13329 delete lumise.cart.price.extra[ext_id];
13330 return;
13331 };
13332
13333 if (typeof lumise.cart.price.extra[ext_id] === 'undefined')
13334 lumise.cart.price.extra[ext_id] = [];
13335
13336 //check exists id of resource
13337 var f = lumise.cart.price.extra[ext_id].filter(
13338 obj => obj.id == data.id && obj.table == data.table
13339 );
13340
13341 if (typeof f[0] === 'undefined')
13342 lumise.cart.price.extra[ext_id].push(data);
13343
13344 },
13345
13346 get_price : function (f){
13347
13348 var price = 0,
13349 sum = lumise.cart.sum();
13350
13351 if (isNaN(lumise.cart.qty) || lumise.cart.qty == 0)
13352 lumise.cart.qty = 1;
13353
13354 price = ( sum + lumise.cart.printing.calc( lumise.cart.qty ) ) * lumise.cart.qty;
13355
13356 return f === true ? [price, lumise.cart.qty] : price;
13357
13358 },
13359
13360 init : function () {
13361
13362 if(lumise.onload == undefined)
13363 lumise.cart.render();
13364
13365 /*
13366 update printing price when objects changed
13367 */
13368 lumise.actions.add('updated', function (data){
13369
13370 clearTimeout(lumise.cart.timer);
13371
13372 lumise.cart.timer = setTimeout(function (){
13373 lumise.cart.calc(data);
13374 }, 300);
13375
13376 });
13377
13378 lumise.actions.add('checkout', lumise.cart.checkout);
13379
13380 $('#lumise-cart-action').on('click', function(e){
13381
13382 lumise.cart.add_cart('button add cart click');
13383
13384 e.preventDefault();
13385 });
13386
13387 lumise.render.cart_change();
13388
13389 },
13390
13391 add_cart : function(e) {
13392
13393 var values = [],
13394 invalids = [],
13395 invalid_fields = [],
13396 inv = null,
13397 cart_design = lumise.func.export('cart'),
13398 id = lumise.func.url_var('cart', new Date().getTime().toString(36).toUpperCase()),
13399 cart_data = JSON.parse(localStorage.getItem('LUMISE-CART-DATA') || '{}'),
13400 has_design = 0;
13401
13402 cart_data[id] = {
13403 id : id,
13404 screenshot : '',
13405 stages : 0,
13406 name : lumise.ops.product_data.name,
13407 updated : new Date().getTime(),
13408 product : lumise.ops.product_data.id,
13409 product_cms : lumise.ops.product_data.product,
13410 printing : lumise.cart.printing.current,
13411 printings_cfg : lumise.data.printings_cfg,
13412 options : $.extend(true, {}, lumise.cart.data.options),
13413 attributes : $.extend(true, {}, lumise.ops.product_data.attributes),
13414 price_total : lumise.cart.get_price(),
13415 extra : $.extend(true, {}, lumise.cart.price.extra),
13416 states_data : $.extend(true, {}, lumise.cart.printing.states_data),
13417 variation : lumise.data.variation,
13418 template : {
13419 'stages' : lumise.cart.template,
13420 'price' : lumise.cart.price.template
13421 },
13422 system_version : lumise.data.version
13423 };
13424
13425 Object.keys(lumise.cart.data.options).map(function (i){
13426 values.push(lumise.cart.data.options[i]);
13427 });
13428
13429 /*
13430 * Check cart_design empty
13431 */
13432
13433 Object.keys(lumise.data.stages).map(function(s) {
13434 if (
13435 typeof lumise.data.stages[s] !== 'undefined' &&
13436 typeof lumise.data.stages[s].canvas !== 'undefined'
13437 ){
13438 var canvas = lumise.data.stages[s].canvas,
13439 objs = canvas.getObjects();
13440 objs.map(function (obj){
13441 if(obj.evented == true) has_design++;
13442 });
13443 };
13444 cart_data[id].stages++;
13445 if (cart_data[id].screenshot === '')
13446 cart_data[id].screenshot = lumise.data.stages[s].image;
13447 });
13448
13449 if (has_design === 0) {
13450 lumise.func.notice(lumise.i(96), 'error');
13451 delete cart_data;
13452 delete cart_design;
13453 return false;
13454 };
13455
13456 /*
13457 * Check printing
13458 */
13459
13460 if(
13461 lumise.data.printings.length > 0 &&
13462 lumise.cart.printing.current === null
13463 ){
13464 inv = $('.lumise-prints').find('.lumise-cart-field-printing-tmpl').get(0);
13465 if (inv !== undefined)
13466 invalid_fields.push(inv);
13467 $('.lumise-prints').find('.lumise-cart-field-printing-tmpl .lumise-required-msg').html(lumise.i(99));
13468 };
13469
13470 lumise.cart.qty = parseInt(lumise.cart.qty);
13471
13472 if (isNaN(lumise.cart.qty) || lumise.cart.qty == 0)
13473 lumise.cart.qty = 1;
13474
13475 var attrs = $('.lumise-cart-attributes');
13476 attrs.find('em.lumise-required-msg').remove();
13477 attrs.find('.lumise-cart-param').each(function (ind) {
13478
13479 var field = $(this),
13480 name = field.attr('name'),
13481 found = false;
13482
13483 if (field.prop('required')) {
13484 if(
13485 this.value === '' &&
13486 invalids.indexOf(name) === -1
13487 ){
13488 invalids.push(name);
13489 invalid_fields.push(field.closest('.lumise-cart-field')[0]);
13490 field.after(
13491 '<em class="lumise-required-msg">'+
13492 lumise.i(102)+
13493 '</em>'
13494 ).closest('.lumise_form_group').shake();
13495 }
13496 }
13497 });
13498
13499 if (invalid_fields.length > 0) {
13500
13501 var wrp = $('#lumise-cart-wrp'),
13502 pos = invalid_fields[0].offsetTop;
13503
13504 if (wrp.closest('#lumise-product').length > 0) {
13505 $('#lumise-left .lumise-left-nav li[data-tab="product"]').trigger('click');
13506 $('#lumise-product').show().animate({scrollTop: pos - 20}, 400);
13507 } else wrp.animate({scrollTop: pos - 20}, 400);
13508
13509 lumise.func.notice(lumise.i(179), 'error', 3500);
13510
13511 delete cart_data;
13512 delete cart_design;
13513 return false;
13514
13515 };
13516
13517 cart_data = lumise.apply_filters('cart_data', cart_data);
13518 cart_design = lumise.apply_filters('cart_design', cart_design);
13519
13520 localStorage.setItem('LUMISE-CART-DATA', JSON.stringify(cart_data));
13521
13522 cart_design.id = id;
13523 lumise.indexed.save([cart_design], 'cart');
13524
13525 delete cart_design;
13526 delete cart_data;
13527
13528 lumise.render.cart_confirm();
13529 lumise.render.cart_change();
13530 lumise.actions.do('add-cart', id);
13531
13532 if (e != undefined && typeof e.preventDefault == 'function')
13533 e.preventDefault();
13534
13535 return true;
13536
13537 },
13538
13539 variations : function(el) {
13540
13541 if (lumise.data.variations.attrs === undefined || lumise.data.variations.attrs.indexOf(el.name) === -1)
13542 return;
13543
13544 var values = {};
13545
13546 $('.lumise-cart-attributes .lumise-cart-param:not(.disabled)').serializeArray().map(function(x){
13547 values[x.name] = x.value;
13548 });
13549
13550 var vari_data = lumise.func.process_variations(values, el);
13551
13552 // no variations change
13553 if (
13554 (
13555 vari_data.variation === null &&
13556 lumise.data.variation === null
13557 ) ||
13558 lumise.data.variation == vari_data.variation
13559 ) return lumise.render.product_attrs(vari_data);
13560
13561 lumise.data.variation = vari_data.variation;
13562
13563 if (vari_data.cfgprinting)
13564 lumise.data.printings_cfg = vari_data.printings_cfg;
13565 else lumise.data.printings_cfg = lumise.ops.product_data.printings_cfg;
13566
13567 lumise.data.printings = vari_data.printings;
13568
13569 lumise.render.product_attrs(vari_data);
13570
13571 if (vari_data.cfgstages !== true && lumise.data.cfgstages !== true)
13572 return; // no cfgstages
13573
13574 lumise.data.stages = lumise.func.keep_current_designs(vari_data.stages);
13575 lumise.data.cfgstages = vari_data.cfgstages;
13576
13577 lumise.get.el('main').find('.lumise-stage,#lumise-no-product').remove();
13578
13579 lumise.active_stage(lumise.render.stage_nav(), lumise.cart.calc);
13580
13581 lumise.actions.do('product-variation', vari_data);
13582
13583 },
13584
13585 calc : function (states_data) {
13586
13587 if (states_data == undefined)
13588 states_data = lumise.cart.printing.states_data;
13589 else
13590 lumise.cart.printing.states_data = states_data;
13591
13592 lumise.cart.data = {
13593 options : {},
13594 printing : lumise.cart.printing.current,
13595 states_data : lumise.cart.printing.states_data
13596 };
13597
13598 lumise.cart.price.attr = 0;
13599 lumise.cart.qty = 0;
13600
13601 var fields = $('.lumise-cart-attributes .lumise-cart-param:not(.disabled)').serializeArray(),
13602 attrs = lumise.ops.product_data.attributes;
13603
13604 fields.map(function (field){
13605
13606 if (attrs[field.name] == undefined)
13607 return;
13608
13609 var attr = attrs[field.name];
13610
13611 if (field.value === '') {
13612 delete lumise.cart.data.options[attr.id];
13613 } else {
13614 if (lumise.cart.data.options[attr.id] === undefined)
13615 lumise.cart.data.options[attr.id] = field.value;
13616 else lumise.cart.data.options[attr.id] += "\n"+field.value;
13617 };
13618
13619 if (attr.type == 'quantity')
13620 lumise.cart.qty += parseInt(field.value);
13621
13622 });
13623
13624 lumise.cart.price.template = {};
13625
13626 Object.keys(lumise.data.stages).map(function(s){
13627
13628 if (typeof lumise.data.stages[s].canvas !== 'undefined'){
13629
13630 var canvas = lumise.data.stages[s].canvas;
13631
13632 lumise.cart.template[s] = [];
13633 lumise.cart.price.template[s] = 0;
13634
13635 canvas.getObjects().map(function (obj){
13636
13637 if (obj.evented == true) {
13638 if (obj.price !== undefined && parseFloat(obj.price) > 0)
13639 lumise.cart.price.attr += parseFloat(obj.price);
13640 }
13641
13642 if (
13643 obj.template !== undefined &&
13644 typeof obj.template == 'object' &&
13645 lumise.cart.template[s].indexOf(obj.template[0]) === -1
13646 ) {
13647 lumise.cart.template[s].push(obj.template[0]);
13648 lumise.cart.price.template[s] += obj.template[1];
13649 }
13650
13651 });
13652
13653 }
13654 });
13655
13656 try {
13657 var vari = lumise.ops.product_data.variations.variations[lumise.data.variation];
13658 if (parseFloat(lumise.cart.qty) < parseFloat(vari.minqty))
13659 lumise.cart.qty = parseFloat(vari.minqty);
13660 if (parseFloat(lumise.cart.qty) > parseFloat(vari.maxqty))
13661 lumise.cart.qty = parseFloat(vari.maxqty);
13662 } catch(ex) {};
13663
13664 if (lumise.cart.qty === 0)
13665 lumise.cart.qty = 1;
13666
13667 $('.lumise-cart-field-quantity input[type="number"]').val(lumise.cart.qty);
13668
13669 lumise.actions.do('cart-calc');
13670 lumise.cart.display();
13671
13672 },
13673
13674 checkout: function(data) {
13675
13676 var items = [],
13677 formData = new FormData();
13678
13679 formData.append('action', 'checkout');
13680 formData.append('ajax', 'frontend');
13681 formData.append('nonce', 'LUMISE-SECURITY:'+lumise.data.nonce);
13682
13683 Object.keys(data).map(function(key) {
13684
13685 data[key].product_id = data[key].product;
13686
13687 if(data[key].product_cms !== '' )
13688 data[key].cms_id = data[key].product_cms;
13689 else
13690 data[key].cms_id = 0;
13691
13692 data[key].product_name = data[key].name;
13693
13694 formData.append(key, new Blob([JSON.stringify(lumise.apply_filters('checkout-item', data[key]))]));
13695
13696 });
13697
13698 delete data;
13699
13700 lumise.f('0% complete');
13701
13702 $.ajax({
13703 data : formData,
13704 type : "POST",
13705 url : lumise.data.ajax,
13706 contentType: false,
13707 processData: false,
13708 xhr : function() {
13709 var xhr = new window.XMLHttpRequest();
13710 xhr.upload.addEventListener("progress", function(evt){
13711
13712 if (evt.lengthComputable) {
13713 var percentComplete = evt.loaded / evt.total;
13714 if (percentComplete < 1)
13715 $('div#LumiseDesign').attr({'data-msg': parseInt(percentComplete*100)+'% upload complete'});
13716 else $('div#LumiseDesign').attr({'data-msg': lumise.i(159)});
13717 }
13718
13719 }, false);
13720 return xhr;
13721 },
13722 success: function (res, status) {
13723
13724 $('div#LumiseDesign').attr({'data-msg': lumise.i(161)});
13725
13726 if (res == '0') {
13727 alert('Error: could not checkout this time');
13728 } else window.location.href = res;
13729
13730 },
13731 error: function() {
13732 alert('Error: could not checkout this time');
13733 }
13734 });
13735
13736 return;
13737
13738
13739
13740
13741 var boundary = "---------------------------7da24f2e50046";
13742 var body = '--' + boundary + '\r\n'
13743 + 'Content-Disposition: form-data; name="file";'
13744 + 'filename="temp.txt"\r\n'
13745 + 'Content-type: plain/text\r\n\r\n'
13746 + data + '\r\n'+ '--'+ boundary + '--';
13747
13748 $.ajax({
13749 contentType: "multipart/form-data; boundary="+boundary,
13750 data: body,
13751 type: "POST",
13752 url: lumise.data.ajax+'&action=upload&ajax=frontend&nonce=LUMISE-SECURITY:'+lumise.data.nonce,
13753 xhr: function() {
13754 var xhr = new window.XMLHttpRequest();
13755 xhr.upload.addEventListener("progress", function(evt){
13756 if (evt.lengthComputable) {
13757 var percentComplete = evt.loaded / evt.total;
13758 if (percentComplete < 1)
13759 $('div#LumiseDesign').attr({'data-msg': parseInt(percentComplete*100)+'% upload complete'});
13760 else $('div#LumiseDesign').attr({'data-msg': lumise.i(159)});
13761 }
13762 }, false);
13763 return xhr;
13764 },
13765 success: function (res, status) {
13766
13767 $('div#LumiseDesign').attr({'data-msg': lumise.i(161)});
13768
13769 res = JSON.parse(res);
13770
13771 if (res.success !== undefined) {
13772 $('<form>', {
13773 "id": "lumise-checkout",
13774 "method": "POST",
13775 "html": '<input type="hidden" name="file" value="'+res.success+'"/>\
13776 <input type="hidden" name="datalen" value="'+data.length+'"/>\
13777 <input type="hidden" name="action" value="process"/>\
13778 <input type="hidden" name="nonce" value="LUMISE-SECURITY:'+lumise.data.nonce+'"/>',
13779 "action": lumise.data.checkout_url
13780 }).appendTo(document.body).submit();
13781 } else {
13782 alert('Error: could not checkout this time');
13783 }
13784 },
13785 error: function() {
13786 alert('Error: could not checkout this time');
13787 }
13788 });
13789
13790 },
13791
13792 /*
13793 * @param data - Product object
13794 */
13795
13796 render : function (data) {
13797
13798 var attr = {},
13799 wrp = lumise.get.el('cart-attributes');;
13800
13801 wrp.html('');
13802
13803 if (data === undefined)
13804 return;
13805
13806 lumise.cart.printing.render(data.printing);
13807
13808 lumise.cart.price.base = parseFloat(data.price);
13809
13810 var cart = localStorage.getItem('LUMISE-CART-DATA'),
13811 cur = lumise.func.url_var('cart', '');
13812
13813 if (cart !== '')
13814 cart = JSON.parse(cart);
13815 else cart = {};
13816
13817 Object.keys(data.attributes).map(function (k){
13818
13819 var attr = data.attributes[k];
13820
13821 lumise.ops.product_data.attributes[k].allows = attr.allows;
13822
13823 if (attr.value === undefined)
13824 attr.value = '';
13825
13826 if (attr.id === undefined)
13827 attr.id = lumise.cart.slug(attr.name);
13828
13829 wrp.append(lumise.cart.fields.render(attr));
13830
13831 });
13832
13833 wrp.append(
13834 '<div class="lumise-cart-field how-calculate">\
13835 <a href="#formula">\
13836 '+lumise.i(180)+'\
13837 <i class="lumisex-ios-arrow-forward"></i>\
13838 </a>\
13839 </div>'
13840 );
13841
13842 lumise.trigger({
13843 el: wrp,
13844 events : {
13845 '.lumise-cart-param:change' : 'calc_cart',
13846 'a[href="#formula"]': 'formula'
13847 },
13848 calc_cart : function (e){
13849
13850 $('#lumise-cart-attributes em.lumise-required-msg').remove();
13851
13852 lumise.cart.variations(this);
13853 lumise.cart.calc();
13854
13855 lumise.render.cart_change();
13856 lumise.actions.do('cart-changed', true);
13857
13858 },
13859 formula : function(e) {
13860
13861 e.preventDefault();
13862
13863 var sum = lumise.cart.sum_calc(),
13864 table = '',
13865 print_detail = false;
13866
13867 if (lumise.data.printings.length > 0) {
13868
13869 var print = lumise.data.printings.filter(function(p) {
13870 return p.id == lumise.cart.printing.current;
13871 });
13872
13873 print_detail = (
13874 print.length > 0 && (
13875 print[0].description !== '' ||
13876 (
13877 typeof print[0].calculate['show_detail'] !== 'undefined' &&
13878 print[0].calculate.show_detail == 1
13879 )
13880 ) &&
13881 lumise.cart.printing.calc(lumise.cart.qty) > 0
13882 ) ? true : false;
13883
13884 };
13885
13886 var varitxt = '',
13887 vr = (
13888 lumise.ops.product_data.variations !== undefined &&
13889 lumise.ops.product_data.variations.variations !== undefined &&
13890 lumise.ops.product_data.variations.variations[lumise.data.variation] !== undefined
13891 ) ? lumise.ops.product_data.variations.variations[lumise.data.variation] : null;
13892
13893 if (lumise.data.variation !== null && vr !== null) {
13894 varitxt += '<p class="notice">'+
13895 lumise.i(193)+' <strong>#'+lumise.data.variation+'</strong>'+
13896 (vr.price !== '' ? ', '+lumise.i(182)+': <strong>'+vr.price+'</strong>' : '')+
13897 (vr.minqty !== '' ? ', min-qty: <strong>'+vr.minqty+'</strong>' : '')+
13898 (vr.maxqty !== '' ? ', max-qty: <strong>'+vr.maxqty+'</strong>' : '')+
13899 '</p>';
13900 }
13901
13902 lumise.tools.lightbox({
13903 content: '<div class="lumise_content lumise_wrapper_table">\
13904 <h3 class="title">'+lumise.i(180)+' ('+lumise.i(181)+')</h3>\
13905 <div id="lumise-formula-detail">\
13906 '+varitxt+'\
13907 <table>\
13908 <tr>\
13909 <td style="width:20%;text-align: left">'+lumise.i(182)+'</td>\
13910 <td>'+lumise.func.price(sum.base)+'</td>\
13911 </tr>\
13912 <tr>\
13913 <td style="width:20%;text-align: left">'+lumise.i(91)+'</td>\
13914 <td>'+lumise.func.price(sum.template)+'</td>\
13915 </tr>\
13916 <tr>\
13917 <td style="width:20%;text-align: left">'+lumise.i(108)+'</td>\
13918 <td>'+
13919 lumise.func.price(lumise.cart.printing.calc(lumise.cart.qty))+
13920 (
13921 print_detail ?
13922 ' <a href="#" data-print="'+print[0].id+'">'+
13923 lumise.i(68)+
13924 ' <i class="lumisex-android-open"></i></a>' : ''
13925 )+
13926 '</td>\
13927 </tr>\
13928 <tr>\
13929 <td style="width:20%;text-align: left">'+lumise.i(183)+'</td>\
13930 <td>'+lumise.func.price(sum.ext)+'</td>\
13931 </tr>\
13932 <tr>\
13933 <td style="width:20%;text-align: left">'+lumise.i(74)+'</td>\
13934 <td><strong>'+lumise.func.price(
13935 sum.ext+
13936 sum.base+
13937 sum.template+
13938 lumise.cart.printing.calc(lumise.cart.qty)
13939 )+'</strong> x '+lumise.cart.qty+' qty</td>\
13940 </tr>\
13941 </table>\
13942 </div>\
13943 </div>'
13944 });
13945
13946 $('#lumise-formula-detail a[data-print]').on('click', function(e) {
13947 e.preventDefault();
13948 lumise.func.print_detail(this.getAttribute('data-print'));
13949 });
13950
13951 }
13952 });
13953
13954 lumise.cart.calc();
13955
13956 lumise.trigger({
13957 el : $('.lumise-add-cart-btn'),
13958 events : {
13959 ':click' : 'submit_cart'
13960 },
13961 submit_cart : function (e){
13962 var form = $('#lumise-cart-form');
13963
13964 form.find('input[name=data]').val(JSON.stringify(lumise.cart.data));
13965 form.find('input[name=product]').val(lumise.data.product);
13966 form.submit();
13967 }
13968 });
13969
13970 lumise.actions.do('cart-render', wrp);
13971
13972 },
13973
13974 validate_file : function(file) {
13975
13976 if (
13977 [
13978 'image/png',
13979 'image/jpeg',
13980 'image/gif',
13981 'image/svg+xml',
13982 'application/zip',
13983 'text/plain',
13984 '.docx'
13985 ].indexOf(file.type) === -1
13986 )
13987 return false;
13988
13989 if (file.size > 5242880)
13990 return false;
13991
13992 return true;
13993
13994 },
13995
13996 slug : function (str, decode){
13997 if(decode == undefined)
13998 return encodeURIComponent(str);
13999 else
14000 return decodeURIComponent(str);
14001 },
14002
14003 fields : {
14004
14005 render : function(data) {
14006
14007 var lac = lumise.attributes_cfg[data.type];
14008
14009 if (lac === undefined || lac.render === undefined || lac.render === '')
14010 return '';
14011
14012 if (typeof lac.frontend_render != 'function') {
14013 try {
14014 lac.frontend_render = Function("data", "$", "lumise", lac.render);
14015 } catch (ex) {
14016 return $('<p>JS Error: field render <b>'+data.type+'</b> :: '+ex.message+'</p>');
14017 }
14018 };
14019
14020 if (typeof data.value == 'object')
14021 data.value = data.value[0];
14022
14023 if (typeof data.values != 'object') {
14024
14025 if (typeof data.values == 'string') {
14026
14027 var values = data.values.split(decodeURI('%0A'));
14028
14029 if (data.use_variation === true) {
14030 data.required = true;
14031 data.values = [{value: '', title: lumise.i(178)}];
14032 } else data.values = [];
14033
14034 values.map(function(q) {
14035
14036 q = q.split('|');
14037
14038 if (
14039 typeof data.allows == 'object' &&
14040 data.allows.indexOf(q[0].trim()) === -1
14041 ) return;
14042
14043 data.values.push({
14044 value: q[0].trim(),
14045 title: (q[1] !== undefined ? q[1].trim() : q[0].trim())
14046 });
14047
14048 });
14049
14050 } else if (data.options !== undefined) {
14051 data.values = [];
14052 data.options.map(function(op) {
14053 data.values.push({
14054 value: op.quantity !== undefined ? op.quantity : '',
14055 title: op.title !== undefined ? op.title : ''
14056 });
14057 });
14058 }
14059 };
14060
14061 if (data.id === undefined)
14062 data.id = encodeURIComponent(data.name);
14063
14064 var field = $('<div data-type="'+data.type+'" data-id="'+(
14065 data.id !== undefined ? data.id : ''
14066 )+'" class="lumise-cart-field field-inline">\
14067 <div class="lumise_form_group">\
14068 <span class="lumise-cart-field-label">'+
14069 (data.name)+': '+
14070 (data.required ? ' <em class="required">*</em>' : '')+'\
14071 </span>\
14072 <div class="lumise_form_content"></div>\
14073 </div>\
14074 </div>'),
14075 inp = lac.frontend_render(data, $, lumise);
14076
14077 field.find('div.lumise_form_content').append(inp);
14078
14079 return field;
14080
14081 },
14082
14083 printing : function (data){
14084
14085 var field_tpml = $('<div class="lumise_radios">\
14086 <div class="lumise-radio">\
14087 <input type="radio" class="lumise-cart-param" name="printing" value="1" id="" required>\
14088 <label class="lumise-cart-option-label" for=""></label>\
14089 </div>\
14090 </div>'),
14091 label = field_tpml.find('.lumise-cart-field-label'),
14092 inp = field_tpml.find('.lumise-cart-param');
14093
14094 label.html((data.label ? data.label : data.title)+': '+(data.required ? '<em class="required">*</em>' : '') + ' <em class="lumise-required-msg"></em>');
14095
14096 inp.attr('name', data.name);
14097
14098 if(!data.required) inp.removeAttr("required");
14099
14100 return {el: field_tpml, inp:inp, label : label};
14101 }
14102
14103 },
14104
14105 display : function () {
14106
14107 var price = lumise.cart.get_price(true);
14108
14109 $('.lumise-product-price').html(
14110 lumise.func.price(price[0].toFixed(2))
14111 );
14112 $('#lumise-product-attributes .lumise-product-price').append(
14113 '<avg>\
14114 <strong>'+
14115 lumise.i(156)+
14116 ':</strong> '+
14117 (lumise.func.price((price[0]/price[1]).toFixed(1)))+'/'+lumise.i(157)+
14118 '</avg>'
14119 );
14120 },
14121
14122 printing : {
14123
14124 price : 0,
14125
14126 states_data : {},
14127
14128 current : null,
14129
14130 render : function (active){
14131
14132 lumise.cart.printing.price = 0;
14133 lumise.cart.printing.current = active ? active : null;
14134
14135 $('#lumise-cart-wrp .lumise-prints').html('');
14136 if (!lumise.data.printings || lumise.data.printings.length === 0)
14137 return;
14138
14139 var wrp = $('<div class="lumise-cart-field">\
14140 <div class="lumise_form_group">\
14141 <span class="lumise-cart-field-label">'+lumise.i(64)+' <em class="required">*</em></span>\
14142 <div class="lumise_form_content">\
14143 <div class="lumise_radios"></div>\
14144 </div>\
14145 </div>\
14146 </div>');
14147
14148 lumise.data.printings.map(function (print, index){
14149
14150 print.thumbnail = print.thumbnail || lumise.data.assets + 'assets/images/print-default.jpg';
14151
14152 var id = 'lumise-printing-' + print.id,
14153 show_link = (
14154 print.description !== '' ||
14155 (
14156 typeof print.calculate['show_detail'] !== 'undefined' &&
14157 print.calculate.show_detail == 1
14158 )
14159 ) ? true : false,
14160 new_op = $('<div class="lumise-radio">\
14161 <input type="radio" class="lumise-cart-param" name="printing" value="'+print.id+
14162 '" data-id="'+print.id+'" id="'+id+'" required>\
14163 <label class="lumise-cart-option-label" for="'+id+'">\
14164 <div class="lumise-cart-option-thumb">\
14165 <img src="'+print.thumbnail+'" alt="" />\
14166 </div>\
14167 <div class="lumise-desc">\
14168 <span>' + print.title + '</span>' +
14169 ( show_link ? ' <a href="#" class="lumise-color lumise-print-detail" data-id="'+
14170 print.id+'">'+ lumise.i(68) +'</a>' : '')+'</div>\
14171 </label>\
14172 </div>');
14173
14174 lumise.trigger({
14175 el : new_op,
14176 events : {
14177 'a.lumise-print-detail' : 'price_table',
14178 'input:change' : 'select_printing',
14179 },
14180 price_table : function (e){
14181
14182 e.preventDefault();
14183
14184 lumise.func.print_detail(this.getAttribute('data-id'));
14185
14186 },
14187 select_printing : function (e){
14188 lumise.cart.printing.current = parseInt($(this).val());
14189 lumise.cart.calc();
14190 }
14191 });
14192
14193 wrp.find('div.lumise_radios').append(new_op);
14194
14195 if (print.active === true)
14196 lumise.cart.printing.current = print.id;
14197
14198 });
14199
14200 $('.lumise-prints').append(wrp);
14201
14202 if (lumise.cart.printing.current === null && lumise.data.printings.length > 0) {
14203 lumise.data.printings[0].active = true;
14204 lumise.cart.printing.current = lumise.data.printings[0].id;
14205 }
14206
14207 if (lumise.cart.printing.current !== null)
14208 $('#lumise-printing-'+lumise.cart.printing.current).trigger('click');
14209
14210 },
14211
14212 calc : function (qty) {
14213
14214 if(
14215 lumise.data.printings.length == 0 ||
14216 lumise.cart.printing.current == null
14217 ) return 0;
14218
14219 var print = null,
14220 rules = {},
14221 stage = '',
14222 qtys = [],
14223 rule = [],
14224 price = 0,
14225 colors = [],
14226 states_data = lumise.cart.printing.states_data,
14227 print_type = '',
14228 index = -1,
14229 total_res = 0;
14230
14231 var match_print = lumise.data.printings.filter(function (p){
14232 return (lumise.cart.printing.current == p.id);
14233 });
14234
14235 if (match_print.length > 0) {
14236
14237 print = match_print[0];
14238
14239 if (typeof print.calculate == 'string')
14240 print.calculate = lumise.func.dejson(print.calculate);
14241
14242 print_type = print.calculate.type;
14243 rules = print.calculate.values;
14244
14245 } else return 0;
14246
14247 if (typeof rules === 'undefined')
14248 return 0;
14249
14250 var indx = 0;
14251
14252 for (var s in states_data){
14253
14254 stage = indx;
14255
14256 if(!print.calculate.multi){
14257 stage = 0;
14258 }
14259
14260 stage = Object.keys(rules)[stage];
14261 qtys = rules[stage] ? Object.keys(rules[stage]) : [];
14262
14263 if(qtys.length == 0) continue;
14264
14265 qtys.sort(function(a, b){return parseInt(a)-parseInt(b)});
14266
14267 for (var i=0; i < qtys.length; i++){
14268 if(
14269 (
14270 !isNaN(qtys[i]) &&
14271 parseInt(qtys[i]) < qty
14272 ) ||
14273
14274 (
14275 isNaN(qtys[i]) &&
14276 qtys[i].indexOf('>') > -1 &&
14277 (parseInt(qtys[i].replace('>')) + 1) <= qty
14278 )
14279 ){
14280 index = i;
14281 }
14282 }
14283
14284
14285 if(qtys[index+1] !== undefined )
14286 rule = rules[stage][qtys[index+1]];
14287 else
14288 rule = rules[stage][qtys[index]];
14289
14290
14291 total_res = 0;
14292
14293 for ( var key in states_data[s] ) {
14294
14295 var unit = states_data[s][key],
14296 option = key;
14297
14298 if (
14299 print_type == 'color' &&
14300 key == 'colors' &&
14301 states_data[s][key].length > 0
14302 ) {
14303 unit = 1;
14304 option = states_data[s][key].length + '-color';
14305 option = (typeof rule[option] === 'undefined') ? 'full-color' : option;
14306 price += (typeof rule[option] !== 'undefined') ? parseFloat(rule[option]) : 0;
14307 }
14308
14309 if (
14310 print_type !== 'color' &&
14311 typeof rule[option] !== 'undefined'
14312 ) {
14313 price += rule[option] * unit;
14314 }
14315
14316 if (
14317 typeof states_data[s][key] !== 'array' &&
14318 parseInt(states_data[s][key]) > 0
14319 ) {
14320 total_res++;
14321 }
14322
14323 }
14324
14325 if(
14326 print_type == 'size'
14327 && total_res > 0
14328 && lumise.data.printings_cfg !== undefined
14329 ){
14330 var cur = lumise.cart.printing.current,
14331 ptrcfg = lumise.data.printings_cfg,
14332 product_size = ptrcfg['_'+cur] !== undefined ? ptrcfg['_'+cur] : ptrcfg[cur];
14333
14334 price += (
14335 typeof product_size !== 'undefined' &&
14336 typeof rule[product_size] !== 'undefined'
14337 ) ? parseFloat(rule[product_size]) : 0;
14338
14339 if(!print.calculate.multi)
14340 return price;
14341
14342 }
14343
14344 if ( print_type == 'fixed' && total_res > 0 ) {
14345 if ( typeof rule['price'] !== 'undefined' ) {
14346 price += parseFloat(rule.price);
14347 if ( !print.calculate.multi )
14348 return price;
14349 }
14350 }
14351
14352 indx++;
14353
14354 };
14355
14356 return price;
14357
14358 }
14359 },
14360
14361 edit_item : function (id, e) {
14362
14363 var items = JSON.parse(localStorage.getItem('LUMISE-CART-DATA')),
14364 cart = items[id];
14365
14366 if (cart) {
14367 lumise.get.el('general-status').html(
14368 '<span>\
14369 <text><i class="lumisex-android-alert"></i> '+lumise.i(115)+'</text> \
14370 <a href="#clear-designs" data-btn="cancel" data-func="clear-designs">\
14371 '+lumise.i(185)+'\
14372 </a>\
14373 </span>'
14374 );
14375
14376 lumise.actions.do('cart_edit', lumise.apply_filters('cart_edit', cart));
14377
14378 delete data;
14379 };
14380
14381 if (e && typeof e.preventDefault == 'function')
14382 e.preventDefault();
14383
14384 },
14385
14386 do_checkout : function(e) {
14387
14388 if (e !== undefined && typeof e.preventDefault == 'function')
14389 e.preventDefault();
14390
14391 var donow = function() {
14392 try {
14393
14394 var data = JSON.parse(localStorage.getItem('LUMISE-CART-DATA')),
14395 count = 0,
14396 get_design = function(res){
14397 count ++;
14398 data[res.id].design = res;
14399
14400 if (count === Object.keys(data).length) {
14401 lumise.actions.do('checkout', lumise.apply_filters('checkout', data));
14402 }else lumise.f(false);
14403
14404 };
14405
14406 lumise.f(lumise.i(44));
14407
14408 Object.keys(data).map(function(key) {
14409 lumise.indexed.get(key, 'cart', get_design);
14410 });
14411
14412
14413 } catch(ex) {
14414 console.warn(ex);
14415 console.log(ex);
14416 }
14417 };
14418
14419 if (lumise.data.conditions !== '') {
14420 var content = lumise.func.dejson(lumise.data.conditions).replace(/\>/g, '>').replace(/\</g, '<')+'<em><input type="checkbox" id="condition-agree" /> <label for="condition-agree">'+lumise.i(177)+' <font color="red">*</font></label></em>';
14421 lumise.func.confirm({
14422 title: content,
14423 primary: {
14424 text: lumise.i(175),
14425 callback: function(e) {
14426 if (lumise.get.el('confirm').find('input[type="checkbox"]').prop('checked') !== true) {
14427 lumise.get.el('confirm').find('input[type="checkbox"]').shake();
14428 return false;
14429 } else donow();
14430 }
14431 },
14432 second: {}
14433 });
14434 } else donow();
14435
14436 }
14437
14438 },
14439
14440 load : function() {
14441
14442 if (typeof LumiseDesign != 'function')
14443 return;
14444
14445 if (!LumiseDesign(this))
14446 return;
14447
14448 this.html = document.querySelector('html');
14449 this.body = document.querySelector('body');
14450
14451 if (!this.func.get_cookie('lumise-AID'))
14452 this.func.set_cookie('lumise-AID', Math.random().toString(36).substr(2));
14453
14454 /*
14455 * Start to load when everything is ready
14456 */
14457
14458 fabric.Object.prototype.set({
14459 cornerSize: this.mode == 'basic' ? 14 : 22,
14460 borderColor: 'rgba(205,205,205,0.5)',
14461 centeredRotation: true,
14462 centeredScaling: true,
14463 rotatingPointOffset: this.mode == 'basic' ? 50 : 0,
14464 });
14465
14466 for(var n in this.extends.controls) {
14467 fabric.Object.prototype[n] = this.extends.controls[n];
14468 };
14469
14470 for(var n in this.extends.canvas) {
14471 fabric.Canvas.prototype[n] = this.extends.canvas[n];
14472 };
14473
14474 this.actions.add('object:selected', function(opts){
14475
14476 var selected = [],
14477 s = lumise.stage();
14478
14479 if (lumise.func.ctrl_btns(opts) === true)
14480 return;
14481
14482 if (s.canvas.getActiveObject()) {
14483
14484 selected.push (s.canvas.getActiveObject());
14485 lumise.tools.set();
14486
14487 }else{
14488 selected = s.canvas.getActiveGroup()._objects;
14489 lumise.e.tools.attr({'data-view': 'default'});
14490 }
14491
14492 lumise.e.layers.find('li[data-id].active').removeClass('active');
14493
14494 if (selected.length === 0)
14495 return;
14496
14497 s.limit_zone.set('visible', true);
14498
14499 selected.map(function(obj){
14500
14501 if (obj.selectable !== false)
14502 lumise.e.layers.find('li[data-id="'+obj.id+'"]').addClass('active');
14503
14504 });
14505
14506
14507 });
14508
14509 this.actions.add('object:added', function(opts){
14510
14511 var date = new Date(),
14512 obj = opts.target,
14513 click = false;
14514
14515 if (obj.id === undefined)
14516 obj.set('id', parseInt(date.getTime()/1000).toString(36)+'-'+(Math.random().toString(36).substr(2)));
14517 else if (obj.id.indexOf(':') > -1)
14518 obj.set('id', obj.id.replace(/\:/g, '-'));
14519 else if (obj.id.indexOf('-') === -1)
14520 obj.set('id', parseInt(date.getTime()/1000).toString(36)+'-'+obj.id);
14521
14522 if (obj.origin_src === undefined && obj._element && obj._element)
14523 obj.set('origin_src', obj._element.src);
14524
14525 if (obj.type == 'i-text')
14526 obj.set('padding', 5);
14527
14528 if (obj.evented === false)
14529 return;
14530
14531 switch (obj.type) {
14532 case 'i-text':
14533 obj.set('thumbn', '<i class="lumisex-character layer-type" style="color:%color%;background:%bgcolor%"></i>');
14534 break;
14535 case 'curvedText':
14536 obj.set('thumbn', '<i class="lumisex-vector layer-type" style="color:%color%;background:%bgcolor%"></i>');
14537 break;
14538 case 'image':
14539
14540 lumise.func.createThumbn({
14541 source: obj.src,
14542 width: 50,
14543 height: 50,
14544 callback: function(canvas) {
14545 obj.set('thumbn', '<img class="layer-type" style="background:%color%" src="'+(canvas.toDataURL('image/jpeg'))+'" />');
14546 if (obj.colors === undefined)
14547 obj.set('colors', lumise.func.count_colors(canvas, true));
14548 }
14549 });
14550
14551 break;
14552 case 'qrcode':
14553 obj.set('thumbn', '<i class="lumisex-qrcode-1 layer-type" style="color:%color%;background:%bgcolor%"></i>');
14554 break;
14555 case 'path':
14556 obj.set('thumbn', '<i class="lumise-icon-graph layer-type" style="color:%color%;background:%bgcolor%"></i>');
14557 break;
14558 case 'svg':
14559 lumise.func.createThumbn({
14560 source: obj.src,
14561 width: 24,
14562 height: 24,
14563 callback: function(canvas) {
14564 obj.set('thumbn', '<img class="layer-type" style="background:%color%" src="'+(canvas.toDataURL('image/jpeg', .5))+'" />');
14565 }
14566 });
14567 break;
14568 default:
14569 obj.set('thumbn', '<i class="lumise-icon-picture layer-type" style="color:%color%;background:%bgcolor%"></i>');
14570 break;
14571 };
14572
14573 lumise.func.font_blob(obj);
14574
14575 });
14576
14577 this.actions.add('selection:cleared', function(){
14578 lumise.e.tools.attr({'data-view': 'standard'});
14579 lumise.stage().limit_zone.set('visible', false);
14580 });
14581
14582 this.actions.add('key-move', function(e) {
14583
14584 var canvas = lumise.stage().canvas,
14585 active = canvas.getActiveObject() || canvas.getActiveGroup();
14586
14587 if (active === null || active === undefined)
14588 return;
14589
14590 var left = active.left,
14591 top = active.top;
14592
14593 if (active) {
14594
14595 e.preventDefault();
14596
14597 switch (e.keyCode) {
14598
14599 case 37 : // left
14600 left = active.left - (e.shiftKey ? 10 : 1);
14601 break;
14602 case 38 : // up
14603 top = active.top - (e.shiftKey ? 10 : 1);
14604 break;
14605 case 39 : // right
14606 left = active.left + (e.shiftKey ? 10 : 1);
14607 break;
14608 case 40 : // down
14609 top = active.top + (e.shiftKey ? 10 : 1);
14610 break;
14611
14612 }
14613
14614 if (active.group_pos) {
14615 canvas.getObjects().map(function(o) {
14616 if (o.group_pos && o.id != active.id) {
14617 o.set({
14618 left: o.left + (left-active.left),
14619 top: o.top + (top-active.top),
14620 });
14621 }
14622 });
14623 };
14624
14625 active.set({top: top, left: left});
14626 canvas.renderAll();
14627
14628 }
14629 });
14630
14631 this.actions.add('key-enter', function(e) {
14632 return lumise.stage().canvas.deactivateAllWithDispatch().renderAll();
14633 });
14634
14635 this.actions.add('key-esc', function(e) {
14636 if (lumise.stage().canvas.isDrawingMode === true) {
14637 lumise.get.el('discard-drawing').trigger('click');
14638 }
14639 });
14640
14641 this.actions.add('ctrl-z', lumise.stack.back);
14642
14643 this.actions.add('ctrl-shift-z', lumise.stack.forward);
14644
14645 this.actions.add('ctrl-a', function(e) {
14646
14647 if (e.target.tagName == 'INPUT' || e.target.getAttribute('contenteditable') !== null) {
14648 return true;
14649 }
14650
14651 var canvas = lumise.stage().canvas;
14652 var objs = canvas.getObjects().filter(function(o) {
14653 if (o.evented === true && (o.imagebox === undefined || o.imagebox === '')) {
14654 o.set('active', true);
14655 return true;
14656 } else return false;
14657 });
14658
14659 if (objs.length === 0) {
14660 e.preventDefault();
14661 return false;
14662 }
14663
14664 var group = new fabric.Group(objs, {
14665 originX: 'center',
14666 originY: 'center'
14667 });
14668
14669 canvas._activeObject = null;
14670
14671 canvas.setActiveGroup(group.setCoords()).renderAll();
14672
14673 lumise.objects.events['mouse:up'](e);
14674
14675 e.preventDefault();
14676 return false;
14677
14678 });
14679
14680 this.actions.add('ctrl-d', function(e) {
14681
14682 var canvas = lumise.stage().canvas,
14683 active = canvas.getActiveObject();
14684
14685 if (active) {
14686 active.clone(function(c) {
14687 canvas.add(c.set({
14688 left: c.left*1.1,
14689 top: c.top+(c.left*1.1-c.left),
14690 clipTo: function(ctx) {
14691 return lumise.objects.clipto(ctx, c);
14692 }
14693 }));
14694 });
14695
14696 setTimeout(function(){lumise.stage().canvas.renderAll();}, 150);
14697 lumise.design.layers.build();
14698
14699 }
14700
14701 e.preventDefault();
14702 return false;
14703
14704 });
14705
14706 this.actions.add('ctrl+', function(e) {
14707 lumise.get.el('zoom').val(parseInt(lumise.get.el('zoom').val())+20).trigger('input');
14708 e.preventDefault();
14709 return false;
14710 });
14711
14712 this.actions.add('ctrl-', function(e) {
14713 lumise.get.el('zoom').val(parseInt(lumise.get.el('zoom').val())-20).trigger('input');
14714 e.preventDefault();
14715 return false;
14716 });
14717
14718 this.actions.add('ctrl-0', function(e) {
14719 lumise.get.el('zoom').val(100).trigger('input');
14720 e.preventDefault();
14721 return false;
14722 });
14723
14724 this.actions.add('ctrl-s', function(e) {
14725
14726 e.preventDefault();
14727
14728 if (lumise.func.url_var('cart', '') !== '')
14729 return lumise.cart.add_cart(e);
14730 else return lumise.func.export('designs');
14731
14732 return false;
14733
14734 });
14735
14736 this.actions.add('key-delete', function(e) {
14737
14738 var canvas = lumise.stage().canvas,
14739 objs = canvas.getActiveGroup() ? canvas.getActiveGroup()._objects : canvas.getObjects(),
14740 elms = [];
14741
14742 objs.map(function(o){
14743 if (o.evented === true && o.active === true)
14744 elms.push(o);
14745 });
14746
14747 lumise.stack.save();
14748 lumise.tools.discard();
14749
14750 elms.map(function(el) {
14751 canvas.remove(el);
14752 });
14753
14754 canvas.renderAll();
14755
14756 lumise.stack.save();
14757 lumise.design.layers.build();
14758
14759 lumise.actions.do('object:remove');
14760
14761 });
14762
14763 this.actions.add('save', lumise.func.update_state);
14764
14765 this.actions.add('cart_edit', function(ops) {
14766
14767 $('.lumise-lightbox').remove();
14768
14769 lumise.indexed.get(ops.id, 'cart', function(res){
14770
14771 lumise.func.load_product({
14772 id: ops.product,
14773 cms: ops.product_cms,
14774 printing: ops.printing,
14775 options: ops.options,
14776 template: ops.template,
14777 stages: res.stages,
14778 callback: function(res) {
14779
14780 if (res.id === undefined) {
14781 lumise.f(false);
14782 lumise.func.notice('ERROR_LOAD_PRODUCT', 'error', 3500);
14783 return;
14784 } else {
14785
14786 lumise.get.el('general-status').html(
14787 '<span>\
14788 <text>\
14789 <i class="lumisex-android-alert"></i> '+
14790 lumise.i(186)+
14791 ' <strong>#'+ops.id+'</strong></text>\
14792 <a href="#cancel-design" data-btn="cancel" data-func="cancel-design">\
14793 '+lumise.i(187)+'\
14794 </a>\
14795 </span>'
14796 );
14797
14798 }
14799 }
14800 });
14801 });
14802
14803 lumise.func.clear_url();
14804 lumise.func.set_url('cart', ops.id);
14805
14806 lumise.render.cart_change();
14807
14808 });
14809
14810 this.actions.add('active_stage', function(){
14811
14812 var bg = [],
14813 mo = '';
14814
14815 if (typeof lumise.cart.printing.states_data[lumise.current_stage] !== 'undefined'){
14816
14817 var stage_colors = lumise.cart.printing.states_data[lumise.current_stage].colors;
14818 for (var i=0; i<6; i++) {
14819 if (stage_colors[i])
14820 bg.push(stage_colors[i]);
14821 }
14822
14823 if (stage_colors.length > 6)
14824 mo = (stage_colors.length-6)+'+';
14825 }
14826
14827 $('#lumise-count-colors i').html(mo).css({background: 'linear-gradient(to right, '+bg.join(', ')+')'});
14828
14829 });
14830
14831 this.actions.add('db-ready', function(){
14832
14833 try {
14834 var cart_data = JSON.parse(localStorage.getItem('LUMISE-CART-DATA'));
14835 }catch(ex){
14836 var cart_data = null;
14837 };
14838
14839 var has_cart = false;
14840
14841 if (lumise.func.url_var('cart', '') !== '') {
14842
14843 if (cart_data !== null && cart_data[lumise.func.url_var('cart')] !== undefined)
14844 has_cart = true;
14845 else lumise.func.notice(lumise.i(120), 'error', 3500);
14846
14847 };
14848
14849 if (has_cart === true) {
14850
14851 lumise.cart.edit_item(lumise.func.url_var('cart'));
14852
14853 } else if (lumise.func.url_var('my_design', '') !== '') {
14854 var design_id = lumise.func.url_var('my_design');
14855 lumise.indexed.get(design_id, 'designs', function(design){
14856 lumise.indexed.get(design_id, 'dumb', function(res){
14857 if (design !== null && res !== null) {
14858 design.stages = res.stages;
14859 lumise.func.edit_design(design);
14860 } else {
14861 lumise.func.notice(lumise.i(166), 'error', 3500);
14862 }
14863 });
14864 });
14865 } else if (lumise.data.onload) {
14866
14867 lumise.f(lumise.i('importing')+'..');
14868
14869 lumise.func.set_url('cart', null);
14870
14871 setTimeout(function(){
14872
14873 if (lumise.data.share !== undefined) {
14874 Object.keys(lumise.data.onload.stages).map(function(s){
14875 delete lumise.data.onload.stages[s].template;
14876 });
14877 };
14878
14879 lumise.render.product(lumise.data.onload);
14880
14881 delete lumise.data.onload;
14882
14883 }, 100);
14884
14885 } else if (lumise.func.url_var('reorder', '') === '' && lumise.get.el('no-product').length > 0) {
14886
14887 lumise.f(false);
14888 lumise.actions.do('noproduct');
14889
14890 };
14891
14892 if (lumise.data.share_invalid !== undefined) {
14893 lumise.func.confirm({
14894 title: lumise.data.share_invalid,
14895 primary: {},
14896 second: {
14897 text: 'Ok'
14898 },
14899 type: 'error'
14900 });
14901 };
14902
14903 /* Clear unuse cart data in DB */
14904 var carts = localStorage.getItem('LUMISE-CART-DATA');
14905
14906 if (carts && carts !== '') {
14907 carts = Object.keys(JSON.parse(carts));
14908 lumise.indexed.list(function(data){
14909 if (carts.indexOf(data.id) === -1)
14910 lumise.indexed.delete(data.id, 'cart');
14911 }, 'cart', function(st){
14912 if (st == 'done') {
14913 lumise.ops.cart_cursor = null;
14914 }
14915 });
14916 }
14917
14918 });
14919
14920 this.actions.add('first-completed', function(){
14921
14922 if (lumise.func.url_var('cart', '') != '') {
14923
14924 lumise.get.el('general-status').html(
14925 '<span>\
14926 <text><i class="lumisex-android-alert"></i> '+lumise.i(115)+'</text> \
14927 <a href="#clear-designs" data-btn="cancel" data-func="clear-designs">\
14928 '+lumise.i(185)+'\
14929 </a>\
14930 </span>'
14931 );
14932
14933 } else if (lumise.func.url_var('order_print', '') !== '') {
14934 $('#lumise-general-status').html(
14935 '<span>\
14936 <text>\
14937 <i class="lumisex-android-alert"></i> '+
14938 lumise.i(122)+' #'+lumise.func.url_var('order_print')+
14939 '</text>\
14940 </span>'
14941 );
14942 if (lumise.func.url_var('design_print', '') !== '') {
14943
14944 lumise.f('Loading..');
14945
14946 $.ajax({
14947 url: lumise.data.upload_url+'designs/'+lumise.func.url_var('design_print', '')+'.lumi',
14948 method: 'GET',
14949 dataType: 'JSON',
14950 statusCode: {
14951 403: lumise.response.statusCode[403],
14952 404: function(){
14953 lumise.func.notice(lumise.i(123), 'error', 3500);
14954 lumise.f(false);
14955 },
14956 200: function(res) {
14957
14958 if (res === null) {
14959 lumise.func.notice(lumise.i(166), 'error', 3500);
14960 lumise.f(false);
14961 return;
14962 };
14963
14964 lumise.func.clear_url(['design_print', 'order_print']);
14965
14966 lumise.func.load_product({
14967 id: res.product,
14968 cms: res.product_cms,
14969 printing: res.printing,
14970 options: res.options,
14971 template: res.template,
14972 stages: res.stages,
14973 callback: function(res) {
14974
14975 if (res.id === undefined) {
14976 lumise.f(false);
14977 lumise.func.notice('ERROR_LOAD_PRODUCT', 'error', 3500);
14978 return;
14979 } else {
14980
14981 lumise.get.el('general-status').html(
14982 '<span>\
14983 <text>\
14984 <i class="lumisex-android-alert"></i> '+
14985 lumise.i(192)+
14986 ' <strong>#'+lumise.func.url_var('order_print')+'</strong></text>\
14987 </span>'
14988 );
14989
14990 //lumise.get.el('navigations').find('li[data-tool="print"]').trigger('click');
14991
14992 }
14993 }
14994 });
14995
14996 }
14997 }
14998 });
14999 }
15000 }
15001
15002 lumise.func.set_url('share', null);
15003 $('#lumise-left ul.lumise-left-nav>li[data-tab]').eq(1).click();
15004
15005 });
15006
15007 this.actions.add('cart-changed', function(){
15008
15009 if (lumise.func.url_var('cart', '') === '')
15010 return;
15011
15012 $('#lumise-general-status').html(
15013 '<span>\
15014 <text>\
15015 <i class="lumisex-android-alert"></i> '+
15016 lumise.i(116)+': '+lumise.func.date('h:m d M, Y', new Date().getTime())+
15017 '</text>\
15018 <a href="#cancel-cart" data-btn="cancel" data-func="cancel-cart">\
15019 '+lumise.i(117)+'\
15020 </a>\
15021 </span>'
15022 );
15023
15024 //$('#lumise-general-status button[data-func="save-cart"]').on('click', lumise.cart.add_cart);
15025
15026 });
15027
15028 this.actions.add('add-cart', function(){
15029
15030 $('#lumise-general-status').html(
15031 '<span>\
15032 <text>'+lumise.i(118)+'!</text> \
15033 <a href="#checkout">'+
15034 lumise.i(75)+' <i class="lumisex-android-arrow-forward"></i>\
15035 </a>\
15036 </span>'
15037 );
15038
15039 $('#lumise-general-status a[href="#checkout"]').on('click', lumise.cart.do_checkout);
15040
15041 });
15042
15043 this.actions.add('noproduct', function() {
15044 $('#lumise-no-product').show();
15045 lumise.func.set_url('cart', null);
15046 lumise.get.el('change-product').trigger('click');
15047 });
15048
15049 this.actions.add('product', function(data) {
15050
15051 /*
15052 * Check print permission
15053 */
15054
15055 var priacc = lumise.get.el('navigations').find('li[data-tool="print"][data-alwd]'),
15056 priurl = encodeURIComponent(lumise.func.url_var('design_print', ''));
15057
15058 if (priacc.length > 0 && priacc.attr('data-alwd') != priurl)
15059 priacc.remove();
15060
15061 });
15062
15063 this.actions.add('save-design', function(id) {
15064
15065 lumise.get.el('general-status').html(
15066 '<span>\
15067 <text>\
15068 <i class="lumisex-android-alert"></i> '+
15069 lumise.i(188)+' '+lumise.func.date('h:m - d M, Y', new Date().getTime())+'\
15070 <strong>#'+id+'</strong>\
15071 </text>\
15072 <a href="#cancel-design" data-btn="cancel" data-func="cancel-design">\
15073 '+lumise.i(187)+'\
15074 </a>\
15075 </span>'
15076 );
15077
15078 if (lumise.func.url_var('cart', '') === '')
15079 lumise.func.set_url('my_design', id);
15080 else lumise.func.set_url('my_design', null);
15081
15082 });
15083
15084 this.actions.add('updated', function() {
15085 if (
15086 lumise.func.url_var('my_design', '') === '' &&
15087 lumise.func.url_var('cart', '') === '' &&
15088 lumise.func.url_var('design_print', '') === ''
15089 ) {
15090 lumise.get.el('general-status').html(
15091 '<span>\
15092 <text><i class="lumisex-android-alert"></i> '+lumise.i(189)+'</text>\
15093 <a href="#save-design" data-func="save-design"><i class="lumisex-floppy"></i> '+lumise.i(190)+'</a>\
15094 </span>'
15095 );
15096 }
15097 });
15098
15099 [
15100 ['ctrl-o', 'import'],
15101 //['ctrl-s', 'save'],
15102 ['ctrl-e', 'clear'],
15103 ['ctrl-shift-s', 'saveas'],
15104 ['ctrl-p', 'print']
15105 ].map(function(k){
15106 lumise.actions.add(k[0], function(e) {
15107 lumise.get.el('navigations').find('li[data-tool="file"] li[data-func="'+k[1]+'"]').trigger('click');
15108 e.preventDefault();
15109 e.stopPropagation();
15110 return false;
15111 });
15112 });
15113
15114 fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
15115 fabric.Object.prototype.transparentCorners = false;
15116
15117 window.LumiseDesign = null;
15118 window.indexedDB = window.indexedDB ||
15119 window.webkitIndexedDB ||
15120 window.mozIndexedDB ||
15121 window.OIndexedDB ||
15122 window.msIndexedDB;
15123 window.URL = window.URL || window.webkitURL;
15124
15125 CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
15126 if (w < 2 * r) r = w / 2;
15127 if (h < 2 * r) r = h / 2;
15128 this.beginPath();
15129 this.moveTo(x+r, y);
15130 this.arcTo(x+w, y, x+w, y+h, r);
15131 this.arcTo(x+w, y+h, x, y+h, r);
15132 this.arcTo(x, y+h, x, y, r);
15133 this.arcTo(x, y, x+w, y, r);
15134 this.closePath();
15135 return this;
15136 };
15137
15138 window.addEventListener('message', function(e) {
15139
15140 if (e.origin != 'https://services.lumise.com' && e.origin != window.location.origin)
15141 return;
15142
15143 if (e.data && e.data.action) {
15144 switch (e.data.action) {
15145 case 'close_lightbox' :
15146 $('#lumise-lightbox').remove();
15147 break;
15148 case 'import_image' :
15149 var id = parseInt(new Date().getTime()/1000).toString(36)+':'+Math.random().toString(36).substr(2);
15150 if (e.data.ops.name.indexOf('/') > -1)
15151 e.data.ops.name = e.data.ops.name.split('/').pop();
15152 lumise.cliparts.import(id, e.data.ops, 'prepend');
15153 break;
15154 case 'add_image' :
15155 lumise.func.preset_import([{type: 'image', url: e.data.url}]);
15156 break;
15157 case 'preview_image':
15158 lumise.get.el('x-thumbn-preview').show().find('>div').html('<img src="'+e.data.ops.url+'" />');
15159 lumise.get.el('x-thumbn-preview').find('>header').html(
15160 (e.data.ops.name ? e.data.ops.name : e.data.ops.url.split('/').pop().substr(0, 50))
15161 );
15162 if (e.data.ops.tags !== '')
15163 lumise.get.el('x-thumbn-preview').find('>footer').show().html(e.data.ops.tags);
15164 break;
15165 case 'close_preview_image':
15166 lumise.get.el('x-thumbn-preview').hide();
15167 break;
15168 case 'fonts' :
15169 lumise.render.fonts(e.data.fonts);
15170 break;
15171 case 'update-svg' :
15172
15173 var canvas = lumise.stage().canvas;
15174 active = canvas.getActiveObject();
15175
15176 if (active !== null) {
15177
15178 var src = 'data:image/svg+xml;base64,'+btoa(e.data.svg);
15179
15180 active.set('origin_src', src);
15181 active.set('src', src);
15182 active._element.src = src;
15183 active._originalElement.src = src;
15184 active._element.onload = function(){
15185 canvas.renderAll();
15186 };
15187 };
15188
15189 lumise.tools.lightbox('close');
15190
15191 break;
15192 }
15193 }
15194
15195 });
15196
15197 window.addEventListener('popstate', function(e, s) {
15198 if (e) {
15199 window.location = document.referrer;
15200 e.preventDefault();
15201 }
15202 });
15203
15204 $(window).bind('beforeunload', function(){
15205 if (lumise.ops.before_unload)
15206 return lumise.ops.before_unload;
15207 })
15208 .on('touchstart', function(e){
15209
15210 if ($(e.target).hasClass('smooth'))
15211 this.smooth = e.target;
15212 else this.smooth = $(e.target).closest('.smooth').get(0);
15213
15214 })
15215 .on('touchmove', function(e){
15216
15217 if (e.target === document) {
15218 e.preventDefault();
15219 return false;
15220 }
15221
15222 if (['INPUT', 'SELECT'].indexOf(e.target.tagName) > -1 || this.smooth)
15223 return true;
15224
15225 e.preventDefault();
15226 return false;
15227
15228 })
15229 .on('load', function(){
15230 lumise.mobile();
15231 });
15232
15233 this.design.events();
15234 this.objects.icons.init();
15235
15236 fabric.util.addListener(fabric.window, 'load', function() {
15237
15238 var canvas = this.__canvas || this.canvas,
15239 canvases = this.__canvases || this.canvases;
15240
15241 canvas && canvas.calcOffset && canvas.calcOffset();
15242
15243 if (canvases && canvases.length) {
15244 for (var i = 0, len = canvases.length; i < len; i++) {
15245 canvases[i].calcOffset();
15246 }
15247 }
15248
15249 });
15250
15251 ////////////////////////////////////////////////
15252
15253 this.render.colorPresets();
15254 this.render.fonts();
15255 this.indexed.init();
15256 this.cart.init();
15257
15258 jscolor.detectDir = function(){ return lumise.data.assets+'/assets/images/'; };
15259 jscolor.init();
15260 delete jscolor.init;
15261
15262 lumise.mobile();
15263
15264 },
15265
15266 };
15267
15268 lumise.load();
15269
15270});