☰

Pr0gramm.com by Seglor

Improve das Pr0gramm

  1. 	
  2.  
  3.     // ==UserScript==
  4.     // @name        Pr0gramm.com by Seglor
  5.     // @namespace   http://userscripts.org/scripts/show/486514
  6.     // @description Improve das Pr0gramm
  7.     // @include     http://pr0gramm.com/*
  8.     // @version     1.4
  9.     // @grant       none
  10.     // @require             http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js
  11.     // ==/UserScript==
  12.      
  13.     (function() {
  14.      
  15.      
  16.     var wheelLast = 0;
  17.     var design = '1';
  18.     /****/// CSS und Kommentarbox links
  19.        
  20.        
  21.     var css = '#upload-form input[type="submit"] { position:relative; top: 290px; left: 350px; }'+
  22.     '.tags { padding-left:3px; } div.item-tags { padding: 4px 0 8px 10% !important;} div.tagsinput { position:absolute; } input[value="Tags speichern"],input[value="Abbrechen"] { float:right; }'+
  23.     '.comments-large-rectangle { height:auto; position:px; width:280px; right:0;top:0; position:relative; } .comments-large-rectangle > a > img { width: 280px; } #footer-links {z-index:200;} div.item-tags { padding: 4px 0 8px 20%;} div.item-info { text-align:center;} #zahlbreite { color: #FFFFFF; margin: 27px 0 0 15px; float: left;} div.stream-row { clear:right; }'+
  24.     '.ui-widget-content {border: 1px solid #AAAAAA;color: #222222;}'+
  25.     '.ui-slider { position: relative; text-align: left;}'+
  26.     '.ui-slider-horizontal { height: 0.8em;}'+
  27.     '.ui-corner-all {  border-radius: 4px;}'+
  28.     '.ui-slider-horizontal .ui-slider-range { height: 100%; top: 0;}'+
  29.     '.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {'+
  30.     'background: #E6E6E6; border: 1px solid #D3D3D3; color: #555555; font-weight: normal;}'+
  31.     '.ui-slider-horizontal .ui-slider-handle { margin-left: -0.6em; top: -0.3em;}'+
  32.     '.ui-slider .ui-slider-handle { cursor: default; height: 1.2em; position: absolute; width: 1.2em; z-index: 2;}'+
  33.     '#slider { float: left; clear: left; width: 300px; margin: 30px 15px 5px; }#slider .ui-slider-range { background: #EE4D2E; } #slider .ui-slider-handle { border-color: #EE4D2E; }'+
  34.     '@media screen and (max-width:1400px){ div#head {margin: 0 0 0 25% !important;} div#page {margin: 0 0 0 25% !important;} .item-comments {width: 24% !important;}} #head { z-index:200; } #stream-next, #stream-prev { z-index:122; } .item-image{max-height:460px;} .item-comments {\n  position: fixed !important;\n  top: 0;\n  left: 0;\n \n  width: 300px;\n  height: 100vh;\n  max-height: 100vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n \n.item-comments textarea.comment {\n  resize: none;\n}\n \ndiv.comment-box > div.comment-box {\n    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);\n    padding: 0 0 0 6px;\n}';
  35.      
  36.         if (typeof GM_addStyle != "undefined") {
  37.             GM_addStyle(css);
  38.         } else if (typeof PRO_addStyle != "undefined") {
  39.             PRO_addStyle(css);
  40.         } else if (typeof addStyle != "undefined") {
  41.             addStyle(css);
  42.         } else {
  43.             var node = document.createElement("style");
  44.             node.type = "text/css";
  45.             node.appendChild(document.createTextNode(css));
  46.             var heads = document.getElementsByTagName("head");
  47.             if (heads.length > 0) {
  48.                 heads[0].appendChild(node);
  49.             } else {
  50.                 document.documentElement.appendChild(node);
  51.             }
  52.         }
  53.      
  54.        
  55.          
  56.     $(function()
  57.     {
  58.             $('.item-comments').jScrollPane();
  59.     });
  60.      
  61.      
  62.      
  63.     function update(e) {
  64.             // nur in Uploads
  65.             if ($("div.item-container").length) {
  66.                    
  67.                     //$('.item-container').hide();
  68.                     $('.item-container').fadeIn();
  69.                     $(".item-container").attr( 'id', 'bild' );
  70.                    
  71.                     var positionX = 0,        
  72.             positionY = 0;
  73.                     var pageElement = document.getElementById('bild');
  74.                     positionX += pageElement.offsetLeft;        
  75.             positionY += pageElement.offsetTop;
  76.                     //alert($(window).height());           
  77.             window.scrollTo(positionX, positionY-130);
  78.             }
  79.     }
  80.      
  81.      
  82.             setInterval(function() {       
  83.                     if ($('.item-image').length) {
  84.                             /*
  85.                             var vids = document.getElementsByTagName("video");
  86.                             for (i = 0; i < vids.length; i++) vids[i].setAttribute("controls", "true");
  87.                             */
  88.                             // + bei resized Bildern
  89.                             if (!$('.item-fullsize-link').length) {
  90.                                     var imgu = document.getElementsByClassName('item-image')[0];
  91.                                     if (imgu.naturalHeight > 460) {
  92.                                             var link = imgu.getAttribute('src');
  93.                                             $('.item-image-wrapper').append('<a class="item-fullsize-link" target="_blank" href="'+link+'" style="">+</a>');
  94.                                     }
  95.                             }
  96.                             var stil = document.getElementsByTagName('html')[0];
  97.                             stil.style.overflow='hidden';
  98.      
  99.                             $(".item-container").attr( 'id', 'bild' );
  100.                             var positionX = 0,        
  101.                             positionY = 0;
  102.                             var pageElement = document.getElementById('bild');
  103.                             positionX += pageElement.offsetLeft;        
  104.                             positionY += pageElement.offsetTop;
  105.                             //alert($(window).height());           
  106.                             window.scrollTo(positionX, positionY-130);
  107.                     }else{
  108.                             var stil = document.getElementsByTagName('html')[0];
  109.                             stil.style.overflow='visible';
  110.                     }
  111.                    
  112.         }, 200);
  113.            
  114.      
  115.      
  116.      
  117.     // Breiteneinstellung in Settings
  118.      
  119.     function refreshdas() {
  120.         if (design == '1') {
  121.             var weite = $("#slider").slider("value");
  122.             $("#page").css( "width", weite+"px");
  123.             $("#head").css( "width", weite+"px");
  124.             var proreihe = weite/128;
  125.             var treshold = 0.55* $(window).width();
  126.      
  127.             document.getElementById("zahlbreite").innerHTML = weite+' Pixel';
  128.             if (weite > treshold) {
  129.                 $(".item-comments").css( "top", "50px");
  130.             }else{
  131.                 $(".item-comments").css( "top", "0");
  132.             }
  133.         }
  134.     }
  135.      
  136.     function changedesign() {
  137.         if (document.getElementById("design") && design == '1') {
  138.             var elem = document.getElementById('design');
  139.             elem.parentNode.removeChild(elem);
  140.         }else{
  141.      
  142.                 var css = '#page { width: 100% !important }'+
  143.                           '#head { width: 100% !important }'+
  144.                           '.comment-foot { width: 260px !important }'+
  145.                           '.item-comments { top: 48px !important; width: 312px !important;}' +
  146.                                     '.item-container-content { margin-top: 20px !important }'+
  147.                                     'div.item-container { background: rgba(0, 0, 0, 0.9) !important; position: absolute !important; height: 100% !important; width: 100% !important; }'+
  148.                                     '.stream-row { clear: none !important; margin-left: 0 !important; }'+
  149.                                     '#main-view { max-width: 100% !important; width: 100% !important; }'+
  150.                                     '.user-info { margin: 20px 30px 0 0 !important; }'+
  151.                                     '#pr0gramm-logo { margin-left: 15px !important; }'+
  152.                                     '.item-pointer { display: none !important; }'+
  153.                          'div.item-tags { padding: 4px 0 8px 20% !important;}'+
  154.                          'div.item-vote { left: 345px;)';
  155.             if (!document.getElementById("design") && design == '2') {
  156.                 var node = document.createElement("style");
  157.                     node.type = "text/css";
  158.                     node.id = "design";
  159.                     node.appendChild(document.createTextNode(css));
  160.                     var heads = document.getElementsByTagName("head");
  161.                     if (heads.length > 0) {
  162.                         heads[0].appendChild(node);
  163.                     } else {
  164.                         document.documentElement.appendChild(node);
  165.                     }
  166.             }
  167.         }
  168.     }
  169.      
  170.        
  171.     // Settings öffnen
  172.     $('#settings-link').click(function() {
  173.             setInterval(function () {
  174.                    
  175.                     if ($("div.overlay-tabs").length && !$("#settings-optik").length) {
  176.                             $('div.overlay-tabs').append('<span id="settings-optik" class="link tab">Optik</span>');               
  177.                     }
  178.                     var valus = parseInt(document.getElementById("page").style.width);
  179.                     $( "#slider" ).slider( "value", valus );
  180.                             $('span#settings-optik').click(function() {
  181.                                     loaded = false;
  182.                                     $('#settings-optik').attr('class', 'link tab active');
  183.                                     $('div.overlay-content:eq(1)').attr('id', 'cont');
  184.                    
  185.                                     document.getElementById("cont").innerHTML = '<div id="slider"></div><span id="zahlbreite" style="color:#fff;">788</span>'+
  186.                         '<div style="margin: 50px;"><br><br>Design wechseln: <input type="button" id="buttons1" value="Design 1"> <input type="button" id="buttons2" value="Design 2"></div>';
  187.                                        
  188.                             $('#buttons1').click(function() {
  189.                                 design = '1';
  190.                                 changedesign();
  191.                                 $('#slider').slider('enable');
  192.                                 $('#slider').slider({ disabled: "false" });
  193.                             });
  194.                             $('#buttons2').click(function() {
  195.                                 design = '2';
  196.                                 changedesign();
  197.                                 $('#slider').slider('disable');
  198.                                 $('#slider').slider({ disabled: "true" });
  199.                             });
  200.                    
  201.                                 $('#slider').slider({
  202.                                     orientation: "horizontal",
  203.                                     range: "min",
  204.                                     max: $(window).width(),
  205.                                     min: 788,
  206.                                     value: valus,
  207.                                     slide: refreshdas,
  208.                                     change: refreshdas
  209.                                 });
  210.                                            
  211.                             });    
  212.                    
  213.             }, 300);
  214.     });
  215.      
  216.     $('#stream-next').click(function() {
  217.             update();
  218.     });
  219.     $('#stream-prev').click(function() {
  220.             update();
  221.     });
  222.      
  223.      
  224.     // Space Vergrößerung und links/rechts Bildwechsel
  225.     document.addEventListener("keydown", keydown, false);
  226.            
  227.     var spacepressed = false;
  228.     function keydown(event) {
  229.             if (event.keyCode == '37' || event.keyCode == '39') {
  230.                     update();
  231.             }else if (event.keyCode == '32') {
  232.                    
  233.                     // falls textarea aktiv
  234.                     var el = document.activeElement;
  235.                     if (el && (el.tagName.toLowerCase() == 'input' && el.type == 'text' || el.tagName.toLowerCase() == 'textarea')) {
  236.                             return;
  237.                     }
  238.                    
  239.                     // Bild mit Space vergrößern
  240.                     if ($('.item-image').length != 0) {
  241.                             event.preventDefault();
  242.                             event.stopPropagation();
  243.                    
  244.                             if (!spacepressed && $("div.item-container").length) {
  245.                                     $(".item-image").css( 'max-height', '100%' );
  246.                                     spacepressed = true;
  247.                             }else{
  248.                                     $(".item-image").css( 'max-height', '460px' );
  249.                                     spacepressed = false;
  250.                             }
  251.                     }
  252.             }else if (event.keyCode == '68') {                                
  253.              //$('#stream-next').click();                                
  254.         }else if (event.keyCode == '65') {                                
  255.             //$('#stream-prev').click();    
  256.             }
  257.     }
  258.      
  259.      
  260.     // Image Scroll
  261.      
  262.         // Firefox
  263.     document.addEventListener("DOMMouseScroll", handleWheel, false);
  264.             // IE9, Chrome, Safari, Opera
  265.     document.addEventListener("mousewheel", handleWheel, false);
  266.             // IE 6/7/8
  267.      if(!document.addEventListener) {
  268.             document.attachEvent("onmousewheel", handleWheel);
  269.     }
  270.      
  271.     function handleWheel(event) {
  272.      
  273.         if ($("div.item-container").length) {
  274.                     var coms = document.getElementsByClassName("item-comments");
  275.                     if (coms.length != 1 || isHover(coms[0])) {
  276.                             return;
  277.                     }
  278.                    
  279.             event.preventDefault();
  280.             event.stopPropagation();
  281.             event.returnValue=false;
  282.      
  283.                     var wheelWait = 200;
  284.                     var time = (new Date()).getTime();
  285.                     var msec = time - wheelLast;
  286.                     wheelLast = time;
  287.                     if (msec < wheelWait) {
  288.                             return;
  289.                     }
  290.      
  291.                 var delta = 0;
  292.             if (!event)
  293.                     event = window.event;
  294.             if (event.wheelDelta) {
  295.                     delta = event.wheelDelta/120;
  296.             } else if (event.detail) {
  297.                     delta = -event.detail/3;
  298.             }
  299.                    
  300.             if(delta<0){
  301.                 $('#stream-next').click();
  302.                     }else{
  303.                 $('#stream-prev').click();
  304.                     }
  305.                     update();
  306.            
  307.             }
  308.     }
  309.      
  310.     function isHover(e) {
  311.     if (!e) return false;
  312.         return (e.parentElement.querySelector(':hover') === e);
  313.     }
  314.      
  315.      
  316.      
  317.      
  318.     })();
  319.