|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.inherit=function(p,s){var r={};for(var q in p){r[q]=p[q]}if(s){for(var q in s){r[q]=s[q]}}return r}}();hljs.LANGUAGES.cs={dM:{k:{"abstract":1,as:1,base:1,bool:1,"break":1,"byte":1,"case":1,"catch":1,"char":1,checked:1,"class":1,"const":1,"continue":1,decimal:1,"default":1,delegate:1,"do":1,"do":1,"double":1,"else":1,"enum":1,event:1,explicit:1,extern:1,"false":1,"finally":1,fixed:1,"float":1,"for":1,foreach:1,"goto":1,"if":1,implicit:1,"in":1,"int":1,"interface":1,internal:1,is:1,lock:1,"long":1,namespace:1,"new":1,"null":1,object:1,operator:1,out:1,override:1,params:1,"private":1,"protected":1,"public":1,readonly:1,ref:1,"return":1,sbyte:1,sealed:1,"short":1,sizeof:1,stackalloc:1,"static":1,string:1,struct:1,"switch":1,"this":1,"throw":1,"true":1,"try":1,"typeof":1,uint:1,ulong:1,unchecked:1,unsafe:1,ushort:1,using:1,virtual:1,"volatile":1,"void":1,"while":1,ascending:1,descending:1,from:1,get:1,group:1,into:1,join:1,let:1,orderby:1,partial:1,select:1,set:1,value:1,"var":1,where:1,yield:1},c:[{cN:"comment",b:"///",e:"$",rB:true,c:[{cN:"xmlDocTag",b:"///|"},{cN:"xmlDocTag",b:"?",e:">"}]},hljs.CLCM,hljs.CBLCLM,{cN:"string",b:'@"',e:'"',c:[{b:'""'}]},hljs.ASM,hljs.QSM,hljs.CNM]}};hljs.LANGUAGES.ruby=function(){var g="[a-zA-Z_][a-zA-Z0-9_]*(\\!|\\?)?";var a="[a-zA-Z_]\\w*[!?=]?|[-+~]\\@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?";var n={keyword:{and:1,"false":1,then:1,defined:1,module:1,"in":1,"return":1,redo:1,"if":1,BEGIN:1,retry:1,end:1,"for":1,"true":1,self:1,when:1,next:1,until:1,"do":1,begin:1,unless:1,END:1,rescue:1,nil:1,"else":1,"break":1,undef:1,not:1,"super":1,"class":1,"case":1,require:1,yield:1,alias:1,"while":1,ensure:1,elsif:1,or:1,def:1},keymethods:{__id__:1,__send__:1,abort:1,abs:1,"all?":1,allocate:1,ancestors:1,"any?":1,arity:1,assoc:1,at:1,at_exit:1,autoload:1,"autoload?":1,"between?":1,binding:1,binmode:1,"block_given?":1,call:1,callcc:1,caller:1,capitalize:1,"capitalize!":1,casecmp:1,"catch":1,ceil:1,center:1,chomp:1,"chomp!":1,chop:1,"chop!":1,chr:1,"class":1,class_eval:1,"class_variable_defined?":1,class_variables:1,clear:1,clone:1,close:1,close_read:1,close_write:1,"closed?":1,coerce:1,collect:1,"collect!":1,compact:1,"compact!":1,concat:1,"const_defined?":1,const_get:1,const_missing:1,const_set:1,constants:1,count:1,crypt:1,"default":1,default_proc:1,"delete":1,"delete!":1,delete_at:1,delete_if:1,detect:1,display:1,div:1,divmod:1,downcase:1,"downcase!":1,downto:1,dump:1,dup:1,each:1,each_byte:1,each_index:1,each_key:1,each_line:1,each_pair:1,each_value:1,each_with_index:1,"empty?":1,entries:1,eof:1,"eof?":1,"eql?":1,"equal?":1,"eval":1,exec:1,exit:1,"exit!":1,extend:1,fail:1,fcntl:1,fetch:1,fileno:1,fill:1,find:1,find_all:1,first:1,flatten:1,"flatten!":1,floor:1,flush:1,for_fd:1,foreach:1,fork:1,format:1,freeze:1,"frozen?":1,fsync:1,getc:1,gets:1,global_variables:1,grep:1,gsub:1,"gsub!":1,"has_key?":1,"has_value?":1,hash:1,hex:1,id:1,include:1,"include?":1,included_modules:1,index:1,indexes:1,indices:1,induced_from:1,inject:1,insert:1,inspect:1,instance_eval:1,instance_method:1,instance_methods:1,"instance_of?":1,"instance_variable_defined?":1,instance_variable_get:1,instance_variable_set:1,instance_variables:1,"integer?":1,intern:1,invert:1,ioctl:1,"is_a?":1,isatty:1,"iterator?":1,join:1,"key?":1,keys:1,"kind_of?":1,lambda:1,last:1,length:1,lineno:1,ljust:1,load:1,local_variables:1,loop:1,lstrip:1,"lstrip!":1,map:1,"map!":1,match:1,max:1,"member?":1,merge:1,"merge!":1,method:1,"method_defined?":1,method_missing:1,methods:1,min:1,module_eval:1,modulo:1,name:1,nesting:1,"new":1,next:1,"next!":1,"nil?":1,nitems:1,"nonzero?":1,object_id:1,oct:1,open:1,pack:1,partition:1,pid:1,pipe:1,pop:1,popen:1,pos:1,prec:1,prec_f:1,prec_i:1,print:1,printf:1,private_class_method:1,private_instance_methods:1,"private_method_defined?":1,private_methods:1,proc:1,protected_instance_methods:1,"protected_method_defined?":1,protected_methods:1,public_class_method:1,public_instance_methods:1,"public_method_defined?":1,public_methods:1,push:1,putc:1,puts:1,quo:1,raise:1,rand:1,rassoc:1,read:1,read_nonblock:1,readchar:1,readline:1,readlines:1,readpartial:1,rehash:1,reject:1,"reject!":1,remainder:1,reopen:1,replace:1,require:1,"respond_to?":1,reverse:1,"reverse!":1,reverse_each:1,rewind:1,rindex:1,rjust:1,round:1,rstrip:1,"rstrip!":1,scan:1,seek:1,select:1,send:1,set_trace_func:1,shift:1,singleton_method_added:1,singleton_methods:1,size:1,sleep:1,slice:1,"slice!":1,sort:1,"sort!":1,sort_by:1,split:1,sprintf:1,squeeze:1,"squeeze!":1,srand:1,stat:1,step:1,store:1,strip:1,"strip!":1,sub:1,"sub!":1,succ:1,"succ!":1,sum:1,superclass:1,swapcase:1,"swapcase!":1,sync:1,syscall:1,sysopen:1,sysread:1,sysseek:1,system:1,syswrite:1,taint:1,"tainted?":1,tell:1,test:1,"throw":1,times:1,to_a:1,to_ary:1,to_f:1,to_hash:1,to_i:1,to_int:1,to_io:1,to_proc:1,to_s:1,to_str:1,to_sym:1,tr:1,"tr!":1,tr_s:1,"tr_s!":1,trace_var:1,transpose:1,trap:1,truncate:1,"tty?":1,type:1,ungetc:1,uniq:1,"uniq!":1,unpack:1,unshift:1,untaint:1,untrace_var:1,upcase:1,"upcase!":1,update:1,upto:1,"value?":1,values:1,values_at:1,warn:1,write:1,write_nonblock:1,"zero?":1,zip:1}};var h={cN:"yardoctag",b:"@[A-Za-z]+"};var d={cN:"comment",b:"#",e:"$",c:[h]};var c={cN:"comment",b:"^\\=begin",e:"^\\=end",c:[h],r:10};var b={cN:"comment",b:"^__END__",e:"\\n$"};var u={cN:"subst",b:"#\\{",e:"}",l:g,k:n};var p=[hljs.BE,u];var s={cN:"string",b:"'",e:"'",c:p,r:0};var r={cN:"string",b:'"',e:'"',c:p,r:0};var q={cN:"string",b:"%[qw]?\\(",e:"\\)",c:p,r:10};var o={cN:"string",b:"%[qw]?\\[",e:"\\]",c:p,r:10};var m={cN:"string",b:"%[qw]?{",e:"}",c:p,r:10};var l={cN:"string",b:"%[qw]?<",e:">",c:p,r:10};var k={cN:"string",b:"%[qw]?/",e:"/",c:p,r:10};var j={cN:"string",b:"%[qw]?%",e:"%",c:p,r:10};var i={cN:"string",b:"%[qw]?-",e:"-",c:p,r:10};var t={cN:"string",b:"%[qw]?\\|",e:"\\|",c:p,r:10};var e={cN:"function",b:"\\bdef\\s+",e:" |$|;",l:g,k:n,c:[{cN:"title",b:a,l:g,k:n},{cN:"params",b:"\\(",e:"\\)",l:g,k:n},d,c,b]};var f={cN:"identifier",b:g,l:g,k:n,r:0};var v=[d,c,b,s,r,q,o,m,l,k,j,i,t,{cN:"class",b:"\\b(class|module)\\b",e:"$|;",k:{"class":1,module:1},c:[{cN:"title",b:"[A-Za-z_]\\w*(::\\w+)*(\\?|\\!)?",r:0},{cN:"inheritance",b:"<\\s*",c:[{cN:"parent",b:"("+hljs.IR+"::)?"+hljs.IR}]},d,c,b]},e,{cN:"constant",b:"(::)?([A-Z]\\w*(::)?)+",r:0},{cN:"symbol",b:":",c:[s,r,q,o,m,l,k,j,i,t,f],r:0},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{cN:"number",b:"\\?\\w"},{cN:"variable",b:"(\\$\\W)|((\\$|\\@\\@?)(\\w+))"},f,{b:"("+hljs.RSR+")\\s*",c:[d,c,b,{cN:"regexp",b:"/",e:"/[a-z]*",i:"\\n",c:[hljs.BE]}],r:0}];u.c=v;e.c[1].c=v;return{dM:{l:g,k:n,c:v}}}();hljs.LANGUAGES.javascript={dM:{k:{keyword:{"in":1,"if":1,"for":1,"while":1,"finally":1,"var":1,"new":1,"function":1,"do":1,"return":1,"void":1,"else":1,"break":1,"catch":1,"instanceof":1,"with":1,"throw":1,"case":1,"default":1,"try":1,"this":1,"switch":1,"continue":1,"typeof":1,"delete":1},literal:{"true":1,"false":1,"null":1}},c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM,hljs.CNM,{b:"("+hljs.RSR+"|case|return|throw)\\s*",k:{"return":1,"throw":1,"case":1},c:[hljs.CLCM,hljs.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",c:[{b:"\\\\/"}]}],r:0},{cN:"function",b:"\\bfunction\\b",e:"{",k:{"function":1},c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM]}]}]}};hljs.LANGUAGES.css=function(){var a={cN:"function",b:hljs.IR+"\\(",e:"\\)",c:[{eW:true,eE:true,c:[hljs.NM,hljs.ASM,hljs.QSM]}]};return{cI:true,dM:{i:"[=/|']",c:[hljs.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:{"font-face":1,page:1}},{cN:"at_rule",b:"@",e:"[{;]",eE:true,k:{"import":1,page:1,media:1,charset:1},c:[a,hljs.ASM,hljs.QSM,hljs.NM]},{cN:"tag",b:hljs.IR,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[hljs.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[a,hljs.NM,hljs.QSM,hljs.ASM,hljs.CBLCLM,{cN:"hexcolor",b:"\\#[0-9A-F]+"},{cN:"important",b:"!important"}]}}]}]}]}}}();hljs.LANGUAGES.xml=function(){var b="[A-Za-z0-9\\._:-]+";var a={eW:true,c:[{cN:"attribute",b:b,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,dM:{c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"",rE:true,sL:"css"}},{cN:"tag",b:"
```
diff --git a/index.html b/index.html
index b5625c9..ce10815 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,7 @@
+
Reveal.js
HTML Presentations Made Easy
@@ -129,17 +130,18 @@
- ## Markdown support
-
- For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
+
@@ -314,6 +316,7 @@ function linkify( selector ) {
THE END
BY Hakim El Hattab / hakim.se
+
diff --git a/lib/js/data-markdown.js b/lib/js/data-markdown.js
index 84398a0..80f8eb0 100644
--- a/lib/js/data-markdown.js
+++ b/lib/js/data-markdown.js
@@ -2,13 +2,15 @@
// Modified by Hakim to handle Markdown indented with tabs
(function(){
- var slides = document.querySelectorAll('[data-markdown]');
+ var sections = document.querySelectorAll( '[data-markdown]' );
- for( var i = 0, len = slides.length; i < len; i++ ) {
- var elem = slides[i];
+ for( var i = 0, len = sections.length; i < len; i++ ) {
+ var section = sections[i];
+
+ var template = section.querySelector( 'script' );
// strip leading whitespace so it isn't evaluated as code
- var text = elem.innerHTML;
+ var text = ( template || section ).innerHTML;
var leadingWs = text.match(/^\n?(\s*)/)[1].length,
leadingTabs = text.match(/^\n?(\t*)/)[1].length;
@@ -20,8 +22,7 @@
text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
}
- // here, have sum HTML
- elem.innerHTML = (new Showdown.converter()).makeHtml(text);
+ section.innerHTML = (new Showdown.converter()).makeHtml(text);
}
})();
\ No newline at end of file
--
cgit v1.2.3
From 91e9457cefa4b1710f826994ac9f15278cbcd6dc Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Tue, 9 Oct 2012 00:06:34 -0400
Subject: zoom.js integration via alt+click
---
index.html | 9 +-
lib/js/zoom.js | 257 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 262 insertions(+), 4 deletions(-)
create mode 100644 lib/js/zoom.js
(limited to 'lib')
diff --git a/index.html b/index.html
index ce10815..5606025 100644
--- a/index.html
+++ b/index.html
@@ -90,9 +90,9 @@
- Holistic Overview
+ Point of View
- Press ESC to enter the slide overview!
+ Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js.
@@ -263,8 +263,8 @@ function linkify( selector ) {
Spectacular image!
-
-
+
+
@@ -342,6 +342,7 @@ function linkify( selector ) {
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+ { src: 'lib/js/zoom.js', condition: function() { return !!document.body.classList; } },
{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
]
diff --git a/lib/js/zoom.js b/lib/js/zoom.js
new file mode 100644
index 0000000..7fba523
--- /dev/null
+++ b/lib/js/zoom.js
@@ -0,0 +1,257 @@
+/*!
+ * zoom.js 0.2 (modified version for use with reveal.js)
+ * http://lab.hakim.se/zoom-js
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+var zoom = (function(){
+
+ // The current zoom level (scale)
+ var level = 1;
+
+ // The current mouse position, used for panning
+ var mouseX = 0,
+ mouseY = 0;
+
+ // Timeout before pan is activated
+ var panEngageTimeout = -1,
+ panUpdateInterval = -1;
+
+ var currentOptions = null;
+
+ // Check for transform support so that we can fallback otherwise
+ var supportsTransforms = 'WebkitTransform' in document.body.style ||
+ 'MozTransform' in document.body.style ||
+ 'msTransform' in document.body.style ||
+ 'OTransform' in document.body.style ||
+ 'transform' in document.body.style;
+
+ if( supportsTransforms ) {
+ // The easing that will be applied when we zoom in/out
+ document.body.style.transition = 'transform 0.8s ease';
+ document.body.style.OTransition = '-o-transform 0.8s ease';
+ document.body.style.msTransition = '-ms-transform 0.8s ease';
+ document.body.style.MozTransition = '-moz-transform 0.8s ease';
+ document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
+ }
+
+ // Zoom out if the user hits escape
+ document.addEventListener( 'keyup', function( event ) {
+ if( level !== 1 && event.keyCode === 27 ) {
+ zoom.out();
+ }
+ } );
+
+ // Monitor mouse movement for panning
+ document.addEventListener( 'mousemove', function( event ) {
+ if( level !== 1 ) {
+ mouseX = event.clientX;
+ mouseY = event.clientY;
+ }
+ } );
+
+ /**
+ * Applies the CSS required to zoom in, prioritizes use of CSS3
+ * transforms but falls back on zoom for IE.
+ *
+ * @param {Number} pageOffsetX
+ * @param {Number} pageOffsetY
+ * @param {Number} elementOffsetX
+ * @param {Number} elementOffsetY
+ * @param {Number} scale
+ */
+ function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
+
+ if( supportsTransforms ) {
+ var origin = pageOffsetX +'px '+ pageOffsetY +'px',
+ transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
+
+ document.body.style.transformOrigin = origin;
+ document.body.style.OTransformOrigin = origin;
+ document.body.style.msTransformOrigin = origin;
+ document.body.style.MozTransformOrigin = origin;
+ document.body.style.WebkitTransformOrigin = origin;
+
+ document.body.style.transform = transform;
+ document.body.style.OTransform = transform;
+ document.body.style.msTransform = transform;
+ document.body.style.MozTransform = transform;
+ document.body.style.WebkitTransform = transform;
+ }
+ else {
+ // Reset all values
+ if( scale === 1 ) {
+ document.body.style.position = '';
+ document.body.style.left = '';
+ document.body.style.top = '';
+ document.body.style.width = '';
+ document.body.style.height = '';
+ document.body.style.zoom = '';
+ }
+ // Apply scale
+ else {
+ document.body.style.position = 'relative';
+ document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
+ document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
+ document.body.style.width = ( scale * 100 ) + '%';
+ document.body.style.height = ( scale * 100 ) + '%';
+ document.body.style.zoom = scale;
+ }
+ }
+
+ level = scale;
+ }
+
+ /**
+ * Pan the document when the mosue cursor approaches the edges
+ * of the window.
+ */
+ function pan() {
+ var range = 0.12,
+ rangeX = window.innerWidth * range,
+ rangeY = window.innerHeight * range,
+ scrollOffset = getScrollOffset();
+
+ // Up
+ if( mouseY < rangeY ) {
+ window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
+ }
+ // Down
+ else if( mouseY > window.innerHeight - rangeY ) {
+ window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
+ }
+
+ // Left
+ if( mouseX < rangeX ) {
+ window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
+ }
+ // Right
+ else if( mouseX > window.innerWidth - rangeX ) {
+ window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
+ }
+ }
+
+ function getScrollOffset() {
+ return {
+ x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
+ y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
+ }
+ }
+
+ return {
+ /**
+ * Zooms in on either a rectangle or HTML element.
+ *
+ * @param {Object} options
+ * - element: HTML element to zoom in on
+ * OR
+ * - x/y: coordinates in non-transformed space to zoom in on
+ * - width/height: the portion of the screen to zoom in on
+ * - scale: can be used instead of width/height to explicitly set scale
+ */
+ to: function( options ) {
+ // Due to an implementation limitation we can't zoom in
+ // to another element without zooming out first
+ if( level !== 1 ) {
+ zoom.out();
+ }
+ else {
+ options.x = options.x || 0;
+ options.y = options.y || 0;
+
+ // If an element is set, that takes precedence
+ if( !!options.element ) {
+ // Space around the zoomed in element to leave on screen
+ var padding = 20;
+
+ options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
+ options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
+ options.x = options.element.getBoundingClientRect().left - padding;
+ options.y = options.element.getBoundingClientRect().top - padding;
+ }
+
+ // If width/height values are set, calculate scale from those values
+ if( options.width !== undefined && options.height !== undefined ) {
+ options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
+ }
+
+ if( options.scale > 1 ) {
+ options.x *= options.scale;
+ options.y *= options.scale;
+
+ var scrollOffset = getScrollOffset();
+
+ if( options.element ) {
+ scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2;
+ }
+
+ magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
+
+ if( options.pan !== false ) {
+
+ // Wait with engaging panning as it may conflict with the
+ // zoom transition
+ panEngageTimeout = setTimeout( function() {
+ panUpdateInterval = setInterval( pan, 1000 / 60 );
+ }, 800 );
+
+ }
+ }
+
+ currentOptions = options;
+ }
+ },
+
+ /**
+ * Resets the document zoom state to its default.
+ */
+ out: function() {
+ clearTimeout( panEngageTimeout );
+ clearInterval( panUpdateInterval );
+
+ var scrollOffset = getScrollOffset();
+
+ if( currentOptions && currentOptions.element ) {
+ scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
+ }
+
+ magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
+
+ level = 1;
+ },
+
+ // Alias
+ magnify: function( options ) { this.to( options ) },
+ reset: function() { this.out() },
+
+ zoomLevel: function() {
+ return level;
+ }
+ }
+
+})();
+
+
+
+
+// Custom reveal.js integration
+(function(){
+ var modifierIsActive = false;
+
+ function updateKeyFlag( event ) {
+ modifierIsActive = event.altKey;
+ }
+
+ document.addEventListener( 'keypress', updateKeyFlag, false );
+ document.addEventListener( 'keydown', updateKeyFlag, false );
+ document.addEventListener( 'keyup', updateKeyFlag, false );
+
+ document.querySelector( '.reveal' ).addEventListener( 'click', function( event ) {
+ if( modifierIsActive ) {
+ event.preventDefault();
+ zoom.to({ element: event.target, pan: false });
+ }
+ } );
+})();
+
--
cgit v1.2.3
From 16b71d7a218909a0c5cd70a7e303c601a6f015fa Mon Sep 17 00:00:00 2001
From: hakimel
Date: Tue, 9 Oct 2012 09:22:16 -0400
Subject: slight tweak to zoom integration
---
index.html | 4 +-
lib/js/zoom.js | 257 -------------------------------------------------
plugin/zoom-js/zoom.js | 244 ++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 246 insertions(+), 259 deletions(-)
delete mode 100644 lib/js/zoom.js
create mode 100644 plugin/zoom-js/zoom.js
(limited to 'lib')
diff --git a/index.html b/index.html
index 5606025..34ada2c 100644
--- a/index.html
+++ b/index.html
@@ -92,7 +92,7 @@
Point of View
- Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js.
+ Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out.
@@ -342,7 +342,7 @@ function linkify( selector ) {
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
- { src: 'lib/js/zoom.js', condition: function() { return !!document.body.classList; } },
+ { src: 'plugin/zoom-js/zoom.js', condition: function() { return !!document.body.classList; } },
{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
]
diff --git a/lib/js/zoom.js b/lib/js/zoom.js
deleted file mode 100644
index 7fba523..0000000
--- a/lib/js/zoom.js
+++ /dev/null
@@ -1,257 +0,0 @@
-/*!
- * zoom.js 0.2 (modified version for use with reveal.js)
- * http://lab.hakim.se/zoom-js
- * MIT licensed
- *
- * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
- */
-var zoom = (function(){
-
- // The current zoom level (scale)
- var level = 1;
-
- // The current mouse position, used for panning
- var mouseX = 0,
- mouseY = 0;
-
- // Timeout before pan is activated
- var panEngageTimeout = -1,
- panUpdateInterval = -1;
-
- var currentOptions = null;
-
- // Check for transform support so that we can fallback otherwise
- var supportsTransforms = 'WebkitTransform' in document.body.style ||
- 'MozTransform' in document.body.style ||
- 'msTransform' in document.body.style ||
- 'OTransform' in document.body.style ||
- 'transform' in document.body.style;
-
- if( supportsTransforms ) {
- // The easing that will be applied when we zoom in/out
- document.body.style.transition = 'transform 0.8s ease';
- document.body.style.OTransition = '-o-transform 0.8s ease';
- document.body.style.msTransition = '-ms-transform 0.8s ease';
- document.body.style.MozTransition = '-moz-transform 0.8s ease';
- document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
- }
-
- // Zoom out if the user hits escape
- document.addEventListener( 'keyup', function( event ) {
- if( level !== 1 && event.keyCode === 27 ) {
- zoom.out();
- }
- } );
-
- // Monitor mouse movement for panning
- document.addEventListener( 'mousemove', function( event ) {
- if( level !== 1 ) {
- mouseX = event.clientX;
- mouseY = event.clientY;
- }
- } );
-
- /**
- * Applies the CSS required to zoom in, prioritizes use of CSS3
- * transforms but falls back on zoom for IE.
- *
- * @param {Number} pageOffsetX
- * @param {Number} pageOffsetY
- * @param {Number} elementOffsetX
- * @param {Number} elementOffsetY
- * @param {Number} scale
- */
- function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
-
- if( supportsTransforms ) {
- var origin = pageOffsetX +'px '+ pageOffsetY +'px',
- transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
-
- document.body.style.transformOrigin = origin;
- document.body.style.OTransformOrigin = origin;
- document.body.style.msTransformOrigin = origin;
- document.body.style.MozTransformOrigin = origin;
- document.body.style.WebkitTransformOrigin = origin;
-
- document.body.style.transform = transform;
- document.body.style.OTransform = transform;
- document.body.style.msTransform = transform;
- document.body.style.MozTransform = transform;
- document.body.style.WebkitTransform = transform;
- }
- else {
- // Reset all values
- if( scale === 1 ) {
- document.body.style.position = '';
- document.body.style.left = '';
- document.body.style.top = '';
- document.body.style.width = '';
- document.body.style.height = '';
- document.body.style.zoom = '';
- }
- // Apply scale
- else {
- document.body.style.position = 'relative';
- document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
- document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
- document.body.style.width = ( scale * 100 ) + '%';
- document.body.style.height = ( scale * 100 ) + '%';
- document.body.style.zoom = scale;
- }
- }
-
- level = scale;
- }
-
- /**
- * Pan the document when the mosue cursor approaches the edges
- * of the window.
- */
- function pan() {
- var range = 0.12,
- rangeX = window.innerWidth * range,
- rangeY = window.innerHeight * range,
- scrollOffset = getScrollOffset();
-
- // Up
- if( mouseY < rangeY ) {
- window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
- }
- // Down
- else if( mouseY > window.innerHeight - rangeY ) {
- window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
- }
-
- // Left
- if( mouseX < rangeX ) {
- window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
- }
- // Right
- else if( mouseX > window.innerWidth - rangeX ) {
- window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
- }
- }
-
- function getScrollOffset() {
- return {
- x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
- y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
- }
- }
-
- return {
- /**
- * Zooms in on either a rectangle or HTML element.
- *
- * @param {Object} options
- * - element: HTML element to zoom in on
- * OR
- * - x/y: coordinates in non-transformed space to zoom in on
- * - width/height: the portion of the screen to zoom in on
- * - scale: can be used instead of width/height to explicitly set scale
- */
- to: function( options ) {
- // Due to an implementation limitation we can't zoom in
- // to another element without zooming out first
- if( level !== 1 ) {
- zoom.out();
- }
- else {
- options.x = options.x || 0;
- options.y = options.y || 0;
-
- // If an element is set, that takes precedence
- if( !!options.element ) {
- // Space around the zoomed in element to leave on screen
- var padding = 20;
-
- options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
- options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
- options.x = options.element.getBoundingClientRect().left - padding;
- options.y = options.element.getBoundingClientRect().top - padding;
- }
-
- // If width/height values are set, calculate scale from those values
- if( options.width !== undefined && options.height !== undefined ) {
- options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
- }
-
- if( options.scale > 1 ) {
- options.x *= options.scale;
- options.y *= options.scale;
-
- var scrollOffset = getScrollOffset();
-
- if( options.element ) {
- scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2;
- }
-
- magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
-
- if( options.pan !== false ) {
-
- // Wait with engaging panning as it may conflict with the
- // zoom transition
- panEngageTimeout = setTimeout( function() {
- panUpdateInterval = setInterval( pan, 1000 / 60 );
- }, 800 );
-
- }
- }
-
- currentOptions = options;
- }
- },
-
- /**
- * Resets the document zoom state to its default.
- */
- out: function() {
- clearTimeout( panEngageTimeout );
- clearInterval( panUpdateInterval );
-
- var scrollOffset = getScrollOffset();
-
- if( currentOptions && currentOptions.element ) {
- scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
- }
-
- magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
-
- level = 1;
- },
-
- // Alias
- magnify: function( options ) { this.to( options ) },
- reset: function() { this.out() },
-
- zoomLevel: function() {
- return level;
- }
- }
-
-})();
-
-
-
-
-// Custom reveal.js integration
-(function(){
- var modifierIsActive = false;
-
- function updateKeyFlag( event ) {
- modifierIsActive = event.altKey;
- }
-
- document.addEventListener( 'keypress', updateKeyFlag, false );
- document.addEventListener( 'keydown', updateKeyFlag, false );
- document.addEventListener( 'keyup', updateKeyFlag, false );
-
- document.querySelector( '.reveal' ).addEventListener( 'click', function( event ) {
- if( modifierIsActive ) {
- event.preventDefault();
- zoom.to({ element: event.target, pan: false });
- }
- } );
-})();
-
diff --git a/plugin/zoom-js/zoom.js b/plugin/zoom-js/zoom.js
new file mode 100644
index 0000000..0ca3875
--- /dev/null
+++ b/plugin/zoom-js/zoom.js
@@ -0,0 +1,244 @@
+// Custom reveal.js integration
+(function(){
+ document.querySelector( '.reveal' ).addEventListener( 'click', function( event ) {
+ if( event.altKey ) {
+ event.preventDefault();
+ zoom.to({ element: event.target, pan: false });
+ }
+ } );
+})();
+
+/*!
+ * zoom.js 0.2 (modified version for use with reveal.js)
+ * http://lab.hakim.se/zoom-js
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+var zoom = (function(){
+
+ // The current zoom level (scale)
+ var level = 1;
+
+ // The current mouse position, used for panning
+ var mouseX = 0,
+ mouseY = 0;
+
+ // Timeout before pan is activated
+ var panEngageTimeout = -1,
+ panUpdateInterval = -1;
+
+ var currentOptions = null;
+
+ // Check for transform support so that we can fallback otherwise
+ var supportsTransforms = 'WebkitTransform' in document.body.style ||
+ 'MozTransform' in document.body.style ||
+ 'msTransform' in document.body.style ||
+ 'OTransform' in document.body.style ||
+ 'transform' in document.body.style;
+
+ if( supportsTransforms ) {
+ // The easing that will be applied when we zoom in/out
+ document.body.style.transition = 'transform 0.8s ease';
+ document.body.style.OTransition = '-o-transform 0.8s ease';
+ document.body.style.msTransition = '-ms-transform 0.8s ease';
+ document.body.style.MozTransition = '-moz-transform 0.8s ease';
+ document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
+ }
+
+ // Zoom out if the user hits escape
+ document.addEventListener( 'keyup', function( event ) {
+ if( level !== 1 && event.keyCode === 27 ) {
+ zoom.out();
+ }
+ }, false );
+
+ // Monitor mouse movement for panning
+ document.addEventListener( 'mousemove', function( event ) {
+ if( level !== 1 ) {
+ mouseX = event.clientX;
+ mouseY = event.clientY;
+ }
+ }, false );
+
+ /**
+ * Applies the CSS required to zoom in, prioritizes use of CSS3
+ * transforms but falls back on zoom for IE.
+ *
+ * @param {Number} pageOffsetX
+ * @param {Number} pageOffsetY
+ * @param {Number} elementOffsetX
+ * @param {Number} elementOffsetY
+ * @param {Number} scale
+ */
+ function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
+
+ if( supportsTransforms ) {
+ var origin = pageOffsetX +'px '+ pageOffsetY +'px',
+ transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
+
+ document.body.style.transformOrigin = origin;
+ document.body.style.OTransformOrigin = origin;
+ document.body.style.msTransformOrigin = origin;
+ document.body.style.MozTransformOrigin = origin;
+ document.body.style.WebkitTransformOrigin = origin;
+
+ document.body.style.transform = transform;
+ document.body.style.OTransform = transform;
+ document.body.style.msTransform = transform;
+ document.body.style.MozTransform = transform;
+ document.body.style.WebkitTransform = transform;
+ }
+ else {
+ // Reset all values
+ if( scale === 1 ) {
+ document.body.style.position = '';
+ document.body.style.left = '';
+ document.body.style.top = '';
+ document.body.style.width = '';
+ document.body.style.height = '';
+ document.body.style.zoom = '';
+ }
+ // Apply scale
+ else {
+ document.body.style.position = 'relative';
+ document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
+ document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
+ document.body.style.width = ( scale * 100 ) + '%';
+ document.body.style.height = ( scale * 100 ) + '%';
+ document.body.style.zoom = scale;
+ }
+ }
+
+ level = scale;
+ }
+
+ /**
+ * Pan the document when the mosue cursor approaches the edges
+ * of the window.
+ */
+ function pan() {
+ var range = 0.12,
+ rangeX = window.innerWidth * range,
+ rangeY = window.innerHeight * range,
+ scrollOffset = getScrollOffset();
+
+ // Up
+ if( mouseY < rangeY ) {
+ window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
+ }
+ // Down
+ else if( mouseY > window.innerHeight - rangeY ) {
+ window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
+ }
+
+ // Left
+ if( mouseX < rangeX ) {
+ window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
+ }
+ // Right
+ else if( mouseX > window.innerWidth - rangeX ) {
+ window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
+ }
+ }
+
+ function getScrollOffset() {
+ return {
+ x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
+ y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
+ }
+ }
+
+ return {
+ /**
+ * Zooms in on either a rectangle or HTML element.
+ *
+ * @param {Object} options
+ * - element: HTML element to zoom in on
+ * OR
+ * - x/y: coordinates in non-transformed space to zoom in on
+ * - width/height: the portion of the screen to zoom in on
+ * - scale: can be used instead of width/height to explicitly set scale
+ */
+ to: function( options ) {
+ // Due to an implementation limitation we can't zoom in
+ // to another element without zooming out first
+ if( level !== 1 ) {
+ zoom.out();
+ }
+ else {
+ options.x = options.x || 0;
+ options.y = options.y || 0;
+
+ // If an element is set, that takes precedence
+ if( !!options.element ) {
+ // Space around the zoomed in element to leave on screen
+ var padding = 20;
+
+ options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
+ options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
+ options.x = options.element.getBoundingClientRect().left - padding;
+ options.y = options.element.getBoundingClientRect().top - padding;
+ }
+
+ // If width/height values are set, calculate scale from those values
+ if( options.width !== undefined && options.height !== undefined ) {
+ options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
+ }
+
+ if( options.scale > 1 ) {
+ options.x *= options.scale;
+ options.y *= options.scale;
+
+ var scrollOffset = getScrollOffset();
+
+ if( options.element ) {
+ scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2;
+ }
+
+ magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
+
+ if( options.pan !== false ) {
+
+ // Wait with engaging panning as it may conflict with the
+ // zoom transition
+ panEngageTimeout = setTimeout( function() {
+ panUpdateInterval = setInterval( pan, 1000 / 60 );
+ }, 800 );
+
+ }
+ }
+
+ currentOptions = options;
+ }
+ },
+
+ /**
+ * Resets the document zoom state to its default.
+ */
+ out: function() {
+ clearTimeout( panEngageTimeout );
+ clearInterval( panUpdateInterval );
+
+ var scrollOffset = getScrollOffset();
+
+ if( currentOptions && currentOptions.element ) {
+ scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
+ }
+
+ magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
+
+ level = 1;
+ },
+
+ // Alias
+ magnify: function( options ) { this.to( options ) },
+ reset: function() { this.out() },
+
+ zoomLevel: function() {
+ return level;
+ }
+ }
+
+})();
+
--
cgit v1.2.3
From e693717f2aa2d65f8f0cf6412a01084280fc2c9a Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sun, 28 Oct 2012 18:09:54 -0400
Subject: update syntax highlight after editing (#210), move markdown and
highlight scripts from lib to plugin
---
index.html | 7 ++---
lib/js/data-markdown.js | 28 -------------------
lib/js/highlight.js | 5 ----
lib/js/showdown.js | 62 -------------------------------------------
plugin/highlight/highlight.js | 14 ++++++++++
plugin/markdown/markdown.js | 32 ++++++++++++++++++++++
plugin/markdown/showdown.js | 62 +++++++++++++++++++++++++++++++++++++++++++
7 files changed, 112 insertions(+), 98 deletions(-)
delete mode 100644 lib/js/data-markdown.js
delete mode 100644 lib/js/highlight.js
delete mode 100644 lib/js/showdown.js
create mode 100644 plugin/highlight/highlight.js
create mode 100644 plugin/markdown/markdown.js
create mode 100644 plugin/markdown/showdown.js
(limited to 'lib')
diff --git a/index.html b/index.html
index 45029b5..89398c1 100644
--- a/index.html
+++ b/index.html
@@ -356,14 +356,15 @@ function linkify( selector ) {
// Optional libraries used to extend on reveal.js
dependencies: [
- { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
- { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
- { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+ { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+ { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+ { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
+