beshur

Untitled

Jul 10th, 2014
206
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  *  inlineDisqussions
  3.  *  By Tsachi Shlidor ( @shlidor )
  4.  *  Inspired by http://mystrd.at/articles/multiple-disqus-threads-on-one-page/
  5.  *
  6.  *  USAGE:
  7.  *
  8.  *       disqus_shortname = 'your_disqus_shortname';
  9.  *       $(document).ready(function() {
  10.  *         $("p").inlineDisqussions(options);
  11.  *       });
  12.  *
  13.  *  See https://github.com/tsi/inlineDisqussions for more info.
  14.  */
  15.  
  16. // Disqus global vars.
  17. var disqus_shortname;
  18. var disqus_identifier;
  19. var disqus_url;
  20.  
  21. (function($) {
  22.  
  23.   var settings = {};
  24.  
  25.   $.fn.extend({
  26.     inlineDisqussions: function(options) {
  27.  
  28.       // Set up defaults
  29.       var defaults = {
  30.         identifier: 'disqussion',
  31.         displayCount: true,
  32.         highlighted: false,
  33.         position: 'right',
  34.         background: 'white',
  35.         maxWidth: 9999
  36.       };
  37.  
  38.       // Overwrite default options with user provided ones.
  39.       settings = $.extend({}, defaults, options);
  40.  
  41.       // Append #disqus_thread to body if it doesn't exist yet.
  42.       if ($('#disqussions_wrapper').length === 0) {
  43.         $('<div id="disqussions_wrapper"></div>').appendTo($('body'));
  44.       }
  45.       if ($('#disqus_thread').length === 0) {
  46.         $('<div id="disqus_thread"></div>').appendTo('#disqussions_wrapper');
  47.       }
  48.       else {
  49.         mainThreadHandler();
  50.       }
  51.       if (settings.highlighted) {
  52.         $('<div id="disqussions_overlay"></div>').appendTo($('body'));
  53.       }
  54.  
  55.       // Attach a discussion to each paragraph.
  56.       $(this).each(function(i) {
  57.         disqussionNotesHandler(i, $(this));
  58.       });
  59.  
  60.       // Display comments count.
  61.       if (settings.displayCount) {
  62.         loadDisqusCounter();
  63.       }
  64.  
  65.       // Hide the discussion.
  66.       $('html').click(function(event) {
  67.         if($(event.target).parents('#disqussions_wrapper, .main-disqussion-link-wrp').length === 0) {
  68.           hideDisqussion();
  69.         }
  70.       });
  71.  
  72.     }
  73.   });
  74.  
  75.   var disqussionNotesHandler = function(i, node) {
  76.  
  77.     var identifier;
  78.     // You can force a specific identifier by adding an attribute to the paragraph.
  79.     if (node.attr('data-disqus-identifier')) {
  80.       identifier = node.attr('data-disqus-identifier');
  81.     }
  82.     else {
  83.       while ($('[data-disqus-identifier="' + window.location.pathname + settings.identifier + '-' + i + '"]').length > 0) {
  84.         i++;
  85.       }
  86.       identifier = window.location.pathname + settings.identifier + '-' + i;
  87.     }
  88.  
  89.     // Create the discussion note.
  90.     var cls = settings.highlighted ? 'disqussion-link disqussion-highlight' : 'disqussion-link';
  91.     var a = $('<a class="' + cls + '" />')
  92.       .attr('href', window.location.pathname + settings.identifier + '-'  + i + '#disqus_thread')
  93.       .attr('data-disqus-identifier', identifier)
  94.       .attr('data-disqus-url', window.location.href + settings.identifier + '-' + i)
  95.       .attr('data-disqus-position', settings.position)
  96.       .text('+')
  97.       .wrap('<div class="disqussion" />')
  98.       .parent()
  99.       .appendTo('#disqussions_wrapper');
  100.     a.css({
  101.       'top': node.offset().top,
  102.       'left': settings.position == 'right' ? node.offset().left + node.outerWidth() : node.offset().left - a.outerWidth()
  103.     });
  104.  
  105.     node.attr('data-disqus-identifier', identifier).mouseover(function() {
  106.         a.addClass("hovered");
  107.     }).mouseout(function() {
  108.         a.removeClass("hovered");
  109.     });
  110.  
  111.     // Load the relative discussion.
  112.     a.delegate('a.disqussion-link', "click", function(e) {
  113.       e.preventDefault();
  114.  
  115.       if ($(this).is('.active')) {
  116.         e.stopPropagation();
  117.         hideDisqussion();
  118.       }
  119.       else {
  120.         loadDisqus($(this), function(source) {
  121.           relocateDisqussion(source);
  122.         });
  123.       }
  124.  
  125.     });
  126.  
  127.   };
  128.  
  129.   var mainThreadHandler = function() {
  130.  
  131.     // Create the discussion note.
  132.     if ($('a.main-disqussion-link').length === 0) {
  133.  
  134.       var a = $('<a class="main-disqussion-link" />')
  135.         .attr('href', window.location.pathname + '#disqus_thread')
  136.         .text('Comments')
  137.         .wrap('<h2 class="main-disqussion-link-wrp" />')
  138.         .parent()
  139.         .insertBefore('#disqus_thread');
  140.  
  141.       // Load the relative discussion.
  142.       a.delegate('a.main-disqussion-link', "click", function(e) {
  143.         e.preventDefault();
  144.  
  145.         if ($(this).is('.active')) {
  146.           e.stopPropagation();
  147.         }
  148.         else {
  149.           loadDisqus($(this), function(source) {
  150.             relocateDisqussion(source, true);
  151.           });
  152.         }
  153.  
  154.       });
  155.  
  156.     }
  157.  
  158.   };
  159.  
  160.   var loadDisqus = function(source, callback) {
  161.  
  162.     disqus_identifier = source.attr('data-disqus-identifier');
  163.     disqus_url = source.attr('data-disqus-url');
  164.  
  165.     if (window.DISQUS) {
  166.       // If Disqus exists, call it's reset method with new parameters.
  167.       DISQUS.reset({
  168.         reload: true,
  169.         config: function () {
  170.           this.page.identifier = disqus_identifier;
  171.           this.page.url = disqus_url;
  172.         }
  173.       });
  174.  
  175.     } else {
  176.  
  177.       // Append the Disqus embed script to <head>.
  178.       var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
  179.       s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
  180.       $('head').append(s);
  181.  
  182.     }
  183.  
  184.     // Add 'active' class.
  185.     $('a.disqussion-link, a.main-disqussion-link').removeClass('active').filter(source).addClass('active');
  186.  
  187.     // Highlight
  188.     if (source.is('.disqussion-highlight')) {
  189.       highlightDisqussion(identifier);
  190.     }
  191.  
  192.     callback(source);
  193.  
  194.   };
  195.  
  196.   var loadDisqusCounter = function() {
  197.  
  198.     // Append the Disqus count script to <head>.
  199.     if (!$('script[src*="disqus.com/count.js"]').length) {
  200.       var s = document.createElement('script');
  201.       s.type = 'text/javascript';
  202.       s.async = true;
  203.       s.src = '//' + disqus_shortname + '.disqus.com/count.js';
  204.  
  205.       $('head').append(s);
  206.  
  207.       var limit = 0;
  208.       var timer = setInterval(function() {
  209.         limit++;
  210.         // After script is loaded, show bubles with numbers.
  211.         if (typeof(DISQUSWIDGETS) === 'object') {
  212.           $('.disqussion-link').filter(function() {
  213.             return $(this).text().match(/[1-9]/g);
  214.           }).addClass("has-comments");
  215.           clearInterval(timer);
  216.         }
  217.         // Don't run forever.
  218.         if (limit > 10) {
  219.           clearInterval(timer);
  220.         }
  221.       }, 1000)
  222.  
  223.     }
  224.  
  225.   };
  226.  
  227.   var relocateDisqussion = function(el, main) {
  228.  
  229.     // Move the discussion to the right position.
  230.     var css = {};
  231.     if (main === true) {
  232.       $('#disqus_thread')
  233.         .appendTo('.disqus_thread_wrap')
  234.         .removeClass("positioned");
  235.       css = {
  236.         'position': 'static',
  237.         'width': 'auto'
  238.       };
  239.     }
  240.     else {
  241.       if (!$(".disqus_thread_wrap").length) {
  242.         $('#disqus_thread').wrap('<div class="disqus_thread_wrap" />');        
  243.       }
  244.       $('#disqus_thread')
  245.         .appendTo("body")
  246.         .addClass("positioned");
  247.       css = {
  248.         'position': 'absolute'
  249.       };
  250.     }
  251.     css.backgroundColor = settings.background;
  252.  
  253.     var animate = {};
  254.     if (el.attr('data-disqus-position') == 'right') {
  255.       animate = {
  256.         "top": el.offset().top,
  257.         "left": el.offset().left + el.outerWidth(),
  258.         "width": Math.min(parseInt($(window).width() - (el.offset().left + el.outerWidth()), 10), settings.maxWidth)
  259.       };
  260.     }
  261.     else if (el.attr('data-disqus-position') == 'left') {
  262.       animate = {
  263.         "top": el.offset().top,
  264.         "left": el.offset().left - Math.min(parseInt(el.offset().left, 10), settings.maxWidth),
  265.         "width": Math.min(parseInt(el.offset().left, 10), settings.maxWidth)
  266.       };
  267.     }
  268.  
  269.     $('#disqus_thread').stop().fadeIn('fast').animate(animate, "fast").css(css);
  270.  
  271.   };
  272.  
  273.   var hideDisqussion = function() {
  274.  
  275.     $('#disqus_thread').stop().fadeOut('fast');
  276.     $('a.disqussion-link').removeClass('active');
  277.  
  278.     // settings.highlighted
  279.     $('#disqussions_overlay').fadeOut('fast');
  280.     $('body').removeClass('disqussion-highlight');
  281.     $('[data-disqus-identifier]').removeClass('disqussion-highlighted');
  282.  
  283.   };
  284.  
  285.   var highlightDisqussion = function(identifier) {
  286.  
  287.     $('body').addClass('disqussion-highlight');
  288.     $('#disqussions_overlay').fadeIn('fast');
  289.     $('[data-disqus-identifier]')
  290.       .removeClass('disqussion-highlighted')
  291.       .filter('[data-disqus-identifier="' + identifier + '"]:not(".disqussion-link")')
  292.       .addClass('disqussion-highlighted');
  293.  
  294.   };
  295.  
  296. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment