https://www.afbs.ca/js/page/boardofgovernors.js?v2

1$("#brd").hide();
2$("#loadingdots").loadingdots({ dots : 5 });
3$.ajax({
4  url: "/drupal/paragraph/export/json/330?_format=json",
5  cache: false,
6  contentType: false,
7  processData: false,
8  success: function (response) {
9    $("#loadingdots").hide();
10
11    var source = $("#brd").html();
12    var template = Handlebars.compile(source);
13    var html = template(response.data);
14    $('#brd').html(html).show();
15
16    var IndexSelected = -1; //item Index
17    var IPR = 4; //number of items per row
18    var Elems = $('#brd div.board-cell'); //Array of items
19    var PreDesc = $('#pre-desc'); //id of div with tag description
20    var Desc = $('#desc'); //id of div with description
21    var Arrow = $('#arrow');
22    var $Description = $("#desc .add-text:first");
23
24    SlideSpeed = 500;//speed of sliding description
25
26    window.onresize = function () {
27      resizeGrid();
28    };
29
30    //resizes the down arrow according to element selected
31    function resizeTriangle(elemTmp) {
32      var h = $(elemTmp).scrollTop();
33      var w = $(elemTmp).width();
34      var col = IndexSelected % IPR;
35      var newW = col * w + ((w / 2) - 7);
36      Arrow.show().css({'top': h, 'left': newW});
37    }
38
39    //readjusts the description page
40    function resizeGrid() {
41      var w = $(window).width();
42
43      var tmpIPR = IPR;
44      if (w <= 767) {
45        tmpIPR = 1;
46      }
47      else if (w <= 1090) {
48        tmpIPR = 2;
49      }
50      else if (w < 1460) {
51        tmpIPR = 3;
52      }
53      else {
54        tmpIPR = 4;
55      }
56      if (tmpIPR != IPR) {
57        IPR = tmpIPR;
58        var newRow = ((Math.floor((IndexSelected) / IPR) + 1) * IPR) - 1;
59        var elem = Elems.eq(newRow);
60        Desc.insertAfter(elem);
61      }
62      var elemTmp = Elems.eq(IndexSelected);
63      resizeTriangle(elemTmp);
64    }
65
66    function slideDown(PersonId, index, elemTmp) {
67      IndexSelected = index;
68      var newRow = (Math.floor((index) / IPR) + 1) * IPR - 1;
69      if (newRow >= Elems.length)
70        newRow = Elems.length-1;
71      var elem = Elems.eq(newRow);
72      var img = Elems.eq(index).find('img');
73      PreDesc.show().insertAfter(img);
74      resizeTriangle(elemTmp);
75
76      //find tile index
77      var tileIndex = null;
78      var data = response;
79      $.each(data, function (iTile, employee) {
80        if (iTile == PersonId) {
81          tileIndex = iTile;
82          return false;
83        }
84      });
85
86      //clear description
87      $Description.find(".name").html('');
88      $Description.find(".title").html('');
89      $Description.find(".description").html('');
90
91      //inject description
92      $Description.find(".name").html(data[tileIndex].field_mosaic_image_alt);
93      $Description.find(".title").html(data[tileIndex].field_mosaic_image_caption);
94      $Description.find(".description").html(data[tileIndex].field_mosaic_blurb);
95
96      //$("#desc .add-text:first").html(description[index]);
97      Desc.hide().slideDown({duration: SlideSpeed, easing: 'swing'}).insertAfter(elem);
98    }
99
100    Elems.click(function () {
101      var index = Elems.index($(this));
102      var elemTmp = Elems.eq(index);
103      var isOrange = elemTmp.attr('data-orange');
104      if (!(typeof isOrange !== typeof undefined)) {
105        if (IndexSelected == index) {
106          PreDesc.hide();
107          Arrow.hide();
108          Desc.slideUp({duration: SlideSpeed, easing: 'swing'});
109          IndexSelected = -1;
110          return;
111        }
112
113        slideDown(this.id, index, elemTmp);
114        if(Desc.is(":visible")){
115          scrollTo(Desc.prev());
116        }
117      }
118    });
119    resizeGrid();
120  },
121  error: function (response) {
122    //console.log(response);
123  }
124});
125
126