From 2b35057d94d351bbd832947c39eba5052c029152 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Thu, 2 May 2019 16:50:49 +0100 Subject: [PATCH 01/43] Added test.html --- README.md | 4 ++-- test.html | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 test.html diff --git a/README.md b/README.md index 34b515e..eaf0ff3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# [jQuery Scrollify](https://projects.lukehaas.me/scrollify) +# [~~jQuery~~ Scrollify](https://projects.lukehaas.me/scrollify) -A jQuery plugin that assists scrolling and snaps to sections. Touch optimised. +A ~~jQuery~~ Pure JS plugin that assists scrolling and snaps to sections. Touch optimised. ## Demo diff --git a/test.html b/test.html new file mode 100644 index 0000000..45f3b58 --- /dev/null +++ b/test.html @@ -0,0 +1,34 @@ + + + + Scrollify test + + +
+

Wow this is scrollify

+
+
+

+ It's pretty cool isn't it +

+
+ + + + + + \ No newline at end of file From d96122b74213cb8d1b3ad024ffb5ae3111e4019f Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Thu, 2 May 2019 16:52:07 +0100 Subject: [PATCH 02/43] NO JQUERY --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index eaf0ff3..7ca1fab 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ A ~~jQuery~~ Pure JS plugin that assists scrolling and snaps to sections. Touch ## Basic setup -Scrollify requires jQuery 1.7+. +Scrollify requires ~~jQuery 1.7+~~ absolutely nothing. The most basic setup is as follows: @@ -153,7 +153,7 @@ The update method recalculates the heights and positions of the panels. `$.scrollify.current()` -The current method returns the current section as a jQuery object. +The current method returns the current section as a DOM object. `$.scrollify.currentIndex()` From 6375339246366b994960ec92ab7af17a1dc5bd9a Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Thu, 2 May 2019 17:17:17 +0100 Subject: [PATCH 03/43] Removed jquery dependencies --- jquery.scrollify.js | 853 ------------------------ scrollify.js | 851 +++++++++++++++++++++++ scrollify.jquery.json => scrollify.json | 5 +- test.html | 11 +- 4 files changed, 862 insertions(+), 858 deletions(-) delete mode 100644 jquery.scrollify.js create mode 100644 scrollify.js rename scrollify.jquery.json => scrollify.json (87%) diff --git a/jquery.scrollify.js b/jquery.scrollify.js deleted file mode 100644 index f7210a7..0000000 --- a/jquery.scrollify.js +++ /dev/null @@ -1,853 +0,0 @@ -/*! - * jQuery Scrollify - * Version 1.0.20 - * - * Requires: - * - jQuery 1.7 or higher - * - * https://github.com/lukehaas/Scrollify - * - * Copyright 2016, Luke Haas - * Permission is hereby granted, free of charge, to any person obtaining a copy of - * this software and associated documentation files (the "Software"), to deal in - * the Software without restriction, including without limitation the rights to - * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of - * the Software, and to permit persons to whom the Software is furnished to do so, - * subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS - * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR - * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER - * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN - * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - - - -if touchScroll is false - update index - - */ -(function (global,factory) { - "use strict"; - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['jquery'], function($) { - return factory($, global, global.document); - }); - } else if (typeof module === 'object' && module.exports) { - // Node/CommonJS - module.exports = factory(require('jquery'), global, global.document); - } else { - // Browser globals - factory(jQuery, global, global.document); - } -}(typeof window !== 'undefined' ? window : this, function ($, window, document, undefined) { - "use strict"; - var heights = [], - names = [], - elements = [], - overflow = [], - index = 0, - currentIndex = 0, - interstitialIndex = 1, - hasLocation = false, - timeoutId, - timeoutId2, - $window = $(window), - portHeight, - top = $window.scrollTop(), - scrollable = false, - locked = false, - scrolled = false, - manualScroll, - swipeScroll, - util, - disabled = false, - scrollSamples = [], - scrollTime = new Date().getTime(), - firstLoad = true, - initialised = false, - destination = 0, - wheelEvent = 'onwheel' in document ? 'wheel' : document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll', - settings = { - //section should be an identifier that is the same for each section - section: ".section", - sectionName: "section-name", - interstitialSection: "", - easing: "easeOutExpo", - scrollSpeed: 1100, - offset: 0, - scrollbars: true, - target:"html,body", - standardScrollElements: false, - setHeights: true, - overflowScroll:true, - updateHash: true, - touchScroll:true, - before:function() {}, - after:function() {}, - afterResize:function() {}, - afterRender:function() {} - }; - function getportHeight() { - return ($window.height() + settings.offset); - } - function animateScroll(index,instant,callbacks,toTop) { - if(currentIndex===index) { - callbacks = false; - } - if(disabled===true) { - return true; - } - if(names[index]) { - scrollable = false; - if(firstLoad===true) { - firstLoad = false; - settings.afterRender(); - } - if(callbacks) { - if( typeof settings.before == 'function' && settings.before(index,elements) === false ){ - return true; - } - } - interstitialIndex = 1; - destination = (!index) ? 0 : heights[index]; - if(firstLoad===false && currentIndex>index && toTop===false) { - //We're going backwards - if(overflow[index]) { - portHeight = getportHeight(); - - interstitialIndex = parseInt(elements[index].outerHeight()/portHeight); - - destination = parseInt(heights[index])+(elements[index].outerHeight()-portHeight); - } - } - - - if(settings.updateHash && settings.sectionName && !(firstLoad===true && index===0)) { - if(history.pushState) { - try { - history.replaceState(null, null, names[index]); - } catch (e) { - if(window.console) { - console.warn("Scrollify warning: Page must be hosted to manipulate the hash value."); - } - } - - } else { - window.location.hash = names[index]; - } - } - - currentIndex = index; - if(instant) { - $(settings.target).stop().scrollTop(destination); - if(callbacks) { - settings.after(index,elements); - } - } else { - locked = true; - if( $().velocity ) { - $(settings.target).stop().velocity('scroll', { - duration: settings.scrollSpeed, - easing: settings.easing, - offset: destination, - mobileHA: false - }); - } else { - $(settings.target).stop().animate({ - scrollTop: destination - }, settings.scrollSpeed,settings.easing); - } - - if(window.location.hash.length && settings.sectionName && window.console) { - try { - if($(window.location.hash).length) { - console.warn("Scrollify warning: ID matches hash value - this will cause the page to anchor."); - } - } catch (e) {} - } - $(settings.target).promise().done(function(){ - locked = false; - firstLoad = false; - if(callbacks) { - settings.after(index,elements); - } - }); - } - - } - } - - function isAccelerating(samples) { - function average(num) { - var sum = 0; - - var lastElements = samples.slice(Math.max(samples.length - num, 1)); - - for(var i = 0; i < lastElements.length; i++){ - sum += lastElements[i]; - } - - return Math.ceil(sum/num); - } - - var avEnd = average(10); - var avMiddle = average(70); - - if(avEnd >= avMiddle) { - return true; - } else { - return false; - } - } - var scrollify = function(options) { - initialised = true; - $.easing['easeOutExpo'] = function(x, t, b, c, d) { - return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; - }; - - manualScroll = { - handleMousedown:function() { - if(disabled===true) { - return true; - } - scrollable = false; - scrolled = false; - }, - handleMouseup:function() { - if(disabled===true) { - return true; - } - scrollable = true; - if(scrolled) { - //instant,callbacks - manualScroll.calculateNearest(false,true); - } - }, - handleScroll:function() { - if(disabled===true) { - return true; - } - if(timeoutId){ - clearTimeout(timeoutId); - } - - timeoutId = setTimeout(function(){ - scrolled = true; - if(scrollable===false) { - return false; - } - scrollable = false; - //instant,callbacks - manualScroll.calculateNearest(false,true); - }, 200); - }, - calculateNearest:function(instant,callbacks) { - top = $window.scrollTop(); - var i =1, - max = heights.length, - closest = 0, - prev = Math.abs(heights[0] - top), - diff; - for(;iindex) || atTop()) { - index = closest; - //index, instant, callbacks, toTop - animateScroll(closest,instant,callbacks,false); - } - }, - wheelHandler:function(e) { - if(disabled===true) { - return true; - } else if(settings.standardScrollElements) { - if($(e.target).is(settings.standardScrollElements) || $(e.target).closest(settings.standardScrollElements).length) { - return true; - } - } - if(!overflow[index]) { - e.preventDefault(); - } - var currentScrollTime = new Date().getTime(); - - - e = e || window.event; - var value; - if (e.originalEvent) { - value = e.originalEvent.wheelDelta || -e.originalEvent.deltaY || -e.originalEvent.detail; - } else { - value = e.wheelDelta || -e.deltaY || -e.detail; - } - var delta = Math.max(-1, Math.min(1, value)); - - //delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120; - - if(scrollSamples.length > 149){ - scrollSamples.shift(); - } - //scrollSamples.push(Math.abs(delta*10)); - scrollSamples.push(Math.abs(value)); - - if((currentScrollTime-scrollTime) > 200){ - scrollSamples = []; - } - scrollTime = currentScrollTime; - - - if(locked) { - return false; - } - if(delta<0) { - if(index0) { - if(index>0) { - if(atTop()) { - if(isAccelerating(scrollSamples)) { - e.preventDefault(); - index--; - locked = true; - //index, instant, callbacks, toTop - animateScroll(index,false,true, false); - } else { - return false - } - } - } - } - - }, - keyHandler:function(e) { - if(disabled===true || document.activeElement.readOnly===false) { - return true; - } else if(settings.standardScrollElements) { - if($(e.target).is(settings.standardScrollElements) || $(e.target).closest(settings.standardScrollElements).length) { - return true; - } - } - if(locked===true) { - return false; - } - if(e.keyCode==38 || e.keyCode==33) { - if(index>0) { - if(atTop()) { - e.preventDefault(); - index--; - //index, instant, callbacks, toTop - animateScroll(index,false,true,false); - } - } - } else if(e.keyCode==40 || e.keyCode==34) { - if(indexMath.abs(swipeScroll.touches.touchstart.x-swipeScroll.touches.touchmove.x))) { - //if(!overflow[index]) { - event.preventDefault(); - //} - swipeScroll.touches.direction = "y"; - if((swipeScroll.options.timeStamp+swipeScroll.options.timeGap)<(new Date().getTime()) && swipeScroll.touches.touchend == false) { - - swipeScroll.touches.touchend = true; - if (swipeScroll.touches.touchstart.y > -1) { - - if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { - if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { - - swipeScroll.up(); - - } else { - swipeScroll.down(); - - } - } - } - } - } - break; - case 'touchend': - if(swipeScroll.touches[event.type]===false) { - swipeScroll.touches[event.type] = true; - if (swipeScroll.touches.touchstart.y > -1 && swipeScroll.touches.touchmove.y > -1 && swipeScroll.touches.direction==="y") { - - if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { - if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { - swipeScroll.up(); - - } else { - swipeScroll.down(); - - } - } - swipeScroll.touches.touchstart.y = -1; - swipeScroll.touches.touchstart.x = -1; - swipeScroll.touches.direction = "undetermined"; - } - } - default: - break; - } - } - } - }, - down: function() { - - if(indexinterstitialIndex) { - - interstitialScroll(parseInt(heights[index])+(portHeight*interstitialIndex)); - interstitialIndex += 1; - - } else { - interstitialScroll(parseInt(heights[index])+(elements[index].outerHeight()-portHeight)); - } - - } - } - }, - up: function() { - if(index>=0) { - if(atTop() && index>0) { - - index--; - //index, instant, callbacks, toTop - animateScroll(index,false,true,false); - } else { - - if(interstitialIndex>2) { - portHeight = getportHeight(); - - interstitialIndex -= 1; - interstitialScroll(parseInt(heights[index])+(portHeight*interstitialIndex)); - - } else { - - interstitialIndex = 1; - interstitialScroll(parseInt(heights[index])); - } - } - - } - }, - init: function() { - if (document.addEventListener && settings.touchScroll) { - var eventListenerOptions = { - passive: false - }; - document.addEventListener('touchstart', swipeScroll.touchHandler, eventListenerOptions); - document.addEventListener('touchmove', swipeScroll.touchHandler, eventListenerOptions); - document.addEventListener('touchend', swipeScroll.touchHandler, eventListenerOptions); - } - } - }; - - - util = { - refresh:function(withCallback,scroll) { - clearTimeout(timeoutId2); - timeoutId2 = setTimeout(function() { - //retain position - sizePanels(true); - //scroll, firstLoad - calculatePositions(scroll,false); - if(withCallback) { - settings.afterResize(); - } - },400); - }, - handleUpdate:function() { - //callbacks, scroll - //changed from false,true to false,false - util.refresh(false,false); - }, - handleResize:function() { - //callbacks, scroll - util.refresh(true,false); - }, - handleOrientation:function() { - //callbacks, scroll - util.refresh(true,true); - } - }; - settings = $.extend(settings, options); - - //retain position - sizePanels(false); - - calculatePositions(false,true); - - if(true===hasLocation) { - //index, instant, callbacks, toTop - animateScroll(index,false,true,true); - } else { - setTimeout(function() { - //instant,callbacks - manualScroll.calculateNearest(true,false); - },200); - } - if(heights.length) { - manualScroll.init(); - swipeScroll.init(); - - $window.on("resize",util.handleResize); - if (document.addEventListener) { - window.addEventListener("orientationchange", util.handleOrientation, false); - } - } - function interstitialScroll(pos) { - if( $().velocity ) { - $(settings.target).stop().velocity('scroll', { - duration: settings.scrollSpeed, - easing: settings.easing, - offset: pos, - mobileHA: false - }); - } else { - $(settings.target).stop().animate({ - scrollTop: pos - }, settings.scrollSpeed,settings.easing); - } - } - - function sizePanels(keepPosition) { - if(keepPosition) { - top = $window.scrollTop(); - } - - var selector = settings.section; - overflow = []; - if(settings.interstitialSection.length) { - selector += "," + settings.interstitialSection; - } - if(settings.scrollbars===false) { - settings.overflowScroll = false; - } - portHeight = getportHeight(); - $(selector).each(function(i) { - var $this = $(this); - - if(settings.setHeights) { - if($this.is(settings.interstitialSection)) { - overflow[i] = false; - } else { - if(($this.css("height","auto").outerHeight()0) { - heights[i] = parseInt($this.offset().top) + settings.offset; - } else { - heights[i] = parseInt($this.offset().top); - } - if(settings.sectionName && $this.data(settings.sectionName)) { - names[i] = "#" + $this.data(settings.sectionName).toString().replace(/ /g,"-"); - } else { - if($this.is(settings.interstitialSection)===false) { - names[i] = "#" + (i + 1); - } else { - names[i] = "#"; - if(i===$(selector).length-1 && i>1) { - heights[i] = heights[i-1] + (parseInt($($(selector)[i-1]).outerHeight()) - parseInt($(window).height())) + parseInt($this.outerHeight()); - } - } - } - elements[i] = $this; - try { - if($(names[i]).length && window.console) { - console.warn("Scrollify warning: Section names can't match IDs - this will cause the browser to anchor."); - } - } catch (e) {} - - if(window.location.hash===names[i]) { - index = i; - hasLocation = true; - } - - }); - - if(true===scroll) { - //index, instant, callbacks, toTop - animateScroll(index,false,false,false); - } - } - - function atTop() { - if(!overflow[index]) { - return true; - } - top = $window.scrollTop(); - if(top>parseInt(heights[index])) { - return false; - } else { - return true; - } - } - function atBottom() { - if(!overflow[index]) { - return true; - } - top = $window.scrollTop(); - portHeight = getportHeight(); - - if(top=0;z--) { - if(typeof panel === 'string') { - if (names[z]===panel) { - index = z; - //index, instant, callbacks, toTop - animateScroll(z,instant,true,true); - } - } else { - if(z===panel) { - index = z; - //index, instant, callbacks, toTop - animateScroll(z,instant,true,true); - } - } - } - } - scrollify.move = function(panel) { - if(panel===undefined) { - return false; - } - if(panel.originalEvent) { - panel = $(this).attr("href"); - } - move(panel,false); - }; - scrollify.instantMove = function(panel) { - if(panel===undefined) { - return false; - } - move(panel,true); - }; - scrollify.next = function() { - if(index0) { - index -= 1; - //index, instant, callbacks, toTop - animateScroll(index,false,true,true); - } - }; - scrollify.instantNext = function() { - if(index0) { - index -= 1; - //index, instant, callbacks, toTop - animateScroll(index,true,true,true); - } - }; - scrollify.destroy = function() { - if(!initialised) { - return false; - } - if(settings.setHeights) { - $(settings.section).each(function() { - $(this).css("height","auto"); - }); - } - $window.off("resize",util.handleResize); - if(settings.scrollbars) { - $window.off('mousedown', manualScroll.handleMousedown); - $window.off('mouseup', manualScroll.handleMouseup); - $window.off('scroll', manualScroll.handleScroll); - } - // $window.off(wheelEvent,manualScroll.wheelHandler); - window.removeEventListener(wheelEvent,manualScroll.wheelHandler); - $window.off('keydown', manualScroll.keyHandler); - - if (document.addEventListener && settings.touchScroll) { - document.removeEventListener('touchstart', swipeScroll.touchHandler, false); - document.removeEventListener('touchmove', swipeScroll.touchHandler, false); - document.removeEventListener('touchend', swipeScroll.touchHandler, false); - } - heights = []; - names = []; - elements = []; - overflow = []; - }; - scrollify.update = function() { - if(!initialised) { - return false; - } - util.handleUpdate(); - }; - scrollify.current = function() { - return elements[index]; - }; - scrollify.currentIndex = function() { - return index; - }; - scrollify.disable = function() { - disabled = true; - }; - scrollify.enable = function() { - disabled = false; - if (initialised) { - //instant,callbacks - manualScroll.calculateNearest(false,false); - } - }; - scrollify.isDisabled = function() { - return disabled; - }; - scrollify.setOptions = function(updatedOptions) { - if(!initialised) { - return false; - } - if(typeof updatedOptions === "object") { - settings = $.extend(settings, updatedOptions); - util.handleUpdate(); - } else if(window.console) { - console.warn("Scrollify warning: setOptions expects an object."); - } - }; - $.scrollify = scrollify; - return scrollify; -})); diff --git a/scrollify.js b/scrollify.js new file mode 100644 index 0000000..3dc07a5 --- /dev/null +++ b/scrollify.js @@ -0,0 +1,851 @@ +/*! + * jQuery Scrollify + * Version 1.0.20 + * + * Requires: + * - jQuery 1.7 or higher + * + * https://github.com/lukehaas/Scrollify + * + * Copyright 2016, Luke Haas + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + + + +if touchScroll is false - update index + + */ +(function (global,factory) { + "use strict"; + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + return factory(document.querySelector, global, global.document); + } else if (typeof module === 'object' && module.exports) { + // Node/CommonJS + module.exports = factory(document.querySelector, global, global.document); + } else { + // Browser globals + factory(document.querySelector, global, global.document); + } + }(typeof window !== 'undefined' ? window : this, function ($, window, document, undefined) { + "use strict"; + var heights = [], + names = [], + elements = [], + overflow = [], + index = 0, + currentIndex = 0, + interstitialIndex = 1, + hasLocation = false, + timeoutId, + timeoutId2, + $window = window, + portHeight, + top = window.scrollY, + scrollable = false, + locked = false, + scrolled = false, + manualScroll, + swipeScroll, + util, + disabled = false, + scrollSamples = [], + scrollTime = new Date().getTime(), + firstLoad = true, + initialised = false, + destination = 0, + wheelEvent = 'onwheel' in document ? 'wheel' : document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll', + settings = { + //section should be an identifier that is the same for each section + section: ".section", + sectionName: "section-name", + interstitialSection: "", + easing: "easeOutExpo", + scrollSpeed: 1100, + offset: 0, + scrollbars: true, + target:"html,body", + standardScrollElements: false, + setHeights: true, + overflowScroll:true, + updateHash: true, + touchScroll:true, + before:function() {}, + after:function() {}, + afterResize:function() {}, + afterRender:function() {} + }; + function getportHeight() { + return ($window.height() + settings.offset); + } + function animateScroll(index,instant,callbacks,toTop) { + if(currentIndex===index) { + callbacks = false; + } + if(disabled===true) { + return true; + } + if(names[index]) { + scrollable = false; + if(firstLoad===true) { + firstLoad = false; + settings.afterRender(); + } + if(callbacks) { + if( typeof settings.before == 'function' && settings.before(index,elements) === false ){ + return true; + } + } + interstitialIndex = 1; + destination = (!index) ? 0 : heights[index]; + if(firstLoad===false && currentIndex>index && toTop===false) { + //We're going backwards + if(overflow[index]) { + portHeight = getportHeight(); + + interstitialIndex = parseInt(elements[index].outerHeight()/portHeight); + + destination = parseInt(heights[index])+(elements[index].outerHeight()-portHeight); + } + } + + + if(settings.updateHash && settings.sectionName && !(firstLoad===true && index===0)) { + if(history.pushState) { + try { + history.replaceState(null, null, names[index]); + } catch (e) { + if(window.console) { + console.warn("Scrollify warning: Page must be hosted to manipulate the hash value."); + } + } + + } else { + window.location.hash = names[index]; + } + } + + currentIndex = index; + if(instant) { + $(settings.target).stop().scrollTop(destination); + if(callbacks) { + settings.after(index,elements); + } + } else { + locked = true; + if( $().velocity ) { + $(settings.target).stop().velocity('scroll', { + duration: settings.scrollSpeed, + easing: settings.easing, + offset: destination, + mobileHA: false + }); + } else { + $(settings.target).stop().animate({ + scrollTop: destination + }, settings.scrollSpeed,settings.easing); + } + + if(window.location.hash.length && settings.sectionName && window.console) { + try { + if($(window.location.hash).length) { + console.warn("Scrollify warning: ID matches hash value - this will cause the page to anchor."); + } + } catch (e) {} + } + $(settings.target).promise().done(function(){ + locked = false; + firstLoad = false; + if(callbacks) { + settings.after(index,elements); + } + }); + } + + } + } + + function isAccelerating(samples) { + function average(num) { + var sum = 0; + + var lastElements = samples.slice(Math.max(samples.length - num, 1)); + + for(var i = 0; i < lastElements.length; i++){ + sum += lastElements[i]; + } + + return Math.ceil(sum/num); + } + + var avEnd = average(10); + var avMiddle = average(70); + + if(avEnd >= avMiddle) { + return true; + } else { + return false; + } + } + var scrollify = function(options) { + initialised = true; + $.easing['easeOutExpo'] = function(x, t, b, c, d) { + return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; + }; + + manualScroll = { + handleMousedown:function() { + if(disabled===true) { + return true; + } + scrollable = false; + scrolled = false; + }, + handleMouseup:function() { + if(disabled===true) { + return true; + } + scrollable = true; + if(scrolled) { + //instant,callbacks + manualScroll.calculateNearest(false,true); + } + }, + handleScroll:function() { + if(disabled===true) { + return true; + } + if(timeoutId){ + clearTimeout(timeoutId); + } + + timeoutId = setTimeout(function(){ + scrolled = true; + if(scrollable===false) { + return false; + } + scrollable = false; + //instant,callbacks + manualScroll.calculateNearest(false,true); + }, 200); + }, + calculateNearest:function(instant,callbacks) { + top = $window.scrollTop(); + var i =1, + max = heights.length, + closest = 0, + prev = Math.abs(heights[0] - top), + diff; + for(;iindex) || atTop()) { + index = closest; + //index, instant, callbacks, toTop + animateScroll(closest,instant,callbacks,false); + } + }, + wheelHandler:function(e) { + if(disabled===true) { + return true; + } else if(settings.standardScrollElements) { + if($(e.target).is(settings.standardScrollElements) || $(e.target).closest(settings.standardScrollElements).length) { + return true; + } + } + if(!overflow[index]) { + e.preventDefault(); + } + var currentScrollTime = new Date().getTime(); + + + e = e || window.event; + var value; + if (e.originalEvent) { + value = e.originalEvent.wheelDelta || -e.originalEvent.deltaY || -e.originalEvent.detail; + } else { + value = e.wheelDelta || -e.deltaY || -e.detail; + } + var delta = Math.max(-1, Math.min(1, value)); + + //delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120; + + if(scrollSamples.length > 149){ + scrollSamples.shift(); + } + //scrollSamples.push(Math.abs(delta*10)); + scrollSamples.push(Math.abs(value)); + + if((currentScrollTime-scrollTime) > 200){ + scrollSamples = []; + } + scrollTime = currentScrollTime; + + + if(locked) { + return false; + } + if(delta<0) { + if(index0) { + if(index>0) { + if(atTop()) { + if(isAccelerating(scrollSamples)) { + e.preventDefault(); + index--; + locked = true; + //index, instant, callbacks, toTop + animateScroll(index,false,true, false); + } else { + return false + } + } + } + } + + }, + keyHandler:function(e) { + if(disabled===true || document.activeElement.readOnly===false) { + return true; + } else if(settings.standardScrollElements) { + if($(e.target).is(settings.standardScrollElements) || $(e.target).closest(settings.standardScrollElements).length) { + return true; + } + } + if(locked===true) { + return false; + } + if(e.keyCode==38 || e.keyCode==33) { + if(index>0) { + if(atTop()) { + e.preventDefault(); + index--; + //index, instant, callbacks, toTop + animateScroll(index,false,true,false); + } + } + } else if(e.keyCode==40 || e.keyCode==34) { + if(indexMath.abs(swipeScroll.touches.touchstart.x-swipeScroll.touches.touchmove.x))) { + //if(!overflow[index]) { + event.preventDefault(); + //} + swipeScroll.touches.direction = "y"; + if((swipeScroll.options.timeStamp+swipeScroll.options.timeGap)<(new Date().getTime()) && swipeScroll.touches.touchend == false) { + + swipeScroll.touches.touchend = true; + if (swipeScroll.touches.touchstart.y > -1) { + + if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { + if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { + + swipeScroll.up(); + + } else { + swipeScroll.down(); + + } + } + } + } + } + break; + case 'touchend': + if(swipeScroll.touches[event.type]===false) { + swipeScroll.touches[event.type] = true; + if (swipeScroll.touches.touchstart.y > -1 && swipeScroll.touches.touchmove.y > -1 && swipeScroll.touches.direction==="y") { + + if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { + if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { + swipeScroll.up(); + + } else { + swipeScroll.down(); + + } + } + swipeScroll.touches.touchstart.y = -1; + swipeScroll.touches.touchstart.x = -1; + swipeScroll.touches.direction = "undetermined"; + } + } + default: + break; + } + } + } + }, + down: function() { + + if(indexinterstitialIndex) { + + interstitialScroll(parseInt(heights[index])+(portHeight*interstitialIndex)); + interstitialIndex += 1; + + } else { + interstitialScroll(parseInt(heights[index])+(elements[index].outerHeight()-portHeight)); + } + + } + } + }, + up: function() { + if(index>=0) { + if(atTop() && index>0) { + + index--; + //index, instant, callbacks, toTop + animateScroll(index,false,true,false); + } else { + + if(interstitialIndex>2) { + portHeight = getportHeight(); + + interstitialIndex -= 1; + interstitialScroll(parseInt(heights[index])+(portHeight*interstitialIndex)); + + } else { + + interstitialIndex = 1; + interstitialScroll(parseInt(heights[index])); + } + } + + } + }, + init: function() { + if (document.addEventListener && settings.touchScroll) { + var eventListenerOptions = { + passive: false + }; + document.addEventListener('touchstart', swipeScroll.touchHandler, eventListenerOptions); + document.addEventListener('touchmove', swipeScroll.touchHandler, eventListenerOptions); + document.addEventListener('touchend', swipeScroll.touchHandler, eventListenerOptions); + } + } + }; + + + util = { + refresh:function(withCallback,scroll) { + clearTimeout(timeoutId2); + timeoutId2 = setTimeout(function() { + //retain position + sizePanels(true); + //scroll, firstLoad + calculatePositions(scroll,false); + if(withCallback) { + settings.afterResize(); + } + },400); + }, + handleUpdate:function() { + //callbacks, scroll + //changed from false,true to false,false + util.refresh(false,false); + }, + handleResize:function() { + //callbacks, scroll + util.refresh(true,false); + }, + handleOrientation:function() { + //callbacks, scroll + util.refresh(true,true); + } + }; + settings = $.extend(settings, options); + + //retain position + sizePanels(false); + + calculatePositions(false,true); + + if(true===hasLocation) { + //index, instant, callbacks, toTop + animateScroll(index,false,true,true); + } else { + setTimeout(function() { + //instant,callbacks + manualScroll.calculateNearest(true,false); + },200); + } + if(heights.length) { + manualScroll.init(); + swipeScroll.init(); + + $window.on("resize",util.handleResize); + if (document.addEventListener) { + window.addEventListener("orientationchange", util.handleOrientation, false); + } + } + function interstitialScroll(pos) { + if( $().velocity ) { + $(settings.target).stop().velocity('scroll', { + duration: settings.scrollSpeed, + easing: settings.easing, + offset: pos, + mobileHA: false + }); + } else { + $(settings.target).stop().animate({ + scrollTop: pos + }, settings.scrollSpeed,settings.easing); + } + } + + function sizePanels(keepPosition) { + if(keepPosition) { + top = $window.scrollTop(); + } + + var selector = settings.section; + overflow = []; + if(settings.interstitialSection.length) { + selector += "," + settings.interstitialSection; + } + if(settings.scrollbars===false) { + settings.overflowScroll = false; + } + portHeight = getportHeight(); + $(selector).each(function(i) { + var $this = $(this); + + if(settings.setHeights) { + if($this.is(settings.interstitialSection)) { + overflow[i] = false; + } else { + if(($this.css("height","auto").outerHeight()0) { + heights[i] = parseInt($this.offset().top) + settings.offset; + } else { + heights[i] = parseInt($this.offset().top); + } + if(settings.sectionName && $this.data(settings.sectionName)) { + names[i] = "#" + $this.data(settings.sectionName).toString().replace(/ /g,"-"); + } else { + if($this.is(settings.interstitialSection)===false) { + names[i] = "#" + (i + 1); + } else { + names[i] = "#"; + if(i===$(selector).length-1 && i>1) { + heights[i] = heights[i-1] + (parseInt($($(selector)[i-1]).outerHeight()) - parseInt($(window).height())) + parseInt($this.outerHeight()); + } + } + } + elements[i] = $this; + try { + if($(names[i]).length && window.console) { + console.warn("Scrollify warning: Section names can't match IDs - this will cause the browser to anchor."); + } + } catch (e) {} + + if(window.location.hash===names[i]) { + index = i; + hasLocation = true; + } + + }); + + if(true===scroll) { + //index, instant, callbacks, toTop + animateScroll(index,false,false,false); + } + } + + function atTop() { + if(!overflow[index]) { + return true; + } + top = $window.scrollTop(); + if(top>parseInt(heights[index])) { + return false; + } else { + return true; + } + } + function atBottom() { + if(!overflow[index]) { + return true; + } + top = $window.scrollTop(); + portHeight = getportHeight(); + + if(top=0;z--) { + if(typeof panel === 'string') { + if (names[z]===panel) { + index = z; + //index, instant, callbacks, toTop + animateScroll(z,instant,true,true); + } + } else { + if(z===panel) { + index = z; + //index, instant, callbacks, toTop + animateScroll(z,instant,true,true); + } + } + } + } + scrollify.move = function(panel) { + if(panel===undefined) { + return false; + } + if(panel.originalEvent) { + panel = $(this).attr("href"); + } + move(panel,false); + }; + scrollify.instantMove = function(panel) { + if(panel===undefined) { + return false; + } + move(panel,true); + }; + scrollify.next = function() { + if(index0) { + index -= 1; + //index, instant, callbacks, toTop + animateScroll(index,false,true,true); + } + }; + scrollify.instantNext = function() { + if(index0) { + index -= 1; + //index, instant, callbacks, toTop + animateScroll(index,true,true,true); + } + }; + scrollify.destroy = function() { + if(!initialised) { + return false; + } + if(settings.setHeights) { + $(settings.section).each(function() { + $(this).css("height","auto"); + }); + } + $window.off("resize",util.handleResize); + if(settings.scrollbars) { + $window.off('mousedown', manualScroll.handleMousedown); + $window.off('mouseup', manualScroll.handleMouseup); + $window.off('scroll', manualScroll.handleScroll); + } + // $window.off(wheelEvent,manualScroll.wheelHandler); + window.removeEventListener(wheelEvent,manualScroll.wheelHandler); + $window.off('keydown', manualScroll.keyHandler); + + if (document.addEventListener && settings.touchScroll) { + document.removeEventListener('touchstart', swipeScroll.touchHandler, false); + document.removeEventListener('touchmove', swipeScroll.touchHandler, false); + document.removeEventListener('touchend', swipeScroll.touchHandler, false); + } + heights = []; + names = []; + elements = []; + overflow = []; + }; + scrollify.update = function() { + if(!initialised) { + return false; + } + util.handleUpdate(); + }; + scrollify.current = function() { + return elements[index]; + }; + scrollify.currentIndex = function() { + return index; + }; + scrollify.disable = function() { + disabled = true; + }; + scrollify.enable = function() { + disabled = false; + if (initialised) { + //instant,callbacks + manualScroll.calculateNearest(false,false); + } + }; + scrollify.isDisabled = function() { + return disabled; + }; + scrollify.setOptions = function(updatedOptions) { + if(!initialised) { + return false; + } + if(typeof updatedOptions === "object") { + settings = $.extend(settings, updatedOptions); + util.handleUpdate(); + } else if(window.console) { + console.warn("Scrollify warning: setOptions expects an object."); + } + }; + window.scrollify = scrollify; + return scrollify; + })); \ No newline at end of file diff --git a/scrollify.jquery.json b/scrollify.json similarity index 87% rename from scrollify.jquery.json rename to scrollify.json index e64cee3..3a90a72 100644 --- a/scrollify.jquery.json +++ b/scrollify.json @@ -27,8 +27,5 @@ "bugs": "https://github.com/lukehaas/Scrollify/issues", "homepage": "http://projects.lukehaas.me/scrollify", "docs": "https://github.com/lukehaas/Scrollify", - "download": "https://github.com/lukehaas/Scrollify", - "dependencies": { - "jquery": ">=1.7" - } + "download": "https://github.com/lukehaas/Scrollify" } diff --git a/test.html b/test.html index 45f3b58..d6d2e3e 100644 --- a/test.html +++ b/test.html @@ -28,7 +28,16 @@

Wow this is scrollify

+ + \ No newline at end of file From f8441354de60284fde62860237499be17d61da13 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Thu, 2 May 2019 17:27:57 +0100 Subject: [PATCH 04/43] Removed some JQuery dependencies such as extend --- scrollify.js | 71 +++++++++++++++++++++++++++++++++++++++++----------- test.html | 2 +- 2 files changed, 58 insertions(+), 15 deletions(-) diff --git a/scrollify.js b/scrollify.js index 3dc07a5..d96e2aa 100644 --- a/scrollify.js +++ b/scrollify.js @@ -182,30 +182,31 @@ if touchScroll is false - update index function isAccelerating(samples) { function average(num) { - var sum = 0; - - var lastElements = samples.slice(Math.max(samples.length - num, 1)); - - for(var i = 0; i < lastElements.length; i++){ - sum += lastElements[i]; - } - - return Math.ceil(sum/num); + var sum = 0; + + var lastElements = samples.slice(Math.max(samples.length - num, 1)); + + for(var i = 0; i < lastElements.length; i++){ + sum += lastElements[i]; + } + + return Math.ceil(sum/num); } var avEnd = average(10); var avMiddle = average(70); if(avEnd >= avMiddle) { - return true; + return true; } else { - return false; + return false; } } var scrollify = function(options) { initialised = true; - $.easing['easeOutExpo'] = function(x, t, b, c, d) { - return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; + scrollify.easing = []; + scrollify.easing['easeOutExpo'] = function(x, t, b, c, d) { + return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }; manualScroll = { @@ -554,7 +555,49 @@ if touchScroll is false - update index util.refresh(true,true); } }; - settings = $.extend(settings, options); + + { + // Thanks https://gomakethings.com/vanilla-javascript-version-of-jquery-extend/! (Vanilla JS version of $.extend) + let extend = () => + { + // Variables + var extended = {}; + var deep = false; + var i = 0; + var length = arguments.length; + + // Check if a deep merge + if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) { + deep = arguments[0]; + i++; + } + + // Merge the object into the extended object + var merge = function (obj) { + for ( var prop in obj ) { + if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) { + // If deep merge and property is an object, merge properties + if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) { + extended[prop] = extend( true, extended[prop], obj[prop] ); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + + // Loop through each object and conduct a merge + for ( ; i < length; i++ ) { + var obj = arguments[i]; + merge(obj); + } + + return extended; + }; + + + settings = extend(settings, options); + } //retain position sizePanels(false); diff --git a/test.html b/test.html index d6d2e3e..cf35658 100644 --- a/test.html +++ b/test.html @@ -33,7 +33,7 @@

Wow this is scrollify

\ No newline at end of file From bf2ef10c855801fdd1a053246cc3a7ac469f43ef Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 11:04:13 +0100 Subject: [PATCH 17/43] Replaced $(elem).attr with elem.getAttribute --- scrollify.js | 45 ++++++++++++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/scrollify.js b/scrollify.js index eeb7c3d..917a448 100644 --- a/scrollify.js +++ b/scrollify.js @@ -274,6 +274,8 @@ if touchScroll is false - update index } } + + console.dir(animateScroll); function isAccelerating(samples) { function average(num) { @@ -875,30 +877,39 @@ if touchScroll is false - update index } }; - function move(panel,instant) { + function move(panel,instant) + { var z = names.length; - for(;z>=0;z--) { - if(typeof panel === 'string') { - if (names[z]===panel) { - index = z; - //index, instant, callbacks, toTop - animateScroll(z,instant,true,true); + for(;z>=0;z--) + { + if(typeof panel === 'string') + { + if (names[z]===panel) + { + index = z; + //index, instant, callbacks, toTop + animateScroll(z,instant,true,true); + } } - } else { - if(z===panel) { - index = z; - //index, instant, callbacks, toTop - animateScroll(z,instant,true,true); + else + { + if(z===panel) + { + index = z; + //index, instant, callbacks, toTop + animateScroll(z,instant,true,true); + } } } - } } scrollify.move = function(panel) { - if(panel===undefined) { - return false; + if(panel===undefined) + { + return false; } - if(panel.originalEvent) { - panel = $(this).attr("href"); + if(panel.originalEvent) + { + panel = panel.getAttribute("href"); } move(panel,false); }; From 2a9b7498fd95052666fbc1ff43e0cfed1dfa33af Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 11:05:30 +0100 Subject: [PATCH 18/43] Next & Previous verified working --- scrollify.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/scrollify.js b/scrollify.js index 917a448..35d58c8 100644 --- a/scrollify.js +++ b/scrollify.js @@ -914,16 +914,19 @@ if touchScroll is false - update index move(panel,false); }; scrollify.instantMove = function(panel) { - if(panel===undefined) { - return false; + if(panel===undefined) + { + return false; } move(panel,true); }; - scrollify.next = function() { - if(index Date: Fri, 3 May 2019 11:06:28 +0100 Subject: [PATCH 19/43] Replaced many functions with arrow syntax --- scrollify.js | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/scrollify.js b/scrollify.js index 35d58c8..cec8efd 100644 --- a/scrollify.js +++ b/scrollify.js @@ -920,7 +920,7 @@ if touchScroll is false - update index } move(panel,true); }; - scrollify.next = function() + scrollify.next = () => { if(index < names.length) { @@ -929,28 +929,31 @@ if touchScroll is false - update index animateScroll(index,false,true,true); } }; - scrollify.previous = function() { + scrollify.previous = () => + { if(index>0) { index -= 1; //index, instant, callbacks, toTop animateScroll(index,false,true,true); } }; - scrollify.instantNext = function() { - if(index + { + if(index { if(index>0) { index -= 1; //index, instant, callbacks, toTop animateScroll(index,true,true,true); } }; - scrollify.destroy = function() { + scrollify.destroy = () => { if(!initialised) { return false; } @@ -979,29 +982,29 @@ if touchScroll is false - update index elements = []; overflow = []; }; - scrollify.update = function() { + scrollify.update = () => { if(!initialised) { return false; } util.handleUpdate(); }; - scrollify.current = function() { + scrollify.current = () => { return elements[index]; }; - scrollify.currentIndex = function() { + scrollify.currentIndex = () => { return index; }; - scrollify.disable = function() { + scrollify.disable = () => { disabled = true; }; - scrollify.enable = function() { + scrollify.enable = () => { disabled = false; if (initialised) { //instant,callbacks manualScroll.calculateNearest(false,false); } }; - scrollify.isDisabled = function() { + scrollify.isDisabled = () => { return disabled; }; scrollify.setOptions = function(updatedOptions) From 6274588f5f12b538e51b424bf9b21340720865d6 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 13:58:22 +0100 Subject: [PATCH 20/43] Fixed issue with instant scrolling --- scrollify.js | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/scrollify.js b/scrollify.js index cec8efd..0052ed3 100644 --- a/scrollify.js +++ b/scrollify.js @@ -187,11 +187,13 @@ if touchScroll is false - update index } function animateScroll(index,instant,callbacks,toTop) { - if(currentIndex===index) { - callbacks = false; + if(currentIndex === index) + { + callbacks = false; } - if(disabled===true) { - return true; + if(disabled===true) + { + return true; } if(names[index]) { scrollable = false; @@ -236,8 +238,8 @@ if touchScroll is false - update index currentIndex = index; if(instant) { - document.body.scrollTop = destination; - + window.scrollTo(destination); + if(callbacks) { settings.after(index,elements); @@ -931,19 +933,20 @@ if touchScroll is false - update index }; scrollify.previous = () => { - if(index>0) { - index -= 1; - //index, instant, callbacks, toTop - animateScroll(index,false,true,true); + if(index > 0) + { + index -= 1; + //index, instant, callbacks, toTop + animateScroll(index,false,true,true); } }; scrollify.instantNext = () => { - if(index { From 99210ecb0df9dae10d116f51fca5013e6ae5dff1 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 14:00:29 +0100 Subject: [PATCH 21/43] Oops, fixed incorrect paramers in window.scrollTo --- scrollify.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/scrollify.js b/scrollify.js index 0052ed3..e36b2c5 100644 --- a/scrollify.js +++ b/scrollify.js @@ -238,7 +238,12 @@ if touchScroll is false - update index currentIndex = index; if(instant) { - window.scrollTo(destination); + window.scrollTo( + /* x */ + 0, + /* y */ + destination + ); if(callbacks) { From 87b2ec8c76891f2b849e2d6b6379f37dac50ecfe Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 14:19:42 +0100 Subject: [PATCH 22/43] Added some comment and formatting to animateScroll() --- scrollify.js | 170 ++++++++++++++++++++++++++++----------------------- 1 file changed, 93 insertions(+), 77 deletions(-) diff --git a/scrollify.js b/scrollify.js index e36b2c5..dca7338 100644 --- a/scrollify.js +++ b/scrollify.js @@ -186,98 +186,114 @@ if touchScroll is false - update index return ($window.innerHeight + settings.offset); } - function animateScroll(index,instant,callbacks,toTop) { + function animateScroll(index,instant,callbacks,toTop) + { + // If we're already there at that index if(currentIndex === index) { callbacks = false; } + + // If scrollify is disabled if(disabled===true) { return true; } - if(names[index]) { - scrollable = false; - if(firstLoad===true) { - firstLoad = false; - settings.afterRender(); - } - if(callbacks) { - if( typeof settings.before == 'function' && settings.before(index,elements) === false ){ - return true; + + // If this index actually exists + if(names[index]) + { + // Don't allow scrolling while we're animating + scrollable = false; + + // If this is being triggered by the page load run the afterRender callback + if(firstLoad === true) + { + firstLoad = false; + settings.afterRender(); } - } - interstitialIndex = 1; - destination = (!index) ? 0 : heights[index]; - if(firstLoad===false && currentIndex>index && toTop===false) { - //We're going backwards - if(overflow[index]) { - portHeight = getportHeight(); - - interstitialIndex = parseInt(elements[index].outerHeight()/portHeight); - - destination = parseInt(heights[index])+(elements[index].outerHeight()-portHeight); + + // If the user's before callback tells us not to proceed, then we won't + if(callbacks) { + if( typeof settings.before == 'function' && settings.before(index,elements) === false ){ + return true; + } } - } - - - if(settings.updateHash && settings.sectionName && !(firstLoad===true && index===0)) { - if(history.pushState) { - try { - history.replaceState(null, null, names[index]); - } catch (e) { - if(window.console) { - console.warn("Scrollify warning: Page must be hosted to manipulate the hash value."); + + interstitialIndex = 1; + destination = (!index) ? 0 : heights[index]; + if(firstLoad===false && currentIndex>index && toTop===false) + { + //We're going backwards + if(overflow[index]) + { + portHeight = getportHeight(); + + interstitialIndex = parseInt(elements[index].outerHeight()/portHeight); + + destination = parseInt(heights[index])+(elements[index].outerHeight()-portHeight); } + } + + + if(settings.updateHash && settings.sectionName && !(firstLoad===true && index===0)) { + if(history.pushState) { + try { + history.replaceState(null, null, names[index]); + } catch (e) { + if(window.console) { + console.warn("Scrollify warning: Page must be hosted to manipulate the hash value."); + } + } + + } else { + window.location.hash = names[index]; } - - } else { - window.location.hash = names[index]; } - } - - currentIndex = index; - if(instant) - { - window.scrollTo( - /* x */ - 0, - /* y */ - destination - ); - - if(callbacks) + + currentIndex = index; + if(instant) { - settings.after(index,elements); - } - } - else - { - locked = true; - - // Scroll to section - scrollIt( - destination, - settings.scrollSpeed, - settings.easing, - () => + window.scrollTo( + /* x */ + 0, + /* y */ + destination + ); + + if(callbacks) { - locked = false; - firstLoad = false; - if(callbacks) { - settings.after(index,elements); - } + settings.after(index,elements); } - ); - - if(window.location.hash.length && settings.sectionName && window.console) + } + else { - try { - if(window.location.hash.length) { - console.warn("Scrollify warning: ID matches hash value - this will cause the page to anchor."); + locked = true; + + // Scroll to section + scrollIt( + destination, + settings.scrollSpeed, + settings.easing, + () => + { + locked = false; + firstLoad = false; + if(callbacks) { + settings.after(index,elements); + } } - } catch (e) {} + ); + + if(window.location.hash.length && settings.sectionName && window.console) + { + try { + if(window.location.hash.length) { + console.warn("Scrollify warning: ID matches hash value - this will cause the page to anchor."); + } + } catch (e) {} + } } - } } } @@ -891,7 +907,7 @@ if touchScroll is false - update index { if(typeof panel === 'string') { - if (names[z]===panel) + if (names[z] === panel) { index = z; //index, instant, callbacks, toTop @@ -900,7 +916,7 @@ if touchScroll is false - update index } else { - if(z===panel) + if(z === panel) { index = z; //index, instant, callbacks, toTop @@ -909,7 +925,7 @@ if touchScroll is false - update index } } } - scrollify.move = function(panel) { + scrollify.move = (panel) => { if(panel===undefined) { return false; @@ -920,7 +936,7 @@ if touchScroll is false - update index } move(panel,false); }; - scrollify.instantMove = function(panel) { + scrollify.instantMove = (panel) => { if(panel===undefined) { return false; From 8c7a6a74c541e623d7e4158e88a6db01de0071b2 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 14:23:29 +0100 Subject: [PATCH 23/43] AnimateScroll still not working properly --- scrollify.js | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/scrollify.js b/scrollify.js index dca7338..1ac57af 100644 --- a/scrollify.js +++ b/scrollify.js @@ -235,23 +235,28 @@ if touchScroll is false - update index } } - + // If we've been told to update page hash on section changed then we'll do that if(settings.updateHash && settings.sectionName && !(firstLoad===true && index===0)) { if(history.pushState) { - try { - history.replaceState(null, null, names[index]); - } catch (e) { - if(window.console) { - console.warn("Scrollify warning: Page must be hosted to manipulate the hash value."); + try + { + history.replaceState(null, null, names[index]); } + catch (e) + { + if(window.console) + { + console.warn("Scrollify warning: Page must be hosted to manipulate the hash value."); + } } - } else { - window.location.hash = names[index]; + window.location.hash = names[index]; } } currentIndex = index; + + // If we should be scrolling instantly, we'll just scroll there if(instant) { window.scrollTo( @@ -263,11 +268,13 @@ if touchScroll is false - update index if(callbacks) { + // We've finished scrolling, call the after callback settings.after(index,elements); } } else { + // Otherwise lock the page scrolling and start scrolling with an animation locked = true; // Scroll to section @@ -287,11 +294,14 @@ if touchScroll is false - update index if(window.location.hash.length && settings.sectionName && window.console) { - try { - if(window.location.hash.length) { + try + { + if(window.location.hash.length) + { console.warn("Scrollify warning: ID matches hash value - this will cause the page to anchor."); } - } catch (e) {} + } + catch (e) {} } } From 871efcd763d9eeb47daf79549cc093bf36e839fe Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 14:41:01 +0100 Subject: [PATCH 24/43] Fixed incorrectly retrieving and setting scroll distance in SizePanels --- scrollify.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scrollify.js b/scrollify.js index 1ac57af..6c5ff34 100644 --- a/scrollify.js +++ b/scrollify.js @@ -742,7 +742,7 @@ if touchScroll is false - update index function sizePanels(keepPosition) { if(keepPosition) { - top = $window.scrollTop(); + top = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop; } var selector = settings.section; @@ -802,7 +802,7 @@ if touchScroll is false - update index } }); if(keepPosition) { - $window.scrollTop(top); + window.scrollTo(top,0); } } function calculatePositions (scroll,firstLoad) From 60391fe1a4dd8501c3b10f83738f33bbcfae09d1 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 14:46:14 +0100 Subject: [PATCH 25/43] Removed no favicon console error --- scrollify.js | 21 ++++++++++++--------- test.html | 1 + 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/scrollify.js b/scrollify.js index 6c5ff34..0f3e1d9 100644 --- a/scrollify.js +++ b/scrollify.js @@ -740,18 +740,22 @@ if touchScroll is false - update index ); } - function sizePanels(keepPosition) { - if(keepPosition) { + function sizePanels(keepPosition) + { + if(keepPosition) + { top = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop; } var selector = settings.section; overflow = []; - if(settings.interstitialSection.length) { + if(settings.interstitialSection.length) + { selector += "," + settings.interstitialSection; } - if(settings.scrollbars===false) { + if(settings.scrollbars===false) + { settings.overflowScroll = false; } portHeight = getportHeight(); @@ -768,15 +772,13 @@ if touchScroll is false - update index val.style.height = "auto"; if(val.offsetHeight < portHeight || val.style.overflow === "hidden") { - console.log(portHeight); - val.style.height = portHeight.toString() + "px"; - console.dir(val); + val.style.height = `${portHeight.toString()}px`; overflow[i] = false; } else { - val.style.height = val.offsetHeight.toString() + "px"; + val.style.height = `${val.offsetHeight.toString()}px`; if(settings.overflowScroll) { overflow[i] = true; @@ -801,7 +803,8 @@ if touchScroll is false - update index } } }); - if(keepPosition) { + if(keepPosition) + { window.scrollTo(top,0); } } diff --git a/test.html b/test.html index 5f9a0e4..44e583b 100644 --- a/test.html +++ b/test.html @@ -2,6 +2,7 @@ Scrollify test +
From ab6718358c614760628204d3cd86ce55df692184 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 15:05:16 +0100 Subject: [PATCH 26/43] Added settings.logging --- scrollify.js | 12 ++++++++++++ test.html | 1 + 2 files changed, 13 insertions(+) diff --git a/scrollify.js b/scrollify.js index 0f3e1d9..76ae351 100644 --- a/scrollify.js +++ b/scrollify.js @@ -89,6 +89,7 @@ if touchScroll is false - update index overflowScroll:true, updateHash: true, touchScroll:true, + logging:false, before:function() {}, after:function() {}, afterResize:function() {}, @@ -309,6 +310,14 @@ if touchScroll is false - update index } console.dir(animateScroll); + + function log(msg, warn = false) + { + if(!settings.logging) + return; + + (warn ? console.warn : console.log)(msg); + } function isAccelerating(samples) { function average(num) { @@ -754,11 +763,14 @@ if touchScroll is false - update index { selector += "," + settings.interstitialSection; } + if(settings.scrollbars===false) { settings.overflowScroll = false; } + portHeight = getportHeight(); + document.querySelectorAll(selector).forEach((val, i) => { if(settings.setHeights) diff --git a/test.html b/test.html index 44e583b..2fc4ee4 100644 --- a/test.html +++ b/test.html @@ -53,6 +53,7 @@

Wow this is scrollify

scrollify( { section : "section", + logging: true } ); }); From 9c02364245ddf88e11771fee23ac777276349ad7 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 15:10:42 +0100 Subject: [PATCH 27/43] Maybe allowed indexes in move()? --- scrollify.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/scrollify.js b/scrollify.js index 76ae351..f119f29 100644 --- a/scrollify.js +++ b/scrollify.js @@ -955,18 +955,32 @@ if touchScroll is false - update index { return false; } - if(panel.originalEvent) + + if(typeof panel === "number") { - panel = panel.getAttribute("href"); + //index, instant, callbacks, toTop + animateScroll(panel,false,true,true); + } + else if(typeof panel === "string" && panel.substr(0,1) === "#") + { + move(panel,false); } - move(panel,false); }; scrollify.instantMove = (panel) => { if(panel===undefined) { return false; } - move(panel,true); + + if(typeof panel === "number") + { + //index, instant, callbacks, toTop + animateScroll(panel,true,true,true); + } + else if(typeof panel === "string" && panel.substr(0,1) === "#") + { + move(panel,true); + } }; scrollify.next = () => { From 764314799a008b9aa67e42d9482d1e17f93e0358 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 16:56:43 +0100 Subject: [PATCH 28/43] Added protection against out of range panels in move() --- scrollify.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/scrollify.js b/scrollify.js index 1ac57af..6a9c699 100644 --- a/scrollify.js +++ b/scrollify.js @@ -326,12 +326,16 @@ if touchScroll is false - update index var avEnd = average(10); var avMiddle = average(70); - if(avEnd >= avMiddle) { + if(avEnd >= avMiddle) + { return true; - } else { + } + else + { return false; } } + var scrollify = function(options) { initialised = true; scrollify.easing = []; @@ -913,6 +917,11 @@ if touchScroll is false - update index function move(panel,instant) { var z = names.length; + + // Don't both with out of range panels + if(typeof panel === "number" && panel >= z) + return; + for(;z>=0;z--) { if(typeof panel === 'string') From 0f19188670904498eb988d4cc80c43ad5398cc29 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 18:46:21 +0100 Subject: [PATCH 29/43] Removed $window --- scrollify.js | 170 +++++++++++++++++++++++++++------------------------ 1 file changed, 91 insertions(+), 79 deletions(-) diff --git a/scrollify.js b/scrollify.js index a5cf735..47f1d7b 100644 --- a/scrollify.js +++ b/scrollify.js @@ -58,7 +58,6 @@ if touchScroll is false - update index hasLocation = false, timeoutId, timeoutId2, - $window = window, portHeight, top = window.scrollY, scrollable = false, @@ -95,6 +94,14 @@ if touchScroll is false - update index afterResize:function() {}, afterRender:function() {} }; + + function log(msg, warn = false) + { + if(!settings.logging || !window.console) + return; + + (warn ? console.warn : console.log)("Scrollify warning: " + msg); + } // Smooth page scrolling in vanilla js (Thanks https://pawelgrzybek.com/page-scroll-in-vanilla-javascript/) function scrollIt(destination, duration = 200, easing = 'linear', callback) { @@ -184,7 +191,7 @@ if touchScroll is false - update index } function getportHeight() { - return ($window.innerHeight + settings.offset); + return (window.innerHeight + settings.offset); } function animateScroll(index,instant,callbacks,toTop) @@ -245,10 +252,7 @@ if touchScroll is false - update index } catch (e) { - if(window.console) - { - console.warn("Scrollify warning: Page must be hosted to manipulate the hash value."); - } + log("Page must be hosted to manipulate the hash value.", true); } } else { window.location.hash = names[index]; @@ -299,7 +303,7 @@ if touchScroll is false - update index { if(window.location.hash.length) { - console.warn("Scrollify warning: ID matches hash value - this will cause the page to anchor."); + log("ID matches hash value - this will cause the page to anchor.", true); } } catch (e) {} @@ -308,16 +312,6 @@ if touchScroll is false - update index } } - - console.dir(animateScroll); - - function log(msg, warn = false) - { - if(!settings.logging) - return; - - (warn ? console.warn : console.log)(msg); - } function isAccelerating(samples) { function average(num) { @@ -515,9 +509,9 @@ if touchScroll is false - update index { if(settings.scrollbars) { - $window.addEventListener('mousedown', manualScroll.handleMousedown); - $window.addEventListener('mouseup', manualScroll.handleMouseup); - $window.addEventListener('scroll', manualScroll.handleScroll); + window.addEventListener('mousedown', manualScroll.handleMousedown); + window.addEventListener('mouseup', manualScroll.handleMouseup); + window.addEventListener('scroll', manualScroll.handleScroll); } else { @@ -525,7 +519,7 @@ if touchScroll is false - update index } window.addEventListener(wheelEvent, manualScroll.wheelHandler, { passive: false }); //$(document).bind(wheelEvent,manualScroll.wheelHandler); - $window.addEventListener('keydown', manualScroll.keyHandler); + window.addEventListener('keydown', manualScroll.keyHandler); } }; @@ -734,7 +728,7 @@ if touchScroll is false - update index manualScroll.init(); swipeScroll.init(); - $window.addEventListener("resize",util.handleResize); + window.addEventListener("resize",util.handleResize); if (document.addEventListener) { @@ -824,7 +818,7 @@ if touchScroll is false - update index window.scrollTo(top,0); } } - function calculatePositions (scroll,firstLoad) + function calculatePositions (scroll, firstLoad) { var selector = settings.section; @@ -884,7 +878,7 @@ if touchScroll is false - update index elements[i] = $this; try { if($(names[i]).length && window.console) { - console.warn("Scrollify warning: Section names can't match IDs - this will cause the browser to anchor."); + log("Section names can't match IDs - this will cause the browser to anchor.", true); } } catch (e) {} @@ -902,30 +896,36 @@ if touchScroll is false - update index } function atTop() { - if(!overflow[index]) { - return true; - } - top = $window.scrollTop(); - if(top>parseInt(heights[index])) { - return false; - } else { - return true; - } - } - function atBottom() { - if(!overflow[index]) { - return true; - } - top = $window.scrollTop(); - portHeight = getportHeight(); - - if(topparseInt(heights[index])) + { + return false; + } + else + { + return true; + } } + function atBottom() + { + if(!overflow[index]) + { + return true; + } + + top = window.scrollTop(); + portHeight = getportHeight(); + + if(top < parseInt(heights[index]) + (elements[index].outerHeight() - portHeight) - 28) { + return false; + } + else + { + return true; + } } }; @@ -933,10 +933,6 @@ if touchScroll is false - update index { var z = names.length; - // Don't both with out of range panels - if(typeof panel === "number" && panel >= z) - return; - for(;z>=0;z--) { if(typeof panel === 'string') @@ -959,6 +955,7 @@ if touchScroll is false - update index } } } + scrollify.move = (panel) => { if(panel===undefined) { @@ -975,6 +972,7 @@ if touchScroll is false - update index move(panel,false); } }; + scrollify.instantMove = (panel) => { if(panel===undefined) { @@ -991,6 +989,7 @@ if touchScroll is false - update index move(panel,true); } }; + scrollify.next = () => { if(index < names.length) @@ -1018,36 +1017,41 @@ if touchScroll is false - update index animateScroll(index,true,true,true); } }; - scrollify.instantPrevious = () => { + scrollify.instantPrevious = () => + { if(index>0) { - index -= 1; - //index, instant, callbacks, toTop - animateScroll(index,true,true,true); + index -= 1; + //index, instant, callbacks, toTop + animateScroll(index,true,true,true); } }; - scrollify.destroy = () => { - if(!initialised) { - return false; + scrollify.destroy = () => + { + if(!initialised) + { + return false; } - if(settings.setHeights) { - $(settings.section).each(function() { - $(this).css("height","auto"); - }); + if(settings.setHeights) + { + $(settings.section).forEach((val) => + { + val.style.height = "auto"; + }); } - $window.off("resize",util.handleResize); + window.removeEventListener("resize",util.handleResize); if(settings.scrollbars) { - $window.off('mousedown', manualScroll.handleMousedown); - $window.off('mouseup', manualScroll.handleMouseup); - $window.off('scroll', manualScroll.handleScroll); + window.removeEventListener('mousedown', manualScroll.handleMousedown); + window.removeEventListener('mouseup', manualScroll.handleMouseup); + window.removeEventListener('scroll', manualScroll.handleScroll); } - // $window.off(wheelEvent,manualScroll.wheelHandler); + // window.off(wheelEvent,manualScroll.wheelHandler); window.removeEventListener(wheelEvent,manualScroll.wheelHandler); - $window.off('keydown', manualScroll.keyHandler); + window.removeEventListener('keydown', manualScroll.keyHandler); if (document.addEventListener && settings.touchScroll) { - document.removeEventListener('touchstart', swipeScroll.touchHandler, false); - document.removeEventListener('touchmove', swipeScroll.touchHandler, false); - document.removeEventListener('touchend', swipeScroll.touchHandler, false); + document.removeEventListener('touchstart', swipeScroll.touchHandler, false); + document.removeEventListener('touchmove', swipeScroll.touchHandler, false); + document.removeEventListener('touchend', swipeScroll.touchHandler, false); } heights = []; names = []; @@ -1056,7 +1060,7 @@ if touchScroll is false - update index }; scrollify.update = () => { if(!initialised) { - return false; + return false; } util.handleUpdate(); }; @@ -1072,8 +1076,8 @@ if touchScroll is false - update index scrollify.enable = () => { disabled = false; if (initialised) { - //instant,callbacks - manualScroll.calculateNearest(false,false); + //instant,callbacks + manualScroll.calculateNearest(false,false); } }; scrollify.isDisabled = () => { @@ -1088,13 +1092,21 @@ if touchScroll is false - update index if(typeof updatedOptions === "object") { - settings = $.extend(settings, updatedOptions); + // Thanks https://plainjs.com/javascript/utilities/merge-two-javascript-objects-19/! (Vanilla JS version of $.extend) + let extend = (obj, src) => { + for (var key in src) { + if (src.hasOwnProperty(key)) obj[key] = src[key]; + } + return obj; + }; + + settings = extend(settings, updatedOptions); + util.handleUpdate(); + return; } - else if(window.console) - { - console.warn("Scrollify warning: setOptions expects an object."); - } + + log("setOptions expects an object.", true); }; window.scrollify = scrollify; return scrollify; From d124f4bdf3aa86b9198a52328a19ca89ef3c72b4 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 18:51:17 +0100 Subject: [PATCH 30/43] Removed wheelhandler JQuery dependencies --- scrollify.js | 108 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 64 insertions(+), 44 deletions(-) diff --git a/scrollify.js b/scrollify.js index 47f1d7b..84b9b52 100644 --- a/scrollify.js +++ b/scrollify.js @@ -404,74 +404,94 @@ if touchScroll is false - update index } }, wheelHandler:function(e) { - if(disabled===true) { - return true; - } else if(settings.standardScrollElements) { - if($(e.target).is(settings.standardScrollElements) || $(e.target).closest(settings.standardScrollElements).length) { + if(disabled===true) + { return true; } + else if(settings.standardScrollElements) + { + if(e.target.is(settings.standardScrollElements) || e.target.closest(settings.standardScrollElements).length) + { + return true; + } } - if(!overflow[index]) { - e.preventDefault(); + if(!overflow[index]) + { + e.preventDefault(); } + var currentScrollTime = new Date().getTime(); - e = e || window.event; - var value; - if (e.originalEvent) { - value = e.originalEvent.wheelDelta || -e.originalEvent.deltaY || -e.originalEvent.detail; - } else { - value = e.wheelDelta || -e.deltaY || -e.detail; - } + + var value = e.wheelDelta || -e.deltaY || -e.detail; + var delta = Math.max(-1, Math.min(1, value)); //delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120; - if(scrollSamples.length > 149){ - scrollSamples.shift(); + if(scrollSamples.length > 149) + { + scrollSamples.shift(); } + //scrollSamples.push(Math.abs(delta*10)); scrollSamples.push(Math.abs(value)); - if((currentScrollTime-scrollTime) > 200){ - scrollSamples = []; + if((currentScrollTime-scrollTime) > 200) + { + scrollSamples = []; } scrollTime = currentScrollTime; - if(locked) { - return false; + if(locked) + { + return false; } - if(delta<0) { - if(index0) { - if(index>0) { - if(atTop()) { - if(isAccelerating(scrollSamples)) { - e.preventDefault(); - index--; - locked = true; - //index, instant, callbacks, toTop - animateScroll(index,false,true, false); - } else { - return false; - } + else if(delta>0) + { + if(index>0) + { + if(atTop()) + { + if(isAccelerating(scrollSamples)) + { + e.preventDefault(); + index--; + locked = true; + //index, instant, callbacks, toTop + animateScroll(index,false,true, false); + } + else + { + return false; + } + } } } - } }, keyHandler:function(e) { From 2ae952b07b82261b2342aa2338d7e3c0114ee8e1 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 18:58:44 +0100 Subject: [PATCH 31/43] Fully removed JQuery (most likely) --- scrollify.js | 185 ++++++++++++++++++++++++++------------------------- 1 file changed, 94 insertions(+), 91 deletions(-) diff --git a/scrollify.js b/scrollify.js index 84b9b52..f7f3df4 100644 --- a/scrollify.js +++ b/scrollify.js @@ -410,7 +410,7 @@ if touchScroll is false - update index } else if(settings.standardScrollElements) { - if(e.target.is(settings.standardScrollElements) || e.target.closest(settings.standardScrollElements).length) + if(e.target.matches(settings.standardScrollElements) || e.target.closest(settings.standardScrollElements).length) { return true; } @@ -495,35 +495,35 @@ if touchScroll is false - update index }, keyHandler:function(e) { - if(disabled===true || document.activeElement.readOnly===false) { - return true; - } else if(settings.standardScrollElements) { - if($(e.target).is(settings.standardScrollElements) || $(e.target).closest(settings.standardScrollElements).length) { + if (disabled === true || document.activeElement.readOnly === false) { return true; + } else if (settings.standardScrollElements) { + if (e.target.matches(settings.standardScrollElements) || e.target.closest(settings.standardScrollElements).length) { + return true; + } } + if (locked === true) { + return false; } - if(locked===true) { - return false; - } - if(e.keyCode==38 || e.keyCode==33) { - if(index>0) { - if(atTop()) { - e.preventDefault(); - index--; - //index, instant, callbacks, toTop - animateScroll(index,false,true,false); + if (e.keyCode == 38 || e.keyCode == 33) { + if (index > 0) { + if (atTop()) { + e.preventDefault(); + index--; + //index, instant, callbacks, toTop + animateScroll(index, false, true, false); + } } - } - } else if(e.keyCode==40 || e.keyCode==34) { - if(index { @@ -535,7 +535,7 @@ if touchScroll is false - update index } else { - $("body").css({"overflow":"hidden"}); + document.body.style.overflow = "hidden"; } window.addEventListener(wheelEvent, manualScroll.wheelHandler, { passive: false }); //$(document).bind(wheelEvent,manualScroll.wheelHandler); @@ -557,77 +557,80 @@ if touchScroll is false - update index }, touchHandler: function(event) { if(disabled===true) { - return true; - } else if(settings.standardScrollElements) { - if($(event.target).is(settings.standardScrollElements) || $(event.target).closest(settings.standardScrollElements).length) { return true; } + else if(settings.standardScrollElements) + { + if(event.target.matches(settings.standardScrollElements) || event.target.closest(settings.standardScrollElements).length) + { + return true; + } } var touch; if (typeof event !== 'undefined'){ - if (typeof event.touches !== 'undefined') { - touch = event.touches[0]; - switch (event.type) { - case 'touchstart': - swipeScroll.touches.touchstart.y = touch.pageY; - swipeScroll.touches.touchmove.y = -1; - - swipeScroll.touches.touchstart.x = touch.pageX; - swipeScroll.touches.touchmove.x = -1; - - swipeScroll.options.timeStamp = new Date().getTime(); - swipeScroll.touches.touchend = false; - case 'touchmove': - swipeScroll.touches.touchmove.y = touch.pageY; - swipeScroll.touches.touchmove.x = touch.pageX; - if(swipeScroll.touches.touchstart.y!==swipeScroll.touches.touchmove.y && (Math.abs(swipeScroll.touches.touchstart.y-swipeScroll.touches.touchmove.y)>Math.abs(swipeScroll.touches.touchstart.x-swipeScroll.touches.touchmove.x))) { - //if(!overflow[index]) { - event.preventDefault(); - //} - swipeScroll.touches.direction = "y"; - if((swipeScroll.options.timeStamp+swipeScroll.options.timeGap)<(new Date().getTime()) && swipeScroll.touches.touchend == false) { - - swipeScroll.touches.touchend = true; - if (swipeScroll.touches.touchstart.y > -1) { - - if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { - if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { - - swipeScroll.up(); - - } else { - swipeScroll.down(); - + if (typeof event.touches !== 'undefined') { + touch = event.touches[0]; + switch (event.type) { + case 'touchstart': + swipeScroll.touches.touchstart.y = touch.pageY; + swipeScroll.touches.touchmove.y = -1; + + swipeScroll.touches.touchstart.x = touch.pageX; + swipeScroll.touches.touchmove.x = -1; + + swipeScroll.options.timeStamp = new Date().getTime(); + swipeScroll.touches.touchend = false; + case 'touchmove': + swipeScroll.touches.touchmove.y = touch.pageY; + swipeScroll.touches.touchmove.x = touch.pageX; + if(swipeScroll.touches.touchstart.y!==swipeScroll.touches.touchmove.y && (Math.abs(swipeScroll.touches.touchstart.y-swipeScroll.touches.touchmove.y)>Math.abs(swipeScroll.touches.touchstart.x-swipeScroll.touches.touchmove.x))) { + //if(!overflow[index]) { + event.preventDefault(); + //} + swipeScroll.touches.direction = "y"; + if((swipeScroll.options.timeStamp+swipeScroll.options.timeGap)<(new Date().getTime()) && swipeScroll.touches.touchend == false) { + + swipeScroll.touches.touchend = true; + if (swipeScroll.touches.touchstart.y > -1) { + + if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { + if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { + + swipeScroll.up(); + + } else { + swipeScroll.down(); + + } + } } } } - } - } - break; - case 'touchend': - if(swipeScroll.touches[event.type]===false) { - swipeScroll.touches[event.type] = true; - if (swipeScroll.touches.touchstart.y > -1 && swipeScroll.touches.touchmove.y > -1 && swipeScroll.touches.direction==="y") { - - if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { - if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { - swipeScroll.up(); - - } else { - swipeScroll.down(); - + break; + case 'touchend': + if(swipeScroll.touches[event.type]===false) { + swipeScroll.touches[event.type] = true; + if (swipeScroll.touches.touchstart.y > -1 && swipeScroll.touches.touchmove.y > -1 && swipeScroll.touches.direction==="y") { + + if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { + if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { + swipeScroll.up(); + + } else { + swipeScroll.down(); + + } + } + swipeScroll.touches.touchstart.y = -1; + swipeScroll.touches.touchstart.x = -1; + swipeScroll.touches.direction = "undetermined"; } } - swipeScroll.touches.touchstart.y = -1; - swipeScroll.touches.touchstart.x = -1; - swipeScroll.touches.direction = "undetermined"; - } + default: + break; } - default: - break; } } - } }, down: function() { @@ -868,20 +871,20 @@ if touchScroll is false - update index if(i > 0) { - heights[i] = parseInt(offset($this).top) + settings.offset; + heights[i] = parseInt(offset(val).top) + settings.offset; } else { - heights[i] = parseInt(offset($this).top); + heights[i] = parseInt(offset(val).top); } - if(settings.sectionName && $this.getAttribute(settings.sectionName)) + if(settings.sectionName && val.getAttribute(settings.sectionName)) { - names[i] = "#" + $this.getAttribute(settings.sectionName).toString().replace(/ /g,"-"); + names[i] = "#" + val.getAttribute(settings.sectionName).toString().replace(/ /g,"-"); } else { - if(settings.interstitialSection ? ($this.matches(settings.interstitialSection) === false) : false) + if(settings.interstitialSection ? (val.matches(settings.interstitialSection) === false) : false) { names[i] = "#" + (i + 1); } @@ -891,14 +894,14 @@ if touchScroll is false - update index if(i === document.querySelectorAll(selector).length-1 && i>1) { - heights[i] = heights[i-1] + (parseInt($($(selector)[i-1]).outerHeight()) - parseInt($(window).height())) + parseInt($this.outerHeight()); + heights[i] = heights[i-1] + (parseInt($($(selector)[i-1]).outerHeight()) - parseInt(window.innerHeight())) + parseInt(val.outerHeight()); } } } - elements[i] = $this; + elements[i] = val; try { if($(names[i]).length && window.console) { - log("Section names can't match IDs - this will cause the browser to anchor.", true); + log("Section names can't match IDs - this will cause the browser to anchor.", true); } } catch (e) {} From c490fbf9910210f78b8441a7bf29d5797a33a3c4 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 18:59:54 +0100 Subject: [PATCH 32/43] Removed some inappropriate comments --- scrollify.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/scrollify.js b/scrollify.js index f7f3df4..8fd4b73 100644 --- a/scrollify.js +++ b/scrollify.js @@ -1,10 +1,7 @@ /*! - * jQuery Scrollify + * Scrollify * Version 1.0.20 * - * Requires: - * - jQuery 1.7 or higher - * * https://github.com/lukehaas/Scrollify * * Copyright 2016, Luke Haas @@ -24,15 +21,8 @@ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - - - -if touchScroll is false - update index - */ -/*jshint esversion: 6 */ - (function (global,factory) { "use strict"; "esversion: 6"; From 6f648391df86cbd04819ecdd0ce0e9bbd38342a7 Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 19:27:26 +0100 Subject: [PATCH 33/43] Moved scrollify.js -> dev.scrollify.js --- scrollify.js => dev.scrollify.js | 1 - 1 file changed, 1 deletion(-) rename scrollify.js => dev.scrollify.js (99%) diff --git a/scrollify.js b/dev.scrollify.js similarity index 99% rename from scrollify.js rename to dev.scrollify.js index 8fd4b73..99ae6b1 100644 --- a/scrollify.js +++ b/dev.scrollify.js @@ -25,7 +25,6 @@ (function (global,factory) { "use strict"; - "esversion: 6"; if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. return factory(document.querySelector, global, global.document); From b43f862470aa23499162b7003e049d4658b5067d Mon Sep 17 00:00:00 2001 From: Cyrus Cook <11858105+cyruscook@users.noreply.github.com> Date: Fri, 3 May 2019 19:30:17 +0100 Subject: [PATCH 34/43] Added compressed scrollify.js --- scrollify.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 scrollify.js diff --git a/scrollify.js b/scrollify.js new file mode 100644 index 0000000..ffecf3f --- /dev/null +++ b/scrollify.js @@ -0,0 +1,28 @@ +/*! + * Scrollify + * Version 1.0.20 + * + * https://github.com/lukehaas/Scrollify + * + * Copyright 2016, Luke Haas + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +/* --- babeljs.io and jscompress.com compiled, for debugging and development use dev.scrollify.js --- */ + +"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e,t){if("function"==typeof define&&define.amd)return t(document.querySelector,e,e.document);"object"===("undefined"==typeof module?"undefined":_typeof(module))&&module.exports?module.exports=t(document.querySelector,e,e.document):t(document.querySelector,e,e.document)}("undefined"!=typeof window?window:void 0,function(i,h,f,d){var u,s,l,m,p,g,y=[],v=[],S=[],b=[],w=0,r=0,E=1,H=!1,M=h.scrollY,I=!1,x=!1,L=!1,O=!1,T=[],D=(new Date).getTime(),c=!0,N=!1,a=0,k="onwheel"in f?"wheel":f.onmousewheel!==d?"mousewheel":"DOMMouseScroll",Q={section:".section",sectionName:"section-name",interstitialSection:"",easing:"easeOutExpo",scrollSpeed:1100,offset:0,scrollbars:!0,target:"html,body",standardScrollElements:!1,setHeights:!0,overflowScroll:!0,updateHash:!0,touchScroll:!0,logging:!1,before:function(){},after:function(){},afterResize:function(){},afterRender:function(){}};function q(e){var t=1Math.abs(p.touches.touchstart.x-p.touches.touchmove.x)&&(e.preventDefault(),p.touches.direction="y",p.options.timeStamp+p.options.timeGap<(new Date).getTime()&&0==p.touches.touchend&&(p.touches.touchend=!0,-1p.options.distance&&(p.touches.touchstart.yp.options.distance&&(p.touches.touchstart.yE?(n(parseInt(y[w])+l*E),E+=1):n(parseInt(y[w])+(S[w].outerHeight()-l))))},up:function(){0<=w&&(c()&&0parseInt(y[w]))}function a(){return!b[w]||(M=h.scrollTop(),l=R(),!(M Date: Fri, 3 May 2019 19:37:35 +0100 Subject: [PATCH 35/43] Updated ReadMe to reflect changes --- README.md | 50 +++++++++++++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 7ca1fab..ae15c76 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# [~~jQuery~~ Scrollify](https://projects.lukehaas.me/scrollify) +# [Scrollify](https://projects.lukehaas.me/scrollify) -A ~~jQuery~~ Pure JS plugin that assists scrolling and snaps to sections. Touch optimised. +A vanilla JS plugin that assists scrolling and snaps to sections. Touch optimised. ## Demo @@ -22,7 +22,7 @@ A ~~jQuery~~ Pure JS plugin that assists scrolling and snaps to sections. Touch ## Basic setup -Scrollify requires ~~jQuery 1.7+~~ absolutely nothing. +Scrollify no longer requires JQuery. The most basic setup is as follows: @@ -31,8 +31,8 @@ The most basic setup is as follows: +