From da04534fd92d0070921b823966243b052b15e185 Mon Sep 17 00:00:00 2001 From: Max Bradbury Date: Sun, 8 Nov 2020 20:45:10 +0000 Subject: [PATCH] fix crop shit --- includes/cropper.css | 122 -------------------- includes/cropper.min.js | 1 - includes/croppie.css | 250 ++++++++++++++++++++++++++++++++++++++++ includes/croppie.min.js | 1 + index.pug | 6 +- script.js | 36 ++++-- 6 files changed, 279 insertions(+), 137 deletions(-) delete mode 100644 includes/cropper.css delete mode 100644 includes/cropper.min.js create mode 100644 includes/croppie.css create mode 100644 includes/croppie.min.js diff --git a/includes/cropper.css b/includes/cropper.css deleted file mode 100644 index c0222d8..0000000 --- a/includes/cropper.css +++ /dev/null @@ -1,122 +0,0 @@ -.slider[type='range'] { - -webkit-appearance: none; - margin: 9px 0; - width: 100% -} - -.slider[type='range']:focus { - outline: 0 -} - -.slider[type='range']::-webkit-slider-runnable-track { - cursor: pointer; - height: 5px; - width: 100%; - background: #008ecc; - border: none -} - -.slider[type='range']::-webkit-slider-thumb { - background: #fff; - border: 1px solid #e0e0e0; - border-radius: 50%; - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12); - cursor: pointer; - height: 18px; - width: 18px; - -webkit-appearance: none; - margin-top: -6.5px -} - -.slider[type='range']::-moz-range-track { - cursor: pointer; - height: 5px; - width: 100%; - background: #008ecc; - border: none -} - -.slider[type='range']::-moz-range-thumb { - background: #fff; - border: 1px solid #e0e0e0; - border-radius: 50%; - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12); - cursor: pointer; - height: 18px; - width: 18px -} - -.slider[type='range']::-ms-track { - cursor: pointer; - height: 5px; - width: 100%; - background: transparent; - border-color: transparent; - border-width: 9px 0; - color: transparent -} - -.slider[type='range']::-ms-fill-lower { - background: #008ecc; - border: none -} - -.slider[type='range']::-ms-fill-upper { - background: #008ecc; - border: none -} - -.slider[type='range']::-ms-thumb { - background: #fff; - border: 1px solid #e0e0e0; - border-radius: 50%; - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12); - cursor: pointer; - height: 18px; - width: 18px; - margin-top: 0 -} - - -.cropper { - display: inline-block -} - -.cropper canvas { - border-radius: 3px -} - -.cropper canvas:hover { - cursor: move -} - -.cropper-tools { - margin-top: 15px; - text-align: center -} - -.cropper-zoom { - display: inline-block -} - -.cropper-zoom .slider { - margin: 0 10px; - width: 225px -} - -.cropper-zoom .icon { - margin-top: 2px; - font-size: 18px -} - -.cropper-zoom .icon:last-child { - font-size: 24px -} - -.cropper .icon { - display: inline-block; - width: 1em; - height: 1em; - fill: rgba(0, 0, 0, .54); - vertical-align: middle; -} \ No newline at end of file diff --git a/includes/cropper.min.js b/includes/cropper.min.js deleted file mode 100644 index 4a08f11..0000000 --- a/includes/cropper.min.js +++ /dev/null @@ -1 +0,0 @@ -var Cropper=function(){"use strict";function t(t){if(!t)throw Error("Node is not passed or invalid selector.");var e=t;if("string"==typeof e&&!(e=document.querySelector(t)))throw Error("Invalid selector.");if(!(e instanceof window.HTMLElement))throw Error("Node should be instance of window.HTMLElement or valid selector string.");return e}function e(t){if(!t)throw Error("Config is not passed or invalid.");if("[object Object]"!==Object.prototype.toString.call(t))throw Error("Invalid config.")}function n(t){if(!t&&0!==t)throw Error("Dimension is not passed or invalid.");if("number"!=typeof t)throw Error("Invalid dimension.");if(!isFinite(t))throw Error("Invalid dimension.");if(t<0)throw Error("Invalid dimension.");return t}function i(t){if(void 0===t)return function(){};if(!t||"function"!=typeof t)throw Error("Invalid callback.");return t}function r(){throw new Error("Dynamic requires are not currently supported by rollup-plugin-commonjs")}var o={width:560,height:340},s={cutout:{fill:"rgba(0, 0, 0, 0.3)"},pattern:{size:16,fill1:"rgb(215, 215, 215)",fill2:"rgb(250, 250, 250)"}},a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},h=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},u=function(){function t(t,e){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;h(this,t),this.width=e,this.height=n},d=function(){function t(e){if(h(this,t),this._node=e,!e||"string"==typeof e){if("svg"===e||"use"===e)return void(this._node=document.createElementNS("http://www.w3.org/2000/svg",e));this._node=document.createElement(e||"div")}}return u(t,[{key:"render",value:function(t){if(!t)throw Error("Parent node are not passed.");return t.appendChild(this._node),this}},{key:"setWidth",value:function(t){return this._node.width=t,this}},{key:"setHeight",value:function(t){return this._node.height=t,this}},{key:"getSize",value:function(){return new _(this._node.width,this._node.height)}},{key:"getNode",value:function(){return this._node}},{key:"getContext2d",value:function(){return this._node.getContext("2d")}},{key:"setType",value:function(t){return this._node.type=t,this}},{key:"addClass",value:function(t){return this._node.className+=this._node.className.length>1?" "+t:t,this}},{key:"setAttribute",value:function(t,e){return this._node.setAttribute(t,e),this}}]),t}(),g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},v=function(t,e){return e={exports:{}},t(e,e.exports),e.exports}(function(t,e){!function(e,n){t.exports=function(){function t(t){var e=void 0===t?"undefined":a(t);return null!==t&&("object"===e||"function"===e)}function e(t){return"function"==typeof t}function n(t){F=t}function i(t){W=t}function o(){return void 0!==D?function(){D(h)}:s()}function s(){var t=setTimeout;return function(){return t(h,1)}}function h(){for(var t=0;tn?e:n;return this._scale=this._originScale=i,this._scale}},{key:"getSize",value:function(){var t=this.getNode().width*this._scale,e=this.getNode().height*this._scale;return new _(t,e)}},{key:"setZoom",value:function(t){return this._zoom=t,this._scale=this._originScale+this._originScale*t,this}},{key:"getZoom",value:function(){return this._zoom}},{key:"getScale",value:function(){return this._scale}},{key:"getOriginScale",value:function(){return this._originScale}},{key:"_checkFormat",value:function(){return this.getNode().width>this.getNode().height?"landscape":this.getNode().width0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;h(this,t),this.x=e,this.y=n},b=function(){function t(){h(this,t),this._size=0,this._origin={x:0,y:0}}return u(t,[{key:"update",value:function(t){return this._size=t.width>t.height?.85*t.height:.85*t.width,this._origin={x:(t.width-this._size)/2,y:(t.height-this._size)/2},this}},{key:"getRect",value:function(){return{origin:new w(this._origin.x,this._origin.y),size:new _(this._size,this._size)}}},{key:"getMinX",value:function(){return this._origin.x}},{key:"getMaxX",value:function(){return this._origin.x+this._size}},{key:"getMidX",value:function(){return this._origin.x+this._size/2}},{key:"getMinY",value:function(){return this._origin.y}},{key:"getMaxY",value:function(){return this._origin.y+this._size}},{key:"getMidY",value:function(){return this._origin.y+this._size/2}}]),t}(),k=function(){function t(e,n){h(this,t),this._frame=e,this._canvas=n,this._context=new m(this._canvas.getNode().getContext("2d"))}return u(t,[{key:"draw",value:function(){return this._context.fillStyle(s.cutout.fill),this._context.beginPath(),this._context.rect(0,0,this._canvas.getNode().width,this._canvas.getNode().height),this._context.moveTo(this._frame.getMinX(),this._frame.getMinY()),this._context.lineTo(this._frame.getMinX(),this._frame.getMaxY()),this._context.lineTo(this._frame.getMaxX(),this._frame.getMaxY()),this._context.lineTo(this._frame.getMaxX(),this._frame.getMinY()),this._context.closePath(),this._context.fill(),this}}]),t}(),x=function(t){function e(t,n){h(this,e);var i=f(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,"canvas"));return i._frame=t,i._canvas=n,i._context=new m(i._node.getContext("2d")),i}return l(e,t),u(e,[{key:"toDataURL",value:function(){return this.setWidth(this._frame.getRect().size.width),this.setHeight(this._frame.getRect().size.height),this._context.drawImage(this._canvas.getNode(),this._frame.getMinX(),this._frame.getMinY(),this._frame.getRect().size.width,this._frame.getRect().size.height,0,0,this._frame.getRect().size.width,this._frame.getRect().size.height),this.getNode().toDataURL()}}]),e}(d),P=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:new d(document.body);h(this,t),this._element=e,this._parent=n,this._onMoveCallback=function(){},this._onPressCallback=function(){},this._onReleaseCallback=function(){},this._onReleaseHandler=this.onReleaseHandler.bind(this),this._onPressHandler=this.onPressHandler.bind(this),this._onMoveHandler=this.onMoveHandler.bind(this)}return u(t,[{key:"onMove",value:function(t){this._onMoveCallback=t}},{key:"onPress",value:function(t){this._onPressCallback=t}},{key:"onRelease",value:function(t){this._onReleaseCallback=t}},{key:"init",value:function(){this._element.getNode().addEventListener("mousedown",this._onPressHandler,!1),this._element.getNode().addEventListener("touchstart",this._onPressHandler,!1),this._parent.getNode().addEventListener("mouseup",this._onReleaseHandler,!1),this._parent.getNode().addEventListener("touchend",this._onReleaseHandler,!1)}},{key:"onMoveHandler",value:function(t){this._onMoveCallback(this._getEventPoint(t))}},{key:"onPressHandler",value:function(t){this._parent.getNode().addEventListener("mousemove",this._onMoveHandler,!1),this._parent.getNode().addEventListener("touchmove",this._onMoveHandler,!1),this._onPressCallback(this._getEventPoint(t))}},{key:"onReleaseHandler",value:function(t){this._parent.getNode().removeEventListener("mousemove",this._onMoveHandler,!1),this._parent.getNode().removeEventListener("touchmove",this._onMoveHandler,!1),this._onReleaseCallback(this._getEventPoint(t))}},{key:"_convertCoordinates",value:function(t){var e=this._element.getNode().getBoundingClientRect(),n=t.x-e.left*(this._element.getNode().width/e.width),i=t.y-e.top*(this._element.getNode().height/e.height);return new w(n,i)}},{key:"_getEventPoint",value:function(t){var e=t.clientX||t.touches[0].clientX,n=t.clientY||t.touches[0].clientY;return this._convertCoordinates(new w(e,n))}}]),t}(),C=function(t){function e(){h(this,e);var t=f(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,"canvas"));return t._context=new m(t._node.getContext("2d")),t._image=new y,t._pattern=new p,t._frame=new b,t._cutout=new k(t._frame,t),t._generator=new x(t._frame,t),t._moveEventListener=new P(t),t._lastPoint=new w(0,0),t._basePoint=new w(0,0),t._onChangeCallback=function(){},t}return l(e,t),u(e,[{key:"render",value:function(t){var n=this;return c(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"render",this).call(this,t),this._drawBackground(),this._moveEventListener.init(),this._moveEventListener.onPress(function(t){n._lastPoint=t}),this._moveEventListener.onMove(function(t){n._drawImage(t)}),this}},{key:"setWidth",value:function(t){return c(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setWidth",this).call(this,t),this._frame.update(this.getNode()),this}},{key:"setHeight",value:function(t){return c(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setHeight",this).call(this,t),this._frame.update(this.getNode()),this}},{key:"setImage",value:function(t){return this._resetPoints(),this._image=t,this._image.scaleToFit(this._frame),this}},{key:"draw",value:function(){return this._drawImage(this._centerImagePoint()),this}},{key:"redraw",value:function(){return this._resetPoints(),this._image.scaleToFit(this._frame),this.draw(),this}},{key:"clear",value:function(){return this._context.clearRect(0,0,this.getNode().width,this.getNode().height),this}},{key:"toDataURL",value:function(){return this._generator.toDataURL()}},{key:"setZoom",value:function(t){var e=this._image.getSize();this._image.setZoom(t);var n=this._image.getSize(),i=this._lastPoint.x-(n.width-e.width)/2,r=this._lastPoint.y-(n.height-e.height)/2;return this._drawImage(new w(i,r)),this}},{key:"onChange",value:function(t){this._onChangeCallback=t}},{key:"getData",value:function(){return{origin:{x:(this._frame.getMinX()-this._basePoint.x)/this._image.getScale(),y:(this._frame.getMinY()-this._basePoint.y)/this._image.getScale()},size:{width:this._frame.getRect().size.width/this._image.getScale(),height:this._frame.getRect().size.width/this._image.getScale()}}}},{key:"setData",value:function(t){var e=this._frame.getRect().size.width/t.size.width,n=(e-this._image.getOriginScale())/this._image.getOriginScale();this.setZoom(n);var i=this._frame.getMinX()-t.origin.x*this._image.getScale(),r=this._frame.getMinY()-t.origin.y*this._image.getScale(),o=new w(i,r);return this._resetPoints(),this._drawImage(o),{origin:o,zoom:n}}},{key:"_resetPoints",value:function(){return this._lastPoint=new w(0,0),this._basePoint=new w(0,0),this}},{key:"_centerImagePoint",value:function(){var t=this._frame.getMidX()-this._image.getSize().width/2,e=this._frame.getMidY()-this._image.getSize().height/2;return new w(t,e)}},{key:"_validatePoint",value:function(t){var e=t;return this._image.getSize().widththis._frame.getMinX()?e.x=this._frame.getMinX():t.x+this._image.getSize().widththis._frame.getMinY()?e.y=this._frame.getMinY():t.y+this._image.getSize().height0&&void 0!==arguments[0]?arguments[0]:new w(0,0);this.clear(),this._drawBackground();var e=this._basePoint.x+(t.x-this._lastPoint.x),n=this._basePoint.y+(t.y-this._lastPoint.y);return this._basePoint=this._validatePoint(new w(e,n)),this._lastPoint=t,this._context.drawImage(this._image.getNode(),this._basePoint.x,this._basePoint.y,this._image.getSize().width,this._image.getSize().height),this._cutout.draw(),this._onChangeCallback(this),this}},{key:"_drawBackground",value:function(){var t=this._context.createPattern(this._pattern.getNode(),"repeat");return this._context.rect(0,0,this.getNode().width,this.getNode().height),this._context.fillStyle(t),this._context.fill(),this}}]),e}(d),S=function(t){function e(){h(this,e);var t=f(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,"input"));return t.setType("range"),t.addClass("slider"),t.setAttribute("min",0),t.setAttribute("max",100),t.setAttribute("value",0),t._onChangeCallback=function(){},t._onChangeHandler=t._onChange.bind(t),t}return l(e,t),u(e,[{key:"onChange",value:function(t){return this._onChangeCallback=t,this.getNode().addEventListener("change",this._onChangeHandler,!1),this.getNode().addEventListener("input",this._onChangeHandler,!1),this}},{key:"setValue",value:function(t){return this.getNode().value=t,this}},{key:"_onChange",value:function(){this._onChangeCallback(Number(this.getNode().value))}}]),e}(d),N=function(t){function e(t){h(this,e);var n=f(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,"svg"));return n.setAttribute("class","icon icon-"+t),n._use=new d("use"),n._use.getNode().setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#icon-"+t),n._use.render(n.getNode()),n}return l(e,t),e}(d);return function(){function r(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h(this,r),e(t),this._canvas=new C,this._image=new y,this._slider=new S,this.setWidth(t.width||o.width),this.setHeight(t.height||o.height),this._onInitCallback=i(t.onInit),this._onChangeCallback=i(t.onChange)}return u(r,[{key:"render",value:function(e){var n=this;this._node=t(e);var i=new d;i.addClass("cropper"),i.render(this._node),this._canvas.render(i.getNode());var r=new d;r.addClass("cropper-tools"),r.render(i.getNode());var o=new d;o.addClass("cropper-zoom"),o.render(r.getNode());var s=new N("frame-landscape"),a=new N("frame-landscape");return s.render(o.getNode()),this._slider.render(o.getNode()),this._slider.onChange(function(t){n._canvas.setZoom(t/100)}),a.render(o.getNode()),this._onInitCallback(this),this._canvas.onChange(function(){n._onChangeCallback(n)}),this}},{key:"setWidth",value:function(t){try{n(t)}catch(t){throw Error("Width property: "+t.message)}return this._canvas.setWidth(t),this._canvas.redraw(),this}},{key:"setHeight",value:function(t){try{n(t)}catch(t){throw Error("Height property: "+t.message)}return this._canvas.setHeight(t),this._canvas.redraw(),this}},{key:"loadImage",value:function(t){var e=this;if(!t)throw Error("Image url or path is not passed.");if("string"!=typeof t)throw Error("Invalid url or path.");return this._image.load(t).then(function(t){return e._canvas.setImage(t),e._canvas.draw(),e._slider.setValue(0),e})}},{key:"getCroppedImage",value:function(){return this._canvas.toDataURL()}},{key:"setZoom",value:function(t){try{n(t)}catch(t){throw Error("Zoom property: "+t.message)}return this._canvas.setZoom(t),this._slider.setValue(100*t),this}},{key:"reset",value:function(){return this.setZoom(0),this._canvas.redraw(),this}},{key:"getData",value:function(){return this._canvas.getData()}},{key:"setData",value:function(t){var e=this._canvas.setData(t),n=e.zoom;return this._slider.setValue(100*n),this}}]),r}()}(); diff --git a/includes/croppie.css b/includes/croppie.css new file mode 100644 index 0000000..0af2e2c --- /dev/null +++ b/includes/croppie.css @@ -0,0 +1,250 @@ +.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: '↻'; +} diff --git a/includes/croppie.min.js b/includes/croppie.min.js new file mode 100644 index 0000000..1223fd2 --- /dev/null +++ b/includes/croppie.min.js @@ -0,0 +1 @@ +!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"string"!=typeof exports.nodeName?module.exports=t():e.Croppie=t()}("undefined"!=typeof self?self:this,function(){"function"!=typeof Promise&&function(e){function n(e,t){return function(){e.apply(t,arguments)}}function r(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],u(e,n(i,this),n(o,this))}function a(n){var i=this;return null===this._state?void this._deferreds.push(n):void c(function(){var e=i._state?n.onFulfilled:n.onRejected;if(null!==e){var t;try{t=e(i._value)}catch(e){return void n.reject(e)}n.resolve(t)}else(i._state?n.resolve:n.reject)(i._value)})}function i(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==typeof e||"function"==typeof e)){var t=e.then;if("function"==typeof t)return void u(n(t,e),n(i,this),n(o,this))}this._state=!0,this._value=e,s.call(this)}catch(e){o.call(this,e)}}function o(e){this._state=!1,this._value=e,s.call(this)}function s(){for(var e=0,t=this._deferreds.length;en.top+t&&l.bottomn.left+e&&l.right=s.maxX&&(o.x=l.minX,n.x=s.maxX),n.x<=s.minX&&(o.x=l.maxX,n.x=s.minX),n.y>=s.maxY&&(o.y=l.minY,n.y=s.maxY),n.y<=s.minY&&(o.y=l.maxY,n.y=s.minY)}r(),I.call(t),F.call(t)}).call(i,{value:parseFloat(t.value),origin:new L(i.elements.preview),viewportRect:i.elements.viewport.getBoundingClientRect(),transform:E.parse(i.elements.preview)})}function n(e){var t,n;if("ctrl"===i.options.mouseWheelZoom&&!0!==e.ctrlKey)return 0;t=e.wheelDelta?e.wheelDelta/1200:e.deltaY?e.deltaY/1060:e.detail?e.detail/-60:0,n=i._currentZoom+t*i._currentZoom,e.preventDefault(),B.call(i,n),o.call(i)}x(e,"cr-slider-wrap"),x(t,"cr-slider"),t.type="range",t.step="0.0001",t.value="1",t.style.display=i.options.showZoomer?"":"none",t.setAttribute("aria-label","zoom"),i.element.appendChild(e),e.appendChild(t),i._currentZoom=1,i.elements.zoomer.addEventListener("input",o),i.elements.zoomer.addEventListener("change",o),i.options.mouseWheelZoom&&(i.elements.boundary.addEventListener("mousewheel",n),i.elements.boundary.addEventListener("DOMMouseScroll",n))}.call(a),a.options.enableResize&&function(){var l,u,c,h,p,e,t,d=this,m=document.createElement("div"),i=!1,f=50;x(m,"cr-resizer"),b(m,{width:this.options.viewport.width+"px",height:this.options.viewport.height+"px"}),this.options.resizeControls.height&&(x(e=document.createElement("div"),"cr-resizer-vertical"),m.appendChild(e));this.options.resizeControls.width&&(x(t=document.createElement("div"),"cr-resizer-horisontal"),m.appendChild(t));function n(e){if((void 0===e.button||0===e.button)&&(e.preventDefault(),!i)){var t=d.elements.overlay.getBoundingClientRect();if(i=!0,u=e.pageX,c=e.pageY,l=-1!==e.currentTarget.className.indexOf("vertical")?"v":"h",h=t.width,p=t.height,e.touches){var n=e.touches[0];u=n.pageX,c=n.pageY}window.addEventListener("mousemove",o),window.addEventListener("touchmove",o),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),document.body.style[w]="none"}}function o(e){var t=e.pageX,n=e.pageY;if(e.preventDefault(),e.touches){var i=e.touches[0];t=i.pageX,n=i.pageY}var o=t-u,r=n-c,a=d.options.viewport.height+r,s=d.options.viewport.width+o;"v"===l&&f<=a&&a<=p?(b(m,{height:a+"px"}),d.options.boundary.height+=r,b(d.elements.boundary,{height:d.options.boundary.height+"px"}),d.options.viewport.height+=r,b(d.elements.viewport,{height:d.options.viewport.height+"px"})):"h"===l&&f<=s&&s<=h&&(b(m,{width:s+"px"}),d.options.boundary.width+=o,b(d.elements.boundary,{width:d.options.boundary.width+"px"}),d.options.viewport.width+=o,b(d.elements.viewport,{width:d.options.viewport.width+"px"})),z.call(d),W.call(d),Z.call(d),F.call(d),c=n,u=t}function r(){i=!1,window.removeEventListener("mousemove",o),window.removeEventListener("touchmove",o),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r),document.body.style[w]=""}e&&(e.addEventListener("mousedown",n),e.addEventListener("touchstart",n));t&&(t.addEventListener("mousedown",n),t.addEventListener("touchstart",n));this.elements.boundary.appendChild(m)}.call(a)}function R(){return this.options.enableExif&&window.EXIF}function B(e){if(this.options.enableZoom){var t=this.elements.zoomer,n=A(e,4);t.value=Math.max(parseFloat(t.min),Math.min(parseFloat(t.max),n)).toString()}}function Z(e){var t=this,n=t._currentZoom,i=t.elements.preview.getBoundingClientRect(),o=t.elements.viewport.getBoundingClientRect(),r=E.parse(t.elements.preview.style[g]),a=new L(t.elements.preview),s=o.top-i.top+o.height/2,l=o.left-i.left+o.width/2,u={},c={};if(e){var h=a.x,p=a.y,d=r.x,m=r.y;u.y=h,u.x=p,r.y=d,r.x=m}else u.y=s/n,u.x=l/n,c.y=(u.y-a.y)*(1-n),c.x=(u.x-a.x)*(1-n),r.x-=c.x,r.y-=c.y;var f={};f[v]=u.x+"px "+u.y+"px",f[g]=r.toString(),b(t.elements.preview,f)}function z(){if(this.elements){var e=this.elements.boundary.getBoundingClientRect(),t=this.elements.preview.getBoundingClientRect();b(this.elements.overlay,{width:t.width+"px",height:t.height+"px",top:t.top-e.top+"px",left:t.left-e.left+"px"})}}L.prototype.toString=function(){return this.x+"px "+this.y+"px"};var a,s,h,M,I=(a=z,s=500,function(){var e=this,t=arguments,n=h&&!M;clearTimeout(M),M=setTimeout(function(){M=null,h||a.apply(e,t)},s),n&&a.apply(e,t)});function F(){var e,t=this,n=t.get();X.call(t)&&(t.options.update.call(t,n),t.$&&"undefined"==typeof Prototype?t.$(t.element).trigger("update.croppie",n):(window.CustomEvent?e=new CustomEvent("update",{detail:n}):(e=document.createEvent("CustomEvent")).initCustomEvent("update",!0,!0,n),t.element.dispatchEvent(e)))}function X(){return 0l.max)?B.call(r,uthis._originalImageWidth&&(g=(d=this._originalImageWidth-h)/o*u),i<0&&(p=0,v=Math.abs(i)/r*c),m+p>this._originalImageHeight&&(w=(m=this._originalImageHeight-p)/r*c),l.drawImage(this.elements.preview,h,p,d,m,f,v,g,w),a&&(l.fillStyle="#fff",l.globalCompositeOperation="destination-in",l.beginPath(),l.arc(s.width/2,s.height/2,s.width/2,0,2*Math.PI,!0),l.closePath(),l.fill()),s}function k(c,h){var e,i,o,r,p=this,d=[],t=null,n=R.call(p);if("string"==typeof c)e=c,c={};else if(Array.isArray(c))d=c.slice();else{if(void 0===c&&p.data.url)return Y.call(p),F.call(p),null;e=c.url,d=c.points||[],t=void 0===c.zoom?null:c.zoom}return p.data.bound=!1,p.data.url=e||p.data.url,p.data.boundZoom=t,(i=e,o=n,r=new Image,r.style.opacity="0",new Promise(function(e,t){function n(){r.style.opacity="1",setTimeout(function(){e(r)},1)}r.removeAttribute("crossOrigin"),i.match(/^https?:\/\/|^\/\//)&&r.setAttribute("crossOrigin","anonymous"),r.onload=function(){o?EXIF.getData(r,function(){n()}):n()},r.onerror=function(e){r.style.opacity=1,setTimeout(function(){t(e)},1)},r.src=i})).then(function(e){if(function(t){this.elements.img.parentNode&&(Array.prototype.forEach.call(this.elements.img.classList,function(e){t.classList.add(e)}),this.elements.img.parentNode.replaceChild(t,this.elements.img),this.elements.preview=t),this.elements.img=t}.call(p,e),d.length)p.options.relative&&(d=[d[0]*e.naturalWidth/100,d[1]*e.naturalHeight/100,d[2]*e.naturalWidth/100,d[3]*e.naturalHeight/100]);else{var t,n,i=m(e),o=p.elements.viewport.getBoundingClientRect(),r=o.width/o.height;r { + console.log("Loading image: " + load_image(result)); + + el("page-image").style.display = "none"; + el("page-room" ).style.display = "block"; + + loadPreview(); + }); } buttonImageProceed.addEventListener("click", handleImage);