Changing archaius block behavior

Recently, I received a message from Diego Quirs. He was trying to change the behavior of archaius’s blocks effect because it not behaves as a common accordion menu http://ui-patterns.com/patterns/AccordionMenu.

Some people have been pointing out this, thats way I decided to do an small change on my jquery plugin called archaius_custom_blocks_uglify-1.0.0.min.js and I have created a version 1.1.0, which behaves like a common accordion menu.

Why I choose the other effect when I was developing Archaius

My effect could be a little confusing the first time if you are used to the common accordion, but it keeps all options visible. If you use a common accordion menu, and you have a block with too many options (administration block, navigation block …), some block’s tabs are going to be hidden.

Ex.

Screen Shot 2014-04-05 at 12.50.28 PM

If you open this moodle course page, you can’t see just the administration block tab, but actually it is not the only block tab.

Screen Shot 2014-04-05 at 12.51.28 PM

My effect keeps all block’s tabs visible

Screen Shot 2014-04-05 at 12.51.36 PM

On the other hand, if you don’t recognize the color of the active block, you can get confused, but all options are visible for you, so you can choose another block title and realize which one was activated and realize what is color of the activated block.

You should evaluate the trade-off between these two options and check which one is better for you.

How to use version 1.1.0

You have to download the plugin archaius_custom_blocks_uglify-1.1.0.min.js.

After download the file must rename it to archaius_custom_blocks_uglify-1.1.0.min.js

Put the file inside the javascript folder of Archaius. Then go to the config.php and replace:

$THEME->javascripts_footer = array(
'jquery-1.10.2.min',
'modernizr',
'archaius_custom_blocks_uglify-1.0.0.min',
'responsive_slide_uglify.min',
'archaius'
);

for:

$THEME->javascripts_footer = array(
'jquery-1.10.2.min',
'modernizr',
'archaius_custom_blocks_uglify-1.1.0.min',
'responsive_slide_uglify.min',
'archaius'
);

After that you only have to add the following rule to your custom CSS:

Screen Shot 2014-04-05 at 1.41.43 PM

And you are going to get this:

Screen Shot 2014-04-05 at 1.46.05 PM

I hope it works in all cases, because I haven’t tested it very well. Any comment is well received.

You may also like...

3 Responses

  1. Diego Quirós says:

    Thanks Daniel!

    The filename archaius_custom_blocks_uglify-1.1.0.min_.js has an underscore that must be removed

  2. dmuneras says:

    Thanks Diego, wordpress had added the underscore at the end, I didn’t notice it.

  3. dmuneras says:

    As a general comment, be careful with compressed jquery plugins. take a look of http://dmuneras.webfactional.com/2013/12/30/problem-with-jquery-plugins-in-moodle-2-6/

    Sometimes I forget to follow my own advice and I have to fix it after trying the plugin in Moodle without theme designer activated.

Leave a Reply

Your email address will not be published. Required fields are marked *