Git Product home page Git Product logo

grav-frontend-edit-button's Introduction

Frontend Edit Button Plugin

The Frontpage Edit Button Plugin is for Grav CMS.

This plugin adds an 'edit this page' button on the frontend pages when logged in with a user account with admin rights. After clicking the button it will open the Admin Dashboard in another tab in your browser where you can start editing the page.

IMPORTANT (1): If no user is logged in as administrator (superuser), the button will show up only when this is explicitely set this in the plugin settings! By default a user has to be logged in to see the button.

IMPORTANT (2): You can't login from this plugin itself. You have to login by using the login to enter the Administrator Dashboard. When not logged in, the login dialog will be shown from GRAV CMS.

It will also work when you have an admin dashboard open in another tab of your browser. The moment you are logged in and are able to edit pages, the button will show up on the frontend pages. The moment you logout you are not able to edit any pages that are at that time displayed. The automatic refresh will prevent this.

Requirements

This plugin requires that you have the following plugins installed and enabled:

  • admin
  • login

Installation

Installing the Frontend Edit Button plugin can be done in different ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file.

GPM Installation (Preferred) **

The simplest way to install this plugin is via the Grav Package Manager (GPM) through your system's terminal (also called the command line). From the root of your Grav install type:

bin/gpm install frontend-edit-button

This will install the Frontpage Edit Button plugin into your /user/plugins directory within Grav. Its files can be found under /your/site/grav/user/plugins/grav-frontend-edit-button.

Git clone

In the user/plugins folder of your site:

git clone https://github.com/enovision/grav-frontend-edit-button

Manual Installation

To install this plugin, download the zip version of this repository and unzip it under /your/site/grav/user/plugins. Then, rename the folder to grav-frontend-edit-button. You can find these files on GitHub or via GetGrav.org.

You should now have all the plugin files under

/your/site/grav/user/plugins/grav-frontend-edit-button

NOTE: This plugin is a modular component for Grav which requires Grav and the Error and Problems to operate.

Configuration

Before configuring this plugin, you should copy the user/plugins/grav-frontend-edit-button/grav-frontend-edit-button.yaml to user/config/plugins/grav-frontend-edit-button.yaml and only edit that copy.

Here is the default configuration and an explanation of available options:

enabled: true

Position of the button The following options are available:

  • (tr) Top right (default)
  • (tl) Top left
  • (br) Bottom right
  • (bl) Bottom left
position: tr

Show the label on the button

showLabel: true

Show icon (requires Fontawesome to be loaded, it works when you install the plugin Markdown Font Awesome)

showIcon: true

IMPORTANT: When both showLabel and showIcon are disabled, it will use internally showLabel = true automatically.

Only visible after login

requiresAuth: true

Usage

When the plugin is enabled there is nothing else to do, it will show the button on the frontend pages.

It is possible however to switch the frontend editing off per page by adding the following to the header of a page (frontmatter):

protectEdit: true

Refreshing

This plugin has a simple mechanism build in that will react on a blur and focus of the browser tab involved. The moment you click the button it will open the Dashboard in another tab in the browser. The moment you click back on the page you have just left by clicking on the button, this page will automatically refresh.

This refresh will always execute when you leave (blur) the tab and click back (focus) on the tab with the presented page.

CSS and JavaScript

The required CSS and JavaScript will only be loaded if the plugin meets the requirements for executing.

CSS

You can change the styling of the button by modifying the style.scss file in the scss folder. It is required that the following CSS tags stay intact:

#frontend-edit-button {
  position: fixed;
  z-index: 10000;
  padding: 5px;
}

#frontend-edit-button.top {
  top: 0;
}

#frontend-edit-button.bottom {
  bottom: 0;
}

#frontend-edit-button.left {
  left: 0;
}

#frontend-edit-button.right {
  right: 0;
}

You can compile the SASS by entering in the root of /assets folder of this plugin ./sass.cmd. It is required that you have the compiler installed.

i18n

There is a languages file available for multilanguage support

Credits

  • The amazing GRAV CMS Team for building such an amazing CMS.
  • Nick Bell for correcting some path mistakes
  • Christian Bewernitz for adding the login requirement option (version 1.0.7)

grav-frontend-edit-button's People

Contributors

al-demon avatar diegomagikal avatar diomed avatar enovision avatar karfau avatar paulhibbitts avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

grav-frontend-edit-button's Issues

no icon showing

Hello,
I have installed and activated this plugin, I logged in as admin, but no button :(
Grav v.1.3.6 and default Antimatter theme

Make auto-refresh optional

Auto-refresh can be very annoying when the button is configured to be always visible.
And, even when it isn't, I think many users would rather keep control over the browser's behavior and refresh pages by themselves.

Could you please let users choose what behavior they prefer in the settings ?

something is not working

[2017-04-07 22:11:48] grav.CRITICAL: Call to a member function header() on null - Trace: #0 [internal function]: Grav\Plugin\FrontendEditButtonPlugin->onOutputGenerated(Object(RocketTheme\Toolbox\Event\Event), 'onOutputGenerat...', Object(RocketTheme\Toolbox\Event\EventDispatcher)) #1 C:\xampp\htdocs\blog.rapsli.ch\vendor\symfony\event-dispatcher\EventDispatcher.php(184): call_user_func(Array, Object(RocketTheme\Toolbox\Event\Event), 'onOutputGenerat...', Object(RocketTheme\Toolbox\Event\EventDispatcher)) #2 C:\xampp\htdocs\blog.rapsli.ch\vendor\symfony\event-dispatcher\EventDispatcher.php(46): Symfony\Component\EventDispatcher\EventDispatcher->doDispatch(Array, 'onOutputGenerat...', Object(RocketTheme\Toolbox\Event\Event)) #3 C:\xampp\htdocs\blog.rapsli.ch\vendor\rockettheme\toolbox\Event\src\EventDispatcher.php(23): Symfony\Component\EventDispatcher\EventDispatcher->dispatch('onOutputGenerat...', Object(RocketTheme\Toolbox\Event\Event)) #4 C:\xampp\htdocs\blog.rapsli.ch\system\src\Grav\Common\Grav.php(277): RocketTheme\Toolbox\Event\EventDispatcher->dispatch('onOutputGenerat...', Object(RocketTheme\Toolbox\Event\Event)) #5 C:\xampp\htdocs\blog.rapsli.ch\system\src\Grav\Common\Processors\RenderProcessor.php(19): Grav\Common\Grav->fireEvent('onOutputGenerat...') #6 C:\xampp\htdocs\blog.rapsli.ch\system\src\Grav\Common\Grav.php(126): Grav\Common\Processors\RenderProcessor->process() #7 C:\xampp\htdocs\blog.rapsli.ch\system\src\Grav\Common\Grav.php(368): Grav\Common\Grav->Grav\Common\{closure}() #8 [internal function]: Grav\Common\Grav::Grav\Common\{closure}('render', 'Render', Object(Closure)) #9 C:\xampp\htdocs\blog.rapsli.ch\system\src\Grav\Common\Grav.php(344): call_user_func_array(Object(Closure), Array) #10 C:\xampp\htdocs\blog.rapsli.ch\system\src\Grav\Common\Grav.php(127): Grav\Common\Grav->__call('measureTime', Array) #11 C:\xampp\htdocs\blog.rapsli.ch\index.php(52): Grav\Common\Grav->process() #12 {main} [] []

The button shows up on the homepage, but then when I click an article this error shows.

Button not showing with 'session.split: false'

The plugin checks for the presence of a cookie with the suffix "-admin". However, when using session.split: false only a single cookie without the suffix is set causing the plugin to exit without showing the button.

button quirks

I have

Show Text on Button : Disabled
Show Icon on Button: Enabled

Text still shows, after 2nd reload.

Fontend-edit button reappears when switching languages

My website is localized in English and Japanese. When I switch from Japanese to English and then to Japanese again, the frontend edit button reappears.
I causes a security issues as it reveals the URL of the admin login page which is intentionally hidden.
Hope this problem can be fixed soon.

I will disable the extension in the meantime.

Button still appears after logging out

After logging out, the frontend-edit button still appears. I have to clear the cookies to make it disappear. (I use Grav 1.6.10 and the last version of frontend-edit-button)

Edit button showing when not connected

This topic is not a dupplicate but might be connected to #16.

Right after installing and setting properly the FrontendEditButton plugin (with requiresAuth: true), the FEB button stayed visible while I was logued out.

I logued in to the admin by accessing the URL and/or clicking on the FEB button, and logued out ; but the FEB button was still visible.

That's only when I used the in-page form of the login plugin that I implemented in my template, to log in and log out from that same form, that the FEB button seemed to receive the deconnexion and disappeared.

So it implies that some users on my website could see the button the first time they come, and I wonder if some unregistered users could see it.

edit :

It also seems that after loguing out, while the FEB button seems to disappear, it comes back if I route to an other page.

Feature suggestions

I have two ideas for additional features.
I'm willing to provide PR's for those if you are interested.

  1. add config option to also show the button if no user is curretly logged in.
    My use case is that I have a staging area where the editing happens, and it is OK if users click on the button and need to login first. (On the public live page the login and admin plugin are not installed.)

  2. add config option to set custom target for the link
    to prevent opening dozens of tabs

  3. add page header/frontmatter option to set custom editUrl to use for the button
    My use case is that e.g. on the "Newsletter" page they actually need to write a mail instead of editing the newsletter page.

What do you think about those ideas and which of them would you like to be part of your plugin?

PS: Having these options would allow me to use your plugin instead of hacking around in my theme ...

Disabling (hiding) icon no longer works

Using the most recent version of Grav and your plugin, when I try to disable the display of the icon for the button the entire Frontend Edit Button button no longer is displayed.

Any thoughts?

Thanks very much,
Paul

Edit Button not injected when requiresAuth is true

Hi,
I am on FF 62.0b10 (64-bit) + Grav v1.5.0-rc.1 + Admin v1.8.7 + Learn2 git sync + nginx-ee 1.10.1 + deb9 + php5-fpm

Issue
The edit button only shows up when requiresAuth is off.

Something about authentication checking is not working on my setup.
Tried to look into it but its too complicated for me since I dont fully understand the Auth lifecycle of Grav.
The processed content (source) doesn't show an inserted frontend-edit-button class, so it is not being inserted and thus it is not a styling issue.

custom positon in the page?

I have been trying to wrapy head around what I would need to do to put the snippet rendered by your plugin into a different place in my DOM. But I do not have enough knowledge about the internals of Grav to figure it out.

I like that the logic behind the button is encapsulated in a plugin.
The most simple use case is that I want to position it relative to some element that is not body.

Do you have any idea how the current logic could be used and at the same time the developer (or the theme) could decide/configure where the code would be injected?

The default could still be the injection you are doing now, but maybe with another config toggle the control can be given yo the theme?

If there is a way to do that I'm willing to implement it. But I'm currently out of ideas/knowledge.

Wrong installation link for GPM

In the README.md:
bin/gpm install grav-frontend-edit-button should in fact be bin/gpm install frontend-edit-button to work.

Edit button for non-authenticated users, additional check on user.

Edit Button for unauthenticated users

For some reason, perhaps my site configuration, the Edit-Page button is visible for all users, even if a user is not logged in and there is no Admin Panel open. Or perhaps, I have opened the admin panel and then shut it.

I looked at the frontend-edit-button.php code and found that you do not check whether the user is authenticated or has the admin.pages permission.

You check whether there is an Admin session in onPluginInitialized(), but no check on the user. So, its possible the user has some other admin permission, eg., admin.cache. Not sure what would happen then.

Possibly ???? if in a session there is an Admin panel open, then the FEB plugin is initialized, then the administrator user logs out, the function onOutputGenerated() function of FEB is still subscribed.

At least in onPluginInitialized, but may be in onOutputGenerated, there should be a check to see if the user is authenticated, eg in the function onOutputGenerated, around line 110,

        // Don't proceed unless user is authenticated
       $user = $this->grav['user'];
        if ( ! $user->get('authenticated') ) {
            return;
        }
        // Dont proceed unless user has admin.super or admin.pages access
        $access = $user->access;
        if ( ! ( ( isset($access['admin']['super']) && $access['admin']['super'] == true ) 
                 || ( isset($access['admin']['pages']) && $access['admin']['pages'] == true ) 
               ) ) {
             return;
      }

editProtect not 'transitive'

  • I put an editProtect=true in a page header.
  • The button does not appear in the page
  • I go to another page that can be edited, click on the button, which takes me to Admin page
  • On Admin page, I can 'see' the page that should not be edited. Not good.

My use case is a corporate website, where content can be provided by PR people, not IT. I certainly do not want to give these people access to pages that will screw up the site if incorrectly edited, eg., where there is js code contained in the page, together with active shortcodes.

Install instructions incorrect.

Hi - have been trying to install this - notice the readme says

bin/gpm install grav-frontend-edit-button

What works is

bin/gpm install frontend-edit-button

Spent a while trying to figure out why it wouldn't install - after a bit of a hassle on a system with numerous php versions installed. Allways try the insanely complicated options before checking the command is correct :-\

Cheers

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.