In Safari, the dropdown menu stays open

1. after clicking an item and
2. on clicking outside of the dropdown menu

You can test it here http://thednp.github.io/bootstrap.native/#exampleDropdown

In Chrome, the dropdown closes in these two scenarios which I'm guessing is the expected behavior?

p.s. thanks for this. nice to be able to use some simple bootstrap elements without having to add jQuery / giant gorilla.

Hi!
I tried the "Form dropdown" component.
It works fine, but when I click elsewhere, it does not close immediately (it takes like half a second).
I tried using Bootstrap and jQuery and it closes immediately.
Also, I inserted it in a menu like this:

<header class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/">
                <img src="logo/small.png" alt="Image" id="logo" class="pull-left" />
            </a>
        </div>
        <div class="navbar-right">
            <div class="collapse navbar-collapse" id="main-menu">
              <ul class="nav navbar-nav">
                <li><a href="#">Route1</a></li>
                <li><a href="#">Route2</a></li>
                <li><a href="#">Route3</a></li>
                <li><a href="#">Route4</a></li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown">Form Dropdown</a>
                    <form class="form-vertical dropdown-menu" style="padding:15px">
                        <div class="form-group">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox"> Remember me</label>
                        </div>
                        <button type="submit" class="btn btn-default">Login</button>
                    </form>
                </li>
              </ul>
            </div>
        </div>
    </div>
</header>

If I do this, the dropdown form doesn't close at all when I click elsewhere.
Still, it does work if I use Bootstrap with jQuery.

Is that a bug or am I doing something wrong?
Thank you in advance.

After roasting and smoking my brain for a good while, trying to implement this, I finally can't go any further.

I have a little color picker library that I'd like to utilize. For that to work nicely, I wanted to implement a "permanent" popover, that would not go away untill it was closed using it's .close() method, or .toggle().

I can trigger the popup, but as soon as I have clicked, it closes again. Why is that? I have made sure, but there is only a single click event, from what I can tell.

Here is the code:

            e._popover = new Popover(e, {
                trigger: "click",
                template: '<div class="popover" role="tooltip">'
                    + '<div class="arrow"></div>'
                    + '<div class="popover-content color-picker"></div>'
                    + '</div>',
            });
            // Re-implementing Popover open and close to allow
            // the color picker to work as expected.
            e._popover.open = function() {
                if (this.popover === null) {
                    this.createPopover();
                    this.stylePopover();
                    this.updatePopover();

                    // Color picker
                    var content = $(this.popover).find(".popover-content")[0];
                    e._picker = new piklor(content, palette);
                    console.log(e._picker);
                    e._picker.colorChosen(function(col){
                        console.log("Color: ",col);
                    });
                    e._picker.open();
                }
            }.bind(e._popover);
            e._popover.close = function() {
                if (this.popover && this.popover !== null && this.popover.classList.contains('in')) {
                    e._picker.close();
                    this.popover.classList.remove('in');
                    this.removePopover();
                }
            }.bind(e._popover);

Any idea? The only source I have not checked yet, but which I highly doubt, is the Piklor instance itself (maybe its clinging to click too, which I doubt.)

The getMaxHeightCollapse method on line 810 of the source javascript only finds the height of the first child element of collapsible nav container with class navbar-collapse. However, there may be more than one child, especially for right-aligned navigation items (The bootstrap example default navbar has 3 children). This breaks functionality where it's expected to have a fully-expanded menu on the hamburger button click.

I made a simple fix with replaces lines 810-812:

this.getMaxHeight = function(l) { // get collapse trueHeight and border
    return getOuterHeight(l.children[0]);
},

with this:

this.getMaxHeight = function(l) { // get collapse trueHeight and border
    var h = 0;
    for (var k = 0; k < l.children.length; k++) {
        h += getOuterHeight(l.children[k]);
    }
    return h;
},

Can you make the fix?

Thanks for this. I like the idea of this project very much. I hope that I can use it more often in future.
Unfortunatley I found a little problem when I tested it with a smaller resolution.

In my case I see a scrollbar on Firefox and Chrome with Bootstrap v3.3.5 at the navbar.
With JQuery and the official JS code there is no scrollbar.

Maybe somebody can look into this?

The code looks like this:

div id="navbar" class="navbar-collapse collapse in" area-expanded="true" style="height: 137px;">

Hi,
right now the modal doesn;t support the events: show.bs.modal, shown.bs.modal, hide.bs.modal and hidden.bs.modal. Would you consider adding them or accepting a PR for that?

(need them for rendering an iframe inside the modal, common practice I guess)

Regards Dimitris

on my android (4.1.2) phone with chrome 43.0.2357.78 (and also with the 'Internet' app) the navbar cannot be toggled, this means the menu items are not visible and navigating a site is impossible.

first experienced on my own site but it actually happens on http://thednp.github.io/bootstrap.native/, too.

• only occurs on the actual device; inside the chrome developer tools things work just fine
• while loading the page an Uncaught ReferenceError: Popover is not defined(anonymous function) @ scripts.js:5 error occurs (via: Remote Debugging on Android with Chrome)

Unlike the original plugin, this script can successfully handle later added alerts into the DOM.

FWICT, the original plugin handles this fine, making this claim inaccurate. Do you have a counterexample?

ref: tagawa/bootstrap-without-jquery#43 (comment)

Thanks for the heads-up. This is totally amazing and I can't believe this isn't part of upstream... xD At least, I am definitively going to dump jQuery and "the original" Bootstrap JS. It eats up too much JS anyway...

Also. Will you add bower and/or NPM support?

Hi,
Is it possible to generate a version in .ts or in d.ts of the bootstrap-native.js ?
Thanks

Mathieu

I am currently trying to figure out how to make the scripts less dependent of polyfill dependency for IE8-11 and I am thinking I should remove the slid and slide custom events as they don't work with IE9+ at all.

What do you think?

In the readme all the names are starting upper case, but they are actually lower case. bsm.modal vs bsm.Modal. Doesn't make sense to me that this is different from the global variables case. Apart from that, in the global case, why aren't all the classes under a single namespace? It seems wrong littering the window objects with all those generic sounding classes like Button for example.

Simple testcase to reproduce is to take the index.html file provided with the project
Go to line 91 and remove active from the classes
Go to line 101 and add active as a class

Refresh the page and you'll see that the second slide is active by default but you can't navigate anymore

I forgot to mention in my last ticket but this project is awesome

I was wondering if it was possible to programmatically display a modal similar to how I can do $('#modalid).modal('show');

I use this to display nice looking messages if things like post events to insert data didn't work

I found one work around which is to have a hidden button that calls the modal and then call a click() event on the hidden button. I was wondering if there was a better way of handling this

Thanks again for your hard work on this

Hi, still me.
I know it would require some major modifications, but is support for dynamic content planned to be implemented?

The code contains scripts like:

var Tooltips = document.querySelectorAll('[data-toggle=tooltip]'), i = 0, tpl = Tooltips.length;
for (i;i<tpl;i++){  
    var item = Tooltips[i], options = {};
    options.animation = item.getAttribute('data-animation');
    options.placement = item.getAttribute('data-placement');
    options.duration = item.getAttribute('data-duration');
    options.delay = item.getAttribute('data-delay');
    new Tooltip(item,options);
}

The problem with that is that it will not work with dinamically added content (which many sites use).

There are already some events attached to document, such as in:

document.addEventListener('click', this.close, false);

There should be only one event handler for clicks, attached to the document, so that it can work with dynamic content as well.

Although the code would need to be modified in different places, it should not be a big problem per se.
The problem is when there is a FOR cycle like the one I quoted before (which, of course, could not be done), but there should be some kind of work-around for each specific case.

Thank you very much in advance!

Hi

Great alternative to jquery.

I've noticed a bug (?) in the click handler for dropdowns. If you have children in your dropdown link, f.ex a span, and you happen to click on that span the regex /\#$/g.test(target.href) && e.preventDefault(); does not trigger since the target is not the anchor tag itself but one of its children.

Its not a huge issue, but annoying nontheless

For a demo, click on the caret in the Github dropdown on your own project site and watch it add a hash to the url.
http://thednp.github.io/bootstrap.native/

I have a new working code for all modules to work a bit faster, it's a bit more simple and I am also considering packing the bootstrap.native.js file different and not just a concatenation of the modules.

The reason is simple: why write same utility function over and over (addClass or isIE) as well as using module definition for each module when in fact an user gets the all in one package to use it on his web pages, without the need to do require, import, etc.

I really need to know what people think about it.

I just stumbled over the issue fixed in 35622a0 and I cannot use the library because of that. Is it possible to do a hot fix release 1.0.1? Would appreciate that a lot. Thanks! :)

I know bootstrap v4 still in alpha. Im planning to deploy an e commerce app in the next two months using bootstrap v4 alpha-3 and was wondering if I could get rid of jQuery (we only needed it for god damn selectors and jQuery plugins...).

Thanks !

Maybe just an issue in the demo but the javascript generated alert cannot be closed.

-> http://recordit.co/JEfaO1TM04

When building the library with gulp, I noticed there is a difference between the code in lib/ and in dist/ in the repository, and it is in the behavior of collapse:
in lib/ - https://github.com/thednp/bootstrap.native/blob/ddd5d7b/lib/collapse-native.js#L120-L124
in dist/ -https://github.com/thednp/bootstrap.native/blob/ddd5d7b/dist/bootstrap-native.js#L783-L785

1133TypeError: undefined is not an object (evaluating 'options.backdrop')

this.options.backdrop = options.backdrop === 'false' ? false : true;
this.options.keyboard = options.keyboard === 'false' ? false : true;
this.options.content = options.content;

It doesn't appear to have any default values set, is this intentional? I see it tries to populate these via the data attribute on load? (Maybe VueJS is causing issues)

I am trying to use an already existing modal template in the dom using (VueJs):

modal = this.bootstrap.modal(document.getElementById('#uploadModal'), {
backdrop: true,
});
modal.open();

Which I thought would simply open the existing modal?

After sorting the above and passing in options.backdrop I simply receive:

TypeError: this.init is not a function. (In 'this.init()', 'this.init' is undefined)

When creating an instance of a widget (for example a Modal), why isn't the options parameter optional?

This is my use case:

var modalElement = document.getElementById("myModal");

// this works:
new Modal(modalElement, {}).open();

// this won't work:
new Modal(modalElement).open();

(jsfiddle: http://jsfiddle.net/0w8s27a5/)

my suggestion is to have something like this in each of the constructor functions:

options = options || {};

Hi,

Currently, we are using the bootstrap.native.js and we found a few issues involving Internet Explorer 11.

With the bootstrap carousel, it doesn't work at all in Internet Explorer 11. It works only if we insert this polyfill code along with the native javascript.

    if ( typeof window.CustomEvent === "function" ) return false;

    function CustomEvent ( event, params ) {
             params = params || { bubbles: false, cancelable: false, detail: undefined };
             var evt = document.createEvent( 'CustomEvent' );
             evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
             return evt;
             }

    CustomEvent.prototype = window.Event.prototype;

    window.CustomEvent = CustomEvent;

Also, we are using a modal that opens up an audio dialog. The modal works when clicking on it to open it up but when it is closed, the audio keeps on playing. Alas, we fixed it via:

function pauseReset(){
        var sounds = document.getElementsByTagName('audio');
          for(var i=0; i<sounds.length; i++) {
            sounds[i].pause();
            sounds[i].currentTime = 0;
          }
    }

    document.onkeydown = function(evt) {
        evt = evt || window.event;
        if (evt.keyCode == 27) {
            pauseReset();
        }
    };


   document.addEventListener('click', function(e){  
     if (document.querySelector('.modal-content').contains(e.target)){
        // inside box
      } else{
         //outside box 
          pauseReset();
      }
    });`

Just wondering if these issues on Internet Explorer 11 will be fixed with the next release instead of having to use these polyfill javascript to fix it.

Thanks

Bootstraps implementation prevents the closing of the dropdown when the user has clicked on an element inside a form.

To get the same behavior the following change is sufficent and is basically what the original bootstrap dropdown code is doing.

      this.handle = function(e) { // fix some Safari bug with <button>
        var target = e.target || e.currentTarget;
        if ( target === self.menu || target.parentNode === self.menu ) {
          self.toggle(e);
        } else if (target.closest('.dropdown form')) {
          // this prevents the dropdown from closing, when there was a click
          // in a form
          e.preventDefault();
          return;
        } else {
          self.close(200);
        }
        /\#$/g.test(target.href) && e.preventDefault();
      };

I wanted to share this as your library is really create.

Here is sample dropdown and modal dialogs. It's all not working.

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.9/bootstrap-native.min.js" charset="utf-8"></script>

</head>
<body>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    Hello world
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>


    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
</body>
</html>

Presumably this would be fixed by changing the regex to match /\bin\b/ instead of /in/ in the toggle function.

I came across the following issue. In Bootstrap it's possible to close a modal window and open up the next one triggered by the html data attributes. It however doesn't seem to work in bootstrap.native. Since it's quite an important item (used in login modal -> forgot your pasword modal)

I made a working version in codepen with the default bootstrap, so you get the idea. http://codepen.io/studiotwist/pen/zqdrKR

Is there a way to close the dropdown when clicking anywhere/pressing escape?

This library looks awesome. Not only do I want to drop the jQuery dependency, but I'd also like to drop a bunch of features I'm not going to use.

I'm not that familiar with gulp, but after a quick browse of the API it seems that if gulp.src('lib/*.js') was changed to an array of the lib files it would make it easier for folks to fork and comment out unwanted components. Would you be interested in a pull-request that breaks out the src files into an array?

Thanks again!

Can you allow arbitrary depth of nested children? At the moment the menu only checks for
target === self.menu || target.parentNode === self.menu || target.parentNode.parentNode === self.menu
a depth of two. I have some complicated menu buttons that are formatted using many nested divs.

Hi.

Is there any way to manually close a collapse created dynamically through:

var menuCollapse = new Collapse("#menu-button");

There is a .close(e) method, but it requires an event parameter.

Is there any way I can do it manually, asynchronously? It'd be really useful.
Thank you very much!

Here is a jsfiddle that demonstrates the bug: http://jsfiddle.net/dmt0z2rx/
With jQuery and bootstrap's original javascript it works: http://jsfiddle.net/qkc6bLha/
The bug happens because when the first modal closes, it removes the overlay after a short delay, and the second modal uses that same overlay element, which gets removed.
I fixed the bug in my fork by using a separate overlay element for each modal: HelloGravity@f84a093

Hi!

I tried this snippet:
http://www.bootply.com/98624

And I noticed a difference in behaviour between this and the original Bootstrap.

Now, I know they don't have to be exactly the same, but in this case the behaviour of Bootstrap is probably better.

If I am using Bootstrap Native, when I click on a link to a modal button, I get redirected to whatever anchor there is in that tag.
This already is not really nice to see, but is per se no big deal.
The problem is when the button is, like in that example, embedded in a navbar: in this case, the modal window get closed immediately.

What is needed (I just tried) is e.preventDefault() in modal-native.js where you add the events to the triggers:

var triggers = document.querySelectorAll('[data-toggle="modal"]'), tgl = triggers.length, i = 0;
for ( i;i<tgl;i++ ) {
    triggers[i].addEventListener('click', function(e) {
        e.preventDefault();
        var b = e.target,
        s = b.getAttribute('data-target') && b.getAttribute('data-target').replace('#','')
        || b.getAttribute('href') && b.getAttribute('href').replace('#','');
        if ( document.getElementById( s ) === self.modal ) {
            self.open()
        }
    })
}

Thank you very much for your library.

The tooltips & popovers only work on hover, not on focus. In terms of usability this should be something that needs to be added.

Is there a way to launch the modals dynamically (not with data attributes) (eg: $('.modal').modal();) but in Vanilla JS? I couldn't find anything about it.

Dropdown menu does not close after clicking any meny item.
This happens even on example http://thednp.github.io/bootstrap.native/#exampleDropdown in every browser, I've checked IE11, Chrome and Firefox.
Original bootstrap javascript has such behavior and works well http://getbootstrap.com/javascript/#dropdowns

One quick question: do you use SemVer? I normally assume that it's used, but just wanted to double-check.

Alerts added to the document using DOM operations in JS cannot be dismissed. A testcase is attached below:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="user-messages" class="container col-sm-12">
   <!-- <div class="alert alert-danger fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">&times;</a>
    {message 1}
   </div> -->
  </div>
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script>
  <script type="text/javascript">
  function showMessage (html_msg) {
    var a = document.createElement("div");
    a.classList.add("alert", "alert-danger", "fade", "in");
    a.innerHTML = '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>';
    a.innerHTML += html_msg;
    var x = document.getElementById("user-messages");
    x.appendChild(a);
  }
  showMessage("{message 2}");
  </script>
</body>
</html>

In addition, and quite strangely in fact, if you remove the commented out section in the above testcase, the alerts can be dismissed for the user-messages div (but not for any other div).

Issues:

• need to implement a better addClass / removeClass, as currently we are adding 10+ open-modal classes to the body
• the body need a padding right/left when modal-open, just like the new version of the original plugin
• also modal seems to have an overflow issue, we might need to rework the HTML structure
• I'll try to rework this one #30

When attempting to require through Bower, I'm given the full minified file, meaning that I cannot use any of the functions it contains.

(only safari issue)

Slidedown animation is not working properly
See video: http://recordit.co/K1MDbKaIlS (fps is pretty low tho, but it explains the issue properly). THe animation pops over the content in one frame. This only happens on Safari (mac).

Since the last update the event bubbling on dropdown buttons broke. Possible to take a look at that?

Currently working on a fix.

When nesting a collapse it does not update the parent containers height so when opening the child collapse it cuts off the panel.

Working on a solution via the provided "CustomEvent" polyfill.

When adding dynamic elements to a page they are unable to interact with elements they were already present. For example add this into scripts.js and refresh the index page

document.addEventListener('DOMContentLoaded', function waitForDomToFullyLoad(event) {
   var newButton = document.createElement("div");
   newButton.innerHTML = '<button id="TEST1" type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">DYNAMIC BUTTON</button>';
   var modalExample = document.getElementById('exampleModal');
   exampleModal.appendChild(newButton);
});

go to the bottom of the modal examples and click dynamic button

Expected results:
the modal myModal opens

Actual results:
Nothing happens

Hi, there.

I'm personally very interested in backporting this.

I'm willing to help back porting this to v4.

Can you contact me via email if you are interested?

Looks like the latest release is 1.0.0. but npm install bootstrap.native seems to be pulling 0.9.7-npmfix.1.