Skip to content

Commit bb55fb4

Browse files
thewebartisan7thewebartisan7
committed
Refactor attributes.js using underscore and allow to set attributes to any element of component not only first one
1 parent 31c4131 commit bb55fb4

File tree

7 files changed

+186
-176
lines changed

7 files changed

+186
-176
lines changed

‎examples/dist/demo.html

+111-109
Original file line numberDiff line numberDiff line change
@@ -48,114 +48,116 @@
4848
<div class="row">
4949
<div class="col-lg-8">
5050
<h1 class="display-1 fw-bold mb-4">Demo</h1>
51-
<div something="alocal">
52-
<h1>anObjectDefault</h1>
53-
<p>
54-
<strong>first</strong>
55-
: First default item
56-
</p>
57-
<p>
58-
<strong>second</strong>
59-
: Second default item
60-
</p>
61-
<h1>anObjectOverride</h1>
62-
<p>
63-
<strong>third</strong>
64-
: Third override item
65-
</p>
66-
<p>
67-
<strong>fourth</strong>
68-
: Fourth override item
69-
</p>
70-
<h1>anObjectMerged</h1>
71-
<p>
72-
<strong>first</strong>
73-
: First merged item
74-
</p>
75-
<p>
76-
<strong>second</strong>
77-
: Second merged item
78-
</p>
79-
<p>
80-
<strong>anObjectMerged1</strong>
81-
: {"first":"First1 merged item","second":"Second1 merged item","anObjectMerged2":{"first":"First2 merged item","second":"Second2 merged item"},"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}
82-
</p>
83-
<p>
84-
<strong>third</strong>
85-
: Third merged item
86-
</p>
87-
<p>
88-
<strong>fourth</strong>
89-
: Fourth merged item
90-
</p>
91-
<h1>aStringDefault</h1>
92-
<p>My default string</p>
93-
<h1>aStringOverride</h1>
94-
<p>My override string changed</p>
95-
<hr>
96-
<h1>post</h1>
97-
My post title My post body
98-
<p>
99-
<strong>1</strong>
100-
: My comment 1
101-
</p>
102-
<p>
103-
<strong>2</strong>
104-
: My comment 2
105-
</p>
106-
<p>
107-
<strong>1</strong>
108-
: My comment 1 new
109-
</p>
110-
<p>
111-
<strong>3</strong>
112-
: My comment 3
113-
</p>
114-
<h1>anArrayOfObjects</h1>
115-
<p>
116-
<strong>0</strong>
117-
: {"id":1,"title":"My default title 1"}
118-
</p>
119-
<p>
120-
<strong>1</strong>
121-
: {"id":2,"title":"My default title 2"}
122-
</p>
123-
<p>
124-
<strong>2</strong>
125-
: {"id":1,"title":"My new title 1"}
126-
</p>
127-
<p>
128-
<strong>3</strong>
129-
: {"id":2,"title":"My new title 2","somethingnew":"New"}
130-
</p>
131-
<h1>anArray</h1>
132-
<p>
133-
<strong>0</strong>
134-
: first
135-
</p>
136-
<p>
137-
<strong>1</strong>
138-
: second
139-
</p>
140-
<p>
141-
<strong>2</strong>
142-
: first
143-
</p>
144-
<p>
145-
<strong>3</strong>
146-
: third
147-
</p>
148-
<p>
149-
<strong>4</strong>
150-
: fourth
151-
</p>
152-
<p>
153-
<strong>5</strong>
154-
: ten
155-
</p>
156-
<hr>
157-
<h1>aComputed</h1>
158-
<p>Yes</p>
51+
<div class="wrapper">
52+
<div class="demo my-demo" something="alocal">
53+
<h1>anObjectDefault</h1>
54+
<p>
55+
<strong>first</strong>
56+
: First default item
57+
</p>
58+
<p>
59+
<strong>second</strong>
60+
: Second default item
61+
</p>
62+
<h1>anObjectOverride</h1>
63+
<p>
64+
<strong>third</strong>
65+
: Third override item
66+
</p>
67+
<p>
68+
<strong>fourth</strong>
69+
: Fourth override item
70+
</p>
71+
<h1>anObjectMerged</h1>
72+
<p>
73+
<strong>first</strong>
74+
: First merged item
75+
</p>
76+
<p>
77+
<strong>second</strong>
78+
: Second merged item
79+
</p>
80+
<p>
81+
<strong>anObjectMerged1</strong>
82+
: {"first":"First1 merged item","second":"Second1 merged item","anObjectMerged2":{"first":"First2 merged item","second":"Second2 merged item"},"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}
83+
</p>
84+
<p>
85+
<strong>third</strong>
86+
: Third merged item
87+
</p>
88+
<p>
89+
<strong>fourth</strong>
90+
: Fourth merged item
91+
</p>
92+
<h1>aStringDefault</h1>
93+
<p>My default string</p>
94+
<h1>aStringOverride</h1>
95+
<p>My override string changed</p>
96+
<hr>
97+
<h1>post</h1>
98+
My post title My post body
99+
<p>
100+
<strong>1</strong>
101+
: My comment 1
102+
</p>
103+
<p>
104+
<strong>2</strong>
105+
: My comment 2
106+
</p>
107+
<p>
108+
<strong>1</strong>
109+
: My comment 1 new
110+
</p>
111+
<p>
112+
<strong>3</strong>
113+
: My comment 3
114+
</p>
115+
<h1>anArrayOfObjects</h1>
116+
<p>
117+
<strong>0</strong>
118+
: {"id":1,"title":"My default title 1"}
119+
</p>
120+
<p>
121+
<strong>1</strong>
122+
: {"id":2,"title":"My default title 2"}
123+
</p>
124+
<p>
125+
<strong>2</strong>
126+
: {"id":1,"title":"My new title 1"}
127+
</p>
128+
<p>
129+
<strong>3</strong>
130+
: {"id":2,"title":"My new title 2","somethingnew":"New"}
131+
</p>
132+
<h1>anArray</h1>
133+
<p>
134+
<strong>0</strong>
135+
: first
136+
</p>
137+
<p>
138+
<strong>1</strong>
139+
: second
140+
</p>
141+
<p>
142+
<strong>2</strong>
143+
: first
144+
</p>
145+
<p>
146+
<strong>3</strong>
147+
: third
148+
</p>
149+
<p>
150+
<strong>4</strong>
151+
: fourth
152+
</p>
153+
<p>
154+
<strong>5</strong>
155+
: ten
156+
</p>
157+
<hr>
158+
<h1>aComputed</h1>
159+
<p>Yes</p>
160+
</div>
159161
</div>
160162
</div>
161163
</div>
@@ -183,7 +185,7 @@ <h1>aComputed</h1>
183185
<div class="modal-content modal-content-custom">
184186
<div class="modal-header">
185187
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
186-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
188+
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
187189
</div>
188190
<!-- /.modal-header -->
189191
<div class="modal-body">

‎examples/dist/docs.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1270,7 +1270,7 @@ <h2 id="migration" tabindex="-1">
12701270
<div class="modal-content modal-content-custom">
12711271
<div class="modal-header">
12721272
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
1273-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1273+
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
12741274
</div>
12751275
<!-- /.modal-header -->
12761276
<div class="modal-body">

‎examples/dist/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
8989
<div class="modal-content modal-content-custom">
9090
<div class="modal-header">
9191
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
92-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
92+
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
9393
</div>
9494
<!-- /.modal-header -->
9595
<div class="modal-body">

‎examples/src/components/demo.html

+36-34
Original file line numberDiff line numberDiff line change
@@ -50,48 +50,50 @@
5050
aComputed: locals.aComputed === true ? 'Yes' : 'No',
5151
};
5252
</script>
53-
<div>
54-
<h1>anObjectDefault</h1>
55-
<each loop="o,i in anObjectDefault">
56-
<p><strong>{{ i }}</strong>: {{ o }}</p>
57-
</each>
53+
<div class="wrapper">
54+
<div class="demo" attributes>
55+
<h1>anObjectDefault</h1>
56+
<each loop="o,i in anObjectDefault">
57+
<p><strong>{{ i }}</strong>: {{ o }}</p>
58+
</each>
5859

59-
<h1>anObjectOverride</h1>
60-
<each loop="o,i in anObjectOverride">
61-
<p><strong>{{ i }}</strong>: {{ o }}</p>
62-
</each>
60+
<h1>anObjectOverride</h1>
61+
<each loop="o,i in anObjectOverride">
62+
<p><strong>{{ i }}</strong>: {{ o }}</p>
63+
</each>
6364

64-
<h1>anObjectMerged</h1>
65-
<each loop="o,i in anObjectMerged">
66-
<p><strong>{{ i }}</strong>: {{ o }}</p>
67-
</each>
65+
<h1>anObjectMerged</h1>
66+
<each loop="o,i in anObjectMerged">
67+
<p><strong>{{ i }}</strong>: {{ o }}</p>
68+
</each>
6869

69-
<h1>aStringDefault</h1>
70-
<p>{{ aStringDefault }}</p>
70+
<h1>aStringDefault</h1>
71+
<p>{{ aStringDefault }}</p>
7172

72-
<h1>aStringOverride</h1>
73-
<p>{{ aStringOverride }}</p>
73+
<h1>aStringOverride</h1>
74+
<p>{{ aStringOverride }}</p>
7475

75-
<hr>
76+
<hr>
7677

77-
<h1>post</h1>
78-
{{ post.title }} {{ post.body }}
79-
<each loop="comment in post.comments">
80-
<p><strong>{{ comment.id }}</strong>: {{ comment.body }}</p>
81-
</each>
78+
<h1>post</h1>
79+
{{ post.title }} {{ post.body }}
80+
<each loop="comment in post.comments">
81+
<p><strong>{{ comment.id }}</strong>: {{ comment.body }}</p>
82+
</each>
8283

83-
<h1>anArrayOfObjects</h1>
84-
<each loop="o,i in anArrayOfObjects">
85-
<p><strong>{{ i }}</strong>: {{ o }}</p>
86-
</each>
84+
<h1>anArrayOfObjects</h1>
85+
<each loop="o,i in anArrayOfObjects">
86+
<p><strong>{{ i }}</strong>: {{ o }}</p>
87+
</each>
8788

88-
<h1>anArray</h1>
89-
<each loop="o,i in anArray">
90-
<p><strong>{{ i }}</strong>: {{ o }}</p>
91-
</each>
89+
<h1>anArray</h1>
90+
<each loop="o,i in anArray">
91+
<p><strong>{{ i }}</strong>: {{ o }}</p>
92+
</each>
9293

93-
<hr>
94+
<hr>
9495

95-
<h1>aComputed</h1>
96-
<p>{{ aComputed }}</p>
96+
<h1>aComputed</h1>
97+
<p>{{ aComputed }}</p>
98+
</div>
9799
</div>

‎examples/src/pages/demo.html

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
1717
computed:aComputed="true"
1818

1919
merge:locals='{ "something": "alocal", "anArray": [ "ten" ] }'
20+
21+
class="my-demo"
2022
></x-demo>
2123
</div>
2224
</div>

0 commit comments

Comments
 (0)