diff options
Diffstat (limited to 'js/components/layout')
-rwxr-xr-x | js/components/layout/document-bar.reel/document-bar.html | 26 | ||||
-rwxr-xr-x | js/components/layout/document-bar.reel/document-bar.js | 289 |
2 files changed, 189 insertions, 126 deletions
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html index 9e5e4eb2..f073b0e7 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html | |||
@@ -75,20 +75,18 @@ POSSIBILITY OF SUCH DAMAGE. | |||
75 | "element": {"#": "previewButton"}, | 75 | "element": {"#": "previewButton"}, |
76 | "identifier": "preview", | 76 | "identifier": "preview", |
77 | "label": "Preview" | 77 | "label": "Preview" |
78 | }, | 78 | } |
79 | "listeners": [ | ||
80 | { | ||
81 | "type": "action", | ||
82 | "listener": {"@": "owner"} | ||
83 | } | ||
84 | ] | ||
85 | }, | 79 | }, |
80 | |||
86 | 81 | ||
87 | "owner": { | 82 | "owner": { |
88 | "prototype": "js/components/layout/document-bar.reel", | 83 | "prototype": "js/components/layout/document-bar.reel", |
89 | "properties": { | 84 | "properties": { |
90 | "element": {"#": "documentBar"}, | 85 | "element": {"#": "documentBar"}, |
91 | "zoomControl": {"@": "hottext1"} | 86 | "zoomControl": {"@": "hottext1"}, |
87 | "btnDesign": {"#": "buttonDesign"}, | ||
88 | "btnCode": {"#": "buttonCode"}, | ||
89 | "btnPreview": {"#": "buttonPreview"} | ||
92 | } | 90 | } |
93 | } | 91 | } |
94 | } | 92 | } |
@@ -108,7 +106,7 @@ POSSIBILITY OF SUCH DAMAGE. | |||
108 | 106 | ||
109 | </section> | 107 | </section> |
110 | 108 | ||
111 | <section> | 109 | <section data-montage-id="buttonDesign"> |
112 | 110 | ||
113 | <div class="viewicon viewdesign"></div> | 111 | <div class="viewicon viewdesign"></div> |
114 | 112 | ||
@@ -116,7 +114,7 @@ POSSIBILITY OF SUCH DAMAGE. | |||
116 | 114 | ||
117 | </section> | 115 | </section> |
118 | 116 | ||
119 | <section class="inactive"> | 117 | <section data-montage-id="buttonCode"> |
120 | 118 | ||
121 | <div class="viewicon viewcode"></div> | 119 | <div class="viewicon viewcode"></div> |
122 | 120 | ||
@@ -124,7 +122,7 @@ POSSIBILITY OF SUCH DAMAGE. | |||
124 | 122 | ||
125 | </section> | 123 | </section> |
126 | 124 | ||
127 | <section class="inactive"> | 125 | <section data-montage-id="buttonPreview" class="inactive"> |
128 | 126 | ||
129 | <div class="viewicon viewPreview"></div> | 127 | <div class="viewicon viewPreview"></div> |
130 | 128 | ||
@@ -132,7 +130,11 @@ POSSIBILITY OF SUCH DAMAGE. | |||
132 | 130 | ||
133 | </section> | 131 | </section> |
134 | 132 | ||
135 | <div data-montage-id="disabledCondition" class="panelDisabled"></div> | 133 | <div data-montage-id="disabledCondition" class="panelDisabled"> |
134 | |||
135 | </div> | ||
136 | |||
137 | <div data-montage-id="codeViewOptions" class="viewOptions"></div> | ||
136 | 138 | ||
137 | </div> | 139 | </div> |
138 | 140 | ||
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index fa0c8788..bf84c652 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js | |||
@@ -29,140 +29,157 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE | |||
29 | POSSIBILITY OF SUCH DAMAGE. | 29 | POSSIBILITY OF SUCH DAMAGE. |
30 | </copyright> */ | 30 | </copyright> */ |
31 | 31 | ||
32 | var Montage = require("montage/core/core").Montage; | 32 | //////////////////////////////////////////////////////////////////////// |
33 | var Component = require("montage/ui/component").Component; | 33 | // |
34 | 34 | var Montage = require("montage/core/core").Montage, | |
35 | Component = require("montage/ui/component").Component; | ||
36 | //////////////////////////////////////////////////////////////////////// | ||
37 | // | ||
35 | exports.DocumentBar = Montage.create(Component, { | 38 | exports.DocumentBar = Montage.create(Component, { |
36 | 39 | //////////////////////////////////////////////////////////////////// | |
37 | _currentDocument: { | 40 | // |
38 | enumerable: false, | 41 | _currentDocument: {value: null}, |
39 | value: null | 42 | //////////////////////////////////////////////////////////////////// |
40 | }, | 43 | // |
41 | |||
42 | currentDocument: { | 44 | currentDocument: { |
43 | enumerable: false, | 45 | get: function() {return this._currentDocument;}, |
44 | get: function() { | ||
45 | return this._currentDocument; | ||
46 | }, | ||
47 | set: function(value) { | 46 | set: function(value) { |
47 | // | ||
48 | if (value === this._currentDocument) { | 48 | if (value === this._currentDocument) { |
49 | return; | 49 | return; |
50 | } | 50 | } |
51 | 51 | // | |
52 | this._currentDocument = value; | 52 | this._currentDocument = value; |
53 | |||
54 | this.disabled = !this._currentDocument; | 53 | this.disabled = !this._currentDocument; |
54 | // | ||
55 | if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.design) { | ||
56 | this.btnCode.setAttribute('class', 'inactive'); | ||
57 | this.btnDesign.removeAttribute('class'); | ||
58 | } else if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.code) { | ||
59 | this.btnDesign.setAttribute('class', 'inactive'); | ||
60 | this.btnCode.removeAttribute('class'); | ||
61 | } | ||
62 | // | ||
63 | this.visible = true; | ||
55 | 64 | ||
56 | if(this._currentDocument && this._currentDocument.currentView === "design") { | 65 | //TODO: check if the code's options bar can be unified |
57 | this.visible = true; | 66 | if(this._currentDocument && this._currentDocument.model && (this._currentDocument.model.views.design === null) && (this._currentDocument.model.views.code !== null)){ |
58 | } else if(this._currentDocument && this._currentDocument.currentView === "code") { | ||
59 | this.visible = false; | 67 | this.visible = false; |
60 | } | 68 | } |
61 | } | 69 | } |
62 | }, | 70 | }, |
63 | 71 | //////////////////////////////////////////////////////////////////// | |
64 | _visible: { | 72 | // |
65 | value: false | 73 | _codeEditorWrapper:{ |
74 | value: null | ||
66 | }, | 75 | }, |
67 | 76 | //////////////////////////////////////////////////////////////////// | |
68 | visible: { | 77 | // |
69 | get: function() { | 78 | codeEditorWrapper:{ |
70 | return this._visible; | 79 | get: function() {return this._codeEditorWrapper;}, |
71 | }, | ||
72 | set: function(value) { | 80 | set: function(value) { |
73 | if(this._visible !== value) { | 81 | // |
74 | this._visible = value; | 82 | if(this._codeEditorWrapper !== value){ |
75 | this.needsDraw = true; | 83 | this._codeEditorWrapper = value; |
76 | } | 84 | } |
77 | } | 85 | } |
78 | }, | 86 | }, |
79 | 87 | //////////////////////////////////////////////////////////////////// | |
80 | designView: { | 88 | // |
89 | btnCode: { | ||
81 | value: null | 90 | value: null |
82 | }, | 91 | }, |
83 | 92 | //////////////////////////////////////////////////////////////////// | |
84 | codeView: { | 93 | // |
94 | btnDesign: { | ||
85 | value: null | 95 | value: null |
86 | }, | 96 | }, |
87 | 97 | //////////////////////////////////////////////////////////////////// | |
88 | zoomControl: { | 98 | // |
89 | value: null, | 99 | btnPreview: { |
90 | serializable: true | ||
91 | }, | ||
92 | |||
93 | _type: { | ||
94 | value: null | 100 | value: null |
95 | }, | 101 | }, |
96 | 102 | //////////////////////////////////////////////////////////////////// | |
97 | type: { | 103 | // |
98 | enumerable: false, | 104 | _visible: { |
99 | get: function() { return this._type; }, | 105 | value: false |
100 | set: function(value) { | ||
101 | if (this._type === value) { | ||
102 | return; | ||
103 | } | ||
104 | |||