chuijs 3.6.2 → 3.6.4

package/framework/components/chui_media/video_styles.css

@@ -1,161 +1,161 @@
-chui_vp_main {
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--border_radius);
-    --seek-before-width: 0%;
-    --volume-before-width: 0%;
-    border: none;
-}
-
-chui_vp_block {
-    display: block;
-    position: absolute;
-    width: -webkit-fill-available;
-    bottom: 0;
-    backdrop-filter: var(--global_blur);
-    border-bottom-right-radius: var(--border_radius);
-    border-bottom-left-radius: var(--border_radius);
-    background: var(--header_background);
-    opacity: 0;
-}
-
-/* Блок информация */
-chui_vp_info {
-    display: flex;
-    margin: 16px 12px;
-}
-
-chui_vp_seek_buf {
-    width: 0;
-    height: 5px;
-    border-radius: 5px;
-    background: rgba(255,255,255,0.30);
-    position: absolute
-}
-
-#chui_vp_seek {
-    margin: 0;
-    position: relative;
-    -webkit-appearance: none;
-    border-radius: 5px;
-    width: 100%;
-    height: 5px;
-    cursor: pointer;
-    outline: none;
-    background: rgba(255,255,255,0.15);
-    float: left;
-    z-index: 1
-}
-
-#chui_vp_seek::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 5px;
-    border-radius: 5px
-}
-
-#chui_vp_seek::before {
-    transition: all 0s;
-    position: absolute;
-    content: '';
-    left: 0;
-    width: var(--seek-before-width);
-    height: 5px;
-    border-radius: 5px;
-    background: var(--blue_prime_background);
-    cursor: pointer;
-}
-
-#chui_vp_seek::-webkit-slider-thumb {
-    position: relative;
-    -webkit-appearance: none;
-    border: none;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-    background-color: rgba(255,255,255,0);
-    cursor: pointer;
-    margin: -8px 0 0 0
-}
-
-#chui_vp_seek:focus {
-    outline: none;
-    border: none;
-}
-
-#chui_vp_seek:focus::-webkit-slider-runnable-track {
-    outline: none;
-    border: none;
-}
-
-/* УПРАВЛЕНИЕ ГРОМКОСТЬЮ */
-chui_vp_volume_block {
-    display: flex;
-    margin-left: auto
-}
-
-#chui_vp_volume {
-    position: relative;
-    -webkit-appearance: none;
-    border-radius: 5px;
-    width: 100%;
-    height: 5px;
-    cursor: pointer;
-    outline: none;
-    background: rgba(255,255,255,0.15);
-    float: left;
-    z-index: 1;
-    margin: auto 6px;
-}
-
-#chui_vp_volume::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 5px;
-    border-radius: 5px
-}
-
-#chui_vp_volume::before {
-    transition: all 0s;
-    position: absolute;
-    content: '';
-    left: 0;
-    width: var(--volume-before-width);
-    height: 5px;
-    border-radius: 5px;
-    background: var(--blue_prime_background);
-    cursor: pointer;
-}
-
-#chui_vp_volume::-webkit-slider-thumb {
-    position: relative;
-    -webkit-appearance: none;
-    border: none;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-    background-color: rgba(255,255,255,0);
-    cursor: pointer;
-    margin: -8px 0 0 0
-}
-
-#chui_vp_volume:focus {
-    outline: none;
-    border: none;
-}
-
-#chui_vp_volume:focus::-webkit-slider-runnable-track {
-    outline: none;
-    border: none;
-}
-
-/* Блок управления */
-chui_vp_controls {
-    display: flex;
-    justify-content: left;
-    margin: var(--margin);
-    align-items: center
-}
-
-/* КНОПКИ */
-chui_vp_play_pause, chui_vp_next, chui_vp_prev {
-    display: flex
+chui_vp_main {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border_radius);
+    --seek-before-width: 0%;
+    --volume-before-width: 0%;
+    border: none;
+}
+
+chui_vp_block {
+    display: block;
+    position: absolute;
+    width: -webkit-fill-available;
+    bottom: 0;
+    backdrop-filter: var(--global_blur);
+    border-bottom-right-radius: var(--border_radius);
+    border-bottom-left-radius: var(--border_radius);
+    background: var(--header_background);
+    opacity: 0;
+}
+
+/* Блок информация */
+chui_vp_info {
+    display: flex;
+    margin: 16px 12px;
+}
+
+chui_vp_seek_buf {
+    width: 0;
+    height: 5px;
+    border-radius: 5px;
+    background: rgba(255,255,255,0.30);
+    position: absolute
+}
+
+#chui_vp_seek {
+    margin: 0;
+    position: relative;
+    -webkit-appearance: none;
+    border-radius: 5px;
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    outline: none;
+    background: rgba(255,255,255,0.15);
+    float: left;
+    z-index: 1
+}
+
+#chui_vp_seek::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    border-radius: 5px
+}
+
+#chui_vp_seek::before {
+    transition: all 0s;
+    position: absolute;
+    content: '';
+    left: 0;
+    width: var(--seek-before-width);
+    height: 5px;
+    border-radius: 5px;
+    background: var(--blue_prime_background);
+    cursor: pointer;
+}
+
+#chui_vp_seek::-webkit-slider-thumb {
+    position: relative;
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background-color: rgba(255,255,255,0);
+    cursor: pointer;
+    margin: -8px 0 0 0
+}
+
+#chui_vp_seek:focus {
+    outline: none;
+    border: none;
+}
+
+#chui_vp_seek:focus::-webkit-slider-runnable-track {
+    outline: none;
+    border: none;
+}
+
+/* УПРАВЛЕНИЕ ГРОМКОСТЬЮ */
+chui_vp_volume_block {
+    display: flex;
+    margin-left: auto
+}
+
+#chui_vp_volume {
+    position: relative;
+    -webkit-appearance: none;
+    border-radius: 5px;
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    outline: none;
+    background: rgba(255,255,255,0.15);
+    float: left;
+    z-index: 1;
+    margin: auto 6px;
+}
+
+#chui_vp_volume::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    border-radius: 5px
+}
+
+#chui_vp_volume::before {
+    transition: all 0s;
+    position: absolute;
+    content: '';
+    left: 0;
+    width: var(--volume-before-width);
+    height: 5px;
+    border-radius: 5px;
+    background: var(--blue_prime_background);
+    cursor: pointer;
+}
+
+#chui_vp_volume::-webkit-slider-thumb {
+    position: relative;
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background-color: rgba(255,255,255,0);
+    cursor: pointer;
+    margin: -8px 0 0 0
+}
+
+#chui_vp_volume:focus {
+    outline: none;
+    border: none;
+}
+
+#chui_vp_volume:focus::-webkit-slider-runnable-track {
+    outline: none;
+    border: none;
+}
+
+/* Блок управления */
+chui_vp_controls {
+    display: flex;
+    justify-content: left;
+    margin: var(--margin);
+    align-items: center
+}
+
+/* КНОПКИ */
+chui_vp_play_pause, chui_vp_next, chui_vp_prev {
+    display: flex
 }

package/framework/components/chui_menu_bar/menu_bar.js

@@ -1,75 +1,67 @@
-const {Animation} = require("../../modules/chui_animations/animations");
-
-class MenuBar {
-    #chui_menu_bar_main = document.createElement("chui_menu_bar_main")
-    constructor(options = { test: Boolean() }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_MenuBar');
-        this.#chui_menu_bar_main.setAttribute("test", options.test)
-    }
-    addMenuItems(...components) {
-        for (let component of components) {
-            let element = component.set()
-            new Animation(element).fadeIn()
-            this.#chui_menu_bar_main.appendChild(element);
-        }
-    }
-    set() {
-        return this.#chui_menu_bar_main;
-    }
-    static DROPDOWN(options = {title: String(), items: []}) {
-        return new MenuBarDropDown(options)
-    }
-}
-
-class MenuBarDropDown {
-    #mb_dd_main = document.createElement("menu_bar_drop_down_main");
-    #mb_dd_button = document.createElement("menu_bar_drop_down_button");
-    #mb_dd_dropdown = document.createElement("menu_bar_dropdown");
-    constructor(options = {title: String(), items: []}) {
-        this.#mb_dd_button.innerText = options.title;
-        this.#mb_dd_main.appendChild(this.#mb_dd_button)
-        this.#mb_dd_main.appendChild(this.#mb_dd_dropdown)
-        for (let item of options.items) {
-            let element = item.set();
-            for (let child of element.children) {
-                /*if (child.tagName === "BUTTON") {
-                    element.style.width = "-webkit-fill-available"
-                    element.style.margin = "0px 0px 3px 0px"
-                    child.classList.add("menu_bar_dropdown_button")
-                }
-                if (child.parentNode.tagName === "CHECKBOX") {
-                    element.style.width = "-webkit-fill-available"
-                    element.style.margin = "0px 0px 3px 0px"
-                    element.style.padding = "6px 10px"
-                    //child.classList.add("menu_bar_dropdown_button")
-                }*/
-            }
-            this.#mb_dd_dropdown.appendChild(item.set());
-        }
-
-        // Слушатели
-        this.#mb_dd_button.addEventListener("click", this.#mb_dd_button_click_event);
-        window.addEventListener('click', this.#window_click_event);
-    }
-    #mb_dd_button_click_event = () => {
-        if (this.#mb_dd_dropdown.style.display === "flex") {
-            this.#mb_dd_button.classList.remove("menu_bar_drop_down_button");
-            new Animation(this.#mb_dd_dropdown).fadeOut();
-        } else {
-            this.#mb_dd_button.classList.add("menu_bar_drop_down_button");
-            new Animation(this.#mb_dd_dropdown).fadeIn();
-        }
-    }
-    #window_click_event = (event) => {
-        let parent = event.target.parentNode;
-        if (parent !== this.#mb_dd_main) {
-            this.#mb_dd_button.classList.remove("menu_bar_drop_down_button");
-            new Animation(this.#mb_dd_dropdown).fadeOut();
-        }
-    }
-    set() {
-        return this.#mb_dd_main;
-    }
-}
-
+const {Animation} = require("../../modules/chui_animations/animations");
+
+const MENU_BAR_DROP_DOWN_ACTIVE_CLASS = "menu_bar_drop_down_button";
+
+class MenuBar {
+    #chui_menu_bar_main = document.createElement("chui_menu_bar_main")
+    constructor(options = { test: Boolean() }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_MenuBar');
+        if (options.test !== undefined) this.#chui_menu_bar_main.setAttribute("test", options.test)
+    }
+    addMenuItems(...components) {
+        for (let component of components) {
+            let element = component.set()
+            new Animation(element).fadeIn()
+            this.#chui_menu_bar_main.appendChild(element);
+        }
+    }
+    set() {
+        return this.#chui_menu_bar_main;
+    }
+    static DROPDOWN(options = {title: String(), items: []}) {
+        return new MenuBarDropDown(options)
+    }
+}
+
+class MenuBarDropDown {
+    #mb_dd_main = document.createElement("menu_bar_drop_down_main");
+    #mb_dd_button = document.createElement("menu_bar_drop_down_button");
+    #mb_dd_dropdown = document.createElement("menu_bar_dropdown");
+    #is_open = false;
+    constructor(options = {title: String(), items: []}) {
+        this.#mb_dd_button.innerText = options.title;
+        this.#mb_dd_main.appendChild(this.#mb_dd_button)
+        this.#mb_dd_main.appendChild(this.#mb_dd_dropdown)
+        for (let item of options.items) this.#mb_dd_dropdown.appendChild(item.set());
+
+        // Слушатели
+        this.#mb_dd_button.addEventListener("click", this.#mb_dd_button_click_event);
+        this.#mb_dd_dropdown.addEventListener("click", this.#mb_dd_dropdown_click_event);
+    }
+    #open() {
+        this.#is_open = true;
+        this.#mb_dd_button.classList.add(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
+        new Animation(this.#mb_dd_dropdown).fadeIn();
+        window.addEventListener('click', this.#window_click_event);
+    }
+    #close() {
+        this.#is_open = false;
+        this.#mb_dd_button.classList.remove(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
+        new Animation(this.#mb_dd_dropdown).fadeOut();
+        window.removeEventListener('click', this.#window_click_event);
+    }
+    #mb_dd_button_click_event = () => {
+        if (this.#is_open) this.#close(); else this.#open();
+    }
+    #mb_dd_dropdown_click_event = () => {
+        this.#close();
+    }
+    #window_click_event = (event) => {
+        if (this.#is_open && !this.#mb_dd_main.contains(event.target)) this.#close();
+    }
+    set() {
+        return this.#mb_dd_main;
+    }
+}
+
 exports.MenuBar = MenuBar

package/framework/components/chui_menu_bar/styles.css

@@ -1,77 +1,115 @@
-chui_menu_bar_main {
-    display: flex;
-    width: max-content;
-    height: max-content;
-    padding: 2px;
-}
-
-chui_menu_bar_button {
-    cursor: pointer;
-    height: max-content;
-    width: max-content;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    font-size: var(--font_default_size);
-    font-weight: 400;
-    border: none;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    color: var(--text_color);
-    margin: 2px
-}
-
-chui_menu_bar_button:hover {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-menu_bar_drop_down_main {
-    position: relative;
-    display: flex;
-    margin: auto 6px
-}
-
-menu_bar_drop_down_button:hover {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-.menu_bar_drop_down_button {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-menu_bar_drop_down_button {
-    cursor: pointer;
-    height: max-content;
-    width: max-content;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    font-size: var(--font_default_size);
-    font-weight: 400;
-    border: none;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    color: var(--text_color);
-}
-
-menu_bar_dropdown {
-    margin-top: 45px;
-    display: none;
-    position: absolute;
-    background: var(--header_background);
-    color: var(--text_color);
-    border: none;
-    border-radius: var(--border_radius);
-    padding: 6px;
-    z-index: 1;
-    left: 0;
-    min-width: max-content;
-    flex-direction: column;
-    backdrop-filter: var(--global_blur);
-    box-shadow: var(--box_shadow_main);
+chui_menu_bar_main {
+    display: flex;
+    width: max-content;
+    height: max-content;
+    padding: 2px;
+}
+
+chui_menu_bar_button {
+    cursor: pointer;
+    height: max-content;
+    width: max-content;
+    border-radius: var(--border_radius);
+    padding: var(--main_padding);
+    font-size: var(--font_default_size);
+    font-weight: 400;
+    border: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: var(--text_color);
+    margin: 2px
+}
+
+chui_menu_bar_button:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+chui_menu_bar_button:active {
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
+}
+
+menu_bar_drop_down_main {
+    position: relative;
+    display: flex;
+    margin: auto 6px
+}
+
+menu_bar_drop_down_button:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.menu_bar_drop_down_button {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+menu_bar_drop_down_button {
+    cursor: pointer;
+    height: max-content;
+    width: max-content;
+    border-radius: var(--border_radius);
+    padding: var(--main_padding);
+    font-size: var(--font_default_size);
+    font-weight: 400;
+    border: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: var(--text_color);
+}
+
+menu_bar_dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1;
+    display: none;
+    flex-direction: column;
+    min-width: max-content;
+    padding: var(--margin);
+    background: var(--header_background);
+    color: var(--text_color);
+    border: 1px solid var(--border_color);
+    border-radius: var(--border_radius);
+    box-shadow: var(--box_shadow_main);
+    backdrop-filter: var(--global_blur);
+    -webkit-backdrop-filter: var(--global_blur);
+}
+
+/* Пункты меню — плоские строки в стиле context_menu_item / user_item */
+menu_bar_dropdown chui_button {
+    margin: 0;
+    width: -webkit-fill-available;
+}
+
+menu_bar_dropdown .chui_button {
+    width: -webkit-fill-available;
+    justify-content: flex-start;
+    padding: var(--main_padding);
+    background: transparent;
+    border: none;
+}
+
+menu_bar_dropdown .chui_button:hover {
+    background: var(--blue_prime_background);
+    border: none;
+}
+
+menu_bar_dropdown .chui_button:active:not(:disabled) {
+    background: var(--element_background_prime);
+    border: none;
+}
+
+menu_bar_dropdown .chui_button .chui_button_text {
+    color: var(--text_color);
+}
+
+menu_bar_dropdown .chui_button:hover .chui_button_text {
+    color: var(--text_color_hover);
 }