saasufy-components 1.4.0 → 1.5.0

package/input-provider.js

@@ -0,0 +1,207 @@
+import { debouncer } from './utils.js';
+
+const DEFAULT_DEBOUNCE_DELAY = 800;
+
+class InputProvider extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.inputElement = null;
+  }
+  connectedCallback() {
+    this.isReady = true;
+    this.destroy = () => {};
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this.destroy();
+  }
+
+  static get observedAttributes() {
+    return [
+      'input-id',
+      'list',
+      'type',
+      'placeholder',
+      'consumers',
+      'debounce-delay',
+      'options',
+      'value',
+      'height'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.destroy();
+    this.render();
+  }
+
+  triggerChange() {
+    this.inputElement && this.inputElement.dispatchEvent(new Event('change'));
+  }
+
+  set value(newValue) {
+    if (this.inputElement) {
+      let oldValue = this.inputElement.value;
+      this.inputElement.value = newValue;
+      if (oldValue !== newValue) {
+        this.triggerChange();
+      }
+    }
+  }
+
+  get value() {
+    return (this.inputElement && this.inputElement.value) || '';
+  }
+
+  render() {
+    this.innerHTML = '';
+    let inputId = this.getAttribute('input-id');
+    let inputList = this.getAttribute('list');
+    let type = this.getAttribute('type') || 'text';
+    let placeholder = this.getAttribute('placeholder');
+    let options = this.getAttribute('options');
+    let height = this.getAttribute('height');
+    let value = this.getAttribute('value') || '';
+
+    let elementType;
+    if (type === 'select') {
+      elementType = 'select';
+    } else if (type === 'textarea') {
+      elementType = 'textarea';
+    } else {
+      elementType = 'input';
+    }
+    this.inputElement = document.createElement(elementType);
+    if (type === 'select') {
+      if (options) {
+        let optionElements = options
+        .split(',')
+        .map((option) => {
+          return `<option value="${option}">${option}</option>`;
+        })
+        .join('');
+        this.inputElement.innerHTML = optionElements;
+      }
+    } else if (elementType === 'input') {
+      if (inputList) {
+        this.inputElement.setAttribute('list', inputList)
+      }
+      this.inputElement.type = type;
+    }
+    if (height) {
+      this.inputElement.style.height = height;
+    }
+    if (inputId) {
+      this.inputElement.setAttribute('id', inputId);
+    }
+    if (placeholder) {
+      this.inputElement.setAttribute('placeholder', placeholder);
+    }
+
+    this.appendChild(this.inputElement);
+
+    let destroyHandlers = this.updateConsumerElementsOnEdit();
+
+    if (value) {
+      this.value = value;
+    }
+    this.destroy = () => {
+      destroyHandlers();
+    };
+  }
+
+  updateConsumerElements(consumers, value) {
+    let parentElement = this.parentElement;
+    if (parentElement) {
+      let consumerParts = consumers.split(',')
+        .filter(part => part)
+        .map(part => {
+          part = part.trim();
+          return part.split(':').map(subPart => subPart.trim());
+        })
+        .filter(([ selector, attributeName ]) => selector);
+
+      for (let [ selector, attributeName ] of consumerParts) {
+        let matchingElements = parentElement.querySelectorAll(selector);
+        if (attributeName) {
+          for (let element of matchingElements) {
+            element.setAttribute(attributeName, value);
+          }
+        } else {
+          for (let element of matchingElements) {
+            if (element.nodeType === 'INPUT') {
+              if (element.type === 'checkbox') {
+                if (value) {
+                  element.setAttribute('checked', '');
+                } else {
+                  element.removeAttribute('checked');
+                }
+              } else {
+                element.value = value;
+              }
+            } else {
+              element.innerHTML = value;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  updateConsumerElementsOnEdit() {
+    let consumers = this.getAttribute('consumers');
+    if (!consumers) return;
+
+    let inputElement = this.inputElement;
+
+    let debounceDelay = this.getAttribute('debounce-delay');
+    debounceDelay = debounceDelay ? Number(debounceDelay) : DEFAULT_DEBOUNCE_DELAY;
+    let debounce = debouncer();
+
+    let onInputChange = (event) => {
+      debounce(async () => {
+        if (event.target.value === this.lastValue) return;
+        this.lastValue = event.target.value;
+        if (inputElement.type === 'checkbox') {
+          this.updateConsumerElements(consumers, !!inputElement.checked);
+          return;
+        }
+        if (event.target.value === '') {
+          this.updateConsumerElements(consumers, '');
+        } else {
+          let targetValue = inputElement.type === 'number' ?
+            Number(event.target.value) : event.target.value;
+          this.updateConsumerElements(consumers, targetValue);
+        }
+      }, debounceDelay);
+    };
+    inputElement.addEventListener('change', onInputChange);
+
+    let onInputKeyUp;
+    if (inputElement.type !== 'checkbox') {
+      onInputKeyUp = async (event) => {
+        debounce(async () => {
+          if (event.target.value === this.lastValue) return;
+          this.lastValue = event.target.value;
+          if (event.target.value === '') {
+            this.updateConsumerElements(consumers, '');
+          } else {
+            let targetValue = inputElement.type === 'number' ?
+              Number(event.target.value) : event.target.value;
+            this.updateConsumerElements(consumers, targetValue);
+          }
+        }, debounceDelay);
+      };
+      inputElement.addEventListener('keyup', onInputKeyUp);
+    }
+    return () => {
+      inputElement.removeEventListener('change', onInputChange);
+      onInputKeyUp && inputElement.removeEventListener('keyup', onInputKeyUp);
+    };
+  }
+}
+
+window.customElements.define('input-provider', InputProvider);

package/model-input.js

@@ -21,7 +21,7 @@ class ModelInput extends SocketConsumer {
   static get observedAttributes() {
     return [
       'input-id',
-      'input-list',
+      'list',
       'model-instance-property',
       'type',
       'placeholder',
@@ -31,7 +31,8 @@ class ModelInput extends SocketConsumer {
       'model-field',
       'debounce-delay',
       'options',
-      'height'
+      'height',
+      'hide-error-logs'
     ];
   }
 
@@ -64,8 +65,8 @@ class ModelInput extends SocketConsumer {
     let modelInstanceProperty = this.getAttribute('model-instance-property');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
-    let inputList = this.getAttribute('input-list');
-    let type = this.getAttribute('type');
+    let inputList = this.getAttribute('list');
+    let type = this.getAttribute('type') || 'text';
     let placeholder = this.getAttribute('placeholder');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');

package/model-text.js

@@ -18,7 +18,8 @@ class ModelText extends SocketConsumer {
       'model-instance-property',
       'model-type',
       'model-id',
-      'model-field'
+      'model-field',
+      'hide-error-logs'
     ];
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/socket.js

@@ -41,7 +41,14 @@ export class SocketProvider extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.isReady) return;
-    this.destroySocket();
+    let sanitizedURL = this.getSanitizedURL();
+    if (
+      this.saasufySocket &&
+      this.saasufySocket.transport &&
+      this.saasufySocket.transport.uri() !== sanitizedURL
+    ) {
+      this.saasufySocket.disconnect();
+    }
     this.getSocket();
   }
 
@@ -53,14 +60,24 @@ export class SocketProvider extends HTMLElement {
 
   getSocket() {
     if (this.saasufySocket) {
+      this.saasufySocket.options = {
+        ...this.saasufySocket.options,
+        ...this.getSocketOptions()
+      };
+      this.saasufySocket.connect();
       return this.saasufySocket;
     }
     return this.createSocket();
   }
 
-  createSocket() {
-    let authTokenName = this.getAttribute('auth-token-name') || null;
+  getSanitizedURL() {
     let url = this.getAttribute('url') || '';
+    return url.trim();
+  }
+
+  getSocketOptions() {
+    let authTokenName = this.getAttribute('auth-token-name') || null;
+    let url = this.getSanitizedURL();
     let urlOptions;
     let matchedList = url.match(urlPartsRegExp);
     if (matchedList) {
@@ -75,12 +92,22 @@ export class SocketProvider extends HTMLElement {
         path
       };
     } else {
+      if (url) {
+        throw new Error(`The specified URL ${url} was invalid`);
+      }
       urlOptions = {};
     }
-    this.saasufySocket = create({
+    let socketOptions = {
       authTokenName,
       ...urlOptions
-    });
+    };
+    socketOptions.autoConnect = !!url;
+    return socketOptions;
+  }
+
+  createSocket() {
+    let socketOptions = this.getSocketOptions();
+    this.saasufySocket = create(socketOptions);
 
     return this.saasufySocket;
   }

package/utils.js

@@ -164,6 +164,7 @@ let templateFormatters = {
     let valueString = String(value);
     return `${valueString.slice(0, 1).toUpperCase()}${valueString.slice(1)}`;
   },
+  trim: (value) => String(value).trim(),
   fallback: (...args) => {
     return args.filter(arg => arg)[0];
   }