Diffstat (limited to 'frontend/delta/js/Clipperz/PM/UI/Components/CardList.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/js/Clipperz/PM/UI/Components/CardList.js | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js b/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js new file mode 100644 index 0000000..66d20f1 --- a/dev/null +++ b/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js | |||
@@ -0,0 +1,161 @@ | |||
1 | /* | ||
2 | |||
3 | Copyright 2008-2013 Clipperz Srl | ||
4 | |||
5 | This file is part of Clipperz, the online password manager. | ||
6 | For further information about its features and functionalities please | ||
7 | refer to http://www.clipperz.com. | ||
8 | |||
9 | * Clipperz is free software: you can redistribute it and/or modify it | ||
10 | under the terms of the GNU Affero General Public License as published | ||
11 | by the Free Software Foundation, either version 3 of the License, or | ||
12 | (at your option) any later version. | ||
13 | |||
14 | * Clipperz is distributed in the hope that it will be useful, but | ||
15 | WITHOUT ANY WARRANTY; without even the implied warranty of | ||
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
17 | See the GNU Affero General Public License for more details. | ||
18 | |||
19 | * You should have received a copy of the GNU Affero General Public | ||
20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. | ||
21 | |||
22 | */ | ||
23 | |||
24 | Clipperz.PM.UI.Components.CardList = React.createClass({ | ||
25 | |||
26 | getDefaultProps: function () { | ||
27 | return { | ||
28 | selectedCard: null, | ||
29 | searchDelay: 0.3 | ||
30 | } | ||
31 | }, | ||
32 | |||
33 | propTypes: { | ||
34 | searchDelay: React.PropTypes.number | ||
35 | }, | ||
36 | |||
37 | getInitialState: function () { | ||
38 | return { | ||
39 | showSearch: false, | ||
40 | searchTimer: null, | ||
41 | searchText: '', | ||
42 | // passphrase: '', | ||
43 | // pin: '' | ||
44 | }; | ||
45 | }, | ||
46 | |||
47 | //========================================================================= | ||
48 | |||
49 | toggleSearch: function (anEvent) { | ||
50 | varshowSearchBox; | ||
51 | |||
52 | showSearchBox = !this.state.showSearch; | ||
53 | |||
54 | this.setState({showSearch: showSearchBox}); | ||
55 | |||
56 | if (showSearchBox) { | ||
57 | MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'focusOnSearchField')); | ||
58 | } | ||
59 | }, | ||
60 | |||
61 | updateSearchText: function (anEvent) { | ||
62 | varsearchText; | ||
63 | |||
64 | searchText = anEvent.target.value; | ||
65 | //console.log(">>> updateSearchText", searchText); | ||
66 | |||
67 | if ((this.state['searchTimer'] != null) && (searchText != this.state['searchText'])) { | ||
68 | this.state['searchTimer'].cancel(); | ||
69 | } | ||
70 | |||
71 | if (searchText != this.state['searchText']) { | ||
72 | this.state['searchText'] = searchText; | ||
73 | this.state['searchTimer'] = MochiKit.Async.callLater(this.props['searchDelay'], MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'searchCards', searchText); | ||
74 | } | ||
75 | }, | ||
76 | |||
77 | focusOnSearchField: function () { | ||
78 | console.log("focusOnSearchField", this.refs['searchField']); | ||
79 | this.refs['searchField'].getDOMNode.focus(); | ||
80 | }, | ||
81 | |||
82 | searchBox: function () { | ||
83 | var result; | ||
84 | |||
85 | if (this.state.showSearch) { | ||
86 | result =React.DOM.div({className:'searchBox'}, [ | ||
87 | React.DOM.div(null, [ | ||
88 | React.DOM.input({type:'search', placeholder:"search", ref:'searchField', onChange:this.updateSearchText}) | ||
89 | ]) | ||
90 | ]); | ||
91 | } else { | ||
92 | result = null; | ||
93 | } | ||
94 | |||
95 | return result; | ||
96 | }, | ||
97 | |||
98 | //========================================================================= | ||
99 | |||
100 | cardItem: function (aRecordReference) { | ||
101 | varreference = aRecordReference['_reference']; | ||
102 | varselectedCard = (reference == this.props.selectedCard); | ||
103 | |||
104 | returnReact.DOM.div({className:'listItem', onClick:MochiKit.Base.method(this, 'handleClickOnCardDetail', reference)}, [ | ||
105 | React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label)), | ||
106 | // React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label)), | ||
107 | React.DOM.div({className:'faviconWrapper'}, aRecordReference.favicon ? React.DOM.img({className:'favicon', src:aRecordReference.favicon}) : React.DOM.div({className:'favicon'}, '\u00A0')), | ||
108 | React.DOM.div({className:'detailLinkWrapper'}, React.DOM.span({className:'detailLink ' + (selectedCard ? 'icon-spin' : '')}, (selectedCard ? "loading" : "detail"))) | ||
109 | ]); | ||
110 | }, | ||
111 | |||
112 | handleClickOnCardDetail: function (aRecordReference, anEvent) { | ||
113 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showRecord', aRecordReference); | ||
114 | }, | ||
115 | |||
116 | cardListItems: function () { | ||
117 | varlist; | ||
118 | varresult; | ||
119 | |||
120 | list = this.props['cardList']; | ||
121 | |||
122 | if (typeof(list) != 'undefined') { | ||
123 | result = MochiKit.Base.map(MochiKit.Base.method(this, 'cardItem'), list); | ||
124 | } else { | ||
125 | result = null; | ||
126 | } | ||
127 | |||
128 | return result; | ||
129 | }, | ||
130 | |||
131 | //========================================================================= | ||
132 | |||
133 | handleChange: function (anEvent) { | ||
134 | // varrefs = this.refs; | ||
135 | // var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0]; | ||
136 | // var newState = {}; | ||
137 | // | ||
138 | // newState[refName] = event.target.value; | ||
139 | // this.setState(newState); | ||
140 | }, | ||
141 | |||
142 | //========================================================================= | ||
143 | |||
144 | render: function() { | ||
145 | returnReact.DOM.div(null, [ | ||
146 | React.DOM.div({className:'header'}, [ | ||
147 | React.DOM.a({className:'account'}, 'clipperz'), | ||
148 | React.DOM.div({className:'features'}, [ | ||
149 | React.DOM.a({className:'addCard'}, 'add'), | ||
150 | React.DOM.a({className:'search ' + (this.state.showSearch ? 'selected' : ''), onClick:this.toggleSearch}, 'search'), | ||
151 | React.DOM.a({className:'settings'}, 'settings') | ||
152 | ]), | ||
153 | // this.searchBox() | ||
154 | ]), | ||
155 | this.searchBox(), | ||
156 | React.DOM.div({className:'content cardList'}, this.cardListItems()), | ||
157 | ]); | ||
158 | } | ||
159 | |||
160 | //========================================================================= | ||
161 | }); | ||