//
//
// JS: jQuery('.block-title').toggleSingle();
//
// Options:
// destruct: defaults to false, but if true, the plugin will remove itself, display content, and remove event handlers
jQuery.fn.toggleSingle = function (options) {
var settings = $.extend({
destruct: false
}, options);
return this.each(function () {
if (!settings.destruct) {
$(this).on('click', function () {
$(this)
.next()
.toggleClass('no-display')
.parent()
.toggleClass('active');
});
// Hide the content
$this = $(this);
if (!$this.parent().hasClass('active'))
{
$this.next().addClass('no-display');
}
}
else
{
// Remove event handler so that the toggle link can no longer be used
$(this).off('click');
// Remove all classes that were added by this plugin
$(this)
.next()
.removeClass('no-display')
.parent()
.removeClass('active');
}
});
} // end: toggleSingle
// Collapsible block - with delegated event
// Modification of the standard collapsible block plugin. It has a delegated click event attached to block's container.
// It is required for some blocks inside "additional sidebar" (currently: wishlist and compare)
// which are created/modified dynamically by Magento's JavaScript code.
jQuery.fn.toggleMultiBlocks = function (options) {
var settings = $.extend({
destruct: false,
blockHeadingSelector: '.block-title'
}, options);
return this.each(function () {
// Container of blocks
var $sidebar = $(this);
// All blocks inside the container
var $blockHeadings = $sidebar.find(settings.blockHeadingSelector);
if (!settings.destruct)
{
$sidebar.on('click', settings.blockHeadingSelector, function(e) {
$(this)
.next().toggleClass('no-display')
.parent().toggleClass('active');
});
// Hide the content in all blocks
$blockHeadings.each(function () {
var heading = $(this);
if (!heading.parent().hasClass('active'))
{
heading.next().addClass('no-display');
// Here we may need to add that class to the next sibling
// if block's content consists of more elements than just one:
// .next().addClass('no-display')
}
else
{
heading.next().removeClass('no-display');
}
});
}
else
{
// Remove event handler so that the toggle link can no longer be used
$sidebar.off('click');
// Remove all classes that were added by this plugin
$blockHeadings
.next().removeClass('no-display')
.parent().removeClass('active');
}
});
} // end: toggleMultiBlocks
var breakpointScreenM = 768; // The same value as Magento's breakpoint @screen__m
// Blocks collapsing on smaller viewports
enquire.register('(max-width: ' + (breakpointScreenM - 1) + 'px)', {
setup: function () {
this.toggleElements = $(
'.mobile-collapsible .block-title'
);
this.delayedToggleElements = $(
'.sidebar'
);
},
match: function () {
this.toggleElements.toggleSingle();
this.delayedToggleElements.toggleMultiBlocks({blockHeadingSelector: '.block:not(#layered-filter-block) .block-title'});
},
unmatch: function () {
this.toggleElements.toggleSingle({destruct: true});
this.delayedToggleElements.toggleMultiBlocks({destruct: true, blockHeadingSelector: '.block:not(#layered-filter-block) .block-title'});
}
});
// Blocks collapsing on all viewports.
// For backward compatibility exclude blocks which have both classes: "collapsible" and "mobile-collapsible"
$('.collapsible:not(.mobile-collapsible) .block-title').toggleSingle();
}); //end: on document ready
}); //end: requirejs
//]]>