Pot.js Pot.Archive.AlphamericString Test

Pot.js Pot.Archive.AlphamericString Test

by polygonplanet

HTML

<h1>Pot.js Pot.Archive.AlphamericString Test</h1>
<a href="http://polygonplanet.github.com/Pot.js/#reference.function.Pot.Archive.AlphamericString" target="_blank">Pot.Archive.AlphamericString Reference</a>
<div>
    <div>
        <textarea id="input">ルイズ！ルイズ！ルイズ！ルイズぅぅうううわぁああああああああああああああああああああああん！！</textarea>
    </div>
    <div>
        length: <span id="input-length"></span>,
                <span id="input-bytes"></span> bytes (UTF-8).
    </div>
</div>
<div class="ctrl-panel">
    <button type="button" id="compress">↓Compress↓</button>
    <button type="button" id="decompress">↑Decompress↑</button>
</div>
<div>
    <div>
        <textarea id="output"></textarea>
    </div>
    <div>
        length: <span id="output-length"></span>,
                <span id="output-bytes"></span> bytes (UTF-8).
    </div>
</div>

CSS

h1 {
  font-weight: bold;
  margin: 0.5em;
}

textarea {
  width: 98%;
  height: 200px;
}

.ctrl-panel {
  margin: 0.5em;
}

JavaScript

// Pot.Archive.AlphamericString Test
//

$.getScript('http://api.polygonpla.net/js/pot/1.16/pot.min.js').then(function() {

    var input = $('#input'),
        output = $('#output');

    var updateLen = function() {
        var ival = input.val(),
            oval = output.val();

        $('#input-length').text( ival.length );
        $('#input-bytes').text( Pot.utf8ByteOf(ival) );
        $('#output-length').text( oval.length );
        $('#output-bytes').text( Pot.utf8ByteOf(oval) );
    };

    $('#compress').click(function() {
        var that = $(this),
            orgText = that.text();

        that.text('Processing...')
            .attr({disabled : true});

        $('#decompress')
            .attr({disabled : true});

        // 非同期で実行
        Pot.alphamericStringEncode.deferred(input.val())
                                  .then(function(res) {
            output.val(res);
            updateLen();
            that.text(orgText).removeAttr('disabled');
            $('#decompress').removeAttr('disabled');
        });
    });

    $('#decompress').click(function() {
        var that = $(this),
            orgText = that.text();

        that.text('Processing...')
            .attr({disabled : true});

        $('#compress')
            .attr({disabled : true});

        // 非同期で実行
        Pot.alphamericStringDecode.deferred(output.val())
                                  .then(function(res) {
            input.val(res);
            updateLen();
            that.text(orgText).removeAttr('disabled');
            $('#compress').removeAttr('disabled');
        });
    });

    $('#input,#output')
        .bind('keyup keydown keypress', function() {
            updateLen();
        });

    updateLen();
});