Tue

30

Jun

2009

Module editing at the frontend

After last week's post, I've now completed editing of module parameters in a modal popup. Edit icons appear next to the module titles which can be clicked to edit the module parameters. I've deliberately disallowed editing of advanced and other parameters from the modal popup at the front-end to avoid complexity. If it is a custom HTML module, then its content can also be edited via the modal popup.  

Module editing in modal popup

There are bugs in article & module editing which I'll be fixing in the coming weeks along with adding support for IE and other browsers.
 
As bobbravo2 pointed out, I'm not sure if the edit icons should be hidden/revealed when editing is toggled or the toggle function should only work for enabling/disabling of editing of titles in-place. The only reason a user will click an edit icon is if she wants to edit the article/module. But then, it makes sense to either enable or disable editing completely rather than partially. I would like your point of view on this. 
 
I'm not sure if I can implement in-place editing any other way ( other than the current way of background-color on hover and clicking to edit ) which will not interfere with the template and at the same time be user-friendly. I don't want popups to be clogging the UI every time you hover over a title as it will be difficult to ascertain the right position where the popup should appear ( template dependent ).
 
To make it easier to enter or leave editing mode, I've implemented a shortcut key 'e', using which you can toggle editing On/Off. So, anytime you want to perform editing, just press 'e'.
 
The next task I'll be taking up is of drag & drop placement of modules. Hence, in the coming week, I'll be fixing bugs plus starting up with drag & drop placement of modules.
 
As always, you can check out the demo at http://ankitahuja.com/playground/joomla 

 

47 Votes

15 Comments

Feed
  1. This is looking so good!

    Is your work pure experimental, or can we expect it in Joomla! 1.6, 1.7 or later?

    Kind regards
    David-Andrew
  2. Awesome, just awesome. Drag'n'drop reordering will be sweet, glad you're tackling that as well. For menu modules, it would also be sweet to have an icon to edit that menu's items (if you're not already planning this).
  3. Very cool. Love the 'e' toggle.
  4. @David-Andrew - Thanks! I'm creating this as a plugin right now but I'm making sure that it is easy to port it later to the core. So, if it does get decided to be added to the core, shouldn't be much of a problem.

    @Kyle - Thanks :) I'm a little if-fy about the menu items as of now. If I get the time and find an intuitive way to implement it, I'll surely do that :)
  5. This is truly great! I have a lot of users with low technical skills on one of my sites. Everything that makes it easier and more convenient to edit the content is really welcome.

    I think the best way to deploy this is to make the button toggle all editing functions. Any other way you risk confusing the users.

    Really hope this makes it's way into Joomla 1.6.

    Thanks again!!
  6. Greate work!

    The idea of modules/menus editing on the front-end using modal is really great. It allows easer access for editors and does not break the layout/design while editing.

    Congrats for the great work!
  7. It's very cool, I like it very much. Just one thing I have noticed, if you disable a module title, after that you will not be able to open that pop-up window to edit that module with no title enabled.
  8. Wow! That looks realy realy promising.
    The edit on/off button also works for article ...cool!
  9. That was really impressive Joomla template can do it make work easy for every designers..... 8-)
  10. @Edvard Ananyan: I fixed that now :)
  11. Ankit,
    amazing stuff! I have had hundreds of admins (normal people with admin acces, webmasters without tech knowledge) and believe it or not they almost all struggle with menu editing and module editing (most tech savvy deal ok with articles) This is a "small step for code but a giant step for Joomla"!
    Thx you so much for your work and all best at the GSOC, will be watching you :)
    cheers
  12. 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.
  13. would be amazing if the user could add categories and menu links when editing an article in place, and add articles.
    it seems like only existing categories can be used, and only menu text can be edited, not the link. is that correct?
  14. It is really amazing what you did here. Do you have a link on where we can download this?
  15. Hi,

    I would be very much interested where we could download this, even if it's just a beta/ alpha.

    Thanks

Add Comment


    • >:o
    • :-[
    • :'(
    • :-(
    • :-D
    • :-*
    • :-)
    • :P
    • :\
    • 8-)
    • ;-)