cartodb/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add update and destroy function, enhance css.

Browse Source 
this is the release version!
This commit is contained in:
Hyunje Alex Jun 2012-11-10 03:07:47 +09:00
parent 474351752d
commit a96c918dc8
4 changed files with 80 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
min/perfect-scrollbar.min.css vendored
View File

@ -1 +1 @@
.ps-container .ps-scrollbar-x{position:absolute;height:10px;bottom:5px;background-color:gray}.ps-container .ps-scrollbar-x:hover{background-color:#000;cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{background-color:#000}.ps-container .ps-scrollbar-y{position:absolute;width:10px;right:5px;background-color:gray}.ps-container .ps-scrollbar-y:hover{background-color:#000;cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{background-color:#000}
.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;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:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=90)}

2
min/perfect-scrollbar.min.js vendored
View File

@ -1,3 +1,3 @@
/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
* Licensed under the MIT License
*/(function(e){e.fn.perfectScrollbar=function(){var t=e(this).addClass("ps-container"),n=e(this).children(),r=e("<div class='ps-scrollbar-x'></div>").appendTo(t),i=e("<div class='ps-scrollbar-y'></div>").appendTo(t),s,o,u,a,f,l,c=parseInt(r.css("bottom")),h,p,d=parseInt(i.css("right")),v=function(){var e=parseInt(p*a/o);t.scrollTop(e),r.css({bottom:c-e})},m=function(){var e=parseInt(l*u/s);t.scrollLeft(e),i.css({right:d-e})},g=function(){s=t.width(),o=t.height(),u=n.width(),a=n.height(),s<u?(f=parseInt(s*s/u),l=parseInt(t.scrollLeft()*s/u)):(f=0,l=0),o<a?(h=parseInt(o*o/a),p=parseInt(t.scrollTop()*o/a)):(h=0,scrollbar_y_left=0),r.css({left:l+t.scrollLeft(),bottom:c-t.scrollTop(),width:f}),i.css({top:p+t.scrollTop(),right:d-t.scrollLeft(),height:h})},y=function(e,n){var i=e+n,o=s-f;i<0?l=0:i>o?l=o:l=i,r.css({left:l+t.scrollLeft()})},b=function(e,n){var r=e+n,s=o-h;r<0?p=0:r>s?p=s:p=r,i.css({top:p+t.scrollTop()})},w=function(){var t,n;r.bind("mousedown.perfect-scroll",function(e){n=e.pageX,t=r.position().left,r.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){r.hasClass("in-scrolling")&&(y(t,e.pageX-n),m(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){r.hasClass("in-scrolling")&&r.removeClass("in-scrolling")})},E=function(){var t,n;i.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=i.position().top,i.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){i.hasClass("in-scrolling")&&(b(t,e.pageY-n),v(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")})},S=function(){t.mousewheel(function(e,n,r,i){t.scrollTop(t.scrollTop()-i*10),t.scrollLeft(t.scrollLeft()+r*10),g(),(a>o||u>s)&&e.preventDefault()})};return g(),w(),E(),t.mousewheel&&S(),t}})(jQuery);
*/(function(e){e.fn.perfectScrollbar=function(t){if(t==="update"){e(this).data("perfect_scrollbar_update")();return}if(t==="destroy"){e(this).data("perfect_scrollbar_destroy")();return}if(e(this).data("perfect_scrollbar"))return;var n=e(this).addClass("ps-container"),r=e(this).children(),i=e("<div class='ps-scrollbar-x'></div>").appendTo(n),s=e("<div class='ps-scrollbar-y'></div>").appendTo(n),o,u,a,f,l,c,h=parseInt(i.css("bottom")),p,d,v=parseInt(s.css("right")),m=function(){var e=parseInt(d*f/u);n.scrollTop(e),i.css({bottom:h-e})},g=function(){var e=parseInt(c*a/o);n.scrollLeft(e),s.css({right:v-e})},y=function(){o=n.width(),u=n.height(),a=r.width(),f=r.height(),o<a?(l=parseInt(o*o/a),c=parseInt(n.scrollLeft()*o/a)):(l=0,c=0),u<f?(p=parseInt(u*u/f),d=parseInt(n.scrollTop()*u/f)):(p=0,scrollbar_y_left=0),i.css({left:c+n.scrollLeft(),bottom:h-n.scrollTop(),width:l}),s.css({top:d+n.scrollTop(),right:v-n.scrollLeft(),height:p})},b=function(e,t){var r=e+t,s=o-l;r<0?c=0:r>s?c=s:c=r,i.css({left:c+n.scrollLeft()})},w=function(e,t){var r=e+t,i=u-p;r<0?d=0:r>i?d=i:d=r,s.css({top:d+n.scrollTop()})},E=function(){var t,n;i.bind("mousedown.perfect-scroll",function(e){n=e.pageX,t=i.position().left,i.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){i.hasClass("in-scrolling")&&(b(t,e.pageX-n),g(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")})},S=function(){var t,n;s.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=s.position().top,s.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){s.hasClass("in-scrolling")&&(w(t,e.pageY-n),m(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){s.hasClass("in-scrolling")&&s.removeClass("in-scrolling")})},x=function(){n.mousewheel(function(e,t,r,i){n.scrollTop(n.scrollTop()-i*10),n.scrollLeft(n.scrollLeft()+r*10),y(),(f>u||a>o)&&e.preventDefault()})},T=function(){i.remove(),s.remove(),n.unbind("mousewheel"),e(window).unbind("mousemove.perfect-scroll"),e(window).unbind("mouseup.perfect-scroll"),n.data("perfect_scrollbar",null),n.data("perfect_scrollbar_update",null),n.data("perfect_scrollbar_destroy",null)},N=function(){y(),E(),S(),n.mousewheel&&x(),n.data("perfect_scrollbar",!0),n.data("perfect_scrollbar_update",y),n.data("perfect_scrollbar_destroy",T)};return N(),n}})(jQuery);

53
src/perfect-scrollbar.css
View File

@ -1,31 +1,60 @@
.ps-container .ps-scrollbar-x {
position: absolute;
height: 10px;
bottom: 5px;
background-color: gray;
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 {
background-color: black;
opacity: 0.9;
filter: alpha(opacity = 90);
cursor:default;
}
.ps-container .ps-scrollbar-x.in-scrolling {
background-color: black;
opacity: 0.9;
filter: alpha(opacity = 90);
}
.ps-container .ps-scrollbar-y {
position: absolute;
width: 10px;
right: 5px;
background-color: gray;
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;
-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 {
background-color: black;
opacity: 0.9;
filter: alpha(opacity = 90);
cursor: default;
}
.ps-container .ps-scrollbar-y.in-scrolling {
background-color: black;
opacity: 0.9;
filter: alpha(opacity = 90);
}

42
src/perfect-scrollbar.js
View File

@ -2,7 +2,21 @@
* Licensed under the MIT License
*/
((function($) {
$.fn.perfectScrollbar = function() {
$.fn.perfectScrollbar = function(option) {
if(option === 'update') {
$(this).data('perfect_scrollbar_update')();
return;
}
else if(option === 'destroy') {
$(this).data('perfect_scrollbar_destroy')();
return;
}
if($(this).data('perfect_scrollbar')) {
// if there's already perfect_scrollbar
return;
}
var $this = $(this).addClass('ps-container'),
$content = $(this).children(),
$scrollbar_x = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
@ -159,11 +173,29 @@
});
};
var destroy = function() {
$scrollbar_x.remove();
$scrollbar_y.remove();
$this.unbind('mousewheel');
$(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 initialize = function() {
updateBarSizeAndPosition();
bindMouseScrollXHandler();
bindMouseScrollYHandler();
if($this.mousewheel) bindMouseWheelHandler();
$this.data('perfect_scrollbar', true);
$this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
$this.data('perfect_scrollbar_destroy', destroy);
};
// initialize
updateBarSizeAndPosition();
bindMouseScrollXHandler();
bindMouseScrollYHandler();
if($this.mousewheel) bindMouseWheelHandler();
initialize();
return $this;
};