simpla-img-editor.html

<link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../simpla-styles/simpla-styles.html"> <link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html"> <link rel="import" href="../iron-icon/iron-icon.html" async> <link rel="import" href="../paper-slider/paper-slider.html" async> <iron-iconset-svg name="simpla-img"> <svg> <defs> <g id="camera-alt"><circle cx="12" cy="12" r="3.2"/><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></g> <g id="title"><path d="M5 4v3h5.5v12h3V7H19V4z"/></g> </defs> </svg> </iron-iconset-svg> <dom-module id="simpla-img-editor"> <template> <style>*,::after,::before,:host{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;position:absolute;outline:0;font-size:var(--simpla-scale-0);z-index:var(--simpla-on-top);-webkit-transition:-webkit-box-shadow 130ms var(--simpla-easing-standard),-webkit-transform .2s var(--simpla-easing-standard);transition:-webkit-box-shadow 130ms var(--simpla-easing-standard),-webkit-transform .2s var(--simpla-easing-standard);transition:box-shadow 130ms var(--simpla-easing-standard),transform .2s var(--simpla-easing-standard);transition:box-shadow 130ms var(--simpla-easing-standard),transform .2s var(--simpla-easing-standard),-webkit-box-shadow 130ms var(--simpla-easing-standard),-webkit-transform .2s var(--simpla-easing-standard)}:host([hidden])){display:none}:host([visible]){-webkit-box-shadow:var(--simpla-elevation-1);box-shadow:var(--simpla-elevation-1)}.editor{position:relative;width:100%;height:100%;overflow:hidden;background:var(--simpla-light-white)}.cropper-view-box{outline:0}.cropper-face{opacity:0}.cropper-line,.cropper-point{display:none}.tools,.zoom{position:absolute;background:var(--simpla-bright-white);z-index:1;height:30px;-webkit-transition:-webkit-transform 130ms var(--simpla-easing-decelerate);transition:-webkit-transform 130ms var(--simpla-easing-decelerate);transition:transform 130ms var(--simpla-easing-decelerate);transition:transform 130ms var(--simpla-easing-decelerate),-webkit-transform 130ms var(--simpla-easing-decelerate)}.tools{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;top:0;right:7px;max-width:90%;border-bottom-left-radius:var(--simpla-border-radius);border-bottom-right-radius:var(--simpla-border-radius);color:var(--simpla-grey-700)}.zoom{bottom:0;width:85%;left:0;right:0;margin:auto;border-top-left-radius:var(--simpla-border-radius);border-top-right-radius:var(--simpla-border-radius)}:host(:not([visible])) .tools,:host(:not([visible])) .zoom{-webkit-transition-duration:60ms;transition-duration:60ms;-webkit-transition-timing-function:var(--simpla-easing-accelerate);transition-timing-function:var(--simpla-easing-accelerate)}:host(:not([visible])) .zoom{-webkit-transform:translateY(100%);transform:translateY(100%)}:host(:not([visible])) .tools{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.zoom__slider{width:100%;height:100%;cursor:pointer;--paper-slider-active-color:var(--simpla-primary-color);--paper-slider-container-color:var(--simpla-grey-500);--paper-slider-knob-color:var(--simpla-primary-color);--paper-slider-knob-start-color:transparent;--paper-slider-knob-start-border-color:var(--simpla-grey-700)}.zoom__disabled{display:block;text-align:center;font-size:var(--simpla-scale-000);color:var(--simpla-grey-700);padding:.5em 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tools__tool{display:inline-block;padding:5px 10px 7px;cursor:pointer}.tools__tool:hover,.tools__tool[data-active]{color:var(--simpla-primary-color)}.tools__tool__icon{--iron-icon-width:var(--simpla-scale-0);--iron-icon-height:var(--simpla-scale-0)}.title-input{font-family:var(--simpla-font-family);font-size:var(--simpla-scale-000);background:0 0;border:none;width:0;padding:0;outline:0;-webkit-transition:width 150ms var(--simpla-easing-standard),padding-left 150ms var(--simpla-easing-standard);transition:width 150ms var(--simpla-easing-standard),padding-left 150ms var(--simpla-easing-standard)}.title-input::-webkit-input-placeholder{color:var(--simpla-grey-700)}.title-input:-ms-input-placeholder{color:var(--simpla-grey-700)}.title-input::placeholder{color:var(--simpla-grey-700)}.title-input[data-expanded]{width:18em;padding-left:1em}.editor-img{vertical-align:bottom;-webkit-transform-origin:center;transform-origin:center;width:inherit;height:inherit;cursor:move}.editor-img[locked]{cursor:default}[hidden]{display:none!important}iron-icon{pointer-events:none}</style> <div class="editor"> <div class="tools" on-transitionend="_hideIfInactive"> <input type="text" id="title-input" class="title-input" placeholder="Enter a title" value="{{alt::input}}" on-keydown="_closeTitleOnHotkeys" data-expanded$="[[_titleOpen]]"> <a class="tools__tool" on-tap="_toggleTitle" data-active$="[[_titleOpen]]"> <iron-icon class="tools__tool__icon" icon="simpla-img:title"> </iron-icon> </a> <a class="tools__tool" on-tap="openFilePicker"> <iron-icon class="tools__tool__icon" icon="simpla-img:camera-alt"> </iron-icon> <input type="file" id="file-input" on-change="_uploadImg" hidden> </a> </div> <img id="source" hidden="[[!src]]" class="editor-img" crossorigin="anonymous" src$="[[src]]" width$="[[width]]" height$="[[height]]" on-track="_dragImage" on-load="_imageLoaded" draggable="false" locked$="[[lockTransform]]"> <div class="zoom" on-transitionend="_hideIfInactive"> <paper-slider id="slider" class="zoom__slider" immediate-value="{{zoom}}" value="[[zoom]]" step="0.01" min="1" max="2" hidden$="[[lockTransform]]" no-ink=""> </paper-slider> <span class="zoom__disabled" hidden$="[[!lockTransform]]"> GIFs cannot be zoomed </span> </div> </div> </template> <script>!function(){"use strict";function t(t,e){return t<e.min?e.min:t>e.max?e.max:t}function e(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.pow(10,e);return Math.round(t*i)/i}function i(t,e,i){var n=t.width,o=t.height,a=void 0;return((a=Math.min(1,Math.min(e.width/n,e.height/o)))*n<i.width||a*o<i.height)&&(a=Math.max(i.width/n,i.height/o)),{width:Math.round(n*a),height:Math.round(o*a)}}function n(t,e,i){var n=t.top,o=t.left,a=o+t.width,r=n+t.height,s=0,h=0,c=void 0;return c={left:e.scrollX+i,top:e.scrollY+i,right:e.scrollX+e.innerWidth-i,bottom:e.scrollY+e.innerHeight-i},o<c.left?s=c.left-o:a>c.right&&(s=c.right-a),n<c.top?h=c.top-n:r>c.bottom&&(h=c.bottom-r),{translateY:h,translateX:s}}function o(t,e){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:b,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:r,s=void 0,h=void 0,c=void 0,l=void 0,u=void 0,d=i(t,s={width:e.innerWidth-2*o,height:e.innerHeight-2*o},a);h=d.width,c=d.height;var f=n({top:t.top,left:t.left,width:h,height:c},e,o);return l=f.translateX,u=f.translateY,{width:h,height:c,translateX:l,translateY:u}}var a="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=",r={width:180,height:130},s=1,h=0,c=0,l=[1,0,0,1,0,0],u=document.createElement("canvas"),d=u.getContext("2d"),f={properties:{output:{type:String,notify:!0},position:{type:Object,value:function(){return{x:0,y:0}},observer:"_positionChanged",notify:!0},debounceDuration:{type:Number,value:100},_transform:{type:String,value:""}},observers:["_updateStyles(_transform)","_debouncedRender(_transform, src)","_updatePosition(_transform)","_updateScale(zoom)"],attached:function(){this._localDOMReady&&this.setScrollDirection("all",this.$.source)},get _localDOMReady(){return!!this.$},_paint:function(){var t=this;this._tick&&(cancelAnimationFrame(this._tick),this._tick=null),this._tick=requestAnimationFrame(function(){var e=t.scale,i=t.translateX,n=t.translateY;t._transform="scale("+e+") translateX("+i+"px) translateY("+n+"px)"})},_updateScale:function(t){this.scale=t},get scale(){return this._scale||s},set scale(t){var i=this.minScale;this._scale=t<i?e(parseFloat(i),2):e(parseFloat(t),2),this.translateX+=0,this.translateY+=0,this._paint()},get translateX(){return this._translateX||h},set translateX(i){this._translateX=e(t(i,this._bounds.x)),this._paint()},get translateY(){return this._translateY||c},set translateY(i){this._translateY=e(t(i,this._bounds.y)),this._paint()},get minScale(){if(!this._localDOMReady)return 1;var t=this.height/this.$.source.height,e=this.width/this.$.source.width;return isNaN(t)||isNaN(e)?1:t<e?t:e},get _bounds(){var t=function(t){return{min:-t/2,max:t/2}},e=void 0,i=void 0;return this._imgWidth&&this._width&&this._imgHeight&&this._height?(e=this._imgWidth-this._width/this.scale,i=this._imgHeight-this._height/this.scale,{x:t(e),y:t(i)}):{x:{min:Number.NEGATIVE_INFINITY,max:Number.POSITIVE_INFINITY},y:{min:Number.NEGATIVE_INFINITY,max:Number.POSITIVE_INFINITY}}},_resetDimensions:function(){this._localDOMReady&&(this._width=this.offsetWidth,this._height=this.offsetHeight,this._imgWidth=this.$.source.offsetWidth,this._imgHeight=this.$.source.offsetHeight)},_dragImage:function(t){var e=t.detail,i=e.dx,n=e.dy,o=e.ddx,a=e.ddy,r=e.state;this.lockTransform||("start"===r&&this._resetDimensions(),this.translateX+=("start"===r?i:o)/this.scale,this.translateY+=("start"===r?n:a)/this.scale,"end"===r&&this.fire("pan-finished"))},_imageLoaded:function(){this._resetDimensions()},_positionChanged:function(t){if(t){var e=t.x,i=t.y;this.translateX=e,this.translateY=i}},_updatePosition:function(){this.position={x:this.translateX,y:this.translateY}},_updateStyles:function(t){this._localDOMReady&&(this.$.source.style.transform=t)},_debouncedRender:function(){var t=this._localDOMReady&&this.$.source.complete&&0!==this.$.source.naturalHeight;!this.lockTransform&&t&&this.debounce("render",this._render,this.debounceDuration)},_render:function(){if(this._localDOMReady){var t=this.width,e=this.height,i=this.scale,n=this.translateX,o=this.translateY,r=this.$.source,s=r.naturalWidth,h=r.naturalHeight,c=n/(t/s),f=o/(e/h),g=function(t){return t/i*(1-i)/2},v=void 0;u.width=s,u.height=h,d.setTransform.apply(d,l),d.scale(i,i),d.translate(c,f),d.drawImage(this.$.source,g(s),g(h)),v=u.toDataURL(),this.output=this.src===a?a:v}}},g={observers:["_stopEditingOnResize(active)"],listeners:{keyup:"_keyupHandler",blur:"_blurHandler"},_stopEditingOnResize:function(t){var e=this,i=function t(){window.removeEventListener("resize",t),e.active=!1};t&&window.addEventListener("resize",i)},_keyupHandler:function(t){var e=13===t.keyCode&&t.metaKey,i=27===t.keyCode;(e||i)&&(this.active=!1)},_blurHandler:function(t){var e=this,i=void 0;Polymer.Settings.useShadow?this.active=!1:(i=function(t){var n=t.target,o=t.relatedTarget;o&&function(t){return e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_CONTAINED_BY}(o)?o.addEventListener("blur",i):e!==o&&(e.active=!1),n.removeEventListener("blur",i)})(t)}},v=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},m=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),_=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},p=function(t){return{get:function(e){return t[e]},set:function(e,i){t[e]=i}}}({}),y={properties:{image:{type:Object,value:null}},observers:["_updateImageFromActive(active)","_updateActiveFromImage(image)","_maybeAskForFilePicker(image)","_updateImageData(output, alt)","_debouncedUpdateCache(src, alt, position, lockTransform, zoom)","_loadDataFromImage(active, image)","_resizeFromImage(image)"],listeners:{"opening-filepicker":"_restoreImageFocus","image-uploaded":"_updateImageSrc"},_resizeFromImage:function(t){t&&_(this,this._getImageBounds(t))},_loadDataFromImage:function(t,e){if(t&&e){var i=p.get(this._getImageKey(e))||{},n=i.src,o=i.alt,a=void 0===o?"":o,r=i.position,s=void 0===r?{x:0,y:0}:r,h=i.zoom,c=void 0===h?1:h,l=i.lockTransform,u=void 0!==l&&l,d=this._getImageData(e),f={alt:a,position:s,zoom:c};n&&(f.src=n),this._setLockTransform(u),_(this,d,f)}},_debouncedUpdateCache:function(t,e,i,n,o){var a=this.image;if(a){var r=this._getImageKey(a);this.debounce("set-cache-"+r,function(){p.set(r,{src:t,alt:e,position:i,lockTransform:n,zoom:o})})}},_updateImageFromActive:function(t){!t&&this.image&&this._closeImage(this.image)},_updateActiveFromImage:function(t){this.active=!!t},_updateImageData:function(t,e){this.image&&this._setImageData(this.image,{output:t,alt:e})},_restoreImageFocus:function(t){var e=this,i=this.image,n=void 0;n=function(){e.__restoringFocus=!0,e._editImage(i),e.__restoringFocus=!1,e.removeEventListener("blur",n)},this.addEventListener("blur",n)},_updateImageSrc:function(){var t=this,e=this.image,i=void 0;i=function(n){t._resizeFromImage(e),e.removeEventListener("load",i)},e.addEventListener("load",i),this._updateImageData(this.src,this.alt)},_getImageBounds:function(t){var e=t.getBoundingClientRect(),i=e.top,n=e.left,o=e.width,a=e.height,r=window,s=r.scrollX;return i+=r.scrollY,n+=s,{top:i,left:n,width:o,height:a}},_maybeAskForFilePicker:function(t){t&&t.src===a&&!this.__restoringFocus&&this.openFilePicker()},_getImageData:function(t){return{src:t.src,alt:t.alt}},_setImageData:function(t,e){var i=e.output,n=e.alt;_(t,{src:i,alt:n})},_closeImage:function(t){t.active=!1},_getImageKey:function(t){return t.path},_editImage:function(t){t.active=!0}},b=8,I={observers:["_fitIntoVisibleWindow(top, left, width, height, visible)"],_fitIntoVisibleWindow:function(t,e,i,n,a){var r=this;a||(this.style.transform=""),this.debounce("fit-to-window",function(){var a={top:t,left:e,width:i,height:n},s=void 0,h=void 0,c=o(a,window);i=c.width,n=c.height,s=c.translateX,h=c.translateY,r.width=i,r.height=n,r.style.transform="translate("+s+"px, "+h+"px)",!(i===a.width&&n===a.height&&!s&&!h)&&r._closeOnScroll()})},_closeOnScroll:function(){var t=this,e=function e(){window.removeEventListener("scroll",e),t.active=!1};this.async(function(){return window.addEventListener("scroll",e)},100)}},w=[13,27],A=function(){function t(){v(this,t)}return m(t,[{key:"beforeRegister",value:function(){this.is="simpla-img-editor",this.properties={active:{type:Boolean,value:!1,notify:!0},visible:{type:Boolean,reflectToAttribute:!0,readonly:!0,value:!1},hidden:{type:Boolean,reflectToAttribute:!0,readonly:!0,value:!0},src:{type:String,notify:!0},alt:{type:String,notify:!0,value:""},zoom:{type:Number,notify:!0,value:1},position:{type:Object,value:function(){return{x:0,y:0}}},width:{type:Number,observer:"_observeWidth"},height:{type:Number,observer:"_observeHeight"},top:{type:Number,observer:"_observeTop",value:0},left:{type:Number,observer:"_observeLeft",value:0},output:{type:String,notify:!0},lockTransform:{type:Boolean,value:!1,readOnly:!0,reflectToAttribute:!0},_titleOpen:{type:Boolean,value:!1},tabindex:{type:Number,reflectToAttribute:!0,value:0}},this.observers=["_toggleVisibility(active)","_focusOnActive(active)"]}},{key:"openFilePicker",value:function(t){t&&t.stopPropagation(),this.fire("opening-filepicker"),this.$["file-input"].click()}},{key:"_observeWidth",value:function(t){this.style.width=t+"px"}},{key:"_observeHeight",value:function(t){this.style.height=t+"px"}},{key:"_observeLeft",value:function(t){this.style.left=t+"px"}},{key:"_observeTop",value:function(t){this.style.top=t+"px"}},{key:"_toggleVisibility",value:function(t){var e=this;t?(this.hidden=!1,Polymer.RenderStatus.afterNextRender(this,function(){return e.visible=!0})):this.visible=!1}},{key:"_hideIfInactive",value:function(t){this.active||(this.hidden=!0,this.visible=!1)}},{key:"_uploadImg",value:function(t){var e=this,i=t.target,n=i.files,o=new FileReader,a=function t(a){"image/gif"===n[0].type?(e.zoom=0,e.position={x:0,y:0},e._setLockTransform(!0)):e._setLockTransform(!1),e.src=a.target.result,e.fire("image-uploaded",{value:a.target.result}),o.removeEventListener("load",t),i.value=null};this.focus(),n&&n[0]&&(o.addEventListener("load",a),o.readAsDataURL(n[0]))}},{key:"focus",value:function(){var t=window,e=t.scrollY,i=t.scrollX;HTMLElement.prototype.focus.call(this),window.scrollTo(i,e)}},{key:"_toggleTitle",value:function(){this._titleOpen=!this._titleOpen}},{key:"_focusOnActive",value:function(t){var e=this;t&&this.async(function(){return e.focus()},0)}},{key:"_closeTitleOnHotkeys",value:function(t){-1!==w.indexOf(t.keyCode)&&(this._titleOpen=!1)}},{key:"behaviors",get:function(){return[f,g,y,I]}}]),t}();Polymer(A)}()</script> </dom-module>