☰

cytube_emote_float_window

エモートをウィンドウで常に表示(ダブルクリックすると直接送信)

目前为 2020-07-03 提交的版本。查看 最新版本。

// ==UserScript==
// @name         cytube_emote_float_window
// @namespace    https://cytube.xyz/
// @version      0.4
// @description  エモートをウィンドウで常に表示(ダブルクリックすると直接送信)
// @author       utubo
// @match        *://cytube.xyz/*
// @grant        none
// ==/UserScript==
// cytubeならjQueryもjQuryUIも読み込まれてるはずだから@requireしないでいいか…

(window.unsafeWindow || window).eval(` // ← チャンネルのJSにセットするときはこの行(と最後の行)を削除
// ウィンドウの初期位置
var offset = null;
var width = 550;
var height = 200;

// 2重起動されたら古いのはクリアする
(function() {
var emoteFloatWindow = $('#GM_emote_float_window');
if (emoteFloatWindow[0]) {
  // 位置は覚えておく
  offset = emoteFloatWindow.offset();
  width = emoteFloatWindow.width();
  height = emoteFloatWindow.height();
  $('#GM_emote_float_window').remove();
  $('#GM_emote_float_window_button').remove();
} else {
  offset = $('#emotelistbtn').offset();
  offset.top += 20;
}

// フロートウィンドウの外枠を作成
emoteFloatWindow =
  $('<div id="GM_emote_float_window" style="' +
      'position: fixed;' + 
      'z-index: 2;' + 
      'top: 10px;' + 
      'left: 10px;' + 
      'width: ' + width + 'px;' + 
      'height: ' + height + 'px;' + 
      'overflow: hidden;' +
      'border: 1px solid;' +
      'padding: 10px;' +
      'display: none;' +
      '">' +
      '<div id="GM_emote_float_window_content" style="width:100%;height:100%;overflow:auto;">' +
    '</div>')
  .appendTo($('body'))
;
emoteFloatWindow
  .resizable()
	.draggable()
  .offset(offset)
;

// エモートをクリックorダブルクリックしたときの処理
var chatline = $('#chatline');
var addEmoteTimer = null;
var addEmote = ev => {
  var title = ev.target.getAttribute('title');
  if (!title) return;
  addEmoteTimer = setTimeout(() => {
    var value = chatline[0].value;
    chatline[0].value = value + (value ? ' ' : '') + title; 
  }, 100);
};
emoteFloatWindow.on('click', 'img', addEmote);
emoteFloatWindow.on('dblclick', 'img', ev => {
  clearTimeout(addEmoteTimer);
  var evt1 = $.Event('keydown');
  evt1.keyCode = 13;
  chatline.trigger(evt1);
  var evt2 = $.Event('keyup');
  evt2.keyCode = 13;
  chatline.trigger(evt2);
});

// リスト更新
var content = $('#GM_emote_float_window_content');
var refreshList = () => {
  emoteFloatWindow.css('backgroundColor', getComputedStyle(document.body, null).getPropertyValue('background-color'));
  content.empty();
  for (var emote of CHANNEL.emotes) {
    $('<img style="max-width:50px;max-height:50px;vertical-align:bottom;" title="' + emote.name + '" src="' + emote.image + '">')
    .appendTo(content);
  }
};

// 表示切替ボタン
$('<button id="GM_emote_float_window_button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-new-window"></span></button>')
  .on('click', ev => {
    if (emoteFloatWindow.css('display') == 'none') {
      refreshList();
    }
    emoteFloatWindow.toggle();
  })
  .insertAfter($('#emotelistbtn'))
;
})();
`); // ← チャンネルのJSにセットするときはこの行も削除