2020-10-13 01:19:35 +02:00
|
|
|
import 'packs/public-path';
|
2023-05-09 14:55:35 +02:00
|
|
|
import { loadPolyfills } from 'flavours/glitch/polyfills';
|
2022-10-11 11:23:59 +02:00
|
|
|
import ready from 'flavours/glitch/ready';
|
2022-10-11 11:39:52 +02:00
|
|
|
import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
|
2023-04-16 02:10:48 +02:00
|
|
|
import axios from 'axios';
|
|
|
|
import { throttle } from 'lodash';
|
|
|
|
import { defineMessages } from 'react-intl';
|
2023-05-09 03:08:47 +02:00
|
|
|
import * as IntlMessageFormat from 'intl-messageformat';
|
|
|
|
import { timeAgoString } from 'flavours/glitch/components/relative_timestamp';
|
|
|
|
import { delegate } from '@rails/ujs';
|
|
|
|
import emojify from 'flavours/glitch/features/emoji/emoji';
|
|
|
|
import { getLocale } from 'locales';
|
|
|
|
import React from 'react';
|
2023-05-22 15:48:01 +02:00
|
|
|
import { createRoot } from 'react-dom/client';
|
2023-05-09 03:08:47 +02:00
|
|
|
import { createBrowserHistory } from 'history';
|
2023-04-16 02:10:48 +02:00
|
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
|
usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' },
|
|
|
|
passwordExceedsLength: { id: 'password_confirmation.exceeds_maxlength', defaultMessage: 'Password confirmation exceeds the maximum password length' },
|
|
|
|
passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' },
|
|
|
|
});
|
2017-09-09 16:23:44 +02:00
|
|
|
|
2017-06-09 15:06:38 +02:00
|
|
|
function main() {
|
2023-04-16 02:10:48 +02:00
|
|
|
const { localeData } = getLocale();
|
2016-12-18 19:47:11 +01:00
|
|
|
|
2019-01-10 20:28:24 +01:00
|
|
|
const scrollToDetailedStatus = () => {
|
2019-09-18 15:41:50 +02:00
|
|
|
const history = createBrowserHistory();
|
2019-01-10 20:28:24 +01:00
|
|
|
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 });
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-07-21 18:10:40 +02:00
|
|
|
const getEmojiAnimationHandler = (swapTo) => {
|
|
|
|
return ({ target }) => {
|
|
|
|
target.src = target.getAttribute(swapTo);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2017-07-18 00:19:02 +02:00
|
|
|
ready(() => {
|
|
|
|
const locale = document.documentElement.lang;
|
2017-09-09 16:23:44 +02:00
|
|
|
|
2017-07-18 00:19:02 +02:00
|
|
|
const dateTimeFormat = new Intl.DateTimeFormat(locale, {
|
|
|
|
year: 'numeric',
|
|
|
|
month: 'long',
|
|
|
|
day: 'numeric',
|
|
|
|
hour: 'numeric',
|
|
|
|
minute: 'numeric',
|
|
|
|
});
|
2017-09-09 16:23:44 +02:00
|
|
|
|
2022-12-15 16:35:25 +01:00
|
|
|
const dateFormat = new Intl.DateTimeFormat(locale, {
|
|
|
|
year: 'numeric',
|
|
|
|
month: 'short',
|
|
|
|
day: 'numeric',
|
|
|
|
timeFormat: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
const timeFormat = new Intl.DateTimeFormat(locale, {
|
|
|
|
timeStyle: 'short',
|
|
|
|
hour12: false,
|
|
|
|
});
|
|
|
|
|
2023-04-16 02:10:48 +02:00
|
|
|
const formatMessage = ({ id, defaultMessage }, values) => {
|
|
|
|
const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale);
|
|
|
|
return messageFormat.format(values);
|
|
|
|
};
|
|
|
|
|
2017-07-18 00:19:02 +02:00
|
|
|
[].forEach.call(document.querySelectorAll('.emojify'), (content) => {
|
|
|
|
content.innerHTML = emojify(content.innerHTML);
|
|
|
|
});
|
2016-12-18 19:47:11 +01:00
|
|
|
|
2017-07-18 00:19:02 +02:00
|
|
|
[].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
|
|
|
|
const datetime = new Date(content.getAttribute('datetime'));
|
|
|
|
const formattedDate = dateTimeFormat.format(datetime);
|
2017-09-09 16:23:44 +02:00
|
|
|
|
2017-07-18 00:19:02 +02:00
|
|
|
content.title = formattedDate;
|
|
|
|
content.textContent = formattedDate;
|
|
|
|
});
|
2017-06-09 15:06:38 +02:00
|
|
|
|
2022-12-15 16:35:25 +01:00
|
|
|
const isToday = date => {
|
|
|
|
const today = new Date();
|
|
|
|
|
|
|
|
return date.getDate() === today.getDate() &&
|
|
|
|
date.getMonth() === today.getMonth() &&
|
|
|
|
date.getFullYear() === today.getFullYear();
|
|
|
|
};
|
2023-04-16 02:10:48 +02:00
|
|
|
const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale);
|
2022-12-15 16:35:25 +01:00
|
|
|
|
|
|
|
[].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;
|
|
|
|
});
|
|
|
|
|
2017-07-18 00:19:02 +02:00
|
|
|
[].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
|
|
|
|
const datetime = new Date(content.getAttribute('datetime'));
|
2019-01-10 12:24:02 +01:00
|
|
|
const now = new Date();
|
2017-09-09 16:23:44 +02:00
|
|
|
|
2023-04-07 16:19:43 +02:00
|
|
|
const timeGiven = content.getAttribute('datetime').includes('T');
|
|
|
|
content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime);
|
2019-01-10 12:24:02 +01:00
|
|
|
content.textContent = timeAgoString({
|
2023-04-16 02:10:48 +02:00
|
|
|
formatMessage,
|
2019-01-10 12:24:02 +01:00
|
|
|
formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
|
2023-04-07 16:19:43 +02:00
|
|
|
}, datetime, now, now.getFullYear(), timeGiven);
|
2017-08-30 10:23:43 +02:00
|
|
|
});
|
2017-06-09 15:06:38 +02:00
|
|
|
|
2018-05-17 16:53:58 +02:00
|
|
|
const reactComponents = document.querySelectorAll('[data-component]');
|
|
|
|
if (reactComponents.length > 0) {
|
|
|
|
import(/* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container')
|
|
|
|
.then(({ default: MediaContainer }) => {
|
2019-01-13 14:42:50 +01:00
|
|
|
[].forEach.call(reactComponents, (component) => {
|
|
|
|
[].forEach.call(component.children, (child) => {
|
|
|
|
component.removeChild(child);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-05-17 16:53:58 +02:00
|
|
|
const content = document.createElement('div');
|
2019-01-10 12:24:02 +01:00
|
|
|
|
2023-05-22 15:48:01 +02:00
|
|
|
const root = createRoot(content);
|
|
|
|
root.render(<MediaContainer locale={locale} components={reactComponents} />);
|
2018-05-17 16:53:58 +02:00
|
|
|
document.body.appendChild(content);
|
2019-01-10 20:28:24 +01:00
|
|
|
scrollToDetailedStatus();
|
2018-05-17 16:53:58 +02:00
|
|
|
})
|
2019-01-10 20:28:24 +01:00
|
|
|
.catch(error => {
|
|
|
|
console.error(error);
|
|
|
|
scrollToDetailedStatus();
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
scrollToDetailedStatus();
|
2018-04-20 15:58:36 +02:00
|
|
|
}
|
2019-01-10 12:24:02 +01:00
|
|
|
|
2023-04-16 02:10:48 +02:00
|
|
|
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('');
|
|
|
|
});
|
2020-08-11 23:09:13 +02:00
|
|
|
} else {
|
2023-04-16 02:10:48 +02:00
|
|
|
username.setCustomValidity('');
|
2020-08-11 23:09:13 +02:00
|
|
|
}
|
2023-04-16 02:10:48 +02:00
|
|
|
}, 500, { leading: false, trailing: true }));
|
2020-08-11 23:09:13 +02:00
|
|
|
|
2020-08-12 12:11:15 +02:00
|
|
|
delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
|
|
|
|
const password = document.getElementById('user_password');
|
|
|
|
const confirmation = document.getElementById('user_password_confirmation');
|
|
|
|
if (!confirmation) return;
|
|
|
|
|
2021-12-05 21:49:50 +01:00
|
|
|
if (confirmation.value && confirmation.value.length > password.maxLength) {
|
2023-04-16 02:10:48 +02:00
|
|
|
confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength));
|
2021-12-05 21:49:50 +01:00
|
|
|
} else if (password.value && password.value !== confirmation.value) {
|
2023-04-16 02:10:48 +02:00
|
|
|
confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch));
|
2020-08-12 12:11:15 +02:00
|
|
|
} else {
|
|
|
|
confirmation.setCustomValidity('');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2019-07-21 18:10:40 +02:00
|
|
|
delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
|
|
|
|
delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
|
2020-04-05 18:32:06 +02:00
|
|
|
|
|
|
|
delegate(document, '.status__content__spoiler-link', 'click', function() {
|
Merge branch 'master' into glitch-soc/merge-upstream
Conflicts:
- `app/controllers/statuses_controller.rb`:
Upstream disabled the embed controller for reblogs.
Not a real conflict, but glitch-soc has an extra line to deal
with its theming system.
Ported upstream changes.
- `app/javascript/packs/public.js`:
Upstream made changes to get rid of most inline CSS, this changes
javascript for public pages, which in glitch are split between
different files. Ported those changes.
- `app/models/status.rb`:
Upstream changed the block check in `Status#permitted_for` to
include domain-block checks. Not a real conflict with glitch-soc,
but our scope is slightly different, as our scope for
unauthenticated access do not include instance-local toots.
Ported upstream changes.
- `app/serializers/rest/instance_serializer.rb`:
Not a real conflict, upstream added a new field to the instance
serializer, the conflict is one line above since we added more of
that.
Ported upstream changes.
- `app/views/settings/profiles/show.html.haml`:
Upstream got rid of most inline CSS and moved hidden elements
to data attributes in the process, in fields were we have
different values.
Ported upstream changes while keeping our glitch-specific
values.
- `app/views/statuses/_simple_status.html.haml`:
Upstream got rid of inline CSS on an HAML line we treat
differently, stripping empty text nodes.
Ported upstream changes to the style attribute, keeping
the empty text node stripping behavior.
2020-05-03 21:20:42 +02:00
|
|
|
const statusEl = this.parentNode.parentNode;
|
2020-04-05 18:32:06 +02:00
|
|
|
|
Merge branch 'master' into glitch-soc/merge-upstream
Conflicts:
- `app/controllers/statuses_controller.rb`:
Upstream disabled the embed controller for reblogs.
Not a real conflict, but glitch-soc has an extra line to deal
with its theming system.
Ported upstream changes.
- `app/javascript/packs/public.js`:
Upstream made changes to get rid of most inline CSS, this changes
javascript for public pages, which in glitch are split between
different files. Ported those changes.
- `app/models/status.rb`:
Upstream changed the block check in `Status#permitted_for` to
include domain-block checks. Not a real conflict with glitch-soc,
but our scope is slightly different, as our scope for
unauthenticated access do not include instance-local toots.
Ported upstream changes.
- `app/serializers/rest/instance_serializer.rb`:
Not a real conflict, upstream added a new field to the instance
serializer, the conflict is one line above since we added more of
that.
Ported upstream changes.
- `app/views/settings/profiles/show.html.haml`:
Upstream got rid of most inline CSS and moved hidden elements
to data attributes in the process, in fields were we have
different values.
Ported upstream changes while keeping our glitch-specific
values.
- `app/views/statuses/_simple_status.html.haml`:
Upstream got rid of inline CSS on an HAML line we treat
differently, stripping empty text nodes.
Ported upstream changes to the style attribute, keeping
the empty text node stripping behavior.
2020-05-03 21:20:42 +02:00
|
|
|
if (statusEl.dataset.spoiler === 'expanded') {
|
|
|
|
statusEl.dataset.spoiler = 'folded';
|
2023-04-16 02:10:48 +02:00
|
|
|
this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format();
|
2020-04-05 18:32:06 +02:00
|
|
|
} else {
|
Merge branch 'master' into glitch-soc/merge-upstream
Conflicts:
- `app/controllers/statuses_controller.rb`:
Upstream disabled the embed controller for reblogs.
Not a real conflict, but glitch-soc has an extra line to deal
with its theming system.
Ported upstream changes.
- `app/javascript/packs/public.js`:
Upstream made changes to get rid of most inline CSS, this changes
javascript for public pages, which in glitch are split between
different files. Ported those changes.
- `app/models/status.rb`:
Upstream changed the block check in `Status#permitted_for` to
include domain-block checks. Not a real conflict with glitch-soc,
but our scope is slightly different, as our scope for
unauthenticated access do not include instance-local toots.
Ported upstream changes.
- `app/serializers/rest/instance_serializer.rb`:
Not a real conflict, upstream added a new field to the instance
serializer, the conflict is one line above since we added more of
that.
Ported upstream changes.
- `app/views/settings/profiles/show.html.haml`:
Upstream got rid of most inline CSS and moved hidden elements
to data attributes in the process, in fields were we have
different values.
Ported upstream changes while keeping our glitch-specific
values.
- `app/views/statuses/_simple_status.html.haml`:
Upstream got rid of inline CSS on an HAML line we treat
differently, stripping empty text nodes.
Ported upstream changes to the style attribute, keeping
the empty text node stripping behavior.
2020-05-03 21:20:42 +02:00
|
|
|
statusEl.dataset.spoiler = 'expanded';
|
2023-04-16 02:10:48 +02:00
|
|
|
this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format();
|
2020-04-05 18:32:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
[].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => {
|
Merge branch 'master' into glitch-soc/merge-upstream
Conflicts:
- `app/controllers/statuses_controller.rb`:
Upstream disabled the embed controller for reblogs.
Not a real conflict, but glitch-soc has an extra line to deal
with its theming system.
Ported upstream changes.
- `app/javascript/packs/public.js`:
Upstream made changes to get rid of most inline CSS, this changes
javascript for public pages, which in glitch are split between
different files. Ported those changes.
- `app/models/status.rb`:
Upstream changed the block check in `Status#permitted_for` to
include domain-block checks. Not a real conflict with glitch-soc,
but our scope is slightly different, as our scope for
unauthenticated access do not include instance-local toots.
Ported upstream changes.
- `app/serializers/rest/instance_serializer.rb`:
Not a real conflict, upstream added a new field to the instance
serializer, the conflict is one line above since we added more of
that.
Ported upstream changes.
- `app/views/settings/profiles/show.html.haml`:
Upstream got rid of most inline CSS and moved hidden elements
to data attributes in the process, in fields were we have
different values.
Ported upstream changes while keeping our glitch-specific
values.
- `app/views/statuses/_simple_status.html.haml`:
Upstream got rid of inline CSS on an HAML line we treat
differently, stripping empty text nodes.
Ported upstream changes to the style attribute, keeping
the empty text node stripping behavior.
2020-05-03 21:20:42 +02:00
|
|
|
const statusEl = spoilerLink.parentNode.parentNode;
|
2023-04-16 02:10:48 +02:00
|
|
|
const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
|
2020-04-05 18:32:06 +02:00
|
|
|
spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
|
|
|
|
});
|
2017-05-25 14:09:25 +02:00
|
|
|
});
|
2019-09-20 10:52:14 +02:00
|
|
|
|
2022-10-30 18:15:28 +01:00
|
|
|
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;
|
2023-04-04 16:33:33 +02:00
|
|
|
toggleButton.setAttribute('aria-expanded', 'false');
|
2022-10-30 18:15:28 +01:00
|
|
|
} else {
|
|
|
|
document.body.style.overflow = 'hidden';
|
2023-04-04 16:33:33 +02:00
|
|
|
toggleButton.setAttribute('aria-expanded', 'true');
|
2022-10-30 18:15:28 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
toggleButton.classList.toggle('active');
|
|
|
|
sidebar.classList.toggle('visible');
|
|
|
|
};
|
|
|
|
|
2019-09-20 10:52:14 +02:00
|
|
|
delegate(document, '.sidebar__toggle__icon', 'click', () => {
|
2022-10-30 18:15:28 +01:00
|
|
|
toggleSidebar();
|
|
|
|
});
|
|
|
|
|
|
|
|
delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
|
|
|
|
if (e.key === ' ' || e.key === 'Enter') {
|
|
|
|
e.preventDefault();
|
|
|
|
toggleSidebar();
|
|
|
|
}
|
2019-09-20 10:52:14 +02:00
|
|
|
});
|
2020-12-10 06:27:26 +01:00
|
|
|
|
|
|
|
// 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 = '';
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2017-05-25 14:09:25 +02:00
|
|
|
}
|
2017-05-20 18:15:43 +02:00
|
|
|
|
2019-11-04 13:03:09 +01:00
|
|
|
loadPolyfills()
|
|
|
|
.then(main)
|
|
|
|
.then(loadKeyboardExtensions)
|
|
|
|
.catch(error => {
|
|
|
|
console.error(error);
|
|
|
|
});
|