chuijs 3.6.2 → 3.6.4

package/framework/components/chui_inputs/chui_file/file.js

@@ -1,76 +1,76 @@
-//version: 1.0.0
-
-class AcceptTypes {
-    //Изображения
-    static ALL_IMAGE = "image/*"
-    static PNG = "image/png"
-    static GIF = "image/gif"
-    static JPEG = "image/jpeg"
-    //===========
-    //Аудио
-    static ALL_AUDIO = "audio/*"
-    //===========
-    //Видео
-    static ALL_VIDEO = "video/*"
-    //===========
-}
-
-exports.AcceptTypes = AcceptTypes
-
-class FileInput {
-    #chui_file_main = document.createElement('chui_file_main');
-    #chui_file_input = document.createElement('chui_file_input');
-    #id = require("randomstring").generate();
-    #title = String();
-    #input = document.createElement('input');
-    #label = document.createElement('label');
-    constructor(options = {
-        name: String(), title: String(), accept: [],
-        required: Boolean(), disableFocus: Boolean(), multiple: Boolean(),
-        changeListener: () => {}, focusListener: () => {}, blurListener: () => {}
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_fileInput');
-        this.#input.type = 'file';
-        this.#input.className = 'file_input';
-        this.#input.id = this.#id;
-        //Options
-        if (options.name !== undefined) this.#input.name = options.name;
-        if (options.changeListener !== undefined) this.#input.addEventListener('change', options.changeListener);
-        if (options.focusListener !== undefined) this.#input.addEventListener('focus', options.focusListener);
-        if (options.blurListener !== undefined) this.#input.addEventListener('blur', options.blurListener);
-        if (options.required !== undefined) this.#input.required = options.required;
-        if (options.disableFocus !== undefined) this.#input.addEventListener("mousedown", () => { return false });
-        if (options.accept) this.#input.accept = options.accept.join(", ");
-        if (options.multiple) this.#input.multiple = options.multiple;
-        if (options.title !== undefined) {
-            this.#label.innerText = options.title;
-            this.#label.className = 'input_label';
-            this.#label.setAttribute('for', this.#id);
-            this.#chui_file_input.appendChild(this.#label);
-        }
-        this.#chui_file_main.appendChild(this.#input);
-        this.#chui_file_input.appendChild(this.#chui_file_main);
-    }
-    addChangeListener(listener = () => {}) { this.#input.addEventListener('change', listener); }
-    addFocusListener(listener = () => {}) { this.#input.addEventListener('focus', listener); }
-    addBlurListener(listener = () => {}) { this.#input.addEventListener('blur', listener); }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
-    getFile(index = Number()) { return this.#input.files[index]; }
-    getFiles() { return this.#input.files; }
-    setDisabled(value = Boolean()) {
-        this.#input.disabled = value
-        if (value) {
-            this.#chui_file_main.classList.add("chui_file_main_disabled")
-            this.#input.className = "file_input_disabled"
-            this.#label.className = "input_label_disabled"
-        } else {
-            this.#chui_file_main.classList.remove("chui_file_main_disabled")
-            this.#input.className = "file_input"
-            this.#label.className = "input_label"
-        }
-    }
-    set() { return this.#chui_file_input; }
-}
-
-exports.FileInput = FileInput
+//version: 1.0.0
+
+class AcceptTypes {
+    //Изображения
+    static ALL_IMAGE = "image/*"
+    static PNG = "image/png"
+    static GIF = "image/gif"
+    static JPEG = "image/jpeg"
+    //===========
+    //Аудио
+    static ALL_AUDIO = "audio/*"
+    //===========
+    //Видео
+    static ALL_VIDEO = "video/*"
+    //===========
+}
+
+exports.AcceptTypes = AcceptTypes
+
+class FileInput {
+    #chui_file_main = document.createElement('chui_file_main');
+    #chui_file_input = document.createElement('chui_file_input');
+    #id = require("randomstring").generate();
+    #title = String();
+    #input = document.createElement('input');
+    #label = document.createElement('label');
+    constructor(options = {
+        name: String(), title: String(), accept: [],
+        required: Boolean(), disableFocus: Boolean(), multiple: Boolean(),
+        changeListener: () => {}, focusListener: () => {}, blurListener: () => {}
+    }) {
+        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_fileInput');
+        this.#input.type = 'file';
+        this.#input.className = 'file_input';
+        this.#input.id = this.#id;
+        //Options
+        if (options.name !== undefined) this.#input.name = options.name;
+        if (options.changeListener !== undefined) this.#input.addEventListener('change', options.changeListener);
+        if (options.focusListener !== undefined) this.#input.addEventListener('focus', options.focusListener);
+        if (options.blurListener !== undefined) this.#input.addEventListener('blur', options.blurListener);
+        if (options.required !== undefined) this.#input.required = options.required;
+        if (options.disableFocus !== undefined) this.#input.addEventListener("mousedown", () => { return false });
+        if (options.accept) this.#input.accept = options.accept.join(", ");
+        if (options.multiple) this.#input.multiple = options.multiple;
+        if (options.title !== undefined) {
+            this.#label.innerText = options.title;
+            this.#label.className = 'input_label';
+            this.#label.setAttribute('for', this.#id);
+            this.#chui_file_input.appendChild(this.#label);
+        }
+        this.#chui_file_main.appendChild(this.#input);
+        this.#chui_file_input.appendChild(this.#chui_file_main);
+    }
+    addChangeListener(listener = () => {}) { this.#input.addEventListener('change', listener); }
+    addFocusListener(listener = () => {}) { this.#input.addEventListener('focus', listener); }
+    addBlurListener(listener = () => {}) { this.#input.addEventListener('blur', listener); }
+    getName() { return this.#input.name; }
+    getTitle() { return this.#title; }
+    getFile(index = Number()) { return this.#input.files[index]; }
+    getFiles() { return this.#input.files; }
+    setDisabled(value = Boolean()) {
+        this.#input.disabled = value
+        if (value) {
+            this.#chui_file_main.classList.add("chui_file_main_disabled")
+            this.#input.className = "file_input_disabled"
+            this.#label.className = "input_label_disabled"
+        } else {
+            this.#chui_file_main.classList.remove("chui_file_main_disabled")
+            this.#input.className = "file_input"
+            this.#label.className = "input_label"
+        }
+    }
+    set() { return this.#chui_file_input; }
+}
+
+exports.FileInput = FileInput

package/framework/components/chui_inputs/chui_file/styles.css

@@ -1,100 +1,100 @@
-chui_file_input {
-    display: flex;
-    flex-direction: column;
-    width: max-content;
-    height: max-content;
-    margin: var(--margin)
-}
-
-chui_file_main {
-    display: block;
-    width: max-content;
-    height: max-content;
-    margin: 0;
-    border-radius: var(--border_radius);
-    background: transparent;
-    color: var(--text_color);
-    border: none;
-    align-items: center;
-    position: relative;
-}
-
-.chui_file_main_disabled {
-    cursor: not-allowed;
-    background: transparent;
-}
-
-.file_input_disabled {
-    cursor: not-allowed;
-    width: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--text_color_disabled);
-    text-align: start;
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-.input_label_disabled {
-    cursor: not-allowed;
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color_disabled)
-}
-
-.file_input {
-    width: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--text_color);
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-.input_label {
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
-}
-
-input[type=file]::file-selector-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;
-    margin: 0 var(--margin) 0 0;
-    color: var(--text_color);
-    transition: all var(--transition_time);
-    font-family: 'chui_Ubuntu';
-    background: var(--button_background);
-    border: 1px solid var(--button_border_color);
-}
-
-input[type=file]::file-selector-button:hover {
-    background: var(--button_background_hover);
-    color: var(--text_color_hover);
-    border: 1px solid var(--button_border_color_hover);
-}
-
-input[type=file]:disabled::file-selector-button {
-    cursor: not-allowed;
-    color: var(--text_color_disabled);
-    background: var(--button_background_disabled);
-    border: 1px solid var(--border_color);
-}
-
-input[type=file]:disabled::file-selector-button:hover {
-    background: var(--button_background_disabled);
-    color: var(--text_color_disabled);
+chui_file_input {
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    height: max-content;
+    margin: var(--margin)
+}
+
+chui_file_main {
+    display: block;
+    width: max-content;
+    height: max-content;
+    margin: 0;
+    border-radius: var(--border_radius);
+    background: transparent;
+    color: var(--text_color);
+    border: none;
+    align-items: center;
+    position: relative;
+}
+
+.chui_file_main_disabled {
+    cursor: not-allowed;
+    background: transparent;
+}
+
+.file_input_disabled {
+    cursor: not-allowed;
+    width: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--text_color_disabled);
+    text-align: start;
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+.input_label_disabled {
+    cursor: not-allowed;
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color_disabled)
+}
+
+.file_input {
+    width: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--text_color);
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+.input_label {
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color)
+}
+
+input[type=file]::file-selector-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;
+    margin: 0 var(--margin) 0 0;
+    color: var(--text_color);
+    transition: all var(--transition_time);
+    font-family: 'chui_I';
+    background: var(--button_background);
+    border: 1px solid var(--button_border_color);
+}
+
+input[type=file]::file-selector-button:hover {
+    background: var(--button_background_hover);
+    color: var(--text_color_hover);
+    border: 1px solid var(--button_border_color_hover);
+}
+
+input[type=file]:disabled::file-selector-button {
+    cursor: not-allowed;
+    color: var(--text_color_disabled);
+    background: var(--button_background_disabled);
+    border: 1px solid var(--border_color);
+}
+
+input[type=file]:disabled::file-selector-button:hover {
+    background: var(--button_background_disabled);
+    color: var(--text_color_disabled);
 }