cordova-plugin-wizviewmanager
Version:
This plugin allows managing multiple webviews in a single application.
471 lines (406 loc) • 14.7 kB
HTML
<html>
<!--
#
# Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file
# distributed with this work for additional information
# regarding copyright ownership. The ASF licenses this file
# to you under the Apache License, Version 2.0 (the
# "License"); you may not use this file except in compliance
# with the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing,
# software distributed under the License is distributed on an
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.
#
-->
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<style>
/*********************************************
* GLOBAL STYLES
*********************************************/
* { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: none; -webkit-user-drag: none; }
html, body {
margin: 0;
min-height: 100%;
}
body {
background: #393939;
color: #000;
font-family: Arial, sans-serif;
font-size: medium;
line-height: 22px;
}
.spacer {
margin-top: 20px;
}
.floatRight {
float: right;
}
#container {
width: 320px;
margin: 0 auto;
}
/*********************************************
* HEADERS
*********************************************/
h1 {
color: #42679C;
font-size: xx-large;
margin: 24px 0;
}
h2 {
color: #42679C;
font-size: x-large;
margin: 32px 0 18px;
}
h3 {
color: #42679C;
font-size: large;
margin: 30px 0 16px;
}
h4, h5, h6 {
color: #000;
font-size: 16px;
margin: 20px 0 14px;
}
/*********************************************
* LINKS
*********************************************/
a {
color: #42679C;
}
/*********************************************
* BUTTONS
*********************************************/
.controls {
display: block;
padding: 15px 0;
}
button {
border: 1px solid #cfcfcf;
background: #eee;
display: inline-block;
line-height: 22px;
padding: 5px 20px;
color: #333;
font-size: large;
}
button:disabled {
opacity: 0.5;
}
button:not(:disabled):hover {
background: #fff;
color: #ef4327;
}
button.small {
color: #43679B;
font-weight: bold;
background: none;
line-height: inherit;
padding: 2px 5px;
}
/*********************************************
* RADIO BUTTON, INPUT BOXES, CHECK BOXES
*********************************************/
input[type="checkbox"],
input[type="radio"] {
display: none;
}
label + br + input[type="text"] {
display: inline-block;
margin: 0 2px 2px 0;
padding: 2px 4px;
border: 1px solid #cfcfcf;
color: #000;
background: #eee;
font-size: larger;
border-radius: 0;
}
label + br + input[type="password"] {
display: inline-block;
margin: 0 2px 2px 0;
padding: 2px 4px;
border: 1px solid #cfcfcf;
color: #000;
background: #eee;
font-size: larger;
border-radius: 0;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
display: inline-block;
margin: 0 2px 2px 0;
padding: 2px 4px;
border: 1px solid #cfcfcf;
color: #000;
background: #eee;
font-size: larger;
}
input[type="checkbox"] + label:hover,
input[type="radio"] + label:hover,
input[type="text"] + label:hover {
background: #fff;
border-color: #ef4327;
color: #ef4327;
}
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label,
input[type="text"]:checked + label {
background: #ef4327;
color: #fff;
border-color: #ef4327;
}
input[type="radio"] + label:before {
content: '○';
font-size: 16px;
margin-right: 3px;
}
input[type="radio"]:checked + label:before {
content: '●';
}
input[type="checkbox"] + label:before {
content: '□';
font-size: 15px;
margin-right: 4px;
}
input[type="checkbox"]:checked + label:before {
content: '■';
}
/*********************************************
* CODE & SYNTAX
*********************************************/
code, samp {
display: block;
background: #393939;
color: #fff;
padding: 12px;
border: 1px solid #000;
font-family: 'Lucida Console', Monaco, monospace;
font-size: larger;
white-space: pre-wrap;
position: relative;
}
code:hover:before, samp:hover:before {
display: inline-block;
white-space: nowrap;
position: absolute;
top: -20px;
right: -10px;
background: #FFD;
color: #330;
content: 'Click to copy';
padding: 2px 4px;
font-family: sans-serif;
font-size: larger;
opacity: 0.9;
font-weight: bold;
}
/*********************************************
* SECTION DIVIDERS
*********************************************/
section {
margin-bottom: 20px;
}
/*********************************************
* DIALOGS
*********************************************/
section.dialog {
border: 1px solid #999;
background: #fff;
padding: 12px;
margin: 0;
position: relative;
}
section.dialog h1 {
display: block;
margin: -12px -12px 12px -12px;
padding: 10px 4px;
background: #eee;
text-align: center;
font-size: 13px;
font-weight: normal;
color: #000;
}
section.dialog section {
padding: 20px;
margin: 20px -12px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 10px solid #999;
border-right: 10px solid #999;
}
section.dialog section h1 {
text-align: center;
padding: 0;
background: none;
color: #42679C;
font-size: 13px;
margin: 0 0 10px 0;
}
</style>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
// If you want to prevent dragging, uncomment this section
/*
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
*/
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
/*
function handleOpenURL(url)
{
// TODO: do something with the url passed in.
}
*/
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady()
{
if (!window.wizViewManager) {
alert("Could not find wizViewManager");
}
if (!window.wizViewMessenger) {
alert("Could not find wizViewMessenger");
}
}
function createView() {
var source;
var isMobile = {
Android: function () {
return /Android/i.test(navigator.userAgent);
},
iOS: function () {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
};
if (isMobile.Android()) {
source = "file:///android_asset/www/customview.html";
} else if (isMobile.iOS()) {
// TODO: Change this path to match the location where the www/customview.html file lives.
// On the simulator this is a location on your machine.
// On the device, this is a location in your app bundle.
source = "customview.html";
} else {
source = "http://www.google.com";
}
wizViewManager.create("newView", { src: source, height: 300, top: 0 }, onSuccess, onFail);
}
function removeView() {
wizViewManager.remove("newView", onSuccess("removed view"), onFail);
}
function showView() {
var animation = {
type: "slideInFromLeft",
duration: 500
};
wizViewManager.show("newView", { animation: animation }, onSuccess, onFail);
}
function hideView() {
var animation = {
type: "fadeOut",
duration: 1000
};
wizViewManager.hide("newView", { animation: animation }, onSuccess, onFail);
}
var currentSource = 1;
function loadContent() {
var i = currentSource;
while (i == currentSource) {
i = Math.floor(Math.random()*4);
}
currentSource = i;
var urls = [
"http://wizcorp.jp",
"http://yahoo.jp",
"http://stripes.com/polopoly_fs/1.220161.1368046042!/image/image.JPG",
"http://devopsreactions.tumblr.com/post/62593484125/when-we-agree-to-drop-support-for-an-archaic-browser"
];
wizViewManager.load("newView", urls[i], onSuccess("Loaded."), onFail);
}
var currentLayout = 1;
function setLayout() {
var i = currentLayout;
while (i == currentLayout) {
i = Math.floor(Math.random()*3);
}
currentLayout = i;
var params = [
{ height: 450, top: 0 },
{ height: 150, bottom: 0 },
{ height: 150, top: 0 }
];
wizViewManager.setLayout("newView", params[i], null, onFail);
}
function messageView() {
var targetView = "newView";
var colors = ["blue", "orange", "green", "white"];
var i = Math.floor(Math.random()*3);
var params = { color: colors[i] };
wizViewMessenger.postMessage(params, targetView);
}
window.addEventListener('message', handleMessageFromNewView, false);
function handleMessageFromNewView(e) {
alert("Got message from: " + e.origin );
if (e.data.action === "hide") {
wizViewManager.hide("newView");
}
}
var onSuccess = function (data) {
setTimeout(function () {
alert("success " + data ? data : "");
}, 0);
}
var onFail = function (e) {
alert("error " + e ? e : "");
}
</script>
</head>
<body onload="onBodyLoad()">
<div id="container">
<h1>WizViewManager Plugin</h1>
<section class="dialog">
<p>Experiment by pressing the buttons to create/show/hide/remove a view, load content in the view, or layout the view.</p>
<p>Create a new view...</p>
<button onclick="createView();">Create View</button>
<p>Send a message to our new view from this webview...</p>
<button onclick="setLayout();">Set New Layout</button>
<p>Load new source into the view (can be clicked multiple times)</p>
<button onclick="loadContent();">Load into View</button>
<p>Hide the view from the user...</p>
<button onclick="hideView();">Hide View</button>
<p>Make the view visible to the user...</p>
<button onclick="showView();">Show View</button>
<p>Remove the view...</p>
<button onclick="removeView();">Remove View</button>
<p>Message the view...</p>
<button onclick="messageView();">Message View</button>
</section>
</div>
</body>
</html>