☰

Facebook Old NavBar by LaNouille974

Automatically repositions the elements of the Facebook navigation bar as they were in the previous version of the social network: friends requests, messages and notifications on the left (next to the logo), the other ones on the right. Lets also add a short personalized text (eg. a nickname) in the navbar. Ability to change the background color of the navigation bar.

当前为 2015-08-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Facebook Old NavBar by LaNouille974
  3. // @name:fr     Ancienne barre de navigation de Facebook par LaNouille974
  4. // @description Automatically repositions the elements of the Facebook navigation bar as they were in the previous version of the social network: friends requests, messages and notifications on the left (next to the logo), the other ones on the right. Lets also add a short personalized text (eg. a nickname) in the navbar. Ability to change the background color of the navigation bar.
  5. // @description:fr Repositionne automatiquement les éléments de la barre de navigation de Facebook tels qu'ils étaient dans la version précédente du réseau social : invitations en ami, messages et notifications à gauche (à côté du logo), le reste à droite. Permet également d'ajouter un court texte personnalisé (ex: un pseudo) à la barre de navigation. Possibilité de changer la couleur de fond de la barre.
  6. // @namespace   https://www.facebook.com
  7. // @include     https://www.facebook.com/*
  8. // @version     1.3
  9. // @icon        http://img15.hostingpics.net/pics/772325facebookoldnavbar11bylanouille974.png
  10. // @grant       none
  11. // @require     https://code.jquery.com/jquery-1.11.0.min.js
  12. // ==/UserScript==
  13.  
  14. $.noConflict();
  15.  
  16. jQuery( document ).ready(function($) {
  17.     
  18.     /*** Configuration ***/
  19.     var defaultNickName = 'LaNouille974';
  20.     var defaultNavBarColor = '';
  21.     var defaultPic = 'http://img11.hostingpics.net/pics/962935runico.png';
  22.     var colorpickerPic = 'http://img4.hostingpics.net/pics/387100colorpicker.png';
  23.     
  24.     var navBar = $('#blueBarNAXAnchor');
  25.     var logo = navBar.find('h1:first')
  26.     /**** End Configuration ***/
  27.     
  28.     /*** Global vars ***/
  29.     var colorChanged = false;
  30.     /*** End Global vars ***/
  31.     
  32.     var originalNavRight = navBar.find('div._2gyk:first');
  33.     
  34.     //Cloner la navRight
  35.     var newNavRight = originalNavRight.clone();
  36.     
  37.     //Un peu de CSS pour les nouvelles navBar
  38.     newNavRight.css({
  39.        'float': 'left',
  40. 		   'margin-left': logo.width() + 2 + 'px',
  41. 		   'margin-right': '10px',
  42.         'position': 'relative'
  43.     });  
  44.     
  45.     //Remettre les boutons permettant d'ouvrir les popups au premier plan
  46.     newNavRight.find('a.jewelButton').css({
  47.         'z-index': '100'
  48.     });
  49.     
  50.     //Retirer les éléments indésirables de chaque navBar
  51.     removeNavElements(originalNavRight, 'old');
  52.     removeNavElements(newNavRight, 'new');
  53.     
  54.     //Personnalisation
  55.     var li = $("<li/>");
  56.     li.attr('id', 'thenoodle');
  57.     li.attr('title', 'Cliquer pour changer le texte');
  58.     li.addClass('navItem tinyman litestandNavItem').text(defaultNickName);
  59.     li.prependTo(originalNavRight.children('ul:first'));
  60.     
  61.     $('li#thenoodle').css({
  62.         'height': '25px',
  63.         'line-height': '25px',
  64.         'color': 'white',
  65.         'font-weight': 'bold',
  66.         'position': 'relative',
  67.         'left': '-25px',
  68.         'top': '-2px',
  69.         'background-image': "url('"+ defaultPic +"')",
  70.         'background-repeat': 'no-repeat',
  71.         'background-size': '25px 25px',
  72.         'padding-left' : '32px',
  73.         'cursor': 'pointer',
  74.         'float': 'left'
  75.     });
  76.     
  77.     //Création du colorPicker invisible
  78.     $('<input/>').attr({ type: 'color', id: 'colorpicker', name: 'colorpicker'}).appendTo('body');
  79.     $('#colorpicker').css({
  80.         'position': 'absolute',
  81.         'top': -9999,
  82.         'left': -9999,
  83.      });
  84.     
  85.     //Ajouter bouton colorPicker
  86.     var liPicker = $("<li/>");
  87.     liPicker.attr('id', 'pickerOpenerLi');
  88.     
  89.     var divPicker = $("<div/>");
  90.     divPicker.attr('id', 'pickerOpenerDiv');
  91.     divPicker.appendTo(liPicker);
  92.     
  93.     $('#thenoodle').after(liPicker);
  94.     
  95.     $('#pickerOpenerLi').css({
  96.         'position': 'relative',
  97.         'border-radius': '2px',
  98.         'cursor': 'pointer',
  99.         'width': '27px',
  100.         'height': '27px',
  101.         'float': 'left',
  102.         'top': '-3px',
  103.         'margin-right': '5px'
  104.     });
  105.     
  106.     $('#pickerOpenerDiv').css({
  107.         'background-image': "url('"+ colorpickerPic +"')",
  108.         'background-repeat': 'no-repeat',
  109.         'background-size': '19px 19px',
  110.         'border-radius': '2px',
  111.         'width': '19px',
  112.         'height': '19px',
  113.         'position': 'relative',
  114.         'top': '4px',
  115.         'left': '4px'
  116.     });
  117.     
  118.     liPicker.mouseenter(function(e){
  119.        $(this).css('background', 'none repeat scroll 0 0 rgba(0, 0, 0, 0.1)');               
  120.     });
  121.     
  122.     liPicker.mouseleave(function(e){
  123.        $(this).css('background', 'transparent');               
  124.     });
  125.     
  126.     //Ouvrir le colorPicker au clic
  127.     $('#pickerOpenerLi').click(function(e) {
  128.         $('#colorpicker').trigger('click');
  129.     });
  130.     
  131.     $('#colorpicker').on('input', function() {
  132.         changeColor($(this).val());
  133.     });
  134.     
  135. 	  //Animation fadeIn/fadeOut perpétuel
  136.     infiniteFadeInOut($('li#thenoodle'), true);
  137.     
  138.     //Changer le pseudo à la volée
  139.     $('li#thenoodle').click(function(){
  140.         changeNickName($(this));
  141.     });
  142.     
  143.     //Ajoute la nouvelle navBar à gauche
  144.     newNavRight.prependTo(logo.parent());
  145.     
  146.     //Modifier emplacements popup
  147.     //Messages
  148.     $("#u_0_5").parent().click(function() {
  149.         //Fleche
  150.         $('#u_0_5 .beeperNub').css({
  151.              'right': '0',
  152.              'left': '35px'
  153.         });
  154.         
  155.         //Popup
  156.         $('#u_0_5').css({
  157.             'right': '0',
  158.              'left': '-30px'
  159.         });
  160.     });
  161.     
  162.     //Friends requests
  163.     $("#fbRequestsFlyout").parent().click(function() {
  164.         //Fleche
  165.         $('#fbRequestsFlyout .beeperNub').css({
  166.             'left': '4px' 
  167.         });
  168.         
  169.         //Popup
  170.         $("#fbRequestsFlyout").css({
  171.             'left': '0',
  172.         });
  173.     });
  174.     
  175.     //Notifications
  176.     $('#fbNotificationsFlyout').parent().click(function(){
  177.         //Fleche
  178.         $('#fbNotificationsFlyout .beeperNub').css({
  179.             'right': '0',
  180.              'left': '4px'
  181.          });
  182.         
  183.         //Popup
  184.         $("#fbNotificationsFlyout").css({
  185.             'right': 'auto',
  186.         });
  187.     });
  188.     
  189.     //Changer la couleur de la navBar au chargement si une couleur par défaut est définie
  190.     changeColor(defaultNavBarColor);
  191.  
  192.     /*$(document).on("DOMNodeInserted",function(evt){
  193.         var target = $(evt.target); 
  194.         var parents = target.parents('#pagelet_timeline_recent');
  195.         
  196.         if (parents.length)
  197.             console.log('node inserted in timeline');
  198.     });*/
  199.     
  200.     /*** FUNCTIONS ***/
  201.     
  202.     //Change la couleur de la barre
  203.     function changeColor(colorHex) {
  204.         
  205.         if (typeof colorHex === 'undefined' || colorHex == '')
  206.             return;
  207.         
  208.         /*if (!colorChanged) {
  209.             $('*').filter(function(i){  
  210.                 return $(this).css("color") ==  $("<div style='color:#3b5998'/>").css("color");
  211.             }).css("color", colorHex);
  212.             
  213.             colorChanged = true;
  214.         }
  215.         else {
  216.             var currentNavBarColor = navBar.css('background-color');
  217.  
  218.             $('*').filter(function(i){  
  219.                 return $(this).css("color") == currentNavBarColor;
  220.             }).css("color", colorHex);
  221.         }*/
  222.         
  223.         navBar.css({
  224.             'background-color': colorHex,
  225.             'background-image' : 'none'
  226.         });
  227.     }
  228.     
  229.     //FadeIn puis fadeOut en boucle de l'élément passé en paramètre
  230.     function infiniteFadeInOut (elem, fadeOut) {
  231.         var targetOpacity = fadeOut ? 0.5 : 1;
  232.         var duration = fadeOut ? 2000 : 500;
  233.         
  234.         fadeOut = !fadeOut; 
  235.             
  236.         elem.animate({
  237.             opacity: targetOpacity 
  238.         }, duration, 'swing', function() {
  239.             infiniteFadeInOut($(this), fadeOut);
  240.         });
  241.     }
  242.     
  243.     //Retire les li indésirables de la navBar passé en param
  244.     //Type = old ou Type = new
  245.     function removeNavElements(navBar, type) {
  246.       
  247.         var elementsToRemove = [];
  248.         
  249.         if (type == 'new')
  250.             elementsToRemove = [0, 1, 4, 5, 6];
  251.         else
  252.             elementsToRemove = [2, 3];
  253.         
  254.         navBar.children('ul:first').children('li').each(function(i) {
  255.             
  256.             //console.log(elementsToRemove);
  257.             
  258.             if ($.inArray(i, elementsToRemove) !== -1) {
  259.                $(this).remove();
  260.                //console.log(i);
  261.             }
  262.         });
  263.     }
  264.     
  265.     function changeNickName(domElem) {
  266.         var precNickName = domElem.text();
  267.         var newNick = '';
  268.         
  269.         do {
  270.             newNick = prompt('Nouveau texte (12 caractères max, taper "!q" pour quitter) :');
  271.             
  272.             if (newNick === null || newNick == '!q') break;
  273.             else if (newNick.length > 12) 
  274.                 alert('Nouveau texte trop long ! 12 caractères max. (' + newNick.length + ' saisis)');
  275.             
  276.         } while (newNick.length > 12 || newNick == '')
  277.         
  278.         console.log(newNick);    
  279.         
  280.         if (newNick == null ) {
  281.             if (precNickName == '')
  282.                 newNick = defaultNickName;
  283.             else
  284.                 newNick = precNickName;
  285.         } 
  286.         else if(newNick == '!q') newNick = precNickName;    
  287.             
  288.         domElem.text(newNick);
  289.     }
  290. });