Skip to content

Commit 17961b5

Browse files
jabbanyjabbany
committed
Various documentation fixes
1 parent 512452c commit 17961b5

8 files changed

Lines changed: 512 additions & 287 deletions

‎dist/CommentCoreLibrary.js‎

Lines changed: 284 additions & 277 deletions
Large diffs are not rendered by default.

‎dist/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.

‎docs/Readme.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
# Readme 文档
1+
# Documentation 文档 ドキュメント
22

33
CCL包括一套尽可能完备的文档来帮助二次开发。文档主要针对两个部分：各种东西都是什么，各种东西都应该
44
怎么用。如果想看看现实里使用了 CCL 的项目，可以参考 [Powered By CCL](PoweredByCCL.md) 里面
55
的不完全收录。
66

7-
## 入门文档（Introduction）
7+
## 入门文档（Tutorial）
88
想开始对 CCL 的开发却还不太了解 CommentCoreLibrary？希望在自己的项目里使用 CCL 却不熟悉接口？
9-
赶紧来看[入门文档](Intro.md)
9+
赶紧来看:
10+
- [入门文档](Tutorial.zh_CN.md)
11+
- [チュートリアル](Tutorial.ja_JP.md)
12+
- [Quick Tutorial](Tutorial.md)
1013

1114
### 部件参考（Individual Parts）
1215

@@ -39,13 +42,13 @@ CommentCore 主体即可。** CommentCore主体可以进行：弹幕呈现和空
3942
对于希望进行完整还原的，可以参考合体配置方法。
4043

4144
### 架设 CommentCore 主体
42-
CommentCore主体分为两个重要部分：CSS和JS。在编译后，分别位于`build/style.css` 和
43-
`build/CommentCoreLibrary.js`。使用时必须保证引用了两个文件（或者在项目中已经合并入两个文件的
45+
CommentCore主体分为两个重要部分：CSS和JS。在编译后，分别位于`dist/css/style.css` 和
46+
`dist/CommentCoreLibrary.js`。使用时必须保证引用了两个文件（或者在项目中已经合并入两个文件的
4447
代码），尤其要注意CSS不能没有。
4548

4649
### 架设 KagerouEngine 引擎
4750
KagerouEngine分为两个部分：JS Host和Worker Client。在编译后，分别位于
48-
`build/scripting/Host.js` 和 `build/scripting/Worker.js`。架设时，只需在外部引入
51+
`dist/scripting/Host.js` 和 `dist/scripting/Worker.js`。架设时，只需在外部引入
4952
`Host.js` 然后把 `Worker.js` 的位置，在初始化 `Host` 时传递进入即可。`scripting/` 目录的
5053
结构关系需要保护，以免Worker无法载入相应的需要的运行时库。
5154

‎docs/Tutorial.ja_JP.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# チュートリアル
2+
このチュートリアルはWebアプリ開発の初心者向けの簡単なチュートリアルです。
3+
4+
## はじめに
5+
架设并开发 CCL 其实不难，首先你要确保你有一个服务器开发环境，比如在本机上安装的 Apache 或者你能访
6+
问到的在云端安装的 nginx 等等。请先通过浏览器测试你能正确访问该服务器。如果你在本地开发，请尝试访问
7+
8+
http://localhost/
9+
10+
来测试连同性。
11+
12+
**ご注意：** 请注意确保你在服务器环境下开发 CCL ，在开发时如果遇到各种资源无法载入，请确保您的地址栏
13+
是以 `http:` 或者 `https:` 开头的而不是 `file:` 等等。
14+
15+
**ノート：** Linuxを使い場合如果你在linux下开发，任何一个静态Web服务器软件都可。Windows下开发的话，仅作为推荐参考
16+
可以试试 XAMPP。
17+
18+
### ライブラリをダウンロードそしてインストールする
19+
Github 有提供以 Zip 方式下载CCL的选项，但是我们不推荐你这样做。正确使用 CCL 二次开发有两种推荐
20+
的方法：
21+
22+
- 作为外部库通过 npm 或者 bower 引入： 只需运行 `npm install comment-core-library --save`
23+
即可获取最新版的稳定CCL库。通过 `node_modules/comment-core-library/build/`
24+
可以引用需要的文件。
25+
- 直接 Clone 下 Git 代码仓库： 通过 `git clone https://github.com/jabbany/CommentCoreLibrary.git`
26+
即可 Clone下 CCL 的全代码库。建议把工作目录放到 Web 开发服务器下的子文件夹内，如 `/var/www/`
27+
或者 `D:\webroot\htdocs`下之类的。之后进入 CommentCoreLibrary 文件夹，
28+
运行 `npm install grunt-cli -g` 和 `npm install`
29+
（注意：可能需要管理员权限） 即可开始开发
30+
31+
第一个方式主要用于希望直接挂载 CCL 功能的二次开发，而第二种方式则面向对 CCL 本生的开发有兴趣的人。
32+
33+
### 正しい使い方
34+
CCL编译好的代码在 `dist/` 目录下。有两个文件非常重要： `CommentCoreLibrary.js` 和 `style.css`。
35+
这两个分别负责CCL的JS引擎部分和CSS呈现部分，不能省略。相对的还有俩 `.min.js`和 `.min.css` 文件
36+
是上述文件的压缩版。压缩版代码都在一行，较不方便对行号调试，建议开发时采用未压缩版，架设时则可以采取
37+
压缩版。
38+
39+
引用方法为，在对应的HTML文件头部添加
40+
41+
<head>
42+
... 其他头部信息 ...
43+
<link rel="stylesheet" href="dist/css/style.css" />
44+
<script src="dist/CommentCoreLibrary.js"></script>
45+
... 其他头部信息 ...
46+
</head>
47+
48+
注意文件路径调整合理。
49+
50+
之后在相应需要弹幕的位置，放置如下 HTML DOM结构：
51+
52+
<div id='my-player' class='abp'>
53+
<div id='my-comment-stage' class='container'></div>
54+
</div>
55+
56+
其中弹幕结构会在 `container` 这个 div 里插入。采用双层嵌套可以允许你的弹幕 container 于实际容器
57+
的大小不同，用于实现避开字幕等等功能。
58+
59+
### 调用API函数 （API Calls）
60+
调用API目前来说比较容易，在建立好页面dom之后，只要绑定 CommentManager 即可。
61+
62+
var CM = new CommentManager(document.getElementById('my-comment-stage'));
63+
CM.init(); // 初始化
64+
65+
之后 `CM` 实例会提供如下功能：
66+
67+
// 载入弹幕列表
68+
var danmakuList = [
69+
{
70+
"mode":1,
71+
"text":"Hello World",
72+
"stime":0,
73+
"size":25,
74+
"color":0xffffff
75+
}
76+
];
77+
CM.load(danmakuList);
78+
79+
// 插入弹幕
80+
var someDanmakuAObj = {
81+
"mode":1,
82+
"text":"Hello CommentCoreLibrary",
83+
"stime":1000,
84+
"size":30,
85+
"color":0xff0000
86+
};
87+
CM.insert(someDanmakuAObj);
88+
89+
// 启动播放弹幕（在未启动状态下弹幕不会移动）
90+
CM.start();
91+
92+
// 停止播放（停止弹幕移动）
93+
CM.stop();
94+
95+
// 更新时间轴时间
96+
CM.time(500);
97+
CM.time(1000);
98+
99+
具体使用的参考可以参考 `demo/tutorial`。内有大部分此示例的代码。
100+
101+
### コミュニティ
102+
103+
104+
### 弾幕送信
105+
コメントコアライブラリは送信機能がありませんですが、ユーザのコメントを記録するが欲しい場合、自分でサーバをセットすることは簡単にできます。
106+
107+
### 弾幕受信と生放送
108+
チュートリアルが説明したシステムは
109+
リアルライムで弾幕データを表現する方法は[ここ](DoingItRight.md)に書いています。

docs/Intro.md renamed to docs/Tutorial.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Github 有提供以 Zip 方式下载CCL的选项，但是我们不推荐你这
2121
的方法：
2222

2323
- 作为外部库通过 npm 或者 bower 引入： 只需运行 `npm install comment-core-library --save`
24-
即可获取最新版的稳定CCL库。通过 `node_modules/comment-core-library/build/`
24+
即可获取最新版的稳定CCL库。通过 `node_modules/comment-core-library/dist/`
2525
可以引用需要的文件。
2626
- 直接 Clone 下 Git 代码仓库： 通过 `git clone https://github.com/jabbany/CommentCoreLibrary.git`
2727
即可 Clone下 CCL 的全代码库。建议把工作目录放到 Web 开发服务器下的子文件夹内，如 `/var/www/`

‎docs/Tutorial.zh_CN.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# Introduction 入门文档
2+
入门文档设计为面向有较少 Web 或者 JS 开发经验的开发者们。如果你比较熟悉 Web 开发可以直接阅读 CCL
3+
的设计文档。
4+
5+
# 怎么架设 （Deployment）
6+
架设并开发 CCL 其实不难，首先你要确保你有一个服务器开发环境，比如在本机上安装的 Apache 或者你能访
7+
问到的在云端安装的 nginx 等等。请先通过浏览器测试你能正确访问该服务器。如果你在本地开发，请尝试访问
8+
9+
http://localhost/
10+
11+
来测试连通性。
12+
13+
**注意：** 请注意确保你在服务器环境下开发 CCL ，在开发时如果遇到各种资源无法载入，请确保您的地址栏
14+
是以 `http:` 或者 `https:` 开头的而不是 `file:` 等等。
15+
16+
**附加：** 如果你在linux下开发，任何一个静态Web服务器软件都可。Windows下开发的话，仅作为推荐参考
17+
可以试试 XAMPP。
18+
19+
### 正确的下载类库 （Getting CCL）
20+
Github 有提供以 Zip 方式下载CCL的选项，但是我们不推荐你这样做。正确使用 CCL 二次开发有两种推荐
21+
的方法：
22+
23+
- 作为外部库通过 npm 或者 bower 引入： 只需运行 `npm install comment-core-library --save`
24+
即可获取最新版的稳定CCL库。通过 `node_modules/comment-core-library/dist/`
25+
可以引用需要的文件。
26+
- 直接 Clone 下 Git 代码仓库： 通过 `git clone https://github.com/jabbany/CommentCoreLibrary.git`
27+
即可 Clone下 CCL 的全代码库。建议把工作目录放到 Web 开发服务器下的子文件夹内，如 `/var/www/`
28+
或者 `D:\webroot\htdocs`下之类的。之后进入 CommentCoreLibrary 文件夹，
29+
运行 `npm install grunt-cli -g` 和 `npm install`
30+
（注意：可能需要管理员权限） 即可开始开发
31+
32+
第一个方式主要用于希望直接挂载 CCL 功能的二次开发，而第二种方式则面向对 CCL 本生的开发有兴趣的人。
33+
34+
### 正确的引用库 （Embedding CCL）
35+
CCL编译好的代码在 `dist/` 目录下。有两个文件非常重要： `CommentCoreLibrary.js` 和 `style.css`。
36+
这两个分别负责CCL的JS引擎部分和CSS呈现部分，不能省略。相对的还有俩 `.min.js`和 `.min.css` 文件
37+
是上述文件的压缩版。压缩版代码都在一行，较不方便对行号调试，建议开发时采用未压缩版，架设时则可以采取
38+
压缩版。
39+
40+
引用方法为，在对应的HTML文件头部添加
41+
42+
<head>
43+
... 其他头部信息 ...
44+
<link rel="stylesheet" href="dist/css/style.css" />
45+
<script src="dist/CommentCoreLibrary.js"></script>
46+
... 其他头部信息 ...
47+
</head>
48+
49+
注意文件路径调整合理。
50+
51+
之后在相应需要弹幕的位置，放置如下 HTML DOM结构：
52+
53+
<div id='my-player' class='abp'>
54+
<div id='my-comment-stage' class='container'></div>
55+
</div>
56+
57+
其中弹幕结构会在 `container` 这个 div 里插入。采用双层嵌套可以允许你的弹幕 container 于实际容器
58+
的大小不同，用于实现避开字幕等等功能。
59+
60+
### 调用API函数 （API Calls）
61+
调用API目前来说比较容易，在建立好页面dom之后，只要绑定 CommentManager 即可。
62+
63+
var CM = new CommentManager(document.getElementById('my-comment-stage'));
64+
CM.init(); // 初始化
65+
66+
之后 `CM` 实例会提供如下功能：
67+
68+
// 载入弹幕列表
69+
var danmakuList = [
70+
{
71+
"mode":1,
72+
"text":"Hello World",
73+
"stime":0,
74+
"size":25,
75+
"color":0xffffff
76+
}
77+
];
78+
CM.load(danmakuList);
79+
80+
// 插入弹幕
81+
var someDanmakuAObj = {
82+
"mode":1,
83+
"text":"Hello CommentCoreLibrary",
84+
"stime":1000,
85+
"size":30,
86+
"color":0xff0000
87+
};
88+
CM.insert(someDanmakuAObj);
89+
90+
// 启动播放弹幕（在未启动状态下弹幕不会移动）
91+
CM.start();
92+
93+
// 停止播放（停止弹幕移动）
94+
CM.stop();
95+
96+
// 更新时间轴时间
97+
CM.time(500);
98+
CM.time(1000);
99+
100+
具体使用的参考可以参考 `demo/tutorial`。内有大部分此示例的代码。
101+
102+
### 发送弹幕 （Sending Comments）
103+
CCL自己没有发送弹幕的内建支持，不过实现起来非常轻松。具体实现需要根据自己服务器的需求决定。
104+
105+
### 实时弹幕 （Realtime Comments）
106+
参考[推荐的实现方法](DoingItRight.md)

‎spec/CommentCoreLibrary_spec.coffee‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe 'CommentManager', ->
3232
manager.init()
3333

3434
'addEventListener clear dispatchEvent finish init
35-
insert load onTimerEvent rescale seek send sendComment
35+
insert load onTimerEvent rescale seek send
3636
setBounds start stop time validate'.split(/\s/).forEach (method)->
3737

3838
it "has method: '#{method}'", ->

‎src/CommentManager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ var CommentManager = (function() {
2828
return "matrix3d(" + matrix.join(",") + ")";
2929
};
3030

31-
var defaultComparator = function (a,b) {
31+
var _defaultComparator = function (a,b) {
3232
if (a.stime > b.stime) {
3333
return 2;
3434
} else if (a.stime < b.stime) {

0 commit comments

Comments
 (0)