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

rework show-hide js utility

Browse Source
This commit is contained in:
Felix Hamann 2019-04-04 22:57:53 +02:00
parent ff59d0a412
commit 5e71e8c9e6
9 changed files with 125 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/css/utils/asidenav.scss
View File

@ -55,10 +55,6 @@
.asidenav__box-title {
font-size: 18px;
padding-left: 10px;
&.js-show-hide__toggle::before {
z-index: 1;
}
}
}
}
@ -94,18 +90,9 @@
margin-top: 30px;
background-color: transparent;
transition: all .2s ease;
padding: 30px 13px 10px;
padding: 10px 13px;
margin: 0;
border-bottom: 1px solid var(--color-grey);
&.js-show-hide__toggle {
&::before {
left: auto;
right: 20px;
color: var(--color-font);
}
}
}
/* LOGO */
@ -361,9 +348,5 @@
background-color: var(--color-lightwhite);
}
}
.js-show-hide__toggle::before {
content: none;
}
}
}

24
static/css/utils/showHide.scss
View File

@ -1,10 +1,9 @@
$show-hide-toggle-size: 6px;
.js-show-hide__toggle {
.show-hide__toggle {
position: relative;
cursor: pointer;
padding: 3px 7px;
&:hover {
background-color: var(--color-grey-lighter);
@ -12,32 +11,33 @@ $show-hide-toggle-size: 6px;
}
}
.js-show-hide__toggle::before {
.show-hide__toggle::before {
content: '';
position: absolute;
width: $show-hide-toggle-size;
height: $show-hide-toggle-size;
left: -15px;
top: 12px - $show-hide-toggle-size / 2;
top: 50%;
color: var(--color-primary);
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transition: transform .2s ease;
transform-origin: ($show-hide-toggle-size / 2);
transform: translateY($show-hide-toggle-size) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
}
.js-show-hide__target {
transition: all .2s ease;
.show-hide__toggle--right::before {
left: auto;
right: 20px;
color: var(--color-font);
}
.js-show-hide--collapsed {
.show-hide--collapsed {
.js-show-hide__toggle::before {
transform: translateY($show-hide-toggle-size / 3) rotate(135deg);
.show-hide__toggle::before {
transform: translateY(-50%) rotate(135deg);
}
.js-show-hide__target {
:not(.show-hide__toggle) {
display: block;
height: 0;
margin: 0;

16
static/js/utils/modal.js
View File

@ -2,6 +2,20 @@
'use strict';
window.utils = window.utils || {};
// ########################
// TODO: make use of selector
// or think of a different way to dynamically initialize widgets
// with selectors with specific ids like #modal-hident69
//
// Idee:
// Alles wegschmeißen zu dynamischen IDs. Util init rein über Selector '[uw-...]'
// bedarf Änderung in Templates.
// Ausserdem müssen sich Utils bei Event 'util-setup-ready' registrieren als Util
// utils.setup wird dann überflüssig, bzw. wird zu einer Registry / Controller
// der die utils bei DomCOntentLoaded intialisiert.
//
// ########################
var SELECTOR = '[uw-modal]';
var JS_INITIALIZED_CLASS = 'js-modal-initialized';
var MODAL_OPEN_CLASS = 'modal--open';
@ -17,7 +31,7 @@
var OVERLAY_OPEN_CLASS = 'modal__overlay--open';
var CLOSER_CLASS = 'modal__closer';
window.utils.modal = function(modalElement, options) {
window.utils.modal = function(scope, options) {
if (!modalElement || modalElement.classList.contains(JS_INITIALIZED_CLASS)) {
return;

9
static/js/utils/registry.js
View File

@ -55,7 +55,14 @@
const elements = _findUtilElements(util, scope);
elements.forEach(function(element) {
var utilInstance = util.setup(element);
var utilInstance = null;
try {
utilInstance = util.setup(element);
} catch(err) {
console.warn('Error while trying to initialize a utility!', { util , element, err });
}
if (utilInstance) {
activeUtilInstances.push(utilInstance);
}

145
static/js/utils/showHide.js
View File

@ -1,98 +1,113 @@
(function() {
'use strict';
var UTIL_NAME = 'showHide';
var UTIL_SELECTOR = '[uw-show-hide]';
var SHOW_HIDE_UTIL_NAME = 'showHide';
var SHOW_HIDE_UTIL_SELECTOR = '[uw-show-hide]';
var JS_INITIALIZED_CLASS = 'js-show-hide-initialized';
var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE';
var SHOW_HIDE_COLLAPSED_CLASS = 'js-show-hide--collapsed';
var SHOW_HIDE_TARGET_CLASS = 'js-show-hide__target';
var SHOW_HIDE_LOCAL_STORAGE_KEY = 'SHOW_HIDE';
var SHOW_HIDE_INITIALIZED_CLASS = 'show-hide--initialized';
var SHOW_HIDE_COLLAPSED_CLASS = 'show-hide--collapsed';
var SHOW_HIDE_TOGGLE_CLASS = 'show-hide__toggle';
var SHOW_HIDE_TOGGLE_RIGHT_CLASS = 'show-hide__toggle--right';
/**
*
* ShowHide Utility
*
* Attribute: uw-show-hide
*
* Params: (all optional)
* data-show-hide-id: string
* If this param is given the state of the utility will be persisted in the clients local storage.
* data-show-hide-collapsed: boolean property
* If this param is present the ShowHide utility will be collapsed. This value will be overruled by any value stored in the LocalStorage.
* data-show-hide-align: 'right'
* Where to put the arrow that marks the element as a ShowHide toggle. Left of toggle by default.
*
* Example usage:
* <div>
* <div uw-show-hide>
* [toggle here]
* <div>
* [content here]
* <div uw-show-hide>Click me
* <div>This will be toggled
* <div>This will be toggled as well
*/
var util = function(element) {
var showHideUtil = function(element) {
function _init() {
var showHideId;
function init() {
if (!element) {
throw new Error('ShowHide utility cannot be setup without an element!');
}
if (element.classList.contains(JS_INITIALIZED_CLASS)) {
return false;
if (element.classList.contains(SHOW_HIDE_INITIALIZED_CLASS)) {
throw new Error('ShowHide utility already initialized!');
}
_addEventHandler();
// register click listener
addClickListener();
// param showHideId
if (element.dataset.showHideId) {
showHideId = element.dataset.showHideId;
}
// param showHideCollapsed
var collapsed = false;
if (element.dataset.showHideCollapsed !== undefined) {
collapsed = true;
}
if (showHideId) {
var localStorageCollapsed = getLocalStorage()[showHideId];
if (typeof localStorageCollapsed !== 'undefined') {
collapsed = localStorageCollapsed;
}
}
element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, collapsed);
// param showHideAlign
var alignment = element.dataset.showHideAlign;
if (alignment === 'right') {
element.classList.add(SHOW_HIDE_TOGGLE_RIGHT_CLASS);
}
// mark as initialized
element.classList.add(SHOW_HIDE_INITIALIZED_CLASS, SHOW_HIDE_TOGGLE_CLASS);
return {
name: SHOW_HIDE_UTIL_NAME,
element: element,
destroy: function() {},
};
}
function _addEventHandler() {
function addClickListener() {
element.addEventListener('click', function clickListener() {
console.log('showhide clicked');
var newState = element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
_updateLSState(element.dataset.shIndex || null, newState);
if (showHideId) {
setLocalStorage(showHideId, newState);
}
});
}
function _updateLSState(index, state) {
if (!index) {
return false;
}
var lsData = _getLocalStorageData();
lsData[index] = state;
window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData));
function setLocalStorage(id, state) {
var lsData = getLocalStorage();
lsData[id] = state;
window.localStorage.setItem(SHOW_HIDE_LOCAL_STORAGE_KEY, JSON.stringify(lsData));
}
// function _getCollapsedLSState(index) {
// var lsState = _getLocalStorageData();
// return lsState[index];
// }
function _getLocalStorageData() {
return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {};
function getLocalStorage() {
return JSON.parse(window.localStorage.getItem(SHOW_HIDE_LOCAL_STORAGE_KEY)) || {};
}
// var showHides = Array.from(scope.querySelectorAll(UTIL_SELECTOR));
// showHides.forEach(function(el) {
// if (el.classList.contains(JS_INITIALIZED_CLASS)) {
// return false;
// }
// var index = el.dataset.shIndex || null;
// var isCollapsed = el.dataset.collapsed === 'true';
// var lsCollapsedState = _getCollapsedLSState(index);
// if (typeof lsCollapsedState !== 'undefined') {
// isCollapsed = lsCollapsedState;
// }
// el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, isCollapsed);
// Array.from(el.parentElement.children).forEach(function(el) {
// if (!el.matches(UTIL_SELECTOR)) {
// el.classList.add(SHOW_HIDE_TARGET_CLASS);
// }
// });
// el.classList.add(JS_INITIALIZED_CLASS);
// _addEventHandler(el);
// });
_init();
return {
name: UTIL_NAME,
element: element,
destroy: function() {},
};
return init();
};
if (UtilRegistry) {
UtilRegistry.register({
name: UTIL_NAME,
selector: UTIL_SELECTOR,
setup: util
name: SHOW_HIDE_UTIL_NAME,
selector: SHOW_HIDE_UTIL_SELECTOR,
setup: showHideUtil
});
}

2
templates/adminTest.hamlet
View File

@ -6,7 +6,7 @@
Der Handler sollte jeweils aktuelle Beispiele für alle möglichen Funktionalitäten enthalten, so dass man immer weiß, wo man nachschlagen kann.
<section>
<h2 .js-show-hide__toggle>Teilweise funktionierende Abschnitte
<h2 uw-show-hide>Teilweise funktionierende Abschnitte
<ul>
<li .list-group-item>

2
templates/table/layout-filter-default.hamlet
View File

@ -1,6 +1,6 @@
$newline never
<div .table-filter>
<h3 .js-show-hide__toggle data-sh-index=table-filter data-collapsed=true>Filter
<h3 .table-filter__toggle uw-show-hide data-show-hide-id=table-filter data-show-hide-collapsed>Filter
<div>
^{filterForm}
^{scrolltable}

4
templates/table/layout-filter-default.lucius
View File

@ -1,3 +1,7 @@
.table-filter {
margin-bottom: 13px;
}
.table-filter__toggle {
padding: 3px 7px;
}

6
templates/widgets/asidenav/asidenav.hamlet
View File

@ -7,10 +7,10 @@ $newline never
<div .asidenav>
$forall tid <- favouriteTerms
<div .asidenav__box.js-show-hide>
<h3 .asidenav__box-title.js-show-hide__toggle data-sh-index="#{termToText tid}">
<div .asidenav__box>
<h3 .asidenav__box-title uw-show-hide data-show-hide-id="#{termToText tid}" data-show-hide-align=right>
_{ShortTermIdentifier tid}
<ul .asidenav__list.js-show-hide__target.list--iconless>
<ul .asidenav__list.list--iconless>
$forall (Course{courseShorthand, courseName}, courseRoute, pageActions) <- favouriteTerm tid
<li .asidenav__list-item :highlight courseRoute:.asidenav__list-item--active>
<a .asidenav__link-wrapper href=@{courseRoute}>