web/assets/js/skillmill.js at d8f1ee657d57336d8e90a239d20b4f3506e4aa73 · StimulatingSolutions/web · GitHub

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/*
 *
 * SKILLMILL - a circling windmill of portfolio images that
 *             highlight skills in the center upon hover
 *
 * Justin Taylor, July 2017
 *
 *
 */

(function($){

var circleImages;
var ci;
var numImages;
var angle;
var angleIncr;
var xOffSet;
var yOffSet;
var radius;
var x;
var y;
var intval;
var timer;
// todo: auto discover images
var images = ['placeholder01.png','placeholder02.png','placeholder03.png','placeholder04.png','placeholder05.png','placeholder06.png'];
var imagePath = 'media/portfolio/';


var template = `
  <span>
    <img class="rotisserie" src="{{__IMG__}}"  />
  </span>
`
var ci = $('#mill');

$('#info').hide();

// setup the area
function init()
{

  var ci = $('#mill');
  $.each(images, function(key, imageFile) {
    thisSpan = template.replace('{{__IMG__}}', imagePath+imageFile);
    ci.append(thisSpan);
    console.log(key);
    console.log(imageFile);

  });


  $('.rotisserie').hover(function(event) {

      // fade image in
      $('#rotisserie-platform').remove();
      stop_Int();
      var img = $('<img id="rotisserie-platform">');
      img.attr('src', event.currentTarget.src);
      img.appendTo('#info');
      clearTimeout(timer);
      $('#info').stop(true, true).fadeIn(1000);

    }, function() {

      // fade image out
      start_Int();
      $('#info').stop().fadeOut(1000);
    }
  );

  numImages = images.length;
  angle = (2*Math.PI)/numImages;
  angleIncr = 0;
  xOffSet = 230;
  yOffSet = 140;
  radius = 480;
  x = 0;
  y = 0;
  intval;
  start_Int();
}

// mathy stuff to calc thumb locations
function displayThumbs()
{
  var ci = $('#mill');
  ci.children('span').each(function(i) {
    x = (radius * Math.sin(angleIncr+(angle*i))) + xOffSet;
    y = 0.5*(radius * Math.cos(angleIncr+(angle*i))) + yOffSet;
    console.log("i="+i+";  x="+x+";  y="+y+";  angle="+angle+";  angleIncr="+angleIncr+";");
    ele = $(this);
    ele[0].style.left = x+"px";
    ele[0].style.top = y+"px";
    ele[0].style.display = 'none';
    ele[0].style.offsetHeight;
    ele[0].style.display = '';
  });
}


//
// timers & helpers
//
function commenseRotation()
{
  angleIncr = angleIncr + .002;
  displayThumbs();
}

function start_Int()
{
  intval=setInterval(function() {commenseRotation();},20);
}

function stop_Int(p)
{
  clearInterval(intval);
}


init();

})(jQuery);