You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

606r

Beginner

  • "606r" started this thread

Posts: 32

Location: Russia

Occupation: Freelance

  • Send private message

1

Saturday, September 10th 2016, 6:32pm

JS click event works only on desktop (mozilla, chrome, safari)

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:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    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();
      }
    }


full plugin "code"

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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;
    }

}

This post has been edited 3 times, last edit by "606r" (Oct 3rd 2016, 9:42am)