User:Sohom Datta/bookreader.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

(function () {
    // Subclass ProcessDialog.
    function FullscreenBrowser( config ) {
        FullscreenBrowser.super.call( this, config );
    }
    OO.inheritClass( FullscreenBrowser, OO.ui.ProcessDialog );

    // Specify a name for .addWindows()
    FullscreenBrowser.static.name = 'myDialog';
    // Specify a static title and actions.
    FullscreenBrowser.static.title = 'Fullscreen browser';
    FullscreenBrowser.static.actions = [
        {
            label: 'Cancel',
            flags: 'safe'
        }
    ];

    // Use the initialize() method to add content to the dialog's $body,
    // to initialize widgets, and to set up event handlers.
    FullscreenBrowser.prototype.initialize = function () {
        FullscreenBrowser.super.prototype.initialize.apply( this, arguments );

        const iframe = document.createElement( 'iframe' );
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.border = '0px solid #fff';

        iframe.src = 'https://bookreader.toolforge.org/read?file=' + window.location.href;
        this.$body.css( 'overflow', 'hidden' );

        this.$body.append( iframe );
    };

    // Use the getActionProcess() method to specify a process to handle the
    // actions (for the 'save' action, in this example).
    FullscreenBrowser.prototype.getActionProcess = function ( action ) {
        var dialog = this;
        if ( action ) {
            return new OO.ui.Process( function () {
                dialog.close( {
                    action: action
                } );
            } );
        }
    // Fallback to parent handler.
        return FullscreenBrowser.super.prototype.getActionProcess.call( this, action );
    };

    // Get dialog height.
    FullscreenBrowser.prototype.getBodyHeight = function () {
        return this.content.$element.outerHeight( true );
    };

    // Create and append the window manager.
    var windowManager = new OO.ui.WindowManager();
    $( document.body ).append( windowManager.$element );

    // Create a new dialog window.
    var processDialog = new FullscreenBrowser({
        size: 'full'
    });

    // Add windows to window manager using the addWindows() method.
    windowManager.addWindows( [ processDialog ] );

    function showFullScreenBrowser() {
        windowManager.openWindow( processDialog );
    }

    mw.loader.using( [ 'oojs-ui-core', 'oojs-ui.styles.icons-content', 'oojs-ui-windows', 'oojs-ui-widgets' ]).then( function () {
        var fullMedia = document.querySelector( '.fullMedia' );
        var showButton = new OO.ui.ButtonWidget( {
            label: 'Browse file in fullscreen mode (bookreader)',
            icon: 'articles'
        } )
        showButton.on( 'click', showFullScreenBrowser.bind(this) )
        fullMedia.appendChild( showButton.$element[0] );
    } );
})();