https://distributionalgraphormer.github.io/static/js/index.js

1window.HELP_IMPROVE_VIDEOJS = false;
2
3var INTERP_BASE = "./static/interpolation/stacked";
4var INTERP_BASE2 = "./static/interpolation/stacked2";
5var INTERP_BASE_CATA_1 = "./static/interpolation/catalyst_1";
6var INTERP_BASE_CATA_2 = "./static/interpolation/catalyst_2";
7var INTERP_BASE_CATA_3 = "./static/interpolation/catalyst_3";
8var NUM_INTERP_FRAMES = 50;
9var NUM_INTERP_FRAMES_CATA = 25;
10
11var interp_images = [];
12function preloadInterpolationImages() {
13  for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
14    var path = INTERP_BASE + '/' + String(i).padStart(6, '0') + '.jpg';
15    interp_images[i] = new Image();
16    interp_images[i].src = path;
17  }
18}
19var interp_images2 = [];
20function preloadInterpolationImages2() {
21  for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
22    var path = INTERP_BASE2 + '/' + String(i).padStart(6, '0') + '.jpg';
23    interp_images2[i] = new Image();
24    interp_images2[i].src = path;
25  }
26}
27var interp_images_CATA1 = [];
28function preloadInterpolationImages_cata1() {
29  for (var i = 0; i < NUM_INTERP_FRAMES_CATA; i++) {
30    var path = INTERP_BASE_CATA_1 + '/' + String(i).padStart(6, '0') + '.png';
31    interp_images_CATA1[i] = new Image();
32    interp_images_CATA1[i].src = path;
33  }
34}
35var interp_images_CATA2 = [];
36function preloadInterpolationImages_cata2() {
37  for (var i = 0; i < NUM_INTERP_FRAMES_CATA; i++) {
38    var path = INTERP_BASE_CATA_2 + '/' + String(i).padStart(6, '0') + '.png';
39    interp_images_CATA2[i] = new Image();
40    interp_images_CATA2[i].src = path;
41  }
42}
43var interp_images_CATA3 = [];
44function preloadInterpolationImages_cata3() {
45  for (var i = 0; i < NUM_INTERP_FRAMES_CATA; i++) {
46    var path = INTERP_BASE_CATA_3 + '/' + String(i).padStart(6, '0') + '.png';
47    interp_images_CATA3[i] = new Image();
48    interp_images_CATA3[i].src = path;
49  }
50}
51
52function setInterpolationImage(i) {
53  var image = interp_images[i];
54  image.ondragstart = function () { return false; };
55  image.oncontextmenu = function () { return false; };
56  $('#interpolation-image-wrapper').empty().append(image);
57}
58function setInterpolationImage2(i) {
59  var image = interp_images2[i];
60  image.ondragstart = function () { return false; };
61  image.oncontextmenu = function () { return false; };
62  $('#interpolation-image-wrapper2').empty().append(image);
63}
64function setInterpolationImageCata1(i) {
65  var image = interp_images_CATA1[i];
66  image.ondragstart = function () { return false; };
67  image.oncontextmenu = function () { return false; };
68  $('#interpolation-image-wrapper-catalyst1').empty().append(image);
69}
70function setInterpolationImageCata2(i) {
71  var image = interp_images_CATA2[i];
72  image.ondragstart = function () { return false; };
73  image.oncontextmenu = function () { return false; };
74  $('#interpolation-image-wrapper-catalyst2').empty().append(image);
75}
76function setInterpolationImageCata3(i) {
77  var image = interp_images_CATA3[i];
78  image.ondragstart = function () { return false; };
79  image.oncontextmenu = function () { return false; };
80  $('#interpolation-image-wrapper-catalyst3').empty().append(image);
81}
82
83
84function openTab(evt, tabName) {
85  var i, x, tablinks;
86  x = document.getElementsByClassName("content-tab");
87  for (i = 0; i < x.length; i++) {
88    x[i].style.display = "none";
89  }
90  tablinks = document.getElementsByClassName("tab");
91  for (i = 0; i < x.length; i++) {
92    tablinks[i].className = tablinks[i].className.replace(" is-active", "");
93  }
94  document.getElementById(tabName).style.display = "block";
95  evt.currentTarget.className += " is-active";
96}
97
98
99
100$(document).ready(function () {
101
102  var options = {
103    slidesToScroll: 1,
104    slidesToShow: 1,
105    loop: true,
106    infinite: true,
107    autoplay: false,
108    autoplaySpeed: 3000,
109  }
110
111  // Initialize all div with carousel class
112  var carousels = bulmaCarousel.attach('.carousel', options);
113
114  // Loop on each carousel initialized
115  for (var i = 0; i < carousels.length; i++) {
116    // Add listener to  event
117    carousels[i].on('before:show', state => {
118      console.log(state);
119    });

120  }
121
122  // Access to bulmaCarousel instance of an element
123  var element = document.querySelector('#my-element');
124  if (element && element.bulmaCarousel) {
125    // bulmaCarousel instance is available as element.bulmaCarousel
126    element.bulmaCarousel.on('before-show', function (state) {
127      console.log(state);
128    });
129  }
130
131  preloadInterpolationImages();
132  preloadInterpolationImages2();
133  preloadInterpolationImages_cata1();
134  preloadInterpolationImages_cata2();
135  preloadInterpolationImages_cata3();
136
137  $('#interpolation-slider').on('input', function (event) {
138    setInterpolationImage(this.value);
139  });
140  setInterpolationImage(0);
141  $('#interpolation-slider').prop('max', NUM_INTERP_FRAMES - 1);
142
143  $('#interpolation-slider2').on('input', function (event) {
144    setInterpolationImage2(this.value);
145  });
146  setInterpolationImage2(0);
147  $('#interpolation-slider2').prop('max', NUM_INTERP_FRAMES - 1);
148
149  $('#interpolation-slider-catalyst1').on('input', function (event) {
150    setInterpolationImageCata1(this.value);
151  });
152  setInterpolationImageCata1(0);
153  $('#interpolation-slider-catalyst1').prop('max', NUM_INTERP_FRAMES_CATA - 1);
154
155  $('#interpolation-slider-catalyst2').on('input', function (event) {
156    setInterpolationImageCata2(this.value);
157  });
158  setInterpolationImageCata2(0);
159  $('#interpolation-slider-catalyst2').prop('max', NUM_INTERP_FRAMES_CATA - 1);
160
161  $('#interpolation-slider-catalyst3').on('input', function (event) {
162    setInterpolationImageCata3(this.value);
163  });
164  setInterpolationImageCata3(0);
165  $('#interpolation-slider-catalyst3').prop('max', NUM_INTERP_FRAMES_CATA - 1);
166
167
168  bulmaSlider.attach();
169
170
171  document.querySelectorAll('button.loads-model').forEach((button) => {
172    button.setAttribute('data-action', 'load');
173    button.addEventListener('click', () => {
174      // button.classList = button.classList + " disappearing";
175      // let model = button.parentElement.parentElement;
176      // get the current content of the button
177      let content = button.innerHTML;
178      let words = content.split(' ');
179      let pdbword = words[1];
180
181      let model = document.getElementById(button.getAttribute("data-controls"));
182
183      if (button.getAttribute('data-action') == 'load') {
184        model.dismissPoster();
185        button.classList = "btn btn-disabled";
186        button.innerHTML = "Hide " + pdbword + " Structure";
187        button.setAttribute('data-action', 'unload');
188      } else {
189        model.showPoster();
190        button.classList = "btn btn-primary";
191        button.innerHTML = "Load " + pdbword + " Structure";
192        button.setAttribute('data-action', 'load');
193      };
194    });
195  });
196
197})