mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
add some labs for later
This commit is contained in:
Andrew Brown
parent
8ebef947f0
commit
ff8de20eee
44
public/lab/cardflip.css
Normal file
44
public/lab/cardflip.css
Normal file
@ -0,0 +1,44 @@
|
||||
/* entire container, keeps perspective */
|
||||
.flip-container {
|
||||
perspective: 1000;
|
||||
}
|
||||
/* flip the pane when hovered */
|
||||
.flip-container:hover .flipper, .flip-container.hover .flipper {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-container, .front, .back {
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
/* flip speed goes here */
|
||||
.flipper {
|
||||
transition: 0.6s;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* hide back of pane during swap */
|
||||
.front, .back {
|
||||
backface-visibility: hidden;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* front pane, placed above back */
|
||||
.front {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* back, initially hidden pane */
|
||||
.back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
121
public/lab/scribe.html
Normal file
121
public/lab/scribe.html
Normal file
@ -0,0 +1,121 @@
|
||||
<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>
|
||||
123
public/reader/index.html
Normal file
123
public/reader/index.html
Normal file
@ -0,0 +1,123 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>FaS Reader</title>
|
||||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Fast as Sanic Reader
|
||||
var left = $('<span />').attr('id', 'left'),
|
||||
right = $('<span />').attr('id', 'right'),
|
||||
center = $('<span />').attr('id', 'pivot'),
|
||||
input = $('<textarea />').attr('id', 'input'),
|
||||
ready = $('<button />').attr('id', 'go').text('Read'),
|
||||
speed = $('<select />').attr('id', 'speed');
|
||||
|
||||
// Enable word speeds 200 WPM to 600 WPM
|
||||
for (i = 2; i < 7; i++) { // >
|
||||
$('<option />', { value: i * 100, text: i * 100 }).appendTo(speed);
|
||||
}
|
||||
|
||||
// State!
|
||||
var active_events = [];
|
||||
|
||||
// Clear the display when the user clicks back to input
|
||||
function clear_display() {
|
||||
left.text('Re');
|
||||
center.text('a');
|
||||
right.text('dy');
|
||||
};
|
||||
input.focus(clear_display);
|
||||
clear_display();
|
||||
|
||||
// Business logic, business logic
|
||||
function display_word(word, ui) {
|
||||
if (!word) return;
|
||||
|
||||
var center_index = parseInt(word.length / 2);
|
||||
|
||||
// Put the center index in the pivot chair and its prefix/affix
|
||||
// in left/right.
|
||||
ui['pivot'].text(word[center_index]);
|
||||
ui['left'].text(word.substring(0, center_index));
|
||||
ui['right'].text(word.substring(center_index + 1, word.length));
|
||||
|
||||
// Patch up UI on one-character words
|
||||
if (word.length == 1) { ui['left'].html(" "); }
|
||||
}
|
||||
|
||||
// Define event handler for pressing Go!
|
||||
ready.click(function () {
|
||||
// Clear current active events
|
||||
$.each(active_events, function (i, event) {
|
||||
clearTimeout(event);
|
||||
});
|
||||
active_events = [];
|
||||
|
||||
var words = input.val().replace(/\s\s+/g, ' ').split(/[\s\n\r]/);
|
||||
|
||||
// Calculate how long to display word based on specified WPM
|
||||
var display_length = 1 / (speed.val() / 60);
|
||||
|
||||
// Inspired by the beauty of sleep sort
|
||||
$.each(words, function (word_index, word) {
|
||||
active_events.push(setTimeout(function () {
|
||||
display_word(word, {
|
||||
'left': left,
|
||||
'pivot': center,
|
||||
'right': right
|
||||
});
|
||||
}, word_index * display_length * 1000));
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Inject our delicious UI into the page!
|
||||
$('body').append(left)
|
||||
.append(center)
|
||||
.append(right)
|
||||
.append(input)
|
||||
.append(speed).append($("<span />").text('WPM '))
|
||||
.append(ready)
|
||||
.append($('<div />').text('The average person reads around 200 WPM normally.'));
|
||||
|
||||
// Aaaaand... lets sneak some literature in for the interested wanderers
|
||||
input.text('He is described as wearing a black suit strikingly similar to the visage of the notorious Men In Black, and as the name suggests, appears very thin and able to stretch his limbs and torso to inhuman lengths in order to induce fear and ensnare his prey. Once his arms are outstretched, his victims are put into something of a hypnotized state, where they are utterly helpless to stop themselves from walking into them.');
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
text-align: center;
|
||||
margin: 100 0;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
#left, #pivot, #right {
|
||||
float: left;
|
||||
font-size: 52px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#left {
|
||||
width: 49%;
|
||||
text-align: right;
|
||||
}
|
||||
#pivot {
|
||||
color: red;
|
||||
width: 34px;
|
||||
}
|
||||
#right {
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
}
|
||||
#input {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user