parent
9f50030beb
commit
6d504394ef
Binary file not shown.
@ -1,223 +0,0 @@
|
||||
/**
|
||||
* WEBSITE: https://themefisher.com
|
||||
* TWITTER: https://twitter.com/themefisher
|
||||
* FACEBOOK: https://www.facebook.com/themefisher
|
||||
* GITHUB: https://github.com/themefisher/
|
||||
*/
|
||||
|
||||
.hero-area {
|
||||
height: 650px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-image: url("../images/home/slider-5.jpg");
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.hero-area .block {
|
||||
position: relative;
|
||||
z-index: 999999;
|
||||
}
|
||||
.hero-area h1 {
|
||||
font-size: 100px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
.hero-area p {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
.template-list {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.template-item {
|
||||
margin-bottom: 50px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.template-item:hover img {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.template-item .ticker {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
background: #4be6e6;
|
||||
}
|
||||
.template-item a {
|
||||
box-shadow: 0 15px 45px -9px rgba(0, 0, 0, 0.25);
|
||||
display: block;
|
||||
}
|
||||
.template-item a img {
|
||||
border-radius: 5px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
.template-item h4 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #252525;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.template-item a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.call-to-action {
|
||||
background: #3483de;
|
||||
color: #fff;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.call-to-action h2 {
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.call-to-action .btn-buy-button {
|
||||
background: #fff;
|
||||
padding: 18px 45px;
|
||||
border-radius: 30px;
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#mouse-scroll {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#mouse-scroll {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
#mouse-scroll span {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
margin: 0 0 3px 5px;
|
||||
}
|
||||
|
||||
#mouse-scroll .mouse {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
border-radius: 10px;
|
||||
transform: none;
|
||||
border: 2px solid #ffffff;
|
||||
top: 170px;
|
||||
}
|
||||
|
||||
#mouse-scroll .mouse-in {
|
||||
height: 5px;
|
||||
width: 2px;
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#mouse-scroll .mouse-in {
|
||||
-webkit-animation: animated-mouse 1.2s ease infinite;
|
||||
animation: mouse-animated 1.2s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animated-mouse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes mouse-scroll {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes mouse-scroll {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
background: #01252d;
|
||||
padding: 30px 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.overly {
|
||||
position: relative;
|
||||
}
|
||||
.overly:before {
|
||||
content: "";
|
||||
background: rgba(0, 0, 0, 0.51);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
/*# sourceMappingURL=home.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 480 KiB |
|
Before Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 239 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 1004 B |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 28 KiB |
@ -1,97 +0,0 @@
|
||||
/**
|
||||
* WEBSITE: https://themefisher.com
|
||||
* TWITTER: https://twitter.com/themefisher
|
||||
* FACEBOOK: https://www.facebook.com/themefisher
|
||||
* GITHUB: https://github.com/themefisher/
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// Preloader
|
||||
$(window).on('load', function () {
|
||||
$('#preloader').fadeOut('slow', function () {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Instagram Feed
|
||||
if (($('#instafeed').length) !== 0) {
|
||||
var accessToken = $('#instafeed').attr('data-accessToken');
|
||||
var userFeed = new Instafeed({
|
||||
get: 'user',
|
||||
resolution: 'low_resolution',
|
||||
accessToken: accessToken,
|
||||
template: '<a href="{{link}}"><img src="{{image}}" alt="instagram-image"></a>'
|
||||
});
|
||||
userFeed.run();
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
$('.instagram-slider').slick({
|
||||
dots: false,
|
||||
speed: 300,
|
||||
// autoplay: true,
|
||||
arrows: false,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 1,
|
||||
responsive: [{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}, 1500);
|
||||
|
||||
|
||||
// e-commerce touchspin
|
||||
$('input[name=\'product-quantity\']').TouchSpin();
|
||||
|
||||
|
||||
// Video Lightbox
|
||||
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
|
||||
event.preventDefault();
|
||||
$(this).ekkoLightbox();
|
||||
});
|
||||
|
||||
|
||||
// Count Down JS
|
||||
$('#simple-timer').syotimer({
|
||||
year: 2022,
|
||||
month: 5,
|
||||
day: 9,
|
||||
hour: 20,
|
||||
minute: 30
|
||||
});
|
||||
|
||||
//Hero Slider
|
||||
$('.hero-slider').slick({
|
||||
// autoplay: true,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
prevArrow: '<button type=\'button\' class=\'heroSliderArrow prevArrow tf-ion-chevron-left\'></button>',
|
||||
nextArrow: '<button type=\'button\' class=\'heroSliderArrow nextArrow tf-ion-chevron-right\'></button>',
|
||||
dots: true,
|
||||
autoplaySpeed: 7000,
|
||||
pauseOnFocus: false,
|
||||
pauseOnHover: false
|
||||
});
|
||||
$('.hero-slider').slickAnimation();
|
||||
|
||||
|
||||
})(jQuery);
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014-2018 Materialize
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,91 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="http://materializecss.com/">
|
||||
<img src="http://materializecss.com/res/materialize.svg" width="150">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 align="center">MaterializeCSS</h3>
|
||||
|
||||
<p align="center">
|
||||
Materialize, a CSS Framework based on material design.
|
||||
<br>
|
||||
<a href="http://materializecss.com/"><strong>-- Browse the docs --</strong></a>
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://travis-ci.org/Dogfalo/materialize">
|
||||
<img src="https://travis-ci.org/Dogfalo/materialize.svg?branch=master" alt="Travis CI badge">
|
||||
</a>
|
||||
<a href="https://badge.fury.io/js/materialize-css">
|
||||
<img src="https://badge.fury.io/js/materialize-css.svg" alt="npm version badge">
|
||||
</a>
|
||||
<a href="https://cdnjs.com/libraries/materialize">
|
||||
<img src="https://img.shields.io/cdnjs/v/materialize.svg" alt="CDNJS version badge">
|
||||
</a>
|
||||
<a href="https://david-dm.org/Dogfalo/materialize">
|
||||
<img src="https://david-dm.org/Dogfalo/materialize/status.svg" alt="dependencies Status badge">
|
||||
</a>
|
||||
<a href="https://david-dm.org/Dogfalo/materialize#info=devDependencies">
|
||||
<img src="https://david-dm.org/Dogfalo/materialize/dev-status.svg" alt="devDependency Status badge">
|
||||
</a>
|
||||
<a href="https://gitter.im/Dogfalo/materialize">
|
||||
<img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter badge">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Table of Contents
|
||||
- [Quickstart](#quickstart)
|
||||
- [Documentation](#documentation)
|
||||
- [Supported Browsers](#supported-browsers)
|
||||
- [Changelog](#changelog)
|
||||
- [Testing](#testing)
|
||||
- [Contributing](#contributing)
|
||||
- [Copyright and license](#copyright-and-license)
|
||||
|
||||
## Quickstart:
|
||||
Read the [getting started guide](http://materializecss.com/getting-started.html) for more information on how to use materialize.
|
||||
|
||||
- [Download the latest release](https://github.com/Dogfalo/materialize/releases/latest) of materialize directly from GitHub. ([Beta](https://github.com/Dogfalo/materialize/releases/))
|
||||
- Clone the repo: `git clone https://github.com/Dogfalo/materialize.git` (Beta: `git clone -b v1-dev https://github.com/Dogfalo/materialize.git`)
|
||||
- Include the files via [cdnjs](https://cdnjs.com/libraries/materialize). More [here](http://materializecss.com/getting-started.html). ([Beta](https://cdnjs.com/libraries/materialize/1.0.0-beta))
|
||||
- Install with [npm](https://www.npmjs.com): `npm install materialize-css` (Beta: `npm install materialize-css@next`)
|
||||
- Install with [Bower](https://bower.io): `bower install materialize` ([DEPRECATED](https://bower.io/blog/2017/how-to-migrate-away-from-bower/))
|
||||
- Install with [Atmosphere](https://atmospherejs.com): `meteor add materialize:materialize` (Beta: `meteor add materialize:materialize@=1.0.0-beta`)
|
||||
|
||||
## Documentation
|
||||
The documentation can be found at <http://materializecss.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org/en/) installed on your computer.
|
||||
|
||||
### Running documentation locally
|
||||
Run these commands to set up the documentation:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/Dogfalo/materialize
|
||||
cd materialize
|
||||
npm install
|
||||
```
|
||||
|
||||
Then run `grunt monitor` to compile the documentation. When it finishes, open a new browser window and navigate to `localhost:8000`. We use [BrowserSync](https://www.browsersync.io/) to display the documentation.
|
||||
|
||||
### Documentation for previous releases
|
||||
Previous releases and their documentation are available for [download](https://github.com/Dogfalo/materialize/releases).
|
||||
|
||||
## Supported Browsers:
|
||||
Materialize is compatible with:
|
||||
|
||||
- Chrome 35+
|
||||
- Firefox 31+
|
||||
- Safari 9+
|
||||
- Opera
|
||||
- Edge
|
||||
- IE 11+
|
||||
|
||||
## Changelog
|
||||
For changelogs, check out [the Releases section of materialize](https://github.com/Dogfalo/materialize/releases) or the [CHANGELOG.md](CHANGELOG.md).
|
||||
|
||||
## Testing
|
||||
We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](CONTRIBUTING.md#jasmine-testing-guide).
|
||||
|
||||
## Contributing
|
||||
Check out the [CONTRIBUTING document](CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/Dogfalo/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
|
||||
|
||||
## Copyright and license
|
||||
Code Copyright 2018 Materialize. Code released under the MIT license.
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,383 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 32 KiB |
@ -1,777 +0,0 @@
|
||||
<!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>
|
||||
@ -1,45 +0,0 @@
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
@ -1,705 +0,0 @@
|
||||
/*
|
||||
* 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);
|
||||
@ -1,10 +0,0 @@
|
||||
/*
|
||||
* 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}
|
||||
File diff suppressed because one or more lines are too long
@ -1,37 +0,0 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -1,697 +0,0 @@
|
||||
(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);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -1,2 +0,0 @@
|
||||
.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= */
|
||||
@ -1,660 +0,0 @@
|
||||
/*!
|
||||
* 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);
|
||||
@ -1,2 +0,0 @@
|
||||
.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 */
|
||||
File diff suppressed because one or more lines are too long
@ -1,119 +0,0 @@
|
||||
/**
|
||||
* 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);
|
||||
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
@ -1,476 +0,0 @@
|
||||
/* 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;
|
||||
} );
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,292 +0,0 @@
|
||||
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.
|
||||
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue