<commit_before>// Whether or not we're running on Reddit's .compact display, i.e. their mobile
// version. We modify the search box UI a fair bit to compensate in this case.
//
// i.reddit.com is another way to get the compact UI. Occasionally it'll
// redirect users to .compact links, but in the meantime we need to work
// correctly there as well.
var is_compact = ends_with(document.location.pathname, ".compact") ||
                 document.location.hostname.split(".").indexOf("i") > -1;

// Search box elements
var sb_container = null;
var sb_dragbox = null;
var sb_tagdropdown = null;
var sb_input = null;
var sb_resultinfo = null;
var sb_close = null;
var sb_tabframe = null;
var sb_results = null;
var sb_helptab = null;
var sb_helplink = null;
var sb_flagtab = null;
var sb_flaglink = null;
var sb_optionslink = null;
var sb_resize = null;
var sb_global_icon = null; // Global << thing

var sb_firstrun = false; // Whether or not we've made any search at all yet
var current_sb_tab = null;

/*
 * Sets up the search box for use on a page, either Reddit or the top-level
 * frame, globally. Also injects the global icon, though it doesn't initialize
 * it.
 */
function init_search_box(store) {
    log_debug("Initializing search box");
    inject_search_box();
    init_search_ui(store);
}

/*
 * Builds and injects the search box HTML.
 */
function inject_search_box() {
    // Placeholder div to create HTML in
    var div = document.createElement("div");
    // I'd sort of prefer display:none, but then I'd have to override it
    div.style.visibility = "hidden";
    div.id = "bpm-stuff"; // Just so it's easier to find in an elements list

    // NOTE: Do not add elements to this without first considering whether or
    // not they need to have "visibility: inherit;" in bpmotes.css. It probably
    // does. See the note there.

    var html = [
        // tabindex is a hack to make Esc work. Reddit uses this index in a
        // couple of places, so it's probably safe.
        '<div id="bpm-sb-container" tabindex="100">',
          '<div id="bpm-sb-toprow">',
            '<span id="bpm-sb-dragbox"></span>',
            '<select id="bpm-sb-tagdropdown" onchange="">',
            '<input id="bpm-sb-input" type="search" placeholder="Search"/>',
            '<span id="bpm-sb-resultinfo"></span>',
            '<span id="bpm-sb-close"></span>',
          '</div>',
          '<div id="bpm-sb-tabframe">',
            '<div id="bpm-sb-results"></div>',
            '<div id="bpm-sb-helptab">',
              '<p class="bpm-sb-help">Simple search terms will show you ',
                'emotes with names that match: for instance, <code>"aj"',
                '</code> will find all emotes with <code>"aj"</code> in ',
                'their names. If you use more than one term, all of them ',
                'must match to return an emote.</p>',
              '<p class="bpm-sb-help">You can filter by subreddit with the ',
                'special syntaxes <code>"r/subreddit"</code> and <code>"sr:',
                'subreddit"</code>. Using more than one such filter returns ',
                'results from each of them.</p>',
              '<p class="bpm-sb-help">All emotes are tagged according to ',
                'their contents, and these can be searched on like <code>',
                '"+twilightsparkle"</code>. Most show characters have their ',
                'own tags that can be easily guessed, and some classes of ',
                '"themed" emotes also have tags. You can also negate tags ',
                'with <code>"-fluttershy"</code> to remove emotes from the ',
                'results.</p>',
              '<p class="bpm-sb-help">Some emotes are hidden by default. ',
                'Use <code>"+nonpony"</code> to see them.</p>',
            '</div>',
            '<div id="bpm-sb-flagtab">',
              '<p class="bpm-sb-flag">You can add various flags onto emotes to ',
              'change their appearance or behavior using the syntax of <code>',
              '[](/emote-flag)</code>. Also, multiple flags can be added per emote.</p>',
              '<p class="bpm-sb-flag">For instance, <code>[](/twibeam-invert-in)',
              '</code> generates <a class="bpm-emote bpflag-invert bpflag-in ',
              'bpmote-twibeam"></a>.</p>',
              '<p class="bpm-sb-flag">Most of the flags that can be used are listed',
              ' below:</p>',
               '<center><table class="bpflagtable">',
                 '<tr>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpmote-twibeam"></a><br><center><code>-in</code></center></th>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-r bpmote-twibeam"></a><br><center><code>-r</code></center></th>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-d bpmote-twibeam"></a><br><center><code>-d</code></center></th>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-f bpmote-twibeam"></a><br><center><code>-f</code></center></th>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-45 bpmote-twibeam"></a><br><center><code>-#</code></center></th>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-spin bpmote-twibeam"></a><br><center><code>-spin</code></center></th>',
                   '<th class="bpflagtable-yw4l"><a class="bpm-emote bpflag-in bpflag-m bpflag-m-demo bpmote-twibeam"></a><br><center><code>-m</code></center></th>',
                 '</tr>',
                 '<tr>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-_excl_spin bpmote-twibeam"></a><br><center><code>-!spin</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-xspin bpmote-twibeam"></a><br><center><code>-xspin</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-yspin bpmote-twibeam"></a><br><center><code>-yspin</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-zspin bpmote-twibeam"></a><br><center><code>-zspin</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-_excl_zspin bpmote-twibeam"></a><br><center><code>-!zspin</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-shift bpmote-twibeam"></a><br><center><code>-shift</code></center></td>',
                   '<td class="bpflagtable-yw4l"><a class="bpm-emote bpflag-in bpflag-wobble bpmote-twibeam"></a><br><center><code>-wobble</code></center></td>',
                 '</tr>',
                 '<tr>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-slide bpmote-twibeam"></a><br><center><code>-slide</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-_excl_shift bpmote-twibeam"></a><br><center><code>-!shift</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-_excl_slide bpmote-twibeam"></a><br><center><code>-!slide</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-s45 bpmote-twibeam"></a><br><center><code>-s# (speed)</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-i bpmote-twibeam"></a><br><center><code>-i</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-invert bpmote-twibeam"></a><br><center><code>-invert</code></center></td>',
                   '<td class="bpflagtable-yw4l"><a class="bpm-emote bpflag-in bpflag-sepia bpmote-twibeam"></a><br><center><code>-sepia</code></center></td>',
                 '</tr>',
                 '<tr>',
                   '<td class="bpflagtable-031e"></td>',
                   '<td class="bpflagtable-031e"></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-intensifies bpmote-twibeam"></a><br><center><code>-intensifies</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-mono bpmote-twibeam"></a><br><center><code>-mono</code></center></td>',
                   '<td class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-blur bpmote-twibeam"></a><br><center><code>-blur</code></center></td>',
                   '<td class="bpflagtable-031e"></td>',
                   '<td class="bpflagtable-yw4l"></td>',
                 '</tr>',
               '</table></center><br>',
              '<p class="bpm-sb-flag">Note: the <code>#</code> sign in the ',
              '<code>-#</code> and <code>-s#</code> flags can be replaced ',
              'with a number, either with a number between 1-15 or in increments ',
              'of 45 (respectively).</p>',
            '</div>',
          '</div>',
          '<div id="bpm-sb-bottomrow">',
            '<a id="bpm-sb-helplink" href="javascript:void(0)">search help</a> | ',
            '<a id="bpm-sb-flaglink" href="javascript:void(0)">flags help</a> | ',
            '<a id="bpm-sb-optionslink" href="javascript:void(0)">bpm options</a>',
            '<span id="bpm-sb-resize"></span>',
            '<a id="bpm-sb-srlink" href="https://www.reddit.com/r/betterponymotes">/r/betterponymotes</a>',
          '</div>',
        '</div>',
        '<div id="bpm-global-icon" title="Hold Ctrl (Command/Meta) to drag"></div>'
        ].join("");
    div[IHTML] = html;
    document.body.appendChild(div);

    // This seems to me a rather lousy way to build HTML, but oh well
    sb_container = document.getElementById("bpm-sb-container");
    sb_dragbox = document.getElementById("bpm-sb-dragbox");
    sb_input = document.getElementById("bpm-sb-input");
    sb_tagdropdown = document.getElementById("bpm-sb-tagdropdown");
    sb_resultinfo = document.getElementById("bpm-sb-resultinfo");
    sb_close = document.getElementById("bpm-sb-close");
    sb_tabframe = document.getElementById("bpm-sb-tabframe");
    sb_results = document.getElementById("bpm-sb-results");
    sb_helptab = document.getElementById("bpm-sb-helptab");
    sb_helplink = document.getElementById("bpm-sb-helplink");
    sb_flagtab = document.getElementById("bpm-sb-flagtab");
    sb_flaglink = document.getElementById("bpm-sb-flaglink");<commit_msg>Fixed up "flags help" menu.<commit_after>// Whether or not we're running on Reddit's .compact display, i.e. their mobile
// version. We modify the search box UI a fair bit to compensate in this case.
//
// i.reddit.com is another way to get the compact UI. Occasionally it'll
// redirect users to .compact links, but in the meantime we need to work
// correctly there as well.
var is_compact = ends_with(document.location.pathname, ".compact") ||
                 document.location.hostname.split(".").indexOf("i") > -1;

// Search box elements
var sb_container = null;
var sb_dragbox = null;
var sb_tagdropdown = null;
var sb_input = null;
var sb_resultinfo = null;
var sb_close = null;
var sb_tabframe = null;
var sb_results = null;
var sb_helptab = null;
var sb_helplink = null;
var sb_flagtab = null;
var sb_flaglink = null;
var sb_optionslink = null;
var sb_resize = null;
var sb_global_icon = null; // Global << thing

var sb_firstrun = false; // Whether or not we've made any search at all yet
var current_sb_tab = null;

/*
 * Sets up the search box for use on a page, either Reddit or the top-level
 * frame, globally. Also injects the global icon, though it doesn't initialize
 * it.
 */
function init_search_box(store) {
    log_debug("Initializing search box");
    inject_search_box();
    init_search_ui(store);
}

/*
 * Builds and injects the search box HTML.
 */
function inject_search_box() {
    // Placeholder div to create HTML in
    var div = document.createElement("div");
    // I'd sort of prefer display:none, but then I'd have to override it
    div.style.visibility = "hidden";
    div.id = "bpm-stuff"; // Just so it's easier to find in an elements list

    // NOTE: Do not add elements to this without first considering whether or
    // not they need to have "visibility: inherit;" in bpmotes.css. It probably
    // does. See the note there.

    var html = [
        // tabindex is a hack to make Esc work. Reddit uses this index in a
        // couple of places, so it's probably safe.
        '<div id="bpm-sb-container" tabindex="100">',
          '<div id="bpm-sb-toprow">',
            '<span id="bpm-sb-dragbox"></span>',
            '<select id="bpm-sb-tagdropdown" onchange="">',
            '<input id="bpm-sb-input" type="search" placeholder="Search"/>',
            '<span id="bpm-sb-resultinfo"></span>',
            '<span id="bpm-sb-close"></span>',
          '</div>',
          '<div id="bpm-sb-tabframe">',
            '<div id="bpm-sb-results"></div>',
            '<div id="bpm-sb-helptab">',
              '<p class="bpm-sb-help">Simple search terms will show you ',
                'emotes with names that match: for instance, <code>"aj"',
                '</code> will find all emotes with <code>"aj"</code> in ',
                'their names. If you use more than one term, all of them ',
                'must match to return an emote.</p>',
              '<p class="bpm-sb-help">You can filter by subreddit with the ',
                'special syntaxes <code>"r/subreddit"</code> and <code>"sr:',
                'subreddit"</code>. Using more than one such filter returns ',
                'results from each of them.</p>',
              '<p class="bpm-sb-help">All emotes are tagged according to ',
                'their contents, and these can be searched on like <code>',
                '"+twilightsparkle"</code>. Most show characters have their ',
                'own tags that can be easily guessed, and some classes of ',
                '"themed" emotes also have tags. You can also negate tags ',
                'with <code>"-fluttershy"</code> to remove emotes from the ',
                'results.</p>',
              '<p class="bpm-sb-help">Some emotes are hidden by default. ',
                'Use <code>"+nonpony"</code> to see them.</p>',
            '</div>',
            '<div id="bpm-sb-flagtab">',
              '<p class="bpm-sb-flag">You can add various flags onto emotes to ',
              'change their appearance or behavior using the syntax of <code>',
              '[](/emote-flag)</code>. Also, multiple flags can be added per emote.</p>',
              '<p class="bpm-sb-flag">For instance, <code>[](/flutterwink-invert-in)',
              '</code> generates <a class="bpm-emote bpflag-invert bpflag-in ',
              'bpmote-flutterwink"></a>.</p>',
              '<p class="bpm-sb-flag">Most of the flags that can be used are listed',
              ' below:</p>',
              '<center>Basics:</center>',
               '<center><table class="bpflagtable">',
                 '<tr>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-r bpmote-twibeam"></a><br><center><code>-r</code></center></th>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-d bpmote-twibeam"></a><br><center><code>-d</code></center></th>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-f bpmote-twibeam"></a><br><center><code>-f</code></center></th>',
                   '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-45 bpmote-twibeam"></a><br><center><code>-45</code></center></th>',
                   '<th class="bpflagtable-031e"><a href="/twibeam-m" class="bpm-emote bpflag-in bpflag-m bpmote-twibeam"></a><br><center><code>-m</code></center></th>', //Known bug: Magic aura doesn't go away after closing emote box.
                 '</tr>',
               '</table></center><br>',
               '<center>Colouring:</center>',
                '<center><table class="bpflagtable">',
                  '<tr>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-i bpmote-derpyshock"></a><br><center><code>-i</code></center></th>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-invert bpmote-derpyshock"></a><br><center><code>-invert</code></center></th>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-mono bpmote-derpyshock"></a><br><center><code>-mono</code></center></th>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-sepia bpmote-derpyshock"></a><br><center><code>-sepia</code></center></th>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-blur bpmote-derpyshock"></a><br><center><code>-blur</code></center></th>',
                  '</tr>',
                '</table></center><br>',
                '<center>Animated:</center>',
                 '<center><table class="bpflagtable">',
                   '<tr>',
                     '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-spin bpmote-happyluna"></a><br><center><code>-spin</code></center></th>',
                     '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-_excl_spin bpmote-happyluna"></a><br><center><code>-!spin</code></center></th>',
                     '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-xspin bpmote-happyluna"></a><br><center><code>-xspin</code></center></th>',
                     '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-yspin bpmote-happyluna"></a><br><center><code>-yspin</code></center></th>',
                  '</tr>',
                  '<tr>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-zspin bpmote-happyluna"></a><br><center><code>-zspin</code></center></th>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-_excl_zspin bpmote-happyluna"></a><br><center><code>-!zspin</code></center></th>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-wobble bpmote-happyluna"></a><br><center><code>-wobble</code></center></th>',
                    '<th class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-intensifies bpmote-happyluna"></a><br><center><code>-intensifies</code></center></th>',
                 '</tr>',
                 '</table></center><br>',
                 '<center>Sliding:</center>',
                  '<center><table class="bpflagtable">',
                      '<tr><th style="table-layout:fixed;width:350px;" class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-slide bpmote-rdwut"></a><br><center><code>-slide</code></center></th></tr>',
                      '<tr><th style="table-layout:fixed;width:350px;" class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-_excl_slide bpmote-rdwut"></a><br><center><code>-!slide</code></center></th></tr>',
                      '<tr><th style="table-layout:fixed;width:350px;" class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-shift bpmote-rdwut"></a><br><center><code>-shift</code></center></th></tr>',
                      '<tr><th style="table-layout:fixed;width:350px;" class="bpflagtable-031e"><a class="bpm-emote bpflag-in bpflag-_excl_shift bpmote-rdwut"></a><br><center><code>-!shift</code></center></th></tr>',
                  '</table></center><br>',
                  '<center>Text (use with <code>[](/txt!)</code>):</center>',
                   '<center><table class="bpflagtable">',
                     '<tr>',
                       '<th class="bpflagtable-031e"><center><a class="bpm-emote bpmote-txt_excl bpflag-blink_excl_">yay.</a></center><br><center><code>-blink!</code></center></th>',
                       '<th class="bpflagtable-031e"><center><a class="bpm-emote bpmote-txt_excl bpflag-comicsans_excl_">yay.</a></center><br><center><code>-comicsans!</code></center></th>',
                       '<th class="bpflagtable-031e"><center><a class="bpm-emote bpmote-txt_excl bpflag-impact_excl_">yay.</a></center><br><center><code>-impact!</code></center></th>',
                       '<th class="bpflagtable-031e"><center><a class="bpm-emote bpmote-txt_excl bpflag-tahoma_excl_">yay.</a></center><br><center><code>-tahoma!</code></center></th>',
                       '<th class="bpflagtable-031e"><center><a class="bpm-emote bpmote-txt_excl bpflag-papyrus_excl_">yay.</a></center><br><center><code>-papyrus!</code></center></th>',

                       '</tr>',
                   '</table></center><br>',
                  '<p class="bpm-sb-flag">If you need to type an emote in the middle of the sentence, like -> <a class="bpm-emote bpflag-in bpmote-pinkieooh"></a> <- this, use the <code>-in</code> flag.</p>',
                  '<p class="bpm-sb-flag">If you need to have an emote torwards the right side of your comment, use the modifier <code>-ar</code>.<a class="bpm-emote bpflag-ar bpmote-smooze"></a></p>',
            '</div>',
          '</div>',
          '<div id="bpm-sb-bottomrow">',
            '<a id="bpm-sb-helplink" href="javascript:void(0)">search help</a> | ',
            '<a id="bpm-sb-flaglink" href="javascript:void(0)">flags help</a> | ',
            '<a id="bpm-sb-optionslink" href="javascript:void(0)">bpm options</a>',
            '<span id="bpm-sb-resize"></span>',
            '<a id="bpm-sb-srlink" href="https://www.reddit.com/r/betterponymotes">/r/betterponymotes</a>',
          '</div>',
        '</div>',
        '<div id="bpm-global-icon" title="Hold Ctrl (Command/Meta) to drag"></div>'
        ].join("");
    div[IHTML] = html;
    document.body.appendChild(div);

    // This seems to me a rather lousy way to build HTML, but oh well
    sb_container = document.getElementById("bpm-sb-container");
    sb_dragbox = document.getElementById("bpm-sb-dragbox");
    sb_input = document.getElementById("bpm-sb-input");
    sb_tagdropdown = document.getElementById("bpm-sb-tagdropdown");
    sb_resultinfo = document.getElementById("bpm-sb-resultinfo");
    sb_close = document.getElementById("bpm-sb-close");
    sb_tabframe = document.getElementById("bpm-sb-tabframe");
    sb_results = document.getElementById("bpm-sb-results");
    sb_helptab = document.getElementById("bpm-sb-helptab");
    sb_helplink = document.getElementById("bpm-sb-helplink");
    sb_flagtab = document.getElementById("bpm-sb-flagtab");
    sb_flaglink = document.getElementById("bpm-sb-flaglink");
{'fraction_non_alphanumeric': 0.18438063409700542, 'fraction_numerical': 0.008618794248274043, 'mean_word_length': 2.6787447428016824, 'pattern_counts': {'":': 0, '<': 709, '<?xml version=': 0, '>': 707, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3789682', 'n_tokens_mistral': 7490, 'n_tokens_neox': 7321, 'n_words': 1526}