Popups

In OGX.JS, Popups are floating boxes with a view in them, they can be draggable, have and icon and buttons. A popup is what would be commonly called in an operating system environment, a window.

Popups are parts of the core, have a size and a view. For the following documentation consider app being an instance of Core.

Instantiate

 let config = {
      name:_STRING_, //Required, must be unique
      width:_NUMBER_|_STRING_, //Required, either a number (for pixels) or a percentage 
      height:_NUMBER_|_STRING_, //Required, either a number (for pixels) or a percentage 
      title:_STRING_, //Optional, the title of the popup,
      buttons:_ARRAY_, //Optional, an array of strings
      view:_STRING_, //Optional, the view to instantiate in the popup
      config:_OBJECT_, //Optional, the config object for the view
      html:_STRING_, //Optional, some HTML content to add to the body of the popup
      template:_STRINT_, //Optional, HTML content coming from a template stored in Templater
      anim:_STRING_, //Optional, defaults to OGX.MobileCore.POPUP_FADE 
      listen_overlay:_BOOLEAN_, //Optional, if the core should listen for clicks on the overlay and hide it
      zindex:_INT_ //Optional, the z-index of the popup,
      css:_STRING_ //Optional, an css class to be added to the body of the popup
 };
 app.addPopup(config);

Example - Create a popup of 400x300px, pass it a view 'MyView', with an empty object, a fade animation and ignore user interactions on the underlying overlay (tapping the overlay won't do anything).

 app.addPopup({name:'MyPopup', width:400, height:300, view:'MyView', config:{}, anim:OGX.Popup.POPUP_FADE, listen_overlay:false});

Same but with percent instead

 app.addPopup({name:'MyPopup', width:'80%', height:'80%', view:'MyView', config:{}, anim:OGX.App.POPUP_FADE, listen_overlay:false});

Delete

 app.removePopup(_NAME_, _ANIMATION_);

Deleting a popup will also call the destroy method of a view.

Listen

All popup events are dispatched at document level. If your popup has buttons, you can listen to a click/tap event on the buttons by doing

 $(document).on(OGX.Popup.CLICK_BUTTON, function(__event, __data){
         console.log(__data); //logs {index:_INT_, value:_STRING}
 });