Remove FTL and FTL references in components and gulp build/tasks

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"
         })))

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');
 
@@ -86,27 +85,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 +255,6 @@ var DocumentationTasks = [
     'Documentation-copyAssets',
     'ComponentJS',
     'Documentation-copyIgnoredFiles',
-    "Documentation-template",
-    "Documentation-templateAddHeader",
     "Documentation-buildStyles",
     "Documentation-convertMarkdown"
 ];

src/components/Callout/Callout.ts

@@ -2,7 +2,6 @@
 
 /// <reference path="../Button/Button.ts"/>
 /// <reference path="../Button/IButton.ts"/>
-/// <reference path="../../../dist/js/fabric.templates.ts"/>
 
 /**
  * Callout

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.
 
-/// <reference path="../../../dist/js/fabric.templates.ts"/>
 /// <reference path="../ContextualHost/ContextualHost.ts"/>
 
 /**

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.
 
-/// <reference path="../../../dist/js/fabric.templates.ts"/>
-
 /**
  * ContextualHost
  *
@@ -22,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";
@@ -47,7 +45,6 @@ namespace fabric {
     private _disposalCallback: Function;
     private _targetElement;
     private _matchTargetWidth;
-    private _ftl = new FabricTemplateLibrary();
     private _contextualHostMain: Element;
     private _children: Array<ContextualHost>;
     private _hasArrow: boolean;
@@ -66,12 +63,12 @@ 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 = 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();
@@ -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", CONTEXT_HOST_MAIN_CLASS);
+      ContextualHost0c1.innerHTML += " ";
+      ContextualHost0.appendChild(ContextualHost0c1);
+      ContextualHost0.innerHTML += " ";
+      let ContextualHost0c3 = document.createElement("div");
+      ContextualHost0c3.setAttribute("class", CONTEXT_HOST_BEAK_CLASS);
+      ContextualHost0.appendChild(ContextualHost0c3);
+      ContextualHost0.innerHTML += "";
+      return ContextualHost0;
+    }
+
     private _openModal(): void {
       this._copyModalToBody();
       this._saveModalSize();

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.
 
-/// <reference path="../../../dist/js/fabric.templates.ts"/>
 /// <reference path="../ContextualHost/ContextualHost.ts"/>
 /// <reference path="../Button/Button.ts"/>
 

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.
 
-/// <reference path="../../../dist/js/fabric.templates.ts"/>
-
 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);
     }

src/documentation/templates/componentDemo.html

@@ -12,7 +12,6 @@
 
   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
   <script type="text/javascript" src="../../../js/fabric.js"></script>
-  <script type="text/javascript" src="../../../js/fabric.templates.js"></script>
   <script type="text/javascript" src="../../../lib/pickadate.js"></script>
 </head>