johann-s / bs-breakpoints Goto Github PK

A plugin which detect Bootstrap 4 breakpoints and emit when there is a change

License: MIT License

JavaScript 65.72% HTML 34.28%

bootstrap bootstrap4 bootstrap-4 breakpoint breakpoints breakpoint-detection breakpoints-plugin vanilla-js vanillajs vanilla-javascript

bs-breakpoints's Introduction

bs-breakpoints

A plugin which detect Bootstrap 4 breakpoints and emit when there is a change.

You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.

Features:

Works with Bootstrap 4
Works without dependencies and jQuery
Can work with jQuery if detected
Detect custom breakpoints in CSS properties
Built in UMD to be used everywhere
Small, only 2kb and less if you gzip it

Install
How to use it
Methods
Events
Support me
License

Install

With npm or yarn

npm install bs-breakpoints --save

// yarn
yarn add bs-breakpoints

CDN

CDN	Link
jsDelivr	`https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.js`
jsDelivr, minified	`https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.min.js`

How to use it

You should wait for the document ready event and call the init method to detect breakpoint changes. We expose one global variable available everywhere: bsBreakpoints

Vanilla JS

document.addEventListener('DOMContentLoaded', function () {
  bsBreakpoints.init()
})

With jQuery

$(document).ready(function () {
  bsBreakpoints.init()
})

Use it with npm

import bsBreakpoints from 'bs-breakpoints'

For more examples check out this file.

This library is UMD ready so you can use it everywhere.

Methods

init

Will detect the current breakpoint and emit init.bs.breakpoint event.

It'll add a listener on the window resize event and emit new.bs.breakpoint event.

detectBreakpoint

Detect the current breakpoint and return it.

getCurrentBreakpoint

Return the current breakpoint.

Events

init.bs.breakpoint

Emitted just once when bsBreakpoints.init() is called.

This event contains the current breakpoint in the detail attribute in VanillaJS and for those who use jQuery we add a breakpoint key in jQuery's events.

new.bs.breakpoint

This event is emitted when there is a breakpoint changes.

This event contains the current breakpoint in the detail attribute in VanillaJS and for those who use jQuery we add a breakpoint key in jQuery's events.

Support me

If you want to thank me, you can support me and become my Patron

License

MIT

bs-breakpoints's People

Contributors

Stargazers

Watchers

Forkers

horrorchix89 matteomonti-bo kernello uplynxed lizbnet

bs-breakpoints's Issues

bsBreakpoint is not defined

Hello @Johann-S !

I tried to install your library to my BS4 project without success. I use laravel mix (webpack based) compilation.

All my js files:

becomes one another big app-landing.js file

that I include before </body>:

...
        </main>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <script src="{{ mix('landing/js/app-landing.js') }}"></script>
    </body>
</html>

app-landing.js (1st image) content:

require('./bootstrap');
require('./custom');

In bootstrap.js file I put your library line. Full file content:

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
    //!!!here
    require('bs-breakpoints');
    require('jquery.easing');

    //lg
    require('lightgallery');
    require('lg-zoom');

    //fontawesome
    require('./fontawesome');
} catch (e) {}

And in custom.js I put two lines:

...
//all loaded
$(document).ready(function() {
    console.log('loaded');
    bsBreakpoints.init();
    console.log(bsBreakpoints);
...

Finally in console:

What I'm doing wrong?

p.s. https://github.com/sachinchoolur/lightGallery library works fine in same situation.

Usage with jQuery

Hey thanks for the plugin - this looks great but I'm struggling to use it properly with jQuery

I can see the breakpoint if I query it like so:
console.log($.Event(bsBreakpoints.getCurrentBreakpoint()).type);

but reading your documentation I believe I should be able to access the breakpoint type on change by default? Could you please provide an example of the following:

"when breakpoint type changes fire XXX"

I could put it within a wrapper like: $(window).on('load resize scroll', function () { }
But I believe this has already been taken care of so not the correct way to handle it?

Not Working in IE 11

Bs-breakpoint is returning undefined in IE 11 although it is returning correct value in chrome

Conditional

How to use this with conditional?

Ex. if( bsBreakpoints() == "xs" ) { // do something } else { // do something }

Thanks

init.bs.breakpoint not working under iOS 7.1.2

Hi I ran the following jQuery code under Safari on an iPhone 4 with iOS 7.1.2:

$(window).on('init.bs.breakpoint', function (e) {
alert('init ' + e.breakpoint);
})

e.breakpoint ended up being null.

Do you know is bs-breakpoints works under iOS 7 or do you know what the issue may be?

Bootstrap 5 adds the bs- prefix by default, turning properties like --breakpoint-sm into --bs-breakpoint-sm.
To not lose BS4 support I recommend checking if the --breakpoint-sm formatted property names return NaN, and then attempting to get the prefixed ones.

See my PR #36

window is undefined and result is NULL in combination with Next.JS

I've tried to use a package in Next.JS project with server-side rendering SSR.

On first reload window is not defined error is thrown.

When a component is rendered, state value for a breakpoint is null

Get actual breakpoints from defined BS4 css custom properties.

Is code getting actual breakpoints also from defined BS4 CSS custom properties? It seems they are only hardcoded inside script? Or I'm wrong?
Of course, values of breakpoints may vary from project to project. So the definition in the script would then have to be changed.
As you know, there are available CSS custom properties from which the current breakpoints values can be read:

:root {
...
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
...
}

What do you think?

Discussion o about this twbs/bootstrap#25124 (comment)