Joomla! Discussion Forums

Hi everyone!

My name is Ankit ( I am new here ) and I will be working on an enhanced frontend editor for Joomla! this summer ( as a part of Summer of Code ).

Abstract

The project will allow in-place editing for module, menu-item and article titles, editing of module & menu-item parameters and articles in a modal window and drag and drop placement of modules from the frontend.

Details

1. For in-place editing, whenever the user will click on a title, it will be replaced with a text-field where the user will be able to either save or cancel the changes.

2. For editing of module & menu-item parameters and articles, an edit icon will be provided next to each of their titles. Once the user clicks on them, a modal window will popup with the respective manager. By modal window, I mean a div over the content of the webpage.

3. Drag & drop placement of modules. The new position will be saved at the backend.

Implementation

Now, I am still thinking about how I am going to implement the above set of features as well as getting myself familiar with Joomla! code.

As part of my project, I will be first tackling edit-in-place for titles.

First off, I will be creating a component that will handle all requests from the frontend to edit the titles. For menu items, the 'class' attribute contains the 'id' for the menu item, so my guess is that it will easier to handle a request and make the changes to the particular instance of menu item.

However, for modules, the module id is not present anywhere in the output.

I want it to be easy for everyone to test this extension so I want minimize ( if possible, nullify ) the modifications I might have to make to the joomla code.

I will need to get the module id into the output for this to work, so at present, I can think of two alternatives:
1. Use Module chrome: By either telling the user to create or modify his/her template's module chrome.
2. Using something similar to &tp=1 ( not sure )

Nothing in the above implementation is finalized yet as I am still at the thinking stage. I would greatly appreciate suggestions and ideas on how I could implement this in a better fashion.

I would soon be getting a blog solely for this project where I will be posting on the progress. I will update this post when that happens.

Meanwhile, please drop a reply here if you have ideas or suggestions! Thank you!

Godspeed! Front end editing of modules is a dream of mine, and one more thing to take off the checklist for a feature Drupal allows for that Joomla doesn't support.

Amazing work Ankit! I just saw some screenshots of your work and it's very impressive - http://community.joomla.org/blogs/commu ... oaded.html

This will make a big difference for many people, keep up the good work!

Thanks for the cheers. It's still in an alpha stage right now and needs some sophistication. My current next objective is to create a toggle mode to turn editing on/off and fixing bugs.

I have a working demo up at: http://ankitahuja.com/playground/joomla which I will be updating frequently when I have a new working feature. You can login as 'test_admin' and password is 'ankit' at the frontend.

You will then be able to edit menu item, module and article titles by clicking on them. Please feel free to suggest any features, modifications or ideas!

Wow Ankit, I just had a go . It seems to already be working fine. My only suggestion is that the hover style should be editable by the template designer maybe using css overrides or something.

Looking forward to seeing the drag and drop module positioning if it really is a possibility. I suppose they managed it with Facebook.

Anyway already a major step forward for Joomla usability especially for end users. I hope this can all be seamlessly integrated into the core for future versions. Keep up the good work and I'll let you know if I think of anything else they may be useful for you.

That is very impressive.

Keep up the good work.

Wanted to let you know of a security consideration. I was able to place a script tag (or any other HTML tag for that matter) in a title. This could lead to XSS attacks or other bad things. Other than that it looks awesome!

Steps to reproduce:

1) Enter edit mode and click a title
2) Enter after the title
3) Save
4) A javascript alert box should pop up.

Hi Ankit,

I saw this GSOC project and are really happy about it.

I just post here about the forum Joomla usability before coming here to your forum here! Hope we can dl and test it when you start having a beta test of it!

http://forum.joomla.org/viewtopic.php?f=304&t=377189&start=120

All the best with this important features for Joomla!

Hey Ankit, Superb Idea.

Keep it up!!

- Ronak

Very nice work so far! I look forward to the finished project!

@johnncyber Thanks for letting me know of this important security breach. I'll find a way to fix it. I'm glad I posted a demo so you guys are helping me find bugs!

@darb I gave a cursory look to your post in the usability thread and it contains some very interesting ideas. I will go through it a little more throughly later.

Also, I'll give you guys a download link as soon as I have a beta version ready Thanks for the encouragement everyone!

Hey Ankit, great job on the project. Just wanted to report a problem I had. when editing a title, there's no way of highlighting the text and erasing it all, you have to keep pressing backspace. Also, you can't place the cursor just anywhere, you have to use the arrow keys to move around and erase maybe just one letter to fix a spelling error.

Also, I thought it would be cool if you can make it possible to edit the article content itself.

Hi SpacePyrit, I tried to reproduce the problem you were having but am not able to do so. I tried it in Safari (Mac and Windows), Firefox and Chrome. Which browser were you using?

Plus, I discovered it behaves a little weird in Opera as well, in addition to Internet Explorer. I'm going to fix the bugs in these two browsers asap.

I don't see any problem in Firefox, Safari or Chrome. If you face a problem in any of these browsers, do report to me

My next milestone is to work on article editing, I have already begun working on it

Also, for those following this forum thread, you can download the zip file from http://ankitahuja.com/playground/frontendeditor.zip. You will need to install the extensions manually using their XML files.

You can try it against your templates and let me know if you face any inconsistencies. To learn how to install it ( there is a small hack you will need to perform ), you can read this blog post -> http://community.joomla.org/blogs/community/892-editing-titles-on-the-fly-ready-for-testing.html

Thank you

very nice...

Two obvious follow up features might be:

Ability to edit custom html modules
Ability to edit module parameters

For client usability this is awesome.

Can editing meta-tag info be included?

Ankit,

I love the demo, and can't wait to see the module drag&drop. I'd definitely recommend including the module parameters as a modal popup frontend editor as well. This will be a HUGE usability improvement for Joomla! front-end editing.

I have one major usability problem - that you disable the edit article link (when I click the "turn editing off" button) - this is unnecessary ( as there would be no reason to click on the button, unless you specifically wanted to edit the article). I understand the reason for disabling editing of menu titles/module positions (because it breaks navigation), but think the current implementation is a little bit tedious.

I'd recommend modifying the editing action to a :hover state (for authors+ level users) that has an edit button that you can select. This reduces unnecessary mouse hunting from the menu name to the upper right of the screen, back to the menu name to edit, and then back to the upper right to turn it off (and use the links). This would reduce the number of functions that you've defined in your JS.

It makes editing a snap (and makes it unneccessary to change states from "editing on" to "editing off") to edit things. Simply hover over a menu title, module title, and click on the popup hover link to edit the title. The rest of your implementation is GREAT (especially the AJAX saving)!

Keep up the great work Ankit!

I'm on twitter if you want to talk:
http://twitter.com/bobbravo2

Here are some conceptual mockups. This will make it much faster to edit the items, and could be extended (for instance for modules) to include:
>Edit Title
>Edit parameters

Inline editing example for a module

@deanapeterson Isn't metatag info already included?

@bobbravo2 First of all, thanks a lot for the mockups and the feedback. Before I started implementing this project, I thought a great deal on how I was going to implement editing of titles before I actually settled on the toggle mode.

The reason I'm using the 'toggle editing' link is that I want the site to be in its normal state when the user does not want to edit anything. Implementing this as a popup on hover, which the user can click might make it a little confusing for clients as well as make the interface a little obscure. As it is now, it is very simple to edit both article and titles. People are used to seeing the edit icons next to titles.

How about if I add a shortcut key to enter editing mode? Like, say the user can press the key 'e' to enter or leave editing mode? Would that make things a little less tedious?

I'll think over your idea again to see if I can implement it in a user-friendly and non-blocking way.

He means editing META keyword/description tags

" People are used to seeing the edit icons next to titles." What I meant was that I don't understand why they are disabled. I do not see a reason, as the only reason I'd click on an edit article button is to edit the article. It doesn't have 2 functions (like clicking a title does). That is why I see it as unnecessary.

A shortcut key would be an improvement. Maybe just underline the "E" in the edit shortcut?

The reason I recommended the popup is that there is already a very popular service that uses it: netflix. They use it for movies that have an instant version, the Play/Add button has a :hover button that says "Add to instant queue"

Make the title equivalent to the "Plan/Add" button, and the "Add to Instant Queue" the "edit article title" button

Sorry it's taken me a while to get back on this, but it may have just been me. I was testing this on my own template and there was probably a problem on my end.

Just tested the article editing and thought it was great. It took a while to load, but it did well. The box was huge on my screen though, I couldn't even see the "close" button. I have one last comment, the icons used for the "saved" and "closed" buttons should match the ones in the back-end editing. This way it keeps a consistent feel throughout the site.

Good job so far!

It was actually a bug that I later found out, so thanks for letting me know about it. It did cause problems in a few templates. It is fixed now, though.

I'm not sure about having the same icons as the backend as they anyways depend upon the administrator template in use. I would rather have consistency among all the 'save' and 'close' buttons at the frontend ( in modal editor as well as title editing )

Ankit,

Just checked it out - looking great! I love the toggle button. Works flawlessly! The editor popup looks great as well. Will template authors be able to provide a custom layout for this editor via a template override?

I'm still wondering about an "edit module parameters" option for modules though, and while your at it, why not an "edit menu parameters" modal popup as well? I know this is only a summer project, but I believe that frontend editing capabilities are crucial for joomla! success as a multi-function CMS.

My logic behind including these functions is that it is very difficult to learn from the backend how to change the layout of one menu item (ie- from a article to a category blog layout), and even as a frequent j! admin, I sometimes forget where to change things. Editing these parameters would be extremely helpful from the frontend. This would allow you to change for example, the menu ordering, the menu's parameters. It would also allow you to edit modules (one I use alot is yoo_gallery, and image gallery module) in place. This would be helpful for changing something in realtime, in the place it has the effect (on the front end). This is opposed to the current joomla M.O. which consists of the very CRYPTIC going to Extensions>Modules, which a first/second time user of Joomla! is not going to know, and very unlikely remember how to change. Editing in the frontend would allow them to bypass this whole (legacy=convoluted) concept of "extensions" and "modules" and simply edit that "thing" or "part" of the page.

This would enable first-time joomla users to:

• (done)Edit titles
• (done)edit content
• (proposed)edit menu parameters
• (done)edit module parameters
• (planned)move module positions via drag&drop
• (proposed)re-order menus via a selection handle, drag&drop

change the text for the upper right from "turn editing on" to "turn editing on" to make it more consistent with user interface standards (OS menus have shortcut keys underlined, not bold)

I'm getting a JS alert that says "the URL is not valid and cannot be loaded" when I try to save/login.

Comment posted to http://community.joomla.org/blogs/community/936-module-editing-at-the-frontend.html

so far you have done great work there is one problem though, all the editable fields are not filtered for XSS attacks.

Hi, I have installed the GSoC Enhanced frontend editing plugins, enabled them, installed the component. But when i go to the component page I only get a blank page.
Does anyone know what the problem can be? I have a fresh Joomla install (1.5.14) , only 1 extra module installed.

Best regards, Sacha