Merge pull request #27 from apuc/fix-example-page

Fix example page

src/exemple-page.js

@@ -0,0 +1,34 @@
+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');
+
+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")
+})

src/index.html

@@ -26,25 +26,130 @@
 
     <div class="container content">
       <div class="example-select">
-        <form method="get" class="form">
-          <div>
         <h2 class="example-select_title">Дефолтный селект</h2>
+        <form method="get" class="form">
+          <div class="layout-select">
             <button class="cg-dropdown cg-dropdown_one"></button>
           </div>
 
           <input type="submit" value="Отправить!" class="example-select_submit" />
+
+          <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>({
+                selector: <span class="code__string">'.cg-dropdown_one',</span> 
+                placeholder: <span class="code__string">'Выберите авто',</span> 
+                lable: <span class="code__string">'EXAMPLE',</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">'Ferari',</span> 
+                ],
+                styles: {
+                  head: {
+                    width: <span class="code__string">'830px',</span> 
+                  },
+                  list: {
+                    width: <span class="code__string">'824px',</span> 
+                  },
+                },
+              });
+            </pre>
+          </code>
         </form>
       </div>
 
       <div class="example-select">
         <h1 class="example-select_title">Селект с данными с URL</h1>
+        <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_three"></button>
         </div>
+        <button type="button" class="check-code" id="second">Посмотреть код</button>
+
+        <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>({
+              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>
+
+        <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_categories"></button>
         </div>
+        <button type="button" class="check-code" id="third">Посмотреть код</button>
+
+        <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>({
+              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">
         <h1 class="example-select_title">Управление с помошью кнопок</h1>
@@ -52,16 +157,101 @@
           <button class="button__open example-select_submit">Open</button>
           <button class="button__close example-select_submit">Close</button>
         </div>
+
+        <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_usedBtn"></button>
         </div>
 
+        <button type="button" class="check-code" id="fourth">Посмотреть код</button>
+
+        <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>({
+              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">
         <h1 class="example-select_title">Функция disabled</h1>
 
-        <input type="checkbox" name="chbx" id="checkboxDisable" style="margin-bottom: 16px" />
+        <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
         <label for="checkboxDisable">Вы согласны на обработку данных</label>
+
+        <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
         </div>
+
+        <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>({
+              selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> 
+              placeholder: <span class="code__string">'Выберите авто',</span> 
+              lable: <span class="code__string">'EXAMPLE',</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">'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>
   <script type="module" src="/src/index.js"></script>

src/index.js

@@ -1,4 +1,5 @@
 import { DropDown } from './cg-dropdown';
+import './exemple-page';
 
 // ------------------------------Обычный селект--------------------
 const dropdown = new DropDown({
@@ -49,8 +50,6 @@ const dropdown3 = new DropDown({
       width: '824px',
     },
   },
-  // multiselect: true,
-  // multiselectTag: true,
 });
 
 // --------------------------------Категории--------------------------
@@ -103,7 +102,6 @@ const dropdownBtn = new DropDown({
   selector: '.cg-dropdown_usedBtn',
   placeholder: 'Выберите авто',
   searchMode: true,
-
   items: [
     'BMW',
     {

src/style/ExemplePage.scss

@@ -56,28 +56,39 @@
 
 .content {
   margin-top: 15px;
-  background-color: #6b6d76;
+  // background-color: #6b6d76;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
 }
+
 .example-select {
   width: 100%;
-  margin: 25px;
+  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;
-    text-align: center;
+    padding: 20px 0 0 40px;
+    margin: 0 0 30px 0;
+    background-color: #2a2f3b;
     font-size: 20px;
   }
+
   &_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;
@@ -94,4 +105,61 @@
       -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;
 }

src/style/main.scss

@@ -10,7 +10,7 @@
 }
 
 body {
-  background: #c5c5c6;
+  background: #000000c4;
 }
 
 .container {