Android Chrome and WebView with QuillJS, native context menu blocks the toolbar? - android

I am working with the QuillJS editor (awesome!) for a multi-platform forum web app and I'm trying to solve a problem with Android's webview (same thing happens in the Chrome app). Basically when I long-press to select some text on the top lines of the post the native context menu covers the Quill toolbar.
I've added css padding-top to the editor element to get the result in the next screen shot, but it looks weird to have the empty space at the top of the edit area when there's no context menu.
Other things I've discovered: you can't drag the context menu down, and tapping outside it or pressing the back button deselect the text. You can keep the context menu from showing by handling the oncontextmenu event, but then there's no way to cut/copy/paste.
Are there any alternatives? It would be cool if there were cut/copy/paste options for the Quill toolbar, which would allow me to just inhibit the context menu for the editor div, but I couldn't find such options.

EDIT: To clarify, I didn't actually change the orientation of the popup, but by switching to the "Bubble" theme the toolbar becomes a popup that appears under the selected text by default.
Answering my own question.
I changed the orientation of the pop-up so that it is below the selected text. Here's the initialization script:
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
['bold'],
['italic'],
[{ 'color': [] }],
[{ size: ['small', false, 'large', 'huge'] }],
['image'],
['link']
]
},
placeholder: '(type your message here)',
theme: 'bubble' // 'snow' or 'bubble'
});
quill.on('text-change', function (delta, oldDelta, source) {
if (source === 'api') {
console.log("An API call triggered this change.");
} else if (source === 'user') {
console.log("A user action triggered this change.");
}
var htmlContent = quill.root.innerHTML;
$('#body').val(htmlContent);
});
window.onload = function () {
quill.focus();
};
</script>

Related

Xamarin Forms Android - keyboard input going to page behind

I've got a strange issue where when I'm on a page (Page 1) that has an Entry, I tap the Entry to give it focus, then I tap a button that calls Navigation.PushModalAsync to bring up another page (Page 2) which only has a Label on it, I type on the physical keyboard, then hit back to go back to Page 1, I magically find the text I'd typed when on Page 2 is in the Entry on Page 1!
That feels like a bug to me? How can I stop keyboard entry going to Page 1 when Page 2 is displayed?
I'm using VS2022, Xamarin Forms 5.0.0.2196, and an Android Emulator using Android 9 / API 29.
public class Page1 : ContentPage
{
public Page1()
{
StackLayout stackLayout = new StackLayout();
stackLayout.Children.Add(new Label() { Text = "Page 1. Tap in Entry A, and then tap the Click Me button." });
stackLayout.Children.Add(new Entry() { Placeholder = "Entry A" });
Button button = new Button() { Text = "Click Me" };
stackLayout.Children.Add(button);
Content = stackLayout;
button.Clicked += Button_Clicked;
}
private async void Button_Clicked(object sender, EventArgs e)
{
ContentPage page2 = new ContentPage();
page2.Content = new Label() { Text = "Page 2. Type some letters on the physical keyboard, and then hit the Back button to get back to Page 1." };
await Navigation.PushModalAsync(new NavigationPage(page2));
}
}
I had test your code on different versions of Android. And at first, when you tap the button, the Entry should be unfocused. Because if I tapped the Entry and then tapped the other field, the cursor will disappear from the Entry. But when I typed on the physical keyboard, the soft keyboard will appear and the text I'd typed will show on the Entry on the Android 9.0.
On the Android 10.0, the soft keyboard will appear but the text will not show on the Entry.
On the Android 11.0, both the keyboard and the text don't show.
In addition, on the Android 9.0, if you don't have tapped the Entry at first, the soft keyboard and the text will not show when you typed on the physical keyboard.
So, this should be the different handling of physical input events in Xamarin.Forms in different Android version. You can also post the issue to the Xamarin.Forms to get the answer.

Ionic 3 keyboard hides input field when in landscape mode

I have an Ionic app that must be in landscape mode. When a user tap on an input field to type, the keyboard comes up, so the user can only see the header, footer and the keyboard, thus the user can't see what he is typing. I saw on native apps when I do the same thing, the keyboard comes up with a separate textbox, which will be perfect for my Ionic app. How can I do it in Ionic? Here are some screenshots:
The screen in landscape mode before typing
The screen when typing starts
The screen on native apps when typing
Try to use scrollAssist: true for IonicModule.
IonicModule.forRoot(MyApp, {
scrollAssist: true
}),
I got it to work. Looks like the only way to fix this is to hide the header and footer when keyboard is showing and show header and footer when keyboard is hiding. I also had to remove some margins so that the focused input is at the top. Here's my code I added in the app.component.ts:
keyboard.onKeyboardShow().subscribe(() => {
let headers = document.querySelectorAll("ion-header"); //Get all headers
headers[headers.length - 1].setAttribute("style", "display: none"); //Hide ACTIVE header
let footers = document.querySelectorAll("ion-footer"); //Get all footers
footers[footers.length - 1].setAttribute("style", "display: none"); //Hide ACTIVE footer
let contents = document.querySelectorAll("ion-content"); //Get all content
contents[contents.length - 1].querySelector("div.scroll-content").removeAttribute("style"); // Remove styling from content (margins)
});
keyboard.onKeyboardHide().subscribe(() => {
let headers = document.querySelectorAll("ion-header"); //Get all headers
headers[headers.length - 1].removeAttribute("style"); //Show ACTIVE header again
let footers = document.querySelectorAll("ion-footer"); //Get all footers
footers[footers.length - 1].removeAttribute("style"); //Show ACTIVE footer
let contents = document.querySelectorAll("ion-content"); //Get all content
contents[contents.length - 1].querySelector("div.scroll-content").setAttribute("style", "margin-top: 56px; margin-bottom: 56px;"); //Set styling again (margins)
});

Popup menu scroll with the page in jquerymobile

I have create an popup menu in my app the problem with it is when i open the popup menu and then scroll the page the popup menu also scrolls up with the page even i tried using data-dismissible="false" but nothing happen still the problem remains same.
Thanks in advance.
There's an easy fix for this problem. Just prevent page scrolling when popup is active.
Working jsFiddle example: http://jsfiddle.net/Gajotres/aJChc/
For this to work popup needs to have an attribute: data-dismissible="false" it will prevent popup closure when clicked outside of it. Another attribute can be used: data-overlay-theme="a" it will color popup overlay div. That is a DIV that covers screen when popup is opened and prevents popup closure.
And this javascript will work on every possible popup:
$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','auto');
});
For me this method didn't work, it works on browser but not in Phone Gap application.
So I resolve it in this way:
$('#Popup-id').on({
popupbeforeposition: function(){
$('body').on('touchmove', false);
},
popupafterclose: function(){
$('body').off('touchmove');
}
});
Hope it helps!
if body scrolling is not prevented, try below. in my case i was using boilerplate.css so the preventing the body scrolling not worked.
popupafteropen: function (e) {
$('html').css('overflow', 'hidden');
},
popupafterclose: function (e) {
$('html').css('overflow', 'auto');
}

Disable touch events in phonegap (xcode iOS)

I am having the most annoying situation. Ok, here goes. I am using a javascript based sliding menu for a mobile app. The "slider" works just like Facebook mobile, where you can click the button to show the menu on the left and click it again to close the menu. As an alternative, if you touch the still visible part of the page when the menu is showing it will also close. And that's it.
Problem: Note that I'm using Phonegap for this app. When I run the iOS simulator in Xcode all works fine EXCEPT if you swipeleft, for example, the page will move. I want to disable the swipe event all together. I have tried preventDefault, return false etc. Nothing seems to work. Again, my only goal is to disable touch events because for this app, I simply don't need them. Please see the javascript code for the menu show/hide below.
Thanks is advance. All is appreciated.
$(function(){
var menuStatus;
// Show menu
$("a.showMenu").click(function(){
$('#menu').show();
if(menuStatus != true){
$(".ui-page-active").animate({
marginLeft: "170px",
}, 300, function(){menuStatus = true});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
// Menu behaviour
$("#menu li a").click(function(){
var p = $(this).parent();
if($(p).hasClass('active')){
$("#menu li").removeClass('active');
} else {
$("#menu li").removeClass('active');
$(p).addClass('active');
}
});
});
You could over-ride the $.event.special.swipe.horizontalDistanceThreshold to a larger value and prevent swipes on your page from triggering the swipe event.
Refer to Touch Events -> Swipe

How Removing window from a tab in titanium?

I am using titanium appecelerator to build an app in both ios and android.
I use the following code to create a tab group and add a tab to it.
var localTabGroup = Ti.UI.createTabGroup();
var planTab = Ti.UI.createTab({
title : NYC.Common.StringConstant.TAB_TITLE_PLAN,
icon : NYC.Common.ResourcePathConstant.IMG_TAB_PLAN,
window : planTabWin
});
localTabGroup.open();
And call the following function to create a window and add it to the tab
addWindowToTabGroup : function(window) {
tabGroup.activeTab.open(window, {
animated : true
});
},
Now, I often have to remove window from the stack of the tab ( eg: on android back button or ios navigation bar back)
Till now, I use window.close() to remove the window from the stack . But, it always shows warnings like.
[ERROR][TiBaseActivity( 378)] (main) [3320,4640528] Layout cleanup.
[WARN][InputManagerService( 62)] Window already focused, ignoring focus gain of: com.android.internal.view.IInputMethodClient$Stub$Proxy#406e4258
I was just wondering if I am following the correct approach? Or is there a better way to remove a window from the tab?
Thanks.
Tabs behave a lot differently on iOS and Android, On Android, the tab does not maintain a stack of windows. Calling open opens a new, heavyweight window, which by default covers the tab group entirely.This is very different from iOS, but it is for Android applications. Users always use the Back button to close the window and return to the tab group.
This may be happening because you are trying to remove the window even though natively Android already removes it. Check out the Android Implementation Notes of the docs here
To completely eliminate this problem, I would just open up a modal window without using the TabGroup, this would be more cross platform:
addWindowToTabGroup : function(window) {
window.open({
modal : true,
animated : true
});
}
This will open a modal window which behaves the same on both platforms, and can be handled easily by the native back button functionality.

Categories

Resources