(API) ModalInput

More
30 Nov 2014 15:28 - 26 Jun 2015 04:51 #1 by plamzi

ModalInput layers on top of Modal and allows you to build a form that asks the end user to send single-line or multiline text to the server. The server can customize the form in a number of ways, and can wrap the resulting data to facilitate parsing when it receives it. The server can also specify a string to be sent when the modal input form is cancelled.


OPTIONS

titleTitle that should be displayed in the toolbar of the dialog.
tagThe tag type of input field. Default is 'textarea' but you can set it to 'input'.
typeThe type of input field. If you set tag to 'input', here you can specify 'text', 'password', or 'email'.
attrSpecial attributes invoking custom input forms. Currently accepted values are 'reset' and 'change', which create a form with two password input fields and check that the values are matching before sending the data to server.
textOptional text to be displayed prior to any input field. This can be simple text or HTML with ESC in front of < and > chars.
mxpText containing MXP interactive anchors (and / or ANSI colors) to be displayed before the input field(s).
infoOptional notification to be displayed in the header of the modal inside an info box.
errorOptional message to be displayed in the header of the modal inside an error box.
closeableDefault is true. If set to false, the dialog will not have an 'x' in the top right corner.
closeTextThe text of the button that dismisses the modal. Default is 'Cancel'. If an array of 'buttons' is given, this option has no effect because the default button is blown away.
sendTextThe text of the "Send" button.
buttonsAn optional array of objects that adds custom buttons to the footer of the dialog. The button defined without either 'click' or 'send' attribute will be the one sending the field data. Example:
buttons: [
	{ 
		text: 'Cancel', 
		click: function() {}
		 /* or */ 
		send: '/abort' 
	},
	{ 
		text: 'Send' 
	}
	]
linksAn optional array of objects that adds custom links in the footer of the dialog. The links can be set to call functions using custom portal scripts, or can be set to send a string to the server. For example:
links: {
	'Reset password': 'reset',
	'Enter token': 'token'
}
backdropSet to false to not display a dark backdrop for the modal. Set to 'static' to prevent clicks on the dark backdrop from dismissing the modal dialog. Default is true.
cssOptional object containing CSS properties such as width and height to be applied to the modal dialog.

EXAMPLE

new ModalInput({
	title: 'Enter your private message:',
	mxp: 'For additional information, see <send>help pm</send>.',
	placeholder: 'message text',
	backdrop: 'static',
	before: '/start',
	after: '\r\n/complete',
	abort: '/abort',
	buttons: [
		{ text: 'Cancel', send: '/abort' },
		{ text: 'Send' }
	]
});


You can invoke a ModalInput from the server using a GMCP package:
<GMCP START SEQUENCE>
ModalInput {
	title: 'Enter your private message:',
	mxp: 'For additional information, see <send>help pm</send>.',
	placeholder: 'message text',
	backdrop: 'static',
	before: '/start',
	after: '\r\n/complete',
	abort: '/abort',
	buttons: [
		{ text: 'Cancel', send: '/abort' },
		{ text: 'Send' }
	]
}
<GMCP END SEQUENCE>
Last Edit: 26 Jun 2015 04:51 by plamzi.
The topic has been locked.