From a87815fcba6fa6ab2bb22c412eb42c4cad0bbe94 Mon Sep 17 00:00:00 2001 From: Rocka Date: Sat, 9 Jun 2018 18:58:08 +0800 Subject: [PATCH 1/4] client: define an global object `Isso`, for loading comments dynamically --- isso/js/app/api.js | 8 ++++---- isso/js/embed.js | 50 ++++++++++++++++++++++++++++++++-------------- 2 files changed, 39 insertions(+), 19 deletions(-) diff --git a/isso/js/app/api.js b/isso/js/app/api.js index 1496892..4e4337b 100644 --- a/isso/js/app/api.js +++ b/isso/js/app/api.js @@ -3,7 +3,7 @@ define(["app/lib/promise", "app/globals"], function(Q, globals) { "use strict"; var salt = "Eech7co8Ohloopo9Ol6baimi", - location = window.location.pathname; + location = function() { return window.location.pathname }; var script, endpoint, js = document.getElementsByTagName("script"); @@ -91,7 +91,7 @@ define(["app/lib/promise", "app/globals"], function(Q, globals) { var create = function(tid, data) { var deferred = Q.defer(); - curl("POST", endpoint + "/new?" + qs({uri: tid || location}), JSON.stringify(data), + curl("POST", endpoint + "/new?" + qs({uri: tid || location()}), JSON.stringify(data), function (rv) { if (rv.status === 201 || rv.status === 202) { deferred.resolve(JSON.parse(rv.body)); @@ -142,7 +142,7 @@ define(["app/lib/promise", "app/globals"], function(Q, globals) { if (typeof(nested_limit) === 'undefined') { nested_limit = "inf"; } if (typeof(parent) === 'undefined') { parent = null; } - var query_dict = {uri: tid || location, after: lastcreated, parent: parent}; + var query_dict = {uri: tid || location(), after: lastcreated, parent: parent}; if(limit !== "inf") { query_dict['limit'] = limit; @@ -193,7 +193,7 @@ define(["app/lib/promise", "app/globals"], function(Q, globals) { var feed = function(tid) { - return endpoint + "/feed?" + qs({uri: tid || location}); + return endpoint + "/feed?" + qs({uri: tid || location()}); }; var preview = function(text) { diff --git a/isso/js/embed.js b/isso/js/embed.js index 7f7fbbe..4e796c1 100644 --- a/isso/js/embed.js +++ b/isso/js/embed.js @@ -12,10 +12,16 @@ require(["app/lib/ready", "app/config", "app/i18n", "app/api", "app/isso", "app/ jade.set("pluralize", i18n.pluralize); jade.set("svg", svg); - domready(function() { + var isso_thread; + var heading; - if (config["css"]) { + function init() { + isso_thread = $('#isso-thread'); + heading = $.new("h4"); + + if (config["css"] && $("style#isso-style") === null) { var style = $.new("style"); + style.id = "isso-style"; style.type = "text/css"; style.textContent = css.inline; $("head").append(style); @@ -23,27 +29,30 @@ require(["app/lib/ready", "app/config", "app/i18n", "app/api", "app/isso", "app/ count(); - if ($("#isso-thread") === null) { + if (isso_thread === null) { return console.log("abort, #isso-thread is missing"); } if (config["feed"]) { var feedLink = $.new('a', i18n.translate('atom-feed')); var feedLinkWrapper = $.new('span.isso-feedlink'); - feedLink.href = api.feed($("#isso-thread").getAttribute("data-isso-id")); - feedLinkWrapper.appendChild(feedLink); - $("#isso-thread").append(feedLinkWrapper); + feedLink.href = api.feed(isso_thread.getAttribute("data-isso-id")); + feedLinkWrapper.append(feedLink); + isso_thread.append(feedLinkWrapper); } - $("#isso-thread").append($.new('h4')); - $("#isso-thread").append(new isso.Postbox(null)); - $("#isso-thread").append('
'); + isso_thread.append(heading); + isso_thread.append(new isso.Postbox(null)); + isso_thread.append('
'); + } - api.fetch($("#isso-thread").getAttribute("data-isso-id"), + function fetchComments() { + $('#isso-root').textContent = ''; + api.fetch(isso_thread.getAttribute("data-isso-id") || location.pathname, config["max-comments-top"], config["max-comments-nested"]).then( - function(rv) { + function (rv) { if (rv.total_replies === 0) { - $("#isso-thread > h4").textContent = i18n.translate("no-comments"); + heading.textContent = i18n.translate("no-comments"); return; } @@ -51,14 +60,14 @@ require(["app/lib/ready", "app/config", "app/i18n", "app/api", "app/isso", "app/ var count = rv.total_replies; rv.replies.forEach(function(comment) { isso.insert(comment, false); - if(comment.created > lastcreated) { + if (comment.created > lastcreated) { lastcreated = comment.created; } count = count + comment.total_replies; }); - $("#isso-thread > h4").textContent = i18n.pluralize("num-comments", count); + heading.textContent = i18n.pluralize("num-comments", count); - if(rv.hidden_replies > 0) { + if (rv.hidden_replies > 0) { isso.insert_loader(rv, lastcreated); } @@ -70,5 +79,16 @@ require(["app/lib/ready", "app/config", "app/i18n", "app/api", "app/isso", "app/ console.log(err); } ); + } + + domready(function() { + init(); + fetchComments(); }); + + window.Isso = { + init: init, + fetchComments: fetchComments + }; + }); From 61b3b695579c25aa8c49a320ccda2a2d6506323d Mon Sep 17 00:00:00 2001 From: Rocka Date: Sat, 9 Jun 2018 18:59:36 +0800 Subject: [PATCH 2/4] doc: add doc for dynamic comment loading --- docs/docs/extras/advanced-integration.rst | 31 +++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/docs/docs/extras/advanced-integration.rst b/docs/docs/extras/advanced-integration.rst index c670358..76fcdb9 100644 --- a/docs/docs/extras/advanced-integration.rst +++ b/docs/docs/extras/advanced-integration.rst @@ -23,3 +23,34 @@ Now, either include `count.min.js` if you want to show only the comment count You can have as many comments counters as you want in a page, and they will be merged into a single `GET` request. + +Asynchronous comments loading +----------------------------- + +Isso will automatically fetch comments after `DOMContentLoaded` event. However +in the case where your website is creating content dynamically (eg. via ajax), +you need to re-fetch comment thread manually. Here is how you can re-fetch the +comment thread: + +.. code-block:: js + + window.Isso.fetchComments() + +It will delete all comments under the thread but not the PostBox, fetch +comments with `data-isso-id` attribute of element `section#isso-thread` (if that +attribute not exists, fallback to `window.location.pathname`), then fill +comments into the thread. In other words, you should change `data-isso-id` +attribute of element `section#isso-thread` (or modify the pathname with +`location.pushState`) before you can get new comments. And the thread element +itself should *NOT* be touched or removed. + +If you removed the `section#isso-thread` element, just create another element +with same TagName and ID in which you wish comments to be placed, then call the +`init` method of `Isso`: + +.. code-block:: js + + window.Isso.init() + +Then Isso will initialize the comment section and fetch comments, as if the page +was loaded. From 858d64d0920b99a8fcff3a1c0a6b474c5f98e85a Mon Sep 17 00:00:00 2001 From: Rocka Date: Fri, 27 Jul 2018 10:44:02 +0800 Subject: [PATCH 3/4] doc: minor syntax changes about async comments loading --- docs/docs/extras/advanced-integration.rst | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docs/extras/advanced-integration.rst b/docs/docs/extras/advanced-integration.rst index 76fcdb9..3f4a1f9 100644 --- a/docs/docs/extras/advanced-integration.rst +++ b/docs/docs/extras/advanced-integration.rst @@ -37,10 +37,10 @@ comment thread: window.Isso.fetchComments() It will delete all comments under the thread but not the PostBox, fetch -comments with `data-isso-id` attribute of element `section#isso-thread` (if that -attribute not exists, fallback to `window.location.pathname`), then fill -comments into the thread. In other words, you should change `data-isso-id` -attribute of element `section#isso-thread` (or modify the pathname with +comments with `data-isso-id` attribute of the element `section#isso-thread` (if +that attribute does not exist, fallback to `window.location.pathname`), then +fill comments into the thread. In other words, you should change `data-isso-id` +attribute of the element `section#isso-thread` (or modify the pathname with `location.pushState`) before you can get new comments. And the thread element itself should *NOT* be touched or removed. From 7f2b4eec8c574da587729f83e1b31be8083ec60b Mon Sep 17 00:00:00 2001 From: Rocka Date: Fri, 27 Jul 2018 10:44:28 +0800 Subject: [PATCH 4/4] update CONTRIBUTORS.txt --- CONTRIBUTORS.txt | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CONTRIBUTORS.txt b/CONTRIBUTORS.txt index 4726087..324d52d 100644 --- a/CONTRIBUTORS.txt +++ b/CONTRIBUTORS.txt @@ -95,5 +95,8 @@ In chronological order: * Steffen Prince @sprin * Upgrade to Misaka 2 +* Rocka + * Implementation and documentation about async comment loading + * [Your name or handle] <[email or website]> * [Brief summary of your changes]