“滚动”而不是“点击”

时间:2014-11-11 07:48:29

标签: javascript jquery scroll disqus

inlineDisqussions是一个漂亮的单个.js文件,允许用户轻松地将Disqus评论主题添加到某个文本正文的每个段落。

目前,当点击其中一个小鼠标悬停弹出气泡"在一个段落旁边(见here),它打开段落一侧的连接的Disqus线程。

我想修改.js代码以实现以下目的:

  1. 而不是点击"鼠标悬停弹出气泡",作为 正在滚动文本,与顶部相关的注释 段应该自动打开。
  2. 所有Disqus评论主题应仅在某个Div内打开, 而在其他任何地方。
  3. 我不知道怎么做。建议?

    整个.js代码可以在GitHub上的单个文件中看到: https://github.com/tsi/inlineDisqussions/blob/master/inlineDisqussions.js

    /*
     *  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) {
            $('<div id="disqussions_wrapper"></div>').appendTo($('body'));
          }
          if ($('#disqus_thread').length === 0) {
            $('<div id="disqus_thread"></div>').appendTo('#disqussions_wrapper');
          }
          else {
            mainThreadHandler();
          }
          if (settings.highlighted) {
            $('<div id="disqussions_overlay"></div>').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 = $('<a class="' + cls + '" />')
          .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('<div class="disqussion" />')
          .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 = $('<a class="main-disqussion-link" />')
            .attr('href', window.location.pathname + '#disqus_thread')
            .text('Comments')
            .wrap('<h2 class="main-disqussion-link-wrp" />')
            .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 <head>.
          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(disqus_identifier);
        }
    
        callback(source);
    
      };
    
      var loadDisqusCounter = function() {
    
        // Append the Disqus count script to <head>.
        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').removeClass("positioned");
          css = {
            'position': 'static',
            'width': 'auto'
          };
        }
        else {
          $('#disqus_thread').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);
    

0 个答案:

没有答案