Monday 29 September 2014

Building a Joomla wysiwyg module

29-September-2014:
My first commercial Joomla! project felt a bit like a disaster. I did everything right; pimped the template, customized the modules, made a custom admin console page, wrote the documentation yet. The client was "Meh" about the whole thing... Kind of like the admin console was too complex. I figure what the client needed was a secretary. Anyways he never used the site; Never even notice a few people registered, nor did he notice when the site got defaced (because Joomla 2.5.9 apparently). Well I wasn't getting paid extra for maintenance, in fact I wasn't at all getting paid (The client's is family; got to hate family business). So I just let the site to the graveyard. I closed this project with the bitter task of failure in my mouth, and a bad start for my career as a joomla developer.

Joomla!'s administrator interface is horribly busy
First time I saw the interface, I paniced, not a lot, not until I tried to figure out how to make an article, by creating a category for the article, a module to display it, a menu to contain the menu item, and a menu item with the actual link to the article. Try explainingall that to your client. Anyways I exagerating, truth is I just want to make that wysiwyg editor cause I figured it would be a cool addition to my future joomla sites. So there you have it.

The specifics
Goal 1: Users have to be able to edit the module positions by just dragging them from one position to the other.

Where I'm at
Done 1: Figured I could use jquery-ui to make html elements draggable and self sorting. Tried html5 draggable="true" at first but changed my mind after I read some pretty horrible things about it.
I also read this css-tricks articles that demonstrated how to produce certain drag and drop effects.

Done 2: Found out the positions information are stored in the #__module table. So I won't need a jplatform call, just some Ajax fairy dust to keep the action in the frontend.

Stuck 1: Figured I would get modules positions by reading the templateDetails.xml positions section and then set the div's around these positions to droppable and each module's div to draggable...
This is where I am stuck; Do I read the templateDetails.xml for the selected template or is there a JPlatform call that could handle that for me?
Do I have to parse the index.php in order to find module positions? Is there a way to set all modules to a common class name so I can parse with javascript and the DOM?

30-September-2014:
Task 1: List the positions
I could either use the #__module table or the templateDetails.xml

Task 2:  Get the template's index file
I might be able to get it using
<?php JPATH_ROOT . "templates/" . $this template . '/index.php' ?>
Then look for the parts that have jdoc:include statements. How do I render it though? Do I add an attribute to the module? Do I just render it with a new class without modifying the template itself? Do I simply search the rendered templates for joomla generated core css classes and manipulate them with javascript?

I discovered then that Joomla 2.5.x gave every module a class moduletable; that looked promising. I couldn't find a list of core classes for Joomla 3.x though. Apparently they are different that version 2.5.x and use bootstrap classe names. I already feel I may have to abandon the fully frontend module initiative.

While looking for a way to customize jdoc statement  (the <jdoc:includes />) I discovered the concept of Joomla module chromes : a techique to render custom classes. Noticed however that it only worked with templates, when I wanted to work with modules.

03-October-2014:
I abandoned the idea of using Joomla's core classes. Templates are not required to use them and may have their own classe names for modules. In the end I'll have to do some php and jplatform acrobatics on the joomla files. I am thinking of getting some clues on how to render custom joomla pages from the renderer files in /libraries/joomla/document/html/renderer/ folder. From a quick google search I found out I may also be able to render custom views using the MVC architecture of joomla.

04-October-2014:
Finally I found a easier way to get content displayed in completly customizable view: Joomla components.

07-October-2014:
Found the JPlatform class that should allow me to read template index files: JInput. Found it in the Joomla developer manual . Now that I can read templates files all that's left to do is parse them, find the jdoc statements, get the position names from their name attribute, and get the class and id of the divs surrounding them so as to know what to manipulate in my javascript. Now what will I use for parsing: javascript or php? Javascript has the DOM... PHP will probably be faster though since it runs on the server side, but I don't know how to parse with PHP yet so...
Dude took me just 5 minutes to google it and it seems php dom xml parser will do...

10-October-2014:
Feels like I made some real progress today; Retrieved the path to the currently used template, and read it...

Retrieving the path of the currently used template:
Queried the #__template_styles table for the name of the template where the following attributes:
- client_id = 0 (client-side template = 0, admin templates = 1)
- home = 1 (default/currently used = 1, not default = 0)

once the name of the template found, simply created the template directory string using JPATH_ROOT:
$template_dir = JPATH_ROOT .  '/templates' . $template_name . '/'

Current issues 1: Saving to file using JFile or fopen
My first attempts failed for some reason.

Current issues 2: Parsing the retrieved file with PHP DOM
My goal is to get the elements that contain jdoc statements.

To be continued...

No comments:

Post a Comment