3 files changed, 113 insertions, 121 deletions
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index ce7072c7..8afb52a2 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -14,24 +14,37 @@
  width: 100%;
  height: 100%;
  overflow:auto;
-  /*display: none;*/
+  cursor:text;
 }
-/* OLD CSS for reference
+.codeViewContainer .CodeMirror {
-#mainContent #codeMirror_1 {
-    height:100%;
-}
-*/
-.CodeMirror {
    width: 100%;
    height: 100%;
    background: white;
 }
-.CodeMirror .CodeMirror-scroll {
+.codeViewContainer .CodeMirror-scroll {
    height: 100%;
-    overflow: scroll;
+    overflow: auto;
-    overflow-x: auto;
+}
-    overflow-y: auto;
+.codeViewContainer>div{
+    width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/
 }
+span.CodeMirror-matchhighlight { background: #e9e9e9 }
+.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
+div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
+.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
+.CodeMirror-completions {z-index:6001 !important;}
+.cm-s-default .activeline {background: #e8f2ff; !important}
+.cm-s-eclipse .activeline {background: #e8f2ff; !important}
+.cm-s-elegant .activeline {background: #e8f2ff; !important}
+.cm-s-neat .activeline {background: #e8f2ff; !important}
+.cm-s-night .activeline {background: #8da6ce; !important}
+.cm-s-cobalt .activeline {background: #8da6ce; !important}
+.cm-s-monokai .activeline {background: #8da6ce; !important}
+.cm-s-rubyblue .activeline {background: #3E7087; !important}
+.cm-s-lesser-dark .activeline {background: #8da6ce; !important}
+.cm-s-xq-dark .activeline {background: #8da6ce; !important}
+\ No newline at end of file
diff --git a/js/stage/stage-view.reel/stage-view.html b/js/stage/stage-view.reel/stage-view.html
index ee8fa315..3680e8b5 100755
--- a/js/stage/stage-view.reel/stage-view.html
+++ b/js/stage/stage-view.reel/stage-view.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -12,8 +12,7 @@
    <script type="text/montage-serialization">
        {
            "owner": {
-                "module": "js/stage/stage-view.reel",
+                "prototype": "js/stage/stage-view.reel",
-                "name": "StageView",
                "properties": {
                    "element": {"#": "codeViewContainer"}
                }
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index 1f471431..518c3bdd 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -52,12 +52,11 @@ exports.StageView = Montage.create(Component, {
    },
    /**
-     * Creates a text area which will contain the content of the opened text document.
+     * Public method
+     * Creates a textarea element which will contain the content of the opened text document.
     */
    createTextAreaElement: {
        value: function(uuid) {
            var codeMirrorDiv = document.createElement("div");
            codeMirrorDiv.id = "codeMirror_"  + uuid;
            codeMirrorDiv.style.display = "block";
@@ -66,19 +65,22 @@ exports.StageView = Montage.create(Component, {
            var textArea = document.createElement("textarea");
            textArea.id = "code";
            textArea.name = "code";
            codeMirrorDiv.appendChild(textArea);
            return textArea;
        }
    },
-    // Temporary function to create a Codemirror text view
+    /**
+     * Public method
+     * Creates a new instance of a code editor
+     */
    createTextView: {
        value: function(doc) {
+            var type;
            this.application.ninja.documentController._hideCurrentDocument();
            this.hideOtherDocuments(doc.uuid);
-            var type;
            switch(doc.documentType) {
                case  "css" :
                    type = "css";
@@ -86,43 +88,51 @@ exports.StageView = Montage.create(Component, {
                case "js" :
                    type = "javascript";
                    break;
+                case "html" :
+                    type = "htmlmixed";
+                    break;
+                case "json" :
+                    type = "javascript";
+                    break;
+                case "php" :
+                    type = "php";
+                    break;
+                case "pl" :
+                    type = "perl";
+                    break;
+                case "py" :
+                    type = "python";
+                    break;
+                case "rb" :
+                    type = "ruby";
+                    break;
+                case "xml" :
+                    type = "xml";
+                    break;
            }
-            //fix hack
            document.getElementById("codeMirror_"+doc.uuid).style.display="block";
-            var documentController = this.application.ninja.documentController;
+            doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type, doc.documentType);
-            doc.editor = CodeMirror.fromTextArea(doc.textArea, {
+            doc.editor.hline = doc.editor.setLineClass(0, "activeline");
-                lineNumbers: true,
-                       mode: type,
-                       onChange: function(){
-                           var historySize = doc.editor.historySize();
-                           if(historySize.undo>0){
-                                doc.needsSave = true;
-                           }else if(historySize.undo===0 && historySize.redo>0){
-                               doc.needsSave = false;
-                           }
-                       },
-                       onCursorActivity: function() {
-                           //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null);
-                           //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline");
-                       }
-           });
-           //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline");
            this.application.ninja.stage._scrollFlag = false;    // TODO HACK to prevent type error on Hide/Show Iframe
            this.application.ninja.documentController.activeDocument = doc;
            this.application.ninja.stage.hideCanvas(true);
            document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view
+            this.showCodeViewBar(true);
+            this.application.ninja.codeEditorController.applySettings();
+            this.collapseAllPanels();
        }
    },
-    //called for switching between html documents
+    /**
+     * Public method
+     * Switches between documents. Document state data is saved and restored whereever applicable
+     */
    switchDocument:{
        value: function(doc){
            this.application.ninja.documentController._hideCurrentDocument();
            this.application.ninja.documentController.activeDocument = doc;
            if(this.application.ninja.documentController.activeDocument.currentView === "design") {
@@ -131,62 +141,37 @@ exports.StageView = Montage.create(Component, {
            this.application.ninja.stage._scrollFlag = false;    // TODO HACK to prevent type error on Hide/Show Iframe
            this.application.ninja.documentController._showCurrentDocument();
+            //focus editor
-            //focus current document
            if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){
-                document.getElementById("codeMirror_"+this.application.ninja.documentController.activ

diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css index ce7072c7..8afb52a2 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css
@@ -14,24 +14,37 @@
14	width: 100%;	14	width: 100%;
15	height: 100%;	15	height: 100%;
16	overflow:auto;	16	overflow:auto;
17	/display: none;/	17	cursor:text;
18	}	18	}
19		19
20	/* OLD CSS for reference	20	.codeViewContainer .CodeMirror {
21	#mainContent #codeMirror_1 {
22	height:100%;
23	}
24	*/
25
26	.CodeMirror {
27	width: 100%;	21	width: 100%;
28	height: 100%;	22	height: 100%;
29	background: white;	23	background: white;
30	}	24	}
31		25
32	.CodeMirror .CodeMirror-scroll {	26	.codeViewContainer .CodeMirror-scroll {
33	height: 100%;	27	height: 100%;
34	overflow: scroll;	28	overflow: auto;
35	overflow-x: auto;	29	}
36	overflow-y: auto;	30
		31	.codeViewContainer>div{
		32	width:2500px;/to prevent scrolling of editor container in the middle of the page for short files/
37	}	33	}
		34
		35	span.CodeMirror-matchhighlight { background: #e9e9e9 }
		36	.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
		37	div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
		38	.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
		39	.CodeMirror-completions {z-index:6001 !important;}
		40
		41	.cm-s-default .activeline {background: #e8f2ff; !important}
		42	.cm-s-eclipse .activeline {background: #e8f2ff; !important}
		43	.cm-s-elegant .activeline {background: #e8f2ff; !important}
		44	.cm-s-neat .activeline {background: #e8f2ff; !important}
		45	.cm-s-night .activeline {background: #8da6ce; !important}
		46	.cm-s-cobalt .activeline {background: #8da6ce; !important}
		47	.cm-s-monokai .activeline {background: #8da6ce; !important}
		48	.cm-s-rubyblue .activeline {background: #3E7087; !important}
		49	.cm-s-lesser-dark .activeline {background: #8da6ce; !important}
		50	.cm-s-xq-dark .activeline {background: #8da6ce; !important} \ No newline at end of file


diff --git a/js/stage/stage-view.reel/stage-view.html b/js/stage/stage-view.reel/stage-view.html index ee8fa315..3680e8b5 100755 --- a/js/stage/stage-view.reel/stage-view.html +++ b/js/stage/stage-view.reel/stage-view.html
@@ -1,4 +1,4 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<!-- <copyright>	2	<!-- <copyright>
3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
@@ -12,8 +12,7 @@
12	<script type="text/montage-serialization">	12	<script type="text/montage-serialization">
13	{	13	{
14	"owner": {	14	"owner": {
15	"module": "js/stage/stage-view.reel",	15	"prototype": "js/stage/stage-view.reel",
16	"name": "StageView",
17	"properties": {	16	"properties": {
18	"element": {"#": "codeViewContainer"}	17	"element": {"#": "codeViewContainer"}
19	}	18	}


diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index 1f471431..518c3bdd 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js
@@ -52,12 +52,11 @@ exports.StageView = Montage.create(Component, {
52	},	52	},
53		53
54	/**	54	/**
55	* Creates a text area which will contain the content of the opened text document.	55	* Public method
		56	* Creates a textarea element which will contain the content of the opened text document.
56	*/	57	*/
57	createTextAreaElement: {	58	createTextAreaElement: {
58	value: function(uuid) {	59	value: function(uuid) {
59
60
61	var codeMirrorDiv = document.createElement("div");	60	var codeMirrorDiv = document.createElement("div");
62	codeMirrorDiv.id = "codeMirror_" + uuid;	61	codeMirrorDiv.id = "codeMirror_" + uuid;
63	codeMirrorDiv.style.display = "block";	62	codeMirrorDiv.style.display = "block";
@@ -66,19 +65,22 @@ exports.StageView = Montage.create(Component, {
66	var textArea = document.createElement("textarea");	65	var textArea = document.createElement("textarea");
67	textArea.id = "code";	66	textArea.id = "code";
68	textArea.name = "code";	67	textArea.name = "code";
69
70	codeMirrorDiv.appendChild(textArea);	68	codeMirrorDiv.appendChild(textArea);
71		69
72	return textArea;	70	return textArea;
73	}	71	}
74	},	72	},
75		73
76	// Temporary function to create a Codemirror text view	74	/**
		75	* Public method
		76	* Creates a new instance of a code editor
		77	*/
77	createTextView: {	78	createTextView: {
78	value: function(doc) {	79	value: function(doc) {
		80	var type;
79	this.application.ninja.documentController._hideCurrentDocument();	81	this.application.ninja.documentController._hideCurrentDocument();
80	this.hideOtherDocuments(doc.uuid);	82	this.hideOtherDocuments(doc.uuid);
81	var type;	83
82	switch(doc.documentType) {	84	switch(doc.documentType) {
83	case "css" :	85	case "css" :
84	type = "css";	86	type = "css";
@@ -86,43 +88,51 @@ exports.StageView = Montage.create(Component, {
86	case "js" :	88	case "js" :
87	type = "javascript";	89	type = "javascript";
88	break;	90	break;
		91	case "html" :
		92	type = "htmlmixed";
		93	break;
		94	case "json" :
		95	type = "javascript";
		96	break;
		97	case "php" :
		98	type = "php";
		99	break;
		100	case "pl" :
		101	type = "perl";
		102	break;
		103	case "py" :
		104	type = "python";
		105	break;
		106	case "rb" :
		107	type = "ruby";
		108	break;
		109	case "xml" :
		110	type = "xml";
		111	break;
89	}	112	}
90
91	//fix hack
92	document.getElementById("codeMirror_"+doc.uuid).style.display="block";	113	document.getElementById("codeMirror_"+doc.uuid).style.display="block";
93		114
94	var documentController = this.application.ninja.documentController;	115	doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type, doc.documentType);
95	doc.editor = CodeMirror.fromTextArea(doc.textArea, {	116	doc.editor.hline = doc.editor.setLineClass(0, "activeline");
96	lineNumbers: true,	117
97	mode: type,
98	onChange: function(){
99	var historySize = doc.editor.historySize();
100	if(historySize.undo>0){
101	doc.needsSave = true;
102	}else if(historySize.undo===0 && historySize.redo>0){
103	doc.needsSave = false;
104	}
105	},
106	onCursorActivity: function() {
107	//documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null);
108	//documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline");
109	}
110	});
111
112	//this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline");
113	this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe	118	this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe
114	this.application.ninja.documentController.activeDocument = doc;	119	this.application.ninja.documentController.activeDocument = doc;
115	this.application.ninja.stage.hideCanvas(true);	120	this.application.ninja.stage.hideCanvas(true);
116
117	document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view	121	document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view
		122
		123	this.showCodeViewBar(true);
		124	this.application.ninja.codeEditorController.applySettings();
		125	this.collapseAllPanels();
118	}	126	}
119	},	127	},
120		128
121	//called for switching between html documents	129	/**
		130	* Public method
		131	* Switches between documents. Document state data is saved and restored whereever applicable
		132	*/
122	switchDocument:{	133	switchDocument:{
123	value: function(doc){	134	value: function(doc){
124	this.application.ninja.documentController._hideCurrentDocument();	135	this.application.ninja.documentController._hideCurrentDocument();
125
126	this.application.ninja.documentController.activeDocument = doc;	136	this.application.ninja.documentController.activeDocument = doc;
127		137
128	if(this.application.ninja.documentController.activeDocument.currentView === "design") {	138	if(this.application.ninja.documentController.activeDocument.currentView === "design") {
@@ -131,62 +141,37 @@ exports.StageView = Montage.create(Component, {
131		141
132	this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe	142	this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe
133	this.application.ninja.documentController._showCurrentDocument();	143	this.application.ninja.documentController._showCurrentDocument();
134		144	//focus editor
135	//focus current document
136	if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){	145	if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){
137	document.getElementById("codeMirror_"+this.application.ninja.documentController.activ