lots of updates
This commit is contained in:
@@ -1,7 +1,3 @@
|
||||
<script setup>
|
||||
//
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border-t border-gray-100"></div>
|
||||
<div class="border-t border-gray-100"></div>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
<script setup>
|
||||
//
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="block px-4 py-2 text-xs text-gray-400">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="block px-4 py-2 text-xs text-gray-400">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
35
src/resources/js/theme-change/btn.js
Normal file
35
src/resources/js/theme-change/btn.js
Normal file
@@ -0,0 +1,35 @@
|
||||
function themeBtn() {
|
||||
(function (theme = localStorage.getItem("theme")) {
|
||||
if (theme != undefined && theme != '') {
|
||||
if (localStorage.getItem("theme") && localStorage.getItem("theme") != '') {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
var btnEl = document.querySelector("[data-set-theme='" + theme.toString() + "']");
|
||||
if (btnEl) {
|
||||
[...document.querySelectorAll("[data-set-theme]")].forEach((el) => {
|
||||
el.classList.remove(el.getAttribute('data-act-class'));
|
||||
});
|
||||
if (btnEl.getAttribute('data-act-class')) {
|
||||
btnEl.classList.add(btnEl.getAttribute('data-act-class'));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var btnEl = document.querySelector("[data-set-theme='']");
|
||||
if (btnEl.getAttribute('data-act-class')) {
|
||||
btnEl.classList.add(btnEl.getAttribute('data-act-class'));
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
[...document.querySelectorAll("[data-set-theme]")].forEach((el) => {
|
||||
el.addEventListener("click", function () {
|
||||
document.documentElement.setAttribute("data-theme", this.getAttribute('data-set-theme'));
|
||||
localStorage.setItem("theme", document.documentElement.getAttribute('data-theme'));
|
||||
[...document.querySelectorAll("[data-set-theme]")].forEach((el) => {
|
||||
el.classList.remove(el.getAttribute('data-act-class'));
|
||||
});
|
||||
if (el.getAttribute('data-act-class')) {
|
||||
el.classList.add(el.getAttribute('data-act-class'));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
13
src/resources/js/theme-change/callAll.js
Normal file
13
src/resources/js/theme-change/callAll.js
Normal file
@@ -0,0 +1,13 @@
|
||||
function themeChange(attach = true) {
|
||||
if (attach === true) {
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
themeToggle()
|
||||
themeSelect()
|
||||
themeBtn()
|
||||
})
|
||||
}else{
|
||||
themeToggle()
|
||||
themeSelect()
|
||||
themeBtn()
|
||||
}
|
||||
}
|
||||
9
src/resources/js/theme-change/callBtn.js
Normal file
9
src/resources/js/theme-change/callBtn.js
Normal file
@@ -0,0 +1,9 @@
|
||||
function themeChange(attach = true) {
|
||||
if (attach === true) {
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
themeBtn()
|
||||
})
|
||||
}else{
|
||||
themeBtn()
|
||||
}
|
||||
}
|
||||
9
src/resources/js/theme-change/callSelect.js
Normal file
9
src/resources/js/theme-change/callSelect.js
Normal file
@@ -0,0 +1,9 @@
|
||||
function themeChange(attach = true) {
|
||||
if (attach === true) {
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
themeSelect()
|
||||
})
|
||||
}else{
|
||||
themeSelect()
|
||||
}
|
||||
}
|
||||
9
src/resources/js/theme-change/callToggle.js
Normal file
9
src/resources/js/theme-change/callToggle.js
Normal file
@@ -0,0 +1,9 @@
|
||||
function themeChange(attach = true) {
|
||||
if (attach === true) {
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
themeToggle()
|
||||
})
|
||||
}else{
|
||||
themeToggle()
|
||||
}
|
||||
}
|
||||
7
src/resources/js/theme-change/export.js
Normal file
7
src/resources/js/theme-change/export.js
Normal file
@@ -0,0 +1,7 @@
|
||||
if (typeof exports != "undefined") {
|
||||
module.exports = {
|
||||
themeChange: themeChange
|
||||
}
|
||||
} else {
|
||||
themeChange()
|
||||
}
|
||||
3
src/resources/js/theme-change/index.d.ts
vendored
Normal file
3
src/resources/js/theme-change/index.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
declare module 'theme-change'{
|
||||
export function themeChange(swap:boolean = true):void
|
||||
}
|
||||
24
src/resources/js/theme-change/select.js
Normal file
24
src/resources/js/theme-change/select.js
Normal file
@@ -0,0 +1,24 @@
|
||||
function themeSelect() {
|
||||
(function (theme = localStorage.getItem("theme")) {
|
||||
if (localStorage.getItem("theme")) {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
var optionToggler = document.querySelector("select[data-choose-theme] [value='" + theme.toString() + "']");
|
||||
if (optionToggler) {
|
||||
[...document.querySelectorAll("select[data-choose-theme] [value='" + theme.toString() + "']")].forEach((el) => {
|
||||
el.selected = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
if (document.querySelector('select[data-choose-theme]')) {
|
||||
[...document.querySelectorAll("select[data-choose-theme]")].forEach((el) => {
|
||||
el.addEventListener('change', function () {
|
||||
document.documentElement.setAttribute("data-theme", this.value);
|
||||
localStorage.setItem("theme", document.documentElement.getAttribute('data-theme'));
|
||||
[...document.querySelectorAll("select[data-choose-theme] [value='" + localStorage.getItem("theme") + "']")].forEach((el) => {
|
||||
el.selected = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
38
src/resources/js/theme-change/toggle.js
Normal file
38
src/resources/js/theme-change/toggle.js
Normal file
@@ -0,0 +1,38 @@
|
||||
function themeToggle() {
|
||||
var toggleEl = document.querySelector("[data-toggle-theme]");
|
||||
(function (theme = localStorage.getItem("theme")) {
|
||||
if (localStorage.getItem("theme")) {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
if (toggleEl) {
|
||||
[...document.querySelectorAll("[data-toggle-theme]")].forEach((el) => {
|
||||
el.classList.add(toggleEl.getAttribute('data-act-class'));
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
if (toggleEl) {
|
||||
[...document.querySelectorAll("[data-toggle-theme]")].forEach((el) => {
|
||||
el.addEventListener("click", function () {
|
||||
var themesList = el.getAttribute('data-toggle-theme');
|
||||
if (themesList) {
|
||||
var themesArray = themesList.split(",");
|
||||
if (document.documentElement.getAttribute('data-theme') == themesArray[0]) {
|
||||
if (themesArray.length == 1) {
|
||||
document.documentElement.removeAttribute("data-theme");
|
||||
localStorage.removeItem("theme");
|
||||
}else{
|
||||
document.documentElement.setAttribute("data-theme", themesArray[1]);
|
||||
localStorage.setItem("theme", themesArray[1]);
|
||||
}
|
||||
} else {
|
||||
document.documentElement.setAttribute("data-theme", themesArray[0]);
|
||||
localStorage.setItem("theme", themesArray[0]);
|
||||
}
|
||||
}
|
||||
[...document.querySelectorAll("[data-toggle-theme]")].forEach((el) => {
|
||||
el.classList.toggle(this.getAttribute('data-act-class'));
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user