Skip to content

Commit 607edee

Browse files
frankpaganfrankpagan
committed
feat: update template_id to render-selector attribute. update filter attributes to filter selector-attributes
1 parent 1dc9b4d commit 607edee

File tree

7 files changed

+48
-78
lines changed

7 files changed

+48
-78
lines changed

‎demo/fetch.string.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
}
1818
</style>
1919
<body>
20-
<cocreate-select name="current_org" template_id="abc1">
21-
<selected template="abc1" render="data">
20+
<cocreate-select name="current_org">
21+
<selected template>
2222
<cc-option class="template" value="{{document.current_org}}">
2323
<h3>{{document.current_org}}</h3>
2424
</cc-option>

‎demo/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
<link rel="manifest" href="/manifest.webmanifest" />
1313
</head>
1414
<body>
15-
<div template_id="abc1">
15+
<div template="abc1">
1616
<div
1717
class="template card {{render2.collection}} card margin:10px firstname"
1818
value="{{render2.data._id}}"
19-
template_id="abc1"
19+
template
2020
render="render2.data">
2121
<div
2222
class="card-body padding:15px"

‎demo/render.array.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</style>
1919

2020
<body>
21-
<div template="abc1" render="document">
21+
<div template>
2222
<h3>{{document[0]._id}}</h3>
2323

2424
<div render="document.current">

‎demo/render.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</style>
1919

2020
<body>
21-
<div template="abc1" render>
21+
<div template render>
2222
<h3>{{collection}}</h3>
2323
<h3>{{document._id}}</h3>
2424
</div>

‎demo/render.object.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818
</style>
1919
<body>
20-
<div template="abc1">
20+
<div template>
2121
<!-- <div>{{data}}</div>
2222
<h1> {{document.collection}} {{document._id}}</h1> -->
2323
<div class="template" render="" render-as="one">

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ <h4 class="margin-top:20px padding:5px_0px">
200200

201201
<div class="margin-top:10px">
202202
<pre><code class="language-html">
203-
&lt;div template_id=&quot;abc1&quot; fetch-collection=&quot;render_test&quot;&gt;
203+
&lt;div template_id=&quot;abc1&quot; collection=&quot;render_test&quot;&gt;
204204
&lt;div class=&quot;template card {{render2.collection}} card margin:10px firstname&quot;
205205
value=&quot;{{render2.data._id}}&quot;
206206
template_id=&quot;abc1&quot;

‎src/index.js‎

Lines changed: 40 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import Actions from '@cocreate/actions';
33
import Observer from '@cocreate/observer';
44
import uuid from '@cocreate/uuid';
5-
import { queryDocumentSelector, queryDocumentSelectorAll, getValueFromObject, dotNotationToObject, ObjectId } from '@cocreate/utils';
5+
import { queryDocumentSelector, queryDocumentSelectorAll, getElements, getValueFromObject, dotNotationToObject, ObjectId } from '@cocreate/utils';
66
import '@cocreate/element-prototype';
77
import './index.css';
88

@@ -27,36 +27,6 @@ function init(element) {
2727
}
2828
}
2929

30-
function getElement(element, prefix = 'render') {
31-
let elements = [];
32-
33-
let selectors = ['selector', 'closest', 'parent', 'next', 'previous']
34-
for (let i = 0; i < selectors.length; i++) {
35-
let name = prefix + '-' + selectors[i]
36-
const selector = element.getAttribute(name);
37-
if (selector) {
38-
if (selectors[i] === 'selector')
39-
elements = document.querySelectorAll(selector)
40-
else if (selectors[i] === 'closest')
41-
elements = element.closest(selector)
42-
else if (selectors[i] === 'parent')
43-
elements = element.parentElement.querySelectorAll(selector)
44-
else if (selectors[i] === 'next')
45-
elements = element.nextElementSibling.querySelectorAll(selector)
46-
else if (selectors[i] === 'previous')
47-
elements = element.previousElementSibling.querySelectorAll(selector)
48-
} else if (selector === '') {
49-
if (selectors[i] === 'parent')
50-
elements = element.parentElement
51-
else if (selectors[i] === 'next')
52-
elements = element.nextElementSibling
53-
else if (selectors[i] === 'previous')
54-
elements = element.previousElementSibling
55-
}
56-
}
57-
58-
return elements
59-
}
6030

6131
function renderTemplate(template, data, key, index, keyPath) {
6232
if (!key)
@@ -508,7 +478,7 @@ function getRenderValue(node, data, key, renderAs) {
508478
function render({ source, element, data, key, index, currentIndex, update, remove }) {
509479
if (!element) {
510480
if (source) {
511-
element = getElement(source)
481+
element = getElements(source, 'render')
512482
if (!element)
513483
element = source.querySelector('template, [template], .template', '[render]')
514484
}
@@ -645,35 +615,53 @@ Observer.init({
645615
Observer.init({
646616
name: 'render',
647617
observe: ['addedNodes'],
648-
target: '[render-clone]',
618+
target: '[render]',
649619
callback: function (mutation) {
650-
let renderedNode = renderedNodes.get(mutation.target)
651-
if (!renderedNode) return
620+
if (mutation.target.hasAttribute('render-clone'))
621+
return
622+
let parentElement = mutation.target.parentElement.closest(['render'])
623+
if (!parentElement) return
624+
625+
let renderedNode = renderedNodes.get(parentElement)
626+
let data = renderedNode.source.data
627+
628+
render({ element: mutation.target, data });
652629

653-
// render({ source, element, data, key, index, currentIndex, update, remove })
630+
}
631+
});
654632

655-
// let nextElement = mutation.target.nextElementSibling
656-
// if (!nextElement) return
633+
// Observer.init({
634+
// name: 'render',
635+
// observe: ['addedNodes'],
636+
// target: '[render-clone]',
637+
// callback: function (mutation) {
638+
// let renderedNode = renderedNodes.get(mutation.target)
639+
// if (!renderedNode) return
657640

658-
// let nextRenderedNode = renderedNodes.get(nextElement)
659-
// if (!nextRenderedNode) return
641+
// render({ source, element, data, key, index, currentIndex, update, remove })
660642

661-
// let clones
662-
// if (nextRenderedNode.template)
663-
// clones = nextRenderedNode.template.clones
664-
// else if (nextRenderedNode.clones)
665-
// clones = nextRenderedNode.clones
643+
// let nextElement = mutation.target.nextElementSibling
644+
// if (!nextElement) return
666645

667-
// const cloneValueArray = Array.from(clones.values())
668-
// let index = cloneValueArray.indexOf(nextElement);
646+
// let nextRenderedNode = renderedNodes.get(nextElement)
647+
// if (!nextRenderedNode) return
669648

670-
// const cloneArray = Array.from(clones)
649+
// let clones
650+
// if (nextRenderedNode.template)
651+
// clones = nextRenderedNode.template.clones
652+
// else if (nextRenderedNode.clones)
653+
// clones = nextRenderedNode.clones
671654

672-
// cloneArray.splice(index, 0, [renderedNode.eid, mutation.target]);
673-
// clones = new Map(cloneArray);
655+
// const cloneValueArray = Array.from(clones.values())
656+
// let index = cloneValueArray.indexOf(nextElement);
674657

675-
}
676-
})
658+
// const cloneArray = Array.from(clones)
659+
660+
// cloneArray.splice(index, 0, [renderedNode.eid, mutation.target]);
661+
// clones = new Map(cloneArray);
662+
663+
// }
664+
// })
677665

678666
Observer.init({
679667
name: 'renderNodesRemoved',
@@ -688,24 +676,6 @@ Observer.init({
688676
}
689677
})
690678

691-
Observer.init({
692-
name: 'render',
693-
observe: ['addedNodes'],
694-
target: '[render]',
695-
callback: function (mutation) {
696-
if (mutation.target.hasAttribute('render-clone'))
697-
return
698-
let parentElement = mutation.target.parentElement.closest(['render'])
699-
if (!parentElement) return
700-
701-
let renderedNode = renderedNodes.get(parentElement)
702-
let data = renderedNode.source.data
703-
704-
render({ element: mutation.target, data });
705-
706-
}
707-
});
708-
709679
init()
710680

711681
export default { render, sources, renderedNodes }

0 commit comments

Comments
 (0)