私の目標は、どこにアンカータグを付けhref="#share"
て、このボタンを追加してTwitterのブートストラップポップオーバーに変えることです。私はこれを機能させています。これを複雑にしているのは、html をドキュメントに追加し、クローンを試してみ.clone(true)
たのですが、何らかの理由でイベントが追跡されないことです。
以下に例を示します: (画像の上で「共有」ボタンをクリックします): http://reggi.myshopify.com/products/change-it-tee
より具体的な問題は、ソーシャル アイコンをクリックしても何も起こらないことです。
これが以下のコードの要点です。これは私が持っているrequireモジュールで、DOMのどこにでも何でも取り、href="#share"
このボタンを追加してポップオーバーに変えます。
define(["jquery", "jquery-bootstrap", "addthis"], function($, jb, at){
var share = function(){
var html = '<!-- AddThis Button BEGIN -->'+
'<div class="addthis_toolbox addthis_floating_style addthis_32x32_style hide">'+
'<a class="addthis_button_facebook"></a>'+
'<a class="addthis_button_twitter"></a>'+
'<a class="addthis_button_pinterest_share"></a>'+
'<a class="addthis_button_tumblr"></a>'+
'<a class="addthis_button_thefancy"></a>'+
'<a class="addthis_button_compact"></a>'+
'</div>'+
'<!-- AddThis Button END -->';
var template = '<div class="popover fade top in" id="share">'+
'<div class="arrow"></div>'+
'<div class="popover-content"></div>'+
'</div>';
var isVisible = false;
var clickedAway = true;
$("body").append(html);
var ignite = function(){
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=holstee';
$("head").append(script);
console.log("ignition");
};
$('[href="#share"]')
.show()
.popover({
content: function(){
return $(".addthis_toolbox").clone().removeClass("hide");
},
html: true,
placement: "top",
template: template,
trigger: "manual"
}).click(function(event){
event.preventDefault();
var toggle = ($(this).data('toggle') == undefined) ? true : $(this).data('toggle');
clickedAway = false;
if(toggle){
$(this).popover("show");
isVisible = true;
ignite();
}else{
$(this).popover("hide");
isVisible = false;
}
$(this).data('toggle', !toggle);
});
/*
$(document).click(function(e) {
if(isVisible & clickedAway){
$('[href="#share"]').popover('hide');
isVisible = clickedAway = false
}else{
clickedAway = true
}
});
*/
}
return share;
});