☰

HG-Optimierung

Vereinfachte Navigation auf Hartgeld.com

目前為 2015-08-30 提交的版本，檢視 最新版本。

// ==UserScript==
// @name        HG-Optimierung
// @namespace   hgtools
// @include     http://www.hartgeld.com/*
// @version     2.2
// @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,
         #dragbarex {
            position: absolute;
            left: -12px;
            height:100%;
            width:10px;
            cursor: col-resize;
         }
         #closeborder {
             border: 1px solid #666;
             opacity: 0.8;
             float:left;
             position: absolute;
             left:0px;
             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 {
            box-shadow: -10px 10px 13px -3px rgba(158,158,158,1);
            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: absolute;
             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: #f5b201;
            color: #000 !important;
            padding: 1px 6px;
            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);};
         }
         #rubrikenaktualisieren {
            height:30px;
         }
         </style>
         
         */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
      $('head').append(cssstring);

   

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

      // 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;
      }

      // In Abhängigkeit der Fenstergröße die Overlays einstellen
      function Fenstergroesse(schmal, breit) {
         if ($(window).width() > 1600) {
            return breit;
         }
         return schmal;
      }
      
      // Iframe für externe URLs
      $('body').append('<div id="extframe" style="width:' + Fenstergroesse("90%", "50%") + ';"><div id="dragbarex"></div><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
      var neu = 0;
      var letzterubrik;

      $('.tab-content').on('click', '.infolinks a', 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("70%", "85%") + ';"><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).addClass('markierterubrik');
         MarkiertenBereichAufheben();
         
         $('#iframeph').fadeIn(300); 

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

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

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

      $('.container-fluid').on('click', '#close', function() {
         $('#lesefenster').fadeOut(300, function(){ $('#olframe').remove();});
         $('.container-fluid').animate({'marginLeft': AutoZentrierungInMargin()}, 300);
         MarkiertenBereichAufheben();
         neu = 0;
      });
      
      
      // Breite Rubriken-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) {
         $('#extframe').css({"width": Fenstergroesse('90%', '50%'), "right": "0", "left": "unset"});
         $('#olframe').css({"width": Fenstergroesse('70%', '85%'), "right": "0", "left": "unset"});
      });    
      
      // Breite Externerlink-Overlay ändern
      $('body').on('mouseover', '#dragbarex', function() {
         $('#dragbarex').css({"border-right": "3px dashed #666"});
      });
      $('body').on('mouseout', '#dragbarex', function() {
         $('#dragbarex').css({"border-right": "none"});
      });
      
      var i = 0;
      var draggingex = false;
      $(window).on('mousedown', '#dragbarex', function(e) {
         e.preventDefault();

         draggingex = true;
         var main = $('#extframe');
         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');
         $('#externfenster').css({"pointer-events": "none"});
         $('#lesefenster').css({"pointer-events": "none"});
         
         $(document).mousemove(function(e) {
            ghostbar.css("left", e.pageX);
            $('#extframe').css(
               {  "left": e.pageX,
                  "width": $(document).width() - e.pageX
               });
         });
      });

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

      // RSS-Feed lesen
      // (Falls automatisch: Nur zwischen 7 und 20:30 Uhr)
      $('#heute').on('click', '#aktualisieren', function() {
         var datum = new Date();
         var infolinks = '';
         var rubrikaktiv = '';

         $('#heute').slideUp('fast', function() {
            $('#heute').empty();
         
            $.get('http://www.hartgeld.com/component/obrss/hartgeld-com-fed.html', function(data) {
               var $xml = $(data);
               $xml.find("item").each(function() {
                  var $this = $(this),
                     item = {
                        title: $this.find("title").text(),
                        link: $this.find("link").text().replace('http://www.hartgeld.com', ''),
                        day: $this.find("pubDate").text().substring(8, 10),
                        hour: $this.find("pubDate").text().substring(11, 13),
                        minute: $this.find("pubDate").text().substring(14, 16),
                  }
                  if (item.day == datum.getDate()) {
                     var stunde = parseInt(item.hour) + 2;
                     if (stunde < 10) {
                        stunde = '0' + stunde;
                     }
                     
                     var zeit = parseInt(stunde) * 60 + parseInt(item.minute);
                     if (zeit > neuestezeit) {
                        infolinks += '<p class="infolinks"><span class="label label-important">Neu ' + stunde + ':' + item.minute + '</span>&nbsp;&nbsp;<a url="' + item.link + '" href="' + item.link + '">' + item.title + '</a> </p>';
                     } else {
                        infolinks += '<p class="infolinks"><i class="icon-file"></i> ' + stunde + ':' + item.minute + '&nbsp;&nbsp;<a url="' + item.link + '" href="' + item.link + '">' + item.title + '</a> </p>';
                     }
                  }
               });
               $('#heute').prepend(infolinks);
               $('#heute').slideDown('fast');
               AktualisierungsButtonanzeigen();
               ZeitNeuesteRubrik();
               ZuletztaktiveRubrikmarkieren();
            });
         });
      });
      
      function AktualisierungsButtonanzeigen() {
         $('#heute').prepend('<div id="rubrikenaktualisieren"><a id="aktualisieren" class="bodyText_fett" href="javascript:return false;">Rubriken aktualisieren&raquo;</a></div>');
      }
      AktualisierungsButtonanzeigen();

      // Letzte Rubrik abenfalls wieder als aktiv markieren
      function ZuletztaktiveRubrikmarkieren() {
         $('#heute p a').each(function() {
            if ($(this).text() == $(letzterubrik).text()) {
               letzterubrik = $(this);
               $(this).addClass('markierterubrik');
            }
         });
      }

      // Rubriken in Array laden, um nach Aktualisierung zu vergleichen und neue markieren
      var neuestezeit = 0;
      function ZeitNeuesteRubrik() {
         var zeitstring = $('#heute p').first().text().match(/([0-2][0-9])\:([0-5][0-9])/);
         neuestezeit = parseInt(zeitstring[1]) * 60 + parseInt(zeitstring[2]);
      }
      ZeitNeuesteRubrik();
      
      // Tabs korrigieren, da nach Aktualisierung die neu geladenen Rubriken nicht mehr ausgeblendet werden
      $('.nav-tabs a').on('click', function() {
         var tab = $(this).attr('href');
         if (tab != '#heute') {
            $('#heute').css("display", "none");
         } else {
            $('#heute').css("display", "block");
         }
      })
      
      // 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>
         @media screen and (min-width: 1300px) {
            .artikel {
               max-width:600px;
            }
         }
         .container-fluid {
            margin:0;
         }
         .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: 1.5s;
            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;
            padding-right: 5px;
         }
         .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 target="_blank" 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'));
      });
      
      // URL Hover
      $('.artikel p a').not('#mailsenden, .exneuesfenster').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() {
         if ($(this).text().match(/(WE\.|PS: )/)) {
            $(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 eintragsdatum = $('.cdate').first();
      if (eintragsdatum.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 = eintragsdatum.text().split('-');

         var tag = datumsteile[2].replace(':', '');
         var datum = new Date();
         var heute = '';
         if (tag == datum.getDate()) {
            heute = 'Heute, ';
         }
         $(eintragsdatum).text(heute + tag + '. ' + 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);
   }
   
}());