simpla-link.html

<link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../simpla-element-behavior/simpla-element-behavior.html"> <link rel="import" href="../simpla-styles/colors.html" async> <link rel="import" href="../simpla-styles/ui.html" async> <dom-module id="simpla-link"> <template> <style>*,::after,::before,:host{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:inline-block;overflow:visible;outline:0}.wrapper{display:inherit;position:relative}.input{position:absolute;top:-.5em;left:50%;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%);width:100%;min-width:11em;max-width:16em;padding:.75em 1em;font-size:var(--simpla-scale-000);font-family:var(--simpla-font-family);color:#fff;background:var(--simpla-grey-700);border:0;outline:0;border-radius:var(--simpla-border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}.input::-webkit-input-placeholder{color:var(--simpla-med-white)}.input:-ms-input-placeholder{color:var(--simpla-med-white)}.input::-ms-input-placeholder{color:var(--simpla-med-white)}.input::placeholder{color:var(--simpla-med-white)}.link{color:inherit;outline:inherit;text-decoration:inherit}.link[data-editable]{cursor:inherit}</style> <div class="wrapper"> <input type="text" class="input" value="{{href::input}}" placeholder="[[placeholder]]" on-keydown="_closeOnHotkeys" hidden$="[[!active]]"> <a href="[[href]]" target="{{target}}" class="link" data-editable$="[[editable]]" on-tap="_disableLinkWhileEditable"> <slot></slot> </a> </div> </template> <script>!function(){"use strict";Polymer({is:"simpla-link",properties:{href:{type:String,value:"",reflectToAttribute:!0,notify:!0},target:{type:String,reflectToAttribute:!0},placeholder:{type:String,value:"Enter a URL..."},editable:{type:Boolean,value:!1,notify:!0},active:{type:Boolean,value:!1,notify:!0},tabindex:{type:Number,reflectToAttribute:!0,value:0}},listeners:{tap:"_reflectTap",focusin:"_open",focusout:"_close"},behaviors:[SimplaBehaviors.Element({type:"Link",dataProperties:["href"]})],_reflectTap:function(){this.$$("a").click()},_open:function(){this.editable&&(this.active=!0)},_close:function(e){var t=this;setTimeout(function(){t.contains(document.activeElement)||(t.active=!1)},1)},_closeOnHotkeys:function(e){var t=13===e.keyCode,i=27===e.keyCode;this.active&&(t||i)&&(this.active=!1)},_disableLinkWhileEditable:function(e){this.editable&&(e.preventDefault(),e.stopPropagation())}})}()</script> </dom-module>