How to use resize method in differencify

Best JavaScript code snippet using differencify

interface.js

Source:interface.js Github

copy

Full Screen

1jQuery.iUtil = {2 getPosition : function(e)3 {4 var x = 0;5 var y = 0;6 var es = e.style;7 var restoreStyles = false;8 if (jQuery(e).css('display') == 'none') {9 var oldVisibility = es.visibility;10 var oldPosition = es.position;11 restoreStyles = true;12 es.visibility = 'hidden';13 es.display = 'block';14 es.position = 'absolute';15 }16 var el = e;17 while (el){18 x += el.offsetLeft + (el.currentStyle && !jQuery.browser.opera ?parseInt(el.currentStyle.borderLeftWidth)||0:0);19 y += el.offsetTop + (el.currentStyle && !jQuery.browser.opera ?parseInt(el.currentStyle.borderTopWidth)||0:0);20 el = el.offsetParent;21 }22 el = e;23 while (el && el.tagName && el.tagName.toLowerCase() != 'body')24 {25 x -= el.scrollLeft||0;26 y -= el.scrollTop||0;27 el = el.parentNode;28 }29 if (restoreStyles == true) {30 es.display = 'none';31 es.position = oldPosition;32 es.visibility = oldVisibility;33 }34 return {x:x, y:y};35 },36 getPositionLite : function(el)37 {38 var x = 0, y = 0;39 while(el) {40 x += el.offsetLeft || 0;41 y += el.offsetTop || 0;42 el = el.offsetParent;43 }44 return {x:x, y:y};45 },46 getSize : function(e)47 {48 var w = jQuery.css(e,'width');49 var h = jQuery.css(e,'height');50 var wb = 0;51 var hb = 0;52 var es = e.style;53 if (jQuery(e).css('display') != 'none') {54 wb = e.offsetWidth;55 hb = e.offsetHeight;56 } else {57 var oldVisibility = es.visibility;58 var oldPosition = es.position;59 es.visibility = 'hidden';60 es.display = 'block';61 es.position = 'absolute';62 wb = e.offsetWidth;63 hb = e.offsetHeight;64 es.display = 'none';65 es.position = oldPosition;66 es.visibility = oldVisibility;67 }68 return {w:w, h:h, wb:wb, hb:hb};69 },70 getSizeLite : function(el)71 {72 return {73 wb:el.offsetWidth||0,74 hb:el.offsetHeight||075 };76 },77 getClient : function(e)78 {79 var h, w, de;80 if (e) {81 w = e.clientWidth;82 h = e.clientHeight;83 } else {84 de = document.documentElement;85 w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;86 h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;87 }88 return {w:w,h:h};89 },90 getScroll : function (e)91 {92 var t=0, l=0, w=0, h=0, iw=0, ih=0;93 if (e && e.nodeName.toLowerCase() != 'body') {94 t = e.scrollTop;95 l = e.scrollLeft;96 w = e.scrollWidth;97 h = e.scrollHeight;98 iw = 0;99 ih = 0;100 } else {101 if (document.documentElement) {102 t = document.documentElement.scrollTop;103 l = document.documentElement.scrollLeft;104 w = document.documentElement.scrollWidth;105 h = document.documentElement.scrollHeight;106 } else if (document.body) {107 t = document.body.scrollTop;108 l = document.body.scrollLeft;109 w = document.body.scrollWidth;110 h = document.body.scrollHeight;111 }112 iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;113 ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;114 }115 return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };116 },117 getMargins : function(e, toInteger)118 {119 var el = jQuery(e);120 var t = el.css('marginTop') || '';121 var r = el.css('marginRight') || '';122 var b = el.css('marginBottom') || '';123 var l = el.css('marginLeft') || '';124 if (toInteger)125 return {126 t: parseInt(t)||0,127 r: parseInt(r)||0,128 b: parseInt(b)||0,129 l: parseInt(l)130 };131 else132 return {t: t, r: r, b: b, l: l};133 },134 getPadding : function(e, toInteger)135 {136 var el = jQuery(e);137 var t = el.css('paddingTop') || '';138 var r = el.css('paddingRight') || '';139 var b = el.css('paddingBottom') || '';140 var l = el.css('paddingLeft') || '';141 if (toInteger)142 return {143 t: parseInt(t)||0,144 r: parseInt(r)||0,145 b: parseInt(b)||0,146 l: parseInt(l)147 };148 else149 return {t: t, r: r, b: b, l: l};150 },151 getBorder : function(e, toInteger)152 {153 var el = jQuery(e);154 var t = el.css('borderTopWidth') || '';155 var r = el.css('borderRightWidth') || '';156 var b = el.css('borderBottomWidth') || '';157 var l = el.css('borderLeftWidth') || '';158 if (toInteger)159 return {160 t: parseInt(t)||0,161 r: parseInt(r)||0,162 b: parseInt(b)||0,163 l: parseInt(l)||0164 };165 else166 return {t: t, r: r, b: b, l: l};167 },168 getPointer : function(event)169 {170 var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)) || 0;171 var y = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)) || 0;172 return {x:x, y:y};173 },174 traverseDOM : function(nodeEl, func)175 {176 func(nodeEl);177 nodeEl = nodeEl.firstChild;178 while(nodeEl){179 jQuery.iUtil.traverseDOM(nodeEl, func);180 nodeEl = nodeEl.nextSibling;181 }182 },183 purgeEvents : function(nodeEl)184 {185 jQuery.iUtil.traverseDOM(186 nodeEl,187 function(el)188 {189 for(var attr in el){190 if(typeof el[attr] === 'function') {191 el[attr] = null;192 }193 }194 }195 );196 },197 centerEl : function(el, axis)198 {199 var clientScroll = jQuery.iUtil.getScroll();200 var windowSize = jQuery.iUtil.getSize(el);201 if (!axis || axis == 'vertically')202 jQuery(el).css(203 {204 top: clientScroll.t + ((Math.max(clientScroll.h,clientScroll.ih) - clientScroll.t - windowSize.hb)/2) + 'px'205 }206 );207 if (!axis || axis == 'horizontally')208 jQuery(el).css(209 {210 left: clientScroll.l + ((Math.max(clientScroll.w,clientScroll.iw) - clientScroll.l - windowSize.wb)/2) + 'px'211 }212 );213 },214 fixPNG : function (el, emptyGIF) {215 var images = jQuery('img[@src*="png"]', el||document), png;216 images.each( function() {217 png = this.src; 218 this.src = emptyGIF;219 this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + png + "')";220 });221 }222};223// Helper function to support older browsers!224[].indexOf || (Array.prototype.indexOf = function(v, n){225 n = (n == null) ? 0 : n;226 var m = this.length;227 for (var i=n; i<m; i++)228 if (this[i] == v)229 return i;230 return -1;231});232//iresizable show below233/**234 * Interface Elements for jQuery235 * Resizable236 *237 * http://interface.eyecon.ro238 *239 * Copyright (c) 2006 Stefan Petre240 * Dual licensed under the MIT (MIT-LICENSE.txt)241 * and GPL (GPL-LICENSE.txt) licenses.242 *243 *244 */245jQuery.iResize = {246 resizeElement: null,247 resizeDirection: null,248 dragged: null,249 pointer: null,250 sizes: null,251 position: null,252 /**253 * internal: Start function254 */255 startDrag: function(e) {256 jQuery.iResize.dragged = (this.dragEl) ? this.dragEl: this;257 jQuery.iResize.pointer = jQuery.iUtil.getPointer(e);258 // Save original size259 jQuery.iResize.sizes = {260 width: parseInt(jQuery(jQuery.iResize.dragged).css('width')) || 0,261 height: parseInt(jQuery(jQuery.iResize.dragged).css('height')) || 0262 };263 // Save original position264 jQuery.iResize.position = {265 top: parseInt(jQuery(jQuery.iResize.dragged).css('top')) || 0,266 left: parseInt(jQuery(jQuery.iResize.dragged).css('left')) || 0267 };268 // Assign event handlers269 jQuery(document)270 .bind('mousemove', jQuery.iResize.moveDrag)271 .bind('mouseup', jQuery.iResize.stopDrag);272 // Callback?273 if (typeof jQuery.iResize.dragged.resizeOptions.onDragStart === 'function') {274 jQuery.iResize.dragged.resizeOptions.onDragStart.apply(jQuery.iResize.dragged);275 }276 return false;277 },278 /**279 * internal: Stop function280 */281 stopDrag: function(e) {282 // Unbind event handlers283 jQuery(document)284 .unbind('mousemove', jQuery.iResize.moveDrag)285 .unbind('mouseup', jQuery.iResize.stopDrag);286 // Callback?287 if (typeof jQuery.iResize.dragged.resizeOptions.onDragStop === 'function') {288 jQuery.iResize.dragged.resizeOptions.onDragStop.apply(jQuery.iResize.dragged);289 }290 // Remove dragged element291 jQuery.iResize.dragged = null;292 },293 /**294 * internal: Move function295 */296 moveDrag: function(e) {297 if (!jQuery.iResize.dragged) {298 return;299 }300 pointer = jQuery.iUtil.getPointer(e);301 // Calculate new positions302 newTop = jQuery.iResize.position.top - jQuery.iResize.pointer.y + pointer.y;303 newLeft = jQuery.iResize.position.left - jQuery.iResize.pointer.x + pointer.x;304 newTop = Math.max(305 Math.min(newTop, jQuery.iResize.dragged.resizeOptions.maxBottom - jQuery.iResize.sizes.height),306 jQuery.iResize.dragged.resizeOptions.minTop307 );308 newLeft = Math.max(309 Math.min(newLeft, jQuery.iResize.dragged.resizeOptions.maxRight- jQuery.iResize.sizes.width),310 jQuery.iResize.dragged.resizeOptions.minLeft311 );312 // Callback313 if (typeof jQuery.iResize.dragged.resizeOptions.onDrag === 'function') {314 var newPos = jQuery.iResize.dragged.resizeOptions.onDrag.apply(jQuery.iResize.dragged, [newLeft, newTop]);315 if (typeof newPos == 'array' && newPos.length == 2) {316 newLeft = newPos[0];317 newTop = newPos[1];318 }319 }320 // Update the element321 jQuery.iResize.dragged.style.top = newTop + 'px';322 jQuery.iResize.dragged.style.left = newLeft + 'px';323 return false;324 },325 start: function(e) {326 // Bind event handlers327 jQuery(document)328 .bind('mousemove', jQuery.iResize.move)329 .bind('mouseup', jQuery.iResize.stop);330 // Initialize resizable331 jQuery.iResize.resizeElement = this.resizeElement;332 jQuery.iResize.resizeDirection = this.resizeDirection;333 jQuery.iResize.pointer = jQuery.iUtil.getPointer(e);334 jQuery.iResize.sizes = {335 width: parseInt(jQuery(this.resizeElement).css('width'))||0,336 height: parseInt(jQuery(this.resizeElement).css('height'))||0337 };338 jQuery.iResize.position = {339 top: parseInt(jQuery(this.resizeElement).css('top'))||0,340 left: parseInt(jQuery(this.resizeElement).css('left'))||0341 };342 // Callback function343 if (jQuery.iResize.resizeElement.resizeOptions.onStart) {344 jQuery.iResize.resizeElement.resizeOptions.onStart.apply(jQuery.iResize.resizeElement, [this]);345 }346 return false;347 },348 stop: function() {349 // Unbind event handlers350 jQuery(document)351 .unbind('mousemove', jQuery.iResize.move)352 .unbind('mouseup', jQuery.iResize.stop);353 // Callback function354 if (jQuery.iResize.resizeElement.resizeOptions.onStop) {355 jQuery.iResize.resizeElement.resizeOptions.onStop.apply(jQuery.iResize.resizeElement, [jQuery.iResize.resizeDirection]);356 }357 // Unbind358 jQuery.iResize.resizeElement = null;359 jQuery.iResize.resizeDirection = null;360 },361 getWidth: function(dx, side) {362 return Math.min(363 Math.max(jQuery.iResize.sizes.width + dx * side, jQuery.iResize.resizeElement.resizeOptions.minWidth),364 jQuery.iResize.resizeElement.resizeOptions.maxWidth365 );366 },367 getHeight: function(dy, side) {368 return Math.min(369 Math.max(jQuery.iResize.sizes.height + dy * side, jQuery.iResize.resizeElement.resizeOptions.minHeight),370 jQuery.iResize.resizeElement.resizeOptions.maxHeight371 );372 },373 getHeightMinMax: function(height) {374 return Math.min(375 Math.max(height, jQuery.iResize.resizeElement.resizeOptions.minHeight),376 jQuery.iResize.resizeElement.resizeOptions.maxHeight377 );378 },379 380 /**381 * setting and getting the ratio value382 * defined by Logan Cai cailongqun [at] yahoo [dot] com [dot] cn383 */384 ResizeRatio: function(value)385 {386 var ratio;387 this.each(388 function() {389 var el = this;390 if(typeof(value) == 'integer')391 {//setting new ratio392 el.resizeOptions.ratio = value; 393 }else394 {//getting the ratio395 if(el.resizeOptions.ratio)396 {397 ratio = el.resizeOptions.ratio;398 }else399 {400 var width = parseInt(jQuery(el).css('width')) || 0;401 var height = parseInt(jQuery(el).css('height'))|| 0; 402 if(width > 0 && height > 0)403 {404 ratio = (Math.round(height/width * 10000)/10000);405 }else406 {407 ratio = null;408 }409 }410 }411 }412 413 );414 return ratio; 415 416 }, 417 /**418 * setting and getting the ratio value419 * defined by Logan Cai cailongqun [at] yahoo [dot] com [dot] cn420 */421 ResizeConstraint: function(OnOrOff)422 {423 var ratio;424 425 this.each(426 function()427 {428 var el = this;429 if(typeof(OnOrOff) != 'boolean' || !OnOrOff)430 {//turn off resize constraint431 el.resizeOptions.ratio = null;432 }else433 {//turn on the resize constraint and set the ratio calculated from current image width & height434 var width = parseInt(jQuery(el).css('width')) || 0;435 var height = parseInt(jQuery(el).css('height'))|| 0; 436 if(width > 0 && height > 0)437 {438 el.resizeOptions.ratio = (Math.round(height/width * 10000)/10000);439 }else440 {441 el.resizeOptions.ratio = null;442 }443 }444 }445 446 );447 448 }, 449 450 move: function(e) {451 if (jQuery.iResize.resizeElement == null) {452 return;453 }454 pointer = jQuery.iUtil.getPointer(e);455 dx = pointer.x - jQuery.iResize.pointer.x;456 dy = pointer.y - jQuery.iResize.pointer.y;457 newSizes = {458 width: jQuery.iResize.sizes.width,459 height: jQuery.iResize.sizes.height460 };461 newPosition = {462 top: jQuery.iResize.position.top,463 left: jQuery.iResize.position.left464 };465 switch (jQuery.iResize.resizeDirection){466 case 'e':467 newSizes.width = jQuery.iResize.getWidth(dx,1);468 break;469 case 'se':470 newSizes.width = jQuery.iResize.getWidth(dx,1);471 newSizes.height = jQuery.iResize.getHeight(dy,1);472 break;473 case 'w':474 newSizes.width = jQuery.iResize.getWidth(dx,-1);475 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;476 break;477 case 'sw':478 newSizes.width = jQuery.iResize.getWidth(dx,-1);479 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;480 newSizes.height = jQuery.iResize.getHeight(dy,1);481 break;482 case 'nw':483 newSizes.height = jQuery.iResize.getHeight(dy,-1);484 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;485 newSizes.width = jQuery.iResize.getWidth(dx,-1);486 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;487 break;488 case 'n':489 newSizes.height = jQuery.iResize.getHeight(dy,-1);490 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;491 break;492 case 'ne':493 newSizes.height = jQuery.iResize.getHeight(dy,-1);494 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;495 newSizes.width = jQuery.iResize.getWidth(dx,1);496 break;497 case 's':498 newSizes.height = jQuery.iResize.getHeight(dy,1);499 break;500 }501 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {502 if (jQuery.iResize.resizeDirection == 'n' || jQuery.iResize.resizeDirection == 's')503 nWidth = newSizes.height * jQuery.iResize.resizeElement.resizeOptions.ratio;504 else505 nWidth = newSizes.width;506 nHeight = jQuery.iResize.getHeightMinMax(nWidth * jQuery.iResize.resizeElement.resizeOptions.ratio);507 nWidth = nHeight / jQuery.iResize.resizeElement.resizeOptions.ratio;508 switch (jQuery.iResize.resizeDirection){509 case 'n':510 case 'nw':511 case 'ne':512 newPosition.top += newSizes.height - nHeight;513 break;514 }515 switch (jQuery.iResize.resizeDirection){516 case 'nw':517 case 'w':518 case 'sw':519 newPosition.left += newSizes.width - nWidth;520 break;521 }522 newSizes.height = nHeight;523 newSizes.width = nWidth;524 }525 if (newPosition.top < jQuery.iResize.resizeElement.resizeOptions.minTop) {526 nHeight = newSizes.height + newPosition.top - jQuery.iResize.resizeElement.resizeOptions.minTop;527 newPosition.top = jQuery.iResize.resizeElement.resizeOptions.minTop;528 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {529 nWidth = nHeight / jQuery.iResize.resizeElement.resizeOptions.ratio;530 switch (jQuery.iResize.resizeDirection){531 case 'nw':532 case 'w':533 case 'sw':534 newPosition.left += newSizes.width - nWidth;535 break;536 }537 newSizes.width = nWidth;538 }539 newSizes.height = nHeight;540 }541 if (newPosition.left < jQuery.iResize.resizeElement.resizeOptions.minLeft ) {542 nWidth = newSizes.width + newPosition.left - jQuery.iResize.resizeElement.resizeOptions.minLeft;543 newPosition.left = jQuery.iResize.resizeElement.resizeOptions.minLeft;544 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {545 nHeight = nWidth * jQuery.iResize.resizeElement.resizeOptions.ratio;546 switch (jQuery.iResize.resizeDirection){547 case 'n':548 case 'nw':549 case 'ne':550 newPosition.top += newSizes.height - nHeight;551 break;552 }553 newSizes.height = nHeight;554 }555 newSizes.width = nWidth;556 }557 if (newPosition.top + newSizes.height > jQuery.iResize.resizeElement.resizeOptions.maxBottom) {558 newSizes.height = jQuery.iResize.resizeElement.resizeOptions.maxBottom - newPosition.top;559 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {560 newSizes.width = newSizes.height / jQuery.iResize.resizeElement.resizeOptions.ratio;561 }562 }563 if (newPosition.left + newSizes.width > jQuery.iResize.resizeElement.resizeOptions.maxRight) {564 newSizes.width = jQuery.iResize.resizeElement.resizeOptions.maxRight - newPosition.left;565 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {566 newSizes.height = newSizes.width * jQuery.iResize.resizeElement.resizeOptions.ratio;567 }568 }569 var newDimensions = false;570 if (jQuery.iResize.resizeElement.resizeOptions.onResize) {571 newDimensions = jQuery.iResize.resizeElement.resizeOptions.onResize.apply( jQuery.iResize.resizeElement, [ newSizes, newPosition ] );572 if (newDimensions) {573 if (newDimensions.sizes) {574 jQuery.extend(newSizes, newDimensions.sizes);575 }576 if (newDimensions.position) {577 jQuery.extend(newPosition, newDimensions.position);578 }579 }580 }581 elS = jQuery.iResize.resizeElement.style;582 elS.left = newPosition.left + 'px';583 elS.top = newPosition.top + 'px';584 elS.width = newSizes.width + 'px';585 elS.height = newSizes.height + 'px';586 return false;587 },588 /**589 * Builds the resizable590 */591 build: function(options) {592 if (!options || !options.handlers || options.handlers.constructor != Object) {593 return;594 }595 return this.each(596 function() {597 var el = this;598 el.resizeOptions = options;599 el.resizeOptions.minWidth = options.minWidth || 10;600 el.resizeOptions.minHeight = options.minHeight || 10;601 el.resizeOptions.maxWidth = options.maxWidth || 3000;602 el.resizeOptions.maxHeight = options.maxHeight || 3000;603 el.resizeOptions.minTop = options.minTop || -1000;604 el.resizeOptions.minLeft = options.minLeft || -1000;605 el.resizeOptions.maxRight = options.maxRight || 3000;606 el.resizeOptions.maxBottom = options.maxBottom || 3000;607 elPosition = jQuery(el).css('position');608 if (!(elPosition == 'relative' || elPosition == 'absolute')) {609 el.style.position = 'relative';610 }611 directions = /n|ne|e|se|s|sw|w|nw/g;612 for (i in el.resizeOptions.handlers) {613 if (i.toLowerCase().match(directions) != null) {614 if (el.resizeOptions.handlers[i].constructor == String) {615 handle = jQuery(el.resizeOptions.handlers[i]);616 if (handle.size() > 0) {617 el.resizeOptions.handlers[i] = handle.get(0);618 }619 }620 if (el.resizeOptions.handlers[i].tagName) {621 el.resizeOptions.handlers[i].resizeElement = el;622 el.resizeOptions.handlers[i].resizeDirection = i;623 jQuery(el.resizeOptions.handlers[i]).bind('mousedown', jQuery.iResize.start);624 }625 }626 }627 if (el.resizeOptions.dragHandle) {628 if (typeof el.resizeOptions.dragHandle === 'string') {629 handleEl = jQuery(el.resizeOptions.dragHandle);630 if (handleEl.size() > 0) {631 handleEl.each(function() {632 this.dragEl = el;633 });634 handleEl.bind('mousedown', jQuery.iResize.startDrag);635 }636 } else if (el.resizeOptions.dragHandle == true) {637 jQuery(this).bind('mousedown', jQuery.iResize.startDrag);638 }639 }640 }641 );642 },643 /**644 * Destroys the resizable645 */646 destroy: function() {647 return this.each(648 function() {649 var el = this;650 // Unbind the handlers651 for (i in el.resizeOptions.handlers) {652 el.resizeOptions.handlers[i].resizeElement = null;653 el.resizeOptions.handlers[i].resizeDirection = null;654 jQuery(el.resizeOptions.handlers[i]).unbind('mousedown', jQuery.iResize.start);655 }656 // Remove the draghandle657 if (el.resizeOptions.dragHandle) {658 if (typeof el.resizeOptions.dragHandle === 'string') {659 handle = jQuery(el.resizeOptions.dragHandle);660 if (handle.size() > 0) {661 handle.unbind('mousedown', jQuery.iResize.startDrag);662 }663 } else if (el.resizeOptions.dragHandle == true) {664 jQuery(this).unbind('mousedown', jQuery.iResize.startDrag);665 }666 }667 // Reset the options668 el.resizeOptions = null;669 }670 );671 }672};673jQuery.fn.extend ({674 /**675 * Create a resizable element with a number of advanced options including callback, dragging676 * 677 * @name Resizable678 * @description Create a resizable element with a number of advanced options including callback, dragging679 * @param Hash hash A hash of parameters. All parameters are optional.680 * @option Hash handlers hash with keys for each resize direction (e, es, s, sw, w, nw, n) and value string selection681 * @option Integer minWidth (optional) the minimum width that element can be resized to682 * @option Integer maxWidth (optional) the maximum width that element can be resized to683 * @option Integer minHeight (optional) the minimum height that element can be resized to684 * @option Integer maxHeight (optional) the maximum height that element can be resized to685 * @option Integer minTop (optional) the minmum top position to wich element can be moved to686 * @option Integer minLeft (optional) the minmum left position to wich element can be moved to687 * @option Integer maxRight (optional) the maximum right position to wich element can be moved to688 * @option Integer maxBottom (optional) the maximum bottom position to wich element can be moved to689 * @option Float ratio (optional) the ratio between width and height to constrain elements sizes to that ratio690 * @option Mixed dragHandle (optional) true to make the element draggable, string selection for drag handle691 * @option Function onDragStart (optional) A function to be executed whenever the dragging starts692 * @option Function onDragStop (optional) A function to be executed whenever the dragging stops693 * @option Function onDrag (optional) A function to be executed whenever the element is dragged694 * @option Function onStart (optional) A function to be executed whenever the element starts to be resized695 * @option Function onStop (optional) A function to be executed whenever the element stops to be resized696 * @option Function onResize (optional) A function to be executed whenever the element is resized697 * @type jQuery698 * @cat Plugins/Interface699 * @author Stefan Petre700 */701 Resizable: jQuery.iResize.build,702 ResizableRatio: jQuery.iResize.ResizeRatio,703 ResizeConstraint: jQuery.iResize.ResizeConstraint,704 /**705 * Destroy a resizable706 * 707 * @name ResizableDestroy708 * @description Destroy a resizable709 * @type jQuery710 * @cat Plugins/Interface711 * @author Stefan Petre712 */713 ResizableDestroy: jQuery.iResize.destroy...

Full Screen

Full Screen

iresizable.js

Source:iresizable.js Github

copy

Full Screen

1/**2 * Interface Elements for jQuery3 * Resizable4 *5 * http://interface.eyecon.ro6 *7 * Copyright (c) 2006 Stefan Petre8 * Dual licensed under the MIT (MIT-LICENSE.txt)9 * and GPL (GPL-LICENSE.txt) licenses.10 *11 *12 */13jQuery.iResize = {14 resizeElement: null,15 resizeDirection: null,16 dragged: null,17 pointer: null,18 sizes: null,19 position: null,20 /**21 * internal: Start function22 */23 startDrag: function(e) {24 jQuery.iResize.dragged = (this.dragEl) ? this.dragEl: this;25 jQuery.iResize.pointer = jQuery.iUtil.getPointer(e);26 // Save original size27 jQuery.iResize.sizes = {28 width: parseInt(jQuery(jQuery.iResize.dragged).css('width')) || 0,29 height: parseInt(jQuery(jQuery.iResize.dragged).css('height')) || 030 };31 // Save original position32 jQuery.iResize.position = {33 top: parseInt(jQuery(jQuery.iResize.dragged).css('top')) || 0,34 left: parseInt(jQuery(jQuery.iResize.dragged).css('left')) || 035 };36 // Assign event handlers37 jQuery(document)38 .bind('mousemove', jQuery.iResize.moveDrag)39 .bind('mouseup', jQuery.iResize.stopDrag);40 // Callback?41 if (typeof jQuery.iResize.dragged.resizeOptions.onDragStart === 'function') {42 jQuery.iResize.dragged.resizeOptions.onDragStart.apply(jQuery.iResize.dragged);43 }44 return false;45 },46 /**47 * internal: Stop function48 */49 stopDrag: function(e) {50 // Unbind event handlers51 jQuery(document)52 .unbind('mousemove', jQuery.iResize.moveDrag)53 .unbind('mouseup', jQuery.iResize.stopDrag);54 // Callback?55 if (typeof jQuery.iResize.dragged.resizeOptions.onDragStop === 'function') {56 jQuery.iResize.dragged.resizeOptions.onDragStop.apply(jQuery.iResize.dragged);57 }58 // Remove dragged element59 jQuery.iResize.dragged = null;60 },61 /**62 * internal: Move function63 */64 moveDrag: function(e) {65 if (!jQuery.iResize.dragged) {66 return;67 }68 pointer = jQuery.iUtil.getPointer(e);69 // Calculate new positions70 newTop = jQuery.iResize.position.top - jQuery.iResize.pointer.y + pointer.y;71 newLeft = jQuery.iResize.position.left - jQuery.iResize.pointer.x + pointer.x;72 newTop = Math.max(73 Math.min(newTop, jQuery.iResize.dragged.resizeOptions.maxBottom - jQuery.iResize.sizes.height),74 jQuery.iResize.dragged.resizeOptions.minTop75 );76 newLeft = Math.max(77 Math.min(newLeft, jQuery.iResize.dragged.resizeOptions.maxRight- jQuery.iResize.sizes.width),78 jQuery.iResize.dragged.resizeOptions.minLeft79 );80 // Callback81 if (typeof jQuery.iResize.dragged.resizeOptions.onDrag === 'function') {82 var newPos = jQuery.iResize.dragged.resizeOptions.onDrag.apply(jQuery.iResize.dragged, [newLeft, newTop]);83 if (typeof newPos == 'array' && newPos.length == 2) {84 newLeft = newPos[0];85 newTop = newPos[1];86 }87 }88 // Update the element89 jQuery.iResize.dragged.style.top = newTop + 'px';90 jQuery.iResize.dragged.style.left = newLeft + 'px';91 return false;92 },93 start: function(e) {94 // Bind event handlers95 jQuery(document)96 .bind('mousemove', jQuery.iResize.move)97 .bind('mouseup', jQuery.iResize.stop);98 // Initialize resizable99 jQuery.iResize.resizeElement = this.resizeElement;100 jQuery.iResize.resizeDirection = this.resizeDirection;101 jQuery.iResize.pointer = jQuery.iUtil.getPointer(e);102 jQuery.iResize.sizes = {103 width: parseInt(jQuery(this.resizeElement).css('width'))||0,104 height: parseInt(jQuery(this.resizeElement).css('height'))||0105 };106 jQuery.iResize.position = {107 top: parseInt(jQuery(this.resizeElement).css('top'))||0,108 left: parseInt(jQuery(this.resizeElement).css('left'))||0109 };110 // Callback function111 if (jQuery.iResize.resizeElement.resizeOptions.onStart) {112 jQuery.iResize.resizeElement.resizeOptions.onStart.apply(jQuery.iResize.resizeElement, [this]);113 }114 return false;115 },116 stop: function() {117 // Unbind event handlers118 jQuery(document)119 .unbind('mousemove', jQuery.iResize.move)120 .unbind('mouseup', jQuery.iResize.stop);121 // Callback function122 if (jQuery.iResize.resizeElement.resizeOptions.onStop) {123 jQuery.iResize.resizeElement.resizeOptions.onStop.apply(jQuery.iResize.resizeElement, [jQuery.iResize.resizeDirection]);124 }125 // Unbind126 jQuery.iResize.resizeElement = null;127 jQuery.iResize.resizeDirection = null;128 },129 getWidth: function(dx, side) {130 return Math.min(131 Math.max(jQuery.iResize.sizes.width + dx * side, jQuery.iResize.resizeElement.resizeOptions.minWidth),132 jQuery.iResize.resizeElement.resizeOptions.maxWidth133 );134 },135 getHeight: function(dy, side) {136 return Math.min(137 Math.max(jQuery.iResize.sizes.height + dy * side, jQuery.iResize.resizeElement.resizeOptions.minHeight),138 jQuery.iResize.resizeElement.resizeOptions.maxHeight139 );140 },141 getHeightMinMax: function(height) {142 return Math.min(143 Math.max(height, jQuery.iResize.resizeElement.resizeOptions.minHeight),144 jQuery.iResize.resizeElement.resizeOptions.maxHeight145 );146 },147 148 /**149 * setting and getting the ratio value150 * defined by Logan Cai cailongqun [at] yahoo [dot] com [dot] cn151 */152 ResizeRatio: function(value)153 {154 var ratio;155 this.each(156 function() {157 var el = this;158 if(typeof(value) == 'integer')159 {//setting new ratio160 el.resizeOptions.ratio = value; 161 }else162 {//getting the ratio163 if(el.resizeOptions.ratio)164 {165 ratio = el.resizeOptions.ratio;166 }else167 {168 var width = parseInt(jQuery(el).css('width')) || 0;169 var height = parseInt(jQuery(el).css('height'))|| 0; 170 if(width > 0 && height > 0)171 {172 ratio = (Math.round(height/width * 10000)/10000);173 }else174 {175 ratio = null;176 }177 }178 }179 }180 181 );182 return ratio; 183 184 }, 185 /**186 * setting and getting the ratio value187 * defined by Logan Cai cailongqun [at] yahoo [dot] com [dot] cn188 */189 ResizeConstraint: function(OnOrOff)190 {191 var ratio;192 193 this.each(194 function()195 {196 var el = this;197 if(typeof(OnOrOff) != 'boolean' || !OnOrOff)198 {//turn off resize constraint199 el.resizeOptions.ratio = null;200 }else201 {//turn on the resize constraint and set the ratio calculated from current image width & height202 var width = parseInt(jQuery(el).css('width')) || 0;203 var height = parseInt(jQuery(el).css('height'))|| 0; 204 if(width > 0 && height > 0)205 {206 el.resizeOptions.ratio = (Math.round(height/width * 10000)/10000);207 }else208 {209 el.resizeOptions.ratio = null;210 }211 }212 }213 214 );215 216 }, 217 218 move: function(e) {219 if (jQuery.iResize.resizeElement == null) {220 return;221 }222 pointer = jQuery.iUtil.getPointer(e);223 dx = pointer.x - jQuery.iResize.pointer.x;224 dy = pointer.y - jQuery.iResize.pointer.y;225 newSizes = {226 width: jQuery.iResize.sizes.width,227 height: jQuery.iResize.sizes.height228 };229 newPosition = {230 top: jQuery.iResize.position.top,231 left: jQuery.iResize.position.left232 };233 switch (jQuery.iResize.resizeDirection){234 case 'e':235 newSizes.width = jQuery.iResize.getWidth(dx,1);236 break;237 case 'se':238 newSizes.width = jQuery.iResize.getWidth(dx,1);239 newSizes.height = jQuery.iResize.getHeight(dy,1);240 break;241 case 'w':242 newSizes.width = jQuery.iResize.getWidth(dx,-1);243 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;244 break;245 case 'sw':246 newSizes.width = jQuery.iResize.getWidth(dx,-1);247 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;248 newSizes.height = jQuery.iResize.getHeight(dy,1);249 break;250 case 'nw':251 newSizes.height = jQuery.iResize.getHeight(dy,-1);252 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;253 newSizes.width = jQuery.iResize.getWidth(dx,-1);254 newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;255 break;256 case 'n':257 newSizes.height = jQuery.iResize.getHeight(dy,-1);258 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;259 break;260 case 'ne':261 newSizes.height = jQuery.iResize.getHeight(dy,-1);262 newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;263 newSizes.width = jQuery.iResize.getWidth(dx,1);264 break;265 case 's':266 newSizes.height = jQuery.iResize.getHeight(dy,1);267 break;268 }269 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {270 if (jQuery.iResize.resizeDirection == 'n' || jQuery.iResize.resizeDirection == 's')271 nWidth = newSizes.height * jQuery.iResize.resizeElement.resizeOptions.ratio;272 else273 nWidth = newSizes.width;274 nHeight = jQuery.iResize.getHeightMinMax(nWidth * jQuery.iResize.resizeElement.resizeOptions.ratio);275 nWidth = nHeight / jQuery.iResize.resizeElement.resizeOptions.ratio;276 switch (jQuery.iResize.resizeDirection){277 case 'n':278 case 'nw':279 case 'ne':280 newPosition.top += newSizes.height - nHeight;281 break;282 }283 switch (jQuery.iResize.resizeDirection){284 case 'nw':285 case 'w':286 case 'sw':287 newPosition.left += newSizes.width - nWidth;288 break;289 }290 newSizes.height = nHeight;291 newSizes.width = nWidth;292 }293 if (newPosition.top < jQuery.iResize.resizeElement.resizeOptions.minTop) {294 nHeight = newSizes.height + newPosition.top - jQuery.iResize.resizeElement.resizeOptions.minTop;295 newPosition.top = jQuery.iResize.resizeElement.resizeOptions.minTop;296 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {297 nWidth = nHeight / jQuery.iResize.resizeElement.resizeOptions.ratio;298 switch (jQuery.iResize.resizeDirection){299 case 'nw':300 case 'w':301 case 'sw':302 newPosition.left += newSizes.width - nWidth;303 break;304 }305 newSizes.width = nWidth;306 }307 newSizes.height = nHeight;308 }309 if (newPosition.left < jQuery.iResize.resizeElement.resizeOptions.minLeft ) {310 nWidth = newSizes.width + newPosition.left - jQuery.iResize.resizeElement.resizeOptions.minLeft;311 newPosition.left = jQuery.iResize.resizeElement.resizeOptions.minLeft;312 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {313 nHeight = nWidth * jQuery.iResize.resizeElement.resizeOptions.ratio;314 switch (jQuery.iResize.resizeDirection){315 case 'n':316 case 'nw':317 case 'ne':318 newPosition.top += newSizes.height - nHeight;319 break;320 }321 newSizes.height = nHeight;322 }323 newSizes.width = nWidth;324 }325 if (newPosition.top + newSizes.height > jQuery.iResize.resizeElement.resizeOptions.maxBottom) {326 newSizes.height = jQuery.iResize.resizeElement.resizeOptions.maxBottom - newPosition.top;327 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {328 newSizes.width = newSizes.height / jQuery.iResize.resizeElement.resizeOptions.ratio;329 }330 }331 if (newPosition.left + newSizes.width > jQuery.iResize.resizeElement.resizeOptions.maxRight) {332 newSizes.width = jQuery.iResize.resizeElement.resizeOptions.maxRight - newPosition.left;333 if (jQuery.iResize.resizeElement.resizeOptions.ratio) {334 newSizes.height = newSizes.width * jQuery.iResize.resizeElement.resizeOptions.ratio;335 }336 }337 var newDimensions = false;338 if (jQuery.iResize.resizeElement.resizeOptions.onResize) {339 newDimensions = jQuery.iResize.resizeElement.resizeOptions.onResize.apply( jQuery.iResize.resizeElement, [ newSizes, newPosition ] );340 if (newDimensions) {341 if (newDimensions.sizes) {342 jQuery.extend(newSizes, newDimensions.sizes);343 }344 if (newDimensions.position) {345 jQuery.extend(newPosition, newDimensions.position);346 }347 }348 }349 elS = jQuery.iResize.resizeElement.style;350 elS.left = newPosition.left + 'px';351 elS.top = newPosition.top + 'px';352 elS.width = newSizes.width + 'px';353 elS.height = newSizes.height + 'px';354 return false;355 },356 /**357 * Builds the resizable358 */359 build: function(options) {360 if (!options || !options.handlers || options.handlers.constructor != Object) {361 return;362 }363 return this.each(364 function() {365 var el = this;366 el.resizeOptions = options;367 el.resizeOptions.minWidth = options.minWidth || 10;368 el.resizeOptions.minHeight = options.minHeight || 10;369 el.resizeOptions.maxWidth = options.maxWidth || 3000;370 el.resizeOptions.maxHeight = options.maxHeight || 3000;371 el.resizeOptions.minTop = options.minTop || -1000;372 el.resizeOptions.minLeft = options.minLeft || -1000;373 el.resizeOptions.maxRight = options.maxRight || 3000;374 el.resizeOptions.maxBottom = options.maxBottom || 3000;375 elPosition = jQuery(el).css('position');376 if (!(elPosition == 'relative' || elPosition == 'absolute')) {377 el.style.position = 'relative';378 }379 directions = /n|ne|e|se|s|sw|w|nw/g;380 for (i in el.resizeOptions.handlers) {381 if (i.toLowerCase().match(directions) != null) {382 if (el.resizeOptions.handlers[i].constructor == String) {383 handle = jQuery(el.resizeOptions.handlers[i]);384 if (handle.size() > 0) {385 el.resizeOptions.handlers[i] = handle.get(0);386 }387 }388 if (el.resizeOptions.handlers[i].tagName) {389 el.resizeOptions.handlers[i].resizeElement = el;390 el.resizeOptions.handlers[i].resizeDirection = i;391 jQuery(el.resizeOptions.handlers[i]).bind('mousedown', jQuery.iResize.start);392 }393 }394 }395 if (el.resizeOptions.dragHandle) {396 if (typeof el.resizeOptions.dragHandle === 'string') {397 handleEl = jQuery(el.resizeOptions.dragHandle);398 if (handleEl.size() > 0) {399 handleEl.each(function() {400 this.dragEl = el;401 });402 handleEl.bind('mousedown', jQuery.iResize.startDrag);403 }404 } else if (el.resizeOptions.dragHandle == true) {405 jQuery(this).bind('mousedown', jQuery.iResize.startDrag);406 }407 }408 }409 );410 },411 /**412 * Destroys the resizable413 */414 destroy: function() {415 return this.each(416 function() {417 var el = this;418 // Unbind the handlers419 for (i in el.resizeOptions.handlers) {420 el.resizeOptions.handlers[i].resizeElement = null;421 el.resizeOptions.handlers[i].resizeDirection = null;422 jQuery(el.resizeOptions.handlers[i]).unbind('mousedown', jQuery.iResize.start);423 }424 // Remove the draghandle425 if (el.resizeOptions.dragHandle) {426 if (typeof el.resizeOptions.dragHandle === 'string') {427 handle = jQuery(el.resizeOptions.dragHandle);428 if (handle.size() > 0) {429 handle.unbind('mousedown', jQuery.iResize.startDrag);430 }431 } else if (el.resizeOptions.dragHandle == true) {432 jQuery(this).unbind('mousedown', jQuery.iResize.startDrag);433 }434 }435 // Reset the options436 el.resizeOptions = null;437 }438 );439 }440};441jQuery.fn.extend ({442 /**443 * Create a resizable element with a number of advanced options including callback, dragging444 * 445 * @name Resizable446 * @description Create a resizable element with a number of advanced options including callback, dragging447 * @param Hash hash A hash of parameters. All parameters are optional.448 * @option Hash handlers hash with keys for each resize direction (e, es, s, sw, w, nw, n) and value string selection449 * @option Integer minWidth (optional) the minimum width that element can be resized to450 * @option Integer maxWidth (optional) the maximum width that element can be resized to451 * @option Integer minHeight (optional) the minimum height that element can be resized to452 * @option Integer maxHeight (optional) the maximum height that element can be resized to453 * @option Integer minTop (optional) the minmum top position to wich element can be moved to454 * @option Integer minLeft (optional) the minmum left position to wich element can be moved to455 * @option Integer maxRight (optional) the maximum right position to wich element can be moved to456 * @option Integer maxBottom (optional) the maximum bottom position to wich element can be moved to457 * @option Float ratio (optional) the ratio between width and height to constrain elements sizes to that ratio458 * @option Mixed dragHandle (optional) true to make the element draggable, string selection for drag handle459 * @option Function onDragStart (optional) A function to be executed whenever the dragging starts460 * @option Function onDragStop (optional) A function to be executed whenever the dragging stops461 * @option Function onDrag (optional) A function to be executed whenever the element is dragged462 * @option Function onStart (optional) A function to be executed whenever the element starts to be resized463 * @option Function onStop (optional) A function to be executed whenever the element stops to be resized464 * @option Function onResize (optional) A function to be executed whenever the element is resized465 * @type jQuery466 * @cat Plugins/Interface467 * @author Stefan Petre468 */469 Resizable: jQuery.iResize.build,470 ResizableRatio: jQuery.iResize.ResizeRatio,471 ResizeConstraint: jQuery.iResize.ResizeConstraint,472 /**473 * Destroy a resizable474 * 475 * @name ResizableDestroy476 * @description Destroy a resizable477 * @type jQuery478 * @cat Plugins/Interface479 * @author Stefan Petre480 */481 ResizableDestroy: jQuery.iResize.destroy...

Full Screen

Full Screen

trumbowyg.resizimg.js

Source:trumbowyg.resizimg.js Github

copy

Full Screen

1;(function ($) {2 'use strict';3 var defaultOptions = {4 minSize: 32,5 step: 46 };7 function preventDefault(e) {8 e.stopPropagation();9 e.preventDefault();10 }11 var ResizeWithCanvas = function () {12 // variable to create canvas and save img in resize mode13 this.resizeCanvas = document.createElement('canvas');14 // to allow canvas to get focus15 this.resizeCanvas.setAttribute('tabindex', '0');16 this.resizeCanvas.id = 'trumbowyg-resizimg-' + (+new Date());17 this.ctx = null;18 this.resizeImg = null;19 this.pressEscape = function (obj) {20 obj.reset();21 };22 this.pressBackspaceOrDelete = function (obj) {23 $(obj.resizeCanvas).replaceWith('');24 obj.resizeImg = null;25 };26 // PRIVATE FUNCTION27 var focusedNow = false;28 var isCursorSeResize = false;29 // calculate offset to change mouse over square in the canvas30 var offsetX, offsetY;31 var reOffset = function (canvas) {32 var BB = canvas.getBoundingClientRect();33 offsetX = BB.left;34 offsetY = BB.top;35 };36 var drawRect = function (shapeData, ctx) {37 // Inner38 ctx.beginPath();39 ctx.fillStyle = 'rgb(255, 255, 255)';40 ctx.rect(shapeData.points.x, shapeData.points.y, shapeData.points.width, shapeData.points.height);41 ctx.fill();42 ctx.stroke();43 };44 var updateCanvas = function (canvas, ctx, img, canvasWidth, canvasHeight) {45 ctx.translate(0.5, 0.5);46 ctx.lineWidth = 1;47 // image48 ctx.drawImage(img, 5, 5, canvasWidth - 10, canvasHeight - 10);49 // border50 ctx.beginPath();51 ctx.rect(5, 5, canvasWidth - 10, canvasHeight - 10);52 ctx.stroke();53 // square in the angle54 ctx.beginPath();55 ctx.fillStyle = 'rgb(255, 255, 255)';56 ctx.rect(canvasWidth - 10, canvasHeight - 10, 9, 9);57 ctx.fill();58 ctx.stroke();59 // get the offset to change the mouse cursor60 reOffset(canvas);61 return ctx;62 };63 // PUBLIC FUNCTION64 // necessary to correctly print cursor over square. Called once for instance. Useless with trumbowyg.65 this.init = function () {66 var _this = this;67 $(window).on('scroll resize', function () {68 _this.reCalcOffset();69 });70 };71 this.reCalcOffset = function () {72 reOffset(this.resizeCanvas);73 };74 this.canvasId = function () {75 return this.resizeCanvas.id;76 };77 this.isActive = function () {78 return this.resizeImg !== null;79 };80 this.isFocusedNow = function () {81 return focusedNow;82 };83 this.blurNow = function () {84 focusedNow = false;85 };86 // restore image in the HTML of the editor87 this.reset = function () {88 if (this.resizeImg === null) {89 return;90 }91 this.resizeImg.width = this.resizeCanvas.clientWidth - 10;92 this.resizeImg.height = this.resizeCanvas.clientHeight - 10;93 // clear style of image to avoid issue on resize because this attribute have priority over width and height attribute94 this.resizeImg.removeAttribute('style');95 $(this.resizeCanvas).replaceWith($(this.resizeImg));96 // reset canvas style97 this.resizeCanvas.removeAttribute('style');98 this.resizeImg = null;99 };100 // setup canvas with points and border to allow the resizing operation101 this.setup = function (img, resizableOptions) {102 this.resizeImg = img;103 if (!this.resizeCanvas.getContext) {104 return false;105 }106 focusedNow = true;107 // draw canvas108 this.resizeCanvas.width = $(this.resizeImg).width() + 10;109 this.resizeCanvas.height = $(this.resizeImg).height() + 10;110 this.resizeCanvas.style.margin = '-5px';111 this.ctx = this.resizeCanvas.getContext('2d');112 // replace image with canvas113 $(this.resizeImg).replaceWith($(this.resizeCanvas));114 updateCanvas(this.resizeCanvas, this.ctx, this.resizeImg, this.resizeCanvas.width, this.resizeCanvas.height);115 // enable resize116 $(this.resizeCanvas).resizable(resizableOptions)117 .on('mousedown', preventDefault);118 var _this = this;119 $(this.resizeCanvas)120 .on('mousemove', function (e) {121 var mouseX = Math.round(e.clientX - offsetX);122 var mouseY = Math.round(e.clientY - offsetY);123 var wasCursorSeResize = isCursorSeResize;124 _this.ctx.rect(_this.resizeCanvas.width - 10, _this.resizeCanvas.height - 10, 9, 9);125 isCursorSeResize = _this.ctx.isPointInPath(mouseX, mouseY);126 if (wasCursorSeResize !== isCursorSeResize) {127 this.style.cursor = isCursorSeResize ? 'se-resize' : 'default';128 }129 })130 .on('keydown', function (e) {131 if (!_this.isActive()) {132 return;133 }134 var x = e.keyCode;135 if (x === 27) { // ESC136 _this.pressEscape(_this);137 } else if (x === 8 || x === 46) { // BACKSPACE or DELETE138 _this.pressBackspaceOrDelete(_this);139 }140 })141 .on('focus', preventDefault);142 this.resizeCanvas.focus();143 return true;144 };145 // update the canvas after the resizing146 this.refresh = function () {147 if (!this.resizeCanvas.getContext) {148 return;149 }150 this.resizeCanvas.width = this.resizeCanvas.clientWidth;151 this.resizeCanvas.height = this.resizeCanvas.clientHeight;152 updateCanvas(this.resizeCanvas, this.ctx, this.resizeImg, this.resizeCanvas.width, this.resizeCanvas.height);153 };154 };155 // object to interact with canvas156 var resizeWithCanvas = new ResizeWithCanvas();157 function destroyResizable(trumbowyg) {158 // clean html code159 trumbowyg.$ed.find('canvas.resizable')160 .resizable('destroy')161 .off('mousedown', preventDefault)162 .removeClass('resizable');163 resizeWithCanvas.reset();164 trumbowyg.syncCode();165 }166 $.extend(true, $.trumbowyg, {167 plugins: {168 resizimg: {169 init: function (trumbowyg) {170 trumbowyg.o.plugins.resizimg = $.extend(true, {},171 defaultOptions,172 trumbowyg.o.plugins.resizimg || {},173 {174 resizable: {175 resizeWidth: false,176 onDragStart: function (ev, $el) {177 var opt = trumbowyg.o.plugins.resizimg;178 var x = ev.pageX - $el.offset().left;179 var y = ev.pageY - $el.offset().top;180 if (x < $el.width() - opt.minSize || y < $el.height() - opt.minSize) {181 return false;182 }183 },184 onDrag: function (ev, $el, newWidth, newHeight) {185 var opt = trumbowyg.o.plugins.resizimg;186 if (newHeight < opt.minSize) {187 newHeight = opt.minSize;188 }189 newHeight -= newHeight % opt.step;190 $el.height(newHeight);191 return false;192 },193 onDragEnd: function () {194 // resize update canvas information195 resizeWithCanvas.refresh();196 trumbowyg.syncCode();197 }198 }199 }200 );201 function initResizable() {202 trumbowyg.$ed.find('img')203 .off('click')204 .on('click', function (e) {205 // if I'm already do a resize, reset it206 if (resizeWithCanvas.isActive()) {207 resizeWithCanvas.reset();208 }209 // initialize resize of image210 resizeWithCanvas.setup(this, trumbowyg.o.plugins.resizimg.resizable);211 preventDefault(e);212 });213 }214 trumbowyg.$c.on('tbwinit', function () {215 initResizable();216 // disable resize when click on other items217 trumbowyg.$ed.on('click', function (e) {218 // check if I've clicked out of canvas or image to reset it219 if ($(e.target).is('img') || e.target.id === resizeWithCanvas.canvasId()) {220 return;221 }222 preventDefault(e);223 resizeWithCanvas.reset();224 // save changes225 trumbowyg.$c.trigger('tbwchange');226 });227 trumbowyg.$ed.on('scroll', function () {228 resizeWithCanvas.reCalcOffset();229 });230 });231 trumbowyg.$c.on('tbwfocus tbwchange', initResizable);232 trumbowyg.$c.on('tbwresize', function () {233 resizeWithCanvas.reCalcOffset();234 });235 // Destroy236 trumbowyg.$c.on('tbwblur', function () {237 // if I have already focused the canvas avoid destroy238 if (resizeWithCanvas.isFocusedNow()) {239 resizeWithCanvas.blurNow();240 } else {241 destroyResizable(trumbowyg);242 }243 });244 },245 destroy: function (trumbowyg) {246 destroyResizable(trumbowyg);247 }248 }249 }250 });...

Full Screen

Full Screen

operators.py

Source:operators.py Github

copy

Full Screen

...123 resize_h, resize_w = self.image_shape124 ori_h, ori_w = img.shape[:2] # (h, w, c)125 ratio_h = float(resize_h) / ori_h126 ratio_w = float(resize_w) / ori_w127 img = cv2.resize(img, (int(resize_w), int(resize_h)))128 # return img, np.array([ori_h, ori_w])129 return img, [ratio_h, ratio_w]130 def resize_image_type0(self, img):131 """132 resize image to a size multiple of 32 which is required by the network133 args:134 img(array): array with shape [h, w, c]135 return(tuple):136 img, (ratio_h, ratio_w)137 """138 limit_side_len = self.limit_side_len139 h, w, _ = img.shape140 # limit the max side141 if self.limit_type == 'max':142 if max(h, w) > limit_side_len:143 if h > w:144 ratio = float(limit_side_len) / h145 else:146 ratio = float(limit_side_len) / w147 else:148 ratio = 1.149 else:150 if min(h, w) < limit_side_len:151 if h < w:152 ratio = float(limit_side_len) / h153 else:154 ratio = float(limit_side_len) / w155 else:156 ratio = 1.157 resize_h = int(h * ratio)158 resize_w = int(w * ratio)159 resize_h = max(int(round(resize_h / 32) * 32), 32)160 resize_w = max(int(round(resize_w / 32) * 32), 32)161 try:162 if int(resize_w) <= 0 or int(resize_h) <= 0:163 return None, (None, None)164 img = cv2.resize(img, (int(resize_w), int(resize_h)))165 except:166 print(img.shape, resize_w, resize_h)167 sys.exit(0)168 ratio_h = resize_h / float(h)169 ratio_w = resize_w / float(w)170 return img, [ratio_h, ratio_w]171 def resize_image_type2(self, img):172 h, w, _ = img.shape173 resize_w = w174 resize_h = h175 if resize_h > resize_w:176 ratio = float(self.resize_long) / resize_h177 else:178 ratio = float(self.resize_long) / resize_w179 resize_h = int(resize_h * ratio)180 resize_w = int(resize_w * ratio)181 max_stride = 128182 resize_h = (resize_h + max_stride - 1) // max_stride * max_stride183 resize_w = (resize_w + max_stride - 1) // max_stride * max_stride184 img = cv2.resize(img, (int(resize_w), int(resize_h)))185 ratio_h = resize_h / float(h)186 ratio_w = resize_w / float(w)187 return img, [ratio_h, ratio_w]188class E2EResizeForTest(object):189 def __init__(self, **kwargs):190 super(E2EResizeForTest, self).__init__()191 self.max_side_len = kwargs['max_side_len']192 self.valid_set = kwargs['valid_set']193 def __call__(self, data):194 img = data['image']195 src_h, src_w, _ = img.shape196 if self.valid_set == 'totaltext':197 im_resized, [ratio_h, ratio_w] = self.resize_image_for_totaltext(198 img, max_side_len=self.max_side_len)199 else:200 im_resized, (ratio_h, ratio_w) = self.resize_image(201 img, max_side_len=self.max_side_len)202 data['image'] = im_resized203 data['shape'] = np.array([src_h, src_w, ratio_h, ratio_w])204 return data205 def resize_image_for_totaltext(self, im, max_side_len=512):206 h, w, _ = im.shape207 resize_w = w208 resize_h = h209 ratio = 1.25210 if h * ratio > max_side_len:211 ratio = float(max_side_len) / resize_h212 resize_h = int(resize_h * ratio)213 resize_w = int(resize_w * ratio)214 max_stride = 128215 resize_h = (resize_h + max_stride - 1) // max_stride * max_stride216 resize_w = (resize_w + max_stride - 1) // max_stride * max_stride217 im = cv2.resize(im, (int(resize_w), int(resize_h)))218 ratio_h = resize_h / float(h)219 ratio_w = resize_w / float(w)220 return im, (ratio_h, ratio_w)221 def resize_image(self, im, max_side_len=512):222 """223 resize image to a size multiple of max_stride which is required by the network224 :param im: the resized image225 :param max_side_len: limit of max image size to avoid out of memory in gpu226 :return: the resized image and the resize ratio227 """228 h, w, _ = im.shape229 resize_w = w230 resize_h = h231 # Fix the longer side232 if resize_h > resize_w:233 ratio = float(max_side_len) / resize_h234 else:235 ratio = float(max_side_len) / resize_w236 resize_h = int(resize_h * ratio)237 resize_w = int(resize_w * ratio)238 max_stride = 128239 resize_h = (resize_h + max_stride - 1) // max_stride * max_stride240 resize_w = (resize_w + max_stride - 1) // max_stride * max_stride241 im = cv2.resize(im, (int(resize_w), int(resize_h)))242 ratio_h = resize_h / float(h)243 ratio_w = resize_w / float(w)...

Full Screen

Full Screen

plugin.js

Source:plugin.js Github

copy

Full Screen

...4344 if ( resizeVertical )45 height = Math.max( config.resize_minHeight, Math.min( internalHeight, config.resize_maxHeight ) );4647 editor.resize( width, height );48 }4950 function dragEndHandler ( evt )51 {52 CKEDITOR.document.removeListener( 'mousemove', dragHandler );53 CKEDITOR.document.removeListener( 'mouseup', dragEndHandler );5455 if ( editor.document )56 {57 editor.document.removeListener( 'mousemove', dragHandler );58 editor.document.removeListener( 'mouseup', dragEndHandler );59 }60 }61 ...

Full Screen

Full Screen

visual.py

Source:visual.py Github

copy

Full Screen

...32 resize_w = int(resize_w * ratio)33 max_stride = 12834 resize_h = (resize_h + max_stride - 1) // max_stride * max_stride35 resize_w = (resize_w + max_stride - 1) // max_stride * max_stride36 im = cv2.resize(im, (int(resize_w), int(resize_h)))37 ratio_h = resize_h / float(h)38 ratio_w = resize_w / float(w)39 return im, (ratio_h, ratio_w)40def resize_image_min(im, max_side_len=512):41 """42 """43 h, w, _ = im.shape44 resize_w = w45 resize_h = h46 if resize_h < resize_w:47 ratio = float(max_side_len) / resize_h48 else:49 ratio = float(max_side_len) / resize_w50 resize_h = int(resize_h * ratio)51 resize_w = int(resize_w * ratio)52 max_stride = 12853 resize_h = (resize_h + max_stride - 1) // max_stride * max_stride54 resize_w = (resize_w + max_stride - 1) // max_stride * max_stride55 im = cv2.resize(im, (int(resize_w), int(resize_h)))56 ratio_h = resize_h / float(h)57 ratio_w = resize_w / float(w)58 return im, (ratio_h, ratio_w)59def resize_image_for_totaltext(im, max_side_len=512):60 """61 """62 h, w, _ = im.shape63 resize_w = w64 resize_h = h65 ratio = 1.2566 if h * ratio > max_side_len:67 ratio = float(max_side_len) / resize_h68 resize_h = int(resize_h * ratio)69 resize_w = int(resize_w * ratio)70 max_stride = 12871 resize_h = (resize_h + max_stride - 1) // max_stride * max_stride72 resize_w = (resize_w + max_stride - 1) // max_stride * max_stride73 im = cv2.resize(im, (int(resize_w), int(resize_h)))74 ratio_h = resize_h / float(h)75 ratio_w = resize_w / float(w)76 return im, (ratio_h, ratio_w)77def point_pair2poly(point_pair_list):78 """79 Transfer vertical point_pairs into poly point in clockwise.80 """81 pair_length_list = []82 for point_pair in point_pair_list:83 pair_length = np.linalg.norm(point_pair[0] - point_pair[1])84 pair_length_list.append(pair_length)85 pair_length_list = np.array(pair_length_list)86 pair_info = (pair_length_list.max(), pair_length_list.min(),87 pair_length_list.mean())...

Full Screen

Full Screen

resizes.py

Source:resizes.py Github

copy

Full Screen

1# -*- coding:utf-8 -*-2from imagekit.processors import Resize3class ResizeWatermarkPicture(Resize):4 height = 12005class Resize80x56(Resize):6 width = 807 height = 568 crop = True9class ResizeThumb(Resize):10 width = 17211 height = 17212class ResizeThumb300(Resize):13 height = 30014class ResizeThumb500(Resize):15 height = 50016class ResizeDisplay(Resize):17 width = 120018 height = 90019class ResizeImg300x300(Resize):20 width = 30021 height = 30022 crop = True23class ResizeImgAutox200(Resize):24 height = 20025class ResizeImg120x120(Resize):26 width = 12027 height = 12028 crop = True29class ResizeImg100x100(Resize):30 width = 10031 height = 10032class ResizeProduce(Resize):33 height = 50034class ResizeGallerySlider(Resize):35 height = 51436class ResizeGallery(Resize):37 height = 38038class ResizeImgReview(Resize):39 width = 28040class ResizeImgListPages(Resize):41 height = 20042class ResizeProductCard(Resize):43 height = 30044class ResizeProductView(Resize):45 height = 50046class ResizeProductOption(Resize):47 width = 28048class ResizeProductInterior(Resize):49 height = 70050class ResizeDocuments(Resize):51 height = 28652class ResizeFlittingImg(Resize):53 height = 28054class ResizeFlittingImgBig(Resize):55 height = 100056class ResizeFlittingImgThumb(Resize):...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var differencify = require('differencify')({2 resize: {3 }4});5var differencify = require('differencify')({6 resize: {7 }8});9var differencify = require('differencify')({10 resize: {11 }12});13var differencify = require('differencify')({14 resize: {15 }16});17var differencify = require('differencify')({18 resize: {19 }20});21 .init()22 .then(function() {23 .setup({24 resize: {25 }26 })27 .then(function() {28 .setup({29 resize: {30 }31 })32 .then(function() {33 .setup({34 resize: {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var differencify = require('differencify');2var differencify = require('differencify');3differencify.init({4});5differencify.resize('test/screenshots/initial.png', 'test/screenshots/initial.png', 100, 100, function (err, data) {6 console.log(err, data);7});8var differencify = require('differencify');9differencify.init({10});11differencify.resize('test/screenshots/initial.png', 'test/screenshots/initial.png', 100, 100, function (err, data) {12 console.log(err, data);13});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var differencify = require('differencify');2var differencifyInstance = differencify.init();3differencifyInstance.resize('test.png', 'test2.png', {width: 100, height: 100}, function(err, resizedImage){4 if(err){5 console.log(err);6 }else{7 console.log("Resized image is saved at: " + resizedImage);8 }9});10var differencify = require('differencify');11var differencifyInstance = differencify.init();12differencifyInstance.compare('test.png', 'test2.png', function(err, result){13 if(err){14 console.log(err);15 }else{16 console.log("Result: " + result);17 }18});19var differencify = require('differencify');20var differencifyInstance = differencify.init();21differencifyInstance.compare('test.png', 'test2.png', {threshold: 0.5}, function(err, result){22 if(err){23 console.log(err);24 }else{25 console.log("Result: " + result);26 }27});28var differencify = require('differencify');29var differencifyInstance = differencify.init();30differencifyInstance.compare('test.png', 'test2.png', {threshold: 0.5, ignoreAreas: [{x: 0, y: 0, width: 100, height: 100}]}, function(err, result){31 if(err){32 console.log(err);33 }else{34 console.log("Result: " + result);35 }36});37var differencify = require('differencify');38var differencifyInstance = differencify.init();39differencifyInstance.compare('test.png', 'test2.png', {threshold: 0.5, ignoreAreas: [{x: 0, y: 0, width: 100, height: 100}, {x: 200, y: 200, width: 100, height: 100}]}, function(err,

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var Differencify = require('differencify');2var differencify = new Differencify();3differencify.resize(800, 600);4differencify.init({ updateBaseline: true });5differencify.runTest('test', function () {6 differencify.takeScreenshot('test');7 differencify.compareScreenshot('test');8});9var Differencify = require('differencify');10var differencify = new Differencify();11differencify.resize(800, 600);12differencify.init({ updateBaseline: true });13differencify.runTest('test1', function () {14 differencify.takeScreenshot('test1');15 differencify.compareScreenshot('test1');16});17var Differencify = require('differencify');18var differencify = new Differencify();19differencify.resize(800, 600);20differencify.init({ updateBaseline: true });21differencify.runTest('test2', function () {22 differencify.takeScreenshot('test2');23 differencify.compareScreenshot('test2');24});25var Differencify = require('differencify');26var differencify = new Differencify();27differencify.resize(800, 600);28differencify.init({ updateBaseline: true });29differencify.runTest('test3', function () {30 differencify.takeScreenshot('test3');31 differencify.compareScreenshot('test3');32});33var Differencify = require('differencify');34var differencify = new Differencify();35differencify.resize(800, 600);36differencify.init({ updateBaseline: true });37differencify.runTest('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var differencify = require('differencify').resize;2var expect = require('chai').expect;3describe('Test', function() {4 it('should do something', function() {5 var screenshot = browser.saveScreenshot();6 var expected = fs.readFileSync('expected.png');7 expect(differencify(screenshot, expected, {thresholdType: 'percent', threshold: 0.01})).to.be.true;8 });9});10exports.config = {11 differencifyConfig: {12 },13};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify');2const resize = differencify.resize;3const assert = require('assert');4const fs = require('fs');5const path = require('path');6const imagePath = path.join(__dirname, 'logo.png');7resize(imagePath, 200, 200, (err, image) => {8 if (err) {9 console.log('Error resizing image', err);10 }11 fs.writeFileSync(path.join(__dirname, 'resized.png'), image);12});13const differencify = require('differencify');14const resize = differencify.resize;15const assert = require('assert');16const fs = require('fs');17const path = require('path');18const imagePath = path.join(__dirname, 'logo.png');19resize(imagePath, 200, 200, (err, image) => {20 if (err) {21 console.log('Error resizing image', err);22 }23 fs.writeFileSync(path.join(__dirname, 'resized.png'), image);24});25const differencify = require('differencify');26const resize = differencify.resize;27const assert = require('assert');28const fs = require('fs');29const path = require('path');30const imagePath = path.join(__dirname, 'logo.png');31resize(imagePath, 200, 200, (err, image) => {32 if (err) {33 console.log('Error resizing image', err);34 }35 fs.writeFileSync(path.join(__dirname, 'resized.png'), image);36});37const differencify = require('differencify');38const resize = differencify.resize;39const assert = require('assert');40const fs = require('fs');41const path = require('path');42const imagePath = path.join(__dirname, 'logo.png');43resize(imagePath, 200, 200, (err, image)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify');2const { resize } = differencify;3const { width, height } = await resize('test.png', 100, 100);4console.log(`Resized image to ${width}x${height}`);5const differencify = require('differencify');6const { compare } = differencify;7const { width, height } = await compare('test.png', 'test2.png');8console.log(`Compared images with ${width}x${height}`);9### `differencify.init([options])`10| `launchOptions` | Options to pass to the browser. See [puppeteer launch options](

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1differencify.resize(100, 100);2it("should resize the image", () => {3 differencify.resize(100, 100);4});5differencify.resize({ width: 100, height: 100 });6it("should resize the image", () => {7 differencify.resize({ width: 100, height: 100 });8});

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run differencify automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful