Script JKStyle

Script para cambiar "Funciones" de JKanime

  1. // ==UserScript==
  2. // @name Script JKStyle
  3. // @namespace https://openuserjs.org/scripts/AngelKrak/Script_JKStyle
  4. // @description Script para cambiar "Funciones" de JKanime
  5. // @author Angel Komander(AK)
  6. // @website http://angelkrak.hol.es
  7. // @version 0.8
  8. // @include http://*jkanime.net/*
  9. // @include http://*www.jkanime.net/*
  10.  
  11. // ==/UserScript==
  12. // Version 0.3 JKStyle - NOVEDADES [26-Oct-15]
  13. /* Version Primera que traia todo por Defecto */
  14. // Version 0.4 JKStyle - NOVEDADES [14-Sep-15]
  15. /* Cambios en las Etiquetas y Imagen de Preview en Enlaces + Semi-Transparencia en Titulos de JK */
  16. // Version 0.5 JKStyle - NOVEDADES [02-Nov-15]
  17. /* Nuevo ModalBox para las Miniaturas + Nuevo Color para los Titulos del Script */
  18. // Version 0.6 JKStyle - NOVEDADES [03-Nov-15]
  19. /* Nuevo Boton para Eliminar la Imagen que has puesto en X Seccion, Boton para copiar el Enlace de la Imagen, Imagen por Defecto(Si no has puesto ninguna imagen, aparecera otra imagen por Defecto) y Nuevo Scrollbar para los Enlaces */
  20. // Version 0.7 JKStyle - NOVEDADES [04-Nov-15]
  21. /* Cursor Personalizado, Ocultar el Sidebar al Expandir el Reproductor, Ancho Maximo en el Script + Scroll en el Enlace, Nuevo Boton para Añadir la Imagen Individualmente, Nuevo Tamaño para las Imagenes del Modal, Mostrar/Ocultar Sidebar, Scrollbar de JKAnime Custom */
  22. // Version 0.8 JKStyle - NOVEDADES [05-Nov-15]
  23. /* Nuevo Imagen para el Boton del Script, Script de Copy to Clipboard */
  24.  
  25.  
  26. /* Estilos para la Transparencia*/
  27. jQuery('head').append('<style id="transparent" type="text/css">::-webkit-scrollbar{-webkit-appearance: none; width: 7px;}::-webkit-scrollbar-thumb{border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);}.slideback{padding: 10px;background: rgba(255,255,255, .5);}.lista_title,.sinopsis_title,.optional_title{color: #212123;background: rgba(255,255,255, .7);}.srcpage_title{margin: 0;background: rgba(255,255,255, .7);width: 586px;color: #212123;border-radius: 7px 7px 0px 0px;}.listpage{margin:5px 0px;}#content-episodes li{width:542px;}.listpage li{width: 490px;}#content{background:0 0;border:1px solid #D5D5D5;border-radius:3px}#global{background-attachment:fixed;background-position:50% 0;background-repeat:no-repeat;background-size:100%;height:100%}#latest_animes_menu{background:rgba(242,246,247,.4)}#select_lang{color:#000}#simplemodal-container code{background:rgba(0,0,0,.3);color:#fff}.listpage li a:hover,.rated_stars span,.spec:hover div a,.src_box{color:#000}#top_menu{background:0 0;border:1px solid #D5D5D5}#videobox_content div,.video_option_act{position:relative;z-index:9999}.capitulos_right .seoblock{background-color:rgba(249,249,249,.6)}#letters_bg,#select_lang,.comment_like,.cont_top,.latest_end,.listbox,.listpage .search,.publibox,.publibox iframe,.ratedback,.ratedwhite,.select_lang_act,.srcpage_box,.video_actions,.videobox{background:0 0}.listpage .search,.listpage .search p{color:#000;opacity:.99}.listpage .search:hover,.listpage li:hover{background-color:rgba(249,249,249,.6)}.mode_extend{width:100%}.nivo-caption p{opacity:1}.player_conte{display:block}#a4gss77519563910,#moveboxr,.ads_home,.search_right .feed_box,div>div>div>div>object>embed{display:none !important}.publibox iframe{height:218px}.ratedul li:hover,.spec:hover{background-color:rgba(249,249,249,.5)}.search_right .publibox:nth-child(1){background-size:100% 100%;height:500px}.select_lang_act{margin:1.5px 0 0 170px}.descripbox,.listnavi .listpag,.listpage li,.seoblock{background-color:rgba(242,246,247,.3)}.simplemodal-container{background-color:rgba(249,249,249,.6);z-index:999999}.sinopsis_title{border-radius:9px 6px 0 0;margin:0;width:552px}.src_box{background:0 0;font-family:georgia;font-size:18px;outline:0}.sticboxl_act,.video_actions_act{position:relative;z-index:9999}.comment_like,.video_left>.videobox{background:rgba(255,255,255,.5)}.video_right .publibox:nth-child(1){background-size:100% 100%;height:500px;position:relative;/*margin-top: -100%;transform: translate(-0%, -30%);*/}.nivo-caption p{opacity:1 !important;}</style>');
  28.  
  29. /* Estilos para el Script*/
  30. jQuery('head').append('<style id="script" type="text/css">#setfondo,#setsidebar,#setcursor{float:right;padding:12px;position:relative;margin:-45px -20px 0 0;z-index:10}.imglink span {width: 50%;display: inline-block;overflow:auto;padding-bottom:10px;padding-top: 8px;}.imglink span::-webkit-scrollbar{width:7px;height:7px}.imglink span::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.imglink span:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.8)}.btn-del,.btn-copy,.btn-add{padding:10px;color:#fff;background-color:#ff5252;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);font-family:Roboto,Helvetica,Arial,sans-serif;font-size:14px;font-weight:500;border-radius:2px;max-width:70px;display:block;text-decoration:none}div.cont-btn{float:right;margin:-10px 0}.btn-del{margin-top:6px;}.btn-copy{background:#039be5;}.setimg{background:#009688}.imglink img{width:100px;vertical-align:top;height:80px;margin:-15px 15px -15px -15px;}.button,.label{margin-top:-1px}.arrow,.button,h2.insert{cursor:pointer}.button,.label input{outline:0;width:100%}.selectJK{max-width: 400px;position:fixed;right:0;transition:all .9s ease;transform:translateX(100%)}.arrow{/*border-right:25px solid rgba(125,0,240, .5);border-top:25px solid transparent;border-bottom:25px solid transparent;*/position:absolute;content:"";top:5%;left:-64px;width:64px;height:64px;transition:all .8s ease;background-image: url("https://s3.amazonaws.com/quandl-static-content/Chart+of+the+Day/Left+arrow.png");background-size: cover;opacity: 0.6;}.arrow.right{background-image: url("https://s3.amazonaws.com/quandl-static-content/Chart+of+the+Day/Right+arrow.png")}.arrow:hover{opacity: 1;}.label{position:relative;display:block}.label input{padding:15px;border:1px solid #ddd}.button{padding:15px;border:1px solid #145fd7;background:#4a87ee;color:#fff;font-weight:400;font-family:Helvetica;font-size:16px;box-sizing:content-box;box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);}h2.insert{background-color: rgb(63,81,181);color: rgb(255,255,255);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;width:100%;padding:16px;margin-bottom:-1px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.imglink{padding: 15px;width:100%;outline:0;border:1px solid #ddd;background:#fff;display:block;}#global, .selectJK{z-index:10000;}.video_right{margin-top: -100%;transform: translate(-0%, 51%);position: relative;}.toggle-side{background-size:cover !important;position:absolute;right:0;top:0;margin:30px 5px 30px 30px;z-index:10;width:46px;height:38px;cursor:pointer}.toggle-side.hide{background: url("http://www.presentation-process.com/wp-content/uploads/keep-hidden-icon.png");}.toggle-side.show{background: url("http://iconsineed.com/icons/faticons/view-01-128.png");}.video_right2{margin-top: -54%;transform: translate(0%, 0%);}</style>');
  31.  
  32. /* Estilos para el ModalBox */
  33. jQuery('head').append('<style id="modalbox" type="text/css">#modalindex{display:inline-block;margin:5px}.modalimg{background:#fff;padding:5px}#modalcontent{position:fixed;top:50%;width:60vw;height:60vh;margin:0 20vw;margin-top:calc(-60vh / 2);z-index:10001;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}#modalcontouter{position:relative;width:100%;height:100%}#modalcontent #modalclose{background:url(http://cs.angelkrak.hol.es/archivos/close.png) no-repeat;background-size:cover;position:absolute;width:30px;height:30px;top:0;right:0;z-index:10001;margin:-20px}#modalcontimg{outline:0;position:relative;border:10px solid #fff;max-width:420px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#modalcontimg .modalimg{width:100%;padding:0;margin:0;border:none;outline:0;vertical-align:top}</style>');
  34.  
  35. /* Agregamos el contenido del Arrow(Cambiador de Imagenes) */
  36. $("#global").append('<div class="selectJK"> <div class="arrow"></div><div class="uno"> <h2 class="insert">Insertar Imagenes</h2> <label class="label"> <input type="text" placeholder="Fondo de Imagen" id="fondo"> <a href="#" id="setfondo" class="btn-add setimg"><div class="addM">Agregar</div></a></label> <label class="label"> <input type="text" placeholder="Sidebar" id="sidebar"> <a href="#" id="setsidebar" class="btn-add setimg"><div class="addM">Agregar</div></a></label> <label class="label"> <input type="text" placeholder="Cursor" id="cursor"> <a href="#" id="setcursor" class="btn-add setimg"><div class="addM">Agregar</div></a></label> <button class="button" id="boton-guardar">Insertar</button> </div><div class="dos"> <h2 class="insert">Mostrar Enlaces</h2> <div class="imglink"> <a href="#" class="modalink" id="FondoW"><img src="http://www.emprend3.mx/images/site/imagen-no-disponible.png" alt="FondoM" id="FondoM" class="modalimg"/></a><span id="fondoM"></span> <div class="cont-btn"> <a href="#" id="copy-FondoM" class="btn-copy"> <div class="copyM btn" data-clipboard-target="#fondoM">Copiar</div></a> <a href="#" id="del-FondoM" class="btn-del"> <div class="delM">Eliminar</div></a> </div></div><div class="imglink"> <a href="#" class="modalink" id="SidebarW"><img src="http://www.emprend3.mx/images/site/imagen-no-disponible.png" alt="SidebarM" id="SidebarM" class="modalimg"/></a><span id="sidebarM"></span> <div class="cont-btn"> <a href="#" id="copy-SidebarM" class="btn-copy"> <div class="copyM btn" data-clipboard-target="#sidebarM">Copiar</div></a> <a href="#" id="del-SidebarM" class="btn-del"> <div class="delM">Eliminar</div></a> </div></div><div class="imglink"> <a href="#" class="modalink" id="CursorW"><img src="http://www.emprend3.mx/images/site/imagen-no-disponible.png" alt="CursorM" id="CursorM" class="modalimg"/></a><span id="cursorM"></span> <div class="cont-btn"> <a href="#" id="copy-CursorM" class="btn-copy"> <div class="copyM btn" data-clipboard-target="#cursorM">Copiar</div></a> <a href="#" id="del-CursorM" class="btn-del"> <div class="delM">Eliminar</div></a> </div></div></div></div>');
  37.  
  38. /* Agregamos la imagen para Ocultar y Mostrar Sidebar */
  39. $(".video_right").append('<div class="toggle-side hide"></div>');
  40.  
  41. var clipboard = new Clipboard('.btn');
  42.  
  43. clipboard.on('success', function(e) {
  44. console.info('Action:', e.action);
  45. console.info('Text:', e.text);
  46. console.info('Trigger:', e.trigger);
  47.  
  48. e.clearSelection();
  49. showTooltip(e.trigger, 'Copied!');
  50. });
  51.  
  52. clipboard.on('error', function(e) {
  53. console.error('Action:', e.action);
  54. console.error('Trigger:', e.trigger);
  55. showTooltip(e.trigger, fallbackMessage(e.action));
  56. });
  57.  
  58. /* Boton Open */
  59. $.open = 0;
  60.  
  61. $(".arrow").click(function(e) {
  62. e.preventdefault;
  63. if ($.open === 0) {
  64. $(".selectJK").css({
  65. "transform": "translateX(-32px)"
  66. });
  67. $(".arrow").css({
  68. "top": "50%"
  69. });
  70. $(this).addClass("right");
  71. $.open = 1;
  72. }else{
  73. $(".selectJK").css({
  74. "transform": "translateX(100%)"
  75. });
  76. $(".arrow").css({
  77. "top": "5%"
  78. });
  79. $(this).removeClass("right");
  80. $.open = 0;
  81. }
  82. });
  83.  
  84. /* Script del ModalBox */
  85. $('body').append('<div id="modalcontent"></div>');
  86. $("#modalcontent").append('<div id="modalcontouter"></div>');
  87. $('#modalcontouter').append('<div id="modalcontimg"></div>');
  88. $("#modalcontimg").append('<a href="#" id="modalclose"></a>');
  89. $(".modalink").click(function(e) {
  90. e.preventDefault;
  91. $("#modalcontent").css({
  92. "transform": "scale(1)"
  93. });
  94. $("img", this).clone().appendTo('#modalcontent #modalcontimg');
  95. $("body").append('<div id="contover"><div id="#modalover" style="opacity: 0.7;cursor: pointer;height: 100vh;display: block;background-color: rgb(119, 119, 119);position: fixed;top: 0;left: 0;width: 100%;z-index: 10000;"></div></div>');
  96. });
  97. $("#modalclose").click(function(e) {
  98. e.preventDefault;
  99. $("#modalcontent").css({
  100. "transform": "scale(0)"
  101. });
  102. setTimeout(function() {
  103. $("#modalcontimg .modalimg").remove();
  104. $('#contover:first').remove();
  105. },1000);
  106. });
  107.  
  108. /* Cambiar Tamaño de la imagen del Modal segun el Click */
  109. $("#FondoW").click(function() {
  110. $("#modalcontimg").css("max-width", "100%");
  111. });
  112. $(".imglink a:not(#FondoW)").click(function() {
  113. $("#modalcontimg").css("max-width", "420px");
  114. });
  115.  
  116. /* */
  117. $(".toggle-side").click(function() {
  118. $(".hide").toggleClass("show");
  119. $(".video_right .publibox:nth-child(1)").toggle();
  120. $(".video_right").toggleClass("video_right2");
  121. });
  122.  
  123. /* Mostrar/Ocultar Sidebar al apretar el Boton de Expandir Reproductor*/
  124. $(".expand_s").click(function() {
  125. $(".video_right .publibox").toggle();
  126. });
  127.  
  128. /* Mostramos y Ocultamos */
  129. $(".uno").show();
  130. $(".dos .imglink").hide();
  131.  
  132. $("h2.insert").click(function() {
  133. $(".dos .imglink").slideToggle("slow");
  134. });
  135.  
  136. $("h2.insert").click(function() {
  137. $(".uno label, #boton-guardar").slideToggle("slow");
  138. });
  139.  
  140. /*Funcion de Capturar, Almacenar datos y Limpiar campos*/
  141. $(document).ready(function(){
  142. //Establecer Imagen de Fondo
  143. $('#setfondo').click(function(){
  144. if (confirm('Estas Seguro(a) ?')) {
  145. /*Captura de datos escrito en los inputs*/
  146. var fon = document.getElementById("fondo").value;
  147. /*Guardando los datos en el LocalStorage*/
  148. localStorage.setItem("Fondo", fon);
  149. /*Limpiando los campos o inputs*/
  150. document.getElementById("fondo").value = "";
  151. }
  152. });
  153. //Establecer Imagen de Sidebar
  154. $('#setsidebar').click(function(){
  155. if (confirm('Estas Seguro(a) ?')) {
  156. /*Captura de datos escrito en los inputs*/
  157. var sid = document.getElementById("sidebar").value;
  158. /*Guardando los datos en el LocalStorage*/
  159. localStorage.setItem("Sidebar", sid);
  160. /*Limpiando los campos o inputs*/
  161. document.getElementById("sidebar").value = "";
  162. }
  163. });
  164. //Establecer Imagen del Cursor
  165. $('#setcursor').click(function(){
  166. if (confirm('Estas Seguro(a) ?')) {
  167. /*Captura de datos escrito en los inputs*/
  168. var cur = document.getElementById("cursor").value;
  169. /*Guardando los datos en el LocalStorage*/
  170. localStorage.setItem("Cursor", cur);
  171. /*Limpiando los campos o inputs*/
  172. document.getElementById("cursor").value = "";
  173. }
  174. });
  175. /* Guarda todas las Imagenes Escritas en los Input */
  176. $('#boton-guardar').click(function(){
  177. if (confirm('Estas Seguro(a) ?')) {
  178. /*Captura de datos escrito en los inputs*/
  179. var fon = document.getElementById("fondo").value;
  180. var sid = document.getElementById("sidebar").value;
  181. var cur = document.getElementById("cursor").value;
  182.  
  183. /*Guardando los datos en el LocalStorage*/
  184. localStorage.setItem("Fondo", fon);
  185. localStorage.setItem("Sidebar", sid);
  186. localStorage.setItem("Cursor", cur);
  187.  
  188. /*Limpiando los campos o inputs*/
  189. document.getElementById("fondo").value = "";
  190. document.getElementById("sidebar").value = "";
  191. document.getElementById("cursor").value = "";
  192. }
  193. });
  194. });
  195.  
  196. /*Funcion Cargar y Mostrar datos*/
  197. $(document).ready(function(){
  198.  
  199. /*Obtener datos almacenados*/
  200. var fondo = localStorage.getItem("Fondo");
  201. var sidebar = localStorage.getItem("Sidebar");
  202. var cursor = localStorage.getItem("Cursor");
  203.  
  204. /*Mostrar datos almacenados*/
  205. var background = "background-image: url('"+fondo+"')";
  206. $("body #global").attr("style", background);
  207. document.getElementById("fondoM").innerHTML = fondo;
  208. var sidebar2 = "background-image: url('"+sidebar+"')";
  209. $(".video_right .publibox:nth-child(1)").attr("style", sidebar2);
  210. document.getElementById("sidebarM").innerHTML = sidebar;
  211. if(cursor) {
  212. var cursor2 = "cursor: url("+cursor+"), default";
  213. $("body").attr("style", cursor2);
  214. document.getElementById("cursorM").innerHTML = cursor;
  215. }else{
  216. $("body").attr("style", "cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1037.ani), url(http://cur.cursors-4u.net/anime/ani-11/ani1037.png), default;");
  217. }
  218.  
  219. /* Preview de Imagenes */
  220. if (fondo){
  221. var backgroundimg = ""+fondo+"";
  222. $(".imglink #FondoM").attr("src", backgroundimg);
  223. }else{
  224. $(".imglink #FondoM").attr("src", "http://www.emprend3.mx/images/site/imagen-no-disponible.png");
  225. }
  226. if (sidebar){
  227. var sidebarimg = ""+sidebar+"";
  228. $(".imglink #SidebarM").attr("src", sidebarimg);
  229. }else{
  230. $(".imglink #SidebarM").attr("src", "http://www.emprend3.mx/images/site/imagen-no-disponible.png");
  231. }
  232. if (cursor){
  233. var cursorimg = ""+cursor+"";
  234. $(".imglink #CursorM").attr("src", cursorimg);
  235. }else{
  236. $(".imglink #CursorM").attr("src", "http://www.emprend3.mx/images/site/imagen-no-disponible.png");
  237. }
  238. });
  239.  
  240. /*Funcion Eliminar Imagenes y Limpiar campos*/
  241. $(document).ready(function(){
  242.  
  243. //Eliminar Fondo de Imagen
  244. $('#del-FondoM').click(function(){
  245.  
  246. /*Eliminar imagen almacenada*/
  247. localStorage.removeItem("Fondo");
  248.  
  249. /*Limpiar datos almacenados*/
  250. document.getElementById('fondo').innerHTML = "";
  251. });
  252.  
  253. //Eliminar Imagen del Sidebar
  254. $('#del-SidebarM').click(function(){
  255.  
  256. /*Eliminar imagen almacenada*/
  257. localStorage.removeItem("Sidebar");
  258.  
  259. /*Limpiar datos almacenados*/
  260. document.getElementById('sidebar').innerHTML = "";
  261. });
  262.  
  263. //Eliminar Imagen del Cursor
  264. $('#del-CursorM').click(function(){
  265.  
  266. /*Eliminar imagen almacenada*/
  267. localStorage.removeItem("Cursor");
  268.  
  269. /*Limpiar datos almacenados*/
  270. document.getElementById('cursor').innerHTML = "";
  271. });
  272. });