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

View File

@ -1400,18 +1400,39 @@ div.crumb {
height: 44px; height: 44px;
background-size: auto 24px; background-size: auto 24px;
flex: 0 0 auto; 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 { &.hidden {
display: none; display: none;
~ .crumb {
order: 3;
}
} }
a, > a,
> span { > span {
position: relative; position: relative;
padding: 12px 24px 12px 17px; padding: 12px 24px 12px 17px;
color: nc-lighten($color-main-text, 33%); opacity: 0.5;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
> a[class^='icon-'] {
padding: 0;
width: 44px;
margin-right: 7px;
}
&:not(:first-child) a { &:not(:first-child) a {
} }
&:last-child { &:last-child {
@ -1422,7 +1443,10 @@ div.crumb {
} }
} }
&:hover, &:focus, a:focus, &:active { &:hover, &:focus, a:focus, &:active {
opacity: .7; > a,
> span {
opacity: .7;
}
} }
} }

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