Improved efficiency greatly. Uses full HW acceleration if available f…

…or CSS.
jabbany · Dec 1, 2014 · 1622f4f · 1622f4f
1 parent 4825af1
commit 1622f4f
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 7 deletions.
diff --git a/build/CommentCoreLibrary.js b/build/CommentCoreLibrary.js
@@ -1053,15 +1053,50 @@ var ScrollComment = (function (_super) {
     };
     return ScrollComment;
 })(CoreComment);
+var CSSCompatLayer = (function () {
+    function CSSCompatLayer() {
+    }
+    CSSCompatLayer.transform = function (dom, trans) {
+        dom.style.transform = trans;
+        dom.style["webkitTransform"] = trans;
+        dom.style["msTransform"] = trans;
+        dom.style["oTransform"] = trans;
+    };
+    return CSSCompatLayer;
+})();
 var CSSScrollComment = (function (_super) {
     __extends(CSSScrollComment, _super);
     function CSSScrollComment() {
         _super.apply(this, arguments);
         this._dirtyCSS = true;
     }
+    Object.defineProperty(CSSScrollComment.prototype, "x", {
+        get: function () {
+            return (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
+        },
+        set: function (x) {
+            if (typeof this._x === "number") {
+                var dx = x - this._x;
+                this._x = x;
+                CSSCompatLayer.transform(this.dom, "translateX(" + dx + "px)");
+            } else {
+                this._x = x;
+                if (!this.absolute) {
+                    this._x *= this.parent.width;
+                }
+                if (this.align % 2 === 0) {
+                    this.dom.style.left = this._x + "px";
+                } else {
+                    this.dom.style.right = this._x + "px";
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     CSSScrollComment.prototype.update = function () {
         if (this._dirtyCSS) {
-            this.dom.style.transition = "left " + this.ttl + "ms linear, right " + this.ttl + "ms linear";
+            this.dom.style.transition = "transform " + this.ttl + "ms linear";
             this.x = -this.width;
             this._dirtyCSS = false;
         }
@@ -1074,6 +1109,8 @@ var CSSScrollComment = (function (_super) {
 
     CSSScrollComment.prototype.stop = function () {
         this.dom.style.transition = "";
+        this.x = this._x;
+        this._x = null;
         this.x = (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
         this._dirtyCSS = true;
     };

diff --git a/build/CommentCoreLibrary.min.js b/build/CommentCoreLibrary.min.js
diff --git a/src/core/CommentCoreLibrary.ts b/src/core/CommentCoreLibrary.ts
@@ -6,6 +6,22 @@
  * @description Comment management unit for CCL
  */
 /// <reference path="Core.d.ts" />
+class ScrollCommentFactory implements ICommentFactory{
+    public create(manager:ICommentManager, data:Object):ScrollComment{
+        return new ScrollComment(manager, data);
+    }
+}
+
+class CanvasCommentFactory implements ICommentFactory{
+    public canvas:HTMLCanvasElement;
+    constructor(canvas:HTMLCanvasElement){
+        this.canvas = canvas;
+    }
+    public create(manager:ICommentManager, data:Object):IComment{
+        return null;
+    }
+}
+
 class CommentManager implements ICommentManager {
     private _width:number = 0;
     private _height:number = 0;
@@ -22,7 +38,12 @@ class CommentManager implements ICommentManager {
         },
         "scroll": {
             "scale": 1,
-            "opacity": 1
+            "opacity": 1,
+            "factory":new ScrollCommentFactory()
+        },
+        "scripting":{
+            "mode":[8],
+            "engine": null
         }
     };
     public timeline:Array<Object> = [];
@@ -88,14 +109,31 @@ class CommentManager implements ICommentManager {
      * Clears all comments managed from the stage
      */
     public clear():void {
-
+        while(this.runline.length > 0){
+            this.runline[0].finish();
+        }
     }
 
     /**
      * Sends a comment onto the stage
      * @param data - abstract comment data
      */
     public send(data:Object):void {
+        if(!data.hasOwnProperty("mode")){
+            data["mode"] = 1;
+        }
+        if(this.options.scripting.mode.indexOf(data["mode"]) >= 0){
+            /** Scripting comment **/
+            if(this.options.scripting.engine !== null){
+                this.options.scripting.engine.eval(data["code"]);
+            }
+        }
+        var cmt:IComment;
+        if(data["mode"] === 1 || data["mode"] === 2 || data["mode"] === 6){
+            cmt = this.options.scroll.factory.create(this, data);
+        }else{
+            cmt = new CoreComment(this, data);
+        }
 
     }
 
@@ -151,7 +189,10 @@ class CommentManager implements ICommentManager {
     }
 
     public finish(cmt:IComment):void {
-
+        var index:number = this.runline.indexOf(cmt);
+        if(index >= 0){
+            this.runline.splice(index, 1);
+        }
     }
 
 }
diff --git a/src/core/Core.d.ts b/src/core/Core.d.ts
@@ -23,6 +23,14 @@ interface IBinArray {
 }
 declare var BinArray:IBinArray;
 
+interface ICommentFactory {
+    create(cm:ICommentManager, data:Object);
+}
+
+interface IScriptingEngine {
+    eval(code:String);
+}
+
 interface CCLOptions {
     global:{
         scale: number;
@@ -32,13 +40,36 @@ interface CCLOptions {
     scroll:{
         scale:number;
         opacity:number;
+        factory:ICommentFactory;
+    }
+    scripting:{
+        mode:Array<number>;
+        engine:IScriptingEngine;
     }
 }
 
 interface ICommentManager {
     width:number;
     height:number;
     options:CCLOptions;
+    /**
+     * Start the comment manager comments
+     */
+    start():void;
+    /**
+     * Stop the running comments
+     */
+    stop():void;
+    /**
+     * Remove all current running comments
+     */
+    clear():void;
+    /**
+     * Set the bounds for the CommentManager stage
+     * @param w width
+     * @param h height
+     */
+    setBounds(w?:number, h?:number):void;
     /**
      * Cleanup the given comment since it has finished
      * @param c - IComment
@@ -75,8 +106,27 @@ interface IComment {
     color:number;
     alpha:number;
     size:number;
+    /**
+     * Updates the comment life by subtracting t from ttl
+     * @param t - difference in time
+     */
     time(t:number):void;
+    /**
+     * Update the comment's position based on the time.
+     * This is called by time()
+     */
     update():void;
+    /**
+     * Invalidate the coordinates and dimensions of the
+     * current comment object
+     */
     invalidate():void;
+    /**
+     * Perform an animation alongside the update
+     */
     animate():void;
+    /**
+     * Remove the comment from display
+     */
+    finish():void;
 }
diff --git a/src/core/css/CSSComment.js b/src/core/css/CSSComment.js
@@ -435,15 +435,50 @@ var ScrollComment = (function (_super) {
     };
     return ScrollComment;
 })(CoreComment);
+var CSSCompatLayer = (function () {
+    function CSSCompatLayer() {
+    }
+    CSSCompatLayer.transform = function (dom, trans) {
+        dom.style.transform = trans;
+        dom.style["webkitTransform"] = trans;
+        dom.style["msTransform"] = trans;
+        dom.style["oTransform"] = trans;
+    };
+    return CSSCompatLayer;
+})();
 var CSSScrollComment = (function (_super) {
     __extends(CSSScrollComment, _super);
     function CSSScrollComment() {
         _super.apply(this, arguments);
         this._dirtyCSS = true;
     }
+    Object.defineProperty(CSSScrollComment.prototype, "x", {
+        get: function () {
+            return (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
+        },
+        set: function (x) {
+            if (typeof this._x === "number") {
+                var dx = x - this._x;
+                this._x = x;
+                CSSCompatLayer.transform(this.dom, "translateX(" + dx + "px)");
+            } else {
+                this._x = x;
+                if (!this.absolute) {
+                    this._x *= this.parent.width;
+                }
+                if (this.align % 2 === 0) {
+                    this.dom.style.left = this._x + "px";
+                } else {
+                    this.dom.style.right = this._x + "px";
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     CSSScrollComment.prototype.update = function () {
         if (this._dirtyCSS) {
-            this.dom.style.transition = "left " + this.ttl + "ms linear, right " + this.ttl + "ms linear";
+            this.dom.style.transition = "transform " + this.ttl + "ms linear";
             this.x = -this.width;
             this._dirtyCSS = false;
         }
@@ -456,6 +491,8 @@ var CSSScrollComment = (function (_super) {
 
     CSSScrollComment.prototype.stop = function () {
         this.dom.style.transition = "";
+        this.x = this._x;
+        this._x = null;
         this.x = (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
         this._dirtyCSS = true;
     };

diff --git a/src/core/css/CSSComment.ts b/src/core/css/CSSComment.ts
@@ -6,11 +6,39 @@
  * @description Comment abstraction based on CSS3 implementation
  */
 /// <reference path="../Comment.ts" />
+class CSSCompatLayer {
+    public static transform(dom:HTMLDivElement, trans:string):void{
+        dom.style.transform = trans;
+        dom.style["webkitTransform"] = trans;
+        dom.style["msTransform"] = trans;
+        dom.style["oTransform"] = trans;
+    }
+}
 class CSSScrollComment extends ScrollComment{
     private _dirtyCSS:boolean = true;
+    set x(x:number){
+        if(typeof this._x === "number") {
+            var dx:number = x - this._x;
+            this._x = x;
+            CSSCompatLayer.transform(this.dom, "translateX(" + dx + "px)");
+        }else{
+            this._x = x;
+            if (!this.absolute) {
+                this._x *= this.parent.width;
+            }
+            if (this.align % 2 === 0) {
+                this.dom.style.left = this._x + "px";
+            } else {
+                this.dom.style.right = this._x + "px";
+            }
+        }
+    }
+    get x():number{
+        return (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
+    }
     public update():void{
         if(this._dirtyCSS){
-            this.dom.style.transition = "left " + this.ttl + "ms linear, right " + this.ttl + "ms linear";
+            this.dom.style.transition = "transform " + this.ttl + "ms linear";
             this.x = - this.width;
             this._dirtyCSS = false;
         }
@@ -23,6 +51,8 @@ class CSSScrollComment extends ScrollComment{
 
     public stop():void{
         this.dom.style.transition = "";
+        this.x = this._x;
+        this._x = null;
         this.x = (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
         this._dirtyCSS = true;
     }