cordova-plugin-wizviewmanager/README.md

This plugin allows managing multiple webviews in a single application.

# cordova-plugin-wizviewmanager

- Cordova version : 2.6 and above

# Description

Cordova plugin for

- creating
- removing
- showing
- hiding
- messaging (cross communication of strings to each and every view)
- animating
- resizing
- loading source into views.

## Install (with Plugman - example iOS)

	cordova plugin add https://github.com/Wizcorp/cordova-plugin-wizviewmanager
	cordova build ios

	< or >

	phonegap local plugin add https://github.com/Wizcorp/cordova-plugin-wizviewmanager
	phonegap build ios

## APIs

### Create

There is no limit to the amount of views you can create, but you cannot re-use the same name.

	wizViewManager.create(String viewName, JSONObject options, Function success, Function fail);

Options list;

	{
	    src: "http://google.com", [local or remote http, for valid URI paths see Load API]
	    height: 300, [accepts "300px", "30%" - default : fills height]
	    width: 300, [accepts "300px", "30%" - default : fills width]
	    x: 0,
	    y: 0,
	    top: 0, [string, pixels or percent - default : 0]
	    bottom: 0, [string, pixels or percent - default : 0]
	    left: 0, [pixels or percent - default : 0]
	    right: 0, [string, pixels or percent - default : 0]
	    scalesPageToFit: true [Boolean (iOS only) - default: false]
	    bounces: true [Boolean (iOS only) - default: false]
	};

**NOTE:- Android only accepts ints**

### Load

	wizViewManager.load(String viewName, String URI or URL, Function success, Function fail);

**Valid URI and URLs** : URIs are first resolved to cache, secondly bundle, then loaded exactly as passed.

**URIs**

- Relative to ```/www``` eg. A file at ```<my app assets>/www/image/file.png``` should be loaded as ```src: "image/file.png"```

- Relative to root of cache folder eg. A cached file at (Android example) ```data/data/<my app package>/cache/image/file.png``` (iOS example) ```/user/var/..long path../293303D0-2009-4451-A4F8-1FADAEE67250/Library/Caches/<bundle id>/image/file.png``` should be loaded as ```src: "image/file.png"```

- Full path to file. Alternatively any other full system file path can be loaded eg. A file in the cache or other folder could be loaded as (Android example) ```src: "data/data/<my app package>/cache/image/file.png"```

**URIs**

- Loading files other than; ```.html .htm``` is subject to a file whitelist per platform to ensure the browser can load the file. If the file cannot be loaded, the error callback is invoked.



### Set Layout

	wizViewManager.setLayout(String viewName, JSONObject options, Function success, Function fail);

See `Create` API for a list of options.

### Show

	wizViewManager.show(String viewName, JSONObject options, Function success, Function fail);

**NOTE:- Animations not currently supported on Android, they are ignored**

A list of animations;

- slideInFromLeft
- slideInFromRight
- slideInFromTop
- slideInFromBottom
- fadeIn

Example options Object;

	options : {
		animation: {
		   	type: "fadeIn",
	    	duration: "300"
	    }
	};

### Hide

	wizViewManager.hide(String viewName, JSONObject options, Function success, Function fail);

**NOTE:- Animations not currently supported on Android, they are ignored**

A list of animations;

- slideOutToLeft
- slideOutToRight
- slideOutToTop
- slideOutToBottom
- fadeOut

Example options Object;

	options : {
		animation : {
    		type: "fadeOut",
    		duration: "300"
    	}
	};

### Messaging

To send a messsage to a view based on W3C post message API... for more information on the MessageEvent API, see: [http://www.w3.org/TR/2008/WD-html5-20080610/comms.HTMLElement](http://www.w3.org/TR/2008/WD-html5-20080610/comms.HTMLElement)

	wizViewMessenger.postMessage(Data message, String targetView);

- `message` is Data as Array, String, Number, Object
- `targetView` is the string name of the target view.
- to reach Cordova window, `targetView` = `"mainView"`

Add an event listener in the html that wishes to receive the message...

	window.addEventListener('message', wizMessageReceiver);

Example receiver;

	function wizMessageReceiver (event) {
	    // Event data object comes in here
	}