ব্যবহারকারী:খাত্তাব হাসান/খেলাঘর.js

লক্ষ্য করুন: প্রকাশ করার পর, পরিবর্তনগুলো দেখতে আপনাকে আপনার ব্রাউজারের ক্যাশে পরিষ্কার করার প্রয়োজন হতে পারে।

  • ফায়ারফক্স / সাফারি: পুনরায় লোড-এ ক্লিক করার সময় শিফট টিপে ধরে রাখুন, অথবা হয় Ctrl-F5 বা Ctrl-R টিপুন (ম্যাকে ⌘-R টিপুন)
  • গুগল ক্রোম: Ctrl-Shift-R (ম্যাকে ⌘-Shift-R) টিপুন
  • এজ: Ctrl ধরে রাখা অবস্থায় Refresh-এ ক্লিক করুন, অথবা Ctrl-F5 টিপুন।
  • অপেরা: Ctrl-F5 টিপুন।
$(function () {
    // সাইডবার ও হেডার নির্বাচন
    var $leftSidebar = $('#mw-panel');
    var $header = $('#mw-head');
    var $content = $('#content');
    var $personalTools = $('#p-personal');
    var $viewsAndNavigation = $('#p-views, #left-navigation');
    var $toc = $('#toc');

    // লুকান-দেখান বাটন তৈরি
    var $toggleButton = $('<button>', {
        id: 'toggle-sidebar',
        text: 'লুকান',
        css: {
            position: 'fixed',
            top: '10px',
            left: '10px',
            zIndex: '1000',
            padding: '5px 10px',
            background: '#f0f0f0',
            border: '1px solid #ccc',
            cursor: 'pointer'
        }
    }).appendTo('body');

    // বাম সাইডবার ফাংশন
    function toggleLeftSidebar(show) {
        if (show) {
            $leftSidebar.css({ left: '0', visibility: 'visible' });
        } else {
            $leftSidebar.css({ left: '-250px', visibility: 'hidden' });
        }
    }

    // ডিফল্ট লুকানো
    toggleLeftSidebar(false);

    // মাউস প্রান্তে নিলে দেখানো এবং বের হলে লুকানো
    $content.on('mousemove', function (e) {
        if (e.pageX < 10) {
            toggleLeftSidebar(true);
        }
    });
    $leftSidebar.on('mouseleave', function () {
        toggleLeftSidebar(false);
    });

    // টগল বোতাম ক্লিক
    $toggleButton.on('click', function () {
        if ($leftSidebar.css('visibility') === 'hidden') {
            toggleLeftSidebar(true);
            $(this).text('লুকান');
        } else {
            toggleLeftSidebar(false);
            $(this).text('দেখান');
        }
    });

    // লেখাকে সর্বদা full-width রাখা
    $content.css({ marginLeft: '0' });

    // ডান পাশের সাইডবার তৈরি এবং TOC স্থানান্তর
    var $rightSidebar = $('<div>', {
        id: 'right-sidebar',
        css: {
            position: 'fixed',
            top: '0',
            right: '-250px',
            width: '250px',
            height: '100%',
            background: '#f8f9fa',
            borderLeft: '1px solid #aaa',
            overflowY: 'auto',
            zIndex: '1000'
        }
    }).append('<div id="toc-container"></div>').appendTo('body');

    if ($toc.length) {
        $('#toc-container').append($toc);
    }

    // মাউস ডান প্রান্তে গেলে দেখানো
    $content.on('mousemove', function (e) {
        if (e.pageX > $(window).width() - 10) {
            $rightSidebar.css('right', '0');
        } else if (e.pageX < $(window).width() - 260) {
            $rightSidebar.css('right', '-250px');
        }
    });

    // অনুসন্ধান বাক্স স্থানান্তর
    var $searchBox = $('#searchform').detach();
    $('<div>', {
        id: 'custom-search',
        css: {
            position: 'fixed',
            top: '0',
            right: '10px',
            zIndex: '1000',
            background: '#fff',
            padding: '5px',
            border: '1px solid #ccc'
        }
    }).append($searchBox).appendTo('body');

    // পাদদণ্ডে পঠন বিকল্প ও নেভিগেশন
    var $footerNav = $('<div>', {
        id: 'custom-footer-nav',
        css: {
            position: 'fixed',
            bottom: '0',
            left: '0',
            right: '0',
            background: '#fff',
            borderTop: '1px solid #ccc',
            padding: '5px',
            zIndex: '1000',
            display: 'flex',
            justifyContent: 'space-between'
        }
    }).appendTo('body');

    $footerNav.append($viewsAndNavigation);
    $footerNav.append($personalTools);

    // mw-head সংকুচিত করে ব্যাকগ্রাউন্ড যোগ
    $header.css({
        height: '40px',
        overflow: 'hidden',
        background: '#f8f9fa',
        borderBottom: '1px solid #ccc'
    });
    $content.css({ marginTop: '50px' });
});