Browse code

Progress

Benjamin Roth authored on16/12/2022 19:54:08
Showing1 changed files
... ...
@@ -105,27 +105,72 @@ function Onepage(list, options) {
105 105
 
106 106
     window.scrollToNextSection = function () {
107 107
       let sections = document.querySelectorAll('#main .inside > .mod_article, #footer');
108
+      var scroller = document.querySelector('#scroll-down-indicator');
108 109
       var section;
109 110
 
110
-      for (let i = 0; i < sections.length; i++)
111
+      if ((scroller !== undefined && !scroller.classList.contains('-at-bottom')) || scroller === undefined)
111 112
       {
112
-        section = sections[i];
113
-        let boundingArea = section.getBoundingClientRect();
114
-        let viewportTrigger = window.innerHeight;
115 113
 
116
-        if (boundingArea.top < viewportTrigger-15)
114
+        for (var i = 0; i < sections.length; i++)
117 115
         {
118
-          continue;
119
-        }
116
+          section = sections[i];
117
+          let boundingArea = section.getBoundingClientRect();
118
+          let viewportTrigger = window.innerHeight;
119
+
120
+          if (boundingArea.top < viewportTrigger - 15)
121
+          {
122
+            continue;
123
+          }
120 124
 
125
+          scrollTo({
126
+            top: getOffsetTop(section),
127
+            behavior: "smooth"
128
+          });
129
+          break;
130
+        }
131
+      } else if (i == sections.length || (scroller !== undefined && scroller.classList.contains('-at-bottom'))) {
121 132
         scrollTo({
122
-          top: getOffsetTop(section),
133
+          top: 0,
123 134
           behavior: "smooth"
124 135
         });
125
-        break;
126 136
       }
137
+
127 138
       return section;
128 139
     }
129 140
 
141
+    var scroller = document.querySelector('#scroll-down-indicator');
142
+
143
+    if (scroller)
144
+    {
145
+      // let bottomElements = document.querySelectorAll('#main .inside > .mod_article:last-child, #footer');
146
+      let bottomElements = document.querySelectorAll('#footer');
147
+      const scrollIndicatorObserver = new IntersectionObserver (function (elements) {
148
+        let isIntersecting = false;
149
+        elements.forEach(function(element) {
150
+          if (element.isIntersecting) {
151
+            isIntersecting = true;
152
+          }
153
+        });
154
+        if (isIntersecting)
155
+        {
156
+          scroller.classList.add('-at-bottom');
157
+        } else {
158
+          scroller.classList.remove('-at-bottom');
159
+        }
160
+      },{rootMargin: "0px 0px 33.333% 0px"});
161
+
162
+      bottomElements.forEach(function(el) {
163
+        scrollIndicatorObserver.observe(el);
164
+      });
165
+
166
+      scroller.addEventListener("click", function(event) {
167
+        if (window.scrollToNextSection)
168
+        {
169
+          event.preventDefault();
170
+          window.scrollToNextSection();
171
+        }
172
+      })
173
+    }
174
+
130 175
   });
131 176
 };
Browse code

Progress

Benjamin Roth authored on16/12/2022 14:19:55
Showing1 changed files
... ...
@@ -98,4 +98,34 @@ function Onepage(list, options) {
98 98
   articles.forEach ((article) => {
99 99
     articleObserver.observe(article);
100 100
   });
101
+
102
+
103
+  /** AldeGott Section Scroller **/
104
+  document.addEventListener("DOMContentLoaded", function() {
105
+
106
+    window.scrollToNextSection = function () {
107
+      let sections = document.querySelectorAll('#main .inside > .mod_article, #footer');
108
+      var section;
109
+
110
+      for (let i = 0; i < sections.length; i++)
111
+      {
112
+        section = sections[i];
113
+        let boundingArea = section.getBoundingClientRect();
114
+        let viewportTrigger = window.innerHeight;
115
+
116
+        if (boundingArea.top < viewportTrigger-15)
117
+        {
118
+          continue;
119
+        }
120
+
121
+        scrollTo({
122
+          top: getOffsetTop(section),
123
+          behavior: "smooth"
124
+        });
125
+        break;
126
+      }
127
+      return section;
128
+    }
129
+
130
+  });
101 131
 };
Browse code

Remote Progress

Benjamin Roth authored on15/12/2022 14:35:11
Showing1 changed files
... ...
@@ -34,6 +34,8 @@ function Onepage(list, options) {
34 34
           if (pushUrl) {
35 35
             history.pushState("", "", uri + anchor.hash);
36 36
           }
37
+
38
+          event.target.blur();
37 39
         };
38 40
       }
39 41
     });
Browse code

Progress

Benjamin Roth authored on12/12/2022 00:17:47
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,99 @@
1
+function Onepage(list, options) {
2
+  options = options || {};
3
+  const articles = options.articles || document.querySelectorAll('.mod_article');
4
+  const pushUrl = options.pushUrl || false;
5
+  const offset = parseInt(options.offset, 10) || 0;
6
+
7
+  const offsetArray = Number(-offset) + '% 0% '+  Number(-offset) + '% 0%';
8
+  const el = document.querySelectorAll('a[href*="#"]:not([href="#"]):not([href="#0"])');
9
+  const uri = window.location.href.split("#")[0];
10
+
11
+  el.forEach ((anchor) => {
12
+    anchor.addEventListener('click', (event) => {
13
+      // check if on-page links
14
+      if (location.pathname.replace(/^\//, '') == anchor.pathname.replace(/^\//, '') && location.hostname == anchor.hostname) {
15
+
16
+        // figure out element to scroll to
17
+        let target = anchor.hash;
18
+        //let article = document.getElementById(anchor.hash.slice(1)).offsetTop;
19
+        // let navbarOffset = document.getElementById('navbar').offsetHeight;
20
+        let navbarOffset = 0;
21
+        let article = getOffsetTop(document.getElementById(anchor.hash.slice(1)),(navbarOffset !== undefined ? navbarOffset : 0));
22
+
23
+        if (target.length) {
24
+          // only prevent default if animation is actually gonna happen
25
+          event.preventDefault();
26
+
27
+          // scroll to selected article
28
+          scrollTo({
29
+            top: article,
30
+            behavior: "smooth"
31
+          });
32
+
33
+          // change url
34
+          if (pushUrl) {
35
+            history.pushState("", "", uri + anchor.hash);
36
+          }
37
+        };
38
+      }
39
+    });
40
+  });
41
+
42
+  // get correct offset
43
+  const getOffsetTop = (element,offset=0) => {
44
+    let offsetTop = 0;
45
+    while(element) {
46
+      offsetTop += element.offsetTop;
47
+      element = element.offsetParent;
48
+    }
49
+    return offsetTop-offset;
50
+  }
51
+
52
+  // set nav active when scrolling
53
+  const navActive = (article) => {
54
+    let active = list.querySelector('li.active');
55
+    let actualItem = list.querySelector('li[data-onepage-link="'+ article +'"]') ? list.querySelector('li[data-onepage-link="'+ article +'"]') : null;
56
+
57
+    // remove existing active status
58
+    if (typeof(active) != 'undefined' && active != null) {
59
+      active.classList.remove('active');
60
+    }
61
+
62
+    if (actualItem) {
63
+      // add active status when scrolling down
64
+      actualItem.classList.add('active');
65
+    } else if (active != null) {
66
+      // active status to previous list item when scrolling up AND active article is not in nav
67
+      article = getPreviousSibling(document.querySelector('#'+ article), '.onepage_article');
68
+      actualItem = list.querySelector('li[data-onepage-link="'+ article.id +'"]');
69
+      actualItem.classList.add('active');
70
+    }
71
+  };
72
+
73
+  let getPreviousSibling = function (elem, selector) {
74
+    let sibling = elem.previousElementSibling;
75
+
76
+    // if no previous element exists with this selector, use current element
77
+    if (!sibling) return elem.nextElementSibling;
78
+
79
+    // if selector does not exist, return previous element
80
+    if (!selector) return sibling;
81
+
82
+    while (sibling) {
83
+      if (sibling.matches(selector)) return sibling;
84
+      sibling = sibling.previousElementSibling;
85
+    }
86
+  };
87
+
88
+  const articleObserver = new IntersectionObserver (function (entries, observer) {
89
+    entries.forEach(function(entry) {
90
+      if (entry.isIntersecting) {
91
+        navActive(entry.target.id);
92
+      }
93
+    });
94
+  }, { rootMargin: offsetArray });
95
+
96
+  articles.forEach ((article) => {
97
+    articleObserver.observe(article);
98
+  });
99
+};