first
This commit is contained in:
commit
457e062677
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
packages
|
||||||
|
venv
|
||||||
|
.idea
|
||||||
|
__pycache__
|
||||||
84
cdncli.py
Normal file
84
cdncli.py
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import argparse
|
||||||
|
import json
|
||||||
|
import requests
|
||||||
|
import os
|
||||||
|
import magic
|
||||||
|
|
||||||
|
parser = argparse.ArgumentParser(description='Videos to images')
|
||||||
|
|
||||||
|
parser.add_argument(
|
||||||
|
'-d',
|
||||||
|
'--dir',
|
||||||
|
type=str,
|
||||||
|
default='dist',
|
||||||
|
help='Директоия билда'
|
||||||
|
)
|
||||||
|
|
||||||
|
parser.add_argument(
|
||||||
|
'-fjs',
|
||||||
|
'--file_js',
|
||||||
|
type=str,
|
||||||
|
default='index.js',
|
||||||
|
help='Файл javascript билда'
|
||||||
|
)
|
||||||
|
|
||||||
|
parser.add_argument(
|
||||||
|
'-fcss',
|
||||||
|
'--file_css',
|
||||||
|
type=str,
|
||||||
|
default='index.css',
|
||||||
|
help='Файл css билда'
|
||||||
|
)
|
||||||
|
|
||||||
|
parser.add_argument(
|
||||||
|
'-f',
|
||||||
|
'--file',
|
||||||
|
type=str,
|
||||||
|
default='script.js',
|
||||||
|
help='Файл билда'
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
args = parser.parse_args()
|
||||||
|
|
||||||
|
if os.path.exists("package.json"):
|
||||||
|
d = json.load(open("package.json", 'rb'))
|
||||||
|
|
||||||
|
print("package name: {name}".format(name=d['name']))
|
||||||
|
print("package version: {version}".format(version=d['version']))
|
||||||
|
|
||||||
|
# filepath_js = "{dir}/{file}".format(dir=args.dir, file=args.file_js)
|
||||||
|
# if os.path.exists(filepath_js):
|
||||||
|
# file_js = {'file': open(filepath_js, 'rb')}
|
||||||
|
# res_js = requests.post(url='http://127.0.0.1:8000/uploadfile/',
|
||||||
|
# files=file_js, data={'package': d['name'], 'version': d['version'], 'type': 'js'})
|
||||||
|
# if res_js.ok:
|
||||||
|
# print("Successfully uploaded index.js")
|
||||||
|
# else:
|
||||||
|
# print("Wrong")
|
||||||
|
#
|
||||||
|
# filepath_css = "{dir}/{file}".format(dir=args.dir, file=args.file_css)
|
||||||
|
# if os.path.exists(filepath_css):
|
||||||
|
# file_css = {'file': open(filepath_css, 'rb')}
|
||||||
|
# res_css = requests.post(url='http://127.0.0.1:8000/uploadfile/',
|
||||||
|
# files=file_css, data={'package': d['name'], 'version': d['version'], 'type': 'css'})
|
||||||
|
# if res_css.ok:
|
||||||
|
# print("Successfully uploaded index.css")
|
||||||
|
# else:
|
||||||
|
# print("Wrong")
|
||||||
|
|
||||||
|
filepath = "{dir}/{file}".format(dir=args.dir, file=args.file)
|
||||||
|
if os.path.exists(filepath):
|
||||||
|
mime = magic.Magic(mime=True)
|
||||||
|
file_mime = mime.from_file(filepath)
|
||||||
|
file = {'file': open(filepath, 'rb')}
|
||||||
|
res = requests.post(url='http://127.0.0.1:8000/uploadfile/',
|
||||||
|
files=file, data={'package': d['name'], 'version': d['version'], 'filename': args.file})
|
||||||
|
if res.ok:
|
||||||
|
print(f"Successfully uploaded {filepath}")
|
||||||
|
else:
|
||||||
|
print("Wrong")
|
||||||
|
|
||||||
|
else:
|
||||||
|
print("package.json not found")
|
||||||
378
dist/index.css
vendored
Normal file
378
dist/index.css
vendored
Normal file
@ -0,0 +1,378 @@
|
|||||||
|
.nativeSelect {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
|
-ms-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
background: #2a2f3b;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 0;
|
||||||
|
display: none;
|
||||||
|
box-shadow: 2px 3px 5px #00000080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nativeSelect__nativeOption {
|
||||||
|
border: 1px solid #0a0b0e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nativeSelectActive {
|
||||||
|
min-width: 235px;
|
||||||
|
height: 50px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.nativeSelect {
|
||||||
|
min-width: 235px;
|
||||||
|
height: 50px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select[multiple="multiple"] {
|
||||||
|
color: #000;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #d1d1d19d;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #4d4d4d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
width: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
-o-transition: 1s;
|
||||||
|
background-color: #bebebc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-left: 3px;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon:hover {
|
||||||
|
-o-transition: 1s;
|
||||||
|
background-color: #fff;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon path {
|
||||||
|
color: #000;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: .5px;
|
||||||
|
transition: all .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-clear {
|
||||||
|
background-color: #0000;
|
||||||
|
position: absolute;
|
||||||
|
right: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-clear:hover {
|
||||||
|
background-color: #0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectWhite {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectWhite, .listWhite, .inputWhite, .pathBlack, .selectWhite {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caretWhite {
|
||||||
|
border-top: 6px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listWhite {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputWhite {
|
||||||
|
color: #000 !important;
|
||||||
|
border-bottom: 1px solid #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
z-index: 9999;
|
||||||
|
background-color: #00000073;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal_active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listModal {
|
||||||
|
top: 150px;
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflowHide {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classicSelect {
|
||||||
|
color: #fff;
|
||||||
|
background: #2a2f3b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classicSelect:hover {
|
||||||
|
background: #394050;
|
||||||
|
}
|
||||||
|
|
||||||
|
.classicList {
|
||||||
|
color: #fff;
|
||||||
|
background: #2a2f3b;
|
||||||
|
border: 1px solid #0a0b0e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pathWhite {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pathBlack {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectDark {
|
||||||
|
color: #fff;
|
||||||
|
background: #1d1d1d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caretWhite {
|
||||||
|
border-top: 6px solid #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listDark {
|
||||||
|
color: #fff;
|
||||||
|
background: #1d1d1d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputDark {
|
||||||
|
border-bottom: 1px solid #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-dropdown {
|
||||||
|
min-width: 235px;
|
||||||
|
-ms-border-radius: 10px;
|
||||||
|
-o-border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-select {
|
||||||
|
min-height: 50px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
cursor: pointer;
|
||||||
|
-ms-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
-o-transition: .5s;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
transition: all .5s;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-select .selected {
|
||||||
|
max-width: 195px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-select:hover {
|
||||||
|
-o-transition: .5s;
|
||||||
|
transition: all .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caret {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
-o-transition: .5s;
|
||||||
|
border-top: 6px solid #fff;
|
||||||
|
border-left: 5px solid #0000;
|
||||||
|
border-right: 5px solid #0000;
|
||||||
|
margin-right: 10px;
|
||||||
|
transition: all .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caret_rotate {
|
||||||
|
-o-transition: .5s;
|
||||||
|
transition: all .5s;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
max-height: 230px;
|
||||||
|
width: 220px;
|
||||||
|
-ms-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
-o-transition: .5s;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: -.2px;
|
||||||
|
padding: 7px;
|
||||||
|
list-style: none;
|
||||||
|
transition: all .5s;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow: 2px 3px 5px #00000080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list__item {
|
||||||
|
-o-transition: .5s;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px;
|
||||||
|
transition: all .5s;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list__item:hover {
|
||||||
|
-o-transition: .5s;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #8282822c;
|
||||||
|
transition: all .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .inputSearch {
|
||||||
|
width: 90%;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #fff;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .inputSearch:focus {
|
||||||
|
color: #fff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect-tag {
|
||||||
|
flex-flow: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect-tag li {
|
||||||
|
height: 20px;
|
||||||
|
-ms-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
background: #76767659;
|
||||||
|
border-radius: 5px;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 5px 5px 0;
|
||||||
|
padding: 2px 4px;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect-tag__button {
|
||||||
|
width: 15px;
|
||||||
|
height: 16px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
height: 20px;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
align-items: center;
|
||||||
|
margin: 6px 5px 0 7px;
|
||||||
|
font-size: 17px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
text-align: start;
|
||||||
|
background: #8282822c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.open {
|
||||||
|
-o-transition: .5s;
|
||||||
|
opacity: 1;
|
||||||
|
transition: all .5s;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.open_none {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
background-color: #8f9195 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-hidden {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.displayHide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
width: 98% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listModal {
|
||||||
|
width: 88% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-select {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-select_title {
|
||||||
|
padding: 24px 0 0 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=index.css.map */
|
||||||
1
dist/index.css.map
vendored
Normal file
1
dist/index.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
891
dist/index.js
vendored
Normal file
891
dist/index.js
vendored
Normal file
@ -0,0 +1,891 @@
|
|||||||
|
require("./index.css");
|
||||||
|
|
||||||
|
function $parcel$defineInteropFlag(a) {
|
||||||
|
Object.defineProperty(a, '__esModule', {value: true, configurable: true});
|
||||||
|
}
|
||||||
|
function $parcel$export(e, n, v, s) {
|
||||||
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
||||||
|
}
|
||||||
|
|
||||||
|
$parcel$defineInteropFlag(module.exports);
|
||||||
|
|
||||||
|
$parcel$export(module.exports, "default", () => $43d7963e56408b24$export$2e2bcd8739ae039);
|
||||||
|
function $5aca7c389be45fd0$export$b2e1d36bc0be1b2f(dataItem, index) {
|
||||||
|
const random = Math.random().toString(36).substring(2, 10);
|
||||||
|
let item;
|
||||||
|
if ($5aca7c389be45fd0$export$5c0c8aabba12399d(dataItem)) return dataItem;
|
||||||
|
else {
|
||||||
|
item = {
|
||||||
|
id: random,
|
||||||
|
title: dataItem,
|
||||||
|
value: index
|
||||||
|
};
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function $5aca7c389be45fd0$export$11380eda3eb06ca9(data, select) {
|
||||||
|
const { placeholder: placeholder , selected: selected } = data;
|
||||||
|
if (placeholder) select.innerText = placeholder;
|
||||||
|
else if (selected) select.innerText = selected;
|
||||||
|
else select.innerText = "Select...";
|
||||||
|
return select;
|
||||||
|
}
|
||||||
|
function $5aca7c389be45fd0$export$5c0c8aabba12399d(item) {
|
||||||
|
if (item && typeof item !== "object") return false;
|
||||||
|
return item.hasOwnProperty("id") && item.hasOwnProperty("title") && item.hasOwnProperty("value");
|
||||||
|
}
|
||||||
|
function $5aca7c389be45fd0$export$31b5fa56cc6048cb(element, content, styles) {
|
||||||
|
const select = document.createElement("div");
|
||||||
|
const selected = document.createElement("p");
|
||||||
|
const caret = document.createElement("div");
|
||||||
|
select.classList.add("cg-select");
|
||||||
|
select.classList.add("classicSelect");
|
||||||
|
selected.classList.add("selected");
|
||||||
|
caret.classList.add("caret");
|
||||||
|
select.appendChild(selected);
|
||||||
|
select.appendChild(caret);
|
||||||
|
if (content) {
|
||||||
|
const text = document.createTextNode(content);
|
||||||
|
selected.appendChild(text);
|
||||||
|
element.innerHTML = "";
|
||||||
|
element?.insertAdjacentElement("afterbegin", select);
|
||||||
|
} else if (styles) {
|
||||||
|
$5aca7c389be45fd0$export$edf5b2501a573922(element, styles);
|
||||||
|
select.setAttribute("style", `${styles}`);
|
||||||
|
selected.setAttribute("style", `${styles}`);
|
||||||
|
caret.setAttribute("style", `${styles}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function $5aca7c389be45fd0$export$4474211a0591e3fe(select, element, dataSelectText) {
|
||||||
|
const { selectedItems: selectedItems , indexes: indexes , theme: theme , multiselectTag: multiselectTag } = dataSelectText;
|
||||||
|
const options = element.querySelectorAll(".list__item");
|
||||||
|
const nativeOption = element.querySelectorAll(".nativeSelect__nativeOption");
|
||||||
|
const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||||
|
const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
|
const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
|
const checkBox = element.querySelectorAll("li input");
|
||||||
|
svgIcon.setAttribute("viewBox", "0 0 10 10");
|
||||||
|
path1.setAttribute("d", "M2,8 L8,2");
|
||||||
|
path2.setAttribute("d", "M2,2 L8,8");
|
||||||
|
svgIcon.appendChild(path1);
|
||||||
|
svgIcon.appendChild(path2);
|
||||||
|
if (multiselectTag && multiselectTag == true) return;
|
||||||
|
switch(theme){
|
||||||
|
case "dark":
|
||||||
|
path1.classList.add("pathWhite");
|
||||||
|
path2.classList.add("pathWhite");
|
||||||
|
break;
|
||||||
|
case "white":
|
||||||
|
path1.classList.add("pathBlack");
|
||||||
|
path2.classList.add("pathBlack");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
path1.classList.add("pathWhite");
|
||||||
|
path2.classList.add("pathWhite");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
svgIcon.classList.add("svg-icon");
|
||||||
|
svgIcon.classList.add("svg-clear");
|
||||||
|
select.appendChild(svgIcon);
|
||||||
|
svgIcon.addEventListener("click", (e)=>{
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
select.innerText = "";
|
||||||
|
nativeOption.forEach((option)=>{
|
||||||
|
option.removeAttribute("selected");
|
||||||
|
});
|
||||||
|
if (Array.isArray(selectedItems)) {
|
||||||
|
selectedItems.splice(0);
|
||||||
|
indexes.splice(0);
|
||||||
|
}
|
||||||
|
checkBox.forEach((item)=>{
|
||||||
|
if (item instanceof HTMLInputElement) item.checked = false;
|
||||||
|
});
|
||||||
|
$5aca7c389be45fd0$export$11380eda3eb06ca9(dataSelectText, select);
|
||||||
|
options.forEach((option)=>{
|
||||||
|
option.classList.remove("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function $5aca7c389be45fd0$export$668f6560249913a1(element, item) {
|
||||||
|
element.forEach((option)=>{
|
||||||
|
option.removeAttribute("selected");
|
||||||
|
if (option.textContent === item) option.setAttribute("selected", "selected");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function $5aca7c389be45fd0$export$a240606f327b3da2(element, item, condition) {
|
||||||
|
element.forEach((option)=>{
|
||||||
|
if (condition == true) {
|
||||||
|
if (option.textContent === item) option.setAttribute("selected", "selected");
|
||||||
|
} else if (condition == false) {
|
||||||
|
if (option.textContent === item) option.removeAttribute("selected");
|
||||||
|
} else return;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function $5aca7c389be45fd0$export$edf5b2501a573922(element, styles) {
|
||||||
|
const cgSelect = element.querySelector(".cg-select");
|
||||||
|
const caretSelect = element.querySelector(".caret");
|
||||||
|
const placeholderSelect = element.querySelector(".selected");
|
||||||
|
const lableItem = element.parentElement.querySelector("h1.label");
|
||||||
|
$5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.head, cgSelect);
|
||||||
|
$5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.caret, caretSelect);
|
||||||
|
$5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.lable, lableItem);
|
||||||
|
if (placeholderSelect) $5aca7c389be45fd0$export$5f8f940a0de3e7d(styles.placeholder, placeholderSelect);
|
||||||
|
}
|
||||||
|
function $5aca7c389be45fd0$export$5f8f940a0de3e7d(elemOption, selector) {
|
||||||
|
if (elemOption) Object.entries(elemOption).forEach(([key, value])=>{
|
||||||
|
selector.style[key] = value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function $3e0e9117e5437319$export$dfb0baf35876628e() {
|
||||||
|
const nativeSelect = document.createElement("select");
|
||||||
|
nativeSelect.setAttribute("name", "dataSelect");
|
||||||
|
nativeSelect.classList.add("nativeSelect");
|
||||||
|
return nativeSelect;
|
||||||
|
}
|
||||||
|
function $3e0e9117e5437319$export$401096e4c8c5bfbe() {
|
||||||
|
const nativeOption = document.createElement("option");
|
||||||
|
nativeOption.classList.add("nativeSelect__nativeOption");
|
||||||
|
return nativeOption;
|
||||||
|
}
|
||||||
|
function $3e0e9117e5437319$export$94c1ad1d6db6a1d0(data, title, index, id) {
|
||||||
|
const { element: element , option: option , indexes: indexes , selectedItems: selectedItems } = data;
|
||||||
|
const { placeholder: placeholder , styles: styles } = option;
|
||||||
|
const selected = element?.querySelector(".selected");
|
||||||
|
const nativeOption = element.querySelectorAll(".nativeSelect__nativeOption");
|
||||||
|
const liChip = document.createElement("li");
|
||||||
|
const textNode = document.createTextNode(title);
|
||||||
|
const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||||
|
const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
|
const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
|
svgIcon.setAttribute("viewBox", "0 0 10 10");
|
||||||
|
path1.setAttribute("d", "M3,7 L7,3");
|
||||||
|
path2.setAttribute("d", "M3,3 L7,7");
|
||||||
|
liChip.setAttribute("id", `tag-${index}-${id}`);
|
||||||
|
svgIcon.classList.add("svg-icon");
|
||||||
|
svgIcon.appendChild(path1);
|
||||||
|
svgIcon.appendChild(path2);
|
||||||
|
liChip.appendChild(textNode);
|
||||||
|
liChip.appendChild(svgIcon);
|
||||||
|
if (styles) {
|
||||||
|
const { chips: chips } = styles;
|
||||||
|
(0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(chips, liChip);
|
||||||
|
}
|
||||||
|
svgIcon.addEventListener("click", (event)=>{
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
(0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, title, false);
|
||||||
|
const deleteIcon = indexes.indexOf(index);
|
||||||
|
let checkBox;
|
||||||
|
indexes.splice(deleteIcon, 1);
|
||||||
|
selectedItems.splice(deleteIcon, 1);
|
||||||
|
if (id) checkBox = document.getElementById(`chbox-${id}`);
|
||||||
|
else checkBox = document.getElementById(`chbox-${index}`);
|
||||||
|
checkBox.checked = false;
|
||||||
|
checkBox.parentElement.classList.remove("active");
|
||||||
|
if (!selectedItems.length) selected.innerText = placeholder;
|
||||||
|
liChip.parentElement.removeChild(liChip);
|
||||||
|
});
|
||||||
|
return liChip;
|
||||||
|
}
|
||||||
|
function $3e0e9117e5437319$export$3ffa48e55176070e(random, lenguage) {
|
||||||
|
const inputSearch = document.createElement("input");
|
||||||
|
inputSearch.type = "text";
|
||||||
|
inputSearch.classList.add("inputSearch");
|
||||||
|
inputSearch.setAttribute("id", `searchSelect-${random}`);
|
||||||
|
if (lenguage) inputSearch.setAttribute("placeholder", `${lenguage}`);
|
||||||
|
else inputSearch.setAttribute("placeholder", "Search...");
|
||||||
|
inputSearch.addEventListener("click", (e)=>{
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
return inputSearch;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const $356528c60e5e24f4$export$cf48009033a0126b = {
|
||||||
|
selectPlaceholder: "Выберите элемент...",
|
||||||
|
placeholder: "Поиск...",
|
||||||
|
textInListSearch: "Совпадений нет..."
|
||||||
|
};
|
||||||
|
const $356528c60e5e24f4$export$84584c2a98eb6753 = {
|
||||||
|
selectPlaceholder: "Select element...",
|
||||||
|
placeholder: "Search...",
|
||||||
|
textInListSearch: "No matches..."
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function $e3e030f05caf96c0$export$e6eb54368342cb84(element, theme) {
|
||||||
|
const select = element.querySelector(".cg-select");
|
||||||
|
const caret = element.querySelector(".caret");
|
||||||
|
const list = element.querySelector("ul.list");
|
||||||
|
const search = element.querySelector(".inputSearch");
|
||||||
|
const path = element.querySelectorAll(".pathWhite");
|
||||||
|
const nativeSelect = element.querySelector(".nativeSelect");
|
||||||
|
select.classList.remove("classicSelect");
|
||||||
|
list.classList.remove("classicList");
|
||||||
|
path.forEach((elem)=>{
|
||||||
|
elem.classList.remove("pathBlack");
|
||||||
|
elem.classList.remove("pathWhite");
|
||||||
|
});
|
||||||
|
if (typeof theme === "string") switch(theme){
|
||||||
|
case "dark":
|
||||||
|
select.classList.add("selectDark");
|
||||||
|
list.classList.add("listDark");
|
||||||
|
nativeSelect?.classList.add("listDark");
|
||||||
|
path.forEach((elem)=>{
|
||||||
|
elem.classList.add("pathWhite");
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "white":
|
||||||
|
select.classList.add("selectWhite");
|
||||||
|
caret.classList.add("caretWhite");
|
||||||
|
list.classList.add("listWhite");
|
||||||
|
nativeSelect?.classList.add("listWhite");
|
||||||
|
path.forEach((elem)=>{
|
||||||
|
elem.classList.add("pathBlack");
|
||||||
|
});
|
||||||
|
if (search) search.classList.add("inputWhite");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
select.classList.add("classicSelect");
|
||||||
|
list.classList.add("classicList");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
select.classList.add(`${theme.styles.head}`);
|
||||||
|
list.classList.add(`${theme.styles.list}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
class $adaec01e28cd9884$export$ba2c4ca7a0a16031 {
|
||||||
|
/**
|
||||||
|
* Array of indexes of selected elements.
|
||||||
|
* @type {number[]}
|
||||||
|
*/ indexes = [];
|
||||||
|
/**
|
||||||
|
* @param {ICgSelect} setting Object accepting select settings.
|
||||||
|
* @constructor ICgSelect class constructor.
|
||||||
|
* @description The constructor takes an object and renders the select.
|
||||||
|
* @example
|
||||||
|
* options = {
|
||||||
|
* selector: 'Unique selector',
|
||||||
|
selected: 'Selected item',
|
||||||
|
placeholder: '...',
|
||||||
|
label: '...'
|
||||||
|
items: [string|number|object],
|
||||||
|
theme: string,
|
||||||
|
searchMode: true/false,
|
||||||
|
closeOnSelect: true/false,
|
||||||
|
nativeSelectMode: true/false,
|
||||||
|
listDisplayMode: true/false,
|
||||||
|
language: 'ru/en',
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
background: '...',
|
||||||
|
},
|
||||||
|
list: {...},
|
||||||
|
chips: {...},
|
||||||
|
carriage: {...},
|
||||||
|
placeholder: {...},
|
||||||
|
label: {..},
|
||||||
|
},
|
||||||
|
event: '...',
|
||||||
|
url: 'http/...',
|
||||||
|
multiselect: true/false,
|
||||||
|
multiselectTag: true/false,
|
||||||
|
* }
|
||||||
|
*/ constructor(setting){
|
||||||
|
this.init(setting);
|
||||||
|
this.render();
|
||||||
|
this.closeSelectClick();
|
||||||
|
this.initEvent();
|
||||||
|
}
|
||||||
|
//Getters
|
||||||
|
/**
|
||||||
|
* @returns {string[] | string} Returns the selected element(s) as an array / element / null.
|
||||||
|
* @description Getter returning the selected element(s) of the select.
|
||||||
|
*/ get value() {
|
||||||
|
return this.selectedItems ?? null;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @returns {number | number[]} Returns the indices of the selected element(s) as an array / empty array.
|
||||||
|
* @description A getter that returns the indexes of the selected element(s) of the select.
|
||||||
|
*/ get indexesOf() {
|
||||||
|
return this.indexes ?? [];
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Private method for initializing an instance of the ICgSelect class.
|
||||||
|
* @method init
|
||||||
|
* @member
|
||||||
|
* @private
|
||||||
|
* @param {ISgSelect} setting passed select settings.
|
||||||
|
* @description Private method. General initialization of the select. Obtaining tinctures and converting select elements.
|
||||||
|
* @example
|
||||||
|
* {
|
||||||
|
selector: '.cg-dropdown_one',
|
||||||
|
placeholder: 'Choose a car',
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
|
],
|
||||||
|
multiselect: true,
|
||||||
|
multiselectTag: true,
|
||||||
|
}
|
||||||
|
*/ init(setting) {
|
||||||
|
const { items: items , multiselect: multiselect , multiselectTag: multiselectTag , url: url , selector: selector , listDisplayMode: listDisplayMode , nativeSelectMode: nativeSelectMode , searchMode: searchMode , language: language , styles: styles , label: label , event: event , selected: selected , placeholder: placeholder , theme: theme , } = setting;
|
||||||
|
this.options = setting;
|
||||||
|
this.multiselect = multiselect;
|
||||||
|
this.multiselectTag = multiselectTag;
|
||||||
|
this.url = url;
|
||||||
|
this.selector = selector;
|
||||||
|
this.items = items;
|
||||||
|
this.searchMode = searchMode;
|
||||||
|
this.language = language;
|
||||||
|
this.nativeSelectMode = nativeSelectMode;
|
||||||
|
this.listDisplayMode = listDisplayMode;
|
||||||
|
this.styles = styles;
|
||||||
|
this.label = label;
|
||||||
|
this.event = event;
|
||||||
|
this.selected = selected;
|
||||||
|
this.placeholder = placeholder;
|
||||||
|
this.theme = theme;
|
||||||
|
const elem = document.querySelector(this.selector);
|
||||||
|
this.element = elem;
|
||||||
|
this.element?.addEventListener("click", (e)=>{
|
||||||
|
e.preventDefault();
|
||||||
|
this.open();
|
||||||
|
});
|
||||||
|
this.items = [];
|
||||||
|
if (this.url && !items) {
|
||||||
|
this.renderUrl();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.label) {
|
||||||
|
const labelItem = document.createElement("h1");
|
||||||
|
const textLabel = document.createTextNode(this.label);
|
||||||
|
labelItem.appendChild(textLabel);
|
||||||
|
labelItem.classList.add("label");
|
||||||
|
this.element.insertAdjacentElement("beforebegin", labelItem);
|
||||||
|
}
|
||||||
|
items.forEach((dataItem, index)=>{
|
||||||
|
let itemInputs = {
|
||||||
|
ItemValue: dataItem,
|
||||||
|
category: dataItem.category,
|
||||||
|
categoryItems: dataItem.categoryItems
|
||||||
|
};
|
||||||
|
if (itemInputs.category && itemInputs.categoryItems) {
|
||||||
|
this.category = itemInputs.category;
|
||||||
|
this.items.push(this.category);
|
||||||
|
itemInputs.categoryItems.forEach((categoryItem, indexCategory)=>{
|
||||||
|
this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(categoryItem, indexCategory));
|
||||||
|
});
|
||||||
|
} else this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(itemInputs.ItemValue, index));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @method render
|
||||||
|
* @param {string} select optional element. Passed to the initSelected.
|
||||||
|
* @description Render elements in select.
|
||||||
|
*/ render(select) {
|
||||||
|
const random = Math.random().toString(36).substring(2, 10);
|
||||||
|
if (select || select && this.styles) {
|
||||||
|
this.initSelected(select);
|
||||||
|
(0, $5aca7c389be45fd0$export$edf5b2501a573922)(this.element, this.styles);
|
||||||
|
} else this.initSelected();
|
||||||
|
const ulList = document.createElement("ul");
|
||||||
|
const nativeSelect = (0, $3e0e9117e5437319$export$dfb0baf35876628e)();
|
||||||
|
let inputSearch;
|
||||||
|
let textNode;
|
||||||
|
this.randomId = random;
|
||||||
|
ulList.classList.add("list");
|
||||||
|
ulList.classList.add("classicList");
|
||||||
|
if (this.styles) (0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(this.styles.list, ulList);
|
||||||
|
if (this.searchMode) {
|
||||||
|
if (this.language === "ru") inputSearch = (0, $3e0e9117e5437319$export$3ffa48e55176070e)(random, (0, $356528c60e5e24f4$export$cf48009033a0126b).placeholder);
|
||||||
|
else inputSearch = (0, $3e0e9117e5437319$export$3ffa48e55176070e)(random, (0, $356528c60e5e24f4$export$84584c2a98eb6753).placeholder);
|
||||||
|
(0, $5aca7c389be45fd0$export$5f8f940a0de3e7d)(this.styles?.search, inputSearch);
|
||||||
|
ulList.appendChild(inputSearch);
|
||||||
|
}
|
||||||
|
this.element?.appendChild(ulList);
|
||||||
|
this.items.forEach((dataItem)=>{
|
||||||
|
this.element?.appendChild(nativeSelect);
|
||||||
|
const liItem = document.createElement("li");
|
||||||
|
const nativeOption = (0, $3e0e9117e5437319$export$401096e4c8c5bfbe)();
|
||||||
|
const strongItem = document.createElement("strong");
|
||||||
|
liItem.classList.add("list__item");
|
||||||
|
strongItem.classList.add("category");
|
||||||
|
if (this.multiselect) {
|
||||||
|
const checkBox = document.createElement("input");
|
||||||
|
checkBox.type = "checkbox";
|
||||||
|
checkBox.setAttribute("id", `chbox-${dataItem.id}`);
|
||||||
|
liItem.appendChild(checkBox);
|
||||||
|
if (this.multiselectTag) checkBox.classList.add("displayHide");
|
||||||
|
nativeSelect.setAttribute("multiple", "multiple");
|
||||||
|
}
|
||||||
|
if (dataItem.title) {
|
||||||
|
nativeOption.text = dataItem.title;
|
||||||
|
nativeOption.value = dataItem.title;
|
||||||
|
textNode = document.createTextNode(dataItem.title);
|
||||||
|
nativeSelect.appendChild(nativeOption);
|
||||||
|
liItem.appendChild(textNode);
|
||||||
|
ulList.appendChild(liItem);
|
||||||
|
} else {
|
||||||
|
// Для отрисовки категорий
|
||||||
|
textNode = document.createTextNode(dataItem);
|
||||||
|
strongItem.appendChild(textNode);
|
||||||
|
ulList.appendChild(strongItem);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.items.filter((item, index)=>{
|
||||||
|
if (typeof item !== "object") this.items.splice(index, 1);
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.list = this.element.querySelector(".list");
|
||||||
|
this.carriage = this.element.querySelector(".caret");
|
||||||
|
if (this.theme) (0, $e3e030f05caf96c0$export$e6eb54368342cb84)(this.element, this.theme);
|
||||||
|
if (this.nativeSelectMode === true) this.selectMode(this.nativeSelectMode);
|
||||||
|
if (this.listDisplayMode) this.displayMode(this.listDisplayMode);
|
||||||
|
this.addOptionsBehaviour();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @method renderUrl
|
||||||
|
* @description Rendering elements in the select passed from the URL and setting them up.
|
||||||
|
*/ async renderUrl() {
|
||||||
|
const response = await fetch(this.url);
|
||||||
|
const dataUrl = await response.json();
|
||||||
|
const nativeSelect = (0, $3e0e9117e5437319$export$dfb0baf35876628e)();
|
||||||
|
dataUrl.forEach((dataItem, index)=>{
|
||||||
|
const item = {
|
||||||
|
id: dataItem.id,
|
||||||
|
title: dataItem.title,
|
||||||
|
value: index
|
||||||
|
};
|
||||||
|
const ulUrl = this.element.querySelector(".list");
|
||||||
|
const nativeOption = (0, $3e0e9117e5437319$export$401096e4c8c5bfbe)();
|
||||||
|
const liUrl = document.createElement("li");
|
||||||
|
const textUrl = document.createTextNode(item.title);
|
||||||
|
if (this.multiselect) {
|
||||||
|
const checkBox = document.createElement("input");
|
||||||
|
checkBox.type = "checkbox";
|
||||||
|
if (this.multiselectTag) checkBox.classList.add("displayHide");
|
||||||
|
checkBox.setAttribute("id", `chbox-${item.id}`);
|
||||||
|
nativeSelect.setAttribute("multiple", "multiple");
|
||||||
|
liUrl.appendChild(checkBox);
|
||||||
|
}
|
||||||
|
liUrl.classList.add("list__item");
|
||||||
|
nativeOption.value = item.title;
|
||||||
|
nativeOption.text = item.title;
|
||||||
|
nativeSelect.appendChild(nativeOption);
|
||||||
|
liUrl.appendChild(textUrl);
|
||||||
|
ulUrl.appendChild(liUrl);
|
||||||
|
this.items.push(item);
|
||||||
|
});
|
||||||
|
this.element.appendChild(nativeSelect);
|
||||||
|
this.items.filter((item, index)=>{
|
||||||
|
if (typeof item !== "object") this.items.splice(index, 1);
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.addOptionsBehaviour();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @method initSelected
|
||||||
|
* @param {string} select optional element. Used in the selectedIndex method.
|
||||||
|
* @description Renders and styles the select.
|
||||||
|
* @private
|
||||||
|
*/ initSelected(select) {
|
||||||
|
if (this.selected) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, this.selected);
|
||||||
|
else if (this.placeholder) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, this.placeholder);
|
||||||
|
else if (this.language && this.language === "ru") (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, (0, $356528c60e5e24f4$export$cf48009033a0126b).selectPlaceholder);
|
||||||
|
else (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, (0, $356528c60e5e24f4$export$84584c2a98eb6753).selectPlaceholder);
|
||||||
|
if (select) (0, $5aca7c389be45fd0$export$31b5fa56cc6048cb)(this.element, select, this.styles);
|
||||||
|
if (this.styles) (0, $5aca7c389be45fd0$export$edf5b2501a573922)(this.element, this.styles);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @description Opens and closes the list by the passed event.
|
||||||
|
* @method initEvent
|
||||||
|
*/ initEvent() {
|
||||||
|
if (this.event) {
|
||||||
|
if (this.event === "mouseenter") {
|
||||||
|
this.element.addEventListener(this.event, ()=>{
|
||||||
|
this.open();
|
||||||
|
});
|
||||||
|
this.element.addEventListener("mouseleave", ()=>{
|
||||||
|
this.close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @param {boolean} oneClick optional parameter passed from the buttonControl function.
|
||||||
|
* @description Opens a list to select an element.
|
||||||
|
* @method open
|
||||||
|
*/ open(oneClick) {
|
||||||
|
if (oneClick === true) {
|
||||||
|
this.list.classList.add("open");
|
||||||
|
this.carriage.classList.add("caret_rotate");
|
||||||
|
} else {
|
||||||
|
this.list.classList.toggle("open");
|
||||||
|
this.carriage.classList.toggle("caret_rotate");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @description Closes the list.
|
||||||
|
* @method close
|
||||||
|
*/ close() {
|
||||||
|
this.list?.classList.remove("open");
|
||||||
|
this.carriage?.classList.remove("caret_rotate");
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @description Closes the list on click outside of an element.
|
||||||
|
* @method closeSelectClick
|
||||||
|
*/ closeSelectClick() {
|
||||||
|
const dropdown = document.querySelector(`${this.options.selector}`);
|
||||||
|
document.addEventListener("click", (e)=>{
|
||||||
|
const withinBoundaries = e.composedPath().includes(dropdown);
|
||||||
|
if (!withinBoundaries) {
|
||||||
|
if (this.buttonAction) return;
|
||||||
|
else this.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @description A method that implements the selection of elements in different modes.
|
||||||
|
* @method addOptionsBehaviour
|
||||||
|
*/ addOptionsBehaviour() {
|
||||||
|
const options = this.element?.querySelectorAll(".list__item");
|
||||||
|
const select = this.element?.querySelector(".selected");
|
||||||
|
const nativeOption = this.element.querySelectorAll(".nativeSelect__nativeOption");
|
||||||
|
let selectedItemsClear = {
|
||||||
|
placeholder: this.placeholder,
|
||||||
|
selected: this.selected,
|
||||||
|
theme: this.theme
|
||||||
|
};
|
||||||
|
const ulMultipul = document.createElement("ul");
|
||||||
|
if (this.multiselect) {
|
||||||
|
this.selectedItems = [];
|
||||||
|
ulMultipul.classList.add("multiselect-tag");
|
||||||
|
select?.classList.add("overflow-hidden");
|
||||||
|
}
|
||||||
|
if (this.searchMode) this.searchModeSelect(this.randomId);
|
||||||
|
options?.forEach((option, index)=>{
|
||||||
|
option.addEventListener("click", (event)=>{
|
||||||
|
if (Array.isArray(this.selectedItems)) selectedItemsClear = {
|
||||||
|
placeholder: this.placeholder,
|
||||||
|
selected: this.selected,
|
||||||
|
selectedItems: this.selectedItems,
|
||||||
|
indexes: this.indexes,
|
||||||
|
multiselectTag: this.multiselectTag
|
||||||
|
};
|
||||||
|
const item = this.items[index];
|
||||||
|
const checkIndex = this.indexes.indexOf(index);
|
||||||
|
if (this.closeOnSelect == false || this.multiselect) {
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
if (this.multiselect) {
|
||||||
|
option.classList.toggle("active");
|
||||||
|
const checkBox = option.querySelector('input[type="checkbox"]');
|
||||||
|
if (checkBox) {
|
||||||
|
if (!(event.target instanceof HTMLInputElement)) checkBox.checked = !checkBox.checked;
|
||||||
|
if (checkIndex == -1) {
|
||||||
|
this.indexes.push(index);
|
||||||
|
(0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, item.title, true);
|
||||||
|
select.textContent = "";
|
||||||
|
if (this.multiselectTag) {
|
||||||
|
if (Array.isArray(this.selectedItems)) {
|
||||||
|
const dataBreadCrumb = {
|
||||||
|
option: this.options,
|
||||||
|
element: this.element,
|
||||||
|
indexes: this.indexes,
|
||||||
|
selectedItems: this.selectedItems
|
||||||
|
};
|
||||||
|
this.selectedItems.push(item.title);
|
||||||
|
select.appendChild(ulMultipul);
|
||||||
|
ulMultipul.appendChild((0, $3e0e9117e5437319$export$94c1ad1d6db6a1d0)(dataBreadCrumb, item.title, index, item.id));
|
||||||
|
}
|
||||||
|
} else if (Array.isArray(this.selectedItems)) {
|
||||||
|
this.selectedItems.push(item.title);
|
||||||
|
select.innerText = this.selectedItems.join(",");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.multiselectTag) {
|
||||||
|
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
|
||||||
|
ulMultipul.removeChild(tagItem);
|
||||||
|
}
|
||||||
|
if (Array.isArray(this.selectedItems)) {
|
||||||
|
this.selectedItems.splice(checkIndex, 1);
|
||||||
|
this.indexes.splice(checkIndex, 1);
|
||||||
|
(0, $5aca7c389be45fd0$export$a240606f327b3da2)(nativeOption, item.title, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!this.selectedItems.length) (0, $5aca7c389be45fd0$export$11380eda3eb06ca9)(selectedItemsClear, select);
|
||||||
|
else {
|
||||||
|
if (this.multiselectTag) select.appendChild(ulMultipul);
|
||||||
|
else if (Array.isArray(this.selectedItems)) select.innerText = this.selectedItems.join(",");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
select.textContent = item.title;
|
||||||
|
this.selectedItems = item.title;
|
||||||
|
(0, $5aca7c389be45fd0$export$668f6560249913a1)(nativeOption, item.title);
|
||||||
|
options.forEach((option)=>{
|
||||||
|
option.classList.remove("active");
|
||||||
|
});
|
||||||
|
option.classList.add("active");
|
||||||
|
}
|
||||||
|
(0, $5aca7c389be45fd0$export$4474211a0591e3fe)(select, this.element, selectedItemsClear);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @param {boolean} nativeSelectMode parameter responsible for adding native select.
|
||||||
|
* @description Changes the display of the select on mobile devices.
|
||||||
|
* @method selectMode
|
||||||
|
*/ selectMode(nativeSelectMode) {
|
||||||
|
let win = window.outerWidth;
|
||||||
|
if (nativeSelectMode === true) {
|
||||||
|
const select = this.element.querySelector(".cg-select");
|
||||||
|
const list = this.element.querySelector(".list");
|
||||||
|
const nativeSelect = this.element.querySelector(".nativeSelect");
|
||||||
|
if (win < 576) {
|
||||||
|
select.classList.add("displayHide");
|
||||||
|
list.classList.add("displayHide");
|
||||||
|
nativeSelect.classList.add("nativeSelectActive");
|
||||||
|
} else if (win > 576) {
|
||||||
|
select.classList.remove("displayHide");
|
||||||
|
list.classList.remove("displayHide");
|
||||||
|
nativeSelect.classList.remove("nativeSelectActive");
|
||||||
|
nativeSelect.classList.add("displayHide");
|
||||||
|
}
|
||||||
|
} else return;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description The method that implements the search for elements in the select.
|
||||||
|
* @private
|
||||||
|
* @param {string} random unique value for input element.
|
||||||
|
* @method searchMode
|
||||||
|
*/ searchModeSelect(random) {
|
||||||
|
const input = this.element.querySelector(`#searchSelect-${random}`);
|
||||||
|
const searchSelect = this.element.querySelectorAll(".list__item");
|
||||||
|
const result = document.createElement("p");
|
||||||
|
let textNode;
|
||||||
|
if (this.language && this.language === "ru") textNode = document.createTextNode(`${(0, $356528c60e5e24f4$export$cf48009033a0126b).textInListSearch}`);
|
||||||
|
else textNode = document.createTextNode(`${(0, $356528c60e5e24f4$export$84584c2a98eb6753).textInListSearch}`);
|
||||||
|
result.appendChild(textNode);
|
||||||
|
result.classList.add("displayHide");
|
||||||
|
result.classList.add("noRezult");
|
||||||
|
input.parentElement.appendChild(result);
|
||||||
|
input.addEventListener("click", (e)=>{
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
if (input instanceof HTMLInputElement) input.oninput = function() {
|
||||||
|
let valueSearch = input.value.trim().toLowerCase();
|
||||||
|
let anyMatch = false;
|
||||||
|
if (valueSearch != "") {
|
||||||
|
searchSelect.forEach((elem)=>{
|
||||||
|
let isMatching = new RegExp(valueSearch, "gi").test(elem.textContent);
|
||||||
|
anyMatch = anyMatch || isMatching;
|
||||||
|
if (elem.textContent.toLowerCase().search(valueSearch) == -1) elem.classList.add("displayHide");
|
||||||
|
else elem.classList.remove("displayHide");
|
||||||
|
});
|
||||||
|
result.classList.toggle("displayHide", anyMatch);
|
||||||
|
} else searchSelect.forEach((elem)=>{
|
||||||
|
elem.classList.remove("displayHide");
|
||||||
|
result.classList.add("displayHide");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @param {boolean} listDisplayMode parameter responsible for displaying the selection in the form of a modal window.
|
||||||
|
* @description Changes the display of a sheet with a selection as a modal window.
|
||||||
|
* @method displayMode
|
||||||
|
*/ displayMode(listDisplayMode) {
|
||||||
|
if (listDisplayMode) {
|
||||||
|
const modal = document.createElement("div");
|
||||||
|
const body = document.querySelector("body");
|
||||||
|
const list = this.list;
|
||||||
|
modal.appendChild(list);
|
||||||
|
this.element.appendChild(modal);
|
||||||
|
this.element.addEventListener("click", ()=>{
|
||||||
|
modal.classList.toggle("modal");
|
||||||
|
list.classList.toggle("listModal");
|
||||||
|
body.classList.toggle("overflowHide");
|
||||||
|
});
|
||||||
|
} else return;
|
||||||
|
}
|
||||||
|
// Public methods
|
||||||
|
/**
|
||||||
|
* @param {number} numberItem returned element number.
|
||||||
|
* @returns {HTMLElement} returns a reference to the selected HTML element.
|
||||||
|
* @method getElement
|
||||||
|
*/ getElement(numberItem) {
|
||||||
|
if (numberItem > this.items.length) return;
|
||||||
|
return this.items[numberItem];
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {ILanguage} language the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.
|
||||||
|
* @description a method that allows you to change the placeholder in the search and the text that is displayed if there is no result.
|
||||||
|
* @method addLanguage
|
||||||
|
*/ addLanguage(language) {
|
||||||
|
const { placeholder: placeholder , textInListSearch: textInListSearch , selectPlaceholder: selectPlaceholder } = language;
|
||||||
|
const select = this.element.querySelector(".selected");
|
||||||
|
const textNodeSelect = document.createTextNode(selectPlaceholder);
|
||||||
|
select.appendChild(textNodeSelect);
|
||||||
|
if (this.searchMode) {
|
||||||
|
const search = this.element.querySelector(".inputSearch");
|
||||||
|
const textNoRezult = this.element.querySelector(".noRezult");
|
||||||
|
const textNode = document.createTextNode(textInListSearch);
|
||||||
|
search.setAttribute("placeholder", placeholder);
|
||||||
|
search.setAttribute("placeholder", placeholder);
|
||||||
|
textNoRezult.textContent = "";
|
||||||
|
textNoRezult.appendChild(textNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {HTMLInputElement} button - HTML button.
|
||||||
|
* @param {string} method - open/close method.
|
||||||
|
* @description A method that allows you to open / close the select using buttons.
|
||||||
|
* @method buttonControl
|
||||||
|
*/ buttonControl(button, method) {
|
||||||
|
if (this.listDisplayMode) return;
|
||||||
|
this.buttonAction = button;
|
||||||
|
button.addEventListener("click", ()=>{
|
||||||
|
if (method.toLowerCase() === "open") this.open(true);
|
||||||
|
else if (method.toLowerCase() === "close") this.close();
|
||||||
|
else return;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {boolean} value - Passed parameter to add the disabled attribute.
|
||||||
|
* @description A method that allows you to toggle the state of the disabled select.
|
||||||
|
* @method disabled
|
||||||
|
*/ disabled(value) {
|
||||||
|
const select = this.element.querySelector(".cg-select");
|
||||||
|
const nativeSelect = this.element.querySelector(".nativeSelect");
|
||||||
|
if (value === true) {
|
||||||
|
this.element.setAttribute("disabled", "true");
|
||||||
|
nativeSelect.setAttribute("disabled", "true");
|
||||||
|
select.classList.add("disabled");
|
||||||
|
} else {
|
||||||
|
this.element.removeAttribute("disabled");
|
||||||
|
nativeSelect.removeAttribute("disabled");
|
||||||
|
select.classList.remove("disabled");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {string | IItems} item added element.
|
||||||
|
* @description adds the given element to the end of the list and redraws the list. Cannot be used when passing elements with categories.
|
||||||
|
* @method addItem
|
||||||
|
*/ addItem(item) {
|
||||||
|
if (this.category) {
|
||||||
|
console.log("can`t add item to category");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!item) return false;
|
||||||
|
const index = this.items.length;
|
||||||
|
this.items.push((0, $5aca7c389be45fd0$export$b2e1d36bc0be1b2f)(item, index));
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {number} index the index of the element to be removed.
|
||||||
|
* @description removes the element by index from the list and redraws it. Cannot be used when passing elements with categories.
|
||||||
|
* @method deleteItem
|
||||||
|
*/ deleteItem(index) {
|
||||||
|
if (this.category) {
|
||||||
|
console.log("can`t add item to category");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const item = this.items[index];
|
||||||
|
this.items.splice(index, 1);
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description removes all elements from the list and redraws it.
|
||||||
|
* @method deleteItemAll
|
||||||
|
*/ deleteItemAll() {
|
||||||
|
this.items.splice(0, this.items.length);
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {number} index the index of the selected element.
|
||||||
|
* @description selects the element that will be initially rendered in the select.
|
||||||
|
* @method selectIndex
|
||||||
|
*/ selectIndex(index) {
|
||||||
|
if (this.category) {
|
||||||
|
console.log("can`t add item to category");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const options = this.element.querySelectorAll(".list__item");
|
||||||
|
if (index > options.length) return;
|
||||||
|
const select = options[index].innerText;
|
||||||
|
this.render(select);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description Method for tracking the actions of the select, you can pass a callback
|
||||||
|
* @param state select state.
|
||||||
|
* @param callback
|
||||||
|
* @method on
|
||||||
|
*/ on(state, callback) {
|
||||||
|
const options = this.element?.querySelectorAll(".list__item");
|
||||||
|
let value = "";
|
||||||
|
switch(state){
|
||||||
|
case "select":
|
||||||
|
options?.forEach((option)=>{
|
||||||
|
option.addEventListener("click", ()=>{
|
||||||
|
console.log("option:select", option.textContent);
|
||||||
|
value = option.textContent;
|
||||||
|
callback(state, value);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "close":
|
||||||
|
this.element.addEventListener("click", ()=>{
|
||||||
|
console.log("list:close", this.list.classList.contains("close"));
|
||||||
|
});
|
||||||
|
callback(state);
|
||||||
|
break;
|
||||||
|
case "open":
|
||||||
|
this.element.addEventListener("click", ()=>{
|
||||||
|
console.log("list:open", this.list.classList.contains("open"));
|
||||||
|
});
|
||||||
|
callback(state);
|
||||||
|
break;
|
||||||
|
case "clear":
|
||||||
|
this.element.addEventListener("click", ()=>{
|
||||||
|
const svgIcon = this.element?.querySelector(".svg-icon");
|
||||||
|
svgIcon?.addEventListener("click", ()=>{
|
||||||
|
console.log("list:clear", svgIcon.classList.contains("svg-clear"));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
callback(state);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var $43d7963e56408b24$export$2e2bcd8739ae039 = (0, $adaec01e28cd9884$export$ba2c4ca7a0a16031);
|
||||||
|
|
||||||
|
|
||||||
|
//# sourceMappingURL=index.js.map
|
||||||
1
dist/index.js.map
vendored
Normal file
1
dist/index.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
16
main.py
Normal file
16
main.py
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
# This is a sample Python script.
|
||||||
|
|
||||||
|
# Press Shift+F10 to execute it or replace it with your code.
|
||||||
|
# Press Double Shift to search everywhere for classes, files, tool windows, actions, and settings.
|
||||||
|
|
||||||
|
|
||||||
|
def print_hi(name):
|
||||||
|
# Use a breakpoint in the code line below to debug your script.
|
||||||
|
print(f'Hi, {name}') # Press Ctrl+F8 to toggle the breakpoint.
|
||||||
|
|
||||||
|
|
||||||
|
# Press the green button in the gutter to run the script.
|
||||||
|
if __name__ == '__main__':
|
||||||
|
print_hi('PyCharm')
|
||||||
|
|
||||||
|
# See PyCharm help at https://www.jetbrains.com/help/pycharm/
|
||||||
46
package.json
Normal file
46
package.json
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"name": "cg-select",
|
||||||
|
"version": "0.2.5",
|
||||||
|
"source": "index.js",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
|
||||||
|
"author": {
|
||||||
|
"name": "CraftGroup",
|
||||||
|
"url": "https://github.com/apuc/"
|
||||||
|
},
|
||||||
|
"homepage": "https://cg-select.itguild.info",
|
||||||
|
"scripts": {
|
||||||
|
"watch": "parcel watch",
|
||||||
|
"build": "parcel build",
|
||||||
|
"deploy": "gh-pages -d dist",
|
||||||
|
"predeploy": "npm run build"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/apuc/cg-select.git"
|
||||||
|
},
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/apuc/cg-select/issues"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@parcel/transformer-sass": "^2.7.0",
|
||||||
|
"jsdoc": "^4.0.0",
|
||||||
|
"parcel": "^2.7.0",
|
||||||
|
"prettier": "^2.7.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@parcel/optimizer-css": "^2.8.0",
|
||||||
|
"@types/prettier": "^2.7.2",
|
||||||
|
"gh-pages": "^4.0.0",
|
||||||
|
"typedoc": "^0.23.24",
|
||||||
|
"typescript": "^4.9.4"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"select",
|
||||||
|
"autocomplete",
|
||||||
|
"dropdown",
|
||||||
|
"multiselect",
|
||||||
|
"tag"
|
||||||
|
]
|
||||||
|
}
|
||||||
50
server.py
Normal file
50
server.py
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
from typing import Union, Annotated
|
||||||
|
|
||||||
|
from fastapi import FastAPI, File, UploadFile, Form, Response, status
|
||||||
|
|
||||||
|
import os
|
||||||
|
import magic
|
||||||
|
|
||||||
|
app = FastAPI()
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/")
|
||||||
|
def read_root():
|
||||||
|
return {"Hello": "World"}
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/items/{version}/{name}/{file}")
|
||||||
|
def read_item(version: str, name: str, file: str = 'index.js'):
|
||||||
|
mime = magic.Magic(mime=True)
|
||||||
|
file_path = f"packages/{name}/{version}/{file}"
|
||||||
|
file_mime = mime.from_file(file_path)
|
||||||
|
if os.path.exists(file_path):
|
||||||
|
with open(file_path, 'rb') as f:
|
||||||
|
return Response(content=f.read(), media_type=file_mime)
|
||||||
|
|
||||||
|
return status.HTTP_404_NOT_FOUND
|
||||||
|
|
||||||
|
|
||||||
|
@app.post("/files/")
|
||||||
|
async def create_file(file: Annotated[bytes | None, File()] = None):
|
||||||
|
if not file:
|
||||||
|
return {"message": "No file sent"}
|
||||||
|
else:
|
||||||
|
return {"file_size": len(file)}
|
||||||
|
|
||||||
|
|
||||||
|
@app.post("/uploadfile/")
|
||||||
|
async def create_upload_file(file: UploadFile | None, package: Annotated[str, Form()], version: Annotated[str, Form()], filename: Annotated[str, Form()]):
|
||||||
|
try:
|
||||||
|
contents = file.file.read()
|
||||||
|
dir_file = "packages/{package}/{version}".format(package=package, version=version)
|
||||||
|
if not os.path.exists(dir_file):
|
||||||
|
os.makedirs(dir_file)
|
||||||
|
with open(f"{dir_file}/{filename}", 'wb') as f:
|
||||||
|
f.write(contents)
|
||||||
|
except Exception:
|
||||||
|
return {"message": "There was an error uploading the file"}
|
||||||
|
finally:
|
||||||
|
file.file.close()
|
||||||
|
|
||||||
|
return {"message": f"Successfully uploaded {file.filename}"}
|
||||||
Loading…
Reference in New Issue
Block a user