From 14de970a4807a74416b4a69398f710cdbe65751e Mon Sep 17 00:00:00 2001 From: Edward Liu Date: Thu, 3 Nov 2016 11:53:41 -0700 Subject: [PATCH 1/3] Remove FTL and FTL references in components and gulp build/tasks --- gulp/ComponentJS.js | 6 +- gulp/Documentation.js | 23 --- gulp/modules/Template.js | 190 ------------------ src/components/Callout/Callout.ts | 1 - src/components/CommandButton/CommandButton.ts | 1 - .../ContextualHost/ContextualHost.ts | 21 +- .../ContextualMenu/ContextualMenu.ts | 1 - src/components/Overlay/Overlay.ts | 7 +- .../templates/componentDemo.html | 1 - 9 files changed, 22 insertions(+), 229 deletions(-) delete mode 100644 gulp/modules/Template.js diff --git a/gulp/ComponentJS.js b/gulp/ComponentJS.js index 8710a5ec..21c04d24 100644 --- a/gulp/ComponentJS.js +++ b/gulp/ComponentJS.js @@ -27,10 +27,8 @@ gulp.task('ComponentJS-copyLib', function() { .pipe(gulp.dest(Config.paths.distLibPath)); }); - - -gulp.task('ComponentJS-typescript', ['Documentation-template'], function() { - var tscResult = gulp.src([Config.paths.src + '/**/*.ts', Config.paths.distJS + "/fabric.templates.ts"]) +gulp.task('ComponentJS-typescript', function() { + var tscResult = gulp.src([Config.paths.src + '/**/*.ts']) .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({ title: "Typescriptingz the file" }))) diff --git a/gulp/Documentation.js b/gulp/Documentation.js index 269c08d8..83e7a2bf 100644 --- a/gulp/Documentation.js +++ b/gulp/Documentation.js @@ -86,27 +86,6 @@ gulp.task('Documentation-handlebars', function(cb) { cb(); }); -gulp.task('Documentation-template', ["Documentation-handlebars"], function(cb) { - var _template = new Template(folderList, Config.paths.distJS, Config.paths.componentsPath, function() { - gulp.src(Config.paths.distJS + "/fabric.templates.ts") - .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData())) - .pipe(Plugins.header(Banners.getJSCopyRight())) - .pipe(Plugins.tsc(Config.typescriptProject)) - .js.pipe(gulp.dest(Config.paths.distJS)) - .on('end', function() { - cb(); - }); - }.bind(this)); - _template.init(); -}); - -gulp.task('Documentation-templateAddHeader', ['Documentation-template'], function(){ - gulp.src(Config.paths.distJS + "/fabric.templates.ts") - .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData())) - .pipe(Plugins.header(Banners.getJSCopyRight())) - .pipe(gulp.dest(Config.paths.distJS)); -}); - // // Sample Component Building // ---------------------------------------------------------------------------- @@ -277,8 +256,6 @@ var DocumentationTasks = [ 'Documentation-copyAssets', 'ComponentJS', 'Documentation-copyIgnoredFiles', - "Documentation-template", - "Documentation-templateAddHeader", "Documentation-buildStyles", "Documentation-convertMarkdown" ]; diff --git a/gulp/modules/Template.js b/gulp/modules/Template.js deleted file mode 100644 index d76fb9fd..00000000 --- a/gulp/modules/Template.js +++ /dev/null @@ -1,190 +0,0 @@ -"use strict"; - -var htmlparser = require("htmlparser2"); -var Handlebars = require('handlebars'); -var fs = require("fs"); -var path = require("path"); -var gulp = require("gulp"); -var Config = require('./Config'); -var Plugins = require('./Plugins'); -var Utilities = require('./Utilities'); -var mkdirp = require('mkdirp'); -var ErrorHandling = require('./ErrorHandling'); -var sys = require('sys') -var exec = require('child_process').exec; - - -// Prep handlebars - // Register all helper - -var Template = function(directories, dist, src, callback) { - var _currentDirectory = 1; // Counter for current directory - var _parserHolder = []; - var _createString = "class FabricTemplateLibrary {"; - var _loadDoms = []; - var _dirX = 0; - var _errorNoRoot = "error! There must be no more than two root elements, all components must have ONE root element"; - var _errorNoElements = "error! You must have atleast one element in the component that is not a comment!"; - var _existingElements = []; - - var _handler = new htmlparser.DomHandler(function (error, dom) { - if (error) { - console.log(error); - } - - _loadDoms.push(dom); - - if (_dirX >= directories.length - 1) { - createComponents(); - } else { - _dirX++; - } - }); - - function configHandlebars() { - var _file; - var _openFile; - - Handlebars.registerHelper("renderPartial", function(partial, props) { - var fileContents = Plugins.fs.readFileSync(Config.paths.componentsPath + '/' + partial + '/' + partial +'.hbs', "utf8"); - var template = Handlebars.compile(fileContents); - var thisProps = {props: props}; - return new Handlebars.SafeString(template(thisProps)); - }); - - for (var i = 0; i < directories.length; i++) { - _file = directories[i]; - _openFile = fs.readFileSync(src + '/' + _file + '/' + _file + '.hbs', "utf8"); - Handlebars.registerPartial(_file, _openFile); - } - } - - function startParsing() { - - for (var x = 0; x < directories.length; x++) { - var _file = directories[x]; - var _srcFolderName = Config.paths.componentsPath + '/' + _file; - var _manifest = Utilities.parseManifest(_srcFolderName + '/' + _file + '.json'); - var _openFile = fs.readFileSync(src + '/' + _file + '/' + _file + '.hbs', "utf8"); - - var _hbsTemplate = Handlebars.compile(_openFile); - var _hbsCompiled = _hbsTemplate(_manifest); - - _parserHolder[x] = new htmlparser.Parser(_handler); - - _parserHolder[x].write(_hbsCompiled); - _parserHolder[x].end(); - _parserHolder[x].reset(); - } - } - - function parseElement(element, elementName, parentElement, parentElementName, isRoot) { - - if(element.type == "comment") { - // DO nothing - } else if(element.type == "text") { - var someText = element.data.replace(/(\r\n|\n|\r)/gm, ""); - _createString += parentElementName + '.innerHTML += "' + someText + '";' + "\r\n"; - } else { - - _createString += 'let ' + elementName + ' = document.createElement("' + element.name + '");' + "\r\n"; - var attributes = element.attribs || {}; - - //Set Attribute - var keys = Object.keys(element.attribs); - - for(var x = 0; x < keys.length; x++) { - var attribName = keys[x]; - var attribValue = element.attribs[attribName].replace(/(\r\n|\n|\r)/gm,""); - _createString += elementName + '.setAttribute("' + attribName + '", "' + attribValue + '");' + "\r\n"; - } - - for(var i = 0; i < element.children.length; i++) { - var newName = elementName + "c" + i; - var child = element.children[i]; - parseElement(child, newName, element, elementName); - } - - if(isRoot) { - // Dont do anything - } else { - // Append this element to the parent element - _createString += parentElementName + '.appendChild(' + elementName + ');' + "\r\n"; - } - } - } - - function getDirectories(srcpath) { - return fs.readdirSync(srcpath).filter(function(file) { - return fs.statSync(path.join(srcpath, file)).isDirectory(); - }); - } - - function purifyClassName(className) { - return className.replace("ms-", ""); - } - - function processDOM(dom) { - var _newDom = []; - - // Go through and remove any comment tags - for (var i = 0; i < dom.length; i++) { - if(dom[i].type != "comment" && dom[i].type != "text") { - _newDom.push(dom[i]); - } - } - - if(_newDom.length > 1) { - ErrorHandling.generatePluginError("Fabric Super Templating Engine 9000", _errorNoRoot); - ErrorHandling.generateBuildError(JSON.stringify(dom)); - } else if(_newDom.length < 1) { - ErrorHandling.generatePluginError("Fabric Super Templating Engine 9000", _errorNoElements); - ErrorHandling.generateBuildError(JSON.stringify(dom)); - } else { - - var _thisDom = _newDom[0]; - var cAttr = _newDom[0].attribs.class.split(" ")[0].replace(/(\r\n|\n|\r)/gm,""); - var rootName = purifyClassName(cAttr); // This would be passed in by folder - var newName = rootName + "0"; - - if(!(rootName in _existingElements)) { - _existingElements.push(rootName); - - _createString += "public " + rootName + "() {"; - - parseElement(_thisDom, newName, { - children: [], - attribs: {class: "document"} - }, "document", true); - - _createString += " return " + newName; - _createString += "}"; - - } - } - } - - function createComponents() { - var _jsPath = dist + '/' + 'fabric.templates' + '.ts'; - for (var x = 0; x < _loadDoms.length; x++) { - processDOM(_loadDoms[x]); - } - _createString += "}" - - mkdirp.sync(dist); - fs.writeFileSync(_jsPath, _createString); - - //Completed - if(callback) { - callback(); - } - } - - this.init = function() { - configHandlebars(); - startParsing(); - }; - -}; - -module.exports = Template; \ No newline at end of file diff --git a/src/components/Callout/Callout.ts b/src/components/Callout/Callout.ts index a0cff4a7..87069be3 100644 --- a/src/components/Callout/Callout.ts +++ b/src/components/Callout/Callout.ts @@ -2,7 +2,6 @@ /// /// -/// /** * Callout diff --git a/src/components/CommandButton/CommandButton.ts b/src/components/CommandButton/CommandButton.ts index e8e58e6b..0cbe5627 100644 --- a/src/components/CommandButton/CommandButton.ts +++ b/src/components/CommandButton/CommandButton.ts @@ -1,6 +1,5 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -/// /// /** diff --git a/src/components/ContextualHost/ContextualHost.ts b/src/components/ContextualHost/ContextualHost.ts index 5da38691..49c0e085 100644 --- a/src/components/ContextualHost/ContextualHost.ts +++ b/src/components/ContextualHost/ContextualHost.ts @@ -1,7 +1,5 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -/// - /** * ContextualHost * @@ -47,7 +45,6 @@ namespace fabric { private _disposalCallback: Function; private _targetElement; private _matchTargetWidth; - private _ftl = new FabricTemplateLibrary(); private _contextualHostMain: Element; private _children: Array; private _hasArrow: boolean; @@ -66,7 +63,7 @@ namespace fabric { this._dismissAction = this._dismissAction.bind(this); this._matchTargetWidth = matchTargetWidth || false; this._direction = direction; - this._container = this._ftl.ContextualHost(); + this._container = this.createContainer(); this._contextualHost = this._container; this._contextualHostMain = this._contextualHost.querySelector(CONTEXT_HOST_MAIN_CLASS); this._contextualHostMain.appendChild(content); @@ -126,6 +123,22 @@ namespace fabric { return this._container.contains(value); } + private createContainer() { + let ContextualHost0 = document.createElement("div"); + ContextualHost0.setAttribute("class", "ms-ContextualHost"); + ContextualHost0.innerHTML += " "; + let ContextualHost0c1 = document.createElement("div"); + ContextualHost0c1.setAttribute("class", "ms-ContextualHost-main"); + ContextualHost0c1.innerHTML += " "; + ContextualHost0.appendChild(ContextualHost0c1); + ContextualHost0.innerHTML += " "; + let ContextualHost0c3 = document.createElement("div"); + ContextualHost0c3.setAttribute("class", "ms-ContextualHost-beak"); + ContextualHost0.appendChild(ContextualHost0c3); + ContextualHost0.innerHTML += ""; + return ContextualHost0; + } + private _openModal(): void { this._copyModalToBody(); this._saveModalSize(); diff --git a/src/components/ContextualMenu/ContextualMenu.ts b/src/components/ContextualMenu/ContextualMenu.ts index ad79fd43..00d5c154 100644 --- a/src/components/ContextualMenu/ContextualMenu.ts +++ b/src/components/ContextualMenu/ContextualMenu.ts @@ -1,6 +1,5 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -/// /// /// diff --git a/src/components/Overlay/Overlay.ts b/src/components/Overlay/Overlay.ts index f69987f8..4896d4a4 100644 --- a/src/components/Overlay/Overlay.ts +++ b/src/components/Overlay/Overlay.ts @@ -1,18 +1,17 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -/// - namespace fabric { export class Overlay { public overlayElement: HTMLElement; - private _ftl = new FabricTemplateLibrary(); constructor(overlayElement?: HTMLElement) { if (overlayElement) { this.overlayElement = overlayElement; } else { - this.overlayElement = this._ftl.Overlay(); + let overlayContainer = document.createElement("div"); + overlayContainer.setAttribute("class", "ms-Overlay"); + this.overlayElement = overlayContainer; } this.overlayElement.addEventListener("click", this.hide.bind(this), false); } diff --git a/src/documentation/templates/componentDemo.html b/src/documentation/templates/componentDemo.html index 940a99d0..1bcee46d 100644 --- a/src/documentation/templates/componentDemo.html +++ b/src/documentation/templates/componentDemo.html @@ -12,7 +12,6 @@ - From 9080b00dfa17787ea5ffd0f8e452ef0d9dfc637d Mon Sep 17 00:00:00 2001 From: Edward Liu Date: Thu, 3 Nov 2016 11:59:02 -0700 Subject: [PATCH 2/3] Modify ContextualHost createContainer to use const vars classes --- src/components/ContextualHost/ContextualHost.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ContextualHost/ContextualHost.ts b/src/components/ContextualHost/ContextualHost.ts index 49c0e085..eb5faec4 100644 --- a/src/components/ContextualHost/ContextualHost.ts +++ b/src/components/ContextualHost/ContextualHost.ts @@ -20,8 +20,8 @@ namespace fabric { const CONTEXT_STATE_CLASS = "is-open"; const MODAL_STATE_POSITIONED = "is-positioned"; - const CONTEXT_HOST_MAIN_CLASS = ".ms-ContextualHost-main"; - const CONTEXT_HOST_BEAK_CLASS = ".ms-ContextualHost-beak"; + const CONTEXT_HOST_MAIN_CLASS = "ms-ContextualHost-main"; + const CONTEXT_HOST_BEAK_CLASS = "ms-ContextualHost-beak"; const ARROW_LEFT_CLASS = "ms-ContextualHost--arrowLeft"; const ARROW_TOP_CLASS = "ms-ContextualHost--arrowTop"; const ARROW_BOTTOM_CLASS = "ms-ContextualHost--arrowBottom"; @@ -65,10 +65,10 @@ namespace fabric { this._direction = direction; this._container = this.createContainer(); this._contextualHost = this._container; - this._contextualHostMain = this._contextualHost.querySelector(CONTEXT_HOST_MAIN_CLASS); + this._contextualHostMain = this._contextualHost.getElementsByClassName(CONTEXT_HOST_MAIN_CLASS)[0]; this._contextualHostMain.appendChild(content); this._hasArrow = hasArrow; - this._arrow = this._container.querySelector(CONTEXT_HOST_BEAK_CLASS); + this._arrow = this._container.getElementsByClassName(CONTEXT_HOST_BEAK_CLASS)[0]; this._targetElement = targetElement; this._openModal(); @@ -128,12 +128,12 @@ namespace fabric { ContextualHost0.setAttribute("class", "ms-ContextualHost"); ContextualHost0.innerHTML += " "; let ContextualHost0c1 = document.createElement("div"); - ContextualHost0c1.setAttribute("class", "ms-ContextualHost-main"); + ContextualHost0c1.setAttribute("class", CONTEXT_HOST_MAIN_CLASS); ContextualHost0c1.innerHTML += " "; ContextualHost0.appendChild(ContextualHost0c1); ContextualHost0.innerHTML += " "; let ContextualHost0c3 = document.createElement("div"); - ContextualHost0c3.setAttribute("class", "ms-ContextualHost-beak"); + ContextualHost0c3.setAttribute("class", CONTEXT_HOST_BEAK_CLASS); ContextualHost0.appendChild(ContextualHost0c3); ContextualHost0.innerHTML += ""; return ContextualHost0; From be8759ca6833699a3bb47ccc5310837e3eff34b9 Mon Sep 17 00:00:00 2001 From: Edward Liu Date: Thu, 3 Nov 2016 13:14:05 -0700 Subject: [PATCH 3/3] Remove Template from Documentation.js --- gulp/Documentation.js | 1 - 1 file changed, 1 deletion(-) diff --git a/gulp/Documentation.js b/gulp/Documentation.js index 83e7a2bf..73fd7c4c 100644 --- a/gulp/Documentation.js +++ b/gulp/Documentation.js @@ -10,7 +10,6 @@ var Plugins = require('./modules/Plugins'); var ComponentHelper = require('./modules/ComponentHelper'); var folderList = Utilities.getFolders(Config.paths.componentsPath); var demoPagesList = Utilities.getFolders(Config.paths.srcDocsPages); -var Template = require('./modules/Template'); var reload = require('require-reload')(require); var BuildConfig = require('./modules/BuildConfig');