Merge pull request #47 from ananyasen/Document

Code view fixes.
author: Jose Antonio Marquez Russo 2012-07-25 13:16:39 -0700
committer: Jose Antonio Marquez Russo 2012-07-25 13:16:39 -0700
commit: 713278ed8a665122b7981769f3404958629f6a3d (patch)
tree: 8a180716f60bf87073233732753da65711c28732 /js
parent: bb2f1d0e9a559f44348e95ad726801a5031aea3a (diff)
parent: e7509af2b2fad6ab23ea07e6e46e88a4ee0d03f1 (diff)
download: ninja-713278ed8a665122b7981769f3404958629f6a3d.tar.gz
7 files changed, 59 insertions, 11 deletions
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
index 476db181..e6cc3763 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
@@ -80,7 +80,7 @@ POSSIBILITY OF SUCH DAMAGE.
 <body>
 <div data-montage-id="viewOptions" class="viewOptions">
    <div>
-        <input class="zoomFont" data-montage-id="zoomFont"/>
+        <input class="zoomFont" data-montage-id="zoomFont" style="display:none;"/>
        <div class="autoCodeComplete" >
            <input type="checkbox" data-montage-id="codeComplete" />
            <label data-montage-id="autoCompleteLabel">Auto Code Hints</label>
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
index e2632d35..2ca6118b 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
@@ -51,14 +51,31 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
            this._currentDocument = value;
-            if(!value || (this._currentDocument.currentView === "design") || ((this._currentDocument.model.views.design !== null))) {
+            if(!value || (this._currentDocument.currentView === "design")) {
                this.visible = false;
-            } else {
+            } else if(this._currentDocument && this._currentDocument.currentView === "code") {
-                this.visible = true;
+                if(this._currentDocument.model.views.design){//code view of design document
+                    this.application.ninja.editorViewOptions.visible = false;
+                    //this.application.ninja.documentBar.codeEditorControls.visible = false;//todo
+                }else if(!this._currentDocument.model.views.design){//code view for text document
+                    this.application.ninja.editorViewOptions.visible = true;
+                    //this.application.ninja.documentBar.codeEditorControls.visible = false;
+                }
                this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];
                this._currentDocument.model.views.code.editor.automaticCodeHint = this.codeCompleteCheck.checked;
            }
+            if(this._currentDocument && (this._currentDocument.currentView === "design")) {
+                this._currentDocument.addPropertyChangeListener("model.currentViewIdentifier", this, false);
+            }
+            //hide the zoom hottext if it is code view of a design file
+            if (this._currentDocument && this._currentDocument.model && this._currentDocument.model.views.code){
+                this.zoomHottext.element.style.display = "block";
+            }
        }
    },
@@ -209,6 +226,18 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
        }
    },
+    handleChange: {
+        value: function(notification) {
+            if(notification.currentPropertyPath === "model.currentViewIdentifier") {
+                if(this.currentDocument.model.currentView.identifier === "design-code") {
+                    //this.application.ninja.documentBar.codeEditorControls.visible = false;//todo
+                } else {
+                    //this.application.ninja.documentBar.codeEditorControls.visible = false;
+                }
+            }
+        }
+    },
    handleFormat:{
        value: function(evt){
            var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index 3e3ac936..f073b0e7 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -77,6 +77,7 @@ POSSIBILITY OF SUCH DAMAGE.
                        "label": "Preview"
                    }
                },
    
                "owner": {
                    "prototype": "js/components/layout/document-bar.reel",
@@ -129,7 +130,11 @@ POSSIBILITY OF SUCH DAMAGE.
            </section>
        
-            <div data-montage-id="disabledCondition" class="panelDisabled"></div>
+            <div data-montage-id="disabledCondition" class="panelDisabled">
+            </div>
+            <div data-montage-id="codeViewOptions" class="viewOptions"></div>
        
        </div>
        
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 0e1df1e9..e95c6614 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -131,7 +131,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
    handleChange: {
        value: function(notification) {
            if(notification.currentPropertyPath === "model.currentViewIdentifier") {
-                if(this.currentDocument.model.currentView.identifier === "design") {
+                if(this.currentDocument && this.currentDocument.model.currentView.identifier === "design") {
                    ///// Stage stylesheet should always be found
                    this._stageStylesheet  = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
                    // Returns null if sheet not found (as in non-ninja projects)
diff --git a/js/document/models/base.js b/js/document/models/base.js
index c44123c3..a73b8b20 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -236,6 +236,8 @@ exports.BaseDocumentModel = Montage.create(Component, {
    //
    save: {
        value: function (callback, libCopyCallback) {
+            var self = this;
            //TODO: Implement on demand logic
            if (this.needsSave) {
                //Save
@@ -270,6 +272,15 @@ exports.BaseDocumentModel = Montage.create(Component, {
                }
            } else if (this.currentView === this.views.code) {
                //TODO: Add save logic for code view
+                //save to textarea
+                self.views.code.editor.save();
+                //save to disk
+                this.application.ninja.ioMediator.fileSave({
+                    mode: 'html-text',
+                    file: self.file,
+                    content:self.views.code.textArea.value
+                }, this.handleSaved.bind({callback: callback, model: this}));
            } else {
                //TODO: Error handle
            }
diff --git a/js/document/views/design-code.js b/js/document/views/design-code.js
index 44d12549..bf6e186f 100644
--- a/js/document/views/design-code.js
+++ b/js/document/views/design-code.js
@@ -70,12 +70,11 @@ exports.DesignCodeView = Montage.create(CodeDocumentView, {
    //
    show: {
        value: function (callback) {
+            this.textViewContainer.setAttribute("class", "codeViewContainer cm-s-default");
            this.textViewContainer.style.display = "block";
-            this.textViewContainer.style.background = "white";
+                        
-            this.textViewContainer.style.height = "100%";
+                        //todo : update options bar
-            //todo : update options bar
            //
            if (callback) callback();
diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css
index 56b4c58c..d1277ef1 100755
--- a/js/stage/stage.reel/stage.css
+++ b/js/stage/stage.reel/stage.css
@@ -68,7 +68,11 @@ POSSIBILITY OF SUCH DAMAGE.
 .codeViewContainer .CodeMirror-scroll {
    height: 100%;
-    overflow: auto;
+    overflow-y: hidden;
+}
+.codeViewContainer .CodeMirror-scrollbar {
+    display:none;
 }
 .codeViewContainer>div{
author	Jose Antonio Marquez Russo	2012-07-25 13:16:39 -0700
committer	Jose Antonio Marquez Russo	2012-07-25 13:16:39 -0700
commit	713278ed8a665122b7981769f3404958629f6a3d (patch)
tree	8a180716f60bf87073233732753da65711c28732 /js
parent	bb2f1d0e9a559f44348e95ad726801a5031aea3a (diff)
parent	e7509af2b2fad6ab23ea07e6e46e88a4ee0d03f1 (diff)
download	ninja-713278ed8a665122b7981769f3404958629f6a3d.tar.gz

diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html index 476db181..e6cc3763 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
@@ -80,7 +80,7 @@ POSSIBILITY OF SUCH DAMAGE.
80	<body>	80	<body>
81	<div data-montage-id="viewOptions" class="viewOptions">	81	<div data-montage-id="viewOptions" class="viewOptions">
82	<div>	82	<div>
83	<input class="zoomFont" data-montage-id="zoomFont"/>	83	<input class="zoomFont" data-montage-id="zoomFont" style="display:none;"/>
84	<div class="autoCodeComplete" >	84	<div class="autoCodeComplete" >
85	<input type="checkbox" data-montage-id="codeComplete" />	85	<input type="checkbox" data-montage-id="codeComplete" />
86	<label data-montage-id="autoCompleteLabel">Auto Code Hints</label>	86	<label data-montage-id="autoCompleteLabel">Auto Code Hints</label>


diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js index e2632d35..2ca6118b 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
@@ -51,14 +51,31 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
51		51
52	this._currentDocument = value;	52	this._currentDocument = value;
53		53
54	if(!value \|\| (this._currentDocument.currentView === "design") \|\| ((this._currentDocument.model.views.design !== null))) {	54	if(!value \|\| (this._currentDocument.currentView === "design")) {
55	this.visible = false;	55	this.visible = false;
56	} else {	56	} else if(this._currentDocument && this._currentDocument.currentView === "code") {
57	this.visible = true;	57
		58	if(this._currentDocument.model.views.design){//code view of design document
		59	this.application.ninja.editorViewOptions.visible = false;
		60	//this.application.ninja.documentBar.codeEditorControls.visible = false;//todo
		61	}else if(!this._currentDocument.model.views.design){//code view for text document
		62	this.application.ninja.editorViewOptions.visible = true;
		63	//this.application.ninja.documentBar.codeEditorControls.visible = false;
		64	}
		65
58	this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];	66	this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];
59	this._currentDocument.model.views.code.editor.automaticCodeHint = this.codeCompleteCheck.checked;	67	this._currentDocument.model.views.code.editor.automaticCodeHint = this.codeCompleteCheck.checked;
60	}	68	}
61		69
		70	if(this._currentDocument && (this._currentDocument.currentView === "design")) {
		71	this._currentDocument.addPropertyChangeListener("model.currentViewIdentifier", this, false);
		72	}
		73
		74	//hide the zoom hottext if it is code view of a design file
		75	if (this._currentDocument && this._currentDocument.model && this._currentDocument.model.views.code){
		76	this.zoomHottext.element.style.display = "block";
		77	}
		78
62	}	79	}
63	},	80	},
64		81
@@ -209,6 +226,18 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
209	}	226	}
210	},	227	},
211		228
		229	handleChange: {
		230	value: function(notification) {
		231	if(notification.currentPropertyPath === "model.currentViewIdentifier") {
		232	if(this.currentDocument.model.currentView.identifier === "design-code") {
		233	//this.application.ninja.documentBar.codeEditorControls.visible = false;//todo
		234	} else {
		235	//this.application.ninja.documentBar.codeEditorControls.visible = false;
		236	}
		237	}
		238	}
		239	},
		240
212	handleFormat:{	241	handleFormat:{
213	value: function(evt){	242	value: function(evt){
214	var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);	243	var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);


diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html index 3e3ac936..f073b0e7 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -77,6 +77,7 @@ POSSIBILITY OF SUCH DAMAGE.
77	"label": "Preview"	77	"label": "Preview"
78	}	78	}
79	},	79	},
		80
80		81
81	"owner": {	82	"owner": {
82	"prototype": "js/components/layout/document-bar.reel",	83	"prototype": "js/components/layout/document-bar.reel",
@@ -129,7 +130,11 @@ POSSIBILITY OF SUCH DAMAGE.
129		130
130	</section>	131	</section>
131		132
132	<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>
133		138
134	</div>	139	</div>
135		140


diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 0e1df1e9..e95c6614 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js
@@ -131,7 +131,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
131	handleChange: {	131	handleChange: {
132	value: function(notification) {	132	value: function(notification) {
133	if(notification.currentPropertyPath === "model.currentViewIdentifier") {	133	if(notification.currentPropertyPath === "model.currentViewIdentifier") {
134	if(this.currentDocument.model.currentView.identifier === "design") {	134	if(this.currentDocument && this.currentDocument.model.currentView.identifier === "design") {
135	///// Stage stylesheet should always be found	135	///// Stage stylesheet should always be found
136	this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);	136	this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
137	// Returns null if sheet not found (as in non-ninja projects)	137	// Returns null if sheet not found (as in non-ninja projects)


diff --git a/js/document/models/base.js b/js/document/models/base.js index c44123c3..a73b8b20 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js
@@ -236,6 +236,8 @@ exports.BaseDocumentModel = Montage.create(Component, {
236	//	236	//
237	save: {	237	save: {
238	value: function (callback, libCopyCallback) {	238	value: function (callback, libCopyCallback) {
		239	var self = this;
		240
239	//TODO: Implement on demand logic	241	//TODO: Implement on demand logic
240	if (this.needsSave) {	242	if (this.needsSave) {
241	//Save	243	//Save
@@ -270,6 +272,15 @@ exports.BaseDocumentModel = Montage.create(Component, {
270	}	272	}
271	} else if (this.currentView === this.views.code) {	273	} else if (this.currentView === this.views.code) {
272	//TODO: Add save logic for code view	274	//TODO: Add save logic for code view
		275	//save to textarea
		276	self.views.code.editor.save();
		277	//save to disk
		278	this.application.ninja.ioMediator.fileSave({
		279	mode: 'html-text',
		280	file: self.file,
		281	content:self.views.code.textArea.value
		282	}, this.handleSaved.bind({callback: callback, model: this}));
		283
273	} else {	284	} else {
274	//TODO: Error handle	285	//TODO: Error handle
275	}	286	}


diff --git a/js/document/views/design-code.js b/js/document/views/design-code.js index 44d12549..bf6e186f 100644 --- a/js/document/views/design-code.js +++ b/js/document/views/design-code.js
@@ -70,12 +70,11 @@ exports.DesignCodeView = Montage.create(CodeDocumentView, {
70	//	70	//
71	show: {	71	show: {
72	value: function (callback) {	72	value: function (callback) {
		73	this.textViewContainer.setAttribute("class", "codeViewContainer cm-s-default");
73		74
74	this.textViewContainer.style.display = "block";	75	this.textViewContainer.style.display = "block";
75	this.textViewContainer.style.background = "white";	76
76	this.textViewContainer.style.height = "100%";	77	//todo : update options bar
77
78	//todo : update options bar
79		78
80	//	79	//
81	if (callback) callback();	80	if (callback) callback();


diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css index 56b4c58c..d1277ef1 100755 --- a/js/stage/stage.reel/stage.css +++ b/js/stage/stage.reel/stage.css
@@ -68,7 +68,11 @@ POSSIBILITY OF SUCH DAMAGE.
68		68
69	.codeViewContainer .CodeMirror-scroll {	69	.codeViewContainer .CodeMirror-scroll {
70	height: 100%;	70	height: 100%;
71	overflow: auto;	71	overflow-y: hidden;
		72	}
		73
		74	.codeViewContainer .CodeMirror-scrollbar {
		75	display:none;
72	}	76	}
73		77
74	.codeViewContainer>div{	78	.codeViewContainer>div{