public/lab/scribe.html
<html>
<head>
<title>Scribe demo v0.1</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://indentapp.com/assets/application.css" />
<style>
#input {
width: 800px;
height: 90%;
float: left;
border: 1px solid #ccc;
margin: 10px 50px;
background: white;
}
.scribe-container {
width: 320px;
height: 100%;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var input = $('#input'),
scribe = $('.scribe-container');
input[0].addEventListener("input", function() {
var length = input.text().length;
// if this change event was triggered by ADDING more
// AND the last character was a space
if (length > input.attr('length')
&& input.text()[length - 1].trim().length == 0) {
// process word
var word = input.text().trim().split(' ').pop();
parseWordForObject(word);
}
input.attr('length', length);
}, false);
// Determine whether we should create some kind of object for this word
function parseWordForObject(word) {
var paragraphs = input.text().split("\n");
var words = paragraphs[paragraphs.length - 1].split(' ');
// if the first character isn't capitalized, throw it out
// OR if the word is a number, throw it out
// OR it's just a single character (I, A, etc)
// OR it's the first word in its paragraph
// OR the word prior ended in ., ?, or !
if (word[0].toUpperCase() != word[0]
|| !isNaN(word * 1)
|| word.length < 2 // > 1-character word
|| words.length < 2 // > 1-word paragraph
|| (words.length > 1 && $.inArray(words[words.length - 2].slice(-1), ['.', '!', '?']) > -1)
) {
return false;
}
// If it passes the above tests, lets assume it is important!
createCardForWord(word);
}
function createCardForWord(word) {
// Strip punctuation off the end of word
word = word.replace(/[\?!.:~,]+$/, "");
var card = $('<div />').attr('class', 'card');
var front = $('<div />').attr('class', 'front'),
back = $('<div />').attr('class', 'back').attr('style', 'display: none'),
side = 'front';
// toggle which side of the card is showing
function toggle_side() {
if (side == 'front') { front.fadeOut(function () { back.fadeIn(); }); }
else if (side == 'back') { back.fadeOut(function () { front.fadeIn(); }); }
side = (side == 'front' ? 'back' : 'front');
}
// Front of the card
front.append($('<img />').attr('src', 'http://mycouponbuddy.com/static/coupon_buddy_site/images/xButton.png').attr('class', 'pull-right'));
front.append($('<h3 />').attr('class', 'card-heading simple').text('New character?'));
front.append($('<div />').attr('class', 'card-body').html("Hi, I've noticed you mentioned someone (or something) named <strong>" + word + "</strong>. Do you want to create a character with that name?"));
front.append($('<div />').attr('class', 'card-comments').append($('<button />').attr('class', 'btn btn-primary').text('Create character').click(toggle_side)));
// Back of the card
back.append($('<img />').attr('src', 'http://mycouponbuddy.com/static/coupon_buddy_site/images/xButton.png').attr('class', 'pull-right'));
back.append($('<h3 />').attr('class', 'card-heading simple').text('Introducing ' + word));
back.append($('<div />').attr('class', 'card-body').html("Information about <strong>" + word + "</strong> will go here, letting you add/edit fields manually, or prompt you to verify guesses in fields made from what you write about " + word + "."));
back.append($('<div />').attr('class', 'card-comments').append($('<button />').attr('class', 'btn btn-primary').text('Save character').click(toggle_side)).append($('<button />').attr('class', 'btn').text('Something else')));
front.appendTo(card);
back.appendTo(card);
card.hide();
card.appendTo(scribe);
card.fadeIn('slow');
}
});
</script>
</head>
<body>
<div id="input" contenteditable="true">Once upon a time, there was a man named</div>
<div class="scribe-container"></div>
</body>
</html>