Skip to content

Commit

Permalink
[4.0] BS5 JS (#31990)
Browse files Browse the repository at this point in the history
  • Loading branch information
dgrammatiko authored Jan 23, 2021
1 parent 6e8f744 commit 88c498b
Show file tree
Hide file tree
Showing 43 changed files with 1,593 additions and 750 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@

HTMLHelper::_('behavior.multiselect');

// Just for the tests :(
HTMLHelper::_('jquery.framework');

$app = Factory::getApplication();
$user = Factory::getUser();
$userId = $user->get('id');
Expand Down
3 changes: 3 additions & 0 deletions administrator/components/com_fields/tmpl/fields/default.php
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@

HTMLHelper::_('behavior.multiselect');

// Just for the tests :(
HTMLHelper::_('jquery.framework');

$app = Factory::getApplication();
$user = Factory::getUser();
$userId = $user->get('id');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $this->document->getWebAssetManager();
$wa->useScript('core')
->useScript('jquery')
->useScript('com_joomlaupdate.encryption')
->useScript('com_joomlaupdate.update')
->useScript('com_joomlaupdate.admin-update');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $this->document->getWebAssetManager();
$wa->useScript('core')
->useScript('jquery')
->useScript('form.validate')
->useScript('keepalive')
->useScript('field.passwordview');
Expand Down
2 changes: 2 additions & 0 deletions administrator/components/com_mails/tmpl/templates/default.php
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;

HTMLHelper::_('bootstrap.dropdown');

$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn = $this->escape($this->state->get('list.direction'));
?>
Expand Down
12 changes: 6 additions & 6 deletions administrator/components/com_templates/tmpl/template/default.php
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@
);
?>
<form action="<?php echo Route::_('index.php?option=com_templates&task=template.copy&id=' . $input->getInt('id') . '&file=' . $this->file); ?>" method="post" name="adminForm" id="adminForm">
<?php echo LayoutHelper::render('joomla.modal.main', $copyModalData); ?>
<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $copyModalData); ?>
<?php echo HTMLHelper::_('form.token'); ?>
</form>
<?php if ($this->type != 'home') : ?>
Expand All @@ -391,7 +391,7 @@
);
?>
<form action="<?php echo Route::_('index.php?option=com_templates&task=template.renameFile&id=' . $input->getInt('id') . '&file=' . $this->file); ?>" method="post">
<?php echo LayoutHelper::render('joomla.modal.main', $renameModalData); ?>
<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $renameModalData); ?>
<?php echo HTMLHelper::_('form.token'); ?>
</form>
<?php endif; ?>
Expand All @@ -406,7 +406,7 @@
'body' => $this->loadTemplate('modal_delete_body')
);
?>
<?php echo LayoutHelper::render('joomla.modal.main', $deleteModalData); ?>
<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $deleteModalData); ?>
<?php endif; ?>
<?php // File Modal
$fileModalData = array(
Expand All @@ -422,7 +422,7 @@
'body' => $this->loadTemplate('modal_file_body')
);
?>
<?php echo LayoutHelper::render('joomla.modal.main', $fileModalData); ?>
<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $fileModalData); ?>
<?php // Folder Modal
$folderModalData = array(
'selector' => 'folderModal',
Expand All @@ -437,7 +437,7 @@
'body' => $this->loadTemplate('modal_folder_body')
);
?>
<?php echo LayoutHelper::render('joomla.modal.main', $folderModalData); ?>
<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $folderModalData); ?>
<?php if ($this->type == 'image') : ?>
<?php // Resize Modal
$resizeModalData = array(
Expand All @@ -450,7 +450,7 @@
);
?>
<form action="<?php echo Route::_('index.php?option=com_templates&task=template.resizeImage&id=' . $input->getInt('id') . '&file=' . $this->file); ?>" method="post">
<?php echo LayoutHelper::render('joomla.modal.main', $resizeModalData); ?>
<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $resizeModalData); ?>
<?php echo HTMLHelper::_('form.token'); ?>
</form>
<?php endif; ?>
155 changes: 155 additions & 0 deletions build/build-modules-js/build-bootstrap-js.es6.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
const {
readdir, readFile, rename, writeFile, rm,
} = require('fs').promises;
const { resolve } = require('path');
const { minify } = require('terser');
const rimraf = require('rimraf');
const rollup = require('rollup');
const { nodeResolve } = require('@rollup/plugin-node-resolve');
const replace = require('@rollup/plugin-replace');
const { babel } = require('@rollup/plugin-babel');

const tasks = [];
const inputFolder = 'build/media_source/vendor/bootstrap/js';
const outputFolder = 'media/vendor/bootstrap/js';

const createMinified = async (file) => {
const initial = await readFile(resolve(outputFolder, file), { encoding: 'utf8' });
const mini = await minify(initial);
await rename(resolve(outputFolder, file), resolve(outputFolder, `${file.split('-')[0]}.es6.js`));
await writeFile(resolve(outputFolder, `${file.split('-')[0]}.es6.min.js`), mini.code, { encoding: 'utf8' });
};

const build = async () => {
// eslint-disable-next-line no-console
console.log('Building ES6 Components...');

const bundle = await rollup.rollup({
input: resolve(inputFolder, 'index.es6.js'),
plugins: [
nodeResolve(),
replace({
'process.env.NODE_ENV': '\'production\'',
}),
],
external: [
'./base-component.js',
'./dom/data.js',
'./event-handler.js',
'./dom/manipulator.js',
'./selector-engine.js',
'./util/index.js',
],
manualChunks: {
alert: ['build/media_source/vendor/bootstrap/js/alert.es6.js'],
button: ['build/media_source/vendor/bootstrap/js/button.es6.js'],
carousel: ['build/media_source/vendor/bootstrap/js/carousel.es6.js'],
collapse: ['build/media_source/vendor/bootstrap/js/collapse.es6.js'],
dropdown: ['build/media_source/vendor/bootstrap/js/dropdown.es6.js'],
modal: ['build/media_source/vendor/bootstrap/js/modal.es6.js'],
popover: ['build/media_source/vendor/bootstrap/js/popover.es6.js'],
scrollspy: ['build/media_source/vendor/bootstrap/js/scrollspy.es6.js'],
tab: ['build/media_source/vendor/bootstrap/js/tab.es6.js'],
toast: ['build/media_source/vendor/bootstrap/js/toast.es6.js'],
popper: ['@popperjs/core'],
dom: [
'node_modules/bootstrap/js/src/base-component.js',
'node_modules/bootstrap/js/src/dom/data.js',
'node_modules/bootstrap/js/src/dom/event-handler.js',
'node_modules/bootstrap/js/src/dom/manipulator.js',
'node_modules/bootstrap/js/src/dom/selector-engine.js',
'node_modules/bootstrap/js/src/util/index.js',
],
},
});

await bundle.write({
format: 'es',
sourcemap: false,
dir: outputFolder,
});
};

const buildLegacy = async () => {
// eslint-disable-next-line no-console
console.log('Building Legacy...');

const bundle = await rollup.rollup({
input: resolve(inputFolder, 'index.es6.js'),
plugins: [
nodeResolve(),
replace({
'process.env.NODE_ENV': '\'production\'',
}),
babel({
exclude: 'node_modules/core-js/**',
babelHelpers: 'bundled',
babelrc: false,
presets: [
[
'@babel/preset-env',
{
corejs: '3.8',
useBuiltIns: 'usage',
targets: {
chrome: '58',
ie: '11',
},
loose: true,
bugfixes: true,
modules: false,
},
],
],
}),
],
external: [],
});

await bundle.write({
format: 'iife',
sourcemap: false,
name: 'Bootstrap',
file: resolve(outputFolder, 'bootstrap.es5.js'),
});
};

(async () => {
rimraf.sync(resolve(outputFolder));

try {
await build(resolve(inputFolder, 'index.es6.js'));
await rm(resolve(outputFolder, 'index.es6.js'));
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
process.exit(1);
}

(await readdir(outputFolder)).forEach((file) => {
if (!(file.startsWith('dom-') || file.startsWith('popper-'))) {
tasks.push(createMinified(file));
}
});

await Promise.all(tasks).catch((er) => {
// eslint-disable-next-line no-console
console.log(er);
process.exit(1);
});
// eslint-disable-next-line no-console
console.log('ES6 components ready ✅');

try {
await buildLegacy(inputFolder, 'index.es6.js');
const es5File = await readFile(resolve(outputFolder, 'bootstrap.es5.js'), { encoding: 'utf8' });
const mini = await minify(es5File);
await writeFile(resolve(outputFolder, 'bootstrap.es5.min.js'), mini.code, { encoding: 'utf8' });
// eslint-disable-next-line no-console
console.log('Legacy done! ✅');
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
process.exit(1);
}
})();
4 changes: 4 additions & 0 deletions build/build-modules-js/compilejs.es6.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const Fs = require('fs');
const { sep } = require('path');
const Recurs = require('recursive-readdir');
const HandleFile = require('./javascript/handle-file.es6.js');

Expand Down Expand Up @@ -45,6 +46,9 @@ module.exports.compileJS = (options, path) => {
(files) => {
files.forEach(
(file) => {
if (file.includes(`build${sep}media_source${sep}vendor${sep}bootstrap${sep}js`)) {
return;
}
HandleFile.run(file);
},
(error) => {
Expand Down
23 changes: 0 additions & 23 deletions build/build-modules-js/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,6 @@
},
"bootstrap": {
"name": "bootstrap",
"js": {
"dist/js/bootstrap.js": "js/bootstrap.js",
"dist/js/bootstrap.min.js": "js/bootstrap.min.js",
"dist/js/bootstrap.bundle.js": "js/bootstrap.bundle.js",
"dist/js/bootstrap.bundle.min.js": "js/bootstrap.bundle.min.js",
"dist/js/bootstrap.bundle.min.js.map": "js/bootstrap.bundle.min.js.map"
},
"css": {
"dist/css/bootstrap.css": "css/bootstrap.css",
"dist/css/bootstrap.min.css": "css/bootstrap.min.css",
Expand Down Expand Up @@ -76,22 +69,6 @@
"dependencies": [
"bootstrap.css"
]
},
{
"name": "bootstrap.js",
"type": "script",
"uri": "bootstrap.min.js",
"dependencies": [
"jquery"
]
},
{
"name": "bootstrap.js.bundle",
"type": "script",
"uri": "bootstrap.bundle.min.js",
"dependencies": [
"jquery"
]
}
],
"dependencies": [],
Expand Down
6 changes: 4 additions & 2 deletions build/media_source/com_joomlaupdate/joomla.asset.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"type": "script",
"uri": "com_joomlaupdate/admin-update-default.min.js",
"dependencies": [
"core"
"core",
"jquery"
],
"attributes": {
"defer": true
Expand All @@ -21,7 +22,8 @@
"type": "script",
"uri": "com_joomlaupdate/default.min.js",
"dependencies": [
"core"
"core",
"jquery"
],
"attributes": {
"defer": true
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Joomla.toggleAllNextElements = (element, className) => {
'use strict';

document.addEventListener('DOMContentLoaded', () => {
const dropDownBtn = document.getElementById('toolbar-dropdown-status-group');
const dropDownBtn = document.getElementById('toolbar-status-group');
const transitions = [].slice.call(dropDownBtn.querySelectorAll('.button-transition'));
const headline = dropDownBtn.querySelector('.button-transition-headline');
const separator = dropDownBtn.querySelector('.button-transition-separator');
Expand Down
Loading

0 comments on commit 88c498b

Please sign in to comment.