move the typescript code snippet to external file

This commit is contained in:
Nikolay Tsonev
2017-04-26 14:00:29 +03:00
parent 2b00becedb
commit 81e22d3c73
2 changed files with 32 additions and 55 deletions

View File

@ -0,0 +1,30 @@
// >> web-view-loaded
import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import { WebView } from "ui/web-view";
import { isAndroid } from "platform"
export function navigatingTo(args: EventData) {
let page = <Page>args.object;
page.bindingContext = new HelloWorldModel();
}
export function webViewTouch(args){
console.log("touch event");
}
export function webViewPan(args){
console.log("pan gesture");
}
export function webViewLoaded(args){
var webview:WebView = <WebView>args.object;
if(isAndroid){
webview.android.getSettings().setDisplayZoomControls(false);
}
}
// >> web-view-loaded

View File

@ -27,64 +27,11 @@ Using a WebView requires the web-view module.
</Page.actionBar>
<GridLayout>
<WebView loaded="webviewloaded" touch="webviewtouch" pan="webviewpan" src="<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>" />
<WebView loaded="webViewLoaded" touch="webViewTouch" pan="webViewPan" src="<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>" />
</GridLayout>
</Page>
```
```TypeScript
import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import { WebView } from "ui/web-view";
import { isAndroid } from "platform"
{%snippet web-view-loaded%}
export function navigatingTo(args: EventData) {
let page = <Page>args.object;
page.bindingContext = new HelloWorldModel();
}
export function webviewtouch(args){
console.log("touch event");
}
export function webviewpan(args){
console.log("pan gesture");
}
export function webviewloaded(args){
var webview:WebView = <WebView>args.object;
if(isAndroid){
webview.android.getSettings().setDisplayZoomControls(false);
}
}
```
```JavaScript
var main_view_model_1 = require("./main-view-model");
var platform_1 = require("platform");
function navigatingTo(args) {
var page = args.object;
page.bindingContext = new main_view_model_1.HelloWorldModel();
}
exports.navigatingTo = navigatingTo;
function webviewtouch(args) {
console.log("touch event");
}
exports.webviewtouch = webviewtouch;
function webviewpan(args) {
console.log("pan gesture");
}
exports.webviewpan = webviewpan;
function webviewloaded(args) {
var webview = args.object;
if (platform_1.isAndroid) {
webview.android.getSettings().setDisplayZoomControls(false);
}
}
exports.webviewloaded = webviewloaded;
```
>Note: to be able to use gestures in `WebView` component on Android, we should first disabled the zoom control. To do that we could access the `android` property and with the help of `setDisplayZoomControls` to set this controll to `false`.