Material box overlayer

Introduction

The T1 material box is an overlayer based on the Google materialize implementation: Styleguide section.

The Overlay can be triggered from a link or button if the content is available in page or dynamically from a postal published event.

The box will by default slide up from the bottom of the screen. The size of the box is by default adaptive to the content of the box, but it can be configured to be fullscreen.

Usage

From HTML

Trigger Element

Links or buttons with a specific class to be able to trigger a materialbox:

How to pass options

Options for the box that needs to open can be passed on via data attributes on the trigger element.

For an overview of all options, see the Options Section

Example

<a href="/path/to/page?with=parameters" class="btn btn-action-primary action-box-ajax" data-styleclass="my-custom-classname"> Open Box </a>

From JavaScript

Material boxes opening and closing are handled by postal events, whether the event is handled by predefined triggers/events or if the event is handled dynamically in a specific context.

Note for third parties : Please use native postal subscribe/publish events and never use T1.constants content without a fallback to it's value.

Trigger a material box

The following javascript can be executed to open a materialbox:

T1.channels.dialog.publish(T1.constants.MATERIALBOX_OPEN, {});
// CHANNEL: 'com.toyota.tme.t1.dialog'
// TOPIC: 'materialBox.open'

How to pass options

The second argument provided to the publish function is an object where you can provide options to the materialbox.

This published event will initiate the material box with all the passed options. For an overview of all options, see the Options Section

Close a material box

This published event will close the material box. Note that closing the material box is usually handled by hash rooting or predefined buttons that are added -or even dynamically added depending on options- in the content of the material box.

//Close it by passing the material box instance
var PARAMS = {box: materialBoxInstance};
T1.channels.dialog.publish(T1.constants.MATERIALBOX_CLOSE, PARAMS);

//Close all material box instances
var PARAMS = {closeAllMaterialBoxes: true};
T1.channels.dialog.publish(T1.constants.MATERIALBOX_CLOSE, PARAMS);
// CHANNEL TOPIC: 'materialBox.close'
// CHANNEL: 'com.toyota.tme.t1.dialog'

Material box opened event

Subscribing to this event allows you to execute code once the material box was opened. The callback is triggered with the material box instance as a parameter.

T1.channels.dialog.subscribe(T1.constants.MATERIALBOX_OPENED,
    function(materialBoxInstance){
        /* code to execute whenever a material box has opened */
    }
);
// CHANNEL TOPIC: 'materialBox.opened'
// CHANNEL: 'com.toyota.tme.t1.dialog'

When subscribing to the material box opened event, it is recommended to store that subscribtion in a variable and unsubscribe in the event callback. This cleanup avoids listening to unintended material box opens in the page lifetime.

var subscribtion = T1.channels.dialog.subscribe(T1.constants.MATERIALBOX_OPENED,
    function(materialBoxInstance){
        subscribtion.unsubscribe();
        /* code to execute whenever a material box has opened */
    }
);
// CHANNEL TOPIC: 'materialBox.opened'
// CHANNEL: 'com.toyota.tme.t1.dialog'

Material box closed event

Subscribing to this event will trigger it's callback with the materialbox object that was closed as a parameter.

T1.channels.dialog.subscribe(T1.constants.MATERIALBOX_CLOSED,
    function(materialBoxInstance){
        /* code to execute whenever a material box has been closed */
    }
);
// CHANNEL TOPIC: 'materialBox.closed'
// CHANNEL: 'com.toyota.tme.t1.dialog'

The same reasoning for unsubscribing in the callback (explained in the opened subscribtion) is applicable here as well.

Options

Options can either be added to the trigger element through data-actionbox- attributes or passed to the material box open published events.

Here's an example of how to add those options when triggering the material box from a trigger element with data-attributes:

<a class="trigger-box"
    data-actionbox-globalclose="true"
    data-actionbox-styleclass="flex-layout small-header markdown-file"
    data-actionbox-type="iframe"
    data-actionbox-url="/html/features_doc/components/ajax_panels.html"
    href="/html/features_doc/components/ajax_panels.html"
    target="_blank">
    setup and options documentation
</a>

Note that uppercase isn't required for those options, for instance globalClose is globalclose when using data attributes.

Types

As explained in the option type description, the type of materialbox will define its content. Note that if html is passed as an option with the content required in the material box, the type will be ignored.

For instance box-alert-okcancel:

T1.channels.dialog.publish(T1.constants.MATERIALBOX_OPEN,
    {
        type: 'box-alert-okcancel',
        selector: '#myLanguage',
        styleClass: 'dark small-header left-buttons free-layout',
        title: $('#myLanguage > h5').text(),
        target: e.target,
        buttons: {
            ok: {
                styleClass: 'btn-dark',
                function: function() {
                    /* on ok click handler */
                }
            },
            cancel: {
                styleClass: 'btn-link',
                function: function() {
                    /* on cancel click handler */
                }
            }
        }
    }
);

The selector option will get the node of the matching element, append it to the material box content and place a placeholder on it's initial location so that it can be recovered when the material box is closed.

Examples:

T1.channels.dialog.publish(T1.constants.MATERIALBOX_OPEN, {
    target: target,
    html: $galleryOverlayerHtml,
    styleClass: 'free-layout explore-gallery-box explore-gallery ' + m.overlayCarousel.activeNavWrapperClass,
    onClose: function (){
        //...
    }
});
<a href="/html/pages/form-v2/testdrive.html"
    class="action-box-ajax">
    Test drive
</a>
<a href="#explore-spin"
    class="btn btn-simple action-box-selector"
    data-styleclass="free-layout full-screen">
    Explore features
</a>
<a class="trigger-box"
    data-actionbox-globalclose="true"
    data-actionbox-styleclass="flex-layout small-header markdown-file"
    data-actionbox-type="iframe"
    data-actionbox-url="/html/features_doc/components/ajax_panels.html"
    href="/html/features_doc/components/ajax_panels.html"
    target="_blank">
    setup and options documentation
</a>
T1.channels.dialog.publish(T1.constants.MATERIALBOX_OPEN, {
    type: 'box-alert-none',
    styleClass: 'free-layout survey',
    title: variables.title,
    msg: [variables.msg, $('<a style="color: ' + variables.link.color + '">' + variables.link.msg + '</a>').click(m.confirmTakeSurvey)],
    closeButtonOverwrite: m.cancelTakeSurvey
});