Ross
91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
// #TOGGLER#
|
|
// This script implements the simple element toggle
|
|
'use strict';
|
|
|
|
var Cl = window.Cl || {};
|
|
/* global Class, django */
|
|
|
|
// as of Django 2.x we need to check where jQuery is
|
|
var djQuery = window.$;
|
|
|
|
if (django.jQuery) {
|
|
djQuery = django.jQuery;
|
|
}
|
|
|
|
(function ($) {
|
|
Cl.Toggler = new Class({
|
|
options: {
|
|
linksSelector: '.js-toggler-link',
|
|
dataHeaderSelector: 'toggler-header-selector',
|
|
dataContentSelector: 'toggler-content-selector',
|
|
collapsedClass: 'js-collapsed',
|
|
expandedClass: 'js-expanded',
|
|
hiddenClass: 'hidden'
|
|
},
|
|
initialize: function (options) {
|
|
var that = this;
|
|
|
|
this.options = $.extend({}, this.options, options);
|
|
this.togglerInstances = [];
|
|
|
|
$(this.options.linksSelector).each(function () {
|
|
var togglerInstance = new Cl.TogglerConstructor(this, that.options);
|
|
that.togglerInstances.push(togglerInstance);
|
|
});
|
|
},
|
|
destroy: function () {
|
|
this.links = null;
|
|
|
|
this.togglerInstances.forEach(function (togglerInstance) {
|
|
togglerInstance.destroy();
|
|
});
|
|
|
|
this.togglerInstances = [];
|
|
}
|
|
});
|
|
|
|
Cl.TogglerConstructor = new Class({
|
|
_updateClasses: function () {
|
|
if (this.content.hasClass(this.options.hiddenClass)) {
|
|
this.header.removeClass(this.options.expandedClass);
|
|
this.header.addClass(this.options.collapsedClass);
|
|
} else {
|
|
this.header.addClass(this.options.expandedClass);
|
|
this.header.removeClass(this.options.collapsedClass);
|
|
}
|
|
},
|
|
_onTogglerClick: function (clickEvent) {
|
|
this.content.toggleClass(this.options.hiddenClass);
|
|
this._updateClasses();
|
|
|
|
clickEvent.preventDefault();
|
|
},
|
|
_initLink: function () {
|
|
this._updateClasses();
|
|
|
|
this._onTogglerClick = $.proxy(this._onTogglerClick, this);
|
|
this.link.on('click', this._onTogglerClick);
|
|
},
|
|
initialize: function (link, options) {
|
|
this.options = $.extend({}, this.options, options);
|
|
|
|
this.link = $(link);
|
|
this.headerSelector = this.link.data(this.options.dataHeaderSelector);
|
|
this.contentSelector = this.link.data(this.options.dataContentSelector);
|
|
this.header = $(this.headerSelector);
|
|
this.header = this.header.length ? this.header : this.link;
|
|
this.content = $(this.contentSelector);
|
|
|
|
if (this.content.length === 0) {
|
|
return;
|
|
}
|
|
|
|
this._initLink();
|
|
},
|
|
destroy: function () {
|
|
this.options = null;
|
|
this.link = null;
|
|
}
|
|
});
|
|
})(djQuery);
|