[GSoC 2009] Enhanced frontend editing

For Joomla! 1.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Locked
_ankit
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Apr 24, 2009 2:22 pm

[GSoC 2009] Enhanced frontend editing

Post by _ankit » Sun Apr 26, 2009 5:51 pm

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!

User avatar
j37h3r
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Tue Aug 30, 2005 3:32 pm
Location: Milwaukee, WI
Contact:

Re: [GSoC 09] Enhanced frontend editing

Post by j37h3r » Wed May 06, 2009 9:10 pm

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.

User avatar
morktron
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 164
Joined: Sun Aug 27, 2006 7:28 am
Location: Ballina, New South Wales, Australia
Contact:

Re: [GSoC 09] Enhanced frontend editing

Post by morktron » Thu May 07, 2009 11:05 pm

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!
digital solutions for sentient bipeds (including Joomla web design, custom designed Joomla templates...)
www.digiflip.tv

_ankit
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Apr 24, 2009 2:22 pm

Re: [GSoC 2009] Enhanced frontend editing

Post by _ankit » Thu May 14, 2009 4:08 am

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!

User avatar
morktron
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 164
Joined: Sun Aug 27, 2006 7:28 am
Location: Ballina, New South Wales, Australia
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by morktron » Thu May 14, 2009 11:22 pm

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.

User avatar
astroboysoup
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 233
Joined: Tue May 27, 2008 3:20 am
Location: Australia
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by astroboysoup » Fri May 15, 2009 12:17 am

That is very impressive.

Keep up the good work.
PB Web Development - http://pbwebdev.com
Joomla Beat Podcast - http://joomlabe.at

johnncyber
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Fri Apr 20, 2007 2:33 am

Re: [GSoC 2009] Enhanced frontend editing

Post by johnncyber » Thu May 21, 2009 6:11 pm

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

Code: Select all

<script type="text/javascript">alert("Hello!");</script> 
after the title
3) Save
4) A javascript alert box should pop up.

User avatar
darb
Joomla! Hero
Joomla! Hero
Posts: 2038
Joined: Thu Jul 06, 2006 12:57 pm
Location: Stockholm Sweden

Re: [GSoC 2009] Enhanced frontend editing

Post by darb » Thu May 21, 2009 6:16 pm

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 ... &start=120

All the best with this important features for Joomla!

User avatar
ronakbhagdev
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 186
Joined: Tue Jan 15, 2008 12:14 pm
Location: Morbi - INDIA

Re: [GSoC 2009] Enhanced frontend editing

Post by ronakbhagdev » Thu May 21, 2009 7:09 pm

Hey Ankit, Superb Idea.

Keep it up!!

- Ronak
@RonakBhagdev
Coordinator of Joomla Gujarati
Soft 'n' Web : http://www.softnweb.com

User avatar
OnTheMarkDesign
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Thu Apr 24, 2008 10:11 pm
Location: Inland Empire, California, USA
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by OnTheMarkDesign » Sat May 23, 2009 4:33 am

Very nice work so far! I look forward to the finished project!
Joomla! Community Magazine Team Member
Follow Me at https://twitter.com/OnTheMarkDesign

_ankit
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Apr 24, 2009 2:22 pm

Re: [GSoC 2009] Enhanced frontend editing

Post by _ankit » Sat May 23, 2009 6:17 pm

@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!

User avatar
SpacePyrit
Joomla! Explorer
Joomla! Explorer
Posts: 302
Joined: Mon Jan 28, 2008 6:59 pm
Location: In a galaxy far, far away...

Re: [GSoC 2009] Enhanced frontend editing

Post by SpacePyrit » Fri Jun 05, 2009 2:03 pm

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.

_ankit
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Apr 24, 2009 2:22 pm

Re: [GSoC 2009] Enhanced frontend editing

Post by _ankit » Fri Jun 05, 2009 2:44 pm

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 ;)

_ankit
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Apr 24, 2009 2:22 pm

Re: [GSoC 2009] Enhanced frontend editing

Post by _ankit » Fri Jun 05, 2009 2:49 pm

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/commu ... sting.html

Thank you

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by compass » Sat Jun 20, 2009 12:32 pm

very nice...

Two obvious follow up features might be:

Ability to edit custom html modules
Ability to edit module parameters
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

User avatar
deanapeterson
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Thu Aug 23, 2007 10:16 pm
Location: Omaha, Nebraska, USA
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by deanapeterson » Sat Jun 20, 2009 5:38 pm

For client usability this is awesome.

Can editing meta-tag info be included?
Dean Peterson
http://www.iconwebdesigns.net , Icon Web Designs, Omaha, Nebraska
PHP/Joomla! Extension Developer NitroSell Custom Templates (Microsoft RMS)
http://twitter.com/dean_iconweb - Follow Me on Twitter

User avatar
bobbravo2
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Sun Jul 22, 2007 10:45 pm
Location: Orlando, FL
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by bobbravo2 » Sun Jun 21, 2009 1:24 am

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

User avatar
bobbravo2
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Sun Jul 22, 2007 10:45 pm
Location: Orlando, FL
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by bobbravo2 » Sun Jun 21, 2009 2:11 am

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
You do not have the required permissions to view the files attached to this post.

User avatar
bobbravo2
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Sun Jul 22, 2007 10:45 pm
Location: Orlando, FL
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by bobbravo2 » Sun Jun 21, 2009 2:18 am

Inline editing example for a module
You do not have the required permissions to view the files attached to this post.

_ankit
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Apr 24, 2009 2:22 pm

Re: [GSoC 2009] Enhanced frontend editing

Post by _ankit » Sun Jun 21, 2009 3:41 am

@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.

User avatar
bobbravo2
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Sun Jul 22, 2007 10:45 pm
Location: Orlando, FL
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by bobbravo2 » Mon Jun 22, 2009 3:52 pm

_ankit wrote:@deanapeterson Isn't metatag info already included?
He means editing META keyword/description tags
_ankit wrote: @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.
" 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
You do not have the required permissions to view the files attached to this post.

User avatar
SpacePyrit
Joomla! Explorer
Joomla! Explorer
Posts: 302
Joined: Mon Jan 28, 2008 6:59 pm
Location: In a galaxy far, far away...

Re: [GSoC 2009] Enhanced frontend editing

Post by SpacePyrit » Tue Jun 23, 2009 8:52 pm

_ankit wrote: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 ;)
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!

_ankit
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Apr 24, 2009 2:22 pm

Re: [GSoC 2009] Enhanced frontend editing

Post by _ankit » Wed Jun 24, 2009 2:52 am

SpacePyrit wrote:
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 )

User avatar
bobbravo2
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Sun Jul 22, 2007 10:45 pm
Location: Orlando, FL
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by bobbravo2 » Thu Jul 09, 2009 4:46 pm

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

User avatar
bobbravo2
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Sun Jul 22, 2007 10:45 pm
Location: Orlando, FL
Contact:

2 small bugs

Post by bobbravo2 » Thu Jul 09, 2009 6:37 pm

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.

User avatar
bobbravo2
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Sun Jul 22, 2007 10:45 pm
Location: Orlando, FL
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by bobbravo2 » Thu Jul 09, 2009 6:47 pm

Comment posted to http://community.joomla.org/blogs/commu ... ntend.html
Ankit,

I love the progress, and continue to watch. I'm glad to see others (@Marcos, @Digiwise) suggest the front-end menu parameter editing - this is a hugely useful feature that is way too difficult (& confusing) to use on the admin backend.

In terms of the edit button, I think that your current implementation is great, it allows a consistent user experience (when editing is on, you can edit titles, and content; when editing is off, you can preview & navigate the site). I'd say I recant my previous recommendation, given how much you are allowing users to edit on the frontend. Having everything on in "edit mode" is simple.

Having the "edit buttons" show up when you enter "edit mode" provides visual feedback, and will reduce end-user confusion. Imagine this: a first time user relates the edit icons to edit mode, therefore they know they can edit titles, menus, etc; but cannot click on links. When the leave "edit mode" they can preview/navigate the site. If the edit icons were always visible, the only clue that you are in “edit mode” is that hovering on links/titles turns them green, and the state of the edit toggle button in the upper right hand corner.

The edit icons provide simple visual feedback as to which mode you are in, and doesn't break the Joomla! template.

dark_element
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Sat Apr 25, 2009 3:43 pm
Contact:

Re: [GSoC 2009] Enhanced frontend editing

Post by dark_element » Sat Sep 19, 2009 11:56 am

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

saske
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Oct 14, 2009 7:27 pm

Re: [GSoC 2009] Enhanced frontend editing

Post by saske » Wed Oct 14, 2009 7:34 pm

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

priyadahatkar
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Wed Nov 04, 2009 5:13 am

Re: [GSoC 2009] Enhanced frontend editing

Post by priyadahatkar » Mon Dec 14, 2009 11:03 am

hey ankit
its a great work!!!!
cheers to you

i wanted to know if is it possible to add menu and menu items from the front end using your component and plugin????


Locked

Return to “Joomla! 1.5 Coding”