From 2b00becedbfffc1d53c56d0a8a0d3ae0b1722342 Mon Sep 17 00:00:00 2001 From: Nikolay Tsonev Date: Tue, 25 Apr 2017 14:19:36 +0300 Subject: [PATCH 1/6] add an example how to use webview with gestures for both iOS and Android --- tests/app/ui/web-view/web-view.md | 70 +++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/tests/app/ui/web-view/web-view.md b/tests/app/ui/web-view/web-view.md index f86c7bb6e..2b3583cf6 100644 --- a/tests/app/ui/web-view/web-view.md +++ b/tests/app/ui/web-view/web-view.md @@ -18,3 +18,73 @@ Using a WebView requires the web-view module. {%snippet webview-localfile%} ### Using WebView with raw HTML {%snippet webview-string%} +### Using WebView with gestures +```XML + + + + + + + + + + +``` + +```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" + + +export function navigatingTo(args: EventData) { + + let 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 = 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`. \ No newline at end of file From 81e22d3c73da4ac56a60bb9861e245659f18677c Mon Sep 17 00:00:00 2001 From: Nikolay Tsonev Date: Wed, 26 Apr 2017 14:00:29 +0300 Subject: [PATCH 2/6] move the typescript code snippet to external file --- .../app/ui/web-view/web-view-code-snippet.ts | 30 ++++++++++ tests/app/ui/web-view/web-view.md | 57 +------------------ 2 files changed, 32 insertions(+), 55 deletions(-) create mode 100644 tests/app/ui/web-view/web-view-code-snippet.ts diff --git a/tests/app/ui/web-view/web-view-code-snippet.ts b/tests/app/ui/web-view/web-view-code-snippet.ts new file mode 100644 index 000000000..b85f5cc63 --- /dev/null +++ b/tests/app/ui/web-view/web-view-code-snippet.ts @@ -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 = 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 = args.object; + if(isAndroid){ + webview.android.getSettings().setDisplayZoomControls(false); + } +} +// >> web-view-loaded \ No newline at end of file diff --git a/tests/app/ui/web-view/web-view.md b/tests/app/ui/web-view/web-view.md index 2b3583cf6..303f4708f 100644 --- a/tests/app/ui/web-view/web-view.md +++ b/tests/app/ui/web-view/web-view.md @@ -27,64 +27,11 @@ Using a WebView requires the web-view module. - + ``` -```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 = 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 = 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`. \ No newline at end of file From 6607c0f04f385e7c7e7863d331284081861df5e7 Mon Sep 17 00:00:00 2001 From: vakrilov Date: Fri, 28 Apr 2017 15:45:15 +0300 Subject: [PATCH 3/6] tslint fix --- tests/app/ui/web-view/web-view-code-snippet.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/app/ui/web-view/web-view-code-snippet.ts b/tests/app/ui/web-view/web-view-code-snippet.ts index b85f5cc63..79af6622d 100644 --- a/tests/app/ui/web-view/web-view-code-snippet.ts +++ b/tests/app/ui/web-view/web-view-code-snippet.ts @@ -5,7 +5,6 @@ import { HelloWorldModel } from './main-view-model'; import { WebView } from "ui/web-view"; import { isAndroid } from "platform" - export function navigatingTo(args: EventData) { let page = args.object; From 5ae6fc5a4289f657e8f84d9ac2c4cca05ca05389 Mon Sep 17 00:00:00 2001 From: Nikolay Tsonev Date: Wed, 3 May 2017 09:55:58 +0300 Subject: [PATCH 4/6] fix tslint errors --- tests/app/ui/web-view/web-view-code-snippet.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/app/ui/web-view/web-view-code-snippet.ts b/tests/app/ui/web-view/web-view-code-snippet.ts index 79af6622d..34194106a 100644 --- a/tests/app/ui/web-view/web-view-code-snippet.ts +++ b/tests/app/ui/web-view/web-view-code-snippet.ts @@ -6,9 +6,7 @@ import { WebView } from "ui/web-view"; import { isAndroid } from "platform" export function navigatingTo(args: EventData) { - let page = args.object; - page.bindingContext = new HelloWorldModel(); } From a44c9b7928cb1015ed962362a779f7d109d78310 Mon Sep 17 00:00:00 2001 From: Nikolay Tsonev Date: Mon, 15 May 2017 11:44:21 +0300 Subject: [PATCH 5/6] edit typescript errors --- tests/app/ui/web-view/web-view-code-snippet.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/tests/app/ui/web-view/web-view-code-snippet.ts b/tests/app/ui/web-view/web-view-code-snippet.ts index 34194106a..5de917c82 100644 --- a/tests/app/ui/web-view/web-view-code-snippet.ts +++ b/tests/app/ui/web-view/web-view-code-snippet.ts @@ -1,13 +1,11 @@ // >> 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" +import { EventData } from 'tns-core-modules/data/observable'; +import { Page } from 'tns-core-modules/ui/page'; +import { WebView } from "tns-core-modules/ui/web-view"; +import { isAndroid } from "tns-core-modules/platform" export function navigatingTo(args: EventData) { let page = args.object; - page.bindingContext = new HelloWorldModel(); } export function webViewTouch(args){ From 10bcf9f8e9df40df5f9976fac4e8108d20878e17 Mon Sep 17 00:00:00 2001 From: Nikolay Tsonev Date: Mon, 15 May 2017 16:41:14 +0300 Subject: [PATCH 6/6] remove page import from the snippet --- tests/app/ui/web-view/web-view-code-snippet.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tests/app/ui/web-view/web-view-code-snippet.ts b/tests/app/ui/web-view/web-view-code-snippet.ts index 5de917c82..fbf8f67fe 100644 --- a/tests/app/ui/web-view/web-view-code-snippet.ts +++ b/tests/app/ui/web-view/web-view-code-snippet.ts @@ -1,11 +1,10 @@ // >> web-view-loaded import { EventData } from 'tns-core-modules/data/observable'; -import { Page } from 'tns-core-modules/ui/page'; import { WebView } from "tns-core-modules/ui/web-view"; import { isAndroid } from "tns-core-modules/platform" export function navigatingTo(args: EventData) { - let page = args.object; + console.log("page navigating to"); } export function webViewTouch(args){