1 2Ext.Loader.setConfig({ 3 enabled: true 4}); 5 6Ext.Loader.setPath('Ext.ux', extjs_dir+'/ux'); 7 8Ext.require([ 9 'Ext.slider.*', 10 'Ext.tab.*', 11 'Ext.data.*', 12 'Ext.util.*', 13 'Ext.state.*', 14 'Ext.form.*', 15 'Ext.form.field.File', 16 'Ext.form.Panel', 17 'Ext.window.MessageBox', 18 'Ext.ux.grid.TransformGrid' 19]); 20 21 22 23function validateFileField(field) { 24 var fileName = field.getValue(); 25 var ext = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase(); 26 if (ext != 'jpg' && ext != 'jpeg' && ext != 'png' && ext != 'gif' && ext != 'bmp' && ext != 'psd') { 27 field.markInvalid('Invalid file type'); 28 field.setFieldStyle({ 29 background: '#F7CDCD' 30 }); 31 Ext.MessageBox.alert('Invalid File Type', 'Valid file formats include .jpg, .png, .gif, .bmp, & .psd'); 32 } else { 33 field.setFieldStyle({ 34 background: '#CBF4D6' 35 }); 36 } 37} 38 39 40 ///////////////////////////////////////////////////////////////// 41 ///////////////////////////////////////////////////////////////// 42 // EXIF DATA MODEL 43 Ext.define('ExifData', { 44 extend: 'Ext.data.Model', 45 idProperty: 'image_id', 46 fields: [ 47 { name: 'image_id', type: 'string' }, 48 { name: 'make', type: 'string' }, 49 { name: 'model', type: 'string' }, 50 { name: 'date', type: 'string' }, 51 { name: 'exposure_time', type: 'string' }, 52 { name: 'aperture_value', type: 'string' }, 53 { name: 'f_stop', type: 'string' }, 54 { name: 'fnumber', type: 'string' }, 55 { name: 'fnumber_value', type: 'string' }, 56 { name: 'iso', type: 'string' }, 57 { name: 'focal_length', type: 'string' }, 58 { name: 'exposure_program', type: 'string' }, 59 { name: 'metering_mode', type: 'string' }, 60 { name: 'flash_status', type: 'string' }, 61 { name: 'creator', type: 'string' }, 62 { name: 'copyright', type: 'string' } 63 ] 64 }); 65 // END - EXIF DATA MODEL 66 ///////////////////////////////////////////////////////////////// 67 ///////////////////////////////////////////////////////////////// 68 69 70 71 72 73 74 75 76 77Ext.onReady(function() { 78 79 Ext.QuickTips.init(); 80 81 Ext.Ajax.timeout = 120000; 82 83 84 Ext.apply(Ext.form.VTypes, { 85 'numeric': function() { 86 var numericRe = /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/; 87 return function(v) { return numericRe.test(v); } 88 }(), 89 'numericText': 'Value must be numeric', 90 'numericMask': /[.0-9]/ 91 }); 92 93 Ext.apply(Ext.form.VTypes, { 94 'hex': function() { 95 var hexRe = /[#0-9A-Fa-f]{6}/g; 96 return function(v) { return hexRe.test(v); } 97 }(), 98 'hexText': 'Value must be hexadecimal', 99 'hexMask': /[#0-9A-Fa-f]/ 100 }); 101 102 103 104 var slider = Ext.create('Ext.slider.Single', { 105 fieldLabel: 'Quality', 106 name: 'quality', 107 itemId: 'quality', 108 width: 300, 109 value: 85, 110 increment: 5, 111 minValue: 0, 112 maxValue: 100, 113 tipText: function(thumb){ 114 return String(thumb.value) + '%'; 115 } 116 }); 117 118 119 var fileFormatsStore = Ext.create('Ext.data.Store', { 120 fields: ['name', 'ext'], 121 data : [ 122 {"name":"JPG", "ext":".jpg"}, 123 {"name":"PNG", "ext":".png"}, 124 {"name":"GIF", "ext":".gif"}, 125 {"name":"BMP", "ext":".bmp"} 126 ] 127 }); 128 129 var fileFormatsCombo = Ext.create('Ext.form.ComboBox', { 130 fieldLabel: 'Output Format', 131 name: 'output_format', 132 itemId: 'output_format', 133 store: fileFormatsStore, 134 queryMode: 'local', 135 displayField: 'name', 136 valueField: 'name', 137 value: 'JPG', 138 width: 180 139 }); 140 141 142 143 144 var actionHidden = new Ext.form.Hidden({ 145 name: 'action', 146 value: 'upload' 147 }); 148 149 var maxFileSizeHidden = new Ext.form.Hidden({ 150 name: 'MAX_FILE_SIZE', 151 value: '2621440000' 152 });
153 154 var uploadForm = Ext.create('Ext.form.Panel', { 155 renderTo: 'panel', 156 width: 960, 157 frame: true, 158 plain: true, 159 header: false, 160 border: 0, 161 title: 'File Upload Form', 162 bodyPadding: '10 10 0', 163 margin: '0 0 0 0', 164 165 defaults: { 166 anchor: '100%', 167 allowBlank: false, 168 msgTarget: 'side', 169 labelWidth: 70, 170 labelAlign: 'right' 171 }, 172 fieldDefaults: { 173 labelAlign: 'right', 174 msgTarget: 'under', 175 validateOnChange: true, 176 validateOnBlur: true 177 }, 178 179 items: [{ 180 xtype: 'container', 181 layout: 'auto', 182 html: '<div align="center" style="padding-bottom: 20px;"><img src="'+img_dir+'/template_images/logo_small.jpg" /></div>' 183 }, { 184 xtype: 'container', 185 layout: 'hbox', 186 padding: '0 0 10 0', 187 margin: '0 0 10 0', 188 items: [{ 189 xtype: 'fieldset', 190 title: 'Step 1: Select Photo', 191 collapsible: false, 192 //flex: 1, 193 //autoScroll: true, 194 height: 125, 195 width: 450, 196 layout: 'auto', 197 border: 1, 198 items: [{ 199 xtype: 'filefield', 200 id: 'form-file', 201 emptyText: 'Select an Image', 202 fieldLabel: 'Photo', 203 labelWidth: 40, 204 name: 'image_path', 205 width: 420, 206 allowBlank: false, 207 listeners: { 208 'change': function(field, isValid, options) { 209 if (field.isValid() == true) { 210 validateFileField(field); 211 } 212 }, 213 'validitychange': function(field, isValid, options) { 214 if (isValid == true) { 215 //validateFileField(field); 216 } 217 } 218 } 219 }, { 220 xtype: 'displayfield', 221 value: '<div style="font-style: normal; color: #555555; font-size: 11px;">Valid Formats: .jpg, .png, .gif, .bmp, .psd</div>', 222 margin: '2 0 0 50' 223 }] 224 }, { 225 xtype: 'component', 226 width: 20 227 }, { 228 xtype: 'fieldset', 229 title: 'Step 2: Resize Options', 230 collapsible: false, 231 flex: 1, 232 //autoScroll: true, 233 height: 125, 234 //width: 370, 235 //layout: 'auto', 236 border: 1, 237 items: [{ 238 xtype: 'fieldcontainer', 239 fieldLabel: '<span class="required">*</span> Width', 240 //combineErrors: true, 241 //msgTarget: 'under', 242 layout: 'hbox', 243 anchor: '90%', 244 padding: '10 0 0 0', 245 defaults: { 246 hideLabel: true 247 }, 248 items: [{ 249 xtype: 'textfield', 250 fieldLabel: 'Width', 251 name: 'width', 252 itemId: 'width', 253 allowBlank: false, 254 maxLength: 5, 255 enforceMaxLength: true, 256 value: '800', 257 width: 60, 258 fieldStyle: 'text-align: center;', 259 vtype: 'numeric' 260 }, { 261 xtype: 'displayfield', 262 value: 'pixels', 263 margin: '2 0 0 5' 264 }] 265 }, 266 slider, 267 fileFormatsCombo, 268 actionHidden, 269 maxFileSizeHidden 270 ] 271 }] 272 }], 273 274 275/* 276 buttons: [{ 277 text: 'Upload', 278 cls: 'btn', 279 overCls: 'customOverStyle', 280 281 handler: function(){ 282 var form = this.up('form').getForm(); 283 if(form.isValid()){ 284 form.submit({ 285 url: 'file-upload.php', 286 waitMsg: 'Uploading your photo...', 287 success: function(fp, o) { 288 msg('Success', 'Processed file "' + o.result.file + '" on the server'); 289 } 290 }); 291 } 292 } 293 }] 294*/ 295 296 297 dockedItems: [{ 298 xtype: 'container', 299 dock: 'bottom', 300 layout: { 301 type: 'hbox', 302 align: 'middle', 303 pack: 'center' 304 }, 305 //margin: '10 0 0 0', 306 padding: '5 10 5 10', 307 308 items: [{ 309 xtype: 'button', 310 formBind: false, 311 disabled: false, 312 text: 'Upload & Resize Photo', 313 cls: 'btn', 314 overCls: 'customOverStyle', 315 //width: 140, 316 handler: function() { 317 318 var form = this.up('form').getForm(); 319 320 if(form.isValid()){ 321 form.submit({ 322 submitEmptyText: false, 323 clientValidation: false, 324 url: app_dir+'/file_upload.php', 325 waitMsg: 'Uploading Image...', 326 success: function(form, action) { 327 328 //form.destroy(); 329 console.log(Ext.getVersion()); 330 console.log(action); 331 332 //Ext.Msg.alert('Submitted Values', form.getValues(true)); 333 //this.up('form').getForm().submit(); 334 //this.up('form').getForm().reset(); 335 //this.up('window').hide(); 336 337 var formVals = form.getValues(); 338 //console.log(formVals); 339 340 //console.log(action.result); 341 342 uploadForm.hide(); 343 updateImagePanel.show(); 344 345 var widthField2 = Ext.ComponentQuery.query('#width2')[0].setValue(formVals.width); 346 var sliderField2 = Ext.ComponentQuery.query('#quality2')[0].setValue(formVals.quality); 347 var fileFormatField2 = Ext.ComponentQuery.query('#output_format2')[0].setValue(formVals.output_format); 348 var originalWidthField = Ext.ComponentQuery.query('#original_width')[0].setValue(action.result.original_width); 349 var originalHeightField = Ext.ComponentQuery.query('#original_height')[0].setValue(action.result.original_height); 350 351 var canvasPanel = Ext.ComponentQuery.query('#canvas')[0]; 352 //canvasPanel.update('<div align="center"><img src="'+url_path+'/uploads/output/'+action.result.filename+'" /></div>'); 353 var canvashtml = '<div align="center"><img src="'+url_path+'/uploads/output/'+action.result.filename+'" /><div style="padding-top: 20px;"><a href="'+url_path+'/download.php?file='+action.result.filename+'"><img src="'+img_dir+'/download.png" /></a></div><div class="another"><a href="'+url_path+'">Upload Another Photo</a></div></div>' 354 canvasPanel.update(canvashtml); 355 356 canvasPanel.setHeight(action.result.image_height+130); 357 358 var imageIdField = Ext.ComponentQuery.query('#image_id')[0]; 359 imageIdField.setValue(action.result.image_id); 360 361 //Ext.MessageBox.alert('Success', 'The order has been successfully saved.'); 362 //Ext.msg('Success', 'The order has been successfully saved.'); 363 364 }, 365 failure: function(form, action) { 366 console.log('FAILURE'); 367 Ext.Msg.alert('Failed to Upload Image', action.result.msg); 368 }, 369 callback: function(a, b, c, d, e) { 370 console.log('CALLBACK'); 371 } 372 }); 373 374 } 375 376 377 } 378 }] 379 }] 380 });
381 382 383 384 385 386 ////////////////////////////////////////////////////////////////////////////// 387 ////////////////////////////////////////////////////////////////////////////// 388 ////////////////////////////////////////////////////////////////////////////// 389 ////////////////////////////////////////////////////////////////////////////// 390 391 392 393/* 394 var colorPicker1 = Ext.create('Ext.picker.Color', { 395 value: '000000', // initial selected color 396 renderTo: Ext.getBody(), 397 listeners: { 398 select: function(picker, selColor) { 399 //alert(selColor); 400 } 401 } 402 }); 403 404 var colorPicker2 = Ext.create('Ext.picker.Color', { 405 value: '000000', // initial selected color 406 renderTo: Ext.getBody(), 407 listeners: { 408 select: function(picker, selColor) { 409 //alert(selColor); 410 } 411 } 412 }); 413*/ 414 415 416 417 418 var slider2 = Ext.create('Ext.slider.Single', { 419 fieldLabel: 'Quality', 420 name: 'quality', 421 itemId: 'quality2', 422 width: 300, 423 //value: 65, 424 increment: 5, 425 minValue: 0, 426 maxValue: 100, 427 tipText: function(thumb){ 428 return String(thumb.value) + '%'; 429 } 430 }); 431 432 433 var fileFormatsCombo2 = Ext.create('Ext.form.ComboBox', { 434 fieldLabel: 'Output Format', 435 name: 'output_format', 436 itemId: 'output_format2', 437 store: fileFormatsStore, 438 queryMode: 'local', 439 displayField: 'name', 440 valueField: 'name', 441 //value: 'JPG', 442 width: 180 443 }); 444 445 446 447 448 var effectsRadioGroupHtml = [ 449 '<table style="width: 100%;">', 450 '<tr>', 451 '<td style="width: 136px;" align="center"><img src="'+img_dir+'/misc/sunflower.jpg" style="border: none;" /></td>', 452 '<td style="width: 136px;" align="center"><img src="'+img_dir+'/misc/sunflower_sepia.jpg" style="border: none;" /></td>', 453 '<td style="width: 136px;" align="center"><img src="'+img_dir+'/misc/sunflower_vintage.jpg" style="border: none;" /></td>', 454 '<td style="width: 136px;" align="center"><img src="'+img_dir+'/misc/sunflower_greyscale.jpg" style="border: none;" /></td>', 455 '<td style="width: 136px;" align="center"><img src="'+img_dir+'/misc/sunflower_greyscale_dramatic.jpg" style="border: none;" /></td>', 456 '<td style="width: 136px;" align="center"><img src="'+img_dir+'/misc/sunflower_black_white.jpg" style="border: none;" /></td>', 457 '<td style="width: 136px;" align="center"><img src="'+img_dir+'/misc/sunflower_negative.jpg" style="border: none;" /></td>', 458 '</tr>', 459 '</table>' 460 ]; 461 462 463 var actionUpdateHidden = new Ext.form.Hidden({ 464 name: 'action', 465 value: 'update' 466 }); 467 468 var imageIdHidden = new Ext.form.Hidden({ 469 name: 'image_id', 470 itemId: 'image_id', 471 value: '' 472 }); 473 474 var originalWidthHidden = new Ext.form.Hidden({ 475 name: 'original_width', 476 itemId: 'original_width', 477 value: '' 478 }); 479 480 var originalHeightHidden = new Ext.form.Hidden({ 481 name: 'original_height', 482 itemId: 'original_height', 483 value: '' 484 }); 485 486 487 488 /////////////////////////////////////////////////////////////////// 489 var captionFontsStore = Ext.create('Ext.data.Store', { 490 fields: ['name', 'file'], 491 data : [ 492 {"name": "Arial", "file": "arial.ttf"}, 493 {"name": "Aguafina Script", "file": "AguafinaScript-Regular.ttf"}, 494 {"name": "Arimo", "file": "arimo.ttf"}, 495 {"name": "Contrail One", "file": "ContrailOne-Regular.ttf"}, 496 {"name": "Courgette", "file": "Courgette-Regular.ttf"}, 497 {"name": "Creepster", "file": "Creepster-Regular.ttf"}, 498 {"name": "Droid Sans", "file": "DroidSans.ttf"}, 499 {"name": "Droid Sans Bold", "file": "DroidSans-Bold.ttf"}, 500 {"name": "IM Fell French Canon SC", "file": "IM_Fell_French_Canon_SC.ttf"}, 501 {"name": "Lemon", "file": "Lemon-Regular.ttf"}, 502 {"name": "Life Savers", "file": "LifeSavers-Regular.ttf"}, 503 {"name": "Lilita One", "file": "LilitaOne-Regular.ttf"}, 504 {"name": "Mate SC", "file": "MateSC-Regular.ttf"}, 505 {"name": "Nosifer", "file": "Nosifer-Regular.ttf"}, 506 {"name": "Nothing You Could Do", "file": "NothingYouCouldDo.ttf"}, 507 {"name": "Oregano", "file": "Oregano-Regular.ttf"}, 508 {"name": "Oregano Italic", "file": "Oregano-Italic.ttf"}, 509 {"name": "Pacifico", "file": "Pacifico.ttf"}, 510 {"name": "Playball", "file": "Playball-Regular.ttf"}, 511 {"name": "Romanesco", "file": "Romanesco-Regular.ttf"}, 512 {"name": "Rye", "file": "Rye-Regular.ttf"}, 513 {"name": "Tangerine", "file": "Tangerine_Regular.ttf"}, 514 {"name": "Times New Roman", "file": "times.ttf"}, 515 {"name": "Trebuchet", "file": "trebuc.ttf"}, 516 {"name": "Walkway Bold", "file": "Walkway_Bold.ttf"}, 517 {"name": "Windsong", "file": "Windsong.ttf"} 518 ] 519 }); 520 521 var captionFontsCombo = Ext.create('Ext.form.ComboBox', { 522 fieldLabel: 'Font', 523 name: 'caption_font', 524 itemId: 'caption_font', 525 store: captionFontsStore,
526 queryMode: 'local', 527 displayField: 'name', 528 valueField: 'file', 529 value: 'arial.ttf', 530 width: 300 531 }); 532 533 534 535 /////////////////////////////////////////////////////////////////// 536 var captionFontSizeStore = Ext.create('Ext.data.Store', { 537 fields: ['name', 'size'], 538 data : [ 539 {"name": "10", "size": "10"}, 540 {"name": "11", "size": "11"}, 541 {"name": "12", "size": "12"}, 542 {"name": "13", "size": "13"}, 543 {"name": "14", "size": "14"}, 544 {"name": "15", "size": "15"}, 545 {"name": "16", "size": "16"}, 546 {"name": "18", "size": "18"}, 547 {"name": "20", "size": "20"}, 548 {"name": "24", "size": "24"} 549 ] 550 }); 551 552 var captionFontSizeCombo = Ext.create('Ext.form.ComboBox', { 553 fieldLabel: 'Font Size', 554 name: 'caption_font_size', 555 itemId: 'caption_font_size', 556 store: captionFontSizeStore, 557 queryMode: 'local', 558 displayField: 'name', 559 valueField: 'size', 560 value: '12', 561 width: 180 562 }); 563 564 /////////////////////////////////////////////////////////////////// 565 var captionFontColorStore = Ext.create('Ext.data.Store', { 566 fields: ['name', 'color'], 567 data : [ 568 {"name": "White", "color": "#ffffff"}, 569 {"name": "Black", "color": "#000000"}, 570 {"name": "Custom (Hex)", "color": "custom"} 571 ] 572 }); 573 574 var captionFontColorCombo = Ext.create('Ext.form.ComboBox', { 575 fieldLabel: '', 576 name: 'caption_font_color', 577 itemId: 'caption_font_color', 578 store: captionFontColorStore, 579 queryMode: 'local', 580 displayField: 'name', 581 valueField: 'color', 582 value: '#ffffff', 583 width: 110, 584 hideLabel: true, 585 hideEmptyLabel: true, 586 listeners: { 587 'change': function(combo, newValue, oldValue) { 588 var customColorField = Ext.ComponentQuery.query('#caption_font_color_custom')[0]; 589 if (newValue == 'custom') { 590 customColorField.setDisabled(false); 591 } else { 592 customColorField.setDisabled(true); 593 } 594 } 595 } 596 }); 597 598 599 var captionBoxColorCombo = Ext.create('Ext.form.ComboBox', { 600 fieldLabel: '', 601 name: 'caption_box_color', 602 itemId: 'caption_box_color', 603 store: captionFontColorStore, 604 queryMode: 'local', 605 displayField: 'name', 606 valueField: 'color', 607 value: '#000000', 608 width: 110, 609 hideLabel: true, 610 hideEmptyLabel: true, 611 listeners: { 612 'change': function(combo, newValue, oldValue) { 613 var customColorField = Ext.ComponentQuery.query('#caption_box_color_custom')[0]; 614 if (newValue == 'custom') { 615 customColorField.setDisabled(false); 616 } else { 617 customColorField.setDisabled(true); 618 } 619 } 620 } 621 }); 622 623 624 var borderColorCombo = Ext.create('Ext.form.ComboBox', { 625 fieldLabel: '', 626 name: 'border_color', 627 itemId: 'border_color', 628 store: captionFontColorStore, 629 queryMode: 'local', 630 displayField: 'name', 631 valueField: 'color', 632 value: '#000000', 633 width: 110, 634 hideLabel: true, 635 hideEmptyLabel: true, 636 listeners: { 637 'change': function(combo, newValue, oldValue) { 638 var customColorField = Ext.ComponentQuery.query('#border_color_custom')[0]; 639 if (newValue == 'custom') { 640 customColorField.setDisabled(false); 641 } else { 642 customColorField.setDisabled(true); 643 } 644 } 645 } 646 }); 647 648 649 var borderColorCombo2 = Ext.create('Ext.form.ComboBox', { 650 fieldLabel: '', 651 name: 'border_color2', 652 itemId: 'border_color2', 653 store: captionFontColorStore, 654 queryMode: 'local', 655 displayField: 'name', 656 valueField: 'color', 657 value: '#000000', 658 width: 110, 659 hideLabel: true, 660 hideEmptyLabel: true, 661 listeners: { 662 'change': function(combo, newValue, oldValue) { 663 var customColorField = Ext.ComponentQuery.query('#border_color_custom2')[0]; 664 if (newValue == 'custom') { 665 customColorField.setDisabled(false); 666 } else { 667 customColorField.setDisabled(true); 668 } 669 } 670 } 671 }); 672 673 674 var reflectionColorCombo = Ext.create('Ext.form.ComboBox', { 675 fieldLabel: '', 676 name: 'reflection_color', 677 itemId: 'reflection_color', 678 store: captionFontColorStore,
679 queryMode: 'local', 680 displayField: 'name', 681 valueField: 'color', 682 value: '#000000', 683 width: 110, 684 hideLabel: true, 685 hideEmptyLabel: true, 686 disabled: true, 687 listeners: { 688 'change': function(combo, newValue, oldValue) { 689 var customColorField = Ext.ComponentQuery.query('#reflection_color_custom')[0]; 690 if (newValue == 'custom') { 691 customColorField.setDisabled(false); 692 } else { 693 customColorField.setDisabled(true); 694 } 695 } 696 } 697 }); 698 699 700 /////////////////////////////////////////////////////////////////// 701 var captionBoxLocationStore = Ext.create('Ext.data.Store', { 702 fields: ['name', 'color'], 703 data : [ 704 {"name": "Bottom", "color": "b"}, 705 {"name": "Top", "color": "t"}, 706 {"name": "Right", "color": "r"}, 707 {"name": "Left", "color": "l"} 708 ] 709 }); 710 711 var captionBoxLocationCombo = Ext.create('Ext.form.ComboBox', { 712 fieldLabel: 'Location', 713 name: 'caption_box_location', 714 itemId: 'caption_box_location', 715 store: captionBoxLocationStore, 716 queryMode: 'local', 717 displayField: 'name', 718 valueField: 'color', 719 value: 'b', 720 width: 190 721 }); 722 723 724 725 726 /////////////////////////////////////////////////////////////////// 727 var captionBoxTransparencySlider = Ext.create('Ext.slider.Single', { 728 fieldLabel: 'Transparency', 729 name: 'caption_box_transparency', 730 itemId: 'caption_box_transparency', 731 width: 300, 732 value: 30, 733 increment: 5, 734 minValue: 0, 735 maxValue: 100, 736 tipText: function(thumb){ 737 return String(thumb.value) + '%'; 738 } 739 }); 740 741 742 /////////////////////////////////////////////////////////////////// 743 var reflectionTransparencySlider = Ext.create('Ext.slider.Single', { 744 fieldLabel: 'Transparency', 745 name: 'reflection_transparency', 746 itemId: 'reflection_transparency', 747 width: 300, 748 value: 30, 749 increment: 5, 750 minValue: 0, 751 maxValue: 100, 752 disabled: true, 753 tipText: function(thumb){ 754 return String(thumb.value) + '%'; 755 } 756 }); 757 758 759 /////////////////////////////////////////////////////////////////// 760 var updateForm = Ext.create('Ext.form.Panel', { 761 width: 960, 762 frame: false, 763 plain: true, 764 header: false, 765 border: 0, 766 title: '', 767 bodyPadding: '0 0 0 0', 768 769 defaults: { 770 anchor: '100%', 771 allowBlank: false, 772 msgTarget: 'under', 773 labelWidth: 70, 774 labelAlign: 'right' 775 }, 776 fieldDefaults: { 777 labelAlign: 'right', 778 msgTarget: 'under', 779 validateOnChange: true, 780 validateOnBlur: true 781 }, 782 783 items: [{ 784 xtype: 'tabpanel', 785 id: 'formTabPanel', 786 itemId: 'formTabPanel', 787 plain: true, 788 activeTab: 1, 789 anchor: '100%', 790 defaults: { bodyStyle: 'padding: 10px;' }, 791 //height: 220, 792 793 /////////////////////////////////////////////////////////////////////////////////// 794 // RESIZE 795 items: [{ 796 title: 'Resize', 797 itemId: 'resize', 798 html: '', 799 styleHtmlContent: true, 800 styleHtmlCls: 'blue_bg', 801 items: [{ 802 xtype: 'fieldcontainer', 803 fieldLabel: '<span class="required">*</span> Width', 804 //combineErrors: true, 805 //msgTarget: 'under', 806 layout: 'hbox', 807 //anchor: '50%', 808 width: 270, 809 padding: '10 0 0 0', 810 defaults: { 811 hideLabel: true 812 }, 813 items: [{ 814 xtype: 'textfield', 815 fieldLabel: 'Width', 816 name: 'width', 817 itemId: 'width2', 818 allowBlank: false, 819 maxLength: 5, 820 enforceMaxLength: true, 821 value: '', 822 width: 60, 823 fieldStyle: 'text-align: center;', 824 vtype: 'numeric' 825 }, { 826 xtype: 'displayfield', 827 value: 'pixels', 828 margin: '2 0 0 5' 829 }] 830 }, 831 slider2, 832 fileFormatsCombo2 833 ] 834
835 /////////////////////////////////////////////////////////////////////////////////// 836 // EFFECTS 837 }, { 838 title: 'Effects', 839 itemId: 'effects', 840 html: '', 841 styleHtmlContent: true, 842 styleHtmlCls: 'blue_bg', 843 height: 130, 844 items: [{ 845 xtype: 'radiogroup', 846 fieldLabel: '', 847 hideEmptyLabel: true, 848 //cls: 'x-check-group-alt', 849 width: 952, 850 comumnWidth: 136, 851 columns: 7, 852 items: [ 853 {boxLabel: 'No Effect', name: 'photo_effect', inputValue: 0, checked: true}, 854 {boxLabel: 'Sepia', name: 'photo_effect', inputValue: 1}, 855 {boxLabel: 'Vintage', name: 'photo_effect', inputValue: 2}, 856 {boxLabel: 'Greyscale', name: 'photo_effect', inputValue: 3}, 857 {boxLabel: 'Greyscale Dramatic', name: 'photo_effect', inputValue: 4}, 858 {boxLabel: 'Black & White', name: 'photo_effect', inputValue: 5}, 859 {boxLabel: 'Negative', name: 'photo_effect', inputValue: 6} 860 ] 861 }, { 862 xtype: 'container', 863 html: effectsRadioGroupHtml 864 }] 865 866 /////////////////////////////////////////////////////////////////////////////////// 867 // CAPTION 868 }, { 869 title: 'Caption', 870 itemId: 'caption', 871 html: '', 872 styleHtmlContent: true, 873 styleHtmlCls: 'blue_bg', 874 items: [{ 875 xtype: 'container', 876 layout: 'hbox', 877 items: [{ 878 xtype: 'fieldset', 879 title: 'Caption Font Options', 880 collapsible: false, 881 flex: 1, 882 //autoScroll: true, 883 height: 175, 884 //width: 370, 885 //layout: 'auto', 886 border: 1, 887 items: [{ 888 xtype: 'textfield', 889 name: 'caption_text', 890 itemId: 'caption_text', 891 fieldLabel: 'Caption', 892 allowBlank: true, 893 maxLength: 255, 894 enforceMaxLength: true, 895 width: 400 896 }, 897 captionFontsCombo, 898 captionFontSizeCombo, 899 { 900 xtype: 'fieldcontainer', 901 fieldLabel: 'Font Color', 902 combineErrors: true, 903 msgTarget: 'under', 904 layout: 'hbox', 905 anchor: '100%', 906 padding: '10 0 0 0', 907 defaults: { 908 hideLabel: true 909 }, 910 items: [ 911 captionFontColorCombo, 912 { 913 xtype: 'component', 914 width: 10 915 }, { 916 xtype: 'textfield', 917 fieldLabel: '', 918 name: 'caption_font_color_custom', 919 itemId: 'caption_font_color_custom', 920 width: 70, 921 allowBlank: true, 922 margin: '0 2 0 2', 923 minLength: 7, 924 maxLength: 7, 925 enforceMaxLength: true, 926 emptyText: '#FFFFFF', 927 fieldStyle: 'text-align: center;', 928 disabled: true//, 929 //vtype: 'hex' 930 }] 931 }, { 932 xtype: 'textfield', 933 name: 'caption_font_angle', 934 itemId: 'caption_font_angle', 935 fieldLabel: 'Angle', 936 allowBlank: true, 937 maxLength: 3, 938 enforceMaxLength: true, 939 fieldStyle: 'text-align: center;', 940 width: 200, 941 vtype: 'numeric' 942 }] 943 }, { 944 xtype: 'component', 945 width: 20 946 }, { 947 xtype: 'fieldset', 948 title: 'Caption Box Settings', 949 collapsible: false, 950 flex: 1, 951 //autoScroll: true, 952 height: 175, 953 //width: 370, 954 //layout: 'auto', 955 border: 1, 956 items: [ 957 captionBoxLocationCombo, 958 { 959 xtype: 'fieldcontainer', 960 fieldLabel: 'Thickness', 961 //combineErrors: true, 962 //msgTarget: 'under', 963 layout: 'hbox', 964 anchor: '90%', 965 padding: '10 0 0 0', 966 defaults: { 967 hideLabel: true 968 }, 969 items: [{ 970 xtype: 'textfield', 971 fieldLabel: 'Thickness', 972 name: 'caption_box_thickness', 973 itemId: 'caption_box_thickness', 974 allowBlank: false, 975 maxLength: 5, 976 enforceMaxLength: true, 977 value: '50', 978 width: 60, 979 fieldStyle: 'text-align: center;', 980 vtype: 'numeric' 981 }, { 982 xtype: 'displayfield', 983 value: 'pixels', 984 margin: '2 0 0 5' 985 }] 986 }, { 987 xtype: 'fieldcontainer', 988 fieldLabel: 'Padding', 989 //combineErrors: true, 990 //msgTarget: 'under', 991 layout: 'hbox', 992 anchor: '90%', 993 padding: '10 0 0 0', 994 defaults: { 995 hideLabel: true 996 }, 997 items: [{ 998 xtype: 'textfield', 999 fieldLabel: 'Padding', 1000 name: 'caption_box_padding', 1001 itemId: 'caption_box_padding', 1002 allowBlank: false, 1003 maxLength: 5, 1004 enforceMaxLength: true, 1005 value: '0', 1006 width: 60, 1007 fieldStyle: 'text-align: center;', 1008 vtype: 'numeric' 1009 }, { 1010 xtype: 'displayfield', 1011 value: 'pixels', 1012 margin: '2 0 0 5' 1013 }] 1014 }, { 1015 xtype: 'fieldcontainer', 1016 fieldLabel: 'Caption Box Color', 1017 combineErrors: true, 1018 msgTarget: 'under', 1019 layout: 'hbox', 1020 anchor: '100%', 1021 padding: '10 0 0 0', 1022 defaults: { 1023 hideLabel: true 1024 }, 1025 items: [ 1026 captionBoxColorCombo, 1027 { 1028 xtype: 'component', 1029 width: 10 1030 }, { 1031 xtype: 'textfield', 1032 fieldLabel: '', 1033 name: 'caption_box_color_custom', 1034 itemId: 'caption_box_color_custom', 1035 width: 70, 1036 allowBlank: true, 1037 margin: '0 2 0 2', 1038 minLength: 7, 1039 maxLength: 7, 1040 enforceMaxLength: true, 1041 emptyText: '#FFFFFF', 1042 fieldStyle: 'text-align: center;', 1043 disabled: true//, 1044 //vtype: 'hex' 1045 }] 1046 }, 1047 captionBoxTransparencySlider 1048 ] 1049 }] 1050 }]
1051 /////////////////////////////////////////////////////////////////////////////////// 1052 // BORDER 1053 }, { 1054 title: 'Border', 1055 itemId: 'border', 1056 html: '', 1057 styleHtmlContent: true, 1058 styleHtmlCls: 'blue_bg', 1059 items: [{ 1060 xtype: 'container', 1061 layout: 'hbox', 1062 items: [{ 1063 xtype: 'fieldset', 1064 title: 'Border', 1065 collapsible: false, 1066 flex: 1, 1067 //autoScroll: true, 1068 height: 135, 1069 //width: 370, 1070 //layout: 'auto', 1071 border: 1, 1072 items: [{ 1073 xtype: 'fieldcontainer', 1074 fieldLabel: 'Width', 1075 //combineErrors: true, 1076 //msgTarget: 'under', 1077 layout: 'hbox', 1078 anchor: '90%', 1079 padding: '10 0 0 0', 1080 defaults: { 1081 hideLabel: true 1082 }, 1083 items: [{ 1084 xtype: 'textfield', 1085 fieldLabel: 'Border Width', 1086 name: 'border_width', 1087 itemId: 'border_width', 1088 allowBlank: false, 1089 maxLength: 5, 1090 enforceMaxLength: true, 1091 value: '0', 1092 width: 60, 1093 fieldStyle: 'text-align: center;', 1094 vtype: 'numeric' 1095 }, { 1096 xtype: 'displayfield', 1097 value: 'pixels', 1098 margin: '2 0 0 5' 1099 }] 1100 }, { 1101 xtype: 'fieldcontainer', 1102 fieldLabel: 'Border Color', 1103 combineErrors: true, 1104 msgTarget: 'under', 1105 layout: 'hbox', 1106 anchor: '100%', 1107 padding: '10 0 0 0', 1108 defaults: { 1109 hideLabel: true 1110 }, 1111 items: [ 1112 borderColorCombo, 1113 { 1114 xtype: 'component', 1115 width: 10 1116 }, { 1117 xtype: 'textfield', 1118 fieldLabel: '', 1119 name: 'border_color_custom', 1120 itemId: 'border_color_custom', 1121 width: 70, 1122 allowBlank: true, 1123 margin: '0 2 0 2', 1124 minLength: 7, 1125 maxLength: 7, 1126 enforceMaxLength: true, 1127 emptyText: '#FFFFFF', 1128 fieldStyle: 'text-align: center;', 1129 disabled: true//, 1130 //vtype: 'hex' 1131 }] 1132 }] 1133 }, { 1134 xtype: 'component', 1135 width: 20 1136 }, { 1137 xtype: 'fieldset', 1138 title: 'Secondary Border', 1139 collapsible: false, 1140 flex: 1, 1141 //autoScroll: true, 1142 height: 135, 1143 //width: 370, 1144 //layout: 'auto', 1145 border: 1, 1146 items: [{ 1147 xtype: 'fieldcontainer', 1148 fieldLabel: 'Width', 1149 //combineErrors: true, 1150 //msgTarget: 'under', 1151 layout: 'hbox', 1152 anchor: '90%', 1153 padding: '10 0 0 0', 1154 defaults: { 1155 hideLabel: true 1156 }, 1157 items: [{ 1158 xtype: 'textfield', 1159 fieldLabel: 'Border Width', 1160 name: 'border_width2', 1161 itemId: 'border_width2', 1162 allowBlank: false, 1163 maxLength: 5, 1164 enforceMaxLength: true, 1165 value: '0', 1166 width: 60, 1167 fieldStyle: 'text-align: center;', 1168 vtype: 'numeric' 1169 }, { 1170 xtype: 'displayfield', 1171 value: 'pixels', 1172 margin: '2 0 0 5' 1173 }] 1174 }, { 1175 xtype: 'fieldcontainer', 1176 fieldLabel: 'Border Color', 1177 combineErrors: true, 1178 msgTarget: 'under', 1179 layout: 'hbox', 1180 anchor: '100%', 1181 padding: '10 0 0 0', 1182 defaults: { 1183 hideLabel: true 1184 }, 1185 items: [ 1186 borderColorCombo2, 1187 { 1188 xtype: 'component', 1189 width: 10 1190 }, { 1191 xtype: 'textfield', 1192 fieldLabel: '', 1193 name: 'border_color_custom2', 1194 itemId: 'border_color_custom2', 1195 width: 70, 1196 allowBlank: true, 1197 margin: '0 2 0 2', 1198 minLength: 7, 1199 maxLength: 7, 1200 enforceMaxLength: true, 1201 emptyText: '#FFFFFF', 1202 fieldStyle: 'text-align: center;', 1203 disabled: true//, 1204 //vtype: 'hex' 1205 }] 1206 }] 1207 }] 1208 } ]
1209 /////////////////////////////////////////////////////////////////////////////////// 1210 // REFLECTION 1211 }, { 1212 title: 'Reflection', 1213 itemId: 'reflection', 1214 html: '', 1215 styleHtmlContent: true, 1216 styleHtmlCls: 'blue_bg', 1217 items: [{ 1218 xtype: 'fieldset', 1219 title: '', 1220 collapsible: false, 1221 flex: 1, 1222 //autoScroll: true, 1223 height: 135, 1224 //width: 370, 1225 //layout: 'auto', 1226 border: 0, 1227 items: [{ 1228 xtype: 'checkbox', 1229 fieldLabel: 'Reflect Image', 1230 boxLabel: '', 1231 name: 'reflect_image_checkbox', 1232 itemId: 'reflect_image_checkbox', 1233 inputValue: '1', 1234 margin: '0 0 10 0', 1235 listeners: { 1236 'change': function(checkbox, newValue, oldValue) { 1237 var reflectionHeightField = Ext.ComponentQuery.query('#reflection_height')[0]; 1238 var reflectionTransparencyField = Ext.ComponentQuery.query('#reflection_transparency')[0]; 1239 var reflectionColorField = Ext.ComponentQuery.query('#reflection_color')[0]; 1240 var reflectionColorCustomField = Ext.ComponentQuery.query('#reflection_color_custom')[0]; 1241 1242 if (newValue == true) { 1243 reflectionHeightField.setDisabled(false); 1244 reflectionTransparencyField.setDisabled(false); 1245 reflectionColorField.setDisabled(false); 1246 if (reflectionColorField.getValue() == 'custom') { 1247 reflectionColorCustomField.setDisabled(false); 1248 } 1249 } else { 1250 reflectionHeightField.setDisabled(true); 1251 reflectionTransparencyField.setDisabled(true); 1252 reflectionColorField.setDisabled(true); 1253 reflectionColorCustomField.setDisabled(true); 1254 } 1255 } 1256 } 1257 }, { 1258 xtype: 'fieldcontainer', 1259 fieldLabel: 'Reflection Height', 1260 //combineErrors: true, 1261 //msgTarget: 'under', 1262 layout: 'hbox', 1263 anchor: '90%', 1264 padding: '10 0 0 0', 1265 margin: '0 0 10 0', 1266 defaults: { 1267 hideLabel: true 1268 }, 1269 items: [{ 1270 xtype: 'textfield', 1271 fieldLabel: 'Reflection Height', 1272 name: 'reflection_height', 1273 itemId: 'reflection_height', 1274 allowBlank: false, 1275 maxLength: 5, 1276 enforceMaxLength: true, 1277 value: '50', 1278 width: 60, 1279 fieldStyle: 'text-align: center;', 1280 vtype: 'numeric', 1281 disabled: true 1282 }, { 1283 xtype: 'displayfield', 1284 value: 'pixels', 1285 margin: '2 0 0 5' 1286 }] 1287 }, 1288 reflectionTransparencySlider, 1289 { 1290 xtype: 'fieldcontainer', 1291 fieldLabel: 'Background Color', 1292 combineErrors: true, 1293 msgTarget: 'under', 1294 layout: 'hbox', 1295 anchor: '100%', 1296 padding: '10 0 0 0', 1297 margin: '10 0 10 0', 1298 defaults: { 1299 hideLabel: true 1300 }, 1301 items: [ 1302 reflectionColorCombo, 1303 { 1304 xtype: 'component', 1305 width: 10 1306 }, { 1307 xtype: 'textfield', 1308 fieldLabel: '', 1309 name: 'reflection_color_custom', 1310 itemId: 'reflection_color_custom', 1311 width: 70, 1312 allowBlank: true, 1313 margin: '0 2 0 2', 1314 minLength: 7, 1315 maxLength: 7, 1316 enforceMaxLength: true, 1317 emptyText: '#FFFFFF', 1318 fieldStyle: 'text-align: center;', 1319 disabled: true//, 1320 //vtype: 'hex' 1321 }] 1322 }] 1323 }]
1324 /////////////////////////////////////////////////////////////////////////////////// 1325 // SHADOW 1326 }, { 1327 title: 'Shadow', 1328 itemId: 'shadow', 1329 html: '', 1330 styleHtmlContent: true, 1331 styleHtmlCls: 'blue_bg', 1332 items: [{ 1333 xtype: 'checkbox', 1334 fieldLabel: 'Add Image Shadow', 1335 labelWidth: 120, 1336 boxLabel: '', 1337 name: 'shadow_checkbox', 1338 itemId: 'shadow_checkbox', 1339 inputValue: '1', 1340 margin: '0 0 10 0', 1341 listeners: { 1342 'change': function(checkbox, newValue, oldValue) { 1343 var shadowAngleField = Ext.ComponentQuery.query('#shadow_angle')[0]; 1344 var shadowBlurField = Ext.ComponentQuery.query('#shadow_blur')[0]; 1345 1346 if (newValue == true) { 1347 shadowAngleField.setDisabled(false); 1348 shadowBlurField.setDisabled(false); 1349 } else { 1350 shadowAngleField.setDisabled(true); 1351 shadowBlurField.setDisabled(true); 1352 } 1353 } 1354 } 1355 }, { 1356 xtype: 'textfield', 1357 name: 'shadow_angle', 1358 itemId: 'shadow_angle', 1359 fieldLabel: 'Shadow Angle', 1360 allowBlank: true, 1361 maxLength: 3, 1362 enforceMaxLength: true, 1363 labelWidth: 120, 1364 width: 210, 1365 value: '45', 1366 fieldStyle: 'text-align: center;', 1367 disabled: true, 1368 vtype: 'numeric' 1369 }, { 1370 xtype: 'textfield', 1371 name: 'shadow_blur', 1372 itemId: 'shadow_blur', 1373 fieldLabel: 'Shadow Blur', 1374 allowBlank: true, 1375 maxLength: 3, 1376 enforceMaxLength: true, 1377 labelWidth: 120, 1378 width: 210, 1379 value: '15', 1380 fieldStyle: 'text-align: center;', 1381 disabled: true, 1382 vtype: 'numeric' 1383 }, { 1384 xtype: 'displayfield', 1385 value: '<div style="font-style: normal; color: #ff0000; font-size: 11px;">Tip: <b>Output format must be set to PNG.</b> JPG format will display shadow as solid black. Click "Resize" tab to change output format.</div>', 1386 margin: '2 0 0 5' 1387 }] 1388 /////////////////////////////////////////////////////////////////////////////////// 1389 // ROUNDED CORNERS 1390 }, { 1391 title: 'Rounded Corners', 1392 itemId: 'rounded_corners', 1393 html: '', 1394 styleHtmlContent: true, 1395 styleHtmlCls: 'blue_bg', 1396 items: [{ 1397 xtype: 'checkbox', 1398 fieldLabel: 'Rounded Corners', 1399 labelWidth: 120, 1400 boxLabel: '', 1401 name: 'rounded_corners_checkbox', 1402 itemId: 'rounded_corners_checkbox', 1403 inputValue: '1', 1404 margin: '0 0 10 0', 1405 listeners: { 1406 'change': function(checkbox, newValue, oldValue) { 1407 var roundedCornersRadiusField = Ext.ComponentQuery.query('#rounded_corners_radius')[0]; 1408 1409 if (newValue == true) { 1410 roundedCornersRadiusField.setDisabled(false); 1411 } else { 1412 roundedCornersRadiusField.setDisabled(true); 1413 } 1414 } 1415 } 1416 }, { 1417 xtype: 'textfield', 1418 name: 'rounded_corners_radius', 1419 itemId: 'rounded_corners_radius', 1420 fieldLabel: 'Radius', 1421 allowBlank: true, 1422 maxLength: 3, 1423 enforceMaxLength: true, 1424 labelWidth: 120, 1425 width: 200, 1426 value: '15', 1427 fieldStyle: 'text-align: center;', 1428 disabled: true, 1429 vtype: 'numeric' 1430 }, { 1431 xtype: 'displayfield', 1432 value: '<div style="font-style: normal;
1432 color: #ff0000; font-size: 11px;">Tip: <b>Output format must be set to PNG</b> to maintain background transparency. Click "Resize" tab to change output format.</div>', 1433 margin: '2 0 0 5' 1434 }] 1435 /////////////////////////////////////////////////////////////////////////////////// 1436 // ROTATE 1437 }, { 1438 title: 'Rotate', 1439 itemId: 'rotate', 1440 html: '', 1441 styleHtmlContent: true, 1442 styleHtmlCls: 'blue_bg', 1443 height: 130, 1444 items: [{ 1445 xtype: 'radiogroup', 1446 fieldLabel: 'Rotate', 1447 hideEmptyLabel: true, 1448 //cls: 'x-check-group-alt', 1449 //width: 952, 1450 //comumnWidth: 136, 1451 columns: 1, 1452 items: [ 1453 { boxLabel: 'None', name: 'rotate', inputValue: 0, checked: true }, 1454 { boxLabel: '<img src="'+img_dir+'/icons/fam/arrow_rotate_clockwise.png"/> 90° CW', name: 'rotate', inputValue: 90 }, 1455 { boxLabel: '<img src="'+img_dir+'/icons/fam/arrow_rotate_180.png"/> 180°', name: 'rotate', inputValue: 180 }, 1456 { boxLabel: '<img src="'+img_dir+'/icons/fam/arrow_rotate_anticlockwise.png" /> 90° CCW', name: 'rotate', inputValue: 270 } 1457 ] 1458 }] 1459 /////////////////////////////////////////////////////////////////////////////////// 1460 // EXIF DATA 1461 }, { 1462 title: 'Exif Data', 1463 itemId: 'exif_data', 1464 html: '', 1465 styleHtmlContent: true, 1466 styleHtmlCls: 'blue_bg', 1467 height: 380, 1468 //padding: '20 20 20 20', 1469 items: [], 1470 listeners: { 1471 'activate': function(tab) { 1472 var imageId = Ext.ComponentQuery.query('#image_id')[0].getValue(); 1473 1474 console.log('imageId='+imageId); 1475 1476 // LOAD EXIF DATA 1477 Ext.Ajax.request({ 1478 url: app_dir+'/file_update.php', 1479 params: { 1480 image_id: imageId, 1481 action: 'get_exif_data' 1482 }, 1483 success: function(response){ 1484 1485 var text = response.responseText; 1486 var res = new Object(); 1487 res = Ext.JSON.decode(response.responseText); 1488 //console.log(res); 1489 1490 if (res.success == false) { 1491 tab.update(res.msg); 1492 } else { 1493 tab.update(text); 1494 } 1495 1496 }, 1497 failure: function(response) { 1498 //console.log(response); 1499 }, 1500 callback: function() { 1501 //var exif_grid = Ext.create('Ext.ux.grid.TransformGrid', "exif_table", { 1502 // stripeRows: true, 1503 // columnLines: true 1504 //}); 1505 //exif_grid.render(); 1506 } 1507 }); 1508 } 1509 } 1510 }] 1511 }, 1512 actionUpdateHidden, 1513 imageIdHidden, 1514 originalWidthHidden, 1515 originalHeightHidden 1516 ], 1517 1518 dockedItems: [{ 1519 xtype: 'container', 1520 dock: 'bottom', 1521 layout: { 1522 type: 'hbox', 1523 align: 'middle', 1524 pack: 'center' 1525 }, 1526 padding: '10 10 5 10', 1527 1528 items: [{ 1529 xtype: 'button', 1530 formBind: false, 1531 disabled: false, 1532 text: 'Apply Settings & Generate Photo', 1533 cls: 'btn', 1534 overCls: 'customOverStyle', 1535 //width: 140, 1536 handler: function() { 1537 1538 var form = this.up('form').getForm(); 1539 1540 if(form.isValid()){ 1541 form.submit({ 1542 submitEmptyText: false, 1543 clientValidation: false, 1544 url: app_dir+'/file_update.php',
1545 waitMsg: 'Applying Image Effects...', 1546 success: function(form, action) { 1547 //Ext.Msg.alert('Submitted Values', form.getValues(true)); 1548 //this.up('form').getForm().submit(); 1549 //this.up('form').getForm().reset(); 1550 //this.up('window').hide(); 1551 1552 var formVals = form.getValues(); 1553 //console.log(formVals); 1554 1555 //formPanel.destroy(); 1556 //console.log(action.result.file); 1557 1558 //uploadForm.hide(); 1559 //resultsPanel.show(); 1560 1561 var canvasPanel = Ext.ComponentQuery.query('#canvas')[0]; 1562 var canvashtml = '<div align="center"><img src="'+url_path+'/uploads/output/'+action.result.filename+'" /><div style="padding-top: 20px;"><a href="'+url_path+'/download.php?file='+action.result.filename+'"><img src="'+img_dir+'/download.png" /></a></div><div class="another"><a href="'+url_path+'">Upload Another Photo</a></div></div>' 1563 //canvasPanel.update('<div align="center"><img src="'+url_path+'/uploads/output/'+action.result.filename+'" /></div>'); 1564 canvasPanel.update(canvashtml); 1565 1566 1567 canvasPanel.setHeight(action.result.image_height+130); 1568 1569 //var imageIdField = Ext.ComponentQuery.query('#image_id')[0]; 1570 //imageIdField.setValue(action.result.image_id); 1571 1572 //Ext.MessageBox.alert('Success', 'The order has been successfully saved.'); 1573 //Ext.msg('Success', 'The order has been successfully saved.'); 1574 1575 }, 1576 failure: function(form, action) { 1577 Ext.Msg.alert('Failed to Update Image', action.result.msg); 1578 } 1579 }); 1580 1581 } 1582 } 1583 }] 1584 }] 1585 1586 }); 1587 1588 1589 var updateImagePanel = Ext.create('Ext.panel.Panel', { 1590 title: '', 1591 width: 960, 1592 //height: 'auto', 1593 renderTo: 'panel2', 1594 hidden: true, 1595 frame: false, 1596 plain: true, 1597 header: false, 1598 border: 0, 1599 layout: { 1600 type: 'vbox', 1601 align: 'stretch', // Each takes up full width 1602 padding: 0 1603 }, 1604 items: [ 1605 updateForm, 1606 { 1607 xtype: 'splitter' 1608 }, { 1609 xtype: 'panel', 1610 title: 'Canvas', 1611 itemId: 'canvas', 1612 bodyPadding: 5, 1613 styleHtmlContent: true, 1614 styleHtmlCls: 'blue_bg', 1615 flex: 1, 1616 autoScroll: true, 1617 html: '' 1618 /*, 1619 dockedItems: [{ 1620 xtype: 'toolbar', 1621 items: [{ 1622 text: 'Crop Image', 1623 tooltip: 'Crop Image', 1624 iconCls: 'crop', 1625 enableToggle: true, 1626 toggleHandler: function(button, state) { 1627 if (state == true) { 1628 console.log('Toggle on'); 1629 } else { 1630 console.log('Toggle off'); 1631 } 1632 } 1633 }] 1634 }] 1635 */ 1636 }] 1637 }); 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651});
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.