Skip to content

Commit 1f4edba

Browse files
frankpaganfrankpagan
committed
fix: setvalue
1 parent e2a37c9 commit 1f4edba

2 files changed

Lines changed: 96 additions & 99 deletions

File tree

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h1 id="new" class="background:green">testing</h1>
2626

2727
<input class="floating-label z-index:0 text_color" placeholder="background" attribute="style" attribute-property="background" attribute-target="#new" active>
2828

29-
<a attribute="src" attribute-target="#new" active>click</a>
29+
<a actions="attributes" attribute="src" attribute-target="#new" value="woohoo" active>click</a>
3030

3131

3232
<p>Set Attribute:</p>

‎src/index.js‎

Lines changed: 95 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ from './common.js';
1616

1717
import observer from '@cocreate/observer';
1818
import crdt from '@cocreate/crdt';
19-
import pickr from '@cocreate/pickr';
2019
import message from '@cocreate/message-client';
20+
import action from '@cocreate/action';
21+
import pickr from '@cocreate/pickr';
2122
import { containerSelector as ccSelectSelector } from '@cocreate/select/src/config';
2223

2324
let cache = new elStore();
24-
let types = ['attribute', 'classstyle', 'style', 'innerText'];
2525

2626
let initDocument = document;
2727

@@ -150,14 +150,89 @@ function observerElements(initWindow) {
150150
observerInit.set(initWindow);
151151
}
152152

153-
154153
function getInputFromElement(element) {
155154
let elId = element.getAttribute('element_id') || element.id && '#' + element.id;
156155
if(elId)
157156
return initDocument.querySelectorAll(`[attribute-target="${elId}"]`);
158157
return [];
159158
}
160159

160+
function removeZeros(str) {
161+
let i = 0;
162+
for(let len = str.length; i < len; i++) {
163+
if(str[i] !== '0')
164+
break;
165+
}
166+
return str.substr(i) || str && '0';
167+
}
168+
169+
async function updateElement({ input, element, collValue, isColl, unit, type, property, camelProperty, ...rest }) {
170+
if (!element) {
171+
let parsed = await parseInput(input);
172+
element = parsed.element;
173+
type = parsed.type;
174+
property = parsed.property;
175+
camelProperty = parsed.camelProperty;
176+
}
177+
let inputValue = collValue != undefined ? collValue : getInputValue(input);
178+
if(!inputValue) return;
179+
180+
if(!Array.isArray(inputValue)) {
181+
inputValue = unit && inputValue ? inputValue + unit : inputValue;
182+
inputValue = removeZeros(inputValue);
183+
}
184+
else
185+
inputValue.forEach(a => removeZeros(a.value));
186+
187+
let hasUpdated = updateElementValue({ ...rest, type, property, camelProperty, input, element, inputValue, hasCollValue: collValue != undefined });
188+
189+
cache.reset(element);
190+
191+
hasUpdated &&
192+
isColl &&
193+
collaborate({
194+
value: inputValue,
195+
unit: input.getAttribute('attribute-unit'),
196+
input,
197+
element,
198+
type,
199+
property,
200+
...rest,
201+
202+
});
203+
204+
let types = ['attribute', 'classstyle', 'style', 'innerText'];
205+
if(!types.includes(type)) {
206+
property = type;
207+
type = 'attribute';
208+
}
209+
210+
let value;
211+
if(Array.isArray(inputValue)) {
212+
if(property === 'class')
213+
value = inputValue.map(o => o.value).join(' ');
214+
else
215+
value = inputValue[0].value;
216+
}
217+
else
218+
value = inputValue;
219+
220+
221+
hasUpdated &&
222+
isColl &&
223+
initDocument.dispatchEvent(new CustomEvent('attributes', {
224+
detail: {
225+
value,
226+
unit: input.getAttribute('attribute-unit'),
227+
input,
228+
element,
229+
type,
230+
property,
231+
...rest,
232+
}
233+
}));
234+
235+
}
161236

162237
function updateElementValue({ type, property, camelProperty, input, element, inputValue, hasCollValue }) {
163238
let computedStyles, value, removeValue, hasUpdated, unit, parsedInt;
@@ -180,7 +255,6 @@ function updateElementValue({ type, property, camelProperty, input, element, inp
180255
computedStyles
181256
})
182257

183-
184258
case 'style':
185259
unit = (input.getAttribute('attribute-unit') || '');
186260
inputValue = Array.isArray(inputValue) ? inputValue.value : inputValue;
@@ -224,82 +298,10 @@ function updateElementValue({ type, property, camelProperty, input, element, inp
224298
}
225299

226300
break;
227-
228301
}
229-
230-
231302
}
232303

233304

234-
function removeZeros(str) {
235-
let i = 0;
236-
for(let len = str.length; i < len; i++) {
237-
if(str[i] !== '0')
238-
break;
239-
}
240-
return str.substr(i) || str && '0';
241-
}
242-
243-
function updateElement({ input, element, collValue, isColl, unit, type, property, ...rest }) {
244-
245-
let inputValue = collValue != undefined ? collValue : getInputValue(input);
246-
if(!inputValue) return;
247-
248-
if(!Array.isArray(inputValue)) {
249-
inputValue = unit && inputValue ? inputValue + unit : inputValue;
250-
inputValue = removeZeros(inputValue);
251-
}
252-
else
253-
inputValue.forEach(a => removeZeros(a.value));
254-
255-
let hasUpdated = updateElementValue({ ...rest, type, property, input, element, inputValue, hasCollValue: collValue != undefined });
256-
257-
cache.reset(element);
258-
259-
hasUpdated &&
260-
isColl &&
261-
collaborate({
262-
value: inputValue,
263-
unit: input.getAttribute('attribute-unit'),
264-
input,
265-
element,
266-
type,
267-
property,
268-
...rest,
269-
270-
});
271-
if(!types.includes(type)) {
272-
property = type;
273-
type = 'attribute';
274-
}
275-
276-
let value;
277-
if(Array.isArray(inputValue)) {
278-
if(property === 'class')
279-
value = inputValue.map(o => o.value).join(' ');
280-
else
281-
value = inputValue[0].value;
282-
}
283-
else
284-
value = inputValue;
285-
286-
287-
hasUpdated &&
288-
isColl &&
289-
initDocument.dispatchEvent(new CustomEvent('attributes', {
290-
detail: {
291-
value,
292-
unit: input.getAttribute('attribute-unit'),
293-
input,
294-
element,
295-
type,
296-
property,
297-
...rest,
298-
}
299-
}));
300-
301-
}
302-
303305
function updateInput({ type, property, camelProperty, element, input }) {
304306
let computedStyles, value, value2, styleValue, unit;
305307
if(!input) return console.error('CoCreate Attributes: input not found/dev')
@@ -316,7 +318,7 @@ function updateInput({ type, property, camelProperty, element, input }) {
316318
value2 = computedStyles[camelProperty];
317319
}
318320
if(!value2) {
319-
return console.warn(`"${property}" can not be found in style object`)
321+
return console.warn(`"${property}" can not be found in style object`);
320322
}
321323
([styleValue, unit] = parseUnit(value2));
322324
value = styleValue;
@@ -326,7 +328,7 @@ function updateInput({ type, property, camelProperty, element, input }) {
326328
computedStyles = getRealStaticCompStyle(element);
327329
value2 = computedStyles[camelProperty];
328330
if(!value2) {
329-
return console.warn(`"${property}" can not be found in style object`)
331+
return console.warn(`"${property}" can not be found in style object`);
330332
}
331333
([styleValue, unit] = parseUnit(value2));
332334
value = styleValue;
@@ -404,10 +406,7 @@ function setInputValue(input, value) {
404406
else
405407
input.value = value + '';
406408
}
407-
};
408-
409-
410-
409+
}
411410

412411
function packMultiValue({
413412
inputs,
@@ -417,8 +416,8 @@ function packMultiValue({
417416
}) {
418417
let value = [];
419418
Array.from(inputs).forEach(input => {
420-
value.push({ checked: forceState || input[stateProperty], value: input[valueProperty] || input.getAttribute(valueProperty) })
421-
})
419+
value.push({ checked: forceState || input[stateProperty], value: input[valueProperty] || input.getAttribute(valueProperty) });
420+
});
422421
return value;
423422
}
424423

@@ -464,9 +463,9 @@ function getInputValue(input) {
464463
let pickrIns = pickr.refs.get(input);
465464
return pickrIns ? pickrIns.getColor() : '';
466465

467-
468-
469466
default:
467+
let value = input.getAttribute('value');
468+
if (value) return value;
470469
return false;
471470
}
472471
}
@@ -519,17 +518,6 @@ async function complexSelector(comSelector, callback) {
519518
return callback(canvas.contentWindow.document, selector);
520519
}
521520

522-
async function attributeUnit(input) {
523-
try {
524-
let { element, type, property, camelProperty } = await parseInput(input);
525-
if(!element) return;
526-
updateElement({ input, element, type, property, camelProperty, isColl: true });
527-
}
528-
catch(err) {
529-
530-
}
531-
}
532-
533521
init();
534522

535523
observer.init({
@@ -547,8 +535,17 @@ observer.init({
547535
// attributeName: ["attribute", "attribute-property", "attribute-unit", "value"],
548536
attributeName: ["attribute-unit"],
549537
callback: function(mutation) {
550-
attributeUnit(mutation.target);
538+
updateElement({ input: mutation.target, isColl: true });
551539
}
552540
});
553541

542+
action.init({
543+
action: "attributes",
544+
endEvent: "attributes",
545+
callback: (btn, data) => {
546+
updateElement({ input: btn, isColl: true });
547+
}
548+
});
549+
550+
554551
export default { init };

0 commit comments

Comments
 (0)