author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-10-02 07:59:30 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-10-02 07:59:30 (UTC) |
commit | 1180b7b195157aaeb4f0d5380e0c886bbd06c2e2 (patch) (unidiff) | |
tree | 709e33a09d9325d382aabaf0a0828e20ebdb96db /frontend/delta/js/Clipperz/PM/UI/Components/CardList.js | |
parent | 20bea94ab6b91c85b171dcf86baba0a64169d508 (diff) | |
download | clipperz-1180b7b195157aaeb4f0d5380e0c886bbd06c2e2.zip clipperz-1180b7b195157aaeb4f0d5380e0c886bbd06c2e2.tar.gz clipperz-1180b7b195157aaeb4f0d5380e0c886bbd06c2e2.tar.bz2 |
Updated /delta
Switched from less to scss. Still no build script to update the final CSS, though.
Added preliminary support for storing account data on browser's local storage for offline viewing. No public backend currently support this feature.
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 | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js b/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js index 66d20f1..5a44a4a 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js | |||
@@ -52,110 +52,117 @@ Clipperz.PM.UI.Components.CardList = React.createClass({ | |||
52 | showSearchBox = !this.state.showSearch; | 52 | showSearchBox = !this.state.showSearch; |
53 | 53 | ||
54 | this.setState({showSearch: showSearchBox}); | 54 | this.setState({showSearch: showSearchBox}); |
55 | 55 | ||
56 | if (showSearchBox) { | 56 | if (showSearchBox) { |
57 | MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'focusOnSearchField')); | 57 | MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'focusOnSearchField')); |
58 | } | 58 | } |
59 | }, | 59 | }, |
60 | 60 | ||
61 | updateSearchText: function (anEvent) { | 61 | updateSearchText: function (anEvent) { |
62 | varsearchText; | 62 | varsearchText; |
63 | 63 | ||
64 | searchText = anEvent.target.value; | 64 | searchText = anEvent.target.value; |
65 | //console.log(">>> updateSearchText", searchText); | 65 | //console.log(">>> updateSearchText", searchText); |
66 | 66 | ||
67 | if ((this.state['searchTimer'] != null) && (searchText != this.state['searchText'])) { | 67 | if ((this.state['searchTimer'] != null) && (searchText != this.state['searchText'])) { |
68 | this.state['searchTimer'].cancel(); | 68 | this.state['searchTimer'].cancel(); |
69 | } | 69 | } |
70 | 70 | ||
71 | if (searchText != this.state['searchText']) { | 71 | if (searchText != this.state['searchText']) { |
72 | this.state['searchText'] = searchText; | 72 | this.state['searchText'] = searchText; |
73 | this.state['searchTimer'] = MochiKit.Async.callLater(this.props['searchDelay'], MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'searchCards', searchText); | 73 | this.state['searchTimer'] = MochiKit.Async.callLater(this.props['searchDelay'], MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'searchCards', searchText); |
74 | } | 74 | } |
75 | }, | 75 | }, |
76 | 76 | ||
77 | focusOnSearchField: function () { | 77 | focusOnSearchField: function () { |
78 | console.log("focusOnSearchField", this.refs['searchField']); | 78 | console.log("focusOnSearchField", this.refs['searchField']); |
79 | this.refs['searchField'].getDOMNode.focus(); | 79 | this.refs['searchField'].getDOMNode.focus(); |
80 | }, | 80 | }, |
81 | 81 | ||
82 | searchBox: function () { | 82 | searchBox: function () { |
83 | var result; | 83 | var result; |
84 | 84 | ||
85 | if (this.state.showSearch) { | 85 | if (this.state.showSearch) { |
86 | result =React.DOM.div({className:'searchBox'}, [ | 86 | result =React.DOM.div({className:'searchBox'}, [ |
87 | React.DOM.div(null, [ | 87 | React.DOM.div(null, [ |
88 | React.DOM.input({type:'search', placeholder:"search", ref:'searchField', onChange:this.updateSearchText}) | 88 | React.DOM.input({type:'search', placeholder:"search", ref:'searchField', onChange:this.updateSearchText}) |
89 | ]) | 89 | ]) |
90 | ]); | 90 | ]); |
91 | } else { | 91 | } else { |
92 | result = null; | 92 | result = null; |
93 | } | 93 | } |
94 | 94 | ||
95 | return result; | 95 | return result; |
96 | }, | 96 | }, |
97 | 97 | ||
98 | //========================================================================= | 98 | //========================================================================= |
99 | 99 | ||
100 | showPreferences: function (anEvent) { | ||
101 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showPreferences', anEvent); | ||
102 | }, | ||
103 | |||
104 | //========================================================================= | ||
105 | |||
100 | cardItem: function (aRecordReference) { | 106 | cardItem: function (aRecordReference) { |
101 | varreference = aRecordReference['_reference']; | 107 | varreference = aRecordReference['_reference']; |
102 | varselectedCard = (reference == this.props.selectedCard); | 108 | varselectedCard = (reference == this.props.selectedCard); |
103 | 109 | ||
104 | returnReact.DOM.div({className:'listItem', onClick:MochiKit.Base.method(this, 'handleClickOnCardDetail', reference)}, [ | 110 | //TODO: verify if it is possible to put the onClick handler on the container 'div', instead of adding it to each 'div' item. |
111 | returnReact.DOM.div({className:'listItem', key:reference, onClick:MochiKit.Base.method(this, 'handleClickOnCardDetail', reference)}, [ | ||
105 | React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label)), | 112 | 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)), | 113 | // 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')), | 114 | 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"))) | 115 | React.DOM.div({className:'detailLinkWrapper'}, React.DOM.span({className:'detailLink ' + (selectedCard ? 'icon-spin' : '')}, (selectedCard ? "loading" : "detail"))) |
109 | ]); | 116 | ]); |
110 | }, | 117 | }, |
111 | 118 | ||
112 | handleClickOnCardDetail: function (aRecordReference, anEvent) { | 119 | handleClickOnCardDetail: function (aRecordReference, anEvent) { |
113 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showRecord', aRecordReference); | 120 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showRecord', aRecordReference); |
114 | }, | 121 | }, |
115 | 122 | ||
116 | cardListItems: function () { | 123 | cardListItems: function () { |
117 | varlist; | 124 | varlist; |
118 | varresult; | 125 | varresult; |
119 | 126 | ||
120 | list = this.props['cardList']; | 127 | list = this.props['cardList']; |
121 | 128 | ||
122 | if (typeof(list) != 'undefined') { | 129 | if (typeof(list) != 'undefined') { |
123 | result = MochiKit.Base.map(MochiKit.Base.method(this, 'cardItem'), list); | 130 | result = MochiKit.Base.map(MochiKit.Base.method(this, 'cardItem'), list); |
124 | } else { | 131 | } else { |
125 | result = null; | 132 | result = null; |
126 | } | 133 | } |
127 | 134 | ||
128 | return result; | 135 | return result; |
129 | }, | 136 | }, |
130 | 137 | ||
131 | //========================================================================= | 138 | //========================================================================= |
132 | 139 | ||
133 | handleChange: function (anEvent) { | 140 | handleChange: function (anEvent) { |
134 | // varrefs = this.refs; | 141 | // varrefs = this.refs; |
135 | // var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0]; | 142 | // var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0]; |
136 | // var newState = {}; | 143 | // var newState = {}; |
137 | // | 144 | // |
138 | // newState[refName] = event.target.value; | 145 | // newState[refName] = event.target.value; |
139 | // this.setState(newState); | 146 | // this.setState(newState); |
140 | }, | 147 | }, |
141 | 148 | ||
142 | //========================================================================= | 149 | //========================================================================= |
143 | 150 | ||
144 | render: function() { | 151 | render: function() { |
145 | returnReact.DOM.div(null, [ | 152 | returnReact.DOM.div(null, [ |
146 | React.DOM.div({className:'header'}, [ | 153 | React.DOM.div({className:'header'}, [ |
147 | React.DOM.a({className:'account'}, 'clipperz'), | 154 | React.DOM.a({className:'account'}, 'clipperz'), |
148 | React.DOM.div({className:'features'}, [ | 155 | React.DOM.div({className:'features'}, [ |
149 | React.DOM.a({className:'addCard'}, 'add'), | 156 | // React.DOM.a({className:'addCard'}, 'add'), |
150 | React.DOM.a({className:'search ' + (this.state.showSearch ? 'selected' : ''), onClick:this.toggleSearch}, 'search'), | 157 | React.DOM.a({className:'search ' + (this.state.showSearch ? 'selected' : ''), onClick:this.toggleSearch}, 'search'), |
151 | React.DOM.a({className:'settings'}, 'settings') | 158 | React.DOM.a({className:'settings', onClick:this.showPreferences}, 'settings') |
152 | ]), | 159 | ]), |
153 | // this.searchBox() | 160 | // this.searchBox() |
154 | ]), | 161 | ]), |
155 | this.searchBox(), | 162 | this.searchBox(), |
156 | React.DOM.div({className:'content cardList'}, this.cardListItems()), | 163 | React.DOM.div({className:'content cardList'}, this.cardListItems()), |
157 | ]); | 164 | ]); |
158 | } | 165 | } |
159 | 166 | ||
160 | //========================================================================= | 167 | //========================================================================= |
161 | }); | 168 | }); |