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 or objects
      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, defaults to false, 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
 });

Buttons

You can add buttons to your popup either by passing an array of strings (labels of buttons) or an array of objects. If you use strings, you will need to listen to the events of the popup, (see Listen), such as

  app.addPopup({
     ...
     buttons:['OK', 'Cancel']
  });

If you'd rather not listen to events and have a callback called when the button is hit instead, do

  app.addPopup({
     ...
     buttons:[{label:'OK', callback:myFunction}, {label:'Cancel', callback:otherFunction}]
  });

  function myFunction(){ ... }
  function otherFunction(){ ... }

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}
 });