isso: js, py: Fetch public conf once from /config

This is an improvement on top of:
02f3ea0
"Have client read out shared settings from server (isso-comments#311)"

So far, the `config` dict was being sent with the server
response when fetching comments from the `fetch()` `/` (GET)
endpoint.

Create new endpoint at `/config`, which will serve a JSON
representation of the server's `public_conf`. Also remove
the `config` object from `fetch()` responses.

Extend the JS client api file to fetch from the `/config`
endpoint, which will only happen once via the
`fetchComments` hook on page load.

isso/js/app/api.js

@@ -166,6 +166,18 @@ var fetch = function(tid, limit, nested_limit, parent, lastcreated) {
     return deferred.promise;
 };
 
+var config = function() {
+    var deferred = Q.defer();
+    curl("GET", endpoint + "/config", null, function(rv) {
+        if (rv.status === 200) {
+            deferred.resolve(JSON.parse(rv.body));
+        } else {
+            deferred.reject(rv.body);
+        }
+    });
+    return deferred.promise;
+};
+
 var count = function(urls) {
     var deferred = Q.defer();
     curl("POST", endpoint + "/count", JSON.stringify(urls), function(rv) {
@@ -223,4 +235,5 @@ module.exports = {
     dislike: dislike,
     feed: feed,
     preview: preview,
+    config: config,
 };

isso/js/embed.js

@@ -23,10 +23,28 @@ template.set("svg", svg);
 
 var isso_thread;
 var heading;
+var postbox;
 
 function init() {
-    isso_thread = $('#isso-thread');
-    heading = $.new("h4");
+    // Fetch config from server, will override any local data-isso-* attributes
+    api.config().then(
+        function (rv) {
+            for (var setting in rv.config) {
+                if (setting in config
+                    && config[setting] != default_config[setting]
+                    && config[setting] != rv.config[setting]) {
+                    console.log("Isso: Client value '%s' for setting '%s' overridden by server value '%s'.\n" +
+                                "Since Isso version 0.12.6, 'data-isso-%s' is only configured via the server " +
+                                "to keep client and server in sync",
+                                config[setting], setting, rv.config[setting], setting);
+                }
+                config[setting] = rv.config[setting]
+            }
+        },
+        function(err) {
+            console.log(err);
+        }
+    );
 
     if (config["css"] && $("style#isso-style") === null) {
         var style = $.new("link");
@@ -37,6 +55,10 @@ function init() {
         $("head").append(style);
     }
 
+    isso_thread = $('#isso-thread');
+    heading = $.new('h4.isso-thread-heading');
+    postbox = new isso.Postbox(null);
+
     count();
 
     if (isso_thread === null) {
@@ -50,40 +72,33 @@ function init() {
         feedLinkWrapper.appendChild(feedLink);
         isso_thread.append(feedLinkWrapper);
     }
-    // Note: Not appending the isso.Postbox here since it relies
-    // on the config object populated by elements fetched from the server,
-    // and the call to fetch those is in fetchComments()
-    isso_thread.append(heading);
-    isso_thread.append('<div id="isso-root"></div>');
+
+    // Only insert elements if not already present, respecting Single-Page-Apps
+    if (!$('h4.isso-thread-heading')) {
+        isso_thread.append(heading);
+    }
+    if (!$('.isso-postbox')) {
+        isso_thread.append(postbox);
+    } else {
+        $('.isso-postbox').value = postbox;
+    }
+    if (!$('#isso-root')) {
+        isso_thread.append('<div id="isso-root"></div>');
+    }
 }
 
 function fetchComments() {
 
-    if (!$('#isso-root')) {
+    var isso_root = $('#isso-root');
+    if (!isso_root) {
         return;
     }
-
-    var isso_root = $('#isso-root');
     isso_root.textContent = '';
+
     api.fetch(isso_thread.getAttribute("data-isso-id") || location.pathname,
         config["max-comments-top"],
         config["max-comments-nested"]).then(
         function (rv) {
-            for (var setting in rv.config) {
-                if (setting in config
-                    && config[setting] != default_config[setting]
-                    && config[setting] != rv.config[setting]) {
-                    console.log("Isso: Client value '%s' for setting '%s' overridden by server value '%s'.\n" +
-                                "Since Isso version 0.12.6, 'data-isso-%s' is only configured via the server " +
-                                "to keep client and server in sync",
-                                config[setting], setting, rv.config[setting], setting);
-                }
-                config[setting] = rv.config[setting]
-            }
-
-            // Note: isso.Postbox relies on the config object populated by elements
-            // fetched from the server, so it cannot be created in init()
-            isso_root.prepend(new isso.Postbox(null));
 
             if (rv.total_replies === 0) {
                 heading.textContent = i18n.translate("no-comments");

isso/views/comments.py

@@ -107,6 +107,7 @@ class API(object):
         ('dislike', ('POST', '/id/<int:id>/dislike')),
         ('demo', ('GET', '/demo')),
         ('preview', ('POST', '/preview')),
+        ('config', ('GET', '/config')),
         ('login', ('POST', '/login')),
         ('admin', ('GET', '/admin'))
     ]
@@ -834,7 +835,6 @@ def fetch(self, environ, request, uri):
             'total_replies': reply_counts[root_id],
             'hidden_replies': reply_counts[root_id] - len(root_list),
             'replies': self._process_fetched_list(root_list, plain),
-            'config': self.public_conf
         }
         # We are only checking for one level deep comments
         if root_id is None:
@@ -1115,6 +1115,39 @@ def preview(self, environment, request):
 
         return JSON({'text': self.isso.render(data["text"])}, 200)
 
+    """
+    @api {get} /config fetch client config
+    @apiGroup Thread
+    @apiDescription
+        Fetches configuration of client parameters. The following settings are sent as a `config` object from the server to the client:
+
+            reply-to-self
+            require-author
+            require-email
+            reply-notifications
+            gravatar
+
+    @apiSuccess {Object[]} config
+        The client configuration object.
+
+    @apiExample {curl} get the client config:
+        curl 'https://comments.example.com/config'
+
+    @apiSuccessExample Client config:
+        {
+          "config": {
+            "reply-to-self": false,
+            "require-email": false,
+            "require-author": false,
+            "reply-notifications": false,
+            "gravatar": false
+          }
+        }
+    """
+    def config(self, environment, request):
+        rv = {'config': self.public_conf}
+        return JSON(rv, 200)
+
     def demo(self, env, req):
         return redirect(
             get_current_url(env, strip_querystring=True) + '/index.html'