@ -17,7 +17,7 @@
import { import {
dom , COLUMN , COLUMN _LITERAL , COMPARISON , ATTRIBUTES ,
dom , COLUMN , COLUMN _LITERAL , COMPARISON , ATTRIBUTES ,
columnAscendingByDefault , columnIsSortable , COLUMN _TRANSFORMATION ,
columnAscendingByDefault , columnIsSortable , COLUMN _TRANSFORMATION ,
element , JOIN _URL _PASTE , communityQRCodeURL , STAFF _ID _PASTE , IDENTIFIER _PASTE , DETAILS _LINK _PASTE , CLASSES , flagToLanguageAscii , RoomInfo , unreachable , workOnMainThread
element , JOIN _URL _PASTE , communityQRCodeURL , STAFF _ID _PASTE , IDENTIFIER _PASTE , DETAILS _LINK _PASTE , CLASSES , flagToLanguageAscii , RoomInfo , unreachable , workOnMainThread , onInteractive
} from './js/util.js' ; } from './js/util.js' ;
// Hidden communities for transparency.
// Hidden communities for transparency.
@ -101,13 +101,11 @@ function reactToURLParameters() {
if ( hash . startsWith ( "q=" ) ) {
if ( hash . startsWith ( "q=" ) ) {
useSearchTerm ( decodeURIComponent ( hash . slice ( 2 ) ) , true ) ;
useSearchTerm ( decodeURIComponent ( hash . slice ( 2 ) ) , true ) ;
toggleSearchBarVisibility ( ) ;
return ;
return ;
}
}
if ( ! hash . includes ( "+" ) && ! document . querySelector ( ` # ${ hash } ` ) ) {
if ( ! hash . includes ( "+" ) && ! document . querySelector ( ` # ${ hash } ` ) ) {
useSearchTerm ( ` # ${ hash } ` , true ) ;
useSearchTerm ( ` # ${ hash } ` , true ) ;
toggleSearchBarVisibility ( ) ;
return ;
return ;
}
}
@ -539,10 +537,9 @@ function toggleSearchBarVisibility(setShown = null) {
} }
function addSearchInteractions ( ) { function addSearchInteractions ( ) {
dom . btn _toggle _search ( ) ? . addEventListener ( 'click' , function ( ev ) {
// Remove JS notice
location . hash = "#" ;
dom . search _container ( ) ? . removeAttribute ( "title" ) ;
toggleSearchBarVisibility ( ) ;
dom . search _bar ( ) ? . removeAttribute ( "disabled" ) ;
} )
dom . search _bar ( ) ? . addEventListener ( 'keydown' , function ( ) {
dom . search _bar ( ) ? . addEventListener ( 'keydown' , function ( ) {
setTimeout ( ( ) => useSearchTerm ( this . value ) , 0 ) ;
setTimeout ( ( ) => useSearchTerm ( this . value ) , 0 ) ;
@ -552,9 +549,11 @@ function addSearchInteractions() {
if ( ev . key === "Enter" ) {
if ( ev . key === "Enter" ) {
this . blur ( ) ;
this . blur ( ) ;
}
}
if ( this . value === "" ) {
setTimeout ( ( ) => useSearchTerm ( this . value ) , 0 ) ;
useSearchTerm ( "" ) ;
} )
}
dom . btn _search ( ) ? . addEventListener ( 'click' , function ( ) {
dom . search _bar ( ) ? . focus ( ) ;
} )
} )
dom . btn _clear _search ( ) ? . addEventListener ( 'click' , function ( ) {
dom . btn _clear _search ( ) ? . addEventListener ( 'click' , function ( ) {
@ -562,6 +561,26 @@ function addSearchInteractions() {
dom . search _bar ( ) ? . focus ( ) ;
dom . search _bar ( ) ? . focus ( ) ;
} )
} )
dom . btn _random _search ( ) ? . addEventListener ( 'click' , function ( ) {
const searchBar = dom . search _bar ( ) ? ? unreachable ( ) ;
const currentSearchTerm = searchBar . value ;
const randomSearches = [
"#new" ,
"#we're here" ,
"language" ,
"Australia" ,
"#chat" ,
"#official" ,
"#privacy" ,
"#android" ,
"#crypto" ,
"lang:en" ,
"lang:zh" ,
] . filter ( term => term != currentSearchTerm ) ;
const randomSearch = randomSearches [ ~ ~ ( Math . random ( ) * randomSearches . length ) ] ;
useSearchTerm ( randomSearch , true ) ;
} )
dom . btn _share _search ( ) ? . addEventListener ( 'click' , function ( ) {
dom . btn _share _search ( ) ? . addEventListener ( 'click' , function ( ) {
const searchTerm = dom . search _bar ( ) ? . value ;
const searchTerm = dom . search _bar ( ) ? . value ;
if ( ! searchTerm ) return ;
if ( ! searchTerm ) return ;
@ -571,14 +590,6 @@ function addSearchInteractions() {
newLocation . hash = hash ;
newLocation . hash = hash ;
shareOrCopyToClipboard ( newLocation . href , "Share link copied to clipboard" ) ;
shareOrCopyToClipboard ( newLocation . href , "Share link copied to clipboard" ) ;
} ) ;
} ) ;
Array . from ( dom . sample _searches ( ) ) . forEach ( button => button . addEventListener ( 'click' , function ( ) {
const targetSearch = button . getAttribute ( ATTRIBUTES . SEARCH . TARGET _SEARCH ) ;
if ( targetSearch === null ) {
throw new Error ( "Sample search was null" ) ;
}
useSearchTerm ( targetSearch , true ) ;
} ) )
} }
/ * * / * *
@ -720,11 +731,15 @@ function initializeSearch() {
identifier : row . getAttribute ( ATTRIBUTES . ROW . IDENTIFIER ) ? ? unreachable ( )
identifier : row . getAttribute ( ATTRIBUTES . ROW . IDENTIFIER ) ? ? unreachable ( )
} ) ) ) ;
} ) ) ) ;
} }
let lastSearchTerm = null ;
/ * * / * *
*
*
* @ param { string } rawTerm
* @ param { string } rawTerm
* /
* /
async function useSearchTerm ( rawTerm , fillSearchBarWithTerm = false ) { async function useSearchTerm ( rawTerm , fillSearchBarWithTerm = false ) {
if ( rawTerm === lastSearchTerm ) return ;
lastSearchTerm = rawTerm ;
const searchBar = dom . search _bar ( ) ;
const searchBar = dom . search _bar ( ) ;
if ( searchBar === undefined || ! ( searchBar instanceof HTMLInputElement ) ) {
if ( searchBar === undefined || ! ( searchBar instanceof HTMLInputElement ) ) {
@ -737,7 +752,7 @@ async function useSearchTerm(rawTerm, fillSearchBarWithTerm = false) {
dom . search _bar ( ) ? . classList . remove ( CLASSES . SEARCH . NO _RESULTS ) ;
dom . search _bar ( ) ? . classList . remove ( CLASSES . SEARCH . NO _RESULTS ) ;
} else {
} else {
location . hash = ` q= ${ rawTerm } ` ;
location . hash = ` q= ${ rawTerm } ` ;
const term = rawTerm . toLowerCase ( ) . replace ( /lang:(\S+) /g, "" ) . trim ( ) ;
const term = rawTerm . toLowerCase ( ) . replace ( /lang:(\S+) |#$ /g, "" ) . trim ( ) ;
const termTags = Array . from ( rawTerm . matchAll ( /#[^#\s]+/g ) ) . map ( match => match [ 0 ] . slice ( 1 ) . toLowerCase ( ) ) ;
const termTags = Array . from ( rawTerm . matchAll ( /#[^#\s]+/g ) ) . map ( match => match [ 0 ] . slice ( 1 ) . toLowerCase ( ) ) ;
const termLanguage = rawTerm . match ( /lang:(\S+)/ ) ? . [ 1 ] ;
const termLanguage = rawTerm . match ( /lang:(\S+)/ ) ? . [ 1 ] ;
/ * *
/ * *
@ -827,14 +842,13 @@ function sortTable(column) {
// `html.js` selector for styling purposes
// `html.js` selector for styling purposes
document . documentElement . classList . add ( "js" ) ; document . documentElement . classList . add ( "js" ) ;
document . addEventListener ( 'DOMContentLoaded' , ( ) => onLoad ( ) ) ; onInteractive ( onLoad )
document . addEventListener ( 'DOMContentLoaded' , ( ) => { onInteractive ( ( ) => {
document . querySelector ( "#banner-sample-search" ) ? . addEventListener ( 'click' , function ( ) {
document . querySelector ( "#banner-sample-search" ) ? . addEventListener ( 'click' , function ( ) {
useSearchTerm ( this . getAttribute ( 'data-search-target' ) , true ) ;
useSearchTerm ( this . getAttribute ( 'data-search-target' ) , true ) ;
const changed = toggleSearchBarVisibility ( true ) ;
if ( ! changed ) return ;
dom . btn _share _search ( ) ? . classList . add ( 'highlight' ) ;
dom . btn _share _search ( ) ? . classList . add ( 'highlight' ) ;
setTimeout ( ( ) => dom . btn _share _search ( ) ? . classList . remove ( 'highlight' ) , 2000 ) ;
// Do not remove class
// Animation should not retrigger
} )
} )
} ) ; } ) ;
gravel
4 months ago
