Skip to content

Major release with important changes and NEW features

Compare
Choose a tag to compare
@thednp thednp released this 26 Jan 15:18
· 622 commits to master since this release

This is a major release that could break backward compatibility (especially for those who rely heavily on JavaScript) as we have renamed some methods, completely revamped components, added more utilities, added original events, improved performance along with other cosmetic changes.

This is a transition version to prepare for a future version aimed at Bootstrap 4. It introduces a dedicated 4kb polyfill for legacy browsers, along with the recommended minifill.js and polyfill.io service.

Utilities

  • added new utilities for event delegation: on(), off()
  • added new utility for triggering original events bootstrapCustomEvents() #81 (comment)
  • added initializeDataAPI utility
  • added selector queryElement() utility
  • added hasClass() utility as suggested #98 (comment) , but implemented with classList
  • fixed getClosest() utility and now can be used by other components as well, like Alert
  • stylePopover() and styleTooltip() are now one common utility called styleTip()

Alert

  • now requires data-dismiss="alert" attribute in order to work, for both DATA API usage and JavaScript
  • the event handler is no longer attached to the document object, but the element with data-dismiss="alert" attribute
  • now the component exposes a single public method close()

Affix

  • if the offset options are set as functions, they are executed on update instead of only at the time of initialization
  • renamed most methods and now we expose a single public method update()
  • major code cleanup and performance improvements

Dropdown

  • added ability to keep the dropdown-menu open via persist: true/false option or data-persist="true" attribute
  • if the trigger is a link, it will event.preventDefault()
  • now the component exposes a single public method toggle()

Button

  • events renamed from bs.change.button to change.bs.button
  • events no longer trigger twice
  • now the component exposes no public method

Tab

  • now can animate height as well via data-height="true" and the CSS from Collapse component
  • because the above, the handler is protected by a isAnimating private boolean

Modal

  • no longer initialize on .modal via DATA API, but on [data-toggle="modal"] elements, while via JavaScript we initialize on a triggering element, also not a modal
  • no longer resizes the backdrop, seems it's not needed
  • the <div class="modal"> object stores the triggering button reference in modal.modalTrigger, and this updates everytime you open a modal by clicking a different trigger button
  • renamed methods from .open() to .show() and .close() to .hide()
  • added .toggle() method
  • reworked event handlers, solving #98

Collapse

  • reworked event handlers, they are not removed and readded anymore, we now have a local variable isAnimating to prevent click
  • renamed open() to show() and close() to hide() methods
  • triggering elements no longer target collapsible elements via class name, only parent accordion
  • some code improvements and major cleanup

Carousel

  • reworked event handlers, they are not removed and readded anymore, we now have a local variable isSliding to prevent click handlers from
  • renamed _slideTo() to slideTo() and _getActiveIndex() to getActiveIndex() methods
  • if no active item is found on initialization, the first carousel item (with the 0 [zero] index) will be made active
  • events also point the relatedTarget like the original plugin
  • the component also stores the direction in the initialization and gets updated on every instance of slideTo()

Popover

  • renamed Popover option dismiss to dismissible
  • renamed methods and only exposing 3 main public methods

Tooltip

  • renamed methods and only exposing 3 main public methods

ScrollSpy

  • reworked all about the component, now the JavaScript initialization should work as expected
  • major performance improvements, the component now should be one of the fastest of it's kind
  • fixed non-window overflowing elements active state processing, now the component will handle level 1 nested containers

All Components

  • added original events to all components
  • major code clean up in all components: total separation of public methods and private methods, removed alot of stuff from each component's this instance, much more readable code, now the library is only ~20Kb minified instead of 38Kb
  • major documentation re-write: added methods, more usage and added events usage guides