Popover init
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
6ee75e16af
commit
1786784d12
|
@ -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();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 |
Loading…
Reference in New Issue