z-index: 99; | z-index: 99; | ||||
margin-bottom: 0; | margin-bottom: 0; | ||||
padding: 10px; | padding: 10px; | ||||
position: sticky; | |||||
top: 0; | |||||
} | } | ||||
.navigation .logo { | .navigation .logo { |
jQuery(function ($) { | jQuery(function ($) { | ||||
"use strict"; | "use strict"; | ||||
/* ========================================================================= */ | |||||
/* Page Preloader | |||||
/* ========================================================================= */ | |||||
// Preloader js | |||||
$(window).on('load', function () { | |||||
$('#preloader').fadeOut(700); | |||||
}); | |||||
//animation scroll js | |||||
var html_body = $('html, body'); | |||||
$('nav a, .page-scroll').on('click', function () { //use page-scroll class in any HTML tag for scrolling | |||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { | |||||
var target = $(this.hash); | |||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); | |||||
if (target.length) { | |||||
html_body.animate({ | |||||
scrollTop: target.offset().top - 50 | |||||
}, 1500, "easeInOutExpo"); | |||||
return false; | |||||
} | |||||
} | |||||
}); | |||||
//easeInOutExpo Declaration | |||||
jQuery.extend(jQuery.easing, { | |||||
easeInOutExpo: function (x, t, b, c, d) { | |||||
if (t == 0) return b; | |||||
if (t == d) return b + c; | |||||
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; | |||||
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; | |||||
} | |||||
}); | |||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
/* Post image slider | /* Post image slider | ||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
autoplaySpeed: 4000 | autoplaySpeed: 4000 | ||||
}); | }); | ||||
/* ========================================================================= */ | |||||
/* Menu item highlighting | |||||
/* ========================================================================= */ | |||||
$("#navigation").sticky({ | |||||
topSpacing: 0 | |||||
}); | |||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
/* Magnific popup | /* Magnific popup | ||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
/* Portfolio Filtering Hook | /* Portfolio Filtering Hook | ||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
if ($('.portfolio-items-wrapper').length) | |||||
mixitup('.portfolio-items-wrapper'); | |||||
var mixer = mixitup('.portfolio-items-wrapper'); | |||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
/* Testimonial Carousel | /* Testimonial Carousel | ||||
// End Jquery Function | // End Jquery Function | ||||
/* ========================================================================= */ | |||||
/* Page Preloader | |||||
/* ========================================================================= */ | |||||
// Preloader js | |||||
$(window).on('load', function () { | |||||
$('#preloader').fadeOut(700); | |||||
}); | |||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
/* Animated section | /* Animated section | ||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
}); | }); | ||||
wow.init(); | wow.init(); | ||||
/* ========================================================================= */ | |||||
/* Smooth Scroll | |||||
/* ========================================================================= */ | |||||
var scroll = new SmoothScroll('a[href*="#"]'); | |||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
/* Google Map Customization | /* Google Map Customization | ||||
/* ========================================================================= */ | /* ========================================================================= */ | ||||
map.setMapTypeId('roadatlas'); | map.setMapTypeId('roadatlas'); | ||||
} | } | ||||
// Check init google maps only if "google" has been defined. | |||||
if("google" in window) | |||||
google.maps.event.addDomListener(window, "load", initialize); | |||||
google.maps.event.addDomListener(window, "load", initialize); |
<!DOCTYPE html> | <!DOCTYPE html> | ||||
<html class="no-js" lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}"> | |||||
{{- partial "header.html" . -}} | |||||
{{"<!-- body start -->" | safeHTML}} | |||||
<body id="body" data-spy="scroll" data-target=".navbar" data-offset="50"> | |||||
<div id="content"> | |||||
<html> | |||||
{{- partial "head.html" . -}} | |||||
<body> | |||||
{{- partial "header.html" . -}} | |||||
<div id="content"> | |||||
{{- block "main" . }}{{- end }} | {{- block "main" . }}{{- end }} | ||||
</div> | |||||
{{- partial "footer.html" . -}} | |||||
</body> | |||||
</html> | |||||
</div> | |||||
{{- partial "footer.html" . -}} | |||||
</body> | |||||
</html> |
{{ define "main" }} | |||||
{{ partial "header.html" . }} | {{ partial "header.html" . }} | ||||
{{ partial "navigation.html" . }} | {{ partial "navigation.html" . }} | ||||
</section> | </section> | ||||
{{"<!-- /blog -->" | safeHTML}} | {{"<!-- /blog -->" | safeHTML}} | ||||
{{ end }} | |||||
{{ partial "footer.html" . }} |
{{ define "main" }} | |||||
{{ partial "header.html" . }} | {{ partial "header.html" . }} | ||||
{{ partial "navigation.html" . }} | {{ partial "navigation.html" . }} | ||||
</div> | </div> | ||||
</section> | </section> | ||||
{{ end }} | |||||
{{ partial "footer.html" . }} |
{{ define "main" }} | |||||
{{ partial "header.html" . }} | |||||
{{ partial "preloader.html" . }} | |||||
{{ partial "hero-area.html" . }} | |||||
{{ partial "header.html" . }} | |||||
{{ partial "preloader.html" . }} | |||||
{{ partial "hero-area.html" . }} | |||||
{{ partial "navigation.html" . }} | |||||
{{ partial "navigation.html" . }} | |||||
{{ partial "about.html" . }} | |||||
{{ partial "about.html" . }} | |||||
{{ partial "cta.html" . }} | |||||
{{ partial "cta.html" . }} | |||||
{{ partial "service.html" . }} | |||||
{{ partial "skill.html" . }} | |||||
{{ partial "service.html" . }} | |||||
{{ partial "skill.html" . }} | |||||
{{ partial "portfolio.html" . }} | |||||
{{ partial "portfolio.html" . }} | |||||
{{ partial "counter.html" . }} | |||||
{{ partial "counter.html" . }} | |||||
{{ partial "team.html" . }} | |||||
{{ partial "pricing.html" . }} | |||||
{{ partial "team.html" . }} | |||||
{{ partial "pricing.html" . }} | |||||
{{ partial "testimonial.html" . }} | |||||
{{ partial "testimonial.html" . }} | |||||
{{ partial "blog.html" . }} | |||||
{{ partial "contact.html" . }} | |||||
{{ partial "blog.html" . }} | |||||
{{ partial "contact.html" . }} | |||||
{{ end }} | |||||
{{ partial "footer.html" . }} |
{{"<!-- section title -->" | safeHTML}} | {{"<!-- section title -->" | safeHTML}} | ||||
<div class="title text-center wow fadeInDown"> | <div class="title text-center wow fadeInDown"> | ||||
<h2> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with .Site.Data.blog.headingSpan }} {{ . }} {{ end }} </span></h2> | |||||
<h2> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} </span></h2> | |||||
<div class="border"></div> | <div class="border"></div> | ||||
</div> | </div> | ||||
{{"<!-- /section title -->" | safeHTML}} | {{"<!-- /section title -->" | safeHTML}} | ||||
</div> | </div> | ||||
</section> | </section> | ||||
{{"<!-- /blog -->" | safeHTML}} | {{"<!-- /blog -->" | safeHTML}} | ||||
{{ end }} | |||||
{{ end }} |
{{ if .Site.Data.contact.enable }} | {{ if .Site.Data.contact.enable }} | ||||
{{"<!-- Start Contact Us -->" | safeHTML}} | |||||
{{"<!-- Srart Contact Us -->" | safeHTML}} | |||||
<section id="contact-us" class="contact-us section-bg"> | <section id="contact-us" class="contact-us section-bg"> | ||||
<div class="container"> | <div class="container"> | ||||
<div class="row"> | <div class="row"> | ||||
{{"<!-- Contact Form -->" | safeHTML}} | {{"<!-- Contact Form -->" | safeHTML}} | ||||
<div class="contact-form col-md-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms"> | <div class="contact-form col-md-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms"> | ||||
<form id="contact-form" method="post" action="php/mailer.php" role="form"> | |||||
<form id="contact-form" method="post" action="sendmail.php" role="form"> | |||||
<div class="form-group"> | <div class="form-group"> | ||||
<input type="text" placeholder="Your Name" class="form-control" name="name" id="name"> | <input type="text" placeholder="Your Name" class="form-control" name="name" id="name"> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<input type="text" name="email" style="display: none;"> | |||||
<input type="text" placeholder="Your Email" class="form-control" name="email_real" id="email"> | |||||
<input type="email" placeholder="Your Email" class="form-control" name="email" id="email"> | |||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
{{ if .Site.Data.contact.enable_maps }} | |||||
{{"<!-- Google Map -->" | safeHTML}} | {{"<!-- Google Map -->" | safeHTML}} | ||||
<div class="google-map"> | <div class="google-map"> | ||||
<div id="map-canvas" {{ with .Site.Data.contact.mapLatitude }} data-latitude="{{ . }}" {{ end }} | <div id="map-canvas" {{ with .Site.Data.contact.mapLatitude }} data-latitude="{{ . }}" {{ end }} | ||||
{{ with .Site.Data.contact.mapLongitude }} data-longitude="{{ . }}" {{ end }}></div> | {{ with .Site.Data.contact.mapLongitude }} data-longitude="{{ . }}" {{ end }}></div> | ||||
</div> | </div> | ||||
{{ end }} | |||||
</section> | </section> | ||||
{{"<!-- /contact -->" | safeHTML}} | {{"<!-- /contact -->" | safeHTML}} | ||||
{{ end }} | |||||
{{ end }} |
<div class="social-icon"> | <div class="social-icon"> | ||||
<ul class="list-inline"> | <ul class="list-inline"> | ||||
{{ range .Site.Params.footer.socialIcon }} | {{ range .Site.Params.footer.socialIcon }} | ||||
<li><a href="{{ .url }}"><i class="{{ .icon }}"></i></a></li> | |||||
<li><a href="#"><i class="{{ .icon }}"></i></a></li> | |||||
{{ end }} | {{ end }} | ||||
</ul> | </ul> | ||||
</div> | </div> | ||||
<script type="text/javascript" src="{{ "plugins/slick-carousel/slick/slick.min.js" | absURL}}"></script> | <script type="text/javascript" src="{{ "plugins/slick-carousel/slick/slick.min.js" | absURL}}"></script> | ||||
{{"<!-- Portfolio Filtering -->" | safeHTML}} | {{"<!-- Portfolio Filtering -->" | safeHTML}} | ||||
<script type="text/javascript" src="{{ "plugins/mixitup/mixitup.min.js" | absURL}}"></script> | <script type="text/javascript" src="{{ "plugins/mixitup/mixitup.min.js" | absURL}}"></script> | ||||
{{"<!-- Smooth Scroll -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/smooth-scroll/dist/js/smooth-scroll.min.js" | absURL}}"></script> | |||||
{{"<!-- Magnific popup -->" | safeHTML}} | {{"<!-- Magnific popup -->" | safeHTML}} | ||||
<script type="text/javascript" src="{{ "plugins/magnific-popup/dist/jquery.magnific-popup.min.js" | absURL}}"></script> | <script type="text/javascript" src="{{ "plugins/magnific-popup/dist/jquery.magnific-popup.min.js" | absURL}}"></script> | ||||
{{"<!-- Google Map API -->" | safeHTML}} | {{"<!-- Google Map API -->" | safeHTML}} | ||||
<script type="text/javascript" src="{{ .Site.Params.gmapAPI | absURL }}"></script> | <script type="text/javascript" src="{{ .Site.Params.gmapAPI | absURL }}"></script> | ||||
{{"<!-- Sticky Nav -->" | safeHTML}} | |||||
<script type="text/javascript" src="{{ "plugins/Sticky/jquery.sticky.js" | absURL}}"></script> | |||||
{{"<!-- Number Counter Script -->" | safeHTML}} | {{"<!-- Number Counter Script -->" | safeHTML}} | ||||
<script type="text/javascript" src="{{ "plugins/count-to/jquery.countTo.js" | absURL}}"></script> | <script type="text/javascript" src="{{ "plugins/count-to/jquery.countTo.js" | absURL}}"></script> | ||||
{{"<!-- wow.min Script -->" | safeHTML}} | {{"<!-- wow.min Script -->" | safeHTML}} | ||||
</script> | </script> | ||||
</body> | </body> | ||||
</html> | |||||
</html> |
{{"<!-- Main Stylesheet -->"|safeHTML}} | {{"<!-- Main Stylesheet -->"|safeHTML}} | ||||
{{ $styles := resources.Get "css/style.css" | minify}} | {{ $styles := resources.Get "css/style.css" | minify}} | ||||
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen"> | <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen"> | ||||
{{ range .Site.Params.custom_css }} | |||||
<link rel="stylesheet" href="{{ . | absURL }}"> | |||||
{{ end }} | |||||
</head> | </head> | ||||
{{"<!-- body start -->" | safeHTML}} | {{"<!-- body start -->" | safeHTML}} | ||||
<body id="body" data-spy="scroll" data-target=".navbar" data-offset="50"></body> | |||||
<body id="body" data-spy="scroll" data-target=".navbar" data-offset="52"></body> |
{{"<!-- Welcome Slider-->" | safeHTML}} | {{"<!-- Welcome Slider-->" | safeHTML}} | ||||
<section class="hero-area" style='background-image: url("{{ .Site.Params.banner.bgImage | absURL }}");'> | <section class="hero-area" style='background-image: url("{{ .Site.Params.banner.bgImage | absURL }}");'> | ||||
<div class="block"> | <div class="block"> | ||||
<div class="logo"> | |||||
<p><img class="logo" src="images/logo.png"></p> | |||||
{{with .Site.Params.banner.icon}} <i class="{{ . }}"></i> {{ end }} video-button | |||||
<div class="video-button"> | |||||
{{with .Site.Params.banner.icon}} <i class="{{ . }}"></i> {{ end }} | |||||
</div> | </div> | ||||
{{with .Site.Params.banner.heading}} <h1>{{ . }}</h1>{{ end }} | {{with .Site.Params.banner.heading}} <h1>{{ . }}</h1>{{ end }} | ||||
{{with .Site.Params.banner.content}} <p>{{ . }}</p> {{ end }} | {{with .Site.Params.banner.content}} <p>{{ . }}</p> {{ end }} |
{{"<!-- main nav -->" | safeHTML}} | {{"<!-- main nav -->" | safeHTML}} | ||||
{{ if .IsHome }} | {{ if .IsHome }} | ||||
<nav class="collapse navbar-collapse navbar-right" role="Navigation"> | <nav class="collapse navbar-collapse navbar-right" role="Navigation"> | ||||
<ul id="nav" class="nav navbar-nav navigation-menu"> | |||||
<li><a data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li> | |||||
{{ range $.Site.Menus.nav }} | |||||
<li><a data-scroll href="#{{ .URL }}">{{ .Name }}</a></li> | |||||
{{ end }} | |||||
</ul> | |||||
</nav> | |||||
<ul id="nav" class="nav navbar-nav navigation-menu"> | |||||
<li><a data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li> | |||||
{{ range $.Site.Menus.nav }} | |||||
<li><a data-scroll href="#{{ .URL }}">{{ .Name }}</a></li> | |||||
{{ end }} | |||||
</ul> | |||||
</nav> | |||||
{{ else }} | {{ else }} | ||||
<nav class="collapse navbar-collapse navbar-right" role="Navigation"> | <nav class="collapse navbar-collapse navbar-right" role="Navigation"> | ||||
<ul id="nav" class="nav navbar-nav navigation-menu"> | |||||
<li><a data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li> | |||||
{{ range $.Site.Menus.nav }} | |||||
<li><a data-scroll href="{{ $.Site.BaseURL }}#{{ .URL }}">{{ .Name }}</a></li> | |||||
{{ end }} | |||||
</ul> | |||||
</nav> | |||||
<ul id="nav" class="nav navbar-nav navigation-menu"> | |||||
<li><a data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li> | |||||
{{ range $.Site.Menus.nav }} | |||||
<li><a data-scroll href="{{ $.Site.BaseURL }}#{{ .URL }}">{{ .Name }}</a></li> | |||||
{{ end }} | |||||
</ul> | |||||
</nav> | |||||
{{ end }} | {{ end }} | ||||
{{"<!-- /main nav -->" | safeHTML}} | {{"<!-- /main nav -->" | safeHTML}} | ||||
<div class="mask"> | <div class="mask"> | ||||
<ul class="list-inline"> | <ul class="list-inline"> | ||||
{{ range .socialIcon }} | {{ range .socialIcon }} | ||||
<li><a href="{{ .url }}"><i class="{{ .icon }}"></i></a></li> | |||||
<li><a href="#"><i class="{{ .icon }}"></i></a></li> | |||||
{{ end }} | {{ end }} | ||||
</ul> | </ul> | ||||
</div> | </div> |
<?php | |||||
// you need to replace your SMTP login details here | |||||
// this script is working for sending mail but not making a proper js call back yet | |||||
use PHPMailer\PHPMailer\PHPMailer; | |||||
use PHPMailer\PHPMailer\Exception; | |||||
require 'phpmailer/Exception.php'; | |||||
require 'phpmailer/PHPMailer.php'; | |||||
require 'phpmailer/SMTP.php'; | |||||
//$mail->SMTPDebug = 2; | |||||
// this should catch a lot of spam bots | |||||
$honeypot = trim($_POST["email"]); | |||||
if(!empty($honeypot)) { | |||||
echo "BAD ROBOT!"; | |||||
exit; | |||||
} | |||||
$msg = ''; | |||||
//Don't run this unless we're handling a form submission | |||||
if (array_key_exists('email', $_POST)) { | |||||
date_default_timezone_set('Etc/UTC'); | |||||
$mail = new PHPMailer; | |||||
//Tell PHPMailer to use SMTP - requires a local mail server | |||||
//Faster and safer than using mail() | |||||
$mail->isSMTP(); // Set mailer to use SMTP | |||||
$mail->Host = 'smtp.server.net'; // Specify main and backup SMTP servers | |||||
$mail->SMTPAuth = true; // Enable SMTP authentication | |||||
$mail->Username = 'mailer@server.net'; // SMTP username | |||||
$mail->Password = 'mailerPASSWord'; // SMTP password | |||||
$mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted | |||||
$mail->Port = 25; // TCP port to connect to | |||||
//Use a fixed address in your own domain as the from address | |||||
//**DO NOT** use the submitter's address here as it will be forgery | |||||
//and will cause your messages to fail SPF checks | |||||
$mail->setFrom('sender@server.net', 'Your Name'); | |||||
//Send the message to yourself, or whoever should receive contact for submissions | |||||
$mail->addAddress('testsendmail@greenant.net', 'Your Name'); | |||||
//Put the submitter's address in a reply-to header | |||||
//This will fail if the address provided is invalid, | |||||
//in which case we should ignore the whole request | |||||
if ($mail->addReplyTo($_POST['email_real'], $_POST['name'])) { | |||||
$mail->Subject = 'PHPMailer contact form'; | |||||
//Keep it simple - don't use HTML | |||||
$mail->isHTML(false); | |||||
//Build a simple message body | |||||
$mail->Body = <<<EOT | |||||
Email: {$_POST['email_real']} | |||||
Name: {$_POST['name']} | |||||
Message: {$_POST['message']} | |||||
EOT; | |||||
//Send the message, check for errors | |||||
if (!$mail->send()) { | |||||
//The reason for failing to send will be in $mail->ErrorInfo | |||||
//but you shouldn't display errors to users - process the error, log it on your server. | |||||
$msg = 'Sorry, something went wrong. Please try again later.'; | |||||
} else { | |||||
$msg = 'sent'; | |||||
} | |||||
} else { | |||||
$msg = 'Invalid email address, message ignored.'; | |||||
} | |||||
echo $msg; | |||||
return $msg; | |||||
//exit; | |||||
} | |||||
?> |
<?php | |||||
/** | |||||
* PHPMailer Exception class. | |||||
* PHP Version 5.5. | |||||
* | |||||
* @see https://github.com/PHPMailer/PHPMailer/ The PHPMailer GitHub project | |||||
* | |||||
* @author Marcus Bointon (Synchro/coolbru) <phpmailer@synchromedia.co.uk> | |||||
* @author Jim Jagielski (jimjag) <jimjag@gmail.com> | |||||
* @author Andy Prevost (codeworxtech) <codeworxtech@users.sourceforge.net> | |||||
* @author Brent R. Matzelle (original founder) | |||||
* @copyright 2012 - 2017 Marcus Bointon | |||||
* @copyright 2010 - 2012 Jim Jagielski | |||||
* @copyright 2004 - 2009 Andy Prevost | |||||
* @license http://www.gnu.org/copyleft/lesser.html GNU Lesser General Public License | |||||
* @note This program is distributed in the hope that it will be useful - WITHOUT | |||||
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or | |||||
* FITNESS FOR A PARTICULAR PURPOSE. | |||||
*/ | |||||
namespace PHPMailer\PHPMailer; | |||||
/** | |||||
* PHPMailer exception handler. | |||||
* | |||||
* @author Marcus Bointon <phpmailer@synchromedia.co.uk> | |||||
*/ | |||||
class Exception extends \Exception | |||||
{ | |||||
/** | |||||
* Prettify error message output. | |||||
* | |||||
* @return string | |||||
*/ | |||||
public function errorMessage() | |||||
{ | |||||
return '<strong>' . htmlspecialchars($this->getMessage()) . "</strong><br />\n"; | |||||
} | |||||
} | |||||
// Sticky Plugin v1.0.3 for jQuery | |||||
// ============= | |||||
// Author: Anthony Garand | |||||
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) | |||||
// Improvements by Leonardo C. Daronco (daronco) | |||||
// Created: 02/14/2011 | |||||
// Date: 07/20/2015 | |||||
// Website: http://stickyjs.com/ | |||||
// Description: Makes an element on the page stick on the screen as you scroll | |||||
// It will only set the 'top' and 'position' of your element, you | |||||
// might need to adjust the width in some cases. | |||||
(function (factory) { | |||||
if (typeof define === 'function' && define.amd) { | |||||
// AMD. Register as an anonymous module. | |||||
define(['jquery'], factory); | |||||
} else if (typeof module === 'object' && module.exports) { | |||||
// Node/CommonJS | |||||
module.exports = factory(require('jquery')); | |||||
} else { | |||||
// Browser globals | |||||
factory(jQuery); | |||||
} | |||||
}(function ($) { | |||||
var slice = Array.prototype.slice; // save ref to original slice() | |||||
var splice = Array.prototype.splice; // save ref to original slice() | |||||
var defaults = { | |||||
topSpacing: 0, | |||||
bottomSpacing: 0, | |||||
className: 'is-sticky', | |||||
wrapperClassName: 'sticky-wrapper', | |||||
center: false, | |||||
getWidthFrom: '', | |||||
widthFromWrapper: true, // works only when .getWidthFrom is empty | |||||
responsiveWidth: false | |||||
}, | |||||
$window = $(window), | |||||
$document = $(document), | |||||
sticked = [], | |||||
windowHeight = $window.height(), | |||||
scroller = function() { | |||||
var scrollTop = $window.scrollTop(), | |||||
documentHeight = $document.height(), | |||||
dwh = documentHeight - windowHeight, | |||||
extra = (scrollTop > dwh) ? dwh - scrollTop : 0; | |||||
for (var i = 0, l = sticked.length; i < l; i++) { | |||||
var s = sticked[i], | |||||
elementTop = s.stickyWrapper.offset().top, | |||||
etse = elementTop - s.topSpacing - extra; | |||||
//update height in case of dynamic content | |||||
s.stickyWrapper.css('height', s.stickyElement.outerHeight()); | |||||
if (scrollTop <= etse) { | |||||
if (s.currentTop !== null) { | |||||
s.stickyElement | |||||
.css({ | |||||
'width': '', | |||||
'position': '', | |||||
'top': '' | |||||
}); | |||||
s.stickyElement.parent().removeClass(s.className); | |||||
s.stickyElement.trigger('sticky-end', [s]); | |||||
s.currentTop = null; | |||||
} | |||||
} | |||||
else { | |||||
var newTop = documentHeight - s.stickyElement.outerHeight() | |||||
- s.topSpacing - s.bottomSpacing - scrollTop - extra; | |||||
if (newTop < 0) { | |||||
newTop = newTop + s.topSpacing; | |||||
} else { | |||||
newTop = s.topSpacing; | |||||
} | |||||
if (s.currentTop !== newTop) { | |||||
var newWidth; | |||||
if (s.getWidthFrom) { | |||||
newWidth = $(s.getWidthFrom).width() || null; | |||||
} else if (s.widthFromWrapper) { | |||||
newWidth = s.stickyWrapper.width(); | |||||
} | |||||
if (newWidth == null) { | |||||
newWidth = s.stickyElement.width(); | |||||
} | |||||
s.stickyElement | |||||
.css('width', newWidth) | |||||
.css('position', 'fixed') | |||||
.css('top', newTop); | |||||
s.stickyElement.parent().addClass(s.className); | |||||
if (s.currentTop === null) { | |||||
s.stickyElement.trigger('sticky-start', [s]); | |||||
} else { | |||||
// sticky is started but it have to be repositioned | |||||
s.stickyElement.trigger('sticky-update', [s]); | |||||
} | |||||
if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) { | |||||
// just reached bottom || just started to stick but bottom is already reached | |||||
s.stickyElement.trigger('sticky-bottom-reached', [s]); | |||||
} else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) { | |||||
// sticky is started && sticked at topSpacing && overflowing from top just finished | |||||
s.stickyElement.trigger('sticky-bottom-unreached', [s]); | |||||
} | |||||
s.currentTop = newTop; | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
resizer = function() { | |||||
windowHeight = $window.height(); | |||||
for (var i = 0, l = sticked.length; i < l; i++) { | |||||
var s = sticked[i]; | |||||
var newWidth = null; | |||||
if (s.getWidthFrom) { | |||||
if (s.responsiveWidth) { | |||||
newWidth = $(s.getWidthFrom).width(); | |||||
} | |||||
} else if(s.widthFromWrapper) { | |||||
newWidth = s.stickyWrapper.width(); | |||||
} | |||||
if (newWidth != null) { | |||||
s.stickyElement.css('width', newWidth); | |||||
} | |||||
} | |||||
}, | |||||
methods = { | |||||
init: function(options) { | |||||
var o = $.extend({}, defaults, options); | |||||
return this.each(function() { | |||||
var stickyElement = $(this); | |||||
var stickyId = stickyElement.attr('id'); | |||||
var stickyHeight = stickyElement.outerHeight(); | |||||
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName; | |||||
var wrapper = $('<div></div>') | |||||
.attr('id', wrapperId) | |||||
.addClass(o.wrapperClassName); | |||||
stickyElement.wrapAll(wrapper); | |||||
var stickyWrapper = stickyElement.parent(); | |||||
if (o.center) { | |||||
stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"}); | |||||
} | |||||
if (stickyElement.css("float") === "right") { | |||||
stickyElement.css({"float":"none"}).parent().css({"float":"right"}); | |||||
} | |||||
stickyWrapper.css('height', stickyHeight); | |||||
o.stickyElement = stickyElement; | |||||
o.stickyWrapper = stickyWrapper; | |||||
o.currentTop = null; | |||||
sticked.push(o); | |||||
}); | |||||
}, | |||||
update: scroller, | |||||
unstick: function(options) { | |||||
return this.each(function() { | |||||
var that = this; | |||||
var unstickyElement = $(that); | |||||
var removeIdx = -1; | |||||
var i = sticked.length; | |||||
while (i-- > 0) { | |||||
if (sticked[i].stickyElement.get(0) === that) { | |||||
splice.call(sticked,i,1); | |||||
removeIdx = i; | |||||
} | |||||
} | |||||
if(removeIdx !== -1) { | |||||
unstickyElement.unwrap(); | |||||
unstickyElement | |||||
.css({ | |||||
'width': '', | |||||
'position': '', | |||||
'top': '', | |||||
'float': '' | |||||
}) | |||||
; | |||||
} | |||||
}); | |||||
} | |||||
}; | |||||
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): | |||||
if (window.addEventListener) { | |||||
window.addEventListener('scroll', scroller, false); | |||||
window.addEventListener('resize', resizer, false); | |||||
} else if (window.attachEvent) { | |||||
window.attachEvent('onscroll', scroller); | |||||
window.attachEvent('onresize', resizer); | |||||
} | |||||
$.fn.sticky = function(method) { | |||||
if (methods[method]) { | |||||
return methods[method].apply(this, slice.call(arguments, 1)); | |||||
} else if (typeof method === 'object' || !method ) { | |||||
return methods.init.apply( this, arguments ); | |||||
} else { | |||||
$.error('Method ' + method + ' does not exist on jQuery.sticky'); | |||||
} | |||||
}; | |||||
$.fn.unstick = function(method) { | |||||
if (methods[method]) { | |||||
return methods[method].apply(this, slice.call(arguments, 1)); | |||||
} else if (typeof method === 'object' || !method ) { | |||||
return methods.unstick.apply( this, arguments ); | |||||
} else { | |||||
$.error('Method ' + method + ' does not exist on jQuery.sticky'); | |||||
} | |||||
}; | |||||
$(function() { | |||||
setTimeout(scroller, 0); | |||||
}); | |||||
})); |
/*! | |||||
* smooth-scroll v12.1.5: Animate scrolling to anchor links | |||||
* (c) 2017 Chris Ferdinandi | |||||
* MIT License | |||||
* http://github.com/cferdinandi/smooth-scroll | |||||
*/ | |||||
(function (root, factory) { | |||||
if ( typeof define === 'function' && define.amd ) { | |||||
define([], (function () { | |||||
return factory(root); | |||||
})); | |||||
} else if ( typeof exports === 'object' ) { | |||||
module.exports = factory(root); | |||||
} else { | |||||
root.SmoothScroll = factory(root); | |||||
} | |||||
})(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this, (function (window) { | |||||
'use strict'; | |||||
// | |||||
// Feature Test | |||||
// | |||||
var supports = | |||||
'querySelector' in document && | |||||
'addEventListener' in window && | |||||
'requestAnimationFrame' in window && | |||||
'closest' in window.Element.prototype; | |||||
// | |||||
// Default settings | |||||
// | |||||
var defaults = { | |||||
// Selectors | |||||
ignore: '[data-scroll-ignore]', | |||||
header: null, | |||||
// Speed & Easing | |||||
speed: 500, | |||||
offset: 0, | |||||
easing: 'easeInOutCubic', | |||||
customEasing: null, | |||||
// Callback API | |||||
before: function () {}, | |||||
after: function () {} | |||||
}; | |||||
// | |||||
// Utility Methods | |||||
// | |||||
/** | |||||
* Merge two or more objects. Returns a new object. | |||||
* @param {Object} objects The objects to merge together | |||||
* @returns {Object} Merged values of defaults and options | |||||
*/ | |||||
var extend = function () { | |||||
// Variables | |||||
var extended = {}; | |||||
var deep = false; | |||||
var i = 0; | |||||
var length = arguments.length; | |||||
// Merge the object into the extended object | |||||
var merge = function (obj) { | |||||
for (var prop in obj) { | |||||
if (obj.hasOwnProperty(prop)) { | |||||
extended[prop] = obj[prop]; | |||||
} | |||||
} | |||||
}; | |||||
// Loop through each object and conduct a merge | |||||
for ( ; i < length; i++ ) { | |||||
var obj = arguments[i]; | |||||
merge(obj); | |||||
} | |||||
return extended; | |||||
}; | |||||
/** | |||||
* Get the height of an element. | |||||
* @param {Node} elem The element to get the height of | |||||
* @return {Number} The element's height in pixels | |||||
*/ | |||||
var getHeight = function (elem) { | |||||
return parseInt(window.getComputedStyle(elem).height, 10); | |||||
}; | |||||
/** | |||||
* Escape special characters for use with querySelector | |||||
* @param {String} id The anchor ID to escape | |||||
* @author Mathias Bynens | |||||
* @link https://github.com/mathiasbynens/CSS.escape | |||||
*/ | |||||
var escapeCharacters = function (id) { | |||||
// Remove leading hash | |||||
if (id.charAt(0) === '#') { | |||||
id = id.substr(1); | |||||
} | |||||
var string = String(id); | |||||
var length = string.length; | |||||
var index = -1; | |||||
var codeUnit; | |||||
var result = ''; | |||||
var firstCodeUnit = string.charCodeAt(0); | |||||
while (++index < length) { | |||||
codeUnit = string.charCodeAt(index); | |||||
// Note: there’s no need to special-case astral symbols, surrogate | |||||
// pairs, or lone surrogates. | |||||
// If the character is NULL (U+0000), then throw an | |||||
// `InvalidCharacterError` exception and terminate these steps. | |||||
if (codeUnit === 0x0000) { | |||||
throw new InvalidCharacterError( | |||||
'Invalid character: the input contains U+0000.' | |||||
); | |||||
} | |||||
if ( | |||||
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is | |||||
// U+007F, […] | |||||
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F || | |||||
// If the character is the first character and is in the range [0-9] | |||||
// (U+0030 to U+0039), […] | |||||
(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) || | |||||
// If the character is the second character and is in the range [0-9] | |||||
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […] | |||||
( | |||||
index === 1 && | |||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 && | |||||
firstCodeUnit === 0x002D | |||||
) | |||||
) { | |||||
// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point | |||||
result += '\\' + codeUnit.toString(16) + ' '; | |||||
continue; | |||||
} | |||||
// If the character is not handled by one of the above rules and is | |||||
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or | |||||
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to | |||||
// U+005A), or [a-z] (U+0061 to U+007A), […] | |||||
if ( | |||||
codeUnit >= 0x0080 || | |||||
codeUnit === 0x002D || | |||||
codeUnit === 0x005F || | |||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 || | |||||
codeUnit >= 0x0041 && codeUnit <= 0x005A || | |||||
codeUnit >= 0x0061 && codeUnit <= 0x007A | |||||
) { | |||||
// the character itself | |||||
result += string.charAt(index); | |||||
continue; | |||||
} | |||||
// Otherwise, the escaped character. | |||||
// http://dev.w3.org/csswg/cssom/#escape-a-character | |||||
result += '\\' + string.charAt(index); | |||||
} | |||||
return '#' + result; | |||||
}; | |||||
/** | |||||
* Calculate the easing pattern | |||||
* @link https://gist.github.com/gre/1650294 | |||||
* @param {String} type Easing pattern | |||||
* @param {Number} time Time animation should take to complete | |||||
* @returns {Number} | |||||
*/ | |||||
var easingPattern = function (settings, time) { | |||||
var pattern; | |||||
// Default Easing Patterns | |||||
if (settings.easing === 'easeInQuad') pattern = time * time; // accelerating from zero velocity | |||||
if (settings.easing === 'easeOutQuad') pattern = time * (2 - time); // decelerating to zero velocity | |||||
if (settings.easing === 'easeInOutQuad') pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration | |||||
if (settings.easing === 'easeInCubic') pattern = time * time * time; // accelerating from zero velocity | |||||
if (settings.easing === 'easeOutCubic') pattern = (--time) * time * time + 1; // decelerating to zero velocity | |||||
if (settings.easing === 'easeInOutCubic') pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration | |||||
if (settings.easing === 'easeInQuart') pattern = time * time * time * time; // accelerating from zero velocity | |||||
if (settings.easing === 'easeOutQuart') pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity | |||||
if (settings.easing === 'easeInOutQuart') pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration | |||||
if (settings.easing === 'easeInQuint') pattern = time * time * time * time * time; // accelerating from zero velocity | |||||
if (settings.easing === 'easeOutQuint') pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity | |||||
if (settings.easing === 'easeInOutQuint') pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration | |||||
// Custom Easing Patterns | |||||
if (!!settings.customEasing) pattern = settings.customEasing(time); | |||||
return pattern || time; // no easing, no acceleration | |||||
}; | |||||
/** | |||||
* Determine the document's height | |||||
* @returns {Number} | |||||
*/ | |||||
var getDocumentHeight = function () { | |||||
return Math.max( | |||||
document.body.scrollHeight, document.documentElement.scrollHeight, | |||||
document.body.offsetHeight, document.documentElement.offsetHeight, | |||||
document.body.clientHeight, document.documentElement.clientHeight | |||||
); | |||||
}; | |||||
/** | |||||
* Calculate how far to scroll | |||||
* @param {Element} anchor The anchor element to scroll to | |||||
* @param {Number} headerHeight Height of a fixed header, if any | |||||
* @param {Number} offset Number of pixels by which to offset scroll | |||||
* @returns {Number} | |||||
*/ | |||||
var getEndLocation = function (anchor, headerHeight, offset) { | |||||
var location = 0; | |||||
if (anchor.offsetParent) { | |||||
do { | |||||
location += anchor.offsetTop; | |||||
anchor = anchor.offsetParent; | |||||
} while (anchor); | |||||
} | |||||
location = Math.max(location - headerHeight - offset, 0); | |||||
return location; | |||||
}; | |||||
/** | |||||
* Get the height of the fixed header | |||||
* @param {Node} header The header | |||||
* @return {Number} The height of the header | |||||
*/ | |||||
var getHeaderHeight = function (header) { | |||||
return !header ? 0 : (getHeight(header) + header.offsetTop); | |||||
}; | |||||
/** | |||||
* Bring the anchored element into focus | |||||
* @param {Node} anchor The anchor element | |||||
* @param {Number} endLocation The end location to scroll to | |||||
* @param {Boolean} isNum If true, scroll is to a position rather than an element | |||||
*/ | |||||
var adjustFocus = function (anchor, endLocation, isNum) { | |||||
// Don't run if scrolling to a number on the page | |||||
if (isNum) return; | |||||
// Otherwise, bring anchor element into focus | |||||
anchor.focus(); | |||||
if (document.activeElement.id !== anchor.id) { | |||||
anchor.setAttribute('tabindex', '-1'); | |||||
anchor.focus(); | |||||
anchor.style.outline = 'none'; | |||||
} | |||||
window.scrollTo(0 , endLocation); | |||||
}; | |||||
/** | |||||
* Check to see if user prefers reduced motion | |||||
* @param {Object} settings Script settings | |||||
*/ | |||||
var reduceMotion = function (settings) { | |||||
if ('matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches) { | |||||
return true; | |||||
} | |||||
return false; | |||||
}; | |||||
// | |||||
// SmoothScroll Constructor | |||||
// | |||||
var SmoothScroll = function (selector, options) { | |||||
// | |||||
// Variables | |||||
// | |||||
var smoothScroll = {}; // Object for public APIs | |||||
var settings, anchor, toggle, fixedHeader, headerHeight, eventTimeout, animationInterval; | |||||
// | |||||
// Methods | |||||
// | |||||
/** | |||||
* Cancel a scroll-in-progress | |||||
*/ | |||||
smoothScroll.cancelScroll = function () { | |||||
// clearInterval(animationInterval); | |||||
cancelAnimationFrame(animationInterval); | |||||
}; | |||||
/** | |||||
* Start/stop the scrolling animation | |||||
* @param {Node|Number} anchor The element or position to scroll to | |||||
* @param {Element} toggle The element that toggled the scroll event | |||||
* @param {Object} options | |||||
*/ | |||||
smoothScroll.animateScroll = function (anchor, toggle, options) { | |||||
// Local settings | |||||
var animateSettings = extend(settings || defaults, options || {}); // Merge user options with defaults | |||||
// Selectors and variables | |||||
var isNum = Object.prototype.toString.call(anchor) === '[object Number]' ? true : false; | |||||
var anchorElem = isNum || !anchor.tagName ? null : anchor; | |||||
if (!isNum && !anchorElem) return; | |||||
var startLocation = window.pageYOffset; // Current location on the page | |||||
if (animateSettings.header && !fixedHeader) { | |||||
// Get the fixed header if not already set | |||||
fixedHeader = document.querySelector( animateSettings.header ); | |||||
} | |||||
if (!headerHeight) { | |||||
// Get the height of a fixed header if one exists and not already set | |||||
headerHeight = getHeaderHeight(fixedHeader); | |||||
} | |||||
var endLocation = isNum ? anchor : getEndLocation(anchorElem, headerHeight, parseInt((typeof animateSettings.offset === 'function' ? animateSettings.offset() : animateSettings.offset), 10)); // Location to scroll to | |||||
var distance = endLocation - startLocation; // distance to travel | |||||
var documentHeight = getDocumentHeight(); | |||||
var timeLapsed = 0; | |||||
var start, percentage, position; | |||||
/** | |||||
* Stop the scroll animation when it reaches its target (or the bottom/top of page) | |||||
* @param {Number} position Current position on the page | |||||
* @param {Number} endLocation Scroll to location | |||||
* @param {Number} animationInterval How much to scroll on this loop | |||||
*/ | |||||
var stopAnimateScroll = function (position, endLocation) { | |||||
// Get the current location | |||||
var currentLocation = window.pageYOffset; | |||||
// Check if the end location has been reached yet (or we've hit the end of the document) | |||||
if ( position == endLocation || currentLocation == endLocation || ((startLocation < endLocation && window.innerHeight + currentLocation) >= documentHeight )) { | |||||
// Clear the animation timer | |||||
smoothScroll.cancelScroll(); | |||||
// Bring the anchored element into focus | |||||
adjustFocus(anchor, endLocation, isNum); | |||||
// Run callback after animation complete | |||||
animateSettings.after(anchor, toggle); | |||||
// Reset start | |||||
start = null; | |||||
return true; | |||||
} | |||||
}; | |||||
/** | |||||
* Loop scrolling animation | |||||
*/ | |||||
var loopAnimateScroll = function (timestamp) { | |||||
if (!start) { start = timestamp; } | |||||
timeLapsed += timestamp - start; | |||||
percentage = (timeLapsed / parseInt(animateSettings.speed, 10)); | |||||
percentage = (percentage > 1) ? 1 : percentage; | |||||
position = startLocation + (distance * easingPattern(animateSettings, percentage)); | |||||
window.scrollTo(0, Math.floor(position)); | |||||
if (!stopAnimateScroll(position, endLocation)) { | |||||
window.requestAnimationFrame(loopAnimateScroll); | |||||
start = timestamp; | |||||
} | |||||
}; | |||||
/** | |||||
* Reset position to fix weird iOS bug | |||||
* @link https://github.com/cferdinandi/smooth-scroll/issues/45 | |||||
*/ | |||||
if (window.pageYOffset === 0) { | |||||
window.scrollTo( 0, 0 ); | |||||
} | |||||
// Run callback before animation starts | |||||
animateSettings.before(anchor, toggle); | |||||
// Start scrolling animation | |||||
smoothScroll.cancelScroll(); | |||||
window.requestAnimationFrame(loopAnimateScroll); | |||||
}; | |||||
/** | |||||
* Handle has change event | |||||
*/ | |||||
var hashChangeHandler = function (event) { | |||||
// Only run if there's an anchor element to scroll to | |||||
if (!anchor) return; | |||||
// Reset the anchor element's ID | |||||
anchor.id = anchor.getAttribute('data-scroll-id'); | |||||
// Scroll to the anchored content | |||||
smoothScroll.animateScroll(anchor, toggle); | |||||
// Reset anchor and toggle | |||||
anchor = null; | |||||
toggle = null; | |||||
}; | |||||
/** | |||||
* If smooth scroll element clicked, animate scroll | |||||
*/ | |||||
var clickHandler = function (event) { | |||||
// Don't run if the user prefers reduced motion | |||||
if (reduceMotion(settings)) return; | |||||
// Don't run if right-click or command/control + click | |||||
if (event.button !== 0 || event.metaKey || event.ctrlKey) return; | |||||
// Check if a smooth scroll link was clicked | |||||
toggle = event.target.closest(selector); | |||||
if (!toggle || toggle.tagName.toLowerCase() !== 'a' || event.target.closest(settings.ignore)) return; | |||||
// Only run if link is an anchor and points to the current page | |||||
if (toggle.hostname !== window.location.hostname || toggle.pathname !== window.location.pathname || !/#/.test(toggle.href)) return; | |||||
// Get the sanitized hash | |||||
var hash; | |||||
try { | |||||
hash = escapeCharacters(decodeURIComponent(toggle.hash)); | |||||
} catch(e) { | |||||
hash = escapeCharacters(toggle.hash); | |||||
} | |||||
// If the hash is empty, scroll to the top of the page | |||||
if (hash === '#') { | |||||
// Prevent default link behavior | |||||
event.preventDefault(); | |||||
// Set the anchored element | |||||
anchor = document.body; | |||||
// Save or create the ID as a data attribute and remove it (prevents scroll jump) | |||||
var id = anchor.id ? anchor.id : 'smooth-scroll-top'; | |||||
anchor.setAttribute('data-scroll-id', id); | |||||
anchor.id = ''; | |||||
// If no hash change event will happen, fire manually | |||||
// Otherwise, update the hash | |||||
if (window.location.hash.substring(1) === id) { | |||||
hashChangeHandler(); | |||||
} else { | |||||
window.location.hash = id; | |||||
} | |||||
return; | |||||
} | |||||
// Get the anchored element | |||||
anchor = document.querySelector(hash); | |||||
// If anchored element exists, save the ID as a data attribute and remove it (prevents scroll jump) | |||||
if (!anchor) return; | |||||
anchor.setAttribute('data-scroll-id', anchor.id); | |||||
anchor.id = ''; | |||||
// If no hash change event will happen, fire manually | |||||
if (toggle.hash === window.location.hash) { | |||||
event.preventDefault(); | |||||
hashChangeHandler(); | |||||
} | |||||
}; | |||||
/** | |||||
* On window scroll and resize, only run events at a rate of 15fps for better performance | |||||
*/ | |||||
var resizeThrottler = function (event) { | |||||
if (!eventTimeout) { | |||||
eventTimeout = setTimeout((function() { | |||||
eventTimeout = null; // Reset timeout | |||||
headerHeight = getHeaderHeight(fixedHeader); // Get the height of a fixed header if one exists | |||||
}), 66); | |||||
} | |||||
}; | |||||
/** | |||||
* Destroy the current initialization. | |||||
*/ | |||||
smoothScroll.destroy = function () { | |||||
// If plugin isn't already initialized, stop | |||||
if (!settings) return; | |||||
// Remove event listeners | |||||
document.removeEventListener('click', clickHandler, false); | |||||
window.removeEventListener('resize', resizeThrottler, false); | |||||
// Cancel any scrolls-in-progress | |||||
smoothScroll.cancelScroll(); | |||||
// Reset variables | |||||
settings = null; | |||||
anchor = null; | |||||
toggle = null; | |||||
fixedHeader = null; | |||||
headerHeight = null; | |||||
eventTimeout = null; | |||||
animationInterval = null; | |||||
}; | |||||
/** | |||||
* Initialize Smooth Scroll | |||||
* @param {Object} options User settings | |||||
*/ | |||||
smoothScroll.init = function (options) { | |||||
// feature test | |||||
if (!supports) return; | |||||
// Destroy any existing initializations | |||||
smoothScroll.destroy(); | |||||
// Selectors and variables | |||||
settings = extend(defaults, options || {}); // Merge user options with defaults | |||||
fixedHeader = settings.header ? document.querySelector(settings.header) : null; // Get the fixed header | |||||
headerHeight = getHeaderHeight(fixedHeader); | |||||
// When a toggle is clicked, run the click handler | |||||
document.addEventListener('click', clickHandler, false); | |||||
// Listen for hash changes | |||||
window.addEventListener('hashchange', hashChangeHandler, false); | |||||
// If window is resized and there's a fixed header, recalculate its size | |||||
if (fixedHeader) { | |||||
window.addEventListener('resize', resizeThrottler, false); | |||||
} | |||||
}; | |||||
// | |||||
// Initialize plugin | |||||
// | |||||
smoothScroll.init(options); | |||||
// | |||||
// Public APIs | |||||
// | |||||
return smoothScroll; | |||||
}; | |||||
return SmoothScroll; | |||||
})); |
/*! smooth-scroll v12.1.5 | (c) 2017 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */ | |||||
!(function(e,t){"function"==typeof define&&define.amd?define([],(function(){return t(e)})):"object"==typeof exports?module.exports=t(e):e.SmoothScroll=t(e)})("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,(function(e){"use strict";var t="querySelector"in document&&"addEventListener"in e&&"requestAnimationFrame"in e&&"closest"in e.Element.prototype,n={ignore:"[data-scroll-ignore]",header:null,speed:500,offset:0,easing:"easeInOutCubic",customEasing:null,before:function(){},after:function(){}},o=function(){for(var e={},t=0,n=arguments.length;t<n;t++){var o=arguments[t];!(function(t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(o)}return e},a=function(t){return parseInt(e.getComputedStyle(t).height,10)},r=function(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,a=-1,r="",i=n.charCodeAt(0);++a<o;){if(0===(t=n.charCodeAt(a)))throw new InvalidCharacterError("Invalid character: the input contains U+0000.");t>=1&&t<=31||127==t||0===a&&t>=48&&t<=57||1===a&&t>=48&&t<=57&&45===i?r+="\\"+t.toString(16)+" ":r+=t>=128||45===t||95===t||t>=48&&t<=57||t>=65&&t<=90||t>=97&&t<=122?n.charAt(a):"\\"+n.charAt(a)}return"#"+r},i=function(e,t){var n;return"easeInQuad"===e.easing&&(n=t*t),"easeOutQuad"===e.easing&&(n=t*(2-t)),"easeInOutQuad"===e.easing&&(n=t<.5?2*t*t:(4-2*t)*t-1),"easeInCubic"===e.easing&&(n=t*t*t),"easeOutCubic"===e.easing&&(n=--t*t*t+1),"easeInOutCubic"===e.easing&&(n=t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e.easing&&(n=t*t*t*t),"easeOutQuart"===e.easing&&(n=1- --t*t*t*t),"easeInOutQuart"===e.easing&&(n=t<.5?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e.easing&&(n=t*t*t*t*t),"easeOutQuint"===e.easing&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e.easing&&(n=t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t),e.customEasing&&(n=e.customEasing(t)),n||t},u=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},c=function(e,t,n){var o=0;if(e.offsetParent)do{o+=e.offsetTop,e=e.offsetParent}while(e);return o=Math.max(o-t-n,0)},s=function(e){return e?a(e)+e.offsetTop:0},l=function(t,n,o){o||(t.focus(),document.activeElement.id!==t.id&&(t.setAttribute("tabindex","-1"),t.focus(),t.style.outline="none"),e.scrollTo(0,n))},f=function(t){return!!("matchMedia"in e&&e.matchMedia("(prefers-reduced-motion)").matches)};return function(a,d){var m,h,g,p,v,b,y,S={};S.cancelScroll=function(){cancelAnimationFrame(y)},S.animateScroll=function(t,a,r){var f=o(m||n,r||{}),d="[object Number]"===Object.prototype.toString.call(t),h=d||!t.tagName?null:t;if(d||h){var g=e.pageYOffset;f.header&&!p&&(p=document.querySelector(f.header)),v||(v=s(p));var b,y,E,I=d?t:c(h,v,parseInt("function"==typeof f.offset?f.offset():f.offset,10)),O=I-g,A=u(),C=0,w=function(n,o){var r=e.pageYOffset;if(n==o||r==o||(g<o&&e.innerHeight+r)>=A)return S.cancelScroll(),l(t,o,d),f.after(t,a),b=null,!0},Q=function(t){b||(b=t),C+=t-b,y=C/parseInt(f.speed,10),y=y>1?1:y,E=g+O*i(f,y),e.scrollTo(0,Math.floor(E)),w(E,I)||(e.requestAnimationFrame(Q),b=t)};0===e.pageYOffset&&e.scrollTo(0,0),f.before(t,a),S.cancelScroll(),e.requestAnimationFrame(Q)}};var E=function(e){h&&(h.id=h.getAttribute("data-scroll-id"),S.animateScroll(h,g),h=null,g=null)},I=function(t){if(!f()&&0===t.button&&!t.metaKey&&!t.ctrlKey&&(g=t.target.closest(a))&&"a"===g.tagName.toLowerCase()&&!t.target.closest(m.ignore)&&g.hostname===e.location.hostname&&g.pathname===e.location.pathname&&/#/.test(g.href)){var n;try{n=r(decodeURIComponent(g.hash))}catch(e){n=r(g.hash)}if("#"===n){t.preventDefault(),h=document.body;var o=h.id?h.id:"smooth-scroll-top";return h.setAttribute("data-scroll-id",o),h.id="",void(e.location.hash.substring(1)===o?E():e.location.hash=o)}h=document.querySelector(n),h&&(h.setAttribute("data-scroll-id",h.id),h.id="",g.hash===e.location.hash&&(t.preventDefault(),E()))}},O=function(e){b||(b=setTimeout((function(){b=null,v=s(p)}),66))};return S.destroy=function(){m&&(document.removeEventListener("click",I,!1),e.removeEventListener("resize",O,!1),S.cancelScroll(),m=null,h=null,g=null,p=null,v=null,b=null,y=null)},S.init=function(a){t&&(S.destroy(),m=o(n,a||{}),p=m.header?document.querySelector(m.header):null,v=s(p),document.addEventListener("click",I,!1),e.addEventListener("hashchange",E,!1),p&&e.addEventListener("resize",O,!1))},S.init(d),S}})); |