Moodle mobile app, iframes and view port height

Moodle mobile app, iframes and view port height

by Justin Hunt -
Number of replies: 3
Picture of Particularly helpful Moodlers Picture of Plugin developers
I have been working on Moodle Mobile App (MMA) support for the mod_englishcentral activity. We load the activity iframe inside the mobile app.

The issue is the height of the view window. The EnglishCentral player tries to anchor a navigation toolbar to the bottom of the view port. But by default, this ends up below the MMA navigation buttons. However if you drag the title of the activity (in the screenshot "Animals") into the header, everything fits in nicely. 

The image illustrates the two states: desired (on the left) and default (on the right)
ec mobile app problem
It seems to me that the viewport height, as far as the iframe is concerned, is the distance from MMA header to MMA nav buttons.
But the activity title is shown in that space and so the iframe doesn't have as much room as it expects. 
When the activity title is moved to the MMA header, it has the full viewport height it expects.

So my question is , is there a way to tell the mobile app to put the activity title in the header from the very beginning?
Average of ratings: -
In reply to Justin Hunt

Re: Moodle mobile app, iframes and view port height

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Well I have been bashing my head against a brick wall on this, and really nothing that I have done makes a difference.
I found this file in the mobile app which controls how the collapsible header works.
https://github.com/moodlehq/moodleapp/blob/main/src/core/directives/collapsible-header.ts

I could not find anyway to call into the functions there from my plugin however (its a very simple moble plugin, and I want to keep it simple)

So I thought if I can just scroll the correct element programmatically when the iframe loads, the scroll event will be triggered and the header will collapse.
I got the selector of the element whose scroll is being listened to from the collapsible-header code, and added some javascript to the plugins mobile.php page in classes/output/mobile.php

The relevant javascript is here:
 function scrollElementUp() {
  document.querySelector('ion-content:not(.disable-scroll-y)').scrollTo({top: -80});
 }

but of course nothing happens, it doesn't even scroll. I tried lots of scrolltop values. I am doing all this from the chromium browser and also tried running the js from the console there.  I have lost half a day messing around (more if I were honest ).

Any ideas?
Average of ratings: -
In reply to Justin Hunt

Re: Moodle mobile app, iframes and view port height

by Pau Ferrer Ocaña -
Picture of Core developers Picture of Moodle HQ Picture of Peer reviewers Picture of Plugin developers
in
Hi Justin,

Sorry for the late reply.

1. I've opened an issue (https://tracker.moodle.org/browse/MOBILE-4494) once resolved and released a new version it would permit plugins to avoid having the collapsible header.
2. One easy solution is to open the iframe in a separate page that won't have a collapsible header.
3. If you want a workaround, you can use (at your own risk) some JS:

// First select the current page.
const page = document.querySelector('page-core-site-plugins-module-index.ion-page.collapsible-header-page.collapsible-header-page-is-active');
// Disable the collapsible-header
page.style.setProperty('--collapsible-header-progress', 1);
page.classList.add('collapsible-header-page-is-collapsed');
// Hide the floating title
page.querySelector('.collapsible-header-floating-title-wrapper').style.display = 'none';
// Optionally, hide all the ion-item.
page.querySelector('.collapsible-header-expanded').style.display = 'none';
As I said, use JS at your own risk, since you are changing internals of the app, and they may change in the future.

Cheers!

Pau
Average of ratings: Useful (1)
In reply to Pau Ferrer Ocaña

Re: Moodle mobile app, iframes and view port height

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Thanks Paul. I appreciate your help on this.

I was able to use that JS to collapse the header, so that is great. And I voted for the issue.

Much appreciated
Average of ratings: -