summaryrefslogtreecommitdiff
path: root/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js
Unidiff
Diffstat (limited to 'frontend/delta/js/Clipperz/PM/UI/Components/CardList.js') (more/less context) (show whitespace changes)
-rw-r--r--frontend/delta/js/Clipperz/PM/UI/Components/CardList.js13
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
@@ -76,86 +76,93 @@ Clipperz.PM.UI.Components.CardList = React.createClass({
76 76
77 focusOnSearchField: function () { 77 focusOnSearchField: function () {
78console.log("focusOnSearchField", this.refs['searchField']); 78console.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});