├── README.md ├── pr0gramm.css └── pr0gramm_dick.user.js /README.md: -------------------------------------------------------------------------------- 1 | pr0gramm.com-by-Seglor 1.6.0.6 2 | ====================== 3 | 4 | ![prooo](https://cloud.githubusercontent.com/assets/1558446/6137566/4ce717fc-b17a-11e4-8c1e-65a1939e03f6.PNG) 5 | 6 | Willkommen ihr fags 7 | 8 | Dies ist ein Userscript für alle gängigen Brauser, um einige Neuerungen hinzuzufügen. Genaue Auflistung folgt unten. Getestet unter Firefox und Chrome. 9 | 10 | 11 | > [pr0gramm_dick.user.js](https://github.com/Seglormeister/Pr0gramm.com-by-Seglor/raw/master/pr0gramm_dick.user.js) **->** Breitbild/old pr0gramm 12 | 13 | 14 | 15 | 16 | ###Integrierte Veränderungen: 17 | 18 | - Allgemeine Fullscreenansicht 19 | - Kommentarleiste links 20 | - Bilderwechsel mit dem Mausrad 21 | - Eigene Benis Anzeige im Header 22 | - Erweiterte Kommentaransicht 23 | - "Bereits gesehen"-Markierung der Uploads (deaktivierbar) 24 | - Custom Scrollbar in den Kommentaren 25 | - Bildgröße an Bildschirm angepasst 26 | - Kommentare nach Zeit/Beliebtheit sortieren 27 | - Random Upload Button 28 | - OP Kennzeichnung in Kommentaren (NEU!) -> UPDATE: Ist nun Standard auf pro! 29 | - Bessere Lesbarkeit der Kommentare durch Farben (NEU!) 30 | - Bildzoom mit der Leertaste (per Drag and Drop verschieben) (NEU!) 31 | - Filteranzeige unter jedem Bild (NEU!) 32 | 33 | 34 | 35 | 36 | 37 | ###INSTALLATION 38 | 39 | 1. Addon für euren Brauser besorgen 40 | Firefox: Addon "Greasemonkey" benötigt 41 | Chrome: Addon "Tampermonkey" benötigt 42 | 43 | 2. Klick auf den Raw Link zum Userscript, Installationsfenster erscheint direkt 44 | Raw Link: https://github.com/Seglormeister/Pr0gramm.com-by-Seglor/raw/master/pr0gramm_dick.user.js 45 | 46 | 3. Updates bei neuen Versionen erfolgen automatisch 47 | 48 | 49 | 50 | Das pr0gramm mag userscripts. 51 | 52 | -------------------------------------------------------------------------------- /pr0gramm.css: -------------------------------------------------------------------------------- 1 | #upload-form input[type="submit"] { position:relative; top: 420px; left: 350px; } 2 | .tags { padding-left:3px; width:100%;} div.item-tags { padding: 4px 0 8px 14% !important;} div.tagsinput { position:absolute; } input[value="Tags speichern"],input[value="Abbrechen"] { float:right; } 3 | .comments-large-rectangle { overflow: hidden; height:auto; position:px; width:292px; right:0;top:0; position:relative; } .comments-large-rectangle > a > img { width: 280px; } 4 | #footer-links {z-index:200;} div.item-tags { padding: 4px 0 8px 20%;} div.item-info { text-align:center;} 5 | #zahlbreite { color: #FFFFFF; margin: 27px 0 0 15px; float: left;} div.stream-row { clear:right; } 6 | 7 | .ui-widget-content {border: 1px solid #AAAAAA;color: #222222;} 8 | .ui-slider { position: relative; text-align: left;} 9 | .ui-slider-horizontal { height: 0.8em;} 10 | .ui-corner-all { border-radius: 4px;} 11 | .ui-slider-horizontal .ui-slider-range { height: 100%; top: 0;} 12 | .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 13 | background: #E6E6E6; border: 1px solid #D3D3D3; color: #555555; font-weight: normal;} 14 | .ui-slider-horizontal .ui-slider-handle { margin-left: -0.6em; top: -0.3em;} 15 | .ui-slider .ui-slider-handle { cursor: default; height: 1.2em; position: absolute; width: 1.2em; z-index: 2;} 16 | #slider { float: left; clear: left; width: 300px; margin: 30px 15px 5px; }#slider .ui-slider-range { background: #EE4D2E; } #slider .ui-slider-handle { border-color: #EE4D2E; } 17 | @media screen and (max-width:1400px){ div#head {margin: 0 0 0 0 !important;} 18 | .item-comments {width: 23% !important;}} 19 | div.item-details {padding: 8px 0px 8px 50px;} 20 | 21 | #head { padding-left: 0px !important; z-index:200; } 22 | .stream-next, .stream-prev { padding: 200px 0 0 !important; margin: 200px 0px 0px !important; position: fixed !important; color: rgba(245, 247, 246, 0.29) !important; font-size: 38px !important; } 23 | .stream-next:hover, .stream-prev:hover { color: rgba(238, 77, 46, 1.0) !important; } 24 | .stream-prev { left: 24% !important;} 25 | .item-comments { -webkit-transform: translateZ(0); position: fixed !important; top: 0; left: 0; width: 300px; height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden;} 26 | .item-comments textarea.comment { resize: none; box-shadow: 0 0 0 2px rgba(72, 72, 72, 0.36);} 27 | div.comment-box > div.comment-box { padding: 0 0 0 14px; background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.1) !important; border-left: 1px solid #292929;} 28 | 29 | 30 | @-webkit-keyframes fadeInLeft { 0% { opacity: 1; -webkit-transform: translateX(-400px);} 100% { opacity: 1; -webkit-transform: translateX(0); } } 31 | @keyframes fadeInLeft { 0% { opacity: 1; transform: translateX(-400px);} 100% { opacity: 1; transform: translateX(0); } } 32 | .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;} 33 | .commentview { background: url("http://i.imgur.com/frLdEe2.png"); float: right; cursor: pointer; background-size: 18px 18px; height: 18px; width: 18px;} 34 | .commentview:hover { background: url("http://i.imgur.com/Am2MFVM.png"); background-size: 18px 18px; height: 18px; width: 18px;} 35 | div.item-comments.wide { width: 40% !important;}//($(window).width() * 0.4) 36 | div.item-container-content.wide { padding-left: 40% !important;} 37 | div.item-container-content.wide .item-image-wrapper { max-width: 90% !important;} 38 | div.item-container-content.wide .item-image { max-width: 100% !important;} 39 | div.item-container-content.wide .stream-prev { left: 40% !important;} 40 | 41 | span.vote-fav.wide { left: 130px !important; top: 0px !important;} 42 | .commentfarbe1 { border-left: 2px solid rgb(51, 52, 150) !important;} 43 | .commentfarbe2 { border-left: 2px solid rgba(48, 221, 22, 0.72) !important;} 44 | .commentfarbe3 { border-left: 2px solid rgba(254, 137, 6, 0.85) !important;} 45 | .commentfarbe4 { border-left: 2px solid rgba(245, 0, 0, 0.77) !important;} 46 | .commentfarbe5 { border-left: 2px solid rgba(167, 22, 221, 0.72) !important;} 47 | .opuser .user:before { content: \OP\; color: #FFF; padding: 1px 3px; vertical-align: baseline; font-weight: bold; border-radius: 0.25em; background-color: rgb(238, 77, 46); margin-right: 5px; } 48 | 49 | div.comments-head { background: rgba(42, 46, 49, 0.62);} 50 | div.comment { border: 1px solid rgba(10, 10, 11, 0.46); background: rgba(26, 27, 30, 0.7); border-radius: 2px;} 51 | .vote-fav { left: 230px !important; top: 20px !important;} 52 | .comments-large-rectangle { position:absolute; width: 0px;} 53 | .side-wide-skyscraper { display:none;} 54 | form.tag-form { margin: 8px 70px 0px; width: 640px;} 55 | .sorter, .sorter a { color: rgba(155, 155, 155, 1); font-size: 0.94em;} 56 | #com-new { padding-left: 90px} #com-new, #com-top { margin: 0px 3px;} 57 | #com-new.active, #com-new:hover { color: #EE4D2E;} #com-top.active, #com-top:hover { color: #EE4D2E;} 58 | #user-admin, #user-ban { top: 126px; } 59 | #head-content:after { left: 15px !important;} 60 | #head-content { opacity: 0.97; background-color: #040405 !important; border-bottom: 2px solid #232326;} 61 | .pane, .pane-head, .tab-bar, .user-stats, .in-pane { width: 792px; margin: 0 auto !important;} 62 | #random { float: right; margin-top: 2px; margin-left: 10px; height: 16px; width: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAARCQAAEQkAGJrNK4AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEfSURBVHjazNK/K8VRHMbx1/dehIVbSpcJJWVguFKMRmUxGCibP8Ji8g8Y7mIxmxgYLEpXGUgokx+DhQhd9+tH0rUc+k7X9WPwWU6ncz7v8zyf80TlctlvK+UP6v9Aah4e4+R+BgNIV+h5wz7yn5DE4SzmvyGgFXMQFeMSjGH1B04msPwxk2bE3wQ8o+ljsBFekMNKlYA19KOIdFSMSwUMYxuT2ME1znATXqxHBh3IYgiLGMFuDQYDfRjj6EEvWoLN2vAjdwF+jKkAgFxUjEt9WEcbnnCB7gpWToOaRlxhNIUDbIQLDV8AoCsAYBN7qUSAflJvybDl0R5UdFbRfI4TLCQhR9hCAUtfKIswHdbDZGIzuMUr6qpQch+ClsXl+wCQR0NjActcNgAAAABJRU5ErkJggg==);} 63 | 64 | #random:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAARCQAAEQkAGJrNK4AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEaSURBVHjazNO/K8RxHMfxx/fuCAtXSseEklLHcKJuNOosykLZbP4BA5N/wHCLxZ9gYbAoPzYSyuTHYCE6UkK6zvK5+k7uDoPX8unz4/38vF593p+oUqn4rRL+QP8HEpUK2fh8AaNIflNTxgmK1YVUbHMJqw0Y6MJKPM5UgwBYxkwc0oHXBiHvaK9CInwgh806AVsYwQuSKewjj0PMYhwPuMZjuLEFafQig0WsYwJHKYwFeh7TGMQQOkPMpvAiTwF+gbkAgFxUKmSHsY1uvOEWA99EuQpu2nCPyQROsRMOtNYAQH8AwC6OE7EG+onK8WYroie46Kuj+AaXWItDzrGHA2zUcBZhPoxn8b+TRgmfaK7DyXNotAzuvgYAbyA4nkq8OzEAAAAASUVORK5CYII=); cursor: pointer;} 65 | #brille { float: right; margin-left: 10px; margin-top: 2px; height: 17px; width: 17px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAABJ0AAASdAHeZh94AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEJSURBVHjanNStSwRBGMfxzy4LokGLYNBgsYhNQTAaNIhBMFhNxgtaNZiEKxZFDCarcMEqJjH48gf4D4ggF4TdDXJoGY9jce8cn/K8zpeZ4TeT5GUB4zjAtL/bG5p4yQLgEqvibRFbSV4WF9jGCU4jAOs4QivJy+IGyxjDR+ROvnCXIg+FyUjAaPBl2lNMIiHd+TRi0T5KjFQbdZA9LPXkDRziHp/V4awG0gx+Ams4xhU2fxuugyzgMQgKrusA/Y7zhPkQPwRN1FrWp/cc+p1BN55WhFO1zgChdSHDIX6N1MmPuocytEOyg7MIyErwRZKXxQxamP3HK25jIwn/yRx2MRUBeMc5br8HAIJvOCo2x8ekAAAAAElFTkSuQmCC);} 66 | #brille.active { cursor: pointer; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAABJ0AAASdAHeZh94AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEHSURBVHjanNO/K8VhFMfx1719SwwmMlAsFsNdKOUPYNAdlOI/MN6BSTEoJXexkMxWZfAXWAx+jAb+ACl9B8UdpGs59O12v5fHWc6Pz3nePefpPJW8XoMhbGPC3+0ZTTxkATjFgnSbxWqG/QAc4igBUMcedjOMR3ETrwmQ+4AMV/EWxdHEUQbDt6qFYiUR8tNfTTi0hRYGOoUyyAbmCnkDO7jCR2dzVgJphh/BIg5whuVuzWWQGdzEQsFFGaDXOLeYjvg6dqLUsh7aXeifv7148SbtLnovQLsI6Y/4KXFPvre7L0MeyRqOEyDz4d8reb02iXNM/eMX51jK8IgVrGMsAfCCE1x+DQDslCyF2ZAs+QAAAABJRU5ErkJggg==);)} 67 | #brille:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAABJ0AAASdAHeZh94AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEHSURBVHjanNO/K8VhFMfx1719SwwmMlAsFsNdKOUPYNAdlOI/MN6BSTEoJXexkMxWZfAXWAx+jAb+ACl9B8UdpGs59O12v5fHWc6Pz3nePefpPJW8XoMhbGPC3+0ZTTxkATjFgnSbxWqG/QAc4igBUMcedjOMR3ETrwmQ+4AMV/EWxdHEUQbDt6qFYiUR8tNfTTi0hRYGOoUyyAbmCnkDO7jCR2dzVgJphh/BIg5whuVuzWWQGdzEQsFFGaDXOLeYjvg6dqLUsh7aXeifv7148SbtLnovQLsI6Y/4KXFPvre7L0MeyRqOEyDz4d8reb02iXNM/eMX51jK8IgVrGMsAfCCE1x+DQDslCyF2ZAs+QAAAABJRU5ErkJggg==);)} 68 | 69 | 70 | body { overflow-x:hidden; overflow-y: auto; } 71 | #page { padding-left: 0px !important; margin: 0 0 0 0 !important; width: 100% !important; position: absolute !important;} 72 | body.two-sidebars div#head, body.two-sidebars div#page { padding: 0 !important;} 73 | #head { width: 100% !important } 74 | div.comment-vote { left: 5px !important;} 75 | .item-comments { border-right: 3px solid rgb(42, 46, 49); background: none repeat scroll 0% 0% rgba(23, 23, 24, 0.89); overflow-x:hidden; top: 51px !important; width: 352px !important; height: calc(100% - 51px) !important;} 76 | .item-container-content { overflow: visible !important; padding-left: 23%; display: table-cell; vertical-align: middle;} 77 | div.item-container { padding-bottom: 0px !important; z-index: 2; background: rgba(0, 0, 0, 0.9) !important; position: fixed !important; display: table; height: calc(100% - 52px) !important; width: 100% !important; } 78 | div.stream-row { clear: none !important; } 79 | #main-view { max-width: 101% !important; width: 101% !important; } 80 | .user-info { margin: 20px 30px 0 0 !important; } 81 | #pr0gramm-logo { margin-left: 15px !important; } 82 | .item-pointer { display: none !important; } 83 | span.flags {margin-left: 120px; float: none !important; color: #FFF !important; text-shadow: 0px 2px 3px rgb(5, 5, 5);} 84 | a.item-fullsize-link { right: 10px !important; position: absolute; color: #fff; opacity: 0.7; padding: 0 24px; font-size: 48px; right: 0; top: 0; text-shadow: 0 0 3px #000; z-index: 10;} 85 | a.item-fullsize-link:hover { color: #ee4d2e; opacity: 1; text-shadow: none;} 86 | //.item-container-content img { max-height: calc(100% - 200px);} 87 | .item-image { max-height: calc(100vh - 200px); max-width: calc(100vw - 600px) !important;} 88 | video.item-image { width: auto;} 89 | div.video-position-bar { max-width: calc(100vw - 600px) !important;} 90 | div.item-tags { height: 37px; padding: 4px 0 8px 240px !important;} 91 | #head-menu { left: 200px; position: absolute;} 92 | div.in-pane { margin-left: -5px} 93 | 94 | #filter-menu { left: 318px !important;} 95 | #footer-links { line-height: 1.6 !important; text-align: center !important; top: 7px; left: auto !important; right: 340px !important; height: 20px; width: 160px !important; bottom: 0px !important; margin: 0 !important} 96 | #footer-links a { color: rgb(238, 77, 46);} 97 | #footer-links div:nth-child(2n) a { color: rgb(155, 155, 155);} 98 | #footer-links div:nth-child(2n) a:hover{color:#F5F7F6;} 99 | .item-image-wrapper { margin: 0px auto;}//max-width: calc(100% - 600px); 100 | div.item-vote { left: 80px;} 101 | ::-webkit-scrollbar { width: 10px;} ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); -webkit-border-radius: 7px; border-radius: 7px;} 102 | ::-webkit-scrollbar-thumb { border-radius: 7px; -webkit-border-radius: 7px; background: #949494; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); } 103 | 104 | .ssb_down {display:none;background:#000;bottom:0;cursor:pointer;position:absolute;right:0;} 105 | .ssb_sb {border-radius: 7px; -webkit-border-radius: 7px; background: rgb(102, 102, 102); -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5);cursor:pointer;position:absolute;right:0;} 106 | .ssb_sb_down {} 107 | .ssb_sb_over {background: #777;} 108 | .ssb_st {background: #2A2E31; height:100%; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);cursor:pointer;position:absolute;right:0;top:0;} 109 | .ssb_up {display:none;cursor:pointer;position:absolute;right:0;top:0;}; 110 | -------------------------------------------------------------------------------- /pr0gramm_dick.user.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name pr0gramm.com Dick by Seglor 3 | // @namespace https://github.com/Seglormeister/Pr0gramm.com-by-Seglor 4 | // @author Seglormeister 5 | // @description Verbessert das pr0gramm mit einigen Erweiterungen 6 | // @include /^https?://pr0gramm.com/.*$/ 7 | // @icon https://pr0gramm.com/media/pr0gramm-favicon.png 8 | // @version 1.6.0.6 9 | // @grant none 10 | // @require https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js 11 | // @updateURL https://github.com/Seglormeister/Pr0gramm.com-by-Seglor/raw/master/pr0gramm_dick.user.js 12 | // ==/UserScript== 13 | 14 | (function() { 15 | //¯\_(ツ)_/¯ 16 | 17 | function waitForPage(){ 18 | if(typeof p !== "undefined"){ 19 | // Verhindert Gewackel beim Scrollen 20 | p.View.Stream.Main.prototype.showItem = function($item, scrollTo) { 21 | if (this.$currentItem && $item.is(this.$currentItem)) { 22 | this.hideItem(); 23 | this._wasHidden = true; 24 | this.currentItemId = null; 25 | return; 26 | } 27 | this.$currentItem = $item; 28 | var $row = $item.parent(); 29 | var scrollTarget = 0; 30 | if (scrollTo == this.SCROLL.FULL) { 31 | scrollTarget = $row.offset().top - CONFIG.HEADER_HEIGHT + $item.height(); 32 | } else if (scrollTo == this.SCROLL.THUMB) { 33 | scrollTarget = $row.offset().top - CONFIG.HEADER_HEIGHT - this.rowMargin; 34 | } else { 35 | scrollTarget = $(document).scrollTop(); 36 | } 37 | var animate = !(scrollTo == this.SCROLL.FULL && this._scrolledToFullView); 38 | this._scrolledToFullView = (scrollTo == this.SCROLL.FULL); 39 | if (this.$itemContainer) { 40 | var previousItemHeight = this.$itemContainer.find('.item-image').height() || 0; 41 | } 42 | if (!$row.next().hasClass('item-container')) { 43 | if (this.$itemContainer) { 44 | if (this.$itemContainer.offset().top < $item.offset().top) { 45 | scrollTarget -= this.$itemContainer.innerHeight() + this.rowMargin * 2; 46 | } 47 | if (animate) { 48 | this.$itemContainer.find('.gpt').remove(); 49 | this.$itemContainer.slideUp('fast', function() { 50 | $(this).remove(); 51 | }); 52 | } else { 53 | this.$itemContainer.remove(); 54 | } 55 | } 56 | this.$itemContainer = this.$itemContainerTemplate.clone(true); 57 | this.$itemContainer.insertAfter($row); 58 | if (animate && !this.jumpToItem) { 59 | this.$itemContainer.slideDown('fast'); 60 | } else { 61 | this.$itemContainer.show(); 62 | } 63 | } 64 | var id = $item[0].id.replace('item-', ''); 65 | var itemData = this.stream.items[id]; 66 | var rowIndex = $item.prevAll().length; 67 | if (this.currentItemSubview) { 68 | this.currentItemSubview.remove(); 69 | } 70 | this.currentItemSubview = new p.View.Stream.Item(this.$itemContainer, this); 71 | this.currentItemSubview.show(rowIndex, itemData, previousItemHeight, this.jumpToComment); 72 | this.jumpToComment = null; 73 | //this.prefetch($item); 74 | this.stream.loadInfo(itemData.id, this.prefetch.bind(this, $item)); 75 | if (!this.jumpToItem) { 76 | if (animate) { 77 | //$('body, html').stop(true, true).animate({ 78 | // scrollTop: scrollTarget 79 | //}, 'fast'); 80 | } else { 81 | //$('body, html').stop(true, true).scrollTop(scrollTarget); 82 | } 83 | } 84 | this.currentItemId = id; 85 | } 86 | 87 | p.View.Stream.Main.prototype.loaded = function(items, position, error) { 88 | this.itemsPerRow = p.mainView.thumbsPerRow; 89 | this.$container.find('.loader').remove(); 90 | if (!items || !items.length) { 91 | var msg = null; 92 | var fm = null; 93 | if (error && (fm = error.match(/^(nsfw|nsfl|sfw)Required$/))) { 94 | msg = 'Das Bild wurde als ' + fm[1].toUpperCase() + ' markiert.
' + 95 | (p.user.id ? 'Ändere deine Filter-Einstellung,' : 'Melde dich an,') + ' wenn du es sehen willst.' 96 | } else if (!this.hasItems) { 97 | msg = this.tab === 'stalk' ? 'Du stelzt noch keine anderen Accounts ¯\\_(ツ)_/¯' : 'Nichts gefunden ¯\\_(ツ)_/¯'; 98 | } 99 | if (msg) { 100 | this.$container.html('

' + msg + '

'); 101 | } 102 | return; 103 | } 104 | if (position == p.Stream.POSITION.PREPEND) { 105 | var prevHeight = $('#main-view').height(); 106 | var firstRow = this.$streamContainer.find('.stream-row:first'); 107 | var placeholders = firstRow.find('.thumb-placeholder'); 108 | var numPlaceholders = placeholders.length 109 | if (numPlaceholders) { 110 | var html = ''; 111 | for (var i = 0; i < numPlaceholders; i++) { 112 | html += this.buildItem(items[items.length - numPlaceholders - 1 + i]); 113 | } 114 | placeholders.remove(); 115 | firstRow.prepend(this.prepareThumbsForInsertion(html)); 116 | } 117 | var html = this.buildItemRows(items, 0, items.length - numPlaceholders, position); 118 | this.$streamContainer.prepend(this.prepareThumbsForInsertion(html)); 119 | var newHeight = $('#main-view').height() - (117 - 52); 120 | //$(document).scrollTop($(document).scrollTop() + (newHeight - prevHeight)); 121 | } else if (position == p.Stream.POSITION.APPEND) { 122 | var lastRow = this.$streamContainer.find('.stream-row:last'); 123 | var itemCount = lastRow.find('.thumb').length; 124 | var fill = 0; 125 | if (itemCount % this.itemsPerRow != 0) { 126 | var html = ''; 127 | fill = this.itemsPerRow - itemCount; 128 | for (var i = 0; i < fill; i++) { 129 | html += this.buildItem(items[i]); 130 | } 131 | lastRow.append(this.prepareThumbsForInsertion(html)); 132 | } 133 | var html = this.buildItemRows(items, fill, items.length, position); 134 | this.$streamContainer.append(this.prepareThumbsForInsertion(html)); 135 | } 136 | if (this.jumpToItem) { 137 | var target = $('#item-' + this.jumpToItem); 138 | if (target.length) { 139 | //$(document).scrollTop(target.offset().top - CONFIG.HEADER_HEIGHT); 140 | this.showItem(target, this.SCROLL.THUMB); 141 | } 142 | this.jumpToItem = null; 143 | } 144 | this.loadInProgress = false; 145 | this.hasItems = true; 146 | } 147 | 148 | p.View.Stream.Item.prototype.template = '
+
<
>
+ -
 
 
{item.up} Up, {item.down} Down
* *
{item.date.relativeTime(true)} von {item.user} s {{item.source.hostName()}} supload g  Bild googeln [del] [phash] {p.Stream.FLAG_NAME[item.flags]}
'; 149 | 150 | p.View.Stream.Item = p.View.Stream.Item.extend({ 151 | show: function(rowIndex, itemData, defaultHeight, jumpToComment) { 152 | this.parent( rowIndex, itemData, defaultHeight, jumpToComment ); 153 | this._updateBar( itemData.up, itemData.down ); 154 | }, 155 | vote: function(ev, vote) { 156 | this.parent( ev, vote ); 157 | this._updateBenis(); 158 | }, 159 | _updateBenis: function() { 160 | $('.ext-vote').text( this.data.item.up + ' Up, ' + this.data.item.down + ' Down' ); 161 | this._updateBar(); 162 | }, 163 | _updateBar: function() { 164 | var total = this.data.item.up + this.data.item.down; 165 | if( !total ) { 166 | $('.ext-bar').css( 'opacity', 0 ); 167 | } else { 168 | $('.ext-bar').css( 'opacity', 1 ); 169 | 170 | var ratio_up = this.data.item.up / total; 171 | var ratio_down = 1.0 - ratio_up; 172 | if(ratio_up>=ratio_down) { 173 | $('.ext-bar-item-up').css('background-color', "#A7D713"); 174 | $('.ext-bar-item-down').css('background-color', "#55585A"); 175 | } else { 176 | $('.ext-bar-item-up').css('background-color', "#55585A"); 177 | $('.ext-bar-item-down').css('background-color', "#EE4D2E"); 178 | } 179 | 180 | $('.ext-bar-item-up').css( 'width', Math.round(ratio_up * 100) + "px" ); 181 | $('.ext-bar-item-down').css( 'width', Math.round(ratio_down * 100) + "px" ); 182 | } 183 | } 184 | }); 185 | 186 | 187 | // Comments Template 188 | p.View.Stream.Comments.prototype.template = '
c {"Kommentar".inflect(commentCount)}
0) { ?> [ Neuste | Top ]
+ -
{c.content.format()}
OP {c.name} {"Punkt".inflect(c.score)} ●●● r antworten [ del / edit ]
'; 189 | 190 | p.View.Stream.Comments.SortTime = function(a, b) { 191 | return (b.created - a.created); 192 | } 193 | 194 | p.View.Stream.Comments.prototype.loaded = function(item) { 195 | 196 | item.id = (item.id || this.data.itemId); 197 | if (localStorage.getItem('comorder')) { 198 | if (localStorage.getItem('comorder') == 'new') { 199 | this.data.linearComments = (item.id <= item.id); 200 | }else if (localStorage.getItem('comorder') == 'top') { 201 | this.data.linearComments = (item.id <= CONFIG.LAST_LINEAR_COMMENTS_ITEM); 202 | } 203 | } else{ 204 | localStorage.setItem('comorder', 'top'); 205 | this.data.linearComments = (item.id <= CONFIG.LAST_LINEAR_COMMENTS_ITEM); 206 | } 207 | 208 | if (item.commentId) { 209 | p.user.voteCache.votes.comments[item.commentId] = 1; 210 | this.data.params.comment = 'comment' + item.commentId; 211 | } 212 | this.data.comments = this.prepareComments(item.comments); 213 | this.stream.items[this.data.params.id].comments = item.comments; 214 | this.data.commentCount = item.comments.length; 215 | this.data.tab = this.parentView.parentView.tab || 'new'; 216 | this.data.itemId = item.id; 217 | if (item.user) this.data.op = item.user; 218 | this.render(); 219 | } 220 | 221 | // Remove span class sorter in comments 222 | p.View.Stream.Comments.prototype.showReplyForm = function(ev) { 223 | if (!p.mainView.requireLogin()) { 224 | return false; 225 | } 226 | var $foot = $(ev.currentTarget.parentNode); 227 | if ($foot.has('.comment-form').length) { 228 | return; 229 | } 230 | var parentId = ev.currentTarget.href.split(':comment')[1]; 231 | var $form = this.$commentForm.clone(true); 232 | $form.find('input.cancel').show(); 233 | $form.find('input[name=parentId]').val(parentId); 234 | $form.find('span.sorter').remove(); 235 | $foot.append($form); 236 | $form.find('textarea').val('').addClass('reply').focus(); 237 | return false; 238 | } 239 | 240 | }else{ 241 | console.log('p undefined'); 242 | setInterval(function(){ 243 | waitForPage(); 244 | },250); 245 | } 246 | } 247 | waitForPage(); 248 | 249 | var spacepressed = false; 250 | var wheelLast = 0; 251 | var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 252 | 253 | // Random Button und Bereits gesehen Button einfügen 254 | var valueseen = localStorage.getItem('alreadyseen')=='on'? 'active': ''; 255 | $('#head-menu').append(''); 256 | 257 | /****/// CSS 258 | var css = '#upload-form input[type="submit"] { position:relative; top: 420px; left: 350px; }'+ 259 | '.tags { padding-left:3px; width:100%;} div.item-tags { padding: 4px 0 8px 14% !important;} div.tagsinput { position:absolute; } input[value="Tags speichern"],input[value="Abbrechen"] { float:right; }'+ 260 | '.comments-large-rectangle { overflow: hidden; height:auto; position:px; width:292px; right:0;top:0; position:relative; } .comments-large-rectangle > a > img { width: 280px; } '+ 261 | '#footer-links {z-index:200;} div.item-tags { padding: 4px 0 8px 20%;} div.item-info { text-align:center;} '+ 262 | '#zahlbreite { color: #FFFFFF; margin: 27px 0 0 15px; float: left;} div.stream-row { clear:right; }'+ 263 | 264 | '.ui-widget-content {border: 1px solid #AAAAAA;color: #222222;}'+ 265 | '.ui-slider { position: relative; text-align: left;}'+ 266 | '.ui-slider-horizontal { height: 0.8em;}'+ 267 | '.ui-corner-all { border-radius: 4px;}'+ 268 | '.ui-slider-horizontal .ui-slider-range { height: 100%; top: 0;}'+ 269 | '.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {'+ 270 | 'background: #E6E6E6; border: 1px solid #D3D3D3; color: #555555; font-weight: normal;}'+ 271 | '.ui-slider-horizontal .ui-slider-handle { margin-left: -0.6em; top: -0.3em;}'+ 272 | '.ui-slider .ui-slider-handle { cursor: default; height: 1.2em; position: absolute; width: 1.2em; z-index: 2;}'+ 273 | '#slider { float: left; clear: left; width: 300px; margin: 30px 15px 5px; }#slider .ui-slider-range { background: #EE4D2E; } #slider .ui-slider-handle { border-color: #EE4D2E; }'+ 274 | '@media screen and (max-width:1400px){ div#head {margin: 0 0 0 0 !important;} '+ 275 | '.item-comments {width: 23% !important;}} '+ 276 | 'div.item-details {padding: 8px 0px 8px 50px;}'+ 277 | 278 | '#head { padding-left: 0px !important; z-index:200; }'+ 279 | '.stream-next, .stream-prev { padding: 200px 0 0 !important; margin: 200px 0px 0px !important; position: fixed !important; color: rgba(245, 247, 246, 0.29) !important; font-size: 38px !important; }'+ 280 | '.stream-next:hover, .stream-prev:hover { color: rgba(238, 77, 46, 1.0) !important; }'+ 281 | '.stream-prev { left: 24% !important;}'+ 282 | '.item-comments { -webkit-transform: translateZ(0); position: fixed !important; top: 0; left: 0; width: 300px; height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden;}'+ 283 | '.item-comments textarea.comment { resize: none; box-shadow: 0 0 0 2px rgba(72, 72, 72, 0.36);}'+ 284 | 'div.comment-box > div.comment-box { padding: 0 0 0 14px; background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.1) !important; border-left: 1px solid #292929;}'+ 285 | 286 | 287 | '@-webkit-keyframes fadeInLeft { 0% { opacity: 1; -webkit-transform: translateX(-400px);} 100% { opacity: 1; -webkit-transform: translateX(0); } }'+ 288 | '@keyframes fadeInLeft { 0% { opacity: 1; transform: translateX(-400px);} 100% { opacity: 1; transform: translateX(0); } }'+ 289 | '.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;}'+ 290 | '.commentview { background: url("https://i.imgur.com/frLdEe2.png"); float: right; cursor: pointer; background-size: 18px 18px; height: 18px; width: 18px;}'+ 291 | '.commentview:hover { background: url("https://i.imgur.com/Am2MFVM.png"); background-size: 18px 18px; height: 18px; width: 18px;}'+ 292 | 'div.item-comments.wide { width: 40% !important;}'+//($(window).width() * 0.4) 293 | 'div.item-comments .second .wide { width: 100% !important;}'+ 294 | 'div.item-container-content.wide { padding-left: 40% !important;}'+ 295 | 'div.item-container-content.wide .item-image-wrapper { max-width: 90% !important;}'+ 296 | 'div.item-container-content.wide .item-image { max-width: 100% !important;}'+ 297 | 'div.item-container-content.wide .stream-prev { left: 40% !important;}'+ 298 | 299 | 'span.vote-fav.wide { left: 23% !important; top: 22% !important;}'+ 300 | '.commentfarbe1 { border-left: 2px solid rgb(51, 52, 150) !important;}'+ 301 | '.commentfarbe2 { border-left: 2px solid rgba(48, 221, 22, 0.72) !important;}'+ 302 | '.commentfarbe3 { border-left: 2px solid rgba(254, 137, 6, 0.85) !important;}'+ 303 | '.commentfarbe4 { border-left: 2px solid rgba(245, 0, 0, 0.77) !important;}'+ 304 | '.commentfarbe5 { border-left: 2px solid rgba(167, 22, 221, 0.72) !important;}'+ 305 | '.opuser .user:before { content: \'OP\'; color: #FFF; padding: 1px 3px; vertical-align: baseline; font-weight: bold; border-radius: 0.25em; background-color: rgb(238, 77, 46); margin-right: 5px; }'+ 306 | 307 | 'div.comments-head { background: rgba(42, 46, 49, 0.62);}'+ 308 | 'div.comment { margin: 0px 0px 2px !important; padding-top: 5px; border: 1px solid rgba(10, 10, 11, 0.46); background: rgba(26, 27, 30, 0.7); border-radius: 2px;}'+ 309 | '.vote-fav { left: 23% !important; top: 30px !important;}'+ 310 | '.comments-large-rectangle { position:absolute; width: 0px;}'+ 311 | '.side-wide-skyscraper { display:none;}'+ 312 | 'form.tag-form { margin: 8px 70px 0px; width: 640px;}'+ 313 | '.sorter, .sorter a { color: rgba(155, 155, 155, 1); font-size: 0.94em;}'+ 314 | '#com-new { padding-left: 90px} #com-new, #com-top { margin: 0px 3px;}'+ 315 | '#com-new.active, #com-new:hover { color: #EE4D2E;} #com-top.active, #com-top:hover { color: #EE4D2E;}'+ 316 | '#user-admin, #user-ban { top: 126px; }'+ 317 | '#head-content:after { left: 15px !important;}'+ 318 | '#head-content { opacity: 0.97; background-color: #040405 !important; border-bottom: 2px solid #232326;}'+ 319 | '.pane, .pane-head, .tab-bar, .user-stats, .in-pane { width: 792px; margin: 0 auto !important;}'+ 320 | '#random { float: right; margin-top: 2px; margin-left: 10px; height: 16px; width: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAARCQAAEQkAGJrNK4AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEfSURBVHjazNK/K8VRHMbx1/dehIVbSpcJJWVguFKMRmUxGCibP8Ji8g8Y7mIxmxgYLEpXGUgokx+DhQhd9+tH0rUc+k7X9WPwWU6ncz7v8zyf80TlctlvK+UP6v9Aah4e4+R+BgNIV+h5wz7yn5DE4SzmvyGgFXMQFeMSjGH1B04msPwxk2bE3wQ8o+ljsBFekMNKlYA19KOIdFSMSwUMYxuT2ME1znATXqxHBh3IYgiLGMFuDQYDfRjj6EEvWoLN2vAjdwF+jKkAgFxUjEt9WEcbnnCB7gpWToOaRlxhNIUDbIQLDV8AoCsAYBN7qUSAflJvybDl0R5UdFbRfI4TLCQhR9hCAUtfKIswHdbDZGIzuMUr6qpQch+ClsXl+wCQR0NjActcNgAAAABJRU5ErkJggg==);} '+ 321 | 322 | '#random:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAARCQAAEQkAGJrNK4AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEaSURBVHjazNO/K8RxHMfxx/fuCAtXSseEklLHcKJuNOosykLZbP4BA5N/wHCLxZ9gYbAoPzYSyuTHYCE6UkK6zvK5+k7uDoPX8unz4/38vF593p+oUqn4rRL+QP8HEpUK2fh8AaNIflNTxgmK1YVUbHMJqw0Y6MJKPM5UgwBYxkwc0oHXBiHvaK9CInwgh806AVsYwQuSKewjj0PMYhwPuMZjuLEFafQig0WsYwJHKYwFeh7TGMQQOkPMpvAiTwF+gbkAgFxUKmSHsY1uvOEWA99EuQpu2nCPyQROsRMOtNYAQH8AwC6OE7EG+onK8WYroie46Kuj+AaXWItDzrGHA2zUcBZhPoxn8b+TRgmfaK7DyXNotAzuvgYAbyA4nkq8OzEAAAAASUVORK5CYII=); cursor: pointer;}'+ 323 | '#brille { float: right; margin-left: 10px; margin-top: 2px; height: 17px; width: 17px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAABJ0AAASdAHeZh94AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEJSURBVHjanNStSwRBGMfxzy4LokGLYNBgsYhNQTAaNIhBMFhNxgtaNZiEKxZFDCarcMEqJjH48gf4D4ggF4TdDXJoGY9jce8cn/K8zpeZ4TeT5GUB4zjAtL/bG5p4yQLgEqvibRFbSV4WF9jGCU4jAOs4QivJy+IGyxjDR+ROvnCXIg+FyUjAaPBl2lNMIiHd+TRi0T5KjFQbdZA9LPXkDRziHp/V4awG0gx+Ams4xhU2fxuugyzgMQgKrusA/Y7zhPkQPwRN1FrWp/cc+p1BN55WhFO1zgChdSHDIX6N1MmPuocytEOyg7MIyErwRZKXxQxamP3HK25jIwn/yRx2MRUBeMc5br8HAIJvOCo2x8ekAAAAAElFTkSuQmCC);}'+ 324 | '#brille.active { cursor: pointer; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAABJ0AAASdAHeZh94AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEHSURBVHjanNO/K8VhFMfx1719SwwmMlAsFsNdKOUPYNAdlOI/MN6BSTEoJXexkMxWZfAXWAx+jAb+ACl9B8UdpGs59O12v5fHWc6Pz3nePefpPJW8XoMhbGPC3+0ZTTxkATjFgnSbxWqG/QAc4igBUMcedjOMR3ETrwmQ+4AMV/EWxdHEUQbDt6qFYiUR8tNfTTi0hRYGOoUyyAbmCnkDO7jCR2dzVgJphh/BIg5whuVuzWWQGdzEQsFFGaDXOLeYjvg6dqLUsh7aXeifv7148SbtLnovQLsI6Y/4KXFPvre7L0MeyRqOEyDz4d8reb02iXNM/eMX51jK8IgVrGMsAfCCE1x+DQDslCyF2ZAs+QAAAABJRU5ErkJggg==);)}'+ 325 | '#brille:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAABJ0AAASdAHeZh94AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEHSURBVHjanNO/K8VhFMfx1719SwwmMlAsFsNdKOUPYNAdlOI/MN6BSTEoJXexkMxWZfAXWAx+jAb+ACl9B8UdpGs59O12v5fHWc6Pz3nePefpPJW8XoMhbGPC3+0ZTTxkATjFgnSbxWqG/QAc4igBUMcedjOMR3ETrwmQ+4AMV/EWxdHEUQbDt6qFYiUR8tNfTTi0hRYGOoUyyAbmCnkDO7jCR2dzVgJphh/BIg5whuVuzWWQGdzEQsFFGaDXOLeYjvg6dqLUsh7aXeifv7148SbtLnovQLsI6Y/4KXFPvre7L0MeyRqOEyDz4d8reb02iXNM/eMX51jK8IgVrGMsAfCCE1x+DQDslCyF2ZAs+QAAAABJRU5ErkJggg==);)}'+ 326 | 327 | 328 | 'body { overflow-x:hidden; overflow-y: auto; }'+ 329 | '#page { padding-left: 0px !important; margin: 0 0 0 0 !important; width: 100% !important; position: absolute !important;}'+ 330 | 'body.two-sidebars div#head, body.two-sidebars div#page { padding: 0 !important;}'+ 331 | '#head { width: 100% !important }'+ 332 | 'div.comment-vote { left: 5px !important;}'+ 333 | '.item-comments { height: calc(100vh - 51px) !important; border-right: 3px solid rgb(42, 46, 49); background: none repeat scroll 0% 0% rgba(23, 23, 24, 0.89); overflow-x:hidden; top: 51px !important; width: 352px !important;}' +//'+high+' 334 | '.item-container-content { padding-left: 15%; overflow: visible !important; display: table-cell; vertical-align: middle;}'+ 335 | 'div.item-container { padding-bottom: 0px !important; z-index: 2; background: rgba(0, 0, 0, 0.9) !important; position: fixed !important; display: table; height: calc(100% - 52px) !important; width: 100% !important; }'+//'+highcontainer+'px 336 | 'div.stream-row { clear: none !important; }'+ 337 | '#main-view { max-width: 101% !important; width: 101% !important; }'+ 338 | '.user-info { margin: 20px 30px 0 0 !important; }'+ 339 | '#pr0gramm-logo { margin-left: 15px !important; }'+ 340 | '.item-pointer { display: none !important; }'+ 341 | 'span.flags {margin-left: 120px; float: none !important; text-shadow: 0px 2px 3px rgb(5, 5, 5);}'+ 342 | 'span.flags-1 { color: #A7D713 !important; background-color: transparent !important;}'+ 343 | 'span.flags-2 { color: #F6AB09 !important; background-color: transparent !important;}'+ 344 | 'span.flags-4 { color: #E41B1B !important; background-color: transparent !important;}'+ 345 | 'a.item-fullsize-link { right: 10px !important; position: absolute; color: #fff; opacity: 0.7; padding: 0 24px; font-size: 48px; right: 0; top: 0; text-shadow: 0 0 3px #000; z-index: 10;}'+ 346 | 'a.item-fullsize-link:hover { color: #ee4d2e; opacity: 1; text-shadow: none;}'+ 347 | //'.item-container-content img { max-height: calc(100% - 200px);}'+//'+highitemimage+'px 348 | '.item-image { max-height: calc(100vh - 200px);}'+//max-width: calc(100vw - 600px) !important; '+highitemimage+'px '+widthitemimage+'px 349 | 'video.item-image { width: auto;}'+ 350 | 'div.video-position-bar { max-width: calc(100vw - 600px) !important;}'+//'+widthitemimage+'px 351 | 'div.item-tags { height: 37px; padding: 4px 0 8px 240px !important;}'+ 352 | '#head-menu { left: 200px; position: absolute;}'+ 353 | 'div.in-pane { margin-left: -5px}'+ 354 | 355 | '#filter-menu { left: 318px !important;}'+ 356 | '#footer-links { line-height: 1.6 !important; text-align: center !important; top: 7px; left: auto !important; right: 340px !important; height: 20px; width: 160px !important; bottom: 0px !important; margin: 0 !important}'+ 357 | '#footer-links a { color: rgb(238, 77, 46);}'+ 358 | '#footer-links div:nth-child(2n) a { color: rgb(155, 155, 155);}'+ 359 | '#footer-links div:nth-child(2n) a:hover{color:#F5F7F6;}'+ 360 | '.item-image-wrapper { margin: 0px auto;}'+//max-width: calc(100% - 600px); '+widthitemimage+'px 361 | 'div.item-vote { left: 13%;}'+ 362 | '.item-vote * { text-align: left !important;}'+ 363 | '::-webkit-scrollbar { width: 10px;} ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); -webkit-border-radius: 7px; border-radius: 7px;}'+ 364 | '::-webkit-scrollbar-thumb { border-radius: 7px; -webkit-border-radius: 7px; background: #949494; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); }'+ 365 | 366 | '.ssb_down {display:none;background:#000;bottom:0;cursor:pointer;position:absolute;right:0;}'+ 367 | '.ssb_sb {border-radius: 7px; -webkit-border-radius: 7px; background: rgb(102, 102, 102); -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5);cursor:pointer;position:absolute;right:0;}'+ 368 | '.ssb_sb_down {}'+ 369 | '.ssb_sb_over {background: #777;}'+ 370 | '.ssb_st {background: #2A2E31; height:100%; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);cursor:pointer;position:absolute;right:0;top:0;}'+ 371 | '.ssb_up {display:none;cursor:pointer;position:absolute;right:0;top:0;}'+ 372 | 373 | '.ext-vote { color: #BBB; }'+ 374 | '.ext-bar { overflow: hidden; padding-top: 5px; padding-bottom: 2px; }'+ 375 | '.ext-bar div { height: 2px; float: left; transition: width 0.2s ease-out; }'+ 376 | 377 | 'svg.flags { position: absolute; left: 0; top: 0; z-index: 1; width: 20px; height: 20px; margin-left: -22px;}'; 378 | 379 | // CSS Style hinzufügen 380 | var node = document.createElement("style"); 381 | node.type = "text/css"; 382 | node.appendChild(document.createTextNode(css)); 383 | var heads = document.getElementsByTagName("head"); 384 | if (heads.length > 0) { 385 | heads[0].appendChild(node); 386 | } else { 387 | document.documentElement.appendChild(node); 388 | } 389 | 390 | 391 | // INDEXEDDB 392 | window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; 393 | window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; 394 | window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; 395 | 396 | if (!window.indexedDB) { 397 | window.alert("Dein Brauser unterstützt keine Version von IndexedDB. Das 'bereits angesehen' Feature wird dir nicht zur Verfügung stehen. Das pr0gramm mag dich trotzdem."); 398 | } 399 | 400 | 401 | function saveid() { 402 | //console.log('saveid'); 403 | if ($('.item-image').length && window.location.pathname.match('/([0-9]{2,7})')) { 404 | var db; 405 | var open = indexedDB.open("UploadsSeen", 1); 406 | open.onsuccess = function (evt) { 407 | db = this.result; 408 | console.log("openDb Save DONE"); 409 | var uploadid = window.location.pathname.match('/([0-9]{2,7})'); 410 | var trans = db.transaction("uploads", "readwrite"); 411 | trans.onsuccess = function(evt) { 412 | console.log("trans saved: ", uploadid[1]); 413 | }; 414 | trans.onerror = function(evt) { 415 | //console.log("trans Error:", evt.target.error.name); 416 | }; 417 | var store = trans.objectStore("uploads"); 418 | var requestAdd = store.add({id: uploadid[1], uploadid: uploadid[1]}); 419 | requestAdd.onsuccess = function(evt) { 420 | $('#item-' + uploadid[1]).append('
'); 421 | console.log("ID saved: ", uploadid[1]); 422 | }; 423 | requestAdd.onerror = function(evt) { 424 | //console.log("Save Error:", evt.target.error.name); 425 | }; 426 | }; 427 | open.onerror = function (evt) { 428 | console.log("openDb Error:", evt.target.errorCode); 429 | }; 430 | open.onupgradeneeded = function (evt) { 431 | console.log("openDb.onupgradeneeded"); 432 | var store = evt.target.result.createObjectStore( "uploads", { keyPath: "id"}); 433 | store.createIndex("uploadid", "uploadid", { unique: true }); 434 | }; 435 | } 436 | } 437 | 438 | function show_seenids() { 439 | //console.log('show_seenids'); 440 | if ($('#stream').length) { 441 | var ids = 0; 442 | var db; 443 | var open = indexedDB.open("UploadsSeen", 1); 444 | open.onsuccess = function (evt) { 445 | db = this.result; 446 | console.log("show_seenids: openDb Read DONE"); 447 | var trans = db.transaction("uploads", "readonly"); 448 | var store = trans.objectStore("uploads"); 449 | //var index = store.Index('uploadid'); 450 | if (window.location.pathname.match('/(top)')) { 451 | var first = 'item-999999'; 452 | }else{ 453 | var first = $('.stream-row a:first').attr('id'); 454 | } 455 | var last = $('#stream .stream-row:last').find('a:last').attr('id'); 456 | //if (!first || !last) { 457 | //return saveid(); 458 | //} 459 | var range = IDBKeyRange.bound(last.slice(5), first.slice(5)); 460 | store.openCursor(range, 'prevunique').onsuccess = function(event) { 461 | var cursor = event.target.result; 462 | var value = parseInt(cursor.value.uploadid); 463 | if (cursor) { 464 | 465 | if ($('#item-' + value).children('div.seen').length == 0) { 466 | $('#item-' + value).append('
'); 467 | } 468 | ids++; 469 | cursor.continue(); 470 | }else{ 471 | // wird nicht aufgerufen 472 | console.log("show_seenids: No more entries!", ids); 473 | //add_seen_marker(); 474 | } 475 | }; 476 | store.openCursor(range, 'prevunique').onerror = function(event) { 477 | console.log("show_seenids: Db Read Error: ", event); 478 | }; 479 | }; 480 | open.onerror = function (evt) { 481 | console.log("openDb Error:", evt.target.errorCode); 482 | }; 483 | open.onupgradeneeded = function (evt) { 484 | console.log("openDb.onupgradeneeded"); 485 | var store = evt.target.result.createObjectStore( "uploads", { keyPath: "id"}); 486 | db = evt.target.result; 487 | }; 488 | } 489 | } 490 | 491 | // bereits gesehen Markierung laden 492 | function add_seen_marker() { 493 | if (!$('.seen_marker').length && $('#brille').hasClass('active')) { 494 | var id = window.location.pathname.match('/([0-9]{2,7})'); 495 | if ($('#item-' + id[1] + ' > div.seen').length) { 496 | $('.item-container-content').append('[Bereits gesehen]'); 497 | } 498 | } 499 | } 500 | 501 | // Benis Anzeige 502 | var inbox = document.getElementById('inbox-link'), 503 | b = document.createElement('span'), 504 | getCookie = function(name) { 505 | var value = "; " + document.cookie, 506 | parts = value.split("; " + name + "="); 507 | if (parts.length == 2) { 508 | return parts.pop().split(";").shift(); 509 | } 510 | }, 511 | get = function (url, success, error) { 512 | var request = new XMLHttpRequest(); 513 | request.open('GET', url, true); 514 | 515 | request.onload = function() { 516 | if (request.status >= 200 && request.status < 400) { 517 | var data = JSON.parse(request.responseText); 518 | success(data); 519 | } else { 520 | } 521 | }; 522 | 523 | request.onerror = function() { 524 | error(); 525 | }; 526 | 527 | request.send(); 528 | }, 529 | update = function() { 530 | var cock = unescape(getCookie('me')); 531 | if (cock == "undefined") return; 532 | var me = JSON.parse(cock); 533 | var protocol = 'https'; 534 | if (window.location.protocol != "https:") protocol = 'http'; 535 | get(protocol + '://pr0gramm.com/api/profile/info?self=true&flags=7&name=' + escape(me.n), function(data){ 536 | b.innerHTML = data.user.score; 537 | }); 538 | }; 539 | 540 | label = document.createElement('div'); 541 | b.style.cssText = 'background-image: url("https://i.imgur.com/7Q2UJeU.png"); background-repeat: no-repeat; background-size: contain; background-position: left; padding-left: 20px; display: inline-box; height: 20px; margin-left: 12px;'; 542 | b.setAttribute('title', 'Dein Benis'); 543 | b.className = 'benisdisplay'; 544 | label.className = 'date-label'; 545 | label.style.cssText = 'position: absolute; left: 0px; right: 0px; bottom: 0px; text-align: center; font-size: 10px; color: #FFFFFF !important; text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black; background-color: rgba(0,0,0,.5);'; 546 | inbox.parentNode.insertBefore(b, inbox); 547 | update(); 548 | setInterval(update, 40000); 549 | 550 | // Observer für Seitenänderung 551 | observeDOM = (function(){ 552 | var MutationObserver = window.MutationObserver || window.WebKitMutationObserver, 553 | eventListenerSupported = window.addEventListener; 554 | 555 | return function(obj, callback, subtree){ 556 | if( MutationObserver ){ 557 | var obs = new MutationObserver(function(mutations, observer){ 558 | if (mutations[0].addedNodes.length || mutations[0].removedNodes.length){ 559 | callback(mutations); 560 | } 561 | }); 562 | obs.observe(obj, { 563 | childList: true, 564 | subtree: subtree 565 | }); 566 | } 567 | else if( eventListenerSupported ){ 568 | obj.addEventListener('DOMNodeInserted', callback, false); 569 | obj.addEventListener('DOMNodeRemoved', callback, false); 570 | } 571 | } 572 | })(); 573 | 574 | 575 | observeDOM( 576 | document.getElementById('page'), 577 | function(elements){ 578 | $.each(elements, function(idx, obj) { 579 | var test = jQuery(obj.target); 580 | var value = test[0].id || test[0].className; 581 | console.log(value); 582 | if (value.length > 12 && value.match('(item-comments)')) value = 'item-comments'; 583 | switch(value) { 584 | case "main-view": 585 | //console.log('header geladen'); 586 | headerchange(); 587 | break; 588 | case "stream": 589 | //console.log('stream changed'); 590 | streamchange(); 591 | break; 592 | case "item-container": 593 | console.log('neues Bild geöffnet'); 594 | commentschange(); 595 | imagechange(); 596 | break; 597 | case "item-comments": 598 | console.log('Comments geladen'); 599 | commentschange(); 600 | break; 601 | } 602 | }); 603 | }, 604 | true 605 | ); 606 | 607 | function commentschange() { 608 | // Kommentare einblenden 609 | /*if ($('.comments').length) { 610 | $('.comments-head').css('display', 'block'); 611 | $('.comment-form').css('display', 'block'); 612 | $('.comments').css('display', 'block'); 613 | //$('.comments-head').fadeIn(300); 614 | //$('.comment-form').fadeIn(300); 615 | //$('.comments').fadeIn(300); 616 | }*/ 617 | 618 | // Custom Scrollbar laden in den Comments, nicht bei Chrome 619 | if (!is_chrome && $('.item-comments').length && !$('.item-comments').hasClass('scroll')) { 620 | if ($('.comments').height() > ($('.item-comments').height()-125)) { 621 | ssb.scrollbar('item-comments'); 622 | $('.item-comments').addClass('scroll'); 623 | $('.item-comments').attr('style', 'border-right: 0 !important; background: rgba(23, 23, 24, 0.45) !important'); 624 | $('.item-comments:first').css('overflow', 'hidden'); 625 | if (is_chrome) { 626 | $('.item-comments .second').attr('style', function(i,s) { return 'top: 0px !important;' + s }); 627 | } 628 | } 629 | } 630 | 631 | // Kommentaransicht ändern 632 | if ($('.item-comments').length) { 633 | // nur einmalig einbinden 634 | var event = $._data( $('.commentview')[0], 'events' ); 635 | if (!event) { 636 | $('span.commentview').click(function() { 637 | $("div.item-container-content").toggleClass("wide"); 638 | $("div.item-comments").each(function(index) { 639 | $(this).toggleClass("wide"); 640 | }); 641 | 642 | //Scrollbalken anpassen 643 | if (!is_chrome) { 644 | if (!$('.item-comments').hasClass('scroll')) { 645 | if ($('.comments').height() > ($('.item-comments').height()-130)) { 646 | ssb.scrollbar('item-comments'); 647 | $('.item-comments').addClass('scroll'); 648 | $('.item-comments').attr('style', 'border-right: 0 !important; background: rgba(23, 23, 24, 0.45) !important'); 649 | $('.item-comments:first').css('overflow', 'hidden'); 650 | if (is_chrome) { 651 | $('.item-comments .second').attr('style', function(i,s) { return 'top: 0px !important;' + s }); 652 | } 653 | } 654 | }else{ 655 | ssb.refresh(); 656 | } 657 | } 658 | $("span.vote-fav").toggleClass("wide"); 659 | var value = $("div.item-container-content").hasClass("wide") ? 'wide' : 'normal'; 660 | localStorage.setItem('commentview', value); 661 | return false; 662 | }); 663 | } 664 | } 665 | 666 | // Kommentarsortierung laden 667 | if (!$('#com-new').hasClass('active') && !$('#com-top').hasClass('active')) { 668 | if (localStorage.getItem("comorder") != null) { 669 | $('#com-' + localStorage.getItem('comorder')).addClass('active'); 670 | }else{ 671 | $('#com-top').addClass('active'); 672 | } 673 | } 674 | 675 | // Click Events für Sortierung 676 | if ($('#com-new').length) { 677 | $('#com-new').click(function() { 678 | localStorage.removeItem('comorder'); 679 | $('#com-new').addClass('active'); 680 | $('#com-top').removeClass('active'); 681 | localStorage.setItem('comorder', 'new'); 682 | window.location.reload(true); 683 | return false; 684 | }); 685 | $('#com-top').click(function() { 686 | localStorage.removeItem('comorder'); 687 | $('#com-top').addClass('active'); 688 | $('#com-new').removeClass('active'); 689 | localStorage.setItem('comorder', 'top'); 690 | window.location.reload(true); 691 | return false; 692 | }); 693 | 694 | } 695 | 696 | // Zu Kommentar springen 697 | var commentid = window.location.pathname.split(':comment')[1]; 698 | if (commentid) { 699 | var top = document.getElementById('comment' + commentid).offsetTop - 20; 700 | $('.item-comments').scrollTop(top); 701 | } 702 | } 703 | 704 | function imagechange() { 705 | 706 | $('.item-image-wrapper').click(function(e) { 707 | if(e.target != this) return; 708 | $('.item-image:visible').click(); 709 | }); 710 | // bereits gesehen Markierung 711 | if ($('#brille').hasClass('active')) { 712 | saveid(); 713 | //add_seen_marker(); 714 | } 715 | 716 | // + bei resized Bildern hinzufügen 717 | if (!$('.item-fullsize-link').length) { 718 | var imgu = document.getElementsByClassName('item-image')[0]; 719 | if (imgu.naturalHeight > 460) { 720 | var link = imgu.getAttribute('src'); 721 | $('.item-image-wrapper').append('+'); 722 | } 723 | } 724 | 725 | // Scrollbar in Bildansicht ausblenden 726 | var stil = document.getElementsByTagName('html')[0]; 727 | if (stil.style.overflow != 'hidden') { 728 | stil.style.overflow = 'hidden'; 729 | } 730 | 731 | // zum passenden Thumb scrollen 732 | var itemId = document.URL; 733 | var itemname = '#item-' + itemId.substring(itemId.length - 6, itemId.length); 734 | var posi = $(itemname).offset().top - 52; 735 | if ($(window).scrollTop() != posi) { 736 | //window.scrollTo(0, posi); //ohne Animation 737 | $('html').stop(); 738 | $('html').animate({scrollTop: posi}, 300, 'swing', function() { return;}); 739 | } 740 | } 741 | 742 | function streamchange() { 743 | if (!$('.item-container').length) { 744 | var stil = document.getElementsByTagName('html')[0]; 745 | if (stil.style.overflowX != 'hidden' || stil.style.overflowY != 'auto') { 746 | stil.style.overflowX = 'hidden'; 747 | stil.style.overflowY = 'auto'; 748 | } 749 | } 750 | 751 | // Bereits gesehen Markierungen in den thumbs 752 | if ($('#brille').hasClass('active')) { 753 | //console.log('streamchange_show_seenids'); 754 | show_seenids(); 755 | } 756 | 757 | // SlideIn Effekt für Comments 758 | if ($('.stream-row').length) { 759 | $('.stream-row a').click(function() { 760 | if (!$('.item-comments:first').hasClass('fadeInLeft')) { 761 | $('.item-comments:first').addClass('fadeInLeft'); 762 | $('.item-comments:first').css({'-webkit-animation-duration': '1s', 'animation-duration': '1s', '-webkit-animation-fill-mode': 'both', 'animation-fill-mode': 'both'}); 763 | } 764 | }); 765 | } 766 | 767 | // Seite zentrieren links/rechts 768 | if ($('div#stream').css('margin-left') == '0px') { 769 | var mainwidth = $('#main-view' ).width(); 770 | var margin = (mainwidth-(Math.floor(mainwidth/132)*132))/2-15 + 'px'; 771 | $('div#stream').css('margin-left', margin); 772 | } 773 | 774 | } 775 | 776 | function headerchange() { 777 | if (!$('.item-container').length) { 778 | var stil = document.getElementsByTagName('html')[0]; 779 | if (stil.style.overflowX != 'hidden' || stil.style.overflowY != 'auto') { 780 | stil.style.overflowX = 'hidden'; 781 | stil.style.overflowY = 'auto'; 782 | } 783 | } 784 | 785 | // Bereits gesehen Button, nur einmal einbinden 786 | var event = $._data( $('#brille')[0], 'events' ); 787 | if ($('#brille').length && !event) { 788 | 789 | $('#brille').click(function() { 790 | $('#brille').toggleClass("active"); 791 | var value = $("#brille").hasClass("active")? 'on' : 'off'; 792 | localStorage.setItem('alreadyseen', value); 793 | if ($('#brille').hasClass('active')) { 794 | $('.seen').css('display', 'block'); 795 | $('.seen_marker').css('display', 'block'); 796 | if ($('.item-container').length) saveid(); 797 | show_seenids(); 798 | }else{ 799 | $('.seen').css('display', 'none'); 800 | $('.seen_marker').css('display', 'none'); 801 | } 802 | return false; 803 | }); 804 | } 805 | 806 | // Random Button aktualisieren 807 | if (document.getElementById('random').getAttribute('href') == '') prepareButton(); 808 | } 809 | 810 | // Space Vergrößerung und links/rechts Bildwechsel 811 | document.addEventListener("keydown", keydown, false); 812 | 813 | // Bild Zoom Maussteuerung 814 | function startDrag(e) { 815 | // determine event object 816 | if (!e) { 817 | var e = window.event; 818 | } 819 | if(e.preventDefault) e.preventDefault(); 820 | 821 | // IE uses srcElement, others use target 822 | targ = e.target ? e.target : e.srcElement; 823 | 824 | //if (targ.className != 'dragme') {return}; 825 | // calculate event X, Y coordinates 826 | offsetX = e.clientX; 827 | offsetY = e.clientY; 828 | 829 | // assign default values for top and left properties 830 | if(!targ.style.left) { targ.style.left='0px'}; 831 | if (!targ.style.top) { targ.style.top='0px'}; 832 | 833 | // calculate integer values for top and left 834 | // properties 835 | coordX = parseInt(targ.style.left); 836 | coordY = parseInt(targ.style.top); 837 | drag = true; 838 | 839 | // move div element 840 | document.onmousemove = dragDiv; 841 | return false; 842 | 843 | } 844 | 845 | function dragDiv(e) { 846 | if (!drag) {return}; 847 | if (!e) { var e= window.event}; 848 | // var targ=e.target?e.target:e.srcElement; 849 | // move div element 850 | targ.style.left=coordX+e.clientX-offsetX+'px'; 851 | targ.style.top=coordY+e.clientY-offsetY+'px'; 852 | return false; 853 | } 854 | 855 | function stopDrag() { 856 | drag=false; 857 | } 858 | 859 | var clickevent; 860 | function keydown(event) { 861 | if (event.keyCode == '32') { 862 | 863 | // falls textarea aktiv 864 | var el = document.activeElement; 865 | if (el && (el.tagName.toLowerCase() == 'input' && el.type == 'text' || el.tagName.toLowerCase() == 'textarea')) { 866 | return; 867 | } 868 | 869 | // Bild mit Space vergrößern 870 | if ($('.item-image').length) { 871 | event.preventDefault(); 872 | event.stopPropagation(); 873 | 874 | if (!spacepressed) { 875 | $(".item-image").css({ 'max-height': '100%', 'cursor': 'move', 'position': 'relative'}); 876 | if ($('.item-fullsize-link').length) { 877 | var full = $('.item-fullsize-link').attr('href'); 878 | $('.item-fullsize-link').attr('href', $('.item-image').attr('src')); 879 | $('.item-image').attr('src', full); 880 | } 881 | spacepressed = true; 882 | var events = $._data($('.item-image')[0], 'events'); 883 | clickevent = events.click[0].handler; 884 | $(".item-image").mousedown(function(e){ 885 | $(".item-image").unbind("click"); 886 | startDrag(e); 887 | }); 888 | $(".item-image").mouseup(function(e){ 889 | stopDrag(e); 890 | }); 891 | }else{ 892 | $(".item-image").unbind("mousedown"); 893 | $(".item-image").bind("click", clickevent); 894 | $(".item-image").css({ 'left': '0px', 'top': '0px', 'max-height': 'calc(100vh - 200px)', 'cursor': 'pointer'}); 895 | var full = $('.item-fullsize-link').attr('href'); 896 | $('.item-fullsize-link').attr('href', $('.item-image').attr('src')); 897 | $('.item-image').attr('src', full); 898 | 899 | spacepressed = false; 900 | } 901 | } 902 | } 903 | } 904 | 905 | 906 | // Image Scroll 907 | // Firefox 908 | document.addEventListener("DOMMouseScroll", handleWheel, false); 909 | // IE9, Chrome, Safari, Opera 910 | document.addEventListener("mousewheel", handleWheel, false); 911 | // IE 6/7/8 912 | if(!document.addEventListener) { 913 | document.attachEvent("onmousewheel", handleWheel); 914 | } 915 | 916 | function handleWheel(event) { 917 | 918 | if ($("div.item-container").length) { 919 | var coms = document.getElementsByClassName("item-comments"); 920 | if (isHover(coms[0])) { 921 | return; 922 | } 923 | 924 | event.preventDefault(); 925 | event.stopPropagation(); 926 | event.returnValue=false; 927 | 928 | var wheelWait = 200; 929 | var time = (new Date()).getTime(); 930 | var msec = time - wheelLast; 931 | wheelLast = time; 932 | if (msec < wheelWait) { 933 | return; 934 | } 935 | 936 | var delta = 0; 937 | if (!event) 938 | event = window.event; 939 | if (event.wheelDelta) { 940 | delta = event.wheelDelta/120; 941 | } else if (event.detail) { 942 | delta = -event.detail/3; 943 | } 944 | 945 | if(delta<0){ 946 | $('.stream-next').click(); 947 | }else{ 948 | $('.stream-prev').click(); 949 | } 950 | } 951 | } 952 | 953 | function isHover(e) { 954 | if (!e) return false; 955 | return (e.parentElement.querySelector(':hover') === e); 956 | } 957 | 958 | // Code für den Random Button 959 | function prepareButton() { 960 | if ($('.stream-row a:first').length) { 961 | var str = $('.stream-row a:first').attr('id'); 962 | lastId = str.slice(5, str.length); 963 | }else{ 964 | lastId = 620000; 965 | } 966 | localStorage.setItem('pr0latestId', lastId); 967 | var imageId = Math.floor((Math.random() * lastId) + 1); 968 | dingsda = document.getElementById('random'); 969 | dingsda.setAttribute('href', 'http://pr0gramm.com/new/' + imageId); 970 | } 971 | 972 | 973 | // Custom Scrollbar 974 | var ssb = { 975 | aConts : [], 976 | mouseY : 0, 977 | N : 0, 978 | asd : 0, 979 | sc : 0, 980 | sp : 0, 981 | to : 0, 982 | 983 | // constructor 984 | scrollbar : function (cont_id) { 985 | if (cont_id == 'item-comments') { var cont = document.getElementsByClassName(cont_id)[0]; } 986 | else if (cont_id == 'page') { var cont = document.getElementById(cont_id);} 987 | else if (cont_id == 'html') { var cont = document.getElementsByTagName('html')[0];} 988 | 989 | // perform initialization 990 | if (! ssb.init()) return false; 991 | 992 | var cont_clone = cont.cloneNode(false); 993 | cont_clone.style.overflow = "hidden"; 994 | cont.parentNode.appendChild(cont_clone); 995 | cont_clone.appendChild(cont); 996 | 997 | cont.className = cont.className.replace("fadeInLeft", ""); 998 | cont.className += ' second'; 999 | // adding new container into array 1000 | ssb.aConts[ssb.N++] = cont; 1001 | 1002 | cont.sg = false; 1003 | 1004 | //creating scrollbar child elements 1005 | cont.st = this.create_div('ssb_st', cont, cont_clone); 1006 | cont.sb = this.create_div('ssb_sb', cont, cont_clone); 1007 | cont.su = this.create_div('ssb_up', cont, cont_clone); 1008 | cont.sd = this.create_div('ssb_down', cont, cont_clone); 1009 | 1010 | // on mouse down processing 1011 | cont.sb.onmousedown = function (e) { 1012 | if (! this.cont.sg) { 1013 | if (! e) e = window.event; 1014 | 1015 | ssb.asd = this.cont; 1016 | this.cont.yZ = e.screenY; 1017 | this.cont.sZ = cont.scrollTop; 1018 | this.cont.sg = true; 1019 | 1020 | // new class name 1021 | this.className = 'ssb_sb ssb_sb_down'; 1022 | } 1023 | return false; 1024 | } 1025 | // on mouse down on free track area - move our scroll element too 1026 | cont.st.onmousedown = function (e) { 1027 | if (! e) e = window.event; 1028 | ssb.asd = this.cont; 1029 | 1030 | ssb.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 1031 | for (var o = this.cont, y = 0; o != null; o = o.offsetParent) y += o.offsetTop; 1032 | this.cont.scrollTop = (ssb.mouseY - y - (this.cont.ratio * this.cont.offsetHeight / 2) - this.cont.sw) / this.cont.ratio; 1033 | this.cont.sb.onmousedown(e); 1034 | } 1035 | 1036 | // onmousedown events 1037 | cont.su.onmousedown = cont.su.ondblclick = function (e) { ssb.mousedown(this, -1); return false; } 1038 | cont.sd.onmousedown = cont.sd.ondblclick = function (e) { ssb.mousedown(this, 1); return false; } 1039 | 1040 | //onmouseout events 1041 | cont.su.onmouseout = cont.su.onmouseup = ssb.clear; 1042 | cont.sd.onmouseout = cont.sd.onmouseup = ssb.clear; 1043 | 1044 | // on mouse over - apply custom class name: ssb_sb_over 1045 | cont.sb.onmouseover = function (e) { 1046 | if (! this.cont.sg) this.className = 'ssb_sb ssb_sb_over'; 1047 | return false; 1048 | } 1049 | 1050 | // on mouse out - revert back our usual class name 'ssb_sb' 1051 | cont.sb.onmouseout = function (e) { 1052 | if (! this.cont.sg) this.className = 'ssb_sb'; 1053 | return false; 1054 | } 1055 | 1056 | // onscroll - change positions of scroll element 1057 | cont.ssb_onscroll = function () { 1058 | //var coms = document.getElementsByClassName("comments")[0]; 1059 | 1060 | //if (isHover(coms[0])) { 1061 | if (cont_id == 'item-comments') { 1062 | this.ratio = this.offsetHeight / ($('.comments').outerHeight(true) + 131);//187+33 1063 | }else{ 1064 | this.ratio = ($(window).height()-52) / ($('.comments').outerHeight(true) + 187 + 53); //#main-view 1065 | //this.st.style.height = $('#main-view').height() + 'px'; 1066 | //this.sb.style.height = Math.ceil(this.ratio * 666) + 'px'; 1067 | } 1068 | this.sb.style.top = Math.floor(this.scrollTop * this.ratio) + 'px'; 1069 | //} 1070 | } 1071 | 1072 | // scrollbar width 1073 | cont.sw = 11; 1074 | 1075 | // start scrolling 1076 | cont.ssb_onscroll(); 1077 | ssb.refresh(); 1078 | 1079 | // binding own onscroll event 1080 | cont.onscroll = cont.ssb_onscroll; 1081 | var conte = document.getElementById('page'); 1082 | 1083 | //elem.onscroll = cont.ssb_onscroll; 1084 | return cont; 1085 | }, 1086 | 1087 | // initialization 1088 | init : function () { 1089 | if (window.oper || (! window.addEventListener && ! window.attachEvent)) { return false; } 1090 | 1091 | // temp inner function for event registration 1092 | function addEvent (o, e, f) { 1093 | if (window.addEventListener) { o.addEventListener(e, f, false); ssb.w3c = true; return true; } 1094 | if (window.attachEvent) return o.attachEvent('on' + e, f); 1095 | return false; 1096 | } 1097 | 1098 | // binding events 1099 | addEvent(window.document, 'mousemove', ssb.onmousemove); 1100 | addEvent(window.document, 'mouseup', ssb.onmouseup); 1101 | addEvent(window, 'resize', ssb.refresh); 1102 | return true; 1103 | }, 1104 | 1105 | // create and append div finc 1106 | create_div : function(c, cont, cont_clone) { 1107 | var o = document.createElement('div'); 1108 | o.cont = cont; 1109 | o.className = c; 1110 | cont_clone.appendChild(o); 1111 | return o; 1112 | }, 1113 | // do clear of controls 1114 | clear : function () { 1115 | clearTimeout(ssb.to); 1116 | ssb.sc = 0; 1117 | return false; 1118 | }, 1119 | // refresh scrollbar 1120 | refresh : function () { 1121 | for (var i = 0, N = ssb.N; i < N; i++) { 1122 | var o = ssb.aConts[i]; 1123 | o.ssb_onscroll(); 1124 | o.sb.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.sw + 'px'; 1125 | o.st.style.width = (o.sw + 6) + 'px'; 1126 | o.st.style.height = $(window).height() - 51 + 'px'; //'#main-view' 1127 | o.sb.style.height = Math.ceil(o.ratio * ($(window).height() - 51)) + 'px'; 1128 | o.sb.style.right = '3px'; 1129 | } 1130 | }, 1131 | // arrow scrolling 1132 | arrow_scroll : function () { 1133 | if (ssb.sc != 0) { 1134 | ssb.asd.scrollTop += 6 * ssb.sc / ssb.asd.ratio; 1135 | ssb.to = setTimeout(ssb.arrow_scroll, ssb.sp); 1136 | ssb.sp = 32; 1137 | } 1138 | }, 1139 | 1140 | 1141 | // scroll on mouse down 1142 | mousedown : function (o, s) { 1143 | if (ssb.sc == 0) { 1144 | // new class name 1145 | o.cont.sb.className = 'ssb_sb ssb_sb_down'; 1146 | ssb.asd = o.cont; 1147 | ssb.sc = s; 1148 | ssb.sp = 400; 1149 | ssb.arrow_scroll(); 1150 | } 1151 | }, 1152 | // on mouseMove binded event 1153 | onmousemove : function(e) { 1154 | if (! e) e = window.event; 1155 | // get vertical mouse position 1156 | ssb.mouseY = e.screenY; 1157 | if (ssb.asd.sg) ssb.asd.scrollTop = ssb.asd.sZ + (ssb.mouseY - ssb.asd.yZ) / ssb.asd.ratio; 1158 | }, 1159 | // on mouseUp binded event 1160 | onmouseup : function (e) { 1161 | if (! e) e = window.event; 1162 | var tg = (e.target) ? e.target : e.srcElement; 1163 | if (ssb.asd && document.releaseCapture) ssb.asd.releaseCapture(); 1164 | 1165 | // new class name 1166 | if (ssb.asd) ssb.asd.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'ssb_sb ssb_sb_over' : 'ssb_sb'; 1167 | document.onselectstart = ''; 1168 | ssb.clear(); 1169 | ssb.asd.sg = false; 1170 | } 1171 | } 1172 | 1173 | })(); 1174 | --------------------------------------------------------------------------------