[4.0] Custom Elements everywhere: iframe wrapper

build/build-modules-js/compilecejs.js

@@ -10,19 +10,25 @@ const UglyCss = require('uglifycss');
 const UglifyJS = require('uglify-es');
 const rootPath = require('./rootpath.js')._();
 
-const createJsFiles = (element, es6File) => {
+const createJsFiles = (element, es6File, options) => {
   const b = browserify();
   const c = browserify();
 
-  fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}.js`, es6File, { encoding: 'utf8' });
+  if (!options.settings.webcomponents[element]) {
+    return;
+  }
+  // fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}.js`, es6File, { encoding: 'utf8' });
+  fs.writeFileSync(`${rootPath}/${options.settings.webcomponents[element].js}/joomla-${element}.js`, es6File, { encoding: 'utf8' });
 
   // And the minified version
-  fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}.min.js`, UglifyJS.minify(es6File).code, { encoding: 'utf8' });
+  // fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}.min.js`, UglifyJS.minify(es6File).code, { encoding: 'utf8' });
+  fs.writeFileSync(`${rootPath}/${options.settings.webcomponents[element].js}/joomla-${element}.min.js`, UglifyJS.minify(es6File).code, { encoding: 'utf8' });
 
   // Transpile a copy for ES5
-  fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.js`, '');
-  const bundleFs = fs.createWriteStream(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.js`);
-  const bundleFsMin = fs.createWriteStream(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.min.js`);
+  // fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.js`, '');
+  // fs.writeFileSync(`${rootPath}/${options.settings.webcomponents[element].js}/joomla-${element}-es5.js`, '');
+  const bundleFs = fs.createWriteStream(`${rootPath}/${options.settings.webcomponents[element].js}/joomla-${element}-es5.js`);
+  const bundleFsMin = fs.createWriteStream(`${rootPath}/${options.settings.webcomponents[element].js}/joomla-${element}-es5.min.js`);
 
   b.add(`${rootPath}/build/media/webcomponents/js/${element}/${element}.js`);
   c.add(`${rootPath}/build/media/webcomponents/js/${element}/${element}.js`);
@@ -44,14 +50,24 @@ const compile = (options) => {
   }
 
   options.settings.elements.forEach((element) => {
+    if (options.settings.webcomponents[element]){
+      if (options.settings.webcomponents[element].js){
+        if (!fs.existsSync(`${rootPath}/${options.settings.webcomponents[element].js}`)) {
+          fsExtra.mkdirSync(`${rootPath}/${options.settings.webcomponents[element].js}`);
+        }
+      }
+      if (options.settings.webcomponents[element].css){
+        if (!fs.existsSync(`${rootPath}/${options.settings.webcomponents[element].css}`)) {
+          fsExtra.mkdirSync(`${rootPath}/${options.settings.webcomponents[element].css}`);
+        }
+      }
+    }
+
+
     // Copy the ES6 file
     let es6File = fs.readFileSync(`${rootPath}/build/media/webcomponents/js/${element}/${element}.js`, 'utf8');
     // Check if there is a css file
     if (fs.existsSync(`${rootPath}/build/media/webcomponents/scss/${element}/${element}.scss`)) {
-      if (!fs.existsSync(`${rootPath}/build/media/webcomponents/scss/${element}/${element}.scss`)) {
-        return;
-      }
-
       Sass.render({
         file: `${rootPath}/build/media/webcomponents/scss/${element}/${element}.scss`,
       }, (error, result) => {
@@ -91,18 +107,20 @@ const compile = (options) => {
                 } else {
                   if (typeof res === 'object' && res.css) {
                     fs.writeFileSync(
-                      `${rootPath}/media/system/webcomponents/css/joomla-${element}.css`,
+                      // `${rootPath}/media/system/webcomponents/css/joomla-${element}.css`,
+                      `${rootPath}/${options.settings.webcomponents[element].css}/joomla-${element}.css`,
                       res.css.toString(),
                       { encoding: 'UTF-8' },
                     );
                     fs.writeFileSync(
-                      `${rootPath}/media/system/webcomponents/css/joomla-${element}.min.css`,
+                      // `${rootPath}/media/system/webcomponents/css/joomla-${element}.min.css`,
+                      `${rootPath}/${options.settings.webcomponents[element].css}/joomla-${element}.min.css`,
                       UglyCss.processString(res.css.toString(), { expandVars: false }),
                       { encoding: 'UTF-8' },
                     );
                   }
 
-                  createJsFiles(element, es6File);
+                  createJsFiles(element, es6File, options);
                 }
               })
 
@@ -120,7 +138,7 @@ const compile = (options) => {
         }
       });
     } else {
-      createJsFiles(element, es6File);
+      createJsFiles(element, es6File, options);
     }
   });
 };

build/build-modules-js/settings.json

@@ -16,9 +16,14 @@
       "editor-codemirror",
       "hidden-mail",
       "editor-none",
-      "toolbar-button"
+      "toolbar-button",
+      "iframe"
     ],
     "webcomponents": {
+      "iframe": {
+        "css": "media/com_wrapper/css",
+        "js": "media/com_wrapper/js"
+      },
       "field-media": {
         "css": "media/system/webcomponents/css",
         "js": "media/system/webcomponents/js"

build/media/webcomponents/js/iframe/iframe.js

@@ -0,0 +1,61 @@
+(() => {
+  class JoomlaIframe extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    static get observedAttributes() {
+      return ['iframe-auto-height', 'iframe-name', 'iframe-src', 'iframe-width', 'iframe-height', 'iframe-scrolling', 'iframe-border', 'iframe-class', 'iframe-title'];
+    }
+
+    get iframeAutoHeight() { return (this.getAttribute('iframe-auto-height') === '1'); }
+    get iframeName() { return this.getAttribute('iframe-name'); }
+    get iframeSrc() { return this.getAttribute('iframe-src'); }
+    get iframeWidth() { return this.getAttribute('iframe-width'); }
+    get iframeHeight() { return this.getAttribute('iframe-height'); }
+    get iframeScrolling() { return (this.getAttribute('iframe-scrolling') === '1'); }
+    get iframeBorder() { return (this.getAttribute('iframe-border') === '1'); }
+    get iframeClass() { return this.getAttribute('iframe-class'); }
+    get iframeTitle() { return this.getAttribute('iframe-title'); }
+
+
+    connectedCallback() {
+      this.iframe = document.createElement('iframe');
+      this.iframe.setAttribute('name', this.iframeName);
+      this.iframe.setAttribute('src', this.iframeSrc);
+      this.iframe.setAttribute('width', this.iframeWidth);
+      this.iframe.setAttribute('height', this.iframeHeight);
+      this.iframe.setAttribute('scrolling', this.iframeScrolling);
+      this.iframe.setAttribute('frameborder', this.iframeBorder);
+      this.iframe.setAttribute('class', this.iframeClass);
+      this.iframe.setAttribute('title', this.iframeTitle);
+
+      // Generate a random unique ID
+      this.iframe.setAttribute('id', 'iframe-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5));
+
+      if (this.iframeAutoHeight) {
+        this.adjustHeight = this.adjustHeight.bind(this);
+
+        this.iframe.addEventListener('load', this.adjustHeight);
+      }
+
+      this.appendChild(this.iframe);
+    }
+
+    disconnectedCallback() {
+      if (this.iframeAutoHeight) {
+        this.iframe.removeEventListener('load', this.adjustHeight);
+      }
+
+      this.innerHTML = '';
+    }
+
+    adjustHeight() {
+      const doc = this.iframe.contentWindow.document;
+      const height = doc.body.scrollHeight || 0;
+      this.iframe.setAttribute('height', (height + 60) + 'px');
+    }
+  }
+
+  customElements.define('joomla-iframe', JoomlaIframe);
+})();

components/com_wrapper/View/Wrapper/HtmlView.php

@@ -97,14 +97,7 @@ public function display($tpl = null)
 		$wrapper = new \stdClass;
 
 		// Auto height control
-		if ($params->def('height_auto'))
-		{
-			$wrapper->load = 'onload="iFrameHeight()"';
-		}
-		else
-		{
-			$wrapper->load = '';
-		}
+		$wrapper->load = $params->def('height_auto');
 
 		$url = $params->def('url', '');
 

components/com_wrapper/tmpl/wrapper/default.php

@@ -11,35 +11,43 @@
 
 use Joomla\CMS\HTML\HTMLHelper;
 
-HTMLHelper::_('script', 'com_wrapper/iframe-height.min.js', array('version' => 'auto', 'relative' => true));
+if ($this->escape($this->params->get('page_heading')))
+{
+	$title = $this->escape($this->params->get('page_heading'));
+}
+else
+{
+	$title = $this->escape($this->params->get('page_title'));
+}
 
+
+HTMLHelper::_('webcomponent', 'com_wrapper/joomla-iframe.min.js', ['version' => 'auto', 'relative' => true]);
 ?>
-<div class="com-wrapper contentpane">
+<div class="contentpane<?php echo $this->pageclass_sfx; ?>">
 	<?php if ($this->params->get('show_page_heading')) : ?>
 		<div class="page-header">
-			<h1>
-				<?php if ($this->escape($this->params->get('page_heading'))) : ?>
-					<?php echo $this->escape($this->params->get('page_heading')); ?>
-				<?php else : ?>
-					<?php echo $this->escape($this->params->get('page_title')); ?>
-				<?php endif; ?>
-			</h1>
+			<h1><?php echo $title; ?></h1>
 		</div>
 	<?php endif; ?>
-	<iframe <?php echo $this->wrapper->load; ?>
-		id="blockrandom"
-		name="iframe"
-		src="<?php echo $this->escape($this->wrapper->url); ?>"
-		width="<?php echo $this->escape($this->params->get('width')); ?>"
-		height="<?php echo $this->escape($this->params->get('height')); ?>"
-		scrolling="<?php echo $this->escape($this->params->get('scrolling')); ?>"
-		frameborder="<?php echo $this->escape($this->params->get('frameborder', 1)); ?>"
-		<?php if ($this->escape($this->params->get('page_heading'))) : ?>
-			title="<?php echo $this->escape($this->params->get('page_heading')); ?>"
-		<?php else : ?>
-			title="<?php echo $this->escape($this->params->get('page_title')); ?>"
-		<?php endif; ?>
-		class="com-wrapper__iframe wrapper <?php echo $this->pageclass_sfx; ?>">
-		<?php echo JText::_('COM_WRAPPER_NO_IFRAMES'); ?>
-	</iframe>
+	<joomla-iframe iframe-auto-height="<?php echo $this->wrapper->load; ?>"
+			iframe-name="iframe"
+			iframe-src="<?php echo $this->escape($this->wrapper->url); ?>"
+			iframe-width="<?php echo $this->escape($this->params->get('width')); ?>"
+			iframe-height="<?php echo $this->escape($this->params->get('height')); ?>"
+			iframe-scrolling="<?php echo $this->escape($this->params->get('scrolling')); ?>"
+			iframe-border="<?php echo $this->escape($this->params->get('frameborder', 1)); ?>"
+			iframe-class="wrapper <?php echo $this->pageclass_sfx; ?>"
+			iframe-title="<?php echo $title; ?>">
+	</joomla-iframe>
+	<noscript>
+		<iframe name="iframe"
+				title="<?php echo $title; ?>"
+				id="iframe-<?php echo rand(1, 10000); ?>"
+				src="<?php echo $this->escape($this->wrapper->url); ?>"
+				width="<?php echo $this->escape($this->params->get('width')); ?>"
+				height="<?php echo $this->escape($this->params->get('height')); ?>"
+				scrolling="<?php echo $this->escape($this->params->get('scrolling')); ?>"
+				frameborder="<?php echo $this->escape($this->params->get('frameborder', 1)); ?>"
+				class="wrapper <?php echo $this->pageclass_sfx; ?>"></iframe>
+	</noscript>
 </div>

modules/mod_wrapper/Helper/WrapperHelper.php

@@ -55,12 +55,14 @@ public static function getParams(&$params)
 			}
 		}
 
-		$load = '';
-
 		// Auto height control
 		if ($params->def('height_auto'))
 		{
-			$load = 'onload="iFrameHeight(this)"';
+			$load = true;
+		}
+		else
+		{
+			$load = false;
 		}
 
 		$params->set('load', $load);

modules/mod_wrapper/mod_wrapper.php

@@ -21,7 +21,7 @@
 $height      = htmlspecialchars($params->get('height'), ENT_COMPAT, 'UTF-8');
 $scroll      = htmlspecialchars($params->get('scrolling'), ENT_COMPAT, 'UTF-8');
 $frameborder = htmlspecialchars($params->get('frameborder'), ENT_COMPAT, 'UTF-8');
-$ititle      = $module->title;
+$title      = htmlspecialchars($module->title, ENT_COMPAT, 'UTF-8');
 $id          = $module->id;
 
 require ModuleHelper::getLayoutPath('mod_wrapper', $params->get('layout', 'default'));

modules/mod_wrapper/tmpl/default.php

@@ -12,17 +12,26 @@
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\HTML\HTMLHelper;
 
-HTMLHelper::_('script', 'com_wrapper/iframe-height.min.js', array('version' => 'auto', 'relative' => true));
+HTMLHelper::_('webcomponent', 'com_wrapper/joomla-iframe.min.js', ['version' => 'auto', 'relative' => true]);
 ?>
-<iframe <?php echo $load; ?>
-	id="blockrandom-<?php echo $id; ?>"
-	name="<?php echo $target; ?>"
-	src="<?php echo $url; ?>"
-	width="<?php echo $width; ?>"
-	height="<?php echo $height; ?>"
-	scrolling="<?php echo $scroll; ?>"
-	frameborder="<?php echo $frameborder; ?>"
-    title="<?php echo $ititle; ?>"
-	class="mod-wrapper wrapper">
-	<?php echo Text::_('MOD_WRAPPER_NO_IFRAMES'); ?>
-</iframe>
+<joomla-iframe iframe-auto-height="<?php echo $load; ?>"
+		iframe-name="<?php echo $target; ?>"
+		iframe-src="<?php echo $url; ?>"
+		iframe-width="<?php echo $width; ?>"
+		iframe-height="<?php echo $height; ?>"
+		iframe-scrolling="<?php echo $scroll; ?>"
+		iframe-border="<?php echo $frameborder; ?>"
+		iframe-title="<?php echo $title; ?>"
+		iframe-class="wrapper">
+</joomla-iframe>
+<noscript>
+	<iframe name="<?php echo $target; ?>"
+			id="blockrandom-<?php echo $id; ?>"
+			iframe-title="<?php echo $title; ?>"
+			src="<?php echo $url; ?>"
+			width="<?php echo $width; ?>"
+			height="<?php echo $height; ?>"
+			scrolling="<?php echo $scroll; ?>"
+			frameborder="<?php echo $frameborder; ?>"
+			class="wrapper"></iframe>
+</noscript>