Skip to content

Instantly share code, notes, and snippets.

@aljopro
Last active March 31, 2017 18:54
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save aljopro/ac27dc87142654fdeaa8e714c7ff3bc8 to your computer and use it in GitHub Desktop.
ADA compliant Expandable Content Component for Knockout
.expandable-content-collapsed .expandable-content-wrapper {
display: none;
}
(function (global) {
if(!global.ko) {
return;
}
var template =
'<div class="expandable-content-component" aria-live="polite" data-bind="css: { \'expandable-content-expanded\': isExpanded(), \'expandable-content-collapsed\': !isExpanded() }, attr: {id: id}" >' +
'<!--ko if: labelType === "button" -->' +
' <button type="button" data-bind="attr: {class: \'expandable-content-label \' + labelClassName, \'aria-expanded\': isExpanded().toString(), \'aria-controls\': wrapperId}, text: labelText, click: toggleExpand"></button>' +
'<!-- /ko -->' +
'<!--ko ifnot: labelType === "button" -->' +
'<a href="#" data-bind="attr: {class: labelClassName, \'aria-expanded\': isExpanded().toString(), \'aria-controls\': wrapperId}, text: labelText, click: toggleExpand"></a>' +
'<!-- /ko -->' +
' <div class="expandable-content-wrapper" role="region" data-bind="attr: {id: wrapperId, \'aria-hidden\': (!isExpanded()).toString()}">' +
' <!-- ko template: { nodes: $componentTemplateNodes, data: $parent } --><!-- /ko -->' +
' </div>' +
'</div>';
function generateUniqueId(prefix) {
var id = prefix + '_' + (new Date()).getTime();
if (document.getElementById(id)) {
return generateUniqueId(prefix);
}
return id;
}
function ComponentViewModel(params) {
var self = this;
var expanded = params.isExpanded || false;
if (!ko.isObservable(expanded)) {
expanded = ko.observable(expanded);
}
if (!(params.text || params.labelText)) {
throw (new Error('Expandable Content Component requires a text parameter.'));
}
self.id = params.id || generateUniqueId('expandable_content_component');
self.wrapperId = params.wrapperId || generateUniqueId('expandable_content_wrapper');
self.labelType = params.labelType || 'button';
self.labelText = params.text || params.labelText;
self.labelClassName = params.labelClassName;
self.isExpanded = expanded;
self.toggleExpand = function () {
self.isExpanded(!self.isExpanded());
}
}
ko.components.register('expandable-content', {
viewModel: ComponentViewModel,
template: template
});
})(window);
<h1>Expandable Content Component</h1>
<expandable-content params="labelText: 'Expand Content', labelClassName: 'button', labelType: 'anchor'">
<h2>Ordered List</h2>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li data-bind="text: something"></li>
</ol>
<h2>Unordered List</h2>
<ul data-bind="foreach: {data: listItems, as: 'item'}">
<li data-bind="text: item"></li>
</ul>
</expandable-content>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment