Dictionary lookup.js for Calibre E-Viewer

/* vim:fileencoding=utf-8
 *
 * Copyright (C) 2019 Kovid Goyal <kovid at kovidgoyal.net>
 *
 * Distributed under terms of the GPLv3 license
 */

(function() {
    "use strict";

    var num_tries = 0;
    var style_id = 'a' + Math.random().toString(36).slice(2);

    // ========== GOOGLE.COM HANDLER ==========
    function fix_google_markup() {
        try {
            var cc = document.getElementById('center_col');
            if (!cc) {
                if (++num_tries > 10) return;
                return setTimeout(fix_google_markup, 100);
            }

            // figure out if they actually got a dictionary card
            var is_dictionary_result = !!document.querySelector('.lr_container, .lr_dct_ent');
            // grab the raw query
            var q = new URLSearchParams(location.search.slice(1)).get('q') || ''

            if (is_dictionary_result) {
                // Only add styles once to prevent duplication
                if (!document.getElementById(style_id)) {
                    var style = document.createElement('style');
                    style.id = style_id;
                    style.textContent = `
                        * {
                            column-gap: 0!important;
                            -webkit-column-gap: 0!important;
                        }
                        #center_col {
                            position: absolute !important;
                            top: 1px !important;
                            left: 0 !important;
                            z-index: 100;
                        }
                        #cnt {
                            position: relative;
                            min-height: 100vh;
                        }
                        /* Clear the space where search form was */
                        #searchform, #appbar, #before-appbar {
                            display: none !important;
                        }
                    `;
                    document.head.appendChild(style);
                }

                var maxW = 'calc(100vw - 25px)';
                cc.style.maxWidth   = maxW;
                cc.style.marginLeft = '0';

                ['rcnt','cnt','search']
                .forEach(function(id) {
                    var e = document.getElementById(id);
                    if (e) {
                        if (id==='search') e.style.maxWidth = maxW;
                        else if (id==='cnt')  e.style.paddingTop = '0';
                        else                  e.style.marginLeft = '0';
                    }
                });

                cc.style.paddingLeft  = '0';
                cc.style.paddingRight = '6px';

                // constrain define text
                document.querySelectorAll('[data-topic]')
                    .forEach(e => e.style.maxWidth = maxW);

                // Ensure footer stays at bottom - with null check
                var cnt = document.getElementById('cnt');
                if (cnt) cnt.style.minHeight = '100vh';
            }

            // hide bunch of useful UI elements
            ['sfcnt', 'top_nav', 'easter-egg', 'topstuff', 'searchform', 'appbar', 'before-appbar']
            .forEach(function(id){
                var e = document.getElementById(id);
                if (e && e.style) e.style.display = 'none';
            });
            // remove that promo sidebar, wrap rest nicely
            var promo = document.getElementById('promos');
            if (promo) promo.remove();

            document.querySelectorAll('[data-ved]')
            .forEach(e => e.style.maxWidth = '100%');

            document.querySelectorAll('cite')
            .forEach(c => {
                var wrap = c.closest('div');
                if (wrap) wrap.style.position = 'static';
            });
        } catch(e) {
            console.error("fix_google_markup() failed with error:");
            console.error(e);
        }
    }

    // ========== DICTIONARY.COM HANDLER ==========
    function fix_dictionary_com_markup() {
        try {
            // Only apply styles to https://www.dictionary.com/browse/{word}
            if (!location.pathname.startsWith('/browse/')) {
                return; // Not a word definition page, exit early
            }

            // Check if we're on an actual dictionary entry page
            // (not the homepage or search results)
            var has_definition = !!document.querySelector('.dictionary-entry, [class*="primary-definition"]');

            if (!has_definition) {
                if (++num_tries > 10) return;
                return setTimeout(fix_dictionary_com_markup, 100);
            }

            // Only add styles once to prevent duplication
            if (!document.getElementById(style_id)) {
                var style = document.createElement('style');
                style.id = style_id;
                style.textContent = `
                    /* Declutter the webpage */
                    aside, nav, [class*="sidebar"], [class*="nav"],
                    header, hr, footer, video,
                    .acw, .cmasAdRoot, .grecaptcha-badge, .grecaptcha-logo,
                    .box-additional-after-first-entry.box-additional-anyclip.box-additional,
                    .copyright-txt,
                    [data-type="browse-module"],
                    [data-type="common-quiz-module"],
                    [data-type="dictionary-carambola-ad"],
                    [data-type="dictionary-page-navigation-module"],
                    [data-type="view-definitions-or-synonyms-for"],
                    [data-type="words-nearby-module"],
                    [data-type="xotd-module"]
                    {
                        display: none !important;
                    }

                    /* Links' colour */
                    a {
                        color: #0059d1 !important;
                    }

                    /* Webpage colour */
                    [data-type="page"] {
                        background-color: #343a40 !important;
                        color: #f8f8f2 !important;
                    }

                    /* 'Discover More' text colour */
                    #example-sentences,
                    #idioms-and-phrases,
                    #other-words-from,
                    #related-words,
                    #synonym-study,
                    #word-history-and-origins {
                        color: #343a40 !important;
                    }

                    /* Ensure the lookup word section remains visible */
                    .dictionary-entry, [class*="primary-definition"], .part-of-speech {
                        display: block !important;
                        margin: 0 auto !important;
                        width: 100% !important;
                    }
                `;
                document.head.appendChild(style);
            }

            console.log("Dictionary.com styling applied successfully");

        } catch(e) {
            console.error("fix_dictionary_com_markup() failed with error:");
            console.error(e);
        }
    }

    // ========== SITE DETECTION AND INITIALIZATION ==========
    if (location.hostname === 'www.google.com') {
        window.addEventListener('DOMContentLoaded', fix_google_markup);

        // Re-run on resize to handle Google's dynamic layout changes
        window.addEventListener('resize', function() {
            num_tries = 0;
            fix_google_markup();
        });
    }
    else if (location.hostname === 'www.dictionary.com') {
        window.addEventListener('DOMContentLoaded', fix_dictionary_com_markup);

        // Re-run on resize for dictionary.com as well
        window.addEventListener('resize', function() {
            num_tries = 0;
            fix_dictionary_com_markup();
        });

        // Dictionary.com often loads content dynamically, so watch for changes
        // This will re-apply styles if the page content changes
        var observer = new MutationObserver(function(mutations) {
            // Only reapply if we haven't already styled the page
            if (!document.getElementById(style_id)) {
                num_tries = 0;
                fix_dictionary_com_markup();
            }
        });

        // Start observing once the DOM is ready
        window.addEventListener('DOMContentLoaded', function() {
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    }
})();