1$(document).ready(function(){ 2 3 var $image = $('.img-container > img'), 4 $dataX = $('#dataX'), 5 $dataY = $('#dataY'), 6 $dataHeight = $('#dataHeight'), 7 $dataWidth = $('#dataWidth'), 8 $dataRotate = $('#dataRotate'), 9 options = { 10 // strict: false, 11 // responsive: false, 12 // checkImageOrigin: false 13 14 // modal: false, 15 // guides: false, 16 // highlight: false, 17 // background: false, 18 19 // autoCrop: false, 20 // autoCropArea: 0.5, 21 // dragCrop: false, 22 // movable: false, 23 // resizable: false, 24 // rotatable: false, 25 // zoomable: false, 26 // touchDragZoom: false, 27 // mouseWheelZoom: false, 28 29 // minCanvasWidth: 320, 30 // minCanvasHeight: 180, 31 // minCropBoxWidth: 160, 32 // minCropBoxHeight: 90, 33 // minContainerWidth: 320, 34 // minContainerHeight: 180, 35 36 // build: null, 37 // built: null, 38 // dragstart: null, 39 // dragmove: null, 40 // dragend: null, 41 // zoomin: null, 42 // zoomout: null, 43 44 aspectRatio: 16 / 9, 45 preview: '.img-preview', 46 crop: function (data) { 47 $dataX.val(Math.round(data.x)); 48 $dataY.val(Math.round(data.y)); 49 $dataHeight.val(Math.round(data.height)); 50 $dataWidth.val(Math.round(data.width)); 51 $dataRotate.val(Math.round(data.rotate)); 52 } 53 }; 54 55 56 $image.on({ 57 'build.cropper': function (e) { 58 console.log(e.type); 59 }, 60 'built.cropper': function (e) { 61 console.log(e.type); 62 }, 63 'dragstart.cropper': function (e) { 64 console.log(e.type, e.dragType); 65 }, 66 'dragmove.cropper': function (e) { 67 console.log(e.type, e.dragType); 68 }, 69 'dragend.cropper': function (e) { 70 console.log(e.type, e.dragType); 71 }, 72 'zoomin.cropper': function (e) { 73 console.log(e.type); 74 }, 75 'zoomout.cropper': function (e) { 76 console.log(e.type); 77 } 78 }).cropper(options); 79 //$('.text p').css('color','#000000'); 80 81 // Update text on Tshirt -- applly event on keyup 82 /*$('#designtext1').keyup(function(){ 83 var text = $(this).val().replace(/\r\n|\r|\n/g,"<br />"); 84 85 });*/ 86 87 // ON click on the new text button : clone Next text on T-shirt and add new textarea to edit text 88 var count = 2; // variable to count Texts 89 $('.text p').css('color','#000000'); 90 $('.nexText1').click(function(){ 91 // alert(rand(20,20)); 92 //var count = 1; 93 // clone text area and change class attribute , data-id, id and value 94 $('#designtext1').clone().prependTo("#texts").attr('class', 'designtext span12 designtext' + count).attr('data-id', count).attr('id','designtext'+count).val('text ' + count); 95 // clone text on T-shirt and make draggable 96 $('div p').removeClass('text-sel-bor'); 97 $('.text').clone().prependTo(".designContainer").attr('class', ' t designtext' + count).attr('id','text'+count).attr('data-id', count).attr('style', 'z-index:9' + count).css('top', Math.random()*100).draggable().find('p').text('text ' + count); 98 99 100 $('#text' + count).click(function(){ 101 $('div p').removeClass('text-sel-bor') 102 $(this).find('p').addClass('text-sel-bor'); 103 var size = $(this).find('p').css('font-size'); 104 var font_style = $(this).find('p').css('font-family'); 105 $('.size').html(size); 106 var width_per = parseInt(size.substr(0,2)); 107 //alert(width_per); 108 var slider_remain = (eval(100-width_per)); 109 $('.ui-slider-handle').css('left',width_per+'%'); 110 $('.ui-slider-range').css('width',slider_remain+'%'); 111 var font_val = $('#selected_font').text(font_style); 112 }); 113 114 115 $('.text').click(function(){ 116 $('div p').removeClass('text-sel-bor'); 117 $(this).find('p').addClass('text-sel-bor'); 118 var size = $(this).find('p').css('font-size'); 119 var font_style = $(this).find('p').css('font-family'); 120 //alert(font_style); 121 $('.size').html(size); 122 var width_per = parseInt(size.substr(0,2)); 123 //alert(width_per); 124 var slider_remain = (eval(100-width_per)); 125 $('.ui-slider-handle').css('left',width_per+'%'); 126 $('.ui-slider-range').css('width',slider_remain+'%'); 127 var font_val = $('#selected_font').text(font_style); 128 //alert(font_val); 129 }); 130 count++; // increment variable when new text cloned 131 132 133 134 135 }); 136 // update texts on keyup event - this works on cloned texts and textarea 137 $( document ).on('keyup','.ds-ta', function(){ 138 // get text from text area and replace breakline with br tag 139 var text = $(this).val();//.replace(/\r\n|\r|\n/g,"<br />"); 140 //get the data-id from text 141 var id = $(this).closest('div').attr('id'); 142 var idVal = id.substr(10); 143 var html_val = "text"+idVal+" p"; 144 //update text on T-shirt 145 $('#'+html_val).html(text); 146 /**/ 147 }); 148 149 // initial Current Text element to be edited 150 //var textElement = $('.designtext1 p').css('color','#000000'); 151 // events 152 153 // make texts draggable using jquery UI 154 $(function() { 155 //$( ".t" ).resizable(); 156 $( ".t" ).draggable({ 157 158 //$('.t').find('p').addClass('text-sel-bor'); 159 // on stop make current text the element to be edited 160 stop: function() { 161 textElement = $(this).find('p'); 162 } 163 }); 164 165 }); 166 167 // on click on the text make current text the element to be edited (font size, color, font familly ) 168 $(document).on('click', '.t p', function(){ 169 textElement = $(this); 170 171 //add some annimations 'bounce' using CSS3 and animate.css file 172 $('.slider , .pick-a-color-markup, .dropup').addClass('animated bounce'); 173 174 setTimeout(function() { 175 //remove annimation after 1s 176 $('.slider , .pick-a-color-markup, .dropup').removeClass('animated bounce'); 177 }, 1000); 178 }); 179 180 // Actions to be apllayed on Texts 181 $(document).on('click', '.action', function(){ 182 183 var action = $(this).data('action'); 184 if(action == 'remove'){ 185 var textElement = $(this).closest("div").attr("id"); 186 var id_val = textElement.substr(4); 187 if(textElement == "text1"){ 188 //we can delete it , because we use it to add new texts 189 alert("this is the orginal text you can't delete it"); 190 // stop event 191 return false;
192 } else if(confirm('Please confirm?')) { 193 $('#'+textElement).remove(); 194 $('.designtext'+id_val).remove(); 195 } 196 } else { 197 var textElement = $(this).closest("div").attr("id"); 198 var id_val = textElement.substr(10); 199 if(id_val == "1") { 200 alert("this is the orginal text you can't delete it"); 201 // stop event 202 return false; 203 } else if(confirm('Please confirm?')) { 204 $('#text'+id_val).remove(); 205 $('#designtext'+id_val).remove(); 206 } 207 208 } 209 210 211 }); 212 213 //font size using Slider based on jquery UI sliders 214 /* $( "#slider" ).slider({ 215 // var text_object= can.getActiveObject(); 216 // console.log(text_object); 217 // text_object.fontSize = '30'; 218 // can.renderAll(); 219 range: "max", // set range Type 220 min: 1, // set a minimum value 221 max: 100, //a max value 222 value: 11, // default value 223 slide: function( event, ui ) { // event onslider 224 $( ".size" ).text(ui.value + "px"); // update text on slider 225 if(textElement != null){ // if text element is not null 226 textElement.css( "font-size", ui.value); // apply value on text (font-size) using css function (jquery) 227 } 228 } 229 }); 230 $( ".size" ).text($( "#slider" ).slider( "value" ) + "px"); // get default value from slider and show it to the user 231 232 */ 233 234 //Edit text's font - Get selected font on event Click 235 //google.load('webfont','1'); 236 $('#font a').click(function(){ 237 // test if current text is not null () 238 if (textElement != null) { 239 // get font name from clicked element (data-font='font name') 240 var font = $(this).data('font'); 241 // apply a loading style 242 $('.designContainer').prepend("<div class='loading'></div>"); 243 244 //google font loader API config 245 WebFontConfig = { 246 // get selected font 247 google: { families: [ font ], 248 text: 'abcdedfghijklmopqrstuvwxyz!' }, 249 //loading: function() {}, // function when loading font 250 //active: function() {},// function when font is active 251 //inactive: function() {}, // function if font is inactive 252 //fontloading: function(familyName, fvd) {alert('fontloading')}, // font loading 253 fontactive: function(familyName, fvd) { // function if font is action and we get fontName in args 254 // we apply font on the slelected text using css function (Jquery) 255 textElement.css('font-family', familyName); 256 // remove loading annimation 257 $('.designContainer').find(".loading").remove(); 258 }, 259 fontinactive: function(familyName, fvd) { // if font is innactive 260 // show alert ti the user 261 alert('this font no longer available, please choose another one from list'); 262 // remove loading annimation 263 $('.designContainer').find(".loading").remove(); 264 }, 265 // timeout if google load font take a longer time 266 timeout: 5000 267 268 } 269 // load google font API script 270 var wf = document.createElement('script'); 271 wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 272 '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'; 273 wf.type = 'text/javascript'; 274 wf.async = 'true'; 275 var s = document.getElementsByTagName('script')[0]; 276 s.parentNode.insertBefore(wf, s); 277 }; 278 }); 279 280 // function to get image preview on the t-shirt we don't need to upload it on the server using this function 281 var countImg = 1; 282 function readURL(input) { 283 284 if (input.files && input.files[0]) { // if there is a file from input 285 var reader = new FileReader();
285 // read file 286 287 reader.onload = function (e) { // on load 288 // add image to imagesContainer - e.target.result : image's source on local 289 $('#imagesContainer').prepend("<div class='images' style='z-index:9" + countImg + "'><i class='icon-remove text-error'></i><div class='img-container'><img id='images_"+ countImg +"' src='" + e.target.result + "' alt='' ></div></div>"); 290 291 // make images draggable and resizable using jquery UI functions 292 // $('#imagesContainer').find('img').resizable(); 293 $('#imagesContainer').find('.images').draggable(); 294 295 countImg ++; 296 //$('#blah').css('background', 'transparent url('+e.target.result +') left top no-repeat'); 297 } 298 reader.readAsDataURL(input.files[0]); 299 } 300 } 301 // load images 302 $("#imgInp").on('change',function(){ 303 readURL(this); // call our function readURL 304 var $inputImage = $('#imgInp'), 305 URL = window.URL || window.webkitURL, 306 blobURL; 307 308 if (URL) { 309 //alert(URL); 310 //$inputImage.on('change',function () { 311 //$('#imagesContainer').append($('.img-container')); 312 var files = this.files, 313 file; 314 315 if (files && files.length) { 316 file = files[0]; 317 318 if (/^image\/\w+$/.test(file.type)) { 319 blobURL = URL.createObjectURL(file); 320 $image.one('built.cropper', function () { 321 URL.revokeObjectURL(blobURL); // Revoke when load complete 322 }).cropper('reset', true).cropper('replace', blobURL); 323 // $inputImage.val(''); 324 } else { 325 showMessage('Please choose an image file.'); 326 } 327 } 328 //}); 329 } else { 330 $inputImage.parent().remove(); 331 } 332 }); 333 334 // delete pictures 335 $(document).on('click', '.images .icon-remove', function(){ 336 // user should confirm suppression 337 if(confirm('Please confirm?')){ 338 // if confirmed get parent and delete image 339 $(this).parent().remove(); 340 } 341 }) 342 343 // Text Color picker 344 /* $(".pick-a-color").pickAColor({ 345 showSpectrum : true, 346 showSavedColors : true, 347 saveColorsPerElement : true, 348 fadeMenuToggle : true, 349 showAdvanced : true, 350 showHexInput : true, 351 showBasicColors : true 352 });*/ 353 354 355 // event on color change ( get selected color) 356 /* $("input#color").on("change", function () { 357 // get value from input 358 var color = $(this).val(); 359 //alert(color); 360 // if textElement is not null 361 if(textElement != null){ 362 //apply css on the text 363 textElement.css('color','#' + color); 364 } 365 366 }); 367 */ 368 369 //change T-shirt 370 $('.tshirts a').click(function(){ 371 //get clicked T-shirt src 372 var src = $(this).find('img').attr('src'); 373 //apply it on the original image to be edited 374 $('#Tshirtsrc').attr('src', src); 375 return false; 376 }); 377 378 // apply style on file's input 379 380 $('#imgInp').customFileInput({ 381 // put button 'browse' on right 382 button_position : 'right' 383 }); 384 385 // Preview option (Modal) 386 387 $('#myModal').on('shown', function () { 388 //clone current design to Modal (show preview) 389 $('.designContainer').clone().prependTo('.modal-body').find('i').remove(); 390 $('.modal-body').find('.ui-icon').css('display', 'none'); 391 }); 392 393 $('#myModal').on('hidden', function () { 394 //initialize modal preview on hidden event 395 $('.modal-body').html(' '); 396 }) 397 398 399 // Printer call 400 401 // Hook up the print link. 402 $('a.print').on('click', function() { 403 //Print span6(design container) with default options 404 $.print(".span6"); 405 }); 406 407 // export as DESIGN 408 409 $('.export').click(function(){ 410 //hide options 411 $('#printable').find('i').css('display', 'none'); 412 $('#printable').find('.ui-icon').css('display', 'none'); 413 //get printable section 414 var exportCanvas = document.getElementById('printable'); 415 //get convas container 416 var canvasContainer = document.getElementById('convascontent'); 417 //export canvas to convascontainer 418 html2canvas(exportCanvas, { 419 //when finished fucntion 420 onrendered: function(canvas) { 421 // initialize canvas container (if we generate another canvas) 422 $('#convascontent').html(' '); 423 // append canvas to container 424 canvasContainer.appendChild(canvas); 425 //add id attribute to the canvas 426 $('#convascontent').find('canvas').attr('id','mycanvas'); 427 // display options again 428 $('#printable').find('i').css('display', 'block'); 429 $('#printable').find('.ui-icon').css('display', 'block'); 430 //document.getElementsByTagName("UL") 431 432 } 433 }); 434 // return false;
435 }); 436 437 //export options 438 $('.exportas').click(function(){ 439 // get type to export 440 var to = $(this).data('type'); 441 // alert(to); 442 // get our canvas 443 var oCanvas = document.getElementById("mycanvas"); 444 // support variable 445 var bRes = false; 446 if(to == 'png'){ 447 // export to png 448 bRes = Canvas2Image.saveAsPNG(oCanvas); 449 } 450 if(to == 'jpg'){ 451 // maybe in some old browsers it works only on Firefox 452 bRes = Canvas2Image.saveAsJPEG(oCanvas); 453 }if(to == 'bmp'){ 454 Res = Canvas2Image.saveAsBMP(oCanvas); 455 } 456 // if browser doesn't support mimetype alert user 457 if (!bRes) { 458 alert("Sorry, this browser is not capable of saving " + strType + " files!"); 459 return false; 460 } 461 }); 462 463 464 465}); 466 467 468 469 470 471 472 473 474 475
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.