Pull on main rep

2022-12-20 14:57:21 +03:00 · 2022-12-20 14:57:21 +03:00 · 0a44732782
commit 0a44732782
parent 970d84b131 d81cb3ec77
6 changed files with 304 additions and 17 deletions
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
  "description": "",
  "scripts": {
    "start": "parcel src/index.html -p 4500 --open ",
-    "build": "parcel build ./src/index.html  --public-url /cg-select/",
+    "build": "parcel build ./src/index.html  --public-url /",
    "deploy": "gh-pages -d dist",
    "predeploy": "npm run build"
  },
@ -17,7 +17,7 @@
  "bugs": {
    "url": "https://github.com/MaxOvs19/cg-select/issues"
  },
-  "homepage": "https://maxovs19.github.io/cg-select/",
+  "homepage": "https://cg-select.itguild.info",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.7.0",
    "parcel": "^2.7.0",
--- a/src/exemple-page.js
+++ b/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")
+})
--- a/src/index.html
+++ b/src/index.html
@ -26,24 +26,129 @@

    <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>

          <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>
-        <button class="cg-dropdown cg-dropdown_three"></button>
+        <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>
-        <button class="cg-dropdown cg-dropdown_categories"></button>
+
+        <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">
@ -52,15 +157,100 @@
          <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>
+
+        <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>
-        <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
+
+        <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>
--- a/src/index.js
+++ b/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',
    {
--- a/src/style/ExemplePage.scss
+++ b/src/style/ExemplePage.scss
@ -56,7 +56,7 @@

 .content {
  margin-top: 15px;
-  background-color: #6b6d76;
+  // background-color: #6b6d76;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
@ -66,20 +66,28 @@

 .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;
@ -96,4 +104,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;
 }
--- a/src/style/main.scss
+++ b/src/style/main.scss
@ -10,7 +10,7 @@
 }

 body {
-  background: #c5c5c6;
+  background: #000000c4;
 }

 .container {