public
Last active

Fixes to a degree problems relating to using bootstrap and jquery-ui buttons on the same page.

  • Download Gist
bootstrap-button-fix.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
/* ============================================================
* bootstrap-button-fix.js v2.1.0-1.0
* Fixes conflicts between jquery-ui buttons and bootstrap buttons
* To use, first load bootstrap THEN load the jquery-ui-button module
* in order to redefine the button function namespace.
* Lastly, load this file in order to re-implement the functionality
* using a different namespace.
* ============================================================
 
 
/* ============================================================
* bootstrap-button.js v2.1.0
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
 
 
!function ($) {
 
"use strict"; // jshint ;_;
 
 
/* BUTTON PUBLIC CLASS DEFINITION
* ============================== */
 
var CraftyBootstrapButton = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.craftyBootstrapButton.defaults, options)
}
 
CraftyBootstrapButton.prototype.setState = function (state) {
var d = 'disabled'
, $el = this.$element
, data = $el.data()
, val = $el.is('input') ? 'val' : 'html'
 
state = state + 'Text'
data.resetText || $el.data('resetText', $el[val]())
 
$el[val](data[state] || this.options[state])
 
// push to event loop to allow forms to submit
setTimeout(function () {
state == 'loadingText' ?
$el.addClass(d).attr(d, d) :
$el.removeClass(d).removeAttr(d)
}, 0)
}
 
CraftyBootstrapButton.prototype.toggle = function () {
var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
 
$parent && $parent
.find('.active')
.removeClass('active')
 
this.$element.toggleClass('active')
}
 
 
/* BUTTON PLUGIN DEFINITION
* ======================== */
 
$.fn.craftyBootstrapButton = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('craftyBootstrapButton')
, options = typeof option == 'object' && option
 
if (!data) $this.data('craftyBootstrapButton', (data = new CraftyBootstrapButton(this, options)))
if (option == 'toggle') data.toggle()
else if (option) data.setState(option)
})
}
 
$.fn.craftyBootstrapButton.defaults = {
loadingText: 'loading...'
}
 
$.fn.craftyBootstrapButton.Constructor = CraftyBootstrapButton
 
 
/* BUTTON DATA-API
* =============== */
 
$(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.craftyBootstrapButton('toggle')
})
})
 
}(window.jQuery);

Usage in Joomla would be to load bootstrap, then the jquery-ui button script, and finally this fix script.

Anything that attempts to call bootstrap button methods directly will still cause problems, but at least for basic usage both will work side by side.
// We don't need the whole bootstrap framework, but if it is called
// after the editor is loaded it blows away the button widgets so
// call it now just in case
JHtml::_('bootstrap.framework');

    // Joomla JQuery UI consists of
    // core, sortable, widget, mouse, and position
    JHtml::_('jquery.ui',  array('core', 'sortable'), true);

    // the button ui is very important!!
    JHtml::_('script',$this->_basePath.'jquery.ui.button.js', false, true, false, false);

    // now we include an alternate bootstrap button definition
    // which should re-enable 90% of the functionality.  We do not
    // load this on every page, just when we are using jquery.ui.button
    JHtml::_('script',$this->_basePath.'bootstrap-button-fix.js', false, true, false, false);

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.