mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Merge pull request #1498 from dragos-efy/efy
Better security, Introducing efy modules, Webkit support, Accessibility outline
This commit is contained in:
Bnyro
GitHub
commit
1173b24d29
3 changed files with 257 additions and 247 deletions
103
efy/efy.css
103
efy/efy.css
|
|
@ -1,6 +1,6 @@
|
|||
/*EFY UI 2022.09.11*/:root { --efy_font_size: 1px;
|
||||
/*EFY UI 2022.09.28*/:root { --efy_font_size: 1px;
|
||||
--efy_radius0: calc(var(--efy_radius) / 1.25); --efy_radius2: calc(var(--efy_radius) * 1.5); --efy_radius00: calc(var(--efy_radius) / 3);
|
||||
--efy_padding: 8rem 16rem; --efy_padding2: 3rem 6rem; --efy_gap: 15rem; --efy_body_width: 1120rem;
|
||||
--efy_padding: 8rem 12rem; --efy_padding2: 3rem 6rem; --efy_gap: 15rem; --efy_body_width: 1120rem;
|
||||
--efy_color: rgb(var(--efy_color1_var)); --efy_color_trans: rgba(var(--efy_color1_var), 0.3);
|
||||
--efy_color2: rgb(var(--efy_color2_var)); --efy_color2_trans: rgba(var(--efy_color2_var), 0.3);
|
||||
|
||||
|
|
@ -9,17 +9,17 @@
|
|||
--efy_text: rgb(var(--efy_bg_var)); --efy_text_trans: rgba(var(--efy_bg_var), 0.3); --efy_text_trans2: rgba(var(--efy_bg_var), 0.45); --efy_text2: var(--efy_bg);
|
||||
--efy_color_border: rgba(var(--efy_bg_var), 0.07);}
|
||||
|
||||
/*Light: All*/ [efy_theme*=light] {--efy_bg: rgb(255,255,255); --efy_bg_var: 0,0,0; color-scheme: light}
|
||||
/*Dark: All*/ [efy_theme*=dark] {--efy_bg: rgb(0,0,0); --efy_bg_var: 255,255,255; color-scheme: dark}
|
||||
/*Light: All*/ [efy_mode*=light] {--efy_bg: rgb(255,255,255); --efy_bg_var: 0,0,0; color-scheme: light}
|
||||
/*Dark: All*/ [efy_mode*=dark] {--efy_bg: rgb(0,0,0); --efy_bg_var: 255,255,255; color-scheme: dark}
|
||||
|
||||
/*Sepia*/ [efy_theme=light_sepia] {--efy_bg: rgb(244,236,216); --efy_text: rgb(91,70,54)}
|
||||
/*Dark*/ [efy_theme=dark_dark] {--efy_bg: rgb(35,35,35); --efy_text: rgb(220,220,220)}
|
||||
/*Nord*/ [efy_theme=dark_nord] {--efy_bg: rgb(35,40,50); --efy_text: rgb(165,175,195)}
|
||||
/*Black*/ [efy_theme=dark_black] {--efy_text: rgb(200,200,200)}
|
||||
/*Dark Transparent*/ [efy_theme=dark_trans] {--efy_text2: rgb(0,0,0)}
|
||||
/*Sepia*/ [efy_mode=light_sepia] {--efy_bg: rgb(244,236,216); --efy_text: rgb(91,70,54)}
|
||||
/*Dark*/ [efy_mode=dark_dark] {--efy_bg: rgb(35,35,35); --efy_text: rgb(220,220,220)}
|
||||
/*Nord*/ [efy_mode=dark_nord] {--efy_bg: rgb(35,40,50); --efy_text: rgb(165,175,195)}
|
||||
/*Black*/ [efy_mode=dark_black] {--efy_text: rgb(200,200,200)}
|
||||
/*Dark Transparent*/ [efy_mode=dark_trans] {--efy_text2: rgb(0,0,0)}
|
||||
|
||||
/*Custom Text*/ [efy_color_text][efy_theme] {--efy_text: rgb(var(--efy_color_text_var)); --efy_text_trans: rgba(var(--efy_bg_var), 0.3); --efy_text_trans2: rgb(var(--efy_color_text_var), 0.45)}
|
||||
/*Custom Background*/ [efy_color_bgcol][efy_theme] {--efy_bg: rgb(var(--efy_color_bgcol_var))}
|
||||
/*Custom Text*/ [efy_color_text][efy_mode] {--efy_text: rgb(var(--efy_color_text_var)); --efy_text_trans: rgba(var(--efy_bg_var), 0.3); --efy_text_trans2: rgb(var(--efy_color_text_var), 0.45)}
|
||||
/*Custom Background*/ [efy_color_bgcol][efy_mode] {--efy_bg: rgb(var(--efy_color_bgcol_var))}
|
||||
|
||||
|
||||
/*Display: Block*/ table, .efy_toggle_visible {display: block}
|
||||
|
|
@ -31,11 +31,11 @@
|
|||
/*Content: None*/ [efy_select] [for*=efy_color]:before, [efy_select] [for*=efy_color]:after {content: none}
|
||||
|
||||
/*BG: Transparent*/ html, body, .efy_sidebar {background: transparent!important}
|
||||
/*BG*/ html:not([efy_theme*=trans]):before, html:not([efy_theme*=trans]):after {background: var(--efy_bg)!important}
|
||||
/*BG*/ html:not([efy_mode*=trans]):before, html:not([efy_mode*=trans]):after {background: var(--efy_bg)!important}
|
||||
/*BG1*/ aside, th, [type="file"], pre, textarea, select, input, details, blockquote, pre, article, tr:nth-child(even), [efy_alert] {background: var(--efy_bg1)}
|
||||
/*BG: text*/ mark, kbd {background: var(--efy_text)}
|
||||
/*BG: efy*/ button, [role="button"], [type="submit"], [type="reset"], [type="button"], blockquote:before, [efy_sidebar_btn_open]:hover, [efy_sidebar_btn_close]:hover, [type="checkbox"]:checked, [type="radio"]:checked, option:checked, [efy_select] input:checked + label, [efy_tabs] [efy_tab][efy_active], .efy_img_previews [efy_bg_nr][efy_active]:before {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; -webkit-text-fill-color: var(--efy_text2)}
|
||||
/*BG: efy Trans*/ [type="range"], [type="radio"], [type="checkbox"], [efy_sidebar_btn_open], [efy_sidebar_btn_close], [efy_select] label, [efy_tabs] [efy_tab]:not([efy_active]) {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)), linear-gradient(165deg, var(--efy_color_trans), var(--efy_color2_trans)); -webkit-background-clip: text, padding-box; -moz-background-clip: text, padding-box; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; box-shadow: inset 0 0 0 1.5rem var(--efy_color_border)!important; border: 0!important}
|
||||
/*BG: efy Trans*/ [type="range"], [type="radio"], [type="checkbox"], [efy_sidebar_btn_open], [efy_select] label, [efy_tabs] [efy_tab]:not([efy_active]) {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)), linear-gradient(165deg, var(--efy_color_trans), var(--efy_color2_trans)); -webkit-background-clip: text, padding-box; -moz-background-clip: text, padding-box; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; box-shadow: inset 0 0 0 1.5rem var(--efy_color_border)!important; border: 0!important}
|
||||
|
||||
|
||||
/*Text color 1*/ body, textarea, select, input, pre, pre code, header > nav a, header > nav a:visited, [efy_sidebar_btn_close], [efy_sidebar_btn_open]:hover {color: var(--efy_text)}
|
||||
|
|
@ -44,16 +44,18 @@
|
|||
/*Text color: efy*/ a, a:visited, pre > code, code, samp {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent}
|
||||
/*Text-Decoration: None*/ a, a:visited {text-decoration: none}
|
||||
|
||||
/*Border*/ textarea, select, input, button, [role="button"], [type="submit"], [type="reset"], [type="button"], details, pre, td, th, article, aside, blockquote, [type="file"], .efy_sidebar, [efy_tabs] [efy_content], [efy_alert] {border: 1.5rem solid var(--efy_color_border)}
|
||||
/*Border*/ textarea, select, input:not([type=color]), button, [role="button"], [type="submit"], [type="reset"], [type="button"], details, pre, td, th, article, aside, blockquote, [type="file"], .efy_sidebar, [efy_tabs] [efy_content], [efy_alert] {border: 1.5rem solid var(--efy_color_border)}
|
||||
/*Border: None*/ [type=color] {border: none!important}
|
||||
|
||||
/*Outline: None*/ * {outline: none!important}
|
||||
/*Outline*/ textarea:focus, select:focus, input:not([type=checkbox], [type=radio]):focus, [type="file"]:focus, [type="range"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_outline] [type=checkbox]:focus, [efy_outline] [type=radio]:focus, [efy_outline] button:focus, [efy_outline] [role="button"]:focus, [efy_outline] [type="submit"]:focus, [efy_outline] [type="reset"]:focus, [efy_outline] [type="button"]:focus, [efy_outline] [efy_select] input:focus + label, [efy_outline] [efy_tabs] [efy_tab]:focus {outline: 3rem solid var(--efy_text)!important}
|
||||
/*Outline Offset*/ [type=checkbox], [type=radio], button, [efy_select] label, [efy_tabs] [efy_tab] {outline-offset: 4rem}
|
||||
/*Outline: Box-Shadow*/ :is(textarea, select, [type="file"]):focus, input:not([type=checkbox], [type=radio], [role="button"], [type="submit"], [type="reset"], [type="button"], [type=color], [type=range]):focus, [efy_outline] :is(details:focus-within:not([efy_help])) {box-shadow: 0 0 0 3rem var(--efy_text)!important}
|
||||
|
||||
/*Outline Offset*/ [efy_outline] :is([type=radio], [type=checkbox], button, [role="button"], [type="submit"], [type="reset"], [type="button"], [type=range], [type=color], a, [efy_tabs] [efy_tab]):focus, [efy_outline] [efy_select] input:focus + label, [efy_outline] :is([efy_select] [for*=efy_color], [efy_help]):focus-within {outline: 3rem solid var(--efy_text)!important; outline-offset: 4rem!important}
|
||||
|
||||
|
||||
/*Radius*/ textarea, select, input, img, video, pre, details, summary, blockquote, article, aside, [type="range"], button, [role="button"], [type="submit"], [type="reset"], [type="button"], img, video, audio, table, [efy_sidebar_btn_open], [efy_sidebar_btn_close], [efy_select] label, [efy_tabs] [efy_tab] {border-radius: var(--efy_radius)}
|
||||
/*Radius2*/ [efy_timer], [efy_clock], [efy_alert] {border-radius: var(--efy_radius2)}
|
||||
/*Radius0*/ mark, kbd, [type="checkbox"], [type="radio"] {border-radius: var(--efy_radius0)}
|
||||
/*Radius0*/ mark, kbd, [type="checkbox"], [type="radio"], [efy_outline] a:focus {border-radius: var(--efy_radius0)}
|
||||
/*Radius00*/ [type="radio"]:checked:after {border-radius: var(--efy_radius00)}
|
||||
|
||||
|
||||
|
|
@ -66,8 +68,9 @@
|
|||
|
||||
/*Cursor: Pointer*/ button:focus, button:enabled:hover, [role="button"]:focus, [role="button"]:not([aria-disabled="true"]):hover, [type="submit"]:focus, [type="submit"]:enabled:hover, [type="reset"]:focus, [type="reset"]:enabled:hover, [type="button"]:focus, [type="button"]:enabled:hover, summary, [type="range"], [type="file"], [efy_sidebar_btn_close], [efy_sidebar_btn_open], [efy_select] label {cursor: pointer}
|
||||
/*Cursor: Help*/ abbr {cursor: help}
|
||||
/*Cursor: None*/ /* * {cursor: none!important} */
|
||||
/*Pointer Events: None*/ [efy_tabs] [efy_tab] code {pointer-events: none}
|
||||
/*Cursor: None*/ [efy_cursor_none] *, [efy_cursor_custom], [efy_cursor_custom] * {cursor: none!important}
|
||||
/*Cursor: Custom*/ [efy_cursor_custom] [efy_cursor] { height: 16rem; width: 16rem; margin-left: -8rem; margin-top: -8rem; position: absolute; background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; border-radius: var(--efy_radius0); pointer-events: none; box-shadow: 0 0 5rem #0003; z-index: 999999!important}
|
||||
/*Pointer Events: None*/ [efy_tabs] [efy_tab] code, [efy_alert] *, a > button {pointer-events: none}
|
||||
|
||||
|
||||
/*Disabled*/ input:disabled, textarea:disabled, select:disabled, button[disabled],[role="button"][aria-disabled="true"],[type="submit"][disabled],[type="reset"][disabled],[type="button"][disabled],[type="checkbox"][disabled],[type="radio"][disabled],select[disabled] {opacity: 0.5; cursor: not-allowed}
|
||||
|
|
@ -92,7 +95,7 @@
|
|||
/*Selection Color*/ ::selection {background: var(--efy_text); color: var(--efy_text2); -webkit-text-fill-color: var(--efy_text2)} ::-moz-selection {background: var(--efy_text); color: var(--efy_text2); -moz-text-fill-color: var(--efy_text2)}
|
||||
|
||||
|
||||
/*Scrollbar*/ ::-webkit-scrollbar {width:20rem; min-height:20rem; background: transparent!important} ::-webkit-scrollbar-thumb{background: transparent!important; border-radius: 9rem; border: 6rem solid transparent; box-shadow: inset 0 0 0 6rem var(--efy_bg2), inset 0 0 0 1.5rem var(--efy_bg1)} ::-webkit-scrollbar-thumb:hover{box-shadow: inset 0 0 0 6rem var(--efy_text)} ::-webkit-scrollbar-corner {background: transparent!important}
|
||||
/*Scrollbar*/ ::-webkit-scrollbar {width:20rem; min-height:20rem; background: transparent!important} ::-webkit-scrollbar-thumb{background: transparent!important; border-radius: var(--efy_radius0); border: 6rem solid transparent; box-shadow: inset 0 0 0 6rem var(--efy_bg2), inset 0 0 0 1.5rem var(--efy_bg1)} ::-webkit-scrollbar-thumb:hover{box-shadow: inset 0 0 0 6rem var(--efy_text)} ::-webkit-scrollbar-corner {background: transparent!important}
|
||||
|
||||
|
||||
/*Animation: None*/ [efy_tabs] [efy_tab]:active {-webkit-animation: none;animation: none}
|
||||
|
|
@ -193,10 +196,10 @@ img, video, iframe {width: 100%; max-width: 100%}
|
|||
|
||||
/*Color input*/ [type="color"], [type="color"]:focus {background: transparent; width: 40rem; height: 40rem; padding: 0}
|
||||
|
||||
::-webkit-color-swatch-wrapper {background: transparent; width: 40rem; height: 40rem; padding: 0}
|
||||
::-webkit-color-swatch-wrapper {background: transparent; width: 100%; height: 100%; padding: 0;}
|
||||
|
||||
::-webkit-color-swatch {border-radius: var(--efy_radius); box-shadow: inset 0 0 0 2rem #0003}
|
||||
::-moz-color-swatch {border-radius: var(--efy_radius); box-shadow: inset 0 0 0 2rem #0003}
|
||||
::-webkit-color-swatch {border-radius: var(--efy_radius); box-shadow: inset 0 0 0 2rem #0003; border: 0!important}
|
||||
::-moz-color-swatch {border-radius: var(--efy_radius); box-shadow: inset 0 0 0 2rem #0003; border: 0!important}
|
||||
|
||||
|
||||
/*Range input*/
|
||||
|
|
@ -215,8 +218,8 @@ img, video, iframe {width: 100%; max-width: 100%}
|
|||
[type="range"]:focus::-moz-range-thumb {}
|
||||
|
||||
|
||||
::-webkit-file-upload-button {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; color: var(--efy_text2); border: 1.5rem solid var(--efy_color_border); border-radius: var(--efy_radius); padding: var(--efy_padding); font-weight: bold; cursor: pointer}
|
||||
::file-selector-button {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; color: var(--efy_text2); border: 1.5rem solid var(--efy_color_border); border-radius: var(--efy_radius); padding: var(--efy_padding); font-weight: bold; cursor: pointer}
|
||||
::-webkit-file-upload-button {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; color: var(--efy_text2); border: 1.5rem solid var(--efy_color_border); border-radius: var(--efy_radius); padding: var(--efy_padding); font-weight: bold; cursor: pointer; font-family: var(--efy_font_family)!important}
|
||||
::file-selector-button {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; color: var(--efy_text2); border: 1.5rem solid var(--efy_color_border); border-radius: var(--efy_radius); padding: var(--efy_padding); font-weight: bold; cursor: pointer; font-family: var(--efy_font_family)!important}
|
||||
|
||||
progress, meter {height: 15rem; border: 0; background: linear-gradient(165deg, var(--efy_color_trans), var(--efy_color2_trans)); background-clip: padding-box; border-radius: var(--efy_radius0); border: 0}
|
||||
::-webkit-progress-bar, ::-webkit-meter-bar {height: 15rem; background: linear-gradient(165deg, var(--efy_color_trans), var(--efy_color2_trans)); background-clip: padding-box; border-radius: var(--efy_radius0); border: 0}
|
||||
|
|
@ -238,23 +241,39 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right:
|
|||
[efy_help] summary {pointer-events: none; margin-bottom: 0; padding: 0}
|
||||
[efy_help] summary:after {margin-left: 8rem; opacity: 0.5; pointer-events: all}
|
||||
|
||||
/*Select Menu*/ [efy_select] label:before {width: 16rem; height: 16rem; margin-right: 8rem; margin-top: -0.2rem; position: relative; border-radius: var(--efy_radius0); border: 2.4rem solid transparent; background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-out; mask-composite: exclude}
|
||||
/*Select Menu*/ [efy_select] label:before {width: 16rem; height: 16rem; margin-right: 8rem; margin-top: -0.2rem; position: relative; border-radius: calc(var(--efy_radius) / 1.5); border: 2.5rem solid transparent; background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-out; mask-composite: exclude}
|
||||
|
||||
[efy_select] [type="radio"]:checked + label:after {background: var(--efy_text2); width: 9.6rem; height: 9.6rem; top: 8.4rem; left: 5.6rem; margin: var(--efy_padding); border-radius: calc(var(--efy_radius0) / 2)}
|
||||
[efy_select] [type="checkbox"]:checked + label:after {top: 13.2rem; left: 22.4rem; width: 4.8rem; height: 9.6rem; border-radius: 2rem; border-right: solid var(--efy_text2) 3.2rem; border-bottom: solid var(--efy_text2) 3.2rem; transform: rotate(45deg)}
|
||||
[efy_select] input:checked + label:before {border-color: var(--efy_text2)}
|
||||
[efy_select] [type="radio"]:checked + label:after {background: var(--efy_text2); width: 9.6rem; height: 9.6rem; top: 8rem; left: 5.6rem; margin: var(--efy_padding); border-radius: calc(var(--efy_radius) / 3)}
|
||||
[efy_select] [type="checkbox"]:checked + label:after {top: 13.2rem; left: 18.6rem; width: 4.8rem; height: 9.6rem; border-radius: 2rem; border-right: solid var(--efy_text2) 3.3rem; border-bottom: solid var(--efy_text2) 3.3rem; transform: rotate(45deg)}
|
||||
[efy_select] input:checked + label:before {border-color: var(--efy_text2); background: transparent}
|
||||
[efy_select] [type="checkbox"], [efy_select] [type="radio"], [efy_select] label [type="color"] {opacity:0}
|
||||
[efy_select] label, [efy_tabs] [efy_tab], [efy_select] p, [efy_select] button {margin: 6px 8rem 6rem 0}
|
||||
[efy_select] label, [efy_tabs] [efy_tab], [efy_select] p, [efy_select] button, .efy_about a, #efy_backup :is(a, button:not(a button), [type=file]) {margin: 6px 12rem 6rem 0}
|
||||
|
||||
/*Padding-Right for Expanding Boxes*/ select:not([multiple]) {padding-right: 32rem} summary, details[open] summary {padding-right: 20rem}
|
||||
|
||||
/*Card*/ [efy_card] {background: var(--efy_bg1); border-radius: var(--efy_radius); border: 1.5rem solid var(--efy_color_border); padding: 15rem; display: grid; gap: 5rem; width: 100%; align-content: baseline}
|
||||
|
||||
/*Sidebar*/ .efy_sidebar {padding: 16rem; width: 100vw; max-width: 450rem; height: 100vh; z-index: 9; position: fixed; right: -450rem; top: 0; box-shadow: 0 0 30rem #0005; border-radius: var(--efy_radius2) 0 0 var(--efy_radius2); transition: right .3s; backdrop-filter: blur( 48rem)}
|
||||
/*Sidebar*/ .efy_sidebar{padding: 16rem 14rem 16rem 16rem; width: 100vw; max-width: 450rem; height: 100vh; z-index: 9999; position: fixed; right: -450rem; top: 0; box-shadow: 0 0 30rem #0005; border-radius: var(--efy_radius2) 0 0 var(--efy_radius2); transition: right .3s; overflow-y: auto; backdrop-filter: blur( 48rem); -webkit-backdrop-filter: blur( 48rem)}
|
||||
|
||||
[efy_sidebar_btn_open], [efy_sidebar_btn_close] {z-index: 9999; color: var(--efy_color); font-size: 20rem; padding: 4rem 10rem; position: fixed; text-align: center; top: 15rem; right: 15rem}
|
||||
[efy_sidebar_btn_open] {z-index: 9999; color: var(--efy_color); font-size: 20rem; padding: 4rem 10rem; position: fixed; text-align: center; top: 15rem; right: 15rem}
|
||||
[efy_sidebar_btn_open=relative] {position: relative; top:0; right:0}
|
||||
|
||||
[efy_logo] summary code {font-size: 28rem!important; padding: 0}
|
||||
[efy_logo] summary code:nth-of-type(2) {-webkit-text-fill-color: var(--efy_text);}
|
||||
|
||||
[efy_about] {display: flex; gap: 15rem; justify-content: space-between}
|
||||
|
||||
[efy_sidebar_btn_close] {font-size: 31rem; height: 100%; margin: 0; padding: 0 13rem; text-align: center}
|
||||
[efy_sidebar_btn_close] i {margin:0}
|
||||
|
||||
details.efy_about {width: fit-content}
|
||||
[efy_logo]:not([open]) summary {padding: 0 25rem 0 0; margin: 0 10rem}
|
||||
[efy_logo]:not([open]) summary:before {margin: 7rem -10rem 0 0}
|
||||
|
||||
/*efy_sidebar: Body*/ .efy_toggle_efy_sidebar {width: calc(100vw - 450rem); margin-right: 450rem; --efy_body_width: 100%}
|
||||
.efy_toggle_efy_sidebar::-webkit-scrollbar {width: 0}
|
||||
/*efy_sidebar: Menu*/ .efy_toggle_efy_sidebar_panel {right: 0}
|
||||
|
||||
/*Radius Input*/ .efy_sidebar_range {position: absolute; z-index: 99; pointer-events: none; top: 52rem; color: var(--efy_text2); font-weight: bold; width: 32rem; height: 32rem; line-height: 32rem; display: block; text-align: center; border-radius: var(--efy_radius); margin-left: 16rem}
|
||||
|
||||
/*Button Align*/ #efy_btn_align div {display: grid; gap: 16rem; grid-template-columns: 1fr 1fr 1fr; width: fit-content}
|
||||
|
|
@ -272,10 +291,6 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right:
|
|||
[efy_select] [for=efy_color_bgcol] {-webkit-text-fill-color: var(--efy_text); -moz-text-fill-color: var(--efy_text)}
|
||||
|
||||
|
||||
/*efy_sidebar: Body*/ .efy_toggle_efy_sidebar {width: calc(100vw - 450rem); margin-right: 450rem; --efy_body_width: 100%}
|
||||
/*efy_sidebar: Menu*/ .efy_toggle_efy_sidebar_panel {right: 0; overflow: scroll}
|
||||
|
||||
|
||||
|
||||
/*Convergence*/ @media only screen and (max-width: 720px) {
|
||||
.efy_toggle_efy_sidebar_panel {max-width: 100%}
|
||||
|
|
@ -287,15 +302,9 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right:
|
|||
|
||||
/*Temporary*/
|
||||
|
||||
[efy_logo] {margin: -5rem 0 0 0} [efy_logo] summary {font-size: 30rem; padding: 0}
|
||||
[efy_logo] summary::after {font-size: 25rem; vertical-align: baseline}
|
||||
|
||||
.efy_sidebar_card {width:100%}
|
||||
.efy_sidebar {overflow: overlay}
|
||||
|
||||
.efy_custom_bgimage .efy_img_previews {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16rem; padding: 8rem 0}
|
||||
.efy_custom_bgimage [efy_bg_nr] {aspect-ratio: 1; cursor: pointer; position: relative; box-shadow: inset 0 0 20rem #0003, 0 0 20rem #0003; background-size: cover!important; background-repeat: no-repeat!important; border-radius: var(--efy_radius)}
|
||||
.efy_custom_bgimage .efy_img_previews [efy_bg_nr][efy_active]:before {content: ''; display:block; z-index: -1; position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; border-radius: calc(var(--efy_radius) * 1.2)}
|
||||
#efy_sbtheme [efy_content=images] .efy_img_previews {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16rem; padding: 8rem 0}
|
||||
#efy_sbtheme [efy_content=images] [efy_bg_nr] {aspect-ratio: 1; cursor: pointer; position: relative; box-shadow: inset 0 0 20rem #0003, 0 0 20rem #0003; background-size: cover!important; background-repeat: no-repeat!important; border-radius: var(--efy_radius)}
|
||||
#efy_sbtheme [efy_content=images] .efy_img_previews [efy_bg_nr][efy_active]:before {content: ''; display:block; z-index: -1; position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; border-radius: calc(var(--efy_radius) * 1.2)}
|
||||
|
||||
.efy_quick_shortcuts [efy_search_input] {margin-bottom: 15rem}
|
||||
|
||||
|
|
@ -320,7 +329,7 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right:
|
|||
/*Quick Shortcuts*/ .efy_quick_shortcuts .efy_quick_buttons button {display: inline-flex; gap: 12rem; margin-bottom: 12rem; margin-right: 8rem; padding: 10rem} .efy_quick_shortcuts .efy_quick_buttons button i {margin:0}
|
||||
.efy_quick_shortcuts .efy_quick_back i{transform: rotate(180deg)}
|
||||
|
||||
/*EFY Icons*/ @font-face {font-family: 'efy_icons'; src: url('efy_icons.woff2') format('truetype'); font-weight: normal; font-style: normal; font-display: block} i, [efy_start]:before, [efy_reset]:before, [efy_help] summary:after, details > summary:before, [efy_sidebar_btn_open]:before, [efy_sidebar_btn_close]:before {font-family: 'efy_icons' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; vertical-align: middle; /*Better Rendering*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} i {margin-right: 8rem}
|
||||
/*EFY Icons*/ @font-face {font-family: 'efy_icons'; src: url('efy_icons.woff2') format('truetype'); font-weight: normal; font-style: normal; font-display: block} i, [efy_start]:before, [efy_reset]:before, [efy_help] summary:after, details > summary:before, [efy_sidebar_btn_open]:before {font-family: 'efy_icons' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; vertical-align: middle; /*Better Rendering*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} i {margin-right: 8rem}
|
||||
|
||||
[efy_icon=arrow]:before {content: "\e900"}
|
||||
[efy_icon=arrow_down]:before {content: "\e900"; position:absolute; margin: 1rem 0 0 -16rem; transform: rotate(180deg)} [efy_icon=arrow_down] {margin-left: 16rem}
|
||||
|
|
@ -330,7 +339,7 @@ details[open]:not([efy_help]) > summary:before {transform: rotate(90deg); right:
|
|||
[efy_icon=star]:before {content: "\e904"}
|
||||
[efy_icon=audio]:before {content: "\e905"}
|
||||
[efy_icon=menu]:before, [efy_sidebar_btn_open]:before {content: "\e906"}
|
||||
[efy_icon=remove]:before, [efy_sidebar_btn_close]:before {content: "\e909"}
|
||||
[efy_icon=remove]:before {content: "\e909"}
|
||||
[efy_icon=play]:before, [efy_timer] [efy_start]:before {content: "\e90a"}
|
||||
[efy_icon=pause]:before, [efy_timer] [efy_start][efy_active]:before {content: "\e90b"}
|
||||
[efy_icon=fullscreen]:before {content: "\e90c"}
|
||||
|
|
|
|||
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*/}
|
||||
|
|
|
|||
10
src/App.vue
10
src/App.vue
|
|
@ -30,6 +30,14 @@
|
|||
Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
--efy_body_width: unset;
|
||||
--efy_audio_path: ./audio;
|
||||
--efy_modules: efy_quick, efy_mode, efy_filters, efy_backup, efy_accessibility, efy_audio;
|
||||
|
||||
--efy_module_quick: on;
|
||||
--efy_module_mode: on;
|
||||
--efy_module_filters: on;
|
||||
--efy_module_backup: on;
|
||||
--efy_module_accessibility: on;
|
||||
--efy_module_audio: on;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -37,7 +45,7 @@ body {
|
|||
}
|
||||
|
||||
/*Default Mode*/
|
||||
[efy_theme="default_mode"] {
|
||||
[efy_mode="default_mode"] {
|
||||
color-scheme: dark;
|
||||
--efy_bg_var: 255, 255, 255;
|
||||
--efy_bg: rgb(15, 15, 15);
|
||||
|
|
|
|||
Loading…
Reference in a new issue