BackEnd GUI modification

[bdx]

Hello fellas, i would definitely appreciate some help on this -

What i'm trying to do is change how the back end looks and works (On the scale of what Extjs did but hopefully a much much simpler augmentation) - simply put, i want to:

1) frontify - front end editing (i know true fe editing isn't possible but a slight tweak of fastedit would work perfectly)
2) simplify & compartmentalize-ify
3) coolify

So i'm on a quest to frontisimplicoolify

After i saw and tried both fast edit and ExtJs i knew what i wanted to do was possible and the only question was whether or not i have enough skill to do it or could find someone to point me in the right direction with some assistance. I've used PHP for years but i'm definitely not an expert at it. I've looked at the API and some of the other docs and still don't know where to start on this so i figured i'd ask for some help. I'm sure once i get my foot in the door on how extending this sucker works, i should be fine.

Simple Version (long version on next post):
1) Is it possible to implement something like FastEdit, but one that opens the BE in an iframe. Where do i start when wanting to make a change like this? What do i need to modify?

2) Is it possible to compartmentalize fields so that when you're doing an edit, it only shows the specific fields i want - no menu, no header/footer, etc. ExtJs does something like this as it moves all the other stuff elsewhere - i'd want to do something like that but on a much smaller scale. Is this a simple template edit (doesn't look like it) or something much more complicated - will i have to use the parse() function to do this? I would like to also hide the fieldsets but i think that one can be done via CSS. (the reason why i i'd rather hide them than just disable them for a user can be seen below).

Thanks...

[bdx]

Long Version

On 1,
Fast Edit works fine but it has 2 things i dislike:

i) pop up (or new tab in FF)
ii) New window contains entire BE

My way around dislike (i) is preferably with an iframe or less preferable, a frame. I realize that users will still have to log into the back end to do FE editing but that's fine. What i'm looking to create is modes. BE mode and FE mode so when they click on FE mode, the BE is still visible albeit is docked and is only opened when the user clicks to edit content ala Fast Edit. This way the user remains in one window and the flow is much much better. Same concept applies with the Frame solution but instead of having a dock, it's small frame that can be resized accordingly as it's put in focus.

Since the BE admin won't be a full window and will be cordoned of to a smaller area, we encounter dislike (ii) - the whole BE shows when using Fast Edit meaning ugly side to side scroll bars to do anything. This is where Item (2) simplify & compartmentalize comes in.

On 2,
My first thought was that i could just create users that were meant strictly for front end use that didn't have access to fields beyond the main content fields i wanted to show when editing via front end. However, that doesn't really solve my problem - the menu's etc still show and totally mess everything up :evil: . So what i want to do here is to be able to hide everything else but the forms in question when in FE mode. I also want to break out the field sets into tabs to break them out so that i avoid horizontal scroll bars (this is primarily for aesthetics but i'm an artist at heart :D ).

On 3,
i Just need to understand better how to modify the BE. I get the template part with tpl's but my current hang up is the CSS and figuring out what goes to what. Admittedly, I haven't spent too much time on this part because i really need to get 1 and 2 before 3 comes into play. I'm sure i should be able to do this part since i've done the FE templating a few times already.

[ga.n]

Hi bdx,

last year I tried to do the same thing but then I started working on ImEx extension (see links in the sign if you want to know more :D) so the project was put in standby.

here are my notes on that project:

target:
provide a frontend user interface to let users editing website's content "visually"

i. find a way to add html "classes" to content/module/page
e.g. a tl_content of type text with ID 42 will be rendered as:

<div class="ce_text fe_tl_content fe_tl_content_id_42 fe_tl_content_type_text">
....
</div>

this way will be extremely easy to write something that recognize that every content included into the "fe_tl_content_id_42" div is related to typolight/main.php?do=article&table=tl_content&act=edit&id=4 2

ii. find a method to alter the backend theme on-demand (e.g. through a GET/POST/COOKIE trigger) so you can dynamically change the backend e.g. typolight/main.php?do=article&table=tl_content&act=edit&id=4 2&be_theme=something

the first point can be achieved by adding simple php code to Content.php, Module.php and Form.php (I am sure i am missing some file but do not matter in this phase) that add the above classes only if there is a backend user logged in.
when I say is "extremely easy" I mean is "extremely easy" if you plan to use javascript else you have to play with some php xml parser or something similar and it could not to be so easy as writing javascript.

the second point can be achieved with small changes to Controller::getTheme method. This allows to open the backend into an iframe (e.g. lightbox) without mess up the website.

once the above points are satisfied the extension can extended to add some useful buttons like:
"add a new page into this", "edit the layout or current page", "add a new article into the current page" and so on ...
the best place where to put these buttons is (clearly) the "frontend preview" user interface.

please note that:

* the above points require (small IMHO) modifications to TYPOlight core so you need to open some ticket
* I can dedicate some of my spare time to this project (e.g. writing code) and I am happy to contribute to "design"

so if you want to "open tickets", follow them and release the extension under LGPL we can go on ...

hope this helps in some way

[bdx]

ga.n,

That helps A-WHOLE-lot. I,of course, have no qualms with making an open source extension - infact my original wording was that i was on a "quest to make an extension called frontisimplicoolify" but reworded it since it's probably not the most descriptive name for an extension (or maybe it is?).

Anyhoo, the way you broke it down seems like a good approach. I'm not familiar with the ticketing system for typolight but will check that out now and see how we can get this ball rolling.

btw, great work on the imEx thing, quite nice.

[ga.n]

ga.n,

That helps A-WHOLE-lot. I,of course, have no qualms with making an open source extension - infact my original wording was that i was on a "quest to make an extension called frontisimplicoolify" but reworded it since it's probably not the most descriptive name for an extension (or maybe it is?).

maybe something like "Live Frontend Editor" is better, but the name is a detail

Anyhoo, the way you broke it down seems like a good approach. I'm not familiar with the ticketing system for typolight but will check that out now and see how we can get this ball rolling.

ok I can retrieve the patch that must be applied to TYPOlight core in order to start working. I'll post it ASAP

btw, great work on the imEx thing, quite nice.

thanks