├── .eslintrc
├── .gitignore
├── README.md
├── index.html
├── index.js
└── package.json
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "es6": true,
4 | "browser": true,
5 | "node": true
6 | },
7 | "extends": "elemefe",
8 | "parser": "babel-eslint"
9 | }
10 |
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 |
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | for giraffe
2 |
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | DisqusJS
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /* global Jinkela, req */
4 | (exports => {
5 | const api = req.create({ baseUrl: '//disqus.shijianan.com/' });
6 | const $style = document.createElement('style');
7 | $style.type = 'text/css';
8 | $style.appendChild(document.createTextNode(`
9 | @keyFrames busy {
10 | 0% { content: '评论加载中.'; }
11 | 25% { content: '评论加载中..'; }
12 | 50% { content: '评论加载中...'; }
13 | 75% { content: '评论加载中..'; }
14 | 100% { content: '评论加载中.'; }
15 | }
16 | `));
17 | document.head.appendChild($style);
18 | function sortComments(response) {
19 | response.reverse();
20 | let idMap = response.map(record => +record.id);
21 | // 子回复用数组存到父回复下
22 | response.forEach(record => { record.children = []; });
23 | response.forEach(record => {
24 | if (record.parent) {
25 | let parentIndex = idMap.indexOf(+record.parent);
26 | response[parentIndex].children.push(record);
27 | }
28 | });
29 | function flatten(list) {
30 | return list
31 | .reduce((prev, current) => {
32 | prev.push(current);
33 | if (current.children.length) prev.push.apply(prev, flatten(current.children));
34 | return prev;
35 | }, []);
36 | }
37 | return flatten(response.filter(record => !record.parent));
38 | }
39 |
40 | class DisqusHeader extends Jinkela {
41 | get template() {
42 | return `
43 |
44 |
51 |
52 | `;
53 | }
54 | get styleSheet() {
55 | return `
56 | :scope {
57 | border-bottom: 2px solid #e7e9ee;
58 | margin-bottom: 24px;
59 | > nav {
60 | display: flex;
61 | align-items: center;
62 | justify-content: space-between;
63 | > .icon-comment { width: 19px; height: 19px; }
64 | > ul {
65 | > li {
66 | width: 105px;
67 | display: inline-block;
68 | text-align: center;
69 | font-weight: 500;
70 | &.count {
71 | display: inline-block;
72 | color: #2a2e2e;
73 | font-size: 15px;
74 | padding: 12px 0;
75 | margin-right: 15px;
76 | font-weight: 700;
77 | border-bottom: 2px solid #2e9fff;
78 | > span { margin-right: 5px; }
79 | }
80 | }
81 | }
82 | }
83 | }
84 | `;
85 | }
86 | }
87 |
88 | class DisqusForm extends Jinkela { // eslint-disable-line no-unused-vars
89 | get value() {
90 | return { name: this.name, email: this.email };
91 | }
92 | get template() {
93 | return `
94 |
100 | `;
101 | }
102 | get styleSheet() {
103 | return `
104 | :scope {
105 | float: right;
106 | display: none;
107 | &.show { display: block; }
108 | > .title {
109 | margin: 10px 0;
110 | }
111 | > .notice {
112 | margin: 10px 0;
113 | font-size: 13px;
114 | color: #7f919e;
115 | font-weight: 300;
116 | }
117 | > input {
118 | box-sizing: border-box;
119 | background-color: #fff;
120 | color: #7f919e;
121 | padding: 5px 9px;
122 | border: 2px solid #dbdfe4;
123 | display: block;
124 | border-radius: 4px;
125 | font-size: 13px;
126 | height: 32px;
127 | width: 100%;
128 | margin-bottom: 12px;
129 | &.error { border-color: #F55567; }
130 | &:focus { outline: none; }
131 | }
132 | }
133 | `;
134 | }
135 | }
136 |
137 | class DisqusCurrentUser extends Jinkela {
138 | get DisqusForm() { return DisqusForm; }
139 | showActions() {
140 | this.footer.style.opacity = 1;
141 | this.form.element.classList.add('show');
142 | this.textarea.style.height = '100px';
143 | }
144 | setError(target) {
145 | const { name, email } = this.form.value;
146 | [this.textarea, name, email].forEach(el => el.classList.remove('error'));
147 | if (target) target.classList.add('error');
148 | }
149 | onSubmit() {
150 | const { name, email } = this.form.value;
151 | switch (true) {
152 | case !this.textarea.value || !this.textarea.value.trim():
153 | this.errorMessage = '请填写评论内容';
154 | this.setError(this.textarea);
155 | return;
156 | case !name.value || !name.value.trim():
157 | this.errorMessage = '请填写昵称';
158 | this.setError(name);
159 | return;
160 | case !/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email.value):
161 | this.errorMessage = '邮箱格式非法';
162 | this.setError(email);
163 | return;
164 | }
165 | this.setError(null);
166 | this.errorMessage = null;
167 | const payload = {
168 | name: name.value,
169 | email: email.value,
170 | comment: this.textarea.value
171 | };
172 | if (this.restarget) payload.parent = this.restarget;
173 | this.button.setAttribute('disabled', 'disabled');
174 | api.post('comment', JSON.stringify(payload)).end()
175 | .then(() => {
176 | alert('评论发送成功，请耐心等候博主审核通过');
177 | this.textarea.value = '';
178 | }, () => { this.errorMessage = '服务器抽风了，请稍后再重试 (>﹏<)'; })
179 | .then(() => { this.button.removeAttribute('disabled'); });
180 | }
181 | get template() {
182 | return `
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
{errorMessage}
191 |
192 |
195 |
196 |
299 |
300 |
301 | {author}
302 | {date}
303 |
304 |
305 |
321 |
449 |
450 | {name}
451 | {date}
452 |
453 |
454 |
455 |
456 | `;
457 | }
458 | get styleSheet() {
459 | return `
460 | :scope {
461 | overflow: auto;
462 | margin-bottom: 10px;
463 | font-size: 13px;
464 | > .avatar {
465 | float: left;
466 | width: 42px;
467 | height: 42px;
468 | margin-right: 15px;
469 | flex-shrink: 0;
470 | border-radius: 4px;
471 | }
472 | > div {
473 | float: left;
474 | width: 70%;
475 | }
476 | .author {
477 | color: #EE6172;
478 | }
479 | .comment {
480 | width: 100%;
481 | white-space: nowrap;
482 | text-overflow: ellipsis;
483 | overflow: hidden;
484 | margin-top: 5px;
485 | cursor: pointer;
486 | &:hover { color: #6BB4F3; }
487 | }
488 | }
489 | `;
490 | }
491 | }
492 |
493 | class Loading extends Jinkela {
494 | get template() { return ''; }
495 | get styleSheet() {
496 | return `
497 | :scope {
498 | &::after {
499 | content: '';
500 | opacity: .5;
501 | font-weight: 300;
502 | animation: busy 1s linear infinite;
503 | font-size: 20px;
504 | }
505 | text-align: center;
506 | padding: 15px 0;
507 | }
508 | `;
509 | }
510 | };
511 |
512 | class Main extends Jinkela {
513 | getArticleComments(url) {
514 | // is home page
515 | if (location.pathname === '/') return;
516 | let options = {};
517 | const loading = new Loading().to(this);
518 | if (url && url.trim()) options = { query: { url } };
519 | api.get('comments', options).end().then(response => {
520 | response = JSON.parse(response).response;
521 | new DisqusHeader({ data: response.length }).to(this);
522 | new DisqusCurrentUser().to(this);
523 | new DisqusCommentList({ data: sortComments(response) }).to(this);
524 | new DisqusFooter().to(this);
525 | }, () => { this.internalError = true; })
526 | .then(() => { loading.element.parentNode.removeChild(loading.element); });
527 | }
528 | getRecentComments(dom = document.body) {
529 | const loading = new Loading().to(dom);
530 | api.get('comments/recent').end().then(response => {
531 | response = JSON.parse(response).response;
532 | response.forEach(comment => {
533 | const { cache } = comment.author.avatar;
534 | const date = new Date(comment.createdAt);
535 | new RecentComment({
536 | name: comment.author.name,
537 | avatar: cache,
538 | comment: comment.raw_message,
539 | date: date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日',
540 | url: comment.url
541 | }).to(dom);
542 | });
543 | }, () => {}).then(() => { loading.element.parentNode.removeChild(loading.element); });
544 | }
545 | get template() {
546 | return `
547 |
548 |
549 |
服务器开小差了，评论加载失败，请稍后再重试 (>﹏<)
550 |
186 |