Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js index a0e4879..dbab41b 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js | |||
@@ -1,152 +1,173 @@ | |||
1 | /* | 1 | /* |
2 | 2 | ||
3 | Copyright 2008-2013 Clipperz Srl | 3 | Copyright 2008-2013 Clipperz Srl |
4 | 4 | ||
5 | This file is part of Clipperz, the online password manager. | 5 | This file is part of Clipperz, the online password manager. |
6 | For further information about its features and functionalities please | 6 | For further information about its features and functionalities please |
7 | refer to http://www.clipperz.com. | 7 | refer to http://www.clipperz.com. |
8 | 8 | ||
9 | * Clipperz is free software: you can redistribute it and/or modify it | 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 | 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 | 11 | by the Free Software Foundation, either version 3 of the License, or |
12 | (at your option) any later version. | 12 | (at your option) any later version. |
13 | 13 | ||
14 | * Clipperz is distributed in the hope that it will be useful, but | 14 | * Clipperz is distributed in the hope that it will be useful, but |
15 | WITHOUT ANY WARRANTY; without even the implied warranty of | 15 | WITHOUT ANY WARRANTY; without even the implied warranty of |
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | 16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. |
17 | See the GNU Affero General Public License for more details. | 17 | See the GNU Affero General Public License for more details. |
18 | 18 | ||
19 | * You should have received a copy of the GNU Affero General Public | 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/. | 20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. |
21 | 21 | ||
22 | */ | 22 | */ |
23 | 23 | ||
24 | Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components'); | 24 | Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components'); |
25 | 25 | ||
26 | Clipperz.PM.UI.Mobile.Components.CardList = function(args) { | 26 | Clipperz.PM.UI.Mobile.Components.CardList = function(args) { |
27 | args = args || {}; | 27 | args = args || {}; |
28 | 28 | ||
29 | Clipperz.PM.UI.Mobile.Components.CardList.superclass.constructor.apply(this, arguments); | 29 | Clipperz.PM.UI.Mobile.Components.CardList.superclass.constructor.apply(this, arguments); |
30 | 30 | ||
31 | this._cardDetail = null; | 31 | this._cardDetail = null; |
32 | 32 | this.render(); | |
33 | |||
33 | return this; | 34 | return this; |
34 | } | 35 | } |
35 | 36 | ||
36 | //============================================================================= | 37 | //============================================================================= |
37 | 38 | ||
38 | Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.Common.Components.BaseComponent, { | 39 | Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.Mobile.Components.BaseComponent, { |
39 | 40 | ||
40 | //------------------------------------------------------------------------- | 41 | //------------------------------------------------------------------------- |
41 | 42 | ||
42 | 'toString': function () { | 43 | 'toString': function () { |
43 | return "Clipperz.PM.UI.Mobile.Components.CardList component"; | 44 | return "Clipperz.PM.UI.Mobile.Components.CardList component"; |
44 | }, | 45 | }, |
45 | 46 | ||
46 | //------------------------------------------------------------------------- | 47 | //------------------------------------------------------------------------- |
47 | 48 | ||
48 | 'renderSelf': function () { | 49 | 'renderSelf': function () { |
50 | varheaderElement; | ||
51 | |||
52 | headerElement = MochiKit.Selector.findChildElements(this.element().parentNode, ['div[data-role=header]'])[0]; | ||
53 | this.append(this.element(), | ||
54 | {tag:'div', /*cls:'scroll',*/ id:this.getId('listBox'), children:[ | ||
55 | {tag:'ul', /*cls:'rounded',*/ id:this.getId('list'), children:[ | ||
56 | {tag:'li', html:'loading'} | ||
57 | ]} | ||
58 | ]} | ||
59 | ); | ||
60 | |||
61 | this.append(headerElement, | ||
62 | // {tag:'a', href:"#", 'data-icon':'gear', cls:'ui-btn-right', html:"Options" } | ||
63 | {tag:'a', href:"#", id:this.getId('preferences'), cls:'ui-btn-right', html:"options" } | ||
64 | ); | ||
65 | |||
66 | MochiKit.Signal.connect(this.getElement('preferences'), 'onclick', MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'showPreferences')); | ||
67 | |||
68 | /* | ||
49 | this.append(this.element(), {tag:'div', cls:'cardList', children:[ | 69 | this.append(this.element(), {tag:'div', cls:'cardList', children:[ |
50 | {tag:'div', cls:'toolbar', children:[ | 70 | {tag:'div', cls:'toolbar', children:[ |
51 | {tag:'h1', html:"clipperz"}, | 71 | {tag:'h1', html:"clipperz"}, |
52 | // {tag:'input', name:'search', type:'search', autocomplete:'off', placeholder:"search", id:this.getId('search')}, | 72 | // {tag:'input', name:'search', type:'search', autocomplete:'off', placeholder:"search", id:this.getId('search')}, |
53 | {tag:'a', href:'#', id:'settings', cls:'button', html:"*"} | 73 | {tag:'a', href:'#', id:'settings', cls:'button', html:"*"} |
54 | ]}, | 74 | ]}, |
55 | {tag:'div', cls:'scroll', id:this.getId('listBox'), children:[ | 75 | {tag:'div', cls:'scroll', id:this.getId('listBox'), children:[ |
56 | {tag:'ul', cls:'rounded', id:this.getId('list'), children:[ | 76 | {tag:'ul', cls:'rounded', id:this.getId('list'), children:[ |
57 | {tag:'li', html:'loading'} | 77 | {tag:'li', html:'loading'} |
58 | ]} | 78 | ]} |
59 | ]} | 79 | ]} |
60 | ]}); | 80 | ]}); |
61 | 81 | ||
62 | MochiKit.Signal.connect(this.getElement('list'), 'onclick', this, 'cardSelectionHandler'); | 82 | MochiKit.Signal.connect(this.getElement('list'), 'onclick', this, 'cardSelectionHandler'); |
63 | MochiKit.Signal.connect(this.getElement('list'), 'ontouchstart',this, 'cardSelectionHandler'); | 83 | MochiKit.Signal.connect(this.getElement('list'), 'ontouchstart',this, 'cardSelectionHandler'); |
64 | // MochiKit.Signal.connect(this.getElement('cardListSearchForm'), 'onsubmit', this,'searchHandler'); | 84 | // MochiKit.Signal.connect(this.getElement('cardListSearchForm'), 'onsubmit', this,'searchHandler'); |
65 | // MochiKit.Signal.connect(this.getElement('cardListSearchForm'), 'onkeydown', this,'searchHandler'); | 85 | // MochiKit.Signal.connect(this.getElement('cardListSearchForm'), 'onkeydown', this,'searchHandler'); |
66 | // MochiKit.Signal.connect(this.getElement('cardListSearchForm'), 'onkeyup', this,'searchHandler'); | 86 | // MochiKit.Signal.connect(this.getElement('cardListSearchForm'), 'onkeyup', this,'searchHandler'); |
67 | 87 | ||
68 | // MochiKit.Signal.connect(this.getElement('cardListPanel'), 'onclick', this,'cardListClickHandler'); | 88 | // MochiKit.Signal.connect(this.getElement('cardListPanel'), 'onclick', this,'cardListClickHandler'); |
69 | // MochiKit.Signal.connect('backButton', 'onclick', this,'backButtonClickHandler'); | 89 | // MochiKit.Signal.connect('backButton', 'onclick', this,'backButtonClickHandler'); |
70 | 90 | ||
71 | // MochiKit.Style.hideElement('backButton'); | 91 | // MochiKit.Style.hideElement('backButton'); |
72 | // MochiKit.Style.hideElement(this.getElement('cardDetail')); | 92 | // MochiKit.Style.hideElement(this.getElement('cardDetail')); |
93 | */ | ||
73 | }, | 94 | }, |
74 | 95 | ||
75 | 'showCards': function (someCards) { | 96 | 'showCards': function (someCards) { |
76 | varcardListElement; | 97 | varcardListElement; |
77 | if (this.isFullyRendered() == false) { | 98 | if (this.isFullyRendered() == false) { |
78 | this.render(); | 99 | this.render(); |
79 | }; | 100 | }; |
80 | 101 | ||
81 | cardListElement = this.getElement('list') | 102 | cardListElement = this.getElement('list') |
82 | 103 | ||
83 | cardInfo = { | 104 | cardInfo = { |
84 | '_rowObject': MochiKit.Async.succeed, | 105 | '_rowObject': MochiKit.Async.succeed, |
85 | '_reference': MochiKit.Base.methodcaller('reference'), | 106 | '_reference': MochiKit.Base.methodcaller('reference'), |
86 | '_searchableContent':MochiKit.Base.methodcaller('searchableContent'), | 107 | '_searchableContent':MochiKit.Base.methodcaller('searchableContent'), |
87 | 'label': MochiKit.Base.methodcaller('label'), | 108 | 'label': MochiKit.Base.methodcaller('label'), |
88 | 'favicon': MochiKit.Base.methodcaller('favicon') | 109 | 'favicon': MochiKit.Base.methodcaller('favicon') |
89 | }; | 110 | }; |
90 | 111 | ||
91 | deferredResult = new Clipperz.Async.Deferred("CardList.showCards", {trace:false}); | 112 | deferredResult = new Clipperz.Async.Deferred("CardList.showCards", {trace:false}); |
92 | deferredResult.addCallback(MochiKit.Base.map, Clipperz.Async.collectResults("CardList.value - collectResults", cardInfo, {trace:false})); | 113 | deferredResult.addCallback(MochiKit.Base.map, Clipperz.Async.collectResults("CardList.value - collectResults", cardInfo, {trace:false})); |
93 | deferredResult.addCallback(Clipperz.Async.collectAll); | 114 | deferredResult.addCallback(Clipperz.Async.collectAll); |
94 | deferredResult.addCallback(MochiKit.Base.methodcaller('sort', Clipperz.Base.caseInsensitiveKeyComparator('label'))); | 115 | deferredResult.addCallback(MochiKit.Base.methodcaller('sort', Clipperz.Base.caseInsensitiveKeyComparator('label'))); |
95 | deferredResult.addCallbackPass(MochiKit.DOM.replaceChildNodes, cardListElement); | 116 | deferredResult.addCallbackPass(MochiKit.DOM.replaceChildNodes, cardListElement); |
96 | // deferredResult.addCallbackPass(MochiKit.DOM.removeElementClass, cardListElement, 'loading'); | 117 | // deferredResult.addCallbackPass(MochiKit.DOM.removeElementClass, cardListElement, 'loading'); |
97 | deferredResult.addCallback(MochiKit.Base.map, MochiKit.Base.method(this, 'appendCardToList', cardListElement)); | 118 | deferredResult.addCallback(MochiKit.Base.map, MochiKit.Base.method(this, 'appendCardToList', cardListElement)); |
98 | deferredResult.callback(someCards); | 119 | deferredResult.callback(someCards); |
99 | }, | 120 | }, |
100 | 121 | ||
101 | 'appendCardToList': function (aCardListElement, aCardInfo) { | 122 | 'appendCardToList': function (aCardListElement, aCardInfo) { |
102 | this.append(aCardListElement, {tag:'li', cls:'cardListItem arrow', cardreference:aCardInfo['_reference'], children:[ | 123 | this.append(aCardListElement, {tag:'li', cls:'cardListItem arrow', cardreference:aCardInfo['_reference'], children:[ |
103 | {tag:'a', href:'#', html:aCardInfo['label'], children:[ | 124 | {tag:'a', href:'#', html:aCardInfo['label'], children:[ |
104 | {tag:'small', cls:'favicon', children:[{tag:'img', cls:'favicon', src:aCardInfo['favicon']}]} | 125 | // {tag:'small', cls:'favicon', children:[{tag:'img', cls:'favicon', src:aCardInfo['favicon']}]} |
105 | ]} | 126 | ]} |
106 | ]}); | 127 | ]}); |
107 | }, | 128 | }, |
108 | 129 | ||
109 | 'cardSelectionHandler': function (anEvent) { | 130 | 'cardSelectionHandler': function (anEvent) { |
110 | var listElement; | 131 | var listElement; |
111 | varcardReference; | 132 | varcardReference; |
112 | 133 | ||
113 | anEvent.preventDefault(); | 134 | anEvent.preventDefault(); |
114 | 135 | ||
115 | listElement = anEvent.target(); | 136 | listElement = anEvent.target(); |
116 | if (MochiKit.DOM.getNodeAttribute(listElement, 'cardreference') == null) { | 137 | if (MochiKit.DOM.getNodeAttribute(listElement, 'cardreference') == null) { |
117 | listElement = MochiKit.DOM.getFirstParentByTagAndClassName(anEvent.target(), tagName='li', className='cardListItem'); | 138 | listElement = MochiKit.DOM.getFirstParentByTagAndClassName(anEvent.target(), tagName='li', className='cardListItem'); |
118 | } | 139 | } |
119 | cardReference = MochiKit.DOM.getNodeAttribute(listElement, 'cardreference'); | 140 | cardReference = MochiKit.DOM.getNodeAttribute(listElement, 'cardreference'); |
120 | //TODO: Notify card with reference MochiKit.DOM.getNodeAttribute(listElement, 'cardreference') has been selected | 141 | //TODO: Notify card with reference MochiKit.DOM.getNodeAttribute(listElement, 'cardreference') has been selected |
121 | MochiKit.Signal.signal(this, 'selectedCard', cardReference); | 142 | MochiKit.Signal.signal(this, 'selectedCard', cardReference); |
122 | }, | 143 | }, |
123 | 144 | ||
124 | //------------------------------------------------------------------------- | 145 | //------------------------------------------------------------------------- |
125 | /* | 146 | /* |
126 | 'searchHandler': function (anEvent) { | 147 | 'searchHandler': function (anEvent) { |
127 | if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ENTER')) { //RETURN | 148 | if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ENTER')) { //RETURN |
128 | anEvent.preventDefault(); | 149 | anEvent.preventDefault(); |
129 | } else { | 150 | } else { |
130 | if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ESCAPE')) { | 151 | if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ESCAPE')) { |
131 | anEvent.target().value = ""; | 152 | anEvent.target().value = ""; |
132 | } | 153 | } |
133 | 154 | ||
134 | if (anEvent.type() == 'keyup') { | 155 | if (anEvent.type() == 'keyup') { |
135 | MochiKit.Signal.signal(this, 'searchEvent', anEvent.target().value); | 156 | MochiKit.Signal.signal(this, 'searchEvent', anEvent.target().value); |
136 | } | 157 | } |
137 | } | 158 | } |
138 | }, | 159 | }, |
139 | 160 | ||
140 | //------------------------------------------------------------------------- | 161 | //------------------------------------------------------------------------- |
141 | 162 | ||
142 | 'update': function (someObjects) { | 163 | 'update': function (someObjects) { |
143 | varcardListPanel; | 164 | varcardListPanel; |
144 | var i,c; | 165 | var i,c; |
145 | 166 | ||
146 | cardListPanel = this.getElement('cardListPanel'); | 167 | cardListPanel = this.getElement('cardListPanel'); |
147 | cardListPanel.innerHTML = ''; | 168 | cardListPanel.innerHTML = ''; |
148 | 169 | ||
149 | c = someObjects.length; | 170 | c = someObjects.length; |
150 | 171 | ||
151 | for (i=0; i<c; i++) { | 172 | for (i=0; i<c; i++) { |
152 | this.append(cardListPanel, {tag:'li', cls:'cardListItem', id:('cardListItem_' + someObjects[i]['_reference']), children:[ | 173 | this.append(cardListPanel, {tag:'li', cls:'cardListItem', id:('cardListItem_' + someObjects[i]['_reference']), children:[ |