Dash Exhibit : Custom Property Sets

I think we can all agree that standardization in web development is good. In that vein, Dash allows you to create sets of "data-" attributes that can be used over and over.

Let's say we want a modal (covers background), draggable, resizeable dialog box of width 200px and height 100px with a title of "Caution!" that pops up on page load. To do this in plain JQuery, you would write:

HTML:
<div id="dialog">
  <p>Beware ye who enter here</p>
</div>


JS:
$("#dialog").dialog({
    autoOpen : true,
    draggable : true,
    height : 100,
    modal : true,
    resizeable : true,
    title : "Caution!",
    width : 200});

As you can imagine, this would actually be worse in Dash, as you would have a separate "data-" attribute for each property that conflicts with the defaults. 


So, you instead create a JavaScript object with the properties you want.


HTML:
<div id="dialog" data-dialog="true" data-dash-custom="Warnings.DefaultPopup">
  <p>Beware ye who enter here</p>
</div>


JS: 
// The Warnings Namespace
var Warnings = new function ()
{
    this.DefaultPopup = {
        "data-dialog-auto-open" : true,
        "data-dialog-draggable" : true,
        "data-dialog-height" : 100,
        "data-dialog-modal" : true,
        "data-dialog-resize" : true,
        "data-dialog-title" : "Caution!",
        "data-dialog-width" : 200
    };
}

But wait!, you say. That's more writing than the standard way, and I could put the options in a variable for standard JQuery too!

You would be correct, but with Dash you write a little extra once and then never have to come back to JavaScript again!

Also, in the upcoming revision, there will be shortcut attributes and the "data-element" will be unnecessary in the property sets, like below:

HTML

<div data-dialog="custom:Warnings.DefaultPopup;">...</div>

JS

// The Warnings Namespace

var Warnings = new function ()

{

    this.DefaultPopup = {

        "auto-open" : true,

        "draggable" : true,

        "height" : 100,

        "modal" : true,

        "resize" : true,

        "title" : "Caution!",

        "width" : 200

    };

}

These will make it even quicker and easier to use these custom attribute sets.