[3.x] com_wrapper. Add HTML5 mode without B\C break. #19985

ReLater · 2018-03-25T13:13:28Z

Related to #19965
See discussion there concerning B\C breaks in Joomla 3.x.

@BaleshSrle
Please feel free to take over code and/or idea into your pr. I have no problems to close this one then.

Summary of Changes

Adds a new switch Legacy (HTML4) versus HTML5.
Legacy is the default setting. Thus, this pr will not break older template overrides that use HTML4 attributes for IFRAME tags that have been removed in HTML5.
Doesn't touch old parameter types and names but translates them via PHP for HTML5 mode if necessary.
HTML5 uses CSS style instead.
Comment: Because most current browsers don't support CSS rule overflow for displaying/hiding scroll bars scrolling attribute cannot be removed in HTML5 mode.

Testing Instructions

Apply patch.
Create a menu item of type "Wrapper" with setting Mode = Legacy.
Create another menu item of type "Wrapper" with setting Mode = HTML5.

Compare outputs in frontend.
Test other settings and compare output in frontend.
As far as I see: Old template overrides should still work even if you switch mode to HTML5 because only default.php of core respects new setting.

Expected result

No optical difference

Documentation Changes Required

????

New language strings

YES
Please help to optimize description.

Quy · 2018-03-25T14:41:15Z

components/com_wrapper/views/wrapper/tmpl/default.php

+
+if ($isHtml5)
+{
+


Remove blank line.

Quy · 2018-03-25T14:42:17Z

components/com_wrapper/views/wrapper/tmpl/default.php

+
+	if ($scrolling !== 'auto')
+	{
+		$scrolling = ($scrolling === 'no' ? 'hidden' : 'scroll');


() not necessary. Remove.

Quy · 2018-03-25T14:42:26Z

components/com_wrapper/views/wrapper/tmpl/default.php

+		$scrolling = ($scrolling === 'no' ? 'hidden' : 'scroll');
+	}
+
+	$frameborder = (!$frameborder ? 'none' : $frameborder . 'px solid #000');


() not necessary. Remove.

Quy · 2018-03-25T16:19:16Z

administrator/language/en-GB/en-GB.com_wrapper.ini

 COM_WRAPPER_FIELD_HEIGHTAUTO_LABEL="Auto Height"
 COM_WRAPPER_FIELD_LABEL_SCROLLBARSPARAMS="Scroll Bar Parameters"
+COM_WRAPPER_FIELD_MODE_LABEL="Mode"
+COM_WRAPPER_FIELD_MODE_DESCRIPTION="HTML5 mode uses CSS to style the IFRAME tag. Legacy mode uses HTML 4.01 IFRAME attributes and is backwards compatible with old template overrides."


Change to COM_WRAPPER_FIELD_MODE_DESC

Quy · 2018-03-25T17:26:16Z

I have tested this item ✅ successfully on 47a52d6

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19985.}

BaleshSrle · 2018-03-25T18:05:53Z

You managed to work all major kinks, but there is an issue with scrolling (in HTML4) or overflow (in HTML5) in components/com_wrapper/views/wrapper/tmpl/default.xml

More about this you can see @ https://www.w3schools.com/cssref/pr_pos_overflow.asp (auto, scroll & hidden are the main options).

In CS there is no need to have line $frameborder = !$frameborder ? 'none' : $frameborder . 'px solid #000';. I tried to add something similar (in default.php and default.xml), but after uploading that file and refreshing my web site, I discovered an error and I left values 1 and 0 in frameborder field (and I can inform you that works).

ReLater · 2018-03-25T19:31:16Z

border: none; is correct and valid CSS. So I don't see any problems to use it.

border: 1; is invalid CSS. If you see an iframe border in your browser the reason is that the browser that you use ignores this invalid setting and falls back to it's own default CSS rules (if there are no other overruling ones in other CSS files). (EdIT: Or your browser is a nice one ;-) )

Only border: 1px; doesn't show a frameborder in current Joomla staging and that's the criterion for this pr. "Be B\C".

So use border: 1px solid #000; to display a border like with frameborder="1" in Legacy mode.

`border: 1px;` (HTML 5)

`border: 1px solid #000;` (HTML 5)

`frameborder="1"` (Legacy)

(auto, scroll & hidden are the main options).

And these three overflow values are used in HTML5 mode and ONLY in HTML5 mode. So, I don't understand what you're talking about.

In Legacy mode nothing has changed an scrolling is yes|no|auto like before.

ReLater · 2018-03-25T21:25:14Z

I'm closing here until I've found a solution for Scroll Bars in HTML5 mode.
It looks like most browsers don't support CSS rule overflow for tag IFRAME.

ReLater · 2018-03-25T22:00:34Z

Reopened after additional commit.
I had to add a fallback for setting Scroll Bars .

Add IFRAME mode HTML4 / HTML5

09ebbf1

joomla-cms-bot added the PR-staging label Mar 25, 2018

ReLater added 2 commits March 25, 2018 15:23

Update default.php

0ff3eb2

Update en-GB.com_wrapper.ini

a04892c

joomla-cms-bot added the Language Change This is for Translators label Mar 25, 2018

ReLater mentioned this pull request Mar 25, 2018

Transition of Joomla's Wrapper from HTML4 to HTML5 #19965

Closed

Quy reviewed Mar 25, 2018

View reviewed changes

components/com_wrapper/views/wrapper/tmpl/default.php Outdated

if ($isHtml5)

{

Copy link

Contributor

Quy Mar 25, 2018

Choose a reason for hiding this comment

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

Remove blank line.

Quy reviewed Mar 25, 2018

View reviewed changes

CS

f6938c2

Quy reviewed Mar 25, 2018

View reviewed changes

Update en-GB.com_wrapper.ini

47a52d6

ReLater closed this Mar 25, 2018

ReLater reopened this Mar 25, 2018

Update default.php

a365c60

ReLater closed this Apr 4, 2018

ReLater deleted the patch-7 branch August 4, 2018 02:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[3.x] com_wrapper. Add HTML5 mode without B\C break. #19985

[3.x] com_wrapper. Add HTML5 mode without B\C break. #19985

Uh oh!

ReLater commented Mar 25, 2018 •

edited

Loading

Uh oh!

Quy Mar 25, 2018

Uh oh!

Quy Mar 25, 2018

Uh oh!

Quy Mar 25, 2018

Uh oh!

Quy Mar 25, 2018

Uh oh!

Quy commented Mar 25, 2018

Uh oh!

BaleshSrle commented Mar 25, 2018 •

edited

Loading

Uh oh!

ReLater commented Mar 25, 2018 •

edited

Loading

Uh oh!

ReLater commented Mar 25, 2018

Uh oh!

ReLater commented Mar 25, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

[3.x] com_wrapper. Add HTML5 mode without B\C break. #19985

[3.x] com_wrapper. Add HTML5 mode without B\C break. #19985

Uh oh!

Conversation

ReLater commented Mar 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of Changes

Testing Instructions

Expected result

Documentation Changes Required

New language strings

Uh oh!

Quy Mar 25, 2018

Choose a reason for hiding this comment

Uh oh!

Quy Mar 25, 2018

Choose a reason for hiding this comment

Uh oh!

Quy Mar 25, 2018

Choose a reason for hiding this comment

Uh oh!

Quy Mar 25, 2018

Choose a reason for hiding this comment

Uh oh!

Quy commented Mar 25, 2018

Uh oh!

BaleshSrle commented Mar 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ReLater commented Mar 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

border: 1px; (HTML 5)

border: 1px solid #000; (HTML 5)

frameborder="1" (Legacy)

Uh oh!

ReLater commented Mar 25, 2018

Uh oh!

ReLater commented Mar 25, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ReLater commented Mar 25, 2018 •

edited

Loading

BaleshSrle commented Mar 25, 2018 •

edited

Loading

ReLater commented Mar 25, 2018 •

edited

Loading

`border: 1px;` (HTML 5)

`border: 1px solid #000;` (HTML 5)

`frameborder="1"` (Legacy)