Squiggle Lang

squeezing words

by not important

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//gist.githubusercontent.com/clindsey/4f2a1e9072ab08262fcf/raw/ad17c3e22c1de29c68c2ea78e9aa99e85ce36d2e/JoveLang.js"></script>
<div class="container">
     <h1>SquiggleLang <small>Encoder</small></h1>
    <p class="lead">Experimenting with encoding english text.</p>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="control-label">Input Text:</label>
                <textarea class="form-control" id="inputBuffer"></textarea>
            </div>
            <div class="form-group">
                <label class="control-label">Output Text:</label>
                <p class="bs-callout-info bs-callout form-control-static" id="outputBuffer"></p>
            </div>
        </div>
    </div>
</div>

CSS

body {
    margin: 40px 0;
}

#outputBuffer .spacing {
    display: inline-block;
    width: 8px;
    content: ' ';
}

.wrapper {
    position: relative;
    display: inline-block;
    width: 0.9em;
    font-size: 0.5em;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgb(255, 255, 255);
}

.top-half,
.bottom-half {
    position: absolute;
    margin: -0.9em 0;
    top: 0;
}

.top-half {
    margin: -1.8em 0;
}

.bottom-half {
    width: 0.8em;
    text-align: center;
}

.bs-callout {
    padding: 15px 30px 15px 15px;
    border-left: 5px solid #eee;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout-info {
    background-color: #f0f7fd;
    border-color: #d0e3f0;
}

JavaScript

var $inputBuffer = $('#inputBuffer'),
    $outputBuffer = $('#outputBuffer'),
    timeoutId = undefined,
    squiggleLang = new SquiggleLang;

$('body').on('keydown', '#inputBuffer', function () {
    if (timeoutId) {
        clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(function () {
        var inputVal = $inputBuffer.val(),
            outputVal = squiggleLang.parse(inputVal),
            ratio = Math.floor((1 - outputVal.length / inputVal.length) * 100) || 0;

        $outputBuffer.html(outputVal);
    }, 1000 / 4);
});

function SquiggleLang () {
};

SquiggleLang.prototype.parse = function (inputString) {
    if (inputString.length < 2) {
        return inputString;
    }

    var parsedString = inputString.toUpperCase().split(' ').join('_'),
        pairs = parsedString.match(/[bcdfghjklmnpqrstvwxz][aeiouy]/ig);

    if (pairs === null) {
        return inputString;
    }

    for (var i = 0, il = pairs.length; i < il; i += 1) {
        var pair = pairs[i],
            parts = pair.split(''),
            consonant = parts[0],
            vowel = parts[1];
    
        var holder = $('<div>');
        var wrapper = $('<span>').addClass('wrapper');
        cEl = $('<span>').addClass('top-half').html(consonant);
        vEl = $('<span>').addClass('bottom-half').html(vowel);
        wrapper.append(cEl);
        wrapper.append(vEl);
        holder.append(wrapper);
    
        parsedString = parsedString.split(pair).join(holder.html());
    }

    parsedString = parsedString.split('_').join('<span class="spacing"></span>');

    return parsedString;
};