Forums

How to extend "Edit Area Design" functionality?

Permalink
The core handles changing the background color of an area. I want to package something that extends the functionality found here to allow even more options.

My idea is to add a button to the bar that shows up when you "Edit Area Design", and it would have a list of special effects you could select from. When viewed, the area background would be swapped out with an HTML5 canvas object.

It could be done by just adding a class name of course, but I want to enable the user to be able to customize the appearance of the canvas object as well, not just use a predefined style.

I was starting this off like any other block, and it would just have some content pre-formated ontop of the canvas they could add from the block... but I realized it would be far more useful if the user could instead set the background of any area of their site to be this custom HTML5 canvas.

Any ideas how I should go about this?
ob7dev
 
Gondwana replied on at Permalink Best Answer Reply
Gondwana
I know the UI isn't what you have in mind, but I learnt a lot from
https://www.concrete5.org/marketplace/addons/mrkdilkington-full-scre...
ob7dev replied on at Permalink Reply 1 Attachment
ob7dev
Well the UI is sort of what I had in mind. I want people to be able to target any areas background with an HTML5 canvas created by the block.

I came up with some pretty hacky code that adds a new menu item to the menu shown when clicking on an area, and from there I could target the area and let the user set the effects, but its not something that could be distributed in the marketplace as it alters the core editing interface:
public function on_start()
    {
        Events::addListener(
            'on_page_view',
            function ($e) {
                $page = $e->getPageObject();
                $c = Page::getCurrentPage();
                $cID = $c->getCollectionID();
                $systemPage = $page->isAdminArea();
                $editMode = $page->isEditMode();
                if(!$systemPage && $editMode) {
                    $al = AssetList::getInstance();
                    $v = View::getInstance();
                    $db = Database::connection();
                    $q = 'select arID from Areas where cID = ?';
Viewing 15 lines of 34 lines. View entire code block.

My attachment shows the what this code does ( adding a forth menu item to the list ).
ob7dev replied on at Permalink Reply
ob7dev
The add-on you linked to doesn't target a specific area, but the whole page.

I'm trying to confine this to areas.... wait a sec... you just gave me an idea with that link... I think I know what I can do here!

Add the special effect block to an area you want to turn into a canvas background. After the user configures the options in the block form and saves it, the block will load the canvas into view by getting the parent area container and applying itself to that! Face palm! I can't believe I didn't think of that before! I actually did something like this before when I was first starting out in concrete5 and building a site for a client. Not knowing any better, I made them add a block that would change the background image of a section instead of making it a page attribute option in the composer form.

Thanks for the insight! Your awesome!
Gondwana replied on at Permalink Reply
Gondwana
Yes, that's what I had in mind (now that you mention it!).

The key, I thought, was the approach to adjusting the DOM from a block.

I sorta did something similar for my wife, who wanted an old-school banner sorta thing in an area:
http://naturewalks.id.au/

That banner image block is very hacky and not packaged, but perhaps shows that it can be done (badly).