HTML and CSS editors now fully supported

client/resources/style.css

@@ -748,6 +748,10 @@ Please only put css rules in here for layout related requirements.
 .tab-selector.tab-selected .text {
     padding: 0 20px 0 0;
 }
+.tab-selector img {
+    height: 16px;
+    margin: 0 5px 0 0;
+}
 .tab-close .text {
     pointer-events: none;
 }

server/new-models/BuildModel.js

@@ -19,7 +19,7 @@ var BuildModel = (function (_super) {
         this.defaultSchema.add(new modepress_api_1.SchemaFactory.id("projectId", "", true));
         this.defaultSchema.add(new modepress_api_1.SchemaFactory.text("notes", ""));
         this.defaultSchema.add(new modepress_api_1.SchemaFactory.text("version", "0.0.1"));
-        this.defaultSchema.add(new modepress_api_1.SchemaFactory.html("html", "", modepress_api_1.SchemaFactory.html.defaultTags, modepress_api_1.SchemaFactory.html.defaultAllowedAttributes));
+        this.defaultSchema.add(new modepress_api_1.SchemaFactory.html("html", "", modepress_api_1.SchemaFactory.html.defaultTags.concat("h1", "h2", "h3", "h4", "img"), modepress_api_1.SchemaFactory.html.defaultAllowedAttributes));
         this.defaultSchema.add(new modepress_api_1.SchemaFactory.bool("public", false));
         this.defaultSchema.add(new modepress_api_1.SchemaFactory.text("css", ""));
         this.defaultSchema.add(new modepress_api_1.SchemaFactory.text("liveHTML", ""));

source-client/_references.ts

@@ -112,6 +112,7 @@
 
 
 /// <reference path="lib/gui/tabs/CanvasTabPair.ts" />
+/// <reference path="lib/gui/tabs/EditorPair.ts" />
 /// <reference path="lib/gui/tabs/HTMLTab.ts" />
 /// <reference path="lib/gui/tabs/CSSTab.ts" />
 /// <reference path="lib/gui/tabs/ScriptTab.ts" />

source-client/app-engine-client.csproj

@@ -125,6 +125,7 @@
     <TypeScriptCompile Include="lib\gui\property-editors\PropAssetList.ts" />
     <TypeScriptCompile Include="lib\gui\property-editors\PropOptionsWindow.ts" />
     <TypeScriptCompile Include="lib\gui\property-editors\PropNumber.ts" />
+    <TypeScriptCompile Include="lib\gui\tabs\EditorPair.ts" />
     <TypeScriptCompile Include="lib\gui\tabs\SceneTab.ts" />
     <TypeScriptCompile Include="lib\gui\ProjectBrowser.ts" />
     <TypeScriptCompile Include="lib\gui\PluginBrowser.ts" />

source-client/custom-definitions/generated/application.d.ts

@@ -2074,9 +2074,11 @@ declare module Animate {
         constructor(parent: Component);
         /**
         * Adds an HTML item
-        * @returns {JQuery} A jQuery object containing the HTML.
+        * @returns {string} img The URL of the image
+        * @returns {string} val The text of the item
+        * @returns {boolean} prepend True if you want to prepend as opposed to append
         */
-        addItem(img: string, val: string): JQuery;
+        addItem(img: string, val: string, prepend?: boolean): JQuery;
         /**
         * Removes an  item from this list
         * @param {JQuery} item The jQuery object we are removing
@@ -4229,88 +4231,139 @@ declare module Animate {
 }
 declare module Animate {
     /**
-    * A tab pair that manages the build HTML
+    * A tab pair that uses the ace editor
     */
-    class HTMLTab extends TabPair {
-        static singleton: HTMLTab;
+    abstract class EditorPair extends TabPair {
         private _originalName;
         private _proxyChange;
         private _proxyMessageBox;
         private _saved;
-        private _close;
+        protected _close: boolean;
         private _editor;
+        private _loadingGif;
+        private _savedSpan;
         /**
         * @param {string} name The name of the tab
-        * @param {Label} tab The label of the pair
-        * @param {Component} page The page of the pair
         */
         constructor(name: string);
         /**
         * When we acknowledge the message box.
         * @param {string} val
         */
-        onMessage(val: any): void;
+        onMessage(val: string): void;
+        /**
+        * Gets if this tab pair has been saved or not
+        * @returns {boolean}
+        */
+        protected isSaved: boolean;
+        /**
+        * Sets if this tab pair has been saved or not
+        * @param {boolean} val
+        */
+        protected saved(val: boolean): void;
+        /**
+        * Sets if this tab pair is busy loading
+        * @param {boolean} val
+        */
+        protected loading(val: boolean): void;
         /**
         * Called when the editor changes
         * @param {any} e
         */
         onChange(e: any): void;
         /**
         * Called by the tab class when the pair is to be removed.
-        * @param {any} data An object that can be used to cancel the operation. Simply call data.cancel = true to cancel the closure.
+        * @param {TabEvent} event An object that can be used to cancel the operation. Simply call data.cancel = true to cancel the closure.
         */
-        onRemove(data: any): void;
+        onRemove(event: TabEvent): void;
         /**
-        * Called when the editor is resized
+        * Called when the tab is resized
         */
         onResize(): void;
         /**
-        * Called when the pair has been added to the tab
+        * Saves the content of the editor
+        */
+        abstract save(): any;
+        /**
+        * Gets the script content once added to the stage
+        */
+        abstract initialize(): {
+            content: string;
+            contentType: string;
+        };
+        /**
+        * Called when the pair has been added to the tab. The ace editor is added and initialized
         */
         onAdded(): void;
+        /**
+        * Gets the ace editor
+        * @returns {AceAjax.Editor}
+        */
         editor: AceAjax.Editor;
     }
 }
 declare module Animate {
     /**
-    * A tab pair that manages the build CSS
+    * A tab pair that manages the build HTML
     */
-    class CSSTab extends TabPair {
-        static singleton: CSSTab;
-        private _originalName;
-        private _proxyChange;
-        private _proxyMessageBox;
-        private _saved;
-        private _close;
-        private _editor;
+    class HTMLTab extends EditorPair {
+        static singleton: HTMLTab;
         /**
         * @param {string} name The name of the tab
         */
         constructor(name: string);
         /**
-        * When we acknowledge the message box.
-        * @param {string} val
+        * Called when the editor needs to save its content
         */
-        onMessage(val: any): void;
+        save(): void;
         /**
-        * Called when the editor changes
-        * @param {any} e
+         * Gets the script initial values
+         */
+        initialize(): {
+            content: string;
+            contentType: string;
+        };
+        /**
+        * Called when the pair has been added to the tab. The ace editor is added and initialized
         */
-        onChange(e: any): void;
+        onAdded(): void;
         /**
         * Called by the tab class when the pair is to be removed.
-        * @param {any} data An object that can be used to cancel the operation. Simply call data.cancel = true to cancel the closure.
+        * @param {TabEvent} event An object that can be used to cancel the operation. Simply call data.cancel = true to cancel the closure.
         */
-        onRemove(data: any): void;
+        onRemove(event: TabEvent): void;
+    }
+}
+declare module Animate {
+    /**
+    * A tab pair that manages the build CSS
+    */
+    class CSSTab extends EditorPair {
+        static singleton: CSSTab;
         /**
-        * Called when the editor is resized
+        * @param {string} name The name of the tab
         */
-        onResize(): void;
+        constructor(name: string);
         /**
-        * Called when the pair has been added to the tab
+        * Called when the editor needs to save its content
+        */
+        save(): void;
+        /**
+        * Gets the script initial values
+        */
+        initialize(): {
+            content: string;
+            contentType: string;
+        };
+        /**
+        * Called when the pair has been added to the tab. The ace editor is added and initialized
         */
         onAdded(): void;
-        editor: AceAjax.Editor;
+        /**
+        * Called by the tab class when the pair is to be removed.
+        * @param {TabEvent} event An object that can be used to cancel the operation. Simply call data.cancel = true to cancel the closure.
+        */
+        onRemove(event: TabEvent): void;
     }
 }
 declare module Animate {

source-client/lib/gui/Logger.ts

@@ -157,7 +157,7 @@ module Animate
 				this.element.data( "preview" ).addClass( "fade-animation" );
             }
             val = `<span class='date'>${new Date(Date.now()).toLocaleDateString() }</span>` + val;
-			var toAdd = this.addItem( img, val );
+			var toAdd = this.addItem( img, val, true );
 			toAdd.data( "tag", tag );
 			return toAdd;
 		}

source-client/lib/gui/MenuList.ts

@@ -27,13 +27,18 @@ module Animate
 
 		/** 
 		* Adds an HTML item
-		* @returns {JQuery} A jQuery object containing the HTML.
+		* @returns {string} img The URL of the image
+        * @returns {string} val The text of the item
+        * @returns {boolean} prepend True if you want to prepend as opposed to append
 		*/
-		addItem( img : string, val : string ) : JQuery
+        addItem(img: string, val: string, prepend?: boolean): JQuery
 		{
             var toRet = jQuery( "<div class='menu-list-item light-hover'>" + ( img ? "<img src='" + img + "' />" : "" ) + "<span class='menu-list-text'>" + val + "</span></div>" );
-			this._items.push( toRet );
-			this.element.append( toRet );
+            this._items.push(toRet);
+            if (!prepend)
+                this.element.append(toRet);
+            else
+                this.element.prepend(toRet);
 			return toRet;
 		}
 

source-client/lib/gui/Tab.ts

@@ -134,10 +134,8 @@ module Animate
 		{
 			var targ = jQuery( e.target );
 			if ( targ.is( jQuery( ".tab-close" ) ) )
-			{
-				var text = targ.parent().text();
-				text = text.substring( 0, text.length - 1 );
-
+            {
+                var text = jQuery(".content", targ.parent()).text();
 				var tabPair = this.getTab( text );
 				if ( this.onTabPairClosing( tabPair ) )
 					this.removeTab( tabPair, true );
@@ -224,7 +222,7 @@ module Animate
 			}
 
 			var page : Component = new Component( "<div class='tab-page background'></div>", this.pagesDiv );
-            var tab: Component = new Component("<div class='tab-selector animate-fast background-dark tab-selected'><div class='text'>" + (val instanceof TabPair ? val.name : val) + "</div></div>", this._tabsDiv );
+            var tab: Component = new Component("<div class='tab-selector animate-fast background-dark tab-selected'><div class='text'><span class='content'>" + (val instanceof TabPair ? val.name : val) + "</span></div></div>", this._tabsDiv );
 			if ( canClose )
 			{
                 new Component( "<div class='tab-close black-tint'>X</div>", tab );