diff --git a/src/_h5ai/css/inc/l10n.less b/src/_h5ai/css/inc/l10n.less index c47f9746..730e1e67 100644 --- a/src/_h5ai/css/inc/l10n.less +++ b/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); } } diff --git a/src/_h5ai/css/inc/tree.less b/src/_h5ai/css/inc/tree.less index 1462593b..f310ebac 100644 --- a/src/_h5ai/css/inc/tree.less +++ b/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); } } diff --git a/src/_h5ai/js/inc/ext/l10n.js b/src/_h5ai/js/inc/ext/l10n.js index e384025a..5598f41e 100644 --- a/src/_h5ai/js/inc/ext/l10n.js +++ b/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 diff --git a/src/_h5ai/js/inc/ext/tree.js b/src/_h5ai/js/inc/ext/tree.js index 94e9a9a6..8295ebd5 100644 --- a/src/_h5ai/js/inc/ext/tree.js +++ b/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 diff --git a/src/_h5ai/js/inc/lib/jquery.scrollpanel-0.1.min.js b/src/_h5ai/js/inc/lib/jquery.scrollpanel-0.1.min.js new file mode 100644 index 00000000..c7cf6768 --- /dev/null +++ b/src/_h5ai/js/inc/lib/jquery.scrollpanel-0.1.min.js @@ -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('
'),e.$thumb=a('
').appendTo(e.$scrollbar),e.$el.addClass(f+"host").wrapInner('
').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) \ No newline at end of file diff --git a/src/_h5ai/js/inc/lib/jquery.scrollpanel.js b/src/_h5ai/js/inc/lib/jquery.scrollpanel.js deleted file mode 100644 index f0d074bd..00000000 --- a/src/_h5ai/js/inc/lib/jquery.scrollpanel.js +++ /dev/null @@ -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 = $("
"); - $drag = $("
").appendTo($scrollbar); - $element - .wrapInner("
") - .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)); diff --git a/src/_h5ai/js/scripts.js b/src/_h5ai/js/scripts.js index 43c1c6e4..c1edc8f2 100644 --- a/src/_h5ai/js/scripts.js +++ b/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 // ---------------