From a402ae19732f7aeb53de27e3f25f72e9c42a453c Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 16 Jul 2012 14:50:50 -0700 Subject: New: Added switching view functionality to document UI This now let's you switch between code and design views in all documents opened that support design view. Code view for these documents is currently unsupported, so this is just to hook up the UI to the new methods. Code view will be added next. --- js/document/document-html.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 142ffe4a..5079cfca 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -130,6 +130,8 @@ exports.HtmlDocument = Montage.create(Component, { this._observer = null; } }, + //////////////////////////////////////////////////////////////////// + // handleViewReady: { value: function(mObjects) { this.model.mObjects = mObjects; -- cgit v1.2.3 From 17d464e5bd224cdd8940855409359b411325f1df Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 17 Jul 2012 11:25:41 -0700 Subject: New: Adding re-render method to switching view This now re-renders the design view when switching from code view. There are many outstanding issues, the Time-Line completely breaks and blocks Ninja, it is unknown why, there are too many dependencies. To make it work, we disabled that feature, although this check in does not include that, so it can be fixed proper. Also, the document controller creates a new tab per switch as it does not check that it is the same document. That bug must also be fixed. Finally, we need to hook up a new code view to the document, the current code view will not work as desired, so a new code view must be built and implemented. --- js/document/document-html.js | 41 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 5079cfca..b7dacf6a 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -76,7 +76,7 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // init: { - value:function(file, context, callback, view, template) { + value: function(file, context, callback, view, template) { //Storing callback data for loaded dispatch this.loaded.callback = callback; this.loaded.context = context; @@ -122,6 +122,44 @@ exports.HtmlDocument = Montage.create(Component, { } }, //////////////////////////////////////////////////////////////////// + //TODO: Make into one method to use here and one init + reloadView: { + value: function (view, template) { + // + this.model.parentContainer.removeChild(this.model.views.design.iframe); + //Initiliazing views and hiding + if (this.model.views.design.initialize(this.model.parentContainer)) { + //Hiding iFrame, just initiliazing + this.model.views.design.hide(); + //Setting the iFrame property for reference in helper class + this.model.webGlHelper.iframe = this.model.views.design.iframe; + } else { + //ERROR: Design View not initialized + } + // + if (view === 'design') { + //TODO: Remove reference and use as part of model + this.currentView = 'design'; + //Setting current view object to design + this.model.currentView = this.model.views.design; + //Showing design iFrame + this.model.views.design.show(); + this.model.views.design.iframe.style.opacity = 0; + this.model.views.design.content = this.model.file.content; + //TODO: Improve reference (probably through binding values) + this.model.views.design._webGlHelper = this.model.webGlHelper; + //Rendering design view, using observers to know when template is ready + this.model.views.design.render(function () { + //Adding observer to know when template is ready + this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); + this._observer.observe(this.model.views.design.document.head, {childList: true}); + }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); + } else { + //TODO: Identify default view (probably code) + } + } + }, + //////////////////////////////////////////////////////////////////// // handleTemplateReady: { value: function (e) { @@ -140,7 +178,6 @@ exports.HtmlDocument = Montage.create(Component, { if(typeof this.model.domContainer !== "undefined") { this.model.domContainer = this.model.documentRoot; } - //Making callback after view is loaded this.loaded.callback.call(this.loaded.context, this); } -- cgit v1.2.3 From c07a7a9d11bc8299fa9686544b18840cc8e640c2 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 23 Jul 2012 16:59:56 -0700 Subject: show design code editor - first cut Signed-off-by: Ananya Sen --- js/document/document-html.js | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index b7dacf6a..76157a07 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -34,7 +34,8 @@ POSSIBILITY OF SUCH DAMAGE. var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, - DesignDocumentView = require("js/document/views/design").DesignDocumentView; + DesignDocumentView = require("js/document/views/design").DesignDocumentView, + DesignCodeView = require("js/document/views/design-code").DesignCodeView; //////////////////////////////////////////////////////////////////////// // exports.HtmlDocument = Montage.create(Component, { @@ -77,6 +78,7 @@ exports.HtmlDocument = Montage.create(Component, { // init: { value: function(file, context, callback, view, template) { + var designCodeView = DesignCodeView.create(); //Storing callback data for loaded dispatch this.loaded.callback = callback; this.loaded.context = context; @@ -85,7 +87,7 @@ exports.HtmlDocument = Montage.create(Component, { file: {value: file}, fileTemplate: {value: template}, parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach - views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic + views: {value: {'design': DesignDocumentView.create(), 'code': designCodeView}} //TODO: Add code view logic }); //Calling the any init routines in the model this.model.init(); @@ -98,6 +100,14 @@ exports.HtmlDocument = Montage.create(Component, { } else { //ERROR: Design View not initialized } + + + //initialize the code view for the html document and hide it since design is the default view + this.model.views.code.initialize(this.model.parentContainer); + + this.model.views.code.hide(); + + // if (view === 'design') { //TODO: Remove reference and use as part of model @@ -125,6 +135,7 @@ exports.HtmlDocument = Montage.create(Component, { //TODO: Make into one method to use here and one init reloadView: { value: function (view, template) { + var content; // this.model.parentContainer.removeChild(this.model.views.design.iframe); //Initiliazing views and hiding @@ -154,8 +165,18 @@ exports.HtmlDocument = Montage.create(Component, { this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); this._observer.observe(this.model.views.design.document.head, {childList: true}); }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); - } else { + } else if(view === 'code'){ //TODO: Identify default view (probably code) + + //TODO:get the html content from the document + content = ''+this.model.file.content.head+''+this.model.file.content.body+'';//dummy + + this.model.views.code.load(content); + + //Setting current view object to code + this.currentView = 'code'; + this.model.currentView = this.model.views.code; + } } }, -- cgit v1.2.3 From 5946ec8651547f846520add097850470a09df635 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Russo Date: Mon, 23 Jul 2012 19:07:11 -0700 Subject: In Progress: Cleaning up merge Cleaned up new updates. Still pending is adding functionality to parse the document when toggling views and fix Timeline errors. Code view also has some rending issues that will be fixed, this is just a clean up. --- js/document/document-html.js | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 76157a07..569b6d8b 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -35,7 +35,7 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, DesignDocumentView = require("js/document/views/design").DesignDocumentView, - DesignCodeView = require("js/document/views/design-code").DesignCodeView; + CodeDocumentView = require("js/document/views/design-code").DesignCodeView; //////////////////////////////////////////////////////////////////////// // exports.HtmlDocument = Montage.create(Component, { @@ -78,7 +78,6 @@ exports.HtmlDocument = Montage.create(Component, { // init: { value: function(file, context, callback, view, template) { - var designCodeView = DesignCodeView.create(); //Storing callback data for loaded dispatch this.loaded.callback = callback; this.loaded.context = context; @@ -87,7 +86,7 @@ exports.HtmlDocument = Montage.create(Component, { file: {value: file}, fileTemplate: {value: template}, parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach - views: {value: {'design': DesignDocumentView.create(), 'code': designCodeView}} //TODO: Add code view logic + views: {value: {'design': DesignDocumentView.create(), 'code': CodeDocumentView.create()}} //TODO: Add code view logic }); //Calling the any init routines in the model this.model.init(); @@ -101,10 +100,10 @@ exports.HtmlDocument = Montage.create(Component, { //ERROR: Design View not initialized } - + + //TODO: Make sure you have a boolean to indicate if view was initilize and handle errors (just like design view above) //initialize the code view for the html document and hide it since design is the default view this.model.views.code.initialize(this.model.parentContainer); - this.model.views.code.hide(); @@ -126,8 +125,10 @@ exports.HtmlDocument = Montage.create(Component, { this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); this._observer.observe(this.model.views.design.document.head, {childList: true}); }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); + } else if (view === 'code'){ + //TODO: Add logic to open document in code view since it's now available } else { - //TODO: Identify default view (probably code) + //TODO: Add error handling } } }, @@ -166,17 +167,19 @@ exports.HtmlDocument = Montage.create(Component, { this._observer.observe(this.model.views.design.document.head, {childList: true}); }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); } else if(view === 'code'){ - //TODO: Identify default view (probably code) - - //TODO:get the html content from the document + + + //TODO: Parse in memory document through template to get current document content = ''+this.model.file.content.head+''+this.model.file.content.body+'';//dummy - + + + // this.model.views.code.load(content); - //Setting current view object to code this.currentView = 'code'; this.model.currentView = this.model.views.code; - + } else { + //TODO: Identify default view (probably code) - Error handling } } }, -- cgit v1.2.3 From 2952c2465b9a66076344087f899c5c836ad15ad6 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Russo Date: Mon, 23 Jul 2012 23:05:06 -0700 Subject: New: Adding method to display document in code view Added method to parse in memory document in code view. This allows users to view current in memory document in code view while not saving the document or external files. Still need to handle naming of paths for files that require saving but are not saved (webGL and Montage libraries). Also, need to implement method to switch back from code view to design view, but will need Timeline fixes. --- js/document/document-html.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 569b6d8b..81a8912b 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -135,8 +135,7 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// //TODO: Make into one method to use here and one init reloadView: { - value: function (view, template) { - var content; + value: function (view, template, doc) { // this.model.parentContainer.removeChild(this.model.views.design.iframe); //Initiliazing views and hiding @@ -167,14 +166,13 @@ exports.HtmlDocument = Montage.create(Component, { this._observer.observe(this.model.views.design.document.head, {childList: true}); }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); } else if(view === 'code'){ - - - //TODO: Parse in memory document through template to get current document - content = ''+this.model.file.content.head+''+this.model.file.content.body+'';//dummy - - - // - this.model.views.code.load(content); + //TODO: Add logic to handle external changed files + //Checking for template type and not saving external data + if (doc.template && (doc.template.type === 'banner' || doc.template.type === 'animation')) { + this.model.views.code.load(this.application.ninja.ioMediator.tmplt.parseNinjaTemplateToHtml(false, doc, true, null).content); + } else { + this.model.views.code.load(this.application.ninja.ioMediator.tmplt.parseNinjaTemplateToHtml(false, doc, false, null).content); + } //Setting current view object to code this.currentView = 'code'; this.model.currentView = this.model.views.code; -- cgit v1.2.3 From 5454cc462903c83a8c3651065b03cc1855db125e Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 24 Jul 2012 12:11:53 -0700 Subject: New: Adding method to switch from code to design view Added functionality to parse the code view string back into a Ninja template object to redraw design view. Only outstanding bugs are timeline errors and code view layout issues. --- js/document/document-html.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 81a8912b..a59f5848 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -156,7 +156,7 @@ exports.HtmlDocument = Montage.create(Component, { //Showing design iFrame this.model.views.design.show(); this.model.views.design.iframe.style.opacity = 0; - this.model.views.design.content = this.model.file.content; + this.model.views.design.content = this.application.ninja.ioMediator.tmplt.parseHtmlToNinjaTemplate(doc); //TODO: Improve reference (probably through binding values) this.model.views.design._webGlHelper = this.model.webGlHelper; //Rendering design view, using observers to know when template is ready -- cgit v1.2.3 From db4f235dc9fd6f2242dee481d2f377005cf23596 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 24 Jul 2012 16:56:52 -0700 Subject: adding a viewIdentifier to the model to enable design/code switch Todo: - Cleanup and remove listeners - Finish stage reload - Add remaining bindings. Signed-off-by: Valerio Virgillito --- js/document/document-html.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index a59f5848..f3163339 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -164,7 +164,7 @@ exports.HtmlDocument = Montage.create(Component, { //Adding observer to know when template is ready this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); this._observer.observe(this.model.views.design.document.head, {childList: true}); - }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); + }.bind(this), template, {viewCallback: this.handleReloadViewReady, context: this}); } else if(view === 'code'){ //TODO: Add logic to handle external changed files //Checking for template type and not saving external data @@ -176,6 +176,7 @@ exports.HtmlDocument = Montage.create(Component, { //Setting current view object to code this.currentView = 'code'; this.model.currentView = this.model.views.code; + this.model.currentViewIdentifier = this.model.currentView.identifier; } else { //TODO: Identify default view (probably code) - Error handling } @@ -200,10 +201,22 @@ exports.HtmlDocument = Montage.create(Component, { if(typeof this.model.domContainer !== "undefined") { this.model.domContainer = this.model.documentRoot; } + this.model.currentViewIdentifier = this.model.currentView.identifier; //Making callback after view is loaded this.loaded.callback.call(this.loaded.context, this); } }, + handleReloadViewReady: { + value: function(mObjects) { + this.model.mObjects = mObjects; + // TODO: Find a better way to initialize this property + // Assign the domContainer to be the document root on open + if(typeof this.model.domContainer !== "undefined") { + this.model.domContainer = this.model.documentRoot; + } + this.model.currentViewIdentifier = this.model.currentView.identifier; + } + }, //////////////////////////////////////////////////////////////////// // closeDocument: { -- cgit v1.2.3