author | Clipperz <info@clipperz.com> | 2013-01-08 15:21:04 (UTC) |
---|---|---|
committer | Clipperz <info@clipperz.com> | 2013-01-08 15:21:04 (UTC) |
commit | 816fc35420a434b1d54ae5833d617608f7456048 (patch) (unidiff) | |
tree | 95b8caf354083593d7775e4dda6f4c556b44a2d9 /frontend/gamma/js/Clipperz/PM/UI/Common | |
parent | 267603e3aa3cf0029411e67ae14018b52344c296 (diff) | |
download | clipperz-816fc35420a434b1d54ae5833d617608f7456048.zip clipperz-816fc35420a434b1d54ae5833d617608f7456048.tar.gz clipperz-816fc35420a434b1d54ae5833d617608f7456048.tar.bz2 |
Updated version of /gamma
Tons of changes, included a new draft of the mobile version (still VERY rough)
Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Common') (more/less context) (ignore whitespace changes)
3 files changed, 51 insertions, 21 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js index 2a03fdf..b9d7adf 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js | |||
@@ -385,48 +385,52 @@ Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.BaseComponent, /*Ext.Compo | |||
385 | }, | 385 | }, |
386 | 386 | ||
387 | //------------------------------------------------------------------------- | 387 | //------------------------------------------------------------------------- |
388 | 388 | ||
389 | 'getId': function(aValue) { | 389 | 'getId': function(aValue) { |
390 | varresult; | 390 | varresult; |
391 | 391 | ||
392 | if (typeof(aValue) != 'undefined') { | 392 | if (typeof(aValue) != 'undefined') { |
393 | result = this._ids[aValue]; | 393 | result = this._ids[aValue]; |
394 | 394 | ||
395 | if (typeof(result) == 'undefined') { | 395 | if (typeof(result) == 'undefined') { |
396 | _Clipperz_PM_Components_base_id_ ++; | 396 | _Clipperz_PM_Components_base_id_ ++; |
397 | 397 | ||
398 | result = "Clipperz_PM_Components_" + aValue + "_" + _Clipperz_PM_Components_base_id_; | 398 | result = "Clipperz_PM_Components_" + aValue + "_" + _Clipperz_PM_Components_base_id_; |
399 | this._ids[aValue] = result; | 399 | this._ids[aValue] = result; |
400 | } | 400 | } |
401 | } else { | 401 | } else { |
402 | // result = Clipperz.PM.UI.Common.Components.BaseComponent.superclass.getId.call(this); | 402 | // result = Clipperz.PM.UI.Common.Components.BaseComponent.superclass.getId.call(this); |
403 | throw "call to BaseComponent.getId with an undefined value"; | 403 | throw "call to BaseComponent.getId with an undefined value"; |
404 | } | 404 | } |
405 | 405 | ||
406 | return result; | 406 | return result; |
407 | }, | 407 | }, |
408 | 408 | ||
409 | 'getAnchor': function (aValue) { | ||
410 | return '#' + this.getId(aValue); | ||
411 | }, | ||
412 | |||
409 | //------------------------------------------------------------------------- | 413 | //------------------------------------------------------------------------- |
410 | 414 | ||
411 | 'getElement': function(aValue) { | 415 | 'getElement': function(aValue) { |
412 | return Clipperz.DOM.get(this.getId(aValue)); | 416 | return Clipperz.DOM.get(this.getId(aValue)); |
413 | }, | 417 | }, |
414 | 418 | ||
415 | //------------------------------------------------------------------------- | 419 | //------------------------------------------------------------------------- |
416 | 420 | ||
417 | 'hideElement': function(anElementName) { | 421 | 'hideElement': function(anElementName) { |
418 | MochiKit.Style.hideElement(this.getElement(anElementName)); | 422 | MochiKit.Style.hideElement(this.getElement(anElementName)); |
419 | }, | 423 | }, |
420 | 424 | ||
421 | 'showElement': function(anElementName) { | 425 | 'showElement': function(anElementName) { |
422 | MochiKit.Style.showElement(this.getElement(anElementName)); | 426 | MochiKit.Style.showElement(this.getElement(anElementName)); |
423 | }, | 427 | }, |
424 | 428 | ||
425 | //------------------------------------------------------------------------- | 429 | //------------------------------------------------------------------------- |
426 | 430 | ||
427 | 'activate': function () { | 431 | 'activate': function () { |
428 | this._isActive = true; | 432 | this._isActive = true; |
429 | }, | 433 | }, |
430 | 434 | ||
431 | 'deactivate': function () { | 435 | 'deactivate': function () { |
432 | this._isActive = false; | 436 | this._isActive = false; |
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Button.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Button.js index 716d851..1010c9d 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Button.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Button.js | |||
@@ -41,65 +41,73 @@ Clipperz.PM.UI.Common.Components.Button = function(args) { | |||
41 | 41 | ||
42 | //============================================================================= | 42 | //============================================================================= |
43 | 43 | ||
44 | Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Button, Clipperz.PM.UI.Common.Components.BaseComponent, { | 44 | Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Button, Clipperz.PM.UI.Common.Components.BaseComponent, { |
45 | 45 | ||
46 | //------------------------------------------------------------------------- | 46 | //------------------------------------------------------------------------- |
47 | 47 | ||
48 | 'toString': function () { | 48 | 'toString': function () { |
49 | return "Clipperz.PM.UI.Common.Components.Button component"; | 49 | return "Clipperz.PM.UI.Common.Components.Button component"; |
50 | }, | 50 | }, |
51 | 51 | ||
52 | //------------------------------------------------------------------------- | 52 | //------------------------------------------------------------------------- |
53 | 53 | ||
54 | 'text': function () { | 54 | 'text': function () { |
55 | return this._text; | 55 | return this._text; |
56 | }, | 56 | }, |
57 | 57 | ||
58 | 'isDefault': function () { | 58 | 'isDefault': function () { |
59 | return this._isDefault; | 59 | return this._isDefault; |
60 | }, | 60 | }, |
61 | 61 | ||
62 | //------------------------------------------------------------------------- | 62 | //------------------------------------------------------------------------- |
63 | 63 | ||
64 | 'renderSelf': function () { | 64 | 'renderSelf': function () { |
65 | this.append(this.element(), {tag:'div', id:this.getId('wrapper'), cls:'button_wrapper', children:[ | 65 | /* |
66 | this.append(this.element(), {tag:'div', id:this.getId('button'), cls:'button_wrapper', children:[ | ||
66 | {tag:'div', id:this.getId('bodyWrapper'), cls:'button_bodyWrapper', children:[ | 67 | {tag:'div', id:this.getId('bodyWrapper'), cls:'button_bodyWrapper', children:[ |
67 | {tag:'div', id:this.getId('body'), cls:'button_body', children:[ | 68 | {tag:'div', id:this.getId('body'), cls:'button_body', children:[ |
68 | {tag:'span', html:this.text()} | 69 | {tag:'span', html:this.text()} |
69 | ]}, | 70 | ]}, |
70 | {tag:'div', id:this.getId('footer'), cls:'button_footer'} | 71 | {tag:'div', id:this.getId('footer'), cls:'button_footer'} |
71 | ]} | 72 | ]} |
72 | ]}); | 73 | ]}); |
74 | */ | ||
75 | /* | ||
76 | this.append(this.element(), {tag:'div', id:this.getId('button'), cls:'button', children:[ | ||
77 | {tag:'span', html:this.text()} | ||
78 | ]}); | ||
79 | */ | ||
80 | this.append(this.element(), {tag:'a', id:this.getId('button'), cls:'button', html:this.text()}); | ||
73 | 81 | ||
74 | if (this.isDefault()) { | 82 | if (this.isDefault()) { |
75 | MochiKit.DOM.addElementClass(this.getId('wrapper'), 'default'); | 83 | MochiKit.DOM.addElementClass(this.getId('button'), 'default'); |
76 | } | 84 | } |
77 | 85 | ||
78 | MochiKit.Signal.connect(this.getId('wrapper'), 'onmouseenter',this, 'handleOnMouseEnter'); | 86 | // MochiKit.Signal.connect(this.getId('button'), 'onmouseenter',this, 'handleOnMouseEnter'); |
79 | MochiKit.Signal.connect(this.getId('wrapper'), 'onmouseleave',this, 'handleOnMouseLeave'); | 87 | // MochiKit.Signal.connect(this.getId('button'), 'onmouseleave',this, 'handleOnMouseLeave'); |
80 | MochiKit.Signal.connect(this.getId('wrapper'), 'onmousedown',this, 'handleOnMouseDown'); | 88 | // MochiKit.Signal.connect(this.getId('button'), 'onmousedown',this, 'handleOnMouseDown'); |
81 | MochiKit.Signal.connect(this.getId('wrapper'), 'onclick', this, 'handleOnClick'); | 89 | MochiKit.Signal.connect(this.getId('button'), 'onclick', this, 'handleOnClick'); |
82 | }, | 90 | }, |
83 | 91 | ||
84 | //------------------------------------------------------------------------- | 92 | //------------------------------------------------------------------------- |
85 | 93 | /* | |
86 | 'handleOnMouseEnter': function (anEvent) { | 94 | 'handleOnMouseEnter': function (anEvent) { |
87 | MochiKit.DOM.addElementClass(this.getId('wrapper'), 'hover'); | 95 | MochiKit.DOM.addElementClass(this.getId('button'), 'hover'); |
88 | }, | 96 | }, |
89 | 97 | ||
90 | 'handleOnMouseLeave': function (anEvent) { | 98 | 'handleOnMouseLeave': function (anEvent) { |
91 | MochiKit.DOM.removeElementClass(this.getId('wrapper'), 'hover'); | 99 | MochiKit.DOM.removeElementClass(this.getId('button'), 'hover'); |
92 | MochiKit.DOM.removeElementClass(this.getId('wrapper'), 'clicked'); | 100 | MochiKit.DOM.removeElementClass(this.getId('button'), 'clicked'); |
93 | }, | 101 | }, |
94 | 102 | ||
95 | 'handleOnMouseDown': function (anEvent) { | 103 | 'handleOnMouseDown': function (anEvent) { |
96 | MochiKit.DOM.addElementClass(this.getId('wrapper'), 'clicked'); | 104 | MochiKit.DOM.addElementClass(this.getId('button'), 'clicked'); |
97 | }, | 105 | }, |
98 | 106 | */ | |
99 | 'handleOnClick': function (anEvent) { | 107 | 'handleOnClick': function (anEvent) { |
100 | MochiKit.Signal.signal(this, 'onclick', anEvent); | 108 | MochiKit.Signal.signal(this, 'onclick', anEvent); |
101 | }, | 109 | }, |
102 | 110 | ||
103 | //------------------------------------------------------------------------- | 111 | //------------------------------------------------------------------------- |
104 | __syntaxFix__: "syntax fix" | 112 | __syntaxFix__: "syntax fix" |
105 | }); | 113 | }); |
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/SimpleMessagePanel.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/SimpleMessagePanel.js index 1992154..1d816a9 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/SimpleMessagePanel.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/SimpleMessagePanel.js | |||
@@ -77,93 +77,111 @@ Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.SimpleMessagePanel, Clippe | |||
77 | } | 77 | } |
78 | }, | 78 | }, |
79 | 79 | ||
80 | //------------------------------------------------------------------------- | 80 | //------------------------------------------------------------------------- |
81 | 81 | ||
82 | 'text': function () { | 82 | 'text': function () { |
83 | return this._text; | 83 | return this._text; |
84 | }, | 84 | }, |
85 | 85 | ||
86 | 'setText': function (aValue) { | 86 | 'setText': function (aValue) { |
87 | this._text = aValue; | 87 | this._text = aValue; |
88 | 88 | ||
89 | if (this.getElement('text') != null) { | 89 | if (this.getElement('text') != null) { |
90 | this.getElement('text').innerHTML = aValue; | 90 | this.getElement('text').innerHTML = aValue; |
91 | } | 91 | } |
92 | }, | 92 | }, |
93 | 93 | ||
94 | //------------------------------------------------------------------------- | 94 | //------------------------------------------------------------------------- |
95 | 95 | ||
96 | 'type': function () { | 96 | 'type': function () { |
97 | return this._type; | 97 | return this._type; |
98 | }, | 98 | }, |
99 | 99 | ||
100 | 'setType': function (aValue) { | 100 | 'setType': function (aValue) { |
101 | if (this.getElement('icon') != null) { | 101 | // if (this.getElement('icon') != null) { |
102 | MochiKit.DOM.removeElementClass(this.getId('icon'), this._type); | 102 | // MochiKit.DOM.removeElementClass(this.getId('icon'), this._type); |
103 | MochiKit.DOM.addElementClass(this.getId('icon'), aValue); | 103 | // MochiKit.DOM.addElementClass(this.getId('icon'), aValue); |
104 | } | 104 | // } |
105 | 105 | ||
106 | this._type = aValue; | 106 | this._type = aValue; |
107 | }, | 107 | }, |
108 | 108 | ||
109 | 'icon': function () { | ||
110 | var type = this.type(); | ||
111 | var result; | ||
112 | |||
113 | if (type == 'ALERT') { | ||
114 | result = '!'; | ||
115 | } else if (type == 'INFO') { | ||
116 | result = 'i'; | ||
117 | } else if (type == 'ERROR') { | ||
118 | result = '!'; | ||
119 | } | ||
120 | |||
121 | return result; | ||
122 | }, | ||
123 | |||
109 | //------------------------------------------------------------------------- | 124 | //------------------------------------------------------------------------- |
110 | 125 | ||
111 | 'buttons': function () { | 126 | 'buttons': function () { |
112 | return this._buttons; | 127 | return this._buttons; |
113 | }, | 128 | }, |
114 | 129 | ||
115 | 'setButtons': function (someValues) { | 130 | 'setButtons': function (someValues) { |
116 | MochiKit.Iter.forEach(this.buttonComponents(), MochiKit.Base.methodcaller('clear')); | 131 | MochiKit.Iter.forEach(this.buttonComponents(), MochiKit.Base.methodcaller('clear')); |
117 | 132 | ||
118 | this._buttons = someValues; | 133 | this._buttons = someValues; |
119 | 134 | ||
120 | if (this.getElement('buttonArea') != null) { | 135 | if (this.getElement('buttonArea') != null) { |
121 | this.renderButtons(); | 136 | this.renderButtons(); |
122 | } | 137 | } |
123 | }, | 138 | }, |
124 | 139 | ||
125 | //......................................................................... | 140 | //......................................................................... |
126 | 141 | ||
127 | 'buttonComponents': function () { | 142 | 'buttonComponents': function () { |
128 | return this._buttonComponents; | 143 | return this._buttonComponents; |
129 | }, | 144 | }, |
130 | 145 | ||
131 | //------------------------------------------------------------------------- | 146 | //------------------------------------------------------------------------- |
132 | 147 | ||
133 | 'renderSelf': function() { | 148 | 'renderSelf': function() { |
134 | this.append(this.element(), {tag:'div', cls:'SimpleMessagePanel', id:this.getId('panel'), children: [ | 149 | this.append(this.element(), {tag:'div', cls:'SimpleMessagePanel', id:this.getId('panel'), children: [ |
135 | {tag:'div', cls:'header', children:[]}, | 150 | // {tag:'div', cls:'header', children:[]}, |
136 | {tag:'div', cls:'body', children:[ | 151 | {tag:'div', cls:'body', children:[ |
137 | {tag:'div', id:this.getId('icon'),cls:'img ' + this.type(), children:[{tag:'div'}]}, | 152 | // {tag:'div', id:this.getId('icon'),cls:'img ' + this.type(), children:[{tag:'div'}]}, |
153 | {tag:'div', /*id:this.getId('icon'),*/cls:'img ' + this.type(), children:[{tag:'canvas', id:this.getId('icon')}]}, | ||
138 | {tag:'h3', id:this.getId('title'),html:this.title()}, | 154 | {tag:'h3', id:this.getId('title'),html:this.title()}, |
139 | {tag:'p', id:this.getId('text'),html:this.text()}, | 155 | {tag:'p', id:this.getId('text'),html:this.text()}, |
140 | {tag:'div', id:this.getId('container')}, | 156 | {tag:'div', id:this.getId('container')}, |
141 | {tag:'div', id:this.getId('buttonArea'), cls:'buttonArea', children:[]} | 157 | {tag:'div', id:this.getId('buttonArea'), cls:'buttonArea', children:[]} |
142 | ]}, | 158 | ]} |
143 | {tag:'div', cls:'footer', children:[]} | 159 | // {tag:'div', cls:'footer', children:[]} |
144 | ]}); | 160 | ]}); |
145 | 161 | ||
162 | Clipperz.PM.UI.Canvas.marks[this.icon()](this.getElement('icon'), "#ffffff"); | ||
163 | |||
146 | MochiKit.Signal.connect(this.getId('panel'), 'onkeydown', this, 'keyDownHandler'); | 164 | MochiKit.Signal.connect(this.getId('panel'), 'onkeydown', this, 'keyDownHandler'); |
147 | 165 | ||
148 | this.renderButtons(); | 166 | this.renderButtons(); |
149 | }, | 167 | }, |
150 | 168 | ||
151 | //------------------------------------------------------------------------- | 169 | //------------------------------------------------------------------------- |
152 | 170 | ||
153 | 'renderButtons': function () { | 171 | 'renderButtons': function () { |
154 | this.getElement('buttonArea').innerHTML = ''; | 172 | this.getElement('buttonArea').innerHTML = ''; |
155 | 173 | ||
156 | MochiKit.Base.map(MochiKit.Base.bind(function (aButton) { | 174 | MochiKit.Base.map(MochiKit.Base.bind(function (aButton) { |
157 | var buttonElement; | 175 | var buttonElement; |
158 | var buttonComponent; | 176 | var buttonComponent; |
159 | 177 | ||
160 | // element = this.append(this.getElement('buttonArea'), {tag:'div', cls:'button' + (aButton['isDefault'] === true ? ' default' : ''), children:[ | 178 | // element = this.append(this.getElement('buttonArea'), {tag:'div', cls:'button' + (aButton['isDefault'] === true ? ' default' : ''), children:[ |
161 | // {tag:'a', href:'#'/*, id:this.getId('buttonLink')*/, html:aButton['text']} | 179 | // {tag:'a', href:'#'/*, id:this.getId('buttonLink')*/, html:aButton['text']} |
162 | // ]}); | 180 | // ]}); |
163 | 181 | ||
164 | buttonElement = this.append(this.getElement('buttonArea'), {tag:'div'}); | 182 | buttonElement = this.append(this.getElement('buttonArea'), {tag:'div'}); |
165 | buttonComponent = new Clipperz.PM.UI.Common.Components.Button({'element':buttonElement, 'text':aButton['text'], 'isDefault':aButton['isDefault']}); | 183 | buttonComponent = new Clipperz.PM.UI.Common.Components.Button({'element':buttonElement, 'text':aButton['text'], 'isDefault':aButton['isDefault']}); |
166 | this.buttonComponents().push(buttonComponent); | 184 | this.buttonComponents().push(buttonComponent); |
167 | 185 | ||
168 | MochiKit.Signal.connect(buttonComponent, 'onclick', MochiKit.Base.method(this, 'buttonEventHandler', aButton)); | 186 | MochiKit.Signal.connect(buttonComponent, 'onclick', MochiKit.Base.method(this, 'buttonEventHandler', aButton)); |
169 | }, this), MochiKit.Iter.reversed(this.buttons())); | 187 | }, this), MochiKit.Iter.reversed(this.buttons())); |