reveal-ck 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitmodules +3 -0
- data/.rspec +2 -0
- data/.rvmrc +16 -0
- data/.travis.yml +4 -0
- data/Gemfile +15 -0
- data/Gemfile.lock +52 -0
- data/LICENSE +20 -0
- data/README.md +103 -0
- data/Rakefile +16 -0
- data/VERSION +1 -0
- data/bin/reveal-ck +46 -0
- data/features/data/images/ruby100.png +0 -0
- data/features/generate.feature +63 -0
- data/features/help.feature +18 -0
- data/features/step_definitions/file_management_steps.rb +3 -0
- data/features/support/env.rb +15 -0
- data/features/support/file_management.rb +16 -0
- data/lib/reveal-ck.rb +4 -0
- data/lib/reveal-ck/file_slicer.rb +23 -0
- data/lib/reveal-ck/file_splicer.rb +39 -0
- data/lib/reveal-ck/haml_processor.rb +24 -0
- data/lib/reveal-ck/version.rb +4 -0
- data/rakelib/cucumber.rake +2 -0
- data/rakelib/jeweler.rake +12 -0
- data/rakelib/presentation.rake +40 -0
- data/rakelib/reveal.rake +15 -0
- data/rakelib/rspec.rake +5 -0
- data/reveal-ck.gemspec +152 -0
- data/reveal.js/LICENSE +19 -0
- data/reveal.js/README.md +374 -0
- data/reveal.js/css/print/paper.css +176 -0
- data/reveal.js/css/print/pdf.css +160 -0
- data/reveal.js/css/reveal.css +1312 -0
- data/reveal.js/css/reveal.min.css +7 -0
- data/reveal.js/css/shaders/tile-flip.fs +64 -0
- data/reveal.js/css/shaders/tile-flip.vs +141 -0
- data/reveal.js/css/theme/README.md +25 -0
- data/reveal.js/css/theme/beige.css +163 -0
- data/reveal.js/css/theme/default.css +163 -0
- data/reveal.js/css/theme/night.css +150 -0
- data/reveal.js/css/theme/serif.css +150 -0
- data/reveal.js/css/theme/simple.css +152 -0
- data/reveal.js/css/theme/sky.css +156 -0
- data/reveal.js/css/theme/source/beige.scss +50 -0
- data/reveal.js/css/theme/source/default.scss +42 -0
- data/reveal.js/css/theme/source/night.scss +35 -0
- data/reveal.js/css/theme/source/serif.scss +33 -0
- data/reveal.js/css/theme/source/simple.scss +38 -0
- data/reveal.js/css/theme/source/sky.scss +41 -0
- data/reveal.js/css/theme/template/mixins.scss +29 -0
- data/reveal.js/css/theme/template/settings.scss +33 -0
- data/reveal.js/css/theme/template/theme.scss +163 -0
- data/reveal.js/grunt.js +84 -0
- data/reveal.js/index.html +375 -0
- data/reveal.js/js/reveal.js +1796 -0
- data/reveal.js/js/reveal.min.js +8 -0
- data/reveal.js/lib/css/zenburn.css +115 -0
- data/reveal.js/lib/font/league_gothic-webfont.eot +0 -0
- data/reveal.js/lib/font/league_gothic-webfont.svg +230 -0
- data/reveal.js/lib/font/league_gothic-webfont.ttf +0 -0
- data/reveal.js/lib/font/league_gothic-webfont.woff +0 -0
- data/reveal.js/lib/font/league_gothic_license +2 -0
- data/reveal.js/lib/js/classList.js +2 -0
- data/reveal.js/lib/js/head.min.js +8 -0
- data/reveal.js/lib/js/html5shiv.js +7 -0
- data/reveal.js/package.json +31 -0
- data/reveal.js/plugin/highlight/highlight.js +9 -0
- data/reveal.js/plugin/markdown/markdown.js +37 -0
- data/reveal.js/plugin/markdown/showdown.js +62 -0
- data/reveal.js/plugin/notes-server/client.js +57 -0
- data/reveal.js/plugin/notes-server/index.js +58 -0
- data/reveal.js/plugin/notes-server/notes.html +139 -0
- data/reveal.js/plugin/notes/notes.html +164 -0
- data/reveal.js/plugin/notes/notes.js +98 -0
- data/reveal.js/plugin/postmessage/example.html +39 -0
- data/reveal.js/plugin/postmessage/postmessage.js +42 -0
- data/reveal.js/plugin/print-pdf/print-pdf.js +39 -0
- data/reveal.js/plugin/remotes/remotes.js +30 -0
- data/reveal.js/plugin/zoom-js/zoom.js +251 -0
- data/spec/data/haml/basic.haml +7 -0
- data/spec/data/html/converted_basic_haml.html +10 -0
- data/spec/data/html/reveal-js-index.html +375 -0
- data/spec/data/slicer/after_remove +6 -0
- data/spec/data/slicer/before_remove +10 -0
- data/spec/data/splicer/abcd +4 -0
- data/spec/data/splicer/after_insert +14 -0
- data/spec/data/splicer/before_insert +10 -0
- data/spec/lib/reveal-ck/file_slicer_spec.rb +42 -0
- data/spec/lib/reveal-ck/file_splicer_spec.rb +41 -0
- data/spec/lib/reveal-ck/haml_processor_spec.rb +38 -0
- data/spec/spec_helper.rb +27 -0
- metadata +271 -0
@@ -0,0 +1,98 @@
|
|
1
|
+
/**
|
2
|
+
* Handles opening of and synchronization with the reveal.js
|
3
|
+
* notes window.
|
4
|
+
*/
|
5
|
+
var RevealNotes = (function() {
|
6
|
+
|
7
|
+
function openNotes() {
|
8
|
+
var notesPopup = window.open( 'plugin/notes/notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
|
9
|
+
|
10
|
+
// Fires when slide is changed
|
11
|
+
Reveal.addEventListener( 'slidechanged', function( event ) {
|
12
|
+
post('slidechanged');
|
13
|
+
} );
|
14
|
+
|
15
|
+
// Fires when a fragment is shown
|
16
|
+
Reveal.addEventListener( 'fragmentshown', function( event ) {
|
17
|
+
post('fragmentshown');
|
18
|
+
} );
|
19
|
+
|
20
|
+
// Fires when a fragment is hidden
|
21
|
+
Reveal.addEventListener( 'fragmenthidden', function( event ) {
|
22
|
+
post('fragmenthidden');
|
23
|
+
} );
|
24
|
+
|
25
|
+
/**
|
26
|
+
* Posts the current slide data to the notes window
|
27
|
+
*
|
28
|
+
* @param {String} eventType Expecting 'slidechanged', 'fragmentshown'
|
29
|
+
* or 'fragmenthidden' set in the events above to define the needed
|
30
|
+
* slideDate.
|
31
|
+
*/
|
32
|
+
function post( eventType ) {
|
33
|
+
var slideElement = Reveal.getCurrentSlide(),
|
34
|
+
messageData;
|
35
|
+
|
36
|
+
if( eventType === 'slidechanged' ) {
|
37
|
+
var notes = slideElement.querySelector( 'aside.notes' ),
|
38
|
+
indexh = Reveal.getIndices().h,
|
39
|
+
indexv = Reveal.getIndices().v,
|
40
|
+
nextindexh,
|
41
|
+
nextindexv;
|
42
|
+
|
43
|
+
if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) {
|
44
|
+
nextindexh = indexh;
|
45
|
+
nextindexv = indexv + 1;
|
46
|
+
} else {
|
47
|
+
nextindexh = indexh + 1;
|
48
|
+
nextindexv = 0;
|
49
|
+
}
|
50
|
+
|
51
|
+
messageData = {
|
52
|
+
notes : notes ? notes.innerHTML : '',
|
53
|
+
indexh : indexh,
|
54
|
+
indexv : indexv,
|
55
|
+
nextindexh : nextindexh,
|
56
|
+
nextindexv : nextindexv,
|
57
|
+
markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false
|
58
|
+
};
|
59
|
+
}
|
60
|
+
else if( eventType === 'fragmentshown' ) {
|
61
|
+
messageData = {
|
62
|
+
fragment : 'next'
|
63
|
+
};
|
64
|
+
}
|
65
|
+
else if( eventType === 'fragmenthidden' ) {
|
66
|
+
messageData = {
|
67
|
+
fragment : 'prev'
|
68
|
+
};
|
69
|
+
}
|
70
|
+
|
71
|
+
notesPopup.postMessage( JSON.stringify( messageData ), '*' );
|
72
|
+
}
|
73
|
+
|
74
|
+
// Navigate to the current slide when the notes are loaded
|
75
|
+
notesPopup.addEventListener( 'load', function( event ) {
|
76
|
+
post('slidechanged');
|
77
|
+
}, false );
|
78
|
+
}
|
79
|
+
|
80
|
+
// If the there's a 'notes' query set, open directly
|
81
|
+
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
|
82
|
+
openNotes();
|
83
|
+
}
|
84
|
+
|
85
|
+
// Open the notes when the 's' key is hit
|
86
|
+
document.addEventListener( 'keydown', function( event ) {
|
87
|
+
// Disregard the event if the target is editable or a
|
88
|
+
// modifier is present
|
89
|
+
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
|
90
|
+
|
91
|
+
if( event.keyCode === 83 ) {
|
92
|
+
event.preventDefault();
|
93
|
+
openNotes();
|
94
|
+
}
|
95
|
+
}, false );
|
96
|
+
|
97
|
+
return { open: openNotes };
|
98
|
+
})();
|
@@ -0,0 +1,39 @@
|
|
1
|
+
<html>
|
2
|
+
<body>
|
3
|
+
|
4
|
+
<iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe>
|
5
|
+
|
6
|
+
<div>
|
7
|
+
<input id="back" type="button" value="go back"/>
|
8
|
+
<input id="ahead" type="button" value="go ahead"/>
|
9
|
+
<input id="slideto" type="button" value="slideto 2-2"/>
|
10
|
+
</div>
|
11
|
+
|
12
|
+
<script>
|
13
|
+
|
14
|
+
(function (){
|
15
|
+
|
16
|
+
var back = document.getElementById( 'back' ),
|
17
|
+
ahead = document.getElementById( 'ahead' ),
|
18
|
+
slideto = document.getElementById( 'slideto' ),
|
19
|
+
reveal = window.frames[0];
|
20
|
+
|
21
|
+
back.addEventListener( 'click', function () {
|
22
|
+
|
23
|
+
reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' );
|
24
|
+
}, false );
|
25
|
+
|
26
|
+
ahead.addEventListener( 'click', function (){
|
27
|
+
reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' );
|
28
|
+
}, false );
|
29
|
+
|
30
|
+
slideto.addEventListener( 'click', function (){
|
31
|
+
reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' );
|
32
|
+
}, false );
|
33
|
+
|
34
|
+
}());
|
35
|
+
|
36
|
+
</script>
|
37
|
+
|
38
|
+
</body>
|
39
|
+
</html>
|
@@ -0,0 +1,42 @@
|
|
1
|
+
/*
|
2
|
+
|
3
|
+
simple postmessage plugin
|
4
|
+
|
5
|
+
Useful when a reveal slideshow is inside an iframe.
|
6
|
+
It allows to call reveal methods from outside.
|
7
|
+
|
8
|
+
Example:
|
9
|
+
var reveal = window.frames[0];
|
10
|
+
|
11
|
+
// Reveal.prev();
|
12
|
+
reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*');
|
13
|
+
// Reveal.next();
|
14
|
+
reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*');
|
15
|
+
// Reveal.slide(2, 2);
|
16
|
+
reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*');
|
17
|
+
|
18
|
+
Add to the slideshow:
|
19
|
+
|
20
|
+
dependencies: [
|
21
|
+
...
|
22
|
+
{ src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } }
|
23
|
+
]
|
24
|
+
|
25
|
+
*/
|
26
|
+
|
27
|
+
(function (){
|
28
|
+
|
29
|
+
window.addEventListener( "message", function ( event ) {
|
30
|
+
var data = JSON.parse( event.data ),
|
31
|
+
method = data.method,
|
32
|
+
args = data.args;
|
33
|
+
|
34
|
+
if( typeof Reveal[method] === 'function' ) {
|
35
|
+
Reveal[method].apply( Reveal, data.args );
|
36
|
+
}
|
37
|
+
}, false);
|
38
|
+
|
39
|
+
}());
|
40
|
+
|
41
|
+
|
42
|
+
|
@@ -0,0 +1,39 @@
|
|
1
|
+
/**
|
2
|
+
* phantomjs script for printing presentations to PDF.
|
3
|
+
*
|
4
|
+
* Example:
|
5
|
+
* phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
|
6
|
+
*
|
7
|
+
* By Manuel Bieh (https://github.com/manuelbieh)
|
8
|
+
*/
|
9
|
+
|
10
|
+
// html2pdf.js
|
11
|
+
var page = new WebPage();
|
12
|
+
var system = require( 'system' );
|
13
|
+
|
14
|
+
page.paperSize = {
|
15
|
+
format: 'A4',
|
16
|
+
orientation: 'landscape',
|
17
|
+
margin: {
|
18
|
+
left: '0',
|
19
|
+
right: '0',
|
20
|
+
top: '0',
|
21
|
+
bottom: '0'
|
22
|
+
}
|
23
|
+
};
|
24
|
+
page.zoomFactor = 1.5;
|
25
|
+
|
26
|
+
var revealFile = system.args[1] || 'index.html?print-pdf';
|
27
|
+
var slideFile = system.args[2] || 'slides.pdf';
|
28
|
+
|
29
|
+
if( slideFile.match( /\.pdf$/gi ) === null ) {
|
30
|
+
slideFile += '.pdf';
|
31
|
+
}
|
32
|
+
|
33
|
+
console.log( 'Printing PDF...' );
|
34
|
+
|
35
|
+
page.open( revealFile, function( status ) {
|
36
|
+
console.log( 'Printed succesfully' );
|
37
|
+
page.render( slideFile );
|
38
|
+
phantom.exit();
|
39
|
+
} );
|
@@ -0,0 +1,30 @@
|
|
1
|
+
/**
|
2
|
+
* Touch-based remote controller for your presentation courtesy
|
3
|
+
* of the folks at http://remotes.io
|
4
|
+
*/
|
5
|
+
|
6
|
+
(function(window){
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Detects if we are dealing with a touch enabled device (with some false positives)
|
10
|
+
* Borrowed from modernizr: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touch.js
|
11
|
+
*/
|
12
|
+
var hasTouch = (function(){
|
13
|
+
return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
|
14
|
+
})();
|
15
|
+
|
16
|
+
if(!hasTouch){
|
17
|
+
head.ready( 'remotes.ne.min.js', function() {
|
18
|
+
new Remotes("preview")
|
19
|
+
.on("swipe-left", function(e){ Reveal.right(); })
|
20
|
+
.on("swipe-right", function(e){ Reveal.left(); })
|
21
|
+
.on("swipe-up", function(e){ Reveal.down(); })
|
22
|
+
.on("swipe-down", function(e){ Reveal.up(); })
|
23
|
+
.on("tap", function(e){
|
24
|
+
Reveal.toggleOverview();
|
25
|
+
});
|
26
|
+
} );
|
27
|
+
|
28
|
+
head.js('https://raw.github.com/Remotes/Remotes/master/dist/remotes.ne.min.js');
|
29
|
+
}
|
30
|
+
})(window);
|
@@ -0,0 +1,251 @@
|
|
1
|
+
// Custom reveal.js integration
|
2
|
+
(function(){
|
3
|
+
document.querySelector( '.reveal' ).addEventListener( 'click', function( event ) {
|
4
|
+
if( event.altKey ) {
|
5
|
+
event.preventDefault();
|
6
|
+
zoom.to({ element: event.target, pan: false });
|
7
|
+
}
|
8
|
+
} );
|
9
|
+
})();
|
10
|
+
|
11
|
+
/*!
|
12
|
+
* zoom.js 0.2 (modified version for use with reveal.js)
|
13
|
+
* http://lab.hakim.se/zoom-js
|
14
|
+
* MIT licensed
|
15
|
+
*
|
16
|
+
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
17
|
+
*/
|
18
|
+
var zoom = (function(){
|
19
|
+
|
20
|
+
// The current zoom level (scale)
|
21
|
+
var level = 1;
|
22
|
+
|
23
|
+
// The current mouse position, used for panning
|
24
|
+
var mouseX = 0,
|
25
|
+
mouseY = 0;
|
26
|
+
|
27
|
+
// Timeout before pan is activated
|
28
|
+
var panEngageTimeout = -1,
|
29
|
+
panUpdateInterval = -1;
|
30
|
+
|
31
|
+
var currentOptions = null;
|
32
|
+
|
33
|
+
// Check for transform support so that we can fallback otherwise
|
34
|
+
var supportsTransforms = 'WebkitTransform' in document.body.style ||
|
35
|
+
'MozTransform' in document.body.style ||
|
36
|
+
'msTransform' in document.body.style ||
|
37
|
+
'OTransform' in document.body.style ||
|
38
|
+
'transform' in document.body.style;
|
39
|
+
|
40
|
+
if( supportsTransforms ) {
|
41
|
+
// The easing that will be applied when we zoom in/out
|
42
|
+
document.body.style.transition = 'transform 0.8s ease';
|
43
|
+
document.body.style.OTransition = '-o-transform 0.8s ease';
|
44
|
+
document.body.style.msTransition = '-ms-transform 0.8s ease';
|
45
|
+
document.body.style.MozTransition = '-moz-transform 0.8s ease';
|
46
|
+
document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
|
47
|
+
}
|
48
|
+
|
49
|
+
// Zoom out if the user hits escape
|
50
|
+
document.addEventListener( 'keyup', function( event ) {
|
51
|
+
if( level !== 1 && event.keyCode === 27 ) {
|
52
|
+
zoom.out();
|
53
|
+
}
|
54
|
+
}, false );
|
55
|
+
|
56
|
+
// Monitor mouse movement for panning
|
57
|
+
document.addEventListener( 'mousemove', function( event ) {
|
58
|
+
if( level !== 1 ) {
|
59
|
+
mouseX = event.clientX;
|
60
|
+
mouseY = event.clientY;
|
61
|
+
}
|
62
|
+
}, false );
|
63
|
+
|
64
|
+
/**
|
65
|
+
* Applies the CSS required to zoom in, prioritizes use of CSS3
|
66
|
+
* transforms but falls back on zoom for IE.
|
67
|
+
*
|
68
|
+
* @param {Number} pageOffsetX
|
69
|
+
* @param {Number} pageOffsetY
|
70
|
+
* @param {Number} elementOffsetX
|
71
|
+
* @param {Number} elementOffsetY
|
72
|
+
* @param {Number} scale
|
73
|
+
*/
|
74
|
+
function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
|
75
|
+
|
76
|
+
if( supportsTransforms ) {
|
77
|
+
var origin = pageOffsetX +'px '+ pageOffsetY +'px',
|
78
|
+
transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
|
79
|
+
|
80
|
+
document.body.style.transformOrigin = origin;
|
81
|
+
document.body.style.OTransformOrigin = origin;
|
82
|
+
document.body.style.msTransformOrigin = origin;
|
83
|
+
document.body.style.MozTransformOrigin = origin;
|
84
|
+
document.body.style.WebkitTransformOrigin = origin;
|
85
|
+
|
86
|
+
document.body.style.transform = transform;
|
87
|
+
document.body.style.OTransform = transform;
|
88
|
+
document.body.style.msTransform = transform;
|
89
|
+
document.body.style.MozTransform = transform;
|
90
|
+
document.body.style.WebkitTransform = transform;
|
91
|
+
}
|
92
|
+
else {
|
93
|
+
// Reset all values
|
94
|
+
if( scale === 1 ) {
|
95
|
+
document.body.style.position = '';
|
96
|
+
document.body.style.left = '';
|
97
|
+
document.body.style.top = '';
|
98
|
+
document.body.style.width = '';
|
99
|
+
document.body.style.height = '';
|
100
|
+
document.body.style.zoom = '';
|
101
|
+
}
|
102
|
+
// Apply scale
|
103
|
+
else {
|
104
|
+
document.body.style.position = 'relative';
|
105
|
+
document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
|
106
|
+
document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
|
107
|
+
document.body.style.width = ( scale * 100 ) + '%';
|
108
|
+
document.body.style.height = ( scale * 100 ) + '%';
|
109
|
+
document.body.style.zoom = scale;
|
110
|
+
}
|
111
|
+
}
|
112
|
+
|
113
|
+
level = scale;
|
114
|
+
|
115
|
+
if( level !== 1 && document.documentElement.classList ) {
|
116
|
+
document.documentElement.classList.add( 'zoomed' );
|
117
|
+
}
|
118
|
+
else {
|
119
|
+
document.documentElement.classList.remove( 'zoomed' );
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
/**
|
124
|
+
* Pan the document when the mosue cursor approaches the edges
|
125
|
+
* of the window.
|
126
|
+
*/
|
127
|
+
function pan() {
|
128
|
+
var range = 0.12,
|
129
|
+
rangeX = window.innerWidth * range,
|
130
|
+
rangeY = window.innerHeight * range,
|
131
|
+
scrollOffset = getScrollOffset();
|
132
|
+
|
133
|
+
// Up
|
134
|
+
if( mouseY < rangeY ) {
|
135
|
+
window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
|
136
|
+
}
|
137
|
+
// Down
|
138
|
+
else if( mouseY > window.innerHeight - rangeY ) {
|
139
|
+
window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
|
140
|
+
}
|
141
|
+
|
142
|
+
// Left
|
143
|
+
if( mouseX < rangeX ) {
|
144
|
+
window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
|
145
|
+
}
|
146
|
+
// Right
|
147
|
+
else if( mouseX > window.innerWidth - rangeX ) {
|
148
|
+
window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
|
149
|
+
}
|
150
|
+
}
|
151
|
+
|
152
|
+
function getScrollOffset() {
|
153
|
+
return {
|
154
|
+
x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
|
155
|
+
y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
return {
|
160
|
+
/**
|
161
|
+
* Zooms in on either a rectangle or HTML element.
|
162
|
+
*
|
163
|
+
* @param {Object} options
|
164
|
+
* - element: HTML element to zoom in on
|
165
|
+
* OR
|
166
|
+
* - x/y: coordinates in non-transformed space to zoom in on
|
167
|
+
* - width/height: the portion of the screen to zoom in on
|
168
|
+
* - scale: can be used instead of width/height to explicitly set scale
|
169
|
+
*/
|
170
|
+
to: function( options ) {
|
171
|
+
// Due to an implementation limitation we can't zoom in
|
172
|
+
// to another element without zooming out first
|
173
|
+
if( level !== 1 ) {
|
174
|
+
zoom.out();
|
175
|
+
}
|
176
|
+
else {
|
177
|
+
options.x = options.x || 0;
|
178
|
+
options.y = options.y || 0;
|
179
|
+
|
180
|
+
// If an element is set, that takes precedence
|
181
|
+
if( !!options.element ) {
|
182
|
+
// Space around the zoomed in element to leave on screen
|
183
|
+
var padding = 20;
|
184
|
+
|
185
|
+
options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
|
186
|
+
options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
|
187
|
+
options.x = options.element.getBoundingClientRect().left - padding;
|
188
|
+
options.y = options.element.getBoundingClientRect().top - padding;
|
189
|
+
}
|
190
|
+
|
191
|
+
// If width/height values are set, calculate scale from those values
|
192
|
+
if( options.width !== undefined && options.height !== undefined ) {
|
193
|
+
options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
|
194
|
+
}
|
195
|
+
|
196
|
+
if( options.scale > 1 ) {
|
197
|
+
options.x *= options.scale;
|
198
|
+
options.y *= options.scale;
|
199
|
+
|
200
|
+
var scrollOffset = getScrollOffset();
|
201
|
+
|
202
|
+
if( options.element ) {
|
203
|
+
scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2;
|
204
|
+
}
|
205
|
+
|
206
|
+
magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
|
207
|
+
|
208
|
+
if( options.pan !== false ) {
|
209
|
+
|
210
|
+
// Wait with engaging panning as it may conflict with the
|
211
|
+
// zoom transition
|
212
|
+
panEngageTimeout = setTimeout( function() {
|
213
|
+
panUpdateInterval = setInterval( pan, 1000 / 60 );
|
214
|
+
}, 800 );
|
215
|
+
|
216
|
+
}
|
217
|
+
}
|
218
|
+
|
219
|
+
currentOptions = options;
|
220
|
+
}
|
221
|
+
},
|
222
|
+
|
223
|
+
/**
|
224
|
+
* Resets the document zoom state to its default.
|
225
|
+
*/
|
226
|
+
out: function() {
|
227
|
+
clearTimeout( panEngageTimeout );
|
228
|
+
clearInterval( panUpdateInterval );
|
229
|
+
|
230
|
+
var scrollOffset = getScrollOffset();
|
231
|
+
|
232
|
+
if( currentOptions && currentOptions.element ) {
|
233
|
+
scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
|
234
|
+
}
|
235
|
+
|
236
|
+
magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
|
237
|
+
|
238
|
+
level = 1;
|
239
|
+
},
|
240
|
+
|
241
|
+
// Alias
|
242
|
+
magnify: function( options ) { this.to( options ) },
|
243
|
+
reset: function() { this.out() },
|
244
|
+
|
245
|
+
zoomLevel: function() {
|
246
|
+
return level;
|
247
|
+
}
|
248
|
+
}
|
249
|
+
|
250
|
+
})();
|
251
|
+
|