TPA demonstration

Total Precision Arithmetic

by Dominic Thwaites

HTML

<script src="https://cdn.rawgit.com/dthwaite/TPA/v1.0.14/lib/tpa.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <div class="tpa-display row row-eq-height well">
            <div class="col-md-1 tpa-instance">
                <h1 data-toggle="tooltip" title="This is the name of this TPA instance"><span class="tpaName-this"></span></h1>
                <div class="btn-group-vertical add-remove-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default btn-lg remove-tpa" data-toggle="tooltip" title="Click to remove this TPA instance">
                        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                    </button>
                    <button type="button" class="btn btn-default btn-lg add-tpa" data-toggle="tooltip" title="Click here to add a new TPA instance">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
            <div class="col-md-8">
                <div class="input-group row">
                    <span class="input-group-addon javascript" data-toggle="tooltip" title="You can enter a new value in decimal format on the right as well as see this number's decimal representation"><span class="tpaName-this"></span>.toDecimal(<span class="tpa-decimal-places"></span>)</span>
                    <textarea class="form-control tpa-decimal" aria-label="Decimal"></textarea>
                    <span class="input-group-addon">
                        <div class="btn-group" data-toggle="tooltip" title="Choose the maximum DPs to display (defaults to 100)" >
                            <button...

CSS

@media (max-width: 800px) {
  .hide-small {
    display: none !important;
  }
}
.error-line {
  display: none;
}
.comparitors pre {
  display: inline;
}
.javascript {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.add-remove-group {
  position: absolute;
  bottom: 0;
}
.tpa-instance {
  padding-left: 0;
  padding-right: 40px;
}
.tpa-instance h1 {
  margin-top: 5px;
}
.btn-group {
  width: 100%;
}
.input-group,
.unary-ops,
.binary-ops,
.error-line {
  padding-bottom: 17px;
}
.comparitors {
  padding: 0 0 0 10px;
  display: flex;
}
.comparitors pre {
  margin-right: 10px;
  margin-top: 9px;
  overflow: hidden;
}
.indicators {
  padding-top: 8px;
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

JavaScript

$(function() {
    $('[data-toggle="tooltip"]').tooltip();

    // Sets up the first number
    $('.tpa-display').each(function() {
        $(this).attr('data-id','a').data('tpa',new Tpa());
        displayValue($(this));
    });

    // Displays the elements of a number that depend on the next
    function displayBinary(row) {
        var tpa=row.data('tpa');
        var next=row.next('.tpa-display');
        if (next.length==0) {
            row.find(".comparitors pre").hide();
            row.find(".binary-ops").hide();
        } else {
            row.find(".comparitors pre").show();
            row.find(".binary-ops").show();
            row.find('.tpaName-next').text(next.attr('data-id'));
            var tpa2=next.data('tpa');
            if (typeof tpa2!=='undefined') {
                row.find(".comparitors pre span:not([class^='tpaName'])").each(function () {
                    this.textContent = tpa[this.getAttribute('class').substr(4)](tpa2);
                });
            }
        }
    }

    // Displays a number
    function displayValue(row) {
        var tpa=row.data('tpa');
        row.find('.tpaName-this').text(row.attr('data-id'));
        var decimaltext=row.find('.tpa-decimal');
        var dps=decimaltext.data('decimal-places');
        if (typeof dps=='undefined') decimaltext.val(tpa.toDecimal());
        else decimaltext.val(tpa.toDecimal(parseInt(dps)));
        row.find('.tpa-fraction').val(tpa.toFraction());
        row.find('.tpa-value').val(tpa.value().toExponential());
        row.find('.tpa-simplify').text('');
        row.find(".indicators pre span:not([class^='tpaName'])").each(function() {
            this.textContent=tpa[this.getAttribute('class').substr(4)]();
        });
        displayBinary(row);
        var prev=row.prev('.tpa-display');
        if (prev.length==0) row.find('.remove-tpa').hide();
        else {
            row.find('.remove-tpa').show();
            displayBinary(prev);
        }
    }

    // Set up...