The Joomla! Forum ™



Forum rules


Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.



Forum locked This topic is locked, you cannot edit posts or make further replies.  [ 29 posts ] 
Author Message
PostPosted: Sun Apr 26, 2009 5:51 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Apr 24, 2009 2:22 pm
Posts: 7
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!


Top
 Profile  
 
PostPosted: Wed May 06, 2009 9:10 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Aug 30, 2005 3:32 pm
Posts: 10
Location: Milwaukee, WI
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.


Top
 Profile  
 
PostPosted: Thu May 07, 2009 11:05 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sun Aug 27, 2006 7:28 am
Posts: 164
Location: Ballina, New South Wales, Australia
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


Top
 Profile  
 
PostPosted: Thu May 14, 2009 4:08 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Apr 24, 2009 2:22 pm
Posts: 7
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!


Top
 Profile  
 
PostPosted: Thu May 14, 2009 11:22 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sun Aug 27, 2006 7:28 am
Posts: 164
Location: Ballina, New South Wales, Australia
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.


Top
 Profile  
 
PostPosted: Fri May 15, 2009 12:17 am 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Tue May 27, 2008 3:20 am
Posts: 215
Location: Australia
That is very impressive.

Keep up the good work.

_________________
PB Web Development - http://pbwebdev.com
Joomla Beat Podcast - http://joomlabe.at


Top
 Profile  
 
PostPosted: Thu May 21, 2009 6:11 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Apr 20, 2007 2:33 am
Posts: 3
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:
<script type="text/javascript">alert("Hello!");</script>
after the title
3) Save
4) A javascript alert box should pop up.


Top
 Profile  
 
PostPosted: Thu May 21, 2009 6:16 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Thu Jul 06, 2006 12:57 pm
Posts: 716
Location: Stockholm Sweden
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!

_________________
Success in the long run Its not about the code its about the people and community that's make it!
Its not what you say its what you do that matters!

Darb - aka ssnobben


Top
 Profile  
 
PostPosted: Thu May 21, 2009 7:09 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Tue Jan 15, 2008 12:14 pm
Posts: 186
Location: Morbi - INDIA
Hey Ankit, Superb Idea.

Keep it up!!

- Ronak

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


Top
 Profile  
 
PostPosted: Sat May 23, 2009 4:33 am 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Apr 24, 2008 10:11 pm
Posts: 190
Location: Inland Empire, California, USA
Very nice work so far! I look forward to the finished project!

_________________
http://OnTheMarkDesign.com

Joomla! Community Magazine Team Member


Top
 Profile  
 
PostPosted: Sat May 23, 2009 6:17 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Apr 24, 2009 2:22 pm
Posts: 7
@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!


Top
 Profile  
 
PostPosted: Fri Jun 05, 2009 2:03 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Jan 28, 2008 6:59 pm
Posts: 297
Location: In a galaxy far, far away...
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.


Top
 Profile  
 
PostPosted: Fri Jun 05, 2009 2:44 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Apr 24, 2009 2:22 pm
Posts: 7
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 ;)


Top
 Profile  
 
PostPosted: Fri Jun 05, 2009 2:49 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Apr 24, 2009 2:22 pm
Posts: 7
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


Top
 Profile  
 
PostPosted: Sat Jun 20, 2009 12:32 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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


Top
 Profile  
 
PostPosted: Sat Jun 20, 2009 5:38 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Thu Aug 23, 2007 10:16 pm
Posts: 57
Location: Omaha, Nebraska, USA
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


Top
 Profile  
 
PostPosted: Sun Jun 21, 2009 1:24 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jul 22, 2007 10:45 pm
Posts: 39
Location: Orlando, FL
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

_________________
-Robert Gregor
http://www.twitter.com/bobbravo2
http://www.rgregor.com


Top
 Profile  
 
PostPosted: Sun Jun 21, 2009 2:11 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jul 22, 2007 10:45 pm
Posts: 39
Location: Orlando, FL
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.

_________________
-Robert Gregor
http://www.twitter.com/bobbravo2
http://www.rgregor.com


Top
 Profile  
 
PostPosted: Sun Jun 21, 2009 2:18 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jul 22, 2007 10:45 pm
Posts: 39
Location: Orlando, FL
Inline editing example for a module


You do not have the required permissions to view the files attached to this post.

_________________
-Robert Gregor
http://www.twitter.com/bobbravo2
http://www.rgregor.com


Top
 Profile  
 
PostPosted: Sun Jun 21, 2009 3:41 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Apr 24, 2009 2:22 pm
Posts: 7
@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.


Top
 Profile  
 
PostPosted: Mon Jun 22, 2009 3:52 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jul 22, 2007 10:45 pm
Posts: 39
Location: Orlando, FL
_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.

_________________
-Robert Gregor
http://www.twitter.com/bobbravo2
http://www.rgregor.com


Top
 Profile  
 
PostPosted: Tue Jun 23, 2009 8:52 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Jan 28, 2008 6:59 pm
Posts: 297
Location: In a galaxy far, far away...
_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!


Top
 Profile  
 
PostPosted: Wed Jun 24, 2009 2:52 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Apr 24, 2009 2:22 pm
Posts: 7
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 )


Top
 Profile  
 
PostPosted: Thu Jul 09, 2009 4:46 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jul 22, 2007 10:45 pm
Posts: 39
Location: Orlando, FL
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

_________________
-Robert Gregor
http://www.twitter.com/bobbravo2
http://www.rgregor.com


Top
 Profile  
 
 Post subject: 2 small bugs
PostPosted: Thu Jul 09, 2009 6:37 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jul 22, 2007 10:45 pm
Posts: 39
Location: Orlando, FL
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.

_________________
-Robert Gregor
http://www.twitter.com/bobbravo2
http://www.rgregor.com


Top
 Profile  
 
PostPosted: Thu Jul 09, 2009 6:47 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jul 22, 2007 10:45 pm
Posts: 39
Location: Orlando, FL
Comment posted to http://community.joomla.org/blogs/community/936-module-editing-at-the-frontend.html
Quote:
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.

_________________
-Robert Gregor
http://www.twitter.com/bobbravo2
http://www.rgregor.com


Top
 Profile  
 
PostPosted: Sat Sep 19, 2009 11:56 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Apr 25, 2009 3:43 pm
Posts: 17
so far you have done great work there is one problem though, all the editable fields are not filtered for XSS attacks.


Top
 Profile  
 
PostPosted: Wed Oct 14, 2009 7:34 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Oct 14, 2009 7:27 pm
Posts: 1
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


Top
 Profile  
 
PostPosted: Mon Dec 14, 2009 11:03 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Nov 04, 2009 5:13 am
Posts: 33
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????


Top
 Profile  
 
Display posts from previous:  Sort by  
Forum locked This topic is locked, you cannot edit posts or make further replies.  [ 29 posts ] 



Who is online

Users browsing this forum: No registered users and 14 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group