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

moved more js utils to static

Browse Source
This commit is contained in:
Felix Hamann 2019-02-16 17:13:38 +01:00
parent 515ad0fac7
commit 228aa8320d
19 changed files with 76 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Foundation.hs
View File

@ -1005,17 +1005,15 @@ siteLayout' headingOverride widget = do
addScript $ StaticR js_utils_alerts_js
addScript $ StaticR js_utils_asidenav_js
addScript $ StaticR js_utils_inputs_js
addScript $ StaticR js_utils_showHide_js
addStylesheet $ StaticR css_utils_tabber_scss
addStylesheet $ StaticR css_utils_alerts_scss
addStylesheet $ StaticR css_utils_asidenav_scss
addStylesheet $ StaticR css_utils_showHide_scss
addStylesheet $ StaticR css_utils_tooltip_scss
-- widgets
$(widgetFile "default-layout")
$(widgetFile "standalone/modal")
$(widgetFile "standalone/showHide")
$(widgetFile "standalone/inputs")
$(widgetFile "standalone/tooltip")
$(widgetFile "standalone/tabber")
$(widgetFile "standalone/datepicker")
withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")

4
src/Handler/Utils/Table/Pagination.hs
View File

@ -576,7 +576,7 @@ dbTable PSValidator{..} dbtable@DBTable{ dbtIdent = dbtIdent'@(toPathPiece -> db
, let t' = toPathPiece $ SortingSetting t d
]
wIdent :: Text -> Text
wIdent = toPathPiece . WithIdent dbtIdent
wIdent = toPathPiece . WithIdent dbtIdent
dbsAttrs'
| not $ null dbtIdent = ("id", dbtIdent) : dbsAttrs
| otherwise = dbsAttrs
@ -802,7 +802,7 @@ cellTooltip :: (RenderMessage UniWorX msg, IsDBTable m a) => msg -> DBCell m a -
cellTooltip msg = cellContents.mapped %~ (<> tipWdgt)
where
tipWdgt = [whamlet|
<div .js-tooltip>
<div .tooltip>
<div .tooltip__handle>
<div .tooltip__content>_{msg}
|]

0
templates/standalone/showHide.lucius → static/css/utils/showHide.scss
View File

4
static/css/utils/tabber.scss
View File

@ -17,7 +17,7 @@
text-align: center;
padding: 0 13px;
margin: 0 2px;
background-color: #b3b7c1;
background-color: var(--color-dark);
color: white;
font-size: 16px;
text-transform: uppercase;
@ -35,5 +35,5 @@
.tab-opener.tab-visible {
background-color: transparent;
color: rgb(52, 48, 58);
border-bottom-color: #5F98C2;
border-bottom-color: var(--color-primary);
}

4
templates/standalone/tooltip.lucius → static/css/utils/tooltip.scss
View File

@ -1,4 +1,4 @@
.js-tooltip {
.tooltip {
position: relative;
display: inline-block;
height: 1.5rem;
@ -67,7 +67,7 @@
@media (max-width: 768px) {
.js-tooltip {
.tooltip {
display: block;
margin-top: 10px;

55
static/js/utils/showHide.js Normal file
View File

@ -0,0 +1,55 @@
(function() {
'use strict';
window.utils = window.utils || {};
var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE';
/**
* div
* div.js-show-hide__toggle
* toggle here
* div
* content here
*/
window.utils.showHide = function(wrapper, options) {
function addEventHandler(el) {
el.addEventListener('click', function elClickListener() {
var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
updateLSState(el.dataset.shIndex || null, newState);
});
}
function updateLSState(index, state) {
if (!index) {
return false;
}
var lsData = fromLocalStorage();
lsData[index] = state;
window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData));
}
function collapsedStateInLocalStorage(index) {
return fromLocalStorage()[index] || null;
}
function fromLocalStorage() {
return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {};
}
Array
.from(wrapper.querySelectorAll('.js-show-hide__toggle'))
.forEach(function(el) {
var index = el.dataset.shIndex || null;
el.parentElement.classList.toggle(
'js-show-hide--collapsed',
collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
);
Array.from(el.parentElement.children).forEach(function(el) {
if (!el.classList.contains('js-show-hide__toggle')) {
el.classList.add('js-show-hide__target');
}
});
addEventHandler(el);
});
};
})();

10
templates/standalone/datepicker.julius → templates/default-layout.julius
View File

@ -5,7 +5,7 @@ function setupDatepicker(wrapper) {
dtLocal: {
enableTime: true,
altInput: true,
altFormat: "j. F Y, H:i",
altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
dateFormat: "Y-m-dTH:i",
time_24hr: true
},
@ -36,5 +36,13 @@ function setupDatepicker(wrapper) {
}
document.addEventListener('DOMContentLoaded', function() {
var I18N = {
filesSelected: 'Dateien ausgewählt', // TODO: interpolate these to be translated
selectFile: 'Datei auswählen',
selectFiles: 'Datei(en) auswählen',
};
window.utils.setup('flatpickr', document.body, { setupFunction: setupDatepicker });
window.utils.setup('showHide', document.body);
window.utils.setup('inputs', document.body, { i18n: I18N });
});

2
templates/multiFileField.hamlet
View File

@ -15,6 +15,6 @@ $# new files
<div .file-input__unpack>
<label for=#{fieldId}_zip>ZIPs automatisch entpacken
<input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
<div class="js-tooltip">
<div class="tooltip">
<div class="tooltip__handle">
<div class="tooltip__content">Entpackt hochgeladene Zip-Dateien (*.zip) automatisch und fügt den Inhalt dem Stamm-Verzeichnis der Abgabe hinzu.

2
templates/sheetShow.hamlet
View File

@ -21,7 +21,7 @@ $maybe descr <- sheetDescription sheet
<dd .deflist__dd>_{sheetSubmissionMode sheet}
$case sheetSubmissionMode sheet
$of CorrectorSubmissions
<div .js-tooltip>
<div .tooltip>
<div .tooltip__handle>
<div .tooltip__content>_{MsgSheetCorrectorSubmissionsTip}
$of _

1
templates/standalone/datepicker.hamlet
View File

@ -1 +0,0 @@
<!-- only here to be able to include datepicker using `toWidget` -->

1
templates/standalone/inputs.hamlet
View File

@ -1 +0,0 @@
<!-- only here to be able to include inputs using `toWidget` -->

8
templates/standalone/inputs.julius
View File

@ -1,8 +0,0 @@
document.addEventListener('DOMContentLoaded', function() {
var i18n = {
filesSelected: 'Dateien ausgewählt',
selectFile: 'Datei auswählen',
selectFiles: 'Datei(en) auswählen',
};
window.utils.setup('inputs', document.body, { i18n });
});

1
templates/standalone/showHide.hamlet
View File

@ -1 +0,0 @@
<!-- only here to be able to include showHide using `toWidget` -->

58
templates/standalone/showHide.julius
View File

@ -1,58 +0,0 @@
/**
* div
* div.js-show-hide__toggle
* toggle here
* div
* content here
*/
document.addEventListener('setup', function(e) {
if (e.detail.module && e.detail.module !== 'showHide')
return;
var LSNAME = 'SHOW_HIDE';
function addEventHandler(el) {
el.addEventListener('click', function elClickListener() {
var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
updateLSState(el.dataset.shIndex || null, newState);
});
}
function updateLSState(index, state) {
if (!index) {
return false;
}
var lsData = fromLocalStorage();
lsData[index] = state;
window.localStorage.setItem(LSNAME, JSON.stringify(lsData));
}
function collapsedStateInLocalStorage(index) {
return fromLocalStorage()[index] || null;
}
function fromLocalStorage() {
return JSON.parse(window.localStorage.getItem(LSNAME)) || {};
}
Array
.from(e.detail.scope.querySelectorAll('.js-show-hide__toggle'))
.forEach(function(el) {
var index = el.dataset.shIndex || null;
el.parentElement.classList.toggle(
'js-show-hide--collapsed',
collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
);
Array.from(el.parentElement.children).forEach(function(el) {
if (!el.classList.contains('js-show-hide__toggle')) {
el.classList.add('js-show-hide__target');
}
});
addEventHandler(el);
});
});
document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'showHide' }, bubbles: true, cancelable: true }))
});

1
templates/standalone/tabber.hamlet
View File

@ -1 +0,0 @@
<!-- only here to be able to include tabber using `toWidget` -->

7
templates/standalone/tabber.lucius
View File

@ -1,7 +0,0 @@
.tab-opener {
background-color: var(--color-dark);
&.tab-visible {
border-bottom-color: var(--color-primary);
}
}

1
templates/standalone/tooltip.hamlet
View File

@ -1 +0,0 @@
<!-- only here to be able to include tooltips using `toWidget` -->

67
templates/standalone/tooltip.julius
View File

@ -1,67 +0,0 @@
(function() {;
'use strict';
window.utils = window.utils || {};
window.utils.tooltip = function(tt) {
var handle = tt.querySelector('.tooltip__handle');
var content = tt.querySelector('.tooltip__content');
var left = false;
// initially set content to hidden
content.classList.add('hidden');
handle.addEventListener('mouseenter', function() {
left = false;
content.classList.toggle('to-left', handle.getBoundingClientRect().left + 300 > window.innerWidth);
content.classList.remove('hidden');
});
handle.addEventListener('mouseleave', function() {
left = true;
window.setTimeout(function() {
if (left) {
content.classList.add('hidden');
}
}, 250);
});
};
window.utils.tooltipFromAttribute = function(el) {
var tt = document.createElement('div');
var handle = document.createElement('div');
var content = document.createElement('div');
tt.classList.add('js-tooltip');
handle.classList.add('tooltip__handle');
content.classList.add('tooltip__content', 'hidden');
handle.innerText = '?';
content.innerHTML = el.getAttribute('data-tooltip');
tt.appendChild(handle);
tt.appendChild(content);
if (el.nextSiblingElement) {
el.parentElement.insertBefore(tt, el.nextSiblingElement);
} else {
el.parentElement.appendChild(tt);
}
};
})();
document.addEventListener('setup', function(e) {
// JS-TOOLTIPS NOT USED CURRENTLY.
// initialize tooltips set via `data-tooltip`
// Array.from(e.detail.scope.querySelectorAll('[data-tooltip]')).forEach(function(el) {
// window.utils.tooltipFromAttribute(el)
// });
// initialize tooltips
// Array.from(e.detail.scope.querySelectorAll('.js-tooltip')).forEach(function(tt) {
// window.utils.tooltip(tt);
// });
});

2
templates/widgets/form.hamlet
View File

@ -13,7 +13,7 @@ $case formLayout
<label .form-group__label for=#{fvId view}>
#{fvLabel view}
$maybe tooltip <- fvTooltip view
<div .js-tooltip>
<div .tooltip>
<div .tooltip__handle>
<div .tooltip__content>^{tooltip}
<div .form-group__input>