|
|
@@ -0,0 +1,138 @@
|
|
|
+["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.
|
|
|
+
|
|
|
+1. 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)**
|
|
|
+2. 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.
|
|
|
+3. 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();
|
|
|
+
|
|
|
+```
|
|
|
+
|
|
|
+## Focus Float Window
|
|
|
+
|
|
|
+## Float Window Closing Override
|
|
|
+
|
|
|
+## Float Window Parent and Child Callback
|
|
|
+
|
|
|
+## System Setting Navigation Environment
|
|
|
+
|
|
|
+
|
|
|
+
|
tobychui