Asides JS
You can get a hold of the Aside
component and control it with JavaScript.
ts.ui.get('#myaside', aside => { // you can pass an element instead of an ID
aside.open();
aside.close();
aside.toggle();
aside.title('Updated title');
});
Tracking with methods
You can overwrite the methods onopen
,
onopened
, onclose
and
onclosed
to do something whenever
the aside changes state.
aside.onopen = function() {
console.log('Aside will open');
};
If you return false
in methods onopen
and onclose
, the aside will respect that.
Tracking with events
You can also monitor the asides with DOM event listeners.
function debug(e) {
console.log(e.type, e.target);
}
document.addEventListener('ts-open', debug);
document.addEventListener('ts-opened', debug);
document.addEventListener('ts-close', debug);
document.addEventListener('ts-closed', debug);
The events "ts-open"
and "ts-close"
can
be blocked with e.preventDefault()
to prevent the aside
from changing state.