realtux / mbox Goto Github PK

24.0 4.0 7.0 79 KB

MaterializeCSS Compatible Alert, Confirmation, and Custom Boxes

CSS 12.20% JavaScript 67.73% HTML 20.07%

mbox's Introduction

Mbox - Materialize Box Maker

Mbox is a quick, simple, lightweight solution to creating Alert, Confirmation, Prompt, and Custom dialogs. Inspired in many ways by bootbox.js for Bootstrap, Mbox is designed to work in the same way, but with MaterializeCSS as its frontend framework.

Mbox is not a DOM terrorist. Whatever windows and wrappers it creates, it removes them once they are done being used.

CDN

<link href="//cdn.bri.io/mbox/dist/mbox-0.0.5.min.css" rel="stylesheet">
<script src="//cdn.bri.io/mbox/dist/mbox-0.0.5.min.js"></script>

Dependencies

MaterializeCSS
jQuery 1.7.2+

Basic Usage

Alert

/**
 * signature: mbox.alert(message[, options[, callback]])
 * message: the message to show the users
 * options[optional]: an object of options (see Options below for options and defaults)
 * callback[optional]: a function to execute after the user clicks 'Ok'
 */

// minimal usage
mbox.alert('Oh noes! You cannot do that right now!')

Confirm

/**
 * signature: mbox.confirm(message[, options[, callback]])
 * message: the message to show the users
 * options[optional]: an object of options (see Options below for options and defaults)
 * callback[optional]: a function to execute after the user clicks 'Ok'
 */

// minimal usage
mbox.confirm('Drugs are bad, are you sure you want to use them?', function(yes) {
    if (yes) {
        console.log('You took the drugs :(')
    }
})

Prompt

/**
 * signature: mbox.prompt(message[, options[, callback]])
 * message: the message to show the users
 * options[optional]: an object of options (see Options below for options and defaults)
 * callback[optional]: a function to execute after the user clicks 'Ok'
 */

// minimal usage
mbox.prompt('Did you star Mbox yet? (yes/no)', function(answer) {
    if (answer === 'yes') {
        console.log('Rock on...')
    } else {
        console.log('Shame')
    }
})

Custom

/**
 * signature: mbox.custom(configuration)
 * configuration: all options to configure a custom mbox modal
 */
mbox.custom({
    message: 'What is your favorite type of pie?',
    options: {}, // see Options below for options and defaults
    buttons: [
        {
            label: 'Pumpkin',
            color: 'orange darken-2',
            callback: function() {
                mbox.alert('Pumpkin is your favorite')
            }
        },
        {
            label: 'Apple',
            color: 'red darken-2',
            callback: function() {
                mbox.alert('Apple is your favorite')
            }
        }
    ]
})

Options

For versions prior 0.0.5

Options can be set anywhere options appears in the method signature or globally like so:

// all options with defaults
mbox.global.options.open_speed = 0; // how fast the modal opens in milliseconds
mbox.global.options.close_speed = 0; // how fast the modal closes in milliseconds

For versions >= 0.0.5

From version >=0.0.5 mbox uses the revealing module pattern so in order to set global close_speed and open_speed you need to use the following methods:

mbox.set_open_speed(speed);
mbox.set_close_speed(speed); 
(where speed is a number)

Locales

By default mbox comes with the the following locales:

English (en)
Greek (el)
Italian (it)
German (de)
Portuguese (pt)

To add a new locale you need to provide the name of the locale and the translations for the OK and CANCEL button like this

mbox.add_locale('pt', {
    OK: 'Está bem',
    CANCEL: 'cancelar'
})

To set a locale from the available locales just call mbox.set_locale with the name of the locale as argument like this

mbox.set_locale('pt');

Change Log

2018-02-07: 0.0.5: mbox now uses the revealing module pattern to avoid exposing private api (@kounelios13)
2017-11-17: 0.0.4: Transfer dependencies to devDependencies (@ismt)
2017-11-16: 0.0.4: replaced mbox.setLocale with mbox.set_locale in docs (@kounelios13)
2017-09-15: 0.0.4: Focus on primary button when modal opens (@ebrian)
2017-08-27: 0.0.3: Configurable modal open/close speed (@ebrian)
2017-08-26: 0.0.2: Locale support (@kounelios13)
2015-12-13: 0.0.1: Initial (@ebrian)

mbox's People

Contributors

Stargazers

Watchers

Forkers

josevte yhchiu nielson266 ekapujiw2002 jobdiogenes kounelios13 seguce92

mbox's Issues

mbox remembers previous options

This happens on branch v1.0.0.

For some reason If I call mbox passing an options object the next time I will call mbox the previous settings will be used.

So if I have the following snippet:

var options = {inDuration:500,outDuration:1800};
mbox.alert("hello",options);

Now If I use mbox.alert("hello") it will use the previous settings object even If I didn't pass it

The only exception is locale and opacity options

mbox is not defined in demo.html

When you open the file demo.html inside the tests folder it will throw an error saying that mbox is not defined.

The reason is that the scipt and link tags that refer to and mbox point to the wrong path.

I can provide a pull request in a few minutes

clean up github pages branch

gh-branch contains the dist files of every version and the test files.

It should only contain the index.html and the scripts/stylesheets it needs and link to mbox cdn for the core functionality

Language manipulation

Is there any way to change the language used or manually renaming the buttons, without using mbox.custom?

Should we use the revealing module pattern?

I have noticed that the way that mbox is written everyone has access to its private api.
That means that anyone can type mbox.open() pass whatever it wants as parameters and get unexpected results.

So I was thinking about using the revealing module pattern so we could expose only the core methods(alert,confirm,prompt) and some helper methods that will help us change the mbox global configuration.

What do you say?

Cannot install mbox in yarn

Hello, i have a problem when install

yarn add https://github.com/ebrian/mbox

[1/4] Resolving packages...
error Package "undefined@undefined" doesn't have a "name".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Throw error if no callback is provided for prompt or confirm?

I was wondering whether it makes sense to have a prompt or a confirm dialog with no callback provided.

Should we throw an error?

locale option not working if not set globally

In the following code close_speed is working but mbox seems to ignore the locale option

mbox.alert("Hello",{locale:'el',close_speed:2000});

mbox.custom doesn't close if mbox.close isn't called inside the callback

Consider the following code:

mbox.custom({
  message:"Hello world",
  buttons:[{label:"Hey",color:'red',callback:function(){
      console.log("You clicked the red button");
  }}]
})

One would expect that after the "You clicked the red button" is shown to the console the mbox will close
However this is not happening and some people may not expect it because it is documented.
So documentation about mbox.custom should be updated(both readme and gh-pages)

[v1.0.0] Add support for all modal options

At v1.0.0 branch only 'inDuration' and outDuration options are supported

http://next.materializecss.com/modals.html#!

`prompt()` doesn't fadeIn/fadeOut gradually

Unlike confirm and alert prompt() doesn't seem to fadeIn/fadeOut gradually

Remove jQuery dependency

Materializecss v1.0 has dropped jQuery dependency.

Here is the link : https://medium.com/@materializecss/materialize-to-1-0-and-beyond-e0233b8ac15

I think that we should also drop jQuery but only after implementing #14 (or maybe implementing #14 by dropping jQuery)

Of course this change means that we should be waiting to roll out mbox v1

@ebrian I would appreciate your opinion on that thought

Little error in package.json

https://github.com/ebrian/mbox/blob/master/package.json

don't need "x" at the end of the file

patch

diff --git a/package.json b/package.json
index 7727bf9..39a8f22 100644
--- a/package.json
+++ b/package.json
@@ -32,4 +32,3 @@
   },
   "homepage": "https://github.com/ebrian/mbox#readme"
 }
-    x
\ No newline at end of file

Close mbox gradually

I think it would be nice to let the user decide whether they want the mbox to just vanish on close or just fade out gradually like bootbox does.
By studying the source code of mbox I believe this line is responsible for this:

close: function() {
            // hide the box
            $('.mbox')
                .hide(0, function() {
                    $(this).closest('.mbox-wrapper').remove();
                });

            // allow scrolling on body again
            $('body').removeClass('mbox-open');

            // unbind all the mbox buttons
            $('.mbox-button').unbind('click');
        }

So I guess we could change the 0 in the hide method to a user defined value.