fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hide-columns): more (broken) styling; move hider elements in DOM

Browse Source
This commit is contained in:
Sarah Vaupel 2019-11-28 12:33:44 +01:00 committed by Gregor Kleen
parent a9c17d75fe
commit e655bc6e70
2 changed files with 85 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/src/utils/hide-columns/hide-columns.js
View File

@ -8,7 +8,13 @@ const TABLE_HEADER_IDENT = 'uw-hide-column-header';
const TABLE_UTILS_ATTR = 'table-utils'; const TABLE_UTILS_ATTR = 'table-utils';
const TABLE_UTILS_CONTAINER_SELECTOR = `[${TABLE_UTILS_ATTR}]`; const TABLE_UTILS_CONTAINER_SELECTOR = `[${TABLE_UTILS_ATTR}]`;
const HIDE_BUTTON_FADE_DELAY = 3000; const TABLE_HIDER_CONTAINER_CLASS = 'table-hiders';
const HIDER_HIDE_CLASS = 'table-pill--hide';
const HIDER_HIDDEN_CLASS = 'table-pill--hidden';
const HIDER_FLOATING_CLASS = 'table-pill--floating';
const CELL_HIDDEN_CLASS = 'hide-columns--hidden-cell';
@Utility({ @Utility({
selector: `[${HIDE_COLUMNS_CONTAINER_IDENT}] table`, selector: `[${HIDE_COLUMNS_CONTAINER_IDENT}] table`,
@ -20,6 +26,7 @@ export class HideColumns {
_element; _element;
_elementWrapper; _elementWrapper;
_tableUtilContainer; _tableUtilContainer;
_tableHiderContainer;
headerToHider = new Map(); headerToHider = new Map();
hiderToHeader = new Map(); hiderToHeader = new Map();
@ -56,6 +63,14 @@ export class HideColumns {
hideColumnsContainer.insertBefore(this._tableUtilContainer, tableContainer); hideColumnsContainer.insertBefore(this._tableUtilContainer, tableContainer);
} }
// get or create table hider container before the table
this._tableHiderContainer = this._element.previousSibling;
if (!this._tableHiderContainer || !this._tableHiderContainer.classList.contains(TABLE_HIDER_CONTAINER_CLASS)) {
this._tableHiderContainer = document.createElement('div');
this._tableHiderContainer.classList.add(TABLE_HIDER_CONTAINER_CLASS);
this._element.parentElement.insertBefore(this._tableHiderContainer, this._element);
}
this._element.querySelectorAll('th').forEach(th => { this._element.querySelectorAll('th').forEach(th => {
const storageKey = this.getStorageKey(th); const storageKey = this.getStorageKey(th);
const previouslyHidden = this._storageManager.load(storageKey); const previouslyHidden = this._storageManager.load(storageKey);
@ -63,17 +78,42 @@ export class HideColumns {
}); });
} }
hideHiderBehindHeader(hider) {
const th = this.hiderToHeader.get(hider);
// move hider right before table (inside any scrolltable element)
this._tableHiderContainer.appendChild(hider);
// reposition hider
const posTH = th.getBoundingClientRect();
const posH = hider.getBoundingClientRect();
// TODO move to aux function
let p = {
top: posTH.top,
left: posTH.left,
width: th.offsetWidth || 0,
height: th.offsetHeight || 0,
};
const hiderCompStyle = window.getComputedStyle(hider);
const x = parseInt(hiderCompStyle.marginLeft) + parseInt(hiderCompStyle.marginRight);
const y = parseInt(hiderCompStyle.marginTop) + parseInt(hiderCompStyle.marginBottom);
const posHParent = hider.parentElement.getBoundingClientRect();
p.top += -posHParent.top + hider.parentElement.scrollTop + hider.parentElement.offsetTop;
p.left += -posHParent.left - hider.parentElement.scrollLeft + hider.parentElement.offsetLeft;
hider.style.left = (p.left + (p.width/2) - (posH.width/2 + x)) + 'px';
hider.style.top = (p.top - (hider.offsetHeight + y)) + 'px';
}
setupHideButton(th, prevHidden) { setupHideButton(th, prevHidden) {
const hider = document.createElement('span'); const hider = document.createElement('span');
hider.classList.add('table-pill');
const hiderIcon = document.createElement('i'); const hiderIcon = document.createElement('i');
hiderIcon.classList.add('fas', 'fa-fw'); hiderIcon.classList.add('fas', 'fa-fw');
hider.appendChild(hiderIcon); hider.appendChild(hiderIcon);
const hiderContent = document.createElement('span'); const hiderContent = document.createElement('span');
hiderContent.classList.add('table-pill__content'); hiderContent.classList.add('table-hider__label');
hiderContent.innerHTML = th.innerText; hiderContent.innerHTML = th.innerText;
hider.appendChild(hiderContent); hider.appendChild(hiderContent);
this.addHeaderHider(th, hider);
hider.addEventListener('click', (event) => { hider.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
this.switchColumnDisplay(th, hider); this.switchColumnDisplay(th, hider);
@ -81,18 +121,13 @@ export class HideColumns {
// TODO fade in / fade out animation in css // TODO fade in / fade out animation in css
th.addEventListener('mouseover', () => { th.addEventListener('mouseover', () => {
hider.classList.remove('table-pill--hidden'); // hider.classList.remove(HIDER_HIDDEN_CLASS);
const posTH = th.getBoundingClientRect();
const posH = hider.getBoundingClientRect();
hider.style.left = (posTH.left + ((posTH.right-posTH.left)/2 - ((posH.right-posH.left)/2))) + 'px';
hider.style.top = (posTH.top - 50) + 'px';
}); });
th.addEventListener('mouseout', () => { th.addEventListener('mouseout', (event) => {
setTimeout(() => { console.log('th mouseout', event);
if (hider.classList.contains('table-pill--floating')) { if (hider.classList.contains(HIDER_FLOATING_CLASS)) {
hider.classList.add('table-pill--hidden'); hider.classList.add(HIDER_HIDE_CLASS);
} }
}, HIDE_BUTTON_FADE_DELAY);
}); });
hider.addEventListener('mouseover', () => { hider.addEventListener('mouseover', () => {
@ -107,9 +142,12 @@ export class HideColumns {
this.updateColumnDisplay(th.cellIndex, prevHidden); this.updateColumnDisplay(th.cellIndex, prevHidden);
this.updateHider(hider, prevHidden); this.updateHider(hider, prevHidden);
this.addHeaderHider(th, hider); if (prevHidden) {
this._tableUtilContainer.appendChild(hider);
} else {
this.hideHiderBehindHeader(hider);
}
this._tableUtilContainer.appendChild(hider);
} }
switchColumnDisplay(th, hider) { switchColumnDisplay(th, hider) {
@ -129,9 +167,9 @@ export class HideColumns {
const cell = row.cells[columnIndex]; const cell = row.cells[columnIndex];
if (cell) { if (cell) {
if (hidden) { if (hidden) {
cell.classList.add('hide-columns--hidden-cell'); cell.classList.add(CELL_HIDDEN_CLASS);
} else { } else {
cell.classList.remove('hide-columns--hidden-cell'); cell.classList.remove(CELL_HIDDEN_CLASS);
} }
} }
}); });
@ -139,9 +177,13 @@ export class HideColumns {
updateHider(hider, hidden) { updateHider(hider, hidden) {
if (hidden) { if (hidden) {
hider.classList.remove('table-pill--hidden', 'table-pill--floating'); this._tableUtilContainer.appendChild(hider);
hider.classList.remove(HIDER_HIDDEN_CLASS, HIDER_FLOATING_CLASS, 'table-hider');
hider.classList.add('table-pill');
} else { } else {
hider.classList.add('table-pill--hidden', 'table-pill--floating');
hider.classList.remove('table-pill');
hider.classList.add(HIDER_HIDDEN_CLASS, HIDER_FLOATING_CLASS, 'table-hider');
} }
this.updateHiderIcon(hider, hidden); this.updateHiderIcon(hider, hidden);
} }

44
frontend/src/utils/hide-columns/hide-columns.scss
View File

@ -2,6 +2,21 @@
margin-bottom: 20px; margin-bottom: 20px;
line-height: 1.4; line-height: 1.4;
max-width: 85vw; max-width: 85vw;
}
.table-hider {
background-color: #fff;
color: var(--color-link);
padding: 10px;
cursor: pointer;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
margin: 10px 10px 0 0;
position: absolute;
.table-hider__label {
display: none;
}
}
.table-pill { .table-pill {
background-color: var(--color-dark); background-color: var(--color-dark);
@ -14,40 +29,27 @@
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
.table-pill__content { .table-hider__label {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-left: 5px; margin-left: 5px;
} }
} }
.table-pill.table-pill--hidden {
animation: fadeout 2s ease-in alternate infinite;
display: none;
}
.table-pill.table-pill--floating {
position: fixed;
.table-pill__content { display: none; }
}
.table-pill.table-pill--hide { .table-pill.table-pill--hide {
padding-left: 10px; /* -webkit-animation: fadeout 0.5s linear forwards; */
/* animation: fadeout 0.5s linear forwards; */
/* animation-delay: 2s; */
} }
.table-pill--unhide {
padding-left: 10px;
}
}
.hide-columns--hidden-cell { .hide-columns--hidden-cell {
display: none; display: none;
} }
@keyframes fadeout { @keyframes fadeout {
from: { opacity: 1; } 0% { opacity: 1; }
to: { opacity: 0; display: none; } 100% { opacity: 0; }
} }
@keyframes fadein { @keyframes fadein {
from: { opacity: 0; } 0% { opacity: 0; }
to: { opacity: 1; } 100% { opacity: 1; }
} }