SHARE
TWEET

XD Image Editor 2.0

Ranga14 Jan 29th, 2015 (edited) 34 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $(document).ready(function() {
  2.  
  3.     // Canvas, Session Vars
  4.     var $imgContainer = $('.img_contain');
  5.     var $img = $('.img_contain img');
  6.     var $uuid = $('input[name="uuid"]').val();
  7.     var randNum = Math.floor(Math.random() * (10000000 - 0 + 1)) + 1000000;
  8.  
  9.     // Icon Classes & Setting Null Values
  10.     var $template = $('.more_items, .load_template div');
  11.     var $trans = $('.picture, .transparency div');
  12.     var $reset = $('.restart, .reset div');
  13.     var $undo = $('.undo, .undo_container div');
  14.     var $redo = $('.redo, .redo_container div');
  15.     var scaling_factor = '';
  16.     var tempImgPath = '';
  17.     var frontTempImg = '';
  18.     var backTempImg = '';
  19.     var frontId = '';
  20.     var backId = '';
  21.  
  22.     // JRAC Options & Event Bindings
  23.     var jracOptions = {
  24.         'crop_width': 250,
  25.         'crop_height': 120,
  26.         'crop_left': 100,
  27.         'crop_top': 100,
  28.         'image_width': null,
  29.         'image_height': null,
  30.         'viewport_onload': function() {
  31.  
  32.             // Define Crop Coords & Resize Containers
  33.             var $crop = $('.jrac_crop');
  34.             var $resizeImg = $('#targetImg');
  35.             var $resizeImgContainer = $('.ui-wrapper');
  36.             var $movement = $('.imgDrag');
  37.  
  38.             console.log('Adding 1st History State');
  39.  
  40.             // Add Initial Canvas State after JRAC is loaded
  41.             History.addEntry({
  42.                 type: "init_state",
  43.                 $crop: $crop,
  44.                 $resizeImg: $resizeImg,
  45.                 $resizeImgContainer: $resizeImgContainer,
  46.                 $movement: $movement,
  47.                 imgSrc: tempImgSrc,
  48.                 imgPath: tempImgPath,
  49.                 x: $crop.position().left,
  50.                 y: $crop.position().top,
  51.                 width: $crop.width(),
  52.                 height: $crop.height(),
  53.                 img_width: $resizeImg.width(),
  54.                 img_height: $resizeImg.height(),
  55.                 img_container_width: $resizeImgContainer.width(),
  56.                 img_container_height: $resizeImgContainer.height(),
  57.                 x_img: $movement.position().left,
  58.                 y_img: $movement.position().top
  59.             });
  60.  
  61.             // Hide JRAC crop container onload
  62.             $('.jrac_crop').hide();
  63.             $('.jrac_crop_drag_handler').hide();
  64.             $('.ui-icon').hide();
  65.  
  66.         } // End Function Onload
  67.     };
  68.  
  69.     // History Core
  70.     var History = {
  71.         entries: [],
  72.         position: 0,
  73.         types: {},
  74.  
  75.         /**
  76.         * Perform undo action
  77.         * @return {Boolean}
  78.         */
  79.         undo: function() {
  80.             var currentAction;
  81.  
  82.             if (this.getSize() <= 0 || this.position === 1) {
  83.                 console.log('What is happening?');
  84.                 return false;
  85.             }
  86.  
  87.             this.position--;
  88.  
  89.             currentAction = this.entries[this.position];
  90.             if(currentAction.type == 'init_state') {
  91.                 var temp_position = this.position - 1;
  92.                 currentAction = this.entries[temp_position];
  93.                 while(currentAction.type != 'init_state' && (temp_position >= 0) ) {
  94.                     temp_position--;
  95.                     currentAction = this.entries[temp_position];
  96.                 }
  97.             } else {
  98.                 currentAction = this.entries[this.position - 1];
  99.             }
  100.  
  101.             if (this.types.hasOwnProperty(currentAction.type)) {
  102.                 this.types[currentAction.type](currentAction);
  103.             }
  104.  
  105.             if (this.position === 1) {
  106.                 this.deleteHistory();
  107.                
  108.                 // If History position is 1, always show the Init Image Src
  109.                 var $resizeImgContainer = $('.ui-wrapper');
  110.  
  111.                 $img.prop('src', this.entries[0].imgSrc);
  112.                 $img.css('height', this.entries[0].img_height);
  113.                 $img.css('width', this.entries[0].img_width);
  114.                 $resizeImgContainer.css('height', this.entries[0].img_container_height);
  115.                 $resizeImgContainer.css('width', this.entries[0].img_container_width);
  116.                 $resizeImgContainer.css('left', this.entries[0].x_img);
  117.                 $resizeImgContainer.css('top', this.entries[0].y_img);
  118.  
  119.                 $undo.trigger('history:end');
  120.             }
  121.            
  122.             if ( currentAction.type == 'gray_scale' ) {
  123.                 $('.grayscale a').css('opacity', 0.25).css('cursor', 'default');
  124.                 $('.grayscale div').css('opacity', 0.25);
  125.             } else {
  126.                 // Check to make sure it won't bind Grayscale click more than once (This would trigger the Image Service multiple times if this check wasn't here.)
  127.                 if ( $('.grayscale a').css('opacity') == 0.25 ) {
  128.                     $('.grayscale .adjust').live('click', grayscale);  
  129.                 }
  130.                 $('.grayscale a').css('opacity', 1).css('cursor', 'pointer');
  131.                 $('.grayscale div').css('opacity', 1);
  132.             }
  133.  
  134.             // Activate redo icon
  135.             $redo.css('opacity', 1).css('cursor', 'pointer');
  136.  
  137.             // Post to Console (For Testing purposes)
  138.  
  139.             console.log("Undo Position : " + this.position + ", Size : " + this.getSize());
  140.             console.log(History.entries);
  141.  
  142.             return true;
  143.         },
  144.  
  145.         /**
  146.         * Get History Size
  147.         * @return {Integer}
  148.         */
  149.         getSize: function() {
  150.             return this.entries.length;
  151.         },
  152.  
  153.         /**
  154.         * Add an action entry to history
  155.         * @param {Object} action
  156.         */
  157.         addEntry: function(action) {
  158.             if (this.getSize() !== this.position) {
  159.                 this.entries.splice(this.position, Number.MAX_VALUE);
  160.             }
  161.  
  162.             this.position++;
  163.  
  164.             action.sort = this.position;
  165.             this.entries.push(action);
  166.  
  167.             // Post to Console (For Testing purposes)
  168.             console.log("Add Entry Position : " + this.position + ", Size : " +this.getSize());
  169.             console.log(History.entries);
  170.  
  171.             // Make sure first entry is showing the New Image
  172.             if ( this.entries[0] == '' || this.entries[0] == null || this.entries[0] == 'undefined' ) {
  173.                 this.entries[0].imgSrc = tempImgSrc;
  174.                 this.entries[0].imgPath = tempImgPath;
  175.                 this.entries[0].img_height = $imgHeight;
  176.                 this.entries[0].img_width = $imgWidth;
  177.                 this.entries[0].img_container_height = $imgHeight;
  178.                 this.entries[0].img_container_width = $imgWidth;
  179.             }
  180.  
  181.             // Check to see if the Cropper Tool is visible, then set the Y coord to 0 (This is done because a phantom # kept being put into the 2nd entry)
  182.             if ( $('.jrac_crop').css('display') == 'none' ) {
  183.                 $.each( this.entries, function( i, val ) {
  184.                     val.x = 0;
  185.                     val.y = 0;
  186.                 });
  187.             }
  188.  
  189.             // If a User moves an image twice, undos then rotates for example, this takes away their redo ability (This was a bug attempting to go back to the last state)
  190.             lastObj = this.entries.slice(-1)[0];
  191.             if ( this.getSize() > 1 && this.position != lastObj ) {
  192.                 $redo.trigger('history:end');
  193.             }
  194.         },
  195.  
  196.         /**
  197.         * Load the types with proper callbacks
  198.         * @param  {Object} callbacks
  199.         */
  200.         init: function(callbacks) {
  201.             for (var prop in callbacks) {
  202.                 this.types[prop] = callbacks[prop];
  203.             }
  204.         },
  205.  
  206.         // Rewind to Start
  207.         rewind: function() {
  208.             while(this.undo());
  209.         },
  210.        
  211.         // Empty History Array
  212.         deleteHistory: function() {
  213.             while(this.getSize() > 1) {
  214.                 console.log('Delete History');
  215.                 // Delete Array Objects
  216.                 this.entries.pop();
  217.             }  
  218.         },
  219.        
  220.         // Empty ALL History Array
  221.         deleteHistoryInitial: function() {
  222.             while(this.getSize() > 0) {
  223.                 console.log('Delete History plus Initial State');
  224.                 // Delete Array Objects
  225.                 this.entries.pop();
  226.             }  
  227.         }
  228.  
  229.     }
  230.  
  231.     // Once a user clicks undo/redo, commence action below...
  232.     History.init({
  233.         // Cropper Tool, Image and Resize
  234.  
  235.         crop: function(output, undo, redo) {
  236.  
  237.             console.log('Output is Crop: ' + output.imgSrc);
  238.  
  239.             console.log(output.$resizeImg.height());
  240.             console.log(output.$resizeImg.width());
  241.  
  242.             output.$resizeImg.prop('src', output.imgSrc);
  243.             // Adjust Cropper Tool Position
  244.             output.$crop.css('left', output.x);
  245.             output.$crop.css('top', output.y);
  246.             output.$crop.width(output.width);
  247.             output.$crop.height(output.height);
  248.             // Adjust Image Height/Width
  249.             output.$resizeImg.width(output.img_width);
  250.             output.$resizeImg.height(output.img_height);
  251.             // Adjust Resize Container Height/Width
  252.             output.$resizeImgContainer.width(output.img_container_width);
  253.             output.$resizeImgContainer.height(output.img_container_height);
  254.             // Adjust Image Draggable Container Position
  255.             output.$movement.css('left', output.x_img);
  256.             output.$movement.css('top', output.y_img);
  257.             output.$resizeImgContainer.css('left', output.x_img);
  258.             output.$resizeImgContainer.css('top', output.y_img);
  259.         },
  260.         // If it is Grayscale, add color back...
  261.         gray_scale: function(output, redo) {
  262.             console.log('GRAYSCALE OUTPUT');
  263.  
  264.             output.$resizeImg.prop('src', output.imgSrc);
  265.             // Adjust Cropper Tool Position
  266.             output.$crop.css('left', output.x);
  267.             output.$crop.css('top', output.y);
  268.             output.$crop.width(output.width);
  269.             output.$crop.height(output.height);
  270.             // Adjust Image Height/Width
  271.             output.$resizeImg.width(output.img_width);
  272.             output.$resizeImg.height(output.img_height);
  273.             // Adjust Resize Container Height/Width
  274.             output.$resizeImgContainer.width(output.img_container_width);
  275.             output.$resizeImgContainer.height(output.img_container_height);
  276.             // Adjust Image Draggable Container Position
  277.             output.$movement.css('left', output.x_img);
  278.             output.$movement.css('top', output.y_img);
  279.             output.$resizeImgContainer.css('left', output.x_img);
  280.             output.$resizeImgContainer.css('top', output.y_img);
  281.         },
  282.         // Rotate Image
  283.         rotate: function(output, undo, redo) {
  284.  
  285.             console.log('Output is Rotate: ' + output.imgSrc);
  286.  
  287.             console.log(output.$resizeImg.height());
  288.             console.log(output.$resizeImg.width());
  289.  
  290.             output.$resizeImg.prop('src', output.imgSrc);
  291.             // Adjust Cropper Tool Position
  292.             output.$crop.css('left', output.x);
  293.             output.$crop.css('top', output.y);
  294.             output.$crop.width(output.width);
  295.             output.$crop.height(output.height);
  296.            
  297.             // Sense what container dims are at.
  298.             if ( History.entries[History.position-1].type == 'rotate' ) {
  299.                 console.log('Switch Height/Width');
  300.                 // Adjust Image Height/Width
  301.                 output.$resizeImg.width(output.img_height);
  302.                 output.$resizeImg.height(output.img_width);
  303.                 // Adjust Resize Container Height/Width
  304.                 output.$resizeImgContainer.width(output.img_container_height);
  305.                 output.$resizeImgContainer.height(output.img_container_width);
  306.             } else {
  307.                 console.log('Normal Height/Width');
  308.                 // Adjust Image Height/Width
  309.                 output.$resizeImg.width(output.img_width);
  310.                 output.$resizeImg.height(output.img_height);
  311.                 // Adjust Resize Container Height/Width
  312.                 output.$resizeImgContainer.width(output.img_container_width);
  313.                 output.$resizeImgContainer.height(output.img_container_height);
  314.             }
  315.            
  316.             // Adjust Image Draggable Container Position
  317.             output.$movement.css('left', output.x_img);
  318.             output.$movement.css('top', output.y_img);
  319.             output.$resizeImgContainer.css('left', output.x_img);
  320.             output.$resizeImgContainer.css('top', output.y_img);
  321.         },
  322.         resize: function(output) {
  323.  
  324.             console.log('GRAYSCALE RESIZE');
  325.  
  326.             console.log(output.x_img);
  327.             console.log(output.y_img);
  328.  
  329.             output.$resizeImg.prop('src', output.imgSrc);
  330.             // Adjust Cropper Tool Position
  331.             output.$crop.css('left', output.x);
  332.             output.$crop.css('top', output.y);
  333.             output.$crop.width(output.width);
  334.             output.$crop.height(output.height);
  335.             // Adjust Image Height/Width
  336.             output.$resizeImg.width(output.img_width);
  337.             output.$resizeImg.height(output.img_height);
  338.             // Adjust Resize Container Height/Width
  339.             output.$resizeImgContainer.width(output.img_container_width);
  340.             output.$resizeImgContainer.height(output.img_container_height);
  341.             // Adjust Image Draggable Container Position
  342.             output.$movement.css('left', output.x_img);
  343.             output.$movement.css('top', output.y_img);
  344.             output.$resizeImgContainer.css('left', output.x_img);
  345.             output.$resizeImgContainer.css('top', output.y_img);
  346.         },
  347.     });
  348.  
  349.     // If undo has been clicked to the last state, make transparent
  350.     $undo.live('history:end', function() {
  351.         $(this).css('opacity', 0.25).css('cursor', 'default');
  352.     });
  353.  
  354.     // If redo has been clicked to the last state, make transparent
  355.     $redo.live('history:end', function() {
  356.         $(this).css('opacity', 0.25).css('cursor', 'default');
  357.     });
  358.  
  359.     // Modal Image Editor
  360.     $('.edit_image').live('click', function(e){
  361.         e.preventDefault();
  362.  
  363.         // Hide the Image Wrapper & Image (This is used to fix the 1st image being seen when a user clicks on a new Image to edit.)
  364.         $('.ui-wrapper').hide();
  365.         $img.hide();
  366.  
  367.         // Set as Global Vars (Grabbing Image Photo ID, Image Src and Agent Type from Link Attributes (See includes/functions/html.inc)
  368.         $imgID = $(this).data('id');
  369.         $imgSrc = $(this).data('rel');
  370.         $typeLabel = $(this).data('type');
  371.         $frontID = $(this).data('front');
  372.         $backID = $(this).data('back');
  373.  
  374.         console.log($imgSrc);
  375.  
  376.         var coords = { rel: $imgSrc };
  377.         // call to image service
  378.         doOperation('get', coords);
  379.     });
  380.  
  381.     // Close Image Editor (Cancel Button)
  382.     $('.imgEditForm input[name="cancel"]').click(function(e) {
  383.         e.preventDefault();
  384.  
  385.         // Destroy JRAC
  386.         $img.jrac('destroy');
  387.         // Delete History + Initial State
  388.         //History.deleteHistoryInitial();
  389.         // Reset
  390.         destroyJrac();
  391.        
  392.         // ReEnable Browser Scrolling on Image Editor close
  393.         $("body").css('overflow', '');
  394.                                
  395.         // Close Modal
  396.         $.modal.close();
  397.         window.location.reload();
  398.     });
  399.  
  400.     // Close Image Editor (X Button)
  401.     $('.img_edit_close a').click(function(e) {
  402.         e.preventDefault();
  403.  
  404.         // Destroy JRAC
  405.         $img.jrac('destroy');
  406.         // Reset
  407.         destroyJrac();
  408.        
  409.         // ReEnable Browser Scrolling on Image Editor close
  410.         $("body").css('overflow', '');
  411.        
  412.         // Close Modal
  413.         $.modal.close();
  414.         window.location.reload();
  415.     });
  416.  
  417.     // Whenever the Draggable or Resizable JQuery UI Method is stopped, trigger this Global Function (See jquery.jrac.js, line 188 and 202)
  418.     saveImageState = function() {
  419.         // Define Crop Coords & Resize Containers
  420.         var $crop = $('.jrac_crop');//.show(); // Start grab x/y coord hack
  421.         var $resizeImg = $('#targetImg');
  422.         var $resizeImgContainer = $('.ui-wrapper');
  423.         var $movement = $('.imgDrag');
  424.        
  425.         console.log('Resize Image');
  426.        
  427.         //console.log($crop.position().left);
  428.         //console.log($crop.position().top);
  429.    
  430.         //$resizeImgContainer.css('left', ($crop.position().left - $movement.position().left));
  431.         //$resizeImgContainer.css('top', ($crop.position().top - $movement.position().top));
  432.  
  433.         var coords = {
  434.             imageId: $imgID,
  435.             uuid: $uuid,
  436.             scaleFactor: scaling_factor,
  437.             tempImageID: tempImgID,
  438.             tempImgPath: History.entries[History.position-1].imgPath,
  439.             imageWidth: $resizeImg.width(),
  440.             imageHeight: $resizeImg.height()
  441.         };
  442.        
  443.         //$crop.hide(); // End grab x/y coord hack
  444.        
  445.         // call to image service
  446.         doOperation( 'resize', coords );
  447.        
  448.         // Rebind Click Event
  449.         $('.restart').live('click', resetClick);
  450.  
  451.         // Ractivate Icon
  452.         $undo.css('opacity', 1).css('cursor', 'pointer');
  453.         // Enable Reset Icon
  454.         $reset.css('opacity', 1).css('cursor', 'pointer');
  455.     };
  456.  
  457.     // Undo Click Event
  458.     $('.undo').live('click', function(e) {
  459.         e.preventDefault();
  460.  
  461.         History.undo();
  462.  
  463.         // Ractivate Undo Icon
  464.         $redo.css('opacity', 1).css('cursor', 'pointer');
  465.     });
  466.  
  467.     // Redo Click Event
  468.     $('.redo').live('click', function(e) {
  469.         e.preventDefault();
  470.  
  471.         History.redo();
  472.  
  473.         // Ractivate Undo Icon
  474.         $undo.css('opacity', 1).css('cursor', 'pointer');
  475.     });
  476.  
  477.     // Pull the Cropping tool up.
  478.     $('.crop_normal').live('click', function(e) {
  479.         e.preventDefault();
  480.  
  481.         // Load JRAC Cropping Tool
  482.         $('.jrac_crop').show();
  483.         $('.jrac_crop_drag_handler').show();
  484.         $('.ui-icon').show();
  485.  
  486.         $('.jrac_crop').append('<div class="absolute_center crop_handle is_right"></div><div class="absolute_center crop_handle is_bottom"></div>');
  487.  
  488.         // Remove Grayscale Icon and add Restore Color Icon back
  489.         $('.crop_container a').addClass('crop_apply');
  490.         $('.crop_container a').removeClass('crop_normal');
  491.  
  492.         // Clear Crop text and add apply crop text back
  493.         $('.crop_container div').empty().text('Apply Crop');
  494.  
  495.         // Activate Crop to Template Icon
  496.         $template.css('opacity', 1).css('cursor', 'pointer');
  497.  
  498.         // Rebind Click Event
  499.         $('.more_items').live('click', cropTemplateClick);
  500.         $('.restart').live('click', resetClick);
  501.        
  502.         // Enable Reset Icon
  503.         $reset.css('opacity', 1).css('cursor', 'pointer');
  504.  
  505.  
  506.         // Load Crop to Template Tooltip
  507.         $('.tp_loadTemplate').fadeIn(500);
  508.     });
  509.  
  510.     // Apply Crop
  511.     $('.crop_apply').live('click', function(e) {
  512.         e.preventDefault();
  513.        
  514.         // Define Crop Coords & Resize Containers
  515.         var $crop = $('.jrac_crop');
  516.         var $resizeImg = $('#targetImg');
  517.         var $movement = $('.imgDrag');
  518.        
  519.         var x1 = $crop.offset().left;
  520.         var y1 = $crop.offset().top;
  521.         var h1 = $crop.outerHeight(true);
  522.         var w1 = $crop.outerWidth(true);
  523.         var b1 = y1 + h1;
  524.         var r1 = x1 + w1;
  525.         var x2 = $resizeImg.offset().left;
  526.         var y2 = $resizeImg.offset().top;
  527.         var h2 = $resizeImg.outerHeight(true);
  528.         var w2 = $resizeImg.outerWidth(true);
  529.         var b2 = y2 + h2;
  530.         var r2 = x2 + w2;
  531.        
  532.         // Detect if the Cropper Tool and the Image are colliding and proceed with Crop.
  533.         if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
  534.             // Pop Modal to Alert User they need to crop.
  535.             cropToolAlert();
  536.             return false;  
  537.         } else {
  538.             var coords = {
  539.                 // Resource Value is now the Image ID instead of the Image SRC
  540.                 imageId: $imgID,
  541.                 uuid: $uuid,
  542.                 scaleFactor: scaling_factor,
  543.                 tempImageID: tempImgID,
  544.                 tempImgPath: History.entries[History.position-1].imgPath,
  545.                 cropX: ($crop.position().left - $movement.position().left),
  546.                 cropY: ($crop.position().top - $movement.position().top),
  547.                 cropImageWidth: $crop.width(),
  548.                 cropImageHeight: $crop.height(),
  549.                 imageWidth: $resizeImg.width(),
  550.                 imageHeight: $resizeImg.height()
  551.             };
  552.    
  553.             console.log('x:' + ( $crop.position().left - $movement.position().left) );
  554.             console.log('y:' + ( $crop.position().top - $movement.position().top) );
  555.             console.log('crop width:' + $crop.width());
  556.             console.log('crop height:' + $crop.height());
  557.             console.log('image width:' + $resizeImg.width());
  558.             console.log('image height:' + $resizeImg.height());
  559.             console.log('crop temp image:' + tempImgPath);
  560.             console.log(scaling_factor);
  561.             console.log(tempImgID);
  562.    
  563.             // call to image service
  564.             doOperation( 'crop', coords );
  565.    
  566.             // Rebind Click Event
  567.             $('.restart').live('click', resetClick);
  568.    
  569.             // Clear Apply Crop text and add crop text back
  570.             $('.crop_container div').empty().text('Crop');
  571.    
  572.             // Revert Classes & Hide the Cropper Box Tool
  573.             $('.crop_container a').removeClass('crop_apply');
  574.             $('.crop_container a').addClass('crop_normal');
  575.             $('.jrac_crop').hide();
  576.             $('.jrac_crop_drag_handler').hide();
  577.             $('.ui-icon').hide();
  578.    
  579.             // Enable Reset Icon
  580.             $reset.css('opacity', 1).css('cursor', 'pointer');
  581.            
  582.             return true;
  583.         }
  584.        
  585.     });
  586.  
  587.     // Rotate
  588.     $('.repeat').live('click', function(e) {
  589.         e.preventDefault();
  590.  
  591.         // Define Crop Coords & Resize Containers
  592.         var $crop = $('.jrac_crop');
  593.         var $resizeImg = $('#targetImg');
  594.         var $resizeImgContainer = $('.ui-wrapper');
  595.         var $movement = $('.imgDrag');
  596.        
  597.         // Image Service Values
  598.         var coords = {
  599.             imageId: $imgID,
  600.             tempImageID: tempImgID,
  601.             rotate: 90,
  602.             scaleFactor: scaling_factor,
  603.             tempImgPath: History.entries[History.position-1].imgPath
  604.         };
  605.  
  606.         // call to image service
  607.         doOperation( 'rotate', coords );
  608.  
  609.         // Rebind Click Event
  610.         $('.restart').live('click', resetClick);
  611.  
  612.         // Ractivate Undo Icon
  613.         $undo.css('opacity', 1).css('cursor', 'pointer');
  614.         // Enable Reset Icon
  615.         $reset.css('opacity', 1).css('cursor', 'pointer');
  616.     });
  617.  
  618.     // Desaturate / Grayscale Image
  619.     $('.grayscale .adjust').live('click', function(e){
  620.         e.preventDefault();
  621.        
  622.         grayscale();
  623.     });
  624.    
  625.     var grayscale = function() {
  626.         // Define Crop Coords & Resize Containers
  627.         var $crop = $('.jrac_crop');
  628.         var $resizeImg = $('#targetImg');
  629.         var $resizeImgContainer = $('.ui-wrapper');
  630.         var $movement = $('.imgDrag');
  631.        
  632.         console.log('History Img Path: ' + History.entries[History.position-1].imgPath);
  633.        
  634.         // Image Service Values
  635.         var coords = {
  636.             imageId: $imgID,
  637.             tempImageID: tempImgID,
  638.             scaleFactor: scaling_factor,
  639.             tempImgPath: History.entries[History.position-1].imgPath
  640.         };
  641.  
  642.         // call to image service
  643.         doOperation( 'gray_scale', coords );
  644.        
  645.         // Rebind Click Event
  646.         $('.restart').live('click', resetClick);
  647.        
  648.         // Unbind Click Event
  649.         $('.grayscale .adjust').die('click');
  650.        
  651.         // Disable User from applying Grayscale
  652.         $('.grayscale a').css('opacity', 0.25).css('cursor', 'default');
  653.         $('.grayscale div').css('opacity', 0.25);
  654.        
  655.         // Ractivate Undo Icon
  656.         $undo.css('opacity', 1).css('cursor', 'pointer');
  657.         // Enable Reset Icon
  658.         $reset.css('opacity', 1).css('cursor', 'pointer');
  659.     };
  660.    
  661.     /** Integration with image service crop, rotate and greyscale actions **/
  662.     function doOperation(operationName, coords) {
  663.  
  664.         $.ajax({
  665.             // Whatever PHP page to post data to and type
  666.             type: 'post',
  667.             url: '/next/ajax/image_editor_api.php?op='+operationName,
  668.             dataType: 'json',
  669.             // Grabbing and passing the vlues from coords var above
  670.             data: coords,
  671.             success: function(json) {
  672.                 // Success Message
  673.                 console.log('AJAX Success!');
  674.  
  675.                 // Global Vars returned from Image Service (New Image SRC is REQUIRED to be output here in order to load into canvas!)
  676.                 photoID = json['image_id'];
  677.                 tempImgID = json['temp_image_id'];
  678.                 tempImgSrc = 'http://' + json['temp_image_src'];
  679.                 scaling_factor = json['scaling_factor'];
  680.                 tempImgPath = json['temp_image_path'];
  681.  
  682.                 // Load the Image first...
  683.                 $img.one('load', function() {
  684.                     // Fade in new Image
  685.                     $('.ui-wrapper').fadeIn(500);
  686.                     $img.fadeIn(500);
  687.  
  688.                     // Detect the Images natural Height/Width
  689.                     $imgHeight = this.naturalHeight;
  690.                     $imgWidth = this.naturalWidth;
  691.  
  692.                     // Change Container Dimensions
  693.                     $('.ui-wrapper').css('height', $imgHeight);
  694.                     $('.ui-wrapper').css('width', $imgWidth);
  695.  
  696.                     // Change Image Dimensions
  697.                     $img.css('height', $imgHeight);
  698.                     $img.css('width', $imgWidth);
  699.                 })
  700.                 // Load Blank Image SRC (This is a fix to force Chrome to load the same Image again.)
  701.                 .attr('src', '')
  702.                 // Load Photo into DOM (Fix for IE to force .load to work properly)
  703.                 .attr('src', tempImgSrc)
  704.                 // Check to see if the Image has loaded before making an entry
  705.                 .complete;
  706.  
  707.                 // Modal Check
  708.                 if ( /*$('.imgInt').css('display') == 'none'*/ History.getSize() == 0 ) {
  709.                     $('.imgInt').modal({
  710.                         onShow: function (dialog) {
  711.                             // Check to see if JRAC is already loaded or not
  712.                             if ( !$('.imgDrag').parent().hasClass('jrac_viewport') ) {
  713.                                 // Initialize JRAC and its Options (We only want to load it once.)
  714.                                 $img.jrac(jracOptions);
  715.  
  716.                                 // Remove Image Contain Dimensions
  717.                                 $imgContainer.removeAttr('style');
  718.                                
  719.                                 // Adjust Modal Height on Load
  720.                                 adjust_size();
  721.                                
  722.                                 // Adjust position of Image Editor Modal
  723.                                 dialog.container.css({top: '5%'});
  724.                                
  725.                                 // Disable Browser Scrolling on Image Editor load
  726.                                 $("body").css('overflow', 'hidden');
  727.                             }
  728.                         },
  729.                         persist: true,
  730.                         opacity: 60,
  731.                         overlayCss: { backgroundColor: "#fff" },
  732.                         autoResize: true,
  733.                         //minHeight: '80%',
  734.                         close: false
  735.                     });
  736.                 } else {
  737.                     console.log('Load Image into existing JRAC.');
  738.  
  739.                     // Define Crop Coords & Resize Containers
  740.                     var $resizeImg = $('#targetImg');
  741.                     var $resizeImgContainer = $('.ui-wrapper');
  742.                     var $movement = $('.imgDrag');
  743.  
  744.                     console.log($resizeImg.height());
  745.                     console.log($resizeImg.width());
  746.  
  747.                     // If Crop operation, set Image & Container Dimensions
  748.                     if ( operationName == 'crop' ) {
  749.                         var $crop = $('.jrac_crop').show(); // Start grab x/y coord hack
  750.                        
  751.                         console.log($crop.position().left);
  752.                         console.log($crop.position().top);
  753.                    
  754.                         $resizeImgContainer.css('left', ($crop.position().left - $movement.position().left));
  755.                         $resizeImgContainer.css('top', ($crop.position().top - $movement.position().top));
  756.                        
  757.                         History.addEntry({
  758.                             type: "crop",
  759.                             $crop: $crop,
  760.                             $resizeImg: $resizeImg,
  761.                             $resizeImgContainer: $resizeImgContainer,
  762.                             $movement: $movement,
  763.                             imgSrc: tempImgSrc,
  764.                             imgPath: tempImgPath,
  765.                             x: ($crop.position().left - $movement.position().left),
  766.                             y: ($crop.position().top - $movement.position().top),
  767.                             width: $crop.width(),
  768.                             height: $crop.height(),
  769.                             img_width: $crop.width(),
  770.                             img_height: $crop.height(),
  771.                             img_container_width: $crop.width(),
  772.                             img_container_height: $crop.height(),
  773.                             x_img: $movement.position().left,
  774.                             y_img: $movement.position().top
  775.                         });
  776.                        
  777.                         $crop.hide(); // End grab x/y coord hack
  778.                     } else {
  779.                         var $crop = $('.jrac_crop');
  780.                        
  781.                         History.addEntry({
  782.                             type: operationName,
  783.                             $crop: $crop,
  784.                             $resizeImg: $resizeImg,
  785.                             $resizeImgContainer: $resizeImgContainer,
  786.                             $movement: $movement,
  787.                             imgSrc: tempImgSrc,
  788.                             imgPath: tempImgPath,
  789.                             x: $crop.position().left,
  790.                             y: $crop.position().top,
  791.                             width: $crop.width(),
  792.                             height: $crop.height(),
  793.                             img_width: $resizeImg.width(),
  794.                             img_height: $resizeImg.height(),
  795.                             img_container_width: $resizeImgContainer.width(),
  796.                             img_container_height: $resizeImgContainer.height(),
  797.                             x_img: $movement.position().left,
  798.                             y_img: $movement.position().top
  799.                         });
  800.                     }
  801.  
  802.                     // Ractivate Undo Icon
  803.                     $undo.css('opacity', 1).css('cursor', 'pointer');
  804.                     // Enable Reset Icon
  805.                     $reset.css('opacity', 1).css('cursor', 'pointer');
  806.                 }
  807.             },
  808.             error: function(xhr, errorType, errorMessage) {
  809.                 console.log('AJAX Failure!');
  810.                 console.log(errorMessage);
  811.             }
  812.         });
  813.     }
  814.  
  815.     // Make Image Transparent
  816.     var transClick = function() {
  817.         // Remove Color Class & add Transparency Class to DOM
  818.         $img.removeClass('restore_color');
  819.         $img.toggleClass("trans");
  820.  
  821.         // Remove Transparency Tooltip
  822.         $('.tp_trans').fadeOut(500);
  823.     };
  824.  
  825.     // Load Template
  826.     var cropTemplateClick = function() {
  827.         // Rebind Click Event
  828.         $('.picture').live('click', transClick);
  829.        
  830.         // Resize viewport
  831.         $('.jrac_viewport').addClass('viewport_large');
  832.  
  833.         // Add in the Crop to Template class to the DOM
  834.         $(".jrac_viewport").addClass("template");
  835.  
  836.         // Remove Load Template Class and Add Remove Template Class
  837.         $(this).removeClass('more_items').addClass('circle_remove');
  838.  
  839.         // Slide Side Template selection tabs down
  840.         $('.sides').slideDown(500);
  841.  
  842.         // Make Load Template icon visible
  843.         $trans.css('opacity', 1).css('cursor', 'pointer');
  844.  
  845.         // Clear Load Template text and add Unload Template text
  846.         $('.load_template div').empty().text('Hide Template');
  847.  
  848.         // Remove Crop to Template Tooltip
  849.         $('.tp_loadTemplate').fadeOut(500);
  850.  
  851.         // Add Transparency (By default)
  852.         $img.addClass('trans');
  853.  
  854.         // Call to get Template
  855.         var coords = {
  856.             'frontTemplateId': $frontID,
  857.             'fsize':'large',
  858.             'backTemplateId': $backID,
  859.             'bsize':'large'
  860.         }
  861.  
  862.         //loading template thumbnails
  863.         $.ajax({
  864.             // Whatever PHP page to post data to and type
  865.             type: 'post',
  866.             url: '/next/ajax/image_editor_api.php?op=load_template',
  867.             dataType: 'json',
  868.             // Passing the image value and current image rotation to the server
  869.             data: coords ,
  870.             success: function(json) {
  871.                 console.log('LOad Template SUCCESS');
  872.                 frontTempImg = json['front_temp_image_src'];
  873.                 backTempImg = json['back_temp_image_src'];
  874.                
  875.                 // Hide Side B if there is no template
  876.                 if ( backTempImg == '' || backTempImg == null ) {
  877.                     $('.side_b').hide();
  878.                     $('.imgAlertBoxContainer_one_side').fadeIn(500);
  879.                 } else {
  880.                     // Insert Info Container
  881.                     $('.imgAlertBoxContainer').fadeIn(500);
  882.                 }
  883.                
  884.                 // Change attribute to the following. Replace URL below with new Template Image URL...
  885.                 $('.template').attr('style', 'background: #c4c4c4 url(http://' + frontTempImg + ') left top no-repeat !important');
  886.             },
  887.             error: function(xhr, errorType, errorMessage) {
  888.                 console.log('Load Template Failure!');
  889.                 console.log(errorMessage);
  890.             }
  891.         });
  892.  
  893.         // Show Tooltips for Resizing/Movement and Transparency
  894.         $('.tp_trans').fadeIn(500);
  895.     };
  896.  
  897.     // Unload Template
  898.     $('.circle_remove').live('click', function(e){
  899.         e.preventDefault();
  900.  
  901.         // Unbind Click Event
  902.         $('.picture').die('click', transClick);
  903.        
  904.         // Remove Resize viewport class
  905.         $('.jrac_viewport').removeClass('viewport_large');
  906.  
  907.         // Add in the Crop to Template class to the DOM
  908.         $(".jrac_viewport").addClass("template");
  909.  
  910.         // Remove Unload Template Class and Load Template Class
  911.         $(this).removeClass('circle_remove').addClass('more_items');
  912.  
  913.         // Clear Unload Template text and add Load Template text
  914.         $('.load_template div').empty().text('Crop to Template');
  915.  
  916.         // Hide Template Alert Box
  917.         $('.imgAlertBoxContainer').hide();
  918.         $('.imgAlertBoxContainer_one_side').hide();
  919.  
  920.         // Slide Side Template selection tabs up
  921.         $('.sides').hide(500);
  922.  
  923.         // Clear Templates from Canvas
  924.         $('.template').removeAttr('style');
  925.  
  926.         // Remove Transparency
  927.         $img.removeClass("trans");
  928.  
  929.         // Remove Tooltips for Resizing/Movement and Transparency
  930.         $('.tp_trans').fadeOut(500);
  931.  
  932.         // Disable Trans Icon
  933.         $trans.css('opacity', 0.25).css('cursor', 'default');
  934.     });
  935.  
  936.     // Toggle Side A Template
  937.     $('.side_a').live('click', function(e){
  938.         e.preventDefault();
  939.  
  940.         // Success Message
  941.         $('.template').attr('style', 'background: #c4c4c4 url(http://' + frontTempImg + ') left top no-repeat !important');
  942.     });
  943.  
  944.     // Toggle Side B Template
  945.     $('.side_b').live('click', function(e){
  946.         e.preventDefault();
  947.  
  948.         // Success Message
  949.         $('.template').attr('style', 'background: #c4c4c4 url(http://' + backTempImg + ') left top no-repeat !important');
  950.     });
  951.  
  952.     // Reset All Process Form Function
  953.     var destroyJrac = function() {
  954.         // Render first canvas save
  955.         History.rewind();
  956.         // Delete History
  957.         History.deleteHistory();
  958.        
  959.         // Reset Container & Image Positions
  960.         $('.imgDrag').css({ top: 0, left: 0 });
  961.        
  962.         // Define Crop Coords & Resize Containers
  963.         var $crop = $('.jrac_crop');
  964.         var $resizeImg = $('#targetImg');
  965.         var $movement = $('.imgDrag');
  966.  
  967.         // Clear Apply Crop text and add crop text back, remove Crop Apply Class and Add Crop Normal
  968.         $('.crop_container div').empty().text('Crop');
  969.         $('.crop_container a').removeClass('crop_apply');
  970.         $('.crop_container a').addClass('crop_normal');
  971.         // Hide Crop Box
  972.         $('.jrac_crop').hide();
  973.         $('.jrac_crop_drag_handler').hide();
  974.         $('.ui-icon').hide();
  975.         // Hide Template Alert Box
  976.         $('.imgAlertBoxContainer').hide();
  977.         // Disable Redo
  978.         $redo.trigger('history:end');
  979.         // Remove Hide Template Class and add Crop to Template Class
  980.         $('.load_template a').removeClass('circle_remove').addClass('more_items');
  981.         // Clear Unload Template text and add Load Template text
  982.         $('.load_template div').empty().text('Crop to Template');
  983.         // Remove Template
  984.         $('.template').removeAttr('style');
  985.         // Remove Sides
  986.         $('.sides').hide();
  987.         // Remove Tooltips
  988.         $('.tp_loadTemplate').hide();
  989.         $('.tp_trans').hide();
  990.         // Remove Transparency
  991.         $img.removeClass('trans');
  992.  
  993.         // Unbind Click Events
  994.         $('.picture').die('click', transClick);
  995.         $('.more_items').die('click');
  996.         $('.restart').die('click');
  997.         $undo.die('click');
  998.         $redo.die('click');
  999.        
  1000.         // Disable Reset, Transparency & Crop to Template Icons
  1001.         $reset.css('opacity', 0.25).css('cursor', 'default');
  1002.         $template.css('opacity', 0.25).css('cursor', 'default');
  1003.         $trans.css('opacity', 0.25).css('cursor', 'default');
  1004.  
  1005.         // Close Modal
  1006.         $('.submodal_reset').fadeOut(500);
  1007.     };
  1008.  
  1009.     // Reset All Process Form
  1010.     $('.submodal_reset form').submit(function(e) {
  1011.         e.preventDefault();
  1012.        
  1013.         // Destroy JRAC
  1014.         $img.jrac('destroy');
  1015.         // Delete History
  1016.         //History.deleteHistory();
  1017.         // Reset
  1018.         destroyJrac();
  1019.     });
  1020.  
  1021.  
  1022.     // Reset Modal
  1023.     var resetClick = function() {
  1024.         $('.submodal_reset').fadeIn(500);
  1025.     };
  1026.  
  1027.     // Close Reset Modal upon clicking Cancel
  1028.     $('.submodal_reset input[value="cancel"]').click(function(e) {
  1029.         e.preventDefault();    
  1030.        
  1031.         // Close Modal
  1032.         $('.submodal_reset').fadeOut(500);
  1033.     });
  1034.    
  1035.     // Reset Modal
  1036.     var cropToolAlert = function() {
  1037.         $('.submodal_crop').fadeIn(500);
  1038.     };
  1039.    
  1040.     // Close Crop Tool Alert Modal upon clicking Cancel
  1041.     $('.submodal_crop input[type="submit"]').click(function(e) {
  1042.         e.preventDefault();    
  1043.        
  1044.         // Close Modal
  1045.         $('.submodal_crop').fadeOut(500);
  1046.     });
  1047.  
  1048.     // Close Load Template Tooltip
  1049.     $('.tp_loadTemplate .close').click(function(e) {
  1050.         e.preventDefault();
  1051.  
  1052.         // Close Tooltip
  1053.         $('.tp_loadTemplate').fadeOut(500);
  1054.     });
  1055.  
  1056.     // Close Trans Tooltip
  1057.     $('.tp_trans .close').click(function(e) {
  1058.         e.preventDefault();
  1059.  
  1060.         // Close Tooltip
  1061.         $('.tp_trans').fadeOut(500);
  1062.     });
  1063.  
  1064.     // Save & Continue
  1065.     // Feel free to modify this to pass all values needed...
  1066.     $('.imgEditForm input[type="submit"]').click(function(e){
  1067.         e.preventDefault();
  1068.  
  1069.         // Add in Random Number as Temp Image ID
  1070.         $('.imgEditForm input[name="tempImgID"]').prop('value', randNum);
  1071.  
  1072.         var imgPath = $('#targetImg').prop('src');
  1073.         var image_type = $typeLabel;
  1074.  
  1075.         var coords = {
  1076.             imageId: $imgID,
  1077.             tempImageId: tempImgID,
  1078.             temp_image_src: imgPath,
  1079.             image_type: image_type
  1080.         };
  1081.  
  1082.         // Post Rotate to Server (Rotation is done on the front end until Save & Continue is clicked)
  1083.         $.ajax({
  1084.             // Whatever PHP page to post data to and type
  1085.             type: 'post',
  1086.             url: '/next/ajax/image_editor_api.php?op=save',
  1087.             dataType: 'json',
  1088.             // Passing the image value and current image rotation to the server
  1089.             data: coords ,
  1090.             success: function() {
  1091.                 // Destroy JRAC
  1092.                 $img.jrac('destroy');
  1093.                 destroyJrac();
  1094.                
  1095.                 // ReEnable Browser Scrolling on Image Editor close
  1096.                 $("body").css('overflow', '');
  1097.  
  1098.                 // Close Modal
  1099.                 $.modal.close();
  1100.                 window.location.reload();
  1101.             }
  1102.         });
  1103.     });
  1104.    
  1105.     // Adjust Modal Height Function
  1106.     var adjust_size = function() {
  1107.         $jracContainer = $('.jrac_viewport');
  1108.         if ( $(window).height() <= 767 && $(window).height() >= 400 ) {
  1109.             //console.log('Resize below 768?');
  1110.             //$jracContainer.css('height', 300);
  1111.             $jracContainer.removeClass('viewport_small');
  1112.             $jracContainer.addClass('viewport_medium');
  1113.         } else if ( $(window).height() <= 399 ) {
  1114.             //console.log('Resize below 400?');
  1115.             //$jracContainer.css('height', 100);
  1116.             $jracContainer.removeClass('viewport_medium');
  1117.             $jracContainer.addClass('viewport_small');
  1118.         } else if ( $(window).height() >= 1001 ) {
  1119.             //console.log('Resize above 1000?');
  1120.             //console.log('Resize is normal height.');
  1121.             //$jracContainer.css('height', 480);
  1122.             if ( $jracContainer.hasClass('viewport_small') || $jracContainer.hasClass('viewport_medium') ) {
  1123.                 $jracContainer.attr('style', '');
  1124.                 $jracContainer.removeClass('viewport_small');
  1125.                 $jracContainer.removeClass('viewport_medium');
  1126.             }
  1127.         }
  1128.     };
  1129.    
  1130.     // Adjust Modal Height on Resize
  1131.     $(window).resize(adjust_size);
  1132. });
RAW Paste Data
Want to get better at JavaScript?
Learn to code JavaScript in 2017
Top