HG-Optimierung

Vereinfachte Navigation auf Hartgeld.com

À partir de 2015-08-29. Voir la dernière version.

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==UserScript==
// @name        HG-Optimierung
// @namespace   hgtools
// @include     http://www.hartgeld.com/*
// @version     1.16
// @grant       none
// @description Vereinfachte Navigation auf Hartgeld.com
// ==/UserScript==

(function () { 

   ///////////////////////////////////////////////////////////////////////////////////
   // Startseite
   if (self == top) {
      
      // CSS
      var cssstring = (function () {/*
         <style>
         #heute {
            padding-top: 2px;
         }
         #olframe {
            display:none;
            height:100%;
            position:fixed;
            top:0;
            right:0;
            z-index:10000;
         }
         #dragbar {
            position: absolute;
            left: -12px;
            height:100%;
            width:10px;
            cursor: col-resize;
         }
         #closeborder {
             border: 1px solid #666;
             opacity: 0.8;
             float:left;
             position: absolute;
             left:-30px;
             background:#fff;
             border-radius:25px;
         }
         #close {
             top: 0px;
             left: 0px;
             position: relative;
             height:20px;
             width:20px;
             padding:4px;
             font-size:25px;
             display:block;
             text-decoration:none;
         }
         #lesefenster,
         #iframeph {
            box-shadow: -10px 10px 13px -3px rgba(158,158,158,1);
            width:100%;
            height:100%;
            background:#fff;
            overflow:auto;
            border:none;
         }
         #iframeph {
            box-shadow: none;
            position:absolute;
            display:none;
         }
         #extframe {
            width:100%;
            height:100%;
            position:fixed;
            top:0;
            right:0;
            z-index:11000;
            background:#fff;
            display:none;
         }
         #externfenster {
            overflow:auto;
            width:100%;
            height:100%;
            border:none;
         }
         #externcloseborder {
             border: 1px solid #666;
             opacity: 0.8;
             position: fixed;
             left:0px;
             background:#fff;
             border-radius:30px;
         }
         #externclose {
             top: -1px;
             left: -10px;
             position: relative;
             height:20px;
             width:20px;
             padding:17px;
             font-size:50px;
             display:block;
             text-decoration:none;
         }
         .markierterubrik {
            background: #f6b400;
            color: #333 !important;
            padding: 2px 8px;
            border-radius:3px;
            font-weight:bold;
         }
         #wartebild {
            -moz-animation: spin 1s infinite linear;
            -webkit-animation: spin 1s infinite linear;  
            position: absolute;
            left: 45%;
            top: 45%;
         }
         @-moz-keyframes spin {
             0% {-moz-transform: rotate(0deg);}
             100% {-moz-transform: rotate(360deg);};
         }
         @-webkit-keyframes spin {
             0% {-webkit-transform: rotate(0deg);}
             100% {-webkit-transform: rotate(360deg);};
         }
         </style>
         
         */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
      $('head').append(cssstring);

   
      var neu = 0;
      var letzterubrik;

      // Links umbauen
      $('.tab-content a').each(function() {
        var value = $(this).attr('href');
        $(this).attr('url', value);
        // $(this).attr('href', 'javascript:return false;');
      });

      // von auto auf fixe Position ändern
      function AutoZentrierungInMargin() {
         $('.container-fluid').css("position", "absolute");
         var left = ($(window).width() - $('.container-fluid').width()) / 2 - 14 + "px";
         return left;
      }

      // Iframe für externe URLs
      $('body').append('<div id="extframe"><div id="externcloseborder"><a id="externclose" href="javascript:return false;">&#10006;</a></div><iframe id="externfenster" ></iframe></div>');
      
      $('body').on('click', '#externclose', function() {
         $('#extframe').hide();
         $('#externfenster').attr('src', '');
      });

      
      // Rubrikenlinks
      $('.tab-content a').click(function(event) {
         event.preventDefault();
         if (neu == 0) {
            // margin: 0 auto in 0 x umwandeln
            $('.container-fluid').css({"margin-left": AutoZentrierungInMargin()});
            $('.container-fluid').animate({'marginLeft': '0'}, 300);
            
            // $('.container-fluid').css({"position": "relative"});
            $('.container-fluid').prepend('<div id="olframe" style="width:' + Fenstergroesse() + ';"><div id="dragbar"></div><div id="closeborder"><a id="close" href="javascript:return false;">&#10006;</a></div><div id="iframeph"><img id="wartebild" src="http://www.hartgeld.com/images/seiten/Logo-HG_kl.jpg"></div><iframe id="lesefenster" ></iframe></div>');

            $('#olframe').fadeIn(300);
         }
         
         $(this).toggleClass('markierterubrik');
         MarkiertenBereichAufheben();
         
         $('#iframeph').fadeIn(300); 

         var url = $(this).attr('url');
         $('#lesefenster').attr('src', url);

         letzterubrik = $(this);
         neu = 1;
      });

      function MarkiertenBereichAufheben() {
         if (neu) {
            $(letzterubrik).toggleClass('markierterubrik');
         }
      }

      $('.container-fluid').on('click', '#close', function() {
         $('#lesefenster').fadeOut(300, function(){ $('#olframe').remove();});
         $('.container-fluid').animate({'marginLeft': AutoZentrierungInMargin()}, 300);
         MarkiertenBereichAufheben();
         neu = 0;
      });
      
      
      // Breite Overlay ändern
      $('.container-fluid').on('mouseover', '#dragbar', function() {
         $('#dragbar').css({"border-right": "3px dashed #666"});
      });
      $('.container-fluid').on('mouseout', '#dragbar', function() {
         $('#dragbar').css({"border-right": "none"});
      });
      
      var i = 0;
      var dragging = false;
      $(window).on('mousedown', '#dragbar', function(e) {
         e.preventDefault();

         dragging = true;
         var main = $('#olframe');
         var ghostbar = $('<div>',
            { id:'ghostbar', css: 
               {
                  borderRightWidth: '3px',
                  borderRightColor: '#666',
                  borderRightStyle: 'dashed',
                  position: 'absolute',
                  cursor: 'col-resize',
                  zIndex: '10001',
                  height: main.outerHeight(),
                  top: main.offset().top,
                  left: main.offset().left-2
               }
            }).appendTo('body');
         $('#lesefenster').css({"pointer-events": "none"});
         
         $(document).mousemove(function(e) {
            ghostbar.css("left", e.pageX);
            $('#olframe').css(
               {  "left": e.pageX,
                  "width": $(document).width() - e.pageX
               });
         });
      });

      $(document).mouseup(function(e) {
         if (dragging) {
            $('#lesefenster').css({"pointer-events": "initial"});
            $('#ghostbar').remove();
            $(document).unbind('mousemove');
            dragging = false;
         }
      });

      $(window).on('resize', function(event) {
         $('#olframe').css({"width": Fenstergroesse(), "right": "0", "left": "unset"});
      });    
      
      function Fenstergroesse() {
         var breite = '70%';
         if ($(window).width() > 1600) {
            breite = '50%';
         }
         return breite;
      }
      

      // Header-JS, um vom iframe aus aufgerufen werden zu können
      // Wenn iframe geladen wurde, iframe-Ladeseite ausblenden
      var script   = document.createElement("script");
      script.type  = "text/javascript";
      script.text  = "function IframeGeladen() { \
                     $('#iframeph').fadeOut(300); \
                     } \
                     function ExterneURL(url) { \
                        $('#externfenster').attr('src', url); \
                        $('#extframe').fadeIn(300); \
                     }";
      document.head.appendChild(script);
                     
   }
   
   ///////////////////////////////////////////////////////////////////////////////////
   // Inhaltsseite
   else {
      
      // CSS
      var cssstring = (function () {/*
         <style>
         .header-fixed,
         .werbebox3 p { 
            display: none;
         }
         hr {
            margin-top: 50px;
            border-bottom: 1px solid #bbb;
            border-top: none;
         }
         .bodyText_fett,
         .bodyText strong {
         }
         #main {
            margin-top: 10px;
         }
         .tagesdatum {
            display: inline !important;
            padding:1px 8px 3px;
            background: #44e;
            color: #fff;
            border-radius: 3px;
         }
         .leerzeile {
            margin-bottom: 15px;
            width:100%;
            height:1px;
         }
         .blase {
            display: inline;
            text-decoration:none !important;
            font-size: 20px;
            position: relative;
            top: -20px;
            left:3px;
            z-index:10;
            transition-property: top, opacity;
            transition-duration: 0.2s;
            transition-delay: 0.3s;
            transition-timing-function: ease;
            opacity:0;
            color:#fff;
            text-shadow: 0 -1px #333, 1px 0 #333, 0 1px #333, -1px 0 #333;
         }
         .blasehover {
            transition-delay: 1s;
            opacity:1;
            top: 2px;
         }
         #message {
            display:none;
            position: absolute; 
            padding: 5px 10px 10px; 
         }
         #mailsenden {
            font-size: 20px;
            text-decoration:none;
            color:#fff;
            text-shadow: 0 -1px #333, 1px 0 #333, 0 1px #333, -1px 0 #333;
         }
         #mailsenden:hover {
            color: #03f; 
         }
         #urloverlay {
            display:none;
            box-shadow: -5px 5px 10px -3px rgba(158,158,158,1); 
            border-radius:3px;
            position: absolute; 
            padding: 2px 8px 4px; 
            background: #f6b400; 
            background: #eeeeff; 
            color: #333; 
            font-weight: bold;
            z-index:1000;
         }
         .kommentarwe {
            // color:#EF079A;
            background: #eeeeff;
            display: block;
            padding: 0px 5px 2px;
         }
         .bodyText_blau + br + .bodyText_blau::before {
            padding-top:10px;
            content: "";
            display:block;
         }
         .bodyText_blau + br,
         .bodyText_blau br,
         .bodyText_fett br {
            display:none;
         }
         #alteinhalte {
            display:none;
         }
         #alteinhalteschalter {
            display:block;
            margin-top: 50px;
         }
         .exneuesfenster {
            text-decoration:none !important;
            cursor:pointer;
            color: #666;
         }
         .exneuesfenster:visited {
            color: #999 !important;
         }
         </style>
         
         */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
      $('head').append(cssstring);
      

      var mtext = '';
      
      // Mailoverlay
      $('.artikel').prepend('<div id="message"><a title="Diesen Absatz kommentieren" id="mailsenden" href="javascript:return false;">&#128172;</a></div>');
            
      // URLoverlay
      $('.artikel').prepend('<div id="urloverlay"></div>');
      
      // Textmarkierungs-Mailzitat
      $('.artikel').mouseup(function(event) {
         var temp = document.getSelection().toString();
         if (temp != '') {
            mtext = temp;
            $('#message').css({
               left: event.pageX,
               top: event.pageY-25
            }).slideDown('fast');
         }
      });

      $('.artikel').mousedown(function(event) {
         if (event.target.id == 'mailsenden') {
            var seite = window.location.href.split('/');
            mtext = Textkuerzen(mtext);
            window.location.href = "mailto:[email protected]?subject=Neuer Leserkommentar zu Seite " + seite[3] + "&body=Sehr geehrtes Hartgeld-Team,%0A%0Azu folgendem Eintrag auf der Seite " + seite[3] + " möchte ich gerne wie untenstehend kommentieren:%0A%0A%0AIhr Eintrag:%0A" + encodeURIComponent(mtext) + "%0A%0A%0AMein Kommentar dazu:%0A%0A";
         }
         SchliessePopup();
      });
      
      function SchliessePopup() {
         $('#message').slideUp('fast');

         if (window.getSelection) {
            window.getSelection().removeAllRanges();
         } else if (document.selection) {
            document.selection.empty();
         }
      }
      
      function Textkuerzen(text) {
         var maxtextlaenge = 500;
         if (text.length > maxtextlaenge) {
            var trimmedString = text.substr(0, maxtextlaenge);
            trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));
            return trimmedString + ' [...]';
         } else {
            return text;
         }
      }
      
      // Externe Seitenlinks umwandeln für Overlay-Anzeige
      $('.artikel p a').not('#mailsenden').each(function() {
         $(this).addClass('extern');
         $(this).after('&nbsp;<a class="exneuesfenster" title="Link in neuem Fenster öffnen">&#10093;&#10093;&#10093;</a>')
      });

      $('.extern').click(function(event) {
         event.preventDefault();
         parent.ExterneURL($(this).attr('href'));
      });
      $('.exneuesfenster').click(function(event) {
         $(this).attr('href', $(this).prev().attr('href'));
         $(this).attr('target', '_blank');
      });
      
      // URL Hover
      $('.artikel p a').not('#mailsenden').hover(
         function(event) {            
            clearTimeout($(this).data('timeout'));
            var ax = document.createElement('a');
            ax.href = $(this).attr('href');
            $('#urloverlay').text(ax.hostname);
            var position = $(this).position();
            $('#urloverlay').css({
               top: position.top-25,
               left: $(this).LinkePositionvonLink().left
               // Left: position.left
               // top: event.pageY-40,
               // left: event.pageX-50
            }).show();
         }, 
         function() {
            var t = setTimeout(function() {
               $('#urloverlay').hide();
            }, 100);
            $(this).data('timeout', t);
         }
      );
      
      // Linke Position von Inline-Link bei Zeilenumbruch errechnen
      $.fn.LinkePositionvonLink = function() {
         var el = $('<i/>').css('display', 'inline').insertBefore(this[0]);
         var pos = el.offset();
         el.remove();
         return pos;
      };
      
      // WE-Kommentare anders färben
      // muss vor Kommentar-Sprechblasen kommen
      $('.bodyText_blau, .bodyText_fett_blau').each(function() {
         var kommentar = $(this).text();
         var wekennung = kommentar.indexOf('WE.');
         if (wekennung >= 0) {
            $(this).addClass('kommentarwe');
         }
      });
     
      // Auto-Kommentar-Links
      $('.artikel p.bodyText_fett, .artikel p .bodyText_fett, .artikel p .bodyText_fett .bodyText_fett, .artikel p strong, .artikel p.bodyText_blau, .artikel p .bodyText_blau, .artikel p.bodyText_fett_rot, .artikel p .bodyText_fett_rot').not('p a + .bodyText_blau, .bodyText_blau .bodyText .bodyText_fett, p.bodyText_blau .bodyText, p .bodyText_fett + .bodyText_fett').each(function() {
         $(this).addClass('kommentarhover');
         var seite = window.location.href.split('/');
         var text = $(this).text();
         text = Textkuerzen(text);
         $(this).append('<a title="Diesen Absatz kommentieren" href="mailto:[email protected]?subject=Neuer Leserkommentar zu Seite ' + seite[3] + '&body=Sehr geehrtes Hartgeld-Team,%0A%0Azu folgendem Eintrag auf der Seite ' + seite[3] + ' möchte ich gerne wie untenstehend kommentieren:%0A%0A%0AIhr Eintrag:%0A' + encodeURIComponent(text) + '%0A%0A%0AMein Kommentar dazu:%0A%0A" class="blase">&#128172;</a>');
      });

      $('.artikel .kommentarhover').hover(
         function() {
            $(this).children('.blase').toggleClass('blasehover');
         }, 
         function() {
            $(this).children('.blase').toggleClass('blasehover');
         }
      );

      // Ältere Inhalte ausblenden
      var endeaktuell = $('.artikel hr').first();
      if (endeaktuell.length > 0) {
         $(endeaktuell).before('<a id="alteinhalteschalter" class="bodyText_fett" href="javascript:return false;">&Auml;ltere Inhalte anzeigen &raquo;</a><div id="alteinhalte"></div>');
         $(endeaktuell).nextAll().each(function() {
            $('#alteinhalte').append(this);
         });
         $('#alteinhalte').prepend(endeaktuell);

         $('.artikel').on('click', '#alteinhalteschalter', function() {
            $('#alteinhalte').slideDown('slow');
            $('#alteinhalteschalter').css({"display": "none"});
         });
      }
      
      // Datumsblöcke Klasse einfügen
      $('.artikel p.bodyText_fett_blau .cdate').each(function() {
         $(this).parent().addClass('tagesdatum');
         $(this).parent().after('<div class="leerzeile"></div>');
      });
      
      
      // Datum umstellen
      var datum = $('.cdate').first();
      if (datum.length > 0) {
         monate = new Array(); monate['01'] = 'Januar'; monate['02'] = 'Februar'; monate['03'] = 'M&auml;rz'; monate['04'] = 'April'; monate['05'] = 'Mai'; monate['06'] = 'Juni'; monate['07'] = 'Juli'; monate['08'] = 'August'; monate['09'] = 'September'; monate['10'] = 'Oktober'; monate['11'] = 'November'; monate['12'] = 'Dezember';
         var datumsteile = datum.text().split('-');
         $(datum).text(datumsteile[2].replace(':', '') + '. ' + monate[datumsteile[1]] + ' ' + datumsteile[0])
      }
      

      // Meldung an Parent Window, sobald Seite fertig geladen wurde
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.text  = "parent.IframeGeladen();";
      document.body.appendChild(script);
   }
   
}());