☰

Legacy Chat 2

Replaces New Chat

  1. // ==UserScript==
  2. // @name         Legacy Chat 2
  3. // @namespace    https://www.twitch.tv/garych
  4. // @version      0.0.1
  5. // @include      *://*.twitch.tv/*
  6. // @exclude      *://www.twitch.tv/*/chat*
  7. // @exclude      *://twitch.tv/*/chat*
  8. // @exclude      *://api.twitch.tv/*
  9. // @exclude      *://*.destiny.gg/*
  10. // @author       garych
  11. // @grant        GM_addStyle
  12. // @require      https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
  13. // @description  Replaces New Chat
  14. // ==/UserScript==
  15.  
  16.  
  17. (function(factory, undefined) {
  18.     if (typeof define === 'function' && define.amd) {
  19.         // AMD
  20.         define(['jquery'], factory);
  21.     } else if (typeof module === 'object' && typeof module.exports === 'object') {
  22.         // CommonJS
  23.         module.exports = factory(require('jquery'));
  24.     } else {
  25.         // Global jQuery
  26.         factory(jQuery);
  27.     }
  28. }(function($, undefined) {
  29.  
  30.     function getHandle(selector, $el) {
  31.         if (selector && selector.trim()[0] === ">") {
  32.             selector = selector.trim().replace(/^>\s*/, "");
  33.  
  34.             return $el.find(selector);
  35.         }
  36.  
  37.         return selector ? $(selector) : $el;
  38.     }
  39.  
  40.     if ($.fn.resizable)
  41.         return;
  42.  
  43.     $.fn.resizable = function fnResizable(options) {
  44.         var opt = {
  45.             // selector for handle that starts dragging
  46.             handleSelector: null,
  47.             // resize the width
  48.             resizeWidth: true,
  49.             // resize the height
  50.             resizeHeight: true,
  51.             // the side that the width resizing is relative to
  52.             resizeWidthFrom: 'right',
  53.             // the side that the height resizing is relative to
  54.             resizeHeightFrom: 'bottom',
  55.             // hook into start drag operation (event passed)
  56.             onDragStart: null,
  57.             // hook into stop drag operation (event passed)
  58.             onDragEnd: null,
  59.             // hook into each drag operation (event passed)
  60.             onDrag: null,
  61.             // disable touch-action on $handle
  62.             // prevents browser level actions like forward back gestures
  63.             touchActionNone: true
  64.         };
  65.         if (typeof options == "object") opt = $.extend(opt, options);
  66.  
  67.         return this.each(function() {
  68.             var startPos, startTransition;
  69.  
  70.             var $el = $(this);
  71.  
  72.             var $handle = getHandle(opt.handleSelector, $el);
  73.  
  74.             if (opt.touchActionNone)
  75.                 $handle.css("touch-action", "none");
  76.  
  77.             $el.addClass("resizable");
  78.             $handle.bind('mousedown.rsz touchstart.rsz', startDragging);
  79.  
  80.             function noop(e) {
  81.                 e.stopPropagation();
  82.                 e.preventDefault();
  83.             };
  84.  
  85.             function startDragging(e) {
  86.                 // Prevent dragging a ghost image in HTML5 / Firefox and maybe others
  87.                 if (e.preventDefault) {
  88.                     e.preventDefault();
  89.                 }
  90.                 document.body.style.pointerEvents = 'none';
  91.                 startPos = getMousePos(e);
  92.                 startPos.width = parseInt($el.width(), 10);
  93.                 startPos.height = parseInt($el.height(), 10);
  94.  
  95.                 startTransition = $el.css("transition");
  96.                 $el.css("transition", "none");
  97.  
  98.                 if (opt.onDragStart) {
  99.                     if (opt.onDragStart(e, $el, opt) === false)
  100.                         return;
  101.                 }
  102.                 opt.dragFunc = doDrag;
  103.  
  104.                 $(document).bind('mousemove.rsz', opt.dragFunc);
  105.                 $(document).bind('mouseup.rsz', stopDragging);
  106.                 if (window.Touch || navigator.maxTouchPoints) {
  107.                     $(document).bind('touchmove.rsz', opt.dragFunc);
  108.                     $(document).bind('touchend.rsz', stopDragging);
  109.                 }
  110.                 $(document).bind('selectstart.rsz', noop); // disable selection
  111.             }
  112.  
  113.             function doDrag(e) {
  114.                 var pos = getMousePos(e),
  115.                     newWidth, newHeight;
  116.  
  117.                 if (opt.resizeWidthFrom === 'left')
  118.                     newWidth = startPos.width - pos.x + startPos.x;
  119.                 else
  120.                     newWidth = startPos.width + pos.x - startPos.x;
  121.  
  122.                 if (opt.resizeHeightFrom === 'top')
  123.                     newHeight = startPos.height - pos.y + startPos.y;
  124.                 else
  125.                     newHeight = startPos.height + pos.y - startPos.y;
  126.  
  127.                 if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
  128.                     if (opt.resizeHeight)
  129.                         $el.height(newHeight);
  130.  
  131.                     if (opt.resizeWidth)
  132.                         $el.width(newWidth);
  133.                 }
  134.             }
  135.  
  136.             function stopDragging(e) {
  137.                 e.stopPropagation();
  138.                 e.preventDefault();
  139.                 document.body.style.pointerEvents = 'auto';
  140.                 $(document).unbind('mousemove.rsz', opt.dragFunc);
  141.                 $(document).unbind('mouseup.rsz', stopDragging);
  142.  
  143.                 if (window.Touch || navigator.maxTouchPoints) {
  144.                     $(document).unbind('touchmove.rsz', opt.dragFunc);
  145.                     $(document).unbind('touchend.rsz', stopDragging);
  146.                 }
  147.                 $(document).unbind('selectstart.rsz', noop);
  148.  
  149.                 // reset changed values
  150.                 $el.css("transition", startTransition);
  151.  
  152.                 if (opt.onDragEnd)
  153.                     opt.onDragEnd(e, $el, opt);
  154.  
  155.                 return false;
  156.             }
  157.  
  158.             function getMousePos(e) {
  159.                 var pos = { x: 0, y: 0, width: 0, height: 0 };
  160.                 if (typeof e.clientX === "number") {
  161.                     pos.x = e.clientX;
  162.                     pos.y = e.clientY;
  163.                 } else if (e.originalEvent.touches) {
  164.                     pos.x = e.originalEvent.touches[0].clientX;
  165.                     pos.y = e.originalEvent.touches[0].clientY;
  166.                 } else
  167.                     return null;
  168.  
  169.                 return pos;
  170.             }
  171.         });
  172.     };
  173. }));
  174.  
  175.  
  176. function cleanName(str) {
  177.     var strLength = str.length;
  178.     for (var i = 0; i < strLength; i++) {
  179.         if (!/^\w+$/.test(str[i])) {
  180.             return str.slice(0, i);
  181.         }
  182.     }
  183.     return str;
  184. }
  185.  
  186.  
  187. function switchChannel(channel, iframe) {
  188.     if (event.key === 'Enter') {
  189.         chat = $(iframe);
  190.         if (channel === '') {
  191.             if (iframe == '.chat-1') {
  192.                 chat[0].style.maxHeight = "0";
  193.                 chat.attr('src', "about:blank");
  194.             } else {
  195.                 return;
  196.             }
  197.         } else {
  198.             if ((iframe == '.chat-1') && ($(".resizable").length === 0)) {
  199.                 $(".chat-1").resizable({
  200.                     handleSelector: ".splitter-horizontal",
  201.                     resizeWidth: false
  202.                 });
  203.             }
  204.             if (channel !== 'destinygg') {
  205.                 chat.attr('src', ("https://www.twitch.tv/" + channel + "/chat"));
  206.             } else {
  207.                 chat.attr('src', "https://destiny.gg/embed/chat");
  208.             }
  209.             if (chat[0].offsetHeight < (0.1 * $('#chats').height())) {
  210.                 $('.chat-1')[0].style.height = "calc(50% - 7px)";
  211.                 $('.chat-1')[0].style.maxHeight = "calc(100% - 14px)";
  212.             }
  213.         }
  214.     }
  215. }
  216.  
  217. $(document).keyup(function (e) {
  218.     if ($("#input-1:focus") && (e.keyCode === 13)) {
  219.        switchChannel($('#input-1')[0].value,'.chat-1');
  220.     }
  221.     if ($("#input-2:focus") && (e.keyCode === 13)){
  222.         switchChannel($('#input-2')[0].value,'.chat-2');
  223.     }
  224.  });
  225.  
  226. GM_addStyle('#chat-holder {margin: 0; height: 100%}');
  227.  
  228. GM_addStyle('#chat-selection { margin-top: 0; padding: 0;}');
  229.  
  230. GM_addStyle('#input-1, #input-2 { border-style: solid; background-color: #252525; border-color: #3b3b3b; border-width: 1px; display: inline-block; margin-right: 0px; padding-left: 9px; width: 50%; color: #d3d3d3;}');
  231.  
  232. GM_addStyle('#chat-selection,#input-1,#input-2 {    height: 32px;}');
  233.  
  234. GM_addStyle('#chats, .chat-1, .chat-2 {    background-color: #252525;}');
  235.  
  236. GM_addStyle('.chat-1 {    transition: height 0.2s ease;}');
  237.  
  238. GM_addStyle('#chats {    height: calc(100% - 32px);    display: flex;    flex-direction: column;}');
  239.  
  240. GM_addStyle('.chat-1,.chat-2 {    border: none;    min-height: 0;    max-height: calc(100% - 14px);    width: 100%;}');
  241.  
  242. GM_addStyle('.chat-1 {    flex: 0 0 auto;    height: 0;}');
  243.  
  244. GM_addStyle('.splitter-horizontal {    flex: 0 0 auto;    height: 14px;    background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #191919;    cursor: row-resize;}');
  245.  
  246. GM_addStyle('.chat-2 {    margin-bottom: 0px;    flex: 1 1 auto;}');
  247.  
  248. function replaceChat() {
  249.     var url = window.location.href;
  250.     var chan = url.split("/");
  251.     var chanName = cleanName(chan[3]);
  252.     var chat1 = "'.chat-1'";
  253.     var chat2 = "'.chat-2'";
  254.     var embeddedChat = '<div id="chat-holder"><div id="chat-selection"> <input id="input-1" type="text" placeholder="Top" onkeydown="switchChannel(this,'+chat1+')"><input id="input-2" type="text" placeholder="Bottom" onkeydown="switchChannel(this,'+chat2+')"></div><div id="chats"><iframe class="chat-1" src="about:blank"></iframe><div class="splitter-horizontal"></div><iframe class="chat-2" src="https://www.twitch.tv/'+chanName+'/chat"></iframe></div></div>';
  255.     $(".chat-room__container").html(embeddedChat);
  256. }
  257. var observer = new MutationObserver(function() {
  258.     console.log("Mutation Detected");
  259.     if (!$(".chat-room__container #chat-holder").length) {
  260.         console.log("Replacing Chat");
  261.         replaceChat();
  262.     }
  263. });
  264.  
  265. var config = {
  266.     attributes: true,
  267.     childList: true,
  268.     characterData: true
  269. };
  270.  
  271. observer.observe(document.body, config);

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址