Dialog-promise NPM

dialog-promise

Dialog that returns promises

language: English also available in:

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)