Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simplajs/simpla-admin
Beautiful, lightweight admin component for Simpla apps
https://github.com/simplajs/simpla-admin
admin content-management custom-element simpla web-components
Last synced: about 2 months ago
JSON representation
Beautiful, lightweight admin component for Simpla apps
- Host: GitHub
- URL: https://github.com/simplajs/simpla-admin
- Owner: simplajs
- License: mit
- Created: 2017-02-08T06:28:42.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-15T05:46:54.000Z (about 7 years ago)
- Last Synced: 2024-11-11T00:03:18.329Z (2 months ago)
- Topics: admin, content-management, custom-element, simpla, web-components
- Language: HTML
- Homepage: https://www.simplajs.org
- Size: 309 KB
- Stars: 12
- Watchers: 3
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simpla Admin
[![Build status][travis-badge]][travis-url] ![Size][size-badge] ![Version][bower-badge] [![Published][webcomponents-badge]][webcomponents-url]
Simpla-admin is a lightweight, beautiful admin component for the [Simpla][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.
### Contents
- [Installation and setup](#installation-and-setup)
- [Hashtracking](#hashtracking)
- [Login prompts](#login-prompts)
- [Hotkeys](#hotkeys)
- [Accidental click protection](#accidental-click-protection)
- [Notifications](#notifications)
- [Contributing](#contributing)
### Resources
- [API reference][api]
- [Demo][demo]
- [License][license]
## Installation and setup
Install simpla-admin with Bower (Yarn support coming soon)
```sh
$ bower i simpla-admin --save
```
[Setup Simpla][simpla-setup] on your page, then import simpla-admin into your ``. It will automatically attach and load itself as a singleton when Simpla enters edit mode.
```html
```
## 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
```js
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 [``](https://www.webcomponents.org/element/SimplaElements/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
```js
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
```js
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
```js
window.SimplaAdmin = window.SimplaAdmin || {};
window.SimplaAdmin.protectEditing = false;
```
## Notifications
Simpla-admin displays notifications for things like content saves with [``](https://www.webcomponents.org/element/SimplaElements/simpla-notify). You can display your own custom notifications by firing a `simpla-notification` window event with a `text` property
```js
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][simpla]
[api]: https://www.webcomponents.org/element/SimplaElements/simpla-admin/page/API.md
[demo]: https://www.webcomponents.org/element/SimplaElements/simpla-admin/demo/demo/index.html
[license]: https://github.com/SimplaElements/simpla-admin/blob/master/LICENSE
[simpla]: https://www.simpla.io
[simpla-setup]: https://www.simpla.io/docs/guides/get-started
[bower-badge]: https://img.shields.io/bower/v/simpla-admin.svg
[travis-badge]: https://img.shields.io/travis/simplaio/simpla-admin.svg
[travis-url]: https://travis-ci.org/simplaios/simpla-admin
[size-badge]: https://badges.herokuapp.com/size/github/simplaio/simpla-admin/master/simpla-admin.html?gzip=true
[webcomponents-badge]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
[webcomponents-url]: https://www.webcomponents.org/element/simplaio/simpla-admin