import { HighlighterOptions , RedditCommentHighlighter } from "reddit/RedditCommentHighlighter" ; import { RedditComment } from "reddit/RedditPage" ; import { injectCSS } from "util/DOM" ; import { wait } from "util/Time" ; export class OldRedditCommentHighlighter implements RedditCommentHighlighter { private readonly cssElement : Element ; public constructor ( private readonly options ) { this . cssElement = injectCSS ( this . getCSS ( ) , document . head ) ; } public highlightComment ( comment ) { comment . element . classList . add ( this . options . className ) ; comment . element . classList . add ( `${ this . options . className }--transition` ) ; if ( ! this . options . clearOnClick ) { return ; } const clear = [ ] ; if ( this . options . includeChildren ) { const addComment = ( comment ) : void => { const comments = comment . getChildComments ( ) ; for ( const comment of comments ) { addComment ( comment ) ; } clear . push ( comment ) ; } ; addComment ( comment ) ; } else { clear . push ( comment ) ; } comment . onClick . once ( async ( ) => { for ( const comment of clear ) { comment . element . classList . remove ( this . options . className ) ; } await wait ( this . options . transitionDurationSeconds * 1000 + 500 ) ; for ( const comment of clear ) { const className = `${ this . options . className }--transition` ; comment . element . classList . remove ( className ) ; } } ) ; } public dispose ( ) { document . head . removeChild ( this . cssElement ) ; for ( const element of document . querySelectorAll ( ".comment" ) ) { element . classList . remove ( this . options . className ) ; element . classList . remove ( `${ this . options . className }--transition` ) ; } } private getCSS ( ) { if ( this . options . customCSS ) { return this . options . customCSS ; } let css = `
            .comment.${ this . options . className }--transition  > .entry .md {
                transition-property: padding, border, background-color, color;
                transition-duration: ${ this . options . transitionDurationSeconds }s;
            }

            .comment.${ this . options . className } > .entry .md {
                padding: 2px;
                border: ${ this . options . border || "0" };
                border-radius: 2px;
                background-color: ${ this . options . backgroundColor };
                color: ${ this . options . normalTextColor };
            }
        ` ; if ( this . options . linkTextColor ) { css += `
                .comment.${ this . options . className } > .entry .md a {
                    color: ${ this . options . linkTextColor }
                }
            ` ; } if ( this . options . quoteTextColor !== null ) { css += `
                .comment.${ this . options . className } > .entry .md blockquote {
                    color: ${ this . options . quoteTextColor }
                }
            ` ; } css += `
            .res-nightmode .comment.${ this . options . className } > .entry .md {
                padding: 2px;
                border: ${ this . options . border || "0" };
                border-radius: 2px;
                background-color: ${ this . options . backgroundColorDark };
                color: ${ this . options . normalTextColorDark }
            }
        ` ; if ( this . options . linkTextColorDark ) { css += `
                .res-nightmode .comment.${ this . options . className } > .entry .md a {
                    color: ${ this . options . linkTextColorDark }
                }
            ` ; } if ( this . options . quoteTextColorDark ) { css += `
                .res-nightmode .comment.${ this . options . className } > .entry .md blockquote {
                    color: ${ this . options . quoteTextColorDark }
                }
            ` ; } return css ; } }