Standalone popups

In AriaTemplates, popups are widgets, it means you get to open a popup from within a template, using the following syntax:

{@aria:Dialog { ... } /}

And you would then bind the visible property of that widget to some value in the data model in order to decide when the popup is visible and when it is hidden.

This might look like a strange approach for a lot of people used to somewhat more standard DOM manipulation approaches where a popup is most of the time considered as something you trigger through javascript and which offers a placeholder to display content.

Well, it turns out that the way the AT popup is done kind of allows this. The only tricky part is the fact that since popups are used in templates, they know how to display content coming from templates, namely, sections.

To work around this, we can very easily mock a section object, and instantiate a popup object using the AT aria.popups.Popup class. I know it’s not very clean, but does work.
Consider the code below:

Aria.classDefinition({
  $classpath: "SimplePopup",
  $extends: "aria.popups.Popup",
  $prototype: {
    _getMockSection: function(htmlContent) {
      return {
        html : htmlContent,
        initWidgets : function () {},
        $unregisterListeners : function () {},
        removeContent : function () {},
        $dispose : function () {},
        refreshProcessingIndicator : function () {}
      };
    },
    openWithHtml: function(config, htmlContent) {
      config.section = this._getMockSection(htmlContent);
      this.$Popup.open.call(this, config);
    },
    openWithTemplate: function(config, classpath, moduleCtrl, data) {
      var dynamicId = "popup_" + new Date().getTime();
      this.openWithHtml(config, "<div id='" + dynamicId + "'></div>");
      Aria.loadTemplate({
        classpath: classpath,
        div: dynamicId,
        moduleCtrl: moduleCtrl,
        data: data
      });
    }
  }
});

With the above, you can now open a popup with arbitrary HTML content like so:

var popup = new SimplePopup();
popup.openWithHtml({
  absolutePosition : {top : 200,  left : 500}
}, "<p>Some HTML content</p>");

Or open a popup with the content of a template:

var popup = new SimplePopup();
popup.openWithTemplate({
  absolutePosition : {top : 200,  left : 500}
}, "my.popup.Template");

Note that the config object passed to these 2 methods can accept any of the popup config properties (except the section obviously, because we are creating a mock one dynamically).

Note as well that the aria.popups.Popup class itself is not responsible for the markup and styling of the popup container, so by default, you’ll just get your content in the middle of the screen. You might be interested in using the {@aria:Div {sclass:"dlg"} /} widget to make it look like the normal AT dialog.

Tell me if you think this is a feature that the framework should provide out of the box?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>