<head>
   <link href="node_modules/rocket-message/css/message.min.css" rel="stylesheet" type="text/css">
</head>
<body>
   /* Your content goes here */
   <script src="node_modules/rocket-tools/js/tools.min.js"></script>
   <script src="node_modules/rocket-message/js/message.min.js"></script>
</body>

Basic Example

See the setup of the HTML and Javascript call below.

<a href id="example">Show Message</a>

<script>
document.getElementById('example').onclick = function(event) {
   Rocket.message({
      body: 'This is an example message.',
      parseEvent: event
   });
};
</script>

Initialization

See the different options you have available on module call as well as the methods.

Options

Name	Default	Options	Description
`type`	`false`	`error` `false` `success` `warning`	NOTE that the false value is equivalent to no type.
`heading`			You can make the heading whatever you would like. An empty value will not display the heading.
`body`			You can make the body whatever you would like. An empty value will not display the body.
`buttons`	`none`	`true` `false` `both` `none`	Display the various buttons on the message.
`buttonFalse`	`Cancel`		Set the button false text. A false value will not display this button.
`buttonTrue`	`Ok`		Set the button true text. A false value will not display this button.
`close`	`close`		Set the text or inner HTML of the close link.
`onFalse`	`false`		Assign a callback when the buttonFalse is clicked.
`onTrue`	`false`		Assign a callback when the buttonTrue is clicked.
`overlay`	`true`	`true` `false`	Set whether or not you want the overlay to display on message open.
`parseEvent`			Parse the event of a click to prevent the default link behavior.

Methods

For now the only post initialization method available is the close method used to manually close a message.

// Initialise a message
var message = Rocket.message({
   body: 'This is a test.'
});

// Close the message right away
message.close();

Defaults

You can also overwrite the module options globally by altering the defaults. To do so reference the defaults object property. For example:

Rocket.defaults.message.buttonFalse = 'Close It';
Rocket.defaults.message.buttonTrue = 'Go Ahead';

You can set the defaults for buttons, buttonFalse, buttonTrue, close and overlay.

Advanced Example

See an advanced example below with options as per the above.

<a href id="example">Show Message</a>

<script>
document.getElementById('example').onclick = function(event) {
   var message = Rocket.message({
      type: 'warning',
      heading: 'Test Message'
      body: 'Are you testing this module?',
      buttons: 'both',
      buttonTrue: 'Yes',
      buttonFalse: 'No',
      onTrue: function() {
         alert('This is awesome.');
         message.close();
      },
      parseEvent: event
   });
};
</script>

Messageplate Deprecated

The original library, Messageplate, has been deprecated. The entire Webplate project is being refactored and rebranded with a new development philosophy. Messageplate will be maintained only with bug fixes under the messageplate branch.

Author

Created and maintained by Chris Humboldt
Website: chrishumboldt.com
Twitter: twitter.com/chrishumboldt
GitHub github.com/chrishumboldt

Copyright and License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Keywords

FAQs

What is rocket-message?

Is rocket-message well maintained?

Package last updated on 05 Oct 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

rocket-message

Rocket Message

Getting Started