fixed webview scroll issue

milansar · Jan 7, 2020 · 5d98269 · 5d98269
1 parent 93e170f
commit 5d98269
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
     "nativescript-imagecropper": "2.0.0",
     "nativescript-imagepicker": "^6.2.0",
     "nativescript-iqkeyboardmanager": "^1.5.1",
+    "nativescript-nested-scrollview": "^1.1.0",
     "nativescript-plugin-firebase": "^10.0.0",
     "nativescript-screenshot": "0.0.2",
     "nativescript-social-share": "^1.5.1",

diff --git a/projects/trivia-editor/src/app/editor/editor.component.html b/projects/trivia-editor/src/app/editor/editor.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="show">
-    <ng-quill-tex (editorLoadFinished)="editorLoadFinished($event)" [styles]="{height: '50px'}"  [modules]="quillConfig" (textChanged)="onTextChanged($event)" 
+    <ng-quill-tex (editorLoadFinished)="editorLoadFinished($event)" [styles]="{height: '140px'}"  [modules]="quillConfig" (textChanged)="onTextChanged($event)" 
     (fileUploaded)="fileUploaded($event)" [class.bottomToolbar]="applicationSettings?.quill_options?.custom_toolbar_position === 'bottom'" [customToolbarPosition]="applicationSettings?.quill_options?.custom_toolbar_position"  [imageUrl]="quillImageUrl" [content]="editorContent" [isMobile]="true">
         <span *ngIf="applicationSettings?.quill_options?.custom_toolbar_position === 'bottom'" class="ql-formats">
             <div #bottomToolBar [innerHtml]='bottomBarOptions | safeHtml'></div>

diff --git a/projects/trivia/src/app/app.module.tns.ts b/projects/trivia/src/app/app.module.tns.ts
@@ -28,6 +28,7 @@ registerElement('PreviousNextView', () => require('nativescript-iqkeyboardmanage
 // registerElement('CardView', () => CardView);
 registerElement('CardView', () => require('nativescript-cardview').CardView);
 registerElement('Fab', () => require('nativescript-floatingactionbutton').Fab);
+registerElement("NestedScrollView", () => require("nativescript-nested-scrollview").NestedScrollView);
 
 @NgModule({
   declarations: [

diff --git a/...trivia/src/app/user/components/question-add-update/question-add-update.component.tns.html b/...trivia/src/app/user/components/question-add-update/question-add-update.component.tns.html
@@ -10,7 +10,7 @@
         <GridLayout [class.dialogOpen]="isShowPreview" [isUserInteractionEnabled]="isWebViewLoaded" rows="*" columns="*"
             *ngIf="!loaderBusy">
             <StackLayout>
-                <ScrollView>
+                <NestedScrollView orientation="vertical">
                     <PreviousNextView row="0" col="0">
                         <GridLayout rows="*,auto,auto,auto,auto,auto" columns="*" (tap)="hideKeyboard()"
                             [formGroup]="questionForm" class="submit-question">
@@ -73,15 +73,15 @@
                                 <Label *ngIf="!answers.valid && !answers.pristine" class="error-lbl error"
                                     textWrap="true" text="All answers required !"></Label>
                             </StackLayout>
-                            <StackLayout row="2" class="max-time-input" iosOverflowSafeArea="false">
+                             <StackLayout row="2" class="max-time-input" iosOverflowSafeArea="false">
                                 <GridLayout rows="*" columns="*">
                                     <DropDown #timeDropdown itemsTextAlignment="center" row="0" [items]="playMaxTime"
                                         selectedIndex="{{selectedMaxTimeIndex}}"
                                         (selectedIndexChanged)="onchange($event)"></DropDown>
                                     <Image (tap)="openTimeDropdown()" row="0" src="~/assets/images/dropdown_char.png"
                                         class="tick-icon"></Image>
                                 </GridLayout>
-                            </StackLayout>
+                            </StackLayout> 
                             <StackLayout row="3" class="category-input" iosOverflowSafeArea="false">
                                 <GridLayout rows="*,*" columns="*">
                                     <GridLayout row="0" rows="*" columns="*">
@@ -152,7 +152,8 @@
                             </GridLayout>
                         </GridLayout>
                     </PreviousNextView>
-                </ScrollView>
+                </NestedScrollView>
+
             </StackLayout>
             <StackLayout *ngIf="!isWebViewLoaded">
                 <AbsoluteLayout (tap)="preventEventPropogation()" row="0" col="0">
@@ -164,9 +165,13 @@
                 </AbsoluteLayout>
             </StackLayout>
             <StackLayout height="0" #webViewParentStack>
-                <WebView height="140" width="100%" #webView id="questionWebView" (loaded)="webViewLoaded($event)">
-                </WebView>
+                    <!-- <NestedScrollView height="0" #webViewParentStack> -->
+                            <WebView height="215" width="100%" #webView id="questionWebView" (loaded)="webViewLoaded($event)" (touch)="onTouch($event)">   </WebView>
+                    <!-- </NestedScrollView> -->
+
+
             </StackLayout>
+
             <StackLayout height="100%" class="dialog__wrapper">
                 <app-preview-question-dialog [question]="previewQuestion" [categoryDictionary]="categories">
                 </app-preview-question-dialog>

diff --git a/...s/trivia/src/app/user/components/question-add-update/question-add-update.component.tns.ts b/...s/trivia/src/app/user/components/question-add-update/question-add-update.component.tns.ts
@@ -56,6 +56,7 @@ import { CONFIG } from "shared-library/environments/environment";
 import * as Platform from "tns-core-modules/platform";
 
 declare var IQKeyboardManager;
+declare var android:any;
 
 @Component({
   selector: "app-question-add-update",
@@ -302,6 +303,7 @@ export class QuestionAddUpdateComponent extends QuestionAddUpdate
     }
   }
   showEditor(type: string, id = -1) {
+
     this.moveWebView(type, id);
     if (type === "question") {
       this.questionForm.patchValue({ isRichEditor: true });
@@ -328,11 +330,32 @@ export class QuestionAddUpdateComponent extends QuestionAddUpdate
         : this.answerStack.filter((element, index) => index === id)[0]
             .nativeElement;
     this.currentWebViewParentId = id;
+
     if (isAndroid) {
+
       // for android this works as this method does not destroy the webview. do not change.
       prevWebViewParent._removeViewFromNativeVisualTree(
         this.webView.nativeElement
       );
+    if(isAndroid){
+        this.webView.nativeElement.android.getSettings().setBuiltInZoomControls(false);
+        this.webView.nativeElement.android.setOnTouchListener(
+          new android.view.View.OnTouchListener({
+            onTouch: (view, motionEvent) => {
+              var action = motionEvent.getAction();
+                if (action === android.view.MotionEvent.ACTION_DOWN) {
+                  view.getParent().requestDisallowInterceptTouchEvent(true);
+                }
+                if (action === android.view.MotionEvent.ACTION_UP) {
+                  view.getParent().requestDisallowInterceptTouchEvent(false);
+                }
+              view.onTouchEvent(motionEvent);
+              return true;
+            }
+          })
+        );
+      }
+      this.webView.nativeElement.android.getSettings().setBuiltInZoomControls(false);
       nextWebViewParent._addViewToNativeVisualTree(this.webView.nativeElement);
       // need to wait for the load to be finished before emit the value.
       setTimeout(() => {
@@ -349,6 +372,7 @@ export class QuestionAddUpdateComponent extends QuestionAddUpdate
     }
   }
 
+
   public onchange(args: SelectedIndexChangedEventData) {
     this.selectedMaxTimeIndex = args.newIndex;
     this.questionForm.patchValue({
@@ -553,6 +577,7 @@ export class QuestionAddUpdateComponent extends QuestionAddUpdate
         this.oWebViewInterface = this.setWebInterface(event.object);
         //  new webViewInterfaceModule.WebViewInterface(event.object, CONFIG.editorUrl);
       }
+
       if (this.oWebViewInterface && isIOS) {
         event.object.initNativeView();
         // need to wait for the load to be finished before emit the value.

diff --git a/references.d.ts b/references.d.ts
@@ -1,5 +1,4 @@
-/// <reference path="./node_modules/tns-core-modules/tns-core-modules.d.ts" /> something
-
 /// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
 /// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
-/// <reference path="./node_modules/nativescript-iqkeyboardmanager/index.d.ts" />
+/// <reference path="./node_modules/nativescript-iqkeyboardmanager/index.d.ts" />
+/// <reference path="./node_modules/tns-core-modules/tns-core-modules.d.ts" />