☰

A Little ABC News

Remove undesired components from the ABC News web site.

// ==UserScript==
// @name             A Little ABC News
// @namespace        https://www.alittleresearch.com.au
// @version          2025-05-03
// @description      Remove undesired components from the ABC News web site.
// @author           Nick Sheppard
// @license          MIT
// @contributionURL  https://ko-fi.com/npsheppard
// @match            https://www.abc.net.au/news
// @icon             https://www.alittleresearch.com.au/sites/default/files/alriconbl-transbg-32x32.png
// @grant        none
// ==/UserScript==

///////////////////////////////////////////////////////////////////////////////
// Copyright (c) 2025 Nicholas Paul Sheppard. See README.md for details
//
// Buy me a Ko-Fi at https://ko-fi.com/npsheppard.
///////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////
//
// The ABC News site identifies some components by an ID, some by a class name,
// and some not at all. Each key of the siteConf structure identifies a
// component by (i) id if the key begins with #; (ii) class name if the key
// begins with .; or (iii) the conents of an <h2> element otherwise.
//
// The value for each key controls how that component will be rendered. Options
// are as follows:
//
// 'default': display as usual
// 'hidden': do not display
// 'compressed': show only the header, which can be expanded by clicking
// 'expanded': the same as 'expandable', but starting in the expanded state
//
// Note that the compressed/expanded state isn't saved between visits;
// re-loading the site resets the component to the state given here.
//
// This script ships with the settings that I prefer, but feel free to change
// them to your liking.
//
///////////////////////////////////////////////////////////////////////////////
const siteConf = {
    // Top Stories
    '#topStories': 'default',

    // State Top Storeis
    '#stateTopStories': 'default',

    // the fixed copy of Just In that appears at the top right)
    '#justIn': 'default',

    // Today's Topics
    '#todaysTopics': 'expanded',

    // For You
    'For You': 'compressed',

    // Local News
    '#localNews': 'default',

    // Video Shorts
    '#videoShorts': 'compressed',

    // More News
    '#moreNews': 'expanded',

    // Everyone's Talking About...
    '#theBigPicture': 'compressed',

    // Around Australia
    '#aroundAustralia': 'expanded',

    // Politics
    '#politics': 'expanded',

    // World
    '#world': 'expanded',

    // Business
    '#business': 'expanded',

    // Sport
    '#sport': 'expanded',

    // Lifestyle
    '#lifestyle': 'expanded',

    // Entertainment
    '#entertainment': 'expanded',

    // the floating copy of Just In box that sticks to the right when scrolling done
    '.Home_justin__mrrHu Home_justinSticky__EkueF': 'hidden',

    // the category headings that appear above each story
    '.Tag_container__7_5W6': 'default'
};

(function() {
    'use strict';

    // apply the configured renderer for every component in siteConf
    for (const key of Object.keys(siteConf)) {
        switch (siteConf[key]) {
        	case 'hidden':
        		applyRenderer(key, (element) => { renderHidden(element); });
        		break;

        	case 'compressed':
        		applyRenderer(key, (element) => { renderExpandable(element, true); });
        		break;

        	case 'expanded':
        		applyRenderer(key, (element) => { renderExpandable(element, false); });
        		break;

            case 'default':
                // do nothing
                break;

            default:
                console.log("Invalid value '" + siteConf[key] + "' for configuration key " + key);
                break;

        }

    }

})();


// Apply a renderer to all of the elements matching a given key from the
// siteConf structure.
//
// Input:
//   key - the key from the siteConf structure
//   render - a function taking a single DOMElement object as input
function applyRenderer(key, render) {

    if (key.charAt(0) === "#") {

        // component identified by id
        const element = document.getElementById(key.substring(1, key.length));
        if (element != null) {
            render(element);
        }

    } else if (key.charAt(0) === ".") {

        // component identified by class name
        const elements = document.getElementsByClassName(key.substring(1, key.length));
        if (elements != null) {
            for (let i = 0; i < elements.length; i++) {
                render(elements[i]);
            }
        }

    } else {

        // component identified by <h2>
        const headings = document.getElementsByTagName("H2");
        if (headings != null) {
            for (let i = 0; i < headings.length; i++) {
                if (headings[i].innerHTML === key) {
                    render(findRailRoot(headings[i]));
                }
            }
        }
    }

}


// Find the root element of a rail component associated with a given
// element. The rail component may either enclose the element, or be
// contained within the element.
//
// Input:
//  element (DOMElement) - an element with the rail component
//
// Returns: the root element of the rail component, or null if no element is found
function findRailRoot(element) {

    // first, search downwards for a rail component contained within the element
    let railRootElement = element;
    while (railRootElement != null && (!railRootElement.className == null || !railRootElement.className.startsWith("Rail_root__"))) {
        railRootElement = railRootElement.firstElementChild;
    }
    if (railRootElement != null) {
        return railRootElement;
    }

    // now search upwards for a rail component containing the element
    railRootElement = element;
    while (railRootElement != null && (!railRootElement.className == null || !railRootElement.className.startsWith("Rail_root__"))) {
        railRootElement = railRootElement.parentElement;
    }

    return railRootElement;

}

// Hide a component by setting its display style to "none".
//
// Input:
//   element (DOMElement) - the DOM element at the root of the component to be suppressed
//
function renderHidden(element) {

    element.style.display = "none";
}


// Make a "rail" component expandable. In the expanded state, the component
// displays as usual, but its header region changes colour when the cursor
// hovers over it. When clicked, the contents are hidden. Similarly, clicking
// on the header region in the compressed state re-expands the component.
//
// The general structure of a rail component is as follows, where the xxxxx's
// are code that differs from component to component but has no obvious
// meaning.
//
//
// <div id="..." or class="...">
//   <!-- sometimes a div contains the Rail_root -->
//     <div class="Rail_root__xxxxx Rail_sideScrolling__xxxxx">
//       <div class="Rail_header__xxxxx">
//         <h2>...</h2>
//         <div>...</div>
//       </div>
//       <div class="Rail_scollNavigation__xxxxx">
//         <button title="Move left"><svg .../></button>
//         <button title="Move right"><svg .../></button>
//       </div>
//       <div class="Rail_content__xxxxx">
//         <ul .../>
//       </div>
//     </div>
//   <!-- end of optional containing div -->
// </div>
//
// Input:
//   element (DOMElement) - the root element of the rail component to be suppressed
//   startCompressed (boolean) - true to start in the compressed state; false to start in the expanded state
function renderExpandable(element, startCompressed = false) {

    // find the rail root
    let railRootElement = findRailRoot(element);
    if (railRootElement == null) {
        // couldn't find the rail root; bail out
        console.log("Couldn't find the rail root for " + element);
        return;
    }

    // get the components of the rail root
    let railHeaderElement = null;
    let railNavigationElement = null;
    let railContentElement = null;
    let railChild = railRootElement.firstElementChild;
    while (railChild != null) {
        if(railChild.className != null) {
            if (railChild.className.startsWith("Rail_header__")) {
                railHeaderElement = railChild;
            } else if (railChild.className.startsWith("Rail_scollNavigation__")) {
                railNavigationElement = railChild;
            } else if (railChild.className.startsWith("Rail_content__")) {
                railContentElement = railChild;
            }
        }
        railChild = railChild.nextElementSibling;
    }

    // suppress display of the rail content
    if (railContentElement != null) {
        railContentElement.style.display = startCompressed ? "none" : "";
        if (railHeaderElement != null) {
            railHeaderElement.style.cursor = "zoom-in";
            railHeaderElement.style.borderRadius = "8px";
            railHeaderElement.onclick = function () {
                if (railContentElement.style.display === "none") {
                    railContentElement.style.display = "block";
                    railHeaderElement.style.cursor = "zoom-out";
                } else {
                    railContentElement.style.display = "none";
                    railHeaderElement.style.cursor = "zoom-in";
                }
            };
            railHeaderElement.onmouseover = function() {
              railHeaderElement.style.backgroundColor = 'var(--nw-colour-theme-surface-tint)';
            };
            railHeaderElement.onmouseout = function() {
              railHeaderElement.style.backgroundColor = 'white';
            };
        }
    }

}