Raw Source Toggle Dropdown

• Minified Source

AngelKrak / ZC_Facebook - Cambia el Color a tu Facebook

// ==UserScript==
// @name         ZC_Facebook - Cambia el Color a tu Facebook
// @namespace    https://openuserjs.org/scripts/AngelKrak/ZC_Facebook_-_Cambia_el_Color_a_tu_Facebook
// @description  Cambia el Color de tu Facebook con solo un Boton, Puedes Elegir entre Colores Hexadecimales o RGB(a)
// @author       Angel Komander(AK)
// @website      http://angelkrak.hol.es
// @version      0.4
// @grant        none
// @include      *facebook.com/*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js
// @require      https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js
// @require      http://cs.angelkrak.hol.es/archivos/jquery.colorpicker.js
// @require      https://vanderlee.github.io/colorpicker/i18n/jquery.ui.colorpicker-nl.js
// @require      https://vanderlee.github.io/colorpicker/swatches/jquery.ui.colorpicker-pantone.js
// @require      https://vanderlee.github.io/colorpicker/swatches/jquery.ui.colorpicker-crayola.js
// @require      https://vanderlee.github.io/colorpicker/swatches/jquery.ui.colorpicker-ral-classic.js
// @require      https://vanderlee.github.io/colorpicker/swatches/jquery.ui.colorpicker-x11.js
// @require      https://vanderlee.github.io/colorpicker/parts/jquery.ui.colorpicker-rgbslider.js
// @require      https://vanderlee.github.io/colorpicker/parts/jquery.ui.colorpicker-memory.js
// @require      https://vanderlee.github.io/colorpicker/parts/jquery.ui.colorpicker-swatchesswitcher.js
// @require      https://vanderlee.github.io/colorpicker/parsers/jquery.ui.colorpicker-cmyk-parser.js
// @require      https://vanderlee.github.io/colorpicker/parsers/jquery.ui.colorpicker-cmyk-percentage-parser.js

// ==/UserScript==
// Version 0.4 JKStyle - NOVEDADES [16-Nov-15]
/* Puedes Cambiarle el Color a tu Facebook(Barra Superior donde esta la Busqueda, tu Perfil, Etc...) */

//Editamos los Estilos origiales de Facebook para que funcione ZC_Facebook
jQuery('head').append('<style id="customFB" type="text/css">._4f7n,._4f7n:after{background-image:none;}</style>');

//Agregamos las Hojas de Estilos Externas de JqueryUi y ColorPicker
jQuery('head').append('<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="https://vanderlee.github.io/colorpicker/jquery.colorpicker.css" rel="stylesheet" type="text/css"/>');

//Agregamos los Estilos del Script ZC_Facebook
jQuery('head').append('<style id="script" type="text/css">input.cp-full{padding:12px;vertical-align:top;border:1px solid #ddd;border-right:0}.ui-button{outline:0;border:1px solid #ddd!important;margin:0 0 0 -5px!important;border-radius:0!important}.ui-button.save:hover{background:url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x #fdf5ce}.fondoFB{max-width:400px;position:fixed;left:0;top:75%;transition:all .9s ease;transform:translateX(-100%)}.arrow{position:absolute;content:"";top:5%;right:-64px;width:64px;height:64px;transition:all .8s ease;background-image:url(http://cs.angelkrak.hol.es/archivos/arrow-right.png);background-size:cover;opacity:.6}.arrow.left{background-image:url(http://cs.angelkrak.hol.es/archivos/arrow-left.png)}.arrow:hover{opacity:1;cursor:pointer}.ui-button-text-only .ui-button-text{padding: .7em 1em;}h2.insert{background-color:#3f51b5;color:#fff;box-shadow:0 3px 3px 0 rgba(0,0,0,.14),0 3px 2px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);text-align:center;padding:16px;margin-bottom:-1px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}</style>');

//Agregamos el HTML del ColorPicker
$('body').append('<div class="fondoFB"> <div class="arrow"></div><div class="uno"> <h2 class="insert">Agregar Color</h2> <div id="tab-full"> <input type="text" class="cp-full" id="color-sel"/> <button type="button" id="setfondo" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only save" role="button" aria-disabled="false"> <span class="ui-button-text"><img src="http://cs.angelkrak.hol.es/archivos/save-icon.png" alt="Save" title="Save"></span> </button> </div></div></div>');

/* Boton Open(Arrow) */
$.open = 0;

$(".arrow").click(function(e) {
	e.preventdefault;
	if ($.open === 0) {
		$(".fondoFB").css({
			"transform": "translateX(0%)"
		});
		$(".arrow").css({
			"top": "20%"
		});
		$(this).addClass("left");
		$.open = 1;
	}else{
		$(".fondoFB").css({
			"transform": "translateX(-100%)"
		});
		$(".arrow").css({
			"top": "5%"
		});
		$(this).removeClass("left");
		$.open = 0;
	}
});


//Aqui Empieza el LocalStorage

/*Funcion de Capturar, Almacenar datos y Limpiar campos*/
$(document).ready(function(){

	/* Guarda todas las Imagenes Escritas en los Input */
	$('#setfondo').click(function(){
		if (confirm('Estas Seguro(a) ?')) {
			/*Captura de datos escrito en los inputs*/        
			var fon = document.getElementById("color-sel").value;

			/*Guardando los datos en el LocalStorage*/
			localStorage.setItem("Fondo", fon);
		}
	});
});

/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){

	/*Obtener datos almacenados*/
	var fondo = localStorage.getItem("Fondo");

	/*Mostrar datos almacenados*/      
	var background = "background: "+fondo+" !important;border-bottom: 1px solid "+fondo+" ";
	$("._52z5, ._4f7n").attr("style", background);
	var background_val = ""+fondo+"";
	$("#color-sel").attr("value", background_val);
});

//Function de Recarga/Preview del Color Seleccionado
function color(){
  $(".cp-full")
  .keyup(function() {
    var value = "background: "+$(this).val()+";border-bottom: 1px solid "+$(this).val()+" ";
    $("._52z5, ._4f7n").attr("style", value);
  })
  .keyup();
}
setInterval(color, 10); 

//Activamos la Function del ColorPicker
$(function() {
  $('.cp-full').colorpicker({
   parts: 'full',
   showOn: 'both',
   buttonColorize: true,
   showNoneButton: true,
   alpha: true,
   colorFormat: 'RGBA'
  });
});