Skip to content

Commit 421a4b2

Browse files
frankpaganfrankpagan
committed
fix: removed data- from show and hde attributes
1 parent fea4ecc commit 421a4b2

File tree

4 files changed

+224
-110
lines changed

4 files changed

+224
-110
lines changed

‎demo/index.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,33 @@
99

1010
<h5 style='color:blue'>Toggle</h5>
1111

12-
<div data-hide='#testdiv,#div2' data-show='.testdiv,.div2'>
12+
<div hide='#testdiv,#div2' show='.testdiv,.div2'>
1313
<div class="test">click me</div><br/>
1414
</div>
1515

16-
<div data-hide='#testdiv,#div2' data-show='.testdiv,.div2'>
17-
<i class="fa fa-plus-circle" data-transform_to="fas fa-minus-circle"></i>
16+
<div hide='#testdiv,#div2' show='.testdiv,.div2'>
17+
<i class="fa fa-plus-circle"></i>
1818
</div>
1919
<div id='testdiv' class="hidden testdiv"> Only SHOW </div>
2020
<div id="div2" class="hidden div2"> Only SHOW2</div>
2121

2222
<h5 style='color:blue'>show</h5>
23-
<div data-show='#showdiv' data-hide='#hidediv'>
23+
<div show='#showdiv' hide='#hidediv'>
2424
<i class="fas fa-plus-circle" data-transform_to="fas fa-minus-circle"></i>
2525
</div>
2626
<div id='showdiv' class="hidden"> Only SHOW </div>
2727
<div id='hidediv'> TAG HIDE</div>
2828

2929
<h6 style='color:blue'>2 example SHOW (2 elements by ID) HIDE (1 element by ID)</h6>
30-
<div data-show='#showdiv1,#show2' data-hide='#hidediv1'>
30+
<div show='#showdiv1,#show2' hide='#hidediv1'>
3131
<i class="fas fa-plus-circle" data-transform_to="fas fa-minus-circle"></i>
3232
</div>
3333
<div id='showdiv1'> Only SHOW 1</div>
3434
<h3 id='show2'> only show 2</h3>
3535
<div id='hidediv1' class="hidden"> TAG HIDE</div>
3636

3737
<h6 style='color:blue'>2 example SHOW (2 elements by class) HIDE (3 element by class)</h6>
38-
<div data-show='.my_show' data-hide='.my_hide'>
38+
<div show='.my_show' hide='.my_hide'>
3939
<i class="fas fa-plus-circle" data-transform_to="fas fa-minus-circle"></i>
4040
</div>
4141
<div class='my_show'> Only SHOW 1</div>
@@ -46,7 +46,7 @@ <h4 class='my_hide' class="hidden"> Tag hide 2</h4>
4646
<h3 class='my_hide' class="hidden"></h3> Tag hide 3</h3>
4747

4848
<h6 style='color:blue'>3 example <b>CHECKBOX</b> SHOW (2 elements by class) HIDE (3 element by class)</h6>
49-
<input type='checkbox' checked="true" data-show='.my_show_check' data-hide='.my_hide_check'/>
49+
<input type='checkbox' checked="true" show='.my_show_check' hide='.my_hide_check'/>
5050
<div class='my_show_check'> Only SHOW 1</div>
5151
<h3 class='my_show_check'> only show 2</h3>
5252
<div class='my_hide_check' class="hidden"> TAG HIDE</div>
@@ -57,15 +57,15 @@ <h6 style='color:blue'>4 example RADIOBUTTON</h6>
5757
<div class="section">
5858
<div class="option-group field">
5959
<label class="option">
60-
<input type="radio" name="pack" class="show_hide" value="" data-show="#ctr_personal1">
60+
<input type="radio" name="pack" value="" show="#ctr_personal1">
6161
<span class="radio"></span> Personal
6262
</label>
6363
<label class="option">
64-
<input type="radio" name="pack" class="show_hide" value="" data-show="#ctr_business1" checked>
64+
<input type="radio" name="pack" value="" show="#ctr_business1" checked>
6565
<span class="radio"></span> Business
6666
</label>
6767
<label class="option">
68-
<input type="radio" name="pack" class="show_hide" value="" data-show="#ctr_corporate1">
68+
<input type="radio" name="pack" value="" show="#ctr_corporate1">
6969
<span class="radio"></span> Corporate
7070
</label>
7171
</div>
@@ -79,15 +79,15 @@ <h6 style='color:blue'>5 example RADIOBUTTON (show MULTIPLE)</h6>
7979
<div class="section">
8080
<div class="option-group field">
8181
<label class="option">
82-
<input type="radio" name="package" class="show_hide" value="" data-show="#ctr_personal">
82+
<input type="radio" name="package" value="" show="#ctr_personal">
8383
<span class="radio"></span> Personal
8484
</label>
8585
<label class="option">
86-
<input type="radio" name="package" class="show_hide" value="" data-show="#ctr_business,#other_business" checked>
86+
<input type="radio" name="package" value="" show="#ctr_business,#other_business" checked>
8787
<span class="radio"></span> Business
8888
</label>
8989
<label class="option">
90-
<input type="radio" name="package" class="show_hide" value="" data-show=".ctr_corporate">
90+
<input type="radio" name="package" value="" show=".ctr_corporate">
9191
<span class="radio"></span> Corporate
9292
</label>
9393
</div>
@@ -103,9 +103,9 @@ <h6 style='color:blue'>5 example RADIOBUTTON (show MULTIPLE)</h6>
103103
<h6 style='color:blue'>6 example SELECT</h6>
104104
<select >
105105
<option value="">Payment Method</option>
106-
<option value="Credit Card" data-show="#ctr_creditcard" selected>Credit Card</option>
107-
<option value="Check" data-show=".ctr_check">Check</option>
108-
<option value="Other" data-show="#ctr_other">Other</option>
106+
<option value="Credit Card" show="#ctr_creditcard" selected>Credit Card</option>
107+
<option value="Check" show=".ctr_check">Check</option>
108+
<option value="Other" show="#ctr_other">Other</option>
109109
</select>
110110
<div id='ctr_creditcard' > Credicard</div>
111111
<div class='ctr_check' class="hidden"> CHECK</div>
@@ -115,9 +115,9 @@ <h6 style='color:blue'>6 example SELECT</h6>
115115
<h6 style='color:blue'>7 example SELECT (show multiples)</h6>
116116
<select multiple="true">
117117
<option value="">Payment Method</option>
118-
<option value="Credit Card" data-show="#ctr_creditcard1,#ctr_creditcard2" selected>Credit Card</option>
119-
<option value="Check" data-show=".ctr_check1">Check</option>
120-
<option value="Other" data-show="#ctr_other1,#ctr_other2">Other</option>
118+
<option value="Credit Card" show="#ctr_creditcard1,#ctr_creditcard2" selected>Credit Card</option>
119+
<option value="Check" show=".ctr_check1">Check</option>
120+
<option value="Other" show="#ctr_other1,#ctr_other2">Other</option>
121121
</select>
122122
<div id='ctr_creditcard1' > Credicard</div>
123123
<div id='ctr_creditcard2' > Credicard2</div>

‎docs/index.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@
2929
<h2>CoCreate-conditional-logic</h2>
3030
</div>
3131
<div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
32-
<div class="display:flex align-items:center transition:0.3s padding-left:10px" data-share_network="true" data-share_text="Enter decription here" data-share_title="testing im a title" data-share_height="600" data-share_width="700" data-share_media="https://cdn.cocreate.app/docs/conditional-logic.png" data-hover="display:block!important" data-hover_target=".social-networks">
32+
<div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Enter decription here" share-title="testing im a title" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/conditional-logic.png" data-hover="display:block!important" data-hover_target=".social-networks">
3333
<div class="display:none social-networks">
34-
<a class="margin-right:15px" data-share_network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
35-
<a class="margin-right:15px" data-share_network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
36-
<a class="margin-right:15px" data-share_network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
34+
<a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
35+
<a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
36+
<a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
3737
</div>
38-
<a class="margin-right:15px" data-share_network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
38+
<a class="margin-right:15px" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
3939
</div>
4040
<a href="https://github.com/CoCreate-app/CoCreate-conditional-logic" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
4141
</div>
@@ -67,7 +67,7 @@ <h2 class="padding:5px_0px">Usage</h2>
6767
<pre>
6868
<code class="language-js">
6969
&lt;h5 style='color:blue'&gt;Toggle&lt;/h5&gt;
70-
&lt;div data-hide='#testdiv,#div2' data-show='.testdiv,.div2'&gt;
70+
&lt;div hide='#testdiv,#div2' show='.testdiv,.div2'&gt;
7171
&lt;div class=&quot;test&quot;&gt;click me&lt;/div&gt;&lt;br/&gt;
7272
&lt;/div&gt;
7373
&lt;div id='testdiv' class=&quot;hidden testdiv&quot;&gt; Only SHOW &lt;/div&gt;
@@ -86,11 +86,11 @@ <h2 class="padding:5px_0px">Attributes</h2>
8686
</div>
8787
<ul class="list-style-type:none ">
8888
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
89-
<h4><span>data-show</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
89+
<h4><span>show</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
9090
<p>selector of elements to display</p>
9191
</li>
9292
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
93-
<h4><span>data-hide</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
93+
<h4><span>hide</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
9494
<p>selector of elements to hide</p>
9595
</li>
9696
</ul>
@@ -108,8 +108,8 @@ <h2 class="padding:5px_0px">Demo</h2>
108108
<div class="position:sticky top:0 padding:15px_0px height:100vh">
109109
<div class="container svColumn overflow:hidden card border-radius:2px width:auto height:100%" id="form-sandbox">
110110
<div class="font-size:20px position:absolute top:10px right:10px opacity:0.6 z-index:7">
111-
<a class="margin-right:10px" id="preview" data-show="preview" data-hide="code"><i class="far fa-eye"></i></a>
112-
<a class="margin-right:10px hidden" id="code" data-show="code" data-hide="preview"><i class="fas fa-code"></i></a>
111+
<a class="margin-right:10px" id="preview" show="preview" hide="code"><i class="far fa-eye"></i></a>
112+
<a class="margin-right:10px hidden" id="code" show="code" hide="preview"><i class="fas fa-code"></i></a>
113113
<!--<a class="margin-right:10px"><i class="far fa-window-maximize"></i></a>-->
114114
<a target="modal" href="module_activity_datatable.html"
115115
pass-collection="modules"
@@ -143,7 +143,7 @@ <h2 class="padding:5px_0px">Demo</h2>
143143
<div class="svSplitter svHorizontal"> </div>
144144

145145
<div class="svPanel">
146-
<iframe data-get_value="7" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
146+
<iframe get-value="7" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
147147
</div>
148148

149149
</div>

‎src/index.1.js‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/*
2+
* https://cocreate.app
3+
* https://github.com/CoCreate-app/Conditional_Logic
4+
* Released under the MIT license
5+
* https://github.com/CoCreate-app/Conditional_Logic/blob/master/LICENSE
6+
*/
7+
import observer from '@cocreate/observer'
8+
import { logger } from '@cocreate/utils';
9+
10+
let console = logger('off');
11+
init();
12+
13+
document.addEventListener('fetchedTemplate', () => {
14+
init();
15+
})
16+
17+
//. cocreate init section
18+
function init() {
19+
let elements = document.querySelectorAll(`[show],[hide]`);
20+
initElements(elements)
21+
}
22+
23+
function initElements(elements) {
24+
for (let el of elements)
25+
initElement(el)
26+
}
27+
28+
function initElement(el) {
29+
if (el.tagName.toLowerCase() == "option")
30+
el = el.closest('select');
31+
32+
el.removeEventListener('change', selectShowHideEle);
33+
el.removeEventListener("click", clickShowHideEle);
34+
35+
el.addEventListener("change", selectShowHideEle);
36+
el.addEventListener("click", clickShowHideEle);
37+
}
38+
// CoCreateInit.register('CoCreateConditionalLogic', window, window.init);
39+
40+
observer.init({
41+
name: 'CoCreateConditionalLogic',
42+
observe: ['addedNodes'],
43+
target: '[show], [hide]',
44+
callback: function(mutation) {
45+
initElement(mutation.target)
46+
}
47+
})
48+
49+
//. upgrade by jin (using document event)
50+
// function init() {
51+
52+
// const selector = "[show],[hide]";
53+
// document.removeEventListener("change", function(event) {
54+
// const target = event.target.closest(selector);
55+
// if (target) {
56+
// selectShowHideEle(event)
57+
// }
58+
// });
59+
60+
// document.removeEventListener("click", function(event) {
61+
// const target = event.target.closest(selector);
62+
// if (target) {
63+
// clickShowHideEle(event)
64+
// }
65+
// });
66+
67+
// document.addEventListener("change", function(event) {
68+
// const target = event.target.closest(selector);
69+
// if (target) {
70+
// selectShowHideEle(event)
71+
// }
72+
// });
73+
74+
// document.addEventListener("click", function(event) {
75+
// const target = event.target.closest(selector);
76+
// if (target) {
77+
// clickShowHideEle(event)
78+
// }
79+
// });
80+
// }
81+
82+
function selectShowHideEle(e) {
83+
console.log(this, 'select');
84+
e.preventDefault()
85+
var select = this;
86+
if (typeof select.options != 'undefined')
87+
for (var i = 0, len = select.options.length; i < len; i++) {
88+
var opt = select.options[i];
89+
var value = opt.value
90+
if (value != '') {
91+
var show = opt.dataset.show
92+
// var show_class = opt.dataset.showClass
93+
if (typeof show != 'undefined') {
94+
for (let el of document.querySelectorAll(show))
95+
el.classList.add('hidden');
96+
if (opt.selected === true) {
97+
for (let el of document.querySelectorAll(show))
98+
el.classList.remove('hidden');
99+
}
100+
}
101+
} //end value is not empty
102+
} //end for
103+
}
104+
105+
function clickShowHideEle(e) {
106+
console.log(this, 'click');
107+
var show = this.dataset.show;
108+
var hide = this.dataset.hide;
109+
let tagName = this.tagName.toLowerCase();
110+
111+
if (tagName == 'input' && this.getAttribute("type").toLowerCase() == 'radio') {
112+
let name = this.getAttribute("name")
113+
let radios = document.querySelectorAll(tagName + '[name="' + name + '"]');
114+
for (let radio of radios) {
115+
116+
show = radio.dataset.show;
117+
118+
for (let el of document.querySelectorAll(show)) {
119+
el.classList.add('hidden');
120+
}
121+
122+
if (radio.checked) {
123+
for (let el of document.querySelectorAll(show))
124+
el.classList.remove('hidden');
125+
}
126+
}
127+
128+
}
129+
else {
130+
131+
let updated_els = [];
132+
133+
for (let el of document.querySelectorAll(show)) {
134+
if (el.classList.contains('hidden')) {
135+
el.classList.remove('hidden');
136+
updated_els.push(el);
137+
}
138+
}
139+
140+
for (let el of document.querySelectorAll(hide)) {
141+
let existEqual = false;
142+
for (let uel of updated_els) {
143+
if (el.isEqualNode(uel)) {
144+
existEqual = true;
145+
break;
146+
}
147+
}
148+
149+
if (!existEqual) el.classList.add('hidden');
150+
}
151+
}
152+
}
153+
154+
const CoCreateConditionalLogic = { initElements, selectShowHideEle, clickShowHideEle };
155+
export default CoCreateConditionalLogic;

0 commit comments

Comments
 (0)