#!/usr/bin/perl

# generates the HTML for my chars-grid page

#       http://paperlined.org/cgi-bin/tmp/gen_chars.cgi
#       http://paperlined.org/chars/

    use strict;
    use warnings;
    use utf8;

    use CGI;
    use charnames ':full';
    use Unicode::UCD;
    use CGI::Util;

    # re-enable local::lib
    use lib "$ENV{HOME}/perl5/lib/perl5";
    use local::lib;

    use HTML::HTML5::Entities;

    #use CGI::Carp qw(fatalsToBrowser); # if running as CGI
    #use CGI::Debug; # if running as CGI
    #use autodie;
    #use Carp::Always;

    use Data::Dumper;
    #use Devel::Comments;           # uncomment this during development to enable the ### debugging statements




my $fout;
if (-t STDOUT) {
    open $fout, '>:utf8', '/home/interiot/public_html/chars/index.html'       or die $!;
} else {
    open $fout, '>&STDOUT'       or die $!;
    binmode $fout, ':utf8';
    print $fout "Content-type: text/html; charset=utf-8\n\n";
}



header();
while (defined(my $line = <DATA>)) {
    #s/(<?=\s)([\x80-\xffff])(?=\s)/display_char($1)/xg;
    $line =~ s/([^\x00-\x7f])/display_char($1)/eg;
    print $fout $line;
}

select $fout;
$|++;
exit;


sub display_char {
    my $char = shift;

    my $html_entity = encode_entities($char);
    if ($html_entity =~ /^&/ && $html_entity !~ /^&#x/) {
        $html_entity = CGI::escapeHTML($html_entity);
    } else {
        $html_entity = '';
    }

    my $unicode_block = Unicode::UCD::charblock(ord($char)) || '';
    if ($unicode_block) {
        (my $block_url = lc($unicode_block)) =~ s/[^A-Z]+/_/gi;
        $block_url = "http://www.fileformat.info/info/unicode/block/$block_url/list.htm";
        $unicode_block = "<a href=\"$block_url\">$unicode_block</a>";
    }

    my $unicode_category = Unicode::UCD::charinfo(ord($char)) || '';
    if($unicode_category) {
        $unicode_category = $unicode_category->{category};
        my $category_url = "http://www.fileformat.info/info/unicode/category/$unicode_category/list.htm";
        my $category_name = Unicode::UCD::general_categories()->{$unicode_category};
        $unicode_category = "<a href=\"$category_url\">$category_name</a>";
    }


    my $charnum = sprintf("%x", ord($char));

    my $descr = "<center><span class=teh_one><a href=http://www.fileformat.info/info/unicode/char/$charnum/index.htm>$char</a></span><div class=smaller>"
                        .  (charnames::viacode(ord($char)) || '') . "<br>$html_entity<br>$unicode_block<br>$unicode_category</div></center>";
    (my $hidden_but_searchable = $descr) =~ s/<.*?>/ /sg;
    $descr = CGI::Util::simple_escape($descr);
    $descr =~ s/'/&#27;/g;

    #print $fout 
    return "<div class='outer' popup='$descr'><div class='middle'><div class='hidden_but_searchable'>$hidden_but_searchable</div><div class='inner'>$char</div></div></div>\n";
}


sub header {
    print $fout <<'EOF';
<title>Unicode characters</title>
<style>
    p {clear:both; float:left}

    body {background-color:#d1d1d1}
    
    div.outer {
        background-color:#fff;
        border:1px solid #000;
        margin:0.5em;
        /* display:inline-block; */
        display:table;
        width:2em;
        height:2em;
        vertical-align:middle;
        float:left;
    }

    .middle {display:table-cell; vertical-align:middle}

    .inner {
        text-align:center;
        user-select:element;
        font-size:120%;
    }


    /* allow text to be hidden, but still, when you search for the text, it's obvious which box has
     * that text associated with it */
    div.hidden_but_searchable {
        width:2em;
        height:2em;
        position:absolute;
        color:transparent;
    }
    div.hidden_but_searchable ::selection {
        background:red;
    }
    div.outer:hover div.hidden_but_searchable {
        display:none;
    }

    .smaller {
        font-size:80%;
        color:#444;
    }
    .teh_one {
        font-size:180%;
    }

    /* --==##  links aren't underlined unless you :hover  ##==-- */
    a:hover {text-decoration:underline}
    a {text-decoration:none}
    @media print { a {text-decoration:underline} }


</style>
<script>
    // goal:  allow the user to Ctrl-F text that's hidden
    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
        document.write("<style>div.hidden_but_searchable {overflow:hidden}</style>");
    }
    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        document.write("<style>div.hidden_but_searchable {line-height:0}</style>");
    }



    document.write("");
</script>
<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery/jquery.bt.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('*[popup]').bt({
            contentSelector: "$(this).attr('popup')",
            trigger: ['mouseover', 'click'],
            closeWhenOthersOpen: true,
            clickAnywhereToClose: true,
            activeClass: 'bt_active_class',
            fill: '#ccd',
        });

        /* $('html').click(clear_search_results); */

        // press escape to close open popups
        $(document).keyup(function(e) {
            $(jQuery.bt.vars.clickAnywhereStack).btOff();
            if (e.keyCode == 27) {      // escape
                clear_search_results();
            }
        });
    });


    function clear_search_results() {
        var sel = window.getSelection ? window.getSelection() : document.selection;
        if (sel) {
            if (sel.removeAllRanges) {
                sel.removeAllRanges();
            } else if (sel.empty) {
                sel.empty();
            }
        }
    }

</script>
EOF

}




# the "data" section is the template for creating the page

__DATA__

<p>Unicode characters I frequently cut-n-paste.

<p> — §

<p> ← ⇐ → ⇒ ⇔

<p> † ‡

<p> ⚧

<p><a href="http://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts">superscript</a>: ⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁻ 

<p><a href="http://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts">subscript</a>: ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₋

<p><A href="http://tlt.its.psu.edu/suggestions/international/bylanguage/mathchart.html#fractions">fractions</a>: ½ ¼ ¾ ⅓ ⅔ ⅛  ⅜ ⅝ ⅞

<p><a href="http://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode">math</a>: ≠ ± ° ∞ × · ∑ ∫ ∬ ≈

<p><a href="http://en.wikipedia.org/wiki/Template:Greek_Alphabet">greek</a>: Δ θ λ μ ω 

<p><a href="http://shapecatcher.com/unicode/block/Box_Drawing.html">box drawing</a>:

<p><a href="http://www.hongkiat.com/blog/cool-ascii-symbols-get-them-now/">just for fun</a>: ☃ ☠ ⍨ ☔ ☕ ⚰

<p>Unicode v6.*, stuff you're unlikely to see in the wild: 💩 🌃 🌄 🌉 🌞 🏩 👙

<p><br><br>Ctrl-F to search for a character.  &lt;Escape&gt; to clear things from the screen.

<p>If you can't find your character, search
    <a href="http://en.wikibooks.org/wiki/Unicode/List_of_useful_symbols">here</a>,
    <a href="http://copypastecharacter.com/">here</a>,
    <a href="http://www.fileformat.info/info/unicode/char/search.htm">here</a> or <a href="http://unicodeforyou.appspot.com/">here</a>, or
    <a href="http://shapecatcher.com/">draw here</a>.

<p>Source code <a href="http://paperlined.org/chars/gen_chars.pl">here</a>.