Diffstat (limited to 'frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js | 85 |
1 files changed, 69 insertions, 16 deletions
diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js b/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js index df514a2..12ddce3 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js | |||
@@ -39,2 +39,3 @@ Clipperz.PM.UI.Components.CardDetail = React.createClass({ | |||
39 | // searchTimer: null, | 39 | // searchTimer: null, |
40 | unmaskedFields: new Clipperz.Set(), | ||
40 | starred: false | 41 | starred: false |
@@ -47,2 +48,28 @@ Clipperz.PM.UI.Components.CardDetail = React.createClass({ | |||
47 | 48 | ||
49 | toggleFieldVisibility: function (aField, anEvent) { | ||
50 | var unmaskedFields; | ||
51 | var fieldReference; | ||
52 | |||
53 | unmaskedFields = this.state['unmaskedFields']; | ||
54 | fieldReference = aField['reference'] | ||
55 | if (unmaskedFields.contains(fieldReference)) { | ||
56 | unmaskedFields.remove(fieldReference) | ||
57 | } else { | ||
58 | unmaskedFields.add(fieldReference) | ||
59 | } | ||
60 | |||
61 | this.setState({'unmaskedFields': unmaskedFields}); | ||
62 | }, | ||
63 | |||
64 | handleGoAction: function (aField, anEvent) { | ||
65 | var newWindow; | ||
66 | |||
67 | newWindow = MochiKit.DOM.currentWindow().open(aField['value'], '_blank'); | ||
68 | newWindow.focus(); | ||
69 | }, | ||
70 | |||
71 | handleEmailAction: function (aField, anEvent) { | ||
72 | MochiKit.DOM.currentWindow().location = 'mailto:' + aField['value']; | ||
73 | }, | ||
74 | |||
48 | //========================================================================= | 75 | //========================================================================= |
@@ -63,17 +90,42 @@ Clipperz.PM.UI.Components.CardDetail = React.createClass({ | |||
63 | 90 | ||
64 | renderField: function (aField) { | 91 | renderFieldActionButton: function (aField) { |
65 | //console.log("FIELD", aField); | 92 | // varactionLabel; |
66 | varactionLabel; | 93 | var result; |
67 | 94 | ||
68 | if (aField['actionType'] == 'URL') { | 95 | if (aField['actionType'] == 'URL') { |
69 | actionLabel = "go"; | 96 | result = React.DOM.div({className:'actionWrapper', onClick:MochiKit.Base.method(this, 'handleGoAction', aField)}, [ |
97 | React.DOM.a({className:aField['actionType']}, "go") | ||
98 | ]); | ||
70 | } else if (aField['actionType'] == 'PASSWORD') { | 99 | } else if (aField['actionType'] == 'PASSWORD') { |
71 | actionLabel = "locked"; | 100 | var icon; |
101 | |||
102 | if (this.state['unmaskedFields'].contains(aField['reference'])) { | ||
103 | icon = "unlocked"; | ||
104 | } else { | ||
105 | icon = "locked"; | ||
106 | } | ||
107 | result =React.DOM.div({className:'actionWrapper', onClick:MochiKit.Base.method(this, 'toggleFieldVisibility', aField)}, [ | ||
108 | React.DOM.a({className:aField['actionType']}, icon) | ||
109 | ]); | ||
72 | } else if (aField['actionType'] == 'EMAIL') { | 110 | } else if (aField['actionType'] == 'EMAIL') { |
73 | actionLabel = "email"; | 111 | result =React.DOM.div({className:'actionWrapper', onClick:MochiKit.Base.method(this, 'handleEmailAction', aField)}, [ |
112 | React.DOM.a({className:aField['actionType']}, "email") | ||
113 | ]); | ||
74 | } else { | 114 | } else { |
75 | actionLabel = ""; | 115 | result = null; |
116 | } | ||
117 | |||
118 | return result; | ||
119 | }, | ||
120 | |||
121 | renderField: function (aField) { | ||
122 | //console.log("FIELD", aField); | ||
123 | var fieldExtraClass; | ||
124 | |||
125 | fieldExtraClass = aField['actionType']; | ||
126 | if (this.state['unmaskedFields'].contains(aField['reference'])) { | ||
127 | fieldExtraClass = fieldExtraClass + ' unlocked'; | ||
76 | } | 128 | } |
77 | 129 | ||
78 | returnReact.DOM.div({className:'listItem ' + aField['actionType']}, [ | 130 | returnReact.DOM.div({className:'listItem ' + fieldExtraClass, key:aField['reference']}, [ |
79 | React.DOM.div({className:'fieldWrapper'}, [ | 131 | React.DOM.div({className:'fieldWrapper'}, [ |
@@ -81,8 +133,9 @@ Clipperz.PM.UI.Components.CardDetail = React.createClass({ | |||
81 | React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aField['label'])), | 133 | React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aField['label'])), |
82 | React.DOM.div({className:'valueWrapper'}, React.DOM.span({className:'value ' + aField['actionType']}, this.normalizeFieldValue(aField['value']))) | 134 | React.DOM.div({className:'valueWrapper'}, React.DOM.span({className:'value ' + fieldExtraClass}, this.normalizeFieldValue(aField['value']))) |
83 | ]) | 135 | ]) |
84 | ]), | 136 | ]), |
85 | React.DOM.div({className:'actionWrapper'}, [ | 137 | this.renderFieldActionButton(aField) |
86 | React.DOM.div({className:aField['actionType']}, actionLabel) | 138 | // React.DOM.div({className:'actionWrapper'}, [ |
87 | ]) | 139 | // React.DOM.div({className:aField['actionType']}, actionLabel) |
140 | // ]) | ||
88 | ]); | 141 | ]); |
@@ -100,3 +153,4 @@ Clipperz.PM.UI.Components.CardDetail = React.createClass({ | |||
100 | handleBackClick: function (anEvent) { | 153 | handleBackClick: function (anEvent) { |
101 | window.history.back(); | 154 | // window.history.back(); |
155 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'goBack'); | ||
102 | }, | 156 | }, |
@@ -111,3 +165,3 @@ Clipperz.PM.UI.Components.CardDetail = React.createClass({ | |||
111 | var card = this.props.card; | 165 | var card = this.props.card; |
112 | var starredStatus = (this.state['starred'] ? "starred" : "unstarred"); | 166 | // var starredStatus = (this.state['starred'] ? "starred" : "unstarred"); |
113 | 167 | ||
@@ -120,5 +174,4 @@ Clipperz.PM.UI.Components.CardDetail = React.createClass({ | |||
120 | React.DOM.div({className:'titleWrapper'}, React.DOM.div({className:'title'}, card.title)), | 174 | React.DOM.div({className:'titleWrapper'}, React.DOM.div({className:'title'}, card.title)), |
121 | // React.DOM.div({className:'titleWrapper'}, React.DOM.div({className:'title'}, card.title + ' ' + card.title + ' ' + card.title + ' ' + card.title)), | ||
122 | React.DOM.div({className:'backWrapper'}, React.DOM.a({className:'button back', onClick:this.handleBackClick}, "back")), | 175 | React.DOM.div({className:'backWrapper'}, React.DOM.a({className:'button back', onClick:this.handleBackClick}, "back")), |
123 | React.DOM.div({className:'starWrapper'}, React.DOM.a({className:'star', onClick:this.handleStarClick}, starredStatus)) | 176 | // React.DOM.div({className:'starWrapper'}, React.DOM.a({className:'star', onClick:this.handleStarClick}, starredStatus)) |
124 | ]), | 177 | ]), |