Участник:Serhio Magpie/enhanceWatchlist.js

/**
 * Enhance Watchlist
 * 
 * Author: Serhio Magpie
 * Licenses: MIT, CC BY-SA
 */

// <nowiki>

$( function () {

    var nodes = {};
    var strings = {
    	'editWatchlist' : 'Редактировать',
    	'markSeen' : 'Отметить',
    	'liveUpdate' : 'Автообновление',
    	'savedLinksList' : 'Фильтры'
    };

	function getNodes() {
		nodes.$head = $( '.mw-special-Watchlist .rcfilters-head' );
		nodes.$left = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable .mw-rcfilters-ui-cell:nth-child(1)' );
		nodes.$right = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable .mw-rcfilters-ui-cell:nth-child(2)' );
		nodes.$filter = $( '.mw-rcfilters-ui-filterWrapperWidget' );
		nodes.$top = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable' );
		nodes.$bottom = $( '.mw-rcfilters-ui-filterWrapperWidget-bottom' );
		nodes.$separator = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-separator' );
		nodes.$infoP = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-watchlistDetails p' );
		nodes.$infoU = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-watchlistDetails .mw-wlheader-showupdated' );
		nodes.$containerEditWL = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton' );
		nodes.$buttonEditWL = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton .oo-ui-buttonWidget' );
		nodes.$labelEditWL = $( '.mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton .oo-ui-labelElement-label' );
		nodes.$buttonMarkSeen = $( '.mw-rcfilters-ui-markSeenButtonWidget' );
		nodes.$labelMarkSeen = $( '.mw-rcfilters-ui-markSeenButtonWidget .oo-ui-labelElement-label' );
		nodes.$buttonLiveUpdate = $( '.mw-rcfilters-ui-liveUpdateButtonWidget' );
		nodes.$labelLiveUpdate = $( '.mw-rcfilters-ui-liveUpdateButtonWidget .oo-ui-labelElement-label' );
		nodes.$containerSavedLinksList = $( '.mw-rcfilters-ui-savedLinksListWidget' );
		nodes.$buttonSavedLinksList = $( '.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonWidget' );
		nodes.$labelSavedLinksList = $( '.mw-rcfilters-ui-savedLinksListWidget .oo-ui-labelElement-label' );
		nodes.$containerChangesLimitAndDate = $( '.mw-rcfilters-ui-changesLimitAndDateButtonWidget' );
		nodes.$buttonChangesLimitAndDate = $( '.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonWidget' );
		nodes.$labelChangesLimitAndDate = $( '.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-labelElement-label' );
		nodes.$showNewChanges = $( '.mw-rcfilters-ui-filterWrapperWidget-showNewChanges' );
	}

    function init() {
		// Colledt all nodes
		getNodes();
		
        // Move nodes
        nodes.$bottom.prepend( nodes.$left );
        nodes.$bottom.append( nodes.$right );
		nodes.$left.prepend( nodes.$buttonEditWL );
		nodes.$left.append( nodes.$buttonLiveUpdate );
		nodes.$right.prepend( nodes.$containerChangesLimitAndDate );
		nodes.$infoP.append( nodes.$infoU );
		nodes.$filter.append( nodes.$showNewChanges );
		
		// Reduce text labels
		nodes.$labelEditWL.text( strings['editWatchlist'] );
		nodes.$labelMarkSeen.text( strings['markSeen'] );
		nodes.$labelLiveUpdate.text( strings['liveUpdate'] );
		nodes.$labelSavedLinksList.text( strings['savedLinksList'] );
		
		// Clear css
		nodes.$head.css( 'min-height', '0' );
		nodes.$top.css( 'display', 'none' );
		nodes.$separator.css( 'display', 'none' );
		nodes.$buttonLiveUpdate.css( 'margin-right', '0.5em' );
		nodes.$containerEditWL.css( 'display', 'none' );
		nodes.$containerSavedLinksList.css( 'display', 'inline-block' );
		nodes.$containerChangesLimitAndDate.css( 'display', 'inline-block' );
		nodes.$containerChangesLimitAndDate.css( 'margin-right', '0.5em' );
		nodes.$filter.css( 'position', 'relative' );
		nodes.$showNewChanges.css( 'position', 'absolute' );
		nodes.$showNewChanges.css( 'left', '50%' );
		nodes.$showNewChanges.css( 'bottom', '2px' );
		nodes.$showNewChanges.css( 'transform', 'translateX(-50%)' );
		
		// Add css
		mw.util.addCSS( '\
			.client-js .mw-special-Watchlist .mw-rcfilters-head { min-height: 210px; }\
			.client-js .mw-rcfilters-collapsed.mw-special-Watchlist .mw-rcfilters-head { min-height: 88px; }\
			.mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined { width: 100%;}\
		' );
		
		// Check size
		$( window ).resize( resize );
		resize();
	}

	function resize() {
		if( window.innerWidth <= 1440 ) {
			nodes.$buttonEditWL.removeClass( 'oo-ui-labelElement' );
			nodes.$labelEditWL.addClass( 'oo-ui-labelElement-invisible' );
			nodes.$buttonMarkSeen.removeClass( 'oo-ui-labelElement' );
			nodes.$labelMarkSeen.addClass( 'oo-ui-labelElement-invisible' );
			nodes.$buttonLiveUpdate.removeClass( 'oo-ui-labelElement' );
			nodes.$labelLiveUpdate.addClass( 'oo-ui-labelElement-invisible' );
			nodes.$buttonSavedLinksList.removeClass( 'oo-ui-labelElement' );
			nodes.$labelSavedLinksList.addClass( 'oo-ui-labelElement-invisible' );
			nodes.$buttonChangesLimitAndDate.removeClass( 'oo-ui-labelElement' );
			nodes.$labelChangesLimitAndDate.addClass( 'oo-ui-labelElement-invisible' );
		} else {
			nodes.$buttonEditWL.addClass( 'oo-ui-labelElement' );
			nodes.$labelEditWL.removeClass( 'oo-ui-labelElement-invisible' );
			nodes.$buttonMarkSeen.addClass( 'oo-ui-labelElement' );
			nodes.$labelMarkSeen.removeClass( 'oo-ui-labelElement-invisible' );
			nodes.$buttonLiveUpdate.addClass( 'oo-ui-labelElement' );
			nodes.$labelLiveUpdate.removeClass( 'oo-ui-labelElement-invisible' );
			nodes.$buttonSavedLinksList.addClass( 'oo-ui-labelElement' );
			nodes.$labelSavedLinksList.removeClass( 'oo-ui-labelElement-invisible' );
			nodes.$buttonChangesLimitAndDate.addClass( 'oo-ui-labelElement' );
			nodes.$labelChangesLimitAndDate.removeClass( 'oo-ui-labelElement-invisible' );
		}
	}

	if ( !mw.user.options.get( 'wlenhancedfilters-disable' ) ) {
        mw.hook( 'structuredChangeFilters.ui.initialized' ).add( init );
    }

} );

// </nowiki>