123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551 |
- const handleThemeUpdate = (cssVars) => {
- const root = document.querySelector(':root');
- const keys = Object.keys(cssVars);
- keys.forEach(key => {
- root.style.setProperty(key, cssVars[key]);
- });
- }
- const hex2rgb = (hex) => {
- const r = parseInt(hex.slice(1, 3), 16)
- const g = parseInt(hex.slice(3, 5), 16)
- const b = parseInt(hex.slice(5, 7), 16)
- return [r, g, b]
- }
- function dynamicPrimaryColor(primaryColor) {
- 'use strict'
- primaryColor.forEach((item) => {
- item.addEventListener('input', (e) => {
- document.querySelector('html').style.setProperty('--primary-rgb', hex2rgb(e.target.value));
- });
- });
- }
- function darkdynamicPrimaryColor(darkprimaryColor) {
- 'use strict'
- darkprimaryColor.forEach((item) => {
- item.addEventListener('input', (e) => {
- document.querySelector('html').style.setProperty('--primary-rgb', hex2rgb(e.target.value));
- });
- });
- }
- function imageBgdynamicPrimaryColor(imageprimaryColor) {
- 'use strict'
- imageprimaryColor.forEach((item) => {
- item.addEventListener('input', (e) => {
- document.querySelector('html').style.setProperty('--transparent-bg-rgb', hex2rgb(e.target.value));
- });
- });
- }
- function transparentdynamicPrimaryColor(primaryColor) {
- 'use strict'
- primaryColor.forEach((item) => {
- item.addEventListener('input', (e) => {
- document.querySelector('html').style.setProperty('--primary-rgb', hex2rgb(e.target.value));
- });
- });
- }
- (function () {
- 'use strict'
- // Light theme color picker
- const dynamicPrimaryLight = document.querySelectorAll('input.color-primary-light');
- dynamicPrimaryColor(dynamicPrimaryLight);
- // dark theme color picker
- const DarkDynamicPrimaryLight = document.querySelectorAll('input.color-primary-dark');
- darkdynamicPrimaryColor(DarkDynamicPrimaryLight);
- // tranparent theme color picker
- const transparentDynamicPrimaryLight = document.querySelectorAll('input.color-primary-transparent');
- transparentdynamicPrimaryColor(transparentDynamicPrimaryLight);
- // tranparent theme bgcolor picker
- const transparentDynamicPBgLight = document.querySelectorAll('input.color-bg-transparent');
- imageBgdynamicPrimaryColor(transparentDynamicPBgLight);
- localStorageBackup();
- $('#myonoffswitch1').on('click', function () {
- document.querySelector('body')?.classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('transparent-mode');
- document.querySelector('body')?.classList.remove('bg-img1');
- document.querySelector('body')?.classList.remove('bg-img2');
- document.querySelector('body')?.classList.remove('bg-img3');
- document.querySelector('body')?.classList.remove('bg-img4');
- localStorage.removeItem('sashBgImage');
- $('#myonoffswitch1').prop('checked', true);
- localStorage.setItem('sashlightMode', true);
- localStorage.removeItem('sashdarkMode');
- localStorage.removeItem('sashtransparentMode');
- })
- $('#myonoffswitch2').on('click', function () {
- document.querySelector('body')?.classList.remove('light-mode');
- document.querySelector('body')?.classList.remove('transparent-mode');
- document.querySelector('body')?.classList.remove('bg-img1');
- document.querySelector('body')?.classList.remove('bg-img2');
- document.querySelector('body')?.classList.remove('bg-img3');
- document.querySelector('body')?.classList.remove('bg-img4');
- localStorage.setItem('sashdarkMode', true);
- localStorage.removeItem('sashlightMode');
- localStorage.removeItem('sashtransparentMode');
- localStorage.removeItem('sashBgImage');
- $('#myonoffswitch2').prop('checked', true);
- })
- $('#myonoffswitchTransparent').on('click', function () {
- document.querySelector('body')?.classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('light-mode');
- document.querySelector('body')?.classList.remove('bg-img1');
- document.querySelector('body')?.classList.remove('bg-img2');
- document.querySelector('body')?.classList.remove('bg-img3');
- document.querySelector('body')?.classList.remove('bg-img4');
- localStorage.removeItem('sashBgImage');
- $('#myonoffswitchTransparent').prop('checked', true);
- localStorage.setItem('sashtransparentMode', true);
- localStorage.removeItem('sashlightMode');
- localStorage.removeItem('sashdarkMode');
- })
- })();
- // triggers on changing the color picker
- function changePrimaryColor() {
- 'use strict'
- $('#myonoffswitch3').prop('checked', true);
- $('#myonoffswitch6').prop('checked', true);
- checkOptions();
- var userColor = document.getElementById('colorID').value;
- localStorage.setItem('sashprimaryColor', hex2rgb(userColor));
- // removing dark theme properties
- localStorage.removeItem('sashdarkPrimary')
- localStorage.removeItem('sashtransparentBgColor');
- localStorage.removeItem('sashtransparentThemeColor');
- localStorage.removeItem('sashtransparentPrimary');
- localStorage.removeItem('sashtransparentBgImgPrimary');
- localStorage.removeItem('sashtransparentBgImgprimaryTransparent');
- localStorage.removeItem('sashdarkprimaryTransparent');
- document.querySelector('body').classList.add('light-mode');
- document.querySelector('body').classList.remove('transparent-mode');
- document.querySelector('body').classList.remove('dark-mode');
- localStorage.removeItem('sashBgImage');
- $('#myonoffswitch1').prop('checked', true);
- names()
- localStorage.setItem('sashlightMode', true);
- localStorage.removeItem('sashdarkMode');
- localStorage.removeItem('sashtransparentMode');
- }
- function darkPrimaryColor() {
- 'use strict'
- var userColor = document.getElementById('darkPrimaryColorID').value;
- localStorage.setItem('sashdarkPrimary', hex2rgb(userColor));
- $('#myonoffswitch5').prop('checked', true);
- $('#myonoffswitch8').prop('checked', true);
- checkOptions();
- // removing light theme data
- localStorage.removeItem('sashprimaryColor')
- localStorage.removeItem('sashprimaryHoverColor')
- localStorage.removeItem('sashprimaryBorderColor')
- localStorage.removeItem('sashprimaryTransparent');
- localStorage.removeItem('sashtransparentBgImgPrimary');
- localStorage.removeItem('sashtransparentBgImgprimaryTransparent');
- localStorage.removeItem('sashtransparentBgColor');
- localStorage.removeItem('sashtransparentThemeColor');
- localStorage.removeItem('sashtransparentPrimary');
- localStorage.removeItem('sashBgImage');
- document.querySelector('body').classList.add('dark-mode');
- document.querySelector('body').classList.remove('light-mode');
- document.querySelector('body').classList.remove('transparent-mode');
- $('#myonoffswitch2').prop('checked', true);
- names()
- localStorage.setItem('sashdarkMode', true);
- localStorage.removeItem('sashlightMode');
- localStorage.removeItem('sashtransparentMode');
- }
- function transparentPrimaryColor() {
- 'use strict'
- $('#myonoffswitch3').prop('checked', false);
- $('#myonoffswitch6').prop('checked', false);
- $('#myonoffswitch5').prop('checked', false);
- $('#myonoffswitch8').prop('checked', false);
- var userColor = document.getElementById('transparentPrimaryColorID').value;
- localStorage.setItem('sashtransparentPrimary', hex2rgb(userColor));
- // removing light theme data
- localStorage.removeItem('sashdarkPrimary');
- localStorage.removeItem('sashprimaryColor')
- localStorage.removeItem('sashprimaryHoverColor')
- localStorage.removeItem('sashprimaryBorderColor')
- localStorage.removeItem('sashprimaryTransparent');
- localStorage.removeItem('sashtransparentBgImgPrimary');
- localStorage.removeItem('sashtransparentBgImgprimaryTransparent');
- document.querySelector('body').classList.add('transparent-mode');
- document.querySelector('body').classList.remove('light-mode');
- document.querySelector('body').classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('bg-img1');
- document.querySelector('body')?.classList.remove('bg-img2');
- document.querySelector('body')?.classList.remove('bg-img3');
- document.querySelector('body')?.classList.remove('bg-img4');
- $('#myonoffswitchTransparent').prop('checked', true);
- checkOptions();
- names()
- localStorage.setItem('sashtransparentMode', true);
- localStorage.removeItem('sashlightMode');
- localStorage.removeItem('sashdarkMode');
- }
- function transparentBgImgPrimaryColor() {
- 'use strict'
- $('#myonoffswitch3').prop('checked', false);
- $('#myonoffswitch6').prop('checked', false);
- $('#myonoffswitch5').prop('checked', false);
- $('#myonoffswitch8').prop('checked', false);
- var userColor = document.getElementById('transparentBgImgPrimaryColorID').value;
- localStorage.setItem('sashtransparentBgImgPrimary', hex2rgb(userColor));
- if (
- document.querySelector('body')?.classList.contains('bg-img1') == false &&
- document.querySelector('body')?.classList.contains('bg-img2') == false &&
- document.querySelector('body')?.classList.contains('bg-img3') == false &&
- document.querySelector('body')?.classList.contains('bg-img4') == false
- ) {
- document.querySelector('body')?.classList.add('bg-img1');
- localStorage.setItem('sashBgImage', 'bg-img1')
- }
- // removing light theme data
- localStorage.removeItem('sashdarkPrimary');
- localStorage.removeItem('sashprimaryColor')
- localStorage.removeItem('sashprimaryHoverColor')
- localStorage.removeItem('sashprimaryBorderColor')
- localStorage.removeItem('sashprimaryTransparent');
- localStorage.removeItem('sashdarkprimaryTransparent');
- localStorage.removeItem('sashtransparentPrimary')
- localStorage.removeItem('sashtransparentprimaryTransparent');
- document.querySelector('body').classList.add('transparent-mode');
- document.querySelector('body')?.classList.remove('light-mode');
- document.querySelector('body')?.classList.remove('dark-mode');
- $('#myonoffswitchTransparent').prop('checked', true);
- checkOptions();
- names();
- localStorage.setItem('sashtransparentMode', true);
- localStorage.removeItem('sashlightMode');
- localStorage.removeItem('sashdarkMode');
- }
- function transparentBgColor() {
- 'use strict'
- $('#myonoffswitch3').prop('checked', false);
- $('#myonoffswitch6').prop('checked', false);
- $('#myonoffswitch5').prop('checked', false);
- $('#myonoffswitch8').prop('checked', false);
- var userColor = document.getElementById('transparentBgColorID').value;
- localStorage.setItem('sashtransparentBgColor', hex2rgb(userColor));
- localStorage.removeItem('sashtransparentBgImgPrimary');
- localStorage.removeItem('sashtransparentBgImgprimaryTransparent');
- // removing light theme data
- localStorage.removeItem('sashdarkPrimary');
- localStorage.removeItem('sashprimaryColor')
- localStorage.removeItem('sashprimaryHoverColor')
- localStorage.removeItem('sashprimaryBorderColor')
- localStorage.removeItem('sashprimaryTransparent');
- localStorage.removeItem('sashBgImage');
- document.querySelector('body').classList.add('transparent-mode');
- document.querySelector('body').classList.remove('light-mode');
- document.querySelector('body').classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('bg-img1');
- document.querySelector('body')?.classList.remove('bg-img2');
- document.querySelector('body')?.classList.remove('bg-img3');
- document.querySelector('body')?.classList.remove('bg-img4');
- $('#myonoffswitchTransparent').prop('checked', true);
- checkOptions();
- localStorage.setItem('sashtransparentMode', true);
- localStorage.removeItem('sashlightMode');
- localStorage.removeItem('sashdarkMode');
- }
- function bgImage(e) {
- 'use strict'
- $('#myonoffswitch3').prop('checked', false);
- $('#myonoffswitch6').prop('checked', false);
- $('#myonoffswitch5').prop('checked', false);
- $('#myonoffswitch8').prop('checked', false);
- let imgID = e.getAttribute('class');
- localStorage.setItem('sashBgImage', imgID);
- // removing light theme data
- localStorage.removeItem('sashdarkPrimary');
- localStorage.removeItem('sashprimaryColor')
- localStorage.removeItem('sashtransparentBgColor');
- localStorage.removeItem('sashtransparentThemeColor');
- localStorage.removeItem('sashtransparentprimaryTransparent');
- document.querySelector('body').classList.add('transparent-mode');
- document.querySelector('body')?.classList.remove('light-mode');
- document.querySelector('body')?.classList.remove('dark-mode');
- $('#myonoffswitchTransparent').prop('checked', true);
- checkOptions();
- localStorage.setItem('sashtransparentMode', true);
- localStorage.removeItem('sashlightMode');
- localStorage.removeItem('sashdarkMode');
- }
- function localStorageBackup() {
- 'use strict'
- // if there is a value stored, update color picker and background color
- // Used to retrive the data from local storage
- if (localStorage.sashprimaryColor) {
- if (document.getElementById('colorID')) {
- document.getElementById('colorID').value = localStorage.sashprimaryColor;
- }
- document.querySelector('html').style.setProperty('--primary-rgb', localStorage.sashprimaryColor);
- document.querySelector('body')?.classList.add('light-mode');
- document.querySelector('body')?.classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('transparent-mode');
- $('#myonoffswitch3').prop('checked', true);
- $('#myonoffswitch6').prop('checked', true);
- $('#myonoffswitch1').prop('checked', true);
- }
- if (localStorage.sashdarkPrimary) {
- if (document.getElementById('darkPrimaryColorID')) {
- document.getElementById('darkPrimaryColorID').value = localStorage.sashdarkPrimary;
- }
- document.querySelector('html').style.setProperty('--primary-rgb', localStorage.sashdarkPrimary);
- document.querySelector('body')?.classList.add('dark-mode');
- document.querySelector('body')?.classList.remove('light-mode');
- document.querySelector('body')?.classList.remove('transparent-mode');
- $('#myonoffswitch2').prop('checked', true);
- }
- if (localStorage.sashtransparentPrimary) {
- if (document.getElementById('transparentPrimaryColorID')) {
- document.getElementById('transparentPrimaryColorID').value = localStorage.sashtransparentPrimary;
- }
- document.querySelector('html').style.setProperty('--primary-rgb', localStorage.sashtransparentPrimary);
- document.querySelector('body')?.classList.add('transparent-mode');
- document.querySelector('body')?.classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('light-mode');
- $('#myonoffswitchTransparent').prop('checked', true);
- }
- if (localStorage.sashtransparentBgImgPrimary) {
- if (document.getElementById('transparentBgImgPrimaryColorID')) {
- document.getElementById('transparentBgImgPrimaryColorID').value = localStorage.sashtransparentBgImgPrimary;
- }
- document.querySelector('html').style.setProperty('--primary-rgb', localStorage.sashtransparentBgImgPrimary);
- document.querySelector('body')?.classList.add('transparent-mode');
- document.querySelector('body')?.classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('light-mode');
- $('#myonoffswitchTransparent').prop('checked', true);
- }
- if (localStorage.sashtransparentBgColor) {
- if (document.getElementById('transparentBgColorID')) {
- document.getElementById('transparentBgColorID').value = localStorage.sashtransparentBgColor;
- }
- document.querySelector('html').style.setProperty('--transparent-bg-rgb', localStorage.sashtransparentBgColor);
- document.querySelector('body').classList.add('transparent-mode');
- document.querySelector('body').classList.remove('dark-mode');
- document.querySelector('body').classList.remove('light-mode');
- $('#myonoffswitchTransparent').prop('checked', true);
- }
- if (localStorage.sashBgImage) {
- document.querySelector('body')?.classList.add('transparent-mode');
- let bgImg = localStorage.sashBgImage.split(' ')[0];
- document.querySelector('body')?.classList.add(bgImg);
- document.querySelector('body')?.classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('light-mode');
- $('#myonoffswitchTransparent').prop('checked', true);
- }
- if (localStorage.sashlightMode) {
- document.querySelector('body')?.classList.add('light-mode');
- document.querySelector('body')?.classList.remove('dark-mode');
- document.querySelector('body')?.classList.remove('transparent-mode');
- $('#myonoffswitch1').prop('checked', true);
- $('#myonoffswitch3').prop('checked', true);
- $('#myonoffswitch6').prop('checked', true);
- }
- if (localStorage.sashdarkMode) {
- document.querySelector('body')?.classList.remove('light-mode');
- document.querySelector('body')?.classList.add('dark-mode');
- document.querySelector('body')?.classList.remove('transparent-mode');
- $('#myonoffswitch2').prop('checked', true);
- $('#myonoffswitch5').prop('checked', true);
- $('#myonoffswitch8').prop('checked', true);
- }
- if (localStorage.sashtransparentMode) {
- document.querySelector('body')?.classList.remove('light-mode');
- document.querySelector('body')?.classList.remove('dark-mode');
- document.querySelector('body')?.classList.add('transparent-mode');
- $('#myonoffswitchTransparent').prop('checked', true);
- $('#myonoffswitch3').prop('checked', false);
- $('#myonoffswitch6').prop('checked', false);
- $('#myonoffswitch5').prop('checked', false);
- $('#myonoffswitch8').prop('checked', false);
- }
- if (localStorage.sashhorizontal) {
- document.querySelector('body').classList.add('horizontal')
- }
- if (localStorage.sashhorizontalHover) {
- document.querySelector('body').classList.add('horizontal-hover')
- }
- if (localStorage.sashrtl) {
- document.querySelector('body').classList.add('rtl')
- }
- if (localStorage.sashclosedmenu) {
- document.querySelector('body').classList.add('closed-leftmenu')
- }
- if (localStorage.sashicontextmenu) {
- document.querySelector('body').classList.add('icontext-menu')
- }
- if (localStorage.sashsideiconmenu) {
- document.querySelector('body').classList.add('icon-overlay')
- }
- if (localStorage.sashhoversubmenu) {
- document.querySelector('body').classList.add('hover-submenu')
- }
- if (localStorage.sashhoversubmenu1) {
- document.querySelector('body').classList.add('hover-submenu1')
- }
- if (localStorage.sashdoublemenu) {
- document.querySelector('body').classList.add('double-menu')
- }
- if (localStorage.sashdoublemenutabs) {
- document.querySelector('body').classList.add('double-menu-tabs')
- }
- if (localStorage.sashscrollable) {
- document.querySelector('body').classList.add('scrollable-layout')
- }
- if (localStorage.sashboxedwidth) {
- document.querySelector('body').classList.add('layout-boxed')
- }
- if (localStorage.sashlightheader) {
- document.querySelector('body').classList.add('header-light')
- }
- if (localStorage.sashcolorheader) {
- document.querySelector('body').classList.add('color-header')
- }
- if (localStorage.sashdarkheader) {
- document.querySelector('body').classList.add('dark-header')
- }
- if (localStorage.sashgradientheader) {
- document.querySelector('body').classList.add('gradient-header')
- }
- if (localStorage.sashlightmenu) {
- document.querySelector('body').classList.add('light-menu')
- }
- if (localStorage.sashcolormenu) {
- document.querySelector('body').classList.add('color-menu')
- }
- if (localStorage.sashdarkmenu) {
- document.querySelector('body').classList.add('dark-menu')
- }
- if (localStorage.sashgradientmenu) {
- document.querySelector('body').classList.add('gradient-menu')
- }
- if (localStorage.sashdefaultlogo) {
- document.querySelector('body').classList.add('default-logo')
- }
- if (localStorage.sashcenterlogo) {
- document.querySelector('body').classList.add('center-logo')
- }
- }
- // to check the value is hexa or not
- const isValidHex = (hexValue) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hexValue)
- const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, "g"))
- // convert hex value to 256
- const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16)
- // get alpha value is equla to 1 if there was no value is asigned to alpha in function
- const getAlphafloat = (a, alpha) => {
- if (typeof a !== "undefined") { return a / 255 }
- if ((typeof alpha != "number") || alpha < 0 || alpha > 1) {
- return 1
- }
- return alpha
- }
- // convertion of hex code to rgba code
- function hexToRgba(hexValue, alpha) {
- 'use strict'
- if (!isValidHex(hexValue)) { return null }
- const chunkSize = Math.floor((hexValue.length - 1) / 3)
- const hexArr = getChunksFromString(hexValue.slice(1), chunkSize)
- const [r, g, b, a] = hexArr.map(convertHexUnitTo256)
- return `rgba(${r}, ${g}, ${b}, ${getAlphafloat(a, alpha)})`
- }
- let myVarVal, myVarVal1, myVarVal2, myVarVal3,primaryColorVal
- function names() {
- 'use strict'
- primaryColorVal = getComputedStyle(document.documentElement).getPropertyValue('--primary-rgb').trim();
- //get variable
- myVarVal = localStorage.getItem("sashprimaryColor") || localStorage.getItem("sashdarkPrimary") || localStorage.getItem("sashtransparentPrimary") || localStorage.getItem("sashtransparentBgImgPrimary") ||primaryColorVal;
- myVarVal1 = localStorage.getItem("sashprimaryColor") || localStorage.getItem("sashdarkPrimary") || localStorage.getItem("sashtransparentPrimary") || localStorage.getItem("sashtransparentBgImgPrimary") || "#05c3fb";
- if (document.querySelector('#transactions') !== null) {
- index(myVarVal, myVarVal1);
- }
- }
- names();
|