Is there a way to programmatically make changes to your layout file?

Question

I am currently working on a user navigation side panel and with it is a list of links, what I intend to find out is: is it possible to highlight/emphasize the list item that was clicked after the user is redirected all the while using the same default layout file for all views? I'm fairly new to CakePHP and the MVC design entirely so any help would be much appreciated.

score 0 · Answer 1 · answered Jul 21 '16 at 11:26

You can do this using JavaScript. Here's an example. This is in 2.x but there's no reason why you can't use it in 3.x

For brevity, I've only included a small menu excerpt

Menu.ctp

<script>
    var controllerLocation = '<?php echo $this->params['controller']; ?>';
</script>

<div id="menuWrapper">
    <ul id="menuBar" class="topmenu">
        <input type="checkbox" id="css3menu-switcher" class="switchbox">
        <label onclick="" class="switch" for="css3menu-switcher"></label>
        <li class="topfirst">
            <?php
                echo $this->Html->link(
                    $this->Html->image('menu/contact_32.png', array('width' => '20', 'line-height' => '20'))
                    . ' ' . __('Contacts'),
                    array('controller' => 'contacts', 'action' => 'index'),
                    array('escape' => false, 'id' => 'menu-contacts'));
            ?>

        </li>
        <li class="topmenu">
            <?php
                echo $this->Html->link(
                    $this->Html->image('menu/asset_32.png', array('width' => '20', 'line-height' => '20'))
                    . ' ' . __('Assets'),
                    array('controller' => 'assets', 'action' => 'index'),
                    array('escape' => false, 'id' => 'menu-assets'));
            ?>
        </li>
        <li class="topmenu"><?php
                echo $this->Html->link(
                    $this->Html->image('menu/tasks.png', array('width' => '20', 'line-height' => '20'))
                    . ' ' . __('Tasks'),
                    array('controller' => 'tasks', 'action' => 'index'),
                    array('escape' => false, 'id' => 'menu-tasks'));
            ?>
        </li>
        ......
    </ul>
</div>

As you can see, each menu element has a specific id attached to it, and I have also declared to variables in javascript to define the current controller.

Next, I have a javascript file which checks the current controller and action, and adds a class to which ever element is pressed.

Script File

$(document).ready(function () {
    switch (controllerLocation) {
        case 'contacts':
            $("#menu-contacts").addClass("pressed");
            break;
        case 'assets':
            $("#menu-assets").addClass("pressed");
            break;
        case 'activities':
            $("#"+controllerLocation).addClass("pressed");
            break;
        case 'tasks':
            if(action == 'calendar_view'){
                $("#menu-calendar").addClass("pressed");
            }
            else $("#menu-tasks").addClass("pressed");
            break;
        case 'mailshots':
            $("#"+controllerLocation).addClass("pressed");
            break;
        case 'webrequests':
            $("#menu-web-requests").addClass("pressed");
            break;
        case 'opportunities':
            $("#"+controllerLocation).addClass("pressed");
            break;
        default:
            $("#admin").addClass("pressed");
    }
});

The pressed class in css adds a style to the element which will make it look different to the rest of the elements

CSS File

ul#menuBar li a.pressed {
    background-color: #ff920a;
    border-color: #ff920a;
}

You can use these principles to apply to your own solution. This can also be done in pure php, but this is an example of one I've implemented

score 0 · Accepted Answer · answered Jul 22 '16 at 18:15

You can add a paramter to your method in your controller which indicates which link was clicked and set it. Something like this:

public ControllerMethod($clickedLink = null) {
    // controller logic
    $this->set(compact('clickedLink'));
}

If you did the links in your controller with Cakephp Helper:

echo $this->Html->link('LinkName', array(($clickedLink == $idOfThisLink) ? 'class' => 'link-clicked' : '', 'controller' => 'ControllerName', 'action' => 'ActionName', 'linkId');

// linkId after ActionName is the parameter passed to the controller when the link is clicked

And add the class link-clicked to your css with the style you like.

Is there a way to programmatically make changes to your layout file?

2 Answers2