Another update on WSM Calendar

Well, the going is slow with the calendar. It seems so hard to find contiguous time to work on it these days. I’ve fixed a LOT of bugs in the back-end, and the front-end isn’t looking too bad. I’m just now playing with getting dialogs set up for adding new events and editing existing ones.

My first instinct was was to use jquery-ui for my dialogs. After all, I’m already using jquery as my javascript helper library. I started out designing the event editor dialog, and I immediately realized that jquery-ui doesn’t provide any layout management…at all. Having to pixel-push every element in the dialog didn’t excite me.

That lead me to look at ExtJS as an alternative. ExtJS has a lot of very powerful (albeit complex) features, including a basic set of layout managers. While experimenting with it, however, I found that it’s form handling didn’t allow complex layouts. I had an idea in my head for what seemed to me the most intuitive way to lay out the event editing dialog, and I just couldn’t make it work with ExtJS. Any of the working alternatives I came up with just lost too much intuition to be satisfactory, so I went back to jquery. The layout isn’t perfect—inputs that should be on the same line sometimes wrap if the user increases the font size— but that’s something I can perfect later.

While creating that dialog, I also created my first jquery plugin. To make the discussion more clear, here’s an image of my original design (design done with Balsamiq Mockups):

You can see that I have several checkboxes here, each of which enables/disables the inputs that go with it. I found a nice plugin called jquery-enable-disable-plugin. This lets you assign one element that will disable or enable other elements. It, as most plugins, operates based on normal jquery selectors. I didn’t want to keep the javascript for this up to date by hand, however, so I wrote a helper plugin called jquery.enabler.groups. It scans the children of the elements matched by the provided selector for a specific custom attribute: data-enabler-group, and assigns an “enabler” to all members of that group. Here’s an example:

<input type="checkbox" data-enabler-for-group="test_group">
<input type="text" data-enabler-group="test_group">
<input type="button" data-enabler-group="test_group">

In the example, the plugin finds the two input elements that have data-enabler-group set. On each of these, it uses the jquery-enable-disable plugin to attach the element that has the matching data-enabler-for-group attribute as their enabler. That way, if the checkbox is toggled, all elements whose data-enabler-group attribute match will toggle their enabled state. Not only that, but it also supports child groups. Take this example:

<input id="main_check_box" type="checkbox" data-enabler-for-group="test_group">
<input type="text" data-enabler-group="test_group">
<input id="subgroup_check_box" type="checkbox" data-enabler-group="test_group"
<input type="text" data-enabler-group="test_sub_group">

Here, if the main checkbox is unchecked, all the elements are disabled, including the test_sub_group members, because their enabler is being disabled. If the main checkbox is checked, the subgroup checkbox is free to enable/disable it’s group members.

That’s going to save me a LOT of very tedious, repetitious coding. After I’ve tried it out for a bit, I might submit the plugin to jquery’s plugin database.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: