7.md 6.4 KB
["FloatWindow Control API"]
Float Window Control API
Float Window is a kind of iframe control interface and classes that allow iframes to be able to drag around the screen with controls over minimize, maximize, resize and close. It is the barebone of Function Bar Mode which provide floating Windows to users on Web Interface. Hence its name "Float Window API".
The Float Window is a subsystem of the Function Bar system and it can be access via ao_module API. Here are the basic functions and some example of the functions for creating and using the Float Window System.
Float Window Mechanism
FloatWindows are actually iframes embedded in a div which wrap it to provide css and interactive functions. Here are some important notes about their implementation.
- FloatWindow launches using unique UID. If you are launching a float window with UID that has already been existing on the current screen, your old floatWindow object will be automatically replaced with the new properties. (including src and css properties)
- FloatWindows can be docked to the left or right side of the screen. However, if your float window is launched with "fixed size mode", the window will reject the docking action.
- Double click the floatWindow control panel will maximize the float window size to fit the current screen.
Including the ao_module wrapper
To include the ao_module wrapper, simply include this line in your module's page <head> section. As jquery is also required by the ao_module, it is necessary to include the jquery before the ao_module wrapper.
<script src="../script/jquery.min.js"></script>
<script src="../script/ao_module.js"></script>
Float Window Creation
To create a float window, you can use the following command from the ao_module wrapper to initiate the float window in two methods.
Method 1: Create float window using FloatWindow.php
Some modules define their own method to start the module in Float Window Mode. To initiate a module in Float Window Mode, you can call the following function after including the wrapper.
ao_module_launchModule(module_name);
//Example
ao_module_launchModule("Audio");
Method 2: Create float window using newfw function call
You can also create a float window from newfw function call. This can be applied to any page including html, php within or outside of a module or even other objects that is supported by the browser. In simple words, it create a float window wrapped iframe and provide access to floating window for any network resource. Here are some examples for using the newfw function.
ao_module_newfw(src,windowname,icon,uid,sizex = undefined,sizey = undefined,posx = undefined,posy = undefined,fixsize = undefined,glassEffect = undefined,parentUID=null, callbackFunct=null)
Example 1: opening the Memo index with the following code:
ao_module_newfw('Memo/index.php','Memo','sticky note outline','memoEmbedded',475,700);
Example 2: opening the Memo index with minimal parameter:
ao_module_newfw('Memo/index.php','Memo','sticky note outline','memoEmbedded');
Example 3: opening a sub-module and tell the sub-module the parent's window id that is not yourself:
ao_module_newfw('Memo/index.php','Memo','sticky note outline','memoEmbedded',undefined,undefined,undefined,undefined,undefined,undefined,"someoneElseUID");
Example 4: opening a sub-module and ask for a callback: (Default parentUID is set to this module's WindowID and hence, the call back will be called to this content window)
ao_module_newfw('Memo/index.php','Memo','sticky note outline','memoEmbedded',undefined,undefined,undefined,undefined,undefined,undefined,undefined,"callBackFunctionName");
Float Window Properties
Check if Float Window Enabled
To check if float window is enabled, you can check the ao_module_virtualDesktop paramter from the global domain. Here is an example for the check.
if (ao_module_virtualDesktop){
//Running in float window mode
}else{
//Running in default mode, might be pwa or just launched as a normal webapp
}
Float Window ID, Parent and Child
Each float window should have an unique ID. In most case, this can be generated via the ao_module_utils.getRandomUID(); function. Each float window might have parent and child depending on which module launched the float window with newfw() function call. To access these paramters, your script can access these variables in the your page's global variable field.
//Get the float window ID
ao_module_windowID
//Get the caller ID or parent ID
ao_module_parentID
//Get the callback function name from the parent iframe (String, require eval)
ao_module_callback
In the case when the module is launched under default mode which has no float window support, all the varable above will be set to false.
Float Window CSS Properties
You can also access the float window properties with the following wrapper functions.
//Get the float window width
ao_module_getWidth();
//Get the float window height
ao_module_getHeight();
//Get the float window on screen left position
ao_module_getLeft();
//Get the float window on screen top position
ao_module_getTop();
Float Window Customization
Float Window API provide functions to allow adjustment on the float window function and interface. For example, developer can initiate their WebApp with float window mode and adjust the float window properties after the page load. Hence, developer can adjust the floatWindow iframe properties inside the iframe itself using the wrapper provided functions.
Here are some commonly used float window adjustment functions.
//Set the icon to the given icon class (without "icon"), see Tocas UI > icon for more information.
ao_module_setWindowIcon(icon);
//Change the float window title
ao_module_setWindowTitle(title);
//Enable glassEffect mode on this float window
ao_module_setGlassEffectMode();
//Force float window to be non-resizable
ao_module_setFixedWindowSize();
//Set float window size with the given width and height
//cache: Remember the window size from last launch. Set this to true to allow browser to restore the same window size on launch.
//exact: Require exact URL. Set this to true if you want index.php?var1 and index.php?var2 to have different window size to be remembered by the browser.
ao_module_setWindowSize(width,height,cache,exact);
//Close the current float window
ao_module_close();