Skip to content

Commit e3ab70b

Browse files
jabbanyjabbany
committed
Merge branch 'dev-cssonly' into dev-new-loader
Fix various issues: - Bugs in scripting system - Unified timer for MotionManager - CSS comments default Need to fix before merge to master: - Reverse scroll does not work!
2 parents 2dc8a85 + db6bd13 commit e3ab70b

39 files changed

Lines changed: 1428 additions & 274 deletions

‎Gruntfile.coffee‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ module.exports = (grunt) ->
1919
'src/Array.js'
2020
'src/core/js/CommentUtils.js'
2121
'src/core/js/Comment.js'
22+
'src/core/js/css-renderer/CssComment.js'
2223
'src/core/js/CommentFactory.js'
2324
'src/core/js/CommentSpaceAllocator.js'
2425
'src/CommentManager.js'
@@ -34,6 +35,7 @@ module.exports = (grunt) ->
3435
# Typescript targets
3536
SRC_TS_CORE = [
3637
'src/core/Comment.ts'
38+
'src/core/css-renderer/CssComment.ts'
3739
'src/core/CommentFactory.ts'
3840
'src/core/CommentSpaceAllocator.ts'
3941
'src/core/CommentUtils.ts'

‎demo/debugger.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ function bind(){
244244

245245
function stop(){
246246
if(state.mode === "timer"){
247-
cm.stopTimer();
247+
cm.stop();
248248
$("control-status").className = "status";
249249
clearInterval(tmr);
250250
tmr = -1;
@@ -260,7 +260,7 @@ function bind(){
260260
if(tmr !== -1)
261261
return;
262262
$("control-status").className = "status active";
263-
cm.startTimer();
263+
cm.start();
264264
start = new Date().getTime() - playhead;
265265
tmr = setInterval(function(){
266266
playhead = new Date().getTime() - start;
@@ -559,16 +559,16 @@ function bindVideo(video, cm){
559559
displayTime(Math.floor(video.currentTime * 1000));
560560
});
561561
video.addEventListener("play", function(){
562-
cm.startTimer();
562+
cm.start();
563563
});
564564
video.addEventListener("pause", function(){
565-
cm.stopTimer();
565+
cm.stop();
566566
});
567567
video.addEventListener("waiting", function(){
568-
cm.stopTimer();
568+
cm.stop();
569569
});
570570
video.addEventListener("playing",function(){
571-
cm.startTimer();
571+
cm.start();
572572
});
573573
};
574574

‎dist/CommentCoreLibrary.js‎

Lines changed: 123 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -578,6 +578,8 @@ var CoreComment = (function () {
578578
return;
579579
}
580580
};
581+
CoreComment.prototype.stop = function () {
582+
};
581583
CoreComment.prototype.finish = function () {
582584
this.parent.finish(this);
583585
};
@@ -620,10 +622,108 @@ var ScrollComment = (function (_super) {
620622
return ScrollComment;
621623
}(CoreComment));
622624
//# sourceMappingURL=Comment.js.map
625+
var __extends = (this && this.__extends) || (function () {
626+
var extendStatics = Object.setPrototypeOf ||
627+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
628+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
629+
return function (d, b) {
630+
extendStatics(d, b);
631+
function __() { this.constructor = d; }
632+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
633+
};
634+
})();
635+
var CssCompatLayer = (function () {
636+
function CssCompatLayer() {
637+
}
638+
CssCompatLayer.transform = function (dom, trans) {
639+
dom.style.transform = trans;
640+
dom.style["webkitTransform"] = trans;
641+
dom.style["msTransform"] = trans;
642+
dom.style["oTransform"] = trans;
643+
};
644+
return CssCompatLayer;
645+
}());
646+
var CssScrollComment = (function (_super) {
647+
__extends(CssScrollComment, _super);
648+
function CssScrollComment() {
649+
var _this = _super !== null && _super.apply(this, arguments) || this;
650+
_this._dirtyCSS = true;
651+
return _this;
652+
}
653+
Object.defineProperty(CssScrollComment.prototype, "x", {
654+
get: function () {
655+
return (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
656+
},
657+
set: function (x) {
658+
if (typeof this._x === "number") {
659+
var dx = x - this._x;
660+
this._x = x;
661+
CssCompatLayer.transform(this.dom, "translateX(" + dx + "px)");
662+
}
663+
else {
664+
this._x = x;
665+
if (!this.absolute) {
666+
this._x *= this.parent.width;
667+
}
668+
if (this.align % 2 === 0) {
669+
this.dom.style.left = this._x + "px";
670+
}
671+
else {
672+
this.dom.style.right = this._x + "px";
673+
}
674+
}
675+
},
676+
enumerable: true,
677+
configurable: true
678+
});
679+
CssScrollComment.prototype.update = function () {
680+
if (this._dirtyCSS) {
681+
this.dom.style.transition = "transform " + this.ttl + "ms linear";
682+
this.x = -this.width;
683+
this._dirtyCSS = false;
684+
}
685+
};
686+
CssScrollComment.prototype.invalidate = function () {
687+
_super.prototype.invalidate.call(this);
688+
this._dirtyCSS = true;
689+
};
690+
CssScrollComment.prototype.stop = function () {
691+
this.dom.style.transition = "";
692+
this.x = this._x;
693+
this._x = null;
694+
this.x = (this.ttl / this.dur) * (this.parent.width + this.width) - this.width;
695+
this._dirtyCSS = true;
696+
};
697+
return CssScrollComment;
698+
}(ScrollComment));
699+
//# sourceMappingURL=CssComment.js.map
623700
var CommentFactory = (function () {
624701
function CommentFactory() {
625702
this._bindings = {};
626703
}
704+
CommentFactory._simpleCssScrollingInitializer = function (manager, data) {
705+
var cmt = new CssScrollComment(manager, data);
706+
switch (cmt.mode) {
707+
case 1: {
708+
cmt.align = 0;
709+
cmt.axis = 0;
710+
break;
711+
}
712+
case 2: {
713+
cmt.align = 2;
714+
cmt.axis = 2;
715+
break;
716+
}
717+
case 6: {
718+
cmt.align = 1;
719+
cmt.axis = 1;
720+
break;
721+
}
722+
}
723+
cmt.init();
724+
manager.stage.appendChild(cmt.dom);
725+
return cmt;
726+
};
627727
CommentFactory._simpleScrollingInitializer = function (manager, data) {
628728
var cmt = new ScrollComment(manager, data);
629729
switch (cmt.mode) {
@@ -647,7 +747,6 @@ var CommentFactory = (function () {
647747
manager.stage.appendChild(cmt.dom);
648748
return cmt;
649749
};
650-
;
651750
CommentFactory._simpleAnchoredInitializer = function (manager, data) {
652751
var cmt = new CoreComment(manager, data);
653752
switch (cmt.mode) {
@@ -674,7 +773,6 @@ var CommentFactory = (function () {
674773
manager.stage.appendChild(cmt.dom);
675774
return cmt;
676775
};
677-
;
678776
CommentFactory.defaultFactory = function () {
679777
var factory = new CommentFactory();
680778
factory.bind(1, CommentFactory._simpleScrollingInitializer);
@@ -686,6 +784,17 @@ var CommentFactory = (function () {
686784
factory.bind(17, CommentFactory._advancedCoreInitializer);
687785
return factory;
688786
};
787+
CommentFactory.defaultCssRenderFactory = function () {
788+
var factory = new CommentFactory();
789+
factory.bind(1, CommentFactory._simpleCssScrollingInitializer);
790+
factory.bind(2, CommentFactory._simpleCssScrollingInitializer);
791+
factory.bind(6, CommentFactory._simpleCssScrollingInitializer);
792+
factory.bind(4, CommentFactory._simpleAnchoredInitializer);
793+
factory.bind(5, CommentFactory._simpleAnchoredInitializer);
794+
factory.bind(7, CommentFactory._advancedCoreInitializer);
795+
factory.bind(17, CommentFactory._advancedCoreInitializer);
796+
return factory;
797+
};
689798
CommentFactory.prototype.bind = function (mode, factory) {
690799
this._bindings[mode] = factory;
691800
};
@@ -926,6 +1035,8 @@ var CommentManager = (function() {
9261035
/** Public **/
9271036
CommentManager.prototype.stop = function(){
9281037
this.stopTimer();
1038+
// Send stop signal to all comments
1039+
this.runline.forEach(function (c) { c.stop(); });
9291040
};
9301041

9311042
CommentManager.prototype.start = function(){
@@ -984,13 +1095,21 @@ var CommentManager = (function() {
9841095
this.stage.style.webkitPerspective = this.width * Math.tan(40 * Math.PI/180) / 2 + "px";
9851096
};
9861097

987-
CommentManager.prototype.init = function () {
1098+
CommentManager.prototype.init = function (renderer) {
9881099
this.setBounds();
9891100
if (this.filter == null) {
9901101
this.filter = new CommentFilter(); //Only create a filter if none exist
9911102
}
9921103
if (this.factory == null) {
993-
this.factory = CommentFactory.defaultFactory();
1104+
switch (renderer) {
1105+
case 'legacy':
1106+
this.factory = CommentFactory.defaultFactory();
1107+
break;
1108+
default:
1109+
case 'css':
1110+
this.factory = CommentFactory.defaultCssRenderFactory();
1111+
break;
1112+
}
9941113
}
9951114
};
9961115

‎dist/CommentCoreLibrary.min.js‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/style.css‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,55 @@
1-
.abp{
2-
position:relative;
1+
.abp {
2+
position: relative;
33
}
4-
.abp .container{
5-
-webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
6-
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
7-
position: absolute;
8-
display: block;
9-
overflow: hidden;
10-
margin: 0;
4+
5+
.abp .container {
116
border: 0;
12-
top: 0;
13-
left: 0;
147
bottom: 0;
8+
display: block;
9+
left: 0;
10+
margin: 0;
11+
overflow: hidden;
12+
position: absolute;
1513
right: 0;
16-
z-index: 9999;
14+
top: 0;
1715
touch-callout: none;
16+
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
17+
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
1818
-webkit-user-select: none;
1919
-moz-user-select: none;
2020
-ms-user-select: none;
2121
user-select: none;
22+
z-index: 9999;
2223
}
23-
.abp .container .cmt{
24-
-webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
25-
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
26-
-webkit-transform-origin: 0% 0%;
27-
-ms-transform-origin: 0% 0%;
28-
transform-origin: 0% 0%;
29-
position: absolute;
30-
padding: 3px 0 0 0;
31-
margin: 0;
24+
25+
.abp .container .cmt {
3226
color: #fff;
3327
font-family: SimHei, SimSun, Heiti, "MS Mincho", "Meiryo", "Microsoft YaHei", monospace;
3428
font-size: 25px;
29+
letter-spacing: 0;
30+
line-height: 100%;
31+
margin: 0;
32+
padding: 3px 0 0 0;
33+
position: absolute;
3534
text-decoration: none;
3635
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
3736
-webkit-text-size-adjust: none;
3837
-ms-text-size-adjust: none;
3938
text-size-adjust: none;
40-
line-height: 100%;
41-
letter-spacing: 0;
42-
word-break: keep-all;
39+
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
40+
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
41+
-webkit-transform-origin: 0% 0%;
42+
-ms-transform-origin: 0% 0%;
43+
transform-origin: 0% 0%;
4344
white-space: pre;
44-
45+
word-break: keep-all;
4546
}
46-
.abp .container .cmt.noshadow{
47+
48+
.abp .container .cmt.noshadow {
4749
text-shadow: none;
4850
}
49-
.abp .container .cmt.rshadow{
51+
52+
.abp .container .cmt.rshadow {
5053
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
5154
}
5255

‎dist/css/style.min.css‎

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

0 commit comments

Comments
 (0)