Benutzer:Der Buckesfelder/Floater.js

 // Load prerequisites
 importStylesheet('User:Equazcion/Floater.css');
 loadJQViewport();

 // Predict a static floater height
 varfloaterHeight=31;

 // Create/insert empty Floater div
 $('#mw-head').prepend('<div hidden="hidden" class="floater" '+
 'style="color:white;'+
 'transition: top 250ms ease 0s;'+
 //'border-bottom:2px solid rgba(0, 0, 0, 0.1);' + 
 'padding:5px 5px 2px 0;'+
 'background-color:rgba(0, 0, 0, 0.8);'+
 'z-index:999;'+
 'position:fixed;'+
 'top:'+'-'+floaterHeight+'px;'+
 'width:100%;'+
 '">.</div>');

 // Grab the div
 varfloater=$('.floater');

 // Set URL prefix
 varpre=location.protocol+'//'+wgPageContentLanguage+'.'+wgNoticeProject+'.org'+'/w/index.php?title=';

 // Construct the page title line here. Long titles will need to be truncated.
 if(wgPageName.length>40){
 if(wgNamespaceNumber==0){
 pageNS='';
 }elseif(wgNamespaceNumber==4){
 pageNS='WP:';
 }elseif(wgNamespaceNumber==5){
 pageNS='WP talk:'
 }else{
 pageNS=wgCanonicalNamespace+':';
 }
 varpageTitle=pageNS+wgTitle.substr(0,15)+'...'+wgTitle.substr(-15);
 vartitleLine='<li style="margin-right:10px;font-size:.85em;"><abbr style="border-bottom:none;" title="'+wgPageName.replace(/_/g,' ')+'">'+pageTitle.replace(/_/g,' ')+'</abbr></li>'
 }else{
 vartitleLine='<li style="margin-right:10px;font-size:1em;">'+wgPageName.replace(/_/g,' ')+'</li>';
 }

 // If the current page has an "add section" tab, construct a link 
 if($('#ca-addsection').length>0){
 varaddSection='<li><a href="'+pre+wgPageName+'&action=edit&section=new'+'"><span style="font-size:1.15em;margin-right:3px;">+</span>Section</a>'+'</li>';
 }else{
 varaddSection='';
 }

 // Fill the Floater div with some crap
 floater.html(

 // Left section for page title, edit, history, and main/talk toggle
 '<div style="font-weight:bold;float:left;font-size:0.9em;">'+
 '<ul class="floaterPagelinks" style="margin-left:10px;list-style-type:none;list-style-image:none;display:inline;">'+
 titleLine+
 '<li><a href="'+pre+wgPageName+'&action=edit'+'"><img style="padding-right:8px;margin-bottom:3px;" src="https://upload.wikimedia.org/wikipedia/commons/9/9e/SchWett_Kl_2a.svg" height="17px" alt="">Edit</a>'+'</li>'+
 addSection+
 '<li><a href="'+pre+wgPageName+'&action=history'+'"><img style="padding-right:5px;margin-bottom:3px;" src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Icon_Clock.svg" height="20px" alt="">History</a>'+'</li>'+
 '<li><a href="'+pre+getAssoc()+'"><img style="padding-right:5px;margin-bottom:3px;opacity:0.9;" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Play_blauw.png" height="17px" alt="">Talk/Main</a>'+'</li>'+
 '</ul>'+
 '</div>'+

 // Small links for info, logs, whatlinkshere
 '<div style="float:left;margin-top:-7px;margin-left:-15px;">'+
 '<ul class="smallLinks" style="list-style-type:disc;">'+
 '<li><a href="'+pre+wgPageName+'&action=info" title="Information for this page">I</a></li>'+
 '<li>|</li>'+
 '<li><a href="/wiki/Special:Log/'+wgPageName+'" title="Page logs">L</a></li>'+
 '<li>|</li>'+
 '<li><a href="/wiki/Special:WhatLinksHere/'+wgPageName+'" title="What Links Here">W</a></li>'+
 '<li>|</li>'+
 '<li><a class="gotoTop" href="#topTop" title="Go back to the top">Top</a></li>'+
 '</ul>'+
 '</div>'+

 // Search bar
 '<div style="float:right;margin-top:3px;font-size:.9em;">'+
 '<form class="searchform" action="/w/index.php">'+
 '<div id="simpleSearch2" class="simpleSearch" style="margin-top:-4px;margin-bottom:-20px;margin-right: 25px;width:14em;">'+
 '<input id="searchInput2" class="mw-searchInput" placeholder="Search" name="search" tabindex="10" autocomplete="off" style="width:100%;"></input>'+
 '<button id="searchButton" name="button" type="submit" style="position: absolute;right: 0px;top: 0px;padding: 0.45em 0.4em 0.2em 0.3em;margin-right: 20px;border: medium none;cursor: pointer;background-color: transparent;background-image: none;">'+
 '<img width="12" height="13" alt="Search" src="//bits.wikimedia.org/static-1.22wmf18/skins/vector/images/search-ltr.png?303-4"></img>'+
 '</button>'+
 '<input type="hidden" value="Special:Search" name="title"></input>'+
 '</div>'+
 '</form>'+
 '</div>'+

 // User links
 '<div style="float:right;font-size:.8em;font-weight:bold;margin-top:1px;">'+
 '<ul class="floaterUserlinks" style="list-style-type:none;list-style-image:none;display:inline;margin-right:20px;">'+
 '<li class="floaterUserpageLink"><a href = "/wiki/User:'+wgUserName+'">'+wgUserName+'</a></li>'+
 //'<li><a class="mw-echo-notifications-badge" href="/wiki/Special:Notifications"></a></li>' +
 '<li><a href = "/wiki/User talk:'+wgUserName+'">'+'Talk'+'</a></li>'+
 '<li><a href = "/wiki/Special:Preferences">'+'Preferences'+'</a></li>'+
 '<li><a href = "/wiki/Special:Watchlist">'+'Watchlist'+'</a></li>'+
 '<li><a href = "/wiki/Special:Contributions/'+wgUserName+'">'+'Contributions'+'</a></li>'+
 '</ul>'+
 '</div>');

 // Set the "go to top" click function: Go to the MediaWiki top anchor, then scroll up some more
 $('a.gotoTop').click(function(){
 window.location.hash="top";
 window.scrollBy(0,-floaterHeight-50);
 });

 // Wait half a sec for images to load etc. b4 un-hiding Floater
 setTimeout(function(){floater.removeAttr('hidden')},500);

 // Listen for TOC or other internal anchor clicks and adjust page scrolling to un-obscure the associated header
 $(window).on('hashchange',function(){
 adjustForHash();
 });

 // Run the scroll function once on load after additional half-second delay to display Floater in case we come in mid-page
 setTimeout(function(){
 scroll();
 adjustForHash();
 },500);

 functionadjustForHash(){
 // If we're coming in mid-page due to an anchor link, make sure the anchored header isn't obscured by Floater
 if(window.location.hash){

 // Get DOM version of the anchored header using [0], then use DOM method to get its viewport coordinates
 varanchorCoords=$('span[id="'+window.location.hash.replace('#','')+'"]')[0].getBoundingClientRect();

 // If the pagetop links aren't in view and the anchored header is likely obscured by Floater, scroll up to reveal it
 if(($('#p-namespaces ul li:above-the-top').length>0)&&(anchorCoords.bottom<25)){
 window.scrollBy(0,-floaterHeight-5);
 }
 }
 }

 // Set the function for scrolling
 $(window).scroll(function(){
 scroll();
 });

 // Use :above-the-top (from plugin below) to check for pagetop stuff outside window. If they're there, start the music.
 functionscroll(){
 if($('#p-namespaces ul li:above-the-top').length>0){
 floater.css('top','0');
 adjustForHash();
 }else{
 floater.css('top','-'+floaterHeight+'px');
 }
 }

 // Find the title of the associated talk or main page. Is there an easier way?
 functiongetAssoc(){
 vartoggledTitle='';
 if(wgNamespaceNumber==0){
 toggledTitle="Talk:"+wgTitle;
 }elseif(wgNamespaceNumber==1){
 toggledTitle=wgTitle;
 }elseif(wgNamespaceNumber==2){
 toggledTitle="User_talk:"+wgTitle;
 }elseif(wgNamespaceNumber==3){
 toggledTitle="User:"+wgTitle;
 }elseif(wgNamespaceNumber==4){
 toggledTitle="Wikipedia_talk:"+wgTitle;
 }elseif(wgNamespaceNumber==5){
 toggledTitle="Wikipedia:"+wgTitle;
 }elseif(wgNamespaceNumber==6){
 toggledTitle="File_talk:"+wgTitle;
 }elseif(wgNamespaceNumber==7){
 toggledTitle="File:"+wgTitle;
 }elseif(wgNamespaceNumber==8){
 toggledTitle="MediaWiki_talk:"+wgTitle;
 }elseif(wgNamespaceNumber==9){
 toggledTitle="MediaWiki:"+wgTitle;
 }elseif(wgNamespaceNumber==10){
 toggledTitle="Template_talk:"+wgTitle;
 }elseif(wgNamespaceNumber==11){
 toggledTitle="Template:"+wgTitle;
 }elseif(wgNamespaceNumber==12){
 toggledTitle="Help_talk:"+wgTitle;
 }elseif(wgNamespaceNumber==13){
 toggledTitle="Help:"+wgTitle;
 }elseif(wgNamespaceNumber==14){
 toggledTitle="Category_talk:"+wgTitle;
 }elseif(wgNamespaceNumber==15){
 toggledTitle="Category"+wgTitle;
 }elseif(wgNamespaceNumber==16){
 toggledTitle="Portal_talk:"+wgTitle;
 }elseif(wgNamespaceNumber==17){
 toggledTitle="Portal:"+wgTitle;
 }
 returntoggledTitle;
 }

 // Add the :above-the-top jQuery selector, which we use to check if user has scrolled past a certain point.

 functionloadJQViewport(){
 /* Excerpt from Viewport - jQuery selectors for finding elements in viewport 
 	Copyright (c) 2008-2009 Mika Tuupola http://www.appelsiini.net/projects/viewport 
 	 Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 	 $(":above-the-top") */
 (function($){
 $.abovethetop=function(element,settings){
 vartop=$(window).scrollTop();
 returntop>=$(element).offset().top+$(element).height()-settings.threshold;
 };
 $.extend($.expr[':'],{
 "above-the-top":function(a,i,m){
 return$.abovethetop(a,{threshold:0});
 }
 });
 })(jQuery);
 }

 // Replicate MediaWiki suggest functionality for Floater search box
 varmap2,resultRenderCache2,searchboxesSelectors2;
 var$searchInput2=$('#searchInput2');
 var$searchRegion2=$('#simpleSearch2');

 functioncomputeResultRenderCache2(context){
 var$form,formAction,baseHref,linkParams;

 // Compute common parameters for links' hrefs
 $form=context.config.$region.closest('form');

 formAction=$form.attr('action');
 baseHref=formAction+(formAction.match(/\?/)?'&':'?');

 linkParams={};
 $.each($form.serializeArray(),function(idx,obj){
 linkParams[obj.name]=obj.value;
 });

 return{
 textParam:context.data.$textbox.attr('name'),
 linkParams:linkParams,
 baseHref:baseHref
 };
 }

 functionrenderFunction2(text,context){
 if(!resultRenderCache2){
 resultRenderCache2=computeResultRenderCache2(context);
 }

 // linkParams object is modified and reused
 resultRenderCache2.linkParams[resultRenderCache2.textParam]=text;

 // this is the container <div>, jQueryfied
 this
 .append(
 // the <span> is needed for $.autoEllipsis to work
 $('<span>')
 .css('whiteSpace','nowrap')
 .text(text)
 )
 .wrap(
 $('<a>')
 .attr('href',resultRenderCache2.baseHref+$.param(resultRenderCache2.linkParams))
 .addClass('mw-searchSuggest-link')
 );
 }

 searchboxesSelectors2=[
 '#searchInput2'
 ];
 $(searchboxesSelectors2.join(', '))
 .suggestions({
 fetch:function(query){
 var$el,jqXhr;

 if(query.length!==0){
 $el=$(this);
 jqXhr=$.ajax({
 url:mw.util.wikiScript('api'),
 data:{
 format:'json',
 action:'opensearch',
 search:query,
 namespace:0,
 suggest:''
 },
 dataType:'json',
 success:function(data){
 if($.isArray(data)&&data.length){
 $el.suggestions('suggestions',data[1]);
 }
 }
 });
 $el.data('request',jqXhr);
 }
 },
 cancel:function(){
 varjqXhr=$(this).data('request');
 // If the delay setting has caused the fetch to have not even happened
 // yet, the jqXHR object will have never been set.
 if(jqXhr&&$.isFunction(jqXhr.abort)){
 jqXhr.abort();
 $(this).removeData('request');
 }
 },
 result:{
 render:renderFunction2,
 select:function($input){
 $input.closest('form').submit();
 }
 },
 delay:120,
 highlightInput:true
 })
 .bind('paste cut drop',function(){
 // make sure paste and cut events from the mouse and drag&drop events
 // trigger the keypress handler and cause the suggestions to update
 $(this).trigger('keypress');
 });

 functionspecialrenderFunction2(query,context){
 var$el=this;

 if(!resultRenderCache2){
 resultRenderCache2=computeResultRenderCache2(context);
 }

 // linkParams object is modified and reused
 resultRenderCache2.linkParams[resultRenderCache2.textParam]=query;

 if($el.children().length===0){
 $el
 .append(
 $('<div>')
 .addClass('special-label')
 .text(mw.msg('searchsuggest-containing')),
 $('<div>')
 .addClass('special-query')
 .text(query)
 .autoEllipsis()
 )
 .show();
 }else{
 $el.find('.special-query')
 .text(query)
 .autoEllipsis();
 }

 if($el.parent().hasClass('mw-searchSuggest-link')){
 $el.parent().attr('href',resultRenderCache2.baseHref+$.param(resultRenderCache2.linkParams)+'&fulltext=1');
 }else{
 $el.wrap(
 $('<a>')
 .attr('href',resultRenderCache2.baseHref+$.param(resultRenderCache2.linkParams)+'&fulltext=1')
 .addClass('mw-searchSuggest-link')
 );
 }
 }

 $searchInput2
 .attr('placeholder',mw.msg('searchsuggest-search'))
 .placeholder();

 $searchInput2.suggestions({
 result:{
 render:renderFunction2,
 select:function($input){
 $input.closest('form').submit();
 }
 },
 special:{
 render:specialrenderFunction2,
 select:function($input){
 $input.closest('form').append(
 $('<input type="hidden" name="fulltext" value="1"/>')
 );
 $input.closest('form').submit();
 }
 },
 $region:$searchRegion2
 });