How to override a JS file with Bootstrap and Drupal?

How to override a JS file with Bootstrap and Drupal? - javascript

I have a site with "Drupal 8" and "Bootstrap 3". I customized the behavior of my "Collapse" menu by copying the collapse.js file of the "Bootstrap" theme into my sub-theme.
My problem :
I copy the whole file, is there any way to override the JS file by copying only the custom piece of code ?
Here is the contents of the file bootstrap_subtheme_front_office.libraries.yml :
global-styling:
css:
theme:
fonts/font-awesome/css/font-awesome.css: {}
# bootstrap/dist/css/bootstrap.css: {}
# css/bootstrap-cosmo.css: {}
css/style.css: {}
# css/style-noel.css: {}
# css/style-nouvel-an.css: {}
bootstrap-scripts:
js:
bootstrap/js/affix.js: {}
bootstrap/js/alert.js: {}
bootstrap/js/button.js: {}
bootstrap/js/carousel.js: {}
bootstrap/js/collapse.js: {}
# bootstrap/js/dropdown.js: {}
bootstrap/js/modal.js: {}
bootstrap/js/tooltip.js: {}
bootstrap/js/popover.js: {}
bootstrap/js/scrollspy.js: {}
bootstrap/js/tab.js: {}
bootstrap/js/transition.js: {}
js/tour.js: {}
js/collapse.js: {}
Here is the contents of the file collapse.js :
/* ========================================================================
* Bootstrap: collapse.js v3.3.7
* http://getbootstrap.com/javascript/#collapse
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
/* jshint latedef: false */
+function ($) {
'use strict';
// COLLAPSE PUBLIC CLASS DEFINITION
// ================================
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
'[data-toggle="collapse"][data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
Collapse.VERSION = '3.3.7'
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
toggle: true
}
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var activesData
var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
if (actives && actives.length) {
activesData = actives.data('bs.collapse')
if (activesData && activesData.transitioning) return
}
var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
if (actives && actives.length) {
Plugin.call(actives, 'hide')
activesData || actives.data('bs.collapse', null)
}
var dimension = this.dimension()
this.$element
.removeClass('collapse')
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('collapse in')[dimension]('')
this.transitioning = 0
this.$element
.trigger('shown.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
}
Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return
var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
this.$element
.addClass('collapsing')
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
this.transitioning = 0
this.$element
.removeClass('collapsing')
.addClass('collapse')
.trigger('hidden.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
this.$element
[dimension](0)
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}
Collapse.prototype.toggle = function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.collapse
$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse
// COLLAPSE NO CONFLICT
// ====================
$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}
// COLLAPSE DATA-API
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var $this = $(this)
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
Plugin.call($target, option)
})
}(jQuery);
I added the following code at the end (my custom code) :
$('#navbar-collapse-first').on('show.bs.collapse', function () {
$('#navbar-collapse-second').collapse('hide');
})
$('#navbar-collapse-second').on('show.bs.collapse', function () {
$('#navbar-collapse-first').collapse('hide');
})
$('#navbar-collapse-first').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-first').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-second').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-second').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
UPDATE : Here is the correct code
(function ($) {
var $document = $(document);
var $body = $(document.body);
// Wrap everything in a DOM ready handler.
$document.ready(function () {
// Save the navbar collapse selectors so making updates/tracking easier.
var navbarCollapseFirst = '#navbar-collapse-first';
var navbarCollapseSecond = '#navbar-collapse-second';
var navbarCollapseBoth = navbarCollapseFirst + ',' + navbarCollapseSecond;
// Save the jQuery instances (for performance).
var $navbarCollapseFirst = $(navbarCollapseFirst);
var $navbarCollapseSecond = $(navbarCollapseSecond);
// Variable for saving which navbar collapse is currently open.
var $open = $();
// For performance reasons, bind evens directly on the document. jQuery
// allows you to pass a targeting selector between the event and handler
// so it will only call said handler when the event matches said selector.
$document
// Bind "show" event for first navbar collapse.
.on('show.bs.collapse', navbarCollapseBoth, function (e) {
// Indicate that the first is open.
$open = $(e.target);
// Collapse the first if it's not the one that just opened.
if (!$navbarCollapseFirst.is($open)) {
$navbarCollapseFirst.collapse('hide');
}
// Collapse the second if it's not the one that just opened.
else if (!$navbarCollapseSecond.is($open)) {
$navbarCollapseSecond.collapse('hide');
}
// Add the body class.
$body.addClass('overlay-is-navbar-collapse');
})
// Bind "hide" event for first navbar collapse.
.on('hide.bs.collapse', navbarCollapseFirst, function (e) {
// Indicate that the first is open.
var $hide = $(e.target);
// Remove the first as the opened navbar collapse.
if ($navbarCollapseFirst.is($hide) && $navbarCollapseFirst.is($open)) {
$open = $();
}
// Remove the second as the opened navbar collapse.
else if ($navbarCollapseSecond.is($hide) && $navbarCollapseSecond.is($open)) {
$open = $();
}
// Remove the body class if there is no open navbar collapse.
if (!$open[0]) {
$body.removeClass('overlay-is-navbar-collapse');
}
});
});
})(window.jQuery);

I think you have to wrap your code in a document.ready function, in your own js file, something like this :
$(function(){
$('#navbar-collapse-first').on('show.bs.collapse', function () {
$('#navbar-collapse-second').collapse('hide');
})
$('#navbar-collapse-second').on('show.bs.collapse', function () {
$('#navbar-collapse-first').collapse('hide');
})
$('#navbar-collapse-first').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-first').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-second').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-second').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
});

Related

Bootstrap Modal Doesn't dismiss due to code conflict

I am using ELA bootstrap admin template.
There is a sidebarmenu.js file included in the theme which is used for sidebar menu List Open/Close. Every thing works file. But I wanted to implement Bootstrap Modal, inside my application. On button click, modal pops up but 'x' or close button seems to be not working. Nether it closes on clicking outside the modal area.
When I comment out inclusion of sidebarmenu.js from the header, the modal works fine.
Here is sidebarmenu.js code:
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['jquery'], factory);
} else if (typeof exports !== "undefined") {
factory(require('jquery'));
} else {
var mod = {
exports: {}
};
factory(global.jquery);
global.metisMenu = mod.exports;
}
})(this, function (_jquery) {
'use strict';
var _jquery2 = _interopRequireDefault(_jquery);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Util = function ($) {
var transition = false;
var TransitionEndEvent = {
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend'
};
function getSpecialTransitionEndEvent() {
return {
bindType: transition.end,
delegateType: transition.end,
handle: function handle(event) {
if ($(event.target).is(this)) {
return event.handleObj.handler.apply(this, arguments);
}
return undefined;
}
};
}
function transitionEndTest() {
if (window.QUnit) {
return false;
}
var el = document.createElement('mm');
for (var name in TransitionEndEvent) {
if (el.style[name] !== undefined) {
return {
end: TransitionEndEvent[name]
};
}
}
return false;
}
function transitionEndEmulator(duration) {
var _this2 = this;
var called = false;
$(this).one(Util.TRANSITION_END, function () {
called = true;
});
setTimeout(function () {
if (!called) {
Util.triggerTransitionEnd(_this2);
}
}, duration);
return this;
}
function setTransitionEndSupport() {
transition = transitionEndTest();
$.fn.emulateTransitionEnd = transitionEndEmulator;
if (Util.supportsTransitionEnd()) {
$.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
}
}
var Util = {
TRANSITION_END: 'mmTransitionEnd',
triggerTransitionEnd: function triggerTransitionEnd(element) {
$(element).trigger(transition.end);
},
supportsTransitionEnd: function supportsTransitionEnd() {
return Boolean(transition);
}
};
setTransitionEndSupport();
return Util;
}(jQuery);
var MetisMenu = function ($) {
var NAME = 'metisMenu';
var DATA_KEY = 'metisMenu';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
var JQUERY_NO_CONFLICT = $.fn[NAME];
var TRANSITION_DURATION = 350;
var Default = {
toggle: true,
preventDefault: true,
activeClass: 'active',
collapseClass: 'collapse',
collapseInClass: 'in',
collapsingClass: 'collapsing',
triggerElement: 'a',
parentTrigger: 'li',
subMenu: 'ul'
};
var Event = {
SHOW: 'show' + EVENT_KEY,
SHOWN: 'shown' + EVENT_KEY,
HIDE: 'hide' + EVENT_KEY,
HIDDEN: 'hidden' + EVENT_KEY,
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
};
var MetisMenu = function () {
function MetisMenu(element, config) {
_classCallCheck(this, MetisMenu);
this._element = element;
this._config = this._getConfig(config);
this._transitioning = null;
this.init();
}
MetisMenu.prototype.init = function init() {
var self = this;
$(this._element).find(this._config.parentTrigger + '.' + this._config.activeClass).has(this._config.subMenu).children(this._config.subMenu).attr('aria-expanded', true).addClass(this._config.collapseClass + ' ' + this._config.collapseInClass);
$(this._element).find(this._config.parentTrigger).not('.' + this._config.activeClass).has(this._config.subMenu).children(this._config.subMenu).attr('aria-expanded', false).addClass(this._config.collapseClass);
$(this._element).find(this._config.parentTrigger).has(this._config.subMenu).children(this._config.triggerElement).on(Event.CLICK_DATA_API, function (e) {
var _this = $(this);
var _parent = _this.parent(self._config.parentTrigger);
var _siblings = _parent.siblings(self._config.parentTrigger).children(self._config.triggerElement);
var _list = _parent.children(self._config.subMenu);
if (self._config.preventDefault) {
e.preventDefault();
}
if (_this.attr('aria-disabled') === 'true') {
return;
}
if (_parent.hasClass(self._config.activeClass)) {
_this.attr('aria-expanded', false);
self._hide(_list);
} else {
self._show(_list);
_this.attr('aria-expanded', true);
if (self._config.toggle) {
_siblings.attr('aria-expanded', false);
}
}
if (self._config.onTransitionStart) {
self._config.onTransitionStart(e);
}
});
};
MetisMenu.prototype._show = function _show(element) {
if (this._transitioning || $(element).hasClass(this._config.collapsingClass)) {
return;
}
var _this = this;
var _el = $(element);
var startEvent = $.Event(Event.SHOW);
_el.trigger(startEvent);
if (startEvent.isDefaultPrevented()) {
return;
}
_el.parent(this._config.parentTrigger).addClass(this._config.activeClass);
if (this._config.toggle) {
this._hide(_el.parent(this._config.parentTrigger).siblings().children(this._config.subMenu + '.' + this._config.collapseInClass).attr('aria-expanded', false));
}
_el.removeClass(this._config.collapseClass).addClass(this._config.collapsingClass).height(0);
this.setTransitioning(true);
var complete = function complete() {
_el.removeClass(_this._config.collapsingClass).addClass(_this._config.collapseClass + ' ' + _this._config.collapseInClass).height('').attr('aria-expanded', true);
_this.setTransitioning(false);
_el.trigger(Event.SHOWN);
};
if (!Util.supportsTransitionEnd()) {
complete();
return;
}
_el.height(_el[0].scrollHeight).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
};
MetisMenu.prototype._hide = function _hide(element) {
if (this._transitioning || !$(element).hasClass(this._config.collapseInClass)) {
return;
}
var _this = this;
var _el = $(element);
var startEvent = $.Event(Event.HIDE);
_el.trigger(startEvent);
if (startEvent.isDefaultPrevented()) {
return;
}
_el.parent(this._config.parentTrigger).removeClass(this._config.activeClass);
_el.height(_el.height())[0].offsetHeight;
_el.addClass(this._config.collapsingClass).removeClass(this._config.collapseClass).removeClass(this._config.collapseInClass);
this.setTransitioning(true);
var complete = function complete() {
if (_this._transitioning && _this._config.onTransitionEnd) {
_this._config.onTransitionEnd();
}
_this.setTransitioning(false);
_el.trigger(Event.HIDDEN);
_el.removeClass(_this._config.collapsingClass).addClass(_this._config.collapseClass).attr('aria-expanded', false);
};
if (!Util.supportsTransitionEnd()) {
complete();
return;
}
_el.height() == 0 || _el.css('display') == 'none' ? complete() : _el.height(0).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
};
MetisMenu.prototype.setTransitioning = function setTransitioning(isTransitioning) {
this._transitioning = isTransitioning;
};
MetisMenu.prototype.dispose = function dispose() {
$.removeData(this._element, DATA_KEY);
$(this._element).find(this._config.parentTrigger).has(this._config.subMenu).children(this._config.triggerElement).off('click');
this._transitioning = null;
this._config = null;
this._element = null;
};
MetisMenu.prototype._getConfig = function _getConfig(config) {
config = $.extend({}, Default, config);
return config;
};
MetisMenu._jQueryInterface = function _jQueryInterface(config) {
return this.each(function () {
var $this = $(this);
var data = $this.data(DATA_KEY);
var _config = $.extend({}, Default, $this.data(), (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' && config);
if (!data && /dispose/.test(config)) {
this.dispose();
}
if (!data) {
data = new MetisMenu(this, _config);
$this.data(DATA_KEY, data);
}
if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config]();
}
});
};
return MetisMenu;
}();
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = MetisMenu._jQueryInterface;
$.fn[NAME].Constructor = MetisMenu;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return MetisMenu._jQueryInterface;
};
return MetisMenu;
}(jQuery);
});
I don't know why this code is having conflict with the dismissal of bootstrap modal dialog. Since, I am beginner in JavaScript/JQuery I am unable to find which section of above code is causing problem.
Thanks in advance.

How to close the first menu collapse when the second one is open?

I have a site built with "Drupal 8" and "Bootstrap 3". I created in the header, a menu collapse on the left and a menu collapse on the right.
How to close the first menu collapse when the second is open ?
And vice versa ?
Here are the two menus :
id="navbar-collapse-first"
id="navbar-collapse-second"
What should I add to my JS file.
Here is the contents of the file collapse.js :
/* ========================================================================
* Bootstrap: collapse.js v3.3.7
* http://getbootstrap.com/javascript/#collapse
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
/* jshint latedef: false */
+function ($) {
'use strict';
// COLLAPSE PUBLIC CLASS DEFINITION
// ================================
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
'[data-toggle="collapse"][data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
Collapse.VERSION = '3.3.7'
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
toggle: true
}
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var activesData
var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
if (actives && actives.length) {
activesData = actives.data('bs.collapse')
if (activesData && activesData.transitioning) return
}
var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
if (actives && actives.length) {
Plugin.call(actives, 'hide')
activesData || actives.data('bs.collapse', null)
}
var dimension = this.dimension()
this.$element
.removeClass('collapse')
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('collapse in')[dimension]('')
this.transitioning = 0
this.$element
.trigger('shown.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
}
Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return
var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
this.$element
.addClass('collapsing')
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
this.transitioning = 0
this.$element
.removeClass('collapsing')
.addClass('collapse')
.trigger('hidden.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
this.$element
[dimension](0)
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}
Collapse.prototype.toggle = function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.collapse
$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse
// COLLAPSE NO CONFLICT
// ====================
$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}
// COLLAPSE DATA-API
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var $this = $(this)
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
Plugin.call($target, option)
})
$('#navbar-collapse-first').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-first').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-second').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-second').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
}(jQuery);

Following the bootstrap doc, I think you could test something like this :
$('#navbar-collapse-first').on('show.bs.collapse', function () {
$('#navbar-collapse-second').collapse('hide');
})
$('#navbar-collapse-second').on('show.bs.collapse', function () {
$('#navbar-collapse-first').collapse('hide');
})

Issues in toggle sidebar menu with bootstrap

I am working with shopify website, in that sidebar menu, need work like this link http://jsfiddle.net/wasimkazi/CGsJH/2/
I mean when click an one link, another link should be hide(if this link alreay opened).
This is bootstrap used:
!function ($) {
"use strict"; // jshint ;_;
/* COLLAPSE PUBLIC CLASS DEFINITION
* ================================ */
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.collapse.defaults, options)
if (this.options.parent) {
this.$parent = $(this.options.parent)
}
this.options.toggle && this.toggle()
}
Collapse.prototype = {
constructor: Collapse
, dimension: function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
, show: function () {
var dimension
, scroll
, actives
, hasData
if (this.transitioning) return
dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-'))
actives = this.$parent && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) {
hasData = actives.data('collapse')
if (hasData && hasData.transitioning) return
actives.collapse('hide')
hasData || actives.data('collapse', null)
}
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
}
, hide: function () {
var dimension
if (this.transitioning) return
dimension = this.dimension()
this.reset(this.$element[dimension]())
this.transition('removeClass', $.Event('hide'), 'hidden')
this.$element[dimension](0)
}
, reset: function (size) {
var dimension = this.dimension()
this.$element
.removeClass('collapse')
[dimension](size || 'auto')
[0].offsetWidth
this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
return this
}
, transition: function (method, startEvent, completeEvent) {
var that = this
, complete = function () {
if (startEvent.type == 'show') that.reset()
that.transitioning = 0
that.$element.trigger(completeEvent)
}
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
this.transitioning = 1
this.$element[method]('in')
$.support.transition && this.$element.hasClass('collapse') ?
this.$element.one($.support.transition.end, complete) :
complete()
}
, toggle: function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
}
/* COLLAPSIBLE PLUGIN DEFINITION
* ============================== */
$.fn.collapse = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('collapse')
, options = typeof option == 'object' && option
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.collapse.defaults = {
toggle: true
}
$.fn.collapse.Constructor = Collapse
/* COLLAPSIBLE DATA-API
* ==================== */
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href
, target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
, option = $(target).data('collapse') ? 'toggle' : $this.data()
$this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
$(target).collapse(option)
})
}(window.jQuery);

Since you can't modify the HTML to make it an accordion, you can use the show event for collapse and hide the already shown section.
$(document).ready(function () {
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
})
})
See fiddle

wanted to maintain the state of drop down menu in smaller wiondows

I am using twitter bootstrap for my navigation bar...
when i reduce the browser window you can see a button on the top....
when you click the button you would see a drop down menu....
but when i click the link inside the drop down menu....it will take to another page...but the drop down menu will collapse....
how to maintain the state of the drop down menu even when it moves to another page....
!function ($) {
"use strict"; // jshint ;_;
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function (e) {
var $this = $(this)
, $parent
, isActive
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
$parent.toggleClass('open')
}
$this.focus()
return false
}
, keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) {
if (e.which == 27) $parent.find(toggle).focus()
return $this.click()
}
$items = $('[role=menu] li:not(.divider):visible a', $parent)
if (!$items.length) return
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.focus()
}
}
function clearMenus() {
$(toggle).each(function () {
getParent($(this)).removeClass('open')
})
}
function getParent($this) {
var selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = selector && $(selector)
if (!$parent || !$parent.length) $parent = $this.parent()
return $parent
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
var old = $.fn.dropdown
$.fn.dropdown = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* DROPDOWN NO CONFLICT
* ==================== */
$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);

The page is reloaded to a new page, new content (including navbar) etc

How to add a "class" to "body" if the collapse menu is open?

My site works with "Drupal 8" and "Bootstrap 3".
I created a collapse menu. How to add a "class" to "body" if the collapse menu is open ?
I want to add the following "class" :
.overlay-is-navbar-collapse {
overflow: hidden;
}
When the id="navbar-collapse-first" menu is open.
Following the answer
I pasted the given code in response to the end of my file. It works, but is this corect ?
/* ========================================================================
* Bootstrap: collapse.js v3.3.7
* http://getbootstrap.com/javascript/#collapse
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
/* jshint latedef: false */
+function ($) {
'use strict';
// COLLAPSE PUBLIC CLASS DEFINITION
// ================================
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
'[data-toggle="collapse"][data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
Collapse.VERSION = '3.3.7'
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
toggle: true
}
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var activesData
var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
if (actives && actives.length) {
activesData = actives.data('bs.collapse')
if (activesData && activesData.transitioning) return
}
var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
if (actives && actives.length) {
Plugin.call(actives, 'hide')
activesData || actives.data('bs.collapse', null)
}
var dimension = this.dimension()
this.$element
.removeClass('collapse')
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('collapse in')[dimension]('')
this.transitioning = 0
this.$element
.trigger('shown.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
}
Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return
var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
this.$element
.addClass('collapsing')
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
this.transitioning = 0
this.$element
.removeClass('collapsing')
.addClass('collapse')
.trigger('hidden.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
this.$element
[dimension](0)
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}
Collapse.prototype.toggle = function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.collapse
$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse
// COLLAPSE NO CONFLICT
// ====================
$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}
// COLLAPSE DATA-API
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var $this = $(this)
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
Plugin.call($target, option)
})
$('#navbar-collapse-first').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-first').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
}(jQuery);

In the bootstrap 3, try it.
$('#navbar-collapse-first').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-first').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-second').on('show.bs.collapse', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#navbar-collapse-second').on('hide.bs.collapse', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});

With pure Javascript (no jQuery needed).
If you want to TOGGLE a class use:
document.querySelector("#my-toggle-btn").addEventListener("click", function(){
document.querySelector("body").classList.toggle("yourclass");
});
If you just want to add the class once use:
document.querySelector("#my-toggle-btn").addEventListener("click", function(){
document.querySelector("body").classList.add("yourclass");
});
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

We Keep Coding

JavaScript is the programming language of the Web.

How to override a JS file with Bootstrap and Drupal? - javascript

Related

Bootstrap Modal Doesn't dismiss due to code conflict

How to close the first menu collapse when the second one is open?

Issues in toggle sidebar menu with bootstrap

wanted to maintain the state of drop down menu in smaller wiondows

How to add a "class" to "body" if the collapse menu is open?

Categories

Resources