move js utils to static/es and fix linting warnings
This commit is contained in:
Felix Hamann
parent
f6c0ddf45c
commit
b7af8249d7
212
static/es/utils/alerts.js
Normal file
212
static/es/utils/alerts.js
Normal file
@ -0,0 +1,212 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
*
|
||||
* Alerts Utility
|
||||
* makes alerts interactive
|
||||
*
|
||||
* Attribute: uw-alerts
|
||||
*
|
||||
* Types of alerts:
|
||||
* [default]
|
||||
* Regular Info Alert
|
||||
* Disappears automatically after 30 seconds
|
||||
* Disappears after x seconds if explicitly specified via data-decay='x'
|
||||
* Can be told not to disappear with data-decay='0'
|
||||
*
|
||||
* [success]
|
||||
* Currently no special visual appearance
|
||||
* Disappears automatically after 30 seconds
|
||||
*
|
||||
* [warning]
|
||||
* Will be coloured warning-orange regardless of user's selected theme
|
||||
* Does not disappear
|
||||
*
|
||||
* [error]
|
||||
* Will be coloured error-red regardless of user's selected theme
|
||||
* Does not disappear
|
||||
*
|
||||
* Example usage:
|
||||
* <div .alerts uw-alerts>
|
||||
* <div .alerts__toggler>
|
||||
* <div .alert.alert-info>
|
||||
* <div .alert__closer>
|
||||
* <div .alert__icon>
|
||||
* <div .alert__content>
|
||||
* This is some information
|
||||
*
|
||||
*/
|
||||
|
||||
var ALERTS_UTIL_NAME = 'alerts';
|
||||
var ALERTS_UTIL_SELECTOR = '[uw-alerts]';
|
||||
|
||||
var ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
|
||||
var ALERTS_ELEVATED_CLASS = 'alerts--elevated';
|
||||
var ALERTS_TOGGLER_CLASS = 'alerts__toggler';
|
||||
var ALERTS_TOGGLER_VISIBLE_CLASS = 'alerts__toggler--visible';
|
||||
var ALERTS_TOGGLER_APPEAR_DELAY = 120;
|
||||
|
||||
var ALERT_CLASS = 'alert';
|
||||
var ALERT_INITIALIZED_CLASS = 'alert--initialized';
|
||||
var ALERT_CLOSER_CLASS = 'alert__closer';
|
||||
var ALERT_ICON_CLASS = 'alert__icon';
|
||||
var ALERT_CONTENT_CLASS = 'alert__content';
|
||||
var ALERT_INVISIBLE_CLASS = 'alert--invisible';
|
||||
var ALERT_AUTO_HIDE_DELAY = 10;
|
||||
var ALERT_AUTOCLOSING_MATCHER = '.alert-info, .alert-success';
|
||||
|
||||
var alertsUtil = function(element) {
|
||||
var togglerCheckRequested = false;
|
||||
var togglerElement;
|
||||
var alertElements;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Alerts util has to be called with an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(ALERTS_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
togglerElement = element.querySelector('.' + ALERTS_TOGGLER_CLASS);
|
||||
alertElements = gatherAlertElements();
|
||||
|
||||
initToggler();
|
||||
initAlerts();
|
||||
|
||||
// register http client interceptor to filter out Alerts Header
|
||||
setupHttpInterceptor();
|
||||
|
||||
// mark initialized
|
||||
element.classList.add(ALERTS_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: ALERTS_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function gatherAlertElements() {
|
||||
return Array.from(element.querySelectorAll('.' + ALERT_CLASS)).filter(function(alert) {
|
||||
return !alert.classList.contains(ALERT_INITIALIZED_CLASS);
|
||||
});
|
||||
}
|
||||
|
||||
function initToggler() {
|
||||
togglerElement.addEventListener('click', function() {
|
||||
alertElements.forEach(function(alertEl) {
|
||||
toggleAlert(alertEl, true);
|
||||
});
|
||||
togglerElement.classList.remove(ALERTS_TOGGLER_VISIBLE_CLASS);
|
||||
});
|
||||
}
|
||||
|
||||
function initAlerts() {
|
||||
alertElements.forEach(initAlert);
|
||||
}
|
||||
|
||||
function initAlert(alertElement) {
|
||||
var autoHideDelay = ALERT_AUTO_HIDE_DELAY;
|
||||
if (alertElement.dataset.decay) {
|
||||
autoHideDelay = parseInt(alertElement.dataset.decay, 10);
|
||||
}
|
||||
|
||||
var closeEl = alertElement.querySelector('.' + ALERT_CLOSER_CLASS);
|
||||
closeEl.addEventListener('click', function() {
|
||||
toggleAlert(alertElement);
|
||||
});
|
||||
|
||||
if (autoHideDelay > 0 && alertElement.matches(ALERT_AUTOCLOSING_MATCHER)) {
|
||||
window.setTimeout(function() {
|
||||
toggleAlert(alertElement);
|
||||
}, autoHideDelay * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAlert(alertEl, visible) {
|
||||
alertEl.classList.toggle(ALERT_INVISIBLE_CLASS, !visible);
|
||||
checkToggler();
|
||||
}
|
||||
|
||||
function checkToggler() {
|
||||
if (togglerCheckRequested) {
|
||||
return;
|
||||
}
|
||||
|
||||
var alertsHidden = alertElements.reduce(function(acc, alert) {
|
||||
return acc && alert.classList.contains(ALERT_INVISIBLE_CLASS);
|
||||
}, true);
|
||||
|
||||
window.setTimeout(function() {
|
||||
togglerElement.classList.toggle(ALERTS_TOGGLER_VISIBLE_CLASS, alertsHidden);
|
||||
togglerCheckRequested = false;
|
||||
}, ALERTS_TOGGLER_APPEAR_DELAY);
|
||||
}
|
||||
|
||||
function setupHttpInterceptor() {
|
||||
if (HttpClient) {
|
||||
HttpClient.addResponseInterceptor(responseInterceptor.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
function elevateAlerts() {
|
||||
element.classList.add(ALERTS_ELEVATED_CLASS);
|
||||
}
|
||||
|
||||
function responseInterceptor(response) {
|
||||
var alerts;
|
||||
for (var header of response.headers) {
|
||||
if (header[0] === 'alerts') {
|
||||
var decodedHeader = decodeURIComponent(header[1]);
|
||||
alerts = JSON.parse(decodedHeader);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (alerts) {
|
||||
alerts.forEach(function(alert) {
|
||||
var alertElement = createAlertElement(alert.status, alert.content);
|
||||
element.appendChild(alertElement);
|
||||
alertElements.push(alertElement);
|
||||
initAlert(alertElement);
|
||||
});
|
||||
|
||||
elevateAlerts();
|
||||
}
|
||||
}
|
||||
|
||||
function createAlertElement(type, content) {
|
||||
var alertElement = document.createElement('div');
|
||||
alertElement.classList.add(ALERT_CLASS, 'alert-' + type);
|
||||
|
||||
var alertCloser = document.createElement('div');
|
||||
alertCloser.classList.add(ALERT_CLOSER_CLASS);
|
||||
|
||||
var alertIcon = document.createElement('div');
|
||||
alertIcon.classList.add(ALERT_ICON_CLASS);
|
||||
|
||||
var alertContent = document.createElement('div');
|
||||
alertContent.classList.add(ALERT_CONTENT_CLASS);
|
||||
alertContent.innerHTML = content;
|
||||
|
||||
alertElement.appendChild(alertCloser);
|
||||
alertElement.appendChild(alertIcon);
|
||||
alertElement.appendChild(alertContent);
|
||||
|
||||
return alertElement;
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.register({
|
||||
name: ALERTS_UTIL_NAME,
|
||||
selector: ALERTS_UTIL_SELECTOR,
|
||||
setup: alertsUtil,
|
||||
});
|
||||
}
|
||||
})();
|
||||
109
static/es/utils/asidenav.js
Normal file
109
static/es/utils/asidenav.js
Normal file
@ -0,0 +1,109 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
*
|
||||
* Asidenav Utility
|
||||
* Correctly positions hovered asidenav submenus and handles the favorites button on mobile
|
||||
*
|
||||
* Attribute: uw-asidenav
|
||||
*
|
||||
* Example usage:
|
||||
* <div uw-asidenav>
|
||||
* <div .asidenav>
|
||||
* <div .asidenav__box>
|
||||
* <ul .asidenav__list.list--iconless>
|
||||
* <li .asidenav__list-item>
|
||||
* <a .asidenav__link-wrapper href="#">
|
||||
* <div .asidenav__link-shorthand>EIP
|
||||
* <div .asidenav__link-label>Einführung in die Programmierung
|
||||
* <div .asidenav__nested-list-wrapper>
|
||||
* <ul .asidenav__nested-list.list--iconless>
|
||||
* Übungsblätter
|
||||
* ...
|
||||
*
|
||||
*/
|
||||
|
||||
var ASIDENAV_UTIL_NAME = 'asidenav';
|
||||
var ASIDENAV_UTIL_SELECTOR = '[uw-asidenav]';
|
||||
|
||||
var FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
|
||||
var FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active';
|
||||
var ASIDENAV_INITIALIZED_CLASS = 'asidenav--initialized';
|
||||
var ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded';
|
||||
var ASIDENAV_LIST_ITEM_CLASS = 'asidenav__list-item';
|
||||
var ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper';
|
||||
|
||||
var asidenavUtil = function(element) {
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Asidenav utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(ASIDENAV_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
initFavoritesButton();
|
||||
initAsidenavSubmenus();
|
||||
|
||||
// mark initialized
|
||||
element.classList.add(ASIDENAV_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: ASIDENAV_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function initFavoritesButton() {
|
||||
var favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS);
|
||||
favoritesBtn.addEventListener('click', function(event) {
|
||||
favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS);
|
||||
element.classList.toggle(ASIDENAV_EXPANDED_CLASS);
|
||||
event.preventDefault();
|
||||
}, true);
|
||||
}
|
||||
|
||||
function initAsidenavSubmenus() {
|
||||
var asidenavLinksWithSubmenus = Array.from(element.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
|
||||
.map(function(listItem) {
|
||||
var submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS);
|
||||
return { listItem, submenu };
|
||||
}).filter(function(union) {
|
||||
return union.submenu !== null;
|
||||
});
|
||||
|
||||
asidenavLinksWithSubmenus.forEach(function(union) {
|
||||
union.listItem.addEventListener('mouseover', createMouseoverHandler(union));
|
||||
});
|
||||
}
|
||||
|
||||
function createMouseoverHandler(union) {
|
||||
return function mouseoverHanlder() {
|
||||
var rectListItem = union.listItem.getBoundingClientRect();
|
||||
var rectSubMenu = union.submenu.getBoundingClientRect();
|
||||
|
||||
union.submenu.style.left = (rectListItem.left + rectListItem.width) + 'px';
|
||||
if (window.innerHeight - rectListItem.top < rectSubMenu.height) {
|
||||
union.submenu.style.top = (rectListItem.top + rectListItem.height - rectSubMenu.height) + 'px';
|
||||
} else {
|
||||
union.submenu.style.top = rectListItem.top + 'px';
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.register({
|
||||
name: ASIDENAV_UTIL_NAME,
|
||||
selector: ASIDENAV_UTIL_SELECTOR,
|
||||
setup: asidenavUtil,
|
||||
});
|
||||
}
|
||||
})();
|
||||
126
static/es/utils/asyncForm.js
Normal file
126
static/es/utils/asyncForm.js
Normal file
@ -0,0 +1,126 @@
|
||||
(function collonadeClosure() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
*
|
||||
* Async Form Utility
|
||||
* prevents form submissions from reloading the page but instead firing an AJAX request
|
||||
*
|
||||
* Attribute: uw-async-form
|
||||
* (works only on <form> elements)
|
||||
*
|
||||
* Example usage:
|
||||
* <form uw-async-form method='POST' action='...'>
|
||||
* ...
|
||||
*
|
||||
* Internationalization:
|
||||
* This utility expects the following translations to be available:
|
||||
* asyncFormFailure: text that gets shown if an async form request fails
|
||||
* example: "Oops. Something went wrong."
|
||||
*/
|
||||
|
||||
var ASYNC_FORM_UTIL_NAME = 'asyncForm';
|
||||
var ASYNC_FORM_UTIL_SELECTOR = 'form[uw-async-form]';
|
||||
|
||||
var ASYNC_FORM_INITIALIZED_CLASS = 'check-all--initialized';
|
||||
var ASYNC_FORM_RESPONSE_CLASS = 'async-form__response';
|
||||
var ASYNC_FORM_LOADING_CLASS = 'async-form--loading';
|
||||
var ASYNC_FORM_MIN_DELAY = 600;
|
||||
|
||||
var MODAL_SELECTOR = '.modal';
|
||||
var MODAL_HEADER_KEY = 'Is-Modal';
|
||||
var MODAL_HEADER_VALUE = 'True';
|
||||
|
||||
var asyncFormUtil = function(element) {
|
||||
|
||||
var lastRequestTimestamp = 0;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Async Form Utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(ASYNC_FORM_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
element.addEventListener('submit', submitHandler);
|
||||
|
||||
element.classList.add(ASYNC_FORM_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: ASYNC_FORM_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function processResponse(response) {
|
||||
var responseElement = makeResponseElement(response.content, response.status);
|
||||
var parentElement = element.parentElement;
|
||||
|
||||
// make sure there is a delay between click and response
|
||||
var delay = Math.max(0, ASYNC_FORM_MIN_DELAY + lastRequestTimestamp - Date.now());
|
||||
|
||||
setTimeout(function() {
|
||||
parentElement.insertBefore(responseElement, element);
|
||||
element.remove();
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function makeResponseElement(content, status) {
|
||||
var responseElement = document.createElement('div');
|
||||
status = status || 'info';
|
||||
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS);
|
||||
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS + '--' + status);
|
||||
responseElement.innerHTML = content;
|
||||
return responseElement;
|
||||
}
|
||||
|
||||
function submitHandler(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!HttpClient) {
|
||||
throw new Error('HttpClient not found! Can\'t fetch submit form asynchronously!');
|
||||
}
|
||||
|
||||
element.classList.add(ASYNC_FORM_LOADING_CLASS);
|
||||
lastRequestTimestamp = Date.now();
|
||||
|
||||
var url = element.getAttribute('action');
|
||||
var headers = { };
|
||||
var body = new FormData(element);
|
||||
|
||||
var isModal = element.closest(MODAL_SELECTOR);
|
||||
if (isModal) {
|
||||
headers[MODAL_HEADER_KEY] = MODAL_HEADER_VALUE;
|
||||
}
|
||||
|
||||
HttpClient.post({
|
||||
url: url,
|
||||
headers: headers,
|
||||
body: body,
|
||||
accept: HttpClient.ACCEPT.JSON,
|
||||
}).then(function(response) {
|
||||
return response.json();
|
||||
}).then(function(response) {
|
||||
processResponse(response[0]);
|
||||
}).catch(function() {
|
||||
var failureMessage = I18n.get('asyncFormFailure');
|
||||
processResponse({ content: failureMessage });
|
||||
|
||||
element.classList.remove(ASYNC_FORM_LOADING_CLASS);
|
||||
});
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.register({
|
||||
name: ASYNC_FORM_UTIL_NAME,
|
||||
selector: ASYNC_FORM_UTIL_SELECTOR,
|
||||
setup: asyncFormUtil,
|
||||
});
|
||||
}
|
||||
})();
|
||||
422
static/es/utils/asyncTable.js
Normal file
422
static/es/utils/asyncTable.js
Normal file
@ -0,0 +1,422 @@
|
||||
(function collonadeClosure() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
*
|
||||
* Async Table Utility
|
||||
* makes table filters, sorting and pagination behave asynchronously via AJAX calls
|
||||
*
|
||||
* Attribute: uw-async-table
|
||||
*
|
||||
* Example usage:
|
||||
* (regular table)
|
||||
*/
|
||||
|
||||
var INPUT_DEBOUNCE = 600;
|
||||
var HEADER_HEIGHT = 80;
|
||||
|
||||
var ASYNC_TABLE_UTIL_NAME = 'asyncTable';
|
||||
var ASYNC_TABLE_UTIL_SELECTOR = '[uw-async-table]';
|
||||
|
||||
var ASYNC_TABLE_LOCAL_STORAGE_KEY = 'ASYNC_TABLE';
|
||||
var ASYNC_TABLE_SCROLLTABLE_SELECTOR = '.scrolltable';
|
||||
var ASYNC_TABLE_INITIALIZED_CLASS = 'async-table--initialized';
|
||||
var ASYNC_TABLE_LOADING_CLASS = 'async-table--loading';
|
||||
|
||||
var ASYNC_TABLE_FILTER_FORM_SELECTOR = '.table-filter-form';
|
||||
var ASYNC_TABLE_FILTER_FORM_ID_SELECTOR = '[name="form-identifier"]';
|
||||
|
||||
|
||||
var asyncTableUtil = function(element) {
|
||||
var asyncTableHeader;
|
||||
var asyncTableId;
|
||||
|
||||
var ths = [];
|
||||
var pageLinks = [];
|
||||
var pagesizeForm;
|
||||
var scrollTable;
|
||||
var cssIdPrefix = '';
|
||||
|
||||
var tableFilterInputs = {
|
||||
search: [],
|
||||
input: [],
|
||||
change: [],
|
||||
select: [],
|
||||
};
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Async Table utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(ASYNC_TABLE_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// param asyncTableDbHeader
|
||||
if (element.dataset.asyncTableDbHeader !== undefined) {
|
||||
asyncTableHeader = element.dataset.asyncTableDbHeader;
|
||||
}
|
||||
|
||||
var rawTableId = element.querySelector('table').id;
|
||||
cssIdPrefix = findCssIdPrefix(rawTableId);
|
||||
asyncTableId = rawTableId.replace(cssIdPrefix, '');
|
||||
|
||||
// find scrolltable wrapper
|
||||
scrollTable = element.querySelector(ASYNC_TABLE_SCROLLTABLE_SELECTOR);
|
||||
if (!scrollTable) {
|
||||
throw new Error('Async Table cannot be set up without a scrolltable element!');
|
||||
}
|
||||
|
||||
setupSortableHeaders();
|
||||
setupPagination();
|
||||
setupPageSizeSelect();
|
||||
setupTableFilter();
|
||||
|
||||
processLocalStorage();
|
||||
|
||||
// clear currentTableUrl from previous requests
|
||||
setLocalStorageParameter('currentTableUrl', null);
|
||||
|
||||
// mark initialized
|
||||
element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: ASYNC_TABLE_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function setupSortableHeaders() {
|
||||
ths = Array.from(scrollTable.querySelectorAll('th.sortable')).map(function(th) {
|
||||
return { element: th };
|
||||
});
|
||||
|
||||
ths.forEach(function(th) {
|
||||
th.clickHandler = function(event) {
|
||||
setLocalStorageParameter('horizPos', (scrollTable || {}).scrollLeft);
|
||||
linkClickHandler(event);
|
||||
};
|
||||
th.element.addEventListener('click', th.clickHandler);
|
||||
});
|
||||
}
|
||||
|
||||
function setupPagination() {
|
||||
var pagination = element.querySelector('#' + cssIdPrefix + asyncTableId + '-pagination');
|
||||
if (pagination) {
|
||||
pageLinks = Array.from(pagination.querySelectorAll('.page-link')).map(function(link) {
|
||||
return { element: link };
|
||||
});
|
||||
|
||||
pageLinks.forEach(function(link) {
|
||||
link.clickHandler = function(event) {
|
||||
var tableBoundingRect = scrollTable.getBoundingClientRect();
|
||||
if (tableBoundingRect.top < HEADER_HEIGHT) {
|
||||
var scrollTo = {
|
||||
top: (scrollTable.offsetTop || 0) - HEADER_HEIGHT,
|
||||
left: scrollTable.offsetLeft || 0,
|
||||
behavior: 'smooth',
|
||||
};
|
||||
setLocalStorageParameter('scrollTo', scrollTo);
|
||||
}
|
||||
linkClickHandler(event);
|
||||
};
|
||||
link.element.addEventListener('click', link.clickHandler);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setupPageSizeSelect() {
|
||||
// pagesize form
|
||||
pagesizeForm = element.querySelector('#' + cssIdPrefix + asyncTableId + '-pagesize-form');
|
||||
|
||||
if (pagesizeForm) {
|
||||
var pagesizeSelect = pagesizeForm.querySelector('[name=' + asyncTableId + '-pagesize]');
|
||||
pagesizeSelect.addEventListener('change', changePagesizeHandler);
|
||||
}
|
||||
}
|
||||
|
||||
function setupTableFilter() {
|
||||
var tableFilterForm = element.querySelector(ASYNC_TABLE_FILTER_FORM_SELECTOR);
|
||||
|
||||
if (tableFilterForm) {
|
||||
gatherTableFilterInputs(tableFilterForm);
|
||||
addTableFilterEventListeners(tableFilterForm);
|
||||
}
|
||||
}
|
||||
|
||||
function gatherTableFilterInputs(tableFilterForm) {
|
||||
Array.from(tableFilterForm.querySelectorAll('input[type="search"]')).forEach(function(input) {
|
||||
tableFilterInputs.search.push(input);
|
||||
});
|
||||
|
||||
Array.from(tableFilterForm.querySelectorAll('input[type="text"]')).forEach(function(input) {
|
||||
tableFilterInputs.input.push(input);
|
||||
});
|
||||
|
||||
Array.from(tableFilterForm.querySelectorAll('input:not([type="text"]):not([type="search"])')).forEach(function(input) {
|
||||
tableFilterInputs.change.push(input);
|
||||
});
|
||||
|
||||
Array.from(tableFilterForm.querySelectorAll('select')).forEach(function(input) {
|
||||
tableFilterInputs.select.push(input);
|
||||
});
|
||||
}
|
||||
|
||||
function addTableFilterEventListeners(tableFilterForm) {
|
||||
tableFilterInputs.search.forEach(function(input) {
|
||||
var debouncedInput = debounce(function() {
|
||||
if (input.value.length === 0 || input.value.length > 2) {
|
||||
updateFromTableFilter(tableFilterForm);
|
||||
}
|
||||
}, INPUT_DEBOUNCE);
|
||||
input.addEventListener('input', debouncedInput);
|
||||
});
|
||||
|
||||
tableFilterInputs.input.forEach(function(input) {
|
||||
var debouncedInput = debounce(function() {
|
||||
if (input.value.length === 0 || input.value.length > 2) {
|
||||
updateFromTableFilter(tableFilterForm);
|
||||
}
|
||||
}, INPUT_DEBOUNCE);
|
||||
input.addEventListener('input', debouncedInput);
|
||||
});
|
||||
|
||||
tableFilterInputs.change.forEach(function(input) {
|
||||
input.addEventListener('change', function() {
|
||||
updateFromTableFilter(tableFilterForm);
|
||||
});
|
||||
});
|
||||
|
||||
tableFilterInputs.select.forEach(function(input) {
|
||||
input.addEventListener('change', function() {
|
||||
updateFromTableFilter(tableFilterForm);
|
||||
});
|
||||
});
|
||||
|
||||
tableFilterForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
updateFromTableFilter(tableFilterForm);
|
||||
});
|
||||
}
|
||||
|
||||
function updateFromTableFilter(tableFilterForm) {
|
||||
var url = serializeTableFilterToURL();
|
||||
var callback = null;
|
||||
|
||||
var focusedInput = tableFilterForm.querySelector(':focus, :active');
|
||||
// focus previously focused input
|
||||
if (focusedInput && focusedInput.selectionStart !== null) {
|
||||
var selectionStart = focusedInput.selectionStart;
|
||||
// remove the following part of the id to get rid of the random
|
||||
// (yet somewhat structured) prefix we got from nudging.
|
||||
var prefix = findCssIdPrefix(focusedInput.id);
|
||||
var focusId = focusedInput.id.replace(prefix, '');
|
||||
callback = function(wrapper) {
|
||||
var idPrefix = getLocalStorageParameter('cssIdPrefix');
|
||||
var toBeFocused = wrapper.querySelector('#' + idPrefix + focusId);
|
||||
if (toBeFocused) {
|
||||
toBeFocused.focus();
|
||||
toBeFocused.selectionStart = selectionStart;
|
||||
}
|
||||
};
|
||||
}
|
||||
updateTableFrom(url, callback);
|
||||
}
|
||||
|
||||
function serializeTableFilterToURL() {
|
||||
var url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
|
||||
|
||||
var formIdElement = element.querySelector(ASYNC_TABLE_FILTER_FORM_ID_SELECTOR);
|
||||
if (!formIdElement) {
|
||||
// cannot serialize the filter form without an identifier
|
||||
return;
|
||||
}
|
||||
|
||||
url.searchParams.set('form-identifier', formIdElement.value);
|
||||
url.searchParams.set('_hasdata', 'true');
|
||||
url.searchParams.set(asyncTableId + '-page', '0');
|
||||
|
||||
tableFilterInputs.search.forEach(function(input) {
|
||||
url.searchParams.set(input.name, input.value);
|
||||
});
|
||||
|
||||
tableFilterInputs.input.forEach(function(input) {
|
||||
url.searchParams.set(input.name, input.value);
|
||||
});
|
||||
|
||||
tableFilterInputs.change.forEach(function(input) {
|
||||
if (input.checked) {
|
||||
url.searchParams.set(input.name, input.value);
|
||||
}
|
||||
});
|
||||
|
||||
tableFilterInputs.select.forEach(function(select) {
|
||||
var options = Array.from(select.querySelectorAll('option'));
|
||||
var selected = options.find(function(option) { return option.selected; });
|
||||
if (selected) {
|
||||
url.searchParams.set(select.name, selected.value);
|
||||
}
|
||||
});
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
function processLocalStorage() {
|
||||
var scrollTo = getLocalStorageParameter('scrollTo');
|
||||
if (scrollTo && scrollTable) {
|
||||
window.scrollTo(scrollTo);
|
||||
}
|
||||
setLocalStorageParameter('scrollTo', null);
|
||||
|
||||
var horizPos = getLocalStorageParameter('horizPos');
|
||||
if (horizPos && scrollTable) {
|
||||
scrollTable.scrollLeft = horizPos;
|
||||
}
|
||||
setLocalStorageParameter('horizPos', null);
|
||||
}
|
||||
|
||||
function removeListeners() {
|
||||
ths.forEach(function(th) {
|
||||
th.element.removeEventListener('click', th.clickHandler);
|
||||
});
|
||||
|
||||
pageLinks.forEach(function(link) {
|
||||
link.element.removeEventListener('click', link.clickHandler);
|
||||
});
|
||||
|
||||
if (pagesizeForm) {
|
||||
var pagesizeSelect = pagesizeForm.querySelector('[name=' + asyncTableId + '-pagesize]');
|
||||
pagesizeSelect.removeEventListener('change', changePagesizeHandler);
|
||||
}
|
||||
}
|
||||
|
||||
function linkClickHandler(event) {
|
||||
event.preventDefault();
|
||||
var url = getClickDestination(event.target);
|
||||
if (!url.match(/^http/)) {
|
||||
url = window.location.origin + window.location.pathname + url;
|
||||
}
|
||||
updateTableFrom(url);
|
||||
}
|
||||
|
||||
function getClickDestination(el) {
|
||||
if (!el.matches('a') && !el.querySelector('a')) {
|
||||
return '';
|
||||
}
|
||||
return el.getAttribute('href') || el.querySelector('a').getAttribute('href');
|
||||
}
|
||||
|
||||
function changePagesizeHandler(event) {
|
||||
var pagesizeParamKey = asyncTableId + '-pagesize';
|
||||
var pageParamKey = asyncTableId + '-page';
|
||||
var url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
|
||||
url.searchParams.set(pagesizeParamKey, event.target.value);
|
||||
url.searchParams.set(pageParamKey, 0);
|
||||
updateTableFrom(url.href);
|
||||
}
|
||||
|
||||
// fetches new sorted element from url with params and replaces contents of current element
|
||||
function updateTableFrom(url, callback) {
|
||||
if (!HttpClient) {
|
||||
throw new Error('HttpClient not found!');
|
||||
}
|
||||
|
||||
element.classList.add(ASYNC_TABLE_LOADING_CLASS);
|
||||
|
||||
var headers = {
|
||||
'Accept': 'text/html',
|
||||
[asyncTableHeader]: asyncTableId,
|
||||
};
|
||||
|
||||
HttpClient.get({
|
||||
url: url,
|
||||
headers: headers,
|
||||
accept: HttpClient.ACCEPT.TEXT_HTML,
|
||||
}).then(function(response) {
|
||||
return HtmlHelpers.parseResponse(response);
|
||||
}).then(function(response) {
|
||||
setLocalStorageParameter('currentTableUrl', url.href);
|
||||
// reset table
|
||||
removeListeners();
|
||||
element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS);
|
||||
// update table with new
|
||||
updateWrapperContents(response);
|
||||
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.setupAll(element);
|
||||
}
|
||||
|
||||
if (callback && typeof callback === 'function') {
|
||||
setLocalStorageParameter('cssIdPrefix', response.idPrefix);
|
||||
callback(element);
|
||||
setLocalStorageParameter('cssIdPrefix', '');
|
||||
}
|
||||
}).catch(function(err) {
|
||||
console.error(err);
|
||||
}).finally(function() {
|
||||
element.classList.remove(ASYNC_TABLE_LOADING_CLASS);
|
||||
});
|
||||
}
|
||||
|
||||
function updateWrapperContents(response) {
|
||||
var newPage = document.createElement('div');
|
||||
newPage.appendChild(response.element);
|
||||
var newWrapperContents = newPage.querySelector('#' + response.idPrefix + element.id);
|
||||
element.innerHTML = newWrapperContents.innerHTML;
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
// returns any random nudged prefix found in the given id
|
||||
function findCssIdPrefix(id) {
|
||||
var matcher = /r\d*?__/;
|
||||
var maybePrefix = id.match(matcher);
|
||||
if (maybePrefix && maybePrefix[0]) {
|
||||
return maybePrefix[0];
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function setLocalStorageParameter(key, value) {
|
||||
var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {};
|
||||
if (value !== null) {
|
||||
currentLSState[key] = value;
|
||||
} else {
|
||||
delete currentLSState[key];
|
||||
}
|
||||
window.localStorage.setItem(ASYNC_TABLE_LOCAL_STORAGE_KEY, JSON.stringify(currentLSState));
|
||||
}
|
||||
|
||||
function getLocalStorageParameter(key) {
|
||||
var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {};
|
||||
return currentLSState[key];
|
||||
}
|
||||
|
||||
// debounce function, taken from Underscore.js
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
}
|
||||
|
||||
// register async table utility
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.register({
|
||||
name: ASYNC_TABLE_UTIL_NAME,
|
||||
selector: ASYNC_TABLE_UTIL_SELECTOR,
|
||||
setup: asyncTableUtil,
|
||||
});
|
||||
}
|
||||
})();
|
||||
150
static/es/utils/checkAll.js
Normal file
150
static/es/utils/checkAll.js
Normal file
@ -0,0 +1,150 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
*
|
||||
* Check All Checkbox Utility
|
||||
* adds a Check All Checkbox above columns with only checkboxes
|
||||
*
|
||||
* Attribute: [none]
|
||||
* (will be set up automatically on tables)
|
||||
*
|
||||
* Example usage:
|
||||
* (table with one column thats only checkboxes)
|
||||
*/
|
||||
|
||||
var CHECK_ALL_UTIL_NAME = 'checkAll';
|
||||
var CHECK_ALL_UTIL_SELECTOR = 'table';
|
||||
|
||||
var CHECKBOX_SELECTOR = '[type="checkbox"]';
|
||||
|
||||
var CHECK_ALL_INITIALIZED_CLASS = 'check-all--initialized';
|
||||
|
||||
var checkAllUtil = function(element) {
|
||||
var columns = [];
|
||||
var checkboxColumn = [];
|
||||
var checkAllCheckbox = null;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Check All utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(CHECK_ALL_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
gatherColumns();
|
||||
setupCheckAllCheckbox();
|
||||
|
||||
// mark initialized
|
||||
element.classList.add(CHECK_ALL_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: CHECK_ALL_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function getCheckboxId() {
|
||||
return 'check-all-checkbox-' + Math.floor(Math.random() * 100000);
|
||||
}
|
||||
|
||||
function gatherColumns() {
|
||||
var rows = Array.from(element.querySelectorAll('tr'));
|
||||
var cols = [];
|
||||
rows.forEach(function(tr) {
|
||||
var cells = Array.from(tr.querySelectorAll('td'));
|
||||
cells.forEach(function(cell, cellIndex) {
|
||||
if (!cols[cellIndex]) {
|
||||
cols[cellIndex] = [];
|
||||
}
|
||||
cols[cellIndex].push(cell);
|
||||
});
|
||||
});
|
||||
columns = cols;
|
||||
}
|
||||
|
||||
function findCheckboxColumn(columns) {
|
||||
var checkboxColumnId = null;
|
||||
columns.forEach(function(col, i) {
|
||||
if (isCheckboxColumn(col)) {
|
||||
checkboxColumnId = i;
|
||||
}
|
||||
});
|
||||
return checkboxColumnId;
|
||||
}
|
||||
|
||||
function isCheckboxColumn(col) {
|
||||
var onlyCheckboxes = true;
|
||||
col.forEach(function(cell) {
|
||||
if (onlyCheckboxes && !cell.querySelector(CHECKBOX_SELECTOR)) {
|
||||
onlyCheckboxes = false;
|
||||
}
|
||||
});
|
||||
return onlyCheckboxes;
|
||||
}
|
||||
|
||||
function setupCheckAllCheckbox() {
|
||||
var checkboxColumnId = findCheckboxColumn(columns);
|
||||
if (checkboxColumnId === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
checkboxColumn = columns[checkboxColumnId];
|
||||
var firstRow = element.querySelector('tr');
|
||||
var th = Array.from(firstRow.querySelectorAll('th, td'))[checkboxColumnId];
|
||||
checkAllCheckbox = document.createElement('input');
|
||||
checkAllCheckbox.setAttribute('type', 'checkbox');
|
||||
checkAllCheckbox.setAttribute('id', getCheckboxId());
|
||||
th.insertBefore(checkAllCheckbox, th.firstChild);
|
||||
|
||||
// manually set up new checkbox
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.setup(UtilRegistry.find('checkbox'), th);
|
||||
}
|
||||
|
||||
checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput);
|
||||
setupCheckboxListeners();
|
||||
}
|
||||
|
||||
function onCheckAllCheckboxInput() {
|
||||
toggleAll(checkAllCheckbox.checked);
|
||||
}
|
||||
|
||||
function setupCheckboxListeners() {
|
||||
checkboxColumn
|
||||
.map(function(cell) {
|
||||
return cell.querySelector(CHECKBOX_SELECTOR);
|
||||
})
|
||||
.forEach(function(checkbox) {
|
||||
checkbox.addEventListener('input', updateCheckAllCheckboxState);
|
||||
});
|
||||
}
|
||||
|
||||
function updateCheckAllCheckboxState() {
|
||||
var allChecked = checkboxColumn.every(function(cell) {
|
||||
return cell.querySelector(CHECKBOX_SELECTOR).checked;
|
||||
});
|
||||
checkAllCheckbox.checked = allChecked;
|
||||
}
|
||||
|
||||
function toggleAll(checked) {
|
||||
checkboxColumn.forEach(function(cell) {
|
||||
cell.querySelector(CHECKBOX_SELECTOR).checked = checked;
|
||||
});
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
// register check all checkbox util
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.register({
|
||||
name: CHECK_ALL_UTIL_NAME,
|
||||
selector: CHECK_ALL_UTIL_SELECTOR,
|
||||
setup: checkAllUtil,
|
||||
});
|
||||
}
|
||||
})();
|
||||
611
static/es/utils/form.js
Normal file
611
static/es/utils/form.js
Normal file
@ -0,0 +1,611 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var formUtilities = [];
|
||||
|
||||
/**
|
||||
*
|
||||
* Reactive Submit Button Utility
|
||||
* disables a forms LAST sumit button as long as the required inputs are invalid
|
||||
* (only checks if the value of the inputs are not empty)
|
||||
*
|
||||
* Attribute: [none]
|
||||
* (automatically setup on all form tags)
|
||||
*
|
||||
* Params:
|
||||
* data-formnorequired: string
|
||||
* If present the submit button will never get disabled
|
||||
*
|
||||
* Example usage:
|
||||
* <form uw-reactive-submit-button>
|
||||
* <input type="text" required>
|
||||
* <button type="submit">
|
||||
* </form>
|
||||
*/
|
||||
|
||||
var REACTIVE_SUBMIT_BUTTON_UTIL_NAME = 'reactiveSubmitButton';
|
||||
// var REACTIVE_SUBMIT_BUTTON_UTIL_SELECTOR = 'form';
|
||||
|
||||
var REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS = 'reactive-submit-button--initialized';
|
||||
|
||||
/* eslint-disable-next-line */
|
||||
var reactiveSubmitButtonUtil = function(element) {
|
||||
var requiredInputs;
|
||||
var submitButton;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Reactive Submit Button utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// abort if form has param data-formnorequired
|
||||
if (element.dataset.formnorequired !== undefined) {
|
||||
throw new Error('Form has formnorequired data attribute. Will skip setup of reactive submit button.');
|
||||
}
|
||||
|
||||
requiredInputs = Array.from(element.querySelectorAll('[required]'));
|
||||
if (!requiredInputs) {
|
||||
// abort if form has no required inputs
|
||||
throw new Error('Submit button has formnorequired data attribute. Will skip setup of reactive submit button.');
|
||||
}
|
||||
|
||||
var submitButtons = Array.from(element.querySelectorAll('[type="submit"]'));
|
||||
if (!submitButtons || !submitButtons.length) {
|
||||
throw new Error('Reactive Submit Button utility couldn\'t find any submit buttons!');
|
||||
}
|
||||
submitButton = submitButtons.reverse()[0];
|
||||
// abort if form has param data-formnorequired
|
||||
if (submitButton.dataset.formnorequired !== undefined) {
|
||||
return false;
|
||||
}
|
||||
|
||||
setupInputs();
|
||||
updateButtonState();
|
||||
|
||||
element.classList.add(REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: REACTIVE_SUBMIT_BUTTON_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function setupInputs() {
|
||||
requiredInputs.forEach(function(el) {
|
||||
var checkbox = el.getAttribute('type') === 'checkbox';
|
||||
var eventType = checkbox ? 'change' : 'input';
|
||||
el.addEventListener(eventType, function() {
|
||||
updateButtonState();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateButtonState() {
|
||||
if (inputsValid()) {
|
||||
submitButton.removeAttribute('disabled');
|
||||
} else {
|
||||
submitButton.setAttribute('disabled', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
function inputsValid() {
|
||||
var done = true;
|
||||
requiredInputs.forEach(function(inp) {
|
||||
var len = inp.value.trim().length;
|
||||
if (done && len === 0) {
|
||||
done = false;
|
||||
}
|
||||
});
|
||||
return done;
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
// skipping reactiveButtonUtil (for now)
|
||||
// the button did not properly re-enable after filling out a form for some safari users.
|
||||
// if maybe in the future there is going to be a proper way of (asynchronously) and
|
||||
// meaningfully validating forms this can be re-activated by commenting in the next few lines
|
||||
// formUtilities.push({
|
||||
// name: REACTIVE_SUBMIT_BUTTON_UTIL_NAME,
|
||||
// selector: REACTIVE_SUBMIT_BUTTON_UTIL_SELECTOR,
|
||||
// setup: reactiveSubmitButtonUtil,
|
||||
// });
|
||||
|
||||
/**
|
||||
*
|
||||
* Interactive Fieldset Utility
|
||||
* shows/hides inputs based on value of particular input
|
||||
*
|
||||
* Attribute: uw-interactive-fieldset
|
||||
*
|
||||
* Params:
|
||||
* data-conditional-input: string
|
||||
* Selector for the input that this fieldset watches for changes
|
||||
* data-conditional-value: string
|
||||
* The value the conditional input needs to be set to for this fieldset to be shown
|
||||
* Can be omitted if conditionalInput is a checkbox
|
||||
*
|
||||
* Example usage:
|
||||
* ## example with text input
|
||||
* <input id="input-0" type="text">
|
||||
* <fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="yes">...</fieldset>
|
||||
* <fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="no">...</fieldset>
|
||||
* ## example with <select>
|
||||
* <select id="select-0">
|
||||
* <option value="0">Zero
|
||||
* <option value="1">One
|
||||
* <fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="0">...</fieldset>
|
||||
* <fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="1">...</fieldset>
|
||||
* ## example with checkbox
|
||||
* <input id="checkbox-0" type="checkbox">
|
||||
* <input id="checkbox-1" type="checkbox">
|
||||
* <fieldset uw-interactive-fieldset data-conditional-input="#checkbox-0">...</fieldset>
|
||||
* <fieldset uw-interactive-fieldset data-conditional-input="#checkbox-1">...</fieldset>
|
||||
*/
|
||||
|
||||
var INTERACTIVE_FIELDSET_UTIL_NAME = 'interactiveFieldset';
|
||||
var INTERACTIVE_FIELDSET_UTIL_SELECTOR = '[uw-interactive-fieldset]';
|
||||
var INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset__target';
|
||||
|
||||
var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized';
|
||||
var INTERACTIVE_FIELDSET_CHILD_SELECTOR = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])';
|
||||
|
||||
var interactiveFieldsetUtil = function(element) {
|
||||
var conditionalInput;
|
||||
var conditionalValue;
|
||||
var target;
|
||||
var childInputs;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Interactive Fieldset utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(INTERACTIVE_FIELDSET_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// param conditionalInput
|
||||
if (!element.dataset.conditionalInput) {
|
||||
throw new Error('Interactive Fieldset needs a selector for a conditional input!');
|
||||
}
|
||||
conditionalInput = document.querySelector('#' + element.dataset.conditionalInput);
|
||||
if (!conditionalInput) {
|
||||
// abort if form has no required inputs
|
||||
throw new Error('Couldn\'t find the conditional input. Aborting setup for interactive fieldset.');
|
||||
}
|
||||
|
||||
// param conditionalValue
|
||||
if (!element.dataset.conditionalValue && !isCheckbox()) {
|
||||
throw new Error('Interactive Fieldset needs a conditional value!');
|
||||
}
|
||||
conditionalValue = element.dataset.conditionalValue;
|
||||
|
||||
target = element.closest(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR);
|
||||
if (!target || element.matches(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR)) {
|
||||
target = element;
|
||||
}
|
||||
|
||||
childInputs = Array.from(element.querySelectorAll(INTERACTIVE_FIELDSET_CHILD_SELECTOR));
|
||||
|
||||
// add event listener
|
||||
var observer = new MutationObserver(() => updateVisibility());
|
||||
observer.observe(conditionalInput, { attributes: true, attributeFilter: ['disabled'] });
|
||||
conditionalInput.addEventListener('input', updateVisibility);
|
||||
|
||||
// initial visibility update
|
||||
updateVisibility();
|
||||
|
||||
// mark as initialized
|
||||
element.classList.add(INTERACTIVE_FIELDSET_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: INTERACTIVE_FIELDSET_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function updateVisibility() {
|
||||
var active = matchesConditionalValue() && !conditionalInput.disabled;
|
||||
|
||||
target.classList.toggle('hidden', !active);
|
||||
|
||||
childInputs.forEach(function(el) {
|
||||
el.disabled = !active;
|
||||
if (el._flatpickr) {
|
||||
el._flatpickr.altInput.disabled = !active;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function matchesConditionalValue() {
|
||||
if (isCheckbox()) {
|
||||
return conditionalInput.checked === true;
|
||||
}
|
||||
|
||||
return conditionalInput.value === conditionalValue;
|
||||
}
|
||||
|
||||
function isCheckbox() {
|
||||
return conditionalInput.getAttribute('type') === 'checkbox';
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
formUtilities.push({
|
||||
name: INTERACTIVE_FIELDSET_UTIL_NAME,
|
||||
selector: INTERACTIVE_FIELDSET_UTIL_SELECTOR,
|
||||
setup: interactiveFieldsetUtil,
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* Navigate Away Prompt Utility
|
||||
* This utility asks the user if (s)he really wants to navigate away
|
||||
* from a page containing a form if (s)he already touched an input.
|
||||
* Form-Submits will not trigger the prompt.
|
||||
* Utility will ignore forms that contain auto submit elements (buttons, inputs).
|
||||
*
|
||||
* Attribute: [none]
|
||||
* (automatically setup on all form tags that dont automatically submit, see AutoSubmitButtonUtil)
|
||||
*
|
||||
* Example usage:
|
||||
* (any page with a form)
|
||||
*/
|
||||
|
||||
var NAVIGATE_AWAY_PROMPT_UTIL_NAME = 'navigateAwayPrompt';
|
||||
var NAVIGATE_AWAY_PROMPT_UTIL_SELECTOR = 'form';
|
||||
|
||||
var NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS = 'navigate-away-prompt--initialized';
|
||||
|
||||
var navigateAwayPromptUtil = function(element) {
|
||||
var touched = false;
|
||||
var unloadDueToSubmit = false;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Navigate Away Prompt utility needs to be passed an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// ignore forms that get submitted automatically
|
||||
if (element.querySelector(AUTO_SUBMIT_BUTTON_UTIL_SELECTOR) || element.querySelector(AUTO_SUBMIT_INPUT_UTIL_SELECTOR)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
window.addEventListener('beforeunload', beforeUnloadHandler);
|
||||
|
||||
element.addEventListener('submit', function() {
|
||||
unloadDueToSubmit = true;
|
||||
});
|
||||
element.addEventListener('change', function() {
|
||||
touched = true;
|
||||
unloadDueToSubmit = false;
|
||||
});
|
||||
|
||||
// mark initialized
|
||||
element.classList.add(NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: NAVIGATE_AWAY_PROMPT_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {
|
||||
window.removeEventListener('beforeunload', beforeUnloadHandler);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function beforeUnloadHandler(event) {
|
||||
// allow the event to happen if the form was not touched by the
|
||||
// user or the unload event was initiated by a form submit
|
||||
if (!touched || unloadDueToSubmit) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// cancel the unload event. This is the standard to force the prompt to appear.
|
||||
event.preventDefault();
|
||||
// for all non standard compliant browsers we return a truthy value to activate the prompt.
|
||||
return true;
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
formUtilities.push({
|
||||
name: NAVIGATE_AWAY_PROMPT_UTIL_NAME,
|
||||
selector: NAVIGATE_AWAY_PROMPT_UTIL_SELECTOR,
|
||||
setup: navigateAwayPromptUtil,
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* Auto Submit Button Utility
|
||||
* Hides submit buttons in forms that are submitted programmatically
|
||||
* We hide the button using JavaScript so no-js users will still be able to submit the form
|
||||
*
|
||||
* Attribute: uw-auto-submit-button
|
||||
*
|
||||
* Example usage:
|
||||
* <button type="submit" uw-auto-submit-button>Submit
|
||||
*/
|
||||
|
||||
var AUTO_SUBMIT_BUTTON_UTIL_NAME = 'autoSubmitButton';
|
||||
var AUTO_SUBMIT_BUTTON_UTIL_SELECTOR = '[uw-auto-submit-button]';
|
||||
|
||||
var AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS = 'auto-submit-button--initialized';
|
||||
var AUTO_SUBMIT_BUTTON_HIDDEN_CLASS = 'hidden';
|
||||
|
||||
var autoSubmitButtonUtil = function(element) {
|
||||
if (!element) {
|
||||
throw new Error('Auto Submit Button utility needs to be passed an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// hide and mark initialized
|
||||
element.classList.add(AUTO_SUBMIT_BUTTON_HIDDEN_CLASS, AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
};
|
||||
|
||||
formUtilities.push({
|
||||
name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
|
||||
selector: AUTO_SUBMIT_BUTTON_UTIL_SELECTOR,
|
||||
setup: autoSubmitButtonUtil,
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* Auto Submit Input Utility
|
||||
* Programmatically submits forms when a certain input changes value
|
||||
*
|
||||
* Attribute: uw-auto-submit-input
|
||||
*
|
||||
* Example usage:
|
||||
* <input type="text" uw-auto-submit-input />
|
||||
*/
|
||||
|
||||
var AUTO_SUBMIT_INPUT_UTIL_NAME = 'autoSubmitInput';
|
||||
var AUTO_SUBMIT_INPUT_UTIL_SELECTOR = '[uw-auto-submit-input]';
|
||||
|
||||
var AUTO_SUBMIT_INPUT_INITIALIZED_CLASS = 'auto-submit-input--initialized';
|
||||
|
||||
var autoSubmitInputUtil = function(element) {
|
||||
var form;
|
||||
var debouncedHandler;
|
||||
|
||||
function autoSubmit() {
|
||||
form.submit();
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Auto Submit Input utility needs to be passed an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
form = element.form;
|
||||
if (!form) {
|
||||
throw new Error('Could not determine associated form for auto submit input');
|
||||
}
|
||||
|
||||
debouncedHandler = debounce(autoSubmit, 500);
|
||||
|
||||
element.addEventListener('input', debouncedHandler);
|
||||
|
||||
element.classList.add(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: AUTO_SUBMIT_INPUT_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {
|
||||
element.removeEventListener('input', debouncedHandler);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
formUtilities.push({
|
||||
name: AUTO_SUBMIT_INPUT_UTIL_NAME,
|
||||
selector: AUTO_SUBMIT_INPUT_UTIL_SELECTOR,
|
||||
setup: autoSubmitInputUtil,
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* Form Error Remover Utility
|
||||
* Removes errors from inputs when they are focused
|
||||
*
|
||||
* Attribute: [none]
|
||||
* (automatically setup on all form tags)
|
||||
*
|
||||
* Example usage:
|
||||
* (any regular form that can show input errors)
|
||||
*/
|
||||
|
||||
var FORM_ERROR_REMOVER_UTIL_NAME = 'formErrorRemover';
|
||||
var FORM_ERROR_REMOVER_UTIL_SELECTOR = 'form';
|
||||
|
||||
var FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized';
|
||||
var FORM_ERROR_REMOVER_INPUTS_SELECTOR = 'input:not([type="hidden"]), textarea, select';
|
||||
|
||||
var FORM_GROUP_SELECTOR = '.form-group';
|
||||
var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error';
|
||||
|
||||
|
||||
var formErrorRemoverUtil = function(element) {
|
||||
var formGroups;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Form Error Remover utility needs to be passed an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(FORM_ERROR_REMOVER_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// find form groups
|
||||
formGroups = Array.from(element.querySelectorAll(FORM_GROUP_SELECTOR));
|
||||
|
||||
formGroups.forEach(function(formGroup) {
|
||||
if (!formGroup.classList.contains(FORM_GROUP_WITH_ERRORS_CLASS)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var inputElements = Array.from(formGroup.querySelectorAll(FORM_ERROR_REMOVER_INPUTS_SELECTOR));
|
||||
if (!inputElements) {
|
||||
return false;
|
||||
}
|
||||
|
||||
inputElements.forEach(function(inputElement) {
|
||||
inputElement.addEventListener('input', function() {
|
||||
formGroup.classList.remove(FORM_GROUP_WITH_ERRORS_CLASS);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// mark initialized
|
||||
element.classList.add(FORM_ERROR_REMOVER_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: FORM_ERROR_REMOVER_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
formUtilities.push({
|
||||
name: FORM_ERROR_REMOVER_UTIL_NAME,
|
||||
selector: FORM_ERROR_REMOVER_UTIL_SELECTOR,
|
||||
setup: formErrorRemoverUtil,
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* Datepicker Utility
|
||||
* Provides UI for entering dates and times
|
||||
*
|
||||
* Attribute: [none]
|
||||
* (automatically setup on all relevant input tags)
|
||||
*
|
||||
* Example usage:
|
||||
* (any form that uses inputs of type date, time, or datetime-local)
|
||||
*/
|
||||
|
||||
var DATEPICKER_UTIL_NAME = 'datepicker';
|
||||
var DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';
|
||||
|
||||
var DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
|
||||
|
||||
var DATEPICKER_CONFIG = {
|
||||
"datetime-local": {
|
||||
enableTime: true,
|
||||
altInput: true,
|
||||
altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
|
||||
dateFormat: "Y-m-dTH:i",
|
||||
time_24hr: true,
|
||||
},
|
||||
"date": {
|
||||
altFormat: "j. F Y",
|
||||
dateFormat: "Y-m-d",
|
||||
altInput: true,
|
||||
},
|
||||
"time": {
|
||||
enableTime: true,
|
||||
noCalendar: true,
|
||||
altFormat: "H:i",
|
||||
dateFormat: "H:i",
|
||||
altInput: true,
|
||||
time_24hr: true,
|
||||
},
|
||||
};
|
||||
|
||||
var datepickerUtil = function(element) {
|
||||
var flatpickrInstance;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Datepicker utility needs to be passed an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(DATEPICKER_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute("type")];
|
||||
|
||||
if (!flatpickrConfig) {
|
||||
throw new Error('Datepicker utility called on unsupported element!');
|
||||
}
|
||||
|
||||
flatpickrInstance = flatpickr(element, flatpickrConfig);
|
||||
|
||||
// mark initialized
|
||||
element.classList.add(DATEPICKER_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: DATEPICKER_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() { flatpickrInstance.destroy(); },
|
||||
};
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
formUtilities.push({
|
||||
name: DATEPICKER_UTIL_NAME,
|
||||
selector: DATEPICKER_UTIL_SELECTOR,
|
||||
setup: datepickerUtil,
|
||||
});
|
||||
|
||||
// debounce function, taken from Underscore.js
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
}
|
||||
|
||||
// register the collected form utilities
|
||||
if (UtilRegistry) {
|
||||
formUtilities.forEach((util) => {
|
||||
UtilRegistry.register(util);
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
200
static/es/utils/inputs.js
Normal file
200
static/es/utils/inputs.js
Normal file
@ -0,0 +1,200 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var inputUtilities = [];
|
||||
|
||||
/**
|
||||
*
|
||||
* FileInput Utility
|
||||
* wraps native file input
|
||||
*
|
||||
* Attribute: uw-file-input
|
||||
* (element must be an input of type='file')
|
||||
*
|
||||
* Example usage:
|
||||
* <input type='file' uw-file-input>
|
||||
*
|
||||
* Internationalization:
|
||||
* This utility expects the following translations to be available:
|
||||
* »filesSelected«: label of multi-input button after selection
|
||||
* example: "Dateien ausgewählt" (will be prepended by number of selected files)
|
||||
* »selectFile«: label of single-input button before selection
|
||||
* example: "Datei auswählen"
|
||||
* »selectFiles«: label of multi-input button before selection
|
||||
* example: "Datei(en) auswählen"
|
||||
*
|
||||
*/
|
||||
|
||||
var FILE_INPUT_UTIL_NAME = 'fileInput';
|
||||
var FILE_INPUT_UTIL_SELECTOR = 'input[type="file"][uw-file-input]';
|
||||
|
||||
var FILE_INPUT_CLASS = 'file-input';
|
||||
var FILE_INPUT_INITIALIZED_CLASS = 'file-input--initialized';
|
||||
var FILE_INPUT_LIST_CLASS = 'file-input__list';
|
||||
var FILE_INPUT_UNPACK_CHECKBOX_CLASS = 'file-input__unpack';
|
||||
var FILE_INPUT_LABEL_CLASS = 'file-input__label';
|
||||
|
||||
var fileInputUtil = function(element) {
|
||||
var isMultiFileInput = false;
|
||||
var fileList;
|
||||
var label;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('FileInput utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(FILE_INPUT_INITIALIZED_CLASS)) {
|
||||
throw new Error('FileInput utility already initialized!');
|
||||
}
|
||||
|
||||
// check if is multi-file input
|
||||
isMultiFileInput = element.hasAttribute('multiple');
|
||||
if (isMultiFileInput) {
|
||||
fileList = createFileList();
|
||||
}
|
||||
|
||||
label = createFileLabel();
|
||||
updateLabel();
|
||||
|
||||
// add change listener
|
||||
element.addEventListener('change', function() {
|
||||
updateLabel();
|
||||
renderFileList();
|
||||
});
|
||||
|
||||
// add util class for styling and mark as initialized
|
||||
element.classList.add(FILE_INPUT_CLASS, FILE_INPUT_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: FILE_INPUT_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function renderFileList() {
|
||||
if (!fileList) {
|
||||
return;
|
||||
}
|
||||
|
||||
var files = element.files;
|
||||
fileList.innerHTML = '';
|
||||
Array.from(files).forEach(function(file) {
|
||||
var fileDisplayEl = document.createElement('li');
|
||||
fileDisplayEl.innerHTML = file.name;
|
||||
fileList.appendChild(fileDisplayEl);
|
||||
});
|
||||
}
|
||||
|
||||
function createFileList() {
|
||||
var list = document.createElement('ol');
|
||||
list.classList.add(FILE_INPUT_LIST_CLASS);
|
||||
var unpackEl = element.parentElement.querySelector('.' + FILE_INPUT_UNPACK_CHECKBOX_CLASS);
|
||||
if (unpackEl) {
|
||||
element.parentElement.insertBefore(list, unpackEl);
|
||||
} else {
|
||||
element.parentElement.appendChild(list);
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
function createFileLabel() {
|
||||
var label = document.createElement('label');
|
||||
label.classList.add(FILE_INPUT_LABEL_CLASS);
|
||||
label.setAttribute('for', element.id);
|
||||
element.parentElement.insertBefore(label, element);
|
||||
return label;
|
||||
}
|
||||
|
||||
function updateLabel() {
|
||||
var files = element.files;
|
||||
if (files && files.length) {
|
||||
label.innerText = isMultiFileInput ? files.length + ' ' + I18n.get('filesSelected') : files[0].name;
|
||||
} else {
|
||||
label.innerText = isMultiFileInput ? I18n.get('selectFiles') : I18n.get('selectFile');
|
||||
}
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
inputUtilities.push({
|
||||
name: FILE_INPUT_UTIL_NAME,
|
||||
selector: FILE_INPUT_UTIL_SELECTOR,
|
||||
setup: fileInputUtil,
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* Checkbox Utility
|
||||
* wraps native checkbox
|
||||
*
|
||||
* Attribute: (none)
|
||||
* (element must be an input of type="checkbox")
|
||||
*
|
||||
* Example usage:
|
||||
* <input type="checkbox">
|
||||
*
|
||||
*/
|
||||
|
||||
var CHECKBOX_UTIL_NAME = 'checkbox';
|
||||
var CHECKBOX_UTIL_SELECTOR = 'input[type="checkbox"]';
|
||||
|
||||
var CHECKBOX_CLASS = 'checkbox';
|
||||
var CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized';
|
||||
|
||||
var checkboxUtil = function(element) {
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Checkbox utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(CHECKBOX_INITIALIZED_CLASS)) {
|
||||
// throw new Error('Checkbox utility already initialized!');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (element.parentElement.classList.contains(CHECKBOX_CLASS)) {
|
||||
// throw new Error('Checkbox element\'s wrapper already has class "' + CHECKBOX_CLASS + '"!');
|
||||
return false;
|
||||
}
|
||||
|
||||
var siblingEl = element.nextSibling;
|
||||
var parentEl = element.parentElement;
|
||||
|
||||
var wrapperEl = document.createElement('div');
|
||||
wrapperEl.classList.add(CHECKBOX_CLASS);
|
||||
|
||||
var labelEl = document.createElement('label');
|
||||
labelEl.setAttribute('for', element.id);
|
||||
|
||||
wrapperEl.appendChild(element);
|
||||
wrapperEl.appendChild(labelEl);
|
||||
|
||||
parentEl.insertBefore(wrapperEl, siblingEl);
|
||||
|
||||
element.classList.add(CHECKBOX_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: CHECKBOX_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
inputUtilities.push({
|
||||
name: CHECKBOX_UTIL_NAME,
|
||||
selector: CHECKBOX_UTIL_SELECTOR,
|
||||
setup: checkboxUtil,
|
||||
});
|
||||
|
||||
// register the collected input utilities
|
||||
if (UtilRegistry) {
|
||||
inputUtilities.forEach(UtilRegistry.register);
|
||||
}
|
||||
})();
|
||||
232
static/es/utils/massInput.js
Normal file
232
static/es/utils/massInput.js
Normal file
@ -0,0 +1,232 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
*
|
||||
* Mass Input Utility
|
||||
* allows form shapes to be manipulated asynchronously:
|
||||
* will asynchronously submit the containing form and replace the contents
|
||||
* of the mass input element with the one from the BE response
|
||||
* The utility will only trigger an AJAX request if the mass input element has
|
||||
* an active/focused element whilst the form is being submitted.
|
||||
*
|
||||
* Attribute: uw-mass-input
|
||||
*
|
||||
* Example usage:
|
||||
* <form method="POST" action="...">
|
||||
* <input type="text">
|
||||
* <div uw-mass-input>
|
||||
* <input type="text">
|
||||
* <button type="submit">
|
||||
*/
|
||||
|
||||
var MASS_INPUT_UTIL_NAME = 'massInput';
|
||||
var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
|
||||
|
||||
var MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
|
||||
var MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
|
||||
var MASS_INPUT_SUBMIT_BUTTON_CLASS = 'massinput__submit-button';
|
||||
var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
|
||||
|
||||
var massInputUtil = function(element) {
|
||||
var massInputId;
|
||||
var massInputFormSubmitHandler;
|
||||
var massInputForm;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('Mass Input utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(MASS_INPUT_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
massInputId = element.dataset.massInputIdent || '_';
|
||||
massInputForm = element.closest('form');
|
||||
|
||||
if (!massInputForm) {
|
||||
throw new Error('Mass Input utility cannot be setup without being wrapped in a <form>!');
|
||||
}
|
||||
|
||||
massInputFormSubmitHandler = makeSubmitHandler();
|
||||
|
||||
// setup submit buttons inside this massinput so browser
|
||||
// uses correct submit button for form submission.
|
||||
var buttons = getMassInputSubmitButtons();
|
||||
buttons.forEach(function(button) {
|
||||
setupSubmitButton(button);
|
||||
});
|
||||
|
||||
massInputForm.addEventListener('submit', massInputFormSubmitHandler);
|
||||
massInputForm.addEventListener('keypress', keypressHandler);
|
||||
|
||||
// mark initialized
|
||||
element.classList.add(MASS_INPUT_INITIALIZED_CLASS);
|
||||
|
||||
return {
|
||||
name: MASS_INPUT_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {
|
||||
reset();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function makeSubmitHandler() {
|
||||
if (!HttpClient) {
|
||||
throw new Error('HttpClient not found!');
|
||||
}
|
||||
|
||||
var method = massInputForm.getAttribute('method') || 'POST';
|
||||
var url = massInputForm.getAttribute('action') || window.location.href;
|
||||
var enctype = massInputForm.getAttribute('enctype') || 'application/json';
|
||||
|
||||
var requestFn;
|
||||
if (HttpClient[method.toLowerCase()]) {
|
||||
requestFn = HttpClient[method.toLowerCase()];
|
||||
}
|
||||
|
||||
return function(event) {
|
||||
var activeElement;
|
||||
|
||||
// check if event occured from either a mass input add/delete button or
|
||||
// from inside one of massinput's inputs (i.e. a child is focused/active)
|
||||
activeElement = element.querySelector(':focus, :active');
|
||||
|
||||
if (!activeElement) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// find the according massinput cell thats hosts the element that triggered the submit
|
||||
var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR);
|
||||
if (!massInputCell) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var submitButton = massInputCell.querySelector('.' + MASS_INPUT_SUBMIT_BUTTON_CLASS);
|
||||
if (!submitButton) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var isAddCell = massInputCell.matches(MASS_INPUT_ADD_CELL_SELECTOR);
|
||||
var submitButtonIsActive = submitButton.matches(':focus, :active');
|
||||
// if the cell is not an add cell the active element must at least be the cells submit button
|
||||
if (!isAddCell && !submitButtonIsActive) {
|
||||
return false;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
var requestBody = serializeForm(submitButton, enctype);
|
||||
|
||||
if (requestFn && requestBody) {
|
||||
var headers = {'Mass-Input-Shortcircuit': massInputId};
|
||||
|
||||
if (enctype !== 'multipart/form-data')
|
||||
headers['Content-Type'] = enctype;
|
||||
|
||||
requestFn({
|
||||
url: url,
|
||||
headers: headers,
|
||||
body: requestBody,
|
||||
accept: HttpClient.ACCEPT.TEXT_HTML,
|
||||
}).then(function(response) {
|
||||
return HtmlHelpers.parseResponse(response);
|
||||
}).then(function(response) {
|
||||
processResponse(response.element);
|
||||
if (isAddCell) {
|
||||
reFocusAddCell();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function keypressHandler(event) {
|
||||
if (event.keyCode !== 13) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (massInputFormSubmitHandler) {
|
||||
return massInputFormSubmitHandler(event);
|
||||
}
|
||||
}
|
||||
|
||||
function getMassInputSubmitButtons() {
|
||||
return Array.from(element.querySelectorAll('button[type="submit"][name][value], .' + MASS_INPUT_SUBMIT_BUTTON_CLASS));
|
||||
}
|
||||
|
||||
function setupSubmitButton(button) {
|
||||
button.setAttribute('type', 'button');
|
||||
button.classList.add(MASS_INPUT_SUBMIT_BUTTON_CLASS);
|
||||
button.addEventListener('click', massInputFormSubmitHandler);
|
||||
}
|
||||
|
||||
function resetSubmitButton(button) {
|
||||
button.setAttribute('type', 'submit');
|
||||
button.classList.remove(MASS_INPUT_SUBMIT_BUTTON_CLASS);
|
||||
button.removeEventListener('click', massInputFormSubmitHandler);
|
||||
}
|
||||
|
||||
function processResponse(responseElement) {
|
||||
element.innerHTML = "";
|
||||
element.appendChild(responseElement);
|
||||
|
||||
reset();
|
||||
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.setupAll(element);
|
||||
}
|
||||
}
|
||||
|
||||
function serializeForm(submitButton, enctype) {
|
||||
var formData = new FormData(massInputForm);
|
||||
|
||||
// manually add name and value of submit button to formData
|
||||
formData.append(submitButton.name, submitButton.value);
|
||||
|
||||
if (enctype === 'application/x-www-form-urlencoded') {
|
||||
return new URLSearchParams(formData);
|
||||
} else if (enctype === 'multipart/form-data') {
|
||||
return formData;
|
||||
} else {
|
||||
throw new Error('Unsupported form enctype: ' + enctype);
|
||||
}
|
||||
}
|
||||
|
||||
function reFocusAddCell() {
|
||||
var addCell = element.querySelector(MASS_INPUT_ADD_CELL_SELECTOR);
|
||||
if (!addCell) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var addCellInput = addCell.querySelector('input:not([type="hidden"])');
|
||||
if (addCellInput) {
|
||||
// Clearing of add-inputs is done in the backend
|
||||
addCellInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
|
||||
massInputForm.removeEventListener('submit', massInputFormSubmitHandler);
|
||||
massInputForm.removeEventListener('keypress', keypressHandler);
|
||||
|
||||
var buttons = getMassInputSubmitButtons();
|
||||
buttons.forEach(function(button) {
|
||||
resetSubmitButton(button);
|
||||
});
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
// register mass input util
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.register({
|
||||
name: MASS_INPUT_UTIL_NAME,
|
||||
selector: MASS_INPUT_UTIL_SELECTOR,
|
||||
setup: massInputUtil,
|
||||
});
|
||||
}
|
||||
})();
|
||||
212
static/es/utils/modal.js
Normal file
212
static/es/utils/modal.js
Normal file
@ -0,0 +1,212 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
*
|
||||
* Modal Utility
|
||||
*
|
||||
* Attribute: uw-modal
|
||||
*
|
||||
* Params:
|
||||
* data-modal-trigger: string
|
||||
* Selector for the element that toggles the modal.
|
||||
* If trigger element has "href" attribute the modal will be dynamically loaded from the referenced page
|
||||
* data-modal-closeable: boolean property
|
||||
* If the param is present the modal will have a close-icon and can also be closed by clicking anywhere on the overlay
|
||||
*
|
||||
* Example usage:
|
||||
* <div uw-modal data-modal-trigger='#trigger' data-modal-closeable>This is the modal content
|
||||
* <div id='trigger'>Click me to open the modal
|
||||
*/
|
||||
|
||||
var MODAL_UTIL_NAME = 'modal';
|
||||
var MODAL_UTIL_SELECTOR = '[uw-modal]';
|
||||
|
||||
var MODAL_HEADERS = {
|
||||
'Is-Modal': 'True',
|
||||
};
|
||||
|
||||
var MODAL_INITIALIZED_CLASS = 'modal--initialized';
|
||||
var MODAL_CLASS = 'modal';
|
||||
var MODAL_OPEN_CLASS = 'modal--open';
|
||||
var MODAL_TRIGGER_CLASS = 'modal__trigger';
|
||||
var MODAL_CONTENT_CLASS = 'modal__content';
|
||||
var MODAL_OVERLAY_CLASS = 'modal__overlay';
|
||||
var MODAL_OVERLAY_OPEN_CLASS = 'modal__overlay--open';
|
||||
var MODAL_CLOSER_CLASS = 'modal__closer';
|
||||
|
||||
var MAIN_CONTENT_CLASS = 'main__content-body';
|
||||
|
||||
// one singleton wrapper to keep all the modals to avoid CSS bug
|
||||
// with blurry text due to `transform: translate(-50%, -50%)`
|
||||
// will be created (and reused) for the first modal that gets initialized
|
||||
var MODALS_WRAPPER_CLASS = 'modals-wrapper';
|
||||
var MODALS_WRAPPER_SELECTOR = '.' + MODALS_WRAPPER_CLASS;
|
||||
var MODALS_WRAPPER_OPEN_CLASS = 'modals-wrapper--open';
|
||||
|
||||
var modalUtil = function(element) {
|
||||
|
||||
var modalsWrapper;
|
||||
var modalOverlay;
|
||||
var modalUrl;
|
||||
|
||||
function _init() {
|
||||
if (!element) {
|
||||
throw new Error('Modal utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(MODAL_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
ensureModalWrapper();
|
||||
|
||||
// param modalTrigger
|
||||
if (!element.dataset.modalTrigger) {
|
||||
throw new Error('Modal utility cannot be setup without a trigger element!');
|
||||
} else {
|
||||
setupTrigger();
|
||||
}
|
||||
|
||||
// param modalCloseable
|
||||
if (element.dataset.modalCloseable !== undefined) {
|
||||
setupCloser();
|
||||
}
|
||||
|
||||
// mark as initialized and add modal class for styling
|
||||
element.classList.add(MODAL_INITIALIZED_CLASS, MODAL_CLASS);
|
||||
|
||||
return {
|
||||
name: MODAL_UTIL_NAME,
|
||||
element: element,
|
||||
destroy: function() {},
|
||||
};
|
||||
}
|
||||
|
||||
function ensureModalWrapper() {
|
||||
modalsWrapper = document.querySelector(MODALS_WRAPPER_SELECTOR);
|
||||
if (!modalsWrapper) {
|
||||
// create modal wrapper
|
||||
modalsWrapper = document.createElement('div');
|
||||
modalsWrapper.classList.add(MODALS_WRAPPER_CLASS);
|
||||
document.body.appendChild(modalsWrapper);
|
||||
}
|
||||
|
||||
modalOverlay = modalsWrapper.querySelector('.' + MODAL_OVERLAY_CLASS);
|
||||
if (!modalOverlay) {
|
||||
// create modal overlay
|
||||
modalOverlay = document.createElement('div');
|
||||
modalOverlay.classList.add(MODAL_OVERLAY_CLASS);
|
||||
modalsWrapper.appendChild(modalOverlay);
|
||||
}
|
||||
}
|
||||
|
||||
function setupTrigger() {
|
||||
var triggerSelector = element.dataset.modalTrigger;
|
||||
if (!triggerSelector.startsWith('#')) {
|
||||
triggerSelector = '#' + triggerSelector;
|
||||
}
|
||||
var triggerElement = document.querySelector(triggerSelector);
|
||||
|
||||
if (!triggerElement) {
|
||||
throw new Error('Trigger element for Modal not found: "' + triggerSelector + '"');
|
||||
}
|
||||
|
||||
triggerElement.classList.add(MODAL_TRIGGER_CLASS);
|
||||
triggerElement.addEventListener('click', onTriggerClicked, false);
|
||||
modalUrl = triggerElement.getAttribute('href');
|
||||
}
|
||||
|
||||
function setupCloser() {
|
||||
var closerElement = document.createElement('div');
|
||||
element.insertBefore(closerElement, null);
|
||||
closerElement.classList.add(MODAL_CLOSER_CLASS);
|
||||
closerElement.addEventListener('click', onCloseClicked, false);
|
||||
modalOverlay.addEventListener('click', onCloseClicked, false);
|
||||
}
|
||||
|
||||
function onTriggerClicked(event) {
|
||||
event.preventDefault();
|
||||
open();
|
||||
}
|
||||
|
||||
function onCloseClicked(event) {
|
||||
event.preventDefault();
|
||||
close();
|
||||
}
|
||||
|
||||
function onKeyUp(event) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function open() {
|
||||
element.classList.add(MODAL_OPEN_CLASS);
|
||||
modalOverlay.classList.add(MODAL_OVERLAY_OPEN_CLASS);
|
||||
modalsWrapper.classList.add(MODALS_WRAPPER_OPEN_CLASS);
|
||||
modalsWrapper.appendChild(element);
|
||||
|
||||
if (modalUrl) {
|
||||
fillModal(modalUrl);
|
||||
}
|
||||
|
||||
document.addEventListener('keyup', onKeyUp);
|
||||
}
|
||||
|
||||
function close() {
|
||||
modalOverlay.classList.remove(MODAL_OVERLAY_OPEN_CLASS);
|
||||
element.classList.remove(MODAL_OPEN_CLASS);
|
||||
modalsWrapper.classList.remove(MODALS_WRAPPER_OPEN_CLASS);
|
||||
|
||||
document.removeEventListener('keyup', onKeyUp);
|
||||
};
|
||||
|
||||
function fillModal(url) {
|
||||
if (!HttpClient) {
|
||||
throw new Error('HttpClient not found! Can\'t fetch modal content from ' + url);
|
||||
}
|
||||
|
||||
HttpClient.get({
|
||||
url: url,
|
||||
headers: MODAL_HEADERS,
|
||||
accept: HttpClient.ACCEPT.TEXT_HTML,
|
||||
}).then(function(response) {
|
||||
return HtmlHelpers.parseResponse(response);
|
||||
}).then(function(response) {
|
||||
processResponse(response.element);
|
||||
});
|
||||
}
|
||||
|
||||
function processResponse(responseElement) {
|
||||
var modalContent = document.createElement('div');
|
||||
modalContent.classList.add(MODAL_CONTENT_CLASS);
|
||||
|
||||
var contentBody = responseElement.querySelector('.' + MAIN_CONTENT_CLASS);
|
||||
|
||||
if (contentBody) {
|
||||
modalContent.innerHTML = contentBody.innerHTML;
|
||||
}
|
||||
|
||||
var previousModalContent = element.querySelector('.' + MODAL_CONTENT_CLASS);
|
||||
if (previousModalContent) {
|
||||
previousModalContent.remove();
|
||||
}
|
||||
|
||||
element.insertBefore(modalContent, null);
|
||||
|
||||
// setup any newly arrived utils
|
||||
UtilRegistry.setupAll(element);
|
||||
}
|
||||
|
||||
return _init();
|
||||
};
|
||||
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.register({
|
||||
name: MODAL_UTIL_NAME,
|
||||
selector: MODAL_UTIL_SELECTOR,
|
||||
setup: modalUtil,
|
||||
});
|
||||
}
|
||||
})();
|
||||
114
static/es/utils/showHide.js
Normal file
114
static/es/utils/showHide.js
Normal file
@ -0,0 +1,114 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var SHOW_HIDE_UTIL_NAME = 'showHide';
|
||||
var SHOW_HIDE_UTIL_SELECTOR = '[uw-show-hide]';
|
||||
|
||||
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>Click me
|
||||
* <div>This will be toggled
|
||||
* <div>This will be toggled as well
|
||||
*/
|
||||
var showHideUtil = function(element) {
|
||||
|
||||
var showHideId;
|
||||
|
||||
function init() {
|
||||
if (!element) {
|
||||
throw new Error('ShowHide utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
if (element.classList.contains(SHOW_HIDE_INITIALIZED_CLASS)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 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 addClickListener() {
|
||||
element.addEventListener('click', function clickListener() {
|
||||
var newState = element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
|
||||
|
||||
if (showHideId) {
|
||||
setLocalStorage(showHideId, newState);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setLocalStorage(id, state) {
|
||||
var lsData = getLocalStorage();
|
||||
lsData[id] = state;
|
||||
window.localStorage.setItem(SHOW_HIDE_LOCAL_STORAGE_KEY, JSON.stringify(lsData));
|
||||
}
|
||||
|
||||
function getLocalStorage() {
|
||||
return JSON.parse(window.localStorage.getItem(SHOW_HIDE_LOCAL_STORAGE_KEY)) || {};
|
||||
}
|
||||
|
||||
return init();
|
||||
};
|
||||
|
||||
if (UtilRegistry) {
|
||||
UtilRegistry.register({
|
||||
name: SHOW_HIDE_UTIL_NAME,
|
||||
selector: SHOW_HIDE_UTIL_SELECTOR,
|
||||
setup: showHideUtil,
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
90
static/es/utils/tabber.js
Normal file
90
static/es/utils/tabber.js
Normal file
@ -0,0 +1,90 @@
|
||||
(function($) {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
'use strict';
|
||||
|
||||
// define plugin
|
||||
$.fn.tabgroup = function() {
|
||||
|
||||
var $this = $(this);
|
||||
var $openers = $('<div class="tab-group-openers"></div>');
|
||||
$this.prepend($openers);
|
||||
|
||||
var openedByDefault = $this.data('tab-open') || 0;
|
||||
var tabs = [];
|
||||
var currentTab = {};
|
||||
|
||||
$this.find('.tab').each(function(i, t) {
|
||||
var tab = $(t);
|
||||
tab.data('tab-index', i);
|
||||
var tabName = tab.data('tab-name') || 'Tab '+i;
|
||||
var tabFile = tab.data('tab-file') || false;
|
||||
var $opener = makeOpener(tabName, i);
|
||||
$openers.append($opener);
|
||||
if (tab.find('.tab-title')) {
|
||||
tab.find('.tab-title').remove();
|
||||
}
|
||||
tab.hide();
|
||||
var loaded = false;
|
||||
tabs.push({index: i, name: tabName, file: tabFile, dom: tab, opener: $opener, loaded: loaded });
|
||||
});
|
||||
|
||||
$this.on('click', 'a[href^="#"]', function(event) {
|
||||
var $target = $(event.currentTarget);
|
||||
var tab = getTabByName($target.attr('href').replace('#', ''));
|
||||
if ( tab ) {
|
||||
showTab(tab.index);
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
function getTabByName(name) {
|
||||
var it = -1;
|
||||
$.each(tabs, function(i, t) {
|
||||
if ( t.name.toLowerCase() === name.toLowerCase() ) {
|
||||
it = i;
|
||||
}
|
||||
});
|
||||
if ( it >= 0 ) {
|
||||
return tabs[it];
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function makeOpener(tabName, i) {
|
||||
return $('<span class="tab-opener">'+tabName+'</span>').
|
||||
on('click', function() {
|
||||
showTab(i);
|
||||
});
|
||||
}
|
||||
|
||||
function showTab(i) {
|
||||
tabs.forEach(function(t) {
|
||||
t.dom.hide();
|
||||
t.opener.removeClass('tab-visible');
|
||||
});
|
||||
currentTab = tabs[i];
|
||||
if ( !currentTab.loaded && currentTab.file ){
|
||||
$.get(currentTab.file, function(res) {
|
||||
currentTab.dom.html(res);
|
||||
currentTab.loaded = true;
|
||||
});
|
||||
}
|
||||
currentTab.opener.addClass('tab-visible');
|
||||
currentTab.dom.show();
|
||||
}
|
||||
|
||||
showTab(openedByDefault);
|
||||
currentTab = tabs[openedByDefault];
|
||||
|
||||
};
|
||||
|
||||
// apply plugin to all available tab-groups if on wide screen
|
||||
if (window.innerWidth > 768) {
|
||||
$('.tab-group').each(function(i, t) {
|
||||
$(t).tabgroup();
|
||||
});
|
||||
}
|
||||
});
|
||||
})($);
|
||||
Loading…
Reference in New Issue
Block a user