2018-12-07 10:42:22 -05:00
import escapeTextContentForBrowser from 'escape-html' ;
2017-05-30 09:11:15 -04:00
import loadPolyfills from '../mastodon/load_polyfills' ;
2017-09-09 10:23:44 -04:00
import ready from '../mastodon/ready' ;
2018-07-13 21:56:41 -04:00
import { start } from '../mastodon/common' ;
2019-11-04 07:03:09 -05:00
import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions' ;
2018-07-13 21:56:41 -04:00
start ( ) ;
2017-09-09 10:23:44 -04:00
window . addEventListener ( 'message' , e => {
const data = e . data || { } ;
if ( ! window . parent || data . type !== 'setHeight' ) {
return ;
}
ready ( ( ) => {
window . parent . postMessage ( {
type : 'setHeight' ,
id : data . id ,
height : document . getElementsByTagName ( 'html' ) [ 0 ] . scrollHeight ,
} , '*' ) ;
} ) ;
} ) ;
2017-06-09 09:06:38 -04:00
function main ( ) {
2018-07-28 13:25:33 -04:00
const IntlMessageFormat = require ( 'intl-messageformat' ) . default ;
const { timeAgoString } = require ( '../mastodon/components/relative_timestamp' ) ;
2020-03-20 22:14:50 -04:00
const { delegate } = require ( '@rails/ujs' ) ;
2017-10-05 21:42:34 -04:00
const emojify = require ( '../mastodon/features/emoji/emoji' ) . default ;
2017-07-17 18:19:02 -04:00
const { getLocale } = require ( '../mastodon/locales' ) ;
2018-07-28 13:25:33 -04:00
const { messages } = getLocale ( ) ;
2017-09-13 21:39:10 -04:00
const React = require ( 'react' ) ;
const ReactDOM = require ( 'react-dom' ) ;
2018-07-28 13:25:33 -04:00
const Rellax = require ( 'rellax' ) ;
2019-09-18 09:41:50 -04:00
const { createBrowserHistory } = require ( 'history' ) ;
2017-07-17 18:19:02 -04:00
2019-01-10 09:13:30 -05:00
const scrollToDetailedStatus = ( ) => {
2019-09-18 09:41:50 -04:00
const history = createBrowserHistory ( ) ;
2019-01-10 09:13:30 -05: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 12:10:40 -04:00
const getEmojiAnimationHandler = ( swapTo ) => {
return ( { target } ) => {
target . src = target . getAttribute ( swapTo ) ;
} ;
} ;
2017-07-17 18:19:02 -04:00
ready ( ( ) => {
const locale = document . documentElement . lang ;
2017-09-09 10:23:44 -04:00
2017-07-17 18:19:02 -04:00
const dateTimeFormat = new Intl . DateTimeFormat ( locale , {
year : 'numeric' ,
month : 'long' ,
day : 'numeric' ,
hour : 'numeric' ,
minute : 'numeric' ,
} ) ;
2017-09-09 10:23:44 -04:00
2017-07-17 18:19:02 -04:00
[ ] . 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 ) ;
2017-09-09 10:23:44 -04:00
2017-07-17 18:19:02 -04:00
content . title = formattedDate ;
content . textContent = formattedDate ;
} ) ;
[ ] . forEach . call ( document . querySelectorAll ( 'time.time-ago' ) , ( content ) => {
const datetime = new Date ( content . getAttribute ( 'datetime' ) ) ;
2018-07-28 13:25:33 -04:00
const now = new Date ( ) ;
2017-09-09 10:23:44 -04:00
2017-08-25 11:21:16 -04:00
content . title = dateTimeFormat . format ( datetime ) ;
2018-07-28 13:25:33 -04:00
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 ) ,
2020-02-03 11:48:56 -05:00
} , datetime , now , now . getFullYear ( ) , content . getAttribute ( 'datetime' ) . includes ( 'T' ) ) ;
2017-07-17 18:19:02 -04:00
} ) ;
2017-08-30 04:23:43 -04:00
2018-05-12 09:30:06 -04:00
const reactComponents = document . querySelectorAll ( '[data-component]' ) ;
2018-09-18 10:45:58 -04:00
2018-05-12 09:30:06 -04:00
if ( reactComponents . length > 0 ) {
import ( /* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container' )
. then ( ( { default : MediaContainer } ) => {
2019-01-13 04:23:54 -05:00
[ ] . forEach . call ( reactComponents , ( component ) => {
[ ] . forEach . call ( component . children , ( child ) => {
component . removeChild ( child ) ;
} ) ;
} ) ;
2018-05-12 09:30:06 -04:00
const content = document . createElement ( 'div' ) ;
2018-03-24 07:52:26 -04:00
2018-05-12 09:30:06 -04:00
ReactDOM . render ( < MediaContainer locale = { locale } components = { reactComponents } / > , content ) ;
document . body . appendChild ( content ) ;
2019-01-10 09:13:30 -05:00
scrollToDetailedStatus ( ) ;
2018-05-12 09:30:06 -04:00
} )
2019-01-10 09:13:30 -05:00
. catch ( error => {
console . error ( error ) ;
scrollToDetailedStatus ( ) ;
} ) ;
} else {
scrollToDetailedStatus ( ) ;
2018-03-24 07:52:26 -04:00
}
2018-07-28 13:25:33 -04:00
2018-08-25 19:19:13 -04:00
const parallaxComponents = document . querySelectorAll ( '.parallax' ) ;
2018-09-18 10:45:58 -04:00
2018-08-25 19:19:13 -04:00
if ( parallaxComponents . length > 0 ) {
new Rellax ( '.parallax' , { speed : - 1 } ) ;
}
2019-07-21 12:10:40 -04:00
2020-08-11 17:09:13 -04:00
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 ( password . value && password . value !== confirmation . value ) {
confirmation . setCustomValidity ( ( new IntlMessageFormat ( messages [ 'password_confirmation.mismatching' ] || 'Password confirmation does not match' , locale ) ) . format ( ) ) ;
} else {
confirmation . setCustomValidity ( '' ) ;
}
} ) ;
2020-08-12 06:11:15 -04: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 ;
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 ( '' ) ;
}
} ) ;
2019-07-21 12:10:40 -04:00
delegate ( document , '.custom-emoji' , 'mouseover' , getEmojiAnimationHandler ( 'data-original' ) ) ;
delegate ( document , '.custom-emoji' , 'mouseout' , getEmojiAnimationHandler ( 'data-static' ) ) ;
2020-04-05 08:02:22 -04:00
delegate ( document , '.status__content__spoiler-link' , 'click' , function ( ) {
2020-04-28 04:16:55 -04:00
const statusEl = this . parentNode . parentNode ;
2020-04-05 08:02:22 -04:00
2020-04-28 04:16:55 -04:00
if ( statusEl . dataset . spoiler === 'expanded' ) {
statusEl . dataset . spoiler = 'folded' ;
2020-04-05 08:02:22 -04:00
this . textContent = ( new IntlMessageFormat ( messages [ 'status.show_more' ] || 'Show more' , locale ) ) . format ( ) ;
} else {
2020-04-28 04:16:55 -04:00
statusEl . dataset . spoiler = 'expanded' ;
2020-04-05 08:02:22 -04:00
this . textContent = ( new IntlMessageFormat ( messages [ 'status.show_less' ] || 'Show less' , locale ) ) . format ( ) ;
}
return false ;
} ) ;
[ ] . forEach . call ( document . querySelectorAll ( '.status__content__spoiler-link' ) , ( spoilerLink ) => {
2020-04-28 04:16:55 -04:00
const statusEl = spoilerLink . parentNode . parentNode ;
const message = ( statusEl . dataset . spoiler === 'expanded' ) ? ( messages [ 'status.show_less' ] || 'Show less' ) : ( messages [ 'status.show_more' ] || 'Show more' ) ;
2020-04-05 08:02:22 -04:00
spoilerLink . textContent = ( new IntlMessageFormat ( message , locale ) ) . format ( ) ;
} ) ;
2017-05-25 08:09:25 -04:00
} ) ;
2016-12-20 18:13:13 -05:00
2017-05-25 08:09:25 -04:00
delegate ( document , '.webapp-btn' , 'click' , ( { target , button } ) => {
if ( button !== 0 ) {
return true ;
}
window . location . href = target . href ;
return false ;
} ) ;
2017-03-31 07:54:36 -04:00
2018-08-17 21:03:12 -04:00
delegate ( document , '.modal-button' , 'click' , e => {
e . preventDefault ( ) ;
let href ;
if ( e . target . nodeName !== 'A' ) {
href = e . target . parentNode . href ;
} else {
href = e . target . href ;
}
window . open ( href , 'mastodon-intent' , 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes' ) ;
} ) ;
2018-07-28 13:25:33 -04:00
delegate ( document , '#account_display_name' , 'input' , ( { target } ) => {
2018-10-25 19:55:24 -04:00
const name = document . querySelector ( '.card .display-name strong' ) ;
2018-07-28 13:25:33 -04:00
if ( name ) {
2018-12-07 10:42:22 -05:00
if ( target . value ) {
name . innerHTML = emojify ( escapeTextContentForBrowser ( target . value ) ) ;
} else {
2020-04-28 04:16:55 -04:00
name . textContent = target . dataset . default ;
2018-12-07 10:42:22 -05:00
}
2018-07-28 13:25:33 -04:00
}
2017-05-25 08:09:25 -04:00
} ) ;
2017-05-02 20:04:16 -04:00
2017-07-21 06:47:16 -04:00
delegate ( document , '#account_avatar' , 'change' , ( { target } ) => {
2018-07-28 13:25:33 -04:00
const avatar = document . querySelector ( '.card .avatar img' ) ;
2017-07-21 06:47:16 -04:00
const [ file ] = target . files || [ ] ;
2017-09-11 10:19:54 -04:00
const url = file ? URL . createObjectURL ( file ) : avatar . dataset . originalSrc ;
2017-09-09 10:23:44 -04:00
2017-07-21 06:47:16 -04:00
avatar . src = url ;
} ) ;
2019-04-20 22:47:39 -04:00
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
2019-07-19 03:18:23 -04:00
if ( target . getAttribute ( 'data-autoplay' ) !== 'true' && target . src !== swapSrc ) {
2019-04-20 22:47:39 -04:00
target . src = swapSrc ;
}
} ;
} ;
delegate ( document , 'img#profile_page_avatar' , 'mouseover' , getProfileAvatarAnimationHandler ( 'data-original' ) ) ;
delegate ( document , 'img#profile_page_avatar' , 'mouseout' , getProfileAvatarAnimationHandler ( 'data-static' ) ) ;
2017-07-21 06:47:16 -04:00
delegate ( document , '#account_header' , 'change' , ( { target } ) => {
2018-07-28 13:25:33 -04:00
const header = document . querySelector ( '.card .card__img img' ) ;
2017-07-21 06:47:16 -04:00
const [ file ] = target . files || [ ] ;
2017-09-11 10:19:54 -04:00
const url = file ? URL . createObjectURL ( file ) : header . dataset . originalSrc ;
2017-09-09 10:23:44 -04:00
2018-07-28 13:25:33 -04:00
header . src = url ;
} ) ;
delegate ( document , '#account_locked' , 'change' , ( { target } ) => {
const lock = document . querySelector ( '.card .display-name i' ) ;
2020-07-01 07:51:50 -04:00
if ( lock ) {
if ( target . checked ) {
delete lock . dataset . hidden ;
} else {
lock . dataset . hidden = 'true' ;
}
2018-07-28 13:25:33 -04:00
}
2017-07-21 06:47:16 -04:00
} ) ;
2018-09-18 10:45:58 -04:00
delegate ( document , '.input-copy input' , 'click' , ( { target } ) => {
2019-04-03 11:54:54 -04:00
target . focus ( ) ;
2018-09-18 10:45:58 -04:00
target . select ( ) ;
2019-04-03 11:54:54 -04:00
target . setSelectionRange ( 0 , target . value . length ) ;
2018-09-18 10:45:58 -04:00
} ) ;
delegate ( document , '.input-copy button' , 'click' , ( { target } ) => {
2018-10-09 13:36:13 -04:00
const input = target . parentNode . querySelector ( '.input-copy__wrapper input' ) ;
2018-09-18 10:45:58 -04:00
2019-04-03 11:54:54 -04:00
const oldReadOnly = input . readonly ;
input . readonly = false ;
2018-09-18 10:45:58 -04:00
input . focus ( ) ;
input . select ( ) ;
2019-04-03 11:54:54 -04:00
input . setSelectionRange ( 0 , input . value . length ) ;
2018-09-18 10:45:58 -04:00
try {
if ( document . execCommand ( 'copy' ) ) {
input . blur ( ) ;
target . parentNode . classList . add ( 'copied' ) ;
setTimeout ( ( ) => {
target . parentNode . classList . remove ( 'copied' ) ;
} , 700 ) ;
}
} catch ( err ) {
console . error ( err ) ;
}
2019-04-03 11:54:54 -04:00
input . readonly = oldReadOnly ;
2018-09-18 10:45:58 -04:00
} ) ;
2019-09-20 04:52:14 -04:00
delegate ( document , '.sidebar__toggle__icon' , 'click' , ( ) => {
const target = document . querySelector ( '.sidebar ul' ) ;
if ( target . style . display === 'block' ) {
target . style . display = 'none' ;
} else {
target . style . display = 'block' ;
}
} ) ;
2017-05-25 08:09:25 -04:00
}
2017-05-20 12:15:43 -04:00
2019-11-04 07:03:09 -05:00
loadPolyfills ( )
. then ( main )
. then ( loadKeyboardExtensions )
. catch ( error => {
console . error ( error ) ;
} ) ;