Finished in working to TS

2023-01-18 19:40:24 +03:00
parent 8897e12464
commit ba6def3f21
15 changed files with 34 additions and 1549 deletions
--- a/example/index.html
+++ b/example/index.html
@ -27,7 +27,7 @@
        <nav>
          <ul class="navlist">
            <li><a href="">Home</a></li>
-            <!-- <li><a href="/documentation/index.html">Documentation</a></li> -->
+            <li><a href="/documentation/index.html">Documentation</a></li>
          </ul>
        </nav>
      </header>
@ -46,7 +46,7 @@
          <button type="button" class="check-code" id="first">Посмотреть код</button>
          <code id="codeFirst">
            <pre>
-              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
                selector: <span class="code__string">'.cg-dropdown_one',</span> 
                placeholder: <span class="code__string">'Выберите авто',</span> 
                lable: <span class="code__string">'EXAMPLE',</span> 
@ -89,7 +89,7 @@
          <button type="button" class="check-code" id="Native">Посмотреть код</button>
          <code id="codeNative">
            <pre>
-              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
                selector: <span class="code__string">'.cg-dropdown_one',</span> 
                placeholder: <span class="code__string">'Выберите авто',</span> 
                nativeSelectMode: <span class="code__keyword">true,</span>
@ -133,7 +133,7 @@

          <code id="codeSix">
            <pre>
-              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
                selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span> 
                placeholder: <span class="code__string">'Выберите авто',</span> 
                listDisplayMode: <span class="code__keyword">true,</span>
@ -171,7 +171,7 @@

        <code id="codeSecond">
          <pre>
-            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
              selector: <span class="code__string">'.cg-dropdown_three',</span> 
              placeholder: <span class="code__string">'URL',</span> 
              url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span>            
@ -201,7 +201,7 @@

        <code id="codeThird">
          <pre>
-            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
              selector: <span class="code__string">'.cg-dropdown_categories',</span> 
              placeholder: <span class="code__string">'Выберите регион',</span> 
              searchMode: <span class="code__keyword">true,</span>
@ -267,7 +267,7 @@

        <code id="codeFourth">
          <pre>
-            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
              selector: <span class="code__string">'.cg-dropdown_usedBtn',</span> 
              placeholder: <span class="code__string">'Выберите авто',</span> 
              searchMode: <span class="code__keyword">true,</span>
@ -323,7 +323,7 @@
        <button type="button" class="check-code" id="fifth">Посмотреть код</button>
        <code id="codeFifth">
          <pre>
-            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
              selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> 
              placeholder: <span class="code__string">'Выберите авто',</span> 
              searchMode: <span class="code__keyword">true,</span>
@ -356,5 +356,4 @@
    </div>
  </body>
  <script type="module" src="index.js"></script>
-  <!-- <script type="module" src="indexTs.ts"></script> -->
 </html>
--- a/example/index.js
+++ b/example/index.js
@ -1,4 +1,4 @@
-import { CGSelect } from '../src/cg-selectTS';
+import { CGSelect } from '../src/cg-select';
 import './example';

 // ------------------------------Обычный селект--------------------
--- a/example/indexTs.ts
+++ b/example/indexTs.ts
@ -1,234 +0,0 @@
-// import { CGSelect } from '../src/cg-selectTS';
-// import './example';
-
-// // ------------------------------Обычный селект--------------------
-// const dropdn = new CGSelect({
-//   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 CGSelect({
-//   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',
-//     },
-//   },
-// });
-
-// // console.log();
-
-// // ------------------------------listDisplayMode--------------------
-// const dropdownlistDisplayMode = new CGSelect({
-//   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 CGSelect({
-//   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 CGSelect({
-//   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 CGSelect({
-//   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 CGSelect({
-//   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') as HTMLInputElement;
-
-// chbox!.addEventListener('click', () => {
-//   if (chbox!.checked == true) {
-//     dropdownDisabled.disabled(false);
-//   } else {
-//     dropdownDisabled.disabled(true);
-//   }
-// });