berserker
/
microblog
2
0
Fork 1
Code Issues 12 Pull Requests Projects Releases Wiki Activity

Remove redundant ready() wrapper (#26533)

Browse Source
local
Christian Schmidt 10 months ago committed by GitHub
parent 1cb978bcc3
commit bb51c0676d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 234 additions and 237 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 471
      app/javascript/packs/public.jsx

471
app/javascript/packs/public.jsx
Unescape View File

@ -65,287 +65,284 @@ function loaded() {
}; };
}; };
ready(() => { const locale = document.documentElement.lang;
const locale = document.documentElement.lang;
const dateTimeFormat = new Intl.DateTimeFormat(locale, {
const dateTimeFormat = new Intl.DateTimeFormat(locale, { year: 'numeric',
year: 'numeric', month: 'long',
month: 'long', day: 'numeric',
day: 'numeric', hour: 'numeric',
hour: 'numeric', minute: '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,
});
const formatMessage = ({ id, defaultMessage }, values) => {
const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale);
return messageFormat.format(values);
};
[].forEach.call(document.querySelectorAll('.emojify'), (content) => { const dateFormat = new Intl.DateTimeFormat(locale, {
content.innerHTML = emojify(content.innerHTML); year: 'numeric',
}); month: 'short',
day: 'numeric',
timeFormat: false,
});
[].forEach.call(document.querySelectorAll('time.formatted'), (content) => { const timeFormat = new Intl.DateTimeFormat(locale, {
const datetime = new Date(content.getAttribute('datetime')); timeStyle: 'short',
const formattedDate = dateTimeFormat.format(datetime); hour12: false,
});
content.title = formattedDate; const formatMessage = ({ id, defaultMessage }, values) => {
content.textContent = formattedDate; const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale);
}); return messageFormat.format(values);
};
const isToday = date => { [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
const today = new Date(); content.innerHTML = emojify(content.innerHTML);
});
return date.getDate() === today.getDate() && [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
date.getMonth() === today.getMonth() && const datetime = new Date(content.getAttribute('datetime'));
date.getFullYear() === today.getFullYear(); const formattedDate = dateTimeFormat.format(datetime);
};
const todayFormat = new IntlMessageFormat(localeData['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();
const timeGiven = content.getAttribute('datetime').includes('T');
content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime);
content.textContent = timeAgoString({
formatMessage,
formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
}, datetime, now, now.getFullYear(), timeGiven);
});
const reactComponents = document.querySelectorAll('[data-component]');
if (reactComponents.length > 0) {
import(/* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container')
.then(({ default: MediaContainer }) => {
[].forEach.call(reactComponents, (component) => {
[].forEach.call(component.children, (child) => {
component.removeChild(child);
});
});
const content = document.createElement('div'); content.title = formattedDate;
content.textContent = formattedDate;
});
const root = createRoot(content); const isToday = date => {
root.render(<MediaContainer locale={locale} components={reactComponents} />); const today = new Date();
document.body.appendChild(content);
scrollToDetailedStatus(); return date.getDate() === today.getDate() &&
}) date.getMonth() === today.getMonth() &&
.catch(error => { date.getFullYear() === today.getFullYear();
console.error(error); };
scrollToDetailedStatus(); const todayFormat = new IntlMessageFormat(localeData['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 { } else {
scrollToDetailedStatus(); formattedContent = dateFormat.format(datetime);
} }
delegate(document, '#user_account_attributes_username', 'input', throttle(() => { content.title = formattedContent;
const username = document.getElementById('user_account_attributes_username'); content.textContent = formattedContent;
});
[].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
const datetime = new Date(content.getAttribute('datetime'));
const now = new Date();
if (username.value && username.value.length > 0) { const timeGiven = content.getAttribute('datetime').includes('T');
axios.get('/api/v1/accounts/lookup', { params: { acct: username.value } }).then(() => { content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime);
username.setCustomValidity(formatMessage(messages.usernameTaken)); content.textContent = timeAgoString({
}).catch(() => { formatMessage,
username.setCustomValidity(''); formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
}, datetime, now, now.getFullYear(), timeGiven);
});
const reactComponents = document.querySelectorAll('[data-component]');
if (reactComponents.length > 0) {
import(/* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container')
.then(({ default: MediaContainer }) => {
[].forEach.call(reactComponents, (component) => {
[].forEach.call(component.children, (child) => {
component.removeChild(child);
});
}); });
} else {
const content = document.createElement('div');
const root = createRoot(content);
root.render(<MediaContainer locale={locale} components={reactComponents} />);
document.body.appendChild(content);
scrollToDetailedStatus();
})
.catch(error => {
console.error(error);
scrollToDetailedStatus();
});
} else {
scrollToDetailedStatus();
}
delegate(document, '#user_account_attributes_username', 'input', throttle(() => {
const username = document.getElementById('user_account_attributes_username');
if (username.value && username.value.length > 0) {
axios.get('/api/v1/accounts/lookup', { params: { acct: username.value } }).then(() => {
username.setCustomValidity(formatMessage(messages.usernameTaken));
}).catch(() => {
username.setCustomValidity(''); username.setCustomValidity('');
} });
}, 500, { leading: false, trailing: true })); } else {
username.setCustomValidity('');
delegate(document, '#user_password,#user_password_confirmation', 'input', () => { }
const password = document.getElementById('user_password'); }, 500, { leading: false, trailing: true }));
const confirmation = document.getElementById('user_password_confirmation');
if (!confirmation) return; delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
const password = document.getElementById('user_password');
if (confirmation.value && confirmation.value.length > password.maxLength) { const confirmation = document.getElementById('user_password_confirmation');
confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength)); if (!confirmation) return;
} else if (password.value && password.value !== confirmation.value) {
confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch));
} 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(localeData['status.show_more'] || 'Show more', locale)).format();
} else {
statusEl.dataset.spoiler = 'expanded';
this.textContent = (new IntlMessageFormat(localeData['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') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
});
});
delegate(document, '#account_display_name', 'input', ({ target }) => { if (confirmation.value && confirmation.value.length > password.maxLength) {
const name = document.querySelector('.card .display-name strong'); confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength));
if (name) { } else if (password.value && password.value !== confirmation.value) {
if (target.value) { confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch));
name.innerHTML = emojify(escapeTextContentForBrowser(target.value)); } else {
} else { confirmation.setCustomValidity('');
name.textContent = target.dataset.default;
}
} }
}); });
delegate(document, '#account_avatar', 'change', ({ target }) => { delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
const avatar = document.querySelector('.card .avatar img'); delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
const [file] = target.files || [];
const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
avatar.src = url; 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(localeData['status.show_more'] || 'Show more', locale)).format();
} else {
statusEl.dataset.spoiler = 'expanded';
this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format();
}
return false;
}); });
const getProfileAvatarAnimationHandler = (swapTo) => { [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => {
//animate avatar gifs on the profile page when moused over const statusEl = spoilerLink.parentNode.parentNode;
return ({ target }) => { const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
const swapSrc = target.getAttribute(swapTo); spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
//only change the img source if autoplay is off and the image src is actually different });
if(target.getAttribute('data-autoplay') !== 'true' && target.src !== swapSrc) { }
target.src = swapSrc;
} delegate(document, '#account_display_name', 'input', ({ target }) => {
}; const name = document.querySelector('.card .display-name strong');
if (name) {
if (target.value) {
name.innerHTML = emojify(escapeTextContentForBrowser(target.value));
} else {
name.textContent = target.dataset.default;
}
}
});
delegate(document, '#account_avatar', 'change', ({ target }) => {
const avatar = document.querySelector('.card .avatar img');
const [file] = target.files || [];
const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
avatar.src = url;
});
const getProfileAvatarAnimationHandler = (swapTo) => {
//animate avatar gifs on the profile page when moused over
return ({ target }) => {
const swapSrc = target.getAttribute(swapTo);
//only change the img source if autoplay is off and the image src is actually different
if(target.getAttribute('data-autoplay') !== 'true' && target.src !== swapSrc) {
target.src = swapSrc;
}
}; };
};
delegate(document, 'img#profile_page_avatar', 'mouseover', getProfileAvatarAnimationHandler('data-original')); delegate(document, 'img#profile_page_avatar', 'mouseover', getProfileAvatarAnimationHandler('data-original'));
delegate(document, 'img#profile_page_avatar', 'mouseout', getProfileAvatarAnimationHandler('data-static')); delegate(document, 'img#profile_page_avatar', 'mouseout', getProfileAvatarAnimationHandler('data-static'));
delegate(document, '#account_header', 'change', ({ target }) => { delegate(document, '#account_header', 'change', ({ target }) => {
const header = document.querySelector('.card .card__img img'); const header = document.querySelector('.card .card__img img');
const [file] = target.files || []; const [file] = target.files || [];
const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc; const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
header.src = url; header.src = url;
}); });
delegate(document, '#account_locked', 'change', ({ target }) => { delegate(document, '#account_locked', 'change', ({ target }) => {
const lock = document.querySelector('.card .display-name i'); const lock = document.querySelector('.card .display-name i');
if (lock) { if (lock) {
if (target.checked) { if (target.checked) {
delete lock.dataset.hidden; delete lock.dataset.hidden;
} else { } else {
lock.dataset.hidden = 'true'; lock.dataset.hidden = 'true';
}
} }
}); }
});
delegate(document, '.input-copy input', 'click', ({ target }) => { delegate(document, '.input-copy input', 'click', ({ target }) => {
target.focus(); target.focus();
target.select(); target.select();
target.setSelectionRange(0, target.value.length); target.setSelectionRange(0, target.value.length);
}); });
delegate(document, '.input-copy button', 'click', ({ target }) => { delegate(document, '.input-copy button', 'click', ({ target }) => {
const input = target.parentNode.querySelector('.input-copy__wrapper input'); const input = target.parentNode.querySelector('.input-copy__wrapper input');
const oldReadOnly = input.readonly; const oldReadOnly = input.readonly;
input.readonly = false; input.readonly = false;
input.focus(); input.focus();
input.select(); input.select();
input.setSelectionRange(0, input.value.length); input.setSelectionRange(0, input.value.length);
try { try {
if (document.execCommand('copy')) { if (document.execCommand('copy')) {
input.blur(); input.blur();
target.parentNode.classList.add('copied'); target.parentNode.classList.add('copied');
setTimeout(() => { setTimeout(() => {
target.parentNode.classList.remove('copied'); target.parentNode.classList.remove('copied');
}, 700); }, 700);
}
} catch (err) {
console.error(err);
} }
} catch (err) {
console.error(err);
}
input.readonly = oldReadOnly; input.readonly = oldReadOnly;
}); });
const toggleSidebar = () => { const toggleSidebar = () => {
const sidebar = document.querySelector('.sidebar ul'); const sidebar = document.querySelector('.sidebar ul');
const toggleButton = document.querySelector('.sidebar__toggle__icon'); const toggleButton = document.querySelector('.sidebar__toggle__icon');
if (sidebar.classList.contains('visible')) { if (sidebar.classList.contains('visible')) {
document.body.style.overflow = null; document.body.style.overflow = null;
toggleButton.setAttribute('aria-expanded', 'false'); toggleButton.setAttribute('aria-expanded', 'false');
} else { } else {
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
toggleButton.setAttribute('aria-expanded', 'true'); toggleButton.setAttribute('aria-expanded', 'true');
} }
toggleButton.classList.toggle('active'); toggleButton.classList.toggle('active');
sidebar.classList.toggle('visible'); sidebar.classList.toggle('visible');
}; };
delegate(document, '.sidebar__toggle__icon', 'click', () => {
toggleSidebar();
});
delegate(document, '.sidebar__toggle__icon', 'click', () => { delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
toggleSidebar(); toggleSidebar();
}); }
});
delegate(document, '.sidebar__toggle__icon', 'keydown', e => { // Empty the honeypot fields in JS in case something like an extension
if (e.key === ' ' || e.key === 'Enter') { // automatically filled them.
e.preventDefault(); delegate(document, '#registration_new_user,#new_user', 'submit', () => {
toggleSidebar(); ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => {
const field = document.getElementById(id);
if (field) {
field.value = '';
} }
}); });
});
// 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 = '';
}
});
});
}
function main() { function main() {
ready(loaded); ready(loaded);

Write Preview
Loading…
Cancel
Save