Git Product home page Git Product logo

wys's Introduction

What is it?

A way to make the awesome Cockpit CMS even more awesome.

Built in a simple way to allow for easy installation and just to keep things simple.

Basically what this does, is it adds a simple overlay toolbar to your Cockpit CMS site when you are logged in.

WYS toolbar

Features:

  • Link to main editor as a modal.
  • Direct link to the editor of the page currently being viewed.
  • Inline editing of defined areas with MediumEditor.
  • Possibility to add a shortcut to any Cockpit CMS page / feature.
  • Overlayed tour to display the main features to new users.

Installing

Clone this repository in to the /cockpit directory. Note that this has been tested with the latest stable version 0.13.0 (might work with earlier versions, but most likely does not work with the "next" branch)

Require helper functions with require('cockpit/wys/wys_helpers.php');

Require the main initializer in your templates head with require('cockpit/wys/head.php');

Initializer uses $GLOBALS["logged_in"] variable to determine if the user has logged in. Set that according to the Cockpit CMS login status, for example after initializing Lime with $GLOBALS['logged_in'] = ($app("session")->read("cockpit.app.auth"));.

Usage

After successful installation, you should first see the overlay tour open up, explaining the main features.

To redirect Cockpit CMS directly to your front page after logging in, edit the data-route attribute in the html-tag of cockpit/modules/core/Cockpit/views/layouts/login.php from @route('/') to just /.

To make content editable through the medium.js tools, use the wqe helper method. It wraps your content with the required parameters to allow editing. For it to work, you need to pass in the type of the editable content (collection or region), the collection/region slug name, the field that you are editing, and the id of the collection/region to be edited. You can also pass in an extra argument called "inline" to make content in one line not get wrapped in paragraphs or be displayed as a block while editing.

Here's an example of editing the content field of an entry in the pages collection.

$wqe_meta = [
  'type'=>'collection',
  'slug'=>'pages',
  'field'=>'content',
  'id'=>$page["_id"]
];
print wqe($page["content"],$wqe_meta);

To add shortcuts, write them in meta/editor_shortcuts.json as for example:

[
  {"Shortcut title": "index.php/collections/entry/571ba5da18e15doc238298596"}
]

A very simple example of the basic usage of this tool can be found here.

wys's People

Contributors

nles avatar

Stargazers

Wim Vandevenne avatar

Watchers

James Cloos avatar  avatar

wys's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.