Open the browser console to see the result of a Javascript event handler when the visible item is changed.
<h6>Ch5-triggerview used inside a ch5-template, example is taken from <i>ch5-triggerview/events</i>.</h6>
<p>Open the browser console to see the result of a Javascript event handler when the visible item is changed.</p>
<template id="triggerView">
<ch5-triggerview id="demo">
<ch5-triggerview-child>
<div class="viewcontent">
<h1>First View</h1>
</div>
</ch5-triggerview-child>
<ch5-triggerview-child>
<div class="viewcontent">
<h1>Second View</h1>
</div>
</ch5-triggerview-child>
<ch5-triggerview-child>
<div class="viewcontent">
<h1>Third View</h1>
</div>
</ch5-triggerview-child>
</ch5-triggerview>
<br>
<ch5-button type="secondary" id="prev" label="prev"></ch5-button>
<ch5-button type="secondary" id="next" label="next"></ch5-button>
</template>
<ch5-template templateId="triggerView" context="original:replacement">
</ch5-template>
var demo = document.getElementById('demo');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
prev.disabled = true;
prev.addEventListener('click', function() {
demo.previousViewChild();
});
next.addEventListener('click', function() {
demo.nextViewChild();
});
demo.addEventListener('select', function(e) {
console.log('select event with detail: ', e.detail );
switch (e.detail) {
case 1:
prev.disabled = true;
next.disabled = false;
break;
case 3:
prev.disabled = false;
next.disabled = true;
break;
default:
prev.disabled = false;
next.disabled = false;
break;
}
});
.viewcontent {
width:100%;
height:200px;
background: #999;
display: table;
}
.viewcontent h1 {
text-align: center;
vertical-align: middle;
display:table-cell;
}