A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

@adamschwartz here is a PR to merge my vex2 library back into vex as a major version release.

I had to copy my changes from vex2 back into my fork of vex, in order to make the PR, and lost the commit history - if you're interested in seeing the gritty details of how these changes came to life, you can check out vex2.

For a list of breaking changes, see UPGRADING.md in the root of the project.

In summary:

1. All of the examples in the original vex documentation are forward compatible with this fork (win!)
2. vex.dialog got split off and rewritten as a plugin, which I maintain here and use in the docs.
3. I stuck with ES5/Grunt/Browserify because I didn't feel like vex was complicated enough to warrant switching to newer tech

My biggest question is if my documentation changes are compatible with the HubSpot vex docs at http://github.hubspot.com/vex. Look at the changes I made and let me know!

Thanks!

The latest commit (648c677eba441907d00a6ec4f855c583b49ffcf3) introduced a check for hasAnimation which prevents the closing animation from happening. The logic looks inverted:

    hasAnimation = $vex.css('animationName') != 'none' && $vex.css('animationDuration') != '0s'

    if animationEndSupport && hasAnimation
       unless beforeClose() is false
             $vex
                .unbind(vex.animationEndEvent).bind(vex.animationEndEvent, -> close())
                .addClass(vex.baseClassNames.closing)

     else
        unless beforeClose() is false
            close()

As far as I can understand, the intent is to animate the close if no current animation is running. Otherwise just close it without interrupting the existing animation. However the logic is inverted such that it won't animate if no current animation is running. The fix:

    if animationEndSupport && !hasAnimation
        unless beforeClose() is false

Great library, Demo's are looking awesome. I want to implement in nodeJS/Express/Jade project but i always get ReferenceError can't find variable 'vex' I have include vex.dialog.js and vex.js, vex.css and vex-themse-os.css in my layout jade and in my Jade for the home page i wanna show a simple alert to get started like this

extends  layouts/layout
block content
    .page
        .container
        .content.text-center
            .heading
                h2 Home

                .border

        script.
            vex.dialog.confirm
            message: 'Are you absolutely sure you want to destroy the alien planet?'

It will give always the reference error Please give instructions what am I doing wrong here?

So in IE 11 the dialog seems to flick when you close it. I tried looking into the source files a bit, but wasn't able to figure it out.

See here: http://jsfiddle.net/Yottabyte/ka7kutz2/5/

It doesn't do it every time, so keep clicking the "click" and you'll eventually see it. As it's fading out, it'll reappear in its completed state for a split second. It happens to me once every 4 tries or something. Sometimes it'll happen every time I do it.

I’m creating a new issue about this because I notice that adamschwartz just merged hugomrdias’ PR 71, making NPM distribution a possibility…which is great. Thank you!

But… it doesn’t appear that folks realize that using vex.dialog.js with CommonJS/Browserify won’t work in the case of (by my count) about 60% of all Vex examples posted by Adam over date because of CommonJS namespacing.

In particular, if you require under CommonJS vex.dialog.js,the key methodvex.close() is undefined. (There is no such thing as vex.dialog.close(),of course.) To reproduce the problem, try Browserify'ing some of Adam's JSFiddle examples, such as:

http://jsfiddle.net/adamschwartz/Lrq84/

or

http://jsfiddle.net/adamschwartz/r27K5/show/light/ which is described in depth here https://github.com/HubSpot/vex/issues/59

Vex currently offers:

   vex.dialog.alert()
   vex.dialog.confirm()
   vex.dialog.prompt()
   vex.dialog.open()

As a solution to this namespacing problem, my personal taste would NOT be to make vex.close() available to the vex.dialog object, but rather to create a new method named vex.dialog.close(). But I'll be happy for any fix that will allow me to Browserify my existing Vex dialogs, which are dependent on vex.close()

I can't make vex.combined work with requireJS. It seems to only work when using the separate vex.js and vex.diaolog.js ( like in the AMD exemple). I was hoping to just load the vex.combined and be able to use vex.dialog. Possible?

Modified dom layout to insert the overlay div in the body instead of inside element root. Modified css to account for this change. Reason for change is that scrolling is absolutely broken on the existing structure so I changed it. You can now scroll properly when the vex modal is taller than the viewport.

Hello,

I'm proposing a check if the $vex object has any animation properties set to find out whether or not we need to listen to animationEndEvent. If animation properties are not set, animationEndEvent doesn't fire and the dialog doesn't close.

This has been discussed in a different PR: https://github.com/HubSpot/vex/pull/70

I didn't remove the grunt-contrib-compass task, in case you'd like to keep using it.

I diffed all the output files and they are the same as before (apart from comments) when building with Compass.

When building with grunt-sass it's a bit harder to diff the files due to difference in output style, but I believe the output is the same.

Is it possible to use this inside electronjs apps? since window.prompt is not an option inside electronjs?

apparently not all the methods in the object are available inside electronjs

Via aria attributes and trapping the tab key inside the dialogs

It introduces three options:

    - ariaMainContent e.g. '#main-content'
    - trapTabKey e.g. true
    - focusFirstInput e.g. true

Hi all,

We're using this code in one of our projects and I wanted to get some feedback here as well. Pls let me know if you think this is not a proper approach or if there's any other tweaks you'd like to address? We're looking forward to have this as a built in feature.

I left out the focus "toggle" before opening and after closing the dialogs. Mostly because I'm not sure yet we should do it. Currently it looks something like this:

// before open
focusedElementBeforeModal = jQuery(':focus')

// bind on vexClose with
focusedElementBeforeModal.focus()

Let me know if you think it's a good fit and I can add it here too. The implementation here is pretty much the same as the incredible accessible modal article which was based on some w3c pseudo code.

cheers

Found nothing in the documentation about this. I want to be able to bind the Enter and Esc keys to the different buttons in the various Vex pop-up variants. Example Code (which doesn’t work): vex.dialog.buttons.YES.text = 'Continue'; vex.dialog.buttons.NO.text = 'Cancel'; vex.dialog.confirm({ message: 'Any kind of question', callback: function(value) { if (value) { console.log('confirm clicked'); function2invoke(param1, param2); } else { console.log('cancel clicked'); differentFunction2invoke(param1, param2); } } }) // make OK button respond to enter key and cancel button respond to escape key $(document).bind("keyup.key13", function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); console.log('keycode clicked: ' + keycode); if (keycode == '13') { console.log('confirm clicked'); function2invoke(param1, param2); } }); $(document).bind("keyup.key27", function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); console.log('keycode clicked: ' + keycode); if (keycode == '27') { console.log('cancel clicked'); differentFunction2invoke(param1, param2); } });

For one reason and another we had a vex dialog without any animation around close. There is code to handle this in vex:

  // Detect if the content el has any CSS animations defined
  var style = window.getComputedStyle(this.contentEl)
  function hasAnimationPre (prefix) {
    return style.getPropertyValue(prefix + 'animation-name') !== 'none' && style.getPropertyValue(prefix + 'animation-duration') !== '0s'
  }
  var hasAnimation = hasAnimationPre('') || hasAnimationPre('-webkit-') || hasAnimationPre('-moz-') || hasAnimationPre('-o-')

That (I guess) checks to see if the open has an animation and assumes there is one for close - but that seems ~reasonable I guess. What is not working is that: getPropertyValue('-moz-animation-name') returns "" and not 'none' on Google Chrome - and same for '-o-animation-name'. So this code-path can't possibly work.

hasAnimationPre(prefix) should be extended to check for empty / undefined states and bail out - as an example:

    return style.getPropertyValue(prefix + 'animation-name') !== 'none' &&
              style.getPropertyValue(prefix + 'animation-name') !== '' &&
              style.getPropertyValue(prefix + 'animation-duration') !== '0s'

Would be wonderful to have a test for that too I guess.

I'm a happy user of Vex for a browser extension. When I submit a new version of my extension to the Firefox add-on store, I get these warnings:

Unsafe assignment to innerHTML Warning: Due to both security and performance concerns, this may not be set using dynamic values which have not been adequately sanitized. This can lead to security issues or fairly serious performance degradation.

It lists these instances:

vex/vex.min.js line 2 column 3333
vex/vex.min.js line 2 column 3447
vex/vex.combined.min.js line 2 column 3339
vex/vex.combined.min.js line 2 column 3453
vex/vex.combined.min.js line 2 column 7671
vex/vex.combined.min.js line 2 column 7785

Sorry it's for the minified version, but I suppose you can just grep through the codebase anyway.

The idea is that the extension is at risk of being taken off the store because of this sort of thing. My extension has been out for a year and a half now and I've never heard a peep from Mozilla about this, plus it's only a "warning", it doesn't stop you from uploading the version. So I doubt it's something I really need to worry about. Still, I thought it would be worth having on the issue tracker, as it may discourage people from using Vex in browser extensions.

The following code opens and closes the dialog almost at the same time. So there is no time to click OK or Close or interact with the dialog in any kind.

<html>
<a class="btn btn-primary" href="#" onclick="myFunction()">
Click here
</a>
</html>

<script>
function myFunction() {
    vex.defaultOptions.className = 'vex-theme-flat-attack'
    vex.dialog.alert('Thanks for checking out vex!')
}
</script>

When clicking the RUN button within the following links, the demos don't work!!

https://github.hubspot.com/vex/api/advanced/#options

https://github.hubspot.com/vex/api/basic/#buttons (both buttons don't work in this section)

Using

"vex-dialog": {
      "version": "1.1.0"
}

"vex-js": {
      "version": "4.1.0"
}

There could be an easy alternative to vex.close() that would gather the form data before closing the pop-up, either a separate method like vex.submit(), or vex.close(bool shouldSubmit), that wouldn't count as cancel.

Currently, programmatically, I can only do

el.dispatchEvent(new Event('submit'));

with el being the form, in order for the onSubmit handler to run and the provided callback to work properly.