/* * inlineDisqussions * By Tsachi Shlidor ( @shlidor ) * Inspired by http://mystrd.at/articles/multiple-disqus-threads-on-one-page/ * * USAGE: * * disqus_shortname = 'your_disqus_shortname'; * $(document).ready(function() { * $("p").inlineDisqussions(options); * }); * * See https://github.com/tsi/inlineDisqussions for more info. */ // Disqus global vars. var disqus_shortname; var disqus_identifier; var disqus_url; (function($) { var settings = {}; $.fn.extend({ inlineDisqussions: function(options) { // Set up defaults var defaults = { identifier: 'disqussion', displayCount: true, highlighted: false, position: 'right', background: 'white', maxWidth: 9999 }; // Overwrite default options with user provided ones. settings = $.extend({}, defaults, options); // Append #disqus_thread to body if it doesn't exist yet. if ($('#disqussions_wrapper').length === 0) { $('
').appendTo($('body')); } if ($('#disqus_thread').length === 0) { $('').appendTo('#disqussions_wrapper'); } else { mainThreadHandler(); } if (settings.highlighted) { $('').appendTo($('body')); } // Attach a discussion to each paragraph. $(this).each(function(i) { disqussionNotesHandler(i, $(this)); }); // Display comments count. if (settings.displayCount) { loadDisqusCounter(); } // Hide the discussion. $('html').click(function(event) { if($(event.target).parents('#disqussions_wrapper, .main-disqussion-link-wrp').length === 0) { hideDisqussion(); } }); } }); var disqussionNotesHandler = function(i, node) { var identifier; // You can force a specific identifier by adding an attribute to the paragraph. if (node.attr('data-disqus-identifier')) { identifier = node.attr('data-disqus-identifier'); } else { while ($('[data-disqus-identifier="' + window.location.pathname + settings.identifier + '-' + i + '"]').length > 0) { i++; } identifier = window.location.pathname + settings.identifier + '-' + i; } // Create the discussion note. var cls = settings.highlighted ? 'disqussion-link disqussion-highlight' : 'disqussion-link'; var a = $('') .attr('href', window.location.pathname + settings.identifier + '-' + i + '#disqus_thread') .attr('data-disqus-identifier', identifier) .attr('data-disqus-url', window.location.href + settings.identifier + '-' + i) .attr('data-disqus-position', settings.position) .text('+') .wrap('') .parent() .appendTo('#disqussions_wrapper'); a.css({ 'top': node.offset().top, 'left': settings.position == 'right' ? node.offset().left + node.outerWidth() : node.offset().left - a.outerWidth() }); node.attr('data-disqus-identifier', identifier).mouseover(function() { a.addClass("hovered"); }).mouseout(function() { a.removeClass("hovered"); }); // Load the relative discussion. a.delegate('a.disqussion-link', "click", function(e) { e.preventDefault(); if ($(this).is('.active')) { e.stopPropagation(); hideDisqussion(); } else { loadDisqus($(this), function(source) { relocateDisqussion(source); }); } }); }; var mainThreadHandler = function() { // Create the discussion note. if ($('a.main-disqussion-link').length === 0) { var a = $('') .attr('href', window.location.pathname + '#disqus_thread') .text('Comments') .wrap('') .parent() .insertBefore('#disqus_thread'); // Load the relative discussion. a.delegate('a.main-disqussion-link', "click", function(e) { e.preventDefault(); if ($(this).is('.active')) { e.stopPropagation(); } else { loadDisqus($(this), function(source) { relocateDisqussion(source, true); }); } }); } }; var loadDisqus = function(source, callback) { disqus_identifier = source.attr('data-disqus-identifier'); disqus_url = source.attr('data-disqus-url'); if (window.DISQUS) { // If Disqus exists, call it's reset method with new parameters. DISQUS.reset({ reload: true, config: function () { this.page.identifier = disqus_identifier; this.page.url = disqus_url; } }); } else { // Append the Disqus embed script to . var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//' + disqus_shortname + '.disqus.com/embed.js'; $('head').append(s); } // Add 'active' class. $('a.disqussion-link, a.main-disqussion-link').removeClass('active').filter(source).addClass('active'); // Highlight if (source.is('.disqussion-highlight')) { highlightDisqussion(identifier); } callback(source); }; var loadDisqusCounter = function() { // Append the Disqus count script to . if (!$('script[src*="disqus.com/count.js"]').length) { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//' + disqus_shortname + '.disqus.com/count.js'; $('head').append(s); var limit = 0; var timer = setInterval(function() { limit++; // After script is loaded, show bubles with numbers. if (typeof(DISQUSWIDGETS) === 'object') { $('.disqussion-link').filter(function() { return $(this).text().match(/[1-9]/g); }).addClass("has-comments"); clearInterval(timer); } // Don't run forever. if (limit > 10) { clearInterval(timer); } }, 1000) } }; var relocateDisqussion = function(el, main) { // Move the discussion to the right position. var css = {}; if (main === true) { $('#disqus_thread') .appendTo('.disqus_thread_wrap') .removeClass("positioned"); css = { 'position': 'static', 'width': 'auto' }; } else { if (!$(".disqus_thread_wrap").length) { $('#disqus_thread').wrap(''); } $('#disqus_thread') .appendTo("body") .addClass("positioned"); css = { 'position': 'absolute' }; } css.backgroundColor = settings.background; var animate = {}; if (el.attr('data-disqus-position') == 'right') { animate = { "top": el.offset().top, "left": el.offset().left + el.outerWidth(), "width": Math.min(parseInt($(window).width() - (el.offset().left + el.outerWidth()), 10), settings.maxWidth) }; } else if (el.attr('data-disqus-position') == 'left') { animate = { "top": el.offset().top, "left": el.offset().left - Math.min(parseInt(el.offset().left, 10), settings.maxWidth), "width": Math.min(parseInt(el.offset().left, 10), settings.maxWidth) }; } $('#disqus_thread').stop().fadeIn('fast').animate(animate, "fast").css(css); }; var hideDisqussion = function() { $('#disqus_thread').stop().fadeOut('fast'); $('a.disqussion-link').removeClass('active'); // settings.highlighted $('#disqussions_overlay').fadeOut('fast'); $('body').removeClass('disqussion-highlight'); $('[data-disqus-identifier]').removeClass('disqussion-highlighted'); }; var highlightDisqussion = function(identifier) { $('body').addClass('disqussion-highlight'); $('#disqussions_overlay').fadeIn('fast'); $('[data-disqus-identifier]') .removeClass('disqussion-highlighted') .filter('[data-disqus-identifier="' + identifier + '"]:not(".disqussion-link")') .addClass('disqussion-highlighted'); }; })(jQuery);