Add a live calculator (a la Alfred)

Super unoptimized. This increases the page size quite a bit. Add
require.js in the future?
This commit is contained in:
Annika Backstrom 2016-01-28 18:14:50 +00:00
parent 12d75baeee
commit da3a110037
5 ha cambiato i file con 109 aggiunte e 8 eliminazioni

1
TODO Normal file
Vedi File

@ -0,0 +1 @@
* Load assets using require.js

Vedi File

@ -33,8 +33,8 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
<div class="cols">
<div class="col">
<form method="post">
<textarea class="data" name="data"><?php if( $action ) echo $action->esc_raw(); ?></textarea><br>
<select name="action">
<textarea class="data boxed" name="data"><?php if( $action ) echo $action->esc_raw(); ?></textarea><br>
<select name="action" class="boxed">
<option value="QuotedPrintableDecode" <?php echo selected($action_str, 'QuotedPrintableDecode'); ?>>quoted_printable_decode()</option>
<option value="QuotedPrintableEncode" <?php echo selected($action_str, 'QuotedPrintableEncode'); ?>>quoted_printable_encode()</option>
<option value="Urlencode" <?php echo selected($action_str, 'Urlencode'); ?>>urlencode()</option>
@ -50,8 +50,16 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
<option value="ParseStr" <?php echo selected($action_str, 'ParseStr'); ?>>parse_str()</option>
<option value="Ansi2Html" <?php echo selected($action_str, 'Ansi2HTml'); ?>>ansi-to-html</option>
<select>
<input type="submit">
<input type="submit" class="boxed">
</form>
<div class="math">
<h2>Math</h2>
<div>
<input type="text" class="math-expression boxed full-width" placeholder="2 + 2">
<input type="text" class="math-solution boxed full-width" style="display: none;">
</div>
</div>
</div>
<?php if( $action ) echo $action; ?>
</div>
@ -59,8 +67,8 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
<section class="randomness">
<h2>Randomness</h2>
<ul>
<li><label for="md5">MD5</label><input id="md5" class="randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
<li><label for="sha1">SHA1</label><input id="sha1" class="randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
<li><label for="md5">MD5</label><input id="md5" class="boxed randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
<li><label for="sha1">SHA1</label><input id="sha1" class="boxed randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
</ul>
</section>
@ -68,5 +76,9 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
<a href="https://github.com/abackstrom/php-tools"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
</footer>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="math.min.js"></script>
<script src="tools.js" async></script>
</body>
</html>

47
math.min.js esterno Normal file

File diff soppresso perché una o più righe sono troppo lunghe

Vedi File

@ -1,4 +1,6 @@
* {
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@ -34,9 +36,7 @@ label:after {
content: ':';
}
input,
select,
textarea {
.boxed {
border: 1px solid #ccc;
border-radius: 3px;
padding: .5em;
@ -143,3 +143,21 @@ footer {
float: left;
width: 45em;
}
.math {
margin: 1em 0;
}
.math-solution {
display: inline-block;
margin: 1em 0;
min-width: 100px;
}
.error {
color: red;
}
.full-width {
width: 100%;
}

23
tools.js Normal file
Vedi File

@ -0,0 +1,23 @@
(function($) {
var prev_expression,
$solution = $('.math-solution');
$(document).on('focus', '.math-expression', function(e) {
$solution.slideDown();
});
$(document).on('keyup', '.math-expression', function(e) {
var expression = $(this).val().trim();
$solution.removeClass('error');
try {
$solution.val(math.eval(expression));
} catch (e) {
$solution.addClass('error');
$solution.val("Error: " + e.message);
}
});
})(jQuery);