diff --git a/build/build-modules-js/compilecejs.js b/build/build-modules-js/compilecejs.js index 23f0d5cfd2157..16c6846a43816 100644 --- a/build/build-modules-js/compilecejs.js +++ b/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); } }); }; diff --git a/build/build-modules-js/settings.json b/build/build-modules-js/settings.json index 9d1e9b8b9a89e..fee8995369eb1 100644 --- a/build/build-modules-js/settings.json +++ b/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" diff --git a/build/media/webcomponents/js/iframe/iframe.js b/build/media/webcomponents/js/iframe/iframe.js new file mode 100644 index 0000000000000..fc9e6667944b4 --- /dev/null +++ b/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); +})(); diff --git a/components/com_wrapper/View/Wrapper/HtmlView.php b/components/com_wrapper/View/Wrapper/HtmlView.php index 32b3a6313bccd..674a1a3e3f0b0 100644 --- a/components/com_wrapper/View/Wrapper/HtmlView.php +++ b/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', ''); diff --git a/components/com_wrapper/tmpl/wrapper/default.php b/components/com_wrapper/tmpl/wrapper/default.php index 8162af63d7fd8..017d0126525f6 100644 --- a/components/com_wrapper/tmpl/wrapper/default.php +++ b/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]); ?> -
+
params->get('show_page_heading')) : ?>
-

- escape($this->params->get('page_heading'))) : ?> - escape($this->params->get('page_heading')); ?> - - escape($this->params->get('page_title')); ?> - -

+

- + + +
diff --git a/modules/mod_wrapper/Helper/WrapperHelper.php b/modules/mod_wrapper/Helper/WrapperHelper.php index f1b7be56c4dcf..113a902239a8e 100644 --- a/modules/mod_wrapper/Helper/WrapperHelper.php +++ b/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); diff --git a/modules/mod_wrapper/mod_wrapper.php b/modules/mod_wrapper/mod_wrapper.php index 4e49271d6ca4b..e77b08dad34ad 100644 --- a/modules/mod_wrapper/mod_wrapper.php +++ b/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')); diff --git a/modules/mod_wrapper/tmpl/default.php b/modules/mod_wrapper/tmpl/default.php index 0669bc89a1ba6..64b47a06b069c 100644 --- a/modules/mod_wrapper/tmpl/default.php +++ b/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]); ?> - + + +