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 @@
+/*
+
+Copyright 2008-2013 Clipperz Srl
+
+This file is part of Clipperz, the online password manager.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com.
+
+* Clipperz is free software: you can redistribute it and/or modify it
+  under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or 
+  (at your option) any later version.
+
+* Clipperz is distributed in the hope that it will be useful, but 
+  WITHOUT ANY WARRANTY; without even the implied warranty of 
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Clipperz. If not, see http://www.gnu.org/licenses/.
+
+*/
+
+Clipperz.PM.UI.Components.CardList = React.createClass({
+
+        getDefaultProps: function () {
+                return {
+                        selectedCard: null,
+                        searchDelay: 0.3
+                }
+        },
+
+        propTypes: {
+                searchDelay: React.PropTypes.number
+        },
+
+        getInitialState: function () {
+                return {
+                        showSearch: false,
+                        searchTimer: null,
+                        searchText: '',
+        //              passphrase: '',
+        //              pin: ''
+                };
+        },
+
+        //=========================================================================
+
+        toggleSearch: function (anEvent) {
+                        varshowSearchBox;
+
+                showSearchBox = !this.state.showSearch;
+
+                this.setState({showSearch: showSearchBox});
+
+                if (showSearchBox) {
+                        MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'focusOnSearchField'));
+                }
+        },
+
+        updateSearchText: function (anEvent) {
+                        varsearchText;
+
+                searchText = anEvent.target.value;
+//console.log(">>> updateSearchText", searchText);
+
+                if ((this.state['searchTimer'] != null) && (searchText != this.state['searchText'])) {
+                        this.state['searchTimer'].cancel();
+                }
+
+                if (searchText != this.state['searchText']) {
+                        this.state['searchText'] = searchText;
+                        this.state['searchTimer'] = MochiKit.Async.callLater(this.props['searchDelay'], MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'searchCards', searchText);
+                }
+        },
+
+        focusOnSearchField: function () {
+console.log("focusOnSearchField", this.refs['searchField']);
+                this.refs['searchField'].getDOMNode.focus();
+        },
+
+        searchBox: function () {
+                var result;
+
+                if (this.state.showSearch) {
+                                result =React.DOM.div({className:'searchBox'}, [
+                                                        React.DOM.div(null, [
+                                                                React.DOM.input({type:'search', placeholder:"search", ref:'searchField', onChange:this.updateSearchText})
+                                                        ])
+                                                ]);
+                } else {
+                        result = null;
+                }
+
+                return result;
+        },
+
+        //=========================================================================
+
+        cardItem: function (aRecordReference) {
+                        varreference = aRecordReference['_reference'];
+                        varselectedCard = (reference == this.props.selectedCard);
+
+                        returnReact.DOM.div({className:'listItem', onClick:MochiKit.Base.method(this, 'handleClickOnCardDetail', reference)}, [
+                                        React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label)),
+        //                              React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label)),
+                                        React.DOM.div({className:'faviconWrapper'}, aRecordReference.favicon ? React.DOM.img({className:'favicon', src:aRecordReference.favicon}) : React.DOM.div({className:'favicon'}, '\u00A0')),
+                                        React.DOM.div({className:'detailLinkWrapper'}, React.DOM.span({className:'detailLink ' + (selectedCard ? 'icon-spin' : '')}, (selectedCard ? "loading" : "detail")))
+                                ]);
+        },
+
+        handleClickOnCardDetail: function (aRecordReference, anEvent) {
+                MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showRecord', aRecordReference);
+        },
+
+        cardListItems: function () {
+                        varlist;
+                        varresult;
+
+                list = this.props['cardList'];
+
+                if (typeof(list) != 'undefined') {
+                        result = MochiKit.Base.map(MochiKit.Base.method(this, 'cardItem'), list);
+                } else {
+                        result = null;
+                }
+
+                return result;
+        },
+
+        //=========================================================================
+
+        handleChange: function (anEvent) {
+        //              varrefs = this.refs;
+        //      var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0];
+        //      var newState = {};
+//
+        //      newState[refName] = event.target.value;
+        //    this.setState(newState);
+        },
+
+        //=========================================================================
+
+        render: function() {
+                        returnReact.DOM.div(null, [
+                                        React.DOM.div({className:'header'}, [
+                                                React.DOM.a({className:'account'}, 'clipperz'),
+                                                React.DOM.div({className:'features'}, [
+                                                        React.DOM.a({className:'addCard'}, 'add'),
+                                                        React.DOM.a({className:'search ' + (this.state.showSearch ? 'selected' : ''), onClick:this.toggleSearch}, 'search'),
+                                                        React.DOM.a({className:'settings'}, 'settings')
+                                                ]),
+        //                                      this.searchBox()
+                                        ]),
+                                        this.searchBox(),
+                                        React.DOM.div({className:'content cardList'}, this.cardListItems()),
+                                ]);
+        }
+
+        //=========================================================================
+});