mirror of
https://github.com/stan220/waterpipe.js.git
synced 2026-09-08 16:29:29 +00:00
Initial commit
This commit is contained in:
aslauris
@@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2014 dragdropsite.com
|
||||||
|
|
||||||
|
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.
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
# waterpipe.js - smoky backgrounds generator (HTML5 Canvas)
|
||||||
|
|
||||||
|
waterpipe.js is a jQuery plugin for smoky backgrounds developed by [dragdropsite.com](http://www.dragdropsite.com)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##Examples
|
||||||
|
Here are some examples generated using waterpipe.js plugin.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##Usage
|
||||||
|
|
||||||
|
**1. Include jQuery and waterpipe.js**
|
||||||
|
|
||||||
|
<script src="lib/jquery-1.11.0.min.js"></script>
|
||||||
|
<script src="waterpipe.js"></script>
|
||||||
|
|
||||||
|
**2. Create wrapper with canvas element inside**
|
||||||
|
|
||||||
|
<div id="wavybg-wrapper" style="width: 100%; height: 100%;">
|
||||||
|
<canvas>Your browser does not support HTML5 canvas.</canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
**3. Initialize with**
|
||||||
|
|
||||||
|
var smokyBG = $('#wavybg-wrapper').waterpipe({
|
||||||
|
//Default values
|
||||||
|
gradientStart: '#000000',
|
||||||
|
gradientEnd: '#222222',
|
||||||
|
smokeOpacity: 0.1,
|
||||||
|
numCircles: 1,
|
||||||
|
maxMaxRad: 'auto',
|
||||||
|
minMaxRad: 'auto',
|
||||||
|
minRadFactor: 0,
|
||||||
|
iterations: 8,
|
||||||
|
drawsPerFrame: 10,
|
||||||
|
lineWidth: 2,
|
||||||
|
speed: 1,
|
||||||
|
bgColorInner: "#ffffff",
|
||||||
|
bgColorOuter: "#666666"
|
||||||
|
});
|
||||||
|
|
||||||
|
##Options
|
||||||
|
|
||||||
|
| Option | Type | Default | Description |
|
||||||
|
|---------------|---------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||||
|
| gradientStart | string | '#000000' | Gradient start color in hex format. |
|
||||||
|
| gradientEnd | string | '#222222' | Gradient end color in hex format. |
|
||||||
|
| smokeOpacity | number | 0.1 | Smoke opacity 0 to 1. |
|
||||||
|
| numCircles | int | 1 | Number of circles (smokes). |
|
||||||
|
| maxMaxRad | int or 'auto' | 'auto' | Could be used to change circle radius size |
|
||||||
|
| minMaxRad | int or 'auto' | 'auto' | Could be used to change circle radius size |
|
||||||
|
| minRadFactor | int | 0 | It's a factor representing the size of the smallest radius with respect to the largest possible. Integer from 0 to 1. |
|
||||||
|
| iterations | int | 8 | The number of subdividing steps to take when creating a single fractal curve. Can use more, but anything over 10 (thus 1024 points) is overkill for a moderately sized canvas. |
|
||||||
|
| drawsPerFrame | int | 10 | Number of curves to draw on every tick of the timer |
|
||||||
|
| lineWidth | number | 2 | Line width |
|
||||||
|
| speed | int | 1 | Drawing speed (tick of timer in ms) |
|
||||||
|
| bgColorInner | string | '#ffffff' | Background outer color in hex format |
|
||||||
|
| bgColorOuter | string | '#666666' | Background inner color in hex format |
|
||||||
|
|
||||||
|
##Methods
|
||||||
|
|
||||||
|
The following code could be used to call a method: `smokyBG.data('waterpipe').generate();`Please make sure variable smokyBG exists
|
||||||
|
|
||||||
|
| Method | Arguments | Description |
|
||||||
|
|-----------|-------------|-------------------------------------------------------------------------------------------------|
|
||||||
|
| generate | | Generates background canvas |
|
||||||
|
| setOption | optionName, | Set a new value to an option. Please check the above table for possible option names and values |
|
||||||
|
| | optionValue | |
|
||||||
|
| download | width: int, | Download size in pixels |
|
||||||
|
| | height: int | |
|
||||||
|
|
||||||
|
##Demo
|
||||||
|
|
||||||
|
Please check the demo to generate and download your own smoky backgrounds: [http://dragdropsite.github.io/waterpipe.js](http://dragdropsite.github.io/waterpipe.js)
|
||||||
|
|
||||||
|
##Credits
|
||||||
|
|
||||||
|
[rectangleworld.com](http://rectangleworld.com/blog/) - big part of code has been taken from the examples provided on this blog
|
||||||
|
|
||||||
|
##License
|
||||||
|
|
||||||
|
Licensed under MIT license
|
||||||
Executable
+420
@@ -0,0 +1,420 @@
|
|||||||
|
/*
|
||||||
|
colpick Color Picker / colpick.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*Main container*/
|
||||||
|
.colpick {
|
||||||
|
position: absolute;
|
||||||
|
width: 346px;
|
||||||
|
height: 170px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: none;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
background:#ebebeb;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
/*Prevents selecting text when dragging the selectors*/
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
/*Color selection box with gradients*/
|
||||||
|
.colpick_color {
|
||||||
|
position: absolute;
|
||||||
|
left: 7px;
|
||||||
|
top: 7px;
|
||||||
|
width: 156px;
|
||||||
|
height: 156px;
|
||||||
|
overflow: hidden;
|
||||||
|
outline: 1px solid #aaa;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
.colpick_color_overlay1 {
|
||||||
|
position: absolute;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
width: 156px;
|
||||||
|
height: 156px;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
|
||||||
|
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
|
||||||
|
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
|
||||||
|
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
|
||||||
|
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
|
||||||
|
}
|
||||||
|
.colpick_color_overlay2 {
|
||||||
|
position: absolute;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
width: 156px;
|
||||||
|
height: 156px;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
|
||||||
|
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||||
|
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
|
||||||
|
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
|
||||||
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
|
||||||
|
}
|
||||||
|
/*Circular color selector*/
|
||||||
|
.colpick_selector_outer {
|
||||||
|
background:none;
|
||||||
|
position: absolute;
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
margin: -6px 0 0 -6px;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.colpick_selector_inner{
|
||||||
|
position: absolute;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
/*Vertical hue bar*/
|
||||||
|
.colpick_hue {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
left: 175px;
|
||||||
|
width: 19px;
|
||||||
|
height: 156px;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
cursor: n-resize;
|
||||||
|
}
|
||||||
|
/*Hue bar sliding indicator*/
|
||||||
|
.colpick_hue_arrs {
|
||||||
|
position: absolute;
|
||||||
|
left: -8px;
|
||||||
|
width: 35px;
|
||||||
|
height: 7px;
|
||||||
|
margin: -7px 0 0 0;
|
||||||
|
}
|
||||||
|
.colpick_hue_larr {
|
||||||
|
position:absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid transparent;
|
||||||
|
border-left: 7px solid #858585;
|
||||||
|
}
|
||||||
|
.colpick_hue_rarr {
|
||||||
|
position:absolute;
|
||||||
|
right:0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid transparent;
|
||||||
|
border-right: 7px solid #858585;
|
||||||
|
}
|
||||||
|
/*New color box*/
|
||||||
|
.colpick_new_color {
|
||||||
|
position: absolute;
|
||||||
|
left: 207px;
|
||||||
|
top: 6px;
|
||||||
|
width: 60px;
|
||||||
|
height: 27px;
|
||||||
|
background: #f00;
|
||||||
|
border: 1px solid #8f8f8f;
|
||||||
|
}
|
||||||
|
/*Current color box*/
|
||||||
|
.colpick_current_color {
|
||||||
|
position: absolute;
|
||||||
|
left: 277px;
|
||||||
|
top: 6px;
|
||||||
|
width: 60px;
|
||||||
|
height: 27px;
|
||||||
|
background: #f00;
|
||||||
|
border: 1px solid #8f8f8f;
|
||||||
|
}
|
||||||
|
/*Input field containers*/
|
||||||
|
.colpick_field, .colpick_hex_field {
|
||||||
|
position: absolute;
|
||||||
|
height: 20px;
|
||||||
|
width: 60px;
|
||||||
|
overflow:hidden;
|
||||||
|
background:#f3f3f3;
|
||||||
|
color:#b8b8b8;
|
||||||
|
font-size:12px;
|
||||||
|
border:1px solid #bdbdbd;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.colpick_rgb_r {
|
||||||
|
top: 40px;
|
||||||
|
left: 207px;
|
||||||
|
}
|
||||||
|
.colpick_rgb_g {
|
||||||
|
top: 67px;
|
||||||
|
left: 207px;
|
||||||
|
}
|
||||||
|
.colpick_rgb_b {
|
||||||
|
top: 94px;
|
||||||
|
left: 207px;
|
||||||
|
}
|
||||||
|
.colpick_hsb_h {
|
||||||
|
top: 40px;
|
||||||
|
left: 277px;
|
||||||
|
}
|
||||||
|
.colpick_hsb_s {
|
||||||
|
top: 67px;
|
||||||
|
left: 277px;
|
||||||
|
}
|
||||||
|
.colpick_hsb_b {
|
||||||
|
top: 94px;
|
||||||
|
left: 277px;
|
||||||
|
}
|
||||||
|
.colpick_hex_field {
|
||||||
|
width: 68px;
|
||||||
|
left: 207px;
|
||||||
|
top: 121px;
|
||||||
|
}
|
||||||
|
/*Text field container on focus*/
|
||||||
|
.colpick_focus {
|
||||||
|
border-color: #999;
|
||||||
|
}
|
||||||
|
/*Field label container*/
|
||||||
|
.colpick_field_letter {
|
||||||
|
position: absolute;
|
||||||
|
width: 12px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
background: #efefef;
|
||||||
|
border-right: 1px solid #bdbdbd;
|
||||||
|
font-weight: bold;
|
||||||
|
color:#777;
|
||||||
|
}
|
||||||
|
/*Text inputs*/
|
||||||
|
.colpick_field input, .colpick_hex_field input {
|
||||||
|
position: absolute;
|
||||||
|
right: 11px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
color: #555;
|
||||||
|
text-align: right;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.colpick_hex_field input {
|
||||||
|
right: 4px;
|
||||||
|
}
|
||||||
|
/*Field up/down arrows*/
|
||||||
|
.colpick_field_arrs {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 9px;
|
||||||
|
height: 21px;
|
||||||
|
cursor: n-resize;
|
||||||
|
}
|
||||||
|
.colpick_field_uarr {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
border-right: 4px solid transparent;
|
||||||
|
border-bottom: 4px solid #959595;
|
||||||
|
}
|
||||||
|
.colpick_field_darr {
|
||||||
|
position: absolute;
|
||||||
|
bottom:5px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
border-right: 4px solid transparent;
|
||||||
|
border-top: 4px solid #959595;
|
||||||
|
}
|
||||||
|
/*Submit/Select button*/
|
||||||
|
.colpick_submit {
|
||||||
|
position: absolute;
|
||||||
|
left: 207px;
|
||||||
|
top: 149px;
|
||||||
|
width: 130px;
|
||||||
|
height: 22px;
|
||||||
|
line-height:22px;
|
||||||
|
background: #efefef;
|
||||||
|
text-align: center;
|
||||||
|
color: #555;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight:bold;
|
||||||
|
border: 1px solid #bdbdbd;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.colpick_submit:hover {
|
||||||
|
background:#f3f3f3;
|
||||||
|
border-color:#999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*full layout with no submit button*/
|
||||||
|
.colpick_full_ns .colpick_submit, .colpick_full_ns .colpick_current_color{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.colpick_full_ns .colpick_new_color {
|
||||||
|
width: 130px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
.colpick_full_ns .colpick_rgb_r, .colpick_full_ns .colpick_hsb_h {
|
||||||
|
top: 42px;
|
||||||
|
}
|
||||||
|
.colpick_full_ns .colpick_rgb_g, .colpick_full_ns .colpick_hsb_s {
|
||||||
|
top: 73px;
|
||||||
|
}
|
||||||
|
.colpick_full_ns .colpick_rgb_b, .colpick_full_ns .colpick_hsb_b {
|
||||||
|
top: 104px;
|
||||||
|
}
|
||||||
|
.colpick_full_ns .colpick_hex_field {
|
||||||
|
top: 135px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*rgbhex layout*/
|
||||||
|
.colpick_rgbhex .colpick_hsb_h, .colpick_rgbhex .colpick_hsb_s, .colpick_rgbhex .colpick_hsb_b {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex {
|
||||||
|
width:282px;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex .colpick_field, .colpick_rgbhex .colpick_submit {
|
||||||
|
width:68px;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex .colpick_new_color {
|
||||||
|
width:34px;
|
||||||
|
border-right:none;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex .colpick_current_color {
|
||||||
|
width:34px;
|
||||||
|
left:240px;
|
||||||
|
border-left:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*rgbhex layout, no submit button*/
|
||||||
|
.colpick_rgbhex_ns .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex_ns .colpick_new_color{
|
||||||
|
width:68px;
|
||||||
|
border: 1px solid #8f8f8f;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex_ns .colpick_rgb_r {
|
||||||
|
top: 42px;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex_ns .colpick_rgb_g {
|
||||||
|
top: 73px;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex_ns .colpick_rgb_b {
|
||||||
|
top: 104px;
|
||||||
|
}
|
||||||
|
.colpick_rgbhex_ns .colpick_hex_field {
|
||||||
|
top: 135px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*hex layout*/
|
||||||
|
.colpick_hex .colpick_hsb_h, .colpick_hex .colpick_hsb_s, .colpick_hex .colpick_hsb_b, .colpick_hex .colpick_rgb_r, .colpick_hex .colpick_rgb_g, .colpick_hex .colpick_rgb_b {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.colpick_hex {
|
||||||
|
width:206px;
|
||||||
|
height:201px;
|
||||||
|
}
|
||||||
|
.colpick_hex .colpick_hex_field {
|
||||||
|
width:72px;
|
||||||
|
height:25px;
|
||||||
|
top:168px;
|
||||||
|
left:80px;
|
||||||
|
}
|
||||||
|
.colpick_hex .colpick_hex_field div, .colpick_hex .colpick_hex_field input {
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
.colpick_hex .colpick_new_color {
|
||||||
|
left:9px;
|
||||||
|
top:168px;
|
||||||
|
width:30px;
|
||||||
|
border-right:none;
|
||||||
|
}
|
||||||
|
.colpick_hex .colpick_current_color {
|
||||||
|
left:39px;
|
||||||
|
top:168px;
|
||||||
|
width:30px;
|
||||||
|
border-left:none;
|
||||||
|
}
|
||||||
|
.colpick_hex .colpick_submit {
|
||||||
|
left:164px;
|
||||||
|
top: 168px;
|
||||||
|
width:30px;
|
||||||
|
height:25px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*hex layout, no submit button*/
|
||||||
|
.colpick_hex_ns .colpick_submit, .colpick_hex_ns .colpick_current_color {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.colpick_hex_ns .colpick_hex_field {
|
||||||
|
width:80px;
|
||||||
|
}
|
||||||
|
.colpick_hex_ns .colpick_new_color{
|
||||||
|
width:60px;
|
||||||
|
border: 1px solid #8f8f8f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Dark color scheme*/
|
||||||
|
.colpick_dark {
|
||||||
|
background: #161616;
|
||||||
|
border-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_color {
|
||||||
|
outline-color: #333;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_hue {
|
||||||
|
border-color: #555;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_field, .colpick_dark .colpick_hex_field {
|
||||||
|
background: #101010;
|
||||||
|
border-color: #2d2d2d;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_field_letter {
|
||||||
|
background: #131313;
|
||||||
|
border-color: #2d2d2d;
|
||||||
|
color: #696969;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input {
|
||||||
|
color: #7a7a7a;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_field_uarr {
|
||||||
|
border-bottom-color:#696969;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_field_darr {
|
||||||
|
border-top-color:#696969;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_focus {
|
||||||
|
border-color:#444;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_submit {
|
||||||
|
background: #131313;
|
||||||
|
border-color:#2d2d2d;
|
||||||
|
color:#7a7a7a;
|
||||||
|
}
|
||||||
|
.colpick_dark .colpick_submit:hover {
|
||||||
|
background-color:#101010;
|
||||||
|
border-color:#444;
|
||||||
|
}
|
||||||
Executable
+167
@@ -0,0 +1,167 @@
|
|||||||
|
|
||||||
|
/* Functional styling;
|
||||||
|
* These styles are required for noUiSlider to function.
|
||||||
|
* You don't need to change these rules to apply your design.
|
||||||
|
*/
|
||||||
|
.noUi-target,
|
||||||
|
.noUi-target * {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.noUi-base {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.noUi-origin {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.noUi-handle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.noUi-stacking .noUi-handle {
|
||||||
|
/* This class is applied to the lower origin when
|
||||||
|
its values is > 50%. */
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.noUi-stacking + .noUi-origin {
|
||||||
|
/* Fix stacking order in IE7, which incorrectly
|
||||||
|
creates a new context for the origins. */
|
||||||
|
*z-index: -1;
|
||||||
|
}
|
||||||
|
.noUi-state-tap .noUi-origin {
|
||||||
|
-webkit-transition: left 0.3s, top 0.3s;
|
||||||
|
transition: left 0.3s, top 0.3s;
|
||||||
|
}
|
||||||
|
.noUi-state-drag * {
|
||||||
|
cursor: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slider size and handle placement;
|
||||||
|
*/
|
||||||
|
.noUi-horizontal {
|
||||||
|
height: 5px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.noUi-horizontal .noUi-handle {
|
||||||
|
width: 18px;
|
||||||
|
height: 15px;
|
||||||
|
left: -15px;
|
||||||
|
top: -6px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.noUi-horizontal.noUi-extended {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
.noUi-horizontal.noUi-extended .noUi-origin {
|
||||||
|
right: -15px;
|
||||||
|
}
|
||||||
|
.noUi-vertical {
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
.noUi-vertical .noUi-handle {
|
||||||
|
width: 28px;
|
||||||
|
height: 34px;
|
||||||
|
left: -6px;
|
||||||
|
top: -17px;
|
||||||
|
}
|
||||||
|
.noUi-vertical.noUi-extended {
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.noUi-vertical.noUi-extended .noUi-origin {
|
||||||
|
bottom: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling;
|
||||||
|
*/
|
||||||
|
.noUi-background {
|
||||||
|
background: #FAFAFA;
|
||||||
|
box-shadow: inset 0 1px 1px #f0f0f0;
|
||||||
|
}
|
||||||
|
.noUi-connect {
|
||||||
|
background: #3FB8AF;
|
||||||
|
box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
|
||||||
|
-webkit-transition: background 450ms;
|
||||||
|
transition: background 450ms;
|
||||||
|
}
|
||||||
|
.noUi-origin {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.noUi-target {
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #D3D3D3;
|
||||||
|
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
|
||||||
|
}
|
||||||
|
.noUi-target.noUi-connect {
|
||||||
|
box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handles and cursors;
|
||||||
|
*/
|
||||||
|
.noUi-dragable {
|
||||||
|
cursor: w-resize;
|
||||||
|
}
|
||||||
|
.noUi-vertical .noUi-dragable {
|
||||||
|
cursor: n-resize;
|
||||||
|
}
|
||||||
|
.noUi-handle {
|
||||||
|
border: 1px solid #D9D9D9;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #FFF;
|
||||||
|
cursor: default;
|
||||||
|
box-shadow: inset 0 0 1px #FFF,
|
||||||
|
inset 0 1px 7px #EBEBEB,
|
||||||
|
0 3px 6px -3px #BBB;
|
||||||
|
}
|
||||||
|
.noUi-active {
|
||||||
|
box-shadow: inset 0 0 1px #FFF,
|
||||||
|
inset 0 1px 7px #DDD,
|
||||||
|
0 3px 6px -3px #BBB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle stripes;
|
||||||
|
*/
|
||||||
|
.noUi-handle:before,
|
||||||
|
.noUi-handle:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
height: 5px;
|
||||||
|
width: 1px;
|
||||||
|
background: #E8E7E6;
|
||||||
|
left: 6px;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
.noUi-handle:after {
|
||||||
|
left: 9px;
|
||||||
|
}
|
||||||
|
.noUi-vertical .noUi-handle:before,
|
||||||
|
.noUi-vertical .noUi-handle:after {
|
||||||
|
width: 14px;
|
||||||
|
height: 1px;
|
||||||
|
left: 6px;
|
||||||
|
top: 14px;
|
||||||
|
}
|
||||||
|
.noUi-vertical .noUi-handle:after {
|
||||||
|
top: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Disabled state;
|
||||||
|
*/
|
||||||
|
[disabled].noUi-connect,
|
||||||
|
[disabled] .noUi-connect {
|
||||||
|
background: #B8B8B8;
|
||||||
|
}
|
||||||
|
[disabled] .noUi-handle {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
+195
@@ -0,0 +1,195 @@
|
|||||||
|
body,
|
||||||
|
html {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 3%;
|
||||||
|
width: 200px;
|
||||||
|
background: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
.sidebar-wrapper h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 15px 10px 0 10px;
|
||||||
|
font-size: 2.2em;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
text-shadow: 1px 1px 5px #000000;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper h2 {
|
||||||
|
font-size: 0.9em;
|
||||||
|
background: #7f8c8d;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 25px 0 10px 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper h2:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper label {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 2px 0;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper label .value {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper input {
|
||||||
|
width: 90px;
|
||||||
|
height: 25px;
|
||||||
|
color: #222;
|
||||||
|
font-weight: 700;
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
padding: 2px 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .input-group {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .slider-value {
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .intro {
|
||||||
|
position: absolute;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #2c3e50;
|
||||||
|
z-index: 8888;
|
||||||
|
box-shadow: 0 0 5px #000000;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .intro div {
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .intro .created-by {
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #ccc;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 1.1em;
|
||||||
|
text-shadow: 1px 1px 5px #000000;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .intro .created-by a {
|
||||||
|
color: #FF9900;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .intro .created-by a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .intro .share {
|
||||||
|
margin: 10px 0 5px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .generator-form-wrap {
|
||||||
|
margin-top: 114px;
|
||||||
|
margin-bottom: 166px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .samples img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .buttons-wrap {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 10px 5px;
|
||||||
|
background: #2c3e50;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
z-index: 8888;
|
||||||
|
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .buttons-wrap .credits-to {
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-align: right;
|
||||||
|
color: #ccc;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .buttons-wrap .credits-to a {
|
||||||
|
color: #ccc;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.sidebar-wrapper .buttons-wrap .credits-to a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.1em;
|
||||||
|
padding: 8px 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-samples {
|
||||||
|
background: #2980b9;
|
||||||
|
}
|
||||||
|
.btn-generate {
|
||||||
|
background: #27ae60;
|
||||||
|
}
|
||||||
|
.btn-download {
|
||||||
|
background: #16a085;
|
||||||
|
}
|
||||||
|
input.color-picker {
|
||||||
|
border-right: 30px solid green;
|
||||||
|
width: 120px;
|
||||||
|
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
input.color-picker.gradient-start {
|
||||||
|
border-right: 30px solid #000000;
|
||||||
|
}
|
||||||
|
input.color-picker.gradient-end {
|
||||||
|
border-right: 30px solid #222222;
|
||||||
|
}
|
||||||
|
input.color-picker.color-outer {
|
||||||
|
border-right: 30px solid #666666;
|
||||||
|
}
|
||||||
|
input.color-picker.color-inner {
|
||||||
|
border-right: 30px solid #ffffff;
|
||||||
|
}
|
||||||
|
.colpick {
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.nicescroll-rails {
|
||||||
|
z-index: 8888 !important;
|
||||||
|
}
|
||||||
+208
@@ -0,0 +1,208 @@
|
|||||||
|
body, html{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-wrapper{
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 3%;
|
||||||
|
width: 200px;
|
||||||
|
background: #fff;
|
||||||
|
box-sizing:border-box;
|
||||||
|
-moz-box-sizing:border-box;
|
||||||
|
box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
|
||||||
|
h1{
|
||||||
|
margin: 0;
|
||||||
|
padding: 15px 10px 0 10px;
|
||||||
|
font-size: 2.2em;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
text-shadow: 1px 1px 5px rgba(0,0,0,1);
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 0.9em;
|
||||||
|
background: #7f8c8d;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 25px 0 10px 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
h2:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 2px 0;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
.value{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
width: 90px;
|
||||||
|
height: 25px;
|
||||||
|
color: #222;
|
||||||
|
font-weight: 700;
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
padding: 2px 4px;
|
||||||
|
box-sizing:border-box;
|
||||||
|
-moz-box-sizing:border-box;
|
||||||
|
box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
.input-group{
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
box-sizing:border-box;
|
||||||
|
-moz-box-sizing:border-box;
|
||||||
|
}
|
||||||
|
.slider-value{
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
.intro{
|
||||||
|
position: absolute;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #2c3e50;
|
||||||
|
z-index: 8888;
|
||||||
|
box-shadow: 0 0 5px rgba(0,0,0,1);
|
||||||
|
div{
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
.created-by{
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #ccc;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 1.1em;
|
||||||
|
text-shadow: 1px 1px 5px rgba(0,0,0,1);
|
||||||
|
a{
|
||||||
|
color: #FF9900;
|
||||||
|
font-weight: 700;
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.share{
|
||||||
|
margin: 10px 0 5px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.generator-form-wrap{
|
||||||
|
margin-top: 114px;
|
||||||
|
margin-bottom: 166px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing:border-box;
|
||||||
|
-moz-box-sizing:border-box;
|
||||||
|
}
|
||||||
|
.samples{
|
||||||
|
img{
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buttons-wrap{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 10px 5px;
|
||||||
|
background: #2c3e50;
|
||||||
|
box-sizing:border-box;
|
||||||
|
-moz-box-sizing:border-box;
|
||||||
|
z-index: 8888;
|
||||||
|
box-shadow: 0 -1px 2px rgba(0,0,0,0.6);
|
||||||
|
.credits-to{
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-align: right;
|
||||||
|
color: #ccc;
|
||||||
|
margin-top: 15px;
|
||||||
|
a{
|
||||||
|
color: #ccc;
|
||||||
|
text-decoration: none;
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.1em;
|
||||||
|
padding: 8px 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
box-sizing:border-box;
|
||||||
|
-moz-box-sizing:border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-samples{
|
||||||
|
background: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-generate{
|
||||||
|
background: #27ae60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-download{
|
||||||
|
background: #16a085;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.color-picker{
|
||||||
|
border-right:30px solid green;
|
||||||
|
width: 120px;
|
||||||
|
box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
input.color-picker.gradient-start{
|
||||||
|
border-right:30px solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.color-picker.gradient-end{
|
||||||
|
border-right:30px solid #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.color-picker.color-outer{
|
||||||
|
border-right:30px solid #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.color-picker.color-inner{
|
||||||
|
border-right:30px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colpick{
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nicescroll-rails{
|
||||||
|
z-index: 8888 !important;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Executable
+116
@@ -0,0 +1,116 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<script src="lib/modernizr-2.7.2.js"></script>
|
||||||
|
|
||||||
|
<title>Smoky Backgrounds Generator - waterpipe.js</title>
|
||||||
|
<link rel="stylesheet" href="css/colpick.css">
|
||||||
|
<link rel="stylesheet" href="css/jquery.nouislider.css">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="wavybg-wrapper" style="width: 100%; height: 100%;">
|
||||||
|
<canvas>Your browser does not support HTML5 canvas.</canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar-wrapper">
|
||||||
|
<div class="intro">
|
||||||
|
<h1>waterpipe.js</h1>
|
||||||
|
<div class="created-by">by <a href="http://www.dragdropsite.com" target="_blank">dragdropsite.com</a></div>
|
||||||
|
<div class="share">
|
||||||
|
<a href="https://twitter.com/share" class="twitter-share-button" data-via="dragdropsite" data-count="none">Tweet</a>
|
||||||
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||||
|
<iframe src="http://ghbtns.com/github-btn.html?user=dragdropsite&repo=waterpipe.js&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="clear:both"></div>
|
||||||
|
<div class="generator-form-wrap">
|
||||||
|
<form class="generator-params">
|
||||||
|
<h2>Smoke style</h2>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="gradientStart">Gradient start:</label>
|
||||||
|
<input type="text" id="gradientStart" name="gradientStart" value="#000000" class="color-picker gradient-start"></input>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="gradientEnd">Gradient end:</label>
|
||||||
|
<input type="text" id="gradientEnd" name="gradientEnd" class="color-picker gradient-end" value="#222222"></input>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="smokeOpacity">Opacity: <span class="value">10%</span></label>
|
||||||
|
<div class="smokeOpacity-slider"></div>
|
||||||
|
<input type="hidden" id="smokeOpacity" name="smokeOpacity" value="10" class="slider"></input>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="radiusSize">Smoke size: <span class="value">100%</span></label>
|
||||||
|
<div class="radiusSize-slider"></div>
|
||||||
|
<input type="hidden" id="radiusSize" name="radiusSize" value="100" class=""></input>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="lineWidth">Line width: <span class="value">2px</span></label>
|
||||||
|
<div class="lineWidth-slider"></div>
|
||||||
|
<input type="hidden" id="lineWidth" name="lineWidth" value="2" class=""></input>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="numCircles">Smokes #: <span class="value">1</span></label>
|
||||||
|
<div class="numCircles-slider"></div>
|
||||||
|
<input type="hidden" id="numCircles" name="numCircles" value="1" class=""></input>
|
||||||
|
</div>
|
||||||
|
<h2>Background style</h2>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="bgColorOuter">Outer color:</label>
|
||||||
|
<input type="text" id="bgColorOuter" name="bgColorOuter" class="color-picker color-outer" value="#666666"></input>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="bgColorInner">Inner color:</label>
|
||||||
|
<input type="text" id="bgColorInner" name="bgColorInner" class="color-picker color-inner" value="#ffffff"></input>
|
||||||
|
</div>
|
||||||
|
<h2>Download size</h2>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="downloadWidth">Width (px):</label>
|
||||||
|
<input type="text" id="downloadWidth" name="downloadWidth"></input>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="downloadHeight">Height (px):</label>
|
||||||
|
<input type="text" id="downloadHeight" name="downloadHeight"></input>
|
||||||
|
</div>
|
||||||
|
<h2 id="samples-section">Samples (click to generate)</h2>
|
||||||
|
<div class="input-group samples">
|
||||||
|
<a href="#" class="sample-smoke" data-id="0"><img src="img/samples/small/sample-1.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="1"><img src="img/samples/small/sample-2.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="2"><img src="img/samples/small/sample-3.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="3"><img src="img/samples/small/sample-4.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="4"><img src="img/samples/small/sample-5.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="5"><img src="img/samples/small/sample-6.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="6"><img src="img/samples/small/sample-7.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="7"><img src="img/samples/small/sample-8.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="8"><img src="img/samples/small/sample-9.jpg" alt=""</a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="9"><img src="img/samples/small/sample-10.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="10"><img src="img/samples/small/sample-11.jpg" alt=""></a>
|
||||||
|
<a href="#" class="sample-smoke" data-id="11"><img src="img/samples/small/sample-12.jpg" alt=""></a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div style="clear:both"></div>
|
||||||
|
<div class="buttons-wrap">
|
||||||
|
<div class="btn btn-grey btn-samples">Samples</div>
|
||||||
|
<div class="btn btn-grey btn-generate">Generate</div>
|
||||||
|
<div class="btn btn-grey btn-download">Download</div>
|
||||||
|
<div class="credits-to">Credits: <a href="http://rectangleworld.com/blog/" target="_blank">rectangleworld.com</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="lib/jquery-1.11.0.min.js"></script>
|
||||||
|
<script src="lib/colpick.js"></script>
|
||||||
|
<script src="lib/jquery.nouislider.min.js"></script>
|
||||||
|
<script src="lib/jquery.nicescroll.min.js"></script>
|
||||||
|
<script src="lib/builder_scripts.js"></script>
|
||||||
|
|
||||||
|
<script src="waterpipe.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Executable
+417
@@ -0,0 +1,417 @@
|
|||||||
|
/*----------------------------------------
|
||||||
|
|
||||||
|
Example generator
|
||||||
|
|
||||||
|
------------------------------------------*/
|
||||||
|
|
||||||
|
//Form serialization
|
||||||
|
$.fn.serializeObject = function()
|
||||||
|
{
|
||||||
|
var o = {};
|
||||||
|
var a = this.serializeArray();
|
||||||
|
$.each(a, function() {
|
||||||
|
if (o[this.name] !== undefined) {
|
||||||
|
if (!o[this.name].push) {
|
||||||
|
o[this.name] = [o[this.name]];
|
||||||
|
}
|
||||||
|
o[this.name].push(this.value || '');
|
||||||
|
} else {
|
||||||
|
o[this.name] = this.value || '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return o;
|
||||||
|
};
|
||||||
|
|
||||||
|
$( document ).ready(function() {
|
||||||
|
|
||||||
|
$(window).resize(function() {
|
||||||
|
if ($('.sidebar-wrapper').height() > $(window).height()){
|
||||||
|
var formHeight = $(window).height()-$('.sidebar-wrapper .intro').outerHeight()-$('.sidebar-wrapper .buttons-wrap').outerHeight()-30;
|
||||||
|
$('.generator-form-wrap').css('height', formHeight+'px');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(window).resize();
|
||||||
|
|
||||||
|
//Init waterpipe
|
||||||
|
var smokyBG = $('#wavybg-wrapper').waterpipe();
|
||||||
|
|
||||||
|
//Init nicescroll
|
||||||
|
var niceScroll = $('.generator-form-wrap').niceScroll();
|
||||||
|
|
||||||
|
//Params for samples
|
||||||
|
var sampleParams = [
|
||||||
|
{
|
||||||
|
bgColorInner: "#2b2b2b",
|
||||||
|
bgColorOuter: "#000000",
|
||||||
|
gradientEnd: "#f5883b",
|
||||||
|
gradientStart: "#ff5500",
|
||||||
|
lineWidth: 1,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#ffffff",
|
||||||
|
bgColorOuter: "#cccccc",
|
||||||
|
gradientEnd: "#7a7a7a",
|
||||||
|
gradientStart: "#000000",
|
||||||
|
lineWidth: 2,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#2b2b2b",
|
||||||
|
bgColorOuter: "#000000",
|
||||||
|
gradientEnd: "#6b71e3",
|
||||||
|
gradientStart: "#fa05fa",
|
||||||
|
lineWidth: 1.5,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#2b2b2b",
|
||||||
|
bgColorOuter: "#000000",
|
||||||
|
gradientEnd: "#7d7d7d",
|
||||||
|
gradientStart: "#e0e0e0",
|
||||||
|
lineWidth: 1.2,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#ffffff",
|
||||||
|
bgColorOuter: "#ffffff",
|
||||||
|
gradientEnd: "#404040",
|
||||||
|
gradientStart: "#000000",
|
||||||
|
lineWidth: 3,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#292929",
|
||||||
|
bgColorOuter: "#000000",
|
||||||
|
gradientEnd: "#001eff",
|
||||||
|
gradientStart: "#51ff00",
|
||||||
|
lineWidth: 1.5,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#400000",
|
||||||
|
bgColorOuter: "#000000",
|
||||||
|
gradientEnd: "#400000",
|
||||||
|
gradientStart: "#ff0000",
|
||||||
|
lineWidth: 1.5,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#ffffff",
|
||||||
|
bgColorOuter: "#000000",
|
||||||
|
gradientEnd: "#000000",
|
||||||
|
gradientStart: "#000000",
|
||||||
|
lineWidth: 2.2,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#ffffff",
|
||||||
|
bgColorOuter: "#ffffff",
|
||||||
|
gradientEnd: "#696969",
|
||||||
|
gradientStart: "#636363",
|
||||||
|
lineWidth: 1,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#3b003b",
|
||||||
|
bgColorOuter: "#630063",
|
||||||
|
gradientEnd: "#cccc00",
|
||||||
|
gradientStart: "#ffff00",
|
||||||
|
lineWidth: 1,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#ffffff",
|
||||||
|
bgColorOuter: "#ebebeb",
|
||||||
|
gradientEnd: "#012e82",
|
||||||
|
gradientStart: "#2600ff",
|
||||||
|
lineWidth: 1.5,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bgColorInner: "#4d4d4d",
|
||||||
|
bgColorOuter: "#000000",
|
||||||
|
gradientEnd: "#00c48d",
|
||||||
|
gradientStart: "#03ffea",
|
||||||
|
lineWidth: 1,
|
||||||
|
numCircles: 1,
|
||||||
|
radiusSize: 100,
|
||||||
|
smokeOpacity: 5
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
//Set download size
|
||||||
|
$('#downloadWidth').val($(window).width());
|
||||||
|
$('#downloadHeight').val($(window).height());
|
||||||
|
|
||||||
|
//Go to samples
|
||||||
|
$('.sidebar-wrapper').on('click', '.btn-samples', function(){
|
||||||
|
niceScroll.doScrollTop($('.generator-form-wrap').scrollTop() + $('#samples-section').position().top - 89);
|
||||||
|
console.log($('.generator-form-wrap').scrollTop);
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
//Generate
|
||||||
|
$('.sidebar-wrapper').on('click', '.btn-generate', function(){
|
||||||
|
setNewParams();
|
||||||
|
smokyBG.data('waterpipe').generate();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
//Download
|
||||||
|
$('.sidebar-wrapper').on('click', '.btn-download', function(){
|
||||||
|
var width = $('#downloadWidth').val(),
|
||||||
|
height = $('#downloadHeight').val();
|
||||||
|
smokyBG.data('waterpipe').download(width, height);
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
//Generate sample
|
||||||
|
$('.sidebar-wrapper').on('click', '.sample-smoke', function(){
|
||||||
|
var sampleID = $(this).attr('data-id');
|
||||||
|
loadParams(sampleParams[sampleID]);
|
||||||
|
$('.btn-generate').click();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
//Init color pickers
|
||||||
|
var gradientStartObj = $('#gradientStart').colpick({
|
||||||
|
layout:'hex',
|
||||||
|
submit:0,
|
||||||
|
colorScheme:'dark',
|
||||||
|
onChange:function(hsb,hex,rgb,el,bySetColor) {
|
||||||
|
$(el).css('border-color','#'+hex);
|
||||||
|
$(el).val('#'+hex);
|
||||||
|
}
|
||||||
|
}).keyup(function(){
|
||||||
|
$(this).colpickSetColor(this.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
var gradientEndObj = $('#gradientEnd').colpick({
|
||||||
|
layout:'hex',
|
||||||
|
submit:0,
|
||||||
|
colorScheme:'dark',
|
||||||
|
onChange:function(hsb,hex,rgb,el,bySetColor) {
|
||||||
|
$(el).css('border-color','#'+hex);
|
||||||
|
$(el).val('#'+hex);
|
||||||
|
}
|
||||||
|
}).keyup(function(){
|
||||||
|
$(this).colpickSetColor(this.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
var bgColorOuterObj = $('#bgColorOuter').colpick({
|
||||||
|
layout:'hex',
|
||||||
|
submit:0,
|
||||||
|
colorScheme:'dark',
|
||||||
|
onChange:function(hsb,hex,rgb,el,bySetColor) {
|
||||||
|
$(el).css('border-color','#'+hex);
|
||||||
|
$(el).val('#'+hex);
|
||||||
|
}
|
||||||
|
}).keyup(function(){
|
||||||
|
$(this).colpickSetColor(this.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
var bgColorInnerObj = $('#bgColorInner').colpick({
|
||||||
|
layout:'hex',
|
||||||
|
submit:0,
|
||||||
|
colorScheme:'dark',
|
||||||
|
onChange:function(hsb,hex,rgb,el,bySetColor) {
|
||||||
|
$(el).css('border-color','#'+hex);
|
||||||
|
$(el).val('#'+hex);
|
||||||
|
}
|
||||||
|
}).keyup(function(){
|
||||||
|
$(this).colpickSetColor(this.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
//Smoke Opacity slider
|
||||||
|
var smokeOpacitySlider = $('.smokeOpacity-slider').noUiSlider({
|
||||||
|
start: [ 10 ],
|
||||||
|
range: {
|
||||||
|
'min': [ 0 ],
|
||||||
|
'max': [ 100 ]
|
||||||
|
},
|
||||||
|
step: 5,
|
||||||
|
serialization: {
|
||||||
|
lower: [
|
||||||
|
$.Link({
|
||||||
|
target: $('#smokeOpacity')
|
||||||
|
})
|
||||||
|
],
|
||||||
|
format: {
|
||||||
|
decimals: 0,
|
||||||
|
mark: '.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
smokeOpacitySlider.on({
|
||||||
|
slide: function(){
|
||||||
|
var sliderValue = $(this).val();
|
||||||
|
$(this).parents('.input-group').find('.value').html(sliderValue+'%');
|
||||||
|
},
|
||||||
|
change: function(){
|
||||||
|
var sliderValue = $(this).val();
|
||||||
|
$(this).parents('.input-group').find('.value').html(sliderValue+'%');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//Number of Smokes slider
|
||||||
|
var numCirclesSlider = $('.numCircles-slider').noUiSlider({
|
||||||
|
start: [ 1 ],
|
||||||
|
range: {
|
||||||
|
'min': [ 1 ],
|
||||||
|
'max': [ 5 ]
|
||||||
|
},
|
||||||
|
step: 1,
|
||||||
|
serialization: {
|
||||||
|
lower: [
|
||||||
|
$.Link({
|
||||||
|
target: $('#numCircles')
|
||||||
|
})
|
||||||
|
],
|
||||||
|
format: {
|
||||||
|
decimals: 0,
|
||||||
|
mark: '.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
numCirclesSlider.on({
|
||||||
|
slide: function(){
|
||||||
|
var sliderValue = $(this).val();
|
||||||
|
$(this).parents('.input-group').find('.value').html(sliderValue);
|
||||||
|
},
|
||||||
|
change: function(){
|
||||||
|
var sliderValue = $(this).val();
|
||||||
|
$(this).parents('.input-group').find('.value').html(sliderValue);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//Smoke Size slider
|
||||||
|
var radiusSizeSlider = $('.radiusSize-slider').noUiSlider({
|
||||||
|
start: [ 100 ],
|
||||||
|
range: {
|
||||||
|
'min': [ 10 ],
|
||||||
|
'max': [ 300 ]
|
||||||
|
},
|
||||||
|
step: 1,
|
||||||
|
serialization: {
|
||||||
|
lower: [
|
||||||
|
$.Link({
|
||||||
|
target: $('#radiusSize')
|
||||||
|
})
|
||||||
|
],
|
||||||
|
format: {
|
||||||
|
decimals: 0,
|
||||||
|
mark: '.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
radiusSizeSlider.on({
|
||||||
|
slide: function(){
|
||||||
|
var sliderValue = $(this).val();
|
||||||
|
$(this).parents('.input-group').find('.value').html(sliderValue+'%');
|
||||||
|
},
|
||||||
|
change: function(){
|
||||||
|
var sliderValue = $(this).val();
|
||||||
|
$(this).parents('.input-group').find('.value').html(sliderValue+'%');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//Smoke Size slider
|
||||||
|
var lineWidthSlider = $('.lineWidth-slider').noUiSlider({
|
||||||
|
start: [ 2 ],
|
||||||
|
range: {
|
||||||
|
'min': [ 0.1 ],
|
||||||
|
'max': [ 10 ]
|
||||||
|
},
|
||||||
|
step: 0.1,
|
||||||
|
serialization: {
|
||||||
|
lower: [
|
||||||
|
$.Link({
|
||||||
|
target: $('#lineWidth')
|
||||||
|
})
|
||||||
|
],
|
||||||
|
format: {
|
||||||
|
decimals: 1,
|
||||||
|
mark: '.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
lineWidthSlider.on({
|
||||||
|
slide: function(){
|
||||||
|
var sliderValue = $(this).val();
|
||||||
|
$(this).parents('.input-group').find('.value').html(sliderValue+'px');
|
||||||
|
},
|
||||||
|
change: function(){
|
||||||
|
var sliderValue = $(this).val();
|
||||||
|
$(this).parents('.input-group').find('.value').html(sliderValue+'px');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//Set new params
|
||||||
|
function setNewParams(){
|
||||||
|
var params = $('.generator-params').serializeObject();
|
||||||
|
console.log(params);
|
||||||
|
|
||||||
|
//Set new values
|
||||||
|
smokyBG.data('waterpipe').setOption('gradientStart', params.gradientStart);
|
||||||
|
smokyBG.data('waterpipe').setOption('gradientEnd', params.gradientEnd);
|
||||||
|
smokyBG.data('waterpipe').setOption('smokeOpacity', params.smokeOpacity/100);
|
||||||
|
smokyBG.data('waterpipe').setOption('numCircles', params.numCircles);
|
||||||
|
|
||||||
|
var radius = $(window).height()*0.8/2*(params.radiusSize/100);
|
||||||
|
smokyBG.data('waterpipe').setOption('maxMaxRad', radius);
|
||||||
|
smokyBG.data('waterpipe').setOption('minMaxRad', radius);
|
||||||
|
|
||||||
|
smokyBG.data('waterpipe').setOption('lineWidth', params.lineWidth);
|
||||||
|
|
||||||
|
smokyBG.data('waterpipe').setOption('bgColorOuter', params.bgColorOuter);
|
||||||
|
smokyBG.data('waterpipe').setOption('bgColorInner', params.bgColorInner);
|
||||||
|
}
|
||||||
|
|
||||||
|
//Load params (samples)
|
||||||
|
function loadParams(params){
|
||||||
|
gradientStartObj.colpickSetColor(params.gradientStart.replace('#', ''));
|
||||||
|
gradientEndObj.colpickSetColor(params.gradientEnd.replace('#', ''));
|
||||||
|
smokeOpacitySlider.val(params.smokeOpacity).change();
|
||||||
|
numCirclesSlider.val(params.numCircles).change();
|
||||||
|
radiusSizeSlider.val(params.radiusSize).change();
|
||||||
|
lineWidthSlider.val(params.lineWidth).change();
|
||||||
|
bgColorOuterObj.colpickSetColor(params.bgColorOuter.replace('#', ''));
|
||||||
|
bgColorInnerObj.colpickSetColor(params.bgColorInner.replace('#', ''));
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Executable
+520
@@ -0,0 +1,520 @@
|
|||||||
|
/*
|
||||||
|
colpick Color Picker
|
||||||
|
Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses
|
||||||
|
|
||||||
|
For usage and examples: colpick.com/plugin
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var colpick = function () {
|
||||||
|
var
|
||||||
|
tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>',
|
||||||
|
defaults = {
|
||||||
|
showEvent: 'click',
|
||||||
|
onShow: function () {},
|
||||||
|
onBeforeShow: function(){},
|
||||||
|
onHide: function () {},
|
||||||
|
onChange: function () {},
|
||||||
|
onSubmit: function () {},
|
||||||
|
colorScheme: 'light',
|
||||||
|
color: '3289c7',
|
||||||
|
livePreview: true,
|
||||||
|
flat: false,
|
||||||
|
layout: 'full',
|
||||||
|
submit: 1,
|
||||||
|
submitText: 'OK',
|
||||||
|
height: 156
|
||||||
|
},
|
||||||
|
//Fill the inputs of the plugin
|
||||||
|
fillRGBFields = function (hsb, cal) {
|
||||||
|
var rgb = hsbToRgb(hsb);
|
||||||
|
$(cal).data('colpick').fields
|
||||||
|
.eq(1).val(rgb.r).end()
|
||||||
|
.eq(2).val(rgb.g).end()
|
||||||
|
.eq(3).val(rgb.b).end();
|
||||||
|
},
|
||||||
|
fillHSBFields = function (hsb, cal) {
|
||||||
|
$(cal).data('colpick').fields
|
||||||
|
.eq(4).val(Math.round(hsb.h)).end()
|
||||||
|
.eq(5).val(Math.round(hsb.s)).end()
|
||||||
|
.eq(6).val(Math.round(hsb.b)).end();
|
||||||
|
},
|
||||||
|
fillHexFields = function (hsb, cal) {
|
||||||
|
$(cal).data('colpick').fields.eq(0).val(hsbToHex(hsb));
|
||||||
|
},
|
||||||
|
//Set the round selector position
|
||||||
|
setSelector = function (hsb, cal) {
|
||||||
|
$(cal).data('colpick').selector.css('backgroundColor', '#' + hsbToHex({h: hsb.h, s: 100, b: 100}));
|
||||||
|
$(cal).data('colpick').selectorIndic.css({
|
||||||
|
left: parseInt($(cal).data('colpick').height * hsb.s/100, 10),
|
||||||
|
top: parseInt($(cal).data('colpick').height * (100-hsb.b)/100, 10)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//Set the hue selector position
|
||||||
|
setHue = function (hsb, cal) {
|
||||||
|
$(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsb.h/360, 10));
|
||||||
|
},
|
||||||
|
//Set current and new colors
|
||||||
|
setCurrentColor = function (hsb, cal) {
|
||||||
|
$(cal).data('colpick').currentColor.css('backgroundColor', '#' + hsbToHex(hsb));
|
||||||
|
},
|
||||||
|
setNewColor = function (hsb, cal) {
|
||||||
|
$(cal).data('colpick').newColor.css('backgroundColor', '#' + hsbToHex(hsb));
|
||||||
|
},
|
||||||
|
//Called when the new color is changed
|
||||||
|
change = function (ev) {
|
||||||
|
var cal = $(this).parent().parent(), col;
|
||||||
|
if (this.parentNode.className.indexOf('_hex') > 0) {
|
||||||
|
cal.data('colpick').color = col = hexToHsb(fixHex(this.value));
|
||||||
|
fillRGBFields(col, cal.get(0));
|
||||||
|
fillHSBFields(col, cal.get(0));
|
||||||
|
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
||||||
|
cal.data('colpick').color = col = fixHSB({
|
||||||
|
h: parseInt(cal.data('colpick').fields.eq(4).val(), 10),
|
||||||
|
s: parseInt(cal.data('colpick').fields.eq(5).val(), 10),
|
||||||
|
b: parseInt(cal.data('colpick').fields.eq(6).val(), 10)
|
||||||
|
});
|
||||||
|
fillRGBFields(col, cal.get(0));
|
||||||
|
fillHexFields(col, cal.get(0));
|
||||||
|
} else {
|
||||||
|
cal.data('colpick').color = col = rgbToHsb(fixRGB({
|
||||||
|
r: parseInt(cal.data('colpick').fields.eq(1).val(), 10),
|
||||||
|
g: parseInt(cal.data('colpick').fields.eq(2).val(), 10),
|
||||||
|
b: parseInt(cal.data('colpick').fields.eq(3).val(), 10)
|
||||||
|
}));
|
||||||
|
fillHexFields(col, cal.get(0));
|
||||||
|
fillHSBFields(col, cal.get(0));
|
||||||
|
}
|
||||||
|
setSelector(col, cal.get(0));
|
||||||
|
setHue(col, cal.get(0));
|
||||||
|
setNewColor(col, cal.get(0));
|
||||||
|
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 0]);
|
||||||
|
},
|
||||||
|
//Change style on blur and on focus of inputs
|
||||||
|
blur = function (ev) {
|
||||||
|
$(this).parent().removeClass('colpick_focus');
|
||||||
|
},
|
||||||
|
focus = function () {
|
||||||
|
$(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus');
|
||||||
|
$(this).parent().addClass('colpick_focus');
|
||||||
|
},
|
||||||
|
//Increment/decrement arrows functions
|
||||||
|
downIncrement = function (ev) {
|
||||||
|
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||||
|
var field = $(this).parent().find('input').focus();
|
||||||
|
var current = {
|
||||||
|
el: $(this).parent().addClass('colpick_slider'),
|
||||||
|
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
||||||
|
y: ev.pageY,
|
||||||
|
field: field,
|
||||||
|
val: parseInt(field.val(), 10),
|
||||||
|
preview: $(this).parent().parent().data('colpick').livePreview
|
||||||
|
};
|
||||||
|
$(document).mouseup(current, upIncrement);
|
||||||
|
$(document).mousemove(current, moveIncrement);
|
||||||
|
},
|
||||||
|
moveIncrement = function (ev) {
|
||||||
|
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10))));
|
||||||
|
if (ev.data.preview) {
|
||||||
|
change.apply(ev.data.field.get(0), [true]);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
upIncrement = function (ev) {
|
||||||
|
change.apply(ev.data.field.get(0), [true]);
|
||||||
|
ev.data.el.removeClass('colpick_slider').find('input').focus();
|
||||||
|
$(document).off('mouseup', upIncrement);
|
||||||
|
$(document).off('mousemove', moveIncrement);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
//Hue slider functions
|
||||||
|
downHue = function (ev) {
|
||||||
|
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||||
|
var current = {
|
||||||
|
cal: $(this).parent(),
|
||||||
|
y: $(this).offset().top
|
||||||
|
};
|
||||||
|
$(document).on('mouseup touchend',current,upHue);
|
||||||
|
$(document).on('mousemove touchmove',current,moveHue);
|
||||||
|
|
||||||
|
var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
|
||||||
|
change.apply(
|
||||||
|
current.cal.data('colpick')
|
||||||
|
.fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10))
|
||||||
|
.get(0),
|
||||||
|
[current.cal.data('colpick').livePreview]
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
moveHue = function (ev) {
|
||||||
|
var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
|
||||||
|
change.apply(
|
||||||
|
ev.data.cal.data('colpick')
|
||||||
|
.fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10))
|
||||||
|
.get(0),
|
||||||
|
[ev.data.preview]
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
upHue = function (ev) {
|
||||||
|
fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
||||||
|
fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
||||||
|
$(document).off('mouseup touchend',upHue);
|
||||||
|
$(document).off('mousemove touchmove',moveHue);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
//Color selector functions
|
||||||
|
downSelector = function (ev) {
|
||||||
|
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||||
|
var current = {
|
||||||
|
cal: $(this).parent(),
|
||||||
|
pos: $(this).offset()
|
||||||
|
};
|
||||||
|
current.preview = current.cal.data('colpick').livePreview;
|
||||||
|
|
||||||
|
$(document).on('mouseup touchend',current,upSelector);
|
||||||
|
$(document).on('mousemove touchmove',current,moveSelector);
|
||||||
|
|
||||||
|
var payeX,pageY;
|
||||||
|
if(ev.type == 'touchstart') {
|
||||||
|
pageX = ev.originalEvent.changedTouches[0].pageX,
|
||||||
|
pageY = ev.originalEvent.changedTouches[0].pageY;
|
||||||
|
} else {
|
||||||
|
pageX = ev.pageX;
|
||||||
|
pageY = ev.pageY;
|
||||||
|
}
|
||||||
|
|
||||||
|
change.apply(
|
||||||
|
current.cal.data('colpick').fields
|
||||||
|
.eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end()
|
||||||
|
.eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10))
|
||||||
|
.get(0),
|
||||||
|
[current.preview]
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
moveSelector = function (ev) {
|
||||||
|
var payeX,pageY;
|
||||||
|
if(ev.type == 'touchmove') {
|
||||||
|
pageX = ev.originalEvent.changedTouches[0].pageX,
|
||||||
|
pageY = ev.originalEvent.changedTouches[0].pageY;
|
||||||
|
} else {
|
||||||
|
pageX = ev.pageX;
|
||||||
|
pageY = ev.pageY;
|
||||||
|
}
|
||||||
|
|
||||||
|
change.apply(
|
||||||
|
ev.data.cal.data('colpick').fields
|
||||||
|
.eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end()
|
||||||
|
.eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10))
|
||||||
|
.get(0),
|
||||||
|
[ev.data.preview]
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
upSelector = function (ev) {
|
||||||
|
fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
||||||
|
fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
||||||
|
$(document).off('mouseup touchend',upSelector);
|
||||||
|
$(document).off('mousemove touchmove',moveSelector);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
//Submit button
|
||||||
|
clickSubmit = function (ev) {
|
||||||
|
var cal = $(this).parent();
|
||||||
|
var col = cal.data('colpick').color;
|
||||||
|
cal.data('colpick').origColor = col;
|
||||||
|
setCurrentColor(col, cal.get(0));
|
||||||
|
cal.data('colpick').onSubmit(col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el);
|
||||||
|
},
|
||||||
|
//Show/hide the color picker
|
||||||
|
show = function (ev) {
|
||||||
|
// Prevent the trigger of any direct parent
|
||||||
|
ev.stopPropagation();
|
||||||
|
var cal = $('#' + $(this).data('colpickId'));
|
||||||
|
cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]);
|
||||||
|
var pos = $(this).offset();
|
||||||
|
var top = pos.top + this.offsetHeight;
|
||||||
|
var left = pos.left;
|
||||||
|
var viewPort = getViewport();
|
||||||
|
var calW = cal.width();
|
||||||
|
if (left + calW > viewPort.l + viewPort.w) {
|
||||||
|
left -= calW;
|
||||||
|
}
|
||||||
|
cal.css({left: left + 'px', top: top + 'px'});
|
||||||
|
if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) {
|
||||||
|
cal.show();
|
||||||
|
}
|
||||||
|
//Hide when user clicks outside
|
||||||
|
$('html').mousedown({cal:cal}, hide);
|
||||||
|
cal.mousedown(function(ev){ev.stopPropagation();})
|
||||||
|
},
|
||||||
|
hide = function (ev) {
|
||||||
|
if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
||||||
|
ev.data.cal.hide();
|
||||||
|
}
|
||||||
|
$('html').off('mousedown', hide);
|
||||||
|
},
|
||||||
|
getViewport = function () {
|
||||||
|
var m = document.compatMode == 'CSS1Compat';
|
||||||
|
return {
|
||||||
|
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
||||||
|
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth)
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//Fix the values if the user enters a negative or high value
|
||||||
|
fixHSB = function (hsb) {
|
||||||
|
return {
|
||||||
|
h: Math.min(360, Math.max(0, hsb.h)),
|
||||||
|
s: Math.min(100, Math.max(0, hsb.s)),
|
||||||
|
b: Math.min(100, Math.max(0, hsb.b))
|
||||||
|
};
|
||||||
|
},
|
||||||
|
fixRGB = function (rgb) {
|
||||||
|
return {
|
||||||
|
r: Math.min(255, Math.max(0, rgb.r)),
|
||||||
|
g: Math.min(255, Math.max(0, rgb.g)),
|
||||||
|
b: Math.min(255, Math.max(0, rgb.b))
|
||||||
|
};
|
||||||
|
},
|
||||||
|
fixHex = function (hex) {
|
||||||
|
var len = 6 - hex.length;
|
||||||
|
if (len > 0) {
|
||||||
|
var o = [];
|
||||||
|
for (var i=0; i<len; i++) {
|
||||||
|
o.push('0');
|
||||||
|
}
|
||||||
|
o.push(hex);
|
||||||
|
hex = o.join('');
|
||||||
|
}
|
||||||
|
return hex;
|
||||||
|
},
|
||||||
|
restoreOriginal = function () {
|
||||||
|
var cal = $(this).parent();
|
||||||
|
var col = cal.data('colpick').origColor;
|
||||||
|
cal.data('colpick').color = col;
|
||||||
|
fillRGBFields(col, cal.get(0));
|
||||||
|
fillHexFields(col, cal.get(0));
|
||||||
|
fillHSBFields(col, cal.get(0));
|
||||||
|
setSelector(col, cal.get(0));
|
||||||
|
setHue(col, cal.get(0));
|
||||||
|
setNewColor(col, cal.get(0));
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
init: function (opt) {
|
||||||
|
opt = $.extend({}, defaults, opt||{});
|
||||||
|
//Set color
|
||||||
|
if (typeof opt.color == 'string') {
|
||||||
|
opt.color = hexToHsb(opt.color);
|
||||||
|
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
||||||
|
opt.color = rgbToHsb(opt.color);
|
||||||
|
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
||||||
|
opt.color = fixHSB(opt.color);
|
||||||
|
} else {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
//For each selected DOM element
|
||||||
|
return this.each(function () {
|
||||||
|
//If the element does not have an ID
|
||||||
|
if (!$(this).data('colpickId')) {
|
||||||
|
var options = $.extend({}, opt);
|
||||||
|
options.origColor = opt.color;
|
||||||
|
//Generate and assign a random ID
|
||||||
|
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
||||||
|
$(this).data('colpickId', id);
|
||||||
|
//Set the tpl's ID and get the HTML
|
||||||
|
var cal = $(tpl).attr('id', id);
|
||||||
|
//Add class according to layout
|
||||||
|
cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns'));
|
||||||
|
//Add class if the color scheme is not default
|
||||||
|
if(options.colorScheme != 'light') {
|
||||||
|
cal.addClass('colpick_'+options.colorScheme);
|
||||||
|
}
|
||||||
|
//Setup submit button
|
||||||
|
cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit);
|
||||||
|
//Setup input fields
|
||||||
|
options.fields = cal.find('input').change(change).blur(blur).focus(focus);
|
||||||
|
cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal);
|
||||||
|
//Setup hue selector
|
||||||
|
options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector);
|
||||||
|
options.selectorIndic = options.selector.find('div.colpick_selector_outer');
|
||||||
|
//Store parts of the plugin
|
||||||
|
options.el = this;
|
||||||
|
options.hue = cal.find('div.colpick_hue_arrs');
|
||||||
|
huebar = options.hue.parent();
|
||||||
|
//Paint the hue bar
|
||||||
|
var UA = navigator.userAgent.toLowerCase();
|
||||||
|
var isIE = navigator.appName === 'Microsoft Internet Explorer';
|
||||||
|
var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0;
|
||||||
|
var ngIE = ( isIE && IEver < 10 );
|
||||||
|
var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000'];
|
||||||
|
if(ngIE) {
|
||||||
|
var i, div;
|
||||||
|
for(i=0; i<=11; i++) {
|
||||||
|
div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";');
|
||||||
|
huebar.append(div);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
stopList = stops.join(',');
|
||||||
|
huebar.attr('style','background:-webkit-linear-gradient(top,'+stopList+'); background: -o-linear-gradient(top,'+stopList+'); background: -ms-linear-gradient(top,'+stopList+'); background:-moz-linear-gradient(top,'+stopList+'); -webkit-linear-gradient(top,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
|
||||||
|
}
|
||||||
|
cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
|
||||||
|
options.newColor = cal.find('div.colpick_new_color');
|
||||||
|
options.currentColor = cal.find('div.colpick_current_color');
|
||||||
|
//Store options and fill with default color
|
||||||
|
cal.data('colpick', options);
|
||||||
|
fillRGBFields(options.color, cal.get(0));
|
||||||
|
fillHSBFields(options.color, cal.get(0));
|
||||||
|
fillHexFields(options.color, cal.get(0));
|
||||||
|
setHue(options.color, cal.get(0));
|
||||||
|
setSelector(options.color, cal.get(0));
|
||||||
|
setCurrentColor(options.color, cal.get(0));
|
||||||
|
setNewColor(options.color, cal.get(0));
|
||||||
|
//Append to body if flat=false, else show in place
|
||||||
|
if (options.flat) {
|
||||||
|
cal.appendTo(this).show();
|
||||||
|
cal.css({
|
||||||
|
position: 'relative',
|
||||||
|
display: 'block'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
cal.appendTo(document.body);
|
||||||
|
$(this).on(options.showEvent, show);
|
||||||
|
cal.css({
|
||||||
|
position:'absolute'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//Shows the picker
|
||||||
|
showPicker: function() {
|
||||||
|
return this.each( function () {
|
||||||
|
if ($(this).data('colpickId')) {
|
||||||
|
show.apply(this);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//Hides the picker
|
||||||
|
hidePicker: function() {
|
||||||
|
return this.each( function () {
|
||||||
|
if ($(this).data('colpickId')) {
|
||||||
|
$('#' + $(this).data('colpickId')).hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//Sets a color as new and current (default)
|
||||||
|
setColor: function(col, setCurrent) {
|
||||||
|
setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent;
|
||||||
|
if (typeof col == 'string') {
|
||||||
|
col = hexToHsb(col);
|
||||||
|
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
||||||
|
col = rgbToHsb(col);
|
||||||
|
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
||||||
|
col = fixHSB(col);
|
||||||
|
} else {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
return this.each(function(){
|
||||||
|
if ($(this).data('colpickId')) {
|
||||||
|
var cal = $('#' + $(this).data('colpickId'));
|
||||||
|
cal.data('colpick').color = col;
|
||||||
|
cal.data('colpick').origColor = col;
|
||||||
|
fillRGBFields(col, cal.get(0));
|
||||||
|
fillHSBFields(col, cal.get(0));
|
||||||
|
fillHexFields(col, cal.get(0));
|
||||||
|
setHue(col, cal.get(0));
|
||||||
|
setSelector(col, cal.get(0));
|
||||||
|
|
||||||
|
setNewColor(col, cal.get(0));
|
||||||
|
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 1]);
|
||||||
|
if(setCurrent) {
|
||||||
|
setCurrentColor(col, cal.get(0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
//Color space convertions
|
||||||
|
var hexToRgb = function (hex) {
|
||||||
|
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||||
|
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
||||||
|
};
|
||||||
|
var hexToHsb = function (hex) {
|
||||||
|
return rgbToHsb(hexToRgb(hex));
|
||||||
|
};
|
||||||
|
var rgbToHsb = function (rgb) {
|
||||||
|
var hsb = {h: 0, s: 0, b: 0};
|
||||||
|
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||||
|
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||||
|
var delta = max - min;
|
||||||
|
hsb.b = max;
|
||||||
|
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||||
|
if (hsb.s != 0) {
|
||||||
|
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
|
||||||
|
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||||
|
else hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||||
|
} else hsb.h = -1;
|
||||||
|
hsb.h *= 60;
|
||||||
|
if (hsb.h < 0) hsb.h += 360;
|
||||||
|
hsb.s *= 100/255;
|
||||||
|
hsb.b *= 100/255;
|
||||||
|
return hsb;
|
||||||
|
};
|
||||||
|
var hsbToRgb = function (hsb) {
|
||||||
|
var rgb = {};
|
||||||
|
var h = hsb.h;
|
||||||
|
var s = hsb.s*255/100;
|
||||||
|
var v = hsb.b*255/100;
|
||||||
|
if(s == 0) {
|
||||||
|
rgb.r = rgb.g = rgb.b = v;
|
||||||
|
} else {
|
||||||
|
var t1 = v;
|
||||||
|
var t2 = (255-s)*v/255;
|
||||||
|
var t3 = (t1-t2)*(h%60)/60;
|
||||||
|
if(h==360) h = 0;
|
||||||
|
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
||||||
|
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
||||||
|
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
||||||
|
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
||||||
|
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
||||||
|
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
||||||
|
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
||||||
|
}
|
||||||
|
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||||
|
};
|
||||||
|
var rgbToHex = function (rgb) {
|
||||||
|
var hex = [
|
||||||
|
rgb.r.toString(16),
|
||||||
|
rgb.g.toString(16),
|
||||||
|
rgb.b.toString(16)
|
||||||
|
];
|
||||||
|
$.each(hex, function (nr, val) {
|
||||||
|
if (val.length == 1) {
|
||||||
|
hex[nr] = '0' + val;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return hex.join('');
|
||||||
|
};
|
||||||
|
var hsbToHex = function (hsb) {
|
||||||
|
return rgbToHex(hsbToRgb(hsb));
|
||||||
|
};
|
||||||
|
$.fn.extend({
|
||||||
|
colpick: colpick.init,
|
||||||
|
colpickHide: colpick.hidePicker,
|
||||||
|
colpickShow: colpick.showPicker,
|
||||||
|
colpickSetColor: colpick.setColor
|
||||||
|
});
|
||||||
|
$.extend({
|
||||||
|
colpick:{
|
||||||
|
rgbToHex: rgbToHex,
|
||||||
|
rgbToHsb: rgbToHsb,
|
||||||
|
hsbToHex: hsbToHex,
|
||||||
|
hsbToRgb: hsbToRgb,
|
||||||
|
hexToHsb: hexToHsb,
|
||||||
|
hexToRgb: hexToRgb
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
+4
File diff suppressed because one or more lines are too long
+111
@@ -0,0 +1,111 @@
|
|||||||
|
/* jquery.nicescroll 3.2.0 InuYaksa*2013 MIT http://areaaperta.com/nicescroll */(function(e){var y=!1,D=!1,J=5E3,K=2E3,x=0,L=function(){var e=document.getElementsByTagName("script"),e=e[e.length-1].src.split("?")[0];return 0<e.split("/").length?e.split("/").slice(0,-1).join("/")+"/":""}();Array.prototype.forEach||(Array.prototype.forEach=function(e,c){for(var h=0,l=this.length;h<l;++h)e.call(c,this[h],h,this)});var v=window.requestAnimationFrame||!1,w=window.cancelAnimationFrame||!1;["ms","moz","webkit","o"].forEach(function(e){v||(v=window[e+"RequestAnimationFrame"]);w||(w=
|
||||||
|
window[e+"CancelAnimationFrame"]||window[e+"CancelRequestAnimationFrame"])});var z=window.MutationObserver||window.WebKitMutationObserver||!1,F={zindex:"auto",cursoropacitymin:0,cursoropacitymax:1,cursorcolor:"#424242",cursorwidth:"5px",cursorborder:"1px solid #fff",cursorborderradius:"5px",scrollspeed:60,mousescrollstep:24,touchbehavior:!1,hwacceleration:!0,usetransition:!0,boxzoom:!1,dblclickzoom:!0,gesturezoom:!0,grabcursorenabled:!0,autohidemode:!0,background:"",iframeautoresize:!0,cursorminheight:32,
|
||||||
|
preservenativescrolling:!0,railoffset:!1,bouncescroll:!0,spacebarenabled:!0,railpadding:{top:0,right:0,left:0,bottom:0},disableoutline:!0,horizrailenabled:!0,railalign:"right",railvalign:"bottom",enabletranslate3d:!0,enablemousewheel:!0,enablekeyboard:!0,smoothscroll:!0,sensitiverail:!0,enablemouselockapi:!0,cursorfixedheight:!1,directionlockdeadzone:6,hidecursordelay:400,nativeparentscrolling:!0,enablescrollonselection:!0,overflowx:!0,overflowy:!0,cursordragspeed:0.3,rtlmode:!1,cursordragontouch:!1},
|
||||||
|
E=!1,M=function(){if(E)return E;var e=document.createElement("DIV"),c={haspointerlock:"pointerLockElement"in document||"mozPointerLockElement"in document||"webkitPointerLockElement"in document};c.isopera="opera"in window;c.isopera12=c.isopera&&"getUserMedia"in navigator;c.isie="all"in document&&"attachEvent"in e&&!c.isopera;c.isieold=c.isie&&!("msInterpolationMode"in e.style);c.isie7=c.isie&&!c.isieold&&(!("documentMode"in document)||7==document.documentMode);c.isie8=c.isie&&"documentMode"in document&&
|
||||||
|
8==document.documentMode;c.isie9=c.isie&&"performance"in window&&9<=document.documentMode;c.isie10=c.isie&&"performance"in window&&10<=document.documentMode;c.isie9mobile=/iemobile.9/i.test(navigator.userAgent);c.isie9mobile&&(c.isie9=!1);c.isie7mobile=!c.isie9mobile&&c.isie7&&/iemobile/i.test(navigator.userAgent);c.ismozilla="MozAppearance"in e.style;c.iswebkit="WebkitAppearance"in e.style;c.ischrome="chrome"in window;c.ischrome22=c.ischrome&&c.haspointerlock;c.ischrome26=c.ischrome&&"transition"in
|
||||||
|
e.style;c.cantouch="ontouchstart"in document.documentElement||"ontouchstart"in window;c.hasmstouch=window.navigator.msPointerEnabled||!1;c.ismac=/^mac$/i.test(navigator.platform);c.isios=c.cantouch&&/iphone|ipad|ipod/i.test(navigator.platform);c.isios4=c.isios&&!("seal"in Object);c.isandroid=/android/i.test(navigator.userAgent);c.trstyle=!1;c.hastransform=!1;c.hastranslate3d=!1;c.transitionstyle=!1;c.hastransition=!1;c.transitionend=!1;for(var h=["transform","msTransform","webkitTransform","MozTransform",
|
||||||
|
"OTransform"],l=0;l<h.length;l++)if("undefined"!=typeof e.style[h[l]]){c.trstyle=h[l];break}c.hastransform=!1!=c.trstyle;c.hastransform&&(e.style[c.trstyle]="translate3d(1px,2px,3px)",c.hastranslate3d=/translate3d/.test(e.style[c.trstyle]));c.transitionstyle=!1;c.prefixstyle="";c.transitionend=!1;for(var h="transition webkitTransition MozTransition OTransition OTransition msTransition KhtmlTransition".split(" "),n=" -webkit- -moz- -o- -o -ms- -khtml-".split(" "),t="transitionend webkitTransitionEnd transitionend otransitionend oTransitionEnd msTransitionEnd KhtmlTransitionEnd".split(" "),
|
||||||
|
l=0;l<h.length;l++)if(h[l]in e.style){c.transitionstyle=h[l];c.prefixstyle=n[l];c.transitionend=t[l];break}c.ischrome26&&(c.prefixstyle=n[1]);c.hastransition=c.transitionstyle;a:{h=["-moz-grab","-webkit-grab","grab"];if(c.ischrome&&!c.ischrome22||c.isie)h=[];for(l=0;l<h.length;l++)if(n=h[l],e.style.cursor=n,e.style.cursor==n){h=n;break a}h="url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur),n-resize"}c.cursorgrabvalue=h;c.hasmousecapture="setCapture"in e;c.hasMutationObserver=!1!==z;return E=
|
||||||
|
c},N=function(k,c){function h(){var d=b.win;if("zIndex"in d)return d.zIndex();for(;0<d.length&&9!=d[0].nodeType;){var c=d.css("zIndex");if(!isNaN(c)&&0!=c)return parseInt(c);d=d.parent()}return!1}function l(d,c,g){c=d.css(c);d=parseFloat(c);return isNaN(d)?(d=u[c]||0,g=3==d?g?b.win.outerHeight()-b.win.innerHeight():b.win.outerWidth()-b.win.innerWidth():1,b.isie8&&d&&(d+=1),g?d:0):d}function n(d,c,g,e){b._bind(d,c,function(b){b=b?b:window.event;var e={original:b,target:b.target||b.srcElement,type:"wheel",
|
||||||
|
deltaMode:"MozMousePixelScroll"==b.type?0:1,deltaX:0,deltaZ:0,preventDefault:function(){b.preventDefault?b.preventDefault():b.returnValue=!1;return!1},stopImmediatePropagation:function(){b.stopImmediatePropagation?b.stopImmediatePropagation():b.cancelBubble=!0}};"mousewheel"==c?(e.deltaY=-0.025*b.wheelDelta,b.wheelDeltaX&&(e.deltaX=-0.025*b.wheelDeltaX)):e.deltaY=b.detail;return g.call(d,e)},e)}function t(d,c,g){var e,f;0==d.deltaMode?(e=-Math.floor(d.deltaX*(b.opt.mousescrollstep/54)),f=-Math.floor(d.deltaY*
|
||||||
|
(b.opt.mousescrollstep/54))):1==d.deltaMode&&(e=-Math.floor(d.deltaX*b.opt.mousescrollstep),f=-Math.floor(d.deltaY*b.opt.mousescrollstep));c&&(0==e&&f)&&(e=f,f=0);e&&(b.scrollmom&&b.scrollmom.stop(),b.lastdeltax+=e,b.debounced("mousewheelx",function(){var d=b.lastdeltax;b.lastdeltax=0;b.rail.drag||b.doScrollLeftBy(d)},120));if(f){if(b.opt.nativeparentscrolling&&g&&!b.ispage&&!b.zoomactive)if(0>f){if(b.getScrollTop()>=b.page.maxh)return!0}else if(0>=b.getScrollTop())return!0;b.scrollmom&&b.scrollmom.stop();
|
||||||
|
b.lastdeltay+=f;b.debounced("mousewheely",function(){var d=b.lastdeltay;b.lastdeltay=0;b.rail.drag||b.doScrollBy(d)},120)}d.stopImmediatePropagation();return d.preventDefault()}var b=this;this.version="3.4.0";this.name="nicescroll";this.me=c;this.opt={doc:e("body"),win:!1};e.extend(this.opt,F);this.opt.snapbackspeed=80;if(k)for(var q in b.opt)"undefined"!=typeof k[q]&&(b.opt[q]=k[q]);this.iddoc=(this.doc=b.opt.doc)&&this.doc[0]?this.doc[0].id||"":"";this.ispage=/BODY|HTML/.test(b.opt.win?b.opt.win[0].nodeName:
|
||||||
|
this.doc[0].nodeName);this.haswrapper=!1!==b.opt.win;this.win=b.opt.win||(this.ispage?e(window):this.doc);this.docscroll=this.ispage&&!this.haswrapper?e(window):this.win;this.body=e("body");this.iframe=this.isfixed=this.viewport=!1;this.isiframe="IFRAME"==this.doc[0].nodeName&&"IFRAME"==this.win[0].nodeName;this.istextarea="TEXTAREA"==this.win[0].nodeName;this.forcescreen=!1;this.canshowonmouseevent="scroll"!=b.opt.autohidemode;this.page=this.view=this.onzoomout=this.onzoomin=this.onscrollcancel=
|
||||||
|
this.onscrollend=this.onscrollstart=this.onclick=this.ongesturezoom=this.onkeypress=this.onmousewheel=this.onmousemove=this.onmouseup=this.onmousedown=!1;this.scroll={x:0,y:0};this.scrollratio={x:0,y:0};this.cursorheight=20;this.scrollvaluemax=0;this.observerremover=this.observer=this.scrollmom=this.scrollrunning=this.checkrtlmode=!1;do this.id="ascrail"+K++;while(document.getElementById(this.id));this.hasmousefocus=this.hasfocus=this.zoomactive=this.zoom=this.selectiondrag=this.cursorfreezed=this.cursor=
|
||||||
|
this.rail=!1;this.visibility=!0;this.hidden=this.locked=!1;this.cursoractive=!0;this.overflowx=b.opt.overflowx;this.overflowy=b.opt.overflowy;this.nativescrollingarea=!1;this.checkarea=0;this.events=[];this.saved={};this.delaylist={};this.synclist={};this.lastdeltay=this.lastdeltax=0;this.detected=M();var f=e.extend({},this.detected);this.ishwscroll=(this.canhwscroll=f.hastransform&&b.opt.hwacceleration)&&b.haswrapper;this.istouchcapable=!1;f.cantouch&&(f.ischrome&&!f.isios&&!f.isandroid)&&(this.istouchcapable=
|
||||||
|
!0,f.cantouch=!1);f.cantouch&&(f.ismozilla&&!f.isios)&&(this.istouchcapable=!0,f.cantouch=!1);b.opt.enablemouselockapi||(f.hasmousecapture=!1,f.haspointerlock=!1);this.delayed=function(d,c,g,e){var f=b.delaylist[d],h=(new Date).getTime();if(!e&&f&&f.tt)return!1;f&&f.tt&&clearTimeout(f.tt);if(f&&f.last+g>h&&!f.tt)b.delaylist[d]={last:h+g,tt:setTimeout(function(){b.delaylist[d].tt=0;c.call()},g)};else if(!f||!f.tt)b.delaylist[d]={last:h,tt:0},setTimeout(function(){c.call()},0)};this.debounced=function(d,
|
||||||
|
c,g){var f=b.delaylist[d];(new Date).getTime();b.delaylist[d]=c;f||setTimeout(function(){var c=b.delaylist[d];b.delaylist[d]=!1;c.call()},g)};this.synched=function(d,c){b.synclist[d]=c;(function(){b.onsync||(v(function(){b.onsync=!1;for(d in b.synclist){var c=b.synclist[d];c&&c.call(b);b.synclist[d]=!1}}),b.onsync=!0)})();return d};this.unsynched=function(d){b.synclist[d]&&(b.synclist[d]=!1)};this.css=function(d,c){for(var g in c)b.saved.css.push([d,g,d.css(g)]),d.css(g,c[g])};this.scrollTop=function(d){return"undefined"==
|
||||||
|
typeof d?b.getScrollTop():b.setScrollTop(d)};this.scrollLeft=function(d){return"undefined"==typeof d?b.getScrollLeft():b.setScrollLeft(d)};BezierClass=function(b,c,g,f,e,h,l){this.st=b;this.ed=c;this.spd=g;this.p1=f||0;this.p2=e||1;this.p3=h||0;this.p4=l||1;this.ts=(new Date).getTime();this.df=this.ed-this.st};BezierClass.prototype={B2:function(b){return 3*b*b*(1-b)},B3:function(b){return 3*b*(1-b)*(1-b)},B4:function(b){return(1-b)*(1-b)*(1-b)},getNow:function(){var b=1-((new Date).getTime()-this.ts)/
|
||||||
|
this.spd,c=this.B2(b)+this.B3(b)+this.B4(b);return 0>b?this.ed:this.st+Math.round(this.df*c)},update:function(b,c){this.st=this.getNow();this.ed=b;this.spd=c;this.ts=(new Date).getTime();this.df=this.ed-this.st;return this}};if(this.ishwscroll){this.doc.translate={x:0,y:0,tx:"0px",ty:"0px"};f.hastranslate3d&&f.isios&&this.doc.css("-webkit-backface-visibility","hidden");var r=function(){var d=b.doc.css(f.trstyle);return d&&"matrix"==d.substr(0,6)?d.replace(/^.*\((.*)\)$/g,"$1").replace(/px/g,"").split(/, +/):
|
||||||
|
!1};this.getScrollTop=function(d){if(!d){if(d=r())return 16==d.length?-d[13]:-d[5];if(b.timerscroll&&b.timerscroll.bz)return b.timerscroll.bz.getNow()}return b.doc.translate.y};this.getScrollLeft=function(d){if(!d){if(d=r())return 16==d.length?-d[12]:-d[4];if(b.timerscroll&&b.timerscroll.bh)return b.timerscroll.bh.getNow()}return b.doc.translate.x};this.notifyScrollEvent=document.createEvent?function(b){var c=document.createEvent("UIEvents");c.initUIEvent("scroll",!1,!0,window,1);b.dispatchEvent(c)}:
|
||||||
|
document.fireEvent?function(b){var c=document.createEventObject();b.fireEvent("onscroll");c.cancelBubble=!0}:function(b,c){};f.hastranslate3d&&b.opt.enabletranslate3d?(this.setScrollTop=function(d,c){b.doc.translate.y=d;b.doc.translate.ty=-1*d+"px";b.doc.css(f.trstyle,"translate3d("+b.doc.translate.tx+","+b.doc.translate.ty+",0px)");c||b.notifyScrollEvent(b.win[0])},this.setScrollLeft=function(d,c){b.doc.translate.x=d;b.doc.translate.tx=-1*d+"px";b.doc.css(f.trstyle,"translate3d("+b.doc.translate.tx+
|
||||||
|
","+b.doc.translate.ty+",0px)");c||b.notifyScrollEvent(b.win[0])}):(this.setScrollTop=function(d,c){b.doc.translate.y=d;b.doc.translate.ty=-1*d+"px";b.doc.css(f.trstyle,"translate("+b.doc.translate.tx+","+b.doc.translate.ty+")");c||b.notifyScrollEvent(b.win[0])},this.setScrollLeft=function(d,c){b.doc.translate.x=d;b.doc.translate.tx=-1*d+"px";b.doc.css(f.trstyle,"translate("+b.doc.translate.tx+","+b.doc.translate.ty+")");c||b.notifyScrollEvent(b.win[0])})}else this.getScrollTop=function(){return b.docscroll.scrollTop()},
|
||||||
|
this.setScrollTop=function(d){return b.docscroll.scrollTop(d)},this.getScrollLeft=function(){return b.docscroll.scrollLeft()},this.setScrollLeft=function(d){return b.docscroll.scrollLeft(d)};this.getTarget=function(b){return!b?!1:b.target?b.target:b.srcElement?b.srcElement:!1};this.hasParent=function(b,c){if(!b)return!1;for(var g=b.target||b.srcElement||b||!1;g&&g.id!=c;)g=g.parentNode||!1;return!1!==g};var u={thin:1,medium:3,thick:5};this.getOffset=function(){if(b.isfixed)return{top:parseFloat(b.win.css("top")),
|
||||||
|
left:parseFloat(b.win.css("left"))};if(!b.viewport)return b.win.offset();var d=b.win.offset(),c=b.viewport.offset();return{top:d.top-c.top+b.viewport.scrollTop(),left:d.left-c.left+b.viewport.scrollLeft()}};this.updateScrollBar=function(d){if(b.ishwscroll)b.rail.css({height:b.win.innerHeight()}),b.railh&&b.railh.css({width:b.win.innerWidth()});else{var c=b.getOffset(),g=c.top,f=c.left,g=g+l(b.win,"border-top-width",!0);b.win.outerWidth();b.win.innerWidth();var f=f+(b.rail.align?b.win.outerWidth()-
|
||||||
|
l(b.win,"border-right-width")-b.rail.width:l(b.win,"border-left-width")),e=b.opt.railoffset;e&&(e.top&&(g+=e.top),b.rail.align&&e.left&&(f+=e.left));b.locked||b.rail.css({top:g,left:f,height:d?d.h:b.win.innerHeight()});b.zoom&&b.zoom.css({top:g+1,left:1==b.rail.align?f-20:f+b.rail.width+4});b.railh&&!b.locked&&(g=c.top,f=c.left,d=b.railh.align?g+l(b.win,"border-top-width",!0)+b.win.innerHeight()-b.railh.height:g+l(b.win,"border-top-width",!0),f+=l(b.win,"border-left-width"),b.railh.css({top:d,left:f,
|
||||||
|
width:b.railh.width}))}};this.doRailClick=function(d,c,g){var f;b.locked||(b.cancelEvent(d),c?(c=g?b.doScrollLeft:b.doScrollTop,f=g?(d.pageX-b.railh.offset().left-b.cursorwidth/2)*b.scrollratio.x:(d.pageY-b.rail.offset().top-b.cursorheight/2)*b.scrollratio.y,c(f)):(c=g?b.doScrollLeftBy:b.doScrollBy,f=g?b.scroll.x:b.scroll.y,d=g?d.pageX-b.railh.offset().left:d.pageY-b.rail.offset().top,g=g?b.view.w:b.view.h,f>=d?c(g):c(-g)))};b.hasanimationframe=v;b.hascancelanimationframe=w;b.hasanimationframe?b.hascancelanimationframe||
|
||||||
|
(w=function(){b.cancelAnimationFrame=!0}):(v=function(b){return setTimeout(b,15-Math.floor(+new Date/1E3)%16)},w=clearInterval);this.init=function(){b.saved.css=[];if(f.isie7mobile)return!0;f.hasmstouch&&b.css(b.ispage?e("html"):b.win,{"-ms-touch-action":"none"});b.zindex="auto";b.zindex=!b.ispage&&"auto"==b.opt.zindex?h()||"auto":b.opt.zindex;!b.ispage&&"auto"!=b.zindex&&b.zindex>x&&(x=b.zindex);b.isie&&(0==b.zindex&&"auto"==b.opt.zindex)&&(b.zindex="auto");if(!b.ispage||!f.cantouch&&!f.isieold&&
|
||||||
|
!f.isie9mobile){var d=b.docscroll;b.ispage&&(d=b.haswrapper?b.win:b.doc);f.isie9mobile||b.css(d,{"overflow-y":"hidden"});b.ispage&&f.isie7&&("BODY"==b.doc[0].nodeName?b.css(e("html"),{"overflow-y":"hidden"}):"HTML"==b.doc[0].nodeName&&b.css(e("body"),{"overflow-y":"hidden"}));f.isios&&(!b.ispage&&!b.haswrapper)&&b.css(e("body"),{"-webkit-overflow-scrolling":"touch"});var c=e(document.createElement("div"));c.css({position:"relative",top:0,"float":"right",width:b.opt.cursorwidth,height:"0px","background-color":b.opt.cursorcolor,
|
||||||
|
border:b.opt.cursorborder,"background-clip":"padding-box","-webkit-border-radius":b.opt.cursorborderradius,"-moz-border-radius":b.opt.cursorborderradius,"border-radius":b.opt.cursorborderradius});c.hborder=parseFloat(c.outerHeight()-c.innerHeight());b.cursor=c;var g=e(document.createElement("div"));g.attr("id",b.id);g.addClass("nicescroll-rails");var l,k,n=["left","right"],G;for(G in n)k=n[G],(l=b.opt.railpadding[k])?g.css("padding-"+k,l+"px"):b.opt.railpadding[k]=0;g.append(c);g.width=Math.max(parseFloat(b.opt.cursorwidth),
|
||||||
|
c.outerWidth())+b.opt.railpadding.left+b.opt.railpadding.right;g.css({width:g.width+"px",zIndex:b.zindex,background:b.opt.background,cursor:"default"});g.visibility=!0;g.scrollable=!0;g.align="left"==b.opt.railalign?0:1;b.rail=g;c=b.rail.drag=!1;b.opt.boxzoom&&(!b.ispage&&!f.isieold)&&(c=document.createElement("div"),b.bind(c,"click",b.doZoom),b.zoom=e(c),b.zoom.css({cursor:"pointer","z-index":b.zindex,backgroundImage:"url("+L+"zoomico.png)",height:18,width:18,backgroundPosition:"0px 0px"}),b.opt.dblclickzoom&&
|
||||||
|
b.bind(b.win,"dblclick",b.doZoom),f.cantouch&&b.opt.gesturezoom&&(b.ongesturezoom=function(d){1.5<d.scale&&b.doZoomIn(d);0.8>d.scale&&b.doZoomOut(d);return b.cancelEvent(d)},b.bind(b.win,"gestureend",b.ongesturezoom)));b.railh=!1;if(b.opt.horizrailenabled){b.css(d,{"overflow-x":"hidden"});c=e(document.createElement("div"));c.css({position:"relative",top:0,height:b.opt.cursorwidth,width:"0px","background-color":b.opt.cursorcolor,border:b.opt.cursorborder,"background-clip":"padding-box","-webkit-border-radius":b.opt.cursorborderradius,
|
||||||
|
"-moz-border-radius":b.opt.cursorborderradius,"border-radius":b.opt.cursorborderradius});c.wborder=parseFloat(c.outerWidth()-c.innerWidth());b.cursorh=c;var m=e(document.createElement("div"));m.attr("id",b.id+"-hr");m.addClass("nicescroll-rails");m.height=Math.max(parseFloat(b.opt.cursorwidth),c.outerHeight());m.css({height:m.height+"px",zIndex:b.zindex,background:b.opt.background});m.append(c);m.visibility=!0;m.scrollable=!0;m.align="top"==b.opt.railvalign?0:1;b.railh=m;b.railh.drag=!1}b.ispage?
|
||||||
|
(g.css({position:"fixed",top:"0px",height:"100%"}),g.align?g.css({right:"0px"}):g.css({left:"0px"}),b.body.append(g),b.railh&&(m.css({position:"fixed",left:"0px",width:"100%"}),m.align?m.css({bottom:"0px"}):m.css({top:"0px"}),b.body.append(m))):(b.ishwscroll?("static"==b.win.css("position")&&b.css(b.win,{position:"relative"}),d="HTML"==b.win[0].nodeName?b.body:b.win,b.zoom&&(b.zoom.css({position:"absolute",top:1,right:0,"margin-right":g.width+4}),d.append(b.zoom)),g.css({position:"absolute",top:0}),
|
||||||
|
g.align?g.css({right:0}):g.css({left:0}),d.append(g),m&&(m.css({position:"absolute",left:0,bottom:0}),m.align?m.css({bottom:0}):m.css({top:0}),d.append(m))):(b.isfixed="fixed"==b.win.css("position"),d=b.isfixed?"fixed":"absolute",b.isfixed||(b.viewport=b.getViewport(b.win[0])),b.viewport&&(b.body=b.viewport,!1==/relative|absolute/.test(b.viewport.css("position"))&&b.css(b.viewport,{position:"relative"})),g.css({position:d}),b.zoom&&b.zoom.css({position:d}),b.updateScrollBar(),b.body.append(g),b.zoom&&
|
||||||
|
b.body.append(b.zoom),b.railh&&(m.css({position:d}),b.body.append(m))),f.isios&&b.css(b.win,{"-webkit-tap-highlight-color":"rgba(0,0,0,0)","-webkit-touch-callout":"none"}),f.isie&&b.opt.disableoutline&&b.win.attr("hideFocus","true"),f.iswebkit&&b.opt.disableoutline&&b.win.css({outline:"none"}));!1===b.opt.autohidemode?(b.autohidedom=!1,b.rail.css({opacity:b.opt.cursoropacitymax}),b.railh&&b.railh.css({opacity:b.opt.cursoropacitymax})):!0===b.opt.autohidemode?(b.autohidedom=e().add(b.rail),f.isie8&&
|
||||||
|
(b.autohidedom=b.autohidedom.add(b.cursor)),b.railh&&(b.autohidedom=b.autohidedom.add(b.railh)),b.railh&&f.isie8&&(b.autohidedom=b.autohidedom.add(b.cursorh))):"scroll"==b.opt.autohidemode?(b.autohidedom=e().add(b.rail),b.railh&&(b.autohidedom=b.autohidedom.add(b.railh))):"cursor"==b.opt.autohidemode?(b.autohidedom=e().add(b.cursor),b.railh&&(b.autohidedom=b.autohidedom.add(b.cursorh))):"hidden"==b.opt.autohidemode&&(b.autohidedom=!1,b.hide(),b.locked=!1);if(f.isie9mobile)b.scrollmom=new H(b),b.onmangotouch=
|
||||||
|
function(d){d=b.getScrollTop();var c=b.getScrollLeft();if(d==b.scrollmom.lastscrolly&&c==b.scrollmom.lastscrollx)return!0;var g=d-b.mangotouch.sy,f=c-b.mangotouch.sx;if(0!=Math.round(Math.sqrt(Math.pow(f,2)+Math.pow(g,2)))){var p=0>g?-1:1,e=0>f?-1:1,h=+new Date;b.mangotouch.lazy&&clearTimeout(b.mangotouch.lazy);80<h-b.mangotouch.tm||b.mangotouch.dry!=p||b.mangotouch.drx!=e?(b.scrollmom.stop(),b.scrollmom.reset(c,d),b.mangotouch.sy=d,b.mangotouch.ly=d,b.mangotouch.sx=c,b.mangotouch.lx=c,b.mangotouch.dry=
|
||||||
|
p,b.mangotouch.drx=e,b.mangotouch.tm=h):(b.scrollmom.stop(),b.scrollmom.update(b.mangotouch.sx-f,b.mangotouch.sy-g),b.mangotouch.tm=h,g=Math.max(Math.abs(b.mangotouch.ly-d),Math.abs(b.mangotouch.lx-c)),b.mangotouch.ly=d,b.mangotouch.lx=c,2<g&&(b.mangotouch.lazy=setTimeout(function(){b.mangotouch.lazy=!1;b.mangotouch.dry=0;b.mangotouch.drx=0;b.mangotouch.tm=0;b.scrollmom.doMomentum(30)},100)))}},g=b.getScrollTop(),m=b.getScrollLeft(),b.mangotouch={sy:g,ly:g,dry:0,sx:m,lx:m,drx:0,lazy:!1,tm:0},b.bind(b.docscroll,
|
||||||
|
"scroll",b.onmangotouch);else{if(f.cantouch||b.istouchcapable||b.opt.touchbehavior||f.hasmstouch){b.scrollmom=new H(b);b.ontouchstart=function(d){if(d.pointerType&&2!=d.pointerType)return!1;if(!b.locked){if(f.hasmstouch)for(var c=d.target?d.target:!1;c;){var g=e(c).getNiceScroll();if(0<g.length&&g[0].me==b.me)break;if(0<g.length)return!1;if("DIV"==c.nodeName&&c.id==b.id)break;c=c.parentNode?c.parentNode:!1}b.cancelScroll();if((c=b.getTarget(d))&&/INPUT/i.test(c.nodeName)&&/range/i.test(c.type))return b.stopPropagation(d);
|
||||||
|
!("clientX"in d)&&"changedTouches"in d&&(d.clientX=d.changedTouches[0].clientX,d.clientY=d.changedTouches[0].clientY);b.forcescreen&&(g=d,d={original:d.original?d.original:d},d.clientX=g.screenX,d.clientY=g.screenY);b.rail.drag={x:d.clientX,y:d.clientY,sx:b.scroll.x,sy:b.scroll.y,st:b.getScrollTop(),sl:b.getScrollLeft(),pt:2,dl:!1};if(b.ispage||!b.opt.directionlockdeadzone)b.rail.drag.dl="f";else{var g=e(window).width(),p=e(window).height(),h=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth),
|
||||||
|
l=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight),p=Math.max(0,l-p),g=Math.max(0,h-g);b.rail.drag.ck=!b.rail.scrollable&&b.railh.scrollable?0<p?"v":!1:b.rail.scrollable&&!b.railh.scrollable?0<g?"h":!1:!1;b.rail.drag.ck||(b.rail.drag.dl="f")}b.opt.touchbehavior&&(b.isiframe&&f.isie)&&(g=b.win.position(),b.rail.drag.x+=g.left,b.rail.drag.y+=g.top);b.hasmoving=!1;b.lastmouseup=!1;b.scrollmom.reset(d.clientX,d.clientY);if(!f.cantouch&&!this.istouchcapable&&!f.hasmstouch){if(!c||
|
||||||
|
!/INPUT|SELECT|TEXTAREA/i.test(c.nodeName))return!b.ispage&&f.hasmousecapture&&c.setCapture(),b.cancelEvent(d);/SUBMIT|CANCEL|BUTTON/i.test(e(c).attr("type"))&&(pc={tg:c,click:!1},b.preventclick=pc)}}};b.ontouchend=function(d){if(d.pointerType&&2!=d.pointerType)return!1;if(b.rail.drag&&2==b.rail.drag.pt&&(b.scrollmom.doMomentum(),b.rail.drag=!1,b.hasmoving&&(b.hasmoving=!1,b.lastmouseup=!0,b.hideCursor(),f.hasmousecapture&&document.releaseCapture(),!f.cantouch)))return b.cancelEvent(d)};var q=b.opt.touchbehavior&&
|
||||||
|
b.isiframe&&!f.hasmousecapture;b.ontouchmove=function(d,c){if(d.pointerType&&2!=d.pointerType)return!1;if(b.rail.drag&&2==b.rail.drag.pt){if(f.cantouch&&"undefined"==typeof d.original)return!0;b.hasmoving=!0;b.preventclick&&!b.preventclick.click&&(b.preventclick.click=b.preventclick.tg.onclick||!1,b.preventclick.tg.onclick=b.onpreventclick);d=e.extend({original:d},d);"changedTouches"in d&&(d.clientX=d.changedTouches[0].clientX,d.clientY=d.changedTouches[0].clientY);if(b.forcescreen){var g=d;d={original:d.original?
|
||||||
|
d.original:d};d.clientX=g.screenX;d.clientY=g.screenY}g=ofy=0;if(q&&!c){var p=b.win.position(),g=-p.left;ofy=-p.top}var h=d.clientY+ofy,p=h-b.rail.drag.y,l=d.clientX+g,k=l-b.rail.drag.x,s=b.rail.drag.st-p;b.ishwscroll&&b.opt.bouncescroll?0>s?s=Math.round(s/2):s>b.page.maxh&&(s=b.page.maxh+Math.round((s-b.page.maxh)/2)):(0>s&&(h=s=0),s>b.page.maxh&&(s=b.page.maxh,h=0));if(b.railh&&b.railh.scrollable){var m=b.rail.drag.sl-k;b.ishwscroll&&b.opt.bouncescroll?0>m?m=Math.round(m/2):m>b.page.maxw&&(m=b.page.maxw+
|
||||||
|
Math.round((m-b.page.maxw)/2)):(0>m&&(l=m=0),m>b.page.maxw&&(m=b.page.maxw,l=0))}g=!1;if(b.rail.drag.dl)g=!0,"v"==b.rail.drag.dl?m=b.rail.drag.sl:"h"==b.rail.drag.dl&&(s=b.rail.drag.st);else{var p=Math.abs(p),k=Math.abs(k),n=b.opt.directionlockdeadzone;if("v"==b.rail.drag.ck){if(p>n&&k<=0.3*p)return b.rail.drag=!1,!0;k>n&&(b.rail.drag.dl="f",e("body").scrollTop(e("body").scrollTop()))}else if("h"==b.rail.drag.ck){if(k>n&&p<=0.3*az)return b.rail.drag=!1,!0;p>n&&(b.rail.drag.dl="f",e("body").scrollLeft(e("body").scrollLeft()))}}b.synched("touchmove",
|
||||||
|
function(){b.rail.drag&&2==b.rail.drag.pt&&(b.prepareTransition&&b.prepareTransition(0),b.rail.scrollable&&b.setScrollTop(s),b.scrollmom.update(l,h),b.railh&&b.railh.scrollable?(b.setScrollLeft(m),b.showCursor(s,m)):b.showCursor(s),f.isie10&&document.selection.clear())});f.ischrome&&b.istouchcapable&&(g=!1);if(g)return b.cancelEvent(d)}}}b.onmousedown=function(d,c){if(!(b.rail.drag&&1!=b.rail.drag.pt)){if(b.locked)return b.cancelEvent(d);b.cancelScroll();b.rail.drag={x:d.clientX,y:d.clientY,sx:b.scroll.x,
|
||||||
|
sy:b.scroll.y,pt:1,hr:!!c};var g=b.getTarget(d);!b.ispage&&f.hasmousecapture&&g.setCapture();b.isiframe&&!f.hasmousecapture&&(b.saved.csspointerevents=b.doc.css("pointer-events"),b.css(b.doc,{"pointer-events":"none"}));return b.cancelEvent(d)}};b.onmouseup=function(d){if(b.rail.drag&&(f.hasmousecapture&&document.releaseCapture(),b.isiframe&&!f.hasmousecapture&&b.doc.css("pointer-events",b.saved.csspointerevents),1==b.rail.drag.pt))return b.rail.drag=!1,b.cancelEvent(d)};b.onmousemove=function(d){if(b.rail.drag&&
|
||||||
|
1==b.rail.drag.pt){if(f.ischrome&&0==d.which)return b.onmouseup(d);b.cursorfreezed=!0;if(b.rail.drag.hr){b.scroll.x=b.rail.drag.sx+(d.clientX-b.rail.drag.x);0>b.scroll.x&&(b.scroll.x=0);var c=b.scrollvaluemaxw;b.scroll.x>c&&(b.scroll.x=c)}else b.scroll.y=b.rail.drag.sy+(d.clientY-b.rail.drag.y),0>b.scroll.y&&(b.scroll.y=0),c=b.scrollvaluemax,b.scroll.y>c&&(b.scroll.y=c);b.synched("mousemove",function(){b.rail.drag&&1==b.rail.drag.pt&&(b.showCursor(),b.rail.drag.hr?b.doScrollLeft(Math.round(b.scroll.x*
|
||||||
|
b.scrollratio.x),b.opt.cursordragspeed):b.doScrollTop(Math.round(b.scroll.y*b.scrollratio.y),b.opt.cursordragspeed))});return b.cancelEvent(d)}};if(f.cantouch||b.opt.touchbehavior)b.onpreventclick=function(d){if(b.preventclick)return b.preventclick.tg.onclick=b.preventclick.click,b.preventclick=!1,b.cancelEvent(d)},b.bind(b.win,"mousedown",b.ontouchstart),b.onclick=f.isios?!1:function(d){return b.lastmouseup?(b.lastmouseup=!1,b.cancelEvent(d)):!0},b.opt.grabcursorenabled&&f.cursorgrabvalue&&(b.css(b.ispage?
|
||||||
|
b.doc:b.win,{cursor:f.cursorgrabvalue}),b.css(b.rail,{cursor:f.cursorgrabvalue}));else{var r=function(d){if(b.selectiondrag){if(d){var c=b.win.outerHeight();d=d.pageY-b.selectiondrag.top;0<d&&d<c&&(d=0);d>=c&&(d-=c);b.selectiondrag.df=d}0!=b.selectiondrag.df&&(b.doScrollBy(2*-Math.floor(b.selectiondrag.df/6)),b.debounced("doselectionscroll",function(){r()},50))}};b.hasTextSelected="getSelection"in document?function(){return 0<document.getSelection().rangeCount}:"selection"in document?function(){return"None"!=
|
||||||
|
document.selection.type}:function(){return!1};b.onselectionstart=function(d){b.ispage||(b.selectiondrag=b.win.offset())};b.onselectionend=function(d){b.selectiondrag=!1};b.onselectiondrag=function(d){b.selectiondrag&&b.hasTextSelected()&&b.debounced("selectionscroll",function(){r(d)},250)}}f.hasmstouch&&(b.css(b.rail,{"-ms-touch-action":"none"}),b.css(b.cursor,{"-ms-touch-action":"none"}),b.bind(b.win,"MSPointerDown",b.ontouchstart),b.bind(document,"MSPointerUp",b.ontouchend),b.bind(document,"MSPointerMove",
|
||||||
|
b.ontouchmove),b.bind(b.cursor,"MSGestureHold",function(b){b.preventDefault()}),b.bind(b.cursor,"contextmenu",function(b){b.preventDefault()}));this.istouchcapable&&(b.bind(b.win,"touchstart",b.ontouchstart),b.bind(document,"touchend",b.ontouchend),b.bind(document,"touchcancel",b.ontouchend),b.bind(document,"touchmove",b.ontouchmove));b.bind(b.cursor,"mousedown",b.onmousedown);b.bind(b.cursor,"mouseup",b.onmouseup);b.railh&&(b.bind(b.cursorh,"mousedown",function(d){b.onmousedown(d,!0)}),b.bind(b.cursorh,
|
||||||
|
"mouseup",function(d){if(!(b.rail.drag&&2==b.rail.drag.pt))return b.rail.drag=!1,b.hasmoving=!1,b.hideCursor(),f.hasmousecapture&&document.releaseCapture(),b.cancelEvent(d)}));if(b.opt.cursordragontouch||!f.cantouch&&!b.opt.touchbehavior)b.rail.css({cursor:"default"}),b.railh&&b.railh.css({cursor:"default"}),b.jqbind(b.rail,"mouseenter",function(){b.canshowonmouseevent&&b.showCursor();b.rail.active=!0}),b.jqbind(b.rail,"mouseleave",function(){b.rail.active=!1;b.rail.drag||b.hideCursor()}),b.opt.sensitiverail&&
|
||||||
|
(b.bind(b.rail,"click",function(d){b.doRailClick(d,!1,!1)}),b.bind(b.rail,"dblclick",function(d){b.doRailClick(d,!0,!1)}),b.bind(b.cursor,"click",function(d){b.cancelEvent(d)}),b.bind(b.cursor,"dblclick",function(d){b.cancelEvent(d)})),b.railh&&(b.jqbind(b.railh,"mouseenter",function(){b.canshowonmouseevent&&b.showCursor();b.rail.active=!0}),b.jqbind(b.railh,"mouseleave",function(){b.rail.active=!1;b.rail.drag||b.hideCursor()}),b.opt.sensitiverail&&(b.bind(b.railh,"click",function(d){b.doRailClick(d,
|
||||||
|
!1,!0)}),b.bind(b.railh,"dblclick",function(d){b.doRailClick(d,!0,!0)}),b.bind(b.cursorh,"click",function(d){b.cancelEvent(d)}),b.bind(b.cursorh,"dblclick",function(d){b.cancelEvent(d)})));!f.cantouch&&!b.opt.touchbehavior?(b.bind(f.hasmousecapture?b.win:document,"mouseup",b.onmouseup),b.bind(document,"mousemove",b.onmousemove),b.onclick&&b.bind(document,"click",b.onclick),!b.ispage&&b.opt.enablescrollonselection&&(b.bind(b.win[0],"mousedown",b.onselectionstart),b.bind(document,"mouseup",b.onselectionend),
|
||||||
|
b.bind(b.cursor,"mouseup",b.onselectionend),b.cursorh&&b.bind(b.cursorh,"mouseup",b.onselectionend),b.bind(document,"mousemove",b.onselectiondrag)),b.zoom&&(b.jqbind(b.zoom,"mouseenter",function(){b.canshowonmouseevent&&b.showCursor();b.rail.active=!0}),b.jqbind(b.zoom,"mouseleave",function(){b.rail.active=!1;b.rail.drag||b.hideCursor()}))):(b.bind(f.hasmousecapture?b.win:document,"mouseup",b.ontouchend),b.bind(document,"mousemove",b.ontouchmove),b.onclick&&b.bind(document,"click",b.onclick),b.opt.cursordragontouch&&
|
||||||
|
(b.bind(b.cursor,"mousedown",b.onmousedown),b.bind(b.cursor,"mousemove",b.onmousemove),b.cursorh&&b.bind(b.cursorh,"mousedown",b.onmousedown),b.cursorh&&b.bind(b.cursorh,"mousemove",b.onmousemove)));b.opt.enablemousewheel&&(b.isiframe||b.bind(f.isie&&b.ispage?document:b.docscroll,"mousewheel",b.onmousewheel),b.bind(b.rail,"mousewheel",b.onmousewheel),b.railh&&b.bind(b.railh,"mousewheel",b.onmousewheelhr));!b.ispage&&(!f.cantouch&&!/HTML|BODY/.test(b.win[0].nodeName))&&(b.win.attr("tabindex")||b.win.attr({tabindex:J++}),
|
||||||
|
b.jqbind(b.win,"focus",function(d){y=b.getTarget(d).id||!0;b.hasfocus=!0;b.canshowonmouseevent&&b.noticeCursor()}),b.jqbind(b.win,"blur",function(d){y=!1;b.hasfocus=!1}),b.jqbind(b.win,"mouseenter",function(d){D=b.getTarget(d).id||!0;b.hasmousefocus=!0;b.canshowonmouseevent&&b.noticeCursor()}),b.jqbind(b.win,"mouseleave",function(){D=!1;b.hasmousefocus=!1}))}b.onkeypress=function(d){if(b.locked&&0==b.page.maxh)return!0;d=d?d:window.e;var c=b.getTarget(d);if(c&&/INPUT|TEXTAREA|SELECT|OPTION/.test(c.nodeName)&&
|
||||||
|
(!c.getAttribute("type")&&!c.type||!/submit|button|cancel/i.tp))return!0;if(b.hasfocus||b.hasmousefocus&&!y||b.ispage&&!y&&!D){c=d.keyCode;if(b.locked&&27!=c)return b.cancelEvent(d);var g=d.ctrlKey||!1,p=d.shiftKey||!1,f=!1;switch(c){case 38:case 63233:b.doScrollBy(72);f=!0;break;case 40:case 63235:b.doScrollBy(-72);f=!0;break;case 37:case 63232:b.railh&&(g?b.doScrollLeft(0):b.doScrollLeftBy(72),f=!0);break;case 39:case 63234:b.railh&&(g?b.doScrollLeft(b.page.maxw):b.doScrollLeftBy(-72),f=!0);break;
|
||||||
|
case 33:case 63276:b.doScrollBy(b.view.h);f=!0;break;case 34:case 63277:b.doScrollBy(-b.view.h);f=!0;break;case 36:case 63273:b.railh&&g?b.doScrollPos(0,0):b.doScrollTo(0);f=!0;break;case 35:case 63275:b.railh&&g?b.doScrollPos(b.page.maxw,b.page.maxh):b.doScrollTo(b.page.maxh);f=!0;break;case 32:b.opt.spacebarenabled&&(p?b.doScrollBy(b.view.h):b.doScrollBy(-b.view.h),f=!0);break;case 27:b.zoomactive&&(b.doZoom(),f=!0)}if(f)return b.cancelEvent(d)}};b.opt.enablekeyboard&&b.bind(document,f.isopera&&
|
||||||
|
!f.isopera12?"keypress":"keydown",b.onkeypress);b.bind(window,"resize",b.lazyResize);b.bind(window,"orientationchange",b.lazyResize);b.bind(window,"load",b.lazyResize);if(f.ischrome&&!b.ispage&&!b.haswrapper){var t=b.win.attr("style"),g=parseFloat(b.win.css("width"))+1;b.win.css("width",g);b.synched("chromefix",function(){b.win.attr("style",t)})}b.onAttributeChange=function(d){b.lazyResize(250)};!b.ispage&&!b.haswrapper&&(!1!==z?(b.observer=new z(function(d){d.forEach(b.onAttributeChange)}),b.observer.observe(b.win[0],
|
||||||
|
{childList:!0,characterData:!1,attributes:!0,subtree:!1}),b.observerremover=new z(function(d){d.forEach(function(d){if(0<d.removedNodes.length)for(var c in d.removedNodes)if(d.removedNodes[c]==b.win[0])return b.remove()})}),b.observerremover.observe(b.win[0].parentNode,{childList:!0,characterData:!1,attributes:!1,subtree:!1})):(b.bind(b.win,f.isie&&!f.isie9?"propertychange":"DOMAttrModified",b.onAttributeChange),f.isie9&&b.win[0].attachEvent("onpropertychange",b.onAttributeChange),b.bind(b.win,"DOMNodeRemoved",
|
||||||
|
function(d){d.target==b.win[0]&&b.remove()})));!b.ispage&&b.opt.boxzoom&&b.bind(window,"resize",b.resizeZoom);b.istextarea&&b.bind(b.win,"mouseup",b.lazyResize);b.checkrtlmode=!0;b.lazyResize(30)}if("IFRAME"==this.doc[0].nodeName){var I=function(d){b.iframexd=!1;try{var c="contentDocument"in this?this.contentDocument:this.contentWindow.document}catch(g){b.iframexd=!0,c=!1}if(b.iframexd)return"console"in window&&console.log("NiceScroll error: policy restriced iframe"),!0;b.forcescreen=!0;b.isiframe&&
|
||||||
|
(b.iframe={doc:e(c),html:b.doc.contents().find("html")[0],body:b.doc.contents().find("body")[0]},b.getContentSize=function(){return{w:Math.max(b.iframe.html.scrollWidth,b.iframe.body.scrollWidth),h:Math.max(b.iframe.html.scrollHeight,b.iframe.body.scrollHeight)}},b.docscroll=e(b.iframe.body));!f.isios&&(b.opt.iframeautoresize&&!b.isiframe)&&(b.win.scrollTop(0),b.doc.height(""),d=Math.max(c.getElementsByTagName("html")[0].scrollHeight,c.body.scrollHeight),b.doc.height(d));b.lazyResize(30);f.isie7&&
|
||||||
|
b.css(e(b.iframe.html),{"overflow-y":"hidden"});b.css(e(b.iframe.body),{"overflow-y":"hidden"});"contentWindow"in this?b.bind(this.contentWindow,"scroll",b.onscroll):b.bind(c,"scroll",b.onscroll);b.opt.enablemousewheel&&b.bind(c,"mousewheel",b.onmousewheel);b.opt.enablekeyboard&&b.bind(c,f.isopera?"keypress":"keydown",b.onkeypress);if(f.cantouch||b.opt.touchbehavior)b.bind(c,"mousedown",b.onmousedown),b.bind(c,"mousemove",function(d){b.onmousemove(d,!0)}),b.opt.grabcursorenabled&&f.cursorgrabvalue&&
|
||||||
|
b.css(e(c.body),{cursor:f.cursorgrabvalue});b.bind(c,"mouseup",b.onmouseup);b.zoom&&(b.opt.dblclickzoom&&b.bind(c,"dblclick",b.doZoom),b.ongesturezoom&&b.bind(c,"gestureend",b.ongesturezoom))};this.doc[0].readyState&&"complete"==this.doc[0].readyState&&setTimeout(function(){I.call(b.doc[0],!1)},500);b.bind(this.doc,"load",I)}};this.showCursor=function(d,c){b.cursortimeout&&(clearTimeout(b.cursortimeout),b.cursortimeout=0);if(b.rail){b.autohidedom&&(b.autohidedom.stop().css({opacity:b.opt.cursoropacitymax}),
|
||||||
|
b.cursoractive=!0);if(!b.rail.drag||1!=b.rail.drag.pt)"undefined"!=typeof d&&!1!==d&&(b.scroll.y=Math.round(1*d/b.scrollratio.y)),"undefined"!=typeof c&&(b.scroll.x=Math.round(1*c/b.scrollratio.x));b.cursor.css({height:b.cursorheight,top:b.scroll.y});b.cursorh&&(!b.rail.align&&b.rail.visibility?b.cursorh.css({width:b.cursorwidth,left:b.scroll.x+b.rail.width}):b.cursorh.css({width:b.cursorwidth,left:b.scroll.x}),b.cursoractive=!0);b.zoom&&b.zoom.stop().css({opacity:b.opt.cursoropacitymax})}};this.hideCursor=
|
||||||
|
function(d){!b.cursortimeout&&(b.rail&&b.autohidedom)&&(b.cursortimeout=setTimeout(function(){if(!b.rail.active||!b.showonmouseevent)b.autohidedom.stop().animate({opacity:b.opt.cursoropacitymin}),b.zoom&&b.zoom.stop().animate({opacity:b.opt.cursoropacitymin}),b.cursoractive=!1;b.cursortimeout=0},d||b.opt.hidecursordelay))};this.noticeCursor=function(d,c,g){b.showCursor(c,g);b.rail.active||b.hideCursor(d)};this.getContentSize=b.ispage?function(){return{w:Math.max(document.body.scrollWidth,document.documentElement.scrollWidth),
|
||||||
|
h:Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)}}:b.haswrapper?function(){return{w:b.doc.outerWidth()+parseInt(b.win.css("paddingLeft"))+parseInt(b.win.css("paddingRight")),h:b.doc.outerHeight()+parseInt(b.win.css("paddingTop"))+parseInt(b.win.css("paddingBottom"))}}:function(){return{w:b.docscroll[0].scrollWidth,h:b.docscroll[0].scrollHeight}};this.onResize=function(d,c){if(!b.win)return!1;if(!b.haswrapper&&!b.ispage){if("none"==b.win.css("display"))return b.visibility&&
|
||||||
|
b.hideRail().hideRailHr(),!1;!b.hidden&&!b.visibility&&b.showRail().showRailHr()}var g=b.page.maxh,f=b.page.maxw,e=b.view.w;b.view={w:b.ispage?b.win.width():parseInt(b.win[0].clientWidth),h:b.ispage?b.win.height():parseInt(b.win[0].clientHeight)};b.page=c?c:b.getContentSize();b.page.maxh=Math.max(0,b.page.h-b.view.h);b.page.maxw=Math.max(0,b.page.w-b.view.w);if(b.page.maxh==g&&b.page.maxw==f&&b.view.w==e){if(b.ispage)return b;g=b.win.offset();if(b.lastposition&&(f=b.lastposition,f.top==g.top&&f.left==
|
||||||
|
g.left))return b;b.lastposition=g}0==b.page.maxh?(b.hideRail(),b.scrollvaluemax=0,b.scroll.y=0,b.scrollratio.y=0,b.cursorheight=0,b.setScrollTop(0),b.rail.scrollable=!1):b.rail.scrollable=!0;0==b.page.maxw?(b.hideRailHr(),b.scrollvaluemaxw=0,b.scroll.x=0,b.scrollratio.x=0,b.cursorwidth=0,b.setScrollLeft(0),b.railh.scrollable=!1):b.railh.scrollable=!0;b.locked=0==b.page.maxh&&0==b.page.maxw;if(b.locked)return b.ispage||b.updateScrollBar(b.view),!1;!b.hidden&&!b.visibility?b.showRail().showRailHr():
|
||||||
|
!b.hidden&&!b.railh.visibility&&b.showRailHr();b.istextarea&&(b.win.css("resize")&&"none"!=b.win.css("resize"))&&(b.view.h-=20);b.cursorheight=Math.min(b.view.h,Math.round(b.view.h*(b.view.h/b.page.h)));b.cursorheight=b.opt.cursorfixedheight?b.opt.cursorfixedheight:Math.max(b.opt.cursorminheight,b.cursorheight);b.cursorwidth=Math.min(b.view.w,Math.round(b.view.w*(b.view.w/b.page.w)));b.cursorwidth=b.opt.cursorfixedheight?b.opt.cursorfixedheight:Math.max(b.opt.cursorminheight,b.cursorwidth);b.scrollvaluemax=
|
||||||
|
b.view.h-b.cursorheight-b.cursor.hborder;b.railh&&(b.railh.width=0<b.page.maxh?b.view.w-b.rail.width:b.view.w,b.scrollvaluemaxw=b.railh.width-b.cursorwidth-b.cursorh.wborder);b.checkrtlmode&&b.railh&&(b.checkrtlmode=!1,b.opt.rtlmode&&0==b.scroll.x&&b.setScrollLeft(b.page.maxw));b.ispage||b.updateScrollBar(b.view);b.scrollratio={x:b.page.maxw/b.scrollvaluemaxw,y:b.page.maxh/b.scrollvaluemax};b.getScrollTop()>b.page.maxh?b.doScrollTop(b.page.maxh):(b.scroll.y=Math.round(b.getScrollTop()*(1/b.scrollratio.y)),
|
||||||
|
b.scroll.x=Math.round(b.getScrollLeft()*(1/b.scrollratio.x)),b.cursoractive&&b.noticeCursor());b.scroll.y&&0==b.getScrollTop()&&b.doScrollTo(Math.floor(b.scroll.y*b.scrollratio.y));return b};this.resize=b.onResize;this.lazyResize=function(d){d=isNaN(d)?30:d;b.delayed("resize",b.resize,d);return b};this._bind=function(d,c,g,f){b.events.push({e:d,n:c,f:g,b:f,q:!1});d.addEventListener?d.addEventListener(c,g,f||!1):d.attachEvent?d.attachEvent("on"+c,g):d["on"+c]=g};this.jqbind=function(d,c,g){b.events.push({e:d,
|
||||||
|
n:c,f:g,q:!0});e(d).bind(c,g)};this.bind=function(d,c,g,e){var h="jquery"in d?d[0]:d;"mousewheel"==c?"onwheel"in b.win?b._bind(h,"wheel",g,e||!1):(d="undefined"!=typeof document.onmousewheel?"mousewheel":"DOMMouseScroll",n(h,d,g,e||!1),"DOMMouseScroll"==d&&n(h,"MozMousePixelScroll",g,e||!1)):h.addEventListener?(f.cantouch&&/mouseup|mousedown|mousemove/.test(c)&&b._bind(h,"mousedown"==c?"touchstart":"mouseup"==c?"touchend":"touchmove",function(b){if(b.touches){if(2>b.touches.length){var d=b.touches.length?
|
||||||
|
b.touches[0]:b;d.original=b;g.call(this,d)}}else b.changedTouches&&(d=b.changedTouches[0],d.original=b,g.call(this,d))},e||!1),b._bind(h,c,g,e||!1),f.cantouch&&"mouseup"==c&&b._bind(h,"touchcancel",g,e||!1)):b._bind(h,c,function(d){if((d=d||window.event||!1)&&d.srcElement)d.target=d.srcElement;"pageY"in d||(d.pageX=d.clientX+document.documentElement.scrollLeft,d.pageY=d.clientY+document.documentElement.scrollTop);return!1===g.call(h,d)||!1===e?b.cancelEvent(d):!0})};this._unbind=function(b,c,g,f){b.removeEventListener?
|
||||||
|
b.removeEventListener(c,g,f):b.detachEvent?b.detachEvent("on"+c,g):b["on"+c]=!1};this.unbindAll=function(){for(var d=0;d<b.events.length;d++){var c=b.events[d];c.q?c.e.unbind(c.n,c.f):b._unbind(c.e,c.n,c.f,c.b)}};this.cancelEvent=function(b){b=b.original?b.original:b?b:window.event||!1;if(!b)return!1;b.preventDefault&&b.preventDefault();b.stopPropagation&&b.stopPropagation();b.preventManipulation&&b.preventManipulation();b.cancelBubble=!0;b.cancel=!0;return b.returnValue=!1};this.stopPropagation=
|
||||||
|
function(b){b=b.original?b.original:b?b:window.event||!1;if(!b)return!1;if(b.stopPropagation)return b.stopPropagation();b.cancelBubble&&(b.cancelBubble=!0);return!1};this.showRail=function(){if(0!=b.page.maxh&&(b.ispage||"none"!=b.win.css("display")))b.visibility=!0,b.rail.visibility=!0,b.rail.css("display","block");return b};this.showRailHr=function(){if(!b.railh)return b;if(0!=b.page.maxw&&(b.ispage||"none"!=b.win.css("display")))b.railh.visibility=!0,b.railh.css("display","block");return b};this.hideRail=
|
||||||
|
function(){b.visibility=!1;b.rail.visibility=!1;b.rail.css("display","none");return b};this.hideRailHr=function(){if(!b.railh)return b;b.railh.visibility=!1;b.railh.css("display","none");return b};this.show=function(){b.hidden=!1;b.locked=!1;return b.showRail().showRailHr()};this.hide=function(){b.hidden=!0;b.locked=!0;return b.hideRail().hideRailHr()};this.toggle=function(){return b.hidden?b.show():b.hide()};this.remove=function(){b.stop();b.cursortimeout&&clearTimeout(b.cursortimeout);b.doZoomOut();
|
||||||
|
b.unbindAll();!1!==b.observer&&b.observer.disconnect();!1!==b.observerremover&&b.observerremover.disconnect();b.events=[];b.cursor&&(b.cursor.remove(),b.cursor=null);b.cursorh&&(b.cursorh.remove(),b.cursorh=null);b.rail&&(b.rail.remove(),b.rail=null);b.railh&&(b.railh.remove(),b.railh=null);b.zoom&&(b.zoom.remove(),b.zoom=null);for(var d=0;d<b.saved.css.length;d++){var c=b.saved.css[d];c[0].css(c[1],"undefined"==typeof c[2]?"":c[2])}b.saved=!1;b.me.data("__nicescroll","");b.me=null;b.doc=null;b.docscroll=
|
||||||
|
null;b.win=null;return b};this.scrollstart=function(d){this.onscrollstart=d;return b};this.scrollend=function(d){this.onscrollend=d;return b};this.scrollcancel=function(d){this.onscrollcancel=d;return b};this.zoomin=function(d){this.onzoomin=d;return b};this.zoomout=function(d){this.onzoomout=d;return b};this.isScrollable=function(b){b=b.target?b.target:b;if("OPTION"==b.nodeName)return!0;for(;b&&1==b.nodeType&&!/BODY|HTML/.test(b.nodeName);){var c=e(b),c=c.css("overflowY")||c.css("overflowX")||c.css("overflow")||
|
||||||
|
"";if(/scroll|auto/.test(c))return b.clientHeight!=b.scrollHeight;b=b.parentNode?b.parentNode:!1}return!1};this.getViewport=function(b){for(b=b&&b.parentNode?b.parentNode:!1;b&&1==b.nodeType&&!/BODY|HTML/.test(b.nodeName);){var c=e(b),g=c.css("overflowY")||c.css("overflowX")||c.css("overflow")||"";if(/scroll|auto/.test(g)&&b.clientHeight!=b.scrollHeight||0<c.getNiceScroll().length)return c;b=b.parentNode?b.parentNode:!1}return!1};this.onmousewheel=function(d){if(b.locked)return!0;if(b.rail.drag)return b.cancelEvent(d);
|
||||||
|
if(!b.rail.scrollable)return b.railh&&b.railh.scrollable?b.onmousewheelhr(d):!0;var c=+new Date,g=!1;b.opt.preservenativescrolling&&b.checkarea+600<c&&(b.nativescrollingarea=b.isScrollable(d),g=!0);b.checkarea=c;if(b.nativescrollingarea)return!0;if(d=t(d,!1,g))b.checkarea=0;return d};this.onmousewheelhr=function(d){if(b.locked||!b.railh.scrollable)return!0;if(b.rail.drag)return b.cancelEvent(d);var c=+new Date,g=!1;b.opt.preservenativescrolling&&b.checkarea+600<c&&(b.nativescrollingarea=b.isScrollable(d),
|
||||||
|
g=!0);b.checkarea=c;return b.nativescrollingarea?!0:b.locked?b.cancelEvent(d):t(d,!0,g)};this.stop=function(){b.cancelScroll();b.scrollmon&&b.scrollmon.stop();b.cursorfreezed=!1;b.scroll.y=Math.round(b.getScrollTop()*(1/b.scrollratio.y));b.noticeCursor();return b};this.getTransitionSpeed=function(c){var f=Math.round(10*b.opt.scrollspeed);c=Math.min(f,Math.round(c/20*b.opt.scrollspeed));return 20<c?c:0};b.opt.smoothscroll?b.ishwscroll&&f.hastransition&&b.opt.usetransition?(this.prepareTransition=function(c,
|
||||||
|
e){var g=e?20<c?c:0:b.getTransitionSpeed(c),h=g?f.prefixstyle+"transform "+g+"ms ease-out":"";if(!b.lasttransitionstyle||b.lasttransitionstyle!=h)b.lasttransitionstyle=h,b.doc.css(f.transitionstyle,h);return g},this.doScrollLeft=function(c,f){var g=b.scrollrunning?b.newscrolly:b.getScrollTop();b.doScrollPos(c,g,f)},this.doScrollTop=function(c,f){var g=b.scrollrunning?b.newscrollx:b.getScrollLeft();b.doScrollPos(g,c,f)},this.doScrollPos=function(c,e,g){var h=b.getScrollTop(),l=b.getScrollLeft();(0>
|
||||||
|
(b.newscrolly-h)*(e-h)||0>(b.newscrollx-l)*(c-l))&&b.cancelScroll();!1==b.opt.bouncescroll&&(0>e?e=0:e>b.page.maxh&&(e=b.page.maxh),0>c?c=0:c>b.page.maxw&&(c=b.page.maxw));if(b.scrollrunning&&c==b.newscrollx&&e==b.newscrolly)return!1;b.newscrolly=e;b.newscrollx=c;b.newscrollspeed=g||!1;if(b.timer)return!1;b.timer=setTimeout(function(){var g=b.getScrollTop(),h=b.getScrollLeft(),l,k;l=c-h;k=e-g;l=Math.round(Math.sqrt(Math.pow(l,2)+Math.pow(k,2)));l=b.newscrollspeed&&1<b.newscrollspeed?b.newscrollspeed:
|
||||||
|
b.getTransitionSpeed(l);b.newscrollspeed&&1>=b.newscrollspeed&&(l*=b.newscrollspeed);b.prepareTransition(l,!0);b.timerscroll&&b.timerscroll.tm&&clearInterval(b.timerscroll.tm);0<l&&(!b.scrollrunning&&b.onscrollstart&&b.onscrollstart.call(b,{type:"scrollstart",current:{x:h,y:g},request:{x:c,y:e},end:{x:b.newscrollx,y:b.newscrolly},speed:l}),f.transitionend?b.scrollendtrapped||(b.scrollendtrapped=!0,b.bind(b.doc,f.transitionend,b.onScrollEnd,!1)):(b.scrollendtrapped&&clearTimeout(b.scrollendtrapped),
|
||||||
|
b.scrollendtrapped=setTimeout(b.onScrollEnd,l)),b.timerscroll={bz:new BezierClass(g,b.newscrolly,l,0,0,0.58,1),bh:new BezierClass(h,b.newscrollx,l,0,0,0.58,1)},b.cursorfreezed||(b.timerscroll.tm=setInterval(function(){b.showCursor(b.getScrollTop(),b.getScrollLeft())},60)));b.synched("doScroll-set",function(){b.timer=0;b.scrollendtrapped&&(b.scrollrunning=!0);b.setScrollTop(b.newscrolly);b.setScrollLeft(b.newscrollx);if(!b.scrollendtrapped)b.onScrollEnd()})},50)},this.cancelScroll=function(){if(!b.scrollendtrapped)return!0;
|
||||||
|
var c=b.getScrollTop(),e=b.getScrollLeft();b.scrollrunning=!1;f.transitionend||clearTimeout(f.transitionend);b.scrollendtrapped=!1;b._unbind(b.doc,f.transitionend,b.onScrollEnd);b.prepareTransition(0);b.setScrollTop(c);b.railh&&b.setScrollLeft(e);b.timerscroll&&b.timerscroll.tm&&clearInterval(b.timerscroll.tm);b.timerscroll=!1;b.cursorfreezed=!1;b.showCursor(c,e);return b},this.onScrollEnd=function(){b.scrollendtrapped&&b._unbind(b.doc,f.transitionend,b.onScrollEnd);b.scrollendtrapped=!1;b.prepareTransition(0);
|
||||||
|
b.timerscroll&&b.timerscroll.tm&&clearInterval(b.timerscroll.tm);b.timerscroll=!1;var c=b.getScrollTop(),e=b.getScrollLeft();b.setScrollTop(c);b.railh&&b.setScrollLeft(e);b.noticeCursor(!1,c,e);b.cursorfreezed=!1;0>c?c=0:c>b.page.maxh&&(c=b.page.maxh);0>e?e=0:e>b.page.maxw&&(e=b.page.maxw);if(c!=b.newscrolly||e!=b.newscrollx)return b.doScrollPos(e,c,b.opt.snapbackspeed);b.onscrollend&&b.scrollrunning&&b.onscrollend.call(b,{type:"scrollend",current:{x:e,y:c},end:{x:b.newscrollx,y:b.newscrolly}});b.scrollrunning=
|
||||||
|
!1}):(this.doScrollLeft=function(c,f){var g=b.scrollrunning?b.newscrolly:b.getScrollTop();b.doScrollPos(c,g,f)},this.doScrollTop=function(c,f){var g=b.scrollrunning?b.newscrollx:b.getScrollLeft();b.doScrollPos(g,c,f)},this.doScrollPos=function(c,f,g){function e(){if(b.cancelAnimationFrame)return!0;b.scrollrunning=!0;if(r=1-r)return b.timer=v(e)||1;var c=0,d=sy=b.getScrollTop();if(b.dst.ay){var d=b.bzscroll?b.dst.py+b.bzscroll.getNow()*b.dst.ay:b.newscrolly,g=d-sy;if(0>g&&d<b.newscrolly||0<g&&d>b.newscrolly)d=
|
||||||
|
b.newscrolly;b.setScrollTop(d);d==b.newscrolly&&(c=1)}else c=1;var f=sx=b.getScrollLeft();if(b.dst.ax){f=b.bzscroll?b.dst.px+b.bzscroll.getNow()*b.dst.ax:b.newscrollx;g=f-sx;if(0>g&&f<b.newscrollx||0<g&&f>b.newscrollx)f=b.newscrollx;b.setScrollLeft(f);f==b.newscrollx&&(c+=1)}else c+=1;2==c?(b.timer=0,b.cursorfreezed=!1,b.bzscroll=!1,b.scrollrunning=!1,0>d?d=0:d>b.page.maxh&&(d=b.page.maxh),0>f?f=0:f>b.page.maxw&&(f=b.page.maxw),f!=b.newscrollx||d!=b.newscrolly?b.doScrollPos(f,d):b.onscrollend&&b.onscrollend.call(b,
|
||||||
|
{type:"scrollend",current:{x:sx,y:sy},end:{x:b.newscrollx,y:b.newscrolly}})):b.timer=v(e)||1}f="undefined"==typeof f||!1===f?b.getScrollTop(!0):f;if(b.timer&&b.newscrolly==f&&b.newscrollx==c)return!0;b.timer&&w(b.timer);b.timer=0;var h=b.getScrollTop(),l=b.getScrollLeft();(0>(b.newscrolly-h)*(f-h)||0>(b.newscrollx-l)*(c-l))&&b.cancelScroll();b.newscrolly=f;b.newscrollx=c;if(!b.bouncescroll||!b.rail.visibility)0>b.newscrolly?b.newscrolly=0:b.newscrolly>b.page.maxh&&(b.newscrolly=b.page.maxh);if(!b.bouncescroll||
|
||||||
|
!b.railh.visibility)0>b.newscrollx?b.newscrollx=0:b.newscrollx>b.page.maxw&&(b.newscrollx=b.page.maxw);b.dst={};b.dst.x=c-l;b.dst.y=f-h;b.dst.px=l;b.dst.py=h;var k=Math.round(Math.sqrt(Math.pow(b.dst.x,2)+Math.pow(b.dst.y,2)));b.dst.ax=b.dst.x/k;b.dst.ay=b.dst.y/k;var n=0,q=k;0==b.dst.x?(n=h,q=f,b.dst.ay=1,b.dst.py=0):0==b.dst.y&&(n=l,q=c,b.dst.ax=1,b.dst.px=0);k=b.getTransitionSpeed(k);g&&1>=g&&(k*=g);b.bzscroll=0<k?b.bzscroll?b.bzscroll.update(q,k):new BezierClass(n,q,k,0,1,0,1):!1;if(!b.timer){(h==
|
||||||
|
b.page.maxh&&f>=b.page.maxh||l==b.page.maxw&&c>=b.page.maxw)&&b.checkContentSize();var r=1;b.cancelAnimationFrame=!1;b.timer=1;b.onscrollstart&&!b.scrollrunning&&b.onscrollstart.call(b,{type:"scrollstart",current:{x:l,y:h},request:{x:c,y:f},end:{x:b.newscrollx,y:b.newscrolly},speed:k});e();(h==b.page.maxh&&f>=h||l==b.page.maxw&&c>=l)&&b.checkContentSize();b.noticeCursor()}},this.cancelScroll=function(){b.timer&&w(b.timer);b.timer=0;b.bzscroll=!1;b.scrollrunning=!1;return b}):(this.doScrollLeft=function(c,
|
||||||
|
f){var g=b.getScrollTop();b.doScrollPos(c,g,f)},this.doScrollTop=function(c,f){var g=b.getScrollLeft();b.doScrollPos(g,c,f)},this.doScrollPos=function(c,f,g){var e=c>b.page.maxw?b.page.maxw:c;0>e&&(e=0);var h=f>b.page.maxh?b.page.maxh:f;0>h&&(h=0);b.synched("scroll",function(){b.setScrollTop(h);b.setScrollLeft(e)})},this.cancelScroll=function(){});this.doScrollBy=function(c,f){var g=0,g=f?Math.floor((b.scroll.y-c)*b.scrollratio.y):(b.timer?b.newscrolly:b.getScrollTop(!0))-c;if(b.bouncescroll){var e=
|
||||||
|
Math.round(b.view.h/2);g<-e?g=-e:g>b.page.maxh+e&&(g=b.page.maxh+e)}b.cursorfreezed=!1;py=b.getScrollTop(!0);if(0>g&&0>=py)return b.noticeCursor();if(g>b.page.maxh&&py>=b.page.maxh)return b.checkContentSize(),b.noticeCursor();b.doScrollTop(g)};this.doScrollLeftBy=function(c,f){var g=0,g=f?Math.floor((b.scroll.x-c)*b.scrollratio.x):(b.timer?b.newscrollx:b.getScrollLeft(!0))-c;if(b.bouncescroll){var e=Math.round(b.view.w/2);g<-e?g=-e:g>b.page.maxw+e&&(g=b.page.maxw+e)}b.cursorfreezed=!1;px=b.getScrollLeft(!0);
|
||||||
|
if(0>g&&0>=px||g>b.page.maxw&&px>=b.page.maxw)return b.noticeCursor();b.doScrollLeft(g)};this.doScrollTo=function(c,f){f&&Math.round(c*b.scrollratio.y);b.cursorfreezed=!1;b.doScrollTop(c)};this.checkContentSize=function(){var c=b.getContentSize();(c.h!=b.page.h||c.w!=b.page.w)&&b.resize(!1,c)};b.onscroll=function(c){b.rail.drag||b.cursorfreezed||b.synched("scroll",function(){b.scroll.y=Math.round(b.getScrollTop()*(1/b.scrollratio.y));b.railh&&(b.scroll.x=Math.round(b.getScrollLeft()*(1/b.scrollratio.x)));
|
||||||
|
b.noticeCursor()})};b.bind(b.docscroll,"scroll",b.onscroll);this.doZoomIn=function(c){if(!b.zoomactive){b.zoomactive=!0;b.zoomrestore={style:{}};var h="position top left zIndex backgroundColor marginTop marginBottom marginLeft marginRight".split(" "),g=b.win[0].style,l;for(l in h){var k=h[l];b.zoomrestore.style[k]="undefined"!=typeof g[k]?g[k]:""}b.zoomrestore.style.width=b.win.css("width");b.zoomrestore.style.height=b.win.css("height");b.zoomrestore.padding={w:b.win.outerWidth()-b.win.width(),h:b.win.outerHeight()-
|
||||||
|
b.win.height()};f.isios4&&(b.zoomrestore.scrollTop=e(window).scrollTop(),e(window).scrollTop(0));b.win.css({position:f.isios4?"absolute":"fixed",top:0,left:0,"z-index":x+100,margin:"0px"});h=b.win.css("backgroundColor");(""==h||/transparent|rgba\(0, 0, 0, 0\)|rgba\(0,0,0,0\)/.test(h))&&b.win.css("backgroundColor","#fff");b.rail.css({"z-index":x+101});b.zoom.css({"z-index":x+102});b.zoom.css("backgroundPosition","0px -18px");b.resizeZoom();b.onzoomin&&b.onzoomin.call(b);return b.cancelEvent(c)}};this.doZoomOut=
|
||||||
|
function(c){if(b.zoomactive)return b.zoomactive=!1,b.win.css("margin",""),b.win.css(b.zoomrestore.style),f.isios4&&e(window).scrollTop(b.zoomrestore.scrollTop),b.rail.css({"z-index":b.zindex}),b.zoom.css({"z-index":b.zindex}),b.zoomrestore=!1,b.zoom.css("backgroundPosition","0px 0px"),b.onResize(),b.onzoomout&&b.onzoomout.call(b),b.cancelEvent(c)};this.doZoom=function(c){return b.zoomactive?b.doZoomOut(c):b.doZoomIn(c)};this.resizeZoom=function(){if(b.zoomactive){var c=b.getScrollTop();b.win.css({width:e(window).width()-
|
||||||
|
b.zoomrestore.padding.w+"px",height:e(window).height()-b.zoomrestore.padding.h+"px"});b.onResize();b.setScrollTop(Math.min(b.page.maxh,c))}};this.init();e.nicescroll.push(this)},H=function(e){var c=this;this.nc=e;this.steptime=this.lasttime=this.speedy=this.speedx=this.lasty=this.lastx=0;this.snapy=this.snapx=!1;this.demuly=this.demulx=0;this.lastscrolly=this.lastscrollx=-1;this.timer=this.chky=this.chkx=0;this.time=function(){return+new Date};this.reset=function(e,l){c.stop();var k=c.time();c.steptime=
|
||||||
|
0;c.lasttime=k;c.speedx=0;c.speedy=0;c.lastx=e;c.lasty=l;c.lastscrollx=-1;c.lastscrolly=-1};this.update=function(e,l){var k=c.time();c.steptime=k-c.lasttime;c.lasttime=k;var k=l-c.lasty,t=e-c.lastx,b=c.nc.getScrollTop(),q=c.nc.getScrollLeft(),b=b+k,q=q+t;c.snapx=0>q||q>c.nc.page.maxw;c.snapy=0>b||b>c.nc.page.maxh;c.speedx=t;c.speedy=k;c.lastx=e;c.lasty=l};this.stop=function(){c.nc.unsynched("domomentum2d");c.timer&&clearTimeout(c.timer);c.timer=0;c.lastscrollx=-1;c.lastscrolly=-1};this.doSnapy=function(e,
|
||||||
|
l){var k=!1;0>l?(l=0,k=!0):l>c.nc.page.maxh&&(l=c.nc.page.maxh,k=!0);0>e?(e=0,k=!0):e>c.nc.page.maxw&&(e=c.nc.page.maxw,k=!0);k&&c.nc.doScrollPos(e,l,c.nc.opt.snapbackspeed)};this.doMomentum=function(e){var l=c.time(),k=e?l+e:c.lasttime;e=c.nc.getScrollLeft();var t=c.nc.getScrollTop(),b=c.nc.page.maxh,q=c.nc.page.maxw;c.speedx=0<q?Math.min(60,c.speedx):0;c.speedy=0<b?Math.min(60,c.speedy):0;k=k&&50>=l-k;if(0>t||t>b||0>e||e>q)k=!1;e=c.speedx&&k?c.speedx:!1;if(c.speedy&&k&&c.speedy||e){var f=Math.max(16,
|
||||||
|
c.steptime);50<f&&(e=f/50,c.speedx*=e,c.speedy*=e,f=50);c.demulxy=0;c.lastscrollx=c.nc.getScrollLeft();c.chkx=c.lastscrollx;c.lastscrolly=c.nc.getScrollTop();c.chky=c.lastscrolly;var r=c.lastscrollx,u=c.lastscrolly,d=function(){var e=600<c.time()-l?0.04:0.02;if(c.speedx&&(r=Math.floor(c.lastscrollx-c.speedx*(1-c.demulxy)),c.lastscrollx=r,0>r||r>q))e=0.1;if(c.speedy&&(u=Math.floor(c.lastscrolly-c.speedy*(1-c.demulxy)),c.lastscrolly=u,0>u||u>b))e=0.1;c.demulxy=Math.min(1,c.demulxy+e);c.nc.synched("domomentum2d",
|
||||||
|
function(){c.speedx&&(c.nc.getScrollLeft()!=c.chkx&&c.stop(),c.chkx=r,c.nc.setScrollLeft(r));c.speedy&&(c.nc.getScrollTop()!=c.chky&&c.stop(),c.chky=u,c.nc.setScrollTop(u));c.timer||(c.nc.hideCursor(),c.doSnapy(r,u))});1>c.demulxy?c.timer=setTimeout(d,f):(c.stop(),c.nc.hideCursor(),c.doSnapy(r,u))};d()}else c.doSnapy(c.nc.getScrollLeft(),c.nc.getScrollTop())}},A=e.fn.scrollTop;e.cssHooks.pageYOffset={get:function(k,c,h){return(c=e.data(k,"__nicescroll")||!1)&&c.ishwscroll?c.getScrollTop():A.call(k)},
|
||||||
|
set:function(k,c){var h=e.data(k,"__nicescroll")||!1;h&&h.ishwscroll?h.setScrollTop(parseInt(c)):A.call(k,c);return this}};e.fn.scrollTop=function(k){if("undefined"==typeof k){var c=this[0]?e.data(this[0],"__nicescroll")||!1:!1;return c&&c.ishwscroll?c.getScrollTop():A.call(this)}return this.each(function(){var c=e.data(this,"__nicescroll")||!1;c&&c.ishwscroll?c.setScrollTop(parseInt(k)):A.call(e(this),k)})};var B=e.fn.scrollLeft;e.cssHooks.pageXOffset={get:function(k,c,h){return(c=e.data(k,"__nicescroll")||
|
||||||
|
!1)&&c.ishwscroll?c.getScrollLeft():B.call(k)},set:function(k,c){var h=e.data(k,"__nicescroll")||!1;h&&h.ishwscroll?h.setScrollLeft(parseInt(c)):B.call(k,c);return this}};e.fn.scrollLeft=function(k){if("undefined"==typeof k){var c=this[0]?e.data(this[0],"__nicescroll")||!1:!1;return c&&c.ishwscroll?c.getScrollLeft():B.call(this)}return this.each(function(){var c=e.data(this,"__nicescroll")||!1;c&&c.ishwscroll?c.setScrollLeft(parseInt(k)):B.call(e(this),k)})};var C=function(k){var c=this;this.length=
|
||||||
|
0;this.name="nicescrollarray";this.each=function(e){for(var h=0;h<c.length;h++)e.call(c[h]);return c};this.push=function(e){c[c.length]=e;c.length++};this.eq=function(e){return c[e]};if(k)for(a=0;a<k.length;a++){var h=e.data(k[a],"__nicescroll")||!1;h&&(this[this.length]=h,this.length++)}return this};(function(e,c,h){for(var l=0;l<c.length;l++)h(e,c[l])})(C.prototype,"show hide toggle onResize resize remove stop doScrollPos".split(" "),function(e,c){e[c]=function(){var e=arguments;return this.each(function(){this[c].apply(this,
|
||||||
|
e)})}});e.fn.getNiceScroll=function(k){return"undefined"==typeof k?new C(this):e.data(this[k],"__nicescroll")||!1};e.extend(e.expr[":"],{nicescroll:function(k){return e.data(k,"__nicescroll")?!0:!1}});e.fn.niceScroll=function(k,c){"undefined"==typeof c&&("object"==typeof k&&!("jquery"in k))&&(c=k,k=!1);var h=new C;"undefined"==typeof c&&(c={});k&&(c.doc=e(k),c.win=e(this));var l=!("doc"in c);!l&&!("win"in c)&&(c.win=e(this));this.each(function(){var k=e(this).data("__nicescroll")||!1;k||(c.doc=l?
|
||||||
|
e(this):c.doc,k=new N(c,e(this)),e(this).data("__nicescroll",k));h.push(k)});return 1==h.length?h[0]:h};window.NiceScroll={getjQuery:function(){return e}};e.nicescroll||(e.nicescroll=new C,e.nicescroll.options=F)})(jQuery);
|
||||||
+34
@@ -0,0 +1,34 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
$.classVal - WTFPL - refreshless.com/classval/ */
|
||||||
|
(function(b){function h(a,e){var d=!1;b.each(a?q:g,function(a){if(b(e).hasClass(a))return d=a,!1});return d}var n=b.fn.val,g={},q={},u={};b.classVal=function(a,b,d,l){"string"===typeof a&&"boolean"===typeof l&&(b&&(g[a]=b),d&&(q[a]=d),u[a]=l)};b.fn.val=function(){var a=Array.prototype.slice.call(arguments,0),e,d;return a.length?this.each(function(){(e=h(!0,this))?(d=u[e]?b(this):this,d[q[e]].apply(this,a)):n.apply(b(this),a)}):(e=h(!1,this))?(d=u[e]?this:this[0],d[g[e]].apply(d)):n.apply(this)}})(window.jQuery||
|
||||||
|
window.Zepto);/*
|
||||||
|
|
||||||
|
$.Link (part of noUiSlider) - WTFPL */
|
||||||
|
(function(b){function h(a,b,d){if((a[b]||a[d])&&a[b]===a[d])throw Error("(Link) '"+b+"' can't match '"+d+"'.'");}function n(a){void 0===a&&(a={});if("object"!==typeof a)throw Error("(Format) 'format' option must be an object.");var e={};b(q).each(function(b,l){if(void 0===a[l])e[l]=u[b];else if(typeof a[l]===typeof u[b]){if("decimals"===l&&(0>a[l]||7<a[l]))throw Error("(Format) 'format.decimals' option must be between 0 and 7.");e[l]=a[l]}else throw Error("(Format) 'format."+l+"' must be a "+typeof u[b]+
|
||||||
|
".");});h(e,"mark","thousand");h(e,"prefix","negative");h(e,"prefix","negativeBefore");this.r=e}function g(a,e){"object"!==typeof a&&b.error("(Link) Initialize with an object.");return new g.prototype.p(a.target||function(){},a.method,a.format||{},e)}var q="decimals mark thousand prefix postfix encoder decoder negative negativeBefore to from".split(" "),u=[2,".","","","",function(a){return a},function(a){return a},"-","",function(a){return a},function(a){return a}];n.prototype.a=function(a){return this.r[a]};
|
||||||
|
n.prototype.L=function(a){function b(a){return a.split("").reverse().join("")}a=this.a("encoder")(a);var d=this.a("decimals"),l="",g="",h="",n="";0===parseFloat(a.toFixed(d))&&(a="0");0>a&&(l=this.a("negative"),g=this.a("negativeBefore"));a=Math.abs(a).toFixed(d).toString();a=a.split(".");this.a("thousand")?(h=b(a[0]).match(/.{1,3}/g),h=b(h.join(b(this.a("thousand"))))):h=a[0];this.a("mark")&&1<a.length&&(n=this.a("mark")+a[1]);return this.a("to")(g+this.a("prefix")+l+h+n+this.a("postfix"))};n.prototype.w=
|
||||||
|
function(a){function b(a){return a.replace(/[\-\/\\\^$*+?.()|\[\]{}]/g,"\\$&")}var d;if(null===a||void 0===a)return!1;a=this.a("from")(a);a=a.toString();d=a.replace(RegExp("^"+b(this.a("negativeBefore"))),"");a!==d?(a=d,d="-"):d="";a=a.replace(RegExp("^"+b(this.a("prefix"))),"");this.a("negative")&&(d="",a=a.replace(RegExp("^"+b(this.a("negative"))),"-"));a=a.replace(RegExp(b(this.a("postfix"))+"$"),"").replace(RegExp(b(this.a("thousand")),"g"),"").replace(this.a("mark"),".");a=this.a("decoder")(parseFloat(d+
|
||||||
|
a));return isNaN(a)?!1:a};g.prototype.K=function(a,e){this.method=e||"html";this.j=b(a.replace("-tooltip-","")||"<div/>")[0]};g.prototype.H=function(a){this.method="val";this.j=document.createElement("input");this.j.name=a;this.j.type="hidden"};g.prototype.G=function(a){function e(a,b){return[b?null:a,b?a:null]}var d=this;this.method="val";this.target=a.on("change",function(a){d.B.val(e(b(a.target).val(),d.t),{link:d,set:!0})})};g.prototype.p=function(a,e,d,g){this.g=d;this.update=!g;if("string"===
|
||||||
|
typeof a&&0===a.indexOf("-tooltip-"))this.K(a,e);else if("string"===typeof a&&0!==a.indexOf("-"))this.H(a);else if("function"===typeof a)this.target=!1,this.method=a;else{if(a instanceof b||b.zepto&&b.zepto.isZ(a)){if(!e){if(a.is("input, select, textarea")){this.G(a);return}e="html"}if("function"===typeof e||"string"===typeof e&&a[e]){this.method=e;this.target=a;return}}throw new RangeError("(Link) Invalid Link.");}};g.prototype.write=function(a,b,d,g){if(!this.update||!1!==g)if(this.u=a,this.F=a=
|
||||||
|
this.format(a),"function"===typeof this.method)this.method.call(this.target[0]||d[0],a,b,d);else this.target[this.method](a,b,d)};g.prototype.q=function(a){this.g=new n(b.extend({},a,this.g instanceof n?this.g.r:this.g))};g.prototype.J=function(a){this.B=a};g.prototype.I=function(a){this.t=a};g.prototype.format=function(a){return this.g.L(a)};g.prototype.A=function(a){return this.g.w(a)};g.prototype.p.prototype=g.prototype;b.Link=g})(window.jQuery||window.Zepto);/*
|
||||||
|
|
||||||
|
$.fn.noUiSlider - WTFPL - refreshless.com/nouislider/ */
|
||||||
|
(function(b){function h(a){return"number"===typeof a&&!isNaN(a)&&isFinite(a)}function n(a){return b.isArray(a)?a:[a]}function g(a,c){a.addClass(c);setTimeout(function(){a.removeClass(c)},300)}function q(a,c){return 100*c/(a[1]-a[0])}function u(a,c){if(c>=a.d.slice(-1)[0])return 100;for(var b=1,f,d,e;c>=a.d[b];)b++;f=a.d[b-1];d=a.d[b];e=a.c[b-1];f=[f,d];return e+q(f,0>f[0]?c+Math.abs(f[0]):c-f[0])/(100/(a.c[b]-e))}function a(a,c){if(100<=c)return a.d.slice(-1)[0];for(var b=1,f,d,e;c>=a.c[b];)b++;f=
|
||||||
|
a.d[b-1];d=a.d[b];e=a.c[b-1];f=[f,d];return 100/(a.c[b]-e)*(c-e)*(f[1]-f[0])/100+f[0]}function e(a,c){for(var b=1,f;c>=a.c[b];)b++;if(a.m)return f=a.c[b-1],b=a.c[b],c-f>(b-f)/2?b:f;a.h[b-1]?(f=a.h[b-1],b=a.c[b-1]+Math.round((c-a.c[b-1])/f)*f):b=c;return b}function d(a,c){if(!h(c))throw Error("noUiSlider: 'step' is not numeric.");a.h[0]=c}function l(a,c){if("object"!==typeof c||b.isArray(c))throw Error("noUiSlider: 'range' is not an object.");b.each(c,function(c,f){var d;"number"===typeof f&&(f=[f]);
|
||||||
|
if(!b.isArray(f))throw Error("noUiSlider: 'range' contains invalid value.");d="min"===c?0:"max"===c?100:parseFloat(c);if(!h(d)||!h(f[0]))throw Error("noUiSlider: 'range' value isn't numeric.");a.c.push(d);a.d.push(f[0]);d?a.h.push(isNaN(f[1])?!1:f[1]):isNaN(f[1])||(a.h[0]=f[1])});b.each(a.h,function(c,b){if(!b)return!0;a.h[c]=q([a.d[c],a.d[c+1]],b)/(100/(a.c[c+1]-a.c[c]))})}function z(a,c){"number"===typeof c&&(c=[c]);if(!b.isArray(c)||!c.length||2<c.length)throw Error("noUiSlider: 'start' option is incorrect.");
|
||||||
|
a.b=c.length;a.start=c}function A(a,c){a.m=c;if("boolean"!==typeof c)throw Error("noUiSlider: 'snap' option must be a boolean.");}function B(a,c){if("lower"===c&&1===a.b)a.i=1;else if("upper"===c&&1===a.b)a.i=2;else if(!0===c&&2===a.b)a.i=3;else if(!1===c)a.i=0;else throw Error("noUiSlider: 'connect' option doesn't match handle count.");}function y(a,c){switch(c){case "horizontal":a.k=0;break;case "vertical":a.k=1;break;default:throw Error("noUiSlider: 'orientation' option is invalid.");}}function I(a,
|
||||||
|
c){if(2<a.c.length)throw Error("noUiSlider: 'margin' option is only supported on linear sliders.");a.margin=q(a.d,c);if(!h(c))throw Error("noUiSlider: 'margin' option must be numeric.");}function J(a,c){switch(c){case "ltr":a.dir=0;break;case "rtl":a.dir=1;a.i=[0,2,1,3][a.i];break;default:throw Error("noUiSlider: 'direction' option was not recognized.");}}function K(a,c){if("string"!==typeof c)throw Error("noUiSlider: 'behaviour' must be a string containing options.");var b=0<=c.indexOf("snap");a.n=
|
||||||
|
{s:0<=c.indexOf("tap")||b,extend:0<=c.indexOf("extend"),v:0<=c.indexOf("drag"),fixed:0<=c.indexOf("fixed"),m:b}}function L(a,c,d){a.o=[c.lower,c.upper];a.g=c.format;b.each(a.o,function(a,e){if(!b.isArray(e))throw Error("noUiSlider: 'serialization."+(a?"upper":"lower")+"' must be an array.");b.each(e,function(){if(!(this instanceof b.Link))throw Error("noUiSlider: 'serialization."+(a?"upper":"lower")+"' can only contain Link instances.");this.I(a);this.J(d);this.q(c.format)})});a.dir&&1<a.b&&a.o.reverse()}
|
||||||
|
function M(a,c){var e={c:[],d:[],h:[!1],margin:0},f;f={step:{e:!1,f:d},range:{e:!0,f:l},start:{e:!0,f:z},snap:{e:!1,f:A},connect:{e:!0,f:B},orientation:{e:!1,f:y},margin:{e:!1,f:I},direction:{e:!0,f:J},behaviour:{e:!0,f:K},serialization:{e:!0,f:L}};a=b.extend({connect:!1,direction:"ltr",behaviour:"tap",orientation:"horizontal"},a);a.serialization=b.extend({lower:[],upper:[],format:{}},a.serialization);b.each(f,function(b,d){if(void 0===a[b]){if(d.e)throw Error("noUiSlider: '"+b+"' is required.");
|
||||||
|
return!0}d.f(e,a[b],c)});e.style=e.k?"top":"left";return e}function N(a,c){var d=b("<div><div/></div>").addClass(k[2]),f=["-lower","-upper"];a.dir&&f.reverse();d.children().addClass(k[3]+" "+k[3]+f[c]);return d}function O(a,c){c.j&&(c=new b.Link({target:b(c.j).clone().appendTo(a),method:c.method,format:c.g},!0));return c}function P(a,c){var d,f=[];for(d=0;d<a.b;d++){var e=f,g=d,k=a.o[d],h=c[d].children(),l=a.g,n=void 0,q=[],n=new b.Link({},!0);n.q(l);q.push(n);for(n=0;n<k.length;n++)q.push(O(h,k[n]));
|
||||||
|
e[g]=q}return f}function Q(a,c,b){switch(a){case 1:c.addClass(k[7]);b[0].addClass(k[6]);break;case 3:b[1].addClass(k[6]);case 2:b[0].addClass(k[7]);case 0:c.addClass(k[6])}}function R(a,b){var d,f=[];for(d=0;d<a.b;d++)f.push(N(a,d).appendTo(b));return f}function S(a,c){c.addClass([k[0],k[8+a.dir],k[4+a.k]].join(" "));return b("<div/>").appendTo(c).addClass(k[1])}function T(d,c,h){function f(){return r[["width","height"][c.k]]()}function l(a){var b,c=[s.val()];for(b=0;b<a.length;b++)s.trigger(a[b],
|
||||||
|
c)}function q(d,p,f){var g=d[0]!==m[0][0]?1:0,H=v[0]+c.margin,l=v[1]-c.margin;f&&1<m.length&&(p=g?Math.max(p,H):Math.min(p,l));100>p&&(p=e(c,p));p=Math.max(Math.min(parseFloat(p.toFixed(7)),100),0);if(p===v[g])return 1===m.length?!1:p===H||p===l?0:!1;d.css(c.style,p+"%");d.is(":first-child")&&d.toggleClass(k[17],50<p);v[g]=p;c.dir&&(p=100-p);b(w[g]).each(function(){this.write(a(c,p),d.children(),s)});return!0}function G(a,b,c){c||g(s,k[14]);q(a,b,!1);l(["slide","set","change"])}function t(a,b,d,f){a=
|
||||||
|
a.replace(/\s/g,".nui ")+".nui";b.on(a,function(a){var b=s.attr("disabled");if(s.hasClass(k[14])||void 0!==b&&null!==b)return!1;a.preventDefault();var b=0===a.type.indexOf("touch"),p=0===a.type.indexOf("mouse"),e=0===a.type.indexOf("pointer"),D,g,l=a;0===a.type.indexOf("MSPointer")&&(e=!0);a.originalEvent&&(a=a.originalEvent);b&&(D=a.changedTouches[0].pageX,g=a.changedTouches[0].pageY);if(p||e)e||void 0!==window.pageXOffset||(window.pageXOffset=document.documentElement.scrollLeft,window.pageYOffset=
|
||||||
|
document.documentElement.scrollTop),D=a.clientX+window.pageXOffset,g=a.clientY+window.pageYOffset;l.C=[D,g];l.cursor=p;a=l;a.l=a.C[c.k];d(a,f)})}function y(a,b){var c=b.b||m,d,e=!1,e=100*(a.l-b.start)/f(),g=c[0][0]!==m[0][0]?1:0;var k=b.D;d=e+k[0];e+=k[1];1<c.length?(0>d&&(e+=Math.abs(d)),100<e&&(d-=e-100),d=[Math.max(Math.min(d,100),0),Math.max(Math.min(e,100),0)]):d=[d,e];e=q(c[0],d[g],1===c.length);1<c.length&&(e=q(c[1],d[g?0:1],!1)||e);e&&l(["slide"])}function z(a){b("."+k[15]).removeClass(k[15]);
|
||||||
|
a.cursor&&b("body").css("cursor","").off(".nui");E.off(".nui");s.removeClass(k[12]);l(["set","change"])}function C(a,c){1===c.b.length&&c.b[0].children().addClass(k[15]);a.stopPropagation();t(x.move,E,y,{start:a.l,b:c.b,D:[v[0],v[m.length-1]]});t(x.end,E,z,null);a.cursor&&(b("body").css("cursor",b(a.target).css("cursor")),1<m.length&&s.addClass(k[12]),b("body").on("selectstart.nui",!1))}function A(a){var d=a.l,e=0;a.stopPropagation();b.each(m,function(){e+=this.offset()[c.style]});e=d<e/2||1===m.length?
|
||||||
|
0:1;d-=r.offset()[c.style];d=100*d/f();G(m[e],d,c.n.m);c.n.m&&C(a,{b:[m[e]]})}function B(a){var b=(a=a.l<r.offset()[c.style])?0:100;a=a?0:m.length-1;G(m[a],b,!1)}var s=b(d),v=[-1,-1],r,w,m;if(s.hasClass(k[0]))throw Error("Slider was already initialized.");r=S(c,s);m=R(c,r);w=P(c,m);Q(c.i,s,m);(function(a){var b;if(!a.fixed)for(b=0;b<m.length;b++)t(x.start,m[b].children(),C,{b:[m[b]]});a.s&&t(x.start,r,A,{b:m});a.extend&&(s.addClass(k[16]),a.s&&t(x.start,s,B,{b:m}));a.v&&(b=r.find("."+k[7]).addClass(k[10]),
|
||||||
|
a.fixed&&(b=b.add(r.children().not(b).children())),t(x.start,b,C,{b:m}))})(c.n);d.vSet=function(){var a=Array.prototype.slice.call(arguments,0),d,e,f,h,r,F,t=n(a[0]);"object"===typeof a[1]?(d=a[1].set,e=a[1].link,f=a[1].update,h=a[1].animate):!0===a[1]&&(d=!0);c.dir&&1<c.b&&t.reverse();h&&g(s,k[14]);a=1<m.length?3:1;1===t.length&&(a=1);for(r=0;r<a;r++)h=e||w[r%2][0],h=h.A(t[r%2]),!1!==h&&(h=u(c,h),c.dir&&(h=100-h),!0!==q(m[r%2],h,!0)&&b(w[r%2]).each(function(a){if(!a)return F=this.u,!0;this.write(F,
|
||||||
|
m[r%2].children(),s,f)}));!0===d&&l(["set"]);return this};d.vGet=function(){var a,b=[];for(a=0;a<c.b;a++)b[a]=w[a][0].F;return 1===b.length?b[0]:c.dir?b.reverse():b};d.destroy=function(){b.each(w,function(){b.each(this,function(){this.target&&this.target.off(".nui")})});b(this).off(".nui").removeClass(k.join(" ")).empty();return h};s.val(c.start)}function U(a){if(!this.length)throw Error("noUiSlider: Can't initialize slider on empty selection.");var b=M(a,this);return this.each(function(){T(this,
|
||||||
|
b,a)})}function V(a){return this.each(function(){var c=b(this).val(),d=this.destroy(),e=b.extend({},d,a);b(this).noUiSlider(e);d.start===e.start&&b(this).val(c)})}var E=b(document),x=window.navigator.pointerEnabled?{start:"pointerdown",move:"pointermove",end:"pointerup"}:window.navigator.msPointerEnabled?{start:"MSPointerDown",move:"MSPointerMove",end:"MSPointerUp"}:{start:"mousedown touchstart",move:"mousemove touchmove",end:"mouseup touchend"},k="noUi-target noUi-base noUi-origin noUi-handle noUi-horizontal noUi-vertical noUi-background noUi-connect noUi-ltr noUi-rtl noUi-dragable noUi-state-drag noUi-state-tap noUi-active noUi-extended noUi-stacking".split(" ");
|
||||||
|
b.noUiSlider={Link:b.Link};b.fn.noUiSlider=function(a,b){return(b?V:U).call(this,a)};b.classVal(k[0],"vGet","vSet",!1)})(window.jQuery||window.Zepto);
|
||||||
+1406
File diff suppressed because it is too large
Load Diff
Executable
+532
@@ -0,0 +1,532 @@
|
|||||||
|
/*
|
||||||
|
* waterpipe.js - v1.0
|
||||||
|
* jQuery plugin. Smoky backgrounds generator
|
||||||
|
* http://www.dragdropsite.com
|
||||||
|
*
|
||||||
|
* Made by dragdropsite.com
|
||||||
|
*
|
||||||
|
* Under MIT License
|
||||||
|
*
|
||||||
|
* Credits: rectangleworld.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
;(function ( $, window, document, undefined ) {
|
||||||
|
var pluginName = "waterpipe",
|
||||||
|
defaults = {
|
||||||
|
//Smoke
|
||||||
|
gradientStart: '#000000',
|
||||||
|
gradientEnd: '#222222',
|
||||||
|
smokeOpacity: 0.1,
|
||||||
|
numCircles: 1,
|
||||||
|
maxMaxRad: 'auto',
|
||||||
|
minMaxRad: 'auto',
|
||||||
|
minRadFactor: 0,
|
||||||
|
iterations: 8,
|
||||||
|
drawsPerFrame: 10,
|
||||||
|
lineWidth: 2,
|
||||||
|
speed: 1,
|
||||||
|
//Background
|
||||||
|
bgColorInner: "#ffffff",
|
||||||
|
bgColorOuter: "#666666",
|
||||||
|
};
|
||||||
|
|
||||||
|
var TWO_PI = 2*Math.PI;
|
||||||
|
var timer;
|
||||||
|
var inst;
|
||||||
|
function Smoke ( element, options ) {
|
||||||
|
this.element = element;
|
||||||
|
this.$element = $(element);
|
||||||
|
inst = this;
|
||||||
|
this.settings = $.extend( {}, defaults, options );
|
||||||
|
this._defaults = defaults;
|
||||||
|
this._name = pluginName;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
Smoke.prototype = {
|
||||||
|
init: function () {
|
||||||
|
this.initSettings();
|
||||||
|
this.initCanvas();
|
||||||
|
this.generate();
|
||||||
|
},
|
||||||
|
initSettings: function () {
|
||||||
|
var radius = this.$element.height()*0.8/2;
|
||||||
|
if(this.settings.maxMaxRad==='auto') this.settings.maxMaxRad = radius;
|
||||||
|
if(this.settings.minMaxRad==='auto') this.settings.minMaxRad = radius;
|
||||||
|
},
|
||||||
|
initCanvas: function () {
|
||||||
|
this.displayCanvas = this.$element.find('canvas');
|
||||||
|
this.displayWidth = this.$element[0].clientWidth;
|
||||||
|
this.displayHeight = this.$element[0].clientHeight;
|
||||||
|
this.displayCanvas[0].width = this.displayWidth;
|
||||||
|
this.displayCanvas[0].height = this.displayHeight;
|
||||||
|
this.context = this.displayCanvas[0].getContext("2d");
|
||||||
|
|
||||||
|
//off screen canvas used only when exporting image
|
||||||
|
this.exportCanvas = document.createElement('canvas');
|
||||||
|
this.exportCanvas.width = this.displayWidth;
|
||||||
|
this.exportCanvas.height = this.displayHeight;
|
||||||
|
this.exportContext = this.exportCanvas.getContext("2d");
|
||||||
|
},
|
||||||
|
generate: function () {
|
||||||
|
this.drawCount = 0;
|
||||||
|
this.context.setTransform(1,0,0,1,0,0);
|
||||||
|
this.context.clearRect(0,0,this.displayWidth,this.displayHeight);
|
||||||
|
this.fillBackground();
|
||||||
|
|
||||||
|
this.setCircles();
|
||||||
|
|
||||||
|
if(timer) {clearInterval(timer);}
|
||||||
|
timer = setInterval(function(){inst.onTimer()},inst.settings.speed);
|
||||||
|
|
||||||
|
},
|
||||||
|
fillBackground: function () {
|
||||||
|
var outerRad = Math.sqrt(this.displayWidth*this.displayWidth + this.displayHeight*this.displayHeight)/2;
|
||||||
|
this.niceGradient = new SmokeNiceBG(this.displayWidth*0.75,this.displayHeight/2*0.75,0,this.displayWidth/2,this.displayHeight/4,outerRad);
|
||||||
|
|
||||||
|
var hex = this.settings.bgColorInner.replace('#','');
|
||||||
|
|
||||||
|
var r0 = parseInt(hex.substring(0,2), 16),
|
||||||
|
g0 = parseInt(hex.substring(2,4), 16),
|
||||||
|
b0 = parseInt(hex.substring(4,6), 16);
|
||||||
|
|
||||||
|
hex = this.settings.bgColorOuter.replace('#','');
|
||||||
|
var r1 = parseInt(hex.substring(0,2), 16),
|
||||||
|
g1 = parseInt(hex.substring(2,4), 16),
|
||||||
|
b1 = parseInt(hex.substring(4,6), 16);
|
||||||
|
|
||||||
|
this.niceGradient.addColorStop(0,r0,g0,b0);
|
||||||
|
this.niceGradient.addColorStop(1,r1,g1,b1);
|
||||||
|
this.niceGradient.fillRect(this.context,0,0,this.displayWidth,this.displayHeight);
|
||||||
|
},
|
||||||
|
setCircles: function () {
|
||||||
|
var i;
|
||||||
|
var r,g,b,a;
|
||||||
|
var maxR, minR;
|
||||||
|
var grad;
|
||||||
|
|
||||||
|
this.circles = [];
|
||||||
|
|
||||||
|
for (i = 0; i < this.settings.numCircles; i++) {
|
||||||
|
maxR = this.settings.minMaxRad+Math.random()*(this.settings.maxMaxRad-this.settings.minMaxRad);
|
||||||
|
minR = this.settings.minRadFactor*maxR;
|
||||||
|
|
||||||
|
//define gradient
|
||||||
|
grad = this.context.createRadialGradient(0,0,minR,0,0,maxR);
|
||||||
|
var gradientStart = this.hexToRGBA(this.settings.gradientStart, this.settings.smokeOpacity),
|
||||||
|
gradientEnd = this.hexToRGBA(this.settings.gradientEnd, this.settings.smokeOpacity);
|
||||||
|
|
||||||
|
grad.addColorStop(1,gradientStart);
|
||||||
|
grad.addColorStop(0,gradientEnd);
|
||||||
|
|
||||||
|
var newCircle = {
|
||||||
|
centerX: -maxR,
|
||||||
|
centerY: this.displayHeight/2-50,
|
||||||
|
maxRad : maxR,
|
||||||
|
minRad : minR,
|
||||||
|
color: grad, //can set a gradient or solid color here.
|
||||||
|
//fillColor: "rgba(0,0,0,1)",
|
||||||
|
param : 0,
|
||||||
|
changeSpeed : 1/250,
|
||||||
|
phase : Math.random()*TWO_PI, //the phase to use for a single fractal curve.
|
||||||
|
globalPhase: Math.random()*TWO_PI //the curve as a whole will rise and fall by a sinusoid.
|
||||||
|
};
|
||||||
|
this.circles.push(newCircle);
|
||||||
|
newCircle.pointList1 = this.setLinePoints(this.settings.iterations);
|
||||||
|
newCircle.pointList2 = this.setLinePoints(this.settings.iterations);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onTimer: function () {
|
||||||
|
var i,j;
|
||||||
|
var c;
|
||||||
|
var rad;
|
||||||
|
var point1,point2;
|
||||||
|
var x0,y0;
|
||||||
|
var cosParam;
|
||||||
|
|
||||||
|
var xSqueeze = 0.75; //cheap 3D effect by shortening in x direction.
|
||||||
|
|
||||||
|
var yOffset;
|
||||||
|
|
||||||
|
//draw circles
|
||||||
|
for (j = 0; j < this.settings.drawsPerFrame; j++) {
|
||||||
|
|
||||||
|
this.drawCount++;
|
||||||
|
|
||||||
|
for (i = 0; i < this.settings.numCircles; i++) {
|
||||||
|
c = this.circles[i];
|
||||||
|
c.param += c.changeSpeed;
|
||||||
|
if (c.param >= 1) {
|
||||||
|
c.param = 0;
|
||||||
|
|
||||||
|
c.pointList1 = c.pointList2;
|
||||||
|
c.pointList2 = this.setLinePoints(this.settings.iterations);
|
||||||
|
}
|
||||||
|
cosParam = 0.5-0.5*Math.cos(Math.PI*c.param);
|
||||||
|
|
||||||
|
this.context.strokeStyle = c.color;
|
||||||
|
this.context.lineWidth = this.settings.lineWidth;
|
||||||
|
//context.fillStyle = c.fillColor;
|
||||||
|
this.context.beginPath();
|
||||||
|
point1 = c.pointList1.first;
|
||||||
|
point2 = c.pointList2.first;
|
||||||
|
|
||||||
|
//slowly rotate
|
||||||
|
c.phase += 0.0002;
|
||||||
|
|
||||||
|
theta = c.phase;
|
||||||
|
rad = c.minRad + (point1.y + cosParam*(point2.y-point1.y))*(c.maxRad - c.minRad);
|
||||||
|
|
||||||
|
//move center
|
||||||
|
c.centerX += 0.5;
|
||||||
|
c.centerY += 0.04;
|
||||||
|
yOffset = 40*Math.sin(c.globalPhase + this.drawCount/1000*TWO_PI);
|
||||||
|
//stop when off screen
|
||||||
|
if (c.centerX > this.displayWidth + this.settings.maxMaxRad) {
|
||||||
|
clearInterval(timer);
|
||||||
|
timer = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
//we are drawing in new position by applying a transform. We are doing this so the gradient will move with the drawing.
|
||||||
|
this.context.setTransform(xSqueeze,0,0,1,c.centerX,c.centerY+yOffset)
|
||||||
|
|
||||||
|
//Drawing the curve involves stepping through a linked list of points defined by a fractal subdivision process.
|
||||||
|
//It is like drawing a circle, except with varying radius.
|
||||||
|
x0 = xSqueeze*rad*Math.cos(theta);
|
||||||
|
y0 = rad*Math.sin(theta);
|
||||||
|
this.context.lineTo(x0, y0);
|
||||||
|
while (point1.next != null) {
|
||||||
|
point1 = point1.next;
|
||||||
|
point2 = point2.next;
|
||||||
|
theta = TWO_PI*(point1.x + cosParam*(point2.x-point1.x)) + c.phase;
|
||||||
|
rad = c.minRad + (point1.y + cosParam*(point2.y-point1.y))*(c.maxRad - c.minRad);
|
||||||
|
x0 = xSqueeze*rad*Math.cos(theta);
|
||||||
|
y0 = rad*Math.sin(theta);
|
||||||
|
this.context.lineTo(x0, y0);
|
||||||
|
}
|
||||||
|
this.context.closePath();
|
||||||
|
this.context.stroke();
|
||||||
|
//context.fill();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setLinePoints: function (iterations) {
|
||||||
|
var pointList = {};
|
||||||
|
pointList.first = {x:0, y:1};
|
||||||
|
var lastPoint = {x:1, y:1}
|
||||||
|
var minY = 1;
|
||||||
|
var maxY = 1;
|
||||||
|
var point;
|
||||||
|
var nextPoint;
|
||||||
|
var dx, newX, newY;
|
||||||
|
var ratio;
|
||||||
|
|
||||||
|
var minRatio = 0.5;
|
||||||
|
|
||||||
|
pointList.first.next = lastPoint;
|
||||||
|
for (var i = 0; i < iterations; i++) {
|
||||||
|
point = pointList.first;
|
||||||
|
while (point.next != null) {
|
||||||
|
nextPoint = point.next;
|
||||||
|
|
||||||
|
dx = nextPoint.x - point.x;
|
||||||
|
newX = 0.5*(point.x + nextPoint.x);
|
||||||
|
newY = 0.5*(point.y + nextPoint.y);
|
||||||
|
newY += dx*(Math.random()*2 - 1);
|
||||||
|
|
||||||
|
var newPoint = {x:newX, y:newY};
|
||||||
|
|
||||||
|
//min, max
|
||||||
|
if (newY < minY) {
|
||||||
|
minY = newY;
|
||||||
|
}
|
||||||
|
else if (newY > maxY) {
|
||||||
|
maxY = newY;
|
||||||
|
}
|
||||||
|
|
||||||
|
//put between points
|
||||||
|
newPoint.next = nextPoint;
|
||||||
|
point.next = newPoint;
|
||||||
|
|
||||||
|
point = nextPoint;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//normalize to values between 0 and 1
|
||||||
|
if (maxY != minY) {
|
||||||
|
var normalizeRate = 1/(maxY - minY);
|
||||||
|
point = pointList.first;
|
||||||
|
while (point != null) {
|
||||||
|
point.y = normalizeRate*(point.y - minY);
|
||||||
|
point = point.next;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//unlikely that max = min, but could happen if using zero iterations. In this case, set all points equal to 1.
|
||||||
|
else {
|
||||||
|
point = pointList.first;
|
||||||
|
while (point != null) {
|
||||||
|
point.y = 1;
|
||||||
|
point = point.next;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return pointList;
|
||||||
|
},
|
||||||
|
setOption: function (optionName, optionValue) {
|
||||||
|
this.settings[optionName] = optionValue;
|
||||||
|
},
|
||||||
|
hexToRGBA: function (hex, opacity) {
|
||||||
|
hex = hex.replace('#','');
|
||||||
|
r = parseInt(hex.substring(0,2), 16);
|
||||||
|
g = parseInt(hex.substring(2,4), 16);
|
||||||
|
b = parseInt(hex.substring(4,6), 16);
|
||||||
|
|
||||||
|
result = 'rgba('+r+','+g+','+b+','+opacity+')';
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
download: function(width, height){
|
||||||
|
this.exportContext.drawImage(this.displayCanvas[0], 0, 0, width, height, 0, 0, width, height);
|
||||||
|
//we will open a new window with the image contained within:
|
||||||
|
//retrieve canvas image as data URL:
|
||||||
|
var dataURL = this.exportCanvas.toDataURL("image/png");
|
||||||
|
//open a new window of appropriate size to hold the image:
|
||||||
|
var imageWindow = window.open("", "fractalLineImage", "left=0,top=0,width="+width+",height="+height+",toolbar=0,resizable=0");
|
||||||
|
//write some html into the new window, creating an empty image:
|
||||||
|
imageWindow.document.write("<title>Export Image</title>")
|
||||||
|
imageWindow.document.write("<img id='exportImage'"
|
||||||
|
+ " alt=''"
|
||||||
|
+ " height='" + height + "'"
|
||||||
|
+ " width='" + width + "'"
|
||||||
|
+ " style='position:absolute;left:0;top:0'/>");
|
||||||
|
imageWindow.document.close();
|
||||||
|
//copy the image into the empty img in the newly opened window:
|
||||||
|
var exportImage = imageWindow.document.getElementById("exportImage");
|
||||||
|
exportImage.src = dataURL;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function SmokeNiceBG(_x0,_y0,_rad0,_x1,_y1,_rad1) {
|
||||||
|
this.x0 = _x0;
|
||||||
|
this.y0 = _y0;
|
||||||
|
this.x1 = _x1;
|
||||||
|
this.y1 = _y1;
|
||||||
|
this.rad0 = _rad0;
|
||||||
|
this.rad1 = _rad1;
|
||||||
|
this.colorStops = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
SmokeNiceBG.prototype.addColorStop = function(ratio,r,g,b) {
|
||||||
|
if ((ratio < 0) || (ratio > 1)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var n;
|
||||||
|
var newStop = {ratio:ratio, r:r, g:g, b:b};
|
||||||
|
if ((ratio >= 0) && (ratio <= 1)) {
|
||||||
|
if (this.colorStops.length == 0) {
|
||||||
|
this.colorStops.push(newStop);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var i = 0;
|
||||||
|
var found = false;
|
||||||
|
var len = this.colorStops.length;
|
||||||
|
//search for proper place to put stop in order.
|
||||||
|
while ((!found) && (i<len)) {
|
||||||
|
found = (ratio <= this.colorStops[i].ratio);
|
||||||
|
if (!found) {
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//add stop - remove next one if duplicate ratio
|
||||||
|
if (!found) {
|
||||||
|
//place at end
|
||||||
|
this.colorStops.push(newStop);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (ratio == this.colorStops[i].ratio) {
|
||||||
|
//replace
|
||||||
|
this.colorStops.splice(i, 1, newStop);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.colorStops.splice(i, 0, newStop);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
SmokeNiceBG.prototype.fillRect = function(ctx, rectX0, rectY0, rectW, rectH) {
|
||||||
|
|
||||||
|
if (this.colorStops.length == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var image = ctx.getImageData(rectX0, rectY0, rectW, rectH);
|
||||||
|
var pixelData = image.data;
|
||||||
|
var len = pixelData.length;
|
||||||
|
var oldpixel, newpixel, nearestValue;
|
||||||
|
var quantError;
|
||||||
|
var x;
|
||||||
|
var y;
|
||||||
|
|
||||||
|
var vx = this.x1 - this.x0;
|
||||||
|
var vy = this.y1 - this.y0;
|
||||||
|
var vMagSquareRecip = 1/(vx*vx+vy*vy);
|
||||||
|
var ratio;
|
||||||
|
|
||||||
|
var r,g,b;
|
||||||
|
var r0,g0,b0,r1,g1,b1;
|
||||||
|
var ratio0,ratio1;
|
||||||
|
var f;
|
||||||
|
var stopNumber;
|
||||||
|
var found;
|
||||||
|
var q;
|
||||||
|
|
||||||
|
var rBuffer = [];
|
||||||
|
var gBuffer = [];
|
||||||
|
var bBuffer = [];
|
||||||
|
var aBuffer = [];
|
||||||
|
|
||||||
|
var a,b,c,discrim;
|
||||||
|
var dx,dy;
|
||||||
|
|
||||||
|
var xDiff = this.x1 - this.x0;
|
||||||
|
var yDiff = this.y1 - this.y0;
|
||||||
|
var rDiff = this.rad1 - this.rad0;
|
||||||
|
a = rDiff*rDiff - xDiff*xDiff - yDiff*yDiff;
|
||||||
|
var rConst1 = 2*this.rad0*(this.rad1-this.rad0);
|
||||||
|
var r0Square = this.rad0*this.rad0;
|
||||||
|
|
||||||
|
//first complete color stops with 0 and 1 ratios if not already present
|
||||||
|
if (this.colorStops[0].ratio != 0) {
|
||||||
|
var newStop = { ratio:0,
|
||||||
|
r: this.colorStops[0].r,
|
||||||
|
g: this.colorStops[0].g,
|
||||||
|
b: this.colorStops[0].b}
|
||||||
|
this.colorStops.splice(0,0,newStop);
|
||||||
|
}
|
||||||
|
if (this.colorStops[this.colorStops.length-1].ratio != 1) {
|
||||||
|
var newStop = { ratio:1,
|
||||||
|
r: this.colorStops[this.colorStops.length-1].r,
|
||||||
|
g: this.colorStops[this.colorStops.length-1].g,
|
||||||
|
b: this.colorStops[this.colorStops.length-1].b}
|
||||||
|
this.colorStops.push(newStop);
|
||||||
|
}
|
||||||
|
|
||||||
|
//create float valued gradient
|
||||||
|
for (i = 0; i<len/4; i++) {
|
||||||
|
|
||||||
|
x = rectX0 + (i % rectW);
|
||||||
|
y = rectY0 + Math.floor(i/rectW);
|
||||||
|
|
||||||
|
dx = x - this.x0;
|
||||||
|
dy = y - this.y0;
|
||||||
|
b = rConst1 + 2*(dx*xDiff + dy*yDiff);
|
||||||
|
c = r0Square - dx*dx - dy*dy;
|
||||||
|
discrim = b*b-4*a*c;
|
||||||
|
|
||||||
|
if (discrim >= 0) {
|
||||||
|
ratio = (-b + Math.sqrt(discrim))/(2*a);
|
||||||
|
|
||||||
|
if (ratio < 0) {
|
||||||
|
ratio = 0;
|
||||||
|
}
|
||||||
|
else if (ratio > 1) {
|
||||||
|
ratio = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
//find out what two stops this is between
|
||||||
|
if (ratio == 1) {
|
||||||
|
stopNumber = this.colorStops.length-1;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
stopNumber = 0;
|
||||||
|
found = false;
|
||||||
|
while (!found) {
|
||||||
|
found = (ratio < this.colorStops[stopNumber].ratio);
|
||||||
|
if (!found) {
|
||||||
|
stopNumber++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//calculate color.
|
||||||
|
r0 = this.colorStops[stopNumber-1].r;
|
||||||
|
g0 = this.colorStops[stopNumber-1].g;
|
||||||
|
b0 = this.colorStops[stopNumber-1].b;
|
||||||
|
r1 = this.colorStops[stopNumber].r;
|
||||||
|
g1 = this.colorStops[stopNumber].g;
|
||||||
|
b1 = this.colorStops[stopNumber].b;
|
||||||
|
ratio0 = this.colorStops[stopNumber-1].ratio;
|
||||||
|
ratio1 = this.colorStops[stopNumber].ratio;
|
||||||
|
|
||||||
|
f = (ratio-ratio0)/(ratio1-ratio0);
|
||||||
|
r = r0 + (r1 - r0)*f;
|
||||||
|
g = g0 + (g1 - g0)*f;
|
||||||
|
b = b0 + (b1 - b0)*f;
|
||||||
|
}
|
||||||
|
|
||||||
|
else {
|
||||||
|
r = r0;
|
||||||
|
g = g0;
|
||||||
|
b = b0;
|
||||||
|
}
|
||||||
|
|
||||||
|
//set color as float values in buffer arrays
|
||||||
|
rBuffer.push(r);
|
||||||
|
gBuffer.push(g);
|
||||||
|
bBuffer.push(b);
|
||||||
|
}
|
||||||
|
|
||||||
|
//While converting floats to integer valued color values, apply Floyd-Steinberg dither.
|
||||||
|
for (i = 0; i<len/4; i++) {
|
||||||
|
nearestValue = ~~(rBuffer[i]);
|
||||||
|
quantError =rBuffer[i] - nearestValue;
|
||||||
|
rBuffer[i+1] += 7/16*quantError;
|
||||||
|
rBuffer[i-1+rectW] += 3/16*quantError;
|
||||||
|
rBuffer[i + rectW] += 5/16*quantError;
|
||||||
|
rBuffer[i+1 + rectW] += 1/16*quantError;
|
||||||
|
|
||||||
|
nearestValue = ~~(gBuffer[i]);
|
||||||
|
quantError =gBuffer[i] - nearestValue;
|
||||||
|
gBuffer[i+1] += 7/16*quantError;
|
||||||
|
gBuffer[i-1+rectW] += 3/16*quantError;
|
||||||
|
gBuffer[i + rectW] += 5/16*quantError;
|
||||||
|
gBuffer[i+1 + rectW] += 1/16*quantError;
|
||||||
|
|
||||||
|
nearestValue = ~~(bBuffer[i]);
|
||||||
|
quantError =bBuffer[i] - nearestValue;
|
||||||
|
bBuffer[i+1] += 7/16*quantError;
|
||||||
|
bBuffer[i-1+rectW] += 3/16*quantError;
|
||||||
|
bBuffer[i + rectW] += 5/16*quantError;
|
||||||
|
bBuffer[i+1 + rectW] += 1/16*quantError;
|
||||||
|
}
|
||||||
|
|
||||||
|
//copy to pixel data
|
||||||
|
for (i=0; i<len; i += 4) {
|
||||||
|
q = i/4;
|
||||||
|
pixelData[i] = ~~rBuffer[q];
|
||||||
|
pixelData[i+1] = ~~gBuffer[q];
|
||||||
|
pixelData[i+2] = ~~bBuffer[q];
|
||||||
|
pixelData[i+3] = 255;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.putImageData(image,rectX0,rectY0);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// A really lightweight plugin wrapper around the constructor,
|
||||||
|
// preventing against multiple instantiations
|
||||||
|
$.fn[ pluginName ] = function ( options ) {
|
||||||
|
this.each(function() {
|
||||||
|
if ( !$.data( this, pluginName ) ) {
|
||||||
|
$.data( this, pluginName, new Smoke( this, options ) );
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// chain jQuery functions
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
})( jQuery, window, document );
|
||||||
Reference in New Issue
Block a user