home-assistant.io/source/demo/panels/ha-panel-dev-event.html
Paulus Schoutsen 51c61e33b4 update demo
2016-08-02 23:16:50 -07:00

1 line
7.5 KiB
HTML

<html><head><meta charset="UTF-8"></head><body><div hidden="" by-vulcanize=""><dom-module id="iron-autogrow-textarea" assetpath="../../bower_components/iron-autogrow-textarea/"><style>:host{display:inline-block;position:relative;width:400px;border:1px solid;padding:2px;-moz-appearance:textarea;-webkit-appearance:textarea;overflow:hidden}.mirror-text{visibility:hidden;word-wrap:break-word}.fit{@apply(--layout-fit)}textarea{position:relative;outline:0;border:none;resize:none;background:inherit;color:inherit;width:100%;height:100%;font-size:inherit;font-family:inherit;line-height:inherit;text-align:inherit;@apply(--iron-autogrow-textarea)}::content textarea:invalid{box-shadow:none}textarea::-webkit-input-placeholder{@apply(--iron-autogrow-textarea-placeholder)}textarea:-moz-placeholder{@apply(--iron-autogrow-textarea-placeholder)}textarea::-moz-placeholder{@apply(--iron-autogrow-textarea-placeholder)}textarea:-ms-input-placeholder{@apply(--iron-autogrow-textarea-placeholder)}</style><template><div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div><div class="textarea-container fit"><textarea id="textarea" name$="[[name]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" disabled$="[[disabled]]" rows$="[[rows]]" maxlength$="[[maxlength]]"></textarea></div></template></dom-module><script>Polymer({is:"iron-autogrow-textarea",behaviors:[Polymer.IronFormElementBehavior,Polymer.IronValidatableBehavior,Polymer.IronControlState],properties:{bindValue:{observer:"_bindValueChanged",type:String},rows:{type:Number,value:1,observer:"_updateCached"},maxRows:{type:Number,value:0,observer:"_updateCached"},autocomplete:{type:String,value:"off"},autofocus:{type:Boolean,value:!1},inputmode:{type:String},placeholder:{type:String},readonly:{type:String},required:{type:Boolean},maxlength:{type:Number}},listeners:{input:"_onInput"},observers:["_onValueChanged(value)"],get textarea(){return this.$.textarea},get selectionStart(){return this.$.textarea.selectionStart},get selectionEnd(){return this.$.textarea.selectionEnd},set selectionStart(e){this.$.textarea.selectionStart=e},set selectionEnd(e){this.$.textarea.selectionEnd=e},validate:function(){if(!this.required&&""==this.value)return this.invalid=!1,!0;var e;return this.hasValidator()?e=Polymer.IronValidatableBehavior.validate.call(this,this.value):(e=this.$.textarea.validity.valid,this.invalid=!e),this.fire("iron-input-validate"),e},_bindValueChanged:function(){var e=this.textarea;e&&(e.value!==this.bindValue&&(e.value=this.bindValue||0===this.bindValue?this.bindValue:""),this.value=this.bindValue,this.$.mirror.innerHTML=this._valueForMirror(),this.fire("bind-value-changed",{value:this.bindValue}))},_onInput:function(e){this.bindValue=e.path?e.path[0].value:e.target.value},_constrain:function(e){var t;for(e=e||[""],t=this.maxRows>0&&e.length>this.maxRows?e.slice(0,this.maxRows):e.slice(0);this.rows>0&&t.length<this.rows;)t.push("");return t.join("<br/>")+"&#160;"},_valueForMirror:function(){var e=this.textarea;if(e)return this.tokens=e&&e.value?e.value.replace(/&/gm,"&amp;").replace(/"/gm,"&quot;").replace(/'/gm,"&#39;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;").split("\n"):[""],this._constrain(this.tokens)},_updateCached:function(){this.$.mirror.innerHTML=this._constrain(this.tokens)},_onValueChanged:function(){this.bindValue=this.value}})</script><dom-module id="paper-textarea" assetpath="../../bower_components/paper-input/"><template><style>:host{display:block}:host([hidden]){display:none!important}</style><paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"><label hidden$="[[!label]]" aria-hidden="true">[[label]]</label><iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" disabled$="[[disabled]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]" rows$="[[rows]]" max-rows$="[[maxRows]]" on-change="_onChange"></iron-autogrow-textarea><template is="dom-if" if="[[errorMessage]]"><paper-input-error>[[errorMessage]]</paper-input-error></template><template is="dom-if" if="[[charCounter]]"><paper-input-char-counter></paper-input-char-counter></template></paper-input-container></template></dom-module><script>Polymer({is:"paper-textarea",behaviors:[Polymer.PaperInputBehavior,Polymer.IronFormElementBehavior],properties:{_ariaLabelledBy:{observer:"_ariaLabelledByChanged",type:String},_ariaDescribedBy:{observer:"_ariaDescribedByChanged",type:String},rows:{type:Number,value:1},maxRows:{type:Number,value:0}},_ariaLabelledByChanged:function(e){this.$.input.textarea.setAttribute("aria-labelledby",e)},_ariaDescribedByChanged:function(e){this.$.input.textarea.setAttribute("aria-describedby",e)},get _focusableElement(){return this.$.input.textarea}})</script><dom-module id="events-list" assetpath="/"><template><style>ul{margin:0;padding:0}li{list-style:none;line-height:2em}a{color:var(--dark-primary-color)}</style><ul><template is="dom-repeat" items="[[events]]" as="event"><li><a href="#" on-click="eventSelected">{{event.event}}</a> <span>(</span><span>{{event.listenerCount}}</span><span> listeners)</span></li></template></ul></template></dom-module><script>Polymer({is:"events-list",behaviors:[window.hassBehavior],properties:{hass:{type:Object},events:{type:Array,bindNuclear:function(e){return[e.eventGetters.entityMap,function(e){return e.valueSeq().sortBy(function(e){return e.event}).toArray()}]}}},eventSelected:function(e){e.preventDefault(),this.fire("event-selected",{eventType:e.model.event.event})}})</script></div><dom-module id="ha-panel-dev-event"><template><style is="custom-style" include="ha-style iron-flex iron-positioning"></style><style>:host{background-color:#fff;-ms-user-select:initial;-webkit-user-select:initial;-moz-user-select:initial}.content{@apply(--paper-font-body1);padding:24px}.ha-form{margin-right:16px}.header{@apply(--paper-font-title)}</style><app-header-layout has-scrolling-region=""><app-header fixed=""><app-toolbar><ha-menu-button narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button><div main-title="">Events</div></app-toolbar></app-header><div class$="[[computeFormClasses(narrow)]]"><div class="flex"><p>Fire an event on the event bus.</p><div class="ha-form"><paper-input label="Event Type" autofocus="" required="" value="{{eventType}}"></paper-input><paper-textarea label="Event Data (JSON, optional)" value="{{eventData}}"></paper-textarea><paper-button on-tap="fireEvent" raised="">Fire Event</paper-button></div></div><div><div class="header">Available Events</div><events-list on-event-selected="eventSelected" hass="[[hass]]"></events-list></div></div></app-header-layout></template></dom-module><script>Polymer({is:"ha-panel-dev-event",properties:{hass:{type:Object},narrow:{type:Boolean,value:!1},showMenu:{type:Boolean,value:!1},eventType:{type:String,value:""},eventData:{type:String,value:""}},eventSelected:function(e){this.eventType=e.detail.eventType},fireEvent:function(){var e;try{e=this.eventData?JSON.parse(this.eventData):{}}catch(e){return void alert("Error parsing JSON: "+e)}this.hass.eventActions.fireEvent(this.eventType,e)},computeFormClasses:function(e){return e?"content fit":"content fit layout horizontal"}})</script></body></html>