Ranga14

XD Image Editor 2.0

Jan 29th, 2015
154
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

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×