槌基百科

MediaWiki:Gadget-ViewerMode.js：修订间差异

←上一编辑下一编辑→
Redesign: move toggle to header pill, add Chinese labels
Fix: use direct btn reference so label is set before DOM insertion
第9行： 第9行：


     var STORAGE_KEY = 'mw-viewer-mode';
     var STORAGE_KEY = 'mw-viewer-mode';
     var active = localStorage.getItem( STORAGE_KEY ) === '1';
     var active     = localStorage.getItem( STORAGE_KEY ) === '1';
    var btn        = null;  // set once DOM is ready


     /* Apply class immediately on load (before DOM ready) to avoid flicker */
     /* Apply class immediately to avoid flicker */
     if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); }
     if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); }


    function toggle() {
        active = !active;
        localStorage.setItem( STORAGE_KEY, active ? '1' : '0' );
        document.documentElement.classList.toggle( 'viewer-mode', active );
        updateBtn();
    }
    /* Label logic:
    *  viewer mode OFF → button says "阅读视图"  (click to enter reader view)
    *  viewer mode ON  → button says "编辑视图"  (click to return to editor view)
    */
     function updateBtn() {
     function updateBtn() {
        var btn = document.getElementById( 'vm-toggle' );
         if ( !btn ) { return; }
         if ( !btn ) { return; }
         if ( active ) {
         if ( active ) {
第37行： 第26行：
             btn.classList.remove( 'vm-active' );
             btn.classList.remove( 'vm-active' );
         }
         }
    }
    function toggle() {
        active = !active;
        localStorage.setItem( STORAGE_KEY, active ? '1' : '0' );
        document.documentElement.classList.toggle( 'viewer-mode', active );
        updateBtn();
     }
     }


第48行： 第44行：
         }
         }


         /* ── Build toggle pill ──────────────────────────────────── */
         /* ── Build toggle pill and set its label immediately ────── */
         var btn = document.createElement( 'button' );
         btn = document.createElement( 'button' );
         btn.id        = 'vm-toggle';
         btn.id        = 'vm-toggle';
         btn.className = 'vm-toggle';
         btn.className = 'vm-toggle';
         btn.addEventListener( 'click', toggle );
         btn.addEventListener( 'click', toggle );
         updateBtn();
         updateBtn();   // btn is now in scope — label is set before insertion


         /* Inject into .vector-user-links-main, before the dropdown */
         /* Inject into header user-links area */
         var target = document.querySelector( '.vector-user-links-main' ) ||
         var target = document.querySelector( '.vector-user-links-main' ) ||
                     document.querySelector( '.vector-user-links' );
                     document.querySelector( '.vector-user-links' );
检索自“https://chuihub.com/index.php/MediaWiki:Gadget-ViewerMode.js”