dialog-promise

Dialog that returns promises

Usage no npm install needed!

<script type="module">
  import dialogPromise from 'https://cdn.skypack.dev/dialog-promise';
</script>

README

dialog-promise

Dialog that returns promises

extending npm-version downloads build dependencies

language: English also available in: Spanish

API

alertPromise, confirmPromise & promptPromise

Implements alert, confirm & prompt functions with Promises

Use

<link rel="stylesheet" type="text/css" href="dialog-promise.css">
<script src="dialog-promise.js"></script>
<button onclick='example2(this)'>example</button>
<script>
function example2(button){
    var theName = "previous Name";
    promptPromise("What's your name?", theName).then(function(name){
        theName = name;
        return confirmPromise("Do you want to know my name?");
    }).then(function(result){
        return alertPromise("Hi "+theName+". My name is DialogPromise");
    }).then(function(){
        button.textContent='try again!';
    },function(err){
        console.log("User Escapes. Don't insist.")
    });
}
</script>

alertPromise, confirmPromise, promptPromise

Recives a mensage (and an object with options). These are versions of the native funcions alert, confirm y prompt

function returned value
alert true
confirm true or false
prompt a string with the entered text

If Escape is pressed or the mouse clicked outside the dialog the function returns a rejected promise.

Options

The options could be passed to all of these functions

option def use
underElement null the dialog apears below this element. If no element is passed the dialog apears in the center of the window
replacingElement null hides the specified element and places the window under his father. If father not exists, window hangs from body
withCloseButton true display the close button
mainAttrs {} attributes (properties) for main dialog window
setAttrs {} DOM attributes for main dialog window
reject true true if rejects the promise when close by the close button, Esc key or clicking outside of the dialog
closeValue undefined value if rejects the promise when close by the close button, Esc key or clicking outside of the dialog
inputDef {lines:1, attributes:{attrname: 'attrvalue', othername:'othervalue'}} lines option transforms input to textarea with lines rows, attributes is used to set attributes
buttonDef {label:'Ok', value:true} main button of the alertPromise dialog
buttonsDef {label:'Ok', value:true, attributes:{attrname: 'attrvalue', othername:'othervalue'}} button description
askForNoRepeat false id (or object) to permits the user to ask to remember de answer

miniMenuPromise(elementsList[, opts])

Display a menu

<script src="dialog-promise.js"></script>
<button id=theButton onclick='example3(this)'>example</button>
<script>
function example3(button){
    miniMenuPromise([
        {value:'ar', img:'ar.png', label:'Argentina'},
        {value:'cl', img:'cl.png', label:'Chile'},
        {value:'uy', img:'uy.png', label:'Uruguay'},
    ], {underElement: theButton}).then(function(option){
        return alertPromise("val = "+option);
    });
}
</script>

miniMenuPromise elementList

The options could be passed to all of these functions

option use
label text to show
value value when click. If not set the row is not clickeable.
img image url
startGroup if it starts a group (puts a little line)
imgStyle object with style attributes for the image
displayFun alternate function to create cells of the row
doneFun alternate function to callback when the option was selected instead of resolving the promise
labels array of texts to show (in table)

simpleFormPromise(elements, opts)

Shows a simple form

elements

  • if it is a string it shows the text
  • if it is an HTML elementit shows it
  • otherwise creates a button

Opciones

atributo de element predeterminado uso
dialogPromiseDone see spanish
firstFocus null see spanish
label see spanish
attributes {} see spanish
value null see spanish
hotkey see spanish
## License

MIT