diff --git a/static/css/utils/asidenav.scss b/static/css/utils/asidenav.scss index 1ac580d58..101bf5506 100644 --- a/static/css/utils/asidenav.scss +++ b/static/css/utils/asidenav.scss @@ -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; - } } } diff --git a/static/css/utils/showHide.scss b/static/css/utils/showHide.scss index ab82286b8..1f85fbf36 100644 --- a/static/css/utils/showHide.scss +++ b/static/css/utils/showHide.scss @@ -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; diff --git a/static/js/utils/modal.js b/static/js/utils/modal.js index a5971edf7..50307f3db 100644 --- a/static/js/utils/modal.js +++ b/static/js/utils/modal.js @@ -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; diff --git a/static/js/utils/registry.js b/static/js/utils/registry.js index 775b58fe4..9acff588d 100644 --- a/static/js/utils/registry.js +++ b/static/js/utils/registry.js @@ -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); } diff --git a/static/js/utils/showHide.js b/static/js/utils/showHide.js index 6689b83bd..cd3a6e4ac 100644 --- a/static/js/utils/showHide.js +++ b/static/js/utils/showHide.js @@ -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: *
- *
- * [toggle here] - *
- * [content here] + *
Click me + *
This will be toggled + *
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 }); } diff --git a/templates/adminTest.hamlet b/templates/adminTest.hamlet index 7e59d9599..b595fe813 100644 --- a/templates/adminTest.hamlet +++ b/templates/adminTest.hamlet @@ -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.
-

Teilweise funktionierende Abschnitte +

Teilweise funktionierende Abschnitte
  • diff --git a/templates/table/layout-filter-default.hamlet b/templates/table/layout-filter-default.hamlet index 2cd414694..7a87d28a1 100644 --- a/templates/table/layout-filter-default.hamlet +++ b/templates/table/layout-filter-default.hamlet @@ -1,6 +1,6 @@ $newline never
    -

    Filter +

    Filter
    ^{filterForm} ^{scrolltable} diff --git a/templates/table/layout-filter-default.lucius b/templates/table/layout-filter-default.lucius index e2baee73a..7c1d3ab14 100644 --- a/templates/table/layout-filter-default.lucius +++ b/templates/table/layout-filter-default.lucius @@ -1,3 +1,7 @@ .table-filter { margin-bottom: 13px; } + +.table-filter__toggle { + padding: 3px 7px; +} diff --git a/templates/widgets/asidenav/asidenav.hamlet b/templates/widgets/asidenav/asidenav.hamlet index 8090926d1..6bbcb159c 100644 --- a/templates/widgets/asidenav/asidenav.hamlet +++ b/templates/widgets/asidenav/asidenav.hamlet @@ -7,10 +7,10 @@ $newline never
    $forall tid <- favouriteTerms -
    -

    +
    +

    _{ShortTermIdentifier tid} -
      +
        $forall (Course{courseShorthand, courseName}, courseRoute, pageActions) <- favouriteTerm tid