Raw Source Toggle Dropdown

• Minified Source

ReiReiRei / StatusovkaKPV

// ==UserScript==
// @name         StatusovkaKPV
// @version      2.0
// @description  Статус
// @author       ReiReiRei
// @copyright    2021, Ленивый (https://catwar.su/cat930302)
// @license      MIT; https://opensource.org/licenses/MIT
// @updateURL    https://openuserjs.org/meta/ReiReiRei/StatusovkaKPV.meta.js
// @include      /https:\/\/\w?\.?catwar\.su\/lol\/status/
// @grant        GM_xmlhttpRequest
// @grant        GM.xmlHttpRequest
// @require      https://code.jquery.com/jquery-3.4.1.min.js
// ==/UserScript==
/*global jQuery*/
(function (window, document, $) {
  'use strict';
  if (typeof $ === 'undefined') return;
  $('head').append(`<style>button, select {background: #ffe;} select {padding: 1px 2px;}</style>`);
  $('body').append(`
<div>
<div>Шаблоны статусовки:</div>

<div id="ss_templates" data-txt="">
  <select id="ss_type">
    <option value="norm" data-blog="17540">Обычное КИ</option>
    <option value="ivlg" data-title="1" data-blog="609967">Иволги</option>
    <option value="lask" data-title="1" data-blog="609967">Ласки</option>
    <option value="lisa" data-title="1" data-blog="609967">Лисы</option>
    <option data-title="1">Нестандартный</option>
  </select>
  <span style="display:none;" class="title_switch_main">
    <input type="checkbox" id="ss_title_chk">
    <label for="ss_title_chk">Есть титул</label>
  </span>
</div>
<table border=0>
<tbody>
<tr style="display:none;" class="title_switch"><td>Картинка титула: </td><td><input type="text" id="ss_title_pic"></td></tr>
<tr style="display:none;" class="title_switch"><td>Титул: </td><td><input type="text" id="ss_title"></td></tr>
<tr><td>Ссылка на картинку: </td><td><input type="text" id="ss_pic" value="http://images.vfl.ru/ii/1522309827/9e238bc8/21157555.png"></td></tr>
<tr><td>Блог: </td><td><select id="ss_blog" style="width:177px;">
    <option value="17540" selected>Главный</option>
    <option value="609967">Последователей</option>
  </select></td></tr>
<tr><td>Имя: </td><td><input id="ss_name" type="text" value="Клановое Имя"></td></tr>
</tbody>
</table>
<div><button id="ss_apply">Применить</button></div>
<div id="ss_preview" style="margin-top:3px;">
  <table>
    <tbody>
      <tr>
        <td style="vertical-align: inherit;">
          <a href="blog17540" id="ss_tmp_blog_id" target="_blank">
            <img id="ss_tmp_pic" src="http://images.vfl.ru/ii/1522309827/9e238bc8/21157555.png" border="0">
          </a>
        </td>
        <td style="vertical-align: inherit;">　<div style="font-family:Segoe UI Light;display:inline">
            <div style="font-size:17pt;display:inline" id="ss_tmp_name">Клановое Имя</div>
            <div class="title_switch" style="display:none;" align="center">
              <div style="font-size:13pt;display:inline">
              <img id="ss_tmp_title_pic" src="http://images.vfl.ru/ii/1606770744/6dfb3532/32499671.png" border="0">
              <span id="ss_tmp_title"></span>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
</div>
    `);
  const pics = {
    "norm": "http://images.vfl.ru/ii/1522309827/9e238bc8/21157555.png",
    "ivlg": "http://images.vfl.ru/ii/1604159092/1dda3f82/32141463.png",
    "lask": "http://images.vfl.ru/ii/1604159092/ed9c5fbd/32141464.png",
    "lisa": "http://images.vfl.ru/ii/1604159092/448b5ed6/32141465.png"
  };
  const titles = {
    "lask": "Очищенная душа",
    "lisa": "Благословлён Лисой-Светило [br] на относительно безопасную для душевного здоровья [br]ловлю мышей до исхода этой луны "
  };
  const title_pics = {
    "ivlg": "http://images.vfl.ru/ii/1606976114/7cd20c81/32530037.png",
    "lask": "https://i.ibb.co/K2mHq5Z/6c6bca49099a.png",
    "lisa": "http://images.vfl.ru/ii/1606770744/6dfb3532/32499671.png"
  };

  function capitalize(str) {
    return str.replace(/(^|\s|-)\S/g, function (a) {
      return a.toUpperCase()
    })
  }

  function refresh_status() {
    let title_txt = '',
      have_title = $('#ss_title_chk:checked').length,
      blog_id = $('#ss_blog').val(),
      pic = $('#ss_pic').val(),
      name = $('#ss_name').val();
    if (have_title) {
      let title = $('#ss_title').val(),
        title_pic = $('#ss_title_pic').val();
      title_txt = `[center][size=13][img]${title_pic}[/img]${title}[/size][/center]`;
      $('#ss_tmp_title').text(title);
      $('#ss_tmp_title_pic').prop('src', title_pic);
      $('.title_switch').show();
    }
    else {
      $('.title_switch').hide();
    }
    name = capitalize(name);
    let txt = `[table=0][td][url=blog${blog_id}][img]${pic}[/img][/url][/td][td]　[font=Segoe UI Light][size=17]${name}[/size]${title_txt}[/font][/td][/table]`;
    $('#ss_tmp_blog_id').prop('href', blog_id);
    $('#ss_tmp_pic').prop('src', pic);
    $('#ss_tmp_name').text(capitalize(name));
    console.log("refreshed");
    console.log(txt);
    $('#ss_templates').data('txt', txt);
  }
  refresh_status();

  $('#ss_apply').on('click', function () {
    let val = $('#ss_templates').data('txt');
    $('input[name="status"]').val(val);
  });
  $('#ss_type').on('change', function () {
    let title_switch = $(this).find('option:selected').data('title') === undefined ? false : true,
      val = $(this).val(),
      blog_id = $(this).find('option:selected').data('blog') || 17540;
    if (title_switch) {
      $('.title_switch_main').show();
    }
    else {
      $('.title_switch_main, .title_switch').hide();
      $('#ss_title_chk').prop('checked', false);
    }
    let title_pic = title_pics[val] || "",
      title = titles[val] || "",
      pic = pics[val] || "";
    $('#ss_blog option[value="' + blog_id + '"]').prop('selected', true);
    $('#ss_title_pic').val(title_pic);
    $('#ss_title').val(title);
    $('#ss_pic').val(pic);
    refresh_status();
  });
  $('#ss_title_chk').on('change', function () {
    refresh_status();
  });
  $('#ss_blog').on('change', function () {
    refresh_status();
  });
  $('#ss_pic, #ss_title, #ss_title_pic, #ss_name').on('change paste focusout keyup', function () {
    refresh_status();
  });
})(window, document, jQuery);