We Keep Coding

How to make the bottom bar disappear using injected code?

I am a newbie regarding Javascript or injecting code on iOS WKWebView.
Visit this page with user agent equal to safari 13 iOS and scroll down.
At one point, this bar appears at the bottom.
bottom bar
at this moment, if you scroll up the bar disappears.
I am a newbie in Javascript. I found this page that shows a similar effect.
Looking at the source I guess the id of that div is agentFavBar but inspecting the page I see that this div's class change from class="styles___MobileFixedBar-sc-x9qtiw-0 fMaMax" to class="styles___MobileFixedBar-sc-x9qtiw-0 ivYpwt" that is display:none.
I have this iOS app I have to fix where the bar never disappears when you scroll up.
Looking at the app, I see that who created this, that does not work for the company anymore, injectes code to show and hide the bottom bar.
This is the only code I could find that appears the one responsible for this, but like I said the bar shows when I scroll down but do not disappears when I scroll up.
if (document.querySelector('div#FA-HIDE_BOTTOM_NAV')) {
window.webkit.messageHandlers.hideTabBar.postMessage('hideTabBar');
}
var banner_height = document.querySelector('div.styles___MobileFixedBar-x9qtiw-0.jcioIC').offsetHeight;
document.querySelector('main').style.paddingBottom = banner_height.toString() + 'px';"
and
if (!document.querySelector('div#FA-HIDE_BOTTOM_NAV')){
window.webkit.messageHandlers.showTabBar.postMessage('showTabBar');
}
and also discovered this one:
window.onscroll = function(e) {
if (Math.abs(this.oldScroll - this.scrollY) > 88) {
document.querySelector('div.styles___MobileFixedBar-x9qtiw-0.jcioIC').style.display = this.oldScroll > this.scrollY ? 'none' : '';
this.oldScroll = this.scrollY
};
}; window.oldScroll = 0;
One thing I do not understand is why one need to inject javascript if the what the app basically does is to show the mobile version of the site (served by the server based on the user agent) inside a WKWebView.
Do you see this code consistent with hiding the bottom bar? How can I write that to make it work.
NOTE: yes, I know that wkwebviews don't need any injected code to work, but I am not the one who created this app and the guy who did it, somehow messed with the original wkwebview in a way that now, if I remove all injected code the page does not even load.

jQuery media queries for toggle button - different action depending on screen width

I have a toggle button which basically shows/hides a list of filters on a Product Index page. Desktop is simple, when clicking the button the panel is shown or hidden with the following script:
$(".filter-toggle").click(function(){
$(".grid").toggleClass("hide-filters");
});
When the browser is below 1024px I use the mmenu plugin to duplicate the filters content and move it into an off-canvas panel. The code for that looks like this:
$(document).ready(function() {
$(".filters").mmenu({
// Options
navbar: {
title: "Filters"
}
}, {
// Configuration
clone: true,
offCanvas: {
pageSelector: ".page"
},
classNames: {
selected: "active"
}
});
var API = $(".filters").data("mmenu");
var $icon = $(".filter-toggle");
$icon.on("click", function() {
API.open();
});
});
Obviously (at the minute) when the toggle button is clicked it will show/hide the content on the page but also trigger the slide-out menu at the same time.
My question is how can I only run the relevant script when it's needed. Is it also possible to do this on resize on not just on pageLoad/refresh?
I tried using matchMedia. Here's a quick CodePen showing where I'm at...
https://codepen.io/moy/pen/wymvjN
It looked like it worked to begin with. Above 1024px the toggle worked. Shrinking the browser down meant the button triggered the slide-out panel - great! But when scaling back up to desktop the slide-out menu is triggered whenever the toggle is clicked. On refresh it works again ...until you shrink the browser down and back up again.
Any ideas?

You can listen for window resize events, and fire functions accordingly. For example, in jQuery:
$(window).on('resize', function(e) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
// initialize small viewport functionality
} else {
// initialized large viewport functionality
}
});
But, you'll need a way to disable that mmenu plugin when switching back to desktop, and include it in whatever script you run during that condition.
Alternatively, the mmenu "Responsive Layout" documentation provides an example for using CSS media queries to hide the cloned menu at certain breakpoints.

Media Element Player Exit Full Screen Scrolling Issue

I have long web page that scrolls vertically with several videos. Using Media Element Player, the videos play, but if you enter full screen mode and then exit full screen mode, the page returns to the very top, regardless of where the video is on the page. I want it to return to the same place. Here is the code I'm using:
var topPosition;
MediaElementPlayer.prototype.enterFullScreen_org =
MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
console.log('enter full screen');
this.enterFullScreen_org();
topPosition = window.pageYOffset;
console.log(topPosition);
}
MediaElementPlayer.prototype.exitFullScreen_org =
MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
console.log('exit full screen')
this.exitFullScreen_org();
ResetFullScreen();
}
function ResetFullScreen() {
console.log('top pos:', topPosition);
setTimeout(function () { window.scrollTo(0, topPosition) }, 500);
}
The console.log shows the correct value for "topPosition" but the window.scrollTo method doesn't appear to work.

Looking through your code, it appears that it should work. I do, however, have one more method to setting the scroll that may work. This will be useful if the element you're trying to scroll is not at the top level.
When storing the scroll position:
topPosition = document.body.scrollTop;
When setting the scroll position:
document.body.scrollTop = topPosition;
If what you're trying to scroll is an element within the body, and not the body itself, just replace document.body with the element you need to scroll.
Also, I found a little thing in your code:
MediaElementPlayer.prototype.enterFullScreen;'
There's a random quote at the end of that line.
EDIT:
If that method does not work, I have one more idea for you. When they click on the video they view, store the element that they clicked on in a variable. After leaving fullscreen, scroll the element into view. That way, you will be, more or less, where the screen was when it entered fullscreen.
Each video has an onclick containing the following; this stores the element they clicked on.
lastVideoClicked = event.target;
When leaving fullscreen, this code will attempt to scroll that element back into view.
lastVideoClicked.scrollIntoView();
You can try it out on the Stack Overflow site right here - scroll to the bottom of the page, open your javascript console, and enter the code document.getElementById('hlogo').scrollIntoView(). This scrolls the Stack Overflow logo into view.

TinyMce submenu's not sticking to toolbar when using fixed_toolbar_container and absolute position

We would like to have a greater control of where and how we position the tinymce toolbar. We found this option fixed_toolbar_container which solves a lot for us but brings us an anoying problem. The documents say the fixed_toolbar_container (http://www.tinymce.com/wiki.php/Configuration:fixed_toolbar_container) can be used to have a fixed toolbar. But we actually would like to use it to be absolute so we can position it relative to it's container.
I created a JS Fiddle to demonstrate the problem: http://jsfiddle.net/ronfmLym/2/. When you open the toolbar by clicking on the text the toolbar will be positioned absolute. When you open a submenu (i.e. by clicking on "file") a submenu will open. Now when you start scrolling the submenu won't stick to the toolbar. This is because these submenu's get the mce-fixed class because we set the fixed_toolbar_container property.
<div class="element">
<div class="toolbar-container"></div>
<div class="content">
<p>Text</p>
</div>
</div>
Is there any way to make the submenu's stick to the toolbar when positioned absolute and scrolling? Keep in mind that we are switching to a fixed positioning when the toolbar is going off screen.
We thought we could maybe fix it by modifying the container element of de submenu's by using the piece of code below and overwriting the top-position of the submenu's and setting the positioner to absolute with css. But that seems to mess up the tooltips and tinymce doesn't recalculate the "left" css-property of the submenu's so the position in still off.
tinymce.ui.Control.prototype.getContainerElm = function() {
return document.getElementById('toolbar-container');
};
The only corresponding question I could find on stackoverflow was this one: TinyMCE push down submenus using fixed_toolbar_container, no answers there.

Tried wrapping the toolbar in a div and using position:relative; to try and hack it together, but didn't cooperate this time.
It appears that the toolbar actually is accounting for its position at the time of click. So your only conflict is if the opened toolbar is position:absolute and then changes to position:fixed or vice versa.
Your best [manual] bet would be to call a function at the same time that you change the position of the toolbar that:
Detects if any menus are open.
Changes the toolbar position.
Reopens the menus that were open.
The lazy (discouraged) fix would be to close all submenus whenever the position changes. This will fix the layout, but it will require the user to click once again to bring the menu back.
Sorry this isn't a silver bullet answer :(

This answer follows Brian John's suggestion:
I'm using this method to position any open mce-floatpanel (This is typescript, but it shouldn't be too hard to convert to ES or whatever you need.):
positionTinyMceDropdowns() {
// TODO: You'll need to replace all occurrences
// of this.mceWrapperElement with whatever is
// wrapping your TinyMCE. If you have only a
// single instance, you can just replace it
// with document
const button = <HTMLElement> this.mceWrapperElement.getElementsByClassName('mce-opened').item(0);
const items = document.getElementsByClassName('mce-floatpanel');
let wrapperNode: HTMLElement;
for (let i = 0; i < items.length; i++) {
const currentItem = <HTMLElement> items.item(i);
if (currentItem.style.display !== 'none') {
wrapperNode = currentItem;
break;
}
}
if (!wrapperNode || !button) {
return;
}
const styles = wrapperNode.style;
styles.display = 'block';
styles.position = 'absolute';
const bodyRect = document.body.getBoundingClientRect();
const buttonRect = button.getBoundingClientRect();
// get absolute button position:
let y = buttonRect.top - bodyRect.top;
y += 33; // toolbar line height;
styles.top = `${Math.floor(y)}px`;
}
The instances I found in which it needs to be called:
on window scroll (or if the editor is wrapped in a scrolling container, then whenever that scrolls)
on window resize (or if the editor is wrapped in a container that resizes without the window being resized, then whenever that container is resized)
So here's a sample for the simplest case in angular (again, adept to whichever js framework you're using):
import { HostListener } from '#angular/core';
// ...
#HostListener('window:resize', ['$event'])
#HostListener('window:scroll', ['$event'])
public onResize() {
this.positionTinyMceDropdowns();
}
Interestingly on iOS devices (and perhaps other mobile devices?) mce-floatpanel wasn't even positioned correctly after it had just been opened. So I had to add this:
tinymceConfig.setup = (editor: TinyMceEditor) => {
editor.on('init', () => {
const panel = this.mceWrapperElement.querySelector('.mce-tinymce.mce-panel');
if (panel) {
panel.addEventListener('touchend', () => {
this.positionTinyMceDropdowns();
});
}
});
};

I think the config setting fixed_toolbar_container is poorly explained in TinyMCE 6 documentation but when you correctly configure it, you'll find it will work much more nice (especially for inline mode) than the default configuration that tries to emulate position:sticky.
In practice, you want to fixed_toolbar_container set to a string that's CSS selector for the container, typically something like "#mycontainer".
After that, you can move the container element using its CSS properties, the TinyMCE user interface nicely follows around. (Modulo typical TinyMCE bugs, of course. For example, the submenus overflow to right with very narrow viewports.)
Note that TinyMCE positions stuff where it uses position:absolute relative to fixed_toolbar_container container and if you move that container around, in some cases you must execute editor.dispatch("ResizeWindow") to trigger TinyMCE to re-calculate the absolutely positioned elements.
See demo using custom container with position:sticky at https://jsfiddle.net/8bndv26t/1/.

Twitter Bootstrap and Snap.js

I'm trying to integrate jakiestfu's Snap.js with Twitter Bootstrap.
I've got something that functions (I can get the content to slide, or open a drawer via a click event). However, I'm at the limit of my CSS skills for the final problem: The drawer content is always visible regardless of the state of the drawer.
JSFiddle example
While I could hard-code the visibility of the drawer element on document load and do something on the open/close click event, that doesn't do anything for the drag capability that Snap.js has.
addEvent(document.getElementById('open-left'), 'click', function () {
// Muck with visibility in here
// Added code sample because StackOverflow wants it with a fiddle...
if (snapper.state().state == "left") {
snapper.close();
} else {
snapper.open('left');
}});

You need to setup a background color for your content:
#content{
background: white;
}
Working fiddle: http://jsfiddle.net/basarat/ygm3L/