Skip to content

Commit 8ed9a18

Browse files
jabbanyjabbany
committed
Improved efficiency greatly. Uses full HW acceleration if available for CSS.
Resolves #38, Resolves #21
1 parent 56fcc9c commit 8ed9a18

6 files changed

Lines changed: 202 additions & 7 deletions

File tree

‎build/CommentCoreLibrary.js‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1053,15 +1053,50 @@ var ScrollComment = (function (_super) {
10531053
};
10541054
return ScrollComment;
10551055
})(CoreComment);
1056+
var CSSCompatLayer = (function () {
1057+
function CSSCompatLayer() {
1058+
}
1059+
CSSCompatLayer.transform = function (dom, trans) {
1060+
dom.style.transform = trans;
1061+
dom.style["webkitTransform"] = trans;
1062+
dom.style["msTransform"] = trans;
1063+
dom.style["oTransform"] = trans;
1064+
};
1065+
return CSSCompatLayer;
1066+
})();
10561067
var CSSScrollComment = (function (_super) {
10571068
__extends(CSSScrollComment, _super);
10581069
function CSSScrollComment() {
10591070
_super.apply(this, arguments);
10601071
this._dirtyCSS = true;
10611072
}
1073+
Object.defineProperty(CSSScrollComment.prototype, "x", {
1074+
get: function () {
1075+
return (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
1076+
},
1077+
set: function (x) {
1078+
if (typeof this._x === "number") {
1079+
var dx = x - this._x;
1080+
this._x = x;
1081+
CSSCompatLayer.transform(this.dom, "translateX(" + dx + "px)");
1082+
} else {
1083+
this._x = x;
1084+
if (!this.absolute) {
1085+
this._x *= this.parent.width;
1086+
}
1087+
if (this.align % 2 === 0) {
1088+
this.dom.style.left = this._x + "px";
1089+
} else {
1090+
this.dom.style.right = this._x + "px";
1091+
}
1092+
}
1093+
},
1094+
enumerable: true,
1095+
configurable: true
1096+
});
10621097
CSSScrollComment.prototype.update = function () {
10631098
if (this._dirtyCSS) {
1064-
this.dom.style.transition = "left " + this.ttl + "ms linear, right " + this.ttl + "ms linear";
1099+
this.dom.style.transition = "transform " + this.ttl + "ms linear";
10651100
this.x = -this.width;
10661101
this._dirtyCSS = false;
10671102
}
@@ -1074,6 +1109,8 @@ var CSSScrollComment = (function (_super) {
10741109

10751110
CSSScrollComment.prototype.stop = function () {
10761111
this.dom.style.transition = "";
1112+
this.x = this._x;
1113+
this._x = null;
10771114
this.x = (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
10781115
this._dirtyCSS = true;
10791116
};

‎build/CommentCoreLibrary.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/CommentCoreLibrary.ts‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,22 @@
66
* @description Comment management unit for CCL
77
*/
88
/// <reference path="Core.d.ts" />
9+
class ScrollCommentFactory implements ICommentFactory{
10+
public create(manager:ICommentManager, data:Object):ScrollComment{
11+
return new ScrollComment(manager, data);
12+
}
13+
}
14+
15+
class CanvasCommentFactory implements ICommentFactory{
16+
public canvas:HTMLCanvasElement;
17+
constructor(canvas:HTMLCanvasElement){
18+
this.canvas = canvas;
19+
}
20+
public create(manager:ICommentManager, data:Object):IComment{
21+
return null;
22+
}
23+
}
24+
925
class CommentManager implements ICommentManager {
1026
private _width:number = 0;
1127
private _height:number = 0;
@@ -22,7 +38,12 @@ class CommentManager implements ICommentManager {
2238
},
2339
"scroll": {
2440
"scale": 1,
25-
"opacity": 1
41+
"opacity": 1,
42+
"factory":new ScrollCommentFactory()
43+
},
44+
"scripting":{
45+
"mode":[8],
46+
"engine": null
2647
}
2748
};
2849
public timeline:Array<Object> = [];
@@ -88,14 +109,31 @@ class CommentManager implements ICommentManager {
88109
* Clears all comments managed from the stage
89110
*/
90111
public clear():void {
91-
112+
while(this.runline.length > 0){
113+
this.runline[0].finish();
114+
}
92115
}
93116

94117
/**
95118
* Sends a comment onto the stage
96119
* @param data - abstract comment data
97120
*/
98121
public send(data:Object):void {
122+
if(!data.hasOwnProperty("mode")){
123+
data["mode"] = 1;
124+
}
125+
if(this.options.scripting.mode.indexOf(data["mode"]) >= 0){
126+
/** Scripting comment **/
127+
if(this.options.scripting.engine !== null){
128+
this.options.scripting.engine.eval(data["code"]);
129+
}
130+
}
131+
var cmt:IComment;
132+
if(data["mode"] === 1 || data["mode"] === 2 || data["mode"] === 6){
133+
cmt = this.options.scroll.factory.create(this, data);
134+
}else{
135+
cmt = new CoreComment(this, data);
136+
}
99137

100138
}
101139

@@ -151,7 +189,10 @@ class CommentManager implements ICommentManager {
151189
}
152190

153191
public finish(cmt:IComment):void {
154-
192+
var index:number = this.runline.indexOf(cmt);
193+
if(index >= 0){
194+
this.runline.splice(index, 1);
195+
}
155196
}
156197

157198
}

‎src/core/Core.d.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,14 @@ interface IBinArray {
2323
}
2424
declare var BinArray:IBinArray;
2525

26+
interface ICommentFactory {
27+
create(cm:ICommentManager, data:Object);
28+
}
29+
30+
interface IScriptingEngine {
31+
eval(code:String);
32+
}
33+
2634
interface CCLOptions {
2735
global:{
2836
scale: number;
@@ -32,13 +40,36 @@ interface CCLOptions {
3240
scroll:{
3341
scale:number;
3442
opacity:number;
43+
factory:ICommentFactory;
44+
}
45+
scripting:{
46+
mode:Array<number>;
47+
engine:IScriptingEngine;
3548
}
3649
}
3750

3851
interface ICommentManager {
3952
width:number;
4053
height:number;
4154
options:CCLOptions;
55+
/**
56+
* Start the comment manager comments
57+
*/
58+
start():void;
59+
/**
60+
* Stop the running comments
61+
*/
62+
stop():void;
63+
/**
64+
* Remove all current running comments
65+
*/
66+
clear():void;
67+
/**
68+
* Set the bounds for the CommentManager stage
69+
* @param w width
70+
* @param h height
71+
*/
72+
setBounds(w?:number, h?:number):void;
4273
/**
4374
* Cleanup the given comment since it has finished
4475
* @param c - IComment
@@ -75,8 +106,27 @@ interface IComment {
75106
color:number;
76107
alpha:number;
77108
size:number;
109+
/**
110+
* Updates the comment life by subtracting t from ttl
111+
* @param t - difference in time
112+
*/
78113
time(t:number):void;
114+
/**
115+
* Update the comment's position based on the time.
116+
* This is called by time()
117+
*/
79118
update():void;
119+
/**
120+
* Invalidate the coordinates and dimensions of the
121+
* current comment object
122+
*/
80123
invalidate():void;
124+
/**
125+
* Perform an animation alongside the update
126+
*/
81127
animate():void;
128+
/**
129+
* Remove the comment from display
130+
*/
131+
finish():void;
82132
}

‎src/core/css/CSSComment.js‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -435,15 +435,50 @@ var ScrollComment = (function (_super) {
435435
};
436436
return ScrollComment;
437437
})(CoreComment);
438+
var CSSCompatLayer = (function () {
439+
function CSSCompatLayer() {
440+
}
441+
CSSCompatLayer.transform = function (dom, trans) {
442+
dom.style.transform = trans;
443+
dom.style["webkitTransform"] = trans;
444+
dom.style["msTransform"] = trans;
445+
dom.style["oTransform"] = trans;
446+
};
447+
return CSSCompatLayer;
448+
})();
438449
var CSSScrollComment = (function (_super) {
439450
__extends(CSSScrollComment, _super);
440451
function CSSScrollComment() {
441452
_super.apply(this, arguments);
442453
this._dirtyCSS = true;
443454
}
455+
Object.defineProperty(CSSScrollComment.prototype, "x", {
456+
get: function () {
457+
return (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
458+
},
459+
set: function (x) {
460+
if (typeof this._x === "number") {
461+
var dx = x - this._x;
462+
this._x = x;
463+
CSSCompatLayer.transform(this.dom, "translateX(" + dx + "px)");
464+
} else {
465+
this._x = x;
466+
if (!this.absolute) {
467+
this._x *= this.parent.width;
468+
}
469+
if (this.align % 2 === 0) {
470+
this.dom.style.left = this._x + "px";
471+
} else {
472+
this.dom.style.right = this._x + "px";
473+
}
474+
}
475+
},
476+
enumerable: true,
477+
configurable: true
478+
});
444479
CSSScrollComment.prototype.update = function () {
445480
if (this._dirtyCSS) {
446-
this.dom.style.transition = "left " + this.ttl + "ms linear, right " + this.ttl + "ms linear";
481+
this.dom.style.transition = "transform " + this.ttl + "ms linear";
447482
this.x = -this.width;
448483
this._dirtyCSS = false;
449484
}
@@ -456,6 +491,8 @@ var CSSScrollComment = (function (_super) {
456491

457492
CSSScrollComment.prototype.stop = function () {
458493
this.dom.style.transition = "";
494+
this.x = this._x;
495+
this._x = null;
459496
this.x = (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
460497
this._dirtyCSS = true;
461498
};

‎src/core/css/CSSComment.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,39 @@
66
* @description Comment abstraction based on CSS3 implementation
77
*/
88
/// <reference path="../Comment.ts" />
9+
class CSSCompatLayer {
10+
public static transform(dom:HTMLDivElement, trans:string):void{
11+
dom.style.transform = trans;
12+
dom.style["webkitTransform"] = trans;
13+
dom.style["msTransform"] = trans;
14+
dom.style["oTransform"] = trans;
15+
}
16+
}
917
class CSSScrollComment extends ScrollComment{
1018
private _dirtyCSS:boolean = true;
19+
set x(x:number){
20+
if(typeof this._x === "number") {
21+
var dx:number = x - this._x;
22+
this._x = x;
23+
CSSCompatLayer.transform(this.dom, "translateX(" + dx + "px)");
24+
}else{
25+
this._x = x;
26+
if (!this.absolute) {
27+
this._x *= this.parent.width;
28+
}
29+
if (this.align % 2 === 0) {
30+
this.dom.style.left = this._x + "px";
31+
} else {
32+
this.dom.style.right = this._x + "px";
33+
}
34+
}
35+
}
36+
get x():number{
37+
return (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
38+
}
1139
public update():void{
1240
if(this._dirtyCSS){
13-
this.dom.style.transition = "left " + this.ttl + "ms linear, right " + this.ttl + "ms linear";
41+
this.dom.style.transition = "transform " + this.ttl + "ms linear";
1442
this.x = - this.width;
1543
this._dirtyCSS = false;
1644
}
@@ -23,6 +51,8 @@ class CSSScrollComment extends ScrollComment{
2351

2452
public stop():void{
2553
this.dom.style.transition = "";
54+
this.x = this._x;
55+
this._x = null;
2656
this.x = (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
2757
this._dirtyCSS = true;
2858
}

0 commit comments

Comments
 (0)