apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix documentation and refactoring classes

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-21 16:17:37 +03:00
parent 13528ec659
commit 8e517026f2
14 changed files with 253 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
View File

@ -112,16 +112,24 @@
> >
</li> </li>
</ul> </ul>
<h3>Global</h3> <h3>Modules</h3>
<ul>
<li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createElementChips</a></li>
</ul>
<h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
</ul>
<h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html##close">#close</a></li>
<li><a href="global.html##init">#init</a></li>
<li><a href="global.html##initEvent">#initEvent</a></li>
<li><a href="global.html##initSelected">#initSelected</a></li>
<li><a href="global.html##open">#open</a></li>
<li><a href="global.html##render">#render</a></li>
<li><a href="global.html##renderUrl">#renderUrl</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

27
documentation/DropDown.html
View File

@ -122,16 +122,24 @@
> >
</li> </li>
</ul> </ul>
<h3>Global</h3> <h3>Modules</h3>
<ul>
<li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createElementChips</a></li>
</ul>
<h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
</ul>
<h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html##close">#close</a></li>
<li><a href="global.html##init">#init</a></li>
<li><a href="global.html##initEvent">#initEvent</a></li>
<li><a href="global.html##initSelected">#initSelected</a></li>
<li><a href="global.html##open">#open</a></li>
<li><a href="global.html##render">#render</a></li>
<li><a href="global.html##renderUrl">#renderUrl</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>
@ -141,7 +149,6 @@
<li><a href="global.html#selectIndex">selectIndex</a></li> <li><a href="global.html#selectIndex">selectIndex</a></li>
</ul> </ul>
</nav> </nav>
<br class="clear" /> <br class="clear" />
<footer> <footer>

26
documentation/cg-dropdown.js.html
View File

@ -634,16 +634,24 @@ export class DropDown {
> >
</li> </li>
</ul> </ul>
<h3>Global</h3> <h3>Modules</h3>
<ul>
<li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createElementChips</a></li>
</ul>
<h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
</ul>
<h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html##close">#close</a></li>
<li><a href="global.html##init">#init</a></li>
<li><a href="global.html##initEvent">#initEvent</a></li>
<li><a href="global.html##initSelected">#initSelected</a></li>
<li><a href="global.html##open">#open</a></li>
<li><a href="global.html##render">#render</a></li>
<li><a href="global.html##renderUrl">#renderUrl</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

25
documentation/create-element.js.html
View File

@ -107,21 +107,24 @@ export function createBreadcrumb(data, title, index, id) {
> >
</li> </li>
</ul> </ul>
<h3>Module</h3> <h3>Modules</h3>
<ul> <ul>
<li><a href="module-Utils.html">Utils</a></li> <li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createBreadcrumb</a></li> <li><a href="module-createElementChips.html">createElementChips</a></li>
</ul> </ul>
<h3>Global</h3> <h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
</ul>
<h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html##close">#close</a></li>
<li><a href="global.html##init">#init</a></li>
<li><a href="global.html##initEvent">#initEvent</a></li>
<li><a href="global.html##initSelected">#initSelected</a></li>
<li><a href="global.html##open">#open</a></li>
<li><a href="global.html##render">#render</a></li>
<li><a href="global.html##renderUrl">#renderUrl</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

26
documentation/global.html
View File

@ -642,16 +642,24 @@
> >
</li> </li>
</ul> </ul>
<h3>Global</h3> <h3>Modules</h3>
<ul>
<li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createElementChips</a></li>
</ul>
<h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
</ul>
<h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html##close">#close</a></li>
<li><a href="global.html##init">#init</a></li>
<li><a href="global.html##initEvent">#initEvent</a></li>
<li><a href="global.html##initSelected">#initSelected</a></li>
<li><a href="global.html##open">#open</a></li>
<li><a href="global.html##render">#render</a></li>
<li><a href="global.html##renderUrl">#renderUrl</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

26
documentation/index.html
View File

@ -32,16 +32,24 @@
> >
</li> </li>
</ul> </ul>
<h3>Global</h3> <h3>Modules</h3>
<ul>
<li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createElementChips</a></li>
</ul>
<h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
</ul>
<h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html##close">#close</a></li>
<li><a href="global.html##init">#init</a></li>
<li><a href="global.html##initEvent">#initEvent</a></li>
<li><a href="global.html##initSelected">#initSelected</a></li>
<li><a href="global.html##open">#open</a></li>
<li><a href="global.html##render">#render</a></li>
<li><a href="global.html##renderUrl">#renderUrl</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

25
documentation/module-Utils.html
View File

@ -364,21 +364,24 @@
> >
</li> </li>
</ul> </ul>
<h3>Module</h3> <h3>Modules</h3>
<ul> <ul>
<li><a href="module-Utils.html">Utils</a></li> <li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createBreadcrumb</a></li> <li><a href="module-createElementChips.html">createElementChips</a></li>
</ul> </ul>
<h3>Global</h3> <h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
</ul>
<h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html##close">#close</a></li>
<li><a href="global.html##init">#init</a></li>
<li><a href="global.html##initEvent">#initEvent</a></li>
<li><a href="global.html##initSelected">#initSelected</a></li>
<li><a href="global.html##open">#open</a></li>
<li><a href="global.html##render">#render</a></li>
<li><a href="global.html##renderUrl">#renderUrl</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

67
documentation/module-createElementChips.html
View File

@ -15,7 +15,7 @@
<body> <body>
<div id="main"> <div id="main">
<h1 class="page-title">Module: createElementChips</h1> <h1 class="page-title">Module: createBreadcrumb</h1>
<section> <section>
<header></header> <header></header>
@ -113,6 +113,69 @@
<span class="param-type">HTMLElement</span> <span class="param-type">HTMLElement</span>
</dd> </dd>
</dl> </dl>
<h4 class="name" id=".createNativeSelect">
<span class="type-signature">(static) </span>createNativeSelect<span class="signature"
>()</span
><span class="type-signature"> &rarr; {HTMLSelectElement}</span>
</h4>
<div class="description">Метод который создает нативный селект</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="create-element.js.html">create-element.js</a>,
<a href="create-element.js.html#line77">line 77</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">Возвращает созданный нативный селект</div>
<dl>
<dt>Type</dt>
<dd>
<span class="param-type">HTMLSelectElement</span>
</dd>
</dl>
<h4 class="name" id=".createNativSelectOption">
<span class="type-signature">(static) </span>createNativSelectOption<span
class="signature"
>()</span
><span class="type-signature"> &rarr; {HTMLOptionElement}</span>
</h4>
<div class="description">Метод который создает Options для нативного селекта</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="create-element.js.html">create-element.js</a>,
<a href="create-element.js.html#line90">line 90</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">Возвращает созданные Options нативного селекта</div>
<dl>
<dt>Type</dt>
<dd>
<span class="param-type">HTMLOptionElement</span>
</dd>
</dl>
</article> </article>
</section> </section>
</div> </div>
@ -132,7 +195,7 @@
<h3>Module</h3> <h3>Module</h3>
<ul> <ul>
<li><a href="module-Utils.html">Utils</a></li> <li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createBreadcrumb</a></li> <li><a href="module-createElementChips.html">createElementChips</a></li>
</ul> </ul>
<h3>Global</h3> <h3>Global</h3>
<ul> <ul>

25
documentation/utils.js.html
View File

@ -153,21 +153,24 @@ export function getFormatItem(dataItem, index) {
> >
</li> </li>
</ul> </ul>
<h3>Module</h3> <h3>Modules</h3>
<ul> <ul>
<li><a href="module-Utils.html">Utils</a></li> <li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createBreadcrumb</a></li> <li><a href="module-createElementChips.html">createElementChips</a></li>
</ul> </ul>
<h3>Global</h3> <h3>Private methods</h3>
<ul>
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html#close">#close</a></li>
<li><a href="global.html#init">#init</a></li>
<li><a href="global.html#initEvent">#initEvent</a></li>
<li><a href="global.html#initSelected">#initSelected</a></li>
<li><a href="global.html#open">#open</a></li>
<li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li>
</ul>
<h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
<li><a href="global.html##close">#close</a></li>
<li><a href="global.html##init">#init</a></li>
<li><a href="global.html##initEvent">#initEvent</a></li>
<li><a href="global.html##initSelected">#initSelected</a></li>
<li><a href="global.html##open">#open</a></li>
<li><a href="global.html##render">#render</a></li>
<li><a href="global.html##renderUrl">#renderUrl</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

37
src/cg-dropdown.js
View File

@ -6,7 +6,11 @@ import {
nativOptionMultiple, nativOptionMultiple,
nativOptionOrdinary, nativOptionOrdinary,
} from './components/utils'; } from './components/utils';
import { createBreadcrumb, createListSelect } from './components/create-element'; import {
createBreadcrumb,
createNativSelectOption,
createNativeSelect,
} from './components/create-element';
/** /**
* @class Описание класса DropDown * @class Описание класса DropDown
@ -344,11 +348,8 @@ export class DropDown {
} }
const ulList = document.createElement('ul'); const ulList = document.createElement('ul');
const nativSelect = document.createElement('select'); const nativSelect = createNativeSelect();
nativSelect.setAttribute('form', 'data');
nativSelect.classList.add('nativSelect');
ulList.classList.add('list'); ulList.classList.add('list');
if (styles) { if (styles) {
@ -357,15 +358,14 @@ export class DropDown {
} }
this.#element.appendChild(ulList); this.#element.appendChild(ulList);
///
this.#element.appendChild(nativSelect);
this.#items.forEach((dataItem) => { this.#items.forEach((dataItem) => {
this.#element.appendChild(nativSelect);
const liItem = document.createElement('li'); const liItem = document.createElement('li');
const nativOption = document.createElement('option'); const nativOption = createNativSelectOption();
const strongItem = document.createElement('strong'); const strongItem = document.createElement('strong');
nativOption.classList.add('nativSelect__nativOption');
liItem.classList.add('list__item'); liItem.classList.add('list__item');
strongItem.classList.add('category'); strongItem.classList.add('category');
@ -375,21 +375,17 @@ export class DropDown {
checkBox.setAttribute('id', `chbox-${dataItem.id}`); checkBox.setAttribute('id', `chbox-${dataItem.id}`);
liItem.appendChild(checkBox); liItem.appendChild(checkBox);
nativSelect.setAttribute('multiple', 'multiple'); nativSelect.setAttribute('multiple', 'multiple');
} }
nativSelect.setAttribute('name', 'dataSelect');
let textNode = ''; let textNode = '';
if (dataItem.title) { if (dataItem.title) {
textNode = document.createTextNode(dataItem.title);
///
nativOption.text = dataItem.title; nativOption.text = dataItem.title;
nativOption.value = dataItem.title; nativOption.value = dataItem.title;
nativSelect.appendChild(nativOption); textNode = document.createTextNode(dataItem.title);
/// nativSelect.appendChild(nativOption);
liItem.appendChild(textNode); liItem.appendChild(textNode);
ulList.appendChild(liItem); ulList.appendChild(liItem);
} else { } else {
@ -429,6 +425,8 @@ export class DropDown {
const response = await fetch(url); const response = await fetch(url);
const dataUrl = await response.json(); const dataUrl = await response.json();
const nativSelect = createNativeSelect();
dataUrl.forEach((dataItem, index) => { dataUrl.forEach((dataItem, index) => {
const item = { const item = {
id: dataItem.id, id: dataItem.id,
@ -436,6 +434,8 @@ export class DropDown {
value: index, value: index,
}; };
const ulUrl = this.#element.querySelector('.list'); const ulUrl = this.#element.querySelector('.list');
const nativOption = createNativSelectOption();
const liUrl = document.createElement('li'); const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title); const textUrl = document.createTextNode(item.title);
@ -444,17 +444,24 @@ export class DropDown {
checkBox.type = 'checkbox'; checkBox.type = 'checkbox';
checkBox.setAttribute('id', `chbox-${item.id}`); checkBox.setAttribute('id', `chbox-${item.id}`);
nativSelect.setAttribute('multiple', 'multiple');
liUrl.appendChild(checkBox); liUrl.appendChild(checkBox);
} }
liUrl.classList.add('list__item'); liUrl.classList.add('list__item');
nativOption.value = item.title;
nativOption.text = item.title;
nativSelect.appendChild(nativOption);
liUrl.appendChild(textUrl); liUrl.appendChild(textUrl);
ulUrl.appendChild(liUrl); ulUrl.appendChild(liUrl);
this.#items.push(item); this.#items.push(item);
}); });
this.#element.appendChild(nativSelect);
this.#items.filter((item, index) => { this.#items.filter((item, index) => {
if (typeof item !== 'object') { if (typeof item !== 'object') {
this.#items.splice(index, 1); this.#items.splice(index, 1);

24
src/components/create-element.js
View File

@ -69,3 +69,27 @@ export function createBreadcrumb(data, title, index, id) {
return liChip; return liChip;
} }
/**
* Метод который создает нативный селект
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/
export function createNativeSelect() {
const nativSelect = document.createElement('select');
nativSelect.setAttribute('form', 'data');
nativSelect.setAttribute('name', 'dataSelect');
nativSelect.classList.add('nativSelect');
return nativSelect;
}
/**
* Метод который создает Options для нативного селекта
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/
export function createNativSelectOption() {
const nativOption = document.createElement('option');
nativOption.classList.add('nativSelect__nativOption');
return nativOption;
}

2
src/index.html
View File

@ -14,7 +14,7 @@
<button class="cg-dropdown cg-dropdown_one"></button> <button class="cg-dropdown cg-dropdown_one"></button>
<input type="submit" form="data" value="Отправить" /> <input type="submit" form="data" value="Отправить" />
<!-- <button class="cg-dropdown cg-dropdown_three"></button> --> <button class="cg-dropdown cg-dropdown_three"></button>
<!-- <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button> --> <!-- <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button> -->
</div> </div>

26
src/index.js
View File

@ -21,19 +21,19 @@ const dropdown = new DropDown({
dropdown.disabled(false); dropdown.disabled(false);
// ------------------------------URL-------------------- // ------------------------------URL--------------------
// const dropdown3 = new DropDown({ const dropdown3 = new DropDown({
// selector: '.cg-dropdown_three', selector: '.cg-dropdown_three',
// placeholder: 'URL', placeholder: 'URL',
// url: 'http://jsonplaceholder.typicode.com/users', url: 'http://jsonplaceholder.typicode.com/users',
// styles: { styles: {
// head: { head: {
// background: 'black', background: 'black',
// width: '350px', width: '350px',
// }, },
// }, },
// multiselect: true, multiselect: true,
// multiselectTag: true, multiselectTag: true,
// }); });
// --------------------------------Категории-------------------------- // --------------------------------Категории--------------------------
// const dropdown4 = new DropDown({ // const dropdown4 = new DropDown({