Raw-dialogs NPM

raw-dialogs

Getting Started

Installation

$ npm i raw-dialogs --save

Basic Usage

const dialogs = require("raw-dialogs");

//***NEW Methods ****
//Creates a simple alert with message,
dialogs.alert("message"); 				//immovable alert.
dialogs.alert("message", "titlebar"); 			//alert movable.
dialogs.alert("message", "titlebar", "button-label"); //label the button.
dialogs.alert("message", "titlebar", callbackfunction); //function to be called when button clicked.
dialogs.alert("message", "titlebar", "button-label", callbackfunction); //label the button and call function.

//Creates prompt
dialogs.prompt("message"); 				//unmovable alert.
dialogs.prompt("message", "titlebar"); 	//alert movable.
dialogs.prompt("message", "titlebar", "button-label"); //label the button.
dialogs.prompt("message", "titlebar", callbackfunction); //function to be called when button clicked.
dialogs.prompt("message", "titlebar", "button-label", callbackfunction); //label the button and call function.


//To create alert set the props (JSON format) and pass it to createDialog() method
let props = {
	type: "alert",
	titlebar: "Alerting Application",
	message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
	defaultvalue: "Default Value",
	buttons: [
		{
			label: "Enter your name and click proceed",
			callbackfunction: [
				{ name: "alertMessage", params: ["param1", "param2"] },
				{ name: "alertMessage1" }
			]
		}
	]
}
dialogs.createDialog(props);

/*To create a simple Prompt set the props (JSON format) and pass it to createDialog() method
An Input will be shown to get the input*/
let props = {
	type: "prompt",
	titlebar: "Prompting Application",
	message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
	defaultvalue: "Default Value",
	buttons: [
		{
			label: "Enter your name and click proceed",
			callbackfunction: [
				{ name: "alertMessage", params: ["param1", "param2"] },
				{ name: "alertMessage1" }
			]
		}
	]
};
dialogs.createDialog(props);

/*To create an overlay set the props (JSON format) and pass it to createDialog() method
This option is to allow us to create a lot complex forms.
*/
let props = {
	type: "overlay",
	titlebar: "Overlaying Application",
	title: "Add New Client Information",
	fullscreen: false,
	help: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
	message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
	form: {
		cssclass: "form",
		controls: [
			{
				type: "label",
				caption: "Name",
				style: "color: red; font-weight: bold",
			},
			{
				type: "input",
				inputtype: "text",
				placeholder: "Placeholder that will be shown",
				cssclass: "form-controls", //CSS from Bootstrap
			},
			{
				type: "label",
				caption: "Age",
				style: "color: blue; font-weight: bold",
			},
			{
				type: "select",
				options: "< 15, 15-30, 31-45, 46-60, 61-75, > 75",
				values: "1, 2, 3,4,5,6 ",
				defaultvalue: "31-45",
				cssclass: "form-controls, chosen-select", //CSS from Bootstrap
			},
			{
				type: "label",
				caption: "Address",
				style: "color: gray; font-weight: bold",
			},
			{
				type: "textarea",
				rows: 5,
				placeholder: "Placeholder that will be shown",
				cssclass: "form-controls", //CSS from Bootstrap
			},
		],
	},
	buttons: [
		{
			label: "Ok",
			callbackfunction: [{name: alertMessage}],
			cssclass: "btn, btn-primary", //Button CSS from Bootstrap
			focus: true,
		},
		{
			label: "Cancel",
			callbackfunction: [
				{name: alertMessage1, params: [param1, param2],
				{name: alertMessage}
			],
			cssclass: "btn, btn-warning", //Button CSS from Bootstrap
		},
	],
};
dialogs.createDialog(props);

Props

Prop	Type	Description	Default	Version
type	`string`	Overlay, Prompt or Alert	alert	v1.0.1
id	`string`	DOM Element ID	alert	v1.0.7
titlebar	`string`	Text shown in the title bar of dialogs	"Title"	v1.0.1
cssclass	`string`	css class that needs to be assigned	-	v1.0.1
style	`string`	inline style string separated by commas	-	v1.0.7
message	`string`	Message to be displayed	"Message"	v1.0.1
defaultvalue	`string`	Default value assigned to the control	-	v1.0.4
fullscreen	`boolean`	Does the dialogs needs to be fullscreen	false	v1.0.1
buttons	`JSON`	JSON List array	-	v1.0.1
buttons: label	`string`	Label of the button	"Ok"	v1.0.1
buttons: callbackfunction [{name: functionname, {params: param1, ...,paramX } }	`array`	array of functions to call when on click	close	v1.0.7
buttons: focus	`boolean`	The button to focus, when multiple last one	false	v1.0.1
overlay: title	`string`	h3 title	"Title"	v1.0.1
overlay: help	`string`	Help text in purple	null	v1.0.1
overlay: form	`JSON`	Container of other form controls	null	v1.0.1
form: type	`string`	Controls viz. label, input, select, textarea	-	v1.0.1
label: caption	`string`	Caption of the label	-	v1.0.1
input: placeholder	`string`	Placeholder text	null	v1.0.1
input: inputtype	`string`	All acceptable HTML input types	-	v1.0.1
textarea: rows	`integer`	Number of rows in the textarea	-	v1.0.1

Styling

The class name can be passed as a string seperated by comma(,), either custom CSS classes created or classes from other open-source CSS frameworks (bootstrap etc...).

v1.0.7 Introduces the inline styling. Pass the style parameters separated by semi colon for overlay:form controls.

eg. style: "color:red; font-weight: bold"