mirror of https://github.com/nymea/nymea.git
added JS for smooth scrolling & css fixes
myshoeshurt
Michael Zanetti
parent
eae359013f
commit
c7fd4690ed
|
|
@ -6,7 +6,7 @@ HTML.templatedir = .
|
|||
|
||||
HTML.stylesheets = main.css
|
||||
|
||||
HTML.scripts =
|
||||
HTML.scripts = main.js
|
||||
|
||||
extraimages.HTML = images/logo.png \
|
||||
images/favicon.ico \
|
||||
|
|
@ -15,6 +15,7 @@ extraimages.HTML = images/logo.png \
|
|||
|
||||
HTML.headerstyles = \
|
||||
" <link rel=\"stylesheet\" type=\"text/css\" href=\"style/main.css\" /> \n" \
|
||||
" <script href=\"scripts/main.js\" /></script> \n" \
|
||||
" <link rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"apple-touch-icon-57x57.png\" /> \n" \
|
||||
" <link rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"apple-touch-icon-114x114.png\" /> \n" \
|
||||
" <link rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"apple-touch-icon-72x72.png\" /> \n" \
|
||||
|
|
|
|||
315
doc/main.css
315
doc/main.css
|
|
@ -514,10 +514,10 @@ table {
|
|||
border-spacing: 0;
|
||||
margin-bottom: 5px;
|
||||
width: 100%; }
|
||||
table td {
|
||||
padding: 5px 20px;
|
||||
line-height: 1.5;
|
||||
border: 1px solid #d3d5d6; }
|
||||
table td {
|
||||
padding: 5px 20px;
|
||||
line-height: 1.5;
|
||||
border: 1px solid #d3d5d6; }
|
||||
|
||||
div.table {
|
||||
overflow: auto;
|
||||
|
|
@ -570,13 +570,13 @@ div.table {
|
|||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center; }
|
||||
.guh-navbar-center:only-child {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative; }
|
||||
.guh-navbar-center:only-child {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative; }
|
||||
|
||||
.guh-navbar-nav {
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -585,34 +585,17 @@ div.table {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none; }
|
||||
.guh-navbar-nav li {
|
||||
text-overflow: ellipsis;
|
||||
/* Required for text-overflow to do anything */
|
||||
white-space: nowrap;
|
||||
overflow: hidden; }
|
||||
.guh-navbar-nav li:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%; }
|
||||
.guh-navbar-nav > li > a {
|
||||
color: #676767;
|
||||
font-size: 1.3rem;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
min-height: 100px;
|
||||
padding: 0 15px;
|
||||
text-decoration: none; }
|
||||
|
||||
div.header + li {
|
||||
color: #408a83;
|
||||
.guh-navbar-nav li {
|
||||
text-overflow: ellipsis;
|
||||
/* Required for text-overflow to do anything */
|
||||
white-space: nowrap;
|
||||
overflow: hidden; }
|
||||
.guh-navbar-nav li:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%; }
|
||||
.guh-navbar-nav > li > a {
|
||||
color: #676767;
|
||||
font-size: 1.3rem;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -625,7 +608,26 @@ div.header + li {
|
|||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
min-height: 100px;
|
||||
padding: 35px;
|
||||
padding: 0 15px;
|
||||
text-decoration: none; }
|
||||
|
||||
div.header + li {
|
||||
color: #408a83;
|
||||
font-size: 1.115rem;
|
||||
line-height: 1.5;
|
||||
width: 23.5%;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
min-height: 100px;
|
||||
padding: 25px;
|
||||
text-decoration: none;
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
|
|
@ -635,13 +637,13 @@ div.header + li {
|
|||
.guh-navbar-center-left, .guh-navbar-center-right {
|
||||
position: absolute;
|
||||
top: 0; }
|
||||
.guh-navbar-center-left > *, .guh-navbar-center-right > * {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center; }
|
||||
.guh-navbar-center-left > *, .guh-navbar-center-right > * {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center; }
|
||||
|
||||
.guh-navbar-center-left {
|
||||
right: 100%; }
|
||||
|
|
@ -658,91 +660,101 @@ div.header + li {
|
|||
padding: 10rem 3.3rem 10rem;
|
||||
width: 100%;
|
||||
position: relative; }
|
||||
.content:before {
|
||||
content: '';
|
||||
display: table; }
|
||||
.content:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both; }
|
||||
.content .sidebar {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
width: 23.5% !important;
|
||||
padding: 40px 40px 120px 40px;
|
||||
border-right: 1px #d3d5d6 solid;
|
||||
overflow: auto; }
|
||||
.content .sidebar h3 {
|
||||
text-align: center;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px #d3d5d6 solid; }
|
||||
.content .sidebar h3 a {
|
||||
color: #676767; }
|
||||
.content .sidebar ul {
|
||||
padding-left: 0; }
|
||||
.content .context {
|
||||
width: 70%;
|
||||
margin: 0 auto; }
|
||||
.content .context .small-subtitle:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: calc(-0.1 * 1em);
|
||||
vertical-align: middle;
|
||||
height: .9em;
|
||||
margin-right: 10px;
|
||||
border-left: 5px solid rgba(211, 213, 214, 0.65); }
|
||||
.content table {
|
||||
vertical-align: initial; }
|
||||
.content ul li {
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
padding-left: calc(1.5em + 10px); }
|
||||
.content ul li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"><circle fill="#666" cx="3" cy="3" r="3"></circle></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
float: left; }
|
||||
.content a {
|
||||
text-decoration: none;
|
||||
color: #57baae;
|
||||
position: relative; }
|
||||
.content a:hover {
|
||||
color: #57baae;
|
||||
text-decoration: none; }
|
||||
.content a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #7cc09a;
|
||||
visibility: hidden;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transition: all 0.3s ease-in-out 0s;
|
||||
transition: all 0.3s ease-in-out 0s; }
|
||||
.content a:hover:before {
|
||||
visibility: visible;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1); }
|
||||
.content:before {
|
||||
content: '';
|
||||
display: table; }
|
||||
.content:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both; }
|
||||
.content .sidebar {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
width: 23.5% !important;
|
||||
padding: 40px 40px 160px 40px;
|
||||
border-right: 1px #d3d5d6 solid;
|
||||
overflow: auto; }
|
||||
.content .sidebar h3 {
|
||||
text-align: center;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px #d3d5d6 solid; }
|
||||
.content .sidebar h3 a {
|
||||
color: #676767; }
|
||||
.content .sidebar ul {
|
||||
padding-left: 0; }
|
||||
.content .sidebar .level2 {
|
||||
font-size: 1rem;
|
||||
margin-left: 1rem;
|
||||
line-height: 1.5; }
|
||||
.content .sidebar .level2:before {
|
||||
content: "-";
|
||||
background-image: none;
|
||||
text-align: right; }
|
||||
.content .context {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden; }
|
||||
.content .context .small-subtitle:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: calc(-0.1 * 1em);
|
||||
vertical-align: middle;
|
||||
height: .9em;
|
||||
margin-right: 10px;
|
||||
border-left: 5px solid rgba(211, 213, 214, 0.65); }
|
||||
.content table {
|
||||
vertical-align: initial; }
|
||||
.content ul li {
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
padding-left: calc(1.5em + 10px); }
|
||||
.content ul li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"><circle fill="#666" cx="3" cy="3" r="3"></circle></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
float: left; }
|
||||
.content a {
|
||||
text-decoration: none;
|
||||
color: #57baae;
|
||||
position: relative; }
|
||||
.content a:hover {
|
||||
color: #57baae;
|
||||
text-decoration: none; }
|
||||
.content a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #7cc09a;
|
||||
visibility: hidden;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transition: all 0.3s ease-in-out 0s;
|
||||
transition: all 0.3s ease-in-out 0s; }
|
||||
.content a:hover:before {
|
||||
visibility: visible;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1); }
|
||||
|
||||
.centerAlign {
|
||||
text-align: center; }
|
||||
|
||||
pre {
|
||||
border: 1px solid #676767;
|
||||
resize: both;
|
||||
background: #3a4055;
|
||||
-moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
|
||||
-webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
|
||||
|
|
@ -751,44 +763,49 @@ pre {
|
|||
padding: 1em 1em 1em 1em;
|
||||
overflow-x: auto;
|
||||
color: #d3d5d6; }
|
||||
pre .operator {
|
||||
color: white; }
|
||||
pre .type {
|
||||
color: #4f9d08; }
|
||||
pre .keyword {
|
||||
color: #ffff55; }
|
||||
pre .operator {
|
||||
color: white; }
|
||||
pre .type {
|
||||
color: #4f9d08; }
|
||||
pre .keyword {
|
||||
color: #ffff55; }
|
||||
pre .string {
|
||||
color: #aaaaaa; }
|
||||
pre .number {
|
||||
color: #ff55ff; }
|
||||
|
||||
span.type {
|
||||
color: #408a83; }
|
||||
|
||||
h2, h3.fn {
|
||||
position: relative; }
|
||||
h2:after, h3.fn:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 1px;
|
||||
bottom: -10px;
|
||||
margin: 0 auto 0 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 20%;
|
||||
background: #d3d5d6; }
|
||||
h2:after, h3.fn:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 1px;
|
||||
bottom: -10px;
|
||||
margin: 0 auto 0 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 20%;
|
||||
background: #d3d5d6; }
|
||||
|
||||
div.footer {
|
||||
position: absolute;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
background: #efefef;
|
||||
padding: 60px; }
|
||||
div.footer p {
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
padding: 60px 0; }
|
||||
div.footer acronym[title] {
|
||||
text-decoration: none; }
|
||||
div.footer p {
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.content .context {
|
||||
width: 50%; } }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
width: 50%; } }
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* Copyright (C) 2017 Georgi Yatsev <georgi.yatsev@guh.io> *
|
||||
* *
|
||||
* 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. *
|
||||
* *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define([], factory())
|
||||
} else if (typeof module === "object" && module.exports) {
|
||||
module.exports = factory()
|
||||
} else {
|
||||
(function install() {
|
||||
if (document && document.body) {
|
||||
root.zenscroll = factory()
|
||||
} else {
|
||||
setTimeout(install, 9)
|
||||
}
|
||||
})()
|
||||
}
|
||||
}(this, function () {
|
||||
"use strict"
|
||||
|
||||
|
||||
var isNativeSmoothScrollEnabledOn = function (elem) {
|
||||
return ("getComputedStyle" in window) &&
|
||||
window.getComputedStyle(elem)["scroll-behavior"] === "smooth"
|
||||
}
|
||||
|
||||
|
||||
if (typeof window === "undefined" || !("document" in window)) {
|
||||
return {}
|
||||
}
|
||||
|
||||
|
||||
var makeScroller = function (container, defaultDuration, edgeOffset) {
|
||||
|
||||
defaultDuration = defaultDuration || 999 //ms
|
||||
if (!edgeOffset && edgeOffset !== 0) {
|
||||
edgeOffset = 9 //px
|
||||
}
|
||||
|
||||
var scrollTimeoutId
|
||||
var setScrollTimeoutId = function (newValue) {
|
||||
scrollTimeoutId = newValue
|
||||
}
|
||||
|
||||
|
||||
var stopScroll = function () {
|
||||
clearTimeout(scrollTimeoutId)
|
||||
setScrollTimeoutId(0)
|
||||
}
|
||||
|
||||
var getTopWithEdgeOffset = function (elem) {
|
||||
return Math.max(0, container.getTopOf(elem) - edgeOffset)
|
||||
}
|
||||
|
||||
var scrollToY = function (targetY, duration, onDone) {
|
||||
stopScroll()
|
||||
if (duration === 0 || (duration && duration < 0) || isNativeSmoothScrollEnabledOn(container.body)) {
|
||||
container.toY(targetY)
|
||||
if (onDone) {
|
||||
onDone()
|
||||
}
|
||||
} else {
|
||||
var startY = container.getY()
|
||||
var distance = Math.max(0, targetY) - startY
|
||||
var startTime = new Date().getTime()
|
||||
duration = duration || Math.min(Math.abs(distance), defaultDuration);
|
||||
(function loopScroll() {
|
||||
setScrollTimeoutId(setTimeout(function () {
|
||||
// Calculate percentage:
|
||||
var p = Math.min(1, (new Date().getTime() - startTime) / duration)
|
||||
// Calculate the absolute vertical position:
|
||||
var y = Math.max(0, Math.floor(startY + distance*(p < 0.5 ? 2*p*p : p*(4 - p*2)-1)))
|
||||
container.toY(y)
|
||||
if (p < 1 && (container.getHeight() + y) < container.body.scrollHeight) {
|
||||
loopScroll()
|
||||
} else {
|
||||
setTimeout(stopScroll, 99) // with cooldown time
|
||||
if (onDone) {
|
||||
onDone()
|
||||
}
|
||||
}
|
||||
}, 9))
|
||||
})()
|
||||
}
|
||||
}
|
||||
|
||||
var scrollToElem = function (elem, duration, onDone) {
|
||||
scrollToY(getTopWithEdgeOffset(elem), duration, onDone)
|
||||
}
|
||||
|
||||
var scrollIntoView = function (elem, duration, onDone) {
|
||||
var elemHeight = elem.getBoundingClientRect().height
|
||||
var elemBottom = container.getTopOf(elem) + elemHeight
|
||||
var containerHeight = container.getHeight()
|
||||
var y = container.getY()
|
||||
var containerBottom = y + containerHeight
|
||||
if (getTopWithEdgeOffset(elem) < y || (elemHeight + edgeOffset) > containerHeight) {
|
||||
// Element is clipped at top or is higher than screen.
|
||||
scrollToElem(elem, duration, onDone)
|
||||
} else if ((elemBottom + edgeOffset) > containerBottom) {
|
||||
// Element is clipped at the bottom.
|
||||
scrollToY(elemBottom - containerHeight + edgeOffset, duration, onDone)
|
||||
} else if (onDone) {
|
||||
onDone()
|
||||
}
|
||||
}
|
||||
|
||||
var scrollToCenterOf = function (elem, duration, offset, onDone) {
|
||||
scrollToY(Math.max(0, container.getTopOf(elem) - container.getHeight()/2 + (offset || elem.getBoundingClientRect().height/2)), duration, onDone)
|
||||
}
|
||||
|
||||
var setup = function (newDefaultDuration, newEdgeOffset) {
|
||||
if (newDefaultDuration === 0 || newDefaultDuration) {
|
||||
defaultDuration = newDefaultDuration
|
||||
}
|
||||
if (newEdgeOffset === 0 || newEdgeOffset) {
|
||||
edgeOffset = newEdgeOffset
|
||||
}
|
||||
return {
|
||||
defaultDuration: defaultDuration,
|
||||
edgeOffset: edgeOffset
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
setup: setup,
|
||||
to: scrollToElem,
|
||||
toY: scrollToY,
|
||||
intoView: scrollIntoView,
|
||||
center: scrollToCenterOf,
|
||||
stop: stopScroll,
|
||||
moving: function () { return !!scrollTimeoutId },
|
||||
getY: container.getY,
|
||||
getTopOf: container.getTopOf
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var docElem = document.documentElement
|
||||
var getDocY = function () { return window.scrollY || docElem.scrollTop }
|
||||
|
||||
var zenscroll = makeScroller({
|
||||
body: document.scrollingElement || document.body,
|
||||
toY: function (y) { window.scrollTo(0, y) },
|
||||
getY: getDocY,
|
||||
getHeight: function () { return window.innerHeight || docElem.clientHeight },
|
||||
getTopOf: function (elem) { return elem.getBoundingClientRect().top + getDocY() - docElem.offsetTop }
|
||||
})
|
||||
|
||||
zenscroll.createScroller = function (scrollContainer, defaultDuration, edgeOffset) {
|
||||
return makeScroller({
|
||||
body: scrollContainer,
|
||||
toY: function (y) { scrollContainer.scrollTop = y },
|
||||
getY: function () { return scrollContainer.scrollTop },
|
||||
getHeight: function () { return Math.min(scrollContainer.clientHeight, window.innerHeight || docElem.clientHeight) },
|
||||
getTopOf: function (elem) { return elem.offsetTop }
|
||||
}, defaultDuration, edgeOffset)
|
||||
}
|
||||
|
||||
if ("addEventListener" in window && !window.noZensmooth && !isNativeSmoothScrollEnabledOn(document.body)) {
|
||||
|
||||
|
||||
var isScrollRestorationSupported = "scrollRestoration" in history
|
||||
|
||||
if (isScrollRestorationSupported) {
|
||||
history.scrollRestoration = "auto"
|
||||
}
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
|
||||
if (isScrollRestorationSupported) {
|
||||
setTimeout(function () { history.scrollRestoration = "manual" }, 9)
|
||||
window.addEventListener("popstate", function (event) {
|
||||
if (event.state && "zenscrollY" in event.state) {
|
||||
zenscroll.toY(event.state.zenscrollY)
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
|
||||
if (window.location.hash) {
|
||||
setTimeout(function () {
|
||||
var edgeOffset = zenscroll.setup().edgeOffset
|
||||
if (edgeOffset) {
|
||||
var targetElem = document.getElementById(window.location.href.split("#")[1])
|
||||
if (targetElem) {
|
||||
var targetY = Math.max(0, zenscroll.getTopOf(targetElem) - edgeOffset)
|
||||
var diff = zenscroll.getY() - targetY
|
||||
if (0 <= diff && diff < 9 ) {
|
||||
window.scrollTo(0, targetY)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 9)
|
||||
}
|
||||
|
||||
}, false)
|
||||
|
||||
var RE_noZensmooth = new RegExp("(^|\\s)noZensmooth(\\s|$)")
|
||||
window.addEventListener("click", function (event) {
|
||||
var anchor = event.target
|
||||
while (anchor && anchor.tagName !== "A") {
|
||||
anchor = anchor.parentNode
|
||||
}
|
||||
if (!anchor || event.which !== 1 || event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
|
||||
return
|
||||
}
|
||||
if (isScrollRestorationSupported) {
|
||||
try {
|
||||
history.replaceState({ zenscrollY: zenscroll.getY() }, "")
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
var href = anchor.getAttribute("href") || ""
|
||||
if (href.indexOf("#") === 0 && !RE_noZensmooth.test(anchor.className)) {
|
||||
var targetY = 0
|
||||
var targetElem = document.getElementById(href.substring(1))
|
||||
if (href !== "#") {
|
||||
if (!targetElem) {
|
||||
return
|
||||
}
|
||||
targetY = zenscroll.getTopOf(targetElem)
|
||||
}
|
||||
event.preventDefault()
|
||||
var onDone = function () { window.location = href }
|
||||
var edgeOffset = zenscroll.setup().edgeOffset
|
||||
if (edgeOffset) {
|
||||
targetY = Math.max(0, targetY - edgeOffset)
|
||||
onDone = function () { history.pushState(null, "", href) }
|
||||
}
|
||||
zenscroll.toY(targetY, null, onDone)
|
||||
}
|
||||
}, false)
|
||||
|
||||
}
|
||||
|
||||
|
||||
return zenscroll
|
||||
|
||||
|
||||
}));
|
||||
Loading…
Reference in New Issue