simpla-img.html

<link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../simpla-element-behavior/simpla-element-behavior.html"> <dom-module id="simpla-img"> <script>!function(){"use strict";var t="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=",e={width:180,height:130},i=function(t){return t&&0===t.indexOf("data:image")},r=function(t){return!/^https:\/\/storage.googleapis.*simpla/.test(t)},n=function(t){var e=new Image,i=document.createElement("canvas"),r=i.getContext("2d");return e.setAttribute("crossOrigin","anonymous"),new Promise(function(n,a){e.onload=function(){i.width=e.width,i.height=e.height,r.drawImage(e,0,0),n(i.toDataURL("image/png"))},e.onerror=a,e.src=t})},a={observers:["_ensureIsBase64(src)"],created:function(){this.__staticSrc=this.getAttribute("src")},_ensureIsBase64:function(t){var e=this;this.__staticSrc&&this.__staticSrc===t&&!i(t)&&r(t)&&n(t).then(function(i){t===e.src&&(e.src=i)})}},o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(t[r]=i[r])}return t},s=function(){function t(t,e){var i=[],r=!0,n=!1,a=void 0;try{for(var o,s=t[Symbol.iterator]();!(r=(o=s.next()).done)&&(i.push(o.value),!e||i.length!==e);r=!0);}catch(t){n=!0,a=t}finally{try{!r&&s.return&&s.return()}finally{if(n)throw a}}return i}return function(e,i){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),l={type:"Image",dataProperties:["src","alt"],setCallback:"_updateSimpla"},c={editable:{cursor:"pointer",outline:"none"},active:{visibility:"hidden",transition:"visibility",transitionDelay:"50ms"},placeholder:{minHeight:e.height+"px",minWidth:e.width+"px",backgroundSize:"cover",backgroundPosition:"center center",opacity:"0.75"}},u={is:"simpla-img",extends:"img",properties:{src:{type:String,reflectToAttribute:!0,value:function(){return t},notify:!0},alt:{type:String,reflectToAttribute:!0,value:"",notify:!0},placeholder:{type:String,value:""},editable:{type:Boolean,reflectToAttribute:!0,notify:!0,value:!1},active:{type:Boolean,notify:!0,value:!1}},observers:["_importEditor(editable)","_updateEditorImage(active)","_updateEditableUi(editable)","_updateEditingUi(active)","_blurOnInactive(active)","_showPlaceholder(placeholder, editable, src)"],listeners:{tap:"_goActiveIfEditable",focusout:"_maintainFocusWhenActive",blur:"_maintainFocusWhenActive"},behaviors:[SimplaBehaviors.Element(l),a],_updateEditableUi:function(t){this._toggleStyles(c.editable,t),t?this.setAttribute("tabindex",0):this.removeAttribute("tabindex")},_updateEditingUi:function(t){this._toggleStyles(c.active,t)},_showPlaceholder:function(e,i,r){var n=i&&r===t,a=void 0;this.placeholder=this.placeholder||"url("+this.resolveUrl("placeholder.svg")+")",a=o({background:this.placeholder},c.placeholder),this._toggleStyles(a,n)},_toggleStyles:function(t,e){var i=this,r=this.__styleCache=this.__styleCache||{};(function(t){return Object.keys(t).map(function(e){return[e,t[e]]})})(t).forEach(function(t){var n=s(t,2),a=n[0],o=n[1],l=r[a],c=i.style[a];e?r[a]=c:(r[a]="",o=l||""),i.style[a]=o})},_updateSimpla:function(){return this.src===t?null:{src:this.src,alt:this.alt}},_goActiveIfEditable:function(){this.editable&&(this.active=!0)},_maintainFocusWhenActive:function(t){var e=document.querySelector("simpla-img-editor");t.relatedTarget===e&&t.stopImmediatePropagation()},_blurOnInactive:function(t){t||(this.fire("focusout"),this.fire("blur",{},{bubbles:!1}))},_updateEditorImage:function(t){var e=document.querySelector("simpla-img-editor");e&&(e.image=t?this:null)},_importEditor:function(t){var e=!!document.querySelector("simpla-img-editor"),i=void 0;t&&!e&&(this.importHref(this.resolveUrl("simpla-img-editor.html")),i=document.createElement("simpla-img-editor"),document.body.appendChild(i))}};Polymer(u)}()</script> </dom-module>