Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0] Custom Elements everywhere: iframe wrapper #18916

Closed
wants to merge 6 commits into from
Closed

[4.0] Custom Elements everywhere: iframe wrapper #18916

wants to merge 6 commits into from

Conversation

dgrammatiko
Copy link
Contributor

@dgrammatiko dgrammatiko commented Nov 29, 2017

Pull Request for Issue # .

Summary of Changes

Changes for the com_wrapper and mod_wrapper to use custom elements.

This fixes:

  • Inability to use multiple modules in the same page (id was hardcoded)
  • New code follows the progressive enhancement (part of the PWA) technic, eg iframe will be viewable (but not with the desired height) if javascript is disabled.
  • The javascript is not blocking the rendering of the page as (and this goes for all custom elements) it's loaded asynchronously after the initial page render!

Testing Instructions (by @C-Lodder)

  • Create 2 wrapper modules
  • assign to the same page
  • ensure they work as expected

Expected result

Actual result

screen shot 2017-11-29 at 16 23 27

Documentation Changes Required

None. The new code reflects the old behaviour!

@brianteeman
Copy link
Contributor

Please add a title attribute

All or <iframe> elements in the document must have a title that is not empty to describe their contents to screen reader users. The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting and window targeting. The name is not presented to the user, only the title is.

@C-Lodder
Copy link
Member

Sometimes wish iframes would just become obselete

@brianteeman
Copy link
Contributor

and when you look at where we use them in the admin ui you will see how abused they are and how they are not used correctly.

@dgrammatiko
Copy link
Contributor Author

@brianteeman shall we do the a11y part in another PR?

@brianteeman
Copy link
Contributor

i dont see why. this is a total replacement of the current iframe code so why leave it til after this one has been merged. its just duplicating work for you and for testers.

@@ -98,11 +98,11 @@ public function display($tpl = null)
// Auto height control
if ($params->def('height_auto'))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can be changed to:

$wrapper->load = false;

if ($params->def('height_auto'))
{
	$wrapper->load = true;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're really trying to simplify this, then just do $wrapper->load = $params->def('height_auto'); since it's already returning the boolean value you want to assign.

@dgrammatiko
Copy link
Contributor Author

Ok, so title will be the menu title for the component and the module title for the modules?

adjustHeight() {
let height = 0;
const doc = this.iframe.contentWindow.document;
height = doc.body.scrollHeight;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

may aswell make this let height = doc.body.scrollHeight; and remove let height = 0; above

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's just a fallback, can be written also as

const height = doc.body.scrollHeight || 0;

@brianteeman
Copy link
Contributor

For _wrapper then yes that will should be ok but note it won't be in other places in the core that we have iframe it won't be

@ghost
Copy link

ghost commented Dec 9, 2017

@dgt41 can this PR be tested, can you give Test Instructions?


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/18916.

@ghost
Copy link

ghost commented Dec 24, 2017

Reminder for @dgt41


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/18916.

@C-Lodder
Copy link
Member

  • Create 2 wrapper modules
  • assign to the same page
  • ensure they work as expected

@ghost
Copy link

ghost commented Dec 24, 2017

thanks for Info, @C-Lodder (i added them in first Comment so Tester don't have to search in Thread).

@dgt41 can you please resolve conflicting Files so this Pull Request can be tested?

@dgrammatiko
Copy link
Contributor Author

@franz-wohlkoenig done

@ghost
Copy link

ghost commented Dec 24, 2017

I have tested this item ✅ successfully on fcb898e

bildschirmfoto 2017-12-24 um 12 14 56


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/18916.

@anuragteapot
Copy link
Contributor

@dgt41 can you resolve these conflicting files.
So we can test this. There was some work pending on Joomla-es6 repo
Thanks

@dgrammatiko
Copy link
Contributor Author

@Anu1601CS done

@anuragteapot
Copy link
Contributor

I can't test. :(

screenshot from 2018-02-07 22-37-39

let this PR to merge #19836

@franz-wohlkoenig , @astridx can you test again if you are not getting this issue .

@laoneo
Copy link
Member

laoneo commented Mar 7, 2018

@Anu1601CS does that happen when you save a module?

@anuragteapot
Copy link
Contributor

@laoneo yes

@laoneo
Copy link
Member

laoneo commented Mar 7, 2018

Can you test if my pr is working?

@astridx
Copy link
Contributor

astridx commented Mar 8, 2018

I have got problems with this brach.
After applying I see an error message in both wrapper modules and I can see only the second iframe.
home 1


Error Message
Notice: Undefined variable: title in /var/www/html/JOOMLA/joomla4/joomla-cms/modules/mod_wrapper/tmpl/default.php on line 24 Call Stack #TimeMemoryFunctionLocation 10.0001363648{main}( ).../index.php:0 20.0001364128require_once( '/var/www/html/JOOMLA/joomla4/joomla-cms/includes/app.php' ).../index.php:36 30.01511397824Joomla\CMS\Application\SiteApplication->execute( ).../app.php:38 40.09532786032Joomla\CMS\Application\SiteApplication->render( ).../CMSApplication.php:351 50.09542786056Joomla\CMS\Application\SiteApplication->render( ).../SiteApplication.php:754 60.10042820232Joomla\CMS\Document\HtmlDocument->render( ).../CMSApplication.php:1083 70.10042820232Joomla\CMS\Document\HtmlDocument->_renderTemplate( ).../HtmlDocument.php:555 80.10612886528Joomla\CMS\Document\HtmlDocument->getBuffer( ).../HtmlDocument.php:780 90.10612886608Joomla\CMS\Document\Renderer\Html\ModulesRenderer->render( ).../HtmlDocument.php:489 100.10792933800Joomla\CMS\Document\Renderer\Html\ModuleRenderer->render( ).../ModulesRenderer.php:47 110.10802936432Joomla\CMS\Helper\ModuleHelper::renderModule( ).../ModuleRenderer.php:98 120.10812957080include( '/var/www/html/JOOMLA/joomla4/joomla-cms/modules/mod_wrapper/mod_wrapper.php' ).../ModuleHelper.php:204 130.10822958312require( '/var/www/html/JOOMLA/joomla4/joomla-cms/modules/mod_wrapper/tmpl/default.php' ).../mod_wrapper.php:26 " iframe-class="wrapper">

@BaleshSrle
Copy link

BaleshSrle commented May 2, 2018

@C-Lodder Why do people need to complicate things, and don't want to make it simpler?
@dgrammatiko There will not be any merging, because this uses old HTML4 standard, and it will be extremley dificult for me to modify this heap of files to new HTML5 standard.
BTW, I created a similar PR, but for Joomla 3.8 and I can inform you that my solution works on my 2 web-sites. #19965

@dgrammatiko
Copy link
Contributor Author

@BaleshSrle can you explain me what is complicate here? I'm just using the W3C standards Custom Elements, is that complicated? If so you should rethink your involvement
with the web.

Anyways I've asked people with merge right to first merge your PR and then I'll patch things here

@C-Lodder
Copy link
Member

C-Lodder commented May 2, 2018

@BaleshSrle - I have no idea what you're on about and why you're asking me

@BaleshSrle
Copy link

@C-Lodder I don't know, maybe because I can see widsom on you.
@dgrammatiko I looked at the heap of files that you created and I can honestly say that Joomla 4 will be one heavy CMS to upload (unzipped maybe over 25 to 30 MB). And yes, you are using W3C's old HTML4 standard, but I'm using W3C's new HTML5 standard.

@laoneo
Copy link
Member

laoneo commented Aug 9, 2018

Can you fix the conflicts on this one please?

@dgrammatiko
Copy link
Contributor Author

@laoneo done

@dgrammatiko
Copy link
Contributor Author

Preview component + module (inception mode):
screenshot 2018-08-10 at 21 52 03

@brianteeman
Copy link
Contributor

Can you remove the commented out code please

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

9 participants