aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/token-field/token.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/token-field/token.reel')
-rw-r--r--node_modules/montage/ui/token-field/token.reel/token.css54
-rw-r--r--node_modules/montage/ui/token-field/token.reel/token.html45
-rw-r--r--node_modules/montage/ui/token-field/token.reel/token.js91
3 files changed, 190 insertions, 0 deletions
diff --git a/node_modules/montage/ui/token-field/token.reel/token.css b/node_modules/montage/ui/token-field/token.reel/token.css
new file mode 100644
index 00000000..d1b8c1cb
--- /dev/null
+++ b/node_modules/montage/ui/token-field/token.reel/token.css
@@ -0,0 +1,54 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6.montage-token {
7 display: inline-block;
8 margin: 3px 1px;
9 border: 1px solid hsl(0,0%,85%);
10 background-color: hsl(0,0%,95%);
11 color: #333;
12 vertical-align: middle;
13 cursor: default;
14 border-radius: 3px;
15}
16
17.montage-token > .montage-token-text {
18 padding: 0px 1px 0px 5px;
19}
20
21.montage-token > .montage-token-delete {
22 display: inline-block;
23 padding: 3px 6px;
24 border-left: inherit;
25 border-radius: 0 2px 2px 0;
26 color: hsl(0,0%,60%);
27 cursor: pointer;
28}
29.montage-token > .montage-token-delete:hover {
30 color: hsl(0,0%,30%);
31 background-color: hsl(0,0%,90%);
32}
33.montage-token > .montage-token-delete:active {
34 color: hsl(0,0%,60%);
35 background-color: hsl(0,0%,85%);
36}
37
38/* selected */
39.montage-token.selected {
40 border-color: hsl(0,0%,60%);
41}
42
43.montage-token.selected > .montage-token-delete {
44 color: hsl(0,0%,100%);
45 background-color: hsl(0,0%,60%);
46}
47
48.montage-token.active {
49 border: 1px solid #ccc;
50}
51
52.montage-token.montage-token-adhoc {
53 border: 1px dashed #ccc;
54}
diff --git a/node_modules/montage/ui/token-field/token.reel/token.html b/node_modules/montage/ui/token-field/token.reel/token.html
new file mode 100644
index 00000000..54ba266e
--- /dev/null
+++ b/node_modules/montage/ui/token-field/token.reel/token.html
@@ -0,0 +1,45 @@
1<!DOCTYPE html>
2<html>
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Token Template</title>
6 <link rel="stylesheet" type="text/css" href="token.css">
7
8 <script type="text/montage-serialization">
9{
10
11 "tokenText": {
12 "prototype": "montage/ui/dynamic-text.reel",
13 "properties": {
14 "element": {"#": "token-text"}
15 },
16 "bindings": {
17 "value": {"<-": "@owner.text"}
18 }
19 },
20 "tokenDelete": {
21 "prototype": "montage/ui/dynamic-text.reel",
22 "properties": {
23 "element": {"#": "token-delete"},
24 "value": "✕"
25 }
26 },
27
28 "owner": {
29 "prototype": "montage/ui/token-field/token.reel",
30 "properties": {
31 "element": {"#": "token"},
32 "_deleteEl": {"#": "token-delete"}
33 }
34 }
35}
36 </script>
37
38</head>
39<body>
40 <span data-montage-id="token" class="montage-token">
41 <span data-montage-id="token-text" class="montage-token-text"></span>
42 <span data-montage-id="token-delete" class="montage-token-delete">✕</span>
43 </span>
44</body>
45</html>
diff --git a/node_modules/montage/ui/token-field/token.reel/token.js b/node_modules/montage/ui/token-field/token.reel/token.js
new file mode 100644
index 00000000..15216c3f
--- /dev/null
+++ b/node_modules/montage/ui/token-field/token.reel/token.js
@@ -0,0 +1,91 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6var Montage = require("montage").Montage,
7 Component = require("ui/component").Component;
8
9exports.Token = Montage.create(Component, {
10
11 text: {value: null},
12
13 allowAdHocValues: {value: null},
14
15 value: {
16 get: function() {
17 return this._value;
18 },
19 set: function(aValue) {
20 this._adHoc = false;
21 if(aValue) {
22 this._value = aValue;
23 if(this.textPropertyPath) {
24 if(typeof aValue[this.textPropertyPath] == 'undefined' && this.allowAdHocValues) {
25 this.text = aValue;
26 this._adHoc = true;
27 } else {
28 this.text = this.value[this.textPropertyPath];
29 }
30 } else {
31 this.text = this.value;
32 }
33 }
34 }
35 },
36
37 textPropertyPath: {value: null},
38
39 tokensController: {value: null},
40
41 // private
42
43 __adHoc: {value: null},
44 _adHoc: {
45 get: function() {
46 return this.__adHoc;
47 },
48 set: function(value) {
49 this.__adHoc = value;
50 this.needsDraw = true;
51 }
52 },
53
54 _deleteEl: {value: null},
55
56 prepareForDraw: {
57 value: function() {
58 if(window.Touch) {
59 this._deleteEl.addEventListener('touchend', this);
60 } else {
61 this._deleteEl.addEventListener('click', this);
62 }
63 }
64 },
65
66 draw: {
67 value: function() {
68 this.element.classList[this._adHoc ? 'add' : 'remove']('montage-token-adhoc');
69 }
70 },
71
72 // Event handling
73
74 removeSelf: {
75 value: function() {
76 this.tokensController.removeObjects(this.value);
77 }
78 },
79
80 handleClick: {
81 value: function(event) {
82 this.removeSelf();
83 }
84 },
85 handleTouchend: {
86 value: function(event) {
87 this.removeSelf();
88 }
89 }
90
91});
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-07 16:10:23 +0000