From ee7ef3f62c6d5100a10d1b970912aabda23fe58b Mon Sep 17 00:00:00 2001 From: Kitcham Date: Thu, 26 Jan 2017 18:18:11 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(comments):=20add=20"Disqus=5Fclick=5Ft?= =?UTF-8?q?o=5Fload"=20to=20improve=20in-GFW-users=E2=80=98=20=20experienc?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.template.yml | 2 +- layout/_partial/comment.ejs | 13 +++++++ layout/_widget/disqus_click.ejs | 67 +++++++++++++++++++++++++++++++++ source/js/ripple.js | 44 ++++++++++++++++++++++ 4 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 layout/_widget/disqus_click.ejs create mode 100644 source/js/ripple.js diff --git a/_config.template.yml b/_config.template.yml index 4a5e0165b..325761123 100644 --- a/_config.template.yml +++ b/_config.template.yml @@ -167,7 +167,7 @@ topPost: false # Comment Systems # Available value of "use": -# duoshuo | disqus +# duoshuo | disqus | disqus_click comment: use: shortname: diff --git a/layout/_partial/comment.ejs b/layout/_partial/comment.ejs index c38a12cf3..4f9cc597c 100755 --- a/layout/_partial/comment.ejs +++ b/layout/_partial/comment.ejs @@ -15,3 +15,16 @@ } <% } %> + +<% if(theme.comment.use === 'disqus_click') { %> + +
+ <%- partial('_widget/disqus_click') %> +
+ +<% } %> \ No newline at end of file diff --git a/layout/_widget/disqus_click.ejs b/layout/_widget/disqus_click.ejs new file mode 100644 index 000000000..a5e9ace12 --- /dev/null +++ b/layout/_widget/disqus_click.ejs @@ -0,0 +1,67 @@ +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/js/ripple.js b/source/js/ripple.js new file mode 100644 index 000000000..061ce05ca --- /dev/null +++ b/source/js/ripple.js @@ -0,0 +1,44 @@ +/** + * + * + */ +function RippleEffect(element){ + this.element = element; + this.element.addEventListener('click', this.run.bind(this), false); +} +RippleEffect.prototype = { + run: function(event){ + var ripplerContainer = this.element.querySelector('.ripple-container'); + var offsetInfo = this.element.getBoundingClientRect(); + if(ripplerContainer) { + ripplerContainer.remove(); + } + var rippleContainer = document.createElement('div'); + rippleContainer.style.position = 'fixed'; + rippleContainer.style.zIndex = 99; + rippleContainer.style.width = offsetInfo.width + 'px'; + rippleContainer.style.left = offsetInfo.left + 'px'; + rippleContainer.style.top = offsetInfo.top + 'px'; + rippleContainer.style.height = offsetInfo.height + 'px'; + rippleContainer.className = 'ripple-container'; + rippleContainer.style.overflow = 'hidden'; + this.element.appendChild(rippleContainer); + + // fixed the bug + var maxLength = offsetInfo.width > offsetInfo.height ? offsetInfo.width : offsetInfo.height; + var circleD = maxLength * 2; + + var ripple = document.createElement('div'); + ripple.style.position = 'absolute'; + ripple.style.width = circleD + 'px'; + ripple.style.height = circleD + 'px'; + ripple.style.borderRadius = '500px'; + ripple.style.left = ((event.pageX - offsetInfo.left) - circleD/2) + 'px'; + ripple.style.top = ((event.pageY - offsetInfo.top) - circleD/2) + 'px'; + ripple.className = 'ripple'; + rippleContainer.appendChild(ripple); + ripple.addEventListener('animationend', function(){ + rippleContainer.remove(); + }.bind(this), false); + } +}; From dbef40cec50fa488e33d8806232ea41d9218fc26 Mon Sep 17 00:00:00 2001 From: Kitcham Date: Fri, 27 Jan 2017 20:09:56 +0800 Subject: [PATCH 2/2] feat(comments): add multilingual support for "Disqus_click_to_load" button and fix the text in the button --- languages/ar.yml | 1 + languages/de.yml | 1 + languages/en.yml | 1 + languages/es.yml | 1 + languages/fr.yml | 1 + languages/ja.yml | 1 + languages/ms.yml | 1 + languages/zh-CN.yml | 1 + languages/zh-TW.yml | 1 + layout/_widget/disqus_click.ejs | 53 ++++++++++++++++----------------- 10 files changed, 35 insertions(+), 27 deletions(-) diff --git a/languages/ar.yml b/languages/ar.yml index a0394a76f..745b4b143 100644 --- a/languages/ar.yml +++ b/languages/ar.yml @@ -10,6 +10,7 @@ post: newer: "أحدث" private: "منشور خاص, مخفي مؤقتا" qrcode: "اقرأ هذا المقال على جهاز آخر" + comments_load_button: "قراءة تعليقات 「تأكد !disq.us & disquscdn.com & disqus.com يمكن تحميل」" share: article_rss: "مقالات RSS" comment_rss: "تعليقات RSS" diff --git a/languages/de.yml b/languages/de.yml index 57dc879db..fcc6b7f31 100644 --- a/languages/de.yml +++ b/languages/de.yml @@ -10,6 +10,7 @@ post: newer: "Neuren" private: "Private Beiträge sind temporär verborgen" qrcode: "Lesen Sie diesen Artikel auf anderem Gerät" + comments_load_button: "Lesen Sie Kommentare 「Stellen Sie sicher, dass 'disq.us & disquscdn.com & disqus.com' geladen werden kann 」" share: article_rss: "Artikel als RSS" comment_rss: "Kommentare als RSS" diff --git a/languages/en.yml b/languages/en.yml index 21b99bccc..5661d9ebb 100755 --- a/languages/en.yml +++ b/languages/en.yml @@ -10,6 +10,7 @@ post: newer: "Newer" private: "Private post, temporarily hidden" qrcode: "Read this article on other device" + comments_load_button: "Read Comments 「Be sure 'disq.us & disquscdn.com & disqus.com' can be loaded 」" share: article_rss: "Article RSS" comment_rss: "Comment RSS" diff --git a/languages/es.yml b/languages/es.yml index 521ae19ab..40c4bdb68 100755 --- a/languages/es.yml +++ b/languages/es.yml @@ -10,6 +10,7 @@ post: newer: "Más nuevo" private: "Mensajes privados, ocultar temporalmente" qrcode: "Lea este artículo en otro dispositivo" + comments_load_button: "Leer comentarios 「Asegúrese de que 'disq.us & disquscdn.com & disqus.com' se puede cargar」" share: article_rss: "Artículo RSS" comment_rss: "Comentario RSS" diff --git a/languages/fr.yml b/languages/fr.yml index 80081abbb..82b2ce5a9 100755 --- a/languages/fr.yml +++ b/languages/fr.yml @@ -10,6 +10,7 @@ post: newer: "Récent" private: "Article privé, caché temporairement" qrcode: "Lire cet article depuis un autre appareil" + comments_load_button: "Lire les commentaires 「Assurez-vous que 'disq.us & disquscdn.com & disqus.com' peut être chargé 」" share: article_rss: "Flux RSS des articles" comment_rss: "Flux RSS des commentaires" diff --git a/languages/ja.yml b/languages/ja.yml index 1ce4fed0a..d694f8fb4 100755 --- a/languages/ja.yml +++ b/languages/ja.yml @@ -10,6 +10,7 @@ post: newer: "新しい" private: "プライベート記事、一時的に非表示にします" qrcode: "他のデバイスでこの記事を読む" + comments_load_button: "論評を読む「 あなたは disqus & disquscdn.com & disqus.com をロードできることを確認します」" share: article_rss: "記事 RSS" comment_rss: "論評 RSS" diff --git a/languages/ms.yml b/languages/ms.yml index a2c0594bc..cdfef3365 100644 --- a/languages/ms.yml +++ b/languages/ms.yml @@ -10,6 +10,7 @@ post: newer: "Baru" private: "Siaran peribadi, disembunyikan buat sementara" qrcode: "Baca artikel ini pada peranti lain" + comments_load_button: "Read comments 「Pastikan 'disq.us & disquscdn.com & disqus.com' boleh dimuatkan」" share: article_rss: "RSS Artikel" comment_rss: "RSS Ulasan" diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 4956eb3f3..dff751d2a 100755 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -10,6 +10,7 @@ post: newer: "新篇" private: "私有文章，暂不公开" qrcode: "在其它设备中阅读本文章" + comments_load_button: "阅读评论 「请确保 disq.us & disquscdn.com & disqus.com 可以正常加载」" share: article_rss: "文章 RSS" comment_rss: "评论 RSS" diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index c855a08c0..1368dcd26 100755 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -10,6 +10,7 @@ post: newer: "新篇" private: "私有文章，暫不公開" qrcode: "在其他設備中閱讀本文章" + comments_load_button: "閱讀評論 「請確認 disq.us & disquscdn.com & disqus.com 可正常載入」" share: article_rss: "文章 RSS" comment_rss: "評論 RSS" diff --git a/layout/_widget/disqus_click.ejs b/layout/_widget/disqus_click.ejs index a5e9ace12..c02e350c8 100644 --- a/layout/_widget/disqus_click.ejs +++ b/layout/_widget/disqus_click.ejs @@ -1,26 +1,7 @@
- - - + - - - - +
+ +
\ No newline at end of file + + + +