Since the feature set is growing rather rapidly I will probably be rethinking a lot of the code structure, naming, and syntax. Please keep this in mind if you are trying to upgrade from a previous release of Mocha UI.
I would like to develop a core that is modular, light, robust, and easy to modify and extend. At these early stages I encourage early adopters to voice their thoughts on code structure, naming and syntax. What functionality would you like to see in it's own class or implemented as a plugin or module? Do you see something in the code that can be optimized? Do you have ideas on implementing plugins or modules? Let me know.
As the code and feature set becomes more crystallized the documentation will be further developed.
newWindow() - Create a new window
newWindowsFromJSON() - Create one or more new windows from Json data. Uses newWindow()
focusWindow() - Focus a window
maximizeWindow() - Maximize a window
minimizeWindow() - Minimize a window
restoreMinimized() - Restore a minimized window
closeWindow() - Close a window
closeAll() - Close all the windows
Syntax:
document.mochaUI.newWindow();
Arguments: Options
Options:
Events:
For content to load via xhr all the files must be online and in the same domain. If you need to load content from another domain or wish to have it work offline, load the content in a iframe instead of using the xhr option.
There are at least three ways you can put Iframes in your windows. You can place an iframe in one of your mocha divs in the original index.html. You can use the iframe contentType option, which will place your content in an iframe for you though this gives you the least amount of control over the iframe's properties. You can load a page with an iframe in it into a window using xhr. The later option gives you the most control.
If you use the iframe contentType your iframe will automatically be resized when the window it is in is resized. If you want this same functionality when using one of the other load options simply add class="mochaIframe" to those iframes and they will be resized for you as well.
<a id="docsLink" href="pages/docs.html">Documentation</a>Example Javascript:
if ($('docsLink')){
$('docsLink').addEvent('click', function(e){
new Event(e).stop();
document.mochaUI.newWindow({
id: 'docs',
title: 'Documentation',
loadMethod: 'xhr',
contentURL: 'pages/docs.html',
width: 320,
height: 320,
x: 20,
y: 60
});
});
}
Notes:
If you wish to add links in windows that open other windows remember to add events to those links when the windows are created.
Updating the content of a window requires that you know the ID property of the window. Setting the ID is an option when creating a window.
You can change the content of a window by referring to:
this.getSubElement($('windowID'), 'content');
If you used the iframe load method, you can change the src of that window's iframe as follows:
this.getSubElement($('windowID'), 'iframe').src = 'http://www.mydomain.com/';
Closing a window requires that you know the ID property of the window. Setting the ID is an option when creating a window.
Example Javascript:
document.mochaUI.closeWindow($('windowID'));
I am using Swiff to load the example YouTube Flash now since Swiff is built into Mootools, but it has some performance issues when resizing, maximizing, and minimizing windows with Flash in them in Opera that SWFobject did not.
If you have a solution for any of these please let me know.
Opera 9
Mac Firefox 2 - Not fully supported
Though I haven't tried it yet, it is probably a good idea to compress mocha.js once you are ready to go live. You might try the YUI Compressor
Help support the continued development of Mocha UI.