feat: #8734, jquery-ui, jquery-form, timeago (#8748)

* feat: #8734, jquery-ui, jquery-form, timeago

get rid of forum/footer.js move that code to app.js & wait for app to load before calling ajaxify.end
make sockets.js a requirejs module
move jquery-ui to node_modules and load via requirejs
move jquery-form to node_modules and load via requirejs
move timeago to node_modules and load via requirejs
only include the css for needed jquery-ui widgets

* feat: keep socket/io global for backwards compat

* refactor: move socket listener to chat
This commit is contained in:
Barış Soner Uşaklı
2020-10-10 21:47:27 -04:00
committed by GitHub
parent 666064bf46
commit fda2aedfd8
100 changed files with 98 additions and 2702 deletions

View File

@@ -2,11 +2,13 @@
const fs = require('fs');
const path = require('path');
const utils = require('./utils');
const paths = require('./constants').paths;
const Languages = module.exports;
const languagesPath = path.join(__dirname, '../build/public/language');
const files = fs.readdirSync(path.join(__dirname, '../public/vendor/jquery/timeago/locales'));
const files = fs.readdirSync(path.join(paths.nodeModules, '/timeago/locales'));
Languages.timeagoCodes = files.filter(f => f.startsWith('jquery.timeago')).map(f => f.split('.')[2]);
Languages.get = async function (language, namespace) {
@@ -62,4 +64,13 @@ Languages.list = async function () {
return languages;
};
Languages.userTimeagoCode = async function (userLang) {
const languageCodes = await Languages.listCodes();
const timeagoCode = utils.userLangToTimeagoCode(userLang);
if (languageCodes.includes(userLang) && Languages.timeagoCodes.includes(timeagoCode)) {
return timeagoCode;
}
return '';
};
require('./promisify')(Languages);

View File

@@ -24,7 +24,7 @@ var buildImports = {
client: function (source) {
return '@import "./theme";\n' + source + '\n' + [
'@import "font-awesome";',
'@import (inline) "../public/vendor/jquery/css/smoothness/jquery-ui.css";',
'@import "../../public/less/jquery-ui.less";',
'@import (inline) "../public/vendor/jquery/bootstrap-tagsinput/bootstrap-tagsinput.css";',
'@import (inline) "../public/vendor/colorpicker/colorpicker.css";',
'@import (inline) "../node_modules/cropperjs/dist/cropper.css";',
@@ -43,7 +43,7 @@ var buildImports = {
'@import "../public/less/admin/admin";',
'@import "../public/less/generics.less";',
'@import (inline) "../public/vendor/colorpicker/colorpicker.css";',
'@import (inline) "../public/vendor/jquery/css/smoothness/jquery-ui.css";',
'@import "../../public/less/jquery-ui.less";',
'@import (inline) "../public/vendor/jquery/bootstrap-tagsinput/bootstrap-tagsinput.css";',
'@import (inline) "../public/vendor/mdl/material.css";',
].map(function (str) {

View File

@@ -24,17 +24,15 @@ var JS = module.exports;
JS.scripts = {
base: [
'node_modules/promise-polyfill/dist/polyfill.js',
'node_modules/jquery/dist/jquery.js',
'node_modules/socket.io-client/dist/socket.io.js',
'node_modules/requirejs/require.js',
'public/src/require-config.js',
'node_modules/jquery/dist/jquery.js',
'node_modules/textcomplete/dist/textcomplete.min.js',
'node_modules/textcomplete.contenteditable/dist/textcomplete.codemirror.min.js',
'public/vendor/jquery/timeago/jquery.timeago.js',
'public/vendor/jquery/js/jquery.form.min.js',
'node_modules/visibilityjs/lib/visibility.core.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
'public/vendor/jquery/bootstrap-tagsinput/bootstrap-tagsinput.min.js',
'node_modules/requirejs/require.js',
'public/src/require-config.js',
'public/vendor/bootbox/bootbox.js',
'public/vendor/bootbox/wrapper.js',
'public/vendor/xregexp/xregexp.js',
@@ -50,7 +48,6 @@ JS.scripts = {
// files listed below are only available client-side, or are bundled in to reduce # of network requests on cold load
rjs: [
'public/src/client/footer.js',
'public/src/client/header/chat.js',
'public/src/client/header/notifications.js',
'public/src/client/infinitescroll.js',
@@ -74,6 +71,7 @@ JS.scripts = {
'public/src/modules/navigator.js',
'public/src/modules/topicSelect.js',
'public/src/modules/topicList.js',
'public/src/modules/categoryFilter.js',
'public/src/modules/categorySelector.js',
'public/src/modules/categorySearch.js',
'public/src/modules/share.js',
@@ -98,7 +96,7 @@ JS.scripts = {
'Chart.js': 'node_modules/chart.js/dist/Chart.min.js',
'mousetrap.js': 'node_modules/mousetrap/mousetrap.min.js',
'cropper.js': 'node_modules/cropperjs/dist/cropper.min.js',
'jqueryui.js': 'public/vendor/jquery/js/jquery-ui.js',
'jquery-ui': 'node_modules/jquery-ui/ui',
'zxcvbn.js': 'node_modules/zxcvbn/dist/zxcvbn.js',
ace: 'node_modules/ace-builds/src-min',
'clipboard.js': 'node_modules/clipboard/dist/clipboard.min.js',
@@ -106,6 +104,8 @@ JS.scripts = {
'tinycon.js': 'node_modules/tinycon/tinycon.js',
'slideout.js': 'node_modules/slideout/dist/slideout.min.js',
'compare-versions.js': 'node_modules/compare-versions/index.js',
timeago: 'node_modules/timeago',
'jquery-form.js': 'node_modules/jquery-form/dist/jquery.form.min.js',
},
};

View File

@@ -68,6 +68,7 @@ async function generateHeader(req, res, data) {
user: user.getUserData(req.uid),
isEmailConfirmSent: (!meta.config.requireEmailConfirmation || req.uid <= 0) ? false : await db.get('uid:' + req.uid + ':confirm:email:sent'),
languageDirection: translator.translate('[[language:dir]]', res.locals.config.userLang),
timeagoCode: languages.userTimeagoCode(res.locals.config.userLang),
browserTitle: translator.translate(controllers.helpers.buildTitle(translator.unescape(data.title))),
navigation: navigation.get(req.uid),
banned: user.bans.isBanned(req.uid),
@@ -95,6 +96,7 @@ async function generateHeader(req, res, data) {
results.user.isGlobalMod = results.isGlobalMod;
results.user.isMod = !!results.isModerator;
results.user.privileges = results.privileges;
results.user.timeagoCode = results.timeagoCode;
results.user[results.user.status] = true;
results.user.email = String(results.user.email);
@@ -189,25 +191,9 @@ middleware.renderFooter = async function renderFooter(req, res, templateValues)
templateValues: templateValues,
});
const results = await utils.promiseParallel({
scripts: plugins.fireHook('filter:scripts.get', []),
timeagoLocale: (async () => {
const languageCodes = await languages.listCodes();
const userLang = res.locals.config.userLang;
const timeagoCode = utils.userLangToTimeagoCode(userLang);
const scripts = await plugins.fireHook('filter:scripts.get', []);
if (languageCodes.includes(userLang) && languages.timeagoCodes.includes(timeagoCode)) {
const pathToLocaleFile = '/vendor/jquery/timeago/locales/jquery.timeago.' + timeagoCode + '.js';
return res.locals.config.assetBaseUrl + pathToLocaleFile;
}
return false;
})(),
});
if (results.timeagoLocale) {
results.scripts.push(results.timeagoLocale);
}
data.templateValues.scripts = results.scripts.map(function (script) {
data.templateValues.scripts = scripts.map(function (script) {
return { src: script };
});

View File

@@ -11,7 +11,7 @@
<script>
window.addEventListener('DOMContentLoaded', function () {
$(document).ready(function () {
ajaxify.coldLoad();
app.coldLoad();
});
});
</script>

View File

@@ -12,13 +12,12 @@
}
function prepareFooter() {
require(['forum/footer']);
<!-- IF useCustomJS -->
{{customJS}}
<!-- ENDIF useCustomJS -->
$(document).ready(function () {
ajaxify.coldLoad();
app.coldLoad();
});
}
</script>