ateadaze.github.io/scripts/main.js at main · ATeaDaze/ateadaze.github.io · 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
// Maximum window height
let scrollMax;
let viewportWidth;
let viewportHeight;
let pixelRatio;
// Current scollbar position
let scrollPosition = $(document).scrollTop();
// Size of one page scroll
let scrollPageSize = document.documentElement.scrollHeight;
// Percent scrolled
let pctScrolled = 0;
// Percent not scrolled = pctScrolled-1 (complement value)
let pctNotScrolled = 1;
// Get inital width of each bar
let hrRedSize = $("#progressBar1").width();
let hrGreenSize = $("#progressBar2").width();

$(document).ready(function() {

  // Find maximum window scroll height
  scrollMax = getDocumentHeight();
  updateDebugInfo();

  // TODO: add check for screen orientation to it works in portrait mode
  // Update value for maximum scroll height when orientation changes
  $(window).scroll(function() {
    // Update position on scroll
    scrollPosition = $(document).scrollTop();
    updateDebugInfo();
    updateBarGraphs();
  });

  // $(window).on("orientationchange", function() {
  //   scrollMax = getDocumentHeight();
  //   updateDebugInfo();
  //   console.log(`orientationchange`);
  // });

  window.addEventListener('resize', function() {
    scrollPosition = $(document).scrollTop();
//    scrollPageSize = document.documentElement.scrollHeight;
    scrollMax = getDocumentHeight();
    updateDebugInfo();
    updateBarGraphs();
  });

  // Buttons: jump to top and bottom of page
  $("#btnTop, #progressBar1, #pwInverse").on("click", function() {
    scrollToTop(0);
    updateDebugInfo();
  });
  $("#btnBottom, #progressBar2, #pw").on("click", function() {
    scrollToBottom(0);
    updateDebugInfo();
  });
  // Remove warning message on click/tap
  // $("#warningHeader").on("click touchstart", function() {
  //   $(this).removeClass("warningMessage");
  //   $(this).addClass("invisible");
  // });

  $("#owlCaveArt").on("click", function() {
    window.open("images/owl_cave.png");
  });

});

function updateDebugInfo() {
   // Get size of red and green bars
  hrRedSize = $("#progressBar1").width();
  hrGreenSize = $("#progressBar2").width();
  // Perent scrolled = current position / (maximum size - page size)
  pctScrolled = (scrollPosition / (scrollMax - scrollPageSize)).toFixed(3)
  // Find complement of percent scrolled
  pctNotScrolled = 1 - pctScrolled;
  pctNotScrolled = pctNotScrolled.toFixed(3);
  scrollProgressPercent = (pctScrolled * 100).toFixed(2);
  // Update debug table information
  // $("#txtDebugHRWidth1").html(hrRedSize.toFixed(1));
  // $("#txtDebugHRWidth2").html(hrGreenSize.toFixed(1));
  $("#txtDebugPctNotScrolled").html(pctNotScrolled);
  $("#txtDebugPctScrolled").html(pctScrolled);

  $("#txtDebugPctNotScrolled").html((Math.round(pctNotScrolled * 100) / 100).toFixed(2));
  $("#txtDebugPctScrolled").html((Math.round(pctScrolled * 100) / 100).toFixed(2));

  $("#txtDebugPos").html(scrollPosition);
  $("#txtDebugWindow").html(scrollMax - scrollPageSize);
  // $("#txtDebugTotal").html(scrollProgressPercent + "%");
  // $("#txtDebugOffset").html(scrollPageSize);
}

function updateBarGraphs() {
    // Convert values to raw percentages to use as CSS variables
    let scrollPercent = pctScrolled*100 + "%";
    let scrollPercentComplement = pctNotScrolled*100 + "%";
    // Update width of both bars
    $("#progressBar1").css({
      'width' : scrollPercentComplement
    });
    $("#progressBar2").css({
      'width' : scrollPercent
    });

}

// Get the entire document height (scrollMax)
function getDocumentHeight() {
  let d = document;
  return Math.max ( Math.max(d.body.scrollHeight, d.documentElement.scrollHeight),
                    Math.max(d.body.offsetHeight, d.documentElement.offsetHeight),
                    Math.max(d.body.clientHeight, d.documentElement.clientHeight) );
}

function scrollToBottom(msec) {
  window.scrollTo(msec, document.body.scrollHeight);
}

function scrollToTop(msec) {
  window.scrollTo({
    top: msec,
    behavior: 'auto'
  });
}