The plugin works correct only on desktop .. and only unfolds on ios 7.1.2 safari )
Thanx in advance!
That's the logic behind opening:
social_icons.addEventListener('click', socialOpen);
function socialOpen(e){
pluginStatus = 2;
social_icons.removeEventListener("click",socialOpen);
social_icons.addEventListener("click", iconClick, false);
window.addEventListener("click", clickOutEvent, false);
draw_icons();
}
function iconClick(e){
window.open(e.target.link);
}
function clickOutEvent(e){
if (e.target.parentNode.id !== "social-plugin"){
pluginStatus = 1;
window.removeEventListener("click",clickOutEvent)
social_icons.removeEventListener("click", iconClick);
social_icons.addEventListener("click", socialOpen, false);
draw_icons();
}
}
Display More
full plugin "code"
function krpanoplugin()
{
var local = this; // save the 'this' pointer from the current plugin object
var krpano = null; // the krpano and plugin interface objects
var plugin = null;
// var device = null;
var icons = {},
pluginStatus = 1 //1 for closed, 2 for open
var social_icons = document.createElement('div')
local.registerplugin = function(krpanointerface, pluginpath, pluginobject) {
krpano = krpanointerface;
plugin = pluginobject;
plugin.registerattribute("mode", "normal");
plugin.registercontentsize();
social_icons.id = "social-plugin"
social_icons.style.position = "relative"
plugin.sprite.appendChild(social_icons)
createSocialIcons('vk', 'twitter', 'google', 'pinterest', 'fb');
draw_icons();
social_icons.addEventListener('click', socialOpen);
function socialOpen(e){
pluginStatus = 2;
social_icons.removeEventListener("click",socialOpen);
social_icons.addEventListener("click", iconClick, false);
window.addEventListener("click", clickOutEvent, false);
draw_icons();
}
function iconClick(e){
window.open(e.target.link);
}
function clickOutEvent(e){
if (e.target.parentNode.id !== "social-plugin"){
pluginStatus = 1;
window.removeEventListener("click",clickOutEvent)
social_icons.removeEventListener("click", iconClick);
social_icons.addEventListener("click", socialOpen, false);
draw_icons();
}
}
}
function createSocialIcons(){
var S1 = 3, // span between icons folded
S2 = 4, // span between icons unfolded
X = 88, // x max - even to W + S2!!!!!!!!
W = 40, // icon width
y, t,// temp vars
p = "/assets/icons/social/svg-s/", //path to icons
n, //icons in a raw
i, //iterator
l = arguments.length;
for (i = 0; i < l; i++){
icons[ arguments[i] ] = document.createElement('img');
icons[ arguments[i] ].src = p + arguments[i] + ".svg";
icons[ arguments[i] ].link = krpano.get("social_" + arguments[i] + "_link");
icons[ arguments[i] ].style.width = icons[ arguments[i] ].style.height = W + "px";
social_icons.appendChild(icons[ arguments[i] ]);
icons[ arguments[i] ].id = i;
icons[ arguments[i] ].x1 = icons[ arguments[i] ].y1 = i * S1 + "px";
t = W + S2
n = Math.floor( X / t );
y = Math.floor( i / X * t );
icons[ arguments[i] ].y2 = y * t + "px";
icons[ arguments[i] ].x2 = t * (i - y*n) + "px";
icons[ arguments[i] ].pos1 = icons[ arguments[i] ].pos2 = "absolute";
}
}
function draw_icons(){
for (i in icons){
icons[i].style.transform = "translate(" +icons[i]['x'+ pluginStatus] + "," +icons[i]['y'+ pluginStatus] + ")";
icons[i].style.webkitTransform = "translate(" +icons[i]['x'+ pluginStatus] + "," +icons[i]['y'+ pluginStatus] + ")";
icons[i].style.position = icons[i]['pos'+ pluginStatus];
icons[i].style.transition = "transform 500ms";
icons[i].style.webkitTransition = "transform 500ms";
}
}
local.unloadplugin = function(){
plugin = null;
krpano = null;
}
local.onresize = function(width,height){
return false;
}
}
Display More