Process http://js-kit.com/comments.js in the Drupal JavaScript behaviors rather then having it in the footer. This allows the code to be aggregated into the large JavaScript file, while still processes it after the page has run. It means that we can remove the implementation of hook_footer.

CommentFileSizeAuthor
#4 519152.patch6.02 KBrobloach
#2 jskit-pimp.patch4.79 KBrobloach
jskitcomments.patch2.29 KBrobloach

Comments

robloach’s picture

robloach
he/him
commented
Status: Active » Needs review
robloach’s picture

robloach
he/him
commented
Priority: Normal » Critical
StatusFileSize
new jskit-pimp.patch4.79 KB

Discovered this was useful for the comment count links as well.

rehos’s picture

rehos commented

I can see the benefits of using Drupal behaviors. But I also need a solution for style customization of the JS-Kit Comments widget. JS-Kit tells us to add a style tag just after the script tag that loads the their comments.js script (for example see Theming JS-Kit Comments). Note that adding style tags violates the standard, but that's the way JS-Kit suggests you overrule the style.

The obvious alternatives are:
1) Add the style tag to the page.tpl.php.
2) Add a custom module with hook_footer() function.

Are there any other alternatives to embed to possibility of style customization within the module?

robloach’s picture

robloach
he/him
commented
StatusFileSize
new 519152.patch6.02 KB

This patch allows themes to have a "jskitcomments.css" in the theme directory which is included when the comments are present. I've tested it out with the CSS you provided in the example and it seems to work. It also adds documentation about this in README.txt. Seems a bit more sane then having inline style tags, or having CSS in your template.php file, and allows the CSS to be aggregated with the rest of the styles.

If this is committed, we'd have to update the online documentation. Thanks for giving it a look!

rehos’s picture

rehos commented

The patch 519152.patch will load the stylesheet in the header of the html document as expected, but won't have any effect on the JS-Kit Comments widget (i.e. the styles are not applied). I have tested your patch in FF, IE8, Chrome. The stylesheet needs to be loaded after the comments.js script has been processed.

I already tried the success callback of the jQuery Ajax call, but the callback fires before the browser has processed the script. Could use setTimeout within the callback to postpone the load of the stylesheet, but I don't like the use of timeouts. So I'am still looking for a working solution for customized styles.

rehos’s picture

rehos commented

After further research I discovered the JSKitAPI event comments-data-loaded which fires after the comments widget has loaded. In the code snippet below I subscribe to this event in the Ajax success callback and register a handler that loads the stylesheet.

jQuery.ajax({
  type: 'GET',
  url: 'http//js-kit.com/comments.js',
  dataType: 'script',
  cache: true,
  success: function(data, status) { 
    JSKitAPI.subscribe('comments-data-loaded', function() {
      var fileref=document.createElement("link")
      fileref.setAttribute("rel", "stylesheet")
      fileref.setAttribute("type", "text/css")
      fileref.setAttribute("href", "/jskitcomments.css")
      document.getElementsByTagName("head")[0].appendChild(fileref)
    });
  }
})

I have asked JS-Kit support to comment on this use of their API. I'll get back to you when I have a response from them.

rehos’s picture

rehos commented
Status: Needs review » Fixed

Issue is fixed in the HEAD of this project. Tested in sandbox, but before releasing I will test the current HEAD on my own production site.

robloach’s picture

robloach
he/him
commented

Nicely done! You might be able to use jQuery in here though:

            var link=document.createElement("link");
            link.setAttribute("rel", "stylesheet");
            link.setAttribute("type", "text/css");
            link.setAttribute("href", Drupal.settings.jskitcommentscss);
            document.getElementsByTagName("head")[0].appendChild(link);

Possibly turn that into this:


$('head').append('< link rel="stylesheet" type="text/css" href="' + Drupal.settings.jskitcommentscss + '"/>');

Great work! I like what you did with jskitcomments_count_helper().

rehos’s picture

rehos commented

Thanks Rob, I replaced the traditional Javascript code with the better jQuery alternative. It is committed in the HEAD.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.