Using Mercury without Rails

Installation

Get the distro files by downloading them from github using the downloads feature, or pull them out of the project manually (the files are in /distro). Copy these files into your project, and if you adjust where they're located (e.g. if they're not within assets/javascripts or assets/stylesheets). Also make sure you update the mercury_loader.js file to reflect this. How to use the mercury_loader.js is outlined in more detail below.

Images are bundled into the CSS if you're using the mercury.bundle.css file, but if you'd rather not use the bundled CSS you'll need to grab the images manually and adjust the paths that are in the mercury.css file.

The dialogs (eg. color palettes, modals, and other dialog types) are bundled into the mercury_dialogs.js file. If you would like to customize a view you can remove the view from the mercury_dialogs.js file and adjust the path you want to load using the configuration -- your custom view will then load using Ajax.

Bundling snippet options and snippets doesn't work in this way, so you may need to disable snippets or adjust where they're loaded from (writing your own back end integration).

Usage

Include the mercury_loader.js file. The loader will reload the page and enable Mercury in full page editing mode, so you may want to wrap this in conditional logic (only admins or something).

<script src="mercury_loader.js" type="text/javascript"></script>

Then you can create editable regions within your markup by using the data-mercury attribute. There's more documentation about the region types in the README Make sure you have an id for all regions.

<div data-mercury="full" id="uniqueID">
/* Your editable content will be here... */
</div>

Mercury Loader

The loader allows for you to provide "packages". These packages are basically where and what files you want loaded. There's some pre-defined for you, and you're expected to modify these or create your own mercuryPackages object that describes your custom packages before including the loader.

mercuryPackages = {
  all: {javascripts: 'jquery-1.7.js,mercury.min.js,mercury_dialogs.js', stylesheets: 'mercury.bundle.css'}
};

Then when including the mercury_loader.js you can specify which package you want loaded.

<script src="/mercury/javascripts/mercury_loader.js?pack=all" type="text/javascript"></script>

You can also provide additional options to Mercury in this way. For instance to load Mercury in a hidden state, you can provide the visible=false option.

<script src="/mercury/javascripts/mercury_loader.js?pack=all&visible=false" type="text/javascript"></script>

Or if you feel it's easier, you can modify your mercury_loader.js file to make whatever modifications you want. The rest of the documentation provided in the README, and on the wiki will likely apply.### ### ###