1252 lines
34 KiB
JavaScript
1252 lines
34 KiB
JavaScript
/* global $, bootstrap, axios, i18next, i18nextHttpBackend */
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const isI18nReady = i18next.use(i18nextHttpBackend).init({
|
|
lng: document.documentElement.lang ?? 'sl',
|
|
ns: 'core',
|
|
nsSeparator: false,
|
|
keySeparator: false,
|
|
...(window.inDevEnv && { saveMissing: true }),
|
|
...(!window.inDevEnv && { fallbackLng: false })
|
|
})
|
|
|
|
const windows = ['#suggestions-root', '.advanced-search-root', '.kbd-root']
|
|
|
|
let isAdvancedSearchButtonPressedOddTimes = false
|
|
let isVirtualKeyboardPressedOddTimes = false
|
|
|
|
// Search field and virtual keyboard javascript
|
|
|
|
// ex. keyboard js
|
|
/* Render suggestion for the virtual keyboard */
|
|
|
|
// Presumably used in other files, like consultancy.js.
|
|
// eslint-disable-next-line no-unused-vars
|
|
function nthParent(element, num) {
|
|
if (num < 1) {
|
|
return element
|
|
} else {
|
|
element = element.parentNode
|
|
return nthParent(element, num - 1)
|
|
}
|
|
}
|
|
|
|
// TODO refactor code below
|
|
// All is a huge try block because the pages not containing any of the search items should NOT throw errors
|
|
|
|
function renderSuggestionsVK(text) {
|
|
renderSuggestions(
|
|
suggestions.filter(f => {
|
|
return f.substring(0, text.length).toLowerCase() === text.toLowerCase()
|
|
}),
|
|
root,
|
|
boundingBox,
|
|
'suggestions-root'
|
|
)
|
|
setVisibleSuggestionsRoot(true)
|
|
}
|
|
|
|
// ex. search-field js
|
|
// Depends on -> keyboard.js
|
|
|
|
// Definitions
|
|
// const rtcnt = '.search-suggestion-container'
|
|
const rootClass = '.search-suggestion-container'
|
|
const childOfRootId = 'suggestions-root'
|
|
const root = document.querySelector(rootClass)
|
|
// const rootRect = root.getBoundingClientRect()
|
|
/* paddingSearchRoot is linked to
|
|
.search-root-main {
|
|
padding: 0 20px;
|
|
...
|
|
} */
|
|
|
|
/* SEARCH FIELD INTERACTIONS */
|
|
|
|
/*
|
|
Intention of this file is to make tags in the advanced search.
|
|
|
|
Miha Stele 2021-12-01
|
|
*/
|
|
|
|
/* Classes */
|
|
|
|
class InputHandler {
|
|
constructor(element) {
|
|
this._id = element.id
|
|
// this.nameIsVisible = true
|
|
this.tags = []
|
|
this.focused = false
|
|
this.domElement = element
|
|
this.input = '' // select2-search__field TEXTAREA
|
|
// element.children[0].children[1].children[1].children[0].children[0].children[1].children[0]
|
|
this.labelText = element.children[0].children[1].children[1]
|
|
}
|
|
|
|
get id() {
|
|
return this._id
|
|
}
|
|
|
|
addTag(value) {
|
|
this.tags.push(value)
|
|
return value
|
|
}
|
|
|
|
removeTag(value) {
|
|
// console.log('removing ' + value)
|
|
this.tags = this.tags.filter(e => e !== value)
|
|
}
|
|
|
|
labelJump() {
|
|
// label text logic
|
|
if (this.tags.length > 0 || this.input.value.length > 0 || this.focused) {
|
|
this.labelText.classList = ['advanced-input-label jumped']
|
|
} else {
|
|
this.labelText.classList = ['advanced-input-label']
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
evaluate press enter logic
|
|
1. check if input value is empty
|
|
2. if not go onward
|
|
3. create Tag element and append it to taglist, and create an HTML dom that represnts UI of the tag
|
|
|
|
----structure as a pug file of the tag element: --------------
|
|
|
|
.search-filter-keyword-item.pt-1.pb-1.m-1.rounded-2
|
|
span.ps-2.pe-2= searchstring
|
|
button.pe-2.border-0.bg-transparent
|
|
img.text-white(src="/images/x-black.svg")
|
|
|
|
----------- end structure, see search-filter-keyword-item for the latest struct---
|
|
|
|
4. edit elements and sub elements
|
|
|
|
5. Update UI with the new DOM element
|
|
|
|
*/
|
|
}
|
|
|
|
/* Declarations */
|
|
|
|
const inputIds = [
|
|
'area',
|
|
'src-lang',
|
|
'dest-lang',
|
|
'dict',
|
|
'source',
|
|
'consultant'
|
|
]
|
|
const inputs = []
|
|
let activeInput = null
|
|
|
|
/* Functions */
|
|
|
|
function refreshLabels(inputs) {
|
|
inputs.forEach(inpt => inpt.labelJump())
|
|
}
|
|
|
|
/*
|
|
function handleInputTextToTag(event, activeInput) {
|
|
if (event.target.localName === 'input' && event.target.type === 'text') {
|
|
activeInput.evaluatePressEnter()
|
|
}
|
|
}
|
|
|
|
|
|
function imageOrbuttonQuery(event) {
|
|
return (
|
|
event.target.localName === 'img' || event.target.localName === 'button'
|
|
)
|
|
}
|
|
|
|
*/
|
|
|
|
/*
|
|
function inputAndTextQuery(event) {
|
|
return event.target.localName === 'input' && event.target.type === 'text'
|
|
}
|
|
|
|
|
|
function deleteImageButtonSelectedQuery(event) {
|
|
return (
|
|
event.target.localName === 'img' &&
|
|
event.target.parentNode.parentNode.id.length > 0
|
|
)
|
|
}
|
|
|
|
|
|
/*
|
|
function removeTag(event) {
|
|
let elt = null
|
|
|
|
if (event.target) {
|
|
if (deleteImageButtonSelectedQuery(event)) {
|
|
elt = event.target.parentNode.parentNode
|
|
} else if (
|
|
event.target.localName === 'button' &&
|
|
event.target.parentNode.id > 0
|
|
) {
|
|
elt = event.target.parentNode
|
|
}
|
|
} else {
|
|
return
|
|
}
|
|
|
|
if (elt !== null) {
|
|
activeInput.removeTag(elt)
|
|
}
|
|
}
|
|
|
|
|
|
function removeTag(event) {
|
|
if (event) activeInput.removeTag(event.target.value)
|
|
}
|
|
|
|
*/
|
|
|
|
function selectActiveElementFromInput(eventElement) {
|
|
if (
|
|
eventElement.target.localName === 'select' &&
|
|
eventElement.target.type === 'select-multiple'
|
|
) {
|
|
activeInput = inputs.filter(
|
|
e => e.id === eventElement.target.parentNode.parentNode.parentNode.id
|
|
)[0]
|
|
}
|
|
}
|
|
|
|
/* Logic */
|
|
let count = 0
|
|
|
|
inputIds.forEach(e => {
|
|
try {
|
|
const elt = document.getElementById(e)
|
|
// elt.onclick = inputFocusedLogic
|
|
const element = new InputHandler(elt)
|
|
element.enumeratedId = count
|
|
// add listener to the input element
|
|
inputs.push(element)
|
|
count++
|
|
} catch (e) {
|
|
// console.log("DEBUG: One or more elements don't exist in the list")
|
|
}
|
|
})
|
|
|
|
/* FILTERING RESULTS */
|
|
|
|
/*
|
|
Intention of this file is to render suggestions when typing in the search bar.
|
|
|
|
Miha Stele 2021-12-01
|
|
*/
|
|
|
|
// let bodyWidth = document.getElementsByTagName('body')
|
|
|
|
const boundingBox = document.querySelector('#searchbar-main')
|
|
// const boundingBoxRect = boundingBox.getBoundingClientRect()
|
|
|
|
let init
|
|
|
|
init = false
|
|
|
|
const suggestions = [
|
|
'cenik',
|
|
'cepivo',
|
|
'cisterna',
|
|
'copat',
|
|
'cokli',
|
|
'miza',
|
|
'milo',
|
|
'mir',
|
|
'minuta',
|
|
'minotaver'
|
|
]
|
|
|
|
function ajustElementSettings(element, options) {
|
|
if (element.localName === 'button') {
|
|
element.type = 'button'
|
|
} else if (element.type === 'a') {
|
|
element.href = options.href
|
|
}
|
|
}
|
|
|
|
function applyStyles(obb, styles) {
|
|
for (let i = 0; i < styles.length; i++) {
|
|
obb.style[Object.keys(styles[i])[0]] = styles[i][Object.keys(styles[i])[0]]
|
|
}
|
|
}
|
|
|
|
// Creation od DOM Elements
|
|
/* RENDER SUGGESTIONS ONLY GENERATES THE LIST, NOT THE PROPER CONTAINERS... */
|
|
function renderSuggestions(
|
|
suggestions,
|
|
root,
|
|
boundingBox,
|
|
childOfRootId = 'suggestions-root',
|
|
type = 'button',
|
|
prepend = true,
|
|
options = {
|
|
css: ['d-none-weak flex-column suggestion-popup'],
|
|
styles: [], // root styles (absolute positioning for example)
|
|
childStyles: [] // child of root styles(relative of the absolute for example)
|
|
}
|
|
) {
|
|
const existingElement = document.querySelector(`#${childOfRootId}`)
|
|
|
|
if (existingElement) {
|
|
existingElement.parentElement.removeChild(existingElement)
|
|
}
|
|
|
|
const searchSuggestionElementRoot = document.createElement('div')
|
|
searchSuggestionElementRoot.id = childOfRootId
|
|
searchSuggestionElementRoot.classList = options.css
|
|
/* searchSuggestionElementRoot.style.left = rootRect.left + 'px'
|
|
searchSuggestionElementRoot.style.top = rootRect.bottom - 7 + 'px'
|
|
searchSuggestionElementRoot.style.width = rootRect.right - rootRect.left + 'px' */
|
|
searchSuggestionElementRoot.style['z-index'] = '1000'
|
|
|
|
const preElement = document.createElement(type)
|
|
|
|
ajustElementSettings(preElement, options)
|
|
|
|
preElement.textContent = i18next.t('Za to besedo še ni podatkov.')
|
|
preElement.disabled = true
|
|
preElement.classList = ['w-100']
|
|
preElement.classList += ` ${type}-sugg`
|
|
// searchSuggestionElementRoot.appendChild(preElement)
|
|
|
|
for (const suggestion in suggestions) {
|
|
const currElement = document.createElement(type)
|
|
|
|
ajustElementSettings(currElement, options)
|
|
|
|
currElement.textContent = suggestions[suggestion]
|
|
currElement.classList = ['w-100']
|
|
currElement.classList += ` ${type}-sugg`
|
|
searchSuggestionElementRoot.append(currElement)
|
|
}
|
|
if (suggestions.length < 1) {
|
|
searchSuggestionElementRoot.append(preElement)
|
|
}
|
|
|
|
applyStyles(root, options.styles)
|
|
|
|
applyStyles(searchSuggestionElementRoot, options.childStyles)
|
|
|
|
/*
|
|
for (let i = 0; i < options.styles.length; i++) {
|
|
root.style[Object.keys(options.styles[i])[0]] =
|
|
options.styles[i][Object.keys(options.styles[i])[0]]
|
|
}
|
|
*/
|
|
|
|
if (prepend) {
|
|
root.prepend(searchSuggestionElementRoot)
|
|
} else {
|
|
root.append(searchSuggestionElementRoot)
|
|
}
|
|
|
|
// updatePopupDimensions(rootCont, boundingBox)
|
|
|
|
return searchSuggestionElementRoot
|
|
}
|
|
|
|
function removeSuggestions(root, childOfRootId) {
|
|
root.removeChild(document.getElementById(childOfRootId))
|
|
// updatePopupDimensions(rootCont, boundingBox)
|
|
}
|
|
|
|
/* UPDATE POSITIONING IN CASE SCROLLER GIVES AN UNUSUAL OFFSET TO THE SUGGESTION POPUP */
|
|
// function updatePopupDimensions(rootCont, boundingBox) {
|
|
// const boundingBoxRect = boundingBox.getBoundingClientRect()
|
|
|
|
// const offset = 0
|
|
|
|
// if (
|
|
// document.getElementsByTagName('body').clientWidth > bodyWidth.clientWidth
|
|
// ) {
|
|
// bodyWidth = document.getElementsByTagName('Body')
|
|
// offset = bodyWidth.offsetWidth - bodyWidth.clientWidth
|
|
// }
|
|
|
|
/* rootCont.style.position = 'absolute' */
|
|
/* rootCont.style.left = `${boundingBoxRect.left - offset / 2}px`
|
|
rootCont.style.right = `${boundingBoxRect.right - offset / 2}px`
|
|
rootCont.style.top = `${boundingBoxRect.bottom - 5}px`
|
|
rootCont.style.width = `${boundingBoxRect.right - boundingBoxRect.left}px` */
|
|
// }
|
|
|
|
// function moveContainer(rootClass, boundingBoxRect) {
|
|
// move suggestions container borders
|
|
// const rootCont = document.querySelector(rootClass)
|
|
/* rootCont.style.position = 'absolute' */
|
|
/* rootCont.style.left = `${boundingBoxRect.left}px`
|
|
rootCont.style.right = `${boundingBoxRect.right}px`
|
|
rootCont.style.top = `${boundingBoxRect.bottom - 5}px`
|
|
rootCont.style.width = `${boundingBoxRect.right - boundingBoxRect.left}px`
|
|
*/
|
|
// return rootCont
|
|
// }
|
|
|
|
// const rootCont = moveContainer(rootClass, boundingBox)
|
|
|
|
/* Handler for each input on the advanced window (deprecated?) */
|
|
|
|
// functions and listeners
|
|
|
|
/*
|
|
document.querySelector('.dropdown-btn').addEventListener('click', function () {
|
|
isAdvancedSearchButtonPressedOddTimes = !isAdvancedSearchButtonPressedOddTimes
|
|
})
|
|
|
|
document
|
|
.querySelector('.search-button-keyboard')
|
|
.addEventListener('click', function () {
|
|
isVirtualKeyboardPressedOddTimes = !isVirtualKeyboardPressedOddTimes
|
|
})
|
|
|
|
*/
|
|
/* visibilty updated to display to change the viewport */
|
|
|
|
/* search-field-interction.js logic visibility */
|
|
function setVisibleAdvancedSearch(isVisible) {
|
|
isVisible
|
|
? (document.querySelector(windows[1]).style.display = 'flex')
|
|
: (document.querySelector(windows[1]).style.display = 'none')
|
|
}
|
|
|
|
function setVisibleVirtualKeyboard(isVisible) {
|
|
isVisible
|
|
? (document.querySelector(windows[2]).style.display = 'flex')
|
|
: (document.querySelector(windows[2]).style.display = 'none')
|
|
}
|
|
|
|
/* search-field-filtering-results.js logic visibility */
|
|
function setVisibleSuggestionsRoot(isVisible) {
|
|
if (document.querySelector(windows[0])) {
|
|
isVisible
|
|
? (document.querySelector(windows[0]).style.display = 'flex')
|
|
: (document.querySelector(windows[0]).style.display = 'none')
|
|
}
|
|
}
|
|
|
|
/* DECLARATIONS */
|
|
|
|
// MOVED FUNCTIONS BECAUSE OF REQUIREMENT OF COMMON LOGIC
|
|
|
|
function virtualKeyboardCheck(keyboardButtonElement) {
|
|
if (keyboardButtonElement) {
|
|
keyboardButtonElement.addEventListener('click', () => {
|
|
isVirtualKeyboardPressedOddTimes = !isVirtualKeyboardPressedOddTimes
|
|
setVisibleVirtualKeyboard(isVirtualKeyboardPressedOddTimes)
|
|
})
|
|
}
|
|
}
|
|
|
|
const kbdBtn = document.querySelector('#keyboard')
|
|
virtualKeyboardCheck(kbdBtn)
|
|
|
|
const kbdBtnSmall = document.querySelector('#keyboard-sec')
|
|
virtualKeyboardCheck(kbdBtnSmall)
|
|
|
|
// REMOVED AFTER REBASE keyboardInit('#keyboard')
|
|
// REMOVED AFTER REBASE keyboardInit('#keyboard-sec')
|
|
|
|
const toggleShowHideFilterModal = () => {
|
|
isAdvancedSearchButtonPressedOddTimes = !isAdvancedSearchButtonPressedOddTimes
|
|
setVisibleAdvancedSearch(isAdvancedSearchButtonPressedOddTimes)
|
|
}
|
|
|
|
const advSrch = document.querySelector('#advanced-search')
|
|
|
|
if (advSrch) {
|
|
advSrch.addEventListener('click', toggleShowHideFilterModal)
|
|
}
|
|
|
|
function initAdvancedSearch(ASQueryElt) {
|
|
const el = document.querySelector(ASQueryElt)
|
|
if (el) {
|
|
el.addEventListener('click', toggleShowHideFilterModal)
|
|
}
|
|
}
|
|
|
|
initAdvancedSearch('#advanced-search')
|
|
initAdvancedSearch('#advanced-search-sec')
|
|
|
|
// close advanced search and virtual keyboard
|
|
function closeUtilityContainers() {
|
|
isAdvancedSearchButtonPressedOddTimes = false
|
|
setVisibleAdvancedSearch(isAdvancedSearchButtonPressedOddTimes)
|
|
isVirtualKeyboardPressedOddTimes = false
|
|
setVisibleVirtualKeyboard(isVirtualKeyboardPressedOddTimes)
|
|
}
|
|
|
|
// document.addEventListener('click', event => {
|
|
// try {
|
|
// // selectActiveElementFromAll(event)
|
|
|
|
// // moveContainer(rootClass, boundingBox)
|
|
// // updatePopupDimensions(rootCont, boundingBox)
|
|
|
|
// /*
|
|
// // remove the Tag node logic if clicked on delete
|
|
// if (
|
|
// event &&
|
|
// event.pointerType &&
|
|
// event.pointerType.length > 0 &&
|
|
// imageOrbuttonQuery(event) &&
|
|
// event.target.parentNode.parentNode.id &&
|
|
// event.target.parentNode.parentNode.id !== 'keyboard'
|
|
// ) {
|
|
// removeTag(event.target.value)
|
|
// }
|
|
// */
|
|
|
|
// refreshLabels(inputs)
|
|
|
|
// // console.log(event)
|
|
// if (event.target.classList[1].slice(-5) === '-sugg') {
|
|
// document.querySelector('#search-query.search-input').value =
|
|
// event.target.textContent
|
|
// }
|
|
|
|
// // updatePopupDimensions(rootCont, boundingBox)
|
|
// } catch (e) {
|
|
// // console.log(e)
|
|
// // console.log(e)
|
|
// }
|
|
// setVisibleSuggestionsRoot(false)
|
|
|
|
// // Below code is just calibration of the popup windows
|
|
// // moveContainer(rootClass, boundingBoxRect)
|
|
// // updatePopupDimensions(rootCont, boundingBox)
|
|
// })
|
|
|
|
if (advSrch) {
|
|
setVisibleAdvancedSearch(false)
|
|
}
|
|
|
|
if (kbdBtn) {
|
|
setVisibleVirtualKeyboard(false)
|
|
}
|
|
|
|
if (kbdBtnSmall) {
|
|
setVisibleVirtualKeyboard(false)
|
|
}
|
|
|
|
if (activeInput) {
|
|
activeInput.labelJump()
|
|
}
|
|
|
|
// TODO Uncomment when used.
|
|
|
|
let opened = false
|
|
const navButton = document.getElementById('nav-button')
|
|
const navContentButton = document.getElementById('nav-content-button')
|
|
if (navButton !== null)
|
|
navButton.addEventListener('click', () => {
|
|
toggleNav('slidable')
|
|
})
|
|
|
|
if (navContentButton !== null)
|
|
navContentButton.addEventListener('click', () => {
|
|
toggleNav('content-nav-content')
|
|
})
|
|
|
|
function openNav(classname) {
|
|
// document.getElementById(classname).style.right = "0px";
|
|
// document.getElementsByClassName(classname)[0].style.left = "0px";
|
|
document.getElementsByClassName(classname)[0].classList.add('opened')
|
|
document.getElementsByClassName(classname)[0].classList.remove('closed')
|
|
|
|
document
|
|
.getElementById('burger-menu-img')
|
|
.setAttribute('src', '/images/left-arrow.svg')
|
|
}
|
|
|
|
function closeNav(classname) {
|
|
// document.getElementById(classname).style.width = "400px";
|
|
// document.getElementsByClassName(classname)[0].style.left = "-320px";
|
|
document.getElementsByClassName(classname)[0].classList.add('closed')
|
|
document.getElementsByClassName(classname)[0].classList.remove('opened')
|
|
document
|
|
.getElementById('burger-menu-img')
|
|
.setAttribute('src', '/images/burger-menu-button-icon.svg')
|
|
}
|
|
|
|
function toggleNav(classname) {
|
|
if (opened) {
|
|
closeNav(classname)
|
|
} else {
|
|
openNav(classname)
|
|
}
|
|
opened = !opened
|
|
}
|
|
|
|
// jump-label-common.js
|
|
|
|
function addJumpLogic(element, labelElement) {
|
|
if (!labelElement.className.includes(' jumped-common'))
|
|
labelElement.className += ' jumped-common'
|
|
}
|
|
|
|
function removeJumpLogic(element, labelElement) {
|
|
// console.log(element.value.length)
|
|
if (element.value.length < 1) {
|
|
labelElement.className = labelElement.className.replace(
|
|
' jumped-common',
|
|
''
|
|
)
|
|
}
|
|
}
|
|
|
|
function addJumpLogicListener(element, labelElement) {
|
|
return function (event) {
|
|
addJumpLogic(element, labelElement)
|
|
}
|
|
}
|
|
|
|
function removeJumpLogicListener(element, labelElement) {
|
|
return function (event) {
|
|
removeJumpLogic(element, labelElement)
|
|
}
|
|
}
|
|
|
|
/*
|
|
function removeJumpLogicListenerIfNotEmpty(
|
|
element,
|
|
labelElement,
|
|
notEmptyCondition
|
|
) {
|
|
return function (event) {
|
|
removeJumpLogic(element, labelElement)
|
|
}
|
|
}
|
|
*/
|
|
|
|
const sfm = document.querySelector('#search-in-filter-modal')
|
|
if (sfm) {
|
|
sfm.addEventListener('click', toggleShowHideFilterModal)
|
|
|
|
sfm.addEventListener('click', () => {
|
|
isVirtualKeyboardPressedOddTimes = false
|
|
setVisibleVirtualKeyboard(isVirtualKeyboardPressedOddTimes)
|
|
})
|
|
}
|
|
|
|
// LOGIN AND REGISTER LOGIC
|
|
|
|
document.querySelectorAll('.loginregisterlabel').forEach(label => {
|
|
const inputEltRelated = label.parentElement.children[1]
|
|
inputEltRelated.addEventListener(
|
|
'focus',
|
|
addJumpLogicListener(inputEltRelated, label)
|
|
)
|
|
inputEltRelated.addEventListener(
|
|
'blur',
|
|
removeJumpLogicListener(inputEltRelated, label)
|
|
)
|
|
})
|
|
|
|
// PAGINATION LOGIC. Used on all pages with pagination.
|
|
/* eslint-disable no-unused-vars */
|
|
/**
|
|
* Enables pagination logic for the specified pager UI.
|
|
*
|
|
* @param {(string|string[])} paginationRootElIds - Pager element id.
|
|
* @param {function} onPageChange - Gets called with the number of the page the user requested.
|
|
* @returns {function} - Call it with (newCurrentPage, newNumOfAllPages) to update the ui. Or without arguments, after handling a potential error.
|
|
*/
|
|
function initPagination(paginationRootElIds, onPageChange, currentPage = 1) {
|
|
let reqLock = false
|
|
let numOfAllPages
|
|
const backwardBtnEls = []
|
|
const forwardBtnEls = []
|
|
const pageInputEls = []
|
|
const pagesCountDisplayEls = []
|
|
|
|
if (Array.isArray(paginationRootElIds)) {
|
|
paginationRootElIds.forEach(id => initControls(id))
|
|
} else {
|
|
initControls(paginationRootElIds)
|
|
}
|
|
const allControlEls = [...backwardBtnEls, ...forwardBtnEls, ...pageInputEls]
|
|
|
|
function initControls(paginationRootElId) {
|
|
const rootEl = document.getElementById(paginationRootElId)
|
|
const btnFirstPage = rootEl.querySelector('.first-page')
|
|
const btnPreviousPage = rootEl.querySelector('.previous-page')
|
|
const btnNextPage = rootEl.querySelector('.next-page')
|
|
const btnLastPage = rootEl.querySelector('.last-page')
|
|
const formEl = rootEl.querySelector('form')
|
|
const pageInputEl = formEl.querySelector('input')
|
|
const pagesCountDisplayEl = formEl.querySelector('.pages-total')
|
|
|
|
numOfAllPages = +pagesCountDisplayEl.textContent
|
|
|
|
backwardBtnEls.push(btnFirstPage, btnPreviousPage)
|
|
forwardBtnEls.push(btnNextPage, btnLastPage)
|
|
pageInputEls.push(pageInputEl)
|
|
pagesCountDisplayEls.push(pagesCountDisplayEl)
|
|
|
|
rootEl.addEventListener('click', e => {
|
|
handleButtonClick(e, paginationRootElId)
|
|
})
|
|
formEl.addEventListener('submit', e => handleFormSubmit(e, pageInputEl))
|
|
}
|
|
|
|
function handleButtonClick({ target }, paginationRootElId) {
|
|
if (reqLock) return
|
|
|
|
const buttonEl = target.closest(`#${paginationRootElId} button`)
|
|
if (!buttonEl) return
|
|
|
|
if (buttonEl.classList.contains('first-page')) {
|
|
if (currentPage === 1) return
|
|
enableLock()
|
|
onPageChange(1)
|
|
} else if (buttonEl.classList.contains('previous-page')) {
|
|
if (currentPage === 1) return
|
|
enableLock()
|
|
onPageChange(currentPage - 1)
|
|
} else if (buttonEl.classList.contains('next-page')) {
|
|
if (currentPage === numOfAllPages) return
|
|
enableLock()
|
|
onPageChange(currentPage + 1)
|
|
} else if (buttonEl.classList.contains('last-page')) {
|
|
if (currentPage === numOfAllPages) return
|
|
enableLock()
|
|
onPageChange(numOfAllPages)
|
|
}
|
|
}
|
|
|
|
function handleFormSubmit(e, pageInputEl) {
|
|
e.preventDefault()
|
|
if (reqLock) return
|
|
|
|
const inputValue = +pageInputEl.value
|
|
if (!(inputValue > 0 && inputValue <= numOfAllPages)) {
|
|
alert(i18next.t('Nepravilna vrednost strani'))
|
|
pageInputEl.value = currentPage
|
|
return
|
|
}
|
|
|
|
enableLock()
|
|
onPageChange(inputValue)
|
|
}
|
|
|
|
function enableLock() {
|
|
reqLock = true
|
|
allControlEls.forEach(el => (el.disabled = true))
|
|
}
|
|
|
|
function disableLock() {
|
|
reqLock = false
|
|
allControlEls.forEach(el => (el.disabled = false))
|
|
}
|
|
|
|
function updatePagerUi(newCurrentPage, newNumOfAllPages) {
|
|
disableLock()
|
|
if (!newCurrentPage) return
|
|
|
|
currentPage = newCurrentPage
|
|
numOfAllPages = newNumOfAllPages
|
|
pageInputEls.forEach(el => (el.value = newCurrentPage))
|
|
pagesCountDisplayEls.forEach(el => (el.textContent = newNumOfAllPages))
|
|
|
|
if (newCurrentPage === 1) {
|
|
backwardBtnEls.forEach(el => (el.disabled = true))
|
|
} else {
|
|
backwardBtnEls.forEach(el => (el.disabled = false))
|
|
}
|
|
|
|
if (newCurrentPage === newNumOfAllPages) {
|
|
forwardBtnEls.forEach(el => (el.disabled = true))
|
|
} else {
|
|
forwardBtnEls.forEach(el => (el.disabled = false))
|
|
}
|
|
}
|
|
|
|
return updatePagerUi
|
|
}
|
|
|
|
// Helper function to easily remove all child nodes. Useful for pagination.
|
|
function removeAllChildNodes(parent) {
|
|
while (parent.firstChild) {
|
|
parent.removeChild(parent.firstChild)
|
|
}
|
|
}
|
|
/* eslint-enable no-unused-vars */
|
|
|
|
{
|
|
// Rewrite "back" link URLs to referrer value if its host is the same as current page's.
|
|
const { referrer } = document
|
|
const currentPageHost = location.host
|
|
const previousPageHost = referrer.split('/')[2]
|
|
|
|
if (previousPageHost === currentPageHost) {
|
|
const backLinks = document.getElementsByClassName('link-back')
|
|
for (const link of backLinks) link.href = referrer
|
|
}
|
|
}
|
|
|
|
// Redundant function, but required to do so because of the form structure
|
|
function displayTheLoginScreen() {
|
|
const regBtn = document.querySelector('#regbtn')
|
|
const logintBtn = document.querySelector('#loginbtn')
|
|
const regForm = document.querySelector('#register-form')
|
|
const loginForm = document.querySelector('#login-form')
|
|
const regHeader = document.querySelector('.regtitle')
|
|
const loginHeader = document.querySelector('.logintitle')
|
|
const regDescription = document.querySelector('.regdesc')
|
|
const loginDescription = document.querySelector('.logindesc')
|
|
|
|
// Reset the values
|
|
const lUE = document.querySelector('#login-username-or-email')
|
|
lUE.value = ''
|
|
removeJumpLogic(lUE, lUE.parentElement.children[0])
|
|
|
|
const lPL = document.querySelector('#login-password')
|
|
lPL.value = ''
|
|
removeJumpLogic(lPL, lPL.parentElement.children[0])
|
|
|
|
const lUR = document.querySelector('#register-username')
|
|
lUR.value = ''
|
|
removeJumpLogic(lUR, lUR.parentElement.children[0])
|
|
|
|
const lRN = document.querySelector('#register-name')
|
|
lRN.value = ''
|
|
removeJumpLogic(lRN, lRN.parentElement.children[0])
|
|
|
|
const lRS = document.querySelector('#register-surname')
|
|
lRS.value = ''
|
|
removeJumpLogic(lRS, lRS.parentElement.children[0])
|
|
|
|
const lRE = document.querySelector('#register-email')
|
|
lRE.value = ''
|
|
removeJumpLogic(lRE, lRE.parentElement.children[0])
|
|
|
|
const lRP = document.querySelector('#register-password')
|
|
lRP.value = ''
|
|
removeJumpLogic(lRP, lRP.parentElement.children[0])
|
|
|
|
const lRPR = document.querySelector('#register-password-repeat')
|
|
lRPR.value = ''
|
|
removeJumpLogic(lRPR, lRPR.parentElement.children[0])
|
|
|
|
if (window.getComputedStyle(loginForm, null).display === 'none') {
|
|
regBtn.className = regBtn.className.replace('d-none', '')
|
|
logintBtn.className = logintBtn.className + ' d-none'
|
|
loginForm.className = loginForm.className.replace('d-none', '')
|
|
regForm.className = regForm.className + ' d-none'
|
|
loginHeader.className = loginHeader.className.replace('d-none', '')
|
|
regHeader.className = regHeader.className + ' d-none'
|
|
loginDescription.className = loginDescription.className.replace(
|
|
'd-none',
|
|
''
|
|
)
|
|
regDescription.className = regDescription.className + ' d-none'
|
|
}
|
|
}
|
|
|
|
function focusOnTheLoginRegisterPrompt() {
|
|
const registerForm = document.getElementById('register-form')
|
|
const loginForm = document.getElementById('login-form')
|
|
const loginUsernameField = document.getElementById('login-username-or-email')
|
|
const registerUsernameField = document.getElementById('register-username')
|
|
|
|
// element.style.display === 'block' only works for inline style CSS
|
|
if (
|
|
loginUsernameField &&
|
|
window.getComputedStyle(registerForm, null).display === 'none'
|
|
) {
|
|
loginUsernameField.focus()
|
|
} else if (
|
|
registerUsernameField &&
|
|
window.getComputedStyle(loginForm, null).display
|
|
) {
|
|
registerUsernameField.focus()
|
|
}
|
|
}
|
|
|
|
const myModal = document.getElementById('staticBackdrop')
|
|
|
|
myModal.addEventListener('show.bs.modal', displayTheLoginScreen)
|
|
myModal.addEventListener('shown.bs.modal', focusOnTheLoginRegisterPrompt)
|
|
|
|
const loginSwitchBtn = document.getElementById('loginbtn')
|
|
const registerSwithcButton = document.getElementById('regbtn')
|
|
|
|
if (loginSwitchBtn) {
|
|
loginSwitchBtn.addEventListener('click', focusOnTheLoginRegisterPrompt)
|
|
}
|
|
if (registerSwithcButton) {
|
|
registerSwithcButton.addEventListener('click', focusOnTheLoginRegisterPrompt)
|
|
}
|
|
|
|
{
|
|
let unsaved = false
|
|
function unsavedData(form, sideMenu, ajaxFunction) {
|
|
form.addEventListener('input', () => {
|
|
unsaved = true
|
|
})
|
|
$('.without-addition').on('change.select2', () => {
|
|
unsaved = true
|
|
})
|
|
sideMenu.addEventListener('click', () =>
|
|
handleMenuClick(form, event, ajaxFunction)
|
|
)
|
|
}
|
|
|
|
/* SELECT 2 */
|
|
|
|
function evaluateAlerModalTarget(pf, form, ajaxFunction) {
|
|
if (unsaved) {
|
|
event.preventDefault()
|
|
openUnsavedMixin(form, pf, ajaxFunction)
|
|
}
|
|
}
|
|
|
|
function handleMenuClick(form, event, ajaxFunction) {
|
|
// alert(event.target.tagName)
|
|
// alert(event.target.href)
|
|
if (event.target.tagName === 'A') {
|
|
evaluateAlerModalTarget(event.target.href, form, ajaxFunction)
|
|
} else if (event.target.tagName === 'P') {
|
|
evaluateAlerModalTarget(
|
|
event.target.parentElement.href,
|
|
form,
|
|
ajaxFunction
|
|
)
|
|
}
|
|
}
|
|
|
|
function openUnsavedMixin(form, goToHref, ajaxFunction) {
|
|
const unsavedModal = new bootstrap.Modal(
|
|
document.getElementById('unsaved-data')
|
|
)
|
|
unsavedModal.show()
|
|
const acceptBtn = document.getElementById('modal-save-btn')
|
|
if (ajaxFunction) {
|
|
acceptBtn.addEventListener('click', () => ajaxFunction(event))
|
|
} else acceptBtn.addEventListener('click', () => form.submit())
|
|
const dontSaveBtn = document.getElementById('modal-dont-save-btn')
|
|
dontSaveBtn.addEventListener(
|
|
'click',
|
|
() => (window.location.href = goToHref)
|
|
)
|
|
}
|
|
|
|
/* SELECT 2 */
|
|
|
|
function initSelect2(querySelector, placeholder) {
|
|
$(querySelector).select2({
|
|
// allowClear: true,
|
|
placeholder: placeholder
|
|
})
|
|
|
|
// $(querySelector).val(null).trigger('change')
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
// TODO refactor wth specific select2
|
|
|
|
isI18nReady.then(t => {
|
|
$('.select-search-field').select2({})
|
|
|
|
initSelect2('.select-domain-field', t('Področje'))
|
|
initSelect2('.select-src-lang-field', t('Jezik iskanja'))
|
|
initSelect2('.select-dest-lang-field', t('Ciljni jezik'))
|
|
initSelect2('.select-dict-field', t('Slovar'))
|
|
initSelect2('.select-source-field', t('Vir'))
|
|
|
|
$('b[role="presentation"]').hide()
|
|
$('.select2-selection__arrow').append(
|
|
'<img src="/images/chevron-down-darker.svg" alt="V"></img>'
|
|
)
|
|
|
|
$('.select-search-field').on('select2:select', function (e) {
|
|
selectActiveElementFromInput(e)
|
|
// console.log(activeInput)
|
|
// console.log(e.target.parentNode.children[2])
|
|
// const label = e.target.parentNode.children[2]
|
|
|
|
// console.log(activeInput)
|
|
// console.log(activeInput)
|
|
activeInput.addTag(e.params.data._resultId)
|
|
activeInput.labelJump()
|
|
})
|
|
|
|
$('.select-search-field').on('select2:unselect', function (e) {
|
|
selectActiveElementFromInput(e)
|
|
// console.log(activeInput)
|
|
// console.log(activeInput)
|
|
activeInput.removeTag(e.params.data._resultId)
|
|
activeInput.labelJump()
|
|
// console.log('DELETED ' + e)
|
|
})
|
|
|
|
inputs.forEach(e => {
|
|
e.input = e.domElement.querySelector('.select2-search__field')
|
|
})
|
|
})
|
|
})
|
|
|
|
/* TODO REMOVE OTHER SCRIPTS WHEN YOU FINISH MODULARIZING THINGS THAT COULD BE MODULARIZED */
|
|
|
|
/* window.addEventListener('resize', () => {
|
|
moveContainer(rootClass, boundingBoxRect)
|
|
// updatePopupDimensions(rootCont, boundingBox)
|
|
}) */
|
|
|
|
// select2.utils
|
|
|
|
inputs.forEach(e => {
|
|
$(`#${e.id}`).on('select2:open', function () {
|
|
e.focused = true
|
|
e.labelJump()
|
|
})
|
|
|
|
$(`#${e.id}`).on('select2:close', function () {
|
|
e.focused = false
|
|
e.labelJump()
|
|
})
|
|
})
|
|
|
|
try {
|
|
// Jquery for Select2
|
|
|
|
/*
|
|
$('#select-cerif').select2({
|
|
maximumSelectionLength: 1,
|
|
language: {
|
|
maximumSelected: function (e) {
|
|
return 'Izberete lahko največ 1 področje.'
|
|
}
|
|
}
|
|
})
|
|
*/
|
|
|
|
$('.multiple').select2({
|
|
minimumResultsForSearch: Infinity,
|
|
tags: true
|
|
})
|
|
|
|
$('.without-addition').select2({
|
|
minimumResultsForSearch: Infinity,
|
|
language: {
|
|
noResults: function () {
|
|
return 'Ni zadetkov.'
|
|
}
|
|
}
|
|
})
|
|
|
|
$('.without-addition').on('select2:select', function (evt) {
|
|
const element = evt.params.data.element
|
|
const $element = $(element)
|
|
$element.detach()
|
|
$(this).append($element)
|
|
$(this).trigger('change')
|
|
})
|
|
|
|
$('.without-dropdown').select2({
|
|
minimumResultsForSearch: Infinity,
|
|
tags: true,
|
|
dropdownCssClass: 'hide-dropdown'
|
|
})
|
|
} catch (e) {
|
|
// console.log(e)
|
|
}
|
|
}
|
|
|
|
function removeDisposableBreakOnSmallScreens() {
|
|
const optionalBreak = document.getElementById('disposable-break')
|
|
if (document.body.clientWidth <= 1200) {
|
|
optionalBreak.style.display = 'none'
|
|
} else {
|
|
optionalBreak.style.display = 'block'
|
|
}
|
|
}
|
|
|
|
function transferText(sideMenuText, removeOptionalBreak = false) {
|
|
const siteHeading = document.getElementById('site-heading')
|
|
const siteHeadingTextContent = siteHeading.textContent
|
|
const navTitle = document.getElementById('nav-title')
|
|
|
|
const optionalBreak = document.getElementById('disposable-break')
|
|
|
|
if (window.innerWidth < 1200) {
|
|
navTitle.textContent = siteHeadingTextContent
|
|
siteHeading.style.display = 'none'
|
|
if (removeOptionalBreak) {
|
|
removeDisposableBreakOnSmallScreens()
|
|
}
|
|
} else {
|
|
navTitle.textContent = sideMenuText
|
|
siteHeading.style.display = 'block'
|
|
if (removeOptionalBreak) {
|
|
removeDisposableBreakOnSmallScreens()
|
|
}
|
|
}
|
|
}
|
|
|
|
function replaceContainer(id, HTMLContent) {
|
|
const el = document.getElementById(id)
|
|
if (el) {
|
|
el.innerHTML = HTMLContent
|
|
}
|
|
}
|
|
|
|
// STATE MANAGER FOR WINDOWS IN FORGOT PASSWORD
|
|
class StateManager {
|
|
constructor() {
|
|
this.state = {}
|
|
}
|
|
|
|
setState(newState) {
|
|
this.state = { ...this.state, ...newState }
|
|
}
|
|
|
|
getState() {
|
|
return this.state
|
|
}
|
|
}
|
|
|
|
class StateManagerInvoker {
|
|
constructor(stateManager, invokeFunction) {
|
|
this.stateManager = stateManager
|
|
this.invokeFn = invokeFunction
|
|
}
|
|
|
|
setState(newState) {
|
|
this.stateManager.setState(newState)
|
|
this.invoke()
|
|
}
|
|
|
|
invoke() {
|
|
this.invokeFn()
|
|
}
|
|
}
|
|
|
|
const stateManager = new StateManager()
|
|
const forgottenPasswordInvoker = new StateManagerInvoker(stateManager, () => {
|
|
function closeAllFPRelatedModals() {
|
|
$('#staticBackdrop').modal('hide')
|
|
$('#reset-pass-modal').modal('hide')
|
|
$('#reset-pass-info').modal('hide')
|
|
}
|
|
|
|
function showLoginModal() {
|
|
$('#staticBackdrop').modal('show')
|
|
}
|
|
|
|
function showResetPasswordModal() {
|
|
$('#reset-pass-modal').modal('show')
|
|
}
|
|
|
|
function showResetPasswordModalSuccessOrFail() {
|
|
$('#reset-pass-info').modal('show')
|
|
}
|
|
|
|
function apllyDescriptionAccordingToState() {
|
|
$('#fpi-text').text(stateManager.getState().fpassWindowDescription)
|
|
}
|
|
|
|
closeAllFPRelatedModals()
|
|
switch (stateManager.getState().fpassWindowState) {
|
|
case ForgotPasswordState.LOGIN_SIGNUP:
|
|
showLoginModal()
|
|
break
|
|
case ForgotPasswordState.FORGOT_PASSWORD_MODAL:
|
|
showResetPasswordModal()
|
|
break
|
|
case ForgotPasswordState.FORGOT_PASSWORD_ERROR:
|
|
case ForgotPasswordState.FORGOT_PASSWORD_SUCCESS:
|
|
showResetPasswordModalSuccessOrFail()
|
|
apllyDescriptionAccordingToState()
|
|
break
|
|
default:
|
|
console.log('Unknown state')
|
|
}
|
|
})
|
|
|
|
const ForgotPasswordState = {
|
|
LOGIN_SIGNUP: 1,
|
|
FORGOT_PASSWORD_MODAL: 2,
|
|
FORGOT_PASSWORD_ERROR: 3,
|
|
FORGOT_PASSWORD_SUCCESS: 4
|
|
}
|
|
|
|
function onForgotPassword() {
|
|
forgottenPasswordInvoker.setState({
|
|
fpassWindowState: ForgotPasswordState.FORGOT_PASSWORD_MODAL
|
|
})
|
|
}
|
|
|
|
function onCancelForgotPassword() {
|
|
forgottenPasswordInvoker.setState({
|
|
fpassWindowState: ForgotPasswordState.LOGIN_SIGNUP
|
|
})
|
|
}
|
|
|
|
function onSendForgottenEmailRequest() {
|
|
if (document.getElementById('forgot-pass-input').value === '') {
|
|
stateManager.setState({
|
|
fpassWindowDescription: i18next.t(
|
|
'Prosimo vnesite vaš elektronski naslov.'
|
|
)
|
|
})
|
|
|
|
forgottenPasswordInvoker.setState({
|
|
fpassWindowState: ForgotPasswordState.FORGOT_PASSWORD_ERROR
|
|
})
|
|
return
|
|
}
|
|
|
|
axios
|
|
.post('/api/v1/users/reset-password-init', {
|
|
usernameOrEmail: document.getElementById('forgot-pass-input').value
|
|
})
|
|
.then(res => {
|
|
// const EMAIL = 'DUMMY_EMAIL'
|
|
|
|
// State manager because we don't want to invoker twice
|
|
// it is required to update description first before updating state of the invoker
|
|
stateManager.setState({
|
|
fpassWindowDescription: i18next.t(
|
|
'Na vaš elektronski naslov smo vam posredovali povezavo za ponastavitev gesla. Prosimo preverite svoj elektronski predal.'
|
|
)
|
|
})
|
|
|
|
forgottenPasswordInvoker.setState({
|
|
fpassWindowState: ForgotPasswordState.FORGOT_PASSWORD_SUCCESS
|
|
})
|
|
})
|
|
.catch(err => {
|
|
if (err.response && err.response.data) {
|
|
stateManager.setState({
|
|
fpassWindowDescription: err.response.data
|
|
})
|
|
} else {
|
|
stateManager.setState({
|
|
fpassWindowDescription: i18next.t(
|
|
'Prišlo je do napake pri pošiljanju sporočila na vaš elektronski naslov. Poskusite ponovno.'
|
|
)
|
|
})
|
|
}
|
|
|
|
forgottenPasswordInvoker.setState({
|
|
fpassWindowState: ForgotPasswordState.FORGOT_PASSWORD_ERROR
|
|
})
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
$('#modal-fp-cancel-btn').on('click', onCancelForgotPassword)
|
|
$('#modal-fp-use-btn').on('click', onSendForgottenEmailRequest)
|
|
$('#modal-fp-info-close').on('click', () => $('#reset-pass-info').modal('hide'))
|
|
$('#forgotten-password').on('click', onForgotPassword)
|