Simpla Admin

Size Version

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

Resources

Installation and setup

Install simpla-admin with Bower (Yarn support coming soon)

$ bower i simpla-admin --save

Setup 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>

Hashtracking

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;

Hotkeys

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;

Accidental click protection

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;

Notifications

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);

Contributing

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.