From 2a269670588d8aff94326a5370d0c69009740182 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 28 Dec 2022 20:35:00 +0300 Subject: [PATCH] Fix git ignore --- .gitignore | 2 +- example/example.js | 50 ++++++ example/example.scss | 212 +++++++++++++++++++++++++ example/index.html | 359 +++++++++++++++++++++++++++++++++++++++++++ example/index.js | 232 ++++++++++++++++++++++++++++ 5 files changed, 854 insertions(+), 1 deletion(-) create mode 100644 example/example.js create mode 100644 example/example.scss create mode 100644 example/index.html create mode 100644 example/index.js diff --git a/.gitignore b/.gitignore index 4362bc4..37dab9d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules dist .parcel-cache -example + diff --git a/example/example.js b/example/example.js new file mode 100644 index 0000000..f807677 --- /dev/null +++ b/example/example.js @@ -0,0 +1,50 @@ +const firstBtn = document.getElementById('first'); +const codeFirst = document.getElementById('codeFirst'); + +const secondBtn = document.getElementById('second'); +const codeSecond = document.getElementById('codeSecond'); + +const thirdBtn = document.getElementById('third'); +const codeThird = document.getElementById('codeThird'); + +const fourthBtn = document.getElementById('fourth'); +const codeFourth = document.getElementById('codeFourth'); + +const fifthBtn = document.getElementById('fifth'); +const codeFifth = document.getElementById('codeFifth'); + +const six = document.getElementById('six') +const codeSix = document.getElementById('codeSix'); + + +const Native = document.getElementById('Native') +const codeNative = document.getElementById('codeNative') + + +firstBtn.addEventListener('click', () => { + codeFirst.classList.toggle("active") +}) + +secondBtn.addEventListener('click', () => { + codeSecond.classList.toggle("active") +}) + +thirdBtn.addEventListener('click', () => { + codeThird.classList.toggle("active") +}) + +fourthBtn.addEventListener('click', () => { + codeFourth.classList.toggle("active") +}) + +fifthBtn.addEventListener('click', () => { + codeFifth.classList.toggle("active") +}) + +six.addEventListener('click', () => { + codeSix.classList.toggle("active") +}) + +Native.addEventListener('click', () => { + codeNative.classList.toggle("active") +}) \ No newline at end of file diff --git a/example/example.scss b/example/example.scss new file mode 100644 index 0000000..b1bd873 --- /dev/null +++ b/example/example.scss @@ -0,0 +1,212 @@ +@import '/src/main.scss'; + +* { + font-size: 14px; + font-family: Arial, Helvetica, sans-serif; +} + +.body-example { + background: #000000c4; +} + +.container { + margin: 0 auto; + width: 900px; + + display: -webkit-box; + display: -ms-flexbox; + display: flex; + + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.header { + width: 100%; + border-radius: 5px; + display: flex; + align-items: center; + flex-direction: column; + background-color: #2a2f3b; + margin-bottom: 8px; + + h1 { + font-size: 57px; + color: white; + font-family: 'Times New Roman', Times, serif; + margin: 40px 0 12px 0; + } + + &__logoBox { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + + &__logo { + width: 13%; + height: 16%; + border: 1px solid #525252; + border-radius: 50%; + + margin: 22px 0 0 29px; + } + + .navlist { + display: flex; + justify-content: space-around; + margin: 15px 0 30px 0; + padding: 0; + width: 230px; + + li { + display: inline; + list-style: none; + text-decoration: none; + + a { + color: white; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + } +} + +.content { + margin-top: 15px; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; +} + +.example-select { + width: 100%; + background-color: #5c5c5c; + border-radius: 5px; + margin: 15px 0 0 0; + + &_title { + height: 45px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + color: white; + padding: 20px 0 0 40px; + margin: 0 0 30px 0; + background-color: #2a2f3b; + font-size: 20px; + } + + &_submit { + width: 200px; + height: 35px; + border-radius: 10px; + border: none; + margin-top: 20px; + margin: 20px 15px; + cursor: pointer; + transition: 1s; + -webkit-transition: 1s; + -moz-transition: 1s; + -ms-transition: 1s; + -o-transition: 1s; + + &:hover { + background-color: #d7d7d7; + transition: 1s; + -webkit-transition: 1s; + -moz-transition: 1s; + -ms-transition: 1s; + -o-transition: 1s; + } + } + + .layout-select { + margin: 15px; + } +} + +code { + display: none; +} + +pre { + background: #1e1e1e; + margin: 15px; + padding: 15px; + color: #88d0f7; + border-radius: 15px; + font-size: 16px; + line-height: 20px; +} + +.code { + &__class, + &__var, + &__string, + &__keyword { + font-size: 16px; + line-height: 20px; + } + &__class { + color: #4ec9b0; + } + + &__var { + color: #34a7ff; + } + + &__string { + color: #ce9178; + } + + &__keyword { + color: #5090ca; + } +} + +.check-code { + width: 200px; + height: 35px; + cursor: pointer; + border: none; + border-radius: 10px; + margin: 20px 15px; + transition: all 1s; +} + +.active { + display: block; +} + +@media (max-width: 576px) { + .container { + width: 95%; + } + + .header { + margin-top: 15px; + h1 { + font-size: 32px; + } + } + + .example-select_title { + font-size: 14px; + height: 40px; + } +} diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..b36fe6f --- /dev/null +++ b/example/index.html @@ -0,0 +1,359 @@ + + + + + + + + + + + + + Cg-Select + + + +
+
+
+

CG-SELECT

+ +
+
+ +
+
+ +
+
+

Дефолтный селект

+
+
+ +
+ + + + + + 
+              const dropdown = new DropDown({
+                selector: '.cg-dropdown_one', 
+                placeholder: 'Выберите авто', 
+                lable: 'EXAMPLE', 
+                items: [
+                  'BMW',
+                  {
+                    id: '213sade',
+                    title: 'Opel',
+                    value: 1,
+                  },
+                  'Mersedes', 
+                  'MAN',  
+                  'Ferari', 
+                ],
+                styles: {
+                  head: {
+                    width: '830px', 
+                  },
+                  list: {
+                    width: '824px', 
+                  },
+                },
+              });
+
+ +
+
+ +
+

Дефолтный селект с функцией nativeSelectMode

+ +
+

+ *При мобильном разрешении появляеться нативный селект. +

+
+ +
+ + + + 
+              const dropdown = new DropDown({
+                selector: '.cg-dropdown_one', 
+                placeholder: 'Выберите авто', 
+                nativeSelectMode: true,
+                items: [
+                  'BMW',
+                  {
+                    id: '213sade',
+                    title: 'Opel',
+                    value: 1,
+                  },
+                  'Mersedes', 
+                  'MAN',  
+                  'Ferari', 
+                ],
+                styles: {
+                  head: {
+                    width: '830px', 
+                  },
+                  list: {
+                    width: '824px', 
+                  },
+                },
+              });
+
+ +
+
+ +
+

Дефолтный селект с функцией listDisplayMode

+ +
+

+ *При использовании данного метода лист с выбором появляеться как модальное окно. +

+
+ +
+ + + + + 
+              const dropdown = new DropDown({
+                selector: '.cg-dropdown_listDisplayMode', 
+                placeholder: 'Выберите авто', 
+                listDisplayMode: true,
+                items: [
+                  'BMW',
+                  {
+                    id: '213sade',
+                    title: 'Opel',
+                    value: 1,
+                  },
+                  'Mersedes', 
+                  'MAN',  
+                  'Ferari', 
+                ],
+                styles: {
+                  head: {
+                    width: '830px', 
+                  },
+                  list: {
+                    width: '824px', 
+                  },
+                },
+              });
+
+ +
+
+ +
+

Селект с данными с URL

+
+ +
+ + + + 
+            const dropdown = new DropDown({
+              selector: '.cg-dropdown_three', 
+              placeholder: 'URL', 
+              url: 'https://jsonplaceholder.typicode.com/users',            
+              searchMode: true,
+              darkTheme: false,
+              language: 'ru',
+              styles: {
+                head: {
+                  width: '830px', 
+                },
+                list: {
+                  width: '824px', 
+                },
+              },
+            });
+
+ +
+ +
+

Категории

+ +
+ +
+ + + + 
+            const dropdown = new DropDown({
+              selector: '.cg-dropdown_categories', 
+              placeholder: 'Выберите регион', 
+              searchMode: true,
+              items: [
+                {
+                  category: 'Russia',
+                  categoryItems: [
+                    {
+                      id: '28qwds',
+                      title: 'Москва',
+                      value: 0,
+                    },
+                    'Ростов-на-дону',
+                    'Саратов',
+                    'Волгоград',
+                    'Донецк',
+                  ],
+                },
+                {
+                  category: 'USA',
+                  categoryItems: [
+                    'Alabama', 
+                    'Texas', 
+                    'Colorado', 
+                    'Klirens', 
+                    'Los-Angeles'],
+                },
+                {
+                  category: 'France',
+                  categoryItems: ['Paris'],
+                },
+              ],
+              styles: {
+                head: {
+                  width: '830px', 
+                },
+                list: {
+                  width: '824px', 
+                },
+                placeholder: {
+                  maxWidth: '500px ',
+                },
+              },
+              multiselect: true,
+              multiselectTag: true,
+            });
+
+ +
+ +
+

Управление с помошью кнопок

+
+ + +
+ +
+ +
+ + + + + 
+            const dropdown = new DropDown({
+              selector: '.cg-dropdown_usedBtn', 
+              placeholder: 'Выберите авто', 
+              searchMode: true,
+              items: [
+                  'BMW',
+                  {
+                    id: '213sade',
+                    title: 'Opel',
+                    value: 1,
+                  },
+                  'Mersedes', 
+                  'MAN',  
+                  'max', 
+              ],
+              styles: {
+                head: {
+                  width:  '830px',
+                  color:  'black',
+                  backgroundColor:  'rgb(176 223 167)',
+                },
+                list: {
+                  width:  '824px',
+                  color:  'black',
+                  backgroundColor:  'rgb(176 223 167)',
+                },
+                caret: {
+                  borderTop:  '6px solid black',
+                },
+                search: {
+                  backgroundColor:  '#d7ffff',
+                  borderRadius:  '5px',
+                  borderBottom:  'none',
+                  width:  '95%',
+                  color:  'black',
+                },
+              },
+              multiselect: true,
+            });
+
+ +
+ +
+

Функция disabled

+ + + + +
+ +
+ + + + 
+            const dropdown = new DropDown({
+              selector: '.cg-dropdown_checkboxDisable', 
+              placeholder: 'Выберите авто', 
+              searchMode: true,
+              items: [
+                'BMW',
+                {
+                  id: '213sade',
+                  title: 'Opel',
+                  value: 1,
+                },
+                'Mersedes', 
+                'MAN',  
+                'Ferari', 
+              ],
+              styles: {
+                head: {
+                  width: '830px', 
+                },
+                list: {
+                  width: '824px', 
+                },
+                placeholder: {
+                  maxWidth: '500px ',
+                },
+              },
+            });
+
+ +
+
+ + + diff --git a/example/index.js b/example/index.js new file mode 100644 index 0000000..97649f8 --- /dev/null +++ b/example/index.js @@ -0,0 +1,232 @@ +import DropDown from '../index'; +import './example'; + +// ------------------------------Обычный селект-------------------- +const dropdown = new DropDown({ + selector: '.cg-dropdown_one', + placeholder: 'Выберите авто', + lable: 'EXAMPLE', + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + ], + styles: { + head: { + width: '830px', + }, + list: { + width: '824px', + }, + }, +}); + +// ------------------------------NativeSelect----------------------- +const dropdownNativeSelect = new DropDown({ + selector: '.cg-dropdown_selectNative', + placeholder: 'Выберите авто', + nativeSelectMode: true, + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + 'Kamaz', + 'Ural' + ], + styles: { + head: { + width: '830px', + }, + list: { + width: '824px', + }, + }, +}); + +// ------------------------------listDisplayMode-------------------- +const dropdownlistDisplayMode = new DropDown({ + selector: '.cg-dropdown_listDisplayMode', + placeholder: 'Выберите авто', + listDisplayMode: true, + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + ], + styles: { + head: { + width: '830px', + }, + list: { + width: '824px', + }, + }, +}); + +// ------------------------------URL-------------------- +const dropdown3 = new DropDown({ + selector: '.cg-dropdown_three', + placeholder: 'URL', + url: 'https://jsonplaceholder.typicode.com/users', + searchMode: true, + darkTheme: false, + language: 'ru', + styles: { + head: { + width: '830px', + }, + list: { + width: '824px', + }, + }, +}); + +// --------------------------------Категории-------------------------- +const dropdown4 = new DropDown({ + selector: '.cg-dropdown_categories', + placeholder: 'Выберите регион', + searchMode: true, + items: [ + { + category: 'Russia', + categoryItems: [ + { + id: '28qwds', + title: 'Москва', + value: 0, + }, + , + 'Ростов-на-дону', + 'Саратов', + 'Волгоград', + 'Донецк', + ], + }, + { + category: 'USA', + categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], + }, + { + category: 'France', + categoryItems: ['Paris'], + }, + ], + styles: { + head: { + width: '830px', + }, + list: { + width: '824px', + }, + placeholder: { + maxWidth: '500px ', + }, + }, + multiselect: true, + multiselectTag: true, +}); + +//----------------управление с помощью кнопок---------------------------------- +const dropdownBtn = new DropDown({ + selector: '.cg-dropdown_usedBtn', + placeholder: 'Выберите авто', + searchMode: true, + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'max', + ], + styles: { + head: { + width: '830px', + color: 'black', + backgroundColor: 'rgb(176 223 167)', + }, + list: { + width: '824px', + color: 'black', + backgroundColor: 'rgb(176 223 167)', + }, + caret: { + borderTop: '6px solid black', + }, + search: { + backgroundColor: '#d7ffff', + borderRadius: '5px', + borderBottom: 'none', + width: '95%', + color: 'black', + }, + }, + multiselect: true, +}); + +const buttonOpen = document.querySelector('.button__open'); +const buttonClose = document.querySelector('.button__close'); + +dropdownBtn.buttonControl(buttonOpen, 'open'); +dropdownBtn.buttonControl(buttonClose, 'close'); + +//-------------------------Функция Disabled---------------------------------- +const dropdownDisabled = new DropDown({ + selector: '.cg-dropdown_checkboxDisable', + placeholder: 'Выберите авто', + searchMode: true, + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'max', + ], + styles: { + head: { + width: '830px', + }, + list: { + width: '824px', + }, + placeholder: { + maxWidth: '500px ', + }, + }, + multiselect: true, +}); +dropdownDisabled.disabled(true); +let chbox = document.getElementById('checkboxDisable'); + +chbox.addEventListener('click', () => { + if (chbox.checked == true) { + dropdownDisabled.disabled(false); + } else { + dropdownDisabled.disabled(true); + } +});