/** * @class elFinder command "resize" * Open dialog to resize image * * @author Dmitry (dio) Levashov * @author Alexey Sukhotin * @author Naoki Sawada * @author Sergio Jovani **/ elFinder.prototype.commands.resize = function() { "use strict"; var fm = this.fm, losslessRotate = 0, getBounceBox = function(w, h, theta) { var srcPts = [ {x: w/2, y: h/2}, {x: -w/2, y: h/2}, {x: -w/2, y: -h/2}, {x: w/2, y: -h/2} ], dstPts = [], min = {x: Number.MAX_VALUE, y: Number.MAX_VALUE}, max = {x: Number.MIN_VALUE, y: Number.MIN_VALUE}; jQuery.each(srcPts, function(i, srcPt){ dstPts.push({ x: srcPt.x * Math.cos(theta) - srcPt.y * Math.sin(theta), y: srcPt.x * Math.sin(theta) + srcPt.y * Math.cos(theta) }); }); jQuery.each(dstPts, function(i, pt) { min.x = Math.min(min.x, pt.x); min.y = Math.min(min.y, pt.y); max.x = Math.max(max.x, pt.x); max.y = Math.max(max.y, pt.y); }); return { width: max.x - min.x, height: max.y - min.y }; }; this.updateOnSelect = false; this.getstate = function() { var sel = fm.selectedFiles(); return sel.length == 1 && sel[0].read && sel[0].write && sel[0].mime.indexOf('image/') !== -1 ? 0 : -1; }; this.resizeRequest = function(data, f, dfrd) { var file = f || fm.file(data.target), tmb = file? file.tmb : null, enabled = fm.isCommandEnabled('resize', data.target); if (enabled && (! file || (file && file.read && file.write && file.mime.indexOf('image/') !== -1 ))) { return fm.request({ data : Object.assign(data, { cmd : 'resize' }), notify : {type : 'resize', cnt : 1} }) .fail(function(error) { if (dfrd) { dfrd.reject(error); } }) .done(function() { if (data.quality) { fm.storage('jpgQuality', data.quality === fm.option('jpgQuality')? null : data.quality); } dfrd && dfrd.resolve(); }); } else { var error; if (file) { if (file.mime.indexOf('image/') === -1) { error = ['errResize', file.name, 'errUsupportType']; } else { error = ['errResize', file.name, 'errPerm']; } } else { error = ['errResize', data.target, 'errPerm']; } if (dfrd) { dfrd.reject(error); } else { fm.error(error); } return jQuery.Deferred().reject(error); } }; this.exec = function(hashes) { var self = this, files = this.files(hashes), dfrd = jQuery.Deferred(), api2 = (fm.api > 1), options = this.options, dialogWidth = 650, fmnode = fm.getUI(), ctrgrup = jQuery().controlgroup? 'controlgroup' : 'buttonset', grid8Def = typeof options.grid8px === 'undefined' || options.grid8px !== 'disable'? true : false, presetSize = Array.isArray(options.presetSize)? options.presetSize : [], clactive = 'elfinder-dialog-active', clsediting = fm.res('class', 'editing'), open = function(file, id, src) { var isJpeg = (file.mime === 'image/jpeg'), dialog = jQuery('
'), input = '', row = '
', label = '
', changeTm = null, operate = false, opStart = function() { operate = true; }, opStop = function() { if (operate) { operate = false; control.trigger('change'); } }, control = jQuery('
') .on('focus', 'input[type=text],input[type=number]', function() { jQuery(this).trigger('select'); }) .on('change', function() { changeTm && cancelAnimationFrame(changeTm); changeTm = requestAnimationFrame(function() { var panel, quty, canvas, ctx, img, sx, sy, sw, sh, deg, theta, bb; if (sizeImg && ! operate && (canvas = sizeImg.data('canvas'))) { panel = control.children('div.elfinder-resize-control-panel:visible'); quty = panel.find('input.elfinder-resize-quality'); if (quty.is(':visible')) { ctx = sizeImg.data('ctx'); img = sizeImg.get(0); if (panel.hasClass('elfinder-resize-uiresize')) { // resize sw = canvas.width = width.val(); sh = canvas.height = height.val(); ctx.drawImage(img, 0, 0, sw, sh); } else if (panel.hasClass('elfinder-resize-uicrop')) { // crop sx = pointX.val(); sy = pointY.val(); sw = offsetX.val(); sh = offsetY.val(); canvas.width = sw; canvas.height = sh; ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh); } else { // rotate deg = degree.val(); theta = (degree.val() * Math.PI) / 180; bb = getBounceBox(owidth, oheight, theta); sw = canvas.width = bb.width; sh = canvas.height = bb.height; ctx.save(); if (deg % 90 !== 0) { ctx.fillStyle = bg.val() || '#FFF'; ctx.fillRect(0, 0, sw, sh); } ctx.translate(sw / 2, sh / 2); ctx.rotate(theta); ctx.drawImage(img, -img.width/2, -img.height/2, owidth, oheight); ctx.restore(); } canvas.toBlob(function(blob) { if (blob) { size1 = blob.size; quty.next('span').text(' (' + fm.formatSize(blob.size) + ')'); } }, 'image/jpeg', Math.max(Math.min(quty.val(), 100), 1) / 100); } } }); }) .on('mouseup', 'input', function(e) { jQuery(e.target).trigger('change'); }), preview = jQuery('
') .on('touchmove', function(e) { if (jQuery(e.target).hasClass('touch-punch')) { e.stopPropagation(); e.preventDefault(); } }), spinner = jQuery('
'+fm.i18n('ntfloadimg')+'
'), rhandle = jQuery('
'), rhandlec = jQuery('
'), uiresize = jQuery('
'), uicrop = jQuery('
'), uirotate = jQuery('
'), uideg270 = jQuery('').attr('title',fm.i18n('rotate-cw')).append(jQuery('')), uideg90 = jQuery('').attr('title',fm.i18n('rotate-ccw')).append(jQuery('')), uiprop = jQuery(''), reset = jQuery('