Windowise is a Promise-based library. Every window class (Window/Modal/Input/Nft/Push) has a getPromise() method. When you call open(), it will create a new Promise for the instance. This Promise will be resolved/rejected just after the window closes. That is to say when the class has just been constructed (before you call open()), it DOES NOT have a Promise.
For complex windows, one suggestion is create another layer to control all contents and the window itself (just like what I did in Modal/Input/Nft/Push). Since you can pass your content as a dom, it is easy to change anything inside.
Value will be shown in the topbar.
default: 'pop'
acceptable: 'pop', 'flip', 'left', 'top', 'right', 'bottom', 'min', null
default: { showCloseButton: true, showMinButton: false }
Topbar will not show when the value is false.
default: false
default: false
Indicate overlay will be removed or not after window closes.
default: true
Take effect when options.overlay=true.
default: 'center'
examples: '30% bottom', 'right top', 'left 500px'
You can specify two keywords, while the first one indicates the position of X axis and the second one indicates the position of Y axis.
If you only specify one keyword, the other value will be 'center'.
Note: All values are indicates the position of window's mid point except 'left', 'right', 'top' and 'bottom'.
default: false
Indicate remove content's background or not.
default: false
Indicate remove window's border radius or not.
default: false
acceptable: true, false, 'horizontal', 'vertical'
Apply specific style to the window.
Apply margin to the window. Acceptable values are same as CSS margin property.
Return current Promise. You should recall this method when you re-open the window.
Open the window. It returns a Promise which will be resolved when the window has been opened (after animations).
Close the window. It returns a Promise which will be resolved when the window has been closed (after animations). NOTE: It is not the same Promise when you call getPromise()!
Resume the window. Basically it is a open() with { animation: 'min' }.
Minimize the window. Basically it is a close() with { animation: 'min' }.
Helps you to create your window. It will use the content of the first div in dom with class 'title' as title, and use the content of the first div with class 'content' as content. Other options are same as options in constructor.
default: 'ok'
acceptable: 'ok', 'info', 'caution', 'error'
It changes the icon and color of the modal.
You can put your own content in it.
Same as Window()
Same as Window()
An array of buttons. Different types have different default configs. See button config for details.
Close the modal after specific time. Unit: ms. If the modal is closed by timer, the Promise will be resolved with 'timer'.
NOTE: Modals always have overlay.
Same as Window().
Same as Window().
If you specified button ids, this Promise will resolve the button id that user clicked after the modal closes.
default: 'info'
Same as Modal().
Same as Window().
default: 'Input'
default: 'OK'
default: 'Cancel'
default: false
default: ''
Placeholder for the input.
default: null
If it is not null, Input will call this validator and pass the value of the input when user is clicking OK button. Validator should return a Promise while resolved means passed and rejected means error occured. See specific usage in this demo.
Same as Window().
Same as Window().
Promise will be resolved if user clicks OK button and passes validation. It will be rejected if user clicks cancel button.
default: null
acceptable: null, 'ok', 'info', 'caution', 'error', 'text'
default: 'right'
Same as Window()
default: 'right top'
Same as Window()
default: true
Show the close button in the right.
default: false
Indicate it will close or not when user clicks notification body.
Close the notification after specific time. Unit: ms.
Same as Window().
Same as Window().
default: null
acceptable: null, 'ok', 'info', 'caution', 'error', 'text'
default: 'top'
acceptable: 'top', 'bottom'
default: false
default: false
Apply specific style to the push.
default: 'center'
default: false
Indicate it will close or not when user clicks push body.
Close the notification after specific time. Unit: ms.
Append something after content.
default: []
An array of buttons. See button config for details.
Same as Window().
If onClick is not specified, the Promise will be resolved with this value when user clicks the button.
Not necessary. Indicate which key will triiger this button. You can find key codes on keycode.info or css-tricks.
Change the style of the button.
If it is specified, the Window will NOT close and the Promise will NOT be resolved automatically when user clicks the button. You should handle these by yourself.
If it is true, the progress bar will change the width by percentage instead of showing loop animation.
Change the color of the bar.
Set percentage.