Permalink
Browse files

add tutorial pane

add localization for tutorial

add tutorial smartlines

tutorial fixes and refactoring

locale strings for tutorial button titles

tutorial second round edits

remove trailing whitespace
  • Loading branch information...
thomaspark committed Oct 14, 2013
1 parent a7588dc commit ed516a25ad7beaf2f3c00f7283249c0d8ff0d71d
@@ -0,0 +1,47 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial</title>
<!-- this stylesheet provides default styles for tutorials -->
<link href="//thimble.webmaker.org/learning_projects/tutorial/tutorial.css" rel="stylesheet">
<!-- these scripts turn your make into a tutorial -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//thimble.webmaker.org/learning_projects/tutorial/tutorial.js"></script>
<script>
jQuery(document).ready(function($){
$('body').tutorial();
});
</script>
</head>
<body>
<!--
enclose each tutorial step in its own section tags
you can include any sort of markup, including images
you can also add more sections
if you want to attach this tutorial to another make,
first publish this make
then tag the other make with prefix "tutorial-" followed by the url for this make
-->

<section>
<h1>Cupcakes</h1>
<p>Halvah danish sweet roll powder (line 2). Sweet roll caramels marshmallow jelly beans macaroon marzipan marzipan lemon drops. Applicake sweet gummi bears lollipop macaroon.</p>
<p>Carrot cake liquorice lollipop. Chocolate chocolate cake pie. Cotton candy applicake chocolate cake cupcake chocolate bar muffin.</p>
<p>Donut tiramisu apple pie wafer bonbon. Bear claw souffle candy canes chocolate cake gummi bears ice cream. Marzipan souffle sweet roll candy canes pie bear claw. Toffee macaroon lemon drops sweet roll chocolate bar brownie.</p>
</section>

<section>
<h1>Veggies</h1>
<p>Line 4: Veggies sunt bona vobis, proinde vos postulo esse magis chickpea garbanzo onion rock melon scallion.</p>
<p>Onion silver beet radicchio salsify sweet pepper black-eyed pea summer purslane parsnip brussels sprout garbanzo collard greens. Corn garlic broccoli cauliflower plantain chard arugula napa cabbage garlic peanut black-eyed pea soko kombu coriander.</p>
</section>

<section>
<h1>Cheese</h1>
<p>Croque monsieur pepper jack mascarpone. Croque monsieur cheddar paneer cheese on toast jarlsberg the big cheese hard cheese cheese and biscuits. Cauliflower cheese stilton cheeseburger the big cheese lancashire cheese and biscuits port-salut squirty cheese. Caerphilly paneer edam (line 8).</p>
<p>Swiss cheese and biscuits cheese strings. The big cheese squirty cheese goat cheesy grin bavarian bergkase emmental swiss monterey jack. Edam cheese strings who moved my cheese swiss jarlsberg babybel squirty cheese red leicester. Cow halloumi cheese triangles bavarian bergkase.</p>
</section>
</body>
</html>
@@ -158,6 +158,7 @@
"title": "HTML элемент <em>название</em> (<code>&lt;title&gt;</code>) определяет название документа, показанное в строке заголовка окна браузера или на ярлыке страницы. Он может содержать только текст, а любые теги в нём не интерпретируются.",
"Title": "Название",
"tr": "HTML элемент <em>строка таблицы</em> (<code>&lt;tr&gt;</code>) определяет ряд клеток в таблице. Это может быть сочетание элементов <code><a rel=\"custom\" href=\"https://developer.mozilla.org/en/HTML/Element/td\">&lt;td&gt;</a></code>\n и <code><a rel=\"custom\" href=\"https://developer.mozilla.org/en/HTML/Element/th\">&lt;th&gt;</a></code>.",
"Tutorial": "Учебное пособие",
"Tutorials": "Учебные пособия",
"tweet": "Твитнуть",
"Twitter": "Твиттер",
@@ -158,6 +158,7 @@
"title": "<em>HTML Title Element</em> (<code>&lt;title&gt;</code>) กำหนดหัวข้อของเอกสารที่จะแสดงในเบราเซอร์แทบด้านบนหรือในแท็บของเพจ มันสามารถใส่ตัวอักษรเท่านั้นและไม่สามารถใส่แท็คในการแสดงได้.",
"Title": "หัวข้อ",
"tr": "<em>HTML Table Row Element</em> (<code>&lt;tr&gt;</code>) กำหนดแถวในเซลล์ของตาราง. มันอาจจะมีรูปแบบได้ทั้ง <code><a rel=\"custom\" href=\"https://developer.mozilla.org/en/HTML/Element/td\">&lt;td&gt;</a></code>\n และ <code><a rel=\"custom\" href=\"https://developer.mozilla.org/en/HTML/Element/th\">&lt;th&gt;</a></code>\n elements.",
"Tutorial": "แนะนำการใช้งาน",
"Tutorials": "การสอน",
"tweet": "Tweet",
"Twitter": "Twitter",
@@ -0,0 +1,29 @@
// requestAnimationFrame shim
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

define(function() {
return (function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
})();
});
@@ -0,0 +1,98 @@
body {
margin: 60px 20px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
color: #333;
}

a {
color: #3887F3;
}

.tutorial-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 5px 5px 10px;
border-bottom: 1px solid #ccc;
background-color: #f9f9f9;
font-size: 12px;
}

.tutorial-nav .buttons {
float: right;
}

.tutorial-nav button {
display: inline-block;
width: 24px;
height: 24px;
padding: 0;
margin: 0 0 0 5px;
background-color: #3887F3;
border: none;
border-radius: 3px;
color: #fff;
text-decoration: none;
cursor: pointer;
}

.tutorial-nav button:focus {
background-color: #3887F3;
outline: none;
}

.tutorial-nav button:active,
.tutorial-nav button:hover {
background-color: #2662D2;
outline: none;
}

.tutorial-nav button.disabled,
.tutorial-nav button.disabled:hover {
cursor: default;
background-color: #AACBF6;
}

.tutorial-nav .previous,
.tutorial-nav .next {
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
line-height: 20px;
}

.tutorial-nav .steps {
float: left;
padding: 4px 6px 3px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
color: #888;
font-weight: bold;
}

section {
margin-bottom: 20px;
}

code {
font-weight: bold;
}

.tutorial-line {
border-bottom: 1px dotted #444;
font-weight: bold;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.tutorial-line:hover {
background-color: #AACBF6;
}
@@ -0,0 +1,150 @@
/*********************************************************************
tutorial.js
jquery plugin to make your thimble tutorials smarter
include this script in your tutorial make for
* pagination of an element's children (default: true)
* lines that highlight and scroll thimble editor (default: true)
* targeting a subset of children with a selector (optional)
$(selector).tutorial({
paginate: boolean,
smartlines: boolean,
target: string
});
*********************************************************************/

$.fn.tutorial = function(options){
var settings = $.extend({
paginate: true,
smartlines: true
}, options);

var sections = this.children();
if (settings.target) {
sections = sections.filter(settings.target);
}

var max = sections.length;
if (max === 0) {
return;
}

if (settings.paginate === true) {
var current = 1;
var navCode = '<nav class="tutorial-nav">' +
'<span class="buttons">' +
'<button class="previous disabled" href="#">◄</button>' +
'<button class="next" href="#">►</button>' +
'</span>' +
'<span class="steps"><span class="current">1</span> / ' +
'<span class="max">1</span></span>' +
'</nav>';

this.append(navCode);

var step = function(e) {
e.preventDefault();

if ($(this).hasClass('disabled')) {
return;
}

$('button').removeClass('disabled');

var amount = parseInt(e.data.amount, 10);
current = current + amount;

if (current <= 1) {
current = 1;
$('.previous').addClass('disabled');
}

if (current >= max) {
current = max;
$('.next').addClass('disabled');
}

sections.hide();
sections.eq(current - 1).show();
$('.current').text(current);
};

sections.hide();
sections.eq(current - 1).show();
$('.current', this).text(current);
$('.max', this).text(max);
$('.next', this).click({amount: 1}, step);
$('.previous', this).click({amount: -1}, step);
}

if (settings.smartlines === true) {
var updateLines = function(data) {
var from = data.obj.from.line,
textLength = data.obj.text.length,
removed = data.obj.removed.length,
change = textLength - removed;

if (change !== 0) {
$('.tutorial-line').each(function(){
var line = parseInt($(this).attr('data-line'), 10) - 1;
if (line > from) {
line = line + change;
$(this)
.attr('data-line', parseInt(line + 1, 10))
.text("line " + parseInt(line + 1, 10));
}
});
}
};

// mark up any mentions of lines
var re = /((lines*) ([0-9]+))/ig,
value = '<span class="tutorial-line" data-line="$3">$2 <span class="line">$3</span></span>';

sections
.each(function(){
$(this).html($(this).html().replace(re, value));
})
.first().show();

// add postmessage event handlers
if (!!window.postMessage) {
top.postMessage(JSON.stringify({
type: "tutorial",
action: "init"
}), '*');

var generateEventHandler = function(action){
return function() {
var num = parseInt($(this).attr('data-line'), 10),
message = JSON.stringify({
type: "tutorial",
action: action,
line: num
});
top.postMessage(message, '*');
};
};

$('.tutorial-line', this)
.mouseover(generateEventHandler("highlight"))
.mouseout(generateEventHandler("unhighlight"))
.click(generateEventHandler("scroll"));

window.addEventListener('message', function(event) {
try {
data = JSON.parse(event.data);
if(data.type && data.type === "tutorial" && !data.action) {
console.error("tutorial payload had no valid action", event.data);
}
}
catch (e) {
console.error("JSON.parse failed for tutorial payload", event.data);
}

updateLines(data);
});
}
}
};
Oops, something went wrong.

0 comments on commit ed516a2

Please sign in to comment.