From 5c0f244eb12f9787951fd3d5f3a69e495fae497a Mon Sep 17 00:00:00 2001
From: MaxOvs <gshk3669@gmail.com>
Date: Mon, 19 Dec 2022 22:48:05 +0300
Subject: [PATCH] Added code example

---
 src/index.html             | 194 +++++++++++++++++++++++++++++++++----
 src/index.js               |   3 -
 src/style/ExemplePage.scss |  44 ++++++++-
 3 files changed, 214 insertions(+), 27 deletions(-)

diff --git a/src/index.html b/src/index.html
index dca770f..110e62f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -26,9 +26,9 @@
 
     <div class="container content">
       <div class="example-select">
+        <h2 class="example-select_title">Дефолтный селект</h2>
         <form method="get" class="form">
-          <div>
-            <h2 class="example-select_title">Дефолтный селект</h2>
+          <div class="layout-select">
             <button class="cg-dropdown cg-dropdown_one"></button>
           </div>
 
@@ -36,44 +36,117 @@
 
           <code>
             <pre>
-              const dropdown = new DropDown({
-                selector: '.cg-dropdown_one',
-                placeholder: 'Выберите авто',
-                lable: 'EXAMPLE',
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+                selector: <span class="code__string">'.cg-dropdown_one',</span> 
+                placeholder: <span class="code__string">'Выберите авто',</span> 
+                lable: <span class="code__string">'EXAMPLE',</span> 
+                span.code__string 
                 items: [
-                  'BMW',
+                  <span class="code__string">'BMW',</span>
                   {
-                    id: '213sade',
-                    title: 'Opel',
+                    id: <span class="code__string">'213sade',</span>
+                    title: <span class="code__string">'Opel',</span>
                     value: 1,
                   },
-                  'Mersedes',
-                  'MAN',
-                  'Ferari',
+                  <span class="code__string">'Mersedes',</span> 
+                  <span class="code__string">'MAN',</span>  
+                  <span class="code__string">'Ferari',</span> 
                 ],
                 styles: {
                   head: {
-                    width: '830px',
+                    width: <span class="code__string">'830px',</span> 
                   },
                   list: {
-                    width: '824px',
+                    width: <span class="code__string">'824px',</span> 
                   },
                 },
               });
             </pre>
-            
           </code>
         </form>
       </div>
 
       <div class="example-select">
         <h1 class="example-select_title">Селект с данными с URL</h1>
-        <button class="cg-dropdown cg-dropdown_three"></button>
+        <div class="layout-select">
+          <button class="cg-dropdown cg-dropdown_three"></button>
+        </div>
+
+        <code>
+          <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>({
+              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>            
+              searchMode: <span class="code__keyword">true,</span>
+              darkTheme: <span class="code__keyword">false,</span>
+              language: <span class="code__string">'ru',</span>
+              styles: {
+                head: {
+                  width: <span class="code__string">'830px',</span> 
+                },
+                list: {
+                  width: <span class="code__string">'824px',</span> 
+                },
+              },
+            });
+          </pre>
+        </code>
       </div>
 
       <div class="example-select">
         <h1 class="example-select_title">Категории</h1>
-        <button class="cg-dropdown cg-dropdown_categories"></button>
+
+        <div class="layout-select">
+          <button class="cg-dropdown cg-dropdown_categories"></button>
+        </div>
+
+        <code>
+          <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>({
+              selector: <span class="code__string">'.cg-dropdown_categories',</span> 
+              placeholder: <span class="code__string">'Выберите регион',</span> 
+              searchMode: <span class="code__keyword">true,</span>
+              items: [
+                {
+                  category: <span class="code__string">'Russia',</span>
+                  categoryItems: [
+                    {
+                      id: <span class="code__string">'28qwds',</span>
+                      title: <span class="code__string">'Москва',</span>
+                      value: 0,
+                    },
+                    <span class="code__string">'Ростов-на-дону',</span>
+                    <span class="code__string">'Саратов',</span>
+                    <span class="code__string">'Волгоград',</span>
+                    <span class="code__string">'Донецк',</span>
+                  ],
+                },
+                {
+                  category: <span class="code__string">'USA',</span>
+                  categoryItems: <span class="code__string">['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],</span>
+                },
+                {
+                  category: <span class="code__string">'France',</span>
+                  categoryItems: <span class="code__string">['Paris'],</span>
+                },
+              ],
+              styles: {
+                head: {
+                  width: <span class="code__string">'830px',</span> 
+                },
+                list: {
+                  width: <span class="code__string">'824px',</span> 
+                },
+                placeholder: {
+                  maxWidth: <span class="code__string">'500px ',</span>
+                },
+              },
+              multiselect: <span class="code__keyword">true,</span>
+              multiselectTag: <span class="code__keyword">true,</span>
+            });
+          </pre>
+        </code>
       </div>
 
       <div class="example-select">
@@ -82,7 +155,54 @@
           <button class="button__open example-select_submit">Open</button>
           <button class="button__close example-select_submit">Close</button>
         </div>
-        <button class="cg-dropdown cg-dropdown_usedBtn"></button>
+
+        <div class="layout-select">
+          <button class="cg-dropdown cg-dropdown_usedBtn"></button>
+        </div>
+
+        <code>
+          <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>({
+              selector: <span class="code__string">'.cg-dropdown_usedBtn',</span> 
+              placeholder: <span class="code__string">'Выберите авто',</span> 
+              searchMode: <span class="code__keyword">true,</span>
+              items: [
+                  <span class="code__string">'BMW',</span>
+                  {
+                    id: <span class="code__string">'213sade',</span>
+                    title: <span class="code__string">'Opel',</span>
+                    value: 1,
+                  },
+                  <span class="code__string">'Mersedes',</span> 
+                  <span class="code__string">'MAN',</span>  
+                  <span class="code__string">'max',</span> 
+              ],
+              styles: {
+                head: {
+                  width:  <span class="code__string">'830px',</span>
+                  color:  <span class="code__string">'black',</span>
+                  backgroundColor:  <span class="code__string">'rgb(176 223 167)',</span>
+                },
+                list: {
+                  width:  <span class="code__string">'824px',</span>
+                  color:  <span class="code__string">'black',</span>
+                  backgroundColor:  <span class="code__string">'rgb(176 223 167)',</span>
+                },
+                caret: {
+                  borderTop:  <span class="code__string">'6px solid black',</span>
+                },
+                search: {
+                  backgroundColor:  <span class="code__string">'#d7ffff',</span>
+                  borderRadius:  <span class="code__string">'5px',</span>
+                  borderBottom:  <span class="code__string">'none',</span>
+                  width:  <span class="code__string">'95%',</span>
+                  color:  <span class="code__string">'black',</span>
+                },
+              },
+              multiselect: <span class="code__keyword">true,</span>
+            });
+          </pre>
+        </code>
       </div>
 
       <div class="example-select">
@@ -90,7 +210,43 @@
 
         <input type="checkbox" name="chbx" id="checkboxDisable" style="margin-bottom: 16px" />
         <label for="checkboxDisable">Вы согласны на обработку данных</label>
-        <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
+
+        <div class="layout-select">
+          <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
+        </div>
+
+        <code>
+          <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>({
+              selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> 
+              placeholder: <span class="code__string">'Выберите авто',</span> 
+              lable: <span class="code__string">'EXAMPLE',</span> 
+              span.code__string 
+              items: [
+                <span class="code__string">'BMW',</span>
+                {
+                  id: <span class="code__string">'213sade',</span>
+                  title: <span class="code__string">'Opel',</span>
+                  value: 1,
+                },
+                <span class="code__string">'Mersedes',</span> 
+                <span class="code__string">'MAN',</span>  
+                <span class="code__string">'Ferari',</span> 
+              ],
+              styles: {
+                head: {
+                  width: <span class="code__string">'830px',</span> 
+                },
+                list: {
+                  width: <span class="code__string">'824px',</span> 
+                },
+                placeholder: {
+                  maxWidth: <span class="code__string">'500px ',</span>
+                },
+              },
+            });
+          </pre>
+        </code>
       </div>
     </div>
   </body>
diff --git a/src/index.js b/src/index.js
index d6e950b..6b3eb2a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -49,8 +49,6 @@ const dropdown3 = new DropDown({
       width: '824px',
     },
   },
-  // multiselect: true,
-  // multiselectTag: true,
 });
 
 // --------------------------------Категории--------------------------
@@ -103,7 +101,6 @@ const dropdownBtn = new DropDown({
   selector: '.cg-dropdown_usedBtn',
   placeholder: 'Выберите авто',
   searchMode: true,
-
   items: [
     'BMW',
     {
diff --git a/src/style/ExemplePage.scss b/src/style/ExemplePage.scss
index b12e816..21dd3ef 100644
--- a/src/style/ExemplePage.scss
+++ b/src/style/ExemplePage.scss
@@ -69,7 +69,6 @@
   background-color: #5c5c5c;
   border-radius: 5px;
   margin: 15px 0 0 0;
-  //padding: 0 13px 13px 13px;
 
   &_title {
     height: 45px;
@@ -83,11 +82,13 @@
   }
 
   &_submit {
+    //background-color: #2a2f3b;
     width: 200px;
     height: 35px;
     border-radius: 10px;
     border: none;
     margin-top: 20px;
+    margin: 20px 15px;
     cursor: pointer;
     transition: 1s;
     -webkit-transition: 1s;
@@ -104,10 +105,43 @@
       -o-transition: 1s;
     }
   }
+
+  .layout-select {
+    margin: 15px;
+  }
 }
 
-
-
-pre{
-
+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;
+  }
 }