mirror_html/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-03-21 13:00:10 +01:00
Code Issues Projects Releases Wiki Activity

Updates jQuery.scrollpanel.

Browse Source
This commit is contained in:
Lars Jung 2012-07-04 16:28:19 +02:00
parent bd76573401
commit 76e89820eb
7 changed files with 18 additions and 172 deletions

7
src/_h5ai/css/inc/l10n.less

@ -14,15 +14,16 @@
background-color: rgb(241,241,241);
border: 1px solid rgb(210,210,210);
> .scrollbar {
.sp-scrollbar {
margin: 0;
width: 6px;
background-color: rgb(210,210,210);
cursor: pointer;
.drag {
.sp-thumb {
background-color: rgb(180,180,180);
}
&.dragOn .drag {
&.active .sp-thumb {
background-color: rgb(150,150,150);
}
}

7
src/_h5ai/css/inc/tree.less

@ -11,17 +11,18 @@
background-color: rgb(241,241,241);
border-right: 2px solid rgb(221,221,221);
> .scrollbar {
.sp-scrollbar {
margin: 8px 8px 8px 0;
width: 6px;
background-color: rgb(210,210,210);
.border-radius(3px);
cursor: pointer;
.drag {
.sp-thumb {
background-color: rgb(180,180,180);
.border-radius(3px);
}
&.dragOn .drag {
&.active .sp-thumb {
background-color: rgb(150,150,150);
}
}

4
src/_h5ai/js/inc/ext/l10n.js

@ -92,7 +92,9 @@ module.define('ext/l10n', [jQuery, 'core/settings', 'core/langs', 'core/format',
.css('top', '-' + $langOptions.outerHeight() + 'px')
.stop(true, true)
.fadeIn();
$langOptions.get(0).updateScrollbar();
// needs to be updated twice for initial fade in rendering :/
$langOptions.scrollpanel('update').scrollpanel('update');
},
function () {
$langOptions

12
src/_h5ai/js/inc/ext/tree.js

@ -101,15 +101,14 @@ module.define('ext/tree', [jQuery, 'core/settings', 'core/resource', 'core/event
createOnIndicatorClick = function (parser) {
var $tree = $('#tree'),
tree = $tree.get(0),
slide = function (entry, $indicator, $content, down) {
entry.isContentVisible = down;
$indicator.removeClass('open close').addClass(down ? 'open' : 'close');
tree.updateScrollbar(true);
$tree.scrollpanel('update', true);
$content[down ? 'slideDown' : 'slideUp'](function () {
tree.updateScrollbar();
$tree.scrollpanel('update');
});
};
@ -175,7 +174,6 @@ module.define('ext/tree', [jQuery, 'core/settings', 'core/resource', 'core/event
adjustSpacing = function () {
var $tree = $('#tree'),
tree = $tree[0],
winHeight = $(window).height(),
navHeight = $('#topbar').outerHeight(),
footerHeight = $('#bottombar').outerHeight();
@ -185,9 +183,7 @@ module.define('ext/tree', [jQuery, 'core/settings', 'core/resource', 'core/event
height: winHeight - navHeight - footerHeight - 16
});
if (tree.updateScrollbar) {
tree.updateScrollbar();
}
$tree.scrollpanel('update');
},
// creates the complete tree from entry down to the root
@ -208,7 +204,7 @@ module.define('ext/tree', [jQuery, 'core/settings', 'core/resource', 'core/event
adjustSpacing();
shiftTree(false, true);
setTimeout(function () { $tree.get(0).updateScrollbar(); }, 1);
$tree.scrollpanel('update');
});
$tree

2
src/_h5ai/js/inc/lib/jquery.scrollpanel-0.1.min.js vendored Normal file

@ -0,0 +1,2 @@
/*! jQuery.scrollpanel 0.1 - //larsjung.de/scrollpanel - MIT License */
(function(a){"use strict";var b=a(window),c="scrollpanel",d={prefix:"sp-"},e=function(b,c){var e=this;e.$el=a(b),e.settings=a.extend({},d,c);var f=e.settings.prefix;e.mouseOffsetY=0,e.updateId=0,e.scrollProxy=a.proxy(e.scroll,e),(!e.$el.css("position")||e.$el.css("position")==="static")&&e.$el.css("position","relative"),e.$scrollbar=a('<div class="'+f+'scrollbar" />'),e.$thumb=a('<div class="'+f+'thumb" />').appendTo(e.$scrollbar),e.$el.addClass(f+"host").wrapInner('<div class="'+f+'viewport"><div class="'+f+'container" /></div>').append(e.$scrollbar),e.$viewport=e.$el.find("> ."+f+"viewport"),e.$container=e.$viewport.find("> ."+f+"container"),e.$el.on("mousewheel",function(a,b,c,d){e.$viewport.scrollTop(e.$viewport.scrollTop()-50*d),e.update(),a.preventDefault(),a.stopPropagation()}).on("scroll",function(){e.update()}),e.$viewport.css({paddingRight:e.$scrollbar.outerWidth(!0),height:e.$el.height(),overflow:"hidden"}),e.$container.css({overflow:"hidden"}),e.$scrollbar.css({position:"absolute",top:0,right:0,overflow:"hidden"}).on("mousedown",function(a){e.mouseOffsetY=e.$thumb.outerHeight()/2,e.onMousedown(a)}).each(function(){e.onselectstart=function(){return!1}}),e.$thumb.css({position:"absolute",left:0,width:"100%"}).on("mousedown",function(a){e.mouseOffsetY=a.pageY-e.$thumb.offset().top,e.onMousedown(a)}),e.update()};a.extend(e.prototype,{update:function(a){var b=this;b.updateId&&!a?(clearInterval(b.updateId),b.updateId=0):!b.updateId&&a&&(b.updateId=setInterval(function(){b.update(!0)},50)),b.$viewport.css("height",b.$el.height());var c=b.$el.height(),d=b.$container.outerHeight(),e=b.$viewport.scrollTop(),f=e/d,g=Math.min(c/d,1),h=b.$scrollbar.height();g<1?(b.$scrollbar.css({height:b.$el.innerHeight()+h-b.$scrollbar.outerHeight(!0)}).fadeIn(50),b.$thumb.css({top:h*f,height:h*g})):b.$scrollbar.fadeOut(50)},scroll:function(a){var b=this,c=(a.pageY-b.$scrollbar.offset().top-b.mouseOffsetY)/b.$scrollbar.height();b.$viewport.scrollTop(b.$container.outerHeight()*c),b.update(),a.preventDefault(),a.stopPropagation()},onMousedown:function(a){var c=this;c.scroll(a),c.$scrollbar.addClass("active"),b.on("mousemove",c.scrollProxy).one("mouseup",function(a){c.$scrollbar.removeClass("active"),b.off("mousemove",c.scrollProxy),c.scroll(a)})}}),a.fn[c]=function(b,d){return this.each(function(){var f=a(this),g=f.data(c);g||(g=new e(this,b),g.update(),f.data(c,g)),b==="update"&&g.update(d)})}})(jQuery)

156
src/_h5ai/js/inc/lib/jquery.scrollpanel.js

@ -1,156 +0,0 @@
/*!
* jQuery.scrollpanel
* author: Lars Jung
* license: MIT
*
* still quick and dirty!
*/
(function (window, $) {
"use strict";
var $window = $(window),
init = function (htmlElement) {
var $element = $(htmlElement),
$scrollbar, $drag, $wrapper, $content, mouseOffsetY, updateId,
update, scroll;
if (!$element.css("position") || $element.css("position") === "static") {
$element.css("position", "relative");
}
$scrollbar = $("<div class='scrollbar' />");
$drag = $("<div class='drag' />").appendTo($scrollbar);
$element
.wrapInner("<div class='wrapper'><div class='content' /></div>")
.append($scrollbar);
$wrapper = $element.find("> .wrapper");
$content = $wrapper.find("> .content");
mouseOffsetY = 0;
update = function (repeat) {
var visibleHeight, contentHeight, scrollTop, scrollTopFrac, visVertFrac;
if (updateId && !repeat) {
clearInterval(updateId);
updateId = undefined;
} else if (!updateId && repeat) {
updateId = setInterval(function() { update(true); }, 50);
}
$wrapper.css("height", $element.height());
visibleHeight = $element.height();
contentHeight = $content.outerHeight();
scrollTop = $wrapper.scrollTop();
scrollTopFrac = scrollTop / contentHeight;
visVertFrac = Math.min(visibleHeight / contentHeight, 1);
if (visVertFrac < 1) {
$scrollbar
.fadeIn(50)
.css({
height: $element.innerHeight() + $scrollbar.height() - $scrollbar.outerHeight(true)
});
$drag
.css({
top: $scrollbar.height() * scrollTopFrac,
height: $scrollbar.height() * visVertFrac
});
} else {
$scrollbar.fadeOut(50);
}
};
scroll = function (event) {
var clickFrac = (event.pageY - $scrollbar.offset().top - mouseOffsetY) / $scrollbar.height();
$wrapper.scrollTop($content.outerHeight() * clickFrac);
update();
event.preventDefault();
};
$element
.on('mousewheel', function (event, delta, deltaX, deltaY) {
$wrapper.scrollTop($wrapper.scrollTop() - 50 * deltaY);
update();
event.stopPropagation();
event.preventDefault();
})
.on('scroll', update);
$element.get(0).updateScrollbar = update;
$wrapper
.css({
"padding-right": $scrollbar.outerWidth(true),
height: $element.height(),
overflow: "hidden"
});
$scrollbar
.css({
position: "absolute",
top: 0,
right: 0,
overflow: "hidden",
cursor: "pointer"
})
.mousedown(function (event) {
mouseOffsetY = $drag.outerHeight() / 2;
scroll(event);
$scrollbar.addClass("dragOn");
$window
.bind("mousemove", scroll)
.one("mouseup", function (event) {
$scrollbar.removeClass("dragOn");
$window.unbind("mousemove", scroll);
scroll(event);
event.stopPropagation();
});
event.preventDefault();
})
.each(function () {
this.onselectstart = function () {
return false;
};
});
$drag
.css({
position: "absolute",
left: 0,
width: "100%"
})
.mousedown(function (event) {
mouseOffsetY = event.pageY - $drag.offset().top;
scroll(event);
$scrollbar.addClass("dragOn");
$window
.bind("mousemove", scroll)
.one("mouseup", function (event) {
$scrollbar.removeClass("dragOn");
$window.unbind("mousemove", scroll);
scroll(event);
event.stopPropagation();
});
event.stopPropagation();
});
update();
};
$.fn.scrollpanel = function () {
return this.each(function () {
init(this);
});
};
}(window, jQuery));

2
src/_h5ai/js/scripts.js

@ -5,7 +5,7 @@
// @include "inc/lib/jquery.fracs-0.11.min.js"
// @include "inc/lib/jquery.mousewheel-3.0.6.js"
// @include "inc/lib/jquery.qrcode.js"
// @include "inc/lib/jquery.scrollpanel.js"
// @include "inc/lib/jquery.scrollpanel-0.1.min.js"
// underscore libs
// ---------------