-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathfunction-list-input.html
118 lines (111 loc) · 4.2 KB
/
function-list-input.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../vellum-chip/vellum-chip.html">
<dom-module is="function-list-input">
<template>
<style>
:host {
display: block;
}
vellum-chip {
color:#000
}
</style>
<template is="dom-repeat" items="{{asArray}}" restamp id="list">
<vellum-chip elevation="1" title="Edit [[item]]" value="[[item]]" on-tap="edit" name="[[item]]">[[item]]</vellum-chip>
</template><br />
<paper-dialog id="edit">
<h2>Update {{_editing.name}}</h2>
<paper-dialog-scrollable>
<paper-input label="name" value="{{_editing.rename}}"style="width:200px;display:inline-block"></paper-input>
<paper-input label="attrs" value="{{_editing.attrs}}"style="width:200px;display:inline-block">
<div prefix>(</div>
<div suffix>) {</div>
</paper-input>
<textarea rows="9" style="font-family: monospace;width:100%" value="{{_editing.body::input}}" ></textarea>
}
</paper-dialog-scrollable>
<div class="buttons">
<paper-button on-tap="save">Save</paper-button>
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-dismiss style="color:red" on-tap="del">Delete</paper-button>
<paper-button dialog-confirm autofocus on-tap="save">Accept</paper-button>
</div>
</paper-dialog>
<paper-input value="{{addMe}}" label="name the new function" pattern="[a-zA-Z_][0-9a-zA-Z_]*" auto-validate><paper-button suffix on-tap="add">Add</paper-button></paper-input>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'function-list-input',
properties:{
value:{notify:true,value:{}},
asArray:{computed:"getAsArray(value.*)"},
_editing:{value:{}},
},
getKey: function(i) {
return Object.keys(this.value)[i]
},
add: function(){
if (this.addMe) {
this.addMe = this.addMe.trim()
if (Polymer.Base.hasOwnProperty(this.addMe) && this.addMe != "ready") {
alert(this.addMe + " is taken (by Polymer.Base)")
} else if (!/^[a-zA-Z_][0-9a-zA-Z_]*/.test(this.addMe)) {
alert(this.addMe + " is not a good name")
} else if (this.variables && this.variables.hasOwnProperty(this.addMe)) {
alert(this.addMe + " is taken (by a method/function)")
} else if (this.value && this.value.hasOwnProperty(this.addMe)) {
alert(this.addMe + " is taken")
} else {
if (!this.value || !((typeof this.value === "object") && (this.value !== null))) {
this.value = {}
}
this.set("value."+ this.addMe,{})
this.set("_editing", {body: "return ", name: this.addMe, rename: this.addMe})
this.$.edit.open()
}
}
},
getAsArray: function(Obj) {
if (Obj.base) {
return Object.keys(Obj.base)
}
},
edit: function(e) {
this.set("_editing", this.value[e.currentTarget.name])
this.set("_editing.name", e.currentTarget.name)
this.set("_editing.rename", e.currentTarget.name)
this.$.edit.open()
},
del: function() {
var name = this._editing.name +""
delete(this.value[name])
this.set("value", JSON.parse(JSON.stringify(this.value)))
this.$.list.render()
},
save: function() {
var name = this._editing.name +""
var rename = this._editing.rename +""
delete(this._editing.name)
delete(this._editing.rename)
if (rename != name) {
delete(this.value[name])
}
for (prop in this._editing) {
if (!this._editing[prop]) {
delete(this._editing[prop])
}
}
if (rename) {
this.value[rename] = this._editing
}
this.set("value", JSON.parse(JSON.stringify(this.value)))
this.$.list.render()
},
})
})()
</script>