mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
3fd6d604fe
This reverts commit 6f8ae925ba.
Conflicts:
app/assets/stylesheets/bootplus_overrides.css.less
122 lines
4.5 KiB
HTML
122 lines
4.5 KiB
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>
|