About Fredi - Friendly Frontend Editor

Fredi will bring quick modal edit links to frontend. Supports all the fieldtypes.

Category 1Admin Helpers
Admin helper modules are those that provide helpful tools, UI enhancements or optimizations to the admin panel (excluding Fieldtype or Inputfield modules).
Category 2Process Modules
Process modules are apps that run in the ProcessWire admin.
Category 3Other Modules
Modules that have a unique purpose not covered by existing categories.
Release StateStable
Should be safe for use in production environments. *
Authorapeisa
Module Version1.2.0
Class NameFredi
Compatibility2.2, 2.3, 2.4, 2.5, 2.6
Date AddedApril 7, 2013
Last UpdatedMay 26, 2015
Recommended ByNew recommendations may take up to 1 day to appear.

Details

fredi.png

Instructions

Look for the readme

README

Fredi - Friendly Frontend Editing for ProcessWire

(c) Antti Peisa 2013-2015

Introduction

Fredi will bring quick edit links to frontend. Developer can freely decide whereshe will output the links and how to style them. Edit link can be for a single field or for multiple fields together.

Clicking edit links will open modal view to quickly edit and save fields. Aftersaving it will reload the page and content editor will see his changes immediatly.

Since Fredi will integrate on frontend (though only for admins), I wanted to keep itas lightweight as possible. There is no javascript library dependencies and only few lines of css required.

Installation

Extract /Fredi/ directory under your /site/modules/ directory and install theFredi.module. It will automatically install the required FrediProcess.module.

Edit your template file(s) and load fredi there using this line:

$fredi = $modules->get("Fredi");

Best place for above line depends on how you are using your template files. Butfor basic demo site that PW ships with the best place would be right in the start of head.inc file.

Other thing you need to do is to add required JS and CSS to your html. Two files thatare required are /Fredi/modal/modal.js and /Fredi/modal/modal.css. Easiest way to do that is load them using this code:

echo $fredi->renderScript();

It also includes fredi.js and fredi.css files, which creates "show only when hovered"styling. This is not optimal in all cases, so you can disable them by giving false as first param for renderScript method.

echo $fredi->renderScript(false);

Good place to add above line is inside your head-tags. Body is fine too, but itshould be loaded before the first edit link you want to provide. There isn't any 3rd party code dependencies, so it doesn't matter if you have loaded any other scripts or not.

Using renderScript method is not required, you can load script other ways also (if youare using some common means to add styles and scripts to your site).

That's it, now you are ready for Fredi!

How to use

Using Fredi is very simple and you can easily implement it after you have alreadyfinished your site. So it doesn't force you to build your site in any special way.

Most simple example of Fredi is this:

Before:

echo $page->body;

After:

echo $fredi->body;
echo $page->body;

It will show "edit" link right before your body field. Link will be shown only forlogged in users that have rights to edit that page (or to be precise, that field).

On version 1.1.0 and up, Fredi links will be automatically styled and positioned inrelation of the parent element. You can of course tweak the styling with your own css.

Editing multiple fields

If you provide edit links for each of your fields, certain templates might get prettycrowded. Also certain fields are meant to go together. This is how you can feed Fredi with multiple fields:

echo $fredi->render("headline|title|summary");

Editing all the fields

If you want to show all the fields, you can achieve that with renderAll method:

echo $fredi->renderAll();

Setting page context

One thing we all love in ProcessWire is the ability to easily use content from otherpages. Often we use content from pages that are not show on editor at all. Page context allows you to add edit links for other pages that the currently viewed one.

Setting page context for single field

echo $fredi->body($another_page);

Setting page context for multiple fields

echo $fredi->render("headline|title|images|body", $another_page);

Setting custom text and classes for edit links

Fields and page context are special settings in Fredi, since those are set per edit link.All the other settings can be given through setter methods. Currently there is only one setting available and it gives possibility to overwrite the default edit text. These setter methods all return the $fredi object back, so you can chain these nicely.

echo $fredi->setText("Edit bodytext")->body;
// Or
echo $fredi->setText("Manage footer images")->images($footer_settings_page);
// Or
echo $fredi->setText("Edit press release details")->render("title|summary|publishdate", $another_page);

Fredi has good memory, so when you once setText, it will remember it. You can always setnew text or even reset to default.

You can also add additional css classes for link element:

echo $fredi->setClass("featured")->body;
// Or
echo $fredi->setClass("featured small")->body;

Hiding tabs

In context of inline editing, the additional tabs (Children, Settings and Delete) might beundesirable. You can edit ProcessFredi settings to globally disable those from Fredi modals. Other option is to disable them case by case. It works in similar manner like setText above:

echo $fredi->hideTabs("children")->body;
// Or
echo $fredi->hideTabs("children|delete|settings")->body;

Reset settings

$fredi->reset(); // This will reset all the settings: link text, classes and tabs hiding.

Support development

I built Fredi for my own needs and I really hope it will be helpful tool for you too.I have no plans to make it commercial. If you find Fredi valuable for you and want to support future development, please consider donating few bucks. Thanks!

If you are short on money, you can also support yourself by listening great Finnish singerFredi.

License

Fredi is licensed under GNU/GPL V2

Uses few images from tinybox2 modal, which is free of charge for both personal orcommercial projects under the creative commons license. SOURCE: http://www.scriptiny.com/2011/03/javascript-modal-windows/

Comments

No comments yet. Be the first to post!

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.