Fixed exemple page and collback

2023-02-06 15:24:36 +03:00 · 2023-02-06 15:24:36 +03:00 · bcad805727
commit bcad805727
parent 993b8855fa
8 changed files with 70 additions and 57 deletions
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # CG-SELECT

-## version ~ 0.2.31
+## version ~ 0.2.32

 This component allows you to create a custom select. It offers more flexible customization and use of select.
 Customization, multi-selection and live search by elements are available.
--- a/example/index.html
+++ b/example/index.html
@ -35,7 +35,7 @@

    <div class="container content">
      <div class="example-select">
-        <h2 class="example-select_title">Дефолтный селект</h2>
+        <h2 class="example-select_title">Default select</h2>
        <form method="get" class="form">
          <div class="layout-select">
            <button class="cg-dropdown cg-dropdown_one"></button>
@ -43,12 +43,12 @@

          <input type="submit" value="Отправить!" class="example-select_submit" />

-          <button type="button" class="check-code" id="first">Посмотреть код</button>
+          <button type="button" class="check-code" id="first">View code</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">CGSelect</span>({
                selector: <span class="code__string">'.cg-dropdown_one',</span> 
-                placeholder: <span class="code__string">'Выберите авто',</span> 
+                placeholder: <span class="code__string">'Choose a car',</span> 
                lable: <span class="code__string">'EXAMPLE',</span> 
                items: [
                  <span class="code__string">'BMW',</span>
@ -76,22 +76,22 @@
      </div>

      <div class="example-select">
-        <h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
+        <h2 class="example-select_title">Default select with function nativeSelectMode</h2>

        <form method="get" class="form">
          <p style="margin-left: 12px; color: white">
-            *При мобильном разрешении появляеться нативный селект.
+            *Native select appears on mobile resolution.
          </p>
          <div class="layout-select">
            <button class="cg-dropdown cg-dropdown_selectNative"></button>
          </div>

-          <button type="button" class="check-code" id="Native">Посмотреть код</button>
+          <button type="button" class="check-code" id="Native">View code</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">CGSelect</span>({
                selector: <span class="code__string">'.cg-dropdown_one',</span> 
-                placeholder: <span class="code__string">'Выберите авто',</span> 
+                placeholder: <span class="code__string">'Choose a car',</span> 
                nativeSelectMode: <span class="code__keyword">true,</span>
                items: [
                  <span class="code__string">'BMW',</span>
@ -119,23 +119,23 @@
      </div>

      <div class="example-select">
-        <h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
+        <h2 class="example-select_title">Default select with function listDisplayMode</h2>

        <form method="get" class="form">
          <p style="margin-left: 12px; color: white">
-            *При использовании данного метода лист с выбором появляеться как модальное окно.
+            *When using this method, the selection sheet appears as a modal window.
          </p>
          <div class="layout-select">
            <button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
          </div>

-          <button type="button" class="check-code" id="six">Посмотреть код</button>
+          <button type="button" class="check-code" id="six">View code</button>

          <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">CGSelect</span>({
                selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span> 
-                placeholder: <span class="code__string">'Выберите авто',</span> 
+                placeholder: <span class="code__string">'Choose a car',</span> 
                listDisplayMode: <span class="code__keyword">true,</span>
                items: [
                  <span class="code__string">'BMW',</span>
@ -163,11 +163,11 @@
      </div>

      <div class="example-select">
-        <h1 class="example-select_title">Селект с данными с URL</h1>
+        <h1 class="example-select_title">Select with data from URL</h1>
        <div class="layout-select">
          <button class="cg-dropdown cg-dropdown_three"></button>
        </div>
-        <button type="button" class="check-code" id="second">Посмотреть код</button>
+        <button type="button" class="check-code" id="second">View code</button>

        <code id="codeSecond">
          <pre>
@ -192,12 +192,12 @@
      </div>

      <div class="example-select">
-        <h1 class="example-select_title">Категории</h1>
+        <h1 class="example-select_title">Categories</h1>

        <div class="layout-select">
          <button class="cg-dropdown cg-dropdown_categories"></button>
        </div>
-        <button type="button" class="check-code" id="third">Посмотреть код</button>
+        <button type="button" class="check-code" id="third">View code</button>

        <code id="codeThird">
          <pre>
@ -253,7 +253,7 @@
      </div>

      <div class="example-select">
-        <h1 class="example-select_title">Управление с помошью кнопок</h1>
+        <h1 class="example-select_title">Button control</h1>
        <div style="margin-bottom: 15px">
          <button class="button__open example-select_submit">Open</button>
          <button class="button__close example-select_submit">Close</button>
@ -263,13 +263,13 @@
          <button class="cg-dropdown cg-dropdown_usedBtn"></button>
        </div>

-        <button type="button" class="check-code" id="fourth">Посмотреть код</button>
+        <button type="button" class="check-code" id="fourth">View code</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">CGSelect</span>({
              selector: <span class="code__string">'.cg-dropdown_usedBtn',</span> 
-              placeholder: <span class="code__string">'Выберите авто',</span> 
+              placeholder: <span class="code__string">'Choose a car',</span> 
              searchMode: <span class="code__keyword">true,</span>
              items: [
                  <span class="code__string">'BMW',</span>
@ -311,21 +311,23 @@
      </div>

      <div class="example-select">
-        <h1 class="example-select_title">Функция disabled</h1>
+        <h1 class="example-select_title">Function disabled</h1>

        <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
-        <label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
+        <label for="checkboxDisable" style="color: white">
+          You agree to the processing of data</label
+        >

        <div class="layout-select">
          <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
        </div>

-        <button type="button" class="check-code" id="fifth">Посмотреть код</button>
+        <button type="button" class="check-code" id="fifth">View code</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">CGSelect</span>({
              selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> 
-              placeholder: <span class="code__string">'Выберите авто',</span> 
+              placeholder: <span class="code__string">'Choose a car',</span> 
              searchMode: <span class="code__keyword">true,</span>
              items: [
                <span class="code__string">'BMW',</span>
--- a/example/index.js
+++ b/example/index.js
@ -4,8 +4,8 @@ import './example';
 // ------------------------------Обычный селект--------------------
 const dropdown = new CGSelect({
  selector: '.cg-dropdown_one',
-  placeholder: 'Выберите авто',
-  lable: 'EXAMPLE',
+  placeholder: 'Choose a car',
+  label: 'EXAMPLE',
  items: [
    'BMW',
    {
@ -28,14 +28,14 @@ const dropdown = new CGSelect({
  // multiselect: true,
 });

-// dropdown.on('select', function (e) {
-//   console.log(`this state: ${e}`);
-// });
+dropdown.on('clear', function (e) {
+  console.log(`this state: ${e}`);
+});

 // ------------------------------NativeSelect-----------------------
 const dropdownNativeSelect = new CGSelect({
  selector: '.cg-dropdown_selectNative',
-  placeholder: 'Выберите авто',
+  placeholder: 'Choose a car',
  nativeSelectMode: true,
  items: [
    'BMW',
@ -63,7 +63,7 @@ const dropdownNativeSelect = new CGSelect({
 // ------------------------------listDisplayMode--------------------
 const dropdownlistDisplayMode = new CGSelect({
  selector: '.cg-dropdown_listDisplayMode',
-  placeholder: 'Выберите авто',
+  placeholder: 'Choose a car',
  listDisplayMode: true,
  items: [
    'BMW',
@ -134,7 +134,7 @@ const dropdown4 = new CGSelect({
 //----------------управление с помощью кнопок----------------------------------
 const dropdownBtn = new CGSelect({
  selector: '.cg-dropdown_usedBtn',
-  placeholder: 'Выберите авто',
+  placeholder: 'Choose a car',
  searchMode: true,
  items: [
    'BMW',
@ -181,7 +181,7 @@ dropdownBtn.buttonControl(buttonClose, 'close');
 //-------------------------Функция Disabled----------------------------------
 const dropdownDisabled = new CGSelect({
  selector: '.cg-dropdown_checkboxDisable',
-  placeholder: 'Выберите авто',
+  placeholder: 'Choose a car',
  searchMode: true,
  items: [
    'BMW',
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "cg-select",
-  "version": "0.2.31",
+  "version": "0.2.32",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "cg-select",
-      "version": "0.2.31",
+      "version": "0.2.32",
      "license": "ISC",
      "dependencies": {
        "@parcel/optimizer-css": "^2.8.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "cg-select",
-  "version": "0.2.31",
+  "version": "0.2.32",
  "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
  "author": {
    "name": "CraftGroup",
--- a/src/cg-select.ts
+++ b/src/cg-select.ts
@ -43,7 +43,7 @@ export class CGSelect implements ICgSelect {
  nativeSelectMode?: boolean;
  listDisplayMode?: boolean;
  language?: string;
-  lable?: string;
+  label?: string;
  styles?: IStyle;
  event?: string;
  url?: string;
@ -74,7 +74,7 @@ export class CGSelect implements ICgSelect {
   * Variable for carriage control.
   * @type {Element | null | undefined}
   */
-  private caret: Element | null | undefined;
+  private carriage: Element | null | undefined;
  /**
   * Transferred categories.
   * @type {string}
@ -94,7 +94,7 @@ export class CGSelect implements ICgSelect {
   * Button, to control the select.
   * @type {Element | null}
   */
-  private btnCntr?: Element | null;
+  private buttonAction?: Element | null;

  /**
   * @param {ICgSelect} setting Object accepting select settings.
@ -105,7 +105,7 @@ export class CGSelect implements ICgSelect {
   *  selector: 'Unique selector',
      selected: 'Selected item',
      placeholder: '...',
-      lable: '...'
+      label: '...'
      items: [string|number|object],
      theme: string,
      searchMode: true/false,
@ -119,9 +119,9 @@ export class CGSelect implements ICgSelect {
        },
        list: {...},
        chips: {...},
-        caret: {...},
+        carriage: {...},
        placeholder: {...},
-        lable: {..},
+        label: {..},
      },
      event: '...',
      url: 'http/...',
@ -191,7 +191,7 @@ export class CGSelect implements ICgSelect {
      searchMode,
      language,
      styles,
-      lable,
+      label,
      event,
      selected,
      placeholder,
@ -210,7 +210,7 @@ export class CGSelect implements ICgSelect {
    this.nativeSelectMode = nativeSelectMode;
    this.listDisplayMode = listDisplayMode;
    this.styles = styles;
-    this.lable = lable;
+    this.label = label;
    this.event = event;
    this.selected = selected;
    this.placeholder = placeholder;
@ -231,14 +231,14 @@ export class CGSelect implements ICgSelect {
      return;
    }

-    if (this.lable) {
-      const lableItem = document.createElement('h1');
-      const textLable = document.createTextNode(this.lable);
+    if (this.label) {
+      const labelItem = document.createElement('h1');
+      const textLabel = document.createTextNode(this.label);

-      lableItem.appendChild(textLable);
-      lableItem.classList.add('label');
+      labelItem.appendChild(textLabel);
+      labelItem.classList.add('label');

-      this.element!.insertAdjacentElement('beforebegin', lableItem);
+      this.element!.insertAdjacentElement('beforebegin', labelItem);
    }

    items.forEach((dataItem: any, index: number) => {
@ -354,7 +354,7 @@ export class CGSelect implements ICgSelect {
    });

    this.list = this.element!.querySelector('.list');
-    this.caret = this.element!.querySelector('.caret');
+    this.carriage = this.element!.querySelector('.caret');

    if (this.theme) {
      changeTheme(this.element!, this.theme!);
@ -491,10 +491,10 @@ export class CGSelect implements ICgSelect {
  private open(oneClick?: boolean): void {
    if (oneClick === true) {
      this.list!.classList.add('open');
-      this.caret!.classList.add('caret_rotate');
+      this.carriage!.classList.add('caret_rotate');
    } else {
      this.list!.classList.toggle('open');
-      this.caret!.classList.toggle('caret_rotate');
+      this.carriage!.classList.toggle('caret_rotate');
    }
  }

@ -505,7 +505,7 @@ export class CGSelect implements ICgSelect {
   */
  private close(): void {
    this.list?.classList.remove('open');
-    this.caret?.classList.remove('caret_rotate');
+    this.carriage?.classList.remove('caret_rotate');
  }

  /**
@ -519,7 +519,7 @@ export class CGSelect implements ICgSelect {
    document.addEventListener('click', (e) => {
      const withinBoundaries = e.composedPath().includes(dropdown!);
      if (!withinBoundaries) {
-        if (this.btnCntr) {
+        if (this.buttonAction) {
          return;
        } else {
          this.close();
@ -815,7 +815,7 @@ export class CGSelect implements ICgSelect {
      return;
    }

-    this.btnCntr = button!;
+    this.buttonAction = button!;
    button.addEventListener('click', () => {
      if (method.toLowerCase() === 'open') {
        this.open(true);
@ -945,6 +945,15 @@ export class CGSelect implements ICgSelect {
        });
        callback(state);
        break;
+      case 'clear':
+        this.element!.addEventListener('click', () => {
+          const svgIcon = this.element?.querySelector('.svg-icon');
+          svgIcon?.addEventListener('click', () => {
+            console.log('list:clear', svgIcon.classList.contains('svg-clear'));
+          });
+        });
+        callback(state);
+        break;
    }
  }
 }
--- a/src/components/utils/utils.ts
+++ b/src/components/utils/utils.ts
@ -143,7 +143,9 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex

  select!.appendChild(svgIcon);

-  svgIcon.addEventListener('click', () => {
+  svgIcon.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
    select!.innerText = '';

    nativeOption.forEach((option) => {
--- a/src/interfaces/cg-select.interface.ts
+++ b/src/interfaces/cg-select.interface.ts
@ -61,7 +61,7 @@ export interface ICgSelect {
   * An optional parameter that adds a lable before the select.
   * @type {string}
   */
-  lable?: string;
+  label?: string;
  /**
   * An optional parameter that is responsible for customizing the select elements,
   * objects with CSS properties for customizable elements are passed to it.