317 lines
11 KiB
JavaScript
317 lines
11 KiB
JavaScript
|
|
$(document).ready(function () {
|
|
|
|
$(document).on('click', '.btn-dropdown', function () {
|
|
const boxesBox = $(this).find('.boxes');
|
|
const scrollBox = $(this).find('.scroll');
|
|
const scrollMax = boxesBox[0].scrollHeight - boxesBox[0].clientHeight;
|
|
const scrollThumbHeigth = Math.round(getScrollThumbHeigth(boxesBox[0]));
|
|
|
|
scrollBox.css('--dasharray', scrollThumbHeigth + 1);
|
|
scrollBox.css('--dashoffset', getNewPosition(0));
|
|
|
|
boxesBox.scroll(function () {
|
|
const scroll = boxesBox.scrollTop();
|
|
scrollBox.css('--dashoffset', getNewPosition(scroll));
|
|
});
|
|
|
|
function getNewPosition(scroll) {
|
|
const min = scrollThumbHeigth;
|
|
const max = -242;
|
|
|
|
if (scroll === 0) { return min; }
|
|
|
|
if (scroll === scrollMax) { return max; }
|
|
|
|
const proportionalValue = min + ((max - min) * scroll) / scrollMax;
|
|
return proportionalValue;
|
|
}
|
|
|
|
function getScrollThumbHeigth(element) {
|
|
const visibleHeigth = element.clientHeight;
|
|
const totalHeigth = element.scrollHeight;
|
|
const proportion = visibleHeigth / totalHeigth;
|
|
const scrollThumbHeigth = proportion * visibleHeigth;
|
|
|
|
return scrollThumbHeigth;
|
|
}
|
|
});
|
|
|
|
/* --------------------------------------------------------------------------------Normal-------------------------------------------------------------------------------------- */
|
|
|
|
// dropdown normal
|
|
const selectedAllNormal = document.querySelectorAll(".wrapper-dropdown-normal");
|
|
|
|
selectedAllNormal.forEach((selected) => {
|
|
const optionsContainer = selected.children[2];
|
|
const optionsList = selected.querySelectorAll("div.wrapper-dropdown-normal ul li");
|
|
|
|
selected.addEventListener("click", () => {
|
|
let arrow = selected.children[1];
|
|
|
|
//if (selected.classList.contains("active")) {
|
|
// handleDropdown(selected, arrow, false);
|
|
//} else {
|
|
let currentActive = document.querySelector(".wrapper-dropdown-normal.active");
|
|
|
|
if (currentActive) {
|
|
let anotherArrow = currentActive.children[1];
|
|
handleDropdown(currentActive, anotherArrow, false);
|
|
}
|
|
|
|
handleDropdown(selected, arrow, true);
|
|
|
|
//}
|
|
});
|
|
|
|
// update the display of the dropdown normal
|
|
for (let o of optionsList) {
|
|
o.addEventListener("click", () => {
|
|
selected.querySelector(".selected-display").innerHTML = o.innerHTML;
|
|
});
|
|
}
|
|
|
|
$(document).on("click", '.dropdown-normal .item', function (e) {
|
|
$('.dropdown-normal .item').removeClass("active");
|
|
$(this).addClass("active");
|
|
closeAllDropdownsNormal();
|
|
});
|
|
});
|
|
|
|
// check if anything else ofther than the dropdown normal is clicked
|
|
window.addEventListener("click", function (e) {
|
|
if (e.target.closest(".wrapper-dropdown-normal") === null) {
|
|
closeAllDropdownsNormal();
|
|
}
|
|
});
|
|
|
|
// close all the dropdowns normal
|
|
function closeAllDropdownsNormal() {
|
|
const selectedNormal = document.querySelectorAll(".wrapper-dropdown-normal");
|
|
selectedNormal.forEach((selected) => {
|
|
const optionsContainer = selected.children[2];
|
|
let arrow = selected.children[1];
|
|
|
|
handleDropdown(selected, arrow, false);
|
|
});
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------------Year-------------------------------------------------------------------------------------- */
|
|
|
|
// dropdown year
|
|
const selectedAllYear = document.querySelectorAll(".wrapper-dropdown-year");
|
|
|
|
selectedAllYear.forEach( (selected) => {
|
|
const optionsContainer = selected.children[2];
|
|
const optionsList = selected.querySelectorAll("div.wrapper-dropdown-year ul li");
|
|
|
|
selected.addEventListener("click", () => {
|
|
let arrow = selected.children[1];
|
|
|
|
//if (selected.classList.contains("active")) {
|
|
// handleDropdown(selected, arrow, false);
|
|
//} else {
|
|
let currentActive = document.querySelector(".wrapper-dropdown-year.active");
|
|
|
|
if (currentActive) {
|
|
let anotherArrow = currentActive.children[1];
|
|
handleDropdown(currentActive, anotherArrow, false);
|
|
}
|
|
|
|
handleDropdown(selected, arrow, true);
|
|
|
|
//}
|
|
});
|
|
|
|
// update the display of the dropdown year
|
|
for (let o of optionsList) {
|
|
o.addEventListener("click", () => {
|
|
selected.querySelector(".selected-display").innerHTML = o.innerHTML;
|
|
});
|
|
}
|
|
|
|
$(document).on("click", '.dropdown-year .item', function (e) {
|
|
$('.dropdown-year .item').removeClass("active");
|
|
$(this).addClass("active");
|
|
closeAllDropdownsYesr();
|
|
});
|
|
});
|
|
|
|
// check if anything else ofther than the dropdown year is clicked
|
|
window.addEventListener("click", function (e) {
|
|
if (e.target.closest(".wrapper-dropdown-year") === null) {
|
|
closeAllDropdownsYesr();
|
|
}
|
|
});
|
|
|
|
// close all the dropdowns year
|
|
function closeAllDropdownsYesr() {
|
|
const selectedYear = document.querySelectorAll(".wrapper-dropdown-year");
|
|
selectedYear.forEach((selected) => {
|
|
const optionsContainer = selected.children[2];
|
|
let arrow = selected.children[1];
|
|
|
|
handleDropdown(selected, arrow, false);
|
|
});
|
|
}
|
|
|
|
|
|
/* --------------------------------------------------------------------------------Month-------------------------------------------------------------------------------------- */
|
|
|
|
// dropdown month
|
|
const selectedAllMonth = document.querySelectorAll(".wrapper-dropdown-month");
|
|
|
|
selectedAllMonth.forEach((selected) => {
|
|
const optionsContainer = selected.children[2];
|
|
const optionsList = selected.querySelectorAll("div.wrapper-dropdown-month li");
|
|
|
|
selected.addEventListener("click", () => {
|
|
let arrow = selected.children[1];
|
|
|
|
//if (selected.classList.contains("active")) {
|
|
// handleDropdown(selected, arrow, false);
|
|
//} else {
|
|
let currentActive = document.querySelector(".wrapper-dropdown-month.active");
|
|
|
|
if (currentActive) {
|
|
let anotherArrow = currentActive.children[1];
|
|
handleDropdown(currentActive, anotherArrow, false);
|
|
}
|
|
|
|
handleDropdown(selected, arrow, true);
|
|
//}
|
|
});
|
|
|
|
// update the display of the dropdown month
|
|
for (let o of optionsList) {
|
|
o.addEventListener("click", () => {
|
|
selected.querySelector(".selected-display").innerHTML = o.innerHTML;
|
|
});
|
|
}
|
|
|
|
$(document).on("click", '.dropdown-month .item', function (e) {
|
|
$('.dropdown-month .item').removeClass("active");
|
|
$(this).addClass("active");
|
|
closeAllDropdownsMonth();
|
|
});
|
|
});
|
|
|
|
// check if anything else ofther than the dropdown month is clicked
|
|
window.addEventListener("click", function (e) {
|
|
if (e.target.closest(".wrapper-dropdown-month") === null) {
|
|
closeAllDropdownsMonth();
|
|
}
|
|
});
|
|
|
|
|
|
// close all the dropdowns month
|
|
function closeAllDropdownsMonth() {
|
|
const selectedYear = document.querySelectorAll(".wrapper-dropdown-month");
|
|
selectedYear.forEach((selected) => {
|
|
const optionsContainer = selected.children[2];
|
|
let arrow = selected.children[1];
|
|
|
|
handleDropdown(selected, arrow, false);
|
|
});
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------------Invalid-------------------------------------------------------------------------------------- */
|
|
|
|
// dropdown invalid
|
|
const selectedAllInvalid = document.querySelectorAll(".wrapper-dropdown-invalid");
|
|
|
|
selectedAllInvalid.forEach((selected) => {
|
|
const optionsContainer = selected.children[2];
|
|
const optionsList = selected.querySelectorAll("div.wrapper-dropdown-invalid li");
|
|
|
|
selected.addEventListener("click", () => {
|
|
let arrow = selected.children[1];
|
|
|
|
let currentActive = document.querySelector(".wrapper-dropdown-invalid.active");
|
|
|
|
if (currentActive) {
|
|
let anotherArrow = currentActive.children[1];
|
|
handleDropdown(currentActive, anotherArrow, false);
|
|
}
|
|
|
|
handleDropdown(selected, arrow, true);
|
|
});
|
|
|
|
// update the display of the dropdown invalid
|
|
for (let o of optionsList) {
|
|
o.addEventListener("click", () => {
|
|
selected.querySelector(".selected-display").innerHTML = o.innerHTML;
|
|
});
|
|
}
|
|
|
|
$(document).on("click", '.dropdown-invalid .item', function (e) {
|
|
$('.dropdown-invalid .item').removeClass("active");
|
|
$(this).addClass("active");
|
|
closeAllDropdownsInvalid();
|
|
});
|
|
});
|
|
|
|
// check if anything else other than the dropdown invalid is clicked
|
|
window.addEventListener("click", function (e) {
|
|
if (e.target.closest(".wrapper-dropdown-invalid") === null) {
|
|
closeAllDropdownsInvalid();
|
|
}
|
|
});
|
|
|
|
// close all the dropdowns invalid
|
|
function closeAllDropdownsInvalid() {
|
|
const selectedInvalid = document.querySelectorAll(".wrapper-dropdown-invalid");
|
|
selectedInvalid.forEach((selected) => {
|
|
const optionsContainer = selected.children[2];
|
|
let arrow = selected.children[1];
|
|
handleDropdown(selected, arrow, false);
|
|
});
|
|
}
|
|
|
|
// open all the dropdowns
|
|
function handleDropdown(dropdown, arrow, open) {
|
|
if (open) {
|
|
arrow.classList.add("rotated");
|
|
dropdown.classList.add("active");
|
|
} else {
|
|
arrow.classList.remove("rotated");
|
|
dropdown.classList.remove("active");
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
// ---------------------------------------------------------------------------- DropDown Global
|
|
$(document).ready(function () {
|
|
let selectedItemValue = '';
|
|
|
|
$('.dropdown-global-btn').click(function () {
|
|
var dropdown = $(this).closest('.dropdown-global');
|
|
$('.dropdown-global').not(dropdown).removeClass('active');
|
|
dropdown.toggleClass('active');
|
|
});
|
|
|
|
$('.dropdown-global-item').click(function () {
|
|
$('.dropdown-global-item').removeClass('active');
|
|
$(this).addClass('active');
|
|
var selectedItem = $(this).text();
|
|
selectedItemValue = $(this).data('value');
|
|
|
|
var dropdown = $(this).closest('.dropdown-global');
|
|
|
|
dropdown.find('.dropdown-global-btn').contents().filter(function () {
|
|
return this.nodeType === 3;
|
|
}).first().replaceWith(selectedItem + ' ');
|
|
|
|
dropdown.removeClass('active');
|
|
});
|
|
|
|
$(document).click(function () {
|
|
$('.dropdown-global').removeClass('active');
|
|
});
|
|
|
|
$('.dropdown-global').click(function (e) {
|
|
e.stopPropagation();
|
|
});
|
|
}); |