simpla web-components content-management admin custom-element

Simpla Admin

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.

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;

Login prompts

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.

MIT © Simpla

About

Beautiful, lightweight admin component for Simpla apps

https://www.simplajs.org