mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Better security, Introduce efy modules, Webkit support
This commit is contained in:
Dragos
GitHub
parent
cb8b1dfccd
commit
cade2e5c36
1 changed files with 192 additions and 199 deletions
391
efy/efy.js
391
efy/efy.js
|
|
@ -1,209 +1,211 @@
|
|||
/*EFY UI 2022.09.11*/ let e$ = document.querySelector.bind(document), e$all = document.querySelectorAll.bind(document), e$create = document.createElement.bind(document), e$body, e$root; window.onload =async ()=>{ e$root = e$(":root"), e$body = e$("body");
|
||||
/*EFY UI 2022.09.28*/ let $ = document.querySelector.bind(document), $all = document.querySelectorAll.bind(document), $create = document.createElement.bind(document), $body, $root, $efy_module,
|
||||
/*Append: Where, Element*/ $append = (where, el) =>{ where.appendChild(el)},
|
||||
/*Insert: Where, Position, Element*/ $insert = (where, pos, el) =>{ where.insertAdjacentElement(pos,el)},
|
||||
/*Get CSS Property*/ $css_prop = (a) =>{ return getComputedStyle($root).getPropertyValue(a).replaceAll(' ','')},
|
||||
/*Add: Element, {Attributes}, [Children, Text] (optional)*/ $add = (el, atb = {}, cld = []) => { const x = $create(el);
|
||||
for (let a = Object.keys(atb), b= Object.values(atb), i = 0; i < a.length; i++){ x.setAttribute(a[i], b[i])}
|
||||
cld.forEach(c => { if(!c) return; const cd = (typeof c === 'string') ? document.createTextNode(c) : c; x.appendChild(cd) })
|
||||
return x},
|
||||
/*Cursor FN*/ cursor_fn = (e) =>{let x = $('[efy_cursor]'); x.style.left = e.pageX + 'px'; x.style.top = e.pageY + 'px'};
|
||||
|
||||
/*Check LocalStorage*/ try {let x = 'LS'; localStorage.setItem(x, x); let y = localStorage.getItem(x); localStorage.removeItem(x); if (x !== y) {throw new Error();}} catch (exception) {e$('body').innerHTML = `<div efy_alert style="background: #eee"><div><h6><a>EFY</a> - Your browser blocks LocalStorage</h6><p>You can block 3rd party cookies, no worries, Privacy matters! But please allow 1st party cookies in your browser's settings. EFY<b>doesn't</b> use cookies or track you, but the settings related to LocalStorage are grouped as "cookies", although different. Have fun! 🥳</p></div></div>`}
|
||||
window.onload = async ()=>{ $root = $(":root"), $body = $("body"); $efy_module = (a) =>{ let b = $css_prop('--efy_modules').split(',').includes(a) ? true : false; return b}; let a;
|
||||
|
||||
/*Add Sidebar*/ e$('body').insertAdjacentHTML('beforeend', `
|
||||
<div class="efy_sidebar" id="efy_sidebar" efy_search="details:not(.efy_quick_shortcuts, [efy_logo]), #efy_sidebar [efy_tabs] > *"><details efy_logo efy_help><summary><a href="https://efy.ooo">EFY</a> UI</summary>This page uses <a href="https://efy.ooo/ui">EFY UI</a>, a customisable, convergent, transparent, modular, futuristic css / js framework that can be added to your own web / local apps & websites.<br /><br />If you'd like to learn how it works or support the project, check it out here: <a href="https://efy.ooo/ui">https://efy.ooo/ui</a></details><div efy_sidebar_btn_close></div>
|
||||
/*Check LocalStorage*/ try {let x = 'LS'; localStorage.setItem(x, x); let y = localStorage.getItem(x); localStorage.removeItem(x); if (x !== y) {throw new Error()}} catch (exception) {$append($body, $add('div', {class: 'efy_no_ls', efy_alert: '', style: 'background: #eee; grid-template-columns: 1fr; gap: 0'}, [$add('h6', {}, ['EFY - Your browser blocks LocalStorage']), $add('p', {}, ["Privacy matters! So block 3rd party cookies if you want, no worries, but please allow 1st party cookies in your browser's settings, to be able to save your EFY preferences locally. Have fun!"])]))}
|
||||
|
||||
<details class="efy_quick_shortcuts"><summary><i efy_icon="star"></i>Quick Shortcuts</summary>
|
||||
<div class="efy_quick_buttons">
|
||||
<button class="efy_quick_search"><i efy_icon="search"></i></button>
|
||||
<button class="efy_quick_reload"><i efy_icon="reload"></i></button>
|
||||
<button class="efy_quick_fullscreen"><i efy_icon="fullscreen"></i></button>
|
||||
<button class="efy_quick_back"><i efy_icon="chevron"></i></button>
|
||||
<button class="efy_quick_forward"><i efy_icon="chevron"></i></button>
|
||||
<input type="text" efy_search_input efy_display_none placeholder="Search through menu..." /></div>
|
||||
/*Sidebar Modules*/ $append($body, $add('div', {id: 'efy_sidebar', class: 'efy_sidebar', efy_search: 'details:not(.efy_quick_shortcuts, [efy_logo]), .efy_sidebar [efy_tabs] > *'}, [ $add('div', {efy_about: ''}, [
|
||||
$add('details', {class: 'efy_about', efy_logo: ''}, [
|
||||
$add('summary', {}, [$add('code', {}, ['EFY']), $add('code', {}, [' UI']) ]),
|
||||
$add('div', {}, ['This page uses ', $add('code', {}, ['EFY']), ', a customisable, convergent, transparent, modular, futuristic css / js framework that can be added to your own web / local apps & websites.', $add('br', {}), $add('a', {href: 'https://efy.ooo/ui'}, [$add('button', {tabindex: '-1'}, ['Learn more'])]), $add('a', {href: 'https://matrix.to/#/#efy_ui:matrix.org'}, [$add('button', {tabindex: '-1'}, ['Matrix Chat'])]) ])
|
||||
]), $add('button', {efy_sidebar_btn_close: ''}, [$add('i',{efy_icon: 'remove'})])
|
||||
])
|
||||
])); $append($body, $add('div', {efy_sidebar_btn_open: ''}));
|
||||
|
||||
<div efy_clock></div>
|
||||
<div efy_timer="efy_ui0"></div>
|
||||
/*Quick Shortcuts*/ if ($efy_module('efy_quick')){ $append($('.efy_sidebar'), $add('details', {id: 'efy_quick', class: 'efy_quick_shortcuts'}, [$add('summary', {}, [ $add('i', {efy_icon: 'star'}), 'Quick Shortcuts']),
|
||||
$add('div', {class: 'efy_quick_buttons'}),
|
||||
$add('div', {efy_clock: ''}), $add('div', {efy_timer: 'efy_ui0'})
|
||||
]));
|
||||
for (let a = ['search', 'reload', 'fullscreen', 'back', 'forward'], b = ['search', 'reload', 'fullscreen', 'chevron', 'chevron'], i = 0; i < a.length; i++) {
|
||||
$append($('.efy_quick_buttons'), $add('button', {'class': `efy_quick_${a[i]}`}, [$add('i', {efy_icon: b[i]})]))
|
||||
}
|
||||
$append($('.efy_quick_buttons'), $add('input', {type: 'text', efy_search_input: '', efy_display_none: '', placeholder: 'Search through menu...'}));
|
||||
|
||||
</details>
|
||||
$(".efy_quick_search").onclick =()=> $('.efy_quick_shortcuts [efy_search_input]').toggleAttribute('efy_display_none');
|
||||
$(".efy_quick_reload").onclick =()=> location.reload();
|
||||
$(".efy_quick_fullscreen").onclick =()=> { document.exitFullscreen(); document.documentElement.requestFullscreen(); };
|
||||
$(".efy_quick_back").onclick =()=> window.history.go(-1);
|
||||
$(".efy_quick_forward").addEventListener('pointerup', async ()=> window.history.go(1));
|
||||
}
|
||||
|
||||
<details open><summary><i efy_icon="star"></i>Theme</summary>
|
||||
/*Theme*/ if ($efy_module('efy_mode')){ $append($('.efy_sidebar'), $add('details', {id: 'efy_sbtheme', efy_select: ''}, [$add('summary', {}, [ $add('i', {efy_icon: 'star'}), 'Theme']), $add('div', {efy_tabs: 'efyui_0'})]));
|
||||
|
||||
<div efy_tabs="efyui_0">
|
||||
<button efy_tab="mode" efy_active>Mode</button>
|
||||
<button efy_tab="colors">Colors</button>
|
||||
<button efy_tab="images">Images</button>
|
||||
<button efy_tab="border">Border</button>
|
||||
/*Tabs*/ for (let a = ['mode', 'colors', 'images', 'border'], b = ['Mode', 'Colors', 'Images', 'Border'], c = $('[efy_tabs=efyui_0]'), i = 0; i < a.length; i++) { $append(c, $add('button', {efy_tab: a[i]}, [b[i]]))}
|
||||
for (let a = ['mode', 'colors', 'images', 'border'], c = $('[efy_tabs=efyui_0]'), i = 0; i < a.length; i++) { $append(c, $add('div', {efy_content: a[i], efy_select: '', id: `efy_${a[i]}`})) }
|
||||
/*Active*/ for (let a = ['[efy_tab=mode]', '[efy_content=mode]'], b = '[efy_tabs=efyui_0] > ', i = 0; i < a.length; i++){$(b + a[i]).setAttribute('efy_active', '')}
|
||||
|
||||
<div efy_content="mode" efy_active efy_select id="efy_theme">
|
||||
<input type="radio" name="efy_theme" id="default_mode"><label for="default_mode">Default</label>
|
||||
<input type="radio" name="efy_theme" id="light_light"><label for="light_light">Light</label>
|
||||
<input type="radio" name="efy_theme" id="light_sepia"><label for="light_sepia">Sepia</label>
|
||||
<input type="radio" name="efy_theme" id="dark_dark"><label for="dark_dark">Dark</label>
|
||||
<input type="radio" name="efy_theme" id="dark_nord"><label for="dark_nord">Nord</label>
|
||||
<input type="radio" name="efy_theme" id="dark_black"><label for="dark_black">Black</label>
|
||||
<details efy_help><summary>Transparency</summary>If your operating system or window manager supports transparency, the background becomes transparent. Otherwise just import your own images and turn this on.</details>
|
||||
<input type="radio" name="efy_theme" id="light_trans"><label for="light_trans">Light</label>
|
||||
<input type="radio" name="efy_theme" id="dark_trans"><label for="dark_trans">Dark</label>
|
||||
</div>
|
||||
<div efy_content="colors" efy_select>
|
||||
<label for="efy_color1">Color 1<input id="efy_color1" type="color" value="#77aa00"></label>
|
||||
<label for="efy_color2">Color 2<input id="efy_color2" type="color" value="#ffcc00"></label>
|
||||
<details efy_help><summary>Custom Colors</summary>These colors override the default ones</details>
|
||||
<label for="efy_color_text">Text<input id="efy_color_text" type="color" value="#555555"></label>
|
||||
<input name="efy_text_color_status" id="efy_text_status" type="checkbox"><label for="efy_text_status">On / Off</label><br />
|
||||
<label for="efy_color_bgcol">Background<input id="efy_color_bgcol" type="color" value="#555555"></label>
|
||||
<input name="efy_bgcol_color_status" id="efy_bgcol_status" type="checkbox"><label for="efy_bgcol_status">On / Off</label>
|
||||
</div>
|
||||
<div efy_content="images" class="efy_custom_bgimage">
|
||||
<input type="file" id="pictureTest" accept="image/*">
|
||||
<div class="efy_img_previews"></div>
|
||||
<details efy_help><summary>Warning! Bigger = Slower</summary>Keep them bellow 1MB per image, unless your device has a powerful CPU / GPU. You can also convert png, jpg etc to webp to reduce the size</details>
|
||||
<button class="efy_idb_reset" type="reset"><i efy_icon="reload"></i>Reset</button>
|
||||
</div>
|
||||
<div efy_content="border" efy_select>
|
||||
<p>Radius</p><div class="efy_sidebar_range"></div>
|
||||
<input class="efy_sidebar_selectRadius" type="range" min="0" max="25" value="12" step="1">
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
/*Mode*/ for (let a = ['default_mode', 'light_light', 'light_sepia', 'dark_dark', 'dark_nord', 'dark_black', 'light_trans', 'dark_trans'], b = ['Default', 'Light', 'Sepia', 'Dark', 'Nord', 'Black', 'Light', 'Dark'], c = $('#efy_sbtheme [efy_content=mode]'), i = 0; i < a.length; i++) { $append(c, $add('input', {type: 'radio', name: 'efy_mode', id: a[i]})); $append(c, $add('label', {for: a[i]}, [b[i]]))}
|
||||
|
||||
<details efy_select><summary><i efy_icon="dots"></i>Visual Filters</summary>
|
||||
<div efy_tabs="efyui_filters">
|
||||
<button efy_tab="bg" efy_active>Background</button>
|
||||
<button efy_tab="content">Content</button>
|
||||
<button efy_tab="trans">Trans Elements</button>
|
||||
<div efy_content="bg" efy_active efy_select id="efy_theme"></div>
|
||||
<div efy_content="content" efy_select id="efy_theme"></div>
|
||||
<div efy_content="trans" efy_select id="efy_theme"></div>
|
||||
</details>
|
||||
$insert($('#efy_sbtheme [efy_content=mode] #light_trans'), 'beforebegin', $add('details', {efy_help: ''}, [$add('summary', {}, ['Transparency']), $add('div', {}, ['If your operating system or window manager supports transparency, the background becomes transparent. Otherwise just import your own images and turn this on.'])]));
|
||||
|
||||
<details><summary><i efy_icon="arrow_down"></i>Save & Restore</summary>
|
||||
<p>EFY Settings</p>
|
||||
<a href="#" class="efy_localStorage_export" download="efy_preferences.json"><button><i efy_icon="arrow_down"></i>Save</button></a>
|
||||
<button class="efy_localstorage_reset" type="reset"><i efy_icon="reload"></i>Reset</button>
|
||||
<input type="file" class="efy_localstorage_import" accept=".json" />
|
||||
<p>EFY Images</p>
|
||||
<a href="#" class="efy_idb_export" download="efy_images.json"><button><i efy_icon="arrow_down"></i>Save</button></a>
|
||||
<button class="efy_idb_reset" type="reset"><i efy_icon="reload"></i>Reset</button>
|
||||
<input type="file" class="efy_idb_import" accept=".json" />
|
||||
</details>
|
||||
/*Colors*/ for (let a = ['efy_color1', 'efy_color2', 'efy_color_text', 'efy_color_bgcol'], b = ['Color 1', 'Color 2', 'Text', 'Background'], c = $('#efy_sbtheme [efy_content=colors]'), i = 0; i < a.length; i++) { $append(c, $add('label', {for: a[i]}, [b[i], $add('input', {id: a[i], type: 'color', value: '#555555'})]))}
|
||||
|
||||
<details efy_select id="efy_accessibility"><summary><i efy_icon="accessibility"></i>Accessibility (Beta)</summary>
|
||||
for (let a = ['text', 'bgcol'], c = 'afterend', i = 0; i < a.length; i++){ let b = $(`#efy_sbtheme [efy_content=colors] [for=efy_color_${a[i]}]`); $insert(b, c, $add('label', {for: `efy_${a[i]}_status`}, ['On / Off'])); $insert(b, c, $add('input', {type: 'checkbox', name: `efy_${a[i]}_color_status`, id: `efy_${a[i]}_status`}))}
|
||||
$insert($('#efy_sbtheme [efy_content=colors] [for=efy_text_status]'), 'afterend', $add('br',{}));
|
||||
|
||||
<details efy_select id="efy_btn_align"><summary>Menu Button Position</summary><div></div></details>
|
||||
$insert($('#efy_sbtheme [efy_content=colors] [for=efy_color_text]'), 'beforebegin', $add('details', {efy_help: ''}, [$add('summary', {}, ['Custom Colors']), $add('div', {}, ['These colors override the default ones'])]));
|
||||
|
||||
<details efy_select><summary>Text Size</summary>
|
||||
<form class="efy_text_accessibility"><button type="reset"><i efy_icon="reload"></i>Reset</button>
|
||||
<p>Zoom</p><input class="efy_ui_zoom" type="range" min="1" max="2" value="1" step="0.01">
|
||||
<p>Text Spacing</p><input class="efy_text_spacing" type="range" min="0" max="15" value="0" step="1">
|
||||
</form>
|
||||
</details>
|
||||
/*Images*/ a = $('#efy_sbtheme [efy_content=images]'); $append(a, $add('input', {type: 'file', accept: 'image/*', id: 'pictureTest'})); $append(a, $add('div', {class: 'efy_img_previews'})); $append(a, $add('button', {class: 'efy_idb_reset'}, [$add('i', {efy_icon: 'reload'}), 'Reset']));
|
||||
|
||||
<input type="checkbox" name="efy_accessibility" id="efy_outline"><label for="efy_outline">Focus Outline</label>
|
||||
<input type="checkbox" name="efy_accessibility" id="efy_cursor"><label for="efy_cursor">Custom Cursor (hidden on touchscreen)</label>
|
||||
/*Help*/ $insert($('#efy_sbtheme [efy_content=images] .efy_img_previews'), 'afterend', $add('details', {efy_help: ''}, [$add('summary', {}, ['Warning! Bigger = Slower']), $add('div', {}, ['Keep them bellow 1MB per image, unless your device has a powerful CPU / GPU. You can also convert png, jpg etc to webp to reduce the size'])]));
|
||||
|
||||
</details>
|
||||
/*Radius*/ a = $('#efy_sbtheme [efy_content=border]'); $append(a, $add('p', {}, ['Radius'])); $append(a, $add('div', {class: 'efy_sidebar_range'})); $append(a, $add('input', {class: 'efy_sidebar_selectRadius', type: 'range', min: '0', max: '25', value: '12', step: '1'}))
|
||||
}
|
||||
|
||||
<details efy_select id="efy_audio"><summary><i efy_icon="audio"></i>Audio Effects (Beta)</summary>
|
||||
<input type="checkbox" name="efy_audio" id="efy_audio_status"><label for="efy_audio_status">On / Off</label>
|
||||
<input type="checkbox" name="efy_audio" id="efy_audio_click"><label for="efy_audio_click">Click & Tap</label>
|
||||
<input type="checkbox" name="efy_audio" id="efy_audio_hover"><label for="efy_audio_hover">Mouse Hover</label>
|
||||
<p>You might have to click / tap on the ssl / lock icon on your browser & allow sounds, to hear them automatically.</p>
|
||||
</details>
|
||||
/*Visual Filters*/ if ($efy_module('efy_filters')){ $append($('.efy_sidebar'), $add('details', {id: 'efy_vfilters', efy_select: ''}, [$add('summary', {}, [ $add('i', {efy_icon: 'dots'}), 'Visual Filters (Beta)']), $add('div', {efy_tabs: 'efyui_filters'})]));
|
||||
|
||||
</div><div efy_sidebar_btn_open></div>
|
||||
/*Tabs*/ for (let a = ['bg', 'content', 'trans'], b = ['Background', 'Content', 'Trans Elements'], c = $('[efy_tabs=efyui_filters]'), i = 0; i < a.length; i++) { $append(c, $add('button', {efy_tab: a[i]}, [b[i]])) }
|
||||
for (let a = ['bg', 'content', 'trans'], c = $('[efy_tabs=efyui_filters]'), i = 0; i < a.length; i++) { $append(c, $add('form', {efy_content: a[i], efy_select: '', class: `efy_${a[i]}_filter`})) }
|
||||
/*Active*/ for (let a = ['[efy_tab=bg]', '[efy_content=bg]'], b = '[efy_tabs=efyui_filters] >', i = 0; i < a.length; i++) { $(b +' '+ a[i]).setAttribute('efy_active', '')}
|
||||
|
||||
<div efy_cursor></div>
|
||||
`);
|
||||
$all('[efy_tabs=efyui_filters] form').forEach(y =>{ let z = y.getAttribute('efy_content');
|
||||
$append(y, $add('button', {type: 'reset'}, [$add('i', {efy_icon: 'reload'}), 'Reset']));
|
||||
$append(y, $add('input', {class: `efy_${z}_brightness`, type: 'range', min: '0', max: '3', value: '1', step: '0.1'}));
|
||||
$append(y, $add('input', {class: `efy_${z}_blur`, type: 'range', min: '0', max: '100', value: '0', step: '1'}));
|
||||
$append(y, $add('input', {class: `efy_${z}_saturate`, type: 'range', min: '0', max: '3', value: '1', step: '0.1'}));
|
||||
$append(y, $add('input', {class: `efy_${z}_contrast`, type: 'range', min: '0.1', max: '3', value: '1', step: '0.1'}));
|
||||
$append(y, $add('input', {class: `efy_${z}_hue-rotate`, type: 'range', min: '0', max: '360', value: '0', step: '1'}));
|
||||
$append(y, $add('input', {class: `efy_${z}_sepia`, type: 'range', min: '0', max: '1', value: '0', step: '0.1'}));
|
||||
|
||||
/*Filters*/ e$all('[efy_tabs=efyui_filters] [efy_content]').forEach(y =>{ let x = y.getAttribute('efy_content'); y.insertAdjacentHTML('beforeend',
|
||||
`<form class="efy_${x}_filter"><button type="reset"><i efy_icon="reload"></i>Reset</button>
|
||||
<p>Brightness</p><input class="efy_${x}_brightness" type="range" min="0" max="3" value="1" step="0.1">
|
||||
<p>Blur</p><input class="efy_${x}_blur" type="range" min="0" max="100" value="0" step="1">
|
||||
<p>Saturation</p><input class="efy_${x}_saturate" type="range" min="0" max="3" value="1" step="0.1">
|
||||
<p>Contrast</p><input class="efy_${x}_contrast" type="range" min="0.1" max="3" value="1" step="0.1">
|
||||
<p>Hue</p><input class="efy_${x}_hue-rotate" type="range" min="0" max="360" value="0" step="1">
|
||||
<p>Sepia</p><input class="efy_${x}_sepia" type="range" min="0" max="1" value="0" step="0.1">
|
||||
</form>`)});
|
||||
for (let a = ['Brightness', 'Blur', 'Saturation', 'Contrast', 'Hue', 'Sepia'], i = 0; i < a.length; i++){
|
||||
$insert($(`[efy_tabs=efyui_filters] [efy_content=${z}] input:nth-of-type(${i+1})`), 'beforebegin', $add('p', {}, [a[i]]))}
|
||||
})}
|
||||
|
||||
/*Sidebar Button Position*/ let efy_btn_pos = e$('#efy_btn_align div'); ['left_top','middle_top','right_top','left_middle','middle_middle','right_middle','left_bottom','middle_bottom','right_bottom'].forEach(x =>{ efy_btn_pos.insertAdjacentHTML('beforeend',`<input type="radio" name="efy_btn_align" id="${x}">`)}); e$('#middle_middle[name=efy_btn_align]').setAttribute('disabled','1');
|
||||
/*Backup*/ if ($efy_module('efy_backup')){ $append($('.efy_sidebar'), $add('details', {id: 'efy_backup'}, [$add('summary', {}, [ $add('i', {efy_icon: 'arrow_down'}), 'Save & Restore'])]));
|
||||
for (let a = ['localstorage', 'idb'], b = ['Settings', 'Images'], c = '#efy_backup', i = 0; i < a.length; i++) {
|
||||
$append($(c), $add('p', {}, [`EFY ${b[i]}`]));
|
||||
$append($(c), $add('a', {href: '#', class: `efy_${a[i]}_export`, download: `efy_${b[i]}.json`}, [
|
||||
$add('button', {tabindex: '-1'}, [ $add('i', {efy_icon: 'arrow_down'}), 'Save'])]));
|
||||
$append($(c), $add('button', {type: 'reset', class: `efy_${a[i]}_reset`}, [$add('i', {efy_icon: 'reload'}), 'Reset']));
|
||||
$append($(c), $add('input', {type: 'file', class: `efy_${a[i]}_import`, accept: '.json'}))
|
||||
}}
|
||||
|
||||
/*Accessibility*/ if ($efy_module('efy_accessibility')){ $append($('.efy_sidebar'), $add('details', {id: 'efy_accessibility', efy_select: ''}, [$add('summary', {}, [ $add('i', {efy_icon: 'accessibility'}), 'Accessibility (Beta)']),
|
||||
$add('details', {id: 'efy_btn_align', efy_select: ''}, [$add('summary', {}, ['Menu Button Position']), $add('div', {})]),
|
||||
$add('details', {id: 'efy_accessibility_outline', efy_select: ''}, [$add('summary', {}, ['Outline']), $add('p', {}, ["Safari & Webkit don't support custom outline radius yet, so it's not up to efy, but the outline itself works and the radius as well on other browsers."]), $add('input', {id: 'efy_outline', type: 'checkbox', name: 'efy_accessibility'}), $add('label', {for: 'efy_outline'}, ['Focus Outline'])]),
|
||||
$add('details', {id: 'efy_accessibility_text', efy_select: ''}, [$add('summary', {}, ['Text Size']), $add('form', {class: 'efy_text_accessibility'}, [
|
||||
$add('button', {type: 'reset'}, [$add('i', {efy_icon: 'reload'}), 'Reset']),
|
||||
$add('p', {}, ['Zoom']), $add('input', {class: 'efy_ui_zoom', type: 'range', min: '1', max: '2', value: '1', step: '0.01'}),
|
||||
$add('p', {}, ['Text Spacing']), $add('input', {class: 'efy_text_spacing', type: 'range', min: '0', max: '15', value: '0', step: '1'})
|
||||
])]),
|
||||
$add('details', {id: 'efy_accessibility_cursor', efy_select: ''}, [$add('summary', {}, ['Cursor']), $add('p', {}, ['WARNING! Only hide it on touchscreen devices!'])])
|
||||
]));
|
||||
for (let i = 0, a = ['left_top', 'middle_top', 'right_top', 'left_middle', 'middle_middle', 'right_middle', 'left_bottom', 'middle_bottom', 'right_bottom']; i < a.length; i++){ $append($('#efy_btn_align > div'), $add(['input'], {type: 'radio', name: 'efy_btn_align', id: a[i]}))} $('#middle_middle[name=efy_btn_align]').setAttribute('disabled','');
|
||||
|
||||
for (let a = ['efy_cursor_default', 'efy_cursor_custom', 'efy_cursor_none'], b = ['Default', 'Custom', 'Hide (Touchscreen)'], c = $('#efy_accessibility_cursor'), i = 0; i < a.length; i++) {
|
||||
$append(c, $add('input', {type: 'radio', name: 'efy_accessibility_cursor', id: a[i]}));
|
||||
$append(c, $add('label', {for: a[i]}, [b[i]]));
|
||||
} $('#efy_cursor_default').setAttribute('checked', '');
|
||||
|
||||
/*Cursor*/ $append($body, $add('div', {efy_cursor: ''})); /*Storage*/ if (localStorage.efy_cursor == 'custom') {$root.setAttribute('efy_cursor_custom', ''); document.addEventListener('pointermove', cursor_fn); $('#efy_cursor_custom').setAttribute('checked','')} else if (localStorage.efy_cursor == 'none') {$root.setAttribute('efy_cursor_none', ''); $('#efy_cursor_none').setAttribute('checked','')}
|
||||
|
||||
/*Custom*/ $('#efy_cursor_custom').addEventListener('change', ()=>{ if ($('#efy_cursor_custom').checked) {$root.removeAttribute('efy_cursor_none'); $root.setAttribute('efy_cursor_custom', ''); document.addEventListener('pointermove', cursor_fn); localStorage.efy_cursor = 'custom'}});
|
||||
|
||||
/*None*/ $('#efy_cursor_none').addEventListener('change', ()=>{ if ($('#efy_cursor_none').checked) {$root.removeAttribute('efy_cursor_custom'); $root.setAttribute('efy_cursor_none',''); document.removeEventListener('pointermove', cursor_fn); localStorage.efy_cursor = 'none'}});
|
||||
|
||||
/*Default*/ $('#efy_cursor_default').addEventListener('change', ()=>{ if ($('#efy_cursor_default').checked) {$root.removeAttribute('efy_cursor_custom'); $root.removeAttribute('efy_cursor_none'); document.removeEventListener('pointermove', cursor_fn); localStorage.removeItem('efy_cursor')}});
|
||||
}
|
||||
|
||||
/*Audio*/ if ($efy_module('efy_audio')){ $append($('.efy_sidebar'), $add('details', {efy_select: '', id: 'efy_audio'}, [
|
||||
$add('summary', {}, [ $add('i', {efy_icon: 'audio'}), 'Audio Effects (Beta)']),
|
||||
$add('p', {}, ['You might have to click / tap on the ssl / lock icon on your browser & allow sounds, to hear them automatically.'])]));
|
||||
for (let a = ['status', 'click', 'hover'], b = ['On / Off', 'Click & Tap', 'Mouse Hover'], c = '#efy_audio > p', d = 'beforebegin', i = 0; i < a.length; i++) {
|
||||
$insert($(c), d, $add('input', {type: 'checkbox', name: 'efy_audio', id:`efy_audio_${a[i]}`}));
|
||||
$insert($(c), d, $add('label', {for: `efy_audio_${a[i]}`}, [b[i]]))
|
||||
}}
|
||||
|
||||
/*Sidebar Modules - End*/
|
||||
|
||||
|
||||
/*Theme*/ if (localStorage.efy_theme) {e$root.setAttribute("efy_theme", localStorage.efy_theme); e$("#" + localStorage.efy_theme).setAttribute("checked", "1")}
|
||||
else {e$root.setAttribute('efy_theme', 'default_mode'); e$("#default_mode").setAttribute("checked", "1")}
|
||||
e$all("[name=efy_theme]").forEach(x => { x.onclick = () => { e$root.setAttribute("efy_theme", x.id); localStorage.efy_theme = x.id; }; });
|
||||
/*Theme*/ if (localStorage.efy_mode) {$root.setAttribute("efy_mode", localStorage.efy_mode); $("#" + localStorage.efy_mode).setAttribute("checked", "1")}
|
||||
else {$root.setAttribute('efy_mode', 'default_mode'); $("#default_mode").setAttribute("checked", "1")}
|
||||
$all("[name=efy_mode]").forEach(x => { x.onclick = () => { $root.setAttribute("efy_mode", x.id); localStorage.efy_mode = x.id; }; });
|
||||
|
||||
/*Colors*/ let efy_color = {'color1': 'efy_color', 'color2': 'efy_color2', 'color_text': 'efy_text', 'color_bgcol': 'efy_bgcol'}, rgb2hex = c => "#" + c.match(/\d+/g).map(x => (+x).toString(16).padStart(2, 0)).join``;
|
||||
Object.keys(efy_color).forEach(z =>{ e$(`#efy_${z}`).oninput = ev => {
|
||||
let x = ev.target.value, r = parseInt(x.substr(1, 2), 16), g = parseInt(x.substr(3, 2), 16), b = parseInt(x.substr(5, 2), 16); x = `${r},${g},${b}`; localStorage.setItem(efy_color[z], x); e$root.style.setProperty(`--efy_${z}_var`, x); }
|
||||
let y = getComputedStyle(e$root).getPropertyValue(`--efy_${z}_var`);
|
||||
if (localStorage.getItem(efy_color[z])) {y = localStorage.getItem(efy_color[z]); e$root.style.setProperty(`--efy_${z}_var`, y)}
|
||||
e$(`#efy_${z}`).value = rgb2hex("rgb(" + y + ")"); });
|
||||
Object.keys(efy_color).forEach(z =>{ $(`#efy_${z}`).oninput = ev => {
|
||||
let x = ev.target.value, r = parseInt(x.substr(1, 2), 16), g = parseInt(x.substr(3, 2), 16), b = parseInt(x.substr(5, 2), 16); x = `${r},${g},${b}`; localStorage.setItem(efy_color[z], x); $root.style.setProperty(`--efy_${z}_var`, x); }
|
||||
let y = $css_prop(`--efy_${z}_var`);
|
||||
if (localStorage.getItem(efy_color[z])) {y = localStorage.getItem(efy_color[z]); $root.style.setProperty(`--efy_${z}_var`, y)}
|
||||
$(`#efy_${z}`).value = rgb2hex("rgb(" + y + ")"); });
|
||||
|
||||
/*Radius*/ let efy_radius_input = e$(".efy_sidebar_selectRadius"), efy_sidebar_range = e$(".efy_sidebar_range");
|
||||
/*Radius*/ let efy_radius_input = $(".efy_sidebar_selectRadius"), efy_sidebar_range = $(".efy_sidebar_range");
|
||||
// efy_radius_steps = (efy_radius_input.max - efy_radius_input.min) , - use this instead of width // efy_radius = localStorage.efy_radius;
|
||||
|
||||
async function efy_radius_fn(){ let x, radius = localStorage.efy_radius; if (radius) { x = radius.replace('rem', ''); efy_radius_input.value = x; e$root.style.setProperty("--efy_radius", radius); } else {x = 12;}
|
||||
async function efy_radius_fn(){ let x, radius = localStorage.efy_radius; if (radius) { x = radius.replace('rem', ''); efy_radius_input.value = x; $root.style.setProperty("--efy_radius", radius); } else {x = 12;}
|
||||
|
||||
/*Radius: Input*/ e$('[efy_tabs=efyui_0] [efy_tab="border"]').addEventListener('pointerup', ()=>{ setTimeout( ()=>{ let za = e$('.efy_sidebar_selectRadius'), z = getComputedStyle(za).getPropertyValue('width').replace('px',''); efy_sidebar_range.innerText = x; efy_sidebar_range.style.left = (x * (z - 32) / efy_radius_input.max) + 'rem'; }, 100); }, {once: true}); } efy_radius_fn();
|
||||
/*Radius: Input*/ $('[efy_tabs=efyui_0] [efy_tab="border"]').addEventListener('pointerup', ()=>{ setTimeout( ()=>{ let za = $('.efy_sidebar_selectRadius'), z = getComputedStyle(za).getPropertyValue('width').replace('px',''); efy_sidebar_range.innerText = x; efy_sidebar_range.style.left = (x * (z - 32) / efy_radius_input.max) + 'rem'; }, 100); }, {once: true}); } efy_radius_fn();
|
||||
|
||||
efy_radius_input.oninput = () => { let za = e$('.efy_sidebar_selectRadius'), z = getComputedStyle(za).getPropertyValue('width').replace('px',''), x = efy_radius_input.value; e$root.style.setProperty("--efy_radius", x + "rem"); localStorage.efy_radius = x + "rem"; efy_sidebar_range.style.left = (x * (z - 32) / efy_radius_input.max) + 'rem'; efy_sidebar_range.innerText = x; };
|
||||
/*Radius: Window Resize*/ window.addEventListener('resize', () => { let za = e$('.efy_sidebar_selectRadius'), z = getComputedStyle(za).getPropertyValue('width').replace('px',''), x = efy_radius_input.value; efy_sidebar_range.style.left = (x * (z - 32) / efy_radius_input.max) + 'rem'; });
|
||||
efy_radius_input.oninput = () => { let za = $('.efy_sidebar_selectRadius'), z = getComputedStyle(za).getPropertyValue('width').replace('px',''), x = efy_radius_input.value; $root.style.setProperty("--efy_radius", x + "rem"); localStorage.efy_radius = x + "rem"; efy_sidebar_range.style.left = (x * (z - 32) / efy_radius_input.max) + 'rem'; efy_sidebar_range.innerText = x; };
|
||||
/*Radius: Window Resize*/ window.addEventListener('resize', () => { let za = $('.efy_sidebar_selectRadius'), z = getComputedStyle(za).getPropertyValue('width').replace('px',''), x = efy_radius_input.value; efy_sidebar_range.style.left = (x * (z - 32) / efy_radius_input.max) + 'rem'; });
|
||||
|
||||
|
||||
/*EFY Button Position*/ if (localStorage.efy_btn_align) { e$("#" + localStorage.efy_btn_align).setAttribute("checked", "1"); e$("[efy_sidebar_btn_open]").setAttribute("efy_btn_align", localStorage.efy_btn_align); } else { let y = getComputedStyle(e$root).getPropertyValue('--efy_sidebar_button').replaceAll(' ','');
|
||||
e$('#'+y).setAttribute("checked", "1"); e$('[efy_sidebar_btn_open]').setAttribute('efy_btn_align', y);}
|
||||
e$all("[name=efy_btn_align]").forEach(x => { x.onclick = () => { e$("[efy_sidebar_btn_open]").setAttribute("efy_btn_align", x.id); localStorage.efy_btn_align = x.id; }; });
|
||||
/*EFY Button Position*/ if (localStorage.efy_btn_align) { $("#" + localStorage.efy_btn_align).setAttribute("checked", "1"); $("[efy_sidebar_btn_open]").setAttribute("efy_btn_align", localStorage.efy_btn_align); } else { let y = $css_prop('--efy_sidebar_button');
|
||||
$('#'+y).setAttribute("checked", "1"); $('[efy_sidebar_btn_open]').setAttribute('efy_btn_align', y);}
|
||||
$all("[name=efy_btn_align]").forEach(x => { x.onclick = () => { $("[efy_sidebar_btn_open]").setAttribute("efy_btn_align", x.id); localStorage.efy_btn_align = x.id; }; });
|
||||
|
||||
/*BgImg Filter*/ let efy_bg_filter = {}, efy_css_bg_filter = e$create("style"); efy_css_bg_filter.classList.add("efy_css_bg_filter"); document.head.appendChild(efy_css_bg_filter); async function efy_bg_filter_fn(){
|
||||
['blur','brightness','saturate','contrast','hue-rotate','sepia'].forEach(x => { efy_bg_filter[x] = e$(`.efy_bg_${x}`).value; if (x == 'blur') { efy_bg_filter[x] = efy_bg_filter[x] + 'px' } else if (x == 'hue-rotate') { efy_bg_filter[x] = efy_bg_filter[x] + 'deg' } });
|
||||
/*BgImg Filter*/ let efy_bg_filter = {}, efy_css_bg_filter = $create("style"); efy_css_bg_filter.classList.add("efy_css_bg_filter"); document.head.appendChild(efy_css_bg_filter); async function efy_bg_filter_fn(){
|
||||
['blur','brightness','saturate','contrast','hue-rotate','sepia'].forEach(x => { efy_bg_filter[x] = $(`.efy_bg_${x}`).value; if (x == 'blur') { efy_bg_filter[x] = efy_bg_filter[x] + 'px' } else if (x == 'hue-rotate') { efy_bg_filter[x] = efy_bg_filter[x] + 'deg' } });
|
||||
|
||||
let string = ''; Object.keys(efy_bg_filter).forEach(x =>{ string = string + ` ${x}(${efy_bg_filter[x]})` });
|
||||
let y = `html:before, html:after {filter: ${string} !important}`;
|
||||
efy_css_bg_filter.innerHTML = y; localStorage.efy_bg_filter = JSON.stringify(efy_bg_filter); localStorage.efy_bg_filter_css = y }
|
||||
efy_css_bg_filter.textContent = y; localStorage.efy_bg_filter = JSON.stringify(efy_bg_filter); localStorage.efy_bg_filter_css = y }
|
||||
|
||||
if (localStorage.efy_bg_filter) { efy_css_bg_filter.innerHTML = localStorage.efy_bg_filter_css; let efy_bg_filter = JSON.parse(localStorage.efy_bg_filter); Object.keys(efy_bg_filter).forEach(x => e$(`.efy_bg_${x}`).value = efy_bg_filter[x].replace('px','').replace('deg','') ) }
|
||||
e$all('.efy_bg_filter input').forEach(x =>{ x.addEventListener("input", ()=>{ efy_bg_filter_fn() }) });
|
||||
e$all('.efy_bg_filter [type=reset]').forEach(x =>{ x.addEventListener("pointerup", ()=>{ efy_bg_filter_fn(); localStorage.removeItem('efy_bg_filter'); localStorage.removeItem('efy_bg_filter_css'); efy_css_bg_filter.innerHTML = '' }) });
|
||||
if (localStorage.efy_bg_filter) { efy_css_bg_filter.textContent = localStorage.efy_bg_filter_css; let efy_bg_filter = JSON.parse(localStorage.efy_bg_filter); Object.keys(efy_bg_filter).forEach(x => $(`.efy_bg_${x}`).value = efy_bg_filter[x].replace('px','').replace('deg','') ) }
|
||||
$all('.efy_bg_filter input').forEach(x =>{ x.addEventListener("input", ()=>{ efy_bg_filter_fn() }) });
|
||||
$all('.efy_bg_filter [type=reset]').forEach(x =>{ x.addEventListener("pointerup", ()=>{ efy_bg_filter_fn(); localStorage.removeItem('efy_bg_filter'); localStorage.removeItem('efy_bg_filter_css'); efy_css_bg_filter.textContent = '' }) });
|
||||
|
||||
/*Content Filter*/ let efy_content_filter = {}, efy_css_content_filter = e$create("style"); efy_css_content_filter.classList.add("efy_css_content_filter"); document.head.appendChild(efy_css_content_filter); async function efy_content_filter_fn(){
|
||||
['blur','brightness','saturate','contrast','hue-rotate','sepia'].forEach(x => { efy_content_filter[x] = e$(`.efy_content_${x}`).value; if (x == 'blur') { efy_content_filter[x] = efy_content_filter[x] + 'px' } else if (x == 'hue-rotate') { efy_content_filter[x] = efy_content_filter[x] + 'deg' } });
|
||||
/*Content Filter*/ let efy_content_filter = {}, efy_css_content_filter = $create("style"); efy_css_content_filter.classList.add("efy_css_content_filter"); document.head.appendChild(efy_css_content_filter); async function efy_content_filter_fn(){
|
||||
['blur','brightness','saturate','contrast','hue-rotate','sepia'].forEach(x => { efy_content_filter[x] = $(`.efy_content_${x}`).value; if (x == 'blur') { efy_content_filter[x] = efy_content_filter[x] + 'px' } else if (x == 'hue-rotate') { efy_content_filter[x] = efy_content_filter[x] + 'deg' } });
|
||||
|
||||
let string = ''; Object.keys(efy_content_filter).forEach(x =>{ string = string + ` ${x}(${efy_content_filter[x]})` });
|
||||
let y = `img, video {filter: ${string} !important}`;
|
||||
efy_css_content_filter.innerHTML = y; localStorage.efy_content_filter = JSON.stringify(efy_content_filter); localStorage.efy_content_filter_css = y }
|
||||
efy_css_content_filter.textContent = y; localStorage.efy_content_filter = JSON.stringify(efy_content_filter); localStorage.efy_content_filter_css = y }
|
||||
|
||||
if (localStorage.efy_content_filter) { efy_css_content_filter.innerHTML = localStorage.efy_content_filter_css; let efy_content_filter = JSON.parse(localStorage.efy_content_filter); Object.keys(efy_content_filter).forEach(x => e$(`.efy_content_${x}`).value = efy_content_filter[x].replace('px','').replace('deg','') ) }
|
||||
e$all('.efy_content_filter input').forEach(x =>{ x.addEventListener("input", ()=>{ efy_content_filter_fn() }) });
|
||||
e$all('.efy_content_filter [type=reset]').forEach(x =>{ x.addEventListener("pointerup", ()=>{ efy_content_filter_fn(); localStorage.removeItem('efy_content_filter'); localStorage.removeItem('efy_content_filter_css'); efy_css_content_filter.innerHTML = '' }) });
|
||||
if (localStorage.efy_content_filter) { efy_css_content_filter.textContent = localStorage.efy_content_filter_css; let efy_content_filter = JSON.parse(localStorage.efy_content_filter); Object.keys(efy_content_filter).forEach(x => $(`.efy_content_${x}`).value = efy_content_filter[x].replace('px','').replace('deg','') ) }
|
||||
$all('.efy_content_filter input').forEach(x =>{ x.addEventListener("input", ()=>{ efy_content_filter_fn() }) });
|
||||
$all('.efy_content_filter [type=reset]').forEach(x =>{ x.addEventListener("pointerup", ()=>{ efy_content_filter_fn(); localStorage.removeItem('efy_content_filter'); localStorage.removeItem('efy_content_filter_css'); efy_css_content_filter.textContent = '' }) });
|
||||
|
||||
/*Trans Filter*/ let efy_trans_filter = {}, efy_css_trans_filter = e$create("style"); efy_css_trans_filter.classList.add("efy_css_trans_filter"); document.head.appendChild(efy_css_trans_filter); async function efy_trans_filter_fn(){
|
||||
['blur','brightness','saturate','contrast','hue-rotate','sepia'].forEach(x => { efy_trans_filter[x] = e$(`.efy_trans_${x}`).value; if (x == 'blur') { efy_trans_filter[x] = efy_trans_filter[x] + 'px' } else if (x == 'hue-rotate') { efy_trans_filter[x] = efy_trans_filter[x] + 'deg' } });
|
||||
/*Trans Filter*/ let efy_trans_filter = {}, efy_css_trans_filter = $create("style"); efy_css_trans_filter.classList.add("efy_css_trans_filter"); document.head.appendChild(efy_css_trans_filter); async function efy_trans_filter_fn(){
|
||||
['blur','brightness','saturate','contrast','hue-rotate','sepia'].forEach(x => { efy_trans_filter[x] = $(`.efy_trans_${x}`).value; if (x == 'blur') { efy_trans_filter[x] = efy_trans_filter[x] + 'px' } else if (x == 'hue-rotate') { efy_trans_filter[x] = efy_trans_filter[x] + 'deg' } });
|
||||
|
||||
let string = ''; Object.keys(efy_trans_filter).forEach(x =>{ string = string + ` ${x}(${efy_trans_filter[x]})` });
|
||||
let y = `details:not([efy_help]), select, input, textarea, blockquote, pre, article, table, [efy_tabs] [efy_content], [efy_timer], [efy_clock] {backdrop-filter: ${string} !important}`;
|
||||
efy_css_trans_filter.innerHTML = y; localStorage.efy_trans_filter = JSON.stringify(efy_trans_filter); localStorage.efy_trans_filter_css = y }
|
||||
let y = `details:not([efy_help]), select, input, textarea, blockquote, pre, article, table, [efy_tabs] [efy_content], [efy_timer], [efy_clock] {backdrop-filter: ${string} !important; -webkit-backdrop-filter: ${string} !important}`;
|
||||
efy_css_trans_filter.textContent = y; localStorage.efy_trans_filter = JSON.stringify(efy_trans_filter); localStorage.efy_trans_filter_css = y }
|
||||
|
||||
if (localStorage.efy_trans_filter) { efy_css_trans_filter.innerHTML = localStorage.efy_trans_filter_css; let efy_trans_filter = JSON.parse(localStorage.efy_trans_filter); Object.keys(efy_trans_filter).forEach(x => e$(`.efy_trans_${x}`).value = efy_trans_filter[x].replace('px','').replace('deg','') ) }
|
||||
e$all('.efy_trans_filter input').forEach(x =>{ x.addEventListener("input", ()=>{ efy_trans_filter_fn() }) });
|
||||
e$all('.efy_trans_filter [type=reset]').forEach(x =>{ x.addEventListener("pointerup", ()=>{ efy_trans_filter_fn(); localStorage.removeItem('efy_trans_filter'); localStorage.removeItem('efy_trans_filter_css'); efy_css_trans_filter.innerHTML = '' }) });
|
||||
if (localStorage.efy_trans_filter) { efy_css_trans_filter.textContent = localStorage.efy_trans_filter_css; let efy_trans_filter = JSON.parse(localStorage.efy_trans_filter); Object.keys(efy_trans_filter).forEach(x => $(`.efy_trans_${x}`).value = efy_trans_filter[x].replace('px','').replace('deg','') ) }
|
||||
$all('.efy_trans_filter input').forEach(x =>{ x.addEventListener("input", ()=>{ efy_trans_filter_fn() }) });
|
||||
$all('.efy_trans_filter [type=reset]').forEach(x =>{ x.addEventListener("pointerup", ()=>{ efy_trans_filter_fn(); localStorage.removeItem('efy_trans_filter'); localStorage.removeItem('efy_trans_filter_css'); efy_css_trans_filter.textContent = '' }) });
|
||||
|
||||
/* Text Size*/ let efy_text_accessibility = e$create("style"); efy_text_accessibility.classList.add("efy_text_accessibility"); document.head.appendChild(efy_text_accessibility); e$all('.efy_text_accessibility input').forEach(x => x.oninput =()=>{ efy_text_accessibility.innerHTML = `:root {--efy_font_size: ${e$('.efy_ui_zoom').value}px!important;} html {letter-spacing: ${e$('.efy_text_spacing').value}px!important;}`; });
|
||||
/* Text Size*/ let efy_text_accessibility = $create("style"); efy_text_accessibility.classList.add("efy_text_accessibility"); document.head.appendChild(efy_text_accessibility); $all('.efy_text_accessibility input').forEach(x => x.oninput =()=>{ efy_text_accessibility.textContent = `:root {--efy_font_size: ${$('.efy_ui_zoom').value}px!important;} html {letter-spacing: ${$('.efy_text_spacing').value}px!important;}`; });
|
||||
|
||||
/*Checkbox Toggles*/ ["efy_audio_status", "efy_audio_click", "efy_audio_hover", "efy_outline", 'efy_cursor','efy_text_status', 'efy_bgcol_status'].forEach(x => { if (localStorage.getItem(x) == "on") {e$("#" + x).setAttribute("checked", "1");} e$("#" + x).onclick = () => { if (localStorage.getItem(x) == "on") { localStorage.setItem(x, "off"); } else { localStorage.setItem(x, "on"); } };});
|
||||
/*Checkbox Toggles*/ ["efy_audio_status", "efy_audio_click", "efy_audio_hover", "efy_outline", 'efy_text_status', 'efy_bgcol_status'].forEach(x => { if (localStorage.getItem(x) == "on") {$("#" + x).setAttribute("checked", "1");} $("#" + x).onclick = () => { if (localStorage.getItem(x) == "on") { localStorage.setItem(x, "off"); } else { localStorage.setItem(x, "on"); } };});
|
||||
|
||||
/*Focus Outline*/ if (localStorage.efy_outline == 'on') {e$root.setAttribute('efy_outline', '1');} e$('#efy_outline').onchange = () => {e$root.toggleAttribute('efy_outline')}
|
||||
/*Cursor*/ if (localStorage.efy_cursor == 'on') {e$root.setAttribute('efy_cursor_on', '1');} e$('#efy_cursor').onchange = () => {e$root.toggleAttribute('efy_cursor_on')}
|
||||
/*Custom Text Color*/ if (localStorage.efy_text_status == 'on') {e$root.setAttribute('efy_color_text', '1')} e$('#efy_text_status').onchange = () => {e$root.toggleAttribute('efy_color_text')}
|
||||
/*Custom BG Color*/ if (localStorage.efy_bgcol_status == 'on') {e$root.setAttribute('efy_color_bgcol', '1')} e$('#efy_bgcol_status').onchange = () => {e$root.toggleAttribute('efy_color_bgcol')}
|
||||
/*Focus Outline*/ if (localStorage.efy_outline == 'on') {$root.setAttribute('efy_outline', '1');} $('#efy_outline').onchange = () => {$root.toggleAttribute('efy_outline')}
|
||||
/*Custom Text Color*/ if (localStorage.efy_text_status == 'on') {$root.setAttribute('efy_color_text', '1')} $('#efy_text_status').onchange = () => {$root.toggleAttribute('efy_color_text')}
|
||||
/*Custom BG Color*/ if (localStorage.efy_bgcol_status == 'on') {$root.setAttribute('efy_color_bgcol', '1')} $('#efy_bgcol_status').onchange = () => {$root.toggleAttribute('efy_color_bgcol')}
|
||||
|
||||
|
||||
/*EFY Menu Toggles*/ e$body.addEventListener("click", ()=>{ if (event.target.matches('[efy_sidebar_btn_open]')) {
|
||||
e$("[efy_sidebar_btn_open]:not([efy_sidebar_btn_open=relative])").style.display = "none";
|
||||
e$("[efy_sidebar_btn_close]").style.display = "block";
|
||||
e$(".efy_sidebar").classList.toggle("efy_toggle_efy_sidebar_panel");
|
||||
e$("body").classList.toggle("efy_toggle_efy_sidebar");
|
||||
/*EFY Menu Toggles*/ $body.addEventListener("click", ()=>{ if (event.target.matches('[efy_sidebar_btn_open]')) {
|
||||
$("[efy_sidebar_btn_open]:not([efy_sidebar_btn_open=relative])").style.display = "none";
|
||||
$("[efy_sidebar_btn_close]").style.display = "block";
|
||||
$(".efy_sidebar").classList.toggle("efy_toggle_efy_sidebar_panel");
|
||||
$("body").classList.toggle("efy_toggle_efy_sidebar");
|
||||
}});
|
||||
/*Close*/ e$("[efy_sidebar_btn_close]").onclick = () => { e$(".efy_sidebar").classList.toggle("efy_toggle_efy_sidebar_panel"); e$("body").classList.toggle("efy_toggle_efy_sidebar"); e$("[efy_sidebar_btn_open]:not([efy_sidebar_btn_open=relative])").style.display = "block"; e$("[efy_sidebar_btn_close]").style.display = "none"; };
|
||||
/*Close*/ $("[efy_sidebar_btn_close]").onclick = () => { $(".efy_sidebar").classList.toggle("efy_toggle_efy_sidebar_panel"); $("body").classList.toggle("efy_toggle_efy_sidebar"); $("[efy_sidebar_btn_open]:not([efy_sidebar_btn_open=relative])").style.display = "block"; $("[efy_sidebar_btn_close]").style.display = "none"; };
|
||||
|
||||
|
||||
|
||||
/*Change bg image*/ let efy_css_bgimg = e$create("style"); efy_css_bgimg.classList.add("efy_css_bgimg"); document.head.appendChild(efy_css_bgimg);
|
||||
/*Change bg image*/ let efy_css_bgimg = $create("style"); efy_css_bgimg.classList.add("efy_css_bgimg"); document.head.appendChild(efy_css_bgimg);
|
||||
|
||||
/*Background image*/ let db; e$("#pictureTest").addEventListener("change", efy_add_bgimg);
|
||||
/*Background image*/ let db; $("#pictureTest").addEventListener("change", efy_add_bgimg);
|
||||
let request = indexedDB.open('efy');
|
||||
request.onerror = () => console.error("efy: Can't open db");
|
||||
request.onsuccess = e => (db = e.target.result);
|
||||
|
|
@ -218,9 +220,9 @@ request2.onsuccess = () => { let efy_count_img2 = 0, transaction2 = request2.res
|
|||
getCursorRequest2.onsuccess = e => { let cursor2 = e.target.result;
|
||||
if (cursor2) { efy_count_img2++; cursor2.continue(); }
|
||||
else { /*Set bgimg nr*/ localStorage.efy_bg_nr = efy_count_img2;
|
||||
/*Add Preview*/ let efy_bg_item2 = e$create("div"); efy_bg_item2.style.background = 'url('+reader.result+')'; efy_bg_item2.setAttribute("efy_bg_nr", efy_count_img2); e$(".efy_img_previews").appendChild(efy_bg_item2); e$all('.efy_img_previews [efy_bg_nr]').forEach(z => z.removeAttribute('efy_active'));
|
||||
/*Restore Background*/ efy_css_bgimg.innerHTML = `html:before, html:after {background: url(${reader.result})!important; background-size: cover!important} html {background: var(--efy_text2)!important}`; e$('.efy_img_previews [efy_bg_nr="'+efy_count_img2+'"]').setAttribute('efy_active',1);
|
||||
/*Preview Click*/ let y = e$('.efy_img_previews [efy_bg_nr="'+efy_count_img2+'"]'); y.onclick = () => { efy_css_bgimg.innerHTML = `html:before, html:after {background: url(${reader.result})!important; background-size: cover!important} html {background: var(--efy_text2)!important}`; localStorage.efy_bg_nr = efy_count_img2; e$all('.efy_img_previews [efy_bg_nr]').forEach(z => z.removeAttribute('efy_active')); y.setAttribute('efy_active',1); };
|
||||
/*Add Preview*/ let efy_bg_item2 = $create("div"); efy_bg_item2.style.background = 'url('+reader.result+')'; efy_bg_item2.setAttribute("efy_bg_nr", efy_count_img2); $(".efy_img_previews").appendChild(efy_bg_item2); $all('.efy_img_previews [efy_bg_nr]').forEach(z => z.removeAttribute('efy_active'));
|
||||
/*Restore Background*/ efy_css_bgimg.textContent = `html:before, html:after {background: url(${reader.result})!important; background-size: cover!important} html {background: var(--efy_text2)!important}`; $('.efy_img_previews [efy_bg_nr="'+efy_count_img2+'"]').setAttribute('efy_active',1);
|
||||
/*Preview Click*/ let y = $('.efy_img_previews [efy_bg_nr="'+efy_count_img2+'"]'); y.onclick = () => { efy_css_bgimg.textContent = `html:before, html:after {background: url(${reader.result})!important; background-size: cover!important} html {background: var(--efy_text2)!important}`; localStorage.efy_bg_nr = efy_count_img2; $all('.efy_img_previews [efy_bg_nr]').forEach(z => z.removeAttribute('efy_active')); y.setAttribute('efy_active',1); };
|
||||
}
|
||||
};};
|
||||
} efy_bg_update_fn2();
|
||||
|
|
@ -233,13 +235,13 @@ request.onsuccess = () => { let efy_count_img = 0, transaction = request.result.
|
|||
getCursorRequest.onsuccess = e => { let cursor = e.target.result;
|
||||
if (cursor) { efy_count_img++; let req = invoiceStore.get(efy_count_img);
|
||||
req.onsuccess = e => { let x = e.target.result.data;
|
||||
/*Preview Click*/ let efy_bg_item = e$create("div"); efy_bg_item.style.background = 'url('+x+')'; efy_bg_item.setAttribute("efy_bg_nr", efy_count_img); e$(".efy_img_previews").appendChild(efy_bg_item); let y = e$('.efy_img_previews [efy_bg_nr="'+efy_count_img+'"]'); y.onclick = () => { efy_css_bgimg.innerHTML = `html:before, html:after {background: url(${x})!important; background-size: cover!important} html {background: var(--efy_text2)!important; background-size: cover!important}`; localStorage.efy_bg_nr = e.target.result.id; e$all('.efy_img_previews [efy_bg_nr]').forEach(z => z.removeAttribute('efy_active')); y.setAttribute('efy_active',1); };
|
||||
/*Preview Click*/ let efy_bg_item = $create("div"); efy_bg_item.style.background = 'url('+x+')'; efy_bg_item.setAttribute("efy_bg_nr", efy_count_img); $(".efy_img_previews").appendChild(efy_bg_item); let y = $('.efy_img_previews [efy_bg_nr="'+efy_count_img+'"]'); y.onclick = () => { efy_css_bgimg.textContent = `html:before, html:after {background: url(${x})!important; background-size: cover!important} html {background: var(--efy_text2)!important; background-size: cover!important}`; localStorage.efy_bg_nr = e.target.result.id; $all('.efy_img_previews [efy_bg_nr]').forEach(z => z.removeAttribute('efy_active')); y.setAttribute('efy_active',1); };
|
||||
}; cursor.continue();
|
||||
} else { /*Check bgimg number*/ let bgnr; if (localStorage.efy_bg_nr) { bgnr = JSON.parse(localStorage.efy_bg_nr); } else { bgnr = 1; }
|
||||
|
||||
/*Restore Background*/ if (efy_count_img > 0) { invoiceStore.get(bgnr).onsuccess = e => { let x = e.target.result.data, y = e.target.result.id; efy_css_bgimg.innerHTML = `html:before, html:after {background: url(${x})!important; background-size: cover!important}`; e$('.efy_img_previews [efy_bg_nr="'+y+'"]').setAttribute('efy_active',1); }; }
|
||||
/*Restore Background*/ if (efy_count_img > 0) { invoiceStore.get(bgnr).onsuccess = e => { let x = e.target.result.data, y = e.target.result.id; efy_css_bgimg.textContent = `html:before, html:after {background: url(${x})!important; background-size: cover!important}`; $('.efy_img_previews [efy_bg_nr="'+y+'"]').setAttribute('efy_active',1); }; }
|
||||
|
||||
/*Remove BG - Button*/ e$all(".efy_idb_reset").forEach(z =>{ z.onclick = () => { indexedDB.deleteDatabase("efy"); location.reload()}});
|
||||
/*Remove BG - Button*/ $all(".efy_idb_reset").forEach(z =>{ z.onclick = () => { indexedDB.deleteDatabase("efy"); location.reload()}});
|
||||
}
|
||||
};};
|
||||
} efy_bg_update_fn();
|
||||
|
|
@ -264,10 +266,10 @@ request.onsuccess = () => { let efy_count_img = 0, transaction = request.result.
|
|||
else { /*Store completed*/ exportObject[storeName] = allObjects;
|
||||
if (idbDatabase.objectStoreNames.length === Object.keys(exportObject).length) { resolve(JSON.stringify(exportObject)); } } }); } } });
|
||||
|
||||
e$(".efy_idb_export").onclick = () => { efyaudio.ok4.cloneNode().play(); e$(".efy_idb_export").href = "data:application/json," + json; };
|
||||
$(".efy_idb_export").onclick = () => { efyaudio.ok4.cloneNode().play(); $(".efy_idb_export").href = "data:application/json," + json; };
|
||||
} catch (error) { console.error(error); } })();
|
||||
|
||||
/*Import indexedDB*/ let efy_idb_import = e$(".efy_idb_import");
|
||||
/*Import indexedDB*/ let efy_idb_import = $(".efy_idb_import");
|
||||
efy_idb_import.addEventListener("change", () => { let file = efy_idb_import.files[0], reader = new FileReader();
|
||||
reader.onload = async () => { let data = JSON.parse(reader.result);
|
||||
function importIDB(storename = "images", storename2 = "settings", arr = data["images"], arr2 = data["settings"]) {
|
||||
|
|
@ -281,69 +283,60 @@ efy_idb_import.addEventListener("change", () => { let file = efy_idb_import.file
|
|||
await importIDB(); }; reader.readAsText(file); });
|
||||
|
||||
|
||||
/*Save & Restore Preferences*/ e$('.efy_localStorage_export').onclick =()=>{ let x=''; Object.entries(localStorage).forEach(([k,v])=>{ if (k.includes('efy')){ x=x+ JSON.stringify(k, null, 2)+' :'+JSON.stringify(v, null, 2) +',\n'; } }); e$('.efy_localStorage_export').href = "data:application/json," + '{\n'+x.slice(0,-2)+'\n}'; console.log(x)};
|
||||
/*Save & Restore Preferences*/ $('.efy_localstorage_export').onclick =()=>{ let x=''; Object.entries(localStorage).forEach(([k,v])=>{ if (k.includes('efy')){ x=x+ JSON.stringify(k, null, 2)+' :'+JSON.stringify(v, null, 2) +',\n'; } }); $('.efy_localstorage_export').href = "data:application/json," + '{\n'+x.slice(0,-2)+'\n}'};
|
||||
|
||||
/*Import Settings*/ let efy_localstorage_import = e$('.efy_localstorage_import'); efy_localstorage_import.addEventListener('change', function() {
|
||||
/*Import Settings*/ let efy_localstorage_import = $('.efy_localstorage_import'); efy_localstorage_import.addEventListener('change', function() {
|
||||
let file = efy_localstorage_import.files[0], reader = new FileReader();
|
||||
reader.onload = function() { Object.entries(JSON.parse(reader.result)).forEach(([k,v])=>localStorage.setItem(k,v)); location.reload() }
|
||||
reader.readAsText(file); });
|
||||
|
||||
/*Reset Settings*/ e$all(".efy_localstorage_reset").forEach(x =>{ x.onclick = () => { Object.entries(localStorage).forEach(([k])=>{ if (k.includes('efy')){ localStorage.removeItem(k)} }); location.reload() }});
|
||||
/*Reset Settings*/ $all(".efy_localstorage_reset").forEach(x =>{ x.onclick = () => { Object.entries(localStorage).forEach(([k])=>{ if (k.includes('efy')){ localStorage.removeItem(k)} }); location.reload() }});
|
||||
|
||||
/*Determine Audio Path*/ let audioPath = getComputedStyle(e$root).getPropertyValue('--efy_audio_path').replaceAll(' ','');
|
||||
/*Determine Audio Path*/ let audioPath = $css_prop('--efy_audio_path');
|
||||
|
||||
/*Audio*/ let efyaudio = {}; ['pop','ok','ok2','ok3','ok4','hover','slide','squish','step','error','disabled'].forEach(x => { efyaudio[x] = new Audio(`${audioPath}/${x}.mp3`) }); e$body.addEventListener("pointerdown", efyaudio_fn, {once: true});
|
||||
/*Audio*/ let efyaudio = {}; ['pop','ok','ok2','ok3','ok4','hover','slide','squish','step','error','disabled'].forEach(x => { efyaudio[x] = new Audio(`${audioPath}/${x}.mp3`) }); $body.addEventListener("pointerdown", efyaudio_fn, {once: true});
|
||||
|
||||
async function efyaudio_fn() { if (localStorage.efy_audio_status == 'on' ){ if (localStorage.efy_audio_click == 'on') {
|
||||
/*Ok*/ e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('button:not([disabled], [type=submit], [type=reset], [efy_tab], .shaka-overflow-menu button, .shaka-overflow-menu-button, .shaka-back-to-overflow-button), .video-grid>div')) { efyaudio.ok.cloneNode().play() }});
|
||||
/*Ok*/ $body.addEventListener("pointerup", ()=>{ if (event.target.matches('button:not([disabled], [type=submit], [type=reset], [efy_tab], .shaka-overflow-menu button, .shaka-overflow-menu-button, .shaka-back-to-overflow-button), .video-grid>div')) { efyaudio.ok.cloneNode().play() }});
|
||||
/*Ok: Online*/ window.addEventListener("online", ()=>{ efyaudio.ok.cloneNode().play()});
|
||||
/*Ok2*/ e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('.efy_img_previews [efy_bg_nr]')) { efyaudio.ok2.cloneNode().play() }});
|
||||
/*Ok4*/ e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('[type=submit]')) { efyaudio.ok4.cloneNode().play() }});
|
||||
/*Ok: on Change*/ e$body.addEventListener("change", ()=>{ if (event.target.matches('input, textarea')) { efyaudio.ok.cloneNode().play() }});
|
||||
/*Pop*/ e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('summary, select:not([multiple], [disabled]), [efy_tabs] [efy_tab], [efy_alert], [efy_alert] *, .shaka-overflow-menu button, .shaka-overflow-menu-button, .shaka-back-to-overflow-button')) { efyaudio.pop.cloneNode().play() }});
|
||||
/*Slide*/ e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('[efy_sidebar_btn_open], [efy_sidebar_btn_close]')) { efyaudio.slide.cloneNode().play() }});
|
||||
/*Error*/ e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('[type=reset]')) { efyaudio.error.cloneNode().play() }});
|
||||
/*Ok2*/ $body.addEventListener("pointerup", ()=>{ if (event.target.matches('.efy_img_previews [efy_bg_nr]')) { efyaudio.ok2.cloneNode().play() }});
|
||||
/*Ok4*/ $body.addEventListener("pointerup", ()=>{ if (event.target.matches('[type=submit]')) { efyaudio.ok4.cloneNode().play() }});
|
||||
/*Ok: on Change*/ $body.addEventListener("change", ()=>{ if (event.target.matches('input, textarea')) { efyaudio.ok.cloneNode().play() }});
|
||||
/*Pop*/ $body.addEventListener("pointerup", ()=>{ if (event.target.matches('summary, select:not([multiple], [disabled]), [efy_tabs] [efy_tab], [efy_alert], [efy_alert] *, .shaka-overflow-menu button, .shaka-overflow-menu-button, .shaka-back-to-overflow-button')) { efyaudio.pop.cloneNode().play() }});
|
||||
/*Slide*/ $body.addEventListener("pointerup", ()=>{ if (event.target.matches('[efy_sidebar_btn_open], [efy_sidebar_btn_close]')) { efyaudio.slide.cloneNode().play() }});
|
||||
/*Error*/ $body.addEventListener("pointerup", ()=>{ if (event.target.matches('[type=reset]')) { efyaudio.error.cloneNode().play() }});
|
||||
/*Error: Offline*/ window.addEventListener("offline", ()=>{ efyaudio.error.cloneNode().play()});
|
||||
/*Disabled*/ e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('[disabled]')) { efyaudio.disabled.cloneNode().play() }});
|
||||
/*Step*/ e$body.addEventListener("pointerdown", ()=>{ if (event.target.matches('input:not([type=radio], [type=checkbox], [type=reset], [disabled]), textarea:not([disabled])')) { efyaudio.step.cloneNode().play() }});
|
||||
} /*Hover*/ if (localStorage.efy_audio_hover == "on") { e$all("summary, select:not([multiple], [disabled]), [type=submit], [type=reset], [efy_sidebar_btn_open], [efy_sidebar_btn_close], .video-grid>div").forEach(x => x.addEventListener("mouseenter",()=> efyaudio.hover.cloneNode().play() ));}}}
|
||||
/*Disabled*/ $body.addEventListener("pointerup", ()=>{ if (event.target.matches('[disabled]')) { efyaudio.disabled.cloneNode().play() }});
|
||||
/*Step*/ $body.addEventListener("pointerdown", ()=>{ if (event.target.matches('input:not([type=radio], [type=checkbox], [type=reset], [disabled]), textarea:not([disabled])')) { efyaudio.step.cloneNode().play() }});
|
||||
} /*Hover*/ if (localStorage.efy_audio_hover == "on") { $all("summary, select:not([multiple], [disabled]), [type=submit], [type=reset], [efy_sidebar_btn_open], [efy_sidebar_btn_close], .video-grid>div").forEach(x => x.addEventListener("mouseenter",()=> efyaudio.hover.cloneNode().play() ));}}}
|
||||
|
||||
/*Quick Shortcuts*/
|
||||
e$(".efy_quick_search").onclick =()=> e$('.efy_quick_shortcuts [efy_search_input]').toggleAttribute('efy_display_none');
|
||||
e$(".efy_quick_reload").onclick =()=> location.reload();
|
||||
e$(".efy_quick_fullscreen").onclick =()=> { document.exitFullscreen(); document.documentElement.requestFullscreen(); };
|
||||
e$(".efy_quick_back").onclick =()=> window.history.go(-1);
|
||||
e$(".efy_quick_forward").addEventListener('pointerup', async ()=> window.history.go(1));
|
||||
|
||||
/*Tabs*/ e$all('[efy_tabs]').forEach(z => { let x = '[efy_tabs='+z.getAttribute('efy_tabs')+'] > ';
|
||||
e$all(x+'[efy_tab]').forEach(y => { let cld = e$create('code'); cld.textContent = y.textContent; y.textContent = ''; y.appendChild(cld); y.onclick = e => { let efy_tab = e.target.getAttribute('efy_tab');
|
||||
e$all(x+'[efy_tab]').forEach(y => y.removeAttribute('efy_active') ); e.target.setAttribute('efy_active', '1');
|
||||
e$all(x+'[efy_content]').forEach(y => y.removeAttribute('efy_active') ); e$(x+' [efy_content="'+efy_tab+'"]').setAttribute('efy_active', '1');
|
||||
/*EFY Tabs*/ $all('[efy_tabs]').forEach(z => { let x = '[efy_tabs='+z.getAttribute('efy_tabs')+'] > ';
|
||||
$all(x+'[efy_tab]').forEach(y => { let cld = $create('code'); cld.textContent = y.textContent; y.textContent = ''; y.appendChild(cld); y.onclick = e => { let efy_tab = e.target.getAttribute('efy_tab');
|
||||
$all(x+'[efy_tab]').forEach(y => y.removeAttribute('efy_active') ); e.target.setAttribute('efy_active', '1');
|
||||
$all(x+'[efy_content]').forEach(y => y.removeAttribute('efy_active') ); $(x+' [efy_content="'+efy_tab+'"]').setAttribute('efy_active', '1');
|
||||
} }); });
|
||||
|
||||
/*Clock & Timer*/ function efy_time_0(i) { if (i < 10) {i = '0' + i} return i; }
|
||||
|
||||
/*Clock*/ function efy_clock() {let t = new Date(), h = t.getHours(), m = t.getMinutes(); m = efy_time_0(m);
|
||||
e$all('[efy_clock]').forEach(x =>{ x.innerHTML = h+':'+m; }); setTimeout(efy_clock, 10000); } efy_clock();
|
||||
$all('[efy_clock]').forEach(x =>{ x.textContent = h+':'+m; }); setTimeout(efy_clock, 10000); } efy_clock();
|
||||
|
||||
/*Timer*/ e$all('[efy_timer]').forEach(y => { y.insertAdjacentHTML('beforeend',`<div efy_text>00:00:00</div><button efy_start></button><button efy_reset></button>`); let x = '[efy_timer='+y.getAttribute('efy_timer')+'] ', play = e$(x+'[efy_start]'), reset= e$(x+'[efy_reset]'), timer_text = e$(x+'[efy_text]'), interval, [hour,minute,second,h,m,s] = [0,0,0,'00','00','00'];
|
||||
/*Timer*/ $all('[efy_timer]').forEach(y => { $append(y, $add('div', {efy_text: ''}, ['00:00:00'])); $append(y, $add('button', {efy_start: ''})); $append(y, $add('button', {efy_reset: ''}));
|
||||
|
||||
let x = '[efy_timer='+y.getAttribute('efy_timer')+'] ', play = $(x+'[efy_start]'), reset= $(x+'[efy_reset]'), timer_text = $(x+'[efy_text]'), interval, [hour,minute,second,h,m,s] = [0,0,0,'00','00','00'];
|
||||
play.addEventListener("click", () => {clearInterval(interval); play.toggleAttribute('efy_active'); if (play.hasAttribute('efy_active')) { interval = setInterval(() => { second++;
|
||||
s = efy_time_0(second); if (second > 59) {s = '00'; second = 0; minute++;
|
||||
m = efy_time_0(minute); if (minute > 59) {m = '00'; minute = 0; hour++;
|
||||
h = efy_time_0(hour);
|
||||
}} timer_text.innerText = h+':'+m+':'+s; }, 1000); } else { clearInterval(interval); } });
|
||||
reset.addEventListener("click", () => {clearInterval(interval); [hour,minute,second,h,m,s] = [0,0,0,'00','00','00']; timer_text.innerText = "00:00:00"; play.removeAttribute('efy_active');}); });
|
||||
}} timer_text.textContent = h+':'+m+':'+s; }, 1000); } else { clearInterval(interval); } });
|
||||
reset.addEventListener("click", () => {clearInterval(interval); [hour,minute,second,h,m,s] = [0,0,0,'00','00','00']; timer_text.textContent = "00:00:00"; play.removeAttribute('efy_active');}); });
|
||||
|
||||
/*Cursor*/ async function efy_cursor_fn(){ let x = e$('[efy_cursor]'), efy_css_cursor = e$create("style"); efy_css_cursor.classList.add("efy_css_cursor"); efy_css_cursor.innerHTML = `[efy_cursor_on], [efy_cursor_on] * {cursor: none!important} [efy_cursor_on] [efy_cursor] { height: 16rem; width: 16rem; position: absolute; background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; border-radius: var(--efy_radius0); pointer-events: none; opacity: 0; transition: opacity 0.5s linear; box-shadow: 0 0 5rem #0003; z-index: 999999!important}`; document.head.appendChild(efy_css_cursor); document.addEventListener('pointermove', (e)=>{ x.style.left = e.pageX - 8 + 'px'; x.style.top = e.pageY - 8 + 'px'; x.style.opacity = 1;}); document.addEventListener('touchstart', ()=>{ x.style.opacity = 0;}); document.addEventListener('touchmove', ()=>{ x.style.opacity = 0;}); document.addEventListener('touchend', ()=>{ x.style.opacity = 0}); } efy_cursor_fn();
|
||||
/*Search Filter */ $all('[efy_search]').forEach(a =>{ let search = a.getAttribute('efy_search'), container = `#${a.id}[efy_search="${search}"]`;
|
||||
$all(container +' [efy_search_input]').forEach(z =>{ z.addEventListener('keyup', ()=>{ let val = z.value.toLowerCase();
|
||||
$all(container +' '+ search).forEach(x =>{ if (x.innerHTML.toLowerCase().includes(val) == 0) {x.setAttribute('efy_display_none','1')} else {x.removeAttribute('efy_display_none')}})})})});
|
||||
|
||||
/*Search Filter */ e$all('[efy_search]').forEach(a =>{ let search = a.getAttribute('efy_search'), container = `#${a.id}[efy_search="${search}"]`;
|
||||
e$all(container +' [efy_search_input]').forEach(z =>{ z.addEventListener('keyup', ()=>{ let val = z.value.toLowerCase();
|
||||
e$all(container +' '+ search).forEach(x =>{ if (x.innerHTML.toLowerCase().includes(val) == 0) {x.setAttribute('efy_display_none','1')} else {x.removeAttribute('efy_display_none')}})})})});
|
||||
/*Alerts*/ $insert($body, 'afterbegin', $add('div', {efy_alerts: ''})); $body.addEventListener("pointerup", ()=>{ if (event.target.matches('[efy_alert]')) { event.target.remove() }});
|
||||
|
||||
/*Alerts*/ e$body.insertAdjacentHTML('afterbegin',`<div efy_alerts></div>`);
|
||||
e$body.addEventListener("pointerup", ()=>{ if (event.target.matches('[efy_alert] *') || event.target.matches('[efy_alert] *')) { e$('[efy_alert]').remove() }});
|
||||
/*Online / Offline*/ for (let a = ['offline', 'online'], b = ["You're OFFLINE", "You're back ONLINE"], c = ['Maybe check your internet connection?', 'Reload the page if needed'], i = 0; i <a.length; i++) { window.addEventListener(a[i], () =>{ $append($('[efy_alerts]'), $add('div', {efy_alert: '', class: `efy_alert_${a[i]}`}, [$add('div', {}, [$add('h6', {}, [b[i]]), $add('p', {}, [c[i]])]), $add('button', {efy_btn_square: ''}, [$add('i', {efy_icon: 'remove'})])]))})}
|
||||
|
||||
/*Online / Offline*/ window.addEventListener('offline', () => { console.log('offline'); e$('[efy_alerts]').insertAdjacentHTML('afterbegin',`<div efy_alert><div><h6>You're OFFLINE</h6><p>Maybe check your internet connection?</p></div><button efy_btn_square><i efy_icon="remove"></i></button></div>`) });
|
||||
window.addEventListener('online', () => { console.log('online'); e$('[efy_alerts]').insertAdjacentHTML('afterbegin',`<div efy_alert><div><h6>You're back ONLINE</h6></div><button efy_btn_square><i efy_icon="remove"></i></button></div>`) });
|
||||
|
||||
/*End*/};
|
||||
/*End scope*/}
|
||||
|
|
|
|||
Loading…
Reference in a new issue