https://static.ega-archive.org/js/learning-path.js

1(function(learning_path){ // scoping
2
3    if(!learning_path) return;
4
5  var learning_path_section = document.querySelector('section#animation');
6  var learning_path_title = learning_path_section.querySelector('h1#LP_title');
7  var learning_path_subtitle = learning_path_section.querySelector('h2#LP_subtitle');
8  var learning_path_nav = learning_path_section.querySelector('nav');
9  var learning_path_buttons = learning_path_section.querySelectorAll('nav span[data-lp-button]');
10  var start_over_button = learning_path_section.querySelector('button#start-over');
11  var back_button = learning_path_section.querySelector('button#back');
12
13  var current_path = learning_path;
14  var path = [];
15  var current_level = 0;
16
17  function changeScene(clicked_id) {
18    learning_path_section.classList.remove('learning_path');
19    if(current_level>0) learning_path_section.classList.add('learning_path');
20
21    if(clicked_id) {
22      current_path = current_path['buttons'][clicked_id];
23      path.push('buttons');
24      path.push(clicked_id);
25    }
26
27    // Clear the Scene
28    learning_path_buttons.forEach(item => {
29      item.innerHTML = '';
30      item.setAttribute('data-lp-id','');
31    });
32    learning_path_subtitle.innerHTML = '';
33
34    for (var [key, value] of Object.entries(current_path)) {
35      if(key == 'title') learning_path_title.innerHTML = value;
36      if(key == 'sub_title' && value) learning_path_subtitle.innerHTML = value;
37      if(key == 'buttons') {
38        button_index = 1;
39        for (var [key, value] of Object.entries(current_path['buttons'])) {
40          var button = learning_path_nav.querySelector('span[data-lp-button="'+button_index+'"]');
41          button.innerHTML = value['button'];
42          button.setAttribute('data-lp-id',key);
43          if(value['title']) button.removeAttribute('data-link');
44          else button.setAttribute('data-link','yes');
45          button_index++;
46        }
47      }
48    }
49  }
50
51  learning_path_buttons.forEach(item => {
52    item.addEventListener("click", () => {
53      if(item.hasAttribute('data-link')) return false;
54      current_level++;
55      changeScene(item.getAttribute('data-lp-id'));
56    });
57  });
58
59  changeScene();
60
61  start_over_button.onclick = function(){
62    current_path = learning_path;
63    current_level = 0;
64    path = [];
65    changeScene();
66  }
67
68  back_button.onclick = function(){
69    up_level = (path.length - 2);
70    new_path = [];
71    current_path = learning_path;
72
73    path.forEach((item, i) => {
74      if(i < up_level) {
75        current_path = current_path[item];
76        new_path.push(item);
77      }
78    });
79
80    path = new_path;
81    if(path.length == 0) current_level = 0;
82
83    changeScene();
84  }
85
86})(window.ega_learning_path);