Dojo Bootstrap Modal, who needs popups
A while back I did a post on my own blog on using Dojo Bootstrap with the ArcGIS API for JavaScript. I showed how you can incorporate it to do an autocomplete search that works pretty well and looks good. I've used Dojo Bootstrap pretty extensively in my app development and I've found a few quirks that require a little work on my part. If you layout your HTML with the property attribute tags and load the library you should not have any real issues beyond a little learning curve. I've found that I've had to do a couple of work-arounds when I wanted to programatically create elements as widgets. An easy demonstration of this can be seen when creating a Modal.
Modals, you're own way
I typically want to treat my Modal popups as a widget and that means I may want to customize the look of the Modal a little bit. In the sample I'll show, this is the template I use for the widget.
var tpl = [
'<div class="modal fade popup-container" id="myModal" tabindex="-1" role="dialog"',
'data-dojo-type="Modal" data-dojo-props="header:My Modal, modalClass: fade"',
'aria-labelledby="myModalLabel" aria-hidden="true" data-dojo-attach-point="modalNode">',
'<div class="modal-dialog">',
'<div class="modal-content" data-dojo-attach-point="contentNode">',
'<div class="modal-header">',
'<h4 id="myModalLabel"></h4>',
'<span data-dojo-attach-point="labelNode">${title}</span>',
'<a href="javascript:void(0)" class="glyphicon glyphicon-remove pull-right popup-close" data-dismiss="modal" aria-hidden="true"></a>',
'</div>',
'<div data-dojo-attach-point="bodyNode" class="modal-body">',
'</div>',
'</div>',
'/div>',
'</div>'
].join("");A lot of this is pretty standard, but I wanted to dynamically set the title and add a bodyNode attach-point that I could add the content to. Instead of interacting directly with the Modal module, I wrap it in a separate widget that allows me to do things like set the title and update the content. This custom widget for the Modal looks like this.
var Popup = declare([_WidgetBase, _TemplatedMixin, Evented], {
templateString: tpl,
loaded: false,
constructor: function() {
this.set('content', '');
this.set('title', 'Popup Window');
},
postCreate: function() {
this.modal = new Modal(this.domNode);
var watchContent = this.watch('content', function(_, __, value) {
domConstruct.empty(this.bodyNode);
this.bodyNode.appendChild(domConstruct.toDom(value));
}.bind(this));
var watchTitle = this.watch('title', function(_, __, value) {
this.labelNode.innerHTML = value;
}.bind(this));
var onHide = on(this.modal.domNode, 'hide.bs.modal', function() {
this.emit('hide', {});
}.bind(this));
this.own(watchContent, watchTitle, onHide);
this._init();
},
show: function() {
this.modal.show();
},
hide: function() {
this.modal.hide();
},
_init: function() {
this.set('loaded', true);
this.emit('loaded', true);
}
});So what's happening here is you create a new Modal using the domNode of the widget as the target. You set up a watcher for when the Modal is hidden and propagate that event up from the widget. This required looking at the tests for the Modal to find event names, as some of the docs are still being updated. Then you set up watchers for the title and the content, the latter being converted to a DOM element and added to the bodyNode of the widget.
The result will look similar to this.
To demo this, I just took an existing InfoWindow sample and modified it in this JSBin.
There's not much happening in that Modal window, but think about what you could do with that extra real estate. You could display image attachments, or provide nicely formatted details of the data or related table data. You'd have room to even add other widgets in there to display nice charts in the window. I use this to provide full edit forms with nice big buttons and even other Modal popups as picklists. The power is in your hands.
Hack and slash
This may not be groundbreaking work here, but adding little touches like moving InfoWindow content to a Modal popup are the types of things that add a bit of flair to your applications. You could use dijit/Dialog as well and tweak the styling as well if you like, the idea is to test this type of interaction out and see if it provides a more fluid experience for your users. You could even style the Modal popups to take up the whole page and provide some nice looking transitions on a mobile device. You're writing the code, make it you own. Big thanks to Tom Wayson for helping me dig into the Dojo Bootstrap guts to get things done.
For more geodev tips and tricks, check out my blog and hack your maps.