Popover init

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-11-04 13:02:15 +01:00
parent 6ee75e16af
commit 1786784d12
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
3 changed files with 76 additions and 11 deletions

View File

@ -33,6 +33,7 @@
*/
var BreadCrumb = function(options){
this.$el = $('<div class="breadcrumb"></div>');
this.$menu = $('<div class="popovermenu menu-center open"><ul></ul></div>');
options = options || {};
if (options.onClick) {
this.onClick = options.onClick;
@ -73,6 +74,8 @@
* @param dir path to be displayed as breadcrumb
*/
setDirectory: function(dir) {
var err = new Error();
console.log(err.stack);
dir = dir.replace(/\\/g, '/');
dir = dir || '/';
if (dir !== this.dir) {
@ -118,11 +121,18 @@
for (var i = 0; i < parts.length; i++) {
var part = parts[i];
var $image;
var $link = $('<a></a>').attr('href', this.getCrumbUrl(part, i));
var $link = $('<a></a>');
if(part.dir) {
$link.attr('href', this.getCrumbUrl(part, i));
}
if(part.name) {
$link.text(part.name);
}
$link.addClass(part.linkclass);
$crumb = $('<div class="crumb svg"></div>');
$crumb.append($link);
$crumb.attr('data-dir', part.dir);
$crumb.addClass(part.class);
if (part.img) {
$image = $('<img class="svg"></img>');
@ -159,6 +169,8 @@
hoverClass: 'canDrop'
});
}
this._createMenu();
this._resize();
},
@ -180,9 +192,12 @@
// root part
crumbs.push({
dir: '/',
name: '',
alt: t('files', 'Home'),
img: OC.imagePath('core', 'places/home.svg')
linkclass: 'icon-home'
});
// menu part
crumbs.push({
class: 'crumbmenu',
linkclass: 'icon-more'
});
for (var i = 0; i < parts.length; i++) {
var part = parts[i];
@ -199,10 +214,11 @@
* Hide the middle crumb
*/
_hideCrumb: function() {
var length = this.$el.find('.crumb:not(.hidden)').length;
var selector = '.crumb:not(.hidden):not(.crumbmenu)';
var length = this.$el.find(selector).length;
// Get the middle one floored down
var elmt = Math.floor(length / 2 - 0.5);
this.$el.find('.crumb:not(.hidden):eq('+elmt+')').addClass('hidden');
this.$el.find(selector+':eq('+elmt+')').addClass('hidden');
},
/**
@ -225,6 +241,30 @@
this._getCrumbElement().removeClass('hidden');
},
/**
* Create and append the popovermenu
*/
_createMenu: function() {
this.$el.find('.crumbmenu').append(this.$menu);
},
/**
* Update the popovermenu
*/
_updateMenu: function() {
var menuItems = this.$el.children('.crumb.hidden').clone();
// Hide the crumb menu if no elements
this.$el.find('.crumbmenu').toggleClass('hidden', menuItems.length===0)
this.$menu.children('ul').html(menuItems);
this.$menu.find('div').replaceWith(function(){
return $('<li/>', {
html: this.innerHTML
})
});
this.$menu.find('a').addClass('icon-triangle-e').wrapInner('<span/>');
},
_resize: function() {
var i, $crumb, $ellipsisCrumb;
@ -247,6 +287,7 @@
this._showCrumb();
}
this._updateMenu();
}
};

View File

@ -1400,18 +1400,39 @@ div.crumb {
height: 44px;
background-size: auto 24px;
flex: 0 0 auto;
order: 1;
&.crumbmenu {
order: 2;
position: relative;
a {
opacity: 0.5
}
// Fix because of the display flex
.popovermenu {
top: 100%;
margin-right: 3px;
}
}
&.hidden {
display: none;
~ .crumb {
order: 3;
}
a,
}
> a,
> span {
position: relative;
padding: 12px 24px 12px 17px;
color: nc-lighten($color-main-text, 33%);
opacity: 0.5;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
> a[class^='icon-'] {
padding: 0;
width: 44px;
margin-right: 7px;
}
&:not(:first-child) a {
}
&:last-child {
@ -1422,9 +1443,12 @@ div.crumb {
}
}
&:hover, &:focus, a:focus, &:active {
> a,
> span {
opacity: .7;
}
}
}
/* some feedback for hover/tap on breadcrumbs */

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path color="#000" fill="none" d="M-62.897-32.993h163.31v97.986h-163.31z"/><path opacity=".5" d="M8 1.03L0 9h3v6h10V9h3l-3-3.03V2h-3v1.08L8 1.03z" fill-rule="evenodd"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path color="#000" fill="none" d="M-62.897-32.993h163.31v97.986h-163.31z"/><path d="M8 1.03L0 9h3v6h10V9h3l-3-3.03V2h-3v1.08L8 1.03z" fill-rule="evenodd"/></svg>

Before

Width:  |  Height:  |  Size: 249 B

After

Width:  |  Height:  |  Size: 236 B