From d4976b9e129f690b3255d5c0347c410234f7cefa Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 7 May 2012 16:15:35 -0700 Subject: Extracting CSS methods to parsing class. Need to do the same with webGL. --- js/document/document-html.js | 6 +- js/document/helpers/url-parser.js | 57 ++++++++++++--- js/document/helpers/webgl-parser.js | 23 +++++++ js/document/views/design.js | 134 +++++++++++++----------------------- 4 files changed, 125 insertions(+), 95 deletions(-) create mode 100755 js/document/helpers/webgl-parser.js diff --git a/js/document/document-html.js b/js/document/document-html.js index 79fe461b..567e4455 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -81,6 +81,10 @@ exports.HtmlDocument = Montage.create(Component, { } // 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; @@ -118,8 +122,6 @@ exports.HtmlDocument = Montage.create(Component, { this.loaded.callback.call(this.loaded.context, this); //Setting opacity to be viewable after load this.model.views.design.iframe.style.opacity = 1; - //TODO: Remove, this is a temp hard-coded hack - this.application.ninja.appModel.show3dGrid = true; } } //////////////////////////////////////////////////////////////////// diff --git a/js/document/helpers/url-parser.js b/js/document/helpers/url-parser.js index a1a7406a..5e71d148 100755 --- a/js/document/helpers/url-parser.js +++ b/js/document/helpers/url-parser.js @@ -18,24 +18,65 @@ exports.UrlParser = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // - parseStyles: { - value: function (styles) { + parseStyleUrls: { + value: function (css, href, local) { // + if (local) { + var fileCouldDirUrl = href.split(href.split('/')[href.split('/').length-1])[0]; + } else { + //TODO: Add logic for external URLs + } + //TODO: Clean up functions + css = css.replace(/url\(()(.+?)\1\)/g, parseToNinjaUrl.bind(this)); + // + function parseToNinjaUrl (prop) { + // + return prop.replace(/[^()\\""\\'']+/g, prefixWithNinjaUrl.bind(this)); + } + // + function prefixWithNinjaUrl (url) { + // + if (url !== 'url' && !url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) { + url = fileCouldDirUrl+url; + } + // + return url; + } + // + return css; } }, //////////////////////////////////////////////////////////////////// // loadLocalStyleSheet: { - value: function (path) { - // + value: function (href) { + //Getting file URI (not URL since we must load through I/O API) + var css = {}, file; + css.cssUrl = href.split(this.application.ninja.coreIoApi.rootUrl)[1]; + css.fileUri = this.application.ninja.coreIoApi.cloudData.root + css.cssUrl; + //Loading data from CSS file + file = this.application.ninja.coreIoApi.readFile({uri: css.fileUri}); + //Checking for file to be writable on disk + css.writable = JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: css.fileUri}).content).readOnly; + //Returning loaded file + if (file && file.content) { + //Getting file contents + css.content = this.parseStyleUrls(file.content, href, true); + //Returning CSS object + return css; + } else { + return false; + } } - } - , + }, //////////////////////////////////////////////////////////////////// // loadExternalStyleSheet: { - value: function (path) { - // + value: function (href) { + //Loading external file + var file = this.application.ninja.coreIoApi.readExternalFile({url: href, binary: false}); + //Returning file + return file; } } //////////////////////////////////////////////////////////////////// diff --git a/js/document/helpers/webgl-parser.js b/js/document/helpers/webgl-parser.js new file mode 100755 index 00000000..b52ea52b --- /dev/null +++ b/js/document/helpers/webgl-parser.js @@ -0,0 +1,23 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; +//////////////////////////////////////////////////////////////////////// +// +exports.webGlDocumentParser = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: false + } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// +}); +//////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/document/views/design.js b/js/document/views/design.js index 8c6ace8e..2b8ccb26 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -131,9 +131,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); //Getting style and link tags in document var stags = this.document.getElementsByTagName('style'), - ltags = this.document.getElementsByTagName('link'), - scripttags = this.document.getElementsByTagName('script'), - i, n, webgldata; + ltags = this.document.getElementsByTagName('link'), i, + scripttags = this.document.getElementsByTagName('script'); //Temporarily checking for disabled special case (we must enabled for Ninja to access styles) this.ninjaDisableAttribute(stags); this.ninjaDisableAttribute(ltags); @@ -152,28 +151,16 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } } - //Checking for webGL Data - for (var w in scripttags) { - // - webgldata = null; - // - if (scripttags[w].getAttribute) { - if (scripttags[w].getAttribute('data-ninja-webgl') !== null) { - //TODO: Add logic to handle more than one data tag - webgldata = JSON.parse((scripttags[w].innerHTML.replace("(", "")).replace(")", "")); - } - // - if (webgldata) { - for (n = 0; webgldata.data[n]; n++) { - webgldata.data[n] = unescape(webgldata.data[n]); - } - //this._templateDocument.webgl = webgldata.data; - this.model.glData = webgldata.data; - } - } - } + //Checking and initializing webGL + if (scripttags.length > 0) { + this.initWebGl(scripttags); + } //Else there is not data to parse + + //TODO: Load Montage Components (blocking) + //this.initMontage(); + //Makign callback if specified if (this._callback) this._callback(); @@ -195,31 +182,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } }, //////////////////////////////////////////////////////////////////// - // + //TODO: Move to url-parser helper class getStyleTagFromCssFile: { value: function (linktag) { // - var tag, cssUrl, fileUri, cssData, docRootUrl; + var tag, cssData, + //TODO: Remove usage of hack reference of URL + docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); //Creating style tag to load CSS content into tag = this.document.createElement('style'); tag.setAttribute('type', 'text/css'); - //TODO: Remove usage of hack reference of URL - docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); //Checking for location of href to load (special case for cross-domain) if (linktag.href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) { - //Getting file URI (not URL since we must load through I/O API) - cssUrl = linktag.href.split(this.application.ninja.coreIoApi.rootUrl)[1]; - fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; - //Loading data from CSS file - cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); + //Loading data from file + cssData = this.urlParser.loadLocalStyleSheet(linktag.href); //Setting properties of locally loaded styles - tag.setAttribute('data-ninja-uri', fileUri); - tag.setAttribute('data-ninja-file-url', cssUrl); - tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly); - tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]); + tag.setAttribute('data-ninja-uri', cssData.fileUri); + tag.setAttribute('data-ninja-file-url', cssData.cssUrl); + tag.setAttribute('data-ninja-file-read-only', cssData.writable); + tag.setAttribute('data-ninja-file-name', cssData.cssUrl.split('/')[cssData.cssUrl.split('/').length-1]); } else { //Cross-domain content - cssData = this.application.ninja.coreIoApi.readExternalFile({url: linktag.href, binary: false}); + cssData = this.urlParser.loadExternalStyleSheet(linktag.href); //Setting properties of externally loaded styles tag.setAttribute('data-ninja-external-url', linktag.href); tag.setAttribute('data-ninja-file-read-only', "true"); @@ -235,58 +219,38 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } } - - - - - - - - - - - - //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// - //TODO: Clean up and make proper method - fileCouldDirUrl = linktag.href.split(linktag.href.split('/')[linktag.href.split('/').length-1])[0]; - // - if (cssData && cssData.content) { - tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, parseToNinjaUrl.bind(this)); - } else { - //Error: no data was loaded - } - // - function parseToNinjaUrl (prop) { - // - return prop.replace(/[^()\\""\\'']+/g, prefixWithNinjaUrl.bind(this)); - } - // - function prefixWithNinjaUrl (url) { - // - if (url !== 'url' && !url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) { - url = fileCouldDirUrl+url; - } - // - return url; - } - //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// - - - - - - - // + //Setting content from loaded data + if (cssData.content) tag.innerHTML = cssData.content; + //Returning