flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added better browse scroll handling...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-11-27 00:02:46 +03:00
parent cdb1507c01
commit 1597b7eb1f
2 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui (gen4)/css/widget/browse.css
View File

@ -17,10 +17,14 @@
} }
*/ */
.browse-widget .v-block { .browse-widget .v-block {
position: relative;
width: 100%; width: 100%;
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
} }
.browse-widget .v-block:not(:first-of-type) { .browse-widget .v-block:not(:first-of-type) {
border-top: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.3);
@ -41,6 +45,8 @@
/************************************************************ Path ***/ /************************************************************ Path ***/
.browse-widget .path { .browse-widget .path {
position: relative;
padding: 5px; padding: 5px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@ -56,6 +62,29 @@
max-width: 80vh; max-width: 80vh;
overflow: auto; overflow: auto;
} }
/* path scroll shadow... */
.browse-widget .path:not(:hover).scrolling {
mix-blend-mode: overlay;
}
.browse-widget .path:not(:hover).scrolling:after {
position: fixed;
content: " ";
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.browse-widget .path:not(:hover).scrolling.left:not(.right):after {
background: linear-gradient(90deg, gray, transparent 15%);
}
.browse-widget .path:not(:hover).scrolling.right:not(.left):after {
background: linear-gradient(90deg, transparent 85%, gray);
}
.browse-widget .path:not(:hover).scrolling.left.right:after {
background: linear-gradient(90deg, gray, transparent 15%, transparent 85%, gray);
}
/* XXX not sure about this... */ /* XXX not sure about this... */
.browse-widget .path::-webkit-scrollbar { .browse-widget .path::-webkit-scrollbar {
width: 5px; width: 5px;

38
ui (gen4)/lib/widget/browse.js
View File

@ -840,7 +840,29 @@ var BrowserPrototype = {
var l = browser.find('.list').empty() var l = browser.find('.list').empty()
// set the path prefix... // set the path prefix...
p.attr('prefix', this.options.pathPrefix) p
.attr('prefix', this.options.pathPrefix)
.scroll(function(){
// handle path scroll..
if(p[0].offsetWidth < p[0].scrollWidth){
// scroll all the way to the right...
p.addClass('scrolling')
// left out of view...
p[0].scrollLeft > 0 ?
p.addClass('left')
: p.removeClass('left')
// right out of view...
p[0].scrollLeft + p[0].offsetWidth + 5 <= p[0].scrollWidth ?
p.addClass('right')
: p.removeClass('right')
// keep left aligned...
} else {
p.removeClass('scrolling')
}
})
var c = [] var c = []
// fill the path field... // fill the path field...
@ -889,9 +911,8 @@ var BrowserPrototype = {
// handle path scroll.. // handle path scroll..
var e = p.children().last()
// scroll to the end when wider than view... // scroll to the end when wider than view...
if(e.length > 0 && p.width() < p[0].scrollWidth){ if(p[0].offsetWidth < p[0].scrollWidth){
// scroll all the way to the right... // scroll all the way to the right...
p.scrollLeft(p[0].scrollWidth) p.scrollLeft(p[0].scrollWidth)
@ -1653,6 +1674,17 @@ var BrowserPrototype = {
this.trigger('select', elem) this.trigger('select', elem)
// handle path scroll -- scroll to the end when wider than view...
var p = browser.find('.path')
if(p[0].offsetWidth < p[0].scrollWidth){
// scroll all the way to the right...
p.scrollLeft(p[0].scrollWidth)
// keep left aligned...
} else {
p.scrollLeft(0)
}
return elem return elem
} }