From 2c1ee2e077fbcb1920e1ff0c0f1fafc82202447c Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 18 Mar 2012 11:44:01 -0700 Subject: [PATCH] files for training --- css.css | 260 +++ iframe.html | 5089 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 443 +++++ part_02.html | 146 ++ part_03.html | 164 ++ slides.js | 294 +++ 6 files changed, 6396 insertions(+) create mode 100644 css.css create mode 100644 iframe.html create mode 100644 index.html create mode 100644 part_02.html create mode 100644 part_03.html create mode 100644 slides.js diff --git a/css.css b/css.css new file mode 100644 index 0000000..fe83945 --- /dev/null +++ b/css.css @@ -0,0 +1,260 @@ +@charset "UTF-8"; +/* CSS Document */ + +body { + font-size: 20px; + font-family: 'Droid Sans', sans-serif; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + position: absolute; + left: 0px; top: 0px; +}#info { + font-size: small; + position: absolute; + bottom: 0px; + left: 40%; + z-index: 500;} +#topinfo { + font-size: small; + position: absolute; + top: 5px; + right: 5px; + z-index: 500;} +.key { + color: black; + display: inline-block; + padding: 3px 3px 3px 3px; + text-shadow: none; + letter-spacing: 0; + position: relative; + background: white;} +#presentation { + position: absolute; + height: 100%; + width: 100%; + left: 0px; + top: 0px; + display: block; + overflow: hidden; + background: #aac;} +.slides { + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + height: 100%; + left: 0; + top: 0; + position: absolute; + display: block; + -webkit-transition: -webkit-transform 1s ease-in-out; + -moz-transition: -moz-transform 1s ease-in-out; + -o-transition: -o-transform 1s ease-in-out; + transition: transform 1s ease-in-out; /* so it's visible in the iframe. */ + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8);} +.slide { + display: none; + position: absolute; + overflow: hidden; + width: 900px; + height: 700px; + left: 50%; + top: 50%; + margin-top: -350px; + background-color: #eee; + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); + padding-left: 20px; + padding-top: 10px;} +.slide.intro { + text-align: center; + font-size: 200%;} +.slide.intro hgroup { + margin-top: 200px;} +.content { + font-size: 140%;} +.content input, button { + font-size: 140%;} +.content td { + border: 1px solid black;} +.invalid { + background-color: red;} +.slide.section,.slide.intro { + text-align: center;} +.slide.section,.slide.intro header { + font-size: 200%;} +.slide li { + margin-bottom: 10px;} +.slide img { + max-height: 90%; + border: 1px solid white; + box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + text-align: center;} +.slide:nth-child(even) {}.slide:nth-child(odd) {}.slide p, .slide textarea { + font-size: 120%;} +.slide .counter { + color: #999999; + position: absolute; + left: 20px; + bottom: 20px; + display: block; + font-size: 70%;} +.slide.title > .counter,.slide.segue > .counter,.slide.mainTitle > .counter { + display: none;} +.force-render { + display: block; + visibility: hidden;} +.slide.far-past { + display: block; + margin-left: -2400px;} +.slide.past { + visibility: visible; + display: block; + margin-left: -1600px;} +.slide.current { + visibility: visible; + display: block; + margin-left: -650px;} +.slide.future { + visibility: visible; + display: block; + margin-left: 500px;} +.slide.far-future { + display: block; + margin-left: 1500px;} +body.three-d div.slides { + -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg); + -moz-transform: translateX(50px) scale(0.8) rotateY(10deg); + -o-transform: translateX(50px) scale(0.8) rotateY(10deg); + transform: translateX(50px) scale(0.8) rotateY(10deg);} +/* Content */header { + font-weight: normal; + letter-spacing: -.05em; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + left: 30px; + top: 25px; + font-size: 140%;} +h1 { + font-size: 140%; + margin-bottom: 0px;} +h2 { + font-size: 90%;} +h1:first-child { + margin-top: 0;} +section, footer { + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + margin: 20px 30px 0; + display: block; + overflow: hidden;} +footer { + font-size: 100%; + margin: 20px 0 0 30px;} +a { + color: inherit; + display: inline-block; + text-decoration: none; + line-height: 110%; + border-bottom: 2px solid #3f3f3f;} +pre { + text-align: left; + font-size: 90%; + padding: 10px 20px; + background: rgba(220, 220, 255, 0.5); + -webkit-border-radius: 8px; + -khtml-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + bord3r: 1px solid rgba(255, 0, 0, 0.2); + -webkit-user-modify: read-write-plaintext-only;} +pre b { + font-weight: normal; + color: #c61800; + text-shadow: #c61800 0 0 1px; + /*letter-spacing: -1px;*/}pre em { + font-weight: normal; + font-style: normal; + color: #18a600; + text-shadow: #18a600 0 0 1px;} +div.example { + display: block; + padding: 10px 20px; + background: rgba(255, 255, 255, 0.4); + -webkit-border-radius: 8px; + -khtml-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + margin-bottom: 10px; + border: 1px solid rgba(0, 0, 0, 0.2);} +video { + -moz-border-radius: 8px; + -khtml-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.2);} +#presentation-counter { + color: #ccc; + font-size: 70%; + letter-spacing: 1px; + position: absolute; + top: 40%; + left: 0; + width: 100%; + text-align: center;} +div:not(.current).reduced { + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8);} +.no-transitions { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none;} +.no-gradients { + background: none; + background-color: #fff;} +.advanced {outline:5px dotted #BE197E;} +.imp, pre strong {color:#BE197E; font-weight:bold} + + +@media print { + .slide { + page-break-inside: avoid; + page-break-after: always; + visibility: visible !important; + font-size: 20pt; + font-family: Arial, sans-serif;} + @page { + size: landscape;} + body { + font-size: 12pt; + background: white;} + header h1 { + border-top: 2pt solid gray; + border-bottom: 1px dotted silver;} + #presentation-counter, #info, #topinfo, .counter { + display: none} +} +#console { + width: 500px; + height: 800px; + position:absolute; + top:10px; + right: 10px; + background-color: #fff; +} + +.slide:nth-child(even) {} +.slide:nth-child(odd) { background-color: #fff;} \ No newline at end of file diff --git a/iframe.html b/iframe.html new file mode 100644 index 0000000..55bbd47 --- /dev/null +++ b/iframe.html @@ -0,0 +1,5089 @@ + + + + +Console + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..ad6a990 --- /dev/null +++ b/index.html @@ -0,0 +1,443 @@ + + + + + Intro to JavaScript: Part 1 + + + + + + +
+
+ +
+

Press → key to advance. + Zoom in/out: Ctrl or Command + +/-. +

+
+ +
+ +
+ +
+ + +
+
+

Basic JavaScript

+

Estelle Weyl

+
+
+ + +
+

Javascript in HTML

+
+ 
<!doctype html>
+<html>
+    <head>
+        <title>This is a document</title>
+        <script href="js/script.js"></script>
+        <script>
+        	/* code goes here */
+        </script>
+    </head>
+    <body onload="badPlaceToPutJSButAllowed();">
+        <script>
+       	 // also allowed here
+        </script>
+        <script href="js/script2.js"></script>
+    </body>
+</html>
+
+
+
+ + +
+

Sytnax

+
+

Statments

+ 
+     alert('this is an alert');
+     var addition = 14 * 7;
+
+

Comments + 

+     // this is a single line comment
+     
+     /* 
+        this is a multi-
+        line comment
+     */
+
+
+ +
+

Types of Data

+
+
    +
  • Numbers
    • +
  • Strings
    • +
  • Booleans
    • +
  • Objects
    • +
+ + 
     'Estelle'
+     "Estelle"
+     "It's JavaScript"
+     'It\'s JavaScript'
+     true
+     27
+     3.1415
+     window
+

Everything in JavaScript is an Object!

+
+
+ + + + + +
+

Strings

+
+ 
'Estelle'
+"Estelle"
+'It\'s JavaScript'
+'\'\\\' is called a \'back slash\''
+ 
var goodString = "Really long strings" + 
+  " can be concatenated across lines";
+
+var goodString = "This is\
+ another way of creating\
+ a multi-line string"
+
+var badString = "This will
+ fail"        
+
+
+
+ + +
+

Variables

+
+ 
+// 2 steps: Name and declare the variable
+var firstName;
+firstName = "Estelle";
+
+// Name and declare in one step
+var firstName = "Estelle";
+
+
    +
  • begin with letters, numbers, $ or _
    • +
  • only contain letters, numbers, $ and _
    • +
  • case sensitive
    • +
  • Avoid reserved words →
    • +
  • Choose clarity and meaning
    • +
  • pick a naming convention and stick with it
    • +
+
+
+ + + + +
+
+
    +
  • break
    • +
  • case
    • +
  • catch
    • +
  • continue
    • +
  • debugger
    • +
  • default
    • +
  • delete
    • +
  • do
    • +
  • else
    • +
  • finally
    • +
  • for
    • +
  • function
    • +
  • if
    • +
  • in
    • +
  • instanceof
    • +
  • new
    • +
  • return
    • +
  • switch
    • +
  • this
    • +
  • throw
    • +
  • try
    • +
  • typeof
    • +
  • var
    • +
  • void
    • +
  • while
    • +
  • with
    • + +
  • class
    • +
  • enum
    • +
  • export
    • +
  • extends
    • +
  • import
    • +
  • super
    • +
  • implements
    • +
  • interface
    • +
  • let
    • +
  • package
    • +
  • private
    • +
  • protected
    • +
  • public
    • +
  • static
    • +
  • yield
    • +
  • abstract
    • +
  • boolean
    • +
  • byte
    • +
  • char
    • +
  • const
    • +
  • double
    • +
  • final
    • +
  • float
    • +
  • goto
    • +
  • import
    • +
  • int
    • +
  • long
    • +
  • native
    • +
  • short
    • +
  • synchronized
    • +
  • throws
    • +
  • transient
    • +
  • volatile
    • + +
  • true
    • +
  • false
    • +
  • null
    • +
  • undefined
    • +
+
+
+ + +
+

Reserved for Browser

+
+
    +
  • alert
    • +
  • blur
    • +
  • closed
    • +
  • document
    • +
  • focus
    • +
  • frames
    • +
  • history
    • +
  • innerHeight
    • +
  • innerWidth
    • +
  • length
    • +
  • location
    • +
  • navigator
    • +
  • open
    • +
  • outerHeight
    • +
  • outerWidth
    • +
  • parent
    • +
  • screen
    • +
  • screenX
    • +
  • screenY
    • +
  • statusbar
    • +
  • window
    • +
+
+
+ + +
+

Declaring Variables

+
+ 
+var firstName, lastName, age, isAwesome;
+    firstName = "Estelle";
+    lastName = 'Weyl';
+    age = 29;
+    isAwesome = true;
+ 
+var firstName = "Estelle";
+var lastName = 'Weyl';
+var age = 29;
+var isAwesome = true;
+ 
+var firstName = "Estelle",
+    lastName = 'Weyl',
+    age = 29,
+    isAwesome = true;
+ 
var firstName="Estelle",lastName='Weyl',age=29,isAwesome=true;
+
+
+ + + + +
+

Loosely typed language

+
+ 
var anyValue = 'red ribbon'; // string
+    anyValue = 24; // number   
+    anyValue = true; // boolean
+    anyValue = [3, 'red ribbon', true, 24]; //array
+
+
+ + +
+

Global Scope

+
+
+
+ +
+

Object Notation

+
+ 
+ var person = {
+    firstName: "Estelle",
+    lastName: 'Weyl',
+    age: 29,
+    isAwesome: true
+ };
+ + 
+ var person;
+    person['firstName'] = "Estelle",
+    person['lastName'] = 'Weyl',
+    person['age'] = 29,
+    person['isAwesome'] = true;
+ + + 
	
+ var person;
+    person.firstName =  "Estelle",
+    person.lastName =  'Weyl',
+    person.age = 29,
+    person.isAwesome = true;
+
+
+ + + + +
+

Basic Math

+
+

Operators

+
  • +
    • +
  • -
    • +
  • *
    • +
  • /
    • +
  • %
    • +
+
var cost = 2.5;
+var quantity = 10;
+var total = cost * quantity;
+
  • Order of operations is same as math. Use parentheses
    • +
  • modulo → remainder
    • +
+
+
+ +
+

Concatenation

+
+ 
var firstName = "Estelle";
+var lastName = "Weyl";
+var fullName = firstName + " " + lastName;
+

Joining Numbers and String

+
var sentence = firstName + " is not really " + age + " years old";
+
var notMath = '2' + 4 // 24
+var yupMath = +'2' + 4; // 6
+var yupMath = Number('2') + 4; // 6
+var notMath = Number('2foo') + 4 // NaN
+var yupMath = parseInt('2foo') + 4; // 6
+
+
+ +
+

Operator Sortcuts

+
  • +=
    • +
  • -=
    • +
  • *=
    • +
  • /=
    • +
  • ++
    • +
  • --
    • +
+ 
var increment += 1;
+  ++increment;
+    increment++;
+var decrement -= 1;
+  --decrement;
+    decrement--;
+
+    errorMessage += " " + newError;
+
+
+ + + +
+

MadLibs with Window Methods

+
+ 
var color = window.prompt('Your favorite color');
+var tool = window.prompt('What do you draw with?');
+var count = window.prompt('Favorite Number?');
+window.alert(count + ' ' + color + ' ' + tool + 's');
+ +
var answers = {
+  color: window.prompt('Favorite Color'),
+  tool: window.prompt('Analog Printer?'),
+  count: window.prompt('Favorite Number?'),
+  message: answers.count + ' ' + answers.color + ' ' + answers.tool + 's',
+  annoy: function(){ 
+      alert('You told us: ' + answers.message);
+    }
+};
+alert(answers.message);
+answers.annoy();
+
+
+ +
+

Exercise

+
+

Get the answers to these math problems:

+
    +
  • 27 * 6 - 18
    • +
  • The value of 28 ÷ 2
    • +
  • the remainder of 29 ÷ 3
    • +
+

Get the browser to alert your name

+

Get the browser to approximate your age with current year and birth year

+
+
+ +
+

Next

+
+ Go +
+
+
+ + + + +
+ + + + \ No newline at end of file diff --git a/part_02.html b/part_02.html new file mode 100644 index 0000000..c2c6920 --- /dev/null +++ b/part_02.html @@ -0,0 +1,146 @@ + + + + + Intro to JavaScript: Part 2 + + + + + + +
+
+ +
+

Press → key to advance. + Zoom in/out: Ctrl or Command + +/-. +

+
+ +
+ +
+ +
+ + +
+
+

Basic JavaScript

+

Estelle Weyl

+
+
+ +
+

Arrays

+
+
var browsers = ['Safari', 'Chrome', 'Explorer', 'FireFox', 'Opera'];
+
+var random = ['shoe',27,null,[42,17,19],Math.PI];
+
+

Easier (or harder) to read

+
var nincompoops = [ 'Rush Limbaugh',
+                    'Sarah Palin',
+                    'Glenn Beck',
+                    'Rick Perry'];
+

Old school

+
+var browsers = new Array('Safari', 'Chrome', 'Explorer', 'FireFox', 'Opera');
+
+
+
+ + + +
+

Arrays → zero indexed

+
+
arrayName[index]
+

First Item

+
nincompoops[0];
+

Last Item

+
nincompoops[nincompoops.length - 1];
+

Add item

+
nincompoops[nincompoops.length] = 'Donald Trump';
+
+
+ + + +
+

Array Methods: Adding Items

+
+
nincompoops[nincompoops.length] = 'Donald';
+

Add to end:

+
 nincompoops.push('Rick');
+ nincompoops.push('Michelle', 'Newt', 'Mitt');
+

Add to beginning

+
nincompoops.unshift('Ron', 'Herman');
+

Adding in the middle (based on index)

+
+nincompoops.splice(2,0,'Dick', 'George');
+
+Note: 0 is # to delete +
+
+ + + +
+

Array Methods: Deleting Items

+
+

Delete last item

+
+var lastItem = nincompoops.pop();
+
+

Delete first item

+
+var firstItem = nincompoops.shift();
+
+

Delete based on index

+
+var deletedItem = nincompoops.splice(2,1);
+
+
+
+ + + +
+

Exercise

+
+
    +
  • Create an array with 6 items
    • +
  • Remove the 5th item.
    • +
  • Make the 5th item the first item
    • +
  • Remove the last item
    • +
  • Make the last item the 2nd item
    • +
  • Remove the 3rd and 4th items the last two items
    • +
  • What is the value of the 3rd item now?
    • +
+ +
+
+ + +
+

Next

+
+Go +
+
+
+ + + + +
+ + + + \ No newline at end of file diff --git a/part_03.html b/part_03.html new file mode 100644 index 0000000..a03926a --- /dev/null +++ b/part_03.html @@ -0,0 +1,164 @@ + + + + + Intro to JavaScript: Part 3 + + + + + + +
+
+ +
+

Press → key to advance. + Zoom in/out: Ctrl or Command + +/-. +

+
+ +
+ +
+ +
+ + +
+
+

Basic JavaScript

+

Estelle Weyl

+
+
+ +
+

Conditional Statements

if/then

+
+ 
if (condition is true) {
+     
+     // then do this ....
+     
+}
+
if(2 + 2 == 4) {
+	console.log("You are a mathmatician!");
+}
+
+
if(prompt("Your name?") != "Estelle"){
+
+    console.log("You are an imposter!");
+
+}
+
+
+ + +
+

Comparison Operator

+
+ + + + + + + + + + + + + + +
OperatorDefinition
==Equal to
===Equal to & same type
!=Not Equal to
>Greater than
>=Greater or equal to
<Less than
<=Less or equal to
!Not
&&AND
||OR
+ +
+
+ +
+

Conditional Examples

+
+ 
if( 5 > 4)
+ 
if("Clinton" > "Bush")
+ 
if(5 == '5')
+ 
if(0 < x && x < 10)
+ 
if(!firstName)
+ 
if(nincompoops.length == 1)
+
+
+ + +
+

Otherwise ...

+
+ 
var msg,
+    age = +prompt("how old are you");
+    
+if(!age || isNaN(age)) {
+  msg = "You're too old to tell us your age?";
+} else if (age <= 18 || age >= 65) {
+  msg = "Kudos to you for getting mad skillz";
+} else if (age > 45) {
+  msg = "You should have lied about your age.";
+} else if (age < 25) {
+  msg = "You're too young to rent a car,\
+  but old enough to rock JS";
+} else {
+  msg = "There's nothing wrong with being average.";
+}
+
+
+ +
+

Loops

+
+ 
while (condition is true) {
+    // do these things
+    // alter the condition       
+}
+

Example

+
var counter = 0, iterations = 4;
+while (counter < iterations) {
+    // do these things
+    counter++;
+}
+
+

Declared in one line

+
+for(var counter=0; counter < iterations; counter++) {
+    // do these things
+}
+
+
+ +
+

Exercise

+
+
    + +
+ +
+
+ + +
+

Next

+
+Go +
+
+
+ + + + +
+ + + + \ No newline at end of file diff --git a/slides.js b/slides.js new file mode 100644 index 0000000..7b293d8 --- /dev/null +++ b/slides.js @@ -0,0 +1,294 @@ + (function() { + var doc = document; + var disableBuilds = true; var ctr = 0; + var spaces = /\s+/, a1 = ['']; var toArray = function(list) { + return Array.prototype.slice.call(list || [], 0); + }; var byId = function(id) { + if (typeof id == 'string') { return doc.getElementById(id); } + return id; + }; var query = function(query, root) { + if (!query) { return []; } + if (typeof query != 'string') { return toArray(query); } + if (typeof root == 'string') { + root = byId(root); + if(!root){ return []; } + } root = root || document; + var rootIsDoc = (root.nodeType == 9); + var doc = rootIsDoc ? root : (root.ownerDocument || document); // rewrite the query to be ID rooted + if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) { + root.id = root.id || ('qUnique' + (ctr++)); + query = '#' + root.id + ' ' + query; + } + // don't choke on something like ".yada.yada >" + if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; } return toArray(doc.querySelectorAll(query)); + }; var strToArray = function(s) { + if (typeof s == 'string' || s instanceof String) { + if (s.indexOf(' ') < 0) { + a1[0] = s; + return a1; + } else { + return s.split(spaces); + } + } + return s; + }; var addClass = function(node, classStr) { + classStr = strToArray(classStr); + var cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length, c; i < len; ++i) { + c = classStr[i]; + if (c && cls.indexOf(' ' + c + ' ') < 0) { + cls += c + ' '; + } + } + node.className = cls.trim(); + }; var removeClass = function(node, classStr) { + var cls; + if (classStr !== undefined) { + classStr = strToArray(classStr); + cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length; i < len; ++i) { + cls = cls.replace(' ' + classStr[i] + ' ', ' '); + } + cls = cls.trim(); + } else { + cls = ''; + } + if (node.className != cls) { + node.className = cls; + } + }; var toggleClass = function(node, classStr) { + var cls = ' ' + node.className + ' '; + if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) { + removeClass(node, classStr); + } else { + addClass(node, classStr); + } + }; var ua = navigator.userAgent; + var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined; + var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined; + var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined; var canTransition = (function() { + var ver = parseFloat(ua.split('Version/')[1]) || undefined; + // test to determine if this browser can handle CSS transitions. + var cachedCanTransition = + (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5)); + return function() { return cachedCanTransition; } + })(); // + // Slide class + // + var Slide = function(node, idx) { + this._node = node; + if (idx >= 0) { + this._count = idx + 1; + } + if (this._node) { + addClass(this._node, 'slide distant-slide'); + } + this._makeCounter(); + this._makeBuildList(); + }; Slide.prototype = { + _node: null, + _count: 0, + _buildList: [], + _visited: false, + _currentState: '', + _states: [ 'distant-slide', 'far-past', + 'past', 'current', 'future', + 'far-future', 'distant-slide' ], + setState: function(state) { + if (typeof state != 'string') { + state = this._states[state]; + } + if (state == 'current' && !this._visited) { + this._visited = true; + this._makeBuildList(); + } + removeClass(this._node, this._states); + addClass(this._node, state); + this._currentState = state; // delay first auto run. Really wish this were in CSS. + /* + this._runAutos(); + */ + var _t = this; + setTimeout(function(){ _t._runAutos(); } , 400); + }, + _makeCounter: function() { + if(!this._count || !this._node) { return; } + var c = doc.createElement('span'); + c.innerHTML = this._count; + c.className = 'counter'; + this._node.appendChild(c); + }, + _makeBuildList: function() { + this._buildList = []; + if (disableBuilds) { return; } + if (this._node) { + this._buildList = query('[data-build] > *', this._node); + } + this._buildList.forEach(function(el) { + addClass(el, 'to-build'); + }); + }, + _runAutos: function() { + if (this._currentState != 'current') { + return; + } + // find the next auto, slice it out of the list, and run it + var idx = -1; + this._buildList.some(function(n, i) { + if (n.hasAttribute('data-auto')) { + idx = i; + return true; + } + return false; + }); + if (idx >= 0) { + var elem = this._buildList.splice(idx, 1)[0]; + var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd'); + var _t = this; + if (canTransition()) { + var l = function(evt) { + elem.parentNode.removeEventListener(transitionEnd, l, false); + _t._runAutos(); + }; + elem.parentNode.addEventListener(transitionEnd, l, false); + removeClass(elem, 'to-build'); + } else { + setTimeout(function() { + removeClass(elem, 'to-build'); + _t._runAutos(); + }, 400); + } + } + }, + buildNext: function() { + if (!this._buildList.length) { + return false; + } + removeClass(this._buildList.shift(), 'to-build'); + return true; + }, + }; // + // SlideShow class + // + var SlideShow = function(slides) { + this._slides = (slides || []).map(function(el, idx) { + return new Slide(el, idx); + }); var h = window.location.hash; + try { + this.current = parseInt(h.split('#slide')[1], 10); + }catch (e) { /* squeltch */ } + this.current = isNaN(this.current) ? 1 : this.current; + var _t = this; + doc.addEventListener('keydown', + function(e) { _t.handleKeys(e); }, false); + doc.addEventListener('mousewheel', + function(e) { _t.handleWheel(e); }, false); + doc.addEventListener('DOMMouseScroll', + function(e) { _t.handleWheel(e); }, false); + doc.addEventListener('touchstart', + function(e) { _t.handleTouchStart(e); }, false); + doc.addEventListener('touchend', + function(e) { _t.handleTouchEnd(e); }, false); + window.addEventListener('popstate', + function(e) { _t.go(e.state); }, false); + this._update(); + }; SlideShow.prototype = { + _slides: [], + _update: function(dontPush) { + document.querySelector('#presentation-counter').innerText = this.current; + if (history.pushState) { + if (!dontPush) { + history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current); + } + } else { + window.location.hash = 'slide' + this.current; + } + for (var x = this.current-1; x < this.current + 7; x++) { + if (this._slides[x-4]) { + this._slides[x-4].setState(Math.max(0, x-this.current)); + } + } + }, current: 0, + next: function() { + if (!this._slides[this.current-1].buildNext()) { + this.current = Math.min(this.current + 1, this._slides.length); + this._update(); + } + }, + prev: function() { + this.current = Math.max(this.current-1, 1); + this._update(); + }, + go: function(num) { + if (!num) return; + if (history.pushState && this.current != num) { + history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current); + } + this.current = num; + this._update(true); + }, _notesOn: false, + showNotes: function() { + var isOn = this._notesOn = !this._notesOn; + query('.notes').forEach(function(el) { + el.style.display = (notesOn) ? 'block' : 'none'; + }); + }, + switch3D: function() { + toggleClass(document.body, 'three-d'); + }, + handleWheel: function(e) { + var delta = 0; + if (e.wheelDelta) { + delta = e.wheelDelta/120; + if (isOpera) { + delta = -delta; + } + } else if (e.detail) { + delta = -e.detail/3; + } if (delta > 0 ) { + this.prev(); + return; + } + if (delta < 0 ) { + this.next(); + return; + } + }, + handleKeys: function(e) { + + if (/^(input|textarea)$/i.test(e.target.nodeName)) return; + if(e.target.contentEditable == "true") { + switch (e.keyCode){ + + } + return; + } else { + switch (e.keyCode) { + case 37: // left arrow + this.prev(); break; + case 39: // right arrow + case 32: // space + this.next(); break; + case 50: // 2 + this.showNotes(); break; + case 51: // 3 + this.switch3D(); break; + } + } + }, + _touchStartX: 0, + handleTouchStart: function(e) { + this._touchStartX = e.touches[0].pageX; + }, + handleTouchEnd: function(e) { + var delta = this._touchStartX - e.changedTouches[0].pageX; + var SWIPE_SIZE = 150; + if (delta > SWIPE_SIZE) { + this.next(); + } else if (delta< -SWIPE_SIZE) { + this.prev(); + } + }, + }; // Initialize + var slideshow = new SlideShow(query('.slide'));} +)(); \ No newline at end of file