From 81ef21a0c802f1d905f37a2a818544a8b400793c Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Sat, 25 Feb 2023 14:34:32 +0100 Subject: [Glitch] Rename JSX files with proper `.jsx` extension Port 44a7d87cb1f5df953b6c14c16c59e2e4ead1bcb9 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/packs/public.jsx | 224 ++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 app/javascript/flavours/glitch/packs/public.jsx (limited to 'app/javascript/flavours/glitch/packs/public.jsx') diff --git a/app/javascript/flavours/glitch/packs/public.jsx b/app/javascript/flavours/glitch/packs/public.jsx new file mode 100644 index 000000000..b256fdbd5 --- /dev/null +++ b/app/javascript/flavours/glitch/packs/public.jsx @@ -0,0 +1,224 @@ +import 'packs/public-path'; +import loadPolyfills from 'flavours/glitch/load_polyfills'; +import ready from 'flavours/glitch/ready'; +import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions'; + +function main() { + const IntlMessageFormat = require('intl-messageformat').default; + const { timeAgoString } = require('flavours/glitch/components/relative_timestamp'); + const { delegate } = require('@rails/ujs'); + const emojify = require('flavours/glitch/features/emoji/emoji').default; + const { getLocale } = require('locales'); + const { messages } = getLocale(); + const React = require('react'); + const ReactDOM = require('react-dom'); + const { createBrowserHistory } = require('history'); + + const scrollToDetailedStatus = () => { + const history = createBrowserHistory(); + const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status'); + const location = history.location; + + if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) { + detailedStatuses[0].scrollIntoView(); + history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true }); + } + }; + + const getEmojiAnimationHandler = (swapTo) => { + return ({ target }) => { + target.src = target.getAttribute(swapTo); + }; + }; + + ready(() => { + const locale = document.documentElement.lang; + + const dateTimeFormat = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + }); + + const dateFormat = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: 'short', + day: 'numeric', + timeFormat: false, + }); + + const timeFormat = new Intl.DateTimeFormat(locale, { + timeStyle: 'short', + hour12: false, + }); + + [].forEach.call(document.querySelectorAll('.emojify'), (content) => { + content.innerHTML = emojify(content.innerHTML); + }); + + [].forEach.call(document.querySelectorAll('time.formatted'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + const formattedDate = dateTimeFormat.format(datetime); + + content.title = formattedDate; + content.textContent = formattedDate; + }); + + const isToday = date => { + const today = new Date(); + + return date.getDate() === today.getDate() && + date.getMonth() === today.getMonth() && + date.getFullYear() === today.getFullYear(); + }; + const todayFormat = new IntlMessageFormat(messages['relative_format.today'] || 'Today at {time}', locale); + + [].forEach.call(document.querySelectorAll('time.relative-formatted'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + + let formattedContent; + + if (isToday(datetime)) { + const formattedTime = timeFormat.format(datetime); + + formattedContent = todayFormat.format({ time: formattedTime }); + } else { + formattedContent = dateFormat.format(datetime); + } + + content.title = formattedContent; + content.textContent = formattedContent; + }); + + [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + const now = new Date(); + + content.title = dateTimeFormat.format(datetime); + content.textContent = timeAgoString({ + formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values), + formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date), + }, datetime, now, now.getFullYear(), content.getAttribute('datetime').includes('T')); + }); + + const reactComponents = document.querySelectorAll('[data-component]'); + if (reactComponents.length > 0) { + import(/* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container') + .then(({ default: MediaContainer }) => { + [].forEach.call(reactComponents, (component) => { + [].forEach.call(component.children, (child) => { + component.removeChild(child); + }); + }); + + const content = document.createElement('div'); + + ReactDOM.render(, content); + document.body.appendChild(content); + scrollToDetailedStatus(); + }) + .catch(error => { + console.error(error); + scrollToDetailedStatus(); + }); + } else { + scrollToDetailedStatus(); + } + + delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => { + const password = document.getElementById('registration_user_password'); + const confirmation = document.getElementById('registration_user_password_confirmation'); + if (confirmation.value && confirmation.value.length > password.maxLength) { + confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format()); + } else if (password.value && password.value !== confirmation.value) { + confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format()); + } else { + confirmation.setCustomValidity(''); + } + }); + + delegate(document, '#user_password,#user_password_confirmation', 'input', () => { + const password = document.getElementById('user_password'); + const confirmation = document.getElementById('user_password_confirmation'); + if (!confirmation) return; + + if (confirmation.value && confirmation.value.length > password.maxLength) { + confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format()); + } else if (password.value && password.value !== confirmation.value) { + confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format()); + } else { + confirmation.setCustomValidity(''); + } + }); + + delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original')); + delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static')); + + delegate(document, '.status__content__spoiler-link', 'click', function() { + const statusEl = this.parentNode.parentNode; + + if (statusEl.dataset.spoiler === 'expanded') { + statusEl.dataset.spoiler = 'folded'; + this.textContent = (new IntlMessageFormat(messages['status.show_more'] || 'Show more', locale)).format(); + } else { + statusEl.dataset.spoiler = 'expanded'; + this.textContent = (new IntlMessageFormat(messages['status.show_less'] || 'Show less', locale)).format(); + } + + return false; + }); + + [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => { + const statusEl = spoilerLink.parentNode.parentNode; + const message = (statusEl.dataset.spoiler === 'expanded') ? (messages['status.show_less'] || 'Show less') : (messages['status.show_more'] || 'Show more'); + spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format(); + }); + }); + + const toggleSidebar = () => { + const sidebar = document.querySelector('.sidebar ul'); + const toggleButton = document.querySelector('.sidebar__toggle__icon'); + + if (sidebar.classList.contains('visible')) { + document.body.style.overflow = null; + toggleButton.setAttribute('aria-expanded', false); + } else { + document.body.style.overflow = 'hidden'; + toggleButton.setAttribute('aria-expanded', true); + } + + toggleButton.classList.toggle('active'); + sidebar.classList.toggle('visible'); + }; + + delegate(document, '.sidebar__toggle__icon', 'click', () => { + toggleSidebar(); + }); + + delegate(document, '.sidebar__toggle__icon', 'keydown', e => { + if (e.key === ' ' || e.key === 'Enter') { + e.preventDefault(); + toggleSidebar(); + } + }); + + // Empty the honeypot fields in JS in case something like an extension + // automatically filled them. + delegate(document, '#registration_new_user,#new_user', 'submit', () => { + ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => { + const field = document.getElementById(id); + if (field) { + field.value = ''; + } + }); + }); +} + +loadPolyfills() + .then(main) + .then(loadKeyboardExtensions) + .catch(error => { + console.error(error); + }); -- cgit From 0f62451424682938ed8bacd7e053279fe6d65274 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Tue, 4 Apr 2023 10:33:33 -0400 Subject: [Glitch] HTML string attributes set as booleans Port a425915ce7d1148e9505c87889936c4c497061dd to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/features/emoji/emoji.js | 4 ++-- app/javascript/flavours/glitch/packs/public.jsx | 4 ++-- app/javascript/flavours/glitch/packs/settings.js | 5 ++--- 3 files changed, 6 insertions(+), 7 deletions(-) (limited to 'app/javascript/flavours/glitch/packs/public.jsx') diff --git a/app/javascript/flavours/glitch/features/emoji/emoji.js b/app/javascript/flavours/glitch/features/emoji/emoji.js index 4f33200b6..24c5814c4 100644 --- a/app/javascript/flavours/glitch/features/emoji/emoji.js +++ b/app/javascript/flavours/glitch/features/emoji/emoji.js @@ -50,7 +50,7 @@ const emojifyTextNode = (node, customEmojis) => { if (shortname in customEmojis) { const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url; replacement = document.createElement('img'); - replacement.setAttribute('draggable', false); + replacement.setAttribute('draggable', 'false'); replacement.setAttribute('class', 'emojione custom-emoji'); replacement.setAttribute('alt', shortname); replacement.setAttribute('title', shortname); @@ -65,7 +65,7 @@ const emojifyTextNode = (node, customEmojis) => { const { filename, shortCode } = unicodeMapping[match]; const title = shortCode ? `:${shortCode}:` : ''; replacement = document.createElement('img'); - replacement.setAttribute('draggable', false); + replacement.setAttribute('draggable', 'false'); replacement.setAttribute('class', 'emojione'); replacement.setAttribute('alt', match); replacement.setAttribute('title', title); diff --git a/app/javascript/flavours/glitch/packs/public.jsx b/app/javascript/flavours/glitch/packs/public.jsx index b256fdbd5..cc4c8b2c3 100644 --- a/app/javascript/flavours/glitch/packs/public.jsx +++ b/app/javascript/flavours/glitch/packs/public.jsx @@ -183,10 +183,10 @@ function main() { if (sidebar.classList.contains('visible')) { document.body.style.overflow = null; - toggleButton.setAttribute('aria-expanded', false); + toggleButton.setAttribute('aria-expanded', 'false'); } else { document.body.style.overflow = 'hidden'; - toggleButton.setAttribute('aria-expanded', true); + toggleButton.setAttribute('aria-expanded', 'true'); } toggleButton.classList.toggle('active'); diff --git a/app/javascript/flavours/glitch/packs/settings.js b/app/javascript/flavours/glitch/packs/settings.js index 31c88b2b5..55a8ae1c6 100644 --- a/app/javascript/flavours/glitch/packs/settings.js +++ b/app/javascript/flavours/glitch/packs/settings.js @@ -1,6 +1,5 @@ import 'packs/public-path'; import loadPolyfills from 'flavours/glitch/load_polyfills'; -import ready from 'flavours/glitch/ready'; import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions'; import 'cocoon-js-vanilla'; @@ -13,10 +12,10 @@ function main() { if (sidebar.classList.contains('visible')) { document.body.style.overflow = null; - toggleButton.setAttribute('aria-expanded', false); + toggleButton.setAttribute('aria-expanded', 'false'); } else { document.body.style.overflow = 'hidden'; - toggleButton.setAttribute('aria-expanded', true); + toggleButton.setAttribute('aria-expanded', 'true'); } toggleButton.classList.toggle('active'); -- cgit From 7b04c2fb71a32f135695071809d80bf1f46e58a9 Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Fri, 7 Apr 2023 16:19:43 +0200 Subject: [Glitch] Fix tooltip for dates without time Port aa136cf2fa177af1fea59279cb8bab0b2a042b2b to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/packs/public.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/packs/public.jsx') diff --git a/app/javascript/flavours/glitch/packs/public.jsx b/app/javascript/flavours/glitch/packs/public.jsx index cc4c8b2c3..335a0710d 100644 --- a/app/javascript/flavours/glitch/packs/public.jsx +++ b/app/javascript/flavours/glitch/packs/public.jsx @@ -96,11 +96,12 @@ function main() { const datetime = new Date(content.getAttribute('datetime')); const now = new Date(); - content.title = dateTimeFormat.format(datetime); + const timeGiven = content.getAttribute('datetime').includes('T'); + content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime); content.textContent = timeAgoString({ formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values), formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date), - }, datetime, now, now.getFullYear(), content.getAttribute('datetime').includes('T')); + }, datetime, now, now.getFullYear(), timeGiven); }); const reactComponents = document.querySelectorAll('[data-component]'); -- cgit