Simpla-admin is a lightweight, beautiful admin component for the Simpla content system. It provides everything you need to manage a Simpla app (login prompts, edit mode management, save controls, notifications, keyboard shortcuts) while remaining unobtrusive and minimal.
- Installation and setup
- Hashtracking
- Login prompts
- Hotkeys
- Accidental click protection
- Notifications
- Contributing
Install simpla-admin with Bower (Yarn support coming soon)
$ bower i simpla-admin --saveSetup Simpla on your page, then import simpla-admin into your <head>. It will automatically attach and load itself as a singleton when Simpla enters edit mode.
<link rel="import" href="/bower_components/simpla-admin/simpla-admin.html" async>Simpla-admin binds #edit to Simpla's edit mode. To enter edit mode, add #edit to the end of your URL. To exit edit mode, remove #edit from the URL.
You can disable hashtracking with the hashTracking property
window.SimplaAdmin = window.SimplaAdmin || {};
window.SimplaAdmin.hashTracking = false;If you're not authenticated when trying to enter edit mode, simpla-admin will prompt you to login with <simpla-login>. Closing the login modal without logging in exits edit mode.
The user will be prompted for login regardless of whether you enter edit mode via simpla-admin (#edit) or programmatically with Simpla (Simpla.editable(true)).
You can disable login prompts with the loginPrompt property, and authenticate manually with the Simpla.login() method
window.SimplaAdmin = window.SimplaAdmin || {};
window.SimplaAdmin.loginPrompt = false;Simpla-admin binds keyboard shortcuts to several common actions. On Mac the command key is used, on Windows the control key is used.
| Shortcut | Description |
|---|---|
cmd/ctrl + s |
Save |
cmd/ctrl + e |
Toggle edit mode (only if authenticated) |
You can disable all hotkeys with the hotkeys property
window.SimplaAdmin = window.SimplaAdmin || {};
window.SimplaAdmin.hotkeys = false;Simpla-admin makes a page non-interactive while it's being edited, so users can edit content inside interactive elements (links, buttons, lightboxes) without accidentally leaving the page. Toggle off edit mode to re-enable clicks, your changes will remain in the local buffer until you either save or reload the page.
You can disable edit mode protection with the protectEditing property
window.SimplaAdmin = window.SimplaAdmin || {};
window.SimplaAdmin.protectEditing = false;Simpla-admin displays notifications for things like content saves with <simpla-notify>. You can display your own custom notifications by firing a simpla-notification window event with a text property
var notification = new CustomEvent('simpla-notification', {
detail: {
text: 'something happened'
}
});
window.dispatchEvent(notification);If you find any issues with simpla-admin please report them! If you'd like to see a new feature supported file an issue. We also happily accept PRs.
MIT © Simpla