AO3: [Wrangling] Character Counter when Creating New Tags

find out how long your tag is right as you put it in

目前為 2022-06-01 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name           AO3: [Wrangling] Character Counter when Creating New Tags
// @description    find out how long your tag is right as you put it in
// @version        1.0.3
// @author         Rhine
// @namespace      https://github.com/RhineCloud
// @match          http*://*archiveofourown.org/tags/new
// @match          http*://*archiveofourown.org/tags/*/edit
// @require        https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @grant          none
// @license        GPL-3.0 <https://www.gnu.org/licenses/gpl.html>
// ==/UserScript==

(function($) {
    // find out which page is open
    var page_url = window.location.pathname;
    // how to find the relevant elements on tag edit pages
    var legend_sel = '#edit_tag [for="tag_syn_string_autocomplete"]';
    var field_sel = '#edit_tag #tag_syn_string_autocomplete';
    // how to find the relevant bits on the new tag page instead
    if (page_url.endsWith('/tags/new')) {
        legend_sel = '#new_tag [for="tag_name"]';
        field_sel = '#new_tag #tag_name';
    }
    var tag_length = 0;
    // add the neutral/default counter text
    $(legend_sel).append('<span style="font-size:0.8em;">&nbsp; (tag&nbsp;length:&nbsp;' +
                         '<span class="counted_length">...</span>)</span>');
    // do this thing once the typing is done
    $(field_sel).on('keyup', function() {
        // find out what was entered
        var tag_input = $(this).val();
        // figure out the length of the input
        if (tag_input) {tag_length = tag_input.length;}
        // insert the length into the counter text
        $('.counted_length').text(tag_length);
        // change the appearance of the field
        // depending on whether the resulting tag would be too long
        if (tag_length > 100) {
            $(this).css({'color':'white',
                         'background-color':'darkred'});
        } else {
            $(this).css({'color':'#222',
                         'background-color':'honeydew'});
        }
    });
})(jQuery);