create #

Creates a popup.

// create popup
this.app.popup.create('popup-name', {
	title: 'Settings'
});

// open popup
this.app.popup.open({ button: button });

The first argument when creating a popup is to specify its name. The second argument passes the object, which contains data about the creation of popup.

width

Sets the width of the popup.

// create popup
this.app.popup.create('popup-name', {
	width: '400px',
	title: 'Settings'
});

// open popup
this.app.popup.open({ button: button });

title

Sets the title of the popup.

this.app.popup.create('popup-name', {
	title: 'Settings'
});

footer

Sets the footer buttons in the popup.

this.app.popup.create('popup-name', {
	title: 'Settings',
	footer: {
		insert: {
			title: 'Insert',
			command: 'myplugin.insert',
			type: 'primary'
		},
		cancel: {
			title: 'Cancel',
			close: true
		}
	}
});
  • title
    • String
    • Button title.
  • command
    • String
    • API command.
  • type
    • String
    • Type of button: primary, danger or regular by default.
  • close
    • Boolean
    • If true, the button will close the popup

form

Sets the form in the popup.

this.app.popup.create('popup-name', {
	title: 'Settings',
	getter: 'myplugin.getData',
	setter: 'myplugin.setData',
	form: {
	    'text': {
        	type: 'input',
	   	    label: 'Text'
	    },
	    'space': {
       		type: 'number',
   		    label: 'Space',
       		observer: 'myplugin.checkSpace'
    	}
	}
});
  • getter (optional)
    • String
    • API method gets the data from the form inputs.
  • setter (optional)
    • String
    • API method sets the data to the form inputs.
  • form
    • Object
    • The form inputs.

Example of getter.

getData: function() {
	return {
		text: 'My text',
		space: 40
	};
}

Example of setter.

setData: function(data) {
	// data.text
	// data.space
}

form items

Items object sets which fields will be in the form. Each item has such parameters:

  • type
    • Sets the type of the form item: input, textarea, select, number, checkbox.
  • label
    • Sets the label of input (except checkbox).
  • text (optional)
    • Text of the checkbox.
  • options (optional)
    • Object of select options.
  • placeholder (optional)
    • Sets placeholder to the input.
  • width (optional)
    • Sets the width of input.
  • classname (optional)
    • Sets classname of the input.
  • observer (optional)
    • Calls the API method to check if the input need to show or hide.

If a form input has observer as parameter like this:

observer: 'myplugin.checkSpace'

Create the function in your plugin:

checkSpace: function(obj) {
	if (something) {
		// input will be hidden
		return false;
	}
	else {
		// input will be shown
		return obj;
	}
}

custom html

If you want to add a custom html code or Dom element to popup instead of a form, you can create a popup, get its body tag and then add this code or element.

// create popup
var popup = this.app.popup.create('popup-name', {
	title: 'Settings'
});

// get popup body
var $body = popup.getBody();

// set html
$body.html('some html');

// or append
$body.append(something);

// open popup
this.app.popup.open({ button: button });

open #

Opens the created popup.

For example, the plugin has a toolbar button that opens popup.

start: function() {
    this.app.toolbar.add('myplugin', {
        title: 'Myplugin',
        icon: this.opts.myplugin.icon,
        command: 'myplugin.popup'
    });
}

Now let's have a look at the method that creates a popup and opens it at the click of the button.

popup: function(button) {
	this.app.popup.create('popup-name', {
		title: 'Settings'
	});

	// open popup
	this.app.popup.open({ button: button });
}

If popup is opened in modal mode, then instance of the button need not be specified. Here is a full example of the plugin in this case:

(function() {
    Revolvapp.add('plugin', 'myplugin', {
		defaults: {
            icon: '<svg ...>'
		},
        start: function() {
			// add button on the control bar
            this.app.control.add('myplugin', {
                title: 'Myplugin',
                icon: this.opts.myplugin.icon,
                command: 'myplugin.popup'
            });
        },
        popup: function() {
            // create popup
            this.app.popup.create('myplugin', {
                title: 'Settings'
            });

            // open popup
            this.app.popup.open();
        }
    });
})(Revolvapp);        

close #

Hides the shown popup.

this.app.popup.close();

isOpen #

Checks if the popup is shown.

var is = this.app.popup.isOpen();

getElement #

Returns the Dom element of popup.

var $popup = this.app.popup.getElement();