Initial commit
This commit is contained in:
+3623
File diff suppressed because it is too large
Load Diff
+383
@@ -0,0 +1,383 @@
|
||||
body {
|
||||
font-family: Arial, Ubuntu, Helvetica, sans-serif;
|
||||
color: #333;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: #d64513;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Century Gothic", Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Century Gothic", Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-size: 26px;
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 small {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 small {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.dl-horizontal dt {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.dl-horizontal dd {
|
||||
margin-left: 220px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 5px 0px 5px;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
font-family: "Century Gothic", Arial, sans-serif;
|
||||
background: #000 url(img/bg-menu.png) repeat-x left top; /*#377fa0;*/
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 1px #000;
|
||||
/*background-image: linear-gradient(to top, rgb(62, 86, 112) 0%, rgb(69, 94, 122) 100%)*/;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > .dropdown > a .caret,
|
||||
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.navbar > .container .navbar-brand {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.navbar .nav > li > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand,
|
||||
.navbar-default .navbar-brand:hover,
|
||||
.navbar-default .navbar-brand:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .nav > .active {
|
||||
}
|
||||
|
||||
.navbar .nav > .active > a,
|
||||
.navbar .nav > .active > a:hover,
|
||||
.navbar .nav > .active > a:focus,
|
||||
.navbar .nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
||||
background: url(img/bg-menu-selected.png) no-repeat center bottom; /*#a5360f;*/
|
||||
background: #BC451B;
|
||||
color: #fff;
|
||||
/*height: 65px;*/
|
||||
}
|
||||
|
||||
.navbar .nav > li > a:focus,
|
||||
.navbar .nav > li > a:hover,
|
||||
.navbar .nav li.dropdown.open > .dropdown-toggle {
|
||||
background: rgba(188, 69, 27, 0.6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a,
|
||||
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
|
||||
background: #d64513;
|
||||
}
|
||||
|
||||
.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
padding: 10px 20px;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.navbar .addthis_toolbox {
|
||||
margin-top: 9px;
|
||||
float: right;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar .followus {
|
||||
display: none;
|
||||
float: right;
|
||||
color: white;
|
||||
margin-top: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 10px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #4d4d4d;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panel-heading a {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
.abstract {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
border: none;
|
||||
background: #d64513;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
|
||||
background: #a5360f;
|
||||
}
|
||||
|
||||
.socialbuttons,
|
||||
.addthis_toolbox {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.row-fluid .socialbuttons {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.navbar .socialbuttons {
|
||||
float: right;
|
||||
height: 20px;
|
||||
width: 220px;
|
||||
white-space: nowrap;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar {
|
||||
background: #474747;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar {
|
||||
background: #a5360f;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar:hover, .navbar .btn-navbar:focus, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
|
||||
background: #474747;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
/* woodpaul on board */
|
||||
.hero-unit {
|
||||
text-align: center;
|
||||
margin: 0 0 50px;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 0px rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.hero-unit h1 small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-unit .btn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.socialbuttons {
|
||||
text-align: center;
|
||||
margin: 0 0 -15px;
|
||||
}
|
||||
|
||||
.socialbuttons iframe {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.socialbuttons .addthis_toolbox {
|
||||
width: 420px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.socialbuttons .share-github {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.socialbuttons .addthis_button_facebook_like {
|
||||
margin: 0 30px 0 0;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: transparent;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
/* table */
|
||||
.table thead th {
|
||||
font-family: "Century Gothic", Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
background-color: #bc451b;
|
||||
color: #fff;
|
||||
vertical-align: middle!important;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-collapse {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.navbar .followus {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body {
|
||||
padding-top: 110px;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
background: #000 url(img/bg-menu.png) repeat-x left top; /*#377fa0;*/
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle,
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
background: #d64513;
|
||||
color: #fff;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar-fixed-top > .container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar > .container .navbar-brand {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar .socialbuttons {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.navbar .addthis_toolbox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
+777
@@ -0,0 +1,777 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap TouchSpin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A mobile and touch friendly input spinner component for Bootstrap 3.">
|
||||
<meta name="author" content="István Ujj-Mészáros">
|
||||
|
||||
<meta itemprop="name" content="Bootstrap Touchspin">
|
||||
<meta itemprop="description" content="A mobile and touch friendly input spinner component for Bootstrap 3.">
|
||||
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="../src/jquery.bootstrap-touchspin.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" media="all">
|
||||
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
|
||||
<script src="../src/jquery.bootstrap-touchspin.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="hero-unit">
|
||||
|
||||
<h1>Bootstrap TouchSpin</h1>
|
||||
|
||||
<a id="link-ghp" class="btn btn-primary" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin"><span class="glyphicon glyphicon-link"></span> Github project page</a>
|
||||
<a id="link-ghdl" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin/archive/master.zip"
|
||||
class="btn btn-primary" title="download"><span class="glyphicon glyphicon-download"></span> Download</a>
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
A mobile and touch friendly input spinner component for Bootstrap 3.<br>
|
||||
It supports the mousewheel and the up/down keys.
|
||||
</p>
|
||||
|
||||
<h2>Examples</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo0">Example using data attributes:</label> <input
|
||||
id="demo0"
|
||||
type="text"
|
||||
value="40"
|
||||
name="demo0"
|
||||
data-bts-min="0"
|
||||
data-bts-max="100"
|
||||
data-bts-init-val=""
|
||||
data-bts-step="1"
|
||||
data-bts-decimal="0"
|
||||
data-bts-step-interval="100"
|
||||
data-bts-force-step-divisibility="round"
|
||||
data-bts-step-interval-delay="500"
|
||||
data-bts-prefix=""
|
||||
data-bts-postfix=""
|
||||
data-bts-prefix-extra-class=""
|
||||
data-bts-postfix-extra-class=""
|
||||
data-bts-booster="true"
|
||||
data-bts-boostat="10"
|
||||
data-bts-max-boosted-step="false"
|
||||
data-bts-mousewheel="true"
|
||||
data-bts-button-down-class="btn btn-default"
|
||||
data-bts-button-up-class="btn btn-default"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo0"
|
||||
type="text"
|
||||
value="55"
|
||||
name="demo0"
|
||||
data-bts-min="0"
|
||||
data-bts-max="100"
|
||||
data-bts-init-val=""
|
||||
data-bts-step="1"
|
||||
data-bts-decimal="0"
|
||||
data-bts-step-interval="100"
|
||||
data-bts-force-step-divisibility="round"
|
||||
data-bts-step-interval-delay="500"
|
||||
data-bts-prefix=""
|
||||
data-bts-postfix=""
|
||||
data-bts-prefix-extra-class=""
|
||||
data-bts-postfix-extra-class=""
|
||||
data-bts-booster="true"
|
||||
data-bts-boostat="10"
|
||||
data-bts-max-boosted-step="false"
|
||||
data-bts-mousewheel="true"
|
||||
data-bts-button-down-class="btn btn-default"
|
||||
data-bts-button-up-class="btn btn-default"
|
||||
/>
|
||||
<script>
|
||||
$("input[name='demo0']").TouchSpin({
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo0']").TouchSpin({
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo_vertical">Vertical button alignment:</label> <input id="demo3" type="text" value="" name="demo_vertical">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo_vertical" type="text" value="" name="demo_vertical">
|
||||
<script>
|
||||
$("input[name='demo_vertical']").TouchSpin({
|
||||
verticalbuttons: true
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo_vertical']").TouchSpin({
|
||||
verticalbuttons: true
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo_vertical2">Vertical buttons with custom icons:</label> <input id="demo3" type="text" value="" name="demo_vertical2">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo_vertical2" type="text" value="" name="demo_vertical2">
|
||||
<script>
|
||||
$("input[name='demo_vertical2']").TouchSpin({
|
||||
verticalbuttons: true,
|
||||
verticalupclass: 'glyphicon glyphicon-plus',
|
||||
verticaldownclass: 'glyphicon glyphicon-minus'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo_vertical2']").TouchSpin({
|
||||
verticalbuttons: true,
|
||||
verticalupclass: 'glyphicon glyphicon-plus',
|
||||
verticaldownclass: 'glyphicon glyphicon-minus'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo1">Example with postfix (large):</label> <input id="demo1" type="text" value="55" name="demo1">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo1" type="text" value="55" name="demo1">
|
||||
<script>
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: '%'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: '%'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="demo2" class="col-md-5 control-label">With prefix</label> <input id="demo2" type="text"
|
||||
value="0" name="demo2"
|
||||
class="col-md-7 form-control">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="demo2" class="col-md-5 control-label">Example:</label> <input id="demo2" type="text" value="0" name="demo2" class="col-md-7 form-control">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1000000000,
|
||||
max: 1000000000,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 10000000,
|
||||
prefix: '$'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
<script>
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1000000000,
|
||||
max: 1000000000,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 10000000,
|
||||
prefix: '$'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo3">Init with empty value:</label> <input id="demo3" type="text" value="" name="demo3">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo3" type="text" value="" name="demo3">
|
||||
<script>
|
||||
$("input[name='demo3']").TouchSpin();
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo3']").TouchSpin();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<p>
|
||||
The <code>initval</code> setting is only applied when no explicit value is set on the input with the
|
||||
<code>value</code> attribute.
|
||||
</p>
|
||||
|
||||
<div class="col-md-5">
|
||||
<label for="demo3_21">Value attribute is not set
|
||||
<small>(applying settings.initval)</small>
|
||||
:</label> <input id="demo3_21" type="text" value="" name="demo3_21">
|
||||
<label for="demo3_22">Value is set explicitly to 33
|
||||
<small>(skipping settings.initval)</small>
|
||||
:</label> <input id="demo3_22" type="text" value="33" name="demo3_22">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo3_21" type="text" value="" name="demo3_21">
|
||||
<script>
|
||||
$("input[name='demo3_21']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
<input id="demo3_22" type="text" value="33" name="demo3_22">
|
||||
<script>
|
||||
$("input[name='demo3_22']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo3_21']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
$("input[name='demo3_22']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Size of the whole controller can be set with applying <code>input-sm</code> or <code>input-lg</code> class on the
|
||||
input, or by applying the plugin on an input inside an <code>input-group</code> with the proper size class(<code>input-group-sm</code>
|
||||
or <code>input-group-lg</code>).
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo4">Button postfix (small):</label> <input id="demo4" type="text" value="" name="demo4"
|
||||
class="input-sm">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo4" type="text" value="" name="demo4" class="input-sm">
|
||||
<script>
|
||||
$("input[name='demo4']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo4']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo4">Button postfix (large):</label>
|
||||
|
||||
<div class="input-group input-group-lg">
|
||||
<input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<div class="input-group input-group-lg">
|
||||
<input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg">
|
||||
</div>
|
||||
<script>
|
||||
$("input[name='demo4_2']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo4_2']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
|
||||
<label for="demo5">Button group:</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input id="demo5" type="text" class="form-control" name="demo5" value="50">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<div class="input-group">
|
||||
<input id="demo5" type="text" class="form-control" name="demo5" value="50">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo6">Change button class:</label> <input id="demo6" type="text" value="50" name="demo6">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
$("input[name='demo6']").TouchSpin({
|
||||
buttondown_class: "btn btn-link",
|
||||
buttonup_class: "btn btn-link"
|
||||
});
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo6']").TouchSpin({
|
||||
buttondown_class: "btn btn-link",
|
||||
buttonup_class: "btn btn-link"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo7">Blank/Non-Number replaced:</label> <input id="demo7" type="text" value="50" name="demo7">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
$("input[name='demo7']").TouchSpin({
|
||||
replacementval: 10
|
||||
});
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo7']").TouchSpin({
|
||||
replacementval: 10
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Event demo</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input id="demo7" type="text" value="50" name="demo7">
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<pre id="demo7textarea" style="height:200px;overflow:auto;"></pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var i = $("input[name='demo7']"),
|
||||
demoarea = $("#demo7textarea"),
|
||||
text = "";
|
||||
|
||||
function writeLine(line) {
|
||||
text += line + "\n";
|
||||
demoarea.text(text);
|
||||
demoarea.scrollTop(
|
||||
demoarea[0].scrollHeight - demoarea.height()
|
||||
);
|
||||
}
|
||||
|
||||
i.TouchSpin({});
|
||||
i.on("touchspin.on.startspin", function () {
|
||||
writeLine("touchspin.on.startspin");
|
||||
});
|
||||
i.on("touchspin.on.startupspin", function () {
|
||||
writeLine("touchspin.on.startupspin");
|
||||
});
|
||||
i.on("touchspin.on.startdownspin", function () {
|
||||
writeLine("touchspin.on.startdownspin");
|
||||
});
|
||||
i.on("touchspin.on.stopspin", function () {
|
||||
writeLine("touchspin.on.stopspin");
|
||||
});
|
||||
i.on("touchspin.on.stopupspin", function () {
|
||||
writeLine("touchspin.on.stopupspin");
|
||||
});
|
||||
i.on("touchspin.on.stopdownspin", function () {
|
||||
writeLine("touchspin.on.stopdownspin");
|
||||
});
|
||||
i.on("touchspin.on.min", function () {
|
||||
writeLine("touchspin.on.min");
|
||||
});
|
||||
i.on("touchspin.on.max", function () {
|
||||
writeLine("touchspin.on.max");
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Settings</h2>
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>initval</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Applied when no explicit value is set on the input with the <code>value</code> attribute. Empty string means
|
||||
that the value remains empty on initialization.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>replacementval</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Applied when user leaves the field empty/blank or enters non-number. Empty string means that the value will not be replaced.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>min</code></td>
|
||||
<td><code>0</code></td>
|
||||
<td>Minimum value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>max</code></td>
|
||||
<td><code>100</code></td>
|
||||
<td>Maximum value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>step</code></td>
|
||||
<td><code>1</code></td>
|
||||
<td>Incremental/decremental step on up/down change.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>forcestepdivisibility</code></td>
|
||||
<td><code>'round'</code></td>
|
||||
<td>How to force the value to be divisible by step value: <code>'none'</code> | <code>'round'</code> | <code>'floor'</code>
|
||||
| <code>'ceil'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>decimals</code></td>
|
||||
<td><code>0</code></td>
|
||||
<td>Number of decimal points.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>stepinterval</code></td>
|
||||
<td><code>100</code></td>
|
||||
<td>Refresh rate of the spinner in milliseconds.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>stepintervaldelay</code></td>
|
||||
<td><code>500</code></td>
|
||||
<td>Time in milliseconds before the spinner starts to spin.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticalbuttons</code></td>
|
||||
<td><code>false</code></td>
|
||||
<td>Enables the traditional up/down buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticalupclass</code></td>
|
||||
<td><code>'glyphicon glyphicon-chevron-up'</code></td>
|
||||
<td>Class of the up button with vertical buttons mode enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticaldownclass</code></td>
|
||||
<td><code>'glyphicon glyphicon-chevron-down'</code></td>
|
||||
<td>Class of the down button with vertical buttons mode enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prefix</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Text before the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>postfix</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Text after the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prefix_extraclass</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Extra class(es) for prefix.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>postfix_extraclass</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Extra class(es) for postfix.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>booster</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>If enabled, the the spinner is continually becoming faster as holding the button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>boostat</code></td>
|
||||
<td><code>10</code></td>
|
||||
<td>Boost at every nth step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>maxboostedstep</code></td>
|
||||
<td><code>false</code></td>
|
||||
<td>Maximum step when boosted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>mousewheel</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>Enables the mouse wheel to change the value of the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttondown_class</code></td>
|
||||
<td><code>'btn btn-default'</code></td>
|
||||
<td>Class(es) of down button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttonup_class</code></td>
|
||||
<td><code>'btn btn-default'</code></td>
|
||||
<td>Class(es) of up button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttondown_txt</code></td>
|
||||
<td><code>'-'</code></td>
|
||||
<td>Content inside the down button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttonup_txt</code></td>
|
||||
<td><code>'+'</code></td>
|
||||
<td>Content inside the up button.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Events</h2>
|
||||
|
||||
<h3>Triggered events</h3>
|
||||
|
||||
<p>The following events are triggered on the original input by the plugin and can be listened on.</p>
|
||||
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>change</code></td>
|
||||
<td>Triggered when the value is changed with one of the buttons (but not triggered when the spinner hits the
|
||||
limit set by <code>settings.min</code> or <code>settings.max</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning upwards or downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startupspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning upwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startdownspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopspin</code></td>
|
||||
<td>Triggered when the spinner stops spinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopupspin</code></td>
|
||||
<td>Triggered when the spinner stops upspinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopdownspin</code></td>
|
||||
<td>Triggered when the spinner stops downspinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.min</code></td>
|
||||
<td>Triggered when the spinner hits the limit set by <code>settings.min</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.max</code></td>
|
||||
<td>Triggered when the spinner hits the limit set by <code>settings.max</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Callable events</h3>
|
||||
|
||||
<p>The following events can be triggered on the original input.</p>
|
||||
|
||||
<p>
|
||||
Example usages:<br>
|
||||
<code class="prettyprint">$("input").trigger("touchspin.uponce");</code><br>
|
||||
<code class="prettyprint">$("input").trigger("touchspin.updatesettings", {max: 1000});</code>
|
||||
</p>
|
||||
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>touchspin.updatesettings</code></td>
|
||||
<td><code>function(newoptions)</code>: Update any setting of an already initialized TouchSpin instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.uponce</code></td>
|
||||
<td>Increase the value by one step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.downonce</code></td>
|
||||
<td>Decrease the value by one step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.startupspin</code></td>
|
||||
<td>Starts the spinner upwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.startdownspin</code></td>
|
||||
<td>Starts the spinner downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.stopspin</code></td>
|
||||
<td>Stops the spinner.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Download</h2>
|
||||
|
||||
<p><a id="link-ghd" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin">Download</a> from
|
||||
github. Please report issues and suggestions to github's issue tracker or contact me on <a id="link-gp"
|
||||
href="https://plus.google.com/101242556570448529330/posts"
|
||||
target="_blank">g+</a> or
|
||||
<a id="link-tw" href="https://twitter.com/styu007">twitter</a>!</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
* Bootstrap TouchSpin - v3.1.2
|
||||
* A mobile and touch friendly input spinner component for Bootstrap 3.
|
||||
* http://www.virtuosoft.eu/code/bootstrap-touchspin/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical > .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 8px 10px;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
|
||||
margin-top: -2px;
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical i {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
+705
@@ -0,0 +1,705 @@
|
||||
/*
|
||||
* Bootstrap TouchSpin - v3.1.2
|
||||
* A mobile and touch friendly input spinner component for Bootstrap 3.
|
||||
* http://www.virtuosoft.eu/code/bootstrap-touchspin/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var _currentSpinnerId = 0;
|
||||
|
||||
function _scopedEventName(name, id) {
|
||||
return name + '.touchspin_' + id;
|
||||
}
|
||||
|
||||
function _scopeEventNames(names, id) {
|
||||
return $.map(names, function(name) {
|
||||
return _scopedEventName(name, id);
|
||||
});
|
||||
}
|
||||
|
||||
$.fn.TouchSpin = function(options) {
|
||||
|
||||
if (options === 'destroy') {
|
||||
this.each(function() {
|
||||
var originalinput = $(this),
|
||||
originalinput_data = originalinput.data();
|
||||
$(document).off(_scopeEventNames([
|
||||
'mouseup',
|
||||
'touchend',
|
||||
'touchcancel',
|
||||
'mousemove',
|
||||
'touchmove',
|
||||
'scroll',
|
||||
'scrollstart'], originalinput_data.spinnerid).join(' '));
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
min: 0,
|
||||
max: 100,
|
||||
initval: '',
|
||||
replacementval: '',
|
||||
step: 1,
|
||||
decimals: 0,
|
||||
stepinterval: 100,
|
||||
forcestepdivisibility: 'round', // none | floor | round | ceil
|
||||
stepintervaldelay: 500,
|
||||
verticalbuttons: false,
|
||||
verticalupclass: 'glyphicon glyphicon-chevron-up',
|
||||
verticaldownclass: 'glyphicon glyphicon-chevron-down',
|
||||
prefix: '',
|
||||
postfix: '',
|
||||
prefix_extraclass: '',
|
||||
postfix_extraclass: '',
|
||||
booster: true,
|
||||
boostat: 10,
|
||||
maxboostedstep: false,
|
||||
mousewheel: true,
|
||||
buttondown_class: 'btn btn-default',
|
||||
buttonup_class: 'btn btn-default',
|
||||
buttondown_txt: '-',
|
||||
buttonup_txt: '+'
|
||||
};
|
||||
|
||||
var attributeMap = {
|
||||
min: 'min',
|
||||
max: 'max',
|
||||
initval: 'init-val',
|
||||
replacementval: 'replacement-val',
|
||||
step: 'step',
|
||||
decimals: 'decimals',
|
||||
stepinterval: 'step-interval',
|
||||
verticalbuttons: 'vertical-buttons',
|
||||
verticalupclass: 'vertical-up-class',
|
||||
verticaldownclass: 'vertical-down-class',
|
||||
forcestepdivisibility: 'force-step-divisibility',
|
||||
stepintervaldelay: 'step-interval-delay',
|
||||
prefix: 'prefix',
|
||||
postfix: 'postfix',
|
||||
prefix_extraclass: 'prefix-extra-class',
|
||||
postfix_extraclass: 'postfix-extra-class',
|
||||
booster: 'booster',
|
||||
boostat: 'boostat',
|
||||
maxboostedstep: 'max-boosted-step',
|
||||
mousewheel: 'mouse-wheel',
|
||||
buttondown_class: 'button-down-class',
|
||||
buttonup_class: 'button-up-class',
|
||||
buttondown_txt: 'button-down-txt',
|
||||
buttonup_txt: 'button-up-txt'
|
||||
};
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var settings,
|
||||
originalinput = $(this),
|
||||
originalinput_data = originalinput.data(),
|
||||
container,
|
||||
elements,
|
||||
value,
|
||||
downSpinTimer,
|
||||
upSpinTimer,
|
||||
downDelayTimeout,
|
||||
upDelayTimeout,
|
||||
spincount = 0,
|
||||
spinning = false;
|
||||
|
||||
init();
|
||||
|
||||
|
||||
function init() {
|
||||
if (originalinput.data('alreadyinitialized')) {
|
||||
return;
|
||||
}
|
||||
|
||||
originalinput.data('alreadyinitialized', true);
|
||||
_currentSpinnerId += 1;
|
||||
originalinput.data('spinnerid', _currentSpinnerId);
|
||||
|
||||
|
||||
if (!originalinput.is('input')) {
|
||||
console.log('Must be an input.');
|
||||
return;
|
||||
}
|
||||
|
||||
_initSettings();
|
||||
_setInitval();
|
||||
_checkValue();
|
||||
_buildHtml();
|
||||
_initElements();
|
||||
_hideEmptyPrefixPostfix();
|
||||
_bindEvents();
|
||||
_bindEventsInterface();
|
||||
elements.input.css('display', 'block');
|
||||
}
|
||||
|
||||
function _setInitval() {
|
||||
if (settings.initval !== '' && originalinput.val() === '') {
|
||||
originalinput.val(settings.initval);
|
||||
}
|
||||
}
|
||||
|
||||
function changeSettings(newsettings) {
|
||||
_updateSettings(newsettings);
|
||||
_checkValue();
|
||||
|
||||
var value = elements.input.val();
|
||||
|
||||
if (value !== '') {
|
||||
value = Number(elements.input.val());
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
}
|
||||
}
|
||||
|
||||
function _initSettings() {
|
||||
settings = $.extend({}, defaults, originalinput_data, _parseAttributes(), options);
|
||||
}
|
||||
|
||||
function _parseAttributes() {
|
||||
var data = {};
|
||||
$.each(attributeMap, function(key, value) {
|
||||
var attrName = 'bts-' + value + '';
|
||||
if (originalinput.is('[data-' + attrName + ']')) {
|
||||
data[key] = originalinput.data(attrName);
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
function _updateSettings(newsettings) {
|
||||
settings = $.extend({}, settings, newsettings);
|
||||
|
||||
// Update postfix and prefix texts if those settings were changed.
|
||||
if (newsettings.postfix) {
|
||||
originalinput.parent().find('.bootstrap-touchspin-postfix').text(newsettings.postfix);
|
||||
}
|
||||
if (newsettings.prefix) {
|
||||
originalinput.parent().find('.bootstrap-touchspin-prefix').text(newsettings.prefix);
|
||||
}
|
||||
}
|
||||
|
||||
function _buildHtml() {
|
||||
var initval = originalinput.val(),
|
||||
parentelement = originalinput.parent();
|
||||
|
||||
if (initval !== '') {
|
||||
initval = Number(initval).toFixed(settings.decimals);
|
||||
}
|
||||
|
||||
originalinput.data('initvalue', initval).val(initval);
|
||||
originalinput.addClass('form-control');
|
||||
|
||||
if (parentelement.hasClass('input-group')) {
|
||||
_advanceInputGroup(parentelement);
|
||||
}
|
||||
else {
|
||||
_buildInputGroup();
|
||||
}
|
||||
}
|
||||
|
||||
function _advanceInputGroup(parentelement) {
|
||||
parentelement.addClass('bootstrap-touchspin');
|
||||
|
||||
var prev = originalinput.prev(),
|
||||
next = originalinput.next();
|
||||
|
||||
var downhtml,
|
||||
uphtml,
|
||||
prefixhtml = '<span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span>',
|
||||
postfixhtml = '<span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span>';
|
||||
|
||||
if (prev.hasClass('input-group-btn')) {
|
||||
downhtml = '<button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button>';
|
||||
prev.append(downhtml);
|
||||
}
|
||||
else {
|
||||
downhtml = '<span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button></span>';
|
||||
$(downhtml).insertBefore(originalinput);
|
||||
}
|
||||
|
||||
if (next.hasClass('input-group-btn')) {
|
||||
uphtml = '<button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button>';
|
||||
next.prepend(uphtml);
|
||||
}
|
||||
else {
|
||||
uphtml = '<span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button></span>';
|
||||
$(uphtml).insertAfter(originalinput);
|
||||
}
|
||||
|
||||
$(prefixhtml).insertBefore(originalinput);
|
||||
$(postfixhtml).insertAfter(originalinput);
|
||||
|
||||
container = parentelement;
|
||||
}
|
||||
|
||||
function _buildInputGroup() {
|
||||
var html;
|
||||
|
||||
if (settings.verticalbuttons) {
|
||||
html = '<div class="input-group bootstrap-touchspin"><span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span><span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span><span class="input-group-btn-vertical"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-up" type="button"><i class="' + settings.verticalupclass + '"></i></button><button class="' + settings.buttonup_class + ' bootstrap-touchspin-down" type="button"><i class="' + settings.verticaldownclass + '"></i></button></span></div>';
|
||||
}
|
||||
else {
|
||||
html = '<div class="input-group bootstrap-touchspin"><span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button></span><span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span><span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span><span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button></span></div>';
|
||||
}
|
||||
|
||||
container = $(html).insertBefore(originalinput);
|
||||
|
||||
$('.bootstrap-touchspin-prefix', container).after(originalinput);
|
||||
|
||||
if (originalinput.hasClass('input-sm')) {
|
||||
container.addClass('input-group-sm');
|
||||
}
|
||||
else if (originalinput.hasClass('input-lg')) {
|
||||
container.addClass('input-group-lg');
|
||||
}
|
||||
}
|
||||
|
||||
function _initElements() {
|
||||
elements = {
|
||||
down: $('.bootstrap-touchspin-down', container),
|
||||
up: $('.bootstrap-touchspin-up', container),
|
||||
input: $('input', container),
|
||||
prefix: $('.bootstrap-touchspin-prefix', container).addClass(settings.prefix_extraclass),
|
||||
postfix: $('.bootstrap-touchspin-postfix', container).addClass(settings.postfix_extraclass)
|
||||
};
|
||||
}
|
||||
|
||||
function _hideEmptyPrefixPostfix() {
|
||||
if (settings.prefix === '') {
|
||||
elements.prefix.hide();
|
||||
}
|
||||
|
||||
if (settings.postfix === '') {
|
||||
elements.postfix.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function _bindEvents() {
|
||||
originalinput.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
else if (code === 40) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
stopSpin();
|
||||
}
|
||||
else if (code === 40) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('blur', function() {
|
||||
_checkValue();
|
||||
});
|
||||
|
||||
elements.down.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('mousedown.touchspin', function(ev) {
|
||||
elements.down.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.down.on('touchstart.touchspin', function(ev) {
|
||||
elements.down.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mousedown.touchspin', function(ev) {
|
||||
elements.up.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('touchstart.touchspin', function(ev) {
|
||||
elements.up.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
elements.up.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mouseup', 'touchend', 'touchcancel'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mousemove', 'touchmove', 'scroll', 'scrollstart'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('mousewheel DOMMouseScroll', function(ev) {
|
||||
if (!settings.mousewheel || !originalinput.is(':focus')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var delta = ev.originalEvent.wheelDelta || -ev.originalEvent.deltaY || -ev.originalEvent.detail;
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
|
||||
if (delta < 0) {
|
||||
downOnce();
|
||||
}
|
||||
else {
|
||||
upOnce();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _bindEventsInterface() {
|
||||
originalinput.on('touchspin.uponce', function() {
|
||||
stopSpin();
|
||||
upOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.downonce', function() {
|
||||
stopSpin();
|
||||
downOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startupspin', function() {
|
||||
startUpSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startdownspin', function() {
|
||||
startDownSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.stopspin', function() {
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.updatesettings', function(e, newsettings) {
|
||||
changeSettings(newsettings);
|
||||
});
|
||||
}
|
||||
|
||||
function _forcestepdivisibility(value) {
|
||||
switch (settings.forcestepdivisibility) {
|
||||
case 'round':
|
||||
return (Math.round(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'floor':
|
||||
return (Math.floor(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'ceil':
|
||||
return (Math.ceil(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function _checkValue() {
|
||||
var val, parsedval, returnval;
|
||||
|
||||
val = originalinput.val();
|
||||
|
||||
if (val === '') {
|
||||
if (settings.replacementval !== '') {
|
||||
originalinput.val(settings.replacementval);
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (settings.decimals > 0 && val === '.') {
|
||||
return;
|
||||
}
|
||||
|
||||
parsedval = parseFloat(val);
|
||||
|
||||
if (isNaN(parsedval)) {
|
||||
if (settings.replacementval !== '') {
|
||||
parsedval = settings.replacementval;
|
||||
}
|
||||
else {
|
||||
parsedval = 0;
|
||||
}
|
||||
}
|
||||
|
||||
returnval = parsedval;
|
||||
|
||||
if (parsedval.toString() !== val) {
|
||||
returnval = parsedval;
|
||||
}
|
||||
|
||||
if (parsedval < settings.min) {
|
||||
returnval = settings.min;
|
||||
}
|
||||
|
||||
if (parsedval > settings.max) {
|
||||
returnval = settings.max;
|
||||
}
|
||||
|
||||
returnval = _forcestepdivisibility(returnval);
|
||||
|
||||
if (Number(val).toString() !== returnval.toString()) {
|
||||
originalinput.val(returnval);
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function _getBoostedStep() {
|
||||
if (!settings.booster) {
|
||||
return settings.step;
|
||||
}
|
||||
else {
|
||||
var boosted = Math.pow(2, Math.floor(spincount / settings.boostat)) * settings.step;
|
||||
|
||||
if (settings.maxboostedstep) {
|
||||
if (boosted > settings.maxboostedstep) {
|
||||
boosted = settings.maxboostedstep;
|
||||
value = Math.round((value / boosted)) * boosted;
|
||||
}
|
||||
}
|
||||
|
||||
return Math.max(settings.step, boosted);
|
||||
}
|
||||
}
|
||||
|
||||
function upOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value + boostedstep;
|
||||
|
||||
if (value > settings.max) {
|
||||
value = settings.max;
|
||||
originalinput.trigger('touchspin.on.max');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(Number(value).toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function downOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value - boostedstep;
|
||||
|
||||
if (value < settings.min) {
|
||||
value = settings.min;
|
||||
originalinput.trigger('touchspin.on.min');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function startDownSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'down';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startdownspin');
|
||||
|
||||
downDelayTimeout = setTimeout(function() {
|
||||
downSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
downOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function startUpSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'up';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startupspin');
|
||||
|
||||
upDelayTimeout = setTimeout(function() {
|
||||
upSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
upOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function stopSpin() {
|
||||
clearTimeout(downDelayTimeout);
|
||||
clearTimeout(upDelayTimeout);
|
||||
clearInterval(downSpinTimer);
|
||||
clearInterval(upSpinTimer);
|
||||
|
||||
switch (spinning) {
|
||||
case 'up':
|
||||
originalinput.trigger('touchspin.on.stopupspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
case 'down':
|
||||
originalinput.trigger('touchspin.on.stopdownspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
}
|
||||
|
||||
spincount = 0;
|
||||
spinning = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
/*
|
||||
* Bootstrap TouchSpin - v3.1.2
|
||||
* A mobile and touch friendly input spinner component for Bootstrap 3.
|
||||
* http://www.virtuosoft.eu/code/bootstrap-touchspin/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical{position:relative;white-space:nowrap;width:1%;vertical-align:middle;display:table-cell}.bootstrap-touchspin .input-group-btn-vertical>.btn{display:block;float:none;width:100%;max-width:100%;padding:8px 10px;margin-left:-1px;position:relative}.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up{border-radius:0;border-top-right-radius:4px}.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{margin-top:-2px;border-radius:0;border-bottom-right-radius:4px}.bootstrap-touchspin .input-group-btn-vertical i{position:absolute;top:3px;left:5px;font-size:9px;font-weight:400}
|
||||
+9
File diff suppressed because one or more lines are too long
@@ -0,0 +1,37 @@
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical > .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 8px 10px;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
|
||||
margin-top: -2px;
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical i {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
@@ -0,0 +1,697 @@
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var _currentSpinnerId = 0;
|
||||
|
||||
function _scopedEventName(name, id) {
|
||||
return name + '.touchspin_' + id;
|
||||
}
|
||||
|
||||
function _scopeEventNames(names, id) {
|
||||
return $.map(names, function(name) {
|
||||
return _scopedEventName(name, id);
|
||||
});
|
||||
}
|
||||
|
||||
$.fn.TouchSpin = function(options) {
|
||||
|
||||
if (options === 'destroy') {
|
||||
this.each(function() {
|
||||
var originalinput = $(this),
|
||||
originalinput_data = originalinput.data();
|
||||
$(document).off(_scopeEventNames([
|
||||
'mouseup',
|
||||
'touchend',
|
||||
'touchcancel',
|
||||
'mousemove',
|
||||
'touchmove',
|
||||
'scroll',
|
||||
'scrollstart'], originalinput_data.spinnerid).join(' '));
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
min: 0,
|
||||
max: 100,
|
||||
initval: '',
|
||||
replacementval: '',
|
||||
step: 1,
|
||||
decimals: 0,
|
||||
stepinterval: 100,
|
||||
forcestepdivisibility: 'round', // none | floor | round | ceil
|
||||
stepintervaldelay: 500,
|
||||
verticalbuttons: false,
|
||||
verticalupclass: 'glyphicon glyphicon-chevron-up',
|
||||
verticaldownclass: 'glyphicon glyphicon-chevron-down',
|
||||
prefix: '',
|
||||
postfix: '',
|
||||
prefix_extraclass: '',
|
||||
postfix_extraclass: '',
|
||||
booster: true,
|
||||
boostat: 10,
|
||||
maxboostedstep: false,
|
||||
mousewheel: true,
|
||||
buttondown_class: 'btn btn-default',
|
||||
buttonup_class: 'btn btn-default',
|
||||
buttondown_txt: '-',
|
||||
buttonup_txt: '+'
|
||||
};
|
||||
|
||||
var attributeMap = {
|
||||
min: 'min',
|
||||
max: 'max',
|
||||
initval: 'init-val',
|
||||
replacementval: 'replacement-val',
|
||||
step: 'step',
|
||||
decimals: 'decimals',
|
||||
stepinterval: 'step-interval',
|
||||
verticalbuttons: 'vertical-buttons',
|
||||
verticalupclass: 'vertical-up-class',
|
||||
verticaldownclass: 'vertical-down-class',
|
||||
forcestepdivisibility: 'force-step-divisibility',
|
||||
stepintervaldelay: 'step-interval-delay',
|
||||
prefix: 'prefix',
|
||||
postfix: 'postfix',
|
||||
prefix_extraclass: 'prefix-extra-class',
|
||||
postfix_extraclass: 'postfix-extra-class',
|
||||
booster: 'booster',
|
||||
boostat: 'boostat',
|
||||
maxboostedstep: 'max-boosted-step',
|
||||
mousewheel: 'mouse-wheel',
|
||||
buttondown_class: 'button-down-class',
|
||||
buttonup_class: 'button-up-class',
|
||||
buttondown_txt: 'button-down-txt',
|
||||
buttonup_txt: 'button-up-txt'
|
||||
};
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var settings,
|
||||
originalinput = $(this),
|
||||
originalinput_data = originalinput.data(),
|
||||
container,
|
||||
elements,
|
||||
value,
|
||||
downSpinTimer,
|
||||
upSpinTimer,
|
||||
downDelayTimeout,
|
||||
upDelayTimeout,
|
||||
spincount = 0,
|
||||
spinning = false;
|
||||
|
||||
init();
|
||||
|
||||
|
||||
function init() {
|
||||
if (originalinput.data('alreadyinitialized')) {
|
||||
return;
|
||||
}
|
||||
|
||||
originalinput.data('alreadyinitialized', true);
|
||||
_currentSpinnerId += 1;
|
||||
originalinput.data('spinnerid', _currentSpinnerId);
|
||||
|
||||
|
||||
if (!originalinput.is('input')) {
|
||||
console.log('Must be an input.');
|
||||
return;
|
||||
}
|
||||
|
||||
_initSettings();
|
||||
_setInitval();
|
||||
_checkValue();
|
||||
_buildHtml();
|
||||
_initElements();
|
||||
_hideEmptyPrefixPostfix();
|
||||
_bindEvents();
|
||||
_bindEventsInterface();
|
||||
elements.input.css('display', 'block');
|
||||
}
|
||||
|
||||
function _setInitval() {
|
||||
if (settings.initval !== '' && originalinput.val() === '') {
|
||||
originalinput.val(settings.initval);
|
||||
}
|
||||
}
|
||||
|
||||
function changeSettings(newsettings) {
|
||||
_updateSettings(newsettings);
|
||||
_checkValue();
|
||||
|
||||
var value = elements.input.val();
|
||||
|
||||
if (value !== '') {
|
||||
value = Number(elements.input.val());
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
}
|
||||
}
|
||||
|
||||
function _initSettings() {
|
||||
settings = $.extend({}, defaults, originalinput_data, _parseAttributes(), options);
|
||||
}
|
||||
|
||||
function _parseAttributes() {
|
||||
var data = {};
|
||||
$.each(attributeMap, function(key, value) {
|
||||
var attrName = 'bts-' + value + '';
|
||||
if (originalinput.is('[data-' + attrName + ']')) {
|
||||
data[key] = originalinput.data(attrName);
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
function _updateSettings(newsettings) {
|
||||
settings = $.extend({}, settings, newsettings);
|
||||
|
||||
// Update postfix and prefix texts if those settings were changed.
|
||||
if (newsettings.postfix) {
|
||||
originalinput.parent().find('.bootstrap-touchspin-postfix').text(newsettings.postfix);
|
||||
}
|
||||
if (newsettings.prefix) {
|
||||
originalinput.parent().find('.bootstrap-touchspin-prefix').text(newsettings.prefix);
|
||||
}
|
||||
}
|
||||
|
||||
function _buildHtml() {
|
||||
var initval = originalinput.val(),
|
||||
parentelement = originalinput.parent();
|
||||
|
||||
if (initval !== '') {
|
||||
initval = Number(initval).toFixed(settings.decimals);
|
||||
}
|
||||
|
||||
originalinput.data('initvalue', initval).val(initval);
|
||||
originalinput.addClass('form-control');
|
||||
|
||||
if (parentelement.hasClass('input-group')) {
|
||||
_advanceInputGroup(parentelement);
|
||||
}
|
||||
else {
|
||||
_buildInputGroup();
|
||||
}
|
||||
}
|
||||
|
||||
function _advanceInputGroup(parentelement) {
|
||||
parentelement.addClass('bootstrap-touchspin');
|
||||
|
||||
var prev = originalinput.prev(),
|
||||
next = originalinput.next();
|
||||
|
||||
var downhtml,
|
||||
uphtml,
|
||||
prefixhtml = '<span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span>',
|
||||
postfixhtml = '<span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span>';
|
||||
|
||||
if (prev.hasClass('input-group-btn')) {
|
||||
downhtml = '<button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button>';
|
||||
prev.append(downhtml);
|
||||
}
|
||||
else {
|
||||
downhtml = '<span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button></span>';
|
||||
$(downhtml).insertBefore(originalinput);
|
||||
}
|
||||
|
||||
if (next.hasClass('input-group-btn')) {
|
||||
uphtml = '<button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button>';
|
||||
next.prepend(uphtml);
|
||||
}
|
||||
else {
|
||||
uphtml = '<span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button></span>';
|
||||
$(uphtml).insertAfter(originalinput);
|
||||
}
|
||||
|
||||
$(prefixhtml).insertBefore(originalinput);
|
||||
$(postfixhtml).insertAfter(originalinput);
|
||||
|
||||
container = parentelement;
|
||||
}
|
||||
|
||||
function _buildInputGroup() {
|
||||
var html;
|
||||
|
||||
if (settings.verticalbuttons) {
|
||||
html = '<div class="input-group bootstrap-touchspin"><span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span><span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span><span class="input-group-btn-vertical"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-up" type="button"><i class="' + settings.verticalupclass + '"></i></button><button class="' + settings.buttonup_class + ' bootstrap-touchspin-down" type="button"><i class="' + settings.verticaldownclass + '"></i></button></span></div>';
|
||||
}
|
||||
else {
|
||||
html = '<div class="input-group bootstrap-touchspin"><span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button></span><span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span><span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span><span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button></span></div>';
|
||||
}
|
||||
|
||||
container = $(html).insertBefore(originalinput);
|
||||
|
||||
$('.bootstrap-touchspin-prefix', container).after(originalinput);
|
||||
|
||||
if (originalinput.hasClass('input-sm')) {
|
||||
container.addClass('input-group-sm');
|
||||
}
|
||||
else if (originalinput.hasClass('input-lg')) {
|
||||
container.addClass('input-group-lg');
|
||||
}
|
||||
}
|
||||
|
||||
function _initElements() {
|
||||
elements = {
|
||||
down: $('.bootstrap-touchspin-down', container),
|
||||
up: $('.bootstrap-touchspin-up', container),
|
||||
input: $('input', container),
|
||||
prefix: $('.bootstrap-touchspin-prefix', container).addClass(settings.prefix_extraclass),
|
||||
postfix: $('.bootstrap-touchspin-postfix', container).addClass(settings.postfix_extraclass)
|
||||
};
|
||||
}
|
||||
|
||||
function _hideEmptyPrefixPostfix() {
|
||||
if (settings.prefix === '') {
|
||||
elements.prefix.hide();
|
||||
}
|
||||
|
||||
if (settings.postfix === '') {
|
||||
elements.postfix.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function _bindEvents() {
|
||||
originalinput.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
else if (code === 40) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
stopSpin();
|
||||
}
|
||||
else if (code === 40) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('blur', function() {
|
||||
_checkValue();
|
||||
});
|
||||
|
||||
elements.down.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('mousedown.touchspin', function(ev) {
|
||||
elements.down.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.down.on('touchstart.touchspin', function(ev) {
|
||||
elements.down.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mousedown.touchspin', function(ev) {
|
||||
elements.up.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('touchstart.touchspin', function(ev) {
|
||||
elements.up.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
elements.up.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mouseup', 'touchend', 'touchcancel'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mousemove', 'touchmove', 'scroll', 'scrollstart'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('mousewheel DOMMouseScroll', function(ev) {
|
||||
if (!settings.mousewheel || !originalinput.is(':focus')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var delta = ev.originalEvent.wheelDelta || -ev.originalEvent.deltaY || -ev.originalEvent.detail;
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
|
||||
if (delta < 0) {
|
||||
downOnce();
|
||||
}
|
||||
else {
|
||||
upOnce();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _bindEventsInterface() {
|
||||
originalinput.on('touchspin.uponce', function() {
|
||||
stopSpin();
|
||||
upOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.downonce', function() {
|
||||
stopSpin();
|
||||
downOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startupspin', function() {
|
||||
startUpSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startdownspin', function() {
|
||||
startDownSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.stopspin', function() {
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.updatesettings', function(e, newsettings) {
|
||||
changeSettings(newsettings);
|
||||
});
|
||||
}
|
||||
|
||||
function _forcestepdivisibility(value) {
|
||||
switch (settings.forcestepdivisibility) {
|
||||
case 'round':
|
||||
return (Math.round(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'floor':
|
||||
return (Math.floor(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'ceil':
|
||||
return (Math.ceil(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function _checkValue() {
|
||||
var val, parsedval, returnval;
|
||||
|
||||
val = originalinput.val();
|
||||
|
||||
if (val === '') {
|
||||
if (settings.replacementval !== '') {
|
||||
originalinput.val(settings.replacementval);
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (settings.decimals > 0 && val === '.') {
|
||||
return;
|
||||
}
|
||||
|
||||
parsedval = parseFloat(val);
|
||||
|
||||
if (isNaN(parsedval)) {
|
||||
if (settings.replacementval !== '') {
|
||||
parsedval = settings.replacementval;
|
||||
}
|
||||
else {
|
||||
parsedval = 0;
|
||||
}
|
||||
}
|
||||
|
||||
returnval = parsedval;
|
||||
|
||||
if (parsedval.toString() !== val) {
|
||||
returnval = parsedval;
|
||||
}
|
||||
|
||||
if (parsedval < settings.min) {
|
||||
returnval = settings.min;
|
||||
}
|
||||
|
||||
if (parsedval > settings.max) {
|
||||
returnval = settings.max;
|
||||
}
|
||||
|
||||
returnval = _forcestepdivisibility(returnval);
|
||||
|
||||
if (Number(val).toString() !== returnval.toString()) {
|
||||
originalinput.val(returnval);
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function _getBoostedStep() {
|
||||
if (!settings.booster) {
|
||||
return settings.step;
|
||||
}
|
||||
else {
|
||||
var boosted = Math.pow(2, Math.floor(spincount / settings.boostat)) * settings.step;
|
||||
|
||||
if (settings.maxboostedstep) {
|
||||
if (boosted > settings.maxboostedstep) {
|
||||
boosted = settings.maxboostedstep;
|
||||
value = Math.round((value / boosted)) * boosted;
|
||||
}
|
||||
}
|
||||
|
||||
return Math.max(settings.step, boosted);
|
||||
}
|
||||
}
|
||||
|
||||
function upOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value + boostedstep;
|
||||
|
||||
if (value > settings.max) {
|
||||
value = settings.max;
|
||||
originalinput.trigger('touchspin.on.max');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(Number(value).toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function downOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value - boostedstep;
|
||||
|
||||
if (value < settings.min) {
|
||||
value = settings.min;
|
||||
originalinput.trigger('touchspin.on.min');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function startDownSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'down';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startdownspin');
|
||||
|
||||
downDelayTimeout = setTimeout(function() {
|
||||
downSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
downOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function startUpSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'up';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startupspin');
|
||||
|
||||
upDelayTimeout = setTimeout(function() {
|
||||
upSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
upOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function stopSpin() {
|
||||
clearTimeout(downDelayTimeout);
|
||||
clearTimeout(upDelayTimeout);
|
||||
clearInterval(downSpinTimer);
|
||||
clearInterval(upSpinTimer);
|
||||
|
||||
switch (spinning) {
|
||||
case 'up':
|
||||
originalinput.trigger('touchspin.on.stopupspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
case 'down':
|
||||
originalinput.trigger('touchspin.on.stopdownspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
}
|
||||
|
||||
spincount = 0;
|
||||
spinning = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
+5
File diff suppressed because one or more lines are too long
+2377
File diff suppressed because it is too large
Load Diff
+7
File diff suppressed because one or more lines are too long
+2
@@ -0,0 +1,2 @@
|
||||
.ekko-lightbox-container{position:relative}.ekko-lightbox-container>div.ekko-lightbox-item{position:absolute;top:0;left:0;bottom:0;right:0;width:100%}.ekko-lightbox iframe{width:100%;height:100%}.ekko-lightbox-nav-overlay{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex}.ekko-lightbox-nav-overlay a{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0;transition:opacity .5s;color:#fff;font-size:30px;z-index:1}.ekko-lightbox-nav-overlay a>*{-ms-flex-positive:1;flex-grow:1}.ekko-lightbox-nav-overlay a>:focus{outline:none}.ekko-lightbox-nav-overlay a span{padding:0 30px}.ekko-lightbox-nav-overlay a:last-child span{text-align:right}.ekko-lightbox-nav-overlay a:hover{text-decoration:none}.ekko-lightbox-nav-overlay a:focus{outline:none}.ekko-lightbox-nav-overlay a.disabled{cursor:default;visibility:hidden}.ekko-lightbox a:hover{opacity:1;text-decoration:none}.ekko-lightbox .modal-dialog{display:none}.ekko-lightbox .modal-footer{text-align:left}.ekko-lightbox-loader{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.ekko-lightbox-loader>div{width:40px;height:40px;position:relative;text-align:center}.ekko-lightbox-loader>div>div{width:100%;height:100%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;animation:a 2s infinite ease-in-out}.ekko-lightbox-loader>div>div:last-child{animation-delay:-1s}.modal-dialog .ekko-lightbox-loader>div>div{background-color:#333}@keyframes a{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}
|
||||
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVra28tbGlnaHRib3guY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlCQUNFLGlCQUFtQixDQUNwQixBQUNELGdEQUNFLGtCQUFtQixBQUNuQixNQUFPLEFBQ1AsT0FBUSxBQUNSLFNBQVUsQUFDVixRQUFTLEFBQ1QsVUFBWSxDQUNiLEFBQ0Qsc0JBQ0UsV0FBWSxBQUNaLFdBQWEsQ0FDZCxBQUNELDJCQUNFLFVBQWEsQUFDYixrQkFBbUIsQUFDbkIsTUFBTyxBQUNQLE9BQVEsQUFDUixXQUFZLEFBQ1osWUFBYSxBQUNiLG9CQUFjLEFBQWQsWUFBYyxDQUNmLEFBQ0QsNkJBQ0UsV0FBUSxBQUFSLE9BQVEsQUFDUixvQkFBYyxBQUFkLGFBQWMsQUFDZCxzQkFBb0IsQUFBcEIsbUJBQW9CLEFBQ3BCLFVBQVcsQUFDWCx1QkFBeUIsQUFDekIsV0FBWSxBQUNaLGVBQWdCLEFBQ2hCLFNBQWEsQ0FDZCxBQUNELCtCQUNFLG9CQUFhLEFBQWIsV0FBYSxDQUNkLEFBQ0Qsb0NBQ0UsWUFBYyxDQUNmLEFBQ0Qsa0NBQ0UsY0FBZ0IsQ0FDakIsQUFDRCw2Q0FDRSxnQkFBa0IsQ0FDbkIsQUFDRCxtQ0FDRSxvQkFBc0IsQ0FDdkIsQUFDRCxtQ0FDRSxZQUFjLENBQ2YsQUFDRCxzQ0FDRSxlQUFnQixBQUNoQixpQkFBbUIsQ0FDcEIsQUFDRCx1QkFDRSxVQUFXLEFBQ1gsb0JBQXNCLENBQ3ZCLEFBQ0QsNkJBQ0UsWUFBYyxDQUNmLEFBQ0QsNkJBQ0UsZUFBaUIsQ0FDbEIsQUFDRCxzQkFDRSxrQkFBbUIsQUFDbkIsTUFBTyxBQUNQLE9BQVEsQUFDUixTQUFVLEFBQ1YsUUFBUyxBQUNULFdBQVksQUFDWixvQkFBYyxBQUFkLGFBQWMsQUFFZCwwQkFBdUIsQUFBdkIsc0JBQXVCLEFBRXZCLHFCQUF3QixBQUF4Qix1QkFBd0IsQUFFeEIsc0JBQW9CLEFBQXBCLGtCQUFvQixDQUNyQixBQUNELDBCQUNFLFdBQVksQUFDWixZQUFhLEFBQ2Isa0JBQW1CLEFBQ25CLGlCQUFtQixDQUNwQixBQUNELDhCQUNFLFdBQVksQUFDWixZQUFhLEFBQ2Isa0JBQW1CLEFBQ25CLHNCQUF1QixBQUN2QixXQUFhLEFBQ2Isa0JBQW1CLEFBQ25CLE1BQU8sQUFDUCxPQUFRLEFBQ1IsbUNBQTZDLENBQzlDLEFBQ0QseUNBQ0UsbUJBQXFCLENBQ3RCLEFBQ0QsNENBQ0UscUJBQXVCLENBQ3hCLEFBVUQsYUFDRSxNQUVFLG1CQUFvQixBQUNwQiwwQkFBNEIsQ0FDN0IsQUFDRCxJQUNFLG1CQUFvQixBQUNwQiwwQkFBNEIsQ0FDN0IsQ0FDRiIsImZpbGUiOiJla2tvLWxpZ2h0Ym94LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5la2tvLWxpZ2h0Ym94LWNvbnRhaW5lciB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5la2tvLWxpZ2h0Ym94LWNvbnRhaW5lciA+IGRpdi5la2tvLWxpZ2h0Ym94LWl0ZW0ge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgYm90dG9tOiAwO1xuICByaWdodDogMDtcbiAgd2lkdGg6IDEwMCU7XG59XG4uZWtrby1saWdodGJveCBpZnJhbWUge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuLmVra28tbGlnaHRib3gtbmF2LW92ZXJsYXkge1xuICB6LWluZGV4OiAxMDA7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xufVxuLmVra28tbGlnaHRib3gtbmF2LW92ZXJsYXkgYSB7XG4gIGZsZXg6IDE7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG9wYWNpdHk6IDA7XG4gIHRyYW5zaXRpb246IG9wYWNpdHkgMC41cztcbiAgY29sb3I6ICNmZmY7XG4gIGZvbnQtc2l6ZTogMzBweDtcbiAgei1pbmRleDogMTAwO1xufVxuLmVra28tbGlnaHRib3gtbmF2LW92ZXJsYXkgYSA+ICoge1xuICBmbGV4LWdyb3c6IDE7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhID4gKjpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhIHNwYW4ge1xuICBwYWRkaW5nOiAwIDMwcHg7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhOmxhc3QtY2hpbGQgc3BhbiB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuLmVra28tbGlnaHRib3gtbmF2LW92ZXJsYXkgYTpob3ZlciB7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdi1vdmVybGF5IGE6Zm9jdXMge1xuICBvdXRsaW5lOiBub25lO1xufVxuLmVra28tbGlnaHRib3gtbmF2LW92ZXJsYXkgYS5kaXNhYmxlZCB7XG4gIGN1cnNvcjogZGVmYXVsdDtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xufVxuLmVra28tbGlnaHRib3ggYTpob3ZlciB7XG4gIG9wYWNpdHk6IDE7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbn1cbi5la2tvLWxpZ2h0Ym94IC5tb2RhbC1kaWFsb2cge1xuICBkaXNwbGF5OiBub25lO1xufVxuLmVra28tbGlnaHRib3ggLm1vZGFsLWZvb3RlciB7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG59XG4uZWtrby1saWdodGJveC1sb2FkZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgYm90dG9tOiAwO1xuICByaWdodDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIC8qIGVzdGFibGlzaCBmbGV4IGNvbnRhaW5lciAqL1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAvKiBtYWtlIG1haW4gYXhpcyB2ZXJ0aWNhbCAqL1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgLyogY2VudGVyIGl0ZW1zIHZlcnRpY2FsbHksIGluIHRoaXMgY2FzZSAqL1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuLmVra28tbGlnaHRib3gtbG9hZGVyID4gZGl2IHtcbiAgd2lkdGg6IDQwcHg7XG4gIGhlaWdodDogNDBweDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG4uZWtrby1saWdodGJveC1sb2FkZXIgPiBkaXYgPiBkaXYge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gIG9wYWNpdHk6IDAuNjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIGFuaW1hdGlvbjogc2stYm91bmNlIDJzIGluZmluaXRlIGVhc2UtaW4tb3V0O1xufVxuLmVra28tbGlnaHRib3gtbG9hZGVyID4gZGl2ID4gZGl2Omxhc3QtY2hpbGQge1xuICBhbmltYXRpb24tZGVsYXk6IC0xcztcbn1cbi5tb2RhbC1kaWFsb2cgLmVra28tbGlnaHRib3gtbG9hZGVyID4gZGl2ID4gZGl2IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzMzMztcbn1cbkAtd2Via2l0LWtleWZyYW1lcyBzay1ib3VuY2Uge1xuICAwJSxcbiAgMTAwJSB7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlKDApO1xuICB9XG4gIDUwJSB7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlKDEpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNrLWJvdW5jZSB7XG4gIDAlLFxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDApO1xuICAgIC13ZWJraXQtdHJhbnNmb3JtOiBzY2FsZSgwKTtcbiAgfVxuICA1MCUge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlKDEpO1xuICB9XG59XG4iXX0= */
|
||||
+660
@@ -0,0 +1,660 @@
|
||||
/*!
|
||||
* Lightbox for Bootstrap by @ashleydw
|
||||
* https://github.com/ashleydw/lightbox
|
||||
*
|
||||
* License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
+function ($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var Lightbox = (function ($) {
|
||||
|
||||
var NAME = 'ekkoLightbox';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
|
||||
var Default = {
|
||||
title: '',
|
||||
footer: '',
|
||||
showArrows: true, //display the left / right arrows or not
|
||||
wrapping: true, //if true, gallery loops infinitely
|
||||
type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
|
||||
alwaysShowClose: false, //always show the close button, even if there is no title
|
||||
loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', // http://tobiasahlin.com/spinkit/
|
||||
leftArrow: '<span>❮</span>',
|
||||
rightArrow: '<span>❯</span>',
|
||||
strings: {
|
||||
close: 'Close',
|
||||
fail: 'Failed to load image:',
|
||||
type: 'Could not detect remote target type. Force the type using data-type'
|
||||
},
|
||||
doc: document, // if in an iframe can specify top.document
|
||||
onShow: function onShow() {},
|
||||
onShown: function onShown() {},
|
||||
onHide: function onHide() {},
|
||||
onHidden: function onHidden() {},
|
||||
onNavigate: function onNavigate() {},
|
||||
onContentLoaded: function onContentLoaded() {}
|
||||
};
|
||||
|
||||
var Lightbox = (function () {
|
||||
_createClass(Lightbox, null, [{
|
||||
key: 'Default',
|
||||
|
||||
/**
|
||||
|
||||
Class properties:
|
||||
|
||||
_$element: null -> the <a> element currently being displayed
|
||||
_$modal: The bootstrap modal generated
|
||||
_$modalDialog: The .modal-dialog
|
||||
_$modalContent: The .modal-content
|
||||
_$modalBody: The .modal-body
|
||||
_$modalHeader: The .modal-header
|
||||
_$modalFooter: The .modal-footer
|
||||
_$lightboxContainerOne: Container of the first lightbox element
|
||||
_$lightboxContainerTwo: Container of the second lightbox element
|
||||
_$lightboxBody: First element in the container
|
||||
_$modalArrows: The overlayed arrows container
|
||||
_$galleryItems: Other <a>'s available for this gallery
|
||||
_galleryName: Name of the current data('gallery') showing
|
||||
_galleryIndex: The current index of the _$galleryItems being shown
|
||||
_config: {} the options for the modal
|
||||
_modalId: unique id for the current lightbox
|
||||
_padding / _border: CSS properties for the modal container; these are used to calculate the available space for the content
|
||||
*/
|
||||
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}]);
|
||||
|
||||
function Lightbox($element, config) {
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, Lightbox);
|
||||
|
||||
this._config = $.extend({}, Default, config);
|
||||
this._$modalArrows = null;
|
||||
this._galleryIndex = 0;
|
||||
this._galleryName = null;
|
||||
this._padding = null;
|
||||
this._border = null;
|
||||
this._titleIsShown = false;
|
||||
this._footerIsShown = false;
|
||||
this._wantedWidth = 0;
|
||||
this._wantedHeight = 0;
|
||||
this._touchstartX = 0;
|
||||
this._touchendX = 0;
|
||||
|
||||
this._modalId = 'ekkoLightbox-' + Math.floor(Math.random() * 1000 + 1);
|
||||
this._$element = $element instanceof jQuery ? $element : $($element);
|
||||
|
||||
this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3;
|
||||
|
||||
var h4 = '<h4 class="modal-title">' + (this._config.title || " ") + '</h4>';
|
||||
var btn = '<button type="button" class="close" data-dismiss="modal" aria-label="' + this._config.strings.close + '"><span aria-hidden="true">×</span></button>';
|
||||
|
||||
var header = '<div class="modal-header' + (this._config.title || this._config.alwaysShowClose ? '' : ' hide') + '">' + (this._isBootstrap3 ? btn + h4 : h4 + btn) + '</div>';
|
||||
var footer = '<div class="modal-footer' + (this._config.footer ? '' : ' hide') + '">' + (this._config.footer || " ") + '</div>';
|
||||
var body = '<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>';
|
||||
var dialog = '<div class="modal-dialog" role="document"><div class="modal-content">' + header + body + footer + '</div></div>';
|
||||
$(this._config.doc.body).append('<div id="' + this._modalId + '" class="ekko-lightbox modal fade" tabindex="-1" tabindex="-1" role="dialog" aria-hidden="true">' + dialog + '</div>');
|
||||
|
||||
this._$modal = $('#' + this._modalId, this._config.doc);
|
||||
this._$modalDialog = this._$modal.find('.modal-dialog').first();
|
||||
this._$modalContent = this._$modal.find('.modal-content').first();
|
||||
this._$modalBody = this._$modal.find('.modal-body').first();
|
||||
this._$modalHeader = this._$modal.find('.modal-header').first();
|
||||
this._$modalFooter = this._$modal.find('.modal-footer').first();
|
||||
|
||||
this._$lightboxContainer = this._$modalBody.find('.ekko-lightbox-container').first();
|
||||
this._$lightboxBodyOne = this._$lightboxContainer.find('> div:first-child').first();
|
||||
this._$lightboxBodyTwo = this._$lightboxContainer.find('> div:last-child').first();
|
||||
|
||||
this._border = this._calculateBorders();
|
||||
this._padding = this._calculatePadding();
|
||||
|
||||
this._galleryName = this._$element.data('gallery');
|
||||
if (this._galleryName) {
|
||||
this._$galleryItems = $(document.body).find('*[data-gallery="' + this._galleryName + '"]');
|
||||
this._galleryIndex = this._$galleryItems.index(this._$element);
|
||||
$(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this));
|
||||
|
||||
// add the directional arrows to the modal
|
||||
if (this._config.showArrows && this._$galleryItems.length > 1) {
|
||||
this._$lightboxContainer.append('<div class="ekko-lightbox-nav-overlay"><a href="#">' + this._config.leftArrow + '</a><a href="#">' + this._config.rightArrow + '</a></div>');
|
||||
this._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first();
|
||||
this._$lightboxContainer.on('click', 'a:first-child', function (event) {
|
||||
event.preventDefault();
|
||||
return _this.navigateLeft();
|
||||
});
|
||||
this._$lightboxContainer.on('click', 'a:last-child', function (event) {
|
||||
event.preventDefault();
|
||||
return _this.navigateRight();
|
||||
});
|
||||
this.updateNavigation();
|
||||
}
|
||||
}
|
||||
|
||||
this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function () {
|
||||
_this._toggleLoading(true);
|
||||
_this._handle();
|
||||
return _this._config.onShown.call(_this);
|
||||
}).on('hide.bs.modal', this._config.onHide.bind(this)).on('hidden.bs.modal', function () {
|
||||
if (_this._galleryName) {
|
||||
$(document).off('keydown.ekkoLightbox');
|
||||
$(window).off('resize.ekkoLightbox');
|
||||
}
|
||||
_this._$modal.remove();
|
||||
return _this._config.onHidden.call(_this);
|
||||
}).modal(this._config);
|
||||
|
||||
$(window).on('resize.ekkoLightbox', function () {
|
||||
_this._resize(_this._wantedWidth, _this._wantedHeight);
|
||||
});
|
||||
this._$lightboxContainer.on('touchstart', function () {
|
||||
_this._touchstartX = event.changedTouches[0].screenX;
|
||||
}).on('touchend', function () {
|
||||
_this._touchendX = event.changedTouches[0].screenX;
|
||||
_this._swipeGesure();
|
||||
});
|
||||
}
|
||||
|
||||
_createClass(Lightbox, [{
|
||||
key: 'element',
|
||||
value: function element() {
|
||||
return this._$element;
|
||||
}
|
||||
}, {
|
||||
key: 'modal',
|
||||
value: function modal() {
|
||||
return this._$modal;
|
||||
}
|
||||
}, {
|
||||
key: 'navigateTo',
|
||||
value: function navigateTo(index) {
|
||||
|
||||
if (index < 0 || index > this._$galleryItems.length - 1) return this;
|
||||
|
||||
this._galleryIndex = index;
|
||||
|
||||
this.updateNavigation();
|
||||
|
||||
this._$element = $(this._$galleryItems.get(this._galleryIndex));
|
||||
this._handle();
|
||||
}
|
||||
}, {
|
||||
key: 'navigateLeft',
|
||||
value: function navigateLeft() {
|
||||
|
||||
if (!this._$galleryItems) return;
|
||||
|
||||
if (this._$galleryItems.length === 1) return;
|
||||
|
||||
if (this._galleryIndex === 0) {
|
||||
if (this._config.wrapping) this._galleryIndex = this._$galleryItems.length - 1;else return;
|
||||
} else //circular
|
||||
this._galleryIndex--;
|
||||
|
||||
this._config.onNavigate.call(this, 'left', this._galleryIndex);
|
||||
return this.navigateTo(this._galleryIndex);
|
||||
}
|
||||
}, {
|
||||
key: 'navigateRight',
|
||||
value: function navigateRight() {
|
||||
|
||||
if (!this._$galleryItems) return;
|
||||
|
||||
if (this._$galleryItems.length === 1) return;
|
||||
|
||||
if (this._galleryIndex === this._$galleryItems.length - 1) {
|
||||
if (this._config.wrapping) this._galleryIndex = 0;else return;
|
||||
} else //circular
|
||||
this._galleryIndex++;
|
||||
|
||||
this._config.onNavigate.call(this, 'right', this._galleryIndex);
|
||||
return this.navigateTo(this._galleryIndex);
|
||||
}
|
||||
}, {
|
||||
key: 'updateNavigation',
|
||||
value: function updateNavigation() {
|
||||
if (!this._config.wrapping) {
|
||||
var $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay');
|
||||
if (this._galleryIndex === 0) $nav.find('a:first-child').addClass('disabled');else $nav.find('a:first-child').removeClass('disabled');
|
||||
|
||||
if (this._galleryIndex === this._$galleryItems.length - 1) $nav.find('a:last-child').addClass('disabled');else $nav.find('a:last-child').removeClass('disabled');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'close',
|
||||
value: function close() {
|
||||
return this._$modal.modal('hide');
|
||||
}
|
||||
|
||||
// helper private methods
|
||||
}, {
|
||||
key: '_navigationalBinder',
|
||||
value: function _navigationalBinder(event) {
|
||||
event = event || window.event;
|
||||
if (event.keyCode === 39) return this.navigateRight();
|
||||
if (event.keyCode === 37) return this.navigateLeft();
|
||||
}
|
||||
|
||||
// type detection private methods
|
||||
}, {
|
||||
key: '_detectRemoteType',
|
||||
value: function _detectRemoteType(src, type) {
|
||||
|
||||
type = type || false;
|
||||
|
||||
if (!type && this._isImage(src)) type = 'image';
|
||||
if (!type && this._getYoutubeId(src)) type = 'youtube';
|
||||
if (!type && this._getVimeoId(src)) type = 'vimeo';
|
||||
if (!type && this._getInstagramId(src)) type = 'instagram';
|
||||
|
||||
if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0) type = 'url';
|
||||
|
||||
return type;
|
||||
}
|
||||
}, {
|
||||
key: '_isImage',
|
||||
value: function _isImage(string) {
|
||||
return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
|
||||
}
|
||||
}, {
|
||||
key: '_containerToUse',
|
||||
value: function _containerToUse() {
|
||||
var _this2 = this;
|
||||
|
||||
// if currently showing an image, fade it out and remove
|
||||
var $toUse = this._$lightboxBodyTwo;
|
||||
var $current = this._$lightboxBodyOne;
|
||||
|
||||
if (this._$lightboxBodyTwo.hasClass('in')) {
|
||||
$toUse = this._$lightboxBodyOne;
|
||||
$current = this._$lightboxBodyTwo;
|
||||
}
|
||||
|
||||
$current.removeClass('in show');
|
||||
setTimeout(function () {
|
||||
if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
|
||||
if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
|
||||
}, 500);
|
||||
|
||||
$toUse.addClass('in show');
|
||||
return $toUse;
|
||||
}
|
||||
}, {
|
||||
key: '_handle',
|
||||
value: function _handle() {
|
||||
|
||||
var $toUse = this._containerToUse();
|
||||
this._updateTitleAndFooter();
|
||||
|
||||
var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href');
|
||||
var currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false);
|
||||
|
||||
if (['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
|
||||
|
||||
switch (currentType) {
|
||||
case 'image':
|
||||
this._preloadImage(currentRemote, $toUse);
|
||||
this._preloadImageByIndex(this._galleryIndex, 3);
|
||||
break;
|
||||
case 'youtube':
|
||||
this._showYoutubeVideo(currentRemote, $toUse);
|
||||
break;
|
||||
case 'vimeo':
|
||||
this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);
|
||||
break;
|
||||
case 'instagram':
|
||||
this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
|
||||
break;
|
||||
case 'video':
|
||||
this._showHtml5Video(currentRemote, $toUse);
|
||||
break;
|
||||
default:
|
||||
// url
|
||||
this._loadRemoteContent(currentRemote, $toUse);
|
||||
break;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_getYoutubeId',
|
||||
value: function _getYoutubeId(string) {
|
||||
if (!string) return false;
|
||||
var matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
|
||||
return matches && matches[2].length === 11 ? matches[2] : false;
|
||||
}
|
||||
}, {
|
||||
key: '_getVimeoId',
|
||||
value: function _getVimeoId(string) {
|
||||
return string && string.indexOf('vimeo') > 0 ? string : false;
|
||||
}
|
||||
}, {
|
||||
key: '_getInstagramId',
|
||||
value: function _getInstagramId(string) {
|
||||
return string && string.indexOf('instagram') > 0 ? string : false;
|
||||
}
|
||||
|
||||
// layout private methods
|
||||
}, {
|
||||
key: '_toggleLoading',
|
||||
value: function _toggleLoading(show) {
|
||||
show = show || false;
|
||||
if (show) {
|
||||
this._$modalDialog.css('display', 'none');
|
||||
this._$modal.removeClass('in show');
|
||||
$('.modal-backdrop').append(this._config.loadingMessage);
|
||||
} else {
|
||||
this._$modalDialog.css('display', 'block');
|
||||
this._$modal.addClass('in show');
|
||||
$('.modal-backdrop').find('.ekko-lightbox-loader').remove();
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_calculateBorders',
|
||||
value: function _calculateBorders() {
|
||||
return {
|
||||
top: this._totalCssByAttribute('border-top-width'),
|
||||
right: this._totalCssByAttribute('border-right-width'),
|
||||
bottom: this._totalCssByAttribute('border-bottom-width'),
|
||||
left: this._totalCssByAttribute('border-left-width')
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: '_calculatePadding',
|
||||
value: function _calculatePadding() {
|
||||
return {
|
||||
top: this._totalCssByAttribute('padding-top'),
|
||||
right: this._totalCssByAttribute('padding-right'),
|
||||
bottom: this._totalCssByAttribute('padding-bottom'),
|
||||
left: this._totalCssByAttribute('padding-left')
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: '_totalCssByAttribute',
|
||||
value: function _totalCssByAttribute(attribute) {
|
||||
return parseInt(this._$modalDialog.css(attribute), 10) + parseInt(this._$modalContent.css(attribute), 10) + parseInt(this._$modalBody.css(attribute), 10);
|
||||
}
|
||||
}, {
|
||||
key: '_updateTitleAndFooter',
|
||||
value: function _updateTitleAndFooter() {
|
||||
var title = this._$element.data('title') || "";
|
||||
var caption = this._$element.data('footer') || "";
|
||||
|
||||
this._titleIsShown = false;
|
||||
if (title || this._config.alwaysShowClose) {
|
||||
this._titleIsShown = true;
|
||||
this._$modalHeader.css('display', '').find('.modal-title').html(title || " ");
|
||||
} else this._$modalHeader.css('display', 'none');
|
||||
|
||||
this._footerIsShown = false;
|
||||
if (caption) {
|
||||
this._footerIsShown = true;
|
||||
this._$modalFooter.css('display', '').html(caption);
|
||||
} else this._$modalFooter.css('display', 'none');
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_showYoutubeVideo',
|
||||
value: function _showYoutubeVideo(remote, $containerForElement) {
|
||||
var id = this._getYoutubeId(remote);
|
||||
var query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : '';
|
||||
var width = this._$element.data('width') || 560;
|
||||
var height = this._$element.data('height') || width / (560 / 315);
|
||||
return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, height, $containerForElement);
|
||||
}
|
||||
}, {
|
||||
key: '_showVimeoVideo',
|
||||
value: function _showVimeoVideo(id, $containerForElement) {
|
||||
var width = this._$element.data('width') || 500;
|
||||
var height = this._$element.data('height') || width / (560 / 315);
|
||||
return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement);
|
||||
}
|
||||
}, {
|
||||
key: '_showInstagramVideo',
|
||||
value: function _showInstagramVideo(id, $containerForElement) {
|
||||
// instagram load their content into iframe's so this can be put straight into the element
|
||||
var width = this._$element.data('width') || 612;
|
||||
var height = width + 80;
|
||||
id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash
|
||||
$containerForElement.html('<iframe width="' + width + '" height="' + height + '" src="' + id + 'embed/" frameborder="0" allowfullscreen></iframe>');
|
||||
this._resize(width, height);
|
||||
this._config.onContentLoaded.call(this);
|
||||
if (this._$modalArrows) //hide the arrows when showing video
|
||||
this._$modalArrows.css('display', 'none');
|
||||
this._toggleLoading(false);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_showVideoIframe',
|
||||
value: function _showVideoIframe(url, width, height, $containerForElement) {
|
||||
// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
|
||||
height = height || width; // default to square
|
||||
$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
|
||||
this._resize(width, height);
|
||||
this._config.onContentLoaded.call(this);
|
||||
if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
|
||||
this._toggleLoading(false);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_showHtml5Video',
|
||||
value: function _showHtml5Video(url, $containerForElement) {
|
||||
// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
|
||||
var width = this._$element.data('width') || 560;
|
||||
var height = this._$element.data('height') || width / (560 / 315);
|
||||
$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><video width="' + width + '" height="' + height + '" src="' + url + '" preload="auto" autoplay controls class="embed-responsive-item"></video></div>');
|
||||
this._resize(width, height);
|
||||
this._config.onContentLoaded.call(this);
|
||||
if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
|
||||
this._toggleLoading(false);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_loadRemoteContent',
|
||||
value: function _loadRemoteContent(url, $containerForElement) {
|
||||
var _this3 = this;
|
||||
|
||||
var width = this._$element.data('width') || 560;
|
||||
var height = this._$element.data('height') || 560;
|
||||
|
||||
var disableExternalCheck = this._$element.data('disableExternalCheck') || false;
|
||||
this._toggleLoading(false);
|
||||
|
||||
// external urls are loading into an iframe
|
||||
// local ajax can be loaded into the container itself
|
||||
if (!disableExternalCheck && !this._isExternal(url)) {
|
||||
$containerForElement.load(url, $.proxy(function () {
|
||||
return _this3._$element.trigger('loaded.bs.modal');l;
|
||||
}));
|
||||
} else {
|
||||
$containerForElement.html('<iframe src="' + url + '" frameborder="0" allowfullscreen></iframe>');
|
||||
this._config.onContentLoaded.call(this);
|
||||
}
|
||||
|
||||
if (this._$modalArrows) //hide the arrows when remote content
|
||||
this._$modalArrows.css('display', 'none');
|
||||
|
||||
this._resize(width, height);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_isExternal',
|
||||
value: function _isExternal(url) {
|
||||
var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
|
||||
if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
|
||||
|
||||
if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(':(' + ({
|
||||
"http:": 80,
|
||||
"https:": 443
|
||||
})[location.protocol] + ')?$'), "") !== location.host) return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
}, {
|
||||
key: '_error',
|
||||
value: function _error(message) {
|
||||
console.error(message);
|
||||
this._containerToUse().html(message);
|
||||
this._resize(300, 300);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_preloadImageByIndex',
|
||||
value: function _preloadImageByIndex(startIndex, numberOfTimes) {
|
||||
|
||||
if (!this._$galleryItems) return;
|
||||
|
||||
var next = $(this._$galleryItems.get(startIndex), false);
|
||||
if (typeof next == 'undefined') return;
|
||||
|
||||
var src = next.attr('data-remote') || next.attr('href');
|
||||
if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false);
|
||||
|
||||
if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1);
|
||||
}
|
||||
}, {
|
||||
key: '_preloadImage',
|
||||
value: function _preloadImage(src, $containerForImage) {
|
||||
var _this4 = this;
|
||||
|
||||
$containerForImage = $containerForImage || false;
|
||||
|
||||
var img = new Image();
|
||||
if ($containerForImage) {
|
||||
(function () {
|
||||
|
||||
// if loading takes > 200ms show a loader
|
||||
var loadingTimeout = setTimeout(function () {
|
||||
$containerForImage.append(_this4._config.loadingMessage);
|
||||
}, 200);
|
||||
|
||||
img.onload = function () {
|
||||
if (loadingTimeout) clearTimeout(loadingTimeout);
|
||||
loadingTimeout = null;
|
||||
var image = $('<img />');
|
||||
image.attr('src', img.src);
|
||||
image.addClass('img-fluid');
|
||||
|
||||
// backward compatibility for bootstrap v3
|
||||
image.css('width', '100%');
|
||||
|
||||
$containerForImage.html(image);
|
||||
if (_this4._$modalArrows) _this4._$modalArrows.css('display', ''); // remove display to default to css property
|
||||
|
||||
_this4._resize(img.width, img.height);
|
||||
_this4._toggleLoading(false);
|
||||
return _this4._config.onContentLoaded.call(_this4);
|
||||
};
|
||||
img.onerror = function () {
|
||||
_this4._toggleLoading(false);
|
||||
return _this4._error(_this4._config.strings.fail + (' ' + src));
|
||||
};
|
||||
})();
|
||||
}
|
||||
|
||||
img.src = src;
|
||||
return img;
|
||||
}
|
||||
}, {
|
||||
key: '_swipeGesure',
|
||||
value: function _swipeGesure() {
|
||||
if (this._touchendX < this._touchstartX) {
|
||||
return this.navigateRight();
|
||||
}
|
||||
if (this._touchendX > this._touchstartX) {
|
||||
return this.navigateLeft();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_resize',
|
||||
value: function _resize(width, height) {
|
||||
|
||||
height = height || width;
|
||||
this._wantedWidth = width;
|
||||
this._wantedHeight = height;
|
||||
|
||||
// if width > the available space, scale down the expected width and height
|
||||
var widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right;
|
||||
var maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth);
|
||||
if (width + widthBorderAndPadding > maxWidth) {
|
||||
height = (maxWidth - widthBorderAndPadding) / width * height;
|
||||
width = maxWidth;
|
||||
} else width = width + widthBorderAndPadding;
|
||||
|
||||
var headerHeight = 0,
|
||||
footerHeight = 0;
|
||||
|
||||
// as the resize is performed the modal is show, the calculate might fail
|
||||
// if so, default to the default sizes
|
||||
if (this._footerIsShown) footerHeight = this._$modalFooter.outerHeight(true) || 55;
|
||||
|
||||
if (this._titleIsShown) headerHeight = this._$modalHeader.outerHeight(true) || 67;
|
||||
|
||||
var borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top;
|
||||
|
||||
//calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins
|
||||
var margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));
|
||||
|
||||
var maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight);
|
||||
if (height > maxHeight) {
|
||||
// if height > the available height, scale down the width
|
||||
var factor = Math.min(maxHeight / height, 1);
|
||||
width = Math.ceil(factor * width);
|
||||
}
|
||||
|
||||
this._$lightboxContainer.css('height', maxHeight);
|
||||
this._$modalDialog.css('width', 'auto').css('maxWidth', width);
|
||||
|
||||
var modal = this._$modal.data('bs.modal');
|
||||
if (modal) {
|
||||
// v4 method is mistakenly protected
|
||||
try {
|
||||
modal._handleUpdate();
|
||||
} catch (Exception) {
|
||||
modal.handleUpdate();
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
var _this5 = this;
|
||||
|
||||
config = config || {};
|
||||
return this.each(function () {
|
||||
var $this = $(_this5);
|
||||
var _config = $.extend({}, Lightbox.Default, $this.data(), typeof config === 'object' && config);
|
||||
|
||||
new Lightbox(_this5, _config);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return Lightbox;
|
||||
})();
|
||||
|
||||
$.fn[NAME] = Lightbox._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Lightbox;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Lightbox._jQueryInterface;
|
||||
};
|
||||
|
||||
return Lightbox;
|
||||
})(jQuery);
|
||||
//# sourceMappingURL=ekko-lightbox.js.map
|
||||
|
||||
}(jQuery);
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
.ekko-lightbox-nav-overlay a:focus,.ekko-lightbox-nav-overlay a>:focus{outline:0}.ekko-lightbox-container{position:relative}.ekko-lightbox-container>div.ekko-lightbox-item{position:absolute;top:0;left:0;width:100%;transition:opacity .5s ease-in-out;opacity:1}.ekko-lightbox-nav-overlay{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex}.ekko-lightbox-nav-overlay a{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0;transition:opacity .5s;color:#fff;font-size:30px;z-index:1}.ekko-lightbox-nav-overlay a>*{-ms-flex-positive:1;flex-grow:1}.ekko-lightbox-nav-overlay a span{padding:0 30px}.ekko-lightbox-nav-overlay a:last-child span{text-align:right}.ekko-lightbox-nav-overlay a:hover{text-decoration:none}.ekko-lightbox a:hover{opacity:1;text-decoration:none}.ekko-lightbox .modal-footer{text-align:left}.ekko-lightbox-loader{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.ekko-lightbox-loader>div{width:40px;height:40px;position:relative;text-align:center}.ekko-lightbox-loader>div>div{width:100%;height:100%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;animation:a 2s infinite ease-in-out}.ekko-lightbox-loader>div>div:last-child{animation-delay:-1s}@keyframes a{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}
|
||||
/*# sourceMappingURL=ekko-lightbox.min.css.map */
|
||||
+1
File diff suppressed because one or more lines are too long
Executable
+119
@@ -0,0 +1,119 @@
|
||||
/**
|
||||
* Created by Kausar on 06/10/2016.
|
||||
*/
|
||||
window.marker = null;
|
||||
|
||||
function initialize() {
|
||||
var map;
|
||||
|
||||
var nottingham = new google.maps.LatLng(51.507351, -0.127758);
|
||||
|
||||
var style = [
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{ "saturation": -100 },
|
||||
{ "lightness": -8 },
|
||||
{ "gamma": 1.18 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "road.arterial",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{ "saturation": -100 },
|
||||
{ "gamma": 1 },
|
||||
{ "lightness": -24 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "poi",
|
||||
"elementType": "geometry",
|
||||
"stylers": [
|
||||
{ "saturation": -100 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "administrative",
|
||||
"stylers": [
|
||||
{ "saturation": -100 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "transit",
|
||||
"stylers": [
|
||||
{ "saturation": -100 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "water",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [
|
||||
{ "saturation": -100 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"stylers": [
|
||||
{ "saturation": -100 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "administrative",
|
||||
"stylers": [
|
||||
{ "saturation": -100 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "landscape",
|
||||
"stylers": [
|
||||
{ "saturation": -100 }
|
||||
]
|
||||
}, {
|
||||
"featureType": "poi",
|
||||
"stylers": [
|
||||
{ "saturation": -100 }
|
||||
]
|
||||
}, {
|
||||
}
|
||||
];
|
||||
|
||||
var mapOptions = {
|
||||
// SET THE CENTER
|
||||
center: nottingham,
|
||||
|
||||
// SET THE MAP STYLE & ZOOM LEVEL
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
zoom:9,
|
||||
|
||||
// SET THE BACKGROUND COLOUR
|
||||
backgroundColor:"#000",
|
||||
|
||||
// REMOVE ALL THE CONTROLS EXCEPT ZOOM
|
||||
zoom:17,
|
||||
panControl:false,
|
||||
zoomControl:true,
|
||||
mapTypeControl:false,
|
||||
scaleControl:false,
|
||||
streetViewControl:false,
|
||||
overviewMapControl:false,
|
||||
zoomControlOptions: {
|
||||
style:google.maps.ZoomControlStyle.LARGE
|
||||
}
|
||||
|
||||
}
|
||||
map = new google.maps.Map(document.getElementById('map'), mapOptions);
|
||||
|
||||
// SET THE MAP TYPE
|
||||
var mapType = new google.maps.StyledMapType(style, {name:"Grayscale"});
|
||||
map.mapTypes.set('grey', mapType);
|
||||
map.setMapTypeId('grey');
|
||||
|
||||
//CREATE A CUSTOM PIN ICON
|
||||
var marker_image ='plugins/google-map/images/marker.png';
|
||||
var pinIcon = new google.maps.MarkerImage(marker_image,null,null, null,new google.maps.Size(40, 60));
|
||||
|
||||
marker = new google.maps.Marker({
|
||||
position: nottingham,
|
||||
map: map,
|
||||
icon: pinIcon,
|
||||
title: 'eventre'
|
||||
});
|
||||
}
|
||||
if(($('#map').length)!=0){
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
+1
File diff suppressed because one or more lines are too long
+476
@@ -0,0 +1,476 @@
|
||||
/* global Symbol */
|
||||
// Defining this global in .eslintrc.json would create a danger of using the global
|
||||
// unguarded in another place, it seems safer to define global only for this module
|
||||
|
||||
define( [
|
||||
"./var/arr",
|
||||
"./var/document",
|
||||
"./var/getProto",
|
||||
"./var/slice",
|
||||
"./var/concat",
|
||||
"./var/push",
|
||||
"./var/indexOf",
|
||||
"./var/class2type",
|
||||
"./var/toString",
|
||||
"./var/hasOwn",
|
||||
"./var/fnToString",
|
||||
"./var/ObjectFunctionString",
|
||||
"./var/support",
|
||||
"./core/DOMEval"
|
||||
], function( arr, document, getProto, slice, concat, push, indexOf,
|
||||
class2type, toString, hasOwn, fnToString, ObjectFunctionString,
|
||||
support, DOMEval ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var
|
||||
version = "3.2.1",
|
||||
|
||||
// Define a local copy of jQuery
|
||||
jQuery = function( selector, context ) {
|
||||
|
||||
// The jQuery object is actually just the init constructor 'enhanced'
|
||||
// Need init if jQuery is called (just allow error to be thrown if not included)
|
||||
return new jQuery.fn.init( selector, context );
|
||||
},
|
||||
|
||||
// Support: Android <=4.0 only
|
||||
// Make sure we trim BOM and NBSP
|
||||
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
|
||||
|
||||
// Matches dashed string for camelizing
|
||||
rmsPrefix = /^-ms-/,
|
||||
rdashAlpha = /-([a-z])/g,
|
||||
|
||||
// Used by jQuery.camelCase as callback to replace()
|
||||
fcamelCase = function( all, letter ) {
|
||||
return letter.toUpperCase();
|
||||
};
|
||||
|
||||
jQuery.fn = jQuery.prototype = {
|
||||
|
||||
// The current version of jQuery being used
|
||||
jquery: version,
|
||||
|
||||
constructor: jQuery,
|
||||
|
||||
// The default length of a jQuery object is 0
|
||||
length: 0,
|
||||
|
||||
toArray: function() {
|
||||
return slice.call( this );
|
||||
},
|
||||
|
||||
// Get the Nth element in the matched element set OR
|
||||
// Get the whole matched element set as a clean array
|
||||
get: function( num ) {
|
||||
|
||||
// Return all the elements in a clean array
|
||||
if ( num == null ) {
|
||||
return slice.call( this );
|
||||
}
|
||||
|
||||
// Return just the one element from the set
|
||||
return num < 0 ? this[ num + this.length ] : this[ num ];
|
||||
},
|
||||
|
||||
// Take an array of elements and push it onto the stack
|
||||
// (returning the new matched element set)
|
||||
pushStack: function( elems ) {
|
||||
|
||||
// Build a new jQuery matched element set
|
||||
var ret = jQuery.merge( this.constructor(), elems );
|
||||
|
||||
// Add the old object onto the stack (as a reference)
|
||||
ret.prevObject = this;
|
||||
|
||||
// Return the newly-formed element set
|
||||
return ret;
|
||||
},
|
||||
|
||||
// Execute a callback for every element in the matched set.
|
||||
each: function( callback ) {
|
||||
return jQuery.each( this, callback );
|
||||
},
|
||||
|
||||
map: function( callback ) {
|
||||
return this.pushStack( jQuery.map( this, function( elem, i ) {
|
||||
return callback.call( elem, i, elem );
|
||||
} ) );
|
||||
},
|
||||
|
||||
slice: function() {
|
||||
return this.pushStack( slice.apply( this, arguments ) );
|
||||
},
|
||||
|
||||
first: function() {
|
||||
return this.eq( 0 );
|
||||
},
|
||||
|
||||
last: function() {
|
||||
return this.eq( -1 );
|
||||
},
|
||||
|
||||
eq: function( i ) {
|
||||
var len = this.length,
|
||||
j = +i + ( i < 0 ? len : 0 );
|
||||
return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
|
||||
},
|
||||
|
||||
end: function() {
|
||||
return this.prevObject || this.constructor();
|
||||
},
|
||||
|
||||
// For internal use only.
|
||||
// Behaves like an Array's method, not like a jQuery method.
|
||||
push: push,
|
||||
sort: arr.sort,
|
||||
splice: arr.splice
|
||||
};
|
||||
|
||||
jQuery.extend = jQuery.fn.extend = function() {
|
||||
var options, name, src, copy, copyIsArray, clone,
|
||||
target = arguments[ 0 ] || {},
|
||||
i = 1,
|
||||
length = arguments.length,
|
||||
deep = false;
|
||||
|
||||
// Handle a deep copy situation
|
||||
if ( typeof target === "boolean" ) {
|
||||
deep = target;
|
||||
|
||||
// Skip the boolean and the target
|
||||
target = arguments[ i ] || {};
|
||||
i++;
|
||||
}
|
||||
|
||||
// Handle case when target is a string or something (possible in deep copy)
|
||||
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
|
||||
target = {};
|
||||
}
|
||||
|
||||
// Extend jQuery itself if only one argument is passed
|
||||
if ( i === length ) {
|
||||
target = this;
|
||||
i--;
|
||||
}
|
||||
|
||||
for ( ; i < length; i++ ) {
|
||||
|
||||
// Only deal with non-null/undefined values
|
||||
if ( ( options = arguments[ i ] ) != null ) {
|
||||
|
||||
// Extend the base object
|
||||
for ( name in options ) {
|
||||
src = target[ name ];
|
||||
copy = options[ name ];
|
||||
|
||||
// Prevent never-ending loop
|
||||
if ( target === copy ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Recurse if we're merging plain objects or arrays
|
||||
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
|
||||
( copyIsArray = Array.isArray( copy ) ) ) ) {
|
||||
|
||||
if ( copyIsArray ) {
|
||||
copyIsArray = false;
|
||||
clone = src && Array.isArray( src ) ? src : [];
|
||||
|
||||
} else {
|
||||
clone = src && jQuery.isPlainObject( src ) ? src : {};
|
||||
}
|
||||
|
||||
// Never move original objects, clone them
|
||||
target[ name ] = jQuery.extend( deep, clone, copy );
|
||||
|
||||
// Don't bring in undefined values
|
||||
} else if ( copy !== undefined ) {
|
||||
target[ name ] = copy;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Return the modified object
|
||||
return target;
|
||||
};
|
||||
|
||||
jQuery.extend( {
|
||||
|
||||
// Unique for each copy of jQuery on the page
|
||||
expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
|
||||
|
||||
// Assume jQuery is ready without the ready module
|
||||
isReady: true,
|
||||
|
||||
error: function( msg ) {
|
||||
throw new Error( msg );
|
||||
},
|
||||
|
||||
noop: function() {},
|
||||
|
||||
isFunction: function( obj ) {
|
||||
return jQuery.type( obj ) === "function";
|
||||
},
|
||||
|
||||
isWindow: function( obj ) {
|
||||
return obj != null && obj === obj.window;
|
||||
},
|
||||
|
||||
isNumeric: function( obj ) {
|
||||
|
||||
// As of jQuery 3.0, isNumeric is limited to
|
||||
// strings and numbers (primitives or objects)
|
||||
// that can be coerced to finite numbers (gh-2662)
|
||||
var type = jQuery.type( obj );
|
||||
return ( type === "number" || type === "string" ) &&
|
||||
|
||||
// parseFloat NaNs numeric-cast false positives ("")
|
||||
// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
|
||||
// subtraction forces infinities to NaN
|
||||
!isNaN( obj - parseFloat( obj ) );
|
||||
},
|
||||
|
||||
isPlainObject: function( obj ) {
|
||||
var proto, Ctor;
|
||||
|
||||
// Detect obvious negatives
|
||||
// Use toString instead of jQuery.type to catch host objects
|
||||
if ( !obj || toString.call( obj ) !== "[object Object]" ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
proto = getProto( obj );
|
||||
|
||||
// Objects with no prototype (e.g., `Object.create( null )`) are plain
|
||||
if ( !proto ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Objects with prototype are plain iff they were constructed by a global Object function
|
||||
Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
|
||||
return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
|
||||
},
|
||||
|
||||
isEmptyObject: function( obj ) {
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
// See https://github.com/eslint/eslint/issues/6125
|
||||
var name;
|
||||
|
||||
for ( name in obj ) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
type: function( obj ) {
|
||||
if ( obj == null ) {
|
||||
return obj + "";
|
||||
}
|
||||
|
||||
// Support: Android <=2.3 only (functionish RegExp)
|
||||
return typeof obj === "object" || typeof obj === "function" ?
|
||||
class2type[ toString.call( obj ) ] || "object" :
|
||||
typeof obj;
|
||||
},
|
||||
|
||||
// Evaluates a script in a global context
|
||||
globalEval: function( code ) {
|
||||
DOMEval( code );
|
||||
},
|
||||
|
||||
// Convert dashed to camelCase; used by the css and data modules
|
||||
// Support: IE <=9 - 11, Edge 12 - 13
|
||||
// Microsoft forgot to hump their vendor prefix (#9572)
|
||||
camelCase: function( string ) {
|
||||
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
|
||||
},
|
||||
|
||||
each: function( obj, callback ) {
|
||||
var length, i = 0;
|
||||
|
||||
if ( isArrayLike( obj ) ) {
|
||||
length = obj.length;
|
||||
for ( ; i < length; i++ ) {
|
||||
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for ( i in obj ) {
|
||||
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return obj;
|
||||
},
|
||||
|
||||
// Support: Android <=4.0 only
|
||||
trim: function( text ) {
|
||||
return text == null ?
|
||||
"" :
|
||||
( text + "" ).replace( rtrim, "" );
|
||||
},
|
||||
|
||||
// results is for internal usage only
|
||||
makeArray: function( arr, results ) {
|
||||
var ret = results || [];
|
||||
|
||||
if ( arr != null ) {
|
||||
if ( isArrayLike( Object( arr ) ) ) {
|
||||
jQuery.merge( ret,
|
||||
typeof arr === "string" ?
|
||||
[ arr ] : arr
|
||||
);
|
||||
} else {
|
||||
push.call( ret, arr );
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
inArray: function( elem, arr, i ) {
|
||||
return arr == null ? -1 : indexOf.call( arr, elem, i );
|
||||
},
|
||||
|
||||
// Support: Android <=4.0 only, PhantomJS 1 only
|
||||
// push.apply(_, arraylike) throws on ancient WebKit
|
||||
merge: function( first, second ) {
|
||||
var len = +second.length,
|
||||
j = 0,
|
||||
i = first.length;
|
||||
|
||||
for ( ; j < len; j++ ) {
|
||||
first[ i++ ] = second[ j ];
|
||||
}
|
||||
|
||||
first.length = i;
|
||||
|
||||
return first;
|
||||
},
|
||||
|
||||
grep: function( elems, callback, invert ) {
|
||||
var callbackInverse,
|
||||
matches = [],
|
||||
i = 0,
|
||||
length = elems.length,
|
||||
callbackExpect = !invert;
|
||||
|
||||
// Go through the array, only saving the items
|
||||
// that pass the validator function
|
||||
for ( ; i < length; i++ ) {
|
||||
callbackInverse = !callback( elems[ i ], i );
|
||||
if ( callbackInverse !== callbackExpect ) {
|
||||
matches.push( elems[ i ] );
|
||||
}
|
||||
}
|
||||
|
||||
return matches;
|
||||
},
|
||||
|
||||
// arg is for internal usage only
|
||||
map: function( elems, callback, arg ) {
|
||||
var length, value,
|
||||
i = 0,
|
||||
ret = [];
|
||||
|
||||
// Go through the array, translating each of the items to their new values
|
||||
if ( isArrayLike( elems ) ) {
|
||||
length = elems.length;
|
||||
for ( ; i < length; i++ ) {
|
||||
value = callback( elems[ i ], i, arg );
|
||||
|
||||
if ( value != null ) {
|
||||
ret.push( value );
|
||||
}
|
||||
}
|
||||
|
||||
// Go through every key on the object,
|
||||
} else {
|
||||
for ( i in elems ) {
|
||||
value = callback( elems[ i ], i, arg );
|
||||
|
||||
if ( value != null ) {
|
||||
ret.push( value );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flatten any nested arrays
|
||||
return concat.apply( [], ret );
|
||||
},
|
||||
|
||||
// A global GUID counter for objects
|
||||
guid: 1,
|
||||
|
||||
// Bind a function to a context, optionally partially applying any
|
||||
// arguments.
|
||||
proxy: function( fn, context ) {
|
||||
var tmp, args, proxy;
|
||||
|
||||
if ( typeof context === "string" ) {
|
||||
tmp = fn[ context ];
|
||||
context = fn;
|
||||
fn = tmp;
|
||||
}
|
||||
|
||||
// Quick check to determine if target is callable, in the spec
|
||||
// this throws a TypeError, but we will just return undefined.
|
||||
if ( !jQuery.isFunction( fn ) ) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// Simulated bind
|
||||
args = slice.call( arguments, 2 );
|
||||
proxy = function() {
|
||||
return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
|
||||
};
|
||||
|
||||
// Set the guid of unique handler to the same of original handler, so it can be removed
|
||||
proxy.guid = fn.guid = fn.guid || jQuery.guid++;
|
||||
|
||||
return proxy;
|
||||
},
|
||||
|
||||
now: Date.now,
|
||||
|
||||
// jQuery.support is not used in Core but other projects attach their
|
||||
// properties to it so it needs to exist.
|
||||
support: support
|
||||
} );
|
||||
|
||||
if ( typeof Symbol === "function" ) {
|
||||
jQuery.fn[ Symbol.iterator ] = arr[ Symbol.iterator ];
|
||||
}
|
||||
|
||||
// Populate the class2type map
|
||||
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
|
||||
function( i, name ) {
|
||||
class2type[ "[object " + name + "]" ] = name.toLowerCase();
|
||||
} );
|
||||
|
||||
function isArrayLike( obj ) {
|
||||
|
||||
// Support: real iOS 8.2 only (not reproducible in simulator)
|
||||
// `in` check used to prevent JIT error (gh-2145)
|
||||
// hasOwn isn't used here due to false negatives
|
||||
// regarding Nodelist length in IE
|
||||
var length = !!obj && "length" in obj && obj.length,
|
||||
type = jQuery.type( obj );
|
||||
|
||||
if ( type === "function" || jQuery.isWindow( obj ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return type === "array" || length === 0 ||
|
||||
typeof length === "number" && length > 0 && ( length - 1 ) in obj;
|
||||
}
|
||||
|
||||
return jQuery;
|
||||
} );
|
||||
+10253
File diff suppressed because it is too large
Load Diff
+4
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+8160
File diff suppressed because it is too large
Load Diff
+4
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
Executable
+292
@@ -0,0 +1,292 @@
|
||||
slick
|
||||
-------
|
||||
|
||||
[1]: <https://github.com/kenwheeler/slick>
|
||||
|
||||
_the last carousel you'll ever need_
|
||||
|
||||
#### Demo
|
||||
|
||||
[http://kenwheeler.github.io/slick](http://kenwheeler.github.io/slick/)
|
||||
|
||||
#### CDN
|
||||
|
||||
To start working with Slick right away, there's a couple of CDN choices availabile
|
||||
to serve the files as close, and fast as possible to your users:
|
||||
|
||||
- https://cdnjs.com/libraries/slick-carousel
|
||||
- https://www.jsdelivr.com/projects/jquery.slick
|
||||
|
||||
##### Example using jsDelivr
|
||||
|
||||
Just add a link to the css file in your `<head>`:
|
||||
|
||||
```html
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>
|
||||
```
|
||||
|
||||
Then, before your closing ```<body>``` tag add:
|
||||
|
||||
```html
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
|
||||
```
|
||||
|
||||
#### Package Managers
|
||||
|
||||
```sh
|
||||
# Bower
|
||||
bower install --save slick-carousel
|
||||
|
||||
# NPM
|
||||
npm install slick-carousel
|
||||
```
|
||||
|
||||
#### Contributing
|
||||
|
||||
PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.
|
||||
|
||||
### Data Attribute Settings
|
||||
|
||||
In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
|
||||
<div><h3>1</h3></div>
|
||||
<div><h3>2</h3></div>
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
<div><h3>5</h3></div>
|
||||
<div><h3>6</h3></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Settings
|
||||
|
||||
Option | Type | Default | Description
|
||||
------ | ---- | ------- | -----------
|
||||
accessibility | boolean | true | Enables tabbing and arrow key navigation. Unless `autoplay: true`, sets browser focus to current slide (or first of current slide set, if multiple `slidesToShow`) after slide change. For full a11y compliance enable focusOnChange in addition to this.
|
||||
adaptiveHeight | boolean | false | Adapts slider height to the current slide
|
||||
appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
|
||||
appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
|
||||
arrows | boolean | true | Enable Next/Prev arrows
|
||||
asNavFor | string | $(element) | Enables syncing of multiple sliders
|
||||
autoplay | boolean | false | Enables auto play of slides
|
||||
autoplaySpeed | int | 3000 | Auto play change interval
|
||||
centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
|
||||
centerPadding | string | '50px' | Side padding when in center mode. (px or %)
|
||||
cssEase | string | 'ease' | CSS3 easing
|
||||
customPaging | function | n/a | Custom paging templates. See source for use example.
|
||||
dots | boolean | false | Current slide indicator dots
|
||||
dotsClass | string | 'slick-dots' | Class for slide indicator dots container
|
||||
draggable | boolean | true | Enables desktop dragging
|
||||
easing | string | 'linear' | animate() fallback easing
|
||||
edgeFriction | integer | 0.15 | Resistance when swiping edges of non-infinite carousels
|
||||
fade | boolean | false | Enables fade
|
||||
focusOnSelect | boolean | false | Enable focus on selected element (click)
|
||||
focusOnChange | boolean | false | Puts focus on slide after change
|
||||
infinite | boolean | true | Infinite looping
|
||||
initialSlide | integer | 0 | Slide to start on
|
||||
lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique. 'ondemand' will load the image as soon as you slide to it, 'progressive' loads one image after the other when the page loads.
|
||||
mobileFirst | boolean | false | Responsive settings use mobile first calculation
|
||||
nextArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<button type="button" class="slick-next">Next</button>` | Allows you to select a node or customize the HTML for the "Next" arrow.
|
||||
pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered
|
||||
pauseOnFocus | boolean | true | Pauses autoplay when slider is focussed
|
||||
pauseOnHover | boolean | true | Pauses autoplay on hover
|
||||
prevArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<button type="button" class="slick-prev">Previous</button>` | Allows you to select a node or customize the HTML for the "Previous" arrow.
|
||||
respondTo | string | 'window' | Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two).
|
||||
responsive | array | null | Array of objects [containing breakpoints and settings objects (see example)](#responsive-option-example). Enables settings at given `breakpoint`. Set `settings` to "unslick" instead of an object to disable slick at a given breakpoint.
|
||||
rows | int | 1 | Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
|
||||
rtl | boolean | false | Change the slider's direction to become right-to-left
|
||||
slide | string | '' | Slide element query
|
||||
slidesPerRow | int | 1 | With grid mode initialized via the rows option, this sets how many slides are in each grid row.
|
||||
slidesToScroll | int | 1 | # of slides to scroll at a time
|
||||
slidesToShow | int | 1 | # of slides to show at a time
|
||||
speed | int | 300 | Transition speed
|
||||
swipe | boolean | true | Enables touch swipe
|
||||
swipeToSlide | boolean | false | Swipe to slide irrespective of slidesToScroll
|
||||
touchMove | boolean | true | Enables slide moving with touch
|
||||
touchThreshold | int | 5 | To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
|
||||
useCSS | boolean | true | Enable/Disable CSS Transitions
|
||||
useTransform | boolean | true | Enable/Disable CSS Transforms
|
||||
variableWidth | boolean | false | Disables automatic slide width calculation
|
||||
vertical | boolean | false | Vertical slide direction
|
||||
verticalSwiping | boolean | false | Changes swipe direction to vertical
|
||||
waitForAnimate | boolean | true | Ignores requests to advance the slide while animating
|
||||
zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower
|
||||
|
||||
##### Responsive Option Example
|
||||
The responsive option, and value, is quite unique and powerful.
|
||||
You can use it like so:
|
||||
|
||||
```javascript
|
||||
$(".slider").slick({
|
||||
|
||||
// normal options...
|
||||
infinite: false,
|
||||
|
||||
// the magic
|
||||
responsive: [{
|
||||
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
infinite: true
|
||||
}
|
||||
|
||||
}, {
|
||||
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
dots: true
|
||||
}
|
||||
|
||||
}, {
|
||||
|
||||
breakpoint: 300,
|
||||
settings: "unslick" // destroys slick
|
||||
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
In slick 1.4, callback methods were deprecated and replaced with events. Use them before the initialization of slick as shown below:
|
||||
|
||||
```javascript
|
||||
// On swipe event
|
||||
$('.your-element').on('swipe', function(event, slick, direction){
|
||||
console.log(direction);
|
||||
// left
|
||||
});
|
||||
|
||||
// On edge hit
|
||||
$('.your-element').on('edge', function(event, slick, direction){
|
||||
console.log('edge was hit')
|
||||
});
|
||||
|
||||
// On before slide change
|
||||
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
|
||||
console.log(nextSlide);
|
||||
});
|
||||
```
|
||||
|
||||
Event | Params | Description
|
||||
------ | -------- | -----------
|
||||
afterChange | event, slick, currentSlide | After slide change callback
|
||||
beforeChange | event, slick, currentSlide, nextSlide | Before slide change callback
|
||||
breakpoint | event, slick, breakpoint | Fires after a breakpoint is hit
|
||||
destroy | event, slick | When slider is destroyed, or unslicked.
|
||||
edge | event, slick, direction | Fires when an edge is overscrolled in non-infinite mode.
|
||||
init | event, slick | When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.
|
||||
reInit | event, slick | Every time Slick (re-)initializes callback
|
||||
setPosition | event, slick | Every time Slick recalculates position
|
||||
swipe | event, slick, direction | Fires after swipe/drag
|
||||
lazyLoaded | event, slick, image, imageSource | Fires after image loads lazily
|
||||
lazyLoadError | event, slick, image, imageSource | Fires after image fails to load
|
||||
|
||||
|
||||
#### Methods
|
||||
|
||||
Methods are called on slick instances through the slick method itself in version 1.4, see below:
|
||||
|
||||
```javascript
|
||||
// Add a slide
|
||||
$('.your-element').slick('slickAdd',"<div></div>");
|
||||
|
||||
// Get the current slide
|
||||
var currentSlide = $('.your-element').slick('slickCurrentSlide');
|
||||
```
|
||||
|
||||
This new syntax allows you to call any internal slick method as well:
|
||||
|
||||
```javascript
|
||||
// Manually refresh positioning of slick
|
||||
$('.your-element').slick('setPosition');
|
||||
```
|
||||
|
||||
|
||||
Method | Argument | Description
|
||||
------ | -------- | -----------
|
||||
`slick` | options : object | Initializes Slick
|
||||
`unslick` | | Destroys Slick
|
||||
`slickNext` | | Triggers next slide
|
||||
`slickPrev` | | Triggers previous slide
|
||||
`slickPause` | | Pause Autoplay
|
||||
`slickPlay` | | Start Autoplay (_will also set `autoplay` option to `true`_)
|
||||
`slickGoTo` | index : int, dontAnimate : bool | Goes to slide by index, skipping animation if second parameter is set to true
|
||||
`slickCurrentSlide` | | Returns the current slide index
|
||||
`slickAdd` | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
|
||||
`slickRemove` | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
|
||||
`slickFilter` | filter : selector or function | Filters slides using jQuery .filter syntax
|
||||
`slickUnfilter` | | Removes applied filter
|
||||
`slickGetOption` | option : string(option name) | Gets an option value.
|
||||
`slickSetOption` | change an option, `refresh` is always `boolean` and will update UI changes...
|
||||
| `option, value, refresh` | change a [single `option`](https://github.com/kenwheeler/slick#settings) to given `value`; `refresh` is optional.
|
||||
| `"responsive", [{ breakpoint: n, settings: {} }, ... ], refresh` | change or add [whole sets of responsive options](#responsive-option-example)
|
||||
| `{ option: value, option: value, ... }, refresh` | change [multiple `option`s](https://github.com/kenwheeler/slick#settings) to corresponding `value`s.
|
||||
|
||||
|
||||
#### Example
|
||||
|
||||
Initialize with:
|
||||
|
||||
```javascript
|
||||
$(element).slick({
|
||||
dots: true,
|
||||
speed: 500
|
||||
});
|
||||
```
|
||||
|
||||
Change the speed with:
|
||||
|
||||
```javascript
|
||||
$(element).slick('slickSetOption', 'speed', 5000, true);
|
||||
```
|
||||
|
||||
Destroy with:
|
||||
|
||||
```javascript
|
||||
$(element).slick('unslick');
|
||||
```
|
||||
|
||||
|
||||
#### Sass Variables
|
||||
|
||||
Variable | Type | Default | Description
|
||||
------ | ---- | ------- | -----------
|
||||
$slick-font-path | string | "./fonts/" | Directory path for the slick icon font
|
||||
$slick-font-family | string | "slick" | Font-family for slick icon font
|
||||
$slick-loader-path | string | "./" | Directory path for the loader image
|
||||
$slick-arrow-color | color | white | Color of the left/right arrow icons
|
||||
$slick-dot-color | color | black | Color of the navigation dots
|
||||
$slick-dot-color-active | color | $slick-dot-color | Color of the active navigation dot
|
||||
$slick-prev-character | string | '\2190' | Unicode character code for the previous arrow icon
|
||||
$slick-next-character | string | '\2192' | Unicode character code for the next arrow icon
|
||||
$slick-dot-character | string | '\2022' | Unicode character code for the navigation dot icon
|
||||
$slick-dot-size | pixels | 6px | Size of the navigation dots
|
||||
|
||||
#### Browser support
|
||||
|
||||
Slick works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
|
||||
|
||||
#### Dependencies
|
||||
|
||||
jQuery 1.7
|
||||
|
||||
#### License
|
||||
|
||||
Copyright (c) 2017 Ken Wheeler
|
||||
|
||||
Licensed under the MIT license.
|
||||
|
||||
Free as in Bacon.
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Executable
BIN
Binary file not shown.
Executable
+14
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by Fontastic.me</metadata>
|
||||
<defs>
|
||||
<font id="slick" horiz-adv-x="512">
|
||||
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
|
||||
<glyph unicode="→" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="←" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="•" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="a" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
+15
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
slick-animation.js
|
||||
|
||||
Version: 0.3.3 Beta
|
||||
Author: Marvin Hübner
|
||||
Docs: https://github.com/marvinhuebner/slick-animation
|
||||
Repo: https://github.com/marvinhuebner/slick-animation
|
||||
*/
|
||||
!function(a){a.fn.slickAnimation=function(){function n(a,n,t,i,o){o="undefined"!=typeof o?o:!1,1==n.opacity?(a.addClass(t),a.addClass(i)):(a.removeClass(t),a.removeClass(i)),o&&a.css(n)}function t(a,n){return a?1e3*a+1e3:n?1e3*n:a||n?1e3*a+1e3*n:1e3}function i(a,n,t){var i=["animation-"+n,"-webkit-animation-"+n,"-moz-animation-"+n,"-o-animation-"+n,"-ms-animation-"+n],o={}
|
||||
i.forEach(function(a){o[a]=t+"s"}),a.css(o)}var o=a(this),e=o.find(".slick-list .slick-track > div"),s=o.find('[data-slick-index="0"]'),r="animated",c={opacity:"1"},d={opacity:"0"}
|
||||
return e.each(function(){var e=a(this)
|
||||
e.find("[data-animation-in]").each(function(){var u=a(this)
|
||||
u.css(d)
|
||||
var l=u.attr("data-animation-in"),f=u.attr("data-animation-out"),h=u.attr("data-delay-in"),m=u.attr("data-duration-in"),y=u.attr("data-delay-out"),C=u.attr("data-duration-out")
|
||||
f?(s.length>0&&e.hasClass("slick-current")&&(n(u,c,l,r,!0),h&&i(u,"delay",h),m&&i(u,"duration",m),setTimeout(function(){n(u,d,l,r),n(u,c,f,r),y&&i(u,"delay",y),C&&i(u,"duration",C)},t(h,m))),o.on("afterChange",function(a,o,s){e.hasClass("slick-current")&&(n(u,c,l,r,!0),h&&i(u,"delay",h),m&&i(u,"duration",m),setTimeout(function(){n(u,d,l,r),n(u,c,f,r),y&&i(u,"delay",y),C&&i(u,"duration",C)},t(h,m)))}),o.on("beforeChange",function(a,t,i){n(u,d,f,r,!0)})):(s.length>0&&e.hasClass("slick-current")&&(n(u,c,l,r,!0),h&&i(u,"delay",h),m&&i(u,"duration",m)),o.on("afterChange",function(a,t,o){e.hasClass("slick-current")&&(n(u,c,l,r,!0),h&&i(u,"delay",h),m&&i(u,"duration",m))}),o.on("beforeChange",function(a,t,i){n(u,d,l,r,!0)}))})}),this}}(jQuery)
|
||||
Executable
+205
@@ -0,0 +1,205 @@
|
||||
@charset 'UTF-8';
|
||||
/* Slider */
|
||||
.slick-loading .slick-list
|
||||
{
|
||||
background: #fff url('./ajax-loader.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@font-face
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
src: url('./fonts/slick.eot');
|
||||
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||
font-display: swap;
|
||||
}
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover,
|
||||
.slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus
|
||||
{
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover:before,
|
||||
.slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before
|
||||
{
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: .75;
|
||||
color: white;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev
|
||||
{
|
||||
left: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-prev
|
||||
{
|
||||
right: -25px;
|
||||
left: auto;
|
||||
}
|
||||
.slick-prev:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
[dir='rtl'] .slick-prev:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.slick-next
|
||||
{
|
||||
right: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-next
|
||||
{
|
||||
right: auto;
|
||||
left: -25px;
|
||||
}
|
||||
.slick-next:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
[dir='rtl'] .slick-next:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots
|
||||
{
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.slick-dots li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-dots li button:hover,
|
||||
.slick-dots li button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before,
|
||||
.slick-dots li button:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '•';
|
||||
text-align: center;
|
||||
|
||||
opacity: .25;
|
||||
color: black;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before
|
||||
{
|
||||
opacity: .75;
|
||||
color: black;
|
||||
}
|
||||
Executable
+119
@@ -0,0 +1,119 @@
|
||||
/* Slider */
|
||||
.slick-slider
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging
|
||||
{
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list
|
||||
{
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track
|
||||
{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before,
|
||||
.slick-track:after
|
||||
{
|
||||
display: table;
|
||||
|
||||
content: '';
|
||||
}
|
||||
.slick-track:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide
|
||||
{
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
[dir='rtl'] .slick-slide
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img
|
||||
{
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide
|
||||
{
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
+589
@@ -0,0 +1,589 @@
|
||||
/*!
|
||||
* smooth-scroll v12.1.3: 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 viewport's height
|
||||
* @returns {Number}
|
||||
*/
|
||||
var getViewportHeight = function() {
|
||||
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
};
|
||||
|
||||
/**
|
||||
* Determine the document's height
|
||||
* @returns {Number}
|
||||
*/
|
||||
var getDocumentHeight = function () {
|
||||
return parseInt(window.getComputedStyle(document.documentElement).height, 10);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 Math.min(location, getDocumentHeight() - getViewportHeight());
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
// startAnimateScroll();
|
||||
smoothScroll.cancelScroll();
|
||||
window.requestAnimationFrame(loopAnimateScroll);
|
||||
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle has change event
|
||||
*/
|
||||
var hashChangeHandler = function (event) {
|
||||
|
||||
// Get hash from URL
|
||||
var hash;
|
||||
try {
|
||||
hash = escapeCharacters(decodeURIComponent(window.location.hash));
|
||||
} catch(e) {
|
||||
hash = escapeCharacters(window.location.hash);
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
}));
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
/*! smooth-scroll v12.1.3 | (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.documentElement.clientHeight,e.innerHeight||0)},c=function(){return parseInt(e.getComputedStyle(document.documentElement).height,10)},s=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),Math.min(o,c()-u())},l=function(e){return e?a(e)+e.offsetTop:0},f=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))},d=function(t){return!!("matchMedia"in e&&e.matchMedia("(prefers-reduced-motion)").matches)};return function(a,u){var h,m,g,p,v,y,b,I={};I.cancelScroll=function(){cancelAnimationFrame(b)},I.animateScroll=function(t,a,r){var u=o(h||n,r||{}),d="[object Number]"===Object.prototype.toString.call(t),m=d||!t.tagName?null:t;if(d||m){var g=e.pageYOffset;u.header&&!p&&(p=document.querySelector(u.header)),v||(v=l(p));var y,b,S,E=d?t:s(m,v,parseInt("function"==typeof u.offset?u.offset():u.offset,10)),O=E-g,A=c(),C=0,w=function(n,o){var r=e.pageYOffset;if(n==o||r==o||(g<o&&e.innerHeight+r)>=A)return I.cancelScroll(),f(t,o,d),u.after(t,a),y=null,!0},Q=function(t){y||(y=t),C+=t-y,b=C/parseInt(u.speed,10),b=b>1?1:b,S=g+O*i(u,b),e.scrollTo(0,Math.floor(S)),w(S,E)||(e.requestAnimationFrame(Q),y=t)};0===e.pageYOffset&&e.scrollTo(0,0),u.before(t,a),I.cancelScroll(),e.requestAnimationFrame(Q)}};var S=function(t){try{r(decodeURIComponent(e.location.hash))}catch(t){r(e.location.hash)}m&&(m.id=m.getAttribute("data-scroll-id"),I.animateScroll(m,g),m=null,g=null)},E=function(t){if(!d()&&0===t.button&&!t.metaKey&&!t.ctrlKey&&(g=t.target.closest(a))&&"a"===g.tagName.toLowerCase()&&!t.target.closest(h.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(),m=document.body;var o=m.id?m.id:"smooth-scroll-top";return m.setAttribute("data-scroll-id",o),m.id="",void(e.location.hash.substring(1)===o?S():e.location.hash=o)}m=document.querySelector(n),m&&(m.setAttribute("data-scroll-id",m.id),m.id="",g.hash===e.location.hash&&(t.preventDefault(),S()))}},O=function(e){y||(y=setTimeout((function(){y=null,v=l(p)}),66))};return I.destroy=function(){h&&(document.removeEventListener("click",E,!1),e.removeEventListener("resize",O,!1),I.cancelScroll(),h=null,m=null,g=null,p=null,v=null,y=null,b=null)},I.init=function(a){t&&(I.destroy(),h=o(n,a||{}),p=h.header?document.querySelector(h.header):null,v=l(p),document.addEventListener("click",E,!1),e.addEventListener("hashchange",S,!1),p&&e.addEventListener("resize",O,!1))},I.init(u),I}}));
|
||||
+640
@@ -0,0 +1,640 @@
|
||||
/*!
|
||||
* smooth-scroll v12.1.3: Animate scrolling to anchor links
|
||||
* (c) 2017 Chris Ferdinandi
|
||||
* MIT License
|
||||
* http://github.com/cferdinandi/smooth-scroll
|
||||
*/
|
||||
|
||||
/**
|
||||
* closest() polyfill
|
||||
* @link https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
|
||||
*/
|
||||
if (window.Element && !Element.prototype.closest) {
|
||||
Element.prototype.closest = function(s) {
|
||||
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
|
||||
i,
|
||||
el = this;
|
||||
do {
|
||||
i = matches.length;
|
||||
while (--i >= 0 && matches.item(i) !== el) {}
|
||||
} while ((i < 0) && (el = el.parentElement));
|
||||
return el;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* requestAnimationFrame() polyfill
|
||||
* By Erik Möller. Fixes from Paul Irish and Tino Zijdel.
|
||||
* @link http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
* @link http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
||||
* @license MIT
|
||||
*/
|
||||
(function() {
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] ||
|
||||
window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout((function() { callback(currTime + timeToCall); }),
|
||||
timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
|
||||
if (!window.cancelAnimationFrame) {
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}
|
||||
}());
|
||||
|
||||
(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 viewport's height
|
||||
* @returns {Number}
|
||||
*/
|
||||
var getViewportHeight = function() {
|
||||
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
};
|
||||
|
||||
/**
|
||||
* Determine the document's height
|
||||
* @returns {Number}
|
||||
*/
|
||||
var getDocumentHeight = function () {
|
||||
return parseInt(window.getComputedStyle(document.documentElement).height, 10);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 Math.min(location, getDocumentHeight() - getViewportHeight());
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
// startAnimateScroll();
|
||||
smoothScroll.cancelScroll();
|
||||
window.requestAnimationFrame(loopAnimateScroll);
|
||||
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle has change event
|
||||
*/
|
||||
var hashChangeHandler = function (event) {
|
||||
|
||||
// Get hash from URL
|
||||
var hash;
|
||||
try {
|
||||
hash = escapeCharacters(decodeURIComponent(window.location.hash));
|
||||
} catch(e) {
|
||||
hash = escapeCharacters(window.location.hash);
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
}));
|
||||
+2
File diff suppressed because one or more lines are too long
+5
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||
|
||||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
|
||||
|
||||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||
|
||||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
small {
|
||||
font-size: .66666667em;
|
||||
}
|
||||
a {
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
box-shadow: 0 1px #e74c3c;
|
||||
}
|
||||
.bshadow0, input {
|
||||
box-shadow: inset 0 -2px #e7e7e7;
|
||||
}
|
||||
input:hover {
|
||||
box-shadow: inset 0 -2px #ccc;
|
||||
}
|
||||
input, fieldset {
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
padding: .25em 0;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 -2px #449fdb;
|
||||
}
|
||||
.glyph {
|
||||
font-size: 16px;
|
||||
width: 15em;
|
||||
padding-bottom: 1em;
|
||||
margin-right: 4em;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.liga {
|
||||
width: 80%;
|
||||
width: calc(100% - 2.5em);
|
||||
}
|
||||
.talign-right {
|
||||
text-align: right;
|
||||
}
|
||||
.talign-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bgc1 {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fgc1 {
|
||||
color: #999;
|
||||
}
|
||||
.fgc0 {
|
||||
color: #000;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.mvm {
|
||||
margin-top: .75em;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
.mtn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mtl, .mal {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mbl, .mal {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.mal, .mhl {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.mhmm {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.mls {
|
||||
margin-left: .25em;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
.pbs, .pvs {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
.pvs, .pts {
|
||||
padding-top: .25em;
|
||||
}
|
||||
.unit {
|
||||
float: left;
|
||||
}
|
||||
.unitRight {
|
||||
float: right;
|
||||
}
|
||||
.size1of2 {
|
||||
width: 50%;
|
||||
}
|
||||
.size1of1 {
|
||||
width: 100%;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hidden-true {
|
||||
display: none;
|
||||
}
|
||||
.textbox0 {
|
||||
width: 3em;
|
||||
background: #f1f1f1;
|
||||
padding: .25em .5em;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
}
|
||||
#testDrive {
|
||||
display: block;
|
||||
padding-top: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fs0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.fs2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
+13322
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 467 KiB |
Binary file not shown.
Binary file not shown.
+21594
File diff suppressed because one or more lines are too long
+2517
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user