Mercurial > code > home > repos > homeauto

comparison service/arduinoNode/static/output-widgets.html @ 998:ecb12305d5ca

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rewrite to polymer 1 Ignore-this: 9e66ae7e1227732e68393326b2483aa2 darcs-hash:20150830081957-312f9-be4fac6d250655133b68c0fdd6e447b5195ef631
author drewp <drewp@bigasterisk.com>
date Sun, 30 Aug 2015 01:19:57 -0700
parents ed1f54d81fc9
children f8ffb9d8d982
comparison
equal deleted inserted replaced
997:b24885725f59 998:ecb12305d5ca
1 <link rel="import" href="/lib/polymer/0.5.2/core-ajax/core-ajax.html"> 1 <link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html">
2 <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
3 <link rel="import" href="/lib/polymer/1.0.9/color-picker-element/dist/color-picker.html">
4 <link rel="import" href="/room/ari/static/rdf-uri.html">
2 5
3 <polymer-element name="output-widget" attributes="subj pred"> 6 <dom-module id="output-sender">
4 <template> 7 <template>
5 <core-ajax id="output" url="../output" method="PUT"></core-ajax> 8 <iron-ajax id="output" url="../output" method="PUT"></iron-ajax>
6 Set <a href="{{subj}}">{{subj | compactUri}}</a>'s {{pred | compactUri}} to 9 Set <a href$="{{subj}}">{{compactUri(subj)}}</a>'s
10 <span>{{compactUri(pred)}}</span> to
7 </template> 11 </template>
8 <script> 12 <script>
9 Polymer({ 13 Polymer({
10 valueChanged: function() { 14 is: 'output-sender',
15 behaviors: [BigastUri],
16 properties: {
17 subj: { notify: true },
18 pred: { notify: true },
19 value: { observer: 'valueChanged' }
20 },
21 valueChanged: function () {
22 if (!this.subj || !this.pred) {
23 return;
24 }
11 //this.$.output.headers = {'content-type': ...} 25 //this.$.output.headers = {'content-type': ...}
12 // broken in polymer 0.5 this.$.output.params = {s: this.subj, p: this.pred}; 26 this.$.output.params = {s: this.subj, p: this.pred};
13 this.$.output.url = "output?s="+encodeURIComponent(this.subj)+"&p="+encodeURIComponent(this.pred);
14 this.$.output.body = this.value; 27 this.$.output.body = this.value;
15 this.$.output.go(); 28 this.$.output.generateRequest();
16 } 29 }
17 }); 30 });
18 </script> 31 </script>
19 </polymer-element> 32 </dom-module>
20 33
21 <polymer-element name="output-rgb" extends="output-widget"> 34 <dom-module id="output-rgb">
22 <template> 35 <template>
36 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
23 <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker> 37 <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker>
24 color pick {{value}} 38 color pick <span>{{value}}</span>
39 <button on-click="black">Black</button>
40 <button on-click="white">White</button>
41 </template>
42 <script>
43 Polymer({
44 is: 'output-rgb',
45 properties: {
46 value: { notify: true },
47 },
48 ready: function () {
49 this.$.pick.addEventListener('colorselected', function (ev) {
50 this.value = ev.detail.hex;
51 }.bind(this));
52 },
53 black: function() {this.value = "#000000";},
54 white: function() {this.value = "#ffffff";}
55 });
56 </script>
57 </dom-module>
58
59 <dom-module id="output-slider">
60 <template>
61 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
62 <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value::input}}"> <span>{{value}}</span>
25 </template> 63 </template>
26 <script> 64 <script>
27 Polymer({ 65 Polymer({
28 domReady: function() { 66 is: 'output-slider',
29 this.$.pick.addEventListener('colorselected', function(ev) { 67 properties: {
30 this.value = ev.detail.hex; 68 max: { notify: true },
31 }.bind(this)); 69 min: { notify: true },
32 } 70 step: { notify: true }
71 },
33 }); 72 });
34 </script> 73 </script>
35 </polymer-element> 74 </dom-module>
36 75
37 <polymer-element name="output-slider" extends="output-widget" 76 <!--
38 attributes="min max step" 77 TODO(polyup): Inheriting from other custom elements is not yet supported.
39 noscript> 78 See: https://www.polymer-project.org/1.0/docs/migration.html#inheritance
79 -->
80 <dom-module id="output-fixed-text">
40 <template> 81 <template>
41 <shadow></shadow> 82 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
42 <input type="range" 83 <textarea rows="{{rows}}" cols="{{cols}}" value="{{value::input}}"></textarea>
43 min="{{min}}" max="{{max}}" step="{{step}}"
44 value="{{value}}"> {{value}}
45 </template> 84 </template>
46 </polymer-element> 85 <script>
86 Polymer({
87 is: 'output-fixed-text',
88 properties: {
89 cols: { notify: true },
90 rows: { notify: true }
91 },
92 });
93 </script>
94 </dom-module>
47 95
48 <polymer-element name="output-fixed-text" extends="output-widget" 96 <dom-module id="output-switch">
49 attributes="rows cols"
50 noscript>
51 <template> 97 <template>
52 <textarea rows="{{rows}}" cols="{{cols}}" value="{{value}}"></textarea> 98 <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
53 </template> 99 <input type="checkbox" checked="{{check::change}}"> <span>{{value}}</span>
54 </polymer-element>
55
56 <polymer-element name="output-switch" extends="output-widget">
57 <template>
58 <shadow></shadow>
59 <input type="checkbox" checked="{{check}}"> {{value}}
60 </template> 100 </template>
61 <script> 101 <script>
62 Polymer({ 102 Polymer({
63 check: false, 103 is: 'output-switch',
64 checkChanged: function() { 104 properties: {
65 this.value = this.check ? "high" : "low"; 105 check: {
66 } 106 type: Boolean,
107 value: false,
108 observer: 'checkChanged'
109 },
110 value: { notify: true }
111 },
112 checkChanged: function () {
113 this.value = this.check ? 'high' : 'low';
114 },
67 }); 115 });
68 </script> 116 </script>
69 </polymer-element> 117 </dom-module>
70 118
71 <polymer-element name="output-widget-any" attributes="desc"> 119 <dom-module id="output-widget-any">
72 <template></template> 120 <template></template>
73 <script> 121 <script>
74 Polymer({ 122 Polymer({
75 domReady: function() { 123 is: 'output-widget-any',
124 properties: {
125 desc: { type: Object, notify: true }
126 },
127 ready: function () {
76 var elem = document.createElement(this.desc.element); 128 var elem = document.createElement(this.desc.element);
77 this.shadowRoot.appendChild(elem); 129 this.appendChild(elem);
78 for (var k of Object.keys(this.desc)) { 130 for (var k of Object.keys(this.desc)) {
79 elem.setAttribute(k, this.desc[k]); 131 elem.setAttribute(k, this.desc[k]);
80 } 132 }
81 } 133 }
82 }); 134 });
83 </script> 135 </script>
84 </polymer-element> 136 </dom-module>