Commit ab6c925c authored by Arthur Suzuki's avatar Arthur Suzuki
Browse files

use Croppie instead of JSCrop (move image instead of canvas)

parent ccb8497c
Pipeline #15752 passed with stage
in 30 minutes and 46 seconds
......@@ -12,24 +12,10 @@ echo $this->renderForm($this->form, $buttons);
foreach($this->dimensions as $dimension)
echo $this->button((new Class_Button)
->setText($dimension)
->setTitle($this->_('Redimensionner en %s pixels puis téléverser', $dimension))
->setTitle($this->_('Redimensionner le gabarit en %s pixels', $dimension))
->setAttribs(['style' => 'display: none;',
'class' => 'resize_image',
'onclick' => sprintf("$(this).resizeAndUpload('%s');", $dimension)]));
echo $this->button((new Class_Button)
->setText('Retailler')
->setTitle($this->_('Retailler l\'image'))
->setAttribs(['style' => 'display: none;',
'class' => 'resize_image',
'onclick' => sprintf("crop = jsCrop.initialise(document.getElementById('image_preview'))")]));
echo $this->button((new Class_Button)
->setText('Sauvegarder')
->setTitle($this->_('Sauvegarder l\'image'))
->setAttribs(['style' => 'display: none;',
'class' => 'resize_image',
'onclick' => sprintf("$(this).uploadCanvas();")]));
'onclick' => sprintf("$(this).resizeViewport('%s');", $dimension)]));
echo $this->tag('p', $this->_('Dimensions actuelles de l\'image en pixels: %s',
$this->tag('span', null)),
......
......@@ -176,9 +176,9 @@ class Class_ScriptLoader {
* @return ScriptLoader
*/
public function loadCropperJS() {
return $this
->addAdminScript('js-crop-min.js')
->addStyleSheet(URL_ADMIN_JS . 'js-crop-min.css');
return $this
->addStyleSheet(URL_ADMIN_JS . 'croppie.css')
->addAdminScript('croppie.min.js');
}
......
......@@ -84,7 +84,8 @@ class ZendAfi_Form_Admin_FileManager_Import extends ZendAfi_Form {
Class_ScriptLoader::getInstance()
->addOPACPluginScript('file-manager/file-manager.js')
->addOPACPluginStyleSheet('file-manager/file-manager.css')
->addJqueryReady('$("#file_manager_import_form").fileUploader();');
->addJqueryReady('$("#file_manager_import_form").fileUploader();')
->loadCropperJS();
$this
->setAttrib('id', 'file_manager_import_form')
......
......@@ -32,7 +32,6 @@ class ZendAfi_View_Helper_Admin_Head extends ZendAfi_View_Helper_BaseHelper {
'global',
'toolbar'])
->addOPACScript('subModal')
->loadCropperJS()
->showNotifications(true);
Class_Admin_Skin::current()->renderScriptsOn($head_scripts);
......
.croppie-container {
width: 100%;
height: 100%;
}
.croppie-container .cr-image {
z-index: -1;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
max-height: none;
max-width: none;
}
.croppie-container .cr-boundary {
position: relative;
overflow: hidden;
margin: 0 auto;
z-index: 1;
width: 100%;
height: 100%;
}
.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
position: absolute;
border: 2px solid #fff;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
z-index: 0;
}
.croppie-container .cr-resizer {
z-index: 2;
box-shadow: none;
pointer-events: none;
}
.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
position: absolute;
pointer-events: all;
}
.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
display: block;
position: absolute;
box-sizing: border-box;
border: 1px solid black;
background: #fff;
width: 10px;
height: 10px;
content: '';
}
.croppie-container .cr-resizer-vertical {
bottom: -5px;
cursor: row-resize;
width: 100%;
height: 10px;
}
.croppie-container .cr-resizer-vertical::after {
left: 50%;
margin-left: -5px;
}
.croppie-container .cr-resizer-horisontal {
right: -5px;
cursor: col-resize;
width: 10px;
height: 100%;
}
.croppie-container .cr-resizer-horisontal::after {
top: 50%;
margin-top: -5px;
}
.croppie-container .cr-original-image {
display: none;
}
.croppie-container .cr-vp-circle {
border-radius: 50%;
}
.croppie-container .cr-overlay {
z-index: 1;
position: absolute;
cursor: move;
touch-action: none;
}
.croppie-container .cr-slider-wrap {
width: 75%;
margin: 15px auto;
text-align: center;
}
.croppie-result {
position: relative;
overflow: hidden;
}
.croppie-result img {
position: absolute;
}
.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/
.cr-slider {
-webkit-appearance: none;
/*removes default webkit styles*/
/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
width: 300px;
/*required for proper track sizing in FF*/
max-width: 100%;
padding-top: 8px;
padding-bottom: 8px;
background-color: transparent;
}
.cr-slider::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.5);
border: 0;
border-radius: 3px;
}
.cr-slider::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #ddd;
margin-top: -6px;
}
.cr-slider:focus {
outline: none;
}
/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/
.cr-slider::-moz-range-track {
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.5);
border: 0;
border-radius: 3px;
}
.cr-slider::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #ddd;
margin-top: -6px;
}
/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
.cr-slider::-ms-track {
width: 100%;
height: 5px;
background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
border-width: 6px 0;
color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.cr-slider::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #ddd;
margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
background: rgba(0, 0, 0, 0.5);
}
/*******************************************/
/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
position: absolute;
bottom: 5px;
left: 5px;
z-index: 1;
}
.cr-rotate-controls button {
border: 0;
background: none;
}
.cr-rotate-controls i:before {
display: inline-block;
font-style: normal;
font-weight: 900;
font-size: 22px;
}
.cr-rotate-l i:before {
content: '↺';
}
.cr-rotate-r i:before {
content: '↻';
}
This diff is collapsed.
.js-crop-image-holder{position:relative;}.js-crop-image-holder>img{display:table;height:100%;}.js-crop-image-holder>canvas{display:table;position:absolute;top:0;left:0;opacity:0.5;transition:opacity 125ms ease-in-out;}.js-crop-image-holder>.js-crop-grid-holder{width:100%;height:100%;position:absolute;opacity:0;box-shadow:inset 0 0 2px 1px #000000;visibility:hidden;transition:opacity 125ms ease-in-out;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer{width:10px;height:10px;position:absolute;z-index:2;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-top-left{cursor:nw-resize;top:-2px;left:-2px;z-index:3;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-top-mid{cursor:n-resize;width:100%;top:-2px;left:50%;transform:translateX(-50%);}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-top-right{cursor:ne-resize;top:-2px;right:-2px;z-index:3;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-right-mid{cursor:e-resize;height:100%;top:50%;right:-2px;transform:translateY(-50%);}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-bot-right{cursor:se-resize;bottom:-2px;right:-2px;z-index:3;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-bot-mid{cursor:s-resize;width:100%;bottom:-2px;right:50%;transform:translateX(50%);}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-bot-left{cursor:sw-resize;bottom:-2px;left:-2px;z-index:3;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-left-mid{cursor:w-resize;height:100%;left:-2px;bottom:50%;transform:translateY(50%);}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-handle{border-style:solid;border-color:#FFFFFF;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-top-left.js-crop-handle{border-width:3px 0 0 3px;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-top-mid.js-crop-handle{width:10px;border-width:3px 0 0 0;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-top-right.js-crop-handle{border-width:3px 3px 0 0;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-right-mid.js-crop-handle{height:10px;border-width:0 3px 0 0;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-bot-right.js-crop-handle{border-width:0 3px 3px 0;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-bot-mid.js-crop-handle{width:10px;border-width:0 0 3px 0;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-bot-left.js-crop-handle{border-width:0 0 3px 3px;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-resizer.js-crop-left-mid.js-crop-handle{height:10px;border-width:0 0 0 3px;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-grid{cursor:move;width:100%;height:100%;border:solid 1px #FFFFFF;border-spacing:0;border-collapse:collapse;position:relative;box-shadow:0 0 8px 1px #000000;z-index:1;}.js-crop-image-holder>.js-crop-grid-holder>.js-crop-grid>tbody>tr>td{border:solid 1px #FFFFFF;box-shadow:0 0 2px 1px #000000;}
\ No newline at end of file
"use strict";(function(){const bind=Function.prototype.bind;const eventHandlers=new Set();Object.defineProperty(Function.prototype,"bind",{"value":function(){const result=bind.apply(this,arguments);Object.defineProperty(result,"__source__",{"value":(this.__source__||this)});return result;}});Object.defineProperties(Object.prototype,{"attachEventHandler":{"value":function(type,handler){eventHandlers.add({"element":this,"type":type,"handler":handler});this.addEventListener(type,handler);}},"detachEventHandler":{"value":function(type,handler){let removeHandler=function(value,index,source){let eventHandler=value.handler;if((value.element===this)&&(value.type===type)&&((eventHandler.__source__||eventHandler)===(handler.__source__||handler))){this.removeEventListener(type,eventHandler);eventHandlers.delete(value);return true;}eventHandler=null;};Array.from(eventHandlers).some(removeHandler.bind(this));}}});})();let jsCrop=(function(){return Object.freeze({"initialise":function(imageElement,options={}){let currentInstance=imageElement.jsCropInstance;if(!currentInstance){let cropper={"minLeft":0,"minTop":0,"maxLeft":0,"maxTop":0,"minWidth":20,"minHeight":20,"maxWidth":0,"maxHeight":0,"originalWidth":0,"originalHeight":0,"originalLeft":0,"originalTop":0,"originalMouseX":0,"originalMouseY":0,"pageX":0,"pageY":0,"deltaX":0,"deltaY":0,"newLeft":0,"newTop":0,"newWidth":0,"newHeight":0,"mouseDownElement":null,"imageToCrop":null,"imageOverlay":null,"gridHolder":null,"grid":null,"cropResult":null,"resizers":{"topLeft":null,"topMid":null,"topRight":null,"rightMid":null,"botRight":null,"botMid":null,"botLeft":null,"leftMid":null},"imageOverlayContext":null,"cropResultContext":null,"gridHolderStyle":null,"cropResultStyle":null,"imageLeft":0,"imageTop":0,"imageRight":0,"imageBottom":0,"gridHolderLeft":0,"gridHolderTop":0,"gridHolderWidth":0,"gridHolderHeight":0,"enableCropMode":function(flag){if(flag){this.imageOverlay.style.removeProperty("opacity");this.gridHolderStyle.visibility="visible";this.gridHolderStyle.opacity="1";this.updateCropBackground();this.drawCroppedImage();}else{this.gridHolderStyle.removeProperty("opacity");this.imageOverlay.style.opacity="0";}},"setOutputCanvas":function(canvasElement){this.cropResult=canvasElement;this.cropResultStyle=canvasElement.style;this.cropResultContext=canvasElement.getContext("2d");this.drawCroppedImage();},"drawCroppedImage":function(){this.gridHolderLeft=this.gridHolder.offsetLeft;this.gridHolderTop=this.gridHolder.offsetTop;this.gridHolderWidth=this.gridHolder.offsetWidth;this.gridHolderHeight=this.gridHolder.offsetHeight;this.cropResult.width=this.gridHolderWidth;this.cropResultStyle.marginLeft=`${this.gridHolderLeft}px`;this.cropResult.height=this.gridHolderHeight;this.cropResultStyle.marginTop=`${this.gridHolderTop}px`;this.cropResultStyle.marginBottom=`${(this.imageToCrop.offsetHeight-(this.gridHolderHeight+this.gridHolderTop))}px`;this.cropResultContext.clearRect(0,0,this.gridHolderWidth,this.gridHolderHeight);this.cropResultContext.drawImage(this.imageToCrop,this.gridHolderLeft,this.gridHolderTop,this.gridHolderWidth,this.gridHolderHeight,0,0,this.gridHolderWidth,this.gridHolderHeight);},"downloadCroppedImage":function(){let anchorElement=document.createElement("a");let anchorElementStyle=anchorElement.style;this.drawCroppedImage();anchorElement.href=this.cropResult.toDataURL("image/png").replace("image/png","image/octet-stream");anchorElement.download=`${this.imageToCrop.src.match(/^.*[\\\/](.+?)(\.[^.]*$|$)/)[1]}-cropped.png`;anchorElementStyle.display="none";anchorElementStyle.visibility="hidden";anchorElementStyle.opacity=0;document.body.appendChild(anchorElement);anchorElement.click();setTimeout(function(){document.body.removeChild(anchorElement);anchorElementStyle=null;anchorElement=null;});},"fixGrid":function(){this.gridHolderLeft=this.gridHolder.offsetLeft;this.gridHolderTop=this.gridHolder.offsetTop;this.gridHolderWidth=this.gridHolder.offsetWidth;this.gridHolderHeight=this.gridHolder.offsetHeight;this.maxWidth=(this.imageToCrop.offsetWidth-this.gridHolderLeft);this.maxHeight=(this.imageToCrop.offsetHeight-this.gridHolderTop);if(this.mouseDownElement!==this.grid){if(this.gridHolderWidth>this.maxWidth)this.gridHolderStyle.width=`${this.maxWidth}px`;if(this.gridHolderHeight>this.maxHeight)this.gridHolderStyle.height=`${this.maxHeight}px`;if(this.gridHolderWidth<this.minWidth)this.gridHolderStyle.width=`${this.minWidth}px`;if(this.gridHolderHeight<this.minHeight)this.gridHolderStyle.height=`${this.minHeight}px`;}else{if(this.gridHolderWidth>this.maxWidth)this.gridHolderStyle.left=`${(this.gridHolder.offsetLeft-(this.gridHolderWidth-this.maxWidth))}px`;if(this.gridHolderHeight>this.maxHeight)this.gridHolderStyle.top=`${(this.gridHolder.offsetTop-(this.gridHolderHeight-this.maxHeight))}px`;}},"updateCropBackground":function(){this.imageOverlayContext.fillRect(0,0,this.imageOverlay.width,this.imageOverlay.height);this.imageOverlayContext.clearRect(this.gridHolder.offsetLeft,this.gridHolder.offsetTop,this.gridHolder.offsetWidth,this.gridHolder.offsetHeight);},"setCropRegion":function(left,top,width,height){if(left<this.minLeft)left=this.minLeft;if(top<this.minTop)top=this.minTop;this.gridHolderStyle.left=`${left}px`;this.gridHolderStyle.top=`${top}px`;this.gridHolderStyle.width=`${width}px`;this.gridHolderStyle.height=`${height}px`;this.fixGrid();this.updateCropBackground();this.drawCroppedImage();},"resizeGrid":function(event){event.preventDefault();this.pageX=event.pageX;this.pageY=event.pageY;this.deltaX=(this.pageX-this.originalMouseX);this.deltaY=(this.pageY-this.originalMouseY);this.newLeft=(this.originalLeft+this.deltaX);this.newTop=(this.originalTop+this.deltaY);if(this.newLeft<this.minLeft){this.newLeft=this.minLeft;if(this.mouseDownElement===this.resizers.botLeft||this.mouseDownElement===this.resizers.leftMid||this.mouseDownElement===this.resizers.topLeft)this.deltaX=(this.newLeft-this.originalLeft);}else if(this.newLeft>this.maxLeft)this.newLeft=this.maxLeft;if(this.newTop<this.minTop){this.newTop=this.minTop;if(this.mouseDownElement===this.resizers.topLeft||this.mouseDownElement===this.resizers.topMid||this.mouseDownElement===this.resizers.topRight)this.deltaY=(this.newTop-this.originalTop);}else if(this.newTop>this.maxTop)this.newTop=this.maxTop;this.newWidth=this.originalWidth;this.newHeight=this.originalHeight;switch(this.mouseDownElement){case this.resizers.topLeft:this.newWidth-=this.deltaX;this.newHeight-=this.deltaY;if(this.newWidth>this.minWidth){this.gridHolderStyle.left=`${this.newLeft}px`;this.gridHolderStyle.width=`${this.newWidth}px`;}if(this.newHeight>this.minHeight){this.gridHolderStyle.top=`${this.newTop}px`;this.gridHolderStyle.height=`${this.newHeight}px`;}break;case this.resizers.topMid:this.newHeight-=this.deltaY;if(this.newHeight>this.minHeight){this.gridHolderStyle.top=`${this.newTop}px`;this.gridHolderStyle.height=`${this.newHeight}px`;}break;case this.resizers.topRight:this.newWidth+=this.deltaX;this.newHeight-=this.deltaY;if(this.newWidth>this.minWidth)this.gridHolderStyle.width=`${this.newWidth}px`;if(this.newHeight>this.minHeight){this.gridHolderStyle.top=`${this.newTop}px`;this.gridHolderStyle.height=`${this.newHeight}px`;}break;case this.resizers.rightMid:this.newWidth+=this.deltaX;if(this.newWidth>this.minWidth)this.gridHolderStyle.width=`${this.newWidth}px`;break;case this.resizers.botRight:this.newWidth+=this.deltaX;this.newHeight+=this.deltaY;if(this.newWidth>this.minWidth)this.gridHolderStyle.width=`${this.newWidth}px`;if(this.newHeight>this.minHeight)this.gridHolderStyle.height=`${this.newHeight}px`;break;case this.resizers.botMid:this.newHeight+=this.deltaY;if(this.newHeight>this.minHeight)this.gridHolderStyle.height=`${this.newHeight}px`;break;case this.resizers.botLeft:this.newWidth-=this.deltaX;this.newHeight+=this.deltaY;if(this.newWidth>this.minWidth){this.gridHolderStyle.left=`${this.newLeft}px`;this.gridHolderStyle.width=`${this.newWidth}px`;}if(this.newHeight>this.minHeight)this.gridHolderStyle.height=`${this.newHeight}px`;break;case this.resizers.leftMid:this.newWidth-=this.deltaX;if(this.newWidth>this.minWidth){this.gridHolderStyle.left=`${this.newLeft}px`;this.gridHolderStyle.width=`${this.newWidth}px`;}break;case this.grid:if((this.newLeft<this.gridHolder.offsetLeft)||(this.gridHolder.offsetWidth<this.maxWidth))this.gridHolderStyle.left=`${this.newLeft}px`;if((this.newTop<this.gridHolder.offsetTop)||(this.gridHolder.offsetHeight<this.maxHeight))this.gridHolderStyle.top=`${this.newTop}px`;if((this.pageX>=this.imageLeft)&&(this.pageX<=this.imageRight)){if((this.gridHolder.offsetLeft===this.minLeft)||(this.gridHolder.offsetWidth===this.maxWidth)){this.originalMouseX+=this.deltaX;this.originalLeft=this.gridHolder.offsetLeft;}}if((this.pageY>=this.imageTop)&&(this.pageY<=this.imageBottom)){if((this.gridHolder.offsetTop===this.minTop)||(this.gridHolder.offsetHeight===this.maxHeight)){this.originalMouseY+=this.deltaY;this.originalTop=this.gridHolder.offsetTop;}}break;default:break;}this.fixGrid();this.updateCropBackground();this.drawCroppedImage();},"stopResizingGrid":function(event){event.preventDefault();document.detachEventHandler("mouseup",this.stopResizingGrid.bind(this));document.detachEventHandler("mousemove",this.resizeGrid.bind(this));this.mouseDownElement=null;},"startResizingGrid":function(event){event.preventDefault();this.originalWidth=this.gridHolder.offsetWidth;this.originalHeight=this.gridHolder.offsetHeight;this.originalLeft=this.gridHolder.offsetLeft;this.originalTop=this.gridHolder.offsetTop;this.originalMouseX=event.pageX;this.originalMouseY=event.pageY;this.mouseDownElement=event.currentTarget;document.attachEventHandler("mousemove",this.resizeGrid.bind(this));document.attachEventHandler("mouseup",this.stopResizingGrid.bind(this));},"hideGrid":function(){if(!this.gridHolderStyle.opacity)this.gridHolderStyle.removeProperty("visibility");},"destroy":function(){try{let imageHolder=this.imageToCrop.parentElement;delete this.imageToCrop.jsCropInstance;imageHolder.parentElement.insertBefore(this.imageToCrop,imageHolder);window.detachEventHandler("unload",this.destroy.bind(this));this.gridHolder.detachEventHandler("transitionend",this.hideGrid.bind(this));this.grid.detachEventHandler("mousedown",this.startResizingGrid.bind(this));Object.entries(this.resizers).forEach(function([key,value]){value.detachEventHandler("mousedown",this.startResizingGrid.bind(this));}.bind(this));this.cropResultStyle=null;this.gridHolderStyle=null;this.cropResultContext=null;this.imageOverlayContext=null;Object.entries(this.resizers).forEach(function([key,value]){value.remove();}.bind(this));this.grid.remove();this.gridHolder.remove();this.imageOverlay.remove();imageHolder.remove();this.resizers=null;this.cropResult=null;this.grid=null;this.gridHolder=null;this.imageOverlay=null;this.imageToCrop=null;imageHolder=null;}catch{void(0);}},"initialiseGrid":function(){let imageToCropClientBoundingRect=this.imageToCrop.getBoundingClientRect();let imageWidth=this.imageToCrop.offsetWidth;let imageHeight=this.imageToCrop.offsetHeight;this.imageLeft=imageToCropClientBoundingRect.left;this.imageTop=imageToCropClientBoundingRect.top;this.imageRight=imageToCropClientBoundingRect.right;this.imageBottom=imageToCropClientBoundingRect.bottom;this.imageOverlay.width=imageWidth;this.imageOverlay.height=imageHeight;this.imageOverlayContext=this.imageOverlay.getContext("2d");this.gridHolderStyle=this.gridHolder.style;this.gridHolderStyle.top="20px";this.gridHolderStyle.left="20px";this.gridHolderStyle.width=`${(imageWidth-40)}px`;this.gridHolderStyle.height=`${(imageHeight-40)}px`;this.maxWidth=imageWidth;this.maxHeight=imageHeight;this.maxLeft=(this.maxWidth-this.minWidth);this.maxTop=(this.maxHeight-this.minHeight);Object.entries(this.resizers).forEach(function([key,value]){value.attachEventHandler("mousedown",this.startResizingGrid.bind(this));}.bind(this));this.grid.attachEventHandler("mousedown",this.startResizingGrid.bind(this));this.gridHolder.attachEventHandler("transitionend",this.hideGrid.bind(this));window.attachEventHandler("unload",this.destroy.bind(this));imageToCropClientBoundingRect=null;}};let imageHolder=document.createElement("div");let resizerClassNames=["top-left","top-mid","top-right","right-mid","bot-right","bot-mid","bot-left","left-mid"];let gridTableBody=document.createElement("tbody");let addResizer=function(value,index,source){let resizer=document.createElement("div");let resizerHandle=document.createElement("div");let resizerClassName=`js-crop-resizer js-crop-${value}`;resizer.className=resizerClassName;resizerHandle.className=`${resizerClassName} js-crop-handle`;cropper.resizers[value.replace(/-(.)/g,x=>x[1].toUpperCase())]=resizer;cropper.gridHolder.appendChild(resizerHandle);cropper.gridHolder.appendChild(resizer);resizerHandle=null;resizer=null;};cropper.imageToCrop=imageElement;cropper.imageOverlay=document.createElement("canvas");cropper.gridHolder=document.createElement("div");cropper.grid=document.createElement("table");cropper.gridHolder.classList.add("js-crop-grid-holder");cropper.grid.classList.add("js-crop-grid");imageHolder.classList.add("js-crop-image-holder");resizerClassNames.forEach(addResizer.bind(this));for(let rowLoopIndex=0;rowLoopIndex<=2;rowLoopIndex++){let tableRow=document.createElement("tr");for(let columnLoopIndex=0;columnLoopIndex<=2;columnLoopIndex++)tableRow.appendChild(document.createElement("td"));gridTableBody.appendChild(tableRow);tableRow=null;}cropper.grid.appendChild(gridTableBody);cropper.gridHolder.appendChild(cropper.grid);imageElement.parentElement.insertBefore(imageHolder,imageElement);imageHolder.appendChild(imageElement);imageHolder.appendChild(cropper.imageOverlay);imageHolder.appendChild(cropper.gridHolder);cropper.initialiseGrid();cropper.setOutputCanvas(options.outputCanvas||document.createElement("canvas"));cropper.enableCropMode(!(options.startInCropMode===false));gridTableBody=null;resizerClassNames=null;imageHolder=null;currentInstance=Object.freeze({"enableCropMode":cropper.enableCropMode.bind(cropper),"setOutputCanvas":cropper.setOutputCanvas.bind(cropper),"drawCroppedImage":cropper.drawCroppedImage.bind(cropper),"downloadCroppedImage":cropper.downloadCroppedImage.bind(cropper),"setCropRegion":cropper.setCropRegion.bind(cropper),"destroy":cropper.destroy.bind(cropper)});Object.defineProperty(imageElement,"jsCropInstance",{"value":currentInstance,"configurable":true});}else{currentInstance.destroy();currentInstance=this.initialise(imageElement,options);}return currentInstance;},"getCurrentInstance":function(imageElement){return imageElement.jsCropInstance;}});})();
\ No newline at end of file
......@@ -316,11 +316,3 @@ body .file-manager .browser pre {
overflow: auto;
width: 100%;
}
/*
.js-crop-image-holder > canvas
{
top:10px;
left:10px;
}
*/
......@@ -213,6 +213,17 @@
reader.readAsDataURL(file);
};
$.fn.resizeViewport = function(dimensions) {
var dimensions = dimensions.split('x'),
width = dimensions[0],
height = dimensions[1];
$('image_preview').croppie('destroy');
$('image_preview').croppie({viewport:{width:width,height:height},enforceBoundary:true});
$('div.croppie-container').width(width);
$('div.croppie-container').height(height);
$('image_preview').croppie('setZoom',0);
}
$.fn.uploadCanvas = function() {
file = $("#file").prop('files')[0];
canvas=document.createElement('canvas');
......
......@@ -1217,6 +1217,76 @@ class FileManagerControllerImportCssDispatchTest extends FileManagerControllerTe
class FileManagerControllerImportDispatchTest extends FileManagerControllerTestCase {
public function setUp() {
parent::setUp();
$files = ['file' => ['name' => 'image.jpg',
'type' => 'image/jpeg',
'size' => 126976,
'tmp_name' => 'xxxxx/php8iuxxajl']];
$adapter = (new FileManagerController_Mock_TransferAdapter())->setFiles($files);
ZendAfi_Form_Admin_FileManager_Import::setTransferAdapter($adapter);
$filesystem = $this
->mock()
->whenCalled('is_readable')->with('xxxxx/php8iuxxajl')->answers(true)
->whenCalled('filesize')->with('xxxxx/php8iuxxajl')->answers(126976);
ZendAfi_Validate_FileExtension::setFileSystem($filesystem);
$imported_file = (new Class_FileManager)
->setId('userfiles/image.jpg')
->setPath('userfiles/image.jpg')
->setParentPath('userfiles')
->setName('image.jpg')
->setDir(false)
->setExtension('jpg');
Class_FileManager::getFileSystem()
->whenCalled('filesAt')
->with('userfiles')
->answers([$imported_file])
->whenCalled('fileAt')
->with('userfiles/image.jpg')
->answers($imported_file)
->whenCalled('directoryAt')
->with('userfiles/image.jpg')
->answers(null);
}
public function tearDown() {
ZendAfi_Validate_FileExtension::setFileSystem(null);
Class_Php_Config::setInstance(null);
parent::tearDown();
}
/** @test */
public function dispatchFormShouldContainsInputFile() {
$this->dispatch('/admin/file-manager/import?into=userfiles', true);
$this->assertXpath('//form//input[@name="file"]');
}
/** @test */
public function cropperScriptShouldBePresent() {
$this->dispatch('/admin/file-manager/import?into=userfiles', true);
$this->assertXPath('//script[contains(@src,"/public/admin/js/croppie.min.js")]');
$this->assertXPath('//link[contains(@href,"/public/admin/js/croppie.css")]');
}
}
class FileManagerControllerImportResizableImageDispatchTest extends FileManagerControllerTestCase {
public function setUp() {
......
......@@ -110,19 +110,6 @@ class Admin_IndexControllerCookiesTest extends Admin_IndexControllerTestCase {
class Admin_IndexControllerImgCropTest extends Admin_IndexControllerTestCase {
protected $_next_version;
/** @test */
public function cropperScriptShouldBePresent() {
$this->dispatch('/admin/index/index',true);
$this->assertXPath('//script[contains(@src,"/public/admin/js/js-crop-min.js")]');
$this->assertXPath('//link[contains(@href,"/public/admin/js/js-crop-min.css")]');
}
}
class Admin_IndexControllerTest extends Admin_IndexControllerTestCase {
protected $_next_version;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment