aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/token-field
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/token-field')
-rw-r--r--node_modules/montage/ui/token-field/token-field.reel/token-field.css40
-rw-r--r--node_modules/montage/ui/token-field/token-field.reel/token-field.html87
-rw-r--r--node_modules/montage/ui/token-field/token-field.reel/token-field.js221
-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
6 files changed, 538 insertions, 0 deletions
diff --git a/node_modules/montage/ui/token-field/token-field.reel/token-field.css b/node_modules/montage/ui/token-field/token-field.reel/token-field.css
new file mode 100644
index 00000000..38f0ae49
--- /dev/null
+++ b/node_modules/montage/ui/token-field/token-field.reel/token-field.css
@@ -0,0 +1,40 @@
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
7.montage-token-field {
8 background: white;
9 border: 1px solid #bdbdbd;
10 padding: 3px 5px;
11 cursor: text;
12}
13
14.montage-token-field .montage-token-list {
15 display: inline;
16}
17
18.montage-token-field input[type="text"].montage-token-autocomplete {
19 -webkit-appearance: none;
20 -moz-appearance: none;
21 border: none;
22 height: 13px;
23 margin: 3px 1px;
24 outline: 0;
25 -webkit-box-shadow: none;
26 -moz-box-shadow: none;
27 box-shadow: none;
28 width: 2px;
29}
30
31.montage-token-field input[type="text"].montage-token-autocomplete:focus {
32 width: 80%;
33}
34
35.montage-token-field .montage-autocomplete-wrapper {
36 display: inline-block;
37 overflow: hidden;
38 margin: 0px;
39 vertical-align: middle;
40} \ No newline at end of file
diff --git a/node_modules/montage/ui/token-field/token-field.reel/token-field.html b/node_modules/montage/ui/token-field/token-field.reel/token-field.html
new file mode 100644
index 00000000..0335de13
--- /dev/null
+++ b/node_modules/montage/ui/token-field/token-field.reel/token-field.html
@@ -0,0 +1,87 @@
1<!DOCTYPE html>
2<html>
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>TokenField Template</title>
6 <link rel="stylesheet" type="text/css" href="token-field.css">
7
8 <script type="text/montage-serialization">
9{
10
11 "owner": {
12 "prototype": "montage/ui/token-field/token-field.reel",
13 "properties": {
14 "element": {"#": "token-field"},
15 "_autocomplete": {"@": "autocomplete"},
16 "_tokenList": {"@": "tokenList"},
17 "_tokensController": {"@": "tokensController"}
18 },
19 "bindings": {
20 "_suggestedValue": {"<-": "@autocomplete.suggestedValue"},
21 "_autocompleteValue": {"<-": "@autocomplete.value"}
22 }
23 },
24 "tokensController": {
25 "prototype": "montage/ui/controller/array-controller",
26 "properties": {
27 "selectObjectsOnAddition": true,
28 "automaticallyOrganizeObjects": true
29 },
30 "bindings": {
31 "content": {"<<->": "@owner.values"}
32 }
33 },
34
35 "tokenList": {
36 "prototype": "montage/ui/repetition.reel",
37 "properties": {
38 "element": {
39 "#": "token-list"
40 },
41 "isSelectionEnabled": true,
42 "contentController": {"@": "tokensController"},
43 "orientation": "horizontal"
44 }
45 },
46
47 "token": {
48 "prototype": "montage/ui/token-field/token.reel",
49 "properties": {
50 "element": {"#": "token"}
51 },
52 "bindings": {
53 "value": {"<-": "@tokenList.objectAtCurrentIteration"},
54 "tokensController": {"<-": "@tokenList.contentController"},
55 "textPropertyPath": {"<-": "@owner.textPropertyPath"},
56 "allowAdHocValues": {"<-": "@owner.allowAdHocValues"}
57 }
58 },
59 "autocomplete": {
60 "prototype": "montage/ui/autocomplete/autocomplete.reel",
61 "properties": {
62 "element": {"#": "autocomplete"},
63 "identifier": "autocomplete",
64 "delay": "500",
65 "value": ""
66 },
67 "bindings": {
68 "textPropertyPath": {"<-": "@owner.textPropertyPath"},
69 "placeholder": {"<-": "@owner.placeholder"}
70 }
71 }
72}
73 </script>
74
75</head>
76<body>
77 <div data-montage-id="token-field" class="montage-token-field">
78 <div data-montage-id="token-list" class="montage-token-list">
79 <span data-montage-id="token"></span>
80 </div>
81 <span class="montage-autocomplete-wrapper">
82 <input type="text" data-montage-id="autocomplete" class="montage-token-autocomplete" tabindex="0" />
83 </span>
84 </div>
85
86</body>
87</html>
diff --git a/node_modules/montage/ui/token-field/token-field.reel/token-field.js b/node_modules/montage/ui/token-field/token-field.reel/token-field.js
new file mode 100644
index 00000000..9f08e477
--- /dev/null
+++ b/node_modules/montage/ui/token-field/token-field.reel/token-field.js
@@ -0,0 +1,221 @@
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
9var KEY_DELETE = 46,
10KEY_BACKSPACE = 8,
11KEY_LEFT = 37,
12KEY_UP = 38,
13KEY_RIGHT = 39,
14KEY_DOWN = 40;
15
16exports.TokenField = Montage.create(Component, {
17
18 delegate: {value: null},
19
20 values: {value: null},
21
22 /**
23 * Path to a String within an Object that is representative of the Object
24 */
25 textPropertyPath: {value: null},
26
27 /**
28 * Allow ad-hoc strings (strings that do not have corresponding represented object) to be entered.
29 */
30 allowAdHocValues: {value: null},
31
32 placeholder: {value: null},
33
34
35 // private
36
37 __hasFocus: {value: null},
38 _hasFocus: {
39 get: function() {
40 return this.__hasFocus;
41 },
42 set: function(value) {
43 if(value != this.__hasFocus) {
44 this.__hasFocus = value;
45 this.needsDraw = true;
46 }
47 }
48 },
49
50 _tokensController: {value: null},
51 _tokenList: {value: null, enumerable: false},
52 _autocomplete: {value: null, enumerable: false},
53 __autocompleteValue: {value: null},
54 _autocompleteValue: {
55 get: function() {
56 return this.__autocompleteValue;
57 },
58 set: function(value) {
59 this.__autocompleteValue = value;
60 }
61 },
62
63 __suggestedValue: {value: null},
64 _suggestedValue: {
65 get: function() {
66 return this.__suggestedValue;
67 },
68 set: function(newValue) {
69 if(newValue) {
70 var representedObject;
71 if(!this.allowAdHocValues && String.isString(newValue)) {
72 // since ad-hoc values are not allowed, check with the delegate