inlineDisqussions是一个漂亮的单个.js文件,允许用户轻松地将Disqus评论主题添加到某个文本正文的每个段落。
目前,当点击其中一个小鼠标悬停弹出气泡"在一个段落旁边(见here),它打开段落一侧的连接的Disqus线程。
我想修改.js代码以实现以下目的:
我不知道怎么做。建议?
整个.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);