Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@cocreate/attributes
Advanced tools
@cocreate/attributes - npm Package Compare versions
Comparing version 1.7.27 to 1.8.0
@@ -7,4 +7,4 @@ module.exports = { | ||
| { | ||
| "collection": "files", | ||
| "document": { | ||
| "array": "files", | ||
| "object": { | ||
| "_id": "6019b2844eea0817df303b06", | ||
@@ -11,0 +11,0 @@ "name": "index.html", |
| { | ||
| "name": "@cocreate/attributes", | ||
| "version": "1.7.27", | ||
| "version": "1.8.0", | ||
| "description": "Simple HTML5 & JavaScript component add, update & remove values in element's attributes from input, select or js api. Easily configured using HTML5 attributes and/or JavaScript API.", | ||
@@ -26,3 +26,3 @@ "keywords": [ | ||
| "start": "npx webpack --config webpack.config.js", | ||
| "build": "NODE_ENV=production npx webpack --config webpack.config.js", | ||
| "build": "npx webpack --mode=production --config webpack.config.js", | ||
| "dev": "npx webpack --config webpack.config.js --watch", | ||
@@ -61,8 +61,8 @@ "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\"" | ||
| "dependencies": { | ||
| "@cocreate/actions": "^1.8.31", | ||
| "@cocreate/crdt": "^1.18.27", | ||
| "@cocreate/message-client": "^1.3.28", | ||
| "@cocreate/observer": "^1.8.18", | ||
| "@cocreate/utils": "^1.21.15" | ||
| "@cocreate/actions": "^1.8.32", | ||
| "@cocreate/crdt": "^1.18.28", | ||
| "@cocreate/message-client": "^1.3.29", | ||
| "@cocreate/observer": "^1.8.19", | ||
| "@cocreate/utils": "^1.21.16" | ||
| } | ||
| } |
882
src/index.js
| /*global CoCreate, CustomEvent*/ | ||
| import { | ||
| elStore, | ||
| setStyleIfDif, | ||
| setAttributeIfDif, | ||
| setStyleClassIfDif, | ||
| getCoCreateStyle, | ||
| toCamelCase, | ||
| parseUnit | ||
| elStore, | ||
| setStyleIfDif, | ||
| setAttributeIfDif, | ||
| setStyleClassIfDif, | ||
| getCoCreateStyle, | ||
| toCamelCase, | ||
| parseUnit | ||
| } | ||
| from './common.js'; | ||
| from './common.js'; | ||
@@ -18,3 +18,3 @@ import observer from '@cocreate/observer'; | ||
| import action from '@cocreate/actions'; | ||
| import {cssPath} from '@cocreate/utils'; | ||
| import { cssPath } from '@cocreate/utils'; | ||
@@ -28,199 +28,199 @@ let cache = new elStore(); | ||
| function init() { | ||
| let inputs = document.querySelectorAll(`[attribute-target]`); | ||
| initElements(inputs); | ||
| initEvents(); | ||
| let inputs = document.querySelectorAll(`[attribute-selector]`); | ||
| initElements(inputs); | ||
| initEvents(); | ||
| } | ||
| function initElements(inputs, el) { | ||
| for(let input of inputs) | ||
| initElement(input, el); | ||
| for (let input of inputs) | ||
| initElement(input, el); | ||
| } | ||
| async function initElement(input, el) { | ||
| try { | ||
| // let value = getInputValue(input); | ||
| let selector = input.getAttribute("attribute-target"); | ||
| if (selector.trim().endsWith(';')){ | ||
| addClickEvent(input, selector); | ||
| } | ||
| else{ | ||
| if (input.hasAttribute('actions')) | ||
| return; | ||
| let { element, type, property, camelProperty } = await parseInput(input, el); | ||
| if (!element) return; | ||
| if (input.hasAttribute('attribute-trigger')) | ||
| attributeTrigger({input, element, type, property, camelProperty, isColl: false}); | ||
| else | ||
| updateInput({ input, element, type, property, camelProperty, isColl: true }); | ||
| // TODO: if input has a value updateElement, need to be catious with observer target update input may have previousvalue | ||
| if (!el && value) { | ||
| updateElement({ input, element, type, property, camelProperty, isColl: true }); | ||
| } | ||
| } | ||
| } | ||
| catch(err) { | ||
| try { | ||
| // let value = getInputValue(input); | ||
| } | ||
| let selector = input.getAttribute("attribute-selector"); | ||
| if (selector.trim().endsWith(';')) { | ||
| addClickEvent(input, selector); | ||
| } | ||
| else { | ||
| if (input.hasAttribute('actions')) | ||
| return; | ||
| let { element, type, property, camelProperty } = await parseInput(input, el); | ||
| if (!element) return; | ||
| if (input.hasAttribute('attribute-trigger')) | ||
| attributeTrigger({ input, element, type, property, camelProperty, isColl: false }); | ||
| else | ||
| updateInput({ input, element, type, property, camelProperty, isColl: true }); | ||
| // TODO: if input has a value updateElement, need to be catious with observer target update input may have previousvalue | ||
| if (!el && value) { | ||
| updateElement({ input, element, type, property, camelProperty, isColl: true }); | ||
| } | ||
| } | ||
| } | ||
| catch (err) { | ||
| } | ||
| } | ||
| const triggers = new Map(); | ||
| function attributeTrigger({input, element, type, property, camelProperty, isColl}){ | ||
| let trigger = input.getAttribute('attribute-trigger'); | ||
| if (trigger) { | ||
| if (trigger.includes('@')){ | ||
| trigger = trigger.replace('@',''); | ||
| var [from, to] = trigger.split('-'); | ||
| from = parseFloat(from); | ||
| to = parseFloat(to); | ||
| } | ||
| } | ||
| triggers.set(input, { element, type, property, camelProperty, isColl, from, to}); | ||
| let width = document.documentElement.clientWidth; | ||
| if (width >= from && width <= to) | ||
| updateElement({ input, element, type, property, camelProperty, isColl}); | ||
| const resizeObserver = new ResizeObserver((e) => { | ||
| // let element = e.target; | ||
| for (let [input, { element, type, property, camelProperty, isColl, from, to}] of triggers){ | ||
| let width = e[0].contentRect.width | ||
| if (width >= from && width <= to) | ||
| updateElement({ input, element, type, property, camelProperty, isColl}); | ||
| } | ||
| } | ||
| ); | ||
| resizeObserver.observe(document.documentElement); | ||
| function attributeTrigger({ input, element, type, property, camelProperty, isColl }) { | ||
| let trigger = input.getAttribute('attribute-trigger'); | ||
| if (trigger) { | ||
| if (trigger.includes('@')) { | ||
| trigger = trigger.replace('@', ''); | ||
| var [from, to] = trigger.split('-'); | ||
| from = parseFloat(from); | ||
| to = parseFloat(to); | ||
| } | ||
| } | ||
| triggers.set(input, { element, type, property, camelProperty, isColl, from, to }); | ||
| let width = document.documentElement.clientWidth; | ||
| if (width >= from && width <= to) | ||
| updateElement({ input, element, type, property, camelProperty, isColl }); | ||
| const resizeObserver = new ResizeObserver((e) => { | ||
| // let element = e.target; | ||
| for (let [input, { element, type, property, camelProperty, isColl, from, to }] of triggers) { | ||
| let width = e[0].contentRect.width | ||
| if (width >= from && width <= to) | ||
| updateElement({ input, element, type, property, camelProperty, isColl }); | ||
| } | ||
| } | ||
| ); | ||
| resizeObserver.observe(document.documentElement); | ||
| } | ||
| function addClickEvent(input, selector) { | ||
| let container; | ||
| let Document; | ||
| if (selector.indexOf(';') !== -1) { | ||
| let [frameSelector, target] = selector.split(';'); | ||
| let frame = document.querySelector(frameSelector); | ||
| Document = frame.contentDocument; | ||
| if (target && target != ' ' && frame){ | ||
| container = Document.querySelector(target); | ||
| } | ||
| else if (frame){ | ||
| container = Document; | ||
| } | ||
| } | ||
| else | ||
| container = document.querySelector(selector); | ||
| if (!containers.has(container)){ | ||
| let inputs = new Map(); | ||
| let containrMap = new Map(); | ||
| container.addEventListener('click', elClicked); | ||
| containrMap.set('inputs', inputs); | ||
| containrMap.set('activeElement', ''); | ||
| containers.set(container, containrMap); | ||
| } | ||
| if (input.classList.contains('color-picker')) | ||
| getPickr(container); | ||
| else { | ||
| let activeElement = containers.get(container).get('activeElement'); | ||
| // if (activeElement) | ||
| input.targetElement = activeElement; | ||
| containers.get(container).get('inputs').set(input, ''); | ||
| } | ||
| let container; | ||
| let Document; | ||
| if (selector.indexOf(';') !== -1) { | ||
| let [frameSelector, target] = selector.split(';'); | ||
| let frame = document.querySelector(frameSelector); | ||
| Document = frame.contentDocument; | ||
| if (target && target != ' ' && frame) { | ||
| container = Document.querySelector(target); | ||
| } | ||
| else if (frame) { | ||
| container = Document; | ||
| } | ||
| } | ||
| else | ||
| container = document.querySelector(selector); | ||
| if (!containers.has(container)) { | ||
| let inputs = new Map(); | ||
| let containrMap = new Map(); | ||
| container.addEventListener('click', elClicked); | ||
| containrMap.set('inputs', inputs); | ||
| containrMap.set('activeElement', ''); | ||
| containers.set(container, containrMap); | ||
| } | ||
| if (input.classList.contains('color-picker')) | ||
| getPickr(container); | ||
| else { | ||
| let activeElement = containers.get(container).get('activeElement'); | ||
| // if (activeElement) | ||
| input.targetElement = activeElement; | ||
| containers.get(container).get('inputs').set(input, ''); | ||
| } | ||
| } | ||
| function getPickr(container){ | ||
| let inputs = document.queryselectorAll('.pickr[attribute][attribute-target]'); | ||
| for(let input of inputs) | ||
| containers.get(container).get('inputs').set(input, ''); | ||
| function getPickr(container) { | ||
| let inputs = document.queryselectorAll('.pickr[attribute][attribute-selector]'); | ||
| for (let input of inputs) | ||
| containers.get(container).get('inputs').set(input, ''); | ||
| } | ||
| async function elClicked(e) { | ||
| let inputs = containers.get(e.currentTarget).get('inputs'); | ||
| let activeElement = containers.get(e.currentTarget).get('activeElement'); | ||
| if (activeElement == e.target) return; | ||
| initializing = e.target; | ||
| containers.get(e.currentTarget).set('activeElement', e.target); | ||
| let eid = e.target.getAttribute('eid'); | ||
| for (let [input] of inputs) { | ||
| input.targetElement = e.target; | ||
| if (!eid){ | ||
| if (e.target.id){ | ||
| eid = e.target.id; | ||
| } | ||
| else { | ||
| eid = uuid.generate(6); | ||
| let domTextEditor; | ||
| if (e.currentTarget.nodeName == '#document') { | ||
| let documentElement = e.currentTarget.documentElement; | ||
| if (documentElement.hasAttribute('contenteditable')) | ||
| domTextEditor = documentElement; | ||
| } | ||
| else if (e.currentTarget.hasAttribute('contenteditable')) | ||
| domTextEditor = e.currentTarget; | ||
| if (domTextEditor) | ||
| CoCreate.text.setAttribute({ domTextEditor, target: e.target, name: 'eid', value: eid }); | ||
| } | ||
| e.target.setAttribute('eid', eid); | ||
| } | ||
| input.value = ''; | ||
| let attribute; | ||
| if (input.id) | ||
| attribute = input.id; | ||
| else | ||
| attribute = input.getAttribute('attribute-property'); | ||
| if (!attribute) | ||
| attribute = input.getAttribute('attribute'); | ||
| input.setAttribute('name', attribute + '-' + eid); | ||
| let inputs = containers.get(e.currentTarget).get('inputs'); | ||
| let activeElement = containers.get(e.currentTarget).get('activeElement'); | ||
| if (activeElement == e.target) return; | ||
| initializing = e.target; | ||
| containers.get(e.currentTarget).set('activeElement', e.target); | ||
| let eid = e.target.getAttribute('eid'); | ||
| for (let [input] of inputs) { | ||
| input.targetElement = e.target; | ||
| if (!eid) { | ||
| if (e.target.id) { | ||
| eid = e.target.id; | ||
| } | ||
| else { | ||
| eid = uuid.generate(6); | ||
| let domTextEditor; | ||
| if (e.currentTarget.nodeName == '#document') { | ||
| let documentElement = e.currentTarget.documentElement; | ||
| if (documentElement.hasAttribute('contenteditable')) | ||
| domTextEditor = documentElement; | ||
| } | ||
| else if (e.currentTarget.hasAttribute('contenteditable')) | ||
| domTextEditor = e.currentTarget; | ||
| if (domTextEditor) | ||
| CoCreate.text.setAttribute({ domTextEditor, target: e.target, name: 'eid', value: eid }); | ||
| } | ||
| e.target.setAttribute('eid', eid); | ||
| } | ||
| input.value = ''; | ||
| let { element, type, property, camelProperty } = await parseInput(input, e.target); | ||
| if (element && !input.hasAttribute('actions')) { | ||
| updateInput({ input, element, type, property, camelProperty, isColl: false }); | ||
| } | ||
| } | ||
| initializing = ''; | ||
| let attribute; | ||
| if (input.id) | ||
| attribute = input.id; | ||
| else | ||
| attribute = input.getAttribute('attribute-property'); | ||
| if (!attribute) | ||
| attribute = input.getAttribute('attribute'); | ||
| input.setAttribute('name', attribute + '-' + eid); | ||
| let { element, type, property, camelProperty } = await parseInput(input, e.target); | ||
| if (element && !input.hasAttribute('actions')) { | ||
| updateInput({ input, element, type, property, camelProperty, isColl: false }); | ||
| } | ||
| } | ||
| initializing = ''; | ||
| } | ||
| async function parseInput(input, element) { | ||
| if (!element) { | ||
| let selector = input.getAttribute("attribute-target"); | ||
| if (!selector) return false; | ||
| if (selector.indexOf(';') !== -1) { | ||
| let [frameSelector, target] = selector.split(';'); | ||
| let frame = document.querySelector(frameSelector); | ||
| if (frame) { | ||
| let Document = frame.contentDocument; | ||
| element = Document.querySelector(target); | ||
| } | ||
| } | ||
| if (!element) { | ||
| let selector = input.getAttribute("attribute-selector"); | ||
| if (!selector) return false; | ||
| if (selector.indexOf(';') !== -1) { | ||
| let [frameSelector, target] = selector.split(';'); | ||
| let frame = document.querySelector(frameSelector); | ||
| if (frame) { | ||
| let Document = frame.contentDocument; | ||
| element = Document.querySelector(target); | ||
| } | ||
| } | ||
| else | ||
| element = initDocument.querySelector(selector); | ||
| input.targetElement = element; | ||
| } | ||
| else | ||
| element = initDocument.querySelector(selector); | ||
| input.targetElement = element; | ||
| } | ||
| if (!element) | ||
| return; | ||
| let type = input.getAttribute("attribute"); | ||
| if (!type) type = 'class'; | ||
| type = type.toLowerCase(); | ||
| if (!element) | ||
| return; | ||
| let camelProperty, property = input.getAttribute("attribute-property"); | ||
| if (property) { | ||
| camelProperty = toCamelCase(property); | ||
| property = property.toLowerCase(); | ||
| } | ||
| let type = input.getAttribute("attribute"); | ||
| if (!type) type = 'class'; | ||
| type = type.toLowerCase(); | ||
| return { element, type, property, camelProperty }; | ||
| let camelProperty, property = input.getAttribute("attribute-property"); | ||
| if (property) { | ||
| camelProperty = toCamelCase(property); | ||
| property = property.toLowerCase(); | ||
| } | ||
| return { element, type, property, camelProperty }; | ||
| } | ||
| function initEvents() { | ||
| initDocument.addEventListener("input", inputEvent); | ||
| observerElements(initDocument.defaultView); | ||
| initDocument.addEventListener("input", inputEvent); | ||
| observerElements(initDocument.defaultView); | ||
| } | ||
@@ -230,8 +230,8 @@ | ||
| if (e.detail && e.detail.skip === true) return; | ||
| let input = e.target; | ||
| if (!input.hasAttribute('attribute')) return; | ||
| let el = input.targetElement; | ||
| if (el && el == initializing) return; | ||
| let { element, type, property, camelProperty } = await parseInput(input, el); | ||
| updateElement({ input, element, type, property, camelProperty, isColl: true }); | ||
| let input = e.target; | ||
| if (!input.hasAttribute('attribute')) return; | ||
| let el = input.targetElement; | ||
| if (el && el == initializing) return; | ||
| let { element, type, property, camelProperty } = await parseInput(input, el); | ||
| updateElement({ input, element, type, property, camelProperty, isColl: true }); | ||
| } | ||
@@ -242,231 +242,231 @@ | ||
| function observerElements(initWindow) { | ||
| initWindow.parent.CoCreate.observer.init({ | ||
| name: 'ccAttribute', | ||
| observe: ["attributes"], // "characterData" | ||
| callback: (mutation) => { | ||
| if (mutation.attributeName != "attribute-unit") return; | ||
| let inputs = getInputFromElement(mutation.target, mutation.attributeName); | ||
| initElements(inputs, mutation.target); | ||
| }, | ||
| }); | ||
| observerInit.set(initWindow); | ||
| initWindow.parent.CoCreate.observer.init({ | ||
| name: 'ccAttribute', | ||
| observe: ["attributes"], // "characterData" | ||
| callback: (mutation) => { | ||
| if (mutation.attributeName != "attribute-unit") return; | ||
| let inputs = getInputFromElement(mutation.target, mutation.attributeName); | ||
| initElements(inputs, mutation.target); | ||
| }, | ||
| }); | ||
| observerInit.set(initWindow); | ||
| } | ||
| function getInputFromElement(element, attribute) { | ||
| let inputs = initDocument.querySelectorAll(`[attribute="${attribute}"]`); | ||
| let matching = []; | ||
| for (let input of inputs){ | ||
| let selector = input.getAttribute('attribute-target'); | ||
| if (selector && element.matches(selector)) | ||
| matching.push(input); | ||
| } | ||
| return matching; | ||
| let inputs = initDocument.querySelectorAll(`[attribute="${attribute}"]`); | ||
| let matching = []; | ||
| for (let input of inputs) { | ||
| let selector = input.getAttribute('attribute-selector'); | ||
| if (selector && element.matches(selector)) | ||
| matching.push(input); | ||
| } | ||
| return matching; | ||
| } | ||
| function removeZeros(str) { | ||
| let i = 0; | ||
| for(let len = str.length; i < len; i++) { | ||
| if (str[i] !== '0') | ||
| break; | ||
| } | ||
| return str.substring(i) || str && '0'; | ||
| let i = 0; | ||
| for (let len = str.length; i < len; i++) { | ||
| if (str[i] !== '0') | ||
| break; | ||
| } | ||
| return str.substring(i) || str && '0'; | ||
| } | ||
| async function updateElement({ input, element, collValue, isColl, unit, type, property, camelProperty, ...rest }) { | ||
| if (element && element == initializing) return; | ||
| if (!element) { | ||
| let e = {target: input}; | ||
| inputEvent(e); | ||
| return; | ||
| } | ||
| let inputValue = collValue != undefined ? collValue : getInputValue(input); | ||
| if (!inputValue) return; | ||
| if (element && element == initializing) return; | ||
| if (!element) { | ||
| let e = { target: input }; | ||
| inputEvent(e); | ||
| return; | ||
| } | ||
| let inputValue = collValue != undefined ? collValue : getInputValue(input); | ||
| if (!inputValue) return; | ||
| if (!Array.isArray(inputValue)) { | ||
| inputValue = unit && inputValue ? inputValue + unit : inputValue; | ||
| inputValue = removeZeros(inputValue); | ||
| } | ||
| else | ||
| inputValue.forEach(a => removeZeros(a.value)); | ||
| if (!Array.isArray(inputValue)) { | ||
| inputValue = unit && inputValue ? inputValue + unit : inputValue; | ||
| inputValue = removeZeros(inputValue); | ||
| } | ||
| else | ||
| inputValue.forEach(a => removeZeros(a.value)); | ||
| let hasUpdated = updateElementValue({ ...rest, type, property, camelProperty, input, element, inputValue, isColl, hasCollValue: collValue != undefined }); | ||
| let hasUpdated = updateElementValue({ ...rest, type, property, camelProperty, input, element, inputValue, isColl, hasCollValue: collValue != undefined }); | ||
| cache.reset(element); | ||
| cache.reset(element); | ||
| let types = ['attribute', 'classstyle', 'style', 'innerText']; | ||
| if (!types.includes(type)) { | ||
| property = type; | ||
| type = 'attribute'; | ||
| } | ||
| let types = ['attribute', 'classstyle', 'style', 'innerText']; | ||
| if (!types.includes(type)) { | ||
| property = type; | ||
| type = 'attribute'; | ||
| } | ||
| let value; | ||
| let item; | ||
| if (Array.isArray(inputValue)) { | ||
| if (!inputValue.length) return; | ||
| if (property === 'class') | ||
| value = inputValue.map(o => o.value).join(' '); | ||
| else | ||
| try { | ||
| item = inputValue[0]; | ||
| value = item.value; | ||
| } catch (err) { | ||
| console.error(err); | ||
| } | ||
| } | ||
| else | ||
| value = inputValue; | ||
| if (hasUpdated && isColl){ | ||
| let domTextEditor = element.closest('[contenteditable]'); | ||
| if (domTextEditor && CoCreate.text) { | ||
| try { | ||
| let target = element; | ||
| unit = input.getAttribute('attribute-unit') || ''; | ||
| switch(type) { | ||
| case 'attribute': | ||
| CoCreate.text.setAttribute({ domTextEditor, target, name: property, value }); | ||
| break; | ||
| case 'classstyle': | ||
| CoCreate.text.setClass({ domTextEditor, target, value: `${property}:${value}${unit}` }); | ||
| break; | ||
| case 'style': | ||
| CoCreate.text.setStyle({ domTextEditor, target, property, value: `${value}${unit}`}); | ||
| break; | ||
| case 'innerText': | ||
| CoCreate.text.setInnerText({ domTextEditor, target, value }); | ||
| break; | ||
| case 'class': | ||
| CoCreate.text.setClass({ domTextEditor, target, value }); | ||
| break; | ||
| default: | ||
| console.error('ccAttribute to domText no action'); | ||
| } | ||
| } | ||
| catch(err) { console.log('domText: dom-to-text: ' + err) } | ||
| } | ||
| } | ||
| hasUpdated && isColl && initDocument.dispatchEvent(new CustomEvent('attributes', { | ||
| detail: { | ||
| value, | ||
| unit: input.getAttribute('attribute-unit'), | ||
| input, | ||
| element, | ||
| type, | ||
| property, | ||
| ...rest, | ||
| } | ||
| })); | ||
| let value; | ||
| let item; | ||
| if (Array.isArray(inputValue)) { | ||
| if (!inputValue.length) return; | ||
| if (property === 'class') | ||
| value = inputValue.map(o => o.value).join(' '); | ||
| else | ||
| try { | ||
| item = inputValue[0]; | ||
| value = item.value; | ||
| } catch (err) { | ||
| console.error(err); | ||
| } | ||
| } | ||
| else | ||
| value = inputValue; | ||
| if (hasUpdated && isColl) { | ||
| let domTextEditor = element.closest('[contenteditable]'); | ||
| if (domTextEditor && CoCreate.text) { | ||
| try { | ||
| let target = element; | ||
| unit = input.getAttribute('attribute-unit') || ''; | ||
| switch (type) { | ||
| case 'attribute': | ||
| CoCreate.text.setAttribute({ domTextEditor, target, name: property, value }); | ||
| break; | ||
| case 'classstyle': | ||
| CoCreate.text.setClass({ domTextEditor, target, value: `${property}:${value}${unit}` }); | ||
| break; | ||
| case 'style': | ||
| CoCreate.text.setStyle({ domTextEditor, target, property, value: `${value}${unit}` }); | ||
| break; | ||
| case 'innerText': | ||
| CoCreate.text.setInnerText({ domTextEditor, target, value }); | ||
| break; | ||
| case 'class': | ||
| CoCreate.text.setClass({ domTextEditor, target, value }); | ||
| break; | ||
| default: | ||
| console.error('ccAttribute to domText no action'); | ||
| } | ||
| } | ||
| catch (err) { console.log('domText: dom-to-text: ' + err) } | ||
| } | ||
| } | ||
| hasUpdated && isColl && initDocument.dispatchEvent(new CustomEvent('attributes', { | ||
| detail: { | ||
| value, | ||
| unit: input.getAttribute('attribute-unit'), | ||
| input, | ||
| element, | ||
| type, | ||
| property, | ||
| ...rest, | ||
| } | ||
| })); | ||
| } | ||
| function updateElementValue({ type, property, camelProperty, input, element, inputValue, isColl, hasCollValue }) { | ||
| let domTextEditor = element.closest('[contenteditable]'); | ||
| if (isColl && domTextEditor && CoCreate.text) return true; | ||
| let computedStyles, value, unit; | ||
| switch(type) { | ||
| let domTextEditor = element.closest('[contenteditable]'); | ||
| if (isColl && domTextEditor && CoCreate.text) return true; | ||
| let computedStyles, value, unit; | ||
| switch (type) { | ||
| case 'classstyle': | ||
| unit = (input.getAttribute('attribute-unit') || ''); | ||
| inputValue = Array.isArray(inputValue) ? inputValue.value : inputValue; | ||
| // TODO: process the inputValue array to return a string array of values | ||
| // if (Array.isArray(inputValue)){ | ||
| // inputValue = ; | ||
| // } | ||
| value = inputValue && !hasCollValue ? inputValue + unit : inputValue; | ||
| value = value || ''; | ||
| computedStyles = getRealStaticCompStyle(element); | ||
| return setStyleClassIfDif (element, { | ||
| property, | ||
| camelProperty, | ||
| value, | ||
| computedStyles | ||
| }); | ||
| case 'classstyle': | ||
| unit = (input.getAttribute('attribute-unit') || ''); | ||
| inputValue = Array.isArray(inputValue) ? inputValue.value : inputValue; | ||
| // TODO: process the inputValue array to return a string array of values | ||
| // if (Array.isArray(inputValue)){ | ||
| // inputValue = ; | ||
| // } | ||
| value = inputValue && !hasCollValue ? inputValue + unit : inputValue; | ||
| value = value || ''; | ||
| computedStyles = getRealStaticCompStyle(element); | ||
| return setStyleClassIfDif(element, { | ||
| property, | ||
| camelProperty, | ||
| value, | ||
| computedStyles | ||
| }); | ||
| case 'style': | ||
| unit = (input.getAttribute('attribute-unit') || ''); | ||
| inputValue = Array.isArray(inputValue) ? inputValue.value : inputValue; | ||
| value = inputValue && !hasCollValue ? inputValue + unit : inputValue; | ||
| value = value || ''; | ||
| computedStyles = getRealStaticCompStyle(element); | ||
| return setStyleIfDif.call(element, { property, camelProperty, value, computedStyles }); | ||
| case 'style': | ||
| unit = (input.getAttribute('attribute-unit') || ''); | ||
| inputValue = Array.isArray(inputValue) ? inputValue.value : inputValue; | ||
| value = inputValue && !hasCollValue ? inputValue + unit : inputValue; | ||
| value = value || ''; | ||
| computedStyles = getRealStaticCompStyle(element); | ||
| return setStyleIfDif.call(element, { property, camelProperty, value, computedStyles }); | ||
| case 'innerText': | ||
| if (element.innerText != inputValue) { | ||
| element.innerText = inputValue; | ||
| return true; | ||
| } | ||
| else return false; | ||
| // default is setAttribute | ||
| default: | ||
| if (typeof inputValue == 'string') { | ||
| case 'innerText': | ||
| if (element.innerText != inputValue) { | ||
| element.innerText = inputValue; | ||
| return true; | ||
| } | ||
| else return false; | ||
| // default is setAttribute | ||
| default: | ||
| if (typeof inputValue == 'string') { | ||
| return setAttributeIfDif.call(element, type, inputValue); | ||
| } | ||
| else { | ||
| if (!inputValue.length) | ||
| return setAttributeIfDif.call(element, type, ''); | ||
| else if (type === "class") { | ||
| value = inputValue.map(o => o.value).join(' '); | ||
| return setAttributeIfDif.call(element, type, value); | ||
| } | ||
| else | ||
| for(let inputSValue of inputValue) { | ||
| if (inputSValue.checked) { | ||
| return setAttributeIfDif.call(element, type, inputSValue.value); | ||
| return setAttributeIfDif.call(element, type, inputValue); | ||
| } | ||
| else { | ||
| if (!inputValue.length) | ||
| return setAttributeIfDif.call(element, type, ''); | ||
| else if (type === "class") { | ||
| value = inputValue.map(o => o.value).join(' '); | ||
| return setAttributeIfDif.call(element, type, value); | ||
| } | ||
| else | ||
| for (let inputSValue of inputValue) { | ||
| if (inputSValue.checked) { | ||
| return setAttributeIfDif.call(element, type, inputSValue.value); | ||
| } | ||
| else if (element.hasAttribute(type)) { | ||
| element.removeAttribute(type); | ||
| return true; | ||
| } | ||
| } | ||
| else if (element.hasAttribute(type)) { | ||
| element.removeAttribute(type); | ||
| return true; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| break; | ||
| } | ||
| break; | ||
| } | ||
| } | ||
| function updateInput({ type, property, camelProperty, element, input }) { | ||
| let computedStyles, value, value2, styleValue, unit; | ||
| if (!input) return console.error('CoCreate Attributes: input not found'); | ||
| switch(type) { | ||
| case 'class': | ||
| value = Array.from(element.classList); | ||
| break; | ||
| case 'classstyle': | ||
| let ccStyle = getCoCreateStyle(element.classList); | ||
| if (ccStyle[camelProperty]) | ||
| value2 = ccStyle[camelProperty]; | ||
| else { | ||
| computedStyles = getRealStaticCompStyle(element); | ||
| value2 = computedStyles[camelProperty]; | ||
| } | ||
| if (!value2) { | ||
| return console.warn(`"${property}" can not be found in style object`); | ||
| } | ||
| ([styleValue, unit] = parseUnit(value2)); | ||
| value = styleValue; | ||
| setAttributeIfDif.call(input, "attribute-unit", unit); | ||
| break; | ||
| case 'style': | ||
| computedStyles = getRealStaticCompStyle(element); | ||
| value2 = computedStyles[camelProperty]; | ||
| if (!value2) { | ||
| return console.warn(`"${property}" can not be found in style object`); | ||
| } | ||
| ([styleValue, unit] = parseUnit(value2)); | ||
| value = styleValue; | ||
| setAttributeIfDif.call(input, "attribute-unit", unit); | ||
| break; | ||
| case 'innerText': | ||
| value = element.innerText; | ||
| break; | ||
| default: | ||
| value = element.getAttribute(type); | ||
| break; | ||
| } | ||
| let computedStyles, value, value2, styleValue, unit; | ||
| if (!input) return console.error('CoCreate Attributes: input not found'); | ||
| switch (type) { | ||
| case 'class': | ||
| value = Array.from(element.classList); | ||
| break; | ||
| case 'classstyle': | ||
| let ccStyle = getCoCreateStyle(element.classList); | ||
| if (ccStyle[camelProperty]) | ||
| value2 = ccStyle[camelProperty]; | ||
| else { | ||
| computedStyles = getRealStaticCompStyle(element); | ||
| value2 = computedStyles[camelProperty]; | ||
| } | ||
| if (!value2) { | ||
| return console.warn(`"${property}" can not be found in style object`); | ||
| } | ||
| ([styleValue, unit] = parseUnit(value2)); | ||
| value = styleValue; | ||
| setAttributeIfDif.call(input, "attribute-unit", unit); | ||
| break; | ||
| case 'style': | ||
| computedStyles = getRealStaticCompStyle(element); | ||
| value2 = computedStyles[camelProperty]; | ||
| if (!value2) { | ||
| return console.warn(`"${property}" can not be found in style object`); | ||
| } | ||
| ([styleValue, unit] = parseUnit(value2)); | ||
| value = styleValue; | ||
| setAttributeIfDif.call(input, "attribute-unit", unit); | ||
| break; | ||
| case 'innerText': | ||
| value = element.innerText; | ||
| break; | ||
| default: | ||
| value = element.getAttribute(type); | ||
| break; | ||
| } | ||
| setInputValue(input, value != undefined ? value : ''); | ||
| setInputValue(input, value != undefined ? value : ''); | ||
@@ -476,41 +476,41 @@ } | ||
| function setInputValue(input, value) { | ||
| if (input.type == 'file') | ||
| return; | ||
| if (input.getAttribute('crdt') == 'true') | ||
| crdt.replaceText({ | ||
| collection: input.getAttribute('collection'), | ||
| document_id: input.getAttribute('document_id'), | ||
| name: input.getAttribute('name'), | ||
| value: value + '', | ||
| save: input.getAttribute('save'), | ||
| crud: input.getAttribute('crud') | ||
| }); | ||
| else | ||
| input.setValue(value); | ||
| if (input.type == 'file') | ||
| return; | ||
| if (input.getAttribute('crdt') == 'true') | ||
| crdt.replaceText({ | ||
| array: input.getAttribute('array'), | ||
| object: input.getAttribute('object'), | ||
| name: input.getAttribute('name'), | ||
| value: value + '', | ||
| save: input.getAttribute('save'), | ||
| crud: input.getAttribute('crud') | ||
| }); | ||
| else | ||
| input.setValue(value); | ||
| } | ||
| function getInputValue(input) { | ||
| if (!input) return; | ||
| let value = input.getValue(); | ||
| if (value) return value; | ||
| return false; | ||
| if (!input) return; | ||
| let value = input.getValue(); | ||
| if (value) return value; | ||
| return false; | ||
| } | ||
| function getRealStaticCompStyle(element) { | ||
| if (cache.get(element, 'valid')) | ||
| return cache.get(element, 'computedStyles'); | ||
| setTimeout(() => { | ||
| cache.reset(element); | ||
| }, 5000); | ||
| let oldDispaly = element.style.display; | ||
| element.style.display = "none"; | ||
| let computedStylesLive = window.getComputedStyle(element); | ||
| let computedStyles = Object.assign({}, computedStylesLive); | ||
| computedStyles.display = oldDispaly; | ||
| if (cache.get(element, 'valid')) | ||
| return cache.get(element, 'computedStyles'); | ||
| setTimeout(() => { | ||
| cache.reset(element); | ||
| }, 5000); | ||
| let oldDispaly = element.style.display; | ||
| element.style.display = "none"; | ||
| let computedStylesLive = window.getComputedStyle(element); | ||
| let computedStyles = Object.assign({}, computedStylesLive); | ||
| computedStyles.display = oldDispaly; | ||
| element.style.display = oldDispaly; | ||
| if (element.getAttribute("style") == "") element.removeAttribute("style"); | ||
| element.removeAttribute('no-observe'); | ||
| cache.spread(element, { computedStyles, valid: true }); | ||
| return computedStyles; | ||
| element.style.display = oldDispaly; | ||
| if (element.getAttribute("style") == "") element.removeAttribute("style"); | ||
| element.removeAttribute('no-observe'); | ||
| cache.spread(element, { computedStyles, valid: true }); | ||
| return computedStyles; | ||
| } | ||
@@ -522,40 +522,40 @@ | ||
| observer.init({ | ||
| name: "ccAttribute", | ||
| observe: ["childList"], | ||
| target: '[attribute]', | ||
| callback: function(mutation) { | ||
| initElements(mutation.addedNodes); | ||
| } | ||
| name: "ccAttribute", | ||
| observe: ["childList"], | ||
| target: '[attribute]', | ||
| callback: function (mutation) { | ||
| initElements(mutation.addedNodes); | ||
| } | ||
| }); | ||
| observer.init({ | ||
| name: "ccAttribute", | ||
| observe: ["attributes"], | ||
| attributeName: ["attribute-target"], | ||
| callback: function(mutation) { | ||
| initElement(mutation.target); | ||
| } | ||
| name: "ccAttribute", | ||
| observe: ["attributes"], | ||
| attributeName: ["attribute-selector"], | ||
| callback: function (mutation) { | ||
| initElement(mutation.target); | ||
| } | ||
| }); | ||
| observer.init({ | ||
| name: "ccAttribute", | ||
| observe: ["attributes"], | ||
| // attributeName: ["attribute", "attribute-property", "attribute-unit", "value"], | ||
| attributeName: ["attribute-unit"], | ||
| callback: function(mutation) { | ||
| updateElement({ input: mutation.target, isColl: true }); | ||
| if (mutation.attributeName != "attribute-unit") return; | ||
| let inputs = getInputFromElement(mutation.target, mutation.attributeName); | ||
| initElements(inputs, mutation.target); | ||
| } | ||
| name: "ccAttribute", | ||
| observe: ["attributes"], | ||
| // attributeName: ["attribute", "attribute-property", "attribute-unit", "value"], | ||
| attributeName: ["attribute-unit"], | ||
| callback: function (mutation) { | ||
| updateElement({ input: mutation.target, isColl: true }); | ||
| if (mutation.attributeName != "attribute-unit") return; | ||
| let inputs = getInputFromElement(mutation.target, mutation.attributeName); | ||
| initElements(inputs, mutation.target); | ||
| } | ||
| }); | ||
| action.init({ | ||
| name: "attributes", | ||
| endEvent: "attributes", | ||
| callback: (btn, data) => { | ||
| updateElement({ input: btn, isColl: true }); | ||
| } | ||
| name: "attributes", | ||
| endEvent: "attributes", | ||
| callback: (data) => { | ||
| updateElement({ input: data.element, isColl: true }); | ||
| } | ||
| }); | ||
| export default { init }; |
| const path = require("path") | ||
| const TerserPlugin = require("terser-webpack-plugin") | ||
| const MiniCssExtractPlugin = require("mini-css-extract-plugin") | ||
| let isProduction = process.env.NODE_ENV === "production" | ||
| const { CleanWebpackPlugin } = require("clean-webpack-plugin") | ||
| module.exports = { | ||
| entry: { | ||
| "CoCreate-attributes": "./src/index.js", | ||
| }, | ||
| output: { | ||
| path: path.resolve(__dirname, "dist"), | ||
| filename: isProduction ? "[name].min.js" : "[name].js", | ||
| libraryTarget: "umd", | ||
| libraryExport: "default", | ||
| library: ["CoCreate", "attributes"], | ||
| globalObject: "this", | ||
| }, | ||
| module.exports = (env, argv) => { | ||
| let isProduction = false | ||
| if (argv.mode === 'production') | ||
| isProduction = true | ||
| plugins: [ | ||
| new CleanWebpackPlugin(), | ||
| new MiniCssExtractPlugin({ | ||
| filename: "[name].css", | ||
| }), | ||
| ], | ||
| // Default mode for Webpack is production. | ||
| // Depending on mode Webpack will apply different things | ||
| // on final bundle. For now we don't need production's JavaScript | ||
| // minifying and other thing so let's set mode to development | ||
| mode: isProduction ? "production" : "development", | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /.js$/, | ||
| exclude: /(node_modules)/, | ||
| use: { | ||
| loader: "babel-loader", | ||
| options: { | ||
| plugins: ["@babel/plugin-transform-modules-commonjs"], | ||
| }, | ||
| const config = { | ||
| entry: { | ||
| "CoCreate-attributes": "./src/index.js", | ||
| }, | ||
| }, | ||
| { | ||
| test: /.css$/i, | ||
| use: [ | ||
| { loader: "style-loader", options: { injectType: "linkTag" } }, | ||
| "file-loader", | ||
| output: { | ||
| path: path.resolve(__dirname, "dist"), | ||
| filename: isProduction ? "[name].min.js" : "[name].js", | ||
| libraryTarget: "umd", | ||
| libraryExport: "default", | ||
| library: ["CoCreate", "attributes"], | ||
| globalObject: "this", | ||
| }, | ||
| plugins: [ | ||
| new CleanWebpackPlugin(), | ||
| new MiniCssExtractPlugin({ | ||
| filename: "[name].css", | ||
| }), | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| // Default mode for Webpack is production. | ||
| // Depending on mode Webpack will apply different things | ||
| // on final bundle. For now we don't need production's JavaScript | ||
| // minifying and other thing so let's set mode to development | ||
| mode: isProduction ? "production" : "development", | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /.js$/, | ||
| exclude: /(node_modules)/, | ||
| use: { | ||
| loader: "babel-loader", | ||
| options: { | ||
| plugins: ["@babel/plugin-transform-modules-commonjs"], | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| test: /.css$/i, | ||
| use: [ | ||
| { loader: "style-loader", options: { injectType: "linkTag" } }, | ||
| "file-loader", | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| // add source map | ||
| ...(isProduction ? {} : { devtool: "eval-source-map" }), | ||
| // add source map | ||
| ...(isProduction ? {} : { devtool: "eval-source-map" }), | ||
| optimization: { | ||
| minimize: true, | ||
| minimizer: [ | ||
| new TerserPlugin({ | ||
| extractComments: true, | ||
| // cache: true, | ||
| parallel: true, | ||
| // sourceMap: true, // Must be set to true if using source-maps in production | ||
| terserOptions: { | ||
| // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions | ||
| // extractComments: 'all', | ||
| compress: { | ||
| drop_console: true, | ||
| }, | ||
| optimization: { | ||
| minimize: true, | ||
| minimizer: [ | ||
| new TerserPlugin({ | ||
| extractComments: true, | ||
| // cache: true, | ||
| parallel: true, | ||
| // sourceMap: true, // Must be set to true if using source-maps in production | ||
| terserOptions: { | ||
| // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions | ||
| // extractComments: 'all', | ||
| compress: { | ||
| drop_console: true, | ||
| }, | ||
| }, | ||
| }), | ||
| ], | ||
| splitChunks: { | ||
| chunks: "all", | ||
| minSize: 200, | ||
| // maxSize: 99999, | ||
| //minChunks: 1, | ||
| cacheGroups: { | ||
| defaultVendors: false, | ||
| }, | ||
| }, | ||
| }, | ||
| }), | ||
| ], | ||
| splitChunks: { | ||
| chunks: "all", | ||
| minSize: 200, | ||
| // maxSize: 99999, | ||
| //minChunks: 1, | ||
| cacheGroups: { | ||
| defaultVendors: false, | ||
| }, | ||
| }, | ||
| }, | ||
| } | ||
| } | ||
| return config | ||
| } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.44%
142049
- Lines of code
- increased by0.53%
762
- Number of low supply chain risk alerts
- decreased by-100%
0
Dependency changes
Updated@cocreate/actions@^1.8.32
Updated@cocreate/crdt@^1.18.28
Updated@cocreate/observer@^1.8.19
Updated@cocreate/utils@^1.21.16