Raw Source Toggle Dropdown

• Minified Source

  Alternate update check target.

Supreme7 / PH! fórum touch-sidenav menü teszt

// ==UserScript==
// @name         PH! fórum touch-sidenav menü teszt
// @namespace    https://prohardver.hu/tag/supreme7.html
// @version      0.85
// @description  Prohardver touch-sidenav-menu
// @author       SUPREME7
// @include      *prohardver.hu*
// @require     https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js
// @updateURL https://openuserjs.org/meta/Supreme7/teszt_-_Supreme7.meta.js
// @license     MIT

// ==/UserScript==

(function($) {
    'use strict';

$(".navbar-toggler:last").css("margin-right","30px");

    function addGlobalStyle(css) {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }

    addGlobalStyle(`
body {
width: 100%;
height: 100%;
}

.slideout-menu {
padding-left: 5px;
-webkit-box-shadow: -7px 0px 19px -10px rgba(0,0,0,0.75);
-moz-box-shadow: -7px 0px 19px -10px rgba(0,0,0,0.75);
box-shadow: -7px 0px 19px -10px rgba(0,0,0,0.75);
position: fixed;
top: 0;
bottom: 0;
width: 256px;
min-height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 10002;
display: none;
background: #444;
}

.slideout-menu-left {
left: 0;
}

.slideout-menu-right {
right: 0;
}

.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
background-color: transparent; /* A background-color is required */

}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}

.slideout-open .slideout-menu {
display: block;
}
#drag-target {
height: 100%;
background: #c5c5c559;
width: 10px;
position: fixed;
right: 0;
top: 0;
z-index: 10001;
}

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
}
`);


    $( "body" ).append( "<div id='drag-target'></div>" );
    //$("#header-sticky").prepend("<button class='toggle-button'>☰</button>")

    var userFace = $("span.user-face:first").find("img:first").attr("src");
    userFace = userFace.replace("/small/", "/");
    var userUrl = $(".user-dropdown-menu:first").find("a:first").attr("href");
    var userName = $(".user-dropdown-menu:first").find("a:first").text();


    $("body").prepend('<div id="menu"></div>');


    var userThreadListFav = $('.user-thread-list-fav:first').clone();
    var userThreadListLMS = $('.user-thread-list-lms:first').clone();

        $('#menu').append('<div class="card card-forum"><div class="text-center"><img src="'+userFace+'"><p><b><a href="'+userUrl+'">'+userName+'</a></b></p></div></div>');
        $('#menu').append('<div class="card card-forum"><a href="/temak/friss.html" class="btn btn-forum btn-block"><span class="fas fa-comments fa-fw"></span> Aktív témák</a></div>');
        $('#menu').append('<div class="card card-forum"><a href="https://prohardver.hu/forum/index.html" class="btn btn-forum btn-block"><span class="fas fa-sign-out-alt fa-fw"></span> Fórum főoldal</a></div>');
        $('#menu').append('<div class="card card-forum"><a href="/fiok/beallitasok.php" class="btn btn-forum btn-block"><span class="fas fa-cog fa-fw"></span> Beállításaim</a></div>');

        $('#menu').append(userThreadListFav);
        $('#menu').append(userThreadListLMS);

    var overlay = $('<div id="overlay"> </div>');

    var slideout = new Slideout({
        'panel': document.getElementById('drag-target'),
        'menu': document.getElementById('menu'),
        'padding': 256,
        'tolerance': 0,
        'duration': 0,
        'side': 'right'

    });

      // Toggle button
     // document.querySelector('.toggle-button').addEventListener('click', function() {
       // slideout.toggle();
     // });

    function close(eve) {
        eve.preventDefault();
        slideout.close();
    }

    slideout
        .on('beforeopen', function() {
        overlay.appendTo(document.body);
        document.getElementById('overlay').classList.add('panel-open');


    })
        .on('open', function() {
       document.getElementById('overlay').addEventListener('click', close);
       document.getElementById('drag-target').addEventListener('click', close);
        $("#drag-target").css("width", "30px");
    })

        .on('beforeclose', function() {
        document.getElementById('overlay').classList.remove('panel-open');
        $("#overlay").remove();
        this.panel.removeEventListener('click', close);
        document.getElementById('drag-target').removeEventListener('click', close);
        $("#drag-target").css("width", "10px");
    });

})(jQuery);