Initial repo
@@ -0,0 +1,11 @@
|
|||||||
|
/* required LIB STYLES */
|
||||||
|
/* .Treant se automatski dodaje na svaki chart conatiner */
|
||||||
|
.Treant { position: relative; overflow: hidden; padding: 0 !important; }
|
||||||
|
.Treant > .node,
|
||||||
|
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
|
||||||
|
.Treant.Treant-loaded .node,
|
||||||
|
.Treant.Treant-loaded .pseudo { visibility: visible; }
|
||||||
|
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
|
||||||
|
.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
|
||||||
|
.Treant .collapsed .collapse-switch { background-color: #868DEE; }
|
||||||
|
.Treant > .node img { border: none; float: left; }
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
|
||||||
|
table { border-collapse:collapse; border-spacing:0; }
|
||||||
|
fieldset,img { border:0; }
|
||||||
|
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
|
||||||
|
caption,th { text-align:left; }
|
||||||
|
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
|
||||||
|
q:before,q:after { content:''; }
|
||||||
|
abbr,acronym { border:0; }
|
||||||
|
|
||||||
|
body { background: #fff; }
|
||||||
|
/* optional Container STYLES */
|
||||||
|
.chart { height: 1000px; margin: 5px; width: 1000px; }
|
||||||
|
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
|
||||||
|
.Treant > .node img { width: 100px; height: 100px; }
|
||||||
|
|
||||||
|
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
|
||||||
|
.Treant .node.collapsed { background-color: #DEF82D; }
|
||||||
|
.Treant .node.collapsed .collapse-switch { background: none; }
|
||||||
|
After Width: | Height: | Size: 329 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 348 KiB |
|
After Width: | Height: | Size: 298 KiB |
|
After Width: | Height: | Size: 303 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 363 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 403 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 346 KiB |
|
After Width: | Height: | Size: 199 KiB |
|
After Width: | Height: | Size: 254 KiB |
|
After Width: | Height: | Size: 394 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 455 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 145 KiB |
@@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title> Aisin Gioro Family Tree </title>
|
||||||
|
<link rel="stylesheet" href="Treant.css">
|
||||||
|
<link rel="stylesheet" href="main.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="chart" id="basic-example"></div>
|
||||||
|
<script src="vendor/raphael.js"></script>
|
||||||
|
<script src="Treant.js"></script>
|
||||||
|
|
||||||
|
<script src="vendor/jquery.min.js"></script>
|
||||||
|
<script src="vendor/jquery.easing.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="data.js"></script>
|
||||||
|
<script>
|
||||||
|
tree = new Treant( chart_config );
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
|
||||||
|
table { border-collapse:collapse; border-spacing:0; }
|
||||||
|
fieldset,img { border:0; width: 100px; height: 100px;}
|
||||||
|
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
|
||||||
|
caption,th { text-align:left; }
|
||||||
|
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
|
||||||
|
q:before,q:after { content:''; }
|
||||||
|
abbr,acronym { border:0; }
|
||||||
|
|
||||||
|
body { background: #fff; }
|
||||||
|
/* optional Container STYLES */
|
||||||
|
.chart { height: auto; margin: 5px; width: auto; }
|
||||||
|
.Treant > .node { }
|
||||||
|
.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
|
||||||
|
.node-name { font-weight: bold;}
|
||||||
|
|
||||||
|
.Treant .collapse-switch { width: 100%; height: 100%; border: none;}
|
||||||
|
.Treant .node.collapsed { box-shadow:4px 4px 3px; }
|
||||||
|
.Treant .node.collapsed .collapse-switch { border: none; background: unset;}
|
||||||
|
|
||||||
|
.nodeExample1 {
|
||||||
|
padding: 2px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #000;
|
||||||
|
width: 200px;
|
||||||
|
font-family: Tahoma;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nodeExample1 img {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gray {
|
||||||
|
background-color: #909090;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dieyoung {
|
||||||
|
background-color: #D3D3C7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ironhat {
|
||||||
|
background-color: #A2BDFD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emperor {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
@@ -0,0 +1,205 @@
|
|||||||
|
/*
|
||||||
|
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||||
|
*
|
||||||
|
* Uses the built in easing capabilities added In jQuery 1.1
|
||||||
|
* to offer multiple easing options
|
||||||
|
*
|
||||||
|
* TERMS OF USE - jQuery Easing
|
||||||
|
*
|
||||||
|
* Open source under the BSD License.
|
||||||
|
*
|
||||||
|
* Copyright © 2008 George McGinley Smith
|
||||||
|
* All rights reserved.
|
||||||
|
*
|
||||||
|
* Redistribution and use in source and binary forms, with or without modification,
|
||||||
|
* are permitted provided that the following conditions are met:
|
||||||
|
*
|
||||||
|
* Redistributions of source code must retain the above copyright notice, this list of
|
||||||
|
* conditions and the following disclaimer.
|
||||||
|
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||||
|
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||||
|
* provided with the distribution.
|
||||||
|
*
|
||||||
|
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||||
|
* or promote products derived from this software without specific prior written permission.
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||||
|
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||||
|
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||||
|
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||||
|
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||||
|
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||||
|
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||||
|
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||||
|
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||||
|
jQuery.easing['jswing'] = jQuery.easing['swing'];
|
||||||
|
|
||||||
|
jQuery.extend( jQuery.easing,
|
||||||
|
{
|
||||||
|
def: 'easeOutQuad',
|
||||||
|
swing: function (x, t, b, c, d) {
|
||||||
|
//alert(jQuery.easing.default);
|
||||||
|
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
|
||||||
|
},
|
||||||
|
easeInQuad: function (x, t, b, c, d) {
|
||||||
|
return c*(t/=d)*t + b;
|
||||||
|
},
|
||||||
|
easeOutQuad: function (x, t, b, c, d) {
|
||||||
|
return -c *(t/=d)*(t-2) + b;
|
||||||
|
},
|
||||||
|
easeInOutQuad: function (x, t, b, c, d) {
|
||||||
|
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||||
|
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||||
|
},
|
||||||
|
easeInCubic: function (x, t, b, c, d) {
|
||||||
|
return c*(t/=d)*t*t + b;
|
||||||
|
},
|
||||||
|
easeOutCubic: function (x, t, b, c, d) {
|
||||||
|
return c*((t=t/d-1)*t*t + 1) + b;
|
||||||
|
},
|
||||||
|
easeInOutCubic: function (x, t, b, c, d) {
|
||||||
|
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||||
|
return c/2*((t-=2)*t*t + 2) + b;
|
||||||
|
},
|
||||||
|
easeInQuart: function (x, t, b, c, d) {
|
||||||
|
return c*(t/=d)*t*t*t + b;
|
||||||
|
},
|
||||||
|
easeOutQuart: function (x, t, b, c, d) {
|
||||||
|
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||||
|
},
|
||||||
|
easeInOutQuart: function (x, t, b, c, d) {
|
||||||
|
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||||
|
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||||
|
},
|
||||||
|
easeInQuint: function (x, t, b, c, d) {
|
||||||
|
return c*(t/=d)*t*t*t*t + b;
|
||||||
|
},
|
||||||
|
easeOutQuint: function (x, t, b, c, d) {
|
||||||
|
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||||
|
},
|
||||||
|
easeInOutQuint: function (x, t, b, c, d) {
|
||||||
|
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||||
|
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||||
|
},
|
||||||
|
easeInSine: function (x, t, b, c, d) {
|
||||||
|
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||||
|
},
|
||||||
|
easeOutSine: function (x, t, b, c, d) {
|
||||||
|
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||||
|
},
|
||||||
|
easeInOutSine: function (x, t, b, c, d) {
|
||||||
|
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||||
|
},
|
||||||
|
easeInExpo: function (x, t, b, c, d) {
|
||||||
|
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||||
|
},
|
||||||
|
easeOutExpo: function (x, t, b, c, d) {
|
||||||
|
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||||
|
},
|
||||||
|
easeInOutExpo: function (x, t, b, c, d) {
|
||||||
|
if (t==0) return b;
|
||||||
|
if (t==d) return b+c;
|
||||||
|
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||||
|
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||||
|
},
|
||||||
|
easeInCirc: function (x, t, b, c, d) {
|
||||||
|
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||||
|
},
|
||||||
|
easeOutCirc: function (x, t, b, c, d) {
|
||||||
|
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||||
|
},
|
||||||
|
easeInOutCirc: function (x, t, b, c, d) {
|
||||||
|
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||||
|
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||||
|
},
|
||||||
|
easeInElastic: function (x, t, b, c, d) {
|
||||||
|
var s=1.70158;var p=0;var a=c;
|
||||||
|
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||||
|
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||||
|
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||||
|
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||||
|
},
|
||||||
|
easeOutElastic: function (x, t, b, c, d) {
|
||||||
|
var s=1.70158;var p=0;var a=c;
|
||||||
|
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||||
|
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||||
|
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||||
|
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||||
|
},
|
||||||
|
easeInOutElastic: function (x, t, b, c, d) {
|
||||||
|
var s=1.70158;var p=0;var a=c;
|
||||||
|
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||||
|
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||||
|
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||||
|
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||||
|
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||||
|
},
|
||||||
|
easeInBack: function (x, t, b, c, d, s) {
|
||||||
|
if (s == undefined) s = 1.70158;
|
||||||
|
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||||
|
},
|
||||||
|
easeOutBack: function (x, t, b, c, d, s) {
|
||||||
|
if (s == undefined) s = 1.70158;
|
||||||
|
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||||
|
},
|
||||||
|
easeInOutBack: function (x, t, b, c, d, s) {
|
||||||
|
if (s == undefined) s = 1.70158;
|
||||||
|
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||||
|
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||||
|
},
|
||||||
|
easeInBounce: function (x, t, b, c, d) {
|
||||||
|
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||||
|
},
|
||||||
|
easeOutBounce: function (x, t, b, c, d) {
|
||||||
|
if ((t/=d) < (1/2.75)) {
|
||||||
|
return c*(7.5625*t*t) + b;
|
||||||
|
} else if (t < (2/2.75)) {
|
||||||
|
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||||
|
} else if (t < (2.5/2.75)) {
|
||||||
|
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||||
|
} else {
|
||||||
|
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
easeInOutBounce: function (x, t, b, c, d) {
|
||||||
|
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||||
|
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* TERMS OF USE - EASING EQUATIONS
|
||||||
|
*
|
||||||
|
* Open source under the BSD License.
|
||||||
|
*
|
||||||
|
* Copyright © 2001 Robert Penner
|
||||||
|
* All rights reserved.
|
||||||
|
*
|
||||||
|
* Redistribution and use in source and binary forms, with or without modification,
|
||||||
|
* are permitted provided that the following conditions are met:
|
||||||
|
*
|
||||||
|
* Redistributions of source code must retain the above copyright notice, this list of
|
||||||
|
* conditions and the following disclaimer.
|
||||||
|
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||||
|
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||||
|
* provided with the distribution.
|
||||||
|
*
|
||||||
|
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||||
|
* or promote products derived from this software without specific prior written permission.
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||||
|
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||||
|
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||||
|
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||||
|
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||||
|
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||||
|
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||||
|
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||||
|
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
|
*
|
||||||
|
*/
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
|
||||||
|
* Licensed under the MIT License (LICENSE.txt).
|
||||||
|
*
|
||||||
|
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||||
|
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||||
|
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
||||||
|
*
|
||||||
|
* Version: 3.0.6
|
||||||
|
*
|
||||||
|
* Requires: 1.2.2+
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
var types = ['DOMMouseScroll', 'mousewheel'];
|
||||||
|
|
||||||
|
if ($.event.fixHooks) {
|
||||||
|
for ( var i=types.length; i; ) {
|
||||||
|
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$.event.special.mousewheel = {
|
||||||
|
setup: function() {
|
||||||
|
if ( this.addEventListener ) {
|
||||||
|
for ( var i=types.length; i; ) {
|
||||||
|
this.addEventListener( types[--i], handler, false );
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.onmousewheel = handler;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
teardown: function() {
|
||||||
|
if ( this.removeEventListener ) {
|
||||||
|
for ( var i=types.length; i; ) {
|
||||||
|
this.removeEventListener( types[--i], handler, false );
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.onmousewheel = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.extend({
|
||||||
|
mousewheel: function(fn) {
|
||||||
|
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
||||||
|
},
|
||||||
|
|
||||||
|
unmousewheel: function(fn) {
|
||||||
|
return this.unbind("mousewheel", fn);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function handler(event) {
|
||||||
|
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
|
||||||
|
event = $.event.fix(orgEvent);
|
||||||
|
event.type = "mousewheel";
|
||||||
|
|
||||||
|
// Old school scrollwheel delta
|
||||||
|
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
|
||||||
|
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
|
||||||
|
|
||||||
|
// New school multidimensional scroll (touchpads) deltas
|
||||||
|
deltaY = delta;
|
||||||
|
|
||||||
|
// Gecko
|
||||||
|
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
||||||
|
deltaY = 0;
|
||||||
|
deltaX = -1*delta;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Webkit
|
||||||
|
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
|
||||||
|
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
|
||||||
|
|
||||||
|
// Add event and delta to the front of the arguments
|
||||||
|
args.unshift(event, delta, deltaX, deltaY);
|
||||||
|
|
||||||
|
return ($.event.dispatch || $.event.handle).apply(this, args);
|
||||||
|
}
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
.ps-container .ps-scrollbar-x {
|
||||||
|
position: absolute; /* please don't change 'position' */
|
||||||
|
bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
|
||||||
|
height: 8px;
|
||||||
|
background-color: #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
opacity: 0;
|
||||||
|
filter: alpha(opacity = 0);
|
||||||
|
-webkit-transition: opacity.2s linear;
|
||||||
|
-moz-transition: opacity .2s linear;
|
||||||
|
transition: opacity .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps-container:hover .ps-scrollbar-x {
|
||||||
|
opacity: 0.6;
|
||||||
|
filter: alpha(opacity = 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps-container .ps-scrollbar-x:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
filter: alpha(opacity = 90);
|
||||||
|
cursor:default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps-container .ps-scrollbar-x.in-scrolling {
|
||||||
|
opacity: 0.9;
|
||||||
|
filter: alpha(opacity = 90);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps-container .ps-scrollbar-y {
|
||||||
|
position: absolute; /* please don't change 'position' */
|
||||||
|
right: 3px; /* there must be 'right' for ps-scrollbar-y */
|
||||||
|
width: 8px;
|
||||||
|
background-color: #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
opacity: 0;
|
||||||
|
filter: alpha(opacity = 0);
|
||||||
|
-webkit-transition: opacity.2s linear;
|
||||||
|
-moz-transition: opacity .2s linear;
|
||||||
|
transition: opacity .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps-container:hover .ps-scrollbar-y {
|
||||||
|
opacity: 0.6;
|
||||||
|
filter: alpha(opacity = 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps-container .ps-scrollbar-y:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
filter: alpha(opacity = 90);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps-container .ps-scrollbar-y.in-scrolling {
|
||||||
|
opacity: 0.9;
|
||||||
|
filter: alpha(opacity = 90);
|
||||||
|
}
|
||||||
@@ -0,0 +1,313 @@
|
|||||||
|
/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
|
||||||
|
* Licensed under the MIT License
|
||||||
|
*/
|
||||||
|
((function($) {
|
||||||
|
|
||||||
|
// The default settings for the plugin
|
||||||
|
var defaultSettings = {
|
||||||
|
wheelSpeed: 10,
|
||||||
|
wheelPropagation: false
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.perfectScrollbar = function(suppliedSettings, option) {
|
||||||
|
|
||||||
|
// Use the default settings
|
||||||
|
var settings = $.extend( true, {}, defaultSettings );
|
||||||
|
if (typeof suppliedSettings === "object") {
|
||||||
|
// But over-ride any supplied
|
||||||
|
$.extend( true, settings, suppliedSettings );
|
||||||
|
} else {
|
||||||
|
// If no settings were supplied, then the first param must be the option
|
||||||
|
option = suppliedSettings;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(option === 'update') {
|
||||||
|
if($(this).data('perfect_scrollbar_update')) {
|
||||||
|
$(this).data('perfect_scrollbar_update')();
|
||||||
|
}
|
||||||
|
return $(this);
|
||||||
|
}
|
||||||
|
else if(option === 'destroy') {
|
||||||
|
if($(this).data('perfect_scrollbar_destroy')) {
|
||||||
|
$(this).data('perfect_scrollbar_destroy')();
|
||||||
|
}
|
||||||
|
return $(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
if($(this).data('perfect_scrollbar')) {
|
||||||
|
// if there's already perfect_scrollbar
|
||||||
|
return $(this).data('perfect_scrollbar');
|
||||||
|
}
|
||||||
|
|
||||||
|
var $this = $(this).addClass('ps-container'),
|
||||||
|
$content = $(this).children(),
|
||||||
|
$scrollbar_x = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
|
||||||
|
$scrollbar_y = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
|
||||||
|
container_width,
|
||||||
|
container_height,
|
||||||
|
content_width,
|
||||||
|
content_height,
|
||||||
|
scrollbar_x_width,
|
||||||
|
scrollbar_x_left,
|
||||||
|
scrollbar_x_bottom = parseInt($scrollbar_x.css('bottom'), 10),
|
||||||
|
scrollbar_y_height,
|
||||||
|
scrollbar_y_top,
|
||||||
|
scrollbar_y_right = parseInt($scrollbar_y.css('right'), 10);
|
||||||
|
|
||||||
|
var updateContentScrollTop = function() {
|
||||||
|
var scroll_top = parseInt(scrollbar_y_top * content_height / container_height, 10);
|
||||||
|
$this.scrollTop(scroll_top);
|
||||||
|
$scrollbar_x.css({bottom: scrollbar_x_bottom - scroll_top});
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateContentScrollLeft = function() {
|
||||||
|
var scroll_left = parseInt(scrollbar_x_left * content_width / container_width, 10);
|
||||||
|
$this.scrollLeft(scroll_left);
|
||||||
|
$scrollbar_y.css({right: scrollbar_y_right - scroll_left});
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateBarSizeAndPosition = function() {
|
||||||
|
container_width = $this.width();
|
||||||
|
container_height = $this.height();
|
||||||
|
content_width = $content.outerWidth(false);
|
||||||
|
content_height = $content.outerHeight(false);
|
||||||
|
if(container_width < content_width) {
|
||||||
|
scrollbar_x_width = parseInt(container_width * container_width / content_width, 10);
|
||||||
|
scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width, 10);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
scrollbar_x_width = 0;
|
||||||
|
scrollbar_x_left = 0;
|
||||||
|
$this.scrollLeft(0);
|
||||||
|
}
|
||||||
|
if(container_height < content_height) {
|
||||||
|
scrollbar_y_height = parseInt(container_height * container_height / content_height, 10);
|
||||||
|
scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height, 10);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
scrollbar_y_height = 0;
|
||||||
|
scrollbar_y_left = 0;
|
||||||
|
$this.scrollTop(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
$scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft(), bottom: scrollbar_x_bottom - $this.scrollTop(), width: scrollbar_x_width});
|
||||||
|
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), right: scrollbar_y_right - $this.scrollLeft(), height: scrollbar_y_height});
|
||||||
|
};
|
||||||
|
|
||||||
|
var moveBarX = function(current_left, delta_x) {
|
||||||
|
var new_left = current_left + delta_x,
|
||||||
|
max_left = container_width - scrollbar_x_width;
|
||||||
|
|
||||||
|
if(new_left < 0) {
|
||||||
|
scrollbar_x_left = 0;
|
||||||
|
}
|
||||||
|
else if(new_left > max_left) {
|
||||||
|
scrollbar_x_left = max_left;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
scrollbar_x_left = new_left;
|
||||||
|
}
|
||||||
|
$scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft()});
|
||||||
|
};
|
||||||
|
|
||||||
|
var moveBarY = function(current_top, delta_y) {
|
||||||
|
var new_top = current_top + delta_y,
|
||||||
|
max_top = container_height - scrollbar_y_height;
|
||||||
|
|
||||||
|
if(new_top < 0) {
|
||||||
|
scrollbar_y_top = 0;
|
||||||
|
}
|
||||||
|
else if(new_top > max_top) {
|
||||||
|
scrollbar_y_top = max_top;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
scrollbar_y_top = new_top;
|
||||||
|
}
|
||||||
|
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop()});
|
||||||
|
};
|
||||||
|
|
||||||
|
var bindMouseScrollXHandler = function() {
|
||||||
|
var current_left,
|
||||||
|
current_page_x;
|
||||||
|
|
||||||
|
$scrollbar_x.bind('mousedown.perfect-scroll', function(e) {
|
||||||
|
current_page_x = e.pageX;
|
||||||
|
current_left = $scrollbar_x.position().left;
|
||||||
|
$scrollbar_x.addClass('in-scrolling');
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('mousemove.perfect-scroll', function(e) {
|
||||||
|
if($scrollbar_x.hasClass('in-scrolling')) {
|
||||||
|
moveBarX(current_left, e.pageX - current_page_x);
|
||||||
|
updateContentScrollLeft();
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('mouseup.perfect-scroll', function(e) {
|
||||||
|
if($scrollbar_x.hasClass('in-scrolling')) {
|
||||||
|
$scrollbar_x.removeClass('in-scrolling');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var bindMouseScrollYHandler = function() {
|
||||||
|
var current_top,
|
||||||
|
current_page_y;
|
||||||
|
|
||||||
|
$scrollbar_y.bind('mousedown.perfect-scroll', function(e) {
|
||||||
|
current_page_y = e.pageY;
|
||||||
|
current_top = $scrollbar_y.position().top;
|
||||||
|
$scrollbar_y.addClass('in-scrolling');
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('mousemove.perfect-scroll', function(e) {
|
||||||
|
if($scrollbar_y.hasClass('in-scrolling')) {
|
||||||
|
moveBarY(current_top, e.pageY - current_page_y);
|
||||||
|
updateContentScrollTop();
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind('mouseup.perfect-scroll', function(e) {
|
||||||
|
if($scrollbar_y.hasClass('in-scrolling')) {
|
||||||
|
$scrollbar_y.removeClass('in-scrolling');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// bind handlers
|
||||||
|
var bindMouseWheelHandler = function() {
|
||||||
|
var shouldPreventDefault = function(deltaX, deltaY) {
|
||||||
|
var scrollTop = $this.scrollTop();
|
||||||
|
if(scrollTop === 0 && deltaY > 0 && deltaX === 0) {
|
||||||
|
return !settings.wheelPropagation;
|
||||||
|
}
|
||||||
|
else if(scrollTop >= content_height - container_height && deltaY < 0 && deltaX === 0) {
|
||||||
|
return !settings.wheelPropagation;
|
||||||
|
}
|
||||||
|
|
||||||
|
var scrollLeft = $this.scrollLeft();
|
||||||
|
if(scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
|
||||||
|
return !settings.wheelPropagation;
|
||||||
|
}
|
||||||
|
else if(scrollLeft >= content_width - container_width && deltaX > 0 && deltaY === 0) {
|
||||||
|
return !settings.wheelPropagation;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
$this.mousewheel(function(e, delta, deltaX, deltaY) {
|
||||||
|
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
|
||||||
|
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
|
||||||
|
|
||||||
|
// update bar position
|
||||||
|
updateBarSizeAndPosition();
|
||||||
|
|
||||||
|
if(shouldPreventDefault(deltaX, deltaY)) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// bind mobile touch handler
|
||||||
|
var bindMobileTouchHandler = function() {
|
||||||
|
var applyTouchMove = function(difference_x, difference_y) {
|
||||||
|
$this.scrollTop($this.scrollTop() - difference_y);
|
||||||
|
$this.scrollLeft($this.scrollLeft() - difference_x);
|
||||||
|
|
||||||
|
// update bar position
|
||||||
|
updateBarSizeAndPosition();
|
||||||
|
};
|
||||||
|
|
||||||
|
var start_coords = {},
|
||||||
|
start_time = 0,
|
||||||
|
speed = {},
|
||||||
|
breaking_process = null;
|
||||||
|
|
||||||
|
$this.bind("touchstart.perfect-scroll", function(e) {
|
||||||
|
var touch = e.originalEvent.targetTouches[0];
|
||||||
|
|
||||||
|
start_coords.pageX = touch.pageX;
|
||||||
|
start_coords.pageY = touch.pageY;
|
||||||
|
|
||||||
|
start_time = (new Date()).getTime();
|
||||||
|
|
||||||
|
if (breaking_process !== null) {
|
||||||
|
clearInterval(breaking_process);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$this.bind("touchmove.perfect-scroll", function(e) {
|
||||||
|
var touch = e.originalEvent.targetTouches[0];
|
||||||
|
|
||||||
|
var current_coords = {};
|
||||||
|
current_coords.pageX = touch.pageX;
|
||||||
|
current_coords.pageY = touch.pageY;
|
||||||
|
|
||||||
|
var difference_x = current_coords.pageX - start_coords.pageX,
|
||||||
|
difference_y = current_coords.pageY - start_coords.pageY;
|
||||||
|
|
||||||
|
applyTouchMove(difference_x, difference_y);
|
||||||
|
start_coords = current_coords;
|
||||||
|
|
||||||
|
var current_time = (new Date()).getTime();
|
||||||
|
speed.x = difference_x / (current_time - start_time);
|
||||||
|
speed.y = difference_y / (current_time - start_time);
|
||||||
|
start_time = current_time;
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
$this.bind("touchend.perfect-scroll", function(e) {
|
||||||
|
breaking_process = setInterval(function() {
|
||||||
|
if(Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
|
||||||
|
clearInterval(breaking_process);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
applyTouchMove(speed.x * 30, speed.y * 30);
|
||||||
|
|
||||||
|
speed.x *= 0.8;
|
||||||
|
speed.y *= 0.8;
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var destroy = function() {
|
||||||
|
$scrollbar_x.remove();
|
||||||
|
$scrollbar_y.remove();
|
||||||
|
$this.unbind('mousewheel');
|
||||||
|
$this.unbind('touchstart.perfect-scroll');
|
||||||
|
$this.unbind('touchmove.perfect-scroll');
|
||||||
|
$this.unbind('touchend.perfect-scroll');
|
||||||
|
$(window).unbind('mousemove.perfect-scroll');
|
||||||
|
$(window).unbind('mouseup.perfect-scroll');
|
||||||
|
$this.data('perfect_scrollbar', null);
|
||||||
|
$this.data('perfect_scrollbar_update', null);
|
||||||
|
$this.data('perfect_scrollbar_destroy', null);
|
||||||
|
};
|
||||||
|
|
||||||
|
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
|
||||||
|
|
||||||
|
var initialize = function() {
|
||||||
|
updateBarSizeAndPosition();
|
||||||
|
bindMouseScrollXHandler();
|
||||||
|
bindMouseScrollYHandler();
|
||||||
|
if(isMobile) bindMobileTouchHandler();
|
||||||
|
if($this.mousewheel) bindMouseWheelHandler();
|
||||||
|
$this.data('perfect_scrollbar', $this);
|
||||||
|
$this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
|
||||||
|
$this.data('perfect_scrollbar_destroy', destroy);
|
||||||
|
};
|
||||||
|
|
||||||
|
// initialize
|
||||||
|
initialize();
|
||||||
|
|
||||||
|
return $this;
|
||||||
|
};
|
||||||
|
})(jQuery));
|
||||||