Code format hawkbit (#1948)
Signed-off-by: Marinov Avgustin <Avgustin.Marinov@bosch.com>
This commit is contained in:
Avgustin Marinov
File diff suppressed because one or more lines are too long
@@ -3,410 +3,402 @@
|
||||
* markdown inside of presentations as well as loading
|
||||
* of external markdown documents.
|
||||
*/
|
||||
(function( root, factory ) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
root.marked = require( './marked' );
|
||||
root.RevealMarkdown = factory( root.marked );
|
||||
root.RevealMarkdown.initialize();
|
||||
} else if( typeof exports === 'object' ) {
|
||||
module.exports = factory( require( './marked' ) );
|
||||
} else {
|
||||
// Browser globals (root is window)
|
||||
root.RevealMarkdown = factory( root.marked );
|
||||
root.RevealMarkdown.initialize();
|
||||
}
|
||||
}( this, function( marked ) {
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
root.marked = require('./marked');
|
||||
root.RevealMarkdown = factory(root.marked);
|
||||
root.RevealMarkdown.initialize();
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory(require('./marked'));
|
||||
} else {
|
||||
// Browser globals (root is window)
|
||||
root.RevealMarkdown = factory(root.marked);
|
||||
root.RevealMarkdown.initialize();
|
||||
}
|
||||
}(this, function (marked) {
|
||||
|
||||
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
|
||||
DEFAULT_NOTES_SEPARATOR = 'notes?:',
|
||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
|
||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
|
||||
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
|
||||
DEFAULT_NOTES_SEPARATOR = 'notes?:',
|
||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
|
||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
|
||||
|
||||
var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
|
||||
var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
|
||||
|
||||
|
||||
/**
|
||||
* Retrieves the markdown contents of a slide section
|
||||
* element. Normalizes leading tabs/whitespace.
|
||||
*/
|
||||
function getMarkdownFromSlide( section ) {
|
||||
/**
|
||||
* Retrieves the markdown contents of a slide section
|
||||
* element. Normalizes leading tabs/whitespace.
|
||||
*/
|
||||
function getMarkdownFromSlide(section) {
|
||||
|
||||
// look for a <script> or <textarea data-template> wrapper
|
||||
var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
|
||||
// look for a <script> or <textarea data-template> wrapper
|
||||
var template = section.querySelector('[data-template]') || section.querySelector('script');
|
||||
|
||||
// strip leading whitespace so it isn't evaluated as code
|
||||
var text = ( template || section ).textContent;
|
||||
// strip leading whitespace so it isn't evaluated as code
|
||||
var text = (template || section).textContent;
|
||||
|
||||
// restore script end tags
|
||||
text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
|
||||
// restore script end tags
|
||||
text = text.replace(new RegExp(SCRIPT_END_PLACEHOLDER, 'g'), '</script>');
|
||||
|
||||
var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
|
||||
leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
|
||||
var leadingWs = text.match(/^\n?(\s*)/)[1].length,
|
||||
leadingTabs = text.match(/^\n?(\t*)/)[1].length;
|
||||
|
||||
if( leadingTabs > 0 ) {
|
||||
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
|
||||
}
|
||||
else if( leadingWs > 1 ) {
|
||||
text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' );
|
||||
}
|
||||
if (leadingTabs > 0) {
|
||||
text = text.replace(new RegExp('\\n?\\t{' + leadingTabs + '}', 'g'), '\n');
|
||||
} else if (leadingWs > 1) {
|
||||
text = text.replace(new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n');
|
||||
}
|
||||
|
||||
return text;
|
||||
return text;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a markdown slide section element, this will
|
||||
* return all arguments that aren't related to markdown
|
||||
* parsing. Used to forward any other user-defined arguments
|
||||
* to the output markdown slide.
|
||||
*/
|
||||
function getForwardedAttributes( section ) {
|
||||
/**
|
||||
* Given a markdown slide section element, this will
|
||||
* return all arguments that aren't related to markdown
|
||||
* parsing. Used to forward any other user-defined arguments
|
||||
* to the output markdown slide.
|
||||
*/
|
||||
function getForwardedAttributes(section) {
|
||||
|
||||
var attributes = section.attributes;
|
||||
var result = [];
|
||||
|
||||
for( var i = 0, len = attributes.length; i < len; i++ ) {
|
||||
var name = attributes[i].name,
|
||||
value = attributes[i].value;
|
||||
var attributes = section.attributes;
|
||||
var result = [];
|
||||
|
||||
// disregard attributes that are used for markdown loading/parsing
|
||||
if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
|
||||
for (var i = 0, len = attributes.length; i < len; i++) {
|
||||
var name = attributes[i].name,
|
||||
value = attributes[i].value;
|
||||
|
||||
if( value ) {
|
||||
result.push( name + '="' + value + '"' );
|
||||
}
|
||||
else {
|
||||
result.push( name );
|
||||
}
|
||||
}
|
||||
|
||||
return result.join( ' ' );
|
||||
// disregard attributes that are used for markdown loading/parsing
|
||||
if (/data\-(markdown|separator|vertical|notes)/gi.test(name)) continue;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Inspects the given options and fills out default
|
||||
* values for what's not defined.
|
||||
*/
|
||||
function getSlidifyOptions( options ) {
|
||||
if (value) {
|
||||
result.push(name + '="' + value + '"');
|
||||
} else {
|
||||
result.push(name);
|
||||
}
|
||||
}
|
||||
|
||||
options = options || {};
|
||||
options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
|
||||
options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
|
||||
options.attributes = options.attributes || '';
|
||||
|
||||
return options;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function for constructing a markdown slide.
|
||||
*/
|
||||
function createMarkdownSlide( content, options ) {
|
||||
return result.join(' ');
|
||||
|
||||
options = getSlidifyOptions( options );
|
||||
}
|
||||
|
||||
var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
|
||||
/**
|
||||
* Inspects the given options and fills out default
|
||||
* values for what's not defined.
|
||||
*/
|
||||
function getSlidifyOptions(options) {
|
||||
|
||||
if( notesMatch.length === 2 ) {
|
||||
content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
|
||||
}
|
||||
options = options || {};
|
||||
options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
|
||||
options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
|
||||
options.attributes = options.attributes || '';
|
||||
|
||||
// prevent script end tags in the content from interfering
|
||||
// with parsing
|
||||
content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
|
||||
return options;
|
||||
|
||||
return '<script type="text/template">' + content + '</script>';
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* Helper function for constructing a markdown slide.
|
||||
*/
|
||||
function createMarkdownSlide(content, options) {
|
||||
|
||||
/**
|
||||
* Parses a data string into multiple slides based
|
||||
* on the passed in separator arguments.
|
||||
*/
|
||||
function slidify( markdown, options ) {
|
||||
options = getSlidifyOptions(options);
|
||||
|
||||
options = getSlidifyOptions( options );
|
||||
var notesMatch = content.split(new RegExp(options.notesSeparator, 'mgi'));
|
||||
|
||||
var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
|
||||
horizontalSeparatorRegex = new RegExp( options.separator );
|
||||
if (notesMatch.length === 2) {
|
||||
content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
|
||||
}
|
||||
|
||||
var matches,
|
||||
lastIndex = 0,
|
||||
isHorizontal,
|
||||
wasHorizontal = true,
|
||||
content,
|
||||
sectionStack = [];
|
||||
// prevent script end tags in the content from interfering
|
||||
// with parsing
|
||||
content = content.replace(/<\/script>/g, SCRIPT_END_PLACEHOLDER);
|
||||
|
||||
// iterate until all blocks between separators are stacked up
|
||||
while( matches = separatorRegex.exec( markdown ) ) {
|
||||
notes = null;
|
||||
return '<script type="text/template">' + content + '</script>';
|
||||
|
||||
// determine direction (horizontal by default)
|
||||
isHorizontal = horizontalSeparatorRegex.test( matches[0] );
|
||||
}
|
||||
|
||||
if( !isHorizontal && wasHorizontal ) {
|
||||
// create vertical stack
|
||||
sectionStack.push( [] );
|
||||
}
|
||||
/**
|
||||
* Parses a data string into multiple slides based
|
||||
* on the passed in separator arguments.
|
||||
*/
|
||||
function slidify(markdown, options) {
|
||||
|
||||
// pluck slide content from markdown input
|
||||
content = markdown.substring( lastIndex, matches.index );
|
||||
options = getSlidifyOptions(options);
|
||||
|
||||
if( isHorizontal && wasHorizontal ) {
|
||||
// add to horizontal stack
|
||||
sectionStack.push( content );
|
||||
}
|
||||
else {
|
||||
// add to vertical stack
|
||||
sectionStack[sectionStack.length-1].push( content );
|
||||
}
|
||||
var separatorRegex = new RegExp(options.separator + (options.verticalSeparator ? '|' + options.verticalSeparator : ''), 'mg'),
|
||||
horizontalSeparatorRegex = new RegExp(options.separator);
|
||||
|
||||
lastIndex = separatorRegex.lastIndex;
|
||||
wasHorizontal = isHorizontal;
|
||||
}
|
||||
var matches,
|
||||
lastIndex = 0,
|
||||
isHorizontal,
|
||||
wasHorizontal = true,
|
||||
content,
|
||||
sectionStack = [];
|
||||
|
||||
// add the remaining slide
|
||||
( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
|
||||
// iterate until all blocks between separators are stacked up
|
||||
while (matches = separatorRegex.exec(markdown)) {
|
||||
notes = null;
|
||||
|
||||
var markdownSections = '';
|
||||
// determine direction (horizontal by default)
|
||||
isHorizontal = horizontalSeparatorRegex.test(matches[0]);
|
||||
|
||||
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
||||
for( var i = 0, len = sectionStack.length; i < len; i++ ) {
|
||||
// vertical
|
||||
if( sectionStack[i] instanceof Array ) {
|
||||
markdownSections += '<section '+ options.attributes +'>';
|
||||
if (!isHorizontal && wasHorizontal) {
|
||||
// create vertical stack
|
||||
sectionStack.push([]);
|
||||
}
|
||||
|
||||
sectionStack[i].forEach( function( child ) {
|
||||
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
|
||||
} );
|
||||
// pluck slide content from markdown input
|
||||
content = markdown.substring(lastIndex, matches.index);
|
||||
|
||||
markdownSections += '</section>';
|
||||
}
|
||||
else {
|
||||
markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>';
|
||||
}
|
||||
}
|
||||
|
||||
return markdownSections;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses any current data-markdown slides, splits
|
||||
* multi-slide markdown into separate sections and
|
||||
* handles loading of external markdown.
|
||||
*/
|
||||
function processSlides() {
|
||||
|
||||
var sections = document.querySelectorAll( '[data-markdown]'),
|
||||
section;
|
||||
|
||||
for( var i = 0, len = sections.length; i < len; i++ ) {
|
||||
|
||||
section = sections[i];
|
||||
|
||||
if( section.getAttribute( 'data-markdown' ).length ) {
|
||||
|
||||
var xhr = new XMLHttpRequest(),
|
||||
url = section.getAttribute( 'data-markdown' );
|
||||
|
||||
datacharset = section.getAttribute( 'data-charset' );
|
||||
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
|
||||
if( datacharset != null && datacharset != '' ) {
|
||||
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
|
||||
}
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if( xhr.readyState === 4 ) {
|
||||
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
|
||||
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
|
||||
|
||||
section.outerHTML = slidify( xhr.responseText, {
|
||||
separator: section.getAttribute( 'data-separator' ),
|
||||
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||
attributes: getForwardedAttributes( section )
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
section.outerHTML = '<section data-state="alert">' +
|
||||
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
|
||||
'Check your browser\'s JavaScript console for more details.' +
|
||||
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
|
||||
'</section>';
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
xhr.open( 'GET', url, false );
|
||||
|
||||
try {
|
||||
xhr.send();
|
||||
}
|
||||
catch ( e ) {
|
||||
alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
|
||||
}
|
||||
|
||||
}
|
||||
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
|
||||
|
||||
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
|
||||
separator: section.getAttribute( 'data-separator' ),
|
||||
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||
attributes: getForwardedAttributes( section )
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a node value has the attributes pattern.
|
||||
* If yes, extract it and add that value as one or several attributes
|
||||
* the the terget element.
|
||||
*
|
||||
* You need Cache Killer on Chrome to see the effect on any FOM transformation
|
||||
* directly on refresh (F5)
|
||||
* http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
|
||||
*/
|
||||
function addAttributeInElement( node, elementTarget, separator ) {
|
||||
|
||||
var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
|
||||
var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"=]+?)\"", 'mg' );
|
||||
var nodeValue = node.nodeValue;
|
||||
if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
|
||||
|
||||
var classes = matches[1];
|
||||
nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
|
||||
node.nodeValue = nodeValue;
|
||||
while( matchesClass = mardownClassRegex.exec( classes ) ) {
|
||||
elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add attributes to the parent element of a text node,
|
||||
* or the element of an attribute node.
|
||||
*/
|
||||
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
|
||||
|
||||
if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
|
||||
previousParentElement = element;
|
||||
for( var i = 0; i < element.childNodes.length; i++ ) {
|
||||
childElement = element.childNodes[i];
|
||||
if ( i > 0 ) {
|
||||
j = i - 1;
|
||||
while ( j >= 0 ) {
|
||||
aPreviousChildElement = element.childNodes[j];
|
||||
if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
|
||||
previousParentElement = aPreviousChildElement;
|
||||
break;
|
||||
}
|
||||
j = j - 1;
|
||||
}
|
||||
}
|
||||
parentSection = section;
|
||||
if( childElement.nodeName == "section" ) {
|
||||
parentSection = childElement ;
|
||||
previousParentElement = childElement ;
|
||||
}
|
||||
if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
|
||||
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( element.nodeType == Node.COMMENT_NODE ) {
|
||||
if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
|
||||
addAttributeInElement( element, section, separatorSectionAttributes );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts any current data-markdown slides in the
|
||||
* DOM to HTML.
|
||||
*/
|
||||
function convertSlides() {
|
||||
|
||||
var sections = document.querySelectorAll( '[data-markdown]');
|
||||
|
||||
for( var i = 0, len = sections.length; i < len; i++ ) {
|
||||
|
||||
var section = sections[i];
|
||||
|
||||
// Only parse the same slide once
|
||||
if( !section.getAttribute( 'data-markdown-parsed' ) ) {
|
||||
|
||||
section.setAttribute( 'data-markdown-parsed', true )
|
||||
|
||||
var notes = section.querySelector( 'aside.notes' );
|
||||
var markdown = getMarkdownFromSlide( section );
|
||||
|
||||
section.innerHTML = marked( markdown );
|
||||
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
|
||||
section.parentNode.getAttribute( 'data-element-attributes' ) ||
|
||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
|
||||
section.getAttribute( 'data-attributes' ) ||
|
||||
section.parentNode.getAttribute( 'data-attributes' ) ||
|
||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
|
||||
|
||||
// If there were notes, we need to re-add them after
|
||||
// having overwritten the section's HTML
|
||||
if( notes ) {
|
||||
section.appendChild( notes );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// API
|
||||
return {
|
||||
|
||||
initialize: function() {
|
||||
if( typeof marked === 'undefined' ) {
|
||||
throw 'The reveal.js Markdown plugin requires marked to be loaded';
|
||||
}
|
||||
|
||||
if( typeof hljs !== 'undefined' ) {
|
||||
marked.setOptions({
|
||||
highlight: function( code, lang ) {
|
||||
return hljs.highlightAuto( code, [lang] ).value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var options = Reveal.getConfig().markdown;
|
||||
|
||||
if ( options ) {
|
||||
marked.setOptions( options );
|
||||
}
|
||||
|
||||
processSlides();
|
||||
convertSlides();
|
||||
},
|
||||
|
||||
// TODO: Do these belong in the API?
|
||||
processSlides: processSlides,
|
||||
convertSlides: convertSlides,
|
||||
slidify: slidify
|
||||
|
||||
};
|
||||
if (isHorizontal && wasHorizontal) {
|
||||
// add to horizontal stack
|
||||
sectionStack.push(content);
|
||||
} else {
|
||||
// add to vertical stack
|
||||
sectionStack[sectionStack.length - 1].push(content);
|
||||
}
|
||||
|
||||
lastIndex = separatorRegex.lastIndex;
|
||||
wasHorizontal = isHorizontal;
|
||||
}
|
||||
|
||||
// add the remaining slide
|
||||
(wasHorizontal ? sectionStack : sectionStack[sectionStack.length - 1]).push(markdown.substring(lastIndex));
|
||||
|
||||
var markdownSections = '';
|
||||
|
||||
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
||||
for (var i = 0, len = sectionStack.length; i < len; i++) {
|
||||
// vertical
|
||||
if (sectionStack[i] instanceof Array) {
|
||||
markdownSections += '<section ' + options.attributes + '>';
|
||||
|
||||
sectionStack[i].forEach(function (child) {
|
||||
markdownSections += '<section data-markdown>' + createMarkdownSlide(child, options) + '</section>';
|
||||
});
|
||||
|
||||
markdownSections += '</section>';
|
||||
} else {
|
||||
markdownSections += '<section ' + options.attributes + ' data-markdown>' + createMarkdownSlide(sectionStack[i], options) + '</section>';
|
||||
}
|
||||
}
|
||||
|
||||
return markdownSections;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses any current data-markdown slides, splits
|
||||
* multi-slide markdown into separate sections and
|
||||
* handles loading of external markdown.
|
||||
*/
|
||||
function processSlides() {
|
||||
|
||||
var sections = document.querySelectorAll('[data-markdown]'),
|
||||
section;
|
||||
|
||||
for (var i = 0, len = sections.length; i < len; i++) {
|
||||
|
||||
section = sections[i];
|
||||
|
||||
if (section.getAttribute('data-markdown').length) {
|
||||
|
||||
var xhr = new XMLHttpRequest(),
|
||||
url = section.getAttribute('data-markdown');
|
||||
|
||||
datacharset = section.getAttribute('data-charset');
|
||||
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
|
||||
if (datacharset != null && datacharset != '') {
|
||||
xhr.overrideMimeType('text/html; charset=' + datacharset);
|
||||
}
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
|
||||
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) {
|
||||
|
||||
section.outerHTML = slidify(xhr.responseText, {
|
||||
separator: section.getAttribute('data-separator'),
|
||||
verticalSeparator: section.getAttribute('data-separator-vertical'),
|
||||
notesSeparator: section.getAttribute('data-separator-notes'),
|
||||
attributes: getForwardedAttributes(section)
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
section.outerHTML = '<section data-state="alert">' +
|
||||
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
|
||||
'Check your browser\'s JavaScript console for more details.' +
|
||||
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
|
||||
'</section>';
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
xhr.open('GET', url, false);
|
||||
|
||||
try {
|
||||
xhr.send();
|
||||
} catch (e) {
|
||||
alert('Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e);
|
||||
}
|
||||
|
||||
} else if (section.getAttribute('data-separator') || section.getAttribute('data-separator-vertical') || section.getAttribute('data-separator-notes')) {
|
||||
|
||||
section.outerHTML = slidify(getMarkdownFromSlide(section), {
|
||||
separator: section.getAttribute('data-separator'),
|
||||
verticalSeparator: section.getAttribute('data-separator-vertical'),
|
||||
notesSeparator: section.getAttribute('data-separator-notes'),
|
||||
attributes: getForwardedAttributes(section)
|
||||
});
|
||||
|
||||
} else {
|
||||
section.innerHTML = createMarkdownSlide(getMarkdownFromSlide(section));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a node value has the attributes pattern.
|
||||
* If yes, extract it and add that value as one or several attributes
|
||||
* the the terget element.
|
||||
*
|
||||
* You need Cache Killer on Chrome to see the effect on any FOM transformation
|
||||
* directly on refresh (F5)
|
||||
* http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
|
||||
*/
|
||||
function addAttributeInElement(node, elementTarget, separator) {
|
||||
|
||||
var mardownClassesInElementsRegex = new RegExp(separator, 'mg');
|
||||
var mardownClassRegex = new RegExp("([^\"= ]+?)=\"([^\"=]+?)\"", 'mg');
|
||||
var nodeValue = node.nodeValue;
|
||||
if (matches = mardownClassesInElementsRegex.exec(nodeValue)) {
|
||||
|
||||
var classes = matches[1];
|
||||
nodeValue = nodeValue.substring(0, matches.index) + nodeValue.substring(mardownClassesInElementsRegex.lastIndex);
|
||||
node.nodeValue = nodeValue;
|
||||
while (matchesClass = mardownClassRegex.exec(classes)) {
|
||||
elementTarget.setAttribute(matchesClass[1], matchesClass[2]);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add attributes to the parent element of a text node,
|
||||
* or the element of an attribute node.
|
||||
*/
|
||||
function addAttributes(section, element, previousElement, separatorElementAttributes, separatorSectionAttributes) {
|
||||
|
||||
if (element != null && element.childNodes != undefined && element.childNodes.length > 0) {
|
||||
previousParentElement = element;
|
||||
for (var i = 0; i < element.childNodes.length; i++) {
|
||||
childElement = element.childNodes[i];
|
||||
if (i > 0) {
|
||||
j = i - 1;
|
||||
while (j >= 0) {
|
||||
aPreviousChildElement = element.childNodes[j];
|
||||
if (typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR") {
|
||||
previousParentElement = aPreviousChildElement;
|
||||
break;
|
||||
}
|
||||
j = j - 1;
|
||||
}
|
||||
}
|
||||
parentSection = section;
|
||||
if (childElement.nodeName == "section") {
|
||||
parentSection = childElement;
|
||||
previousParentElement = childElement;
|
||||
}
|
||||
if (typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE) {
|
||||
addAttributes(parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element.nodeType == Node.COMMENT_NODE) {
|
||||
if (addAttributeInElement(element, previousElement, separatorElementAttributes) == false) {
|
||||
addAttributeInElement(element, section, separatorSectionAttributes);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts any current data-markdown slides in the
|
||||
* DOM to HTML.
|
||||
*/
|
||||
function convertSlides() {
|
||||
|
||||
var sections = document.querySelectorAll('[data-markdown]');
|
||||
|
||||
for (var i = 0, len = sections.length; i < len; i++) {
|
||||
|
||||
var section = sections[i];
|
||||
|
||||
// Only parse the same slide once
|
||||
if (!section.getAttribute('data-markdown-parsed')) {
|
||||
|
||||
section.setAttribute('data-markdown-parsed', true)
|
||||
|
||||
var notes = section.querySelector('aside.notes');
|
||||
var markdown = getMarkdownFromSlide(section);
|
||||
|
||||
section.innerHTML = marked(markdown);
|
||||
addAttributes(section, section, null, section.getAttribute('data-element-attributes') ||
|
||||
section.parentNode.getAttribute('data-element-attributes') ||
|
||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
|
||||
section.getAttribute('data-attributes') ||
|
||||
section.parentNode.getAttribute('data-attributes') ||
|
||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
|
||||
|
||||
// If there were notes, we need to re-add them after
|
||||
// having overwritten the section's HTML
|
||||
if (notes) {
|
||||
section.appendChild(notes);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// API
|
||||
return {
|
||||
|
||||
initialize: function () {
|
||||
if (typeof marked === 'undefined') {
|
||||
throw 'The reveal.js Markdown plugin requires marked to be loaded';
|
||||
}
|
||||
|
||||
if (typeof hljs !== 'undefined') {
|
||||
marked.setOptions({
|
||||
highlight: function (code, lang) {
|
||||
return hljs.highlightAuto(code, [lang]).value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var options = Reveal.getConfig().markdown;
|
||||
|
||||
if (options) {
|
||||
marked.setOptions(options);
|
||||
}
|
||||
|
||||
processSlides();
|
||||
convertSlides();
|
||||
},
|
||||
|
||||
// TODO: Do these belong in the API?
|
||||
processSlides: processSlides,
|
||||
convertSlides: convertSlides,
|
||||
slidify: slidify
|
||||
|
||||
};
|
||||
|
||||
}));
|
||||
|
||||
@@ -4,64 +4,64 @@
|
||||
*
|
||||
* @author Hakim El Hattab
|
||||
*/
|
||||
var RevealMath = window.RevealMath || (function(){
|
||||
var RevealMath = window.RevealMath || (function () {
|
||||
|
||||
var options = Reveal.getConfig().math || {};
|
||||
options.mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
|
||||
options.config = options.config || 'TeX-AMS_HTML-full';
|
||||
var options = Reveal.getConfig().math || {};
|
||||
options.mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
|
||||
options.config = options.config || 'TeX-AMS_HTML-full';
|
||||
|
||||
loadScript( options.mathjax + '?config=' + options.config, function() {
|
||||
loadScript(options.mathjax + '?config=' + options.config, function () {
|
||||
|
||||
MathJax.Hub.Config({
|
||||
messageStyle: 'none',
|
||||
tex2jax: {
|
||||
inlineMath: [['$','$'],['\\(','\\)']] ,
|
||||
skipTags: ['script','noscript','style','textarea','pre']
|
||||
},
|
||||
skipStartupTypeset: true
|
||||
});
|
||||
MathJax.Hub.Config({
|
||||
messageStyle: 'none',
|
||||
tex2jax: {
|
||||
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
||||
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
|
||||
},
|
||||
skipStartupTypeset: true
|
||||
});
|
||||
|
||||
// Typeset followed by an immediate reveal.js layout since
|
||||
// the typesetting process could affect slide height
|
||||
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
|
||||
MathJax.Hub.Queue( Reveal.layout );
|
||||
// Typeset followed by an immediate reveal.js layout since
|
||||
// the typesetting process could affect slide height
|
||||
MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
|
||||
MathJax.Hub.Queue(Reveal.layout);
|
||||
|
||||
// Reprocess equations in slides when they turn visible
|
||||
Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||
// Reprocess equations in slides when they turn visible
|
||||
Reveal.addEventListener('slidechanged', function (event) {
|
||||
|
||||
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
|
||||
MathJax.Hub.Queue(['Typeset', MathJax.Hub, event.currentSlide]);
|
||||
|
||||
} );
|
||||
});
|
||||
|
||||
} );
|
||||
});
|
||||
|
||||
function loadScript( url, callback ) {
|
||||
function loadScript(url, callback) {
|
||||
|
||||
var head = document.querySelector( 'head' );
|
||||
var script = document.createElement( 'script' );
|
||||
script.type = 'text/javascript';
|
||||
script.src = url;
|
||||
var head = document.querySelector('head');
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = url;
|
||||
|
||||
// Wrapper for callback to make sure it only fires once
|
||||
var finish = function() {
|
||||
if( typeof callback === 'function' ) {
|
||||
callback.call();
|
||||
callback = null;
|
||||
}
|
||||
}
|
||||
// Wrapper for callback to make sure it only fires once
|
||||
var finish = function () {
|
||||
if (typeof callback === 'function') {
|
||||
callback.call();
|
||||
callback = null;
|
||||
}
|
||||
}
|
||||
|
||||
script.onload = finish;
|
||||
script.onload = finish;
|
||||
|
||||
// IE
|
||||
script.onreadystatechange = function() {
|
||||
if ( this.readyState === 'loaded' ) {
|
||||
finish();
|
||||
}
|
||||
}
|
||||
// IE
|
||||
script.onreadystatechange = function () {
|
||||
if (this.readyState === 'loaded') {
|
||||
finish();
|
||||
}
|
||||
}
|
||||
|
||||
// Normal browsers
|
||||
head.appendChild( script );
|
||||
// Normal browsers
|
||||
head.appendChild(script);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
(function() {
|
||||
var multiplex = Reveal.getConfig().multiplex;
|
||||
var socketId = multiplex.id;
|
||||
var socket = io.connect(multiplex.url);
|
||||
(function () {
|
||||
var multiplex = Reveal.getConfig().multiplex;
|
||||
var socketId = multiplex.id;
|
||||
var socket = io.connect(multiplex.url);
|
||||
|
||||
socket.on(multiplex.id, function(data) {
|
||||
// ignore data from sockets that aren't ours
|
||||
if (data.socketId !== socketId) { return; }
|
||||
if( window.location.host === 'localhost:1947' ) return;
|
||||
socket.on(multiplex.id, function (data) {
|
||||
// ignore data from sockets that aren't ours
|
||||
if (data.socketId !== socketId) {
|
||||
return;
|
||||
}
|
||||
if (window.location.host === 'localhost:1947') return;
|
||||
|
||||
Reveal.setState(data.state);
|
||||
});
|
||||
Reveal.setState(data.state);
|
||||
});
|
||||
}());
|
||||
|
||||
@@ -1,64 +1,65 @@
|
||||
var http = require('http');
|
||||
var express = require('express');
|
||||
var fs = require('fs');
|
||||
var io = require('socket.io');
|
||||
var crypto = require('crypto');
|
||||
var http = require('http');
|
||||
var express = require('express');
|
||||
var fs = require('fs');
|
||||
var io = require('socket.io');
|
||||
var crypto = require('crypto');
|
||||
|
||||
var app = express();
|
||||
var staticDir = express.static;
|
||||
var server = http.createServer(app);
|
||||
var app = express();
|
||||
var staticDir = express.static;
|
||||
var server = http.createServer(app);
|
||||
|
||||
io = io(server);
|
||||
|
||||
var opts = {
|
||||
port: process.env.PORT || 1948,
|
||||
baseDir : __dirname + '/../../'
|
||||
port: process.env.PORT || 1948,
|
||||
baseDir: __dirname + '/../../'
|
||||
};
|
||||
|
||||
io.on( 'connection', function( socket ) {
|
||||
socket.on('multiplex-statechanged', function(data) {
|
||||
if (typeof data.secret == 'undefined' || data.secret == null || data.secret === '') return;
|
||||
if (createHash(data.secret) === data.socketId) {
|
||||
data.secret = null;
|
||||
socket.broadcast.emit(data.socketId, data);
|
||||
};
|
||||
});
|
||||
io.on('connection', function (socket) {
|
||||
socket.on('multiplex-statechanged', function (data) {
|
||||
if (typeof data.secret == 'undefined' || data.secret == null || data.secret === '') return;
|
||||
if (createHash(data.secret) === data.socketId) {
|
||||
data.secret = null;
|
||||
socket.broadcast.emit(data.socketId, data);
|
||||
}
|
||||
;
|
||||
});
|
||||
});
|
||||
|
||||
[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
|
||||
app.use('/' + dir, staticDir(opts.baseDir + dir));
|
||||
['css', 'js', 'plugin', 'lib'].forEach(function (dir) {
|
||||
app.use('/' + dir, staticDir(opts.baseDir + dir));
|
||||
});
|
||||
|
||||
app.get("/", function(req, res) {
|
||||
res.writeHead(200, {'Content-Type': 'text/html'});
|
||||
app.get("/", function (req, res) {
|
||||
res.writeHead(200, {'Content-Type': 'text/html'});
|
||||
|
||||
var stream = fs.createReadStream(opts.baseDir + '/index.html');
|
||||
stream.on('error', function( error ) {
|
||||
res.write('<style>body{font-family: sans-serif;}</style><h2>reveal.js multiplex server.</h2><a href="/token">Generate token</a>');
|
||||
res.end();
|
||||
});
|
||||
stream.on('readable', function() {
|
||||
stream.pipe(res);
|
||||
});
|
||||
var stream = fs.createReadStream(opts.baseDir + '/index.html');
|
||||
stream.on('error', function (error) {
|
||||
res.write('<style>body{font-family: sans-serif;}</style><h2>reveal.js multiplex server.</h2><a href="/token">Generate token</a>');
|
||||
res.end();
|
||||
});
|
||||
stream.on('readable', function () {
|
||||
stream.pipe(res);
|
||||
});
|
||||
});
|
||||
|
||||
app.get("/token", function(req,res) {
|
||||
var ts = new Date().getTime();
|
||||
var rand = Math.floor(Math.random()*9999999);
|
||||
var secret = ts.toString() + rand.toString();
|
||||
res.send({secret: secret, socketId: createHash(secret)});
|
||||
app.get("/token", function (req, res) {
|
||||
var ts = new Date().getTime();
|
||||
var rand = Math.floor(Math.random() * 9999999);
|
||||
var secret = ts.toString() + rand.toString();
|
||||
res.send({secret: secret, socketId: createHash(secret)});
|
||||
});
|
||||
|
||||
var createHash = function(secret) {
|
||||
var cipher = crypto.createCipher('blowfish', secret);
|
||||
return(cipher.final('hex'));
|
||||
var createHash = function (secret) {
|
||||
var cipher = crypto.createCipher('blowfish', secret);
|
||||
return (cipher.final('hex'));
|
||||
};
|
||||
|
||||
// Actually listen
|
||||
server.listen( opts.port || null );
|
||||
server.listen(opts.port || null);
|
||||
|
||||
var brown = '\033[33m',
|
||||
green = '\033[32m',
|
||||
reset = '\033[0m';
|
||||
green = '\033[32m',
|
||||
reset = '\033[0m';
|
||||
|
||||
console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset );
|
||||
console.log(brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset);
|
||||
@@ -1,34 +1,36 @@
|
||||
(function() {
|
||||
(function () {
|
||||
|
||||
// Don't emit events from inside of notes windows
|
||||
if ( window.location.search.match( /receiver/gi ) ) { return; }
|
||||
// Don't emit events from inside of notes windows
|
||||
if (window.location.search.match(/receiver/gi)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var multiplex = Reveal.getConfig().multiplex;
|
||||
var multiplex = Reveal.getConfig().multiplex;
|
||||
|
||||
var socket = io.connect( multiplex.url );
|
||||
var socket = io.connect(multiplex.url);
|
||||
|
||||
function post() {
|
||||
function post() {
|
||||
|
||||
var messageData = {
|
||||
state: Reveal.getState(),
|
||||
secret: multiplex.secret,
|
||||
socketId: multiplex.id
|
||||
};
|
||||
var messageData = {
|
||||
state: Reveal.getState(),
|
||||
secret: multiplex.secret,
|
||||
socketId: multiplex.id
|
||||
};
|
||||
|
||||
socket.emit( 'multiplex-statechanged', messageData );
|
||||
socket.emit('multiplex-statechanged', messageData);
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
// post once the page is loaded, so the client follows also on "open URL".
|
||||
window.addEventListener( 'load', post );
|
||||
// post once the page is loaded, so the client follows also on "open URL".
|
||||
window.addEventListener('load', post);
|
||||
|
||||
// Monitor events that trigger a change in state
|
||||
Reveal.addEventListener( 'slidechanged', post );
|
||||
Reveal.addEventListener( 'fragmentshown', post );
|
||||
Reveal.addEventListener( 'fragmenthidden', post );
|
||||
Reveal.addEventListener( 'overviewhidden', post );
|
||||
Reveal.addEventListener( 'overviewshown', post );
|
||||
Reveal.addEventListener( 'paused', post );
|
||||
Reveal.addEventListener( 'resumed', post );
|
||||
// Monitor events that trigger a change in state
|
||||
Reveal.addEventListener('slidechanged', post);
|
||||
Reveal.addEventListener('fragmentshown', post);
|
||||
Reveal.addEventListener('fragmenthidden', post);
|
||||
Reveal.addEventListener('overviewhidden', post);
|
||||
Reveal.addEventListener('overviewshown', post);
|
||||
Reveal.addEventListener('paused', post);
|
||||
Reveal.addEventListener('resumed', post);
|
||||
|
||||
}());
|
||||
|
||||
@@ -1,65 +1,67 @@
|
||||
(function() {
|
||||
(function () {
|
||||
|
||||
// don't emit events from inside the previews themselves
|
||||
if( window.location.search.match( /receiver/gi ) ) { return; }
|
||||
// don't emit events from inside the previews themselves
|
||||
if (window.location.search.match(/receiver/gi)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var socket = io.connect( window.location.origin ),
|
||||
socketId = Math.random().toString().slice( 2 );
|
||||
var socket = io.connect(window.location.origin),
|
||||
socketId = Math.random().toString().slice(2);
|
||||
|
||||
console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId );
|
||||
console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId);
|
||||
|
||||
window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId );
|
||||
window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId);
|
||||
|
||||
/**
|
||||
* Posts the current slide data to the notes window
|
||||
*/
|
||||
function post() {
|
||||
/**
|
||||
* Posts the current slide data to the notes window
|
||||
*/
|
||||
function post() {
|
||||
|
||||
var slideElement = Reveal.getCurrentSlide(),
|
||||
notesElement = slideElement.querySelector( 'aside.notes' );
|
||||
var slideElement = Reveal.getCurrentSlide(),
|
||||
notesElement = slideElement.querySelector('aside.notes');
|
||||
|
||||
var messageData = {
|
||||
notes: '',
|
||||
markdown: false,
|
||||
socketId: socketId,
|
||||
state: Reveal.getState()
|
||||
};
|
||||
var messageData = {
|
||||
notes: '',
|
||||
markdown: false,
|
||||
socketId: socketId,
|
||||
state: Reveal.getState()
|
||||
};
|
||||
|
||||
// Look for notes defined in a slide attribute
|
||||
if( slideElement.hasAttribute( 'data-notes' ) ) {
|
||||
messageData.notes = slideElement.getAttribute( 'data-notes' );
|
||||
}
|
||||
// Look for notes defined in a slide attribute
|
||||
if (slideElement.hasAttribute('data-notes')) {
|
||||
messageData.notes = slideElement.getAttribute('data-notes');
|
||||
}
|
||||
|
||||
// Look for notes defined in an aside element
|
||||
if( notesElement ) {
|
||||
messageData.notes = notesElement.innerHTML;
|
||||
messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
|
||||
}
|
||||
// Look for notes defined in an aside element
|
||||
if (notesElement) {
|
||||
messageData.notes = notesElement.innerHTML;
|
||||
messageData.markdown = typeof notesElement.getAttribute('data-markdown') === 'string';
|
||||
}
|
||||
|
||||
socket.emit( 'statechanged', messageData );
|
||||
socket.emit('statechanged', messageData);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// When a new notes window connects, post our current state
|
||||
socket.on( 'new-subscriber', function( data ) {
|
||||
post();
|
||||
} );
|
||||
// When a new notes window connects, post our current state
|
||||
socket.on('new-subscriber', function (data) {
|
||||
post();
|
||||
});
|
||||
|
||||
// When the state changes from inside of the speaker view
|
||||
socket.on( 'statechanged-speaker', function( data ) {
|
||||
Reveal.setState( data.state );
|
||||
} );
|
||||
// When the state changes from inside of the speaker view
|
||||
socket.on('statechanged-speaker', function (data) {
|
||||
Reveal.setState(data.state);
|
||||
});
|
||||
|
||||
// Monitor events that trigger a change in state
|
||||
Reveal.addEventListener( 'slidechanged', post );
|
||||
Reveal.addEventListener( 'fragmentshown', post );
|
||||
Reveal.addEventListener( 'fragmenthidden', post );
|
||||
Reveal.addEventListener( 'overviewhidden', post );
|
||||
Reveal.addEventListener( 'overviewshown', post );
|
||||
Reveal.addEventListener( 'paused', post );
|
||||
Reveal.addEventListener( 'resumed', post );
|
||||
// Monitor events that trigger a change in state
|
||||
Reveal.addEventListener('slidechanged', post);
|
||||
Reveal.addEventListener('fragmentshown', post);
|
||||
Reveal.addEventListener('fragmenthidden', post);
|
||||
Reveal.addEventListener('overviewhidden', post);
|
||||
Reveal.addEventListener('overviewshown', post);
|
||||
Reveal.addEventListener('paused', post);
|
||||
Reveal.addEventListener('resumed', post);
|
||||
|
||||
// Post the initial state
|
||||
post();
|
||||
// Post the initial state
|
||||
post();
|
||||
|
||||
}());
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
var http = require('http');
|
||||
var express = require('express');
|
||||
var fs = require('fs');
|
||||
var io = require('socket.io');
|
||||
var Mustache = require('mustache');
|
||||
var http = require('http');
|
||||
var express = require('express');
|
||||
var fs = require('fs');
|
||||
var io = require('socket.io');
|
||||
var Mustache = require('mustache');
|
||||
|
||||
var app = express();
|
||||
var app = express();
|
||||
var staticDir = express.static;
|
||||
var server = http.createServer(app);
|
||||
var server = http.createServer(app);
|
||||
|
||||
io = io(server);
|
||||
|
||||
var opts = {
|
||||
port : 1947,
|
||||
baseDir : __dirname + '/../../'
|
||||
port: 1947,
|
||||
baseDir: __dirname + '/../../'
|
||||
};
|
||||
|
||||
io.on( 'connection', function( socket ) {
|
||||
io.on('connection', function (socket) {
|
||||
|
||||
socket.on( 'new-subscriber', function( data ) {
|
||||
socket.broadcast.emit( 'new-subscriber', data );
|
||||
});
|
||||
socket.on('new-subscriber', function (data) {
|
||||
socket.broadcast.emit('new-subscriber', data);
|
||||
});
|
||||
|
||||
socket.on( 'statechanged', function( data ) {
|
||||
delete data.state.overview;
|
||||
socket.broadcast.emit( 'statechanged', data );
|
||||
});
|
||||
socket.on('statechanged', function (data) {
|
||||
delete data.state.overview;
|
||||
socket.broadcast.emit('statechanged', data);
|
||||
});
|
||||
|
||||
socket.on( 'statechanged-speaker', function( data ) {
|
||||
delete data.state.overview;
|
||||
socket.broadcast.emit( 'statechanged-speaker', data );
|
||||
});
|
||||
socket.on('statechanged-speaker', function (data) {
|
||||
delete data.state.overview;
|
||||
socket.broadcast.emit('statechanged-speaker', data);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) {
|
||||
app.use( '/' + dir, staticDir( opts.baseDir + dir ) );
|
||||
['css', 'js', 'images', 'plugin', 'lib'].forEach(function (dir) {
|
||||
app.use('/' + dir, staticDir(opts.baseDir + dir));
|
||||
});
|
||||
|
||||
app.get('/', function( req, res ) {
|
||||
app.get('/', function (req, res) {
|
||||
|
||||
res.writeHead( 200, { 'Content-Type': 'text/html' } );
|
||||
fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res );
|
||||
res.writeHead(200, {'Content-Type': 'text/html'});
|
||||
fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
|
||||
|
||||
});
|
||||
|
||||
app.get( '/notes/:socketId', function( req, res ) {
|
||||
app.get('/notes/:socketId', function (req, res) {
|
||||
|
||||
fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) {
|
||||
res.send( Mustache.to_html( data.toString(), {
|
||||
socketId : req.params.socketId
|
||||
}));
|
||||
});
|
||||
fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function (err, data) {
|
||||
res.send(Mustache.to_html(data.toString(), {
|
||||
socketId: req.params.socketId
|
||||
}));
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Actually listen
|
||||
server.listen( opts.port || null );
|
||||
server.listen(opts.port || null);
|
||||
|
||||
var brown = '\033[33m',
|
||||
green = '\033[32m',
|
||||
reset = '\033[0m';
|
||||
green = '\033[32m',
|
||||
reset = '\033[0m';
|
||||
|
||||
var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' );
|
||||
var slidesLocation = 'http://localhost' + (opts.port ? (':' + opts.port) : '');
|
||||
|
||||
console.log( brown + 'reveal.js - Speaker Notes' + reset );
|
||||
console.log( '1. Open the slides at ' + green + slidesLocation + reset );
|
||||
console.log( '2. Click on the link in your JS console to go to the notes page' );
|
||||
console.log( '3. Advance through your slides and your notes will advance automatically' );
|
||||
console.log(brown + 'reveal.js - Speaker Notes' + reset);
|
||||
console.log('1. Open the slides at ' + green + slidesLocation + reset);
|
||||
console.log('2. Click on the link in your JS console to go to the notes page');
|
||||
console.log('3. Advance through your slides and your notes will advance automatically');
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -9,147 +9,146 @@
|
||||
* 3. This window proceeds to send the current presentation state
|
||||
* to the notes window
|
||||
*/
|
||||
var RevealNotes = (function() {
|
||||
var RevealNotes = (function () {
|
||||
|
||||
function openNotes( notesFilePath ) {
|
||||
function openNotes(notesFilePath) {
|
||||
|
||||
if( !notesFilePath ) {
|
||||
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
|
||||
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
|
||||
notesFilePath = jsFileLocation + 'notes.html';
|
||||
}
|
||||
if (!notesFilePath) {
|
||||
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
|
||||
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
|
||||
notesFilePath = jsFileLocation + 'notes.html';
|
||||
}
|
||||
|
||||
var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
|
||||
var notesPopup = window.open(notesFilePath, 'reveal.js - Notes', 'width=1100,height=700');
|
||||
|
||||
// Allow popup window access to Reveal API
|
||||
notesPopup.Reveal = this.Reveal;
|
||||
// Allow popup window access to Reveal API
|
||||
notesPopup.Reveal = this.Reveal;
|
||||
|
||||
/**
|
||||
* Connect to the notes window through a postmessage handshake.
|
||||
* Using postmessage enables us to work in situations where the
|
||||
* origins differ, such as a presentation being opened from the
|
||||
* file system.
|
||||
*/
|
||||
function connect() {
|
||||
// Keep trying to connect until we get a 'connected' message back
|
||||
var connectInterval = setInterval( function() {
|
||||
notesPopup.postMessage( JSON.stringify( {
|
||||
namespace: 'reveal-notes',
|
||||
type: 'connect',
|
||||
url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
|
||||
state: Reveal.getState()
|
||||
} ), '*' );
|
||||
}, 500 );
|
||||
/**
|
||||
* Connect to the notes window through a postmessage handshake.
|
||||
* Using postmessage enables us to work in situations where the
|
||||
* origins differ, such as a presentation being opened from the
|
||||
* file system.
|
||||
*/
|
||||
function connect() {
|
||||
// Keep trying to connect until we get a 'connected' message back
|
||||
var connectInterval = setInterval(function () {
|
||||
notesPopup.postMessage(JSON.stringify({
|
||||
namespace: 'reveal-notes',
|
||||
type: 'connect',
|
||||
url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
|
||||
state: Reveal.getState()
|
||||
}), '*');
|
||||
}, 500);
|
||||
|
||||
window.addEventListener( 'message', function( event ) {
|
||||
var data = JSON.parse( event.data );
|
||||
if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
|
||||
clearInterval( connectInterval );
|
||||
onConnected();
|
||||
}
|
||||
} );
|
||||
}
|
||||
window.addEventListener('message', function (event) {
|
||||
var data = JSON.parse(event.data);
|
||||
if (data && data.namespace === 'reveal-notes' && data.type === 'connected') {
|
||||
clearInterval(connectInterval);
|
||||
onConnected();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Posts the current slide data to the notes window
|
||||
*/
|
||||
function post( event ) {
|
||||
/**
|
||||
* Posts the current slide data to the notes window
|
||||
*/
|
||||
function post(event) {
|
||||
|
||||
var slideElement = Reveal.getCurrentSlide(),
|
||||
notesElement = slideElement.querySelector( 'aside.notes' ),
|
||||
fragmentElement = slideElement.querySelector( '.current-fragment' );
|
||||
var slideElement = Reveal.getCurrentSlide(),
|
||||
notesElement = slideElement.querySelector('aside.notes'),
|
||||
fragmentElement = slideElement.querySelector('.current-fragment');
|
||||
|
||||
var messageData = {
|
||||
namespace: 'reveal-notes',
|
||||
type: 'state',
|
||||
notes: '',
|
||||
markdown: false,
|
||||
whitespace: 'normal',
|
||||
state: Reveal.getState()
|
||||
};
|
||||
var messageData = {
|
||||
namespace: 'reveal-notes',
|
||||
type: 'state',
|
||||
notes: '',
|
||||
markdown: false,
|
||||
whitespace: 'normal',
|
||||
state: Reveal.getState()
|
||||
};
|
||||
|
||||
// Look for notes defined in a slide attribute
|
||||
if( slideElement.hasAttribute( 'data-notes' ) ) {
|
||||
messageData.notes = slideElement.getAttribute( 'data-notes' );
|
||||
messageData.whitespace = 'pre-wrap';
|
||||
}
|
||||
// Look for notes defined in a slide attribute
|
||||
if (slideElement.hasAttribute('data-notes')) {
|
||||
messageData.notes = slideElement.getAttribute('data-notes');
|
||||
messageData.whitespace = 'pre-wrap';
|
||||
}
|
||||
|
||||
// Look for notes defined in a fragment
|
||||
if( fragmentElement ) {
|
||||
var fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
|
||||
if( fragmentNotes ) {
|
||||
notesElement = fragmentNotes;
|
||||
}
|
||||
else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
|
||||
messageData.notes = fragmentElement.getAttribute( 'data-notes' );
|
||||
messageData.whitespace = 'pre-wrap';
|
||||
// Look for notes defined in a fragment
|
||||
if (fragmentElement) {
|
||||
var fragmentNotes = fragmentElement.querySelector('aside.notes');
|
||||
if (fragmentNotes) {
|
||||
notesElement = fragmentNotes;
|
||||
} else if (fragmentElement.hasAttribute('data-notes')) {
|
||||
messageData.notes = fragmentElement.getAttribute('data-notes');
|
||||
messageData.whitespace = 'pre-wrap';
|
||||
|
||||
// In case there are slide notes
|
||||
notesElement = null;
|
||||
}
|
||||
}
|
||||
// In case there are slide notes
|
||||
notesElement = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Look for notes defined in an aside element
|
||||
if( notesElement ) {
|
||||
messageData.notes = notesElement.innerHTML;
|
||||
messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
|
||||
}
|
||||
// Look for notes defined in an aside element
|
||||
if (notesElement) {
|
||||
messageData.notes = notesElement.innerHTML;
|
||||
messageData.markdown = typeof notesElement.getAttribute('data-markdown') === 'string';
|
||||
}
|
||||
|
||||
notesPopup.postMessage( JSON.stringify( messageData ), '*' );
|
||||
notesPopup.postMessage(JSON.stringify(messageData), '*');
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called once we have established a connection to the notes
|
||||
* window.
|
||||
*/
|
||||
function onConnected() {
|
||||
/**
|
||||
* Called once we have established a connection to the notes
|
||||
* window.
|
||||
*/
|
||||
function onConnected() {
|
||||
|
||||
// Monitor events that trigger a change in state
|
||||
Reveal.addEventListener( 'slidechanged', post );
|
||||
Reveal.addEventListener( 'fragmentshown', post );
|
||||
Reveal.addEventListener( 'fragmenthidden', post );
|
||||
Reveal.addEventListener( 'overviewhidden', post );
|
||||
Reveal.addEventListener( 'overviewshown', post );
|
||||
Reveal.addEventListener( 'paused', post );
|
||||
Reveal.addEventListener( 'resumed', post );
|
||||
// Monitor events that trigger a change in state
|
||||
Reveal.addEventListener('slidechanged', post);
|
||||
Reveal.addEventListener('fragmentshown', post);
|
||||
Reveal.addEventListener('fragmenthidden', post);
|
||||
Reveal.addEventListener('overviewhidden', post);
|
||||
Reveal.addEventListener('overviewshown', post);
|
||||
Reveal.addEventListener('paused', post);
|
||||
Reveal.addEventListener('resumed', post);
|
||||
|
||||
// Post the initial state
|
||||
post();
|
||||
// Post the initial state
|
||||
post();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
connect();
|
||||
connect();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if( !/receiver/i.test( window.location.search ) ) {
|
||||
if (!/receiver/i.test(window.location.search)) {
|
||||
|
||||
// If the there's a 'notes' query set, open directly
|
||||
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
|
||||
openNotes();
|
||||
}
|
||||
// If the there's a 'notes' query set, open directly
|
||||
if (window.location.search.match(/(\?|\&)notes/gi) !== null) {
|
||||
openNotes();
|
||||
}
|
||||
|
||||
// Open the notes when the 's' key is hit
|
||||
document.addEventListener( 'keydown', function( event ) {
|
||||
// Disregard the event if the target is editable or a
|
||||
// modifier is present
|
||||
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
|
||||
// Open the notes when the 's' key is hit
|
||||
document.addEventListener('keydown', function (event) {
|
||||
// Disregard the event if the target is editable or a
|
||||
// modifier is present
|
||||
if (document.querySelector(':focus') !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return;
|
||||
|
||||
// Disregard the event if keyboard is disabled
|
||||
if ( Reveal.getConfig().keyboard === false ) return;
|
||||
// Disregard the event if keyboard is disabled
|
||||
if (Reveal.getConfig().keyboard === false) return;
|
||||
|
||||
if( event.keyCode === 83 ) {
|
||||
event.preventDefault();
|
||||
openNotes();
|
||||
}
|
||||
}, false );
|
||||
if (event.keyCode === 83) {
|
||||
event.preventDefault();
|
||||
openNotes();
|
||||
}
|
||||
}, false);
|
||||
|
||||
// Show our keyboard shortcut in the reveal.js help overlay
|
||||
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
|
||||
// Show our keyboard shortcut in the reveal.js help overlay
|
||||
if (window.Reveal) Reveal.registerKeyboardShortcut('S', 'Speaker notes view');
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return { open: openNotes };
|
||||
return {open: openNotes};
|
||||
|
||||
})();
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
*/
|
||||
|
||||
// html2pdf.js
|
||||
var system = require( 'system' );
|
||||
var system = require('system');
|
||||
|
||||
var probePage = new WebPage();
|
||||
var printPage = new WebPage();
|
||||
@@ -18,52 +18,51 @@ var printPage = new WebPage();
|
||||
var inputFile = system.args[1] || 'index.html?print-pdf';
|
||||
var outputFile = system.args[2] || 'slides.pdf';
|
||||
|
||||
if( outputFile.match( /\.pdf$/gi ) === null ) {
|
||||
outputFile += '.pdf';
|
||||
if (outputFile.match(/\.pdf$/gi) === null) {
|
||||
outputFile += '.pdf';
|
||||
}
|
||||
|
||||
console.log( 'Export PDF: Reading reveal.js config [1/4]' );
|
||||
console.log('Export PDF: Reading reveal.js config [1/4]');
|
||||
|
||||
probePage.open( inputFile, function( status ) {
|
||||
probePage.open(inputFile, function (status) {
|
||||
|
||||
console.log( 'Export PDF: Preparing print layout [2/4]' );
|
||||
console.log('Export PDF: Preparing print layout [2/4]');
|
||||
|
||||
var config = probePage.evaluate( function() {
|
||||
return Reveal.getConfig();
|
||||
} );
|
||||
var config = probePage.evaluate(function () {
|
||||
return Reveal.getConfig();
|
||||
});
|
||||
|
||||
if( config ) {
|
||||
if (config) {
|
||||
|
||||
printPage.paperSize = {
|
||||
width: Math.floor( config.width * ( 1 + config.margin ) ),
|
||||
height: Math.floor( config.height * ( 1 + config.margin ) ),
|
||||
border: 0
|
||||
};
|
||||
printPage.paperSize = {
|
||||
width: Math.floor(config.width * (1 + config.margin)),
|
||||
height: Math.floor(config.height * (1 + config.margin)),
|
||||
border: 0
|
||||
};
|
||||
|
||||
printPage.open( inputFile, function( status ) {
|
||||
console.log( 'Export PDF: Preparing pdf [3/4]')
|
||||
printPage.evaluate(function() {
|
||||
Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener( 'pdf-ready', window.callPhantom );
|
||||
});
|
||||
} );
|
||||
printPage.open(inputFile, function (status) {
|
||||
console.log('Export PDF: Preparing pdf [3/4]')
|
||||
printPage.evaluate(function () {
|
||||
Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener('pdf-ready', window.callPhantom);
|
||||
});
|
||||
});
|
||||
|
||||
printPage.onCallback = function(data) {
|
||||
// For some reason we need to "jump the queue" for syntax highlighting to work.
|
||||
// See: http://stackoverflow.com/a/3580132/129269
|
||||
setTimeout(function() {
|
||||
console.log( 'Export PDF: Writing file [4/4]' );
|
||||
printPage.render( outputFile );
|
||||
console.log( 'Export PDF: Finished successfully!' );
|
||||
phantom.exit();
|
||||
}, 0);
|
||||
};
|
||||
}
|
||||
else {
|
||||
printPage.onCallback = function (data) {
|
||||
// For some reason we need to "jump the queue" for syntax highlighting to work.
|
||||
// See: http://stackoverflow.com/a/3580132/129269
|
||||
setTimeout(function () {
|
||||
console.log('Export PDF: Writing file [4/4]');
|
||||
printPage.render(outputFile);
|
||||
console.log('Export PDF: Finished successfully!');
|
||||
phantom.exit();
|
||||
}, 0);
|
||||
};
|
||||
} else {
|
||||
|
||||
console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' );
|
||||
console.log('Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.');
|
||||
phantom.exit(1);
|
||||
|
||||
}
|
||||
} );
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -5,202 +5,194 @@
|
||||
* By Jon Snyder <snyder.jon@gmail.com>, February 2013
|
||||
*/
|
||||
|
||||
var RevealSearch = (function() {
|
||||
var RevealSearch = (function () {
|
||||
|
||||
var matchedSlides;
|
||||
var currentMatchedIndex;
|
||||
var searchboxDirty;
|
||||
var myHilitor;
|
||||
var matchedSlides;
|
||||
var currentMatchedIndex;
|
||||
var searchboxDirty;
|
||||
var myHilitor;
|
||||
|
||||
// Original JavaScript code by Chirp Internet: www.chirp.com.au
|
||||
// Please acknowledge use of this code by including this header.
|
||||
// 2/2013 jon: modified regex to display any match, not restricted to word boundaries.
|
||||
|
||||
function Hilitor(id, tag)
|
||||
{
|
||||
function Hilitor(id, tag) {
|
||||
|
||||
var targetNode = document.getElementById(id) || document.body;
|
||||
var hiliteTag = tag || "EM";
|
||||
var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
|
||||
var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
|
||||
var wordColor = [];
|
||||
var colorIdx = 0;
|
||||
var matchRegex = "";
|
||||
var matchingSlides = [];
|
||||
var targetNode = document.getElementById(id) || document.body;
|
||||
var hiliteTag = tag || "EM";
|
||||
var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
|
||||
var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
|
||||
var wordColor = [];
|
||||
var colorIdx = 0;
|
||||
var matchRegex = "";
|
||||
var matchingSlides = [];
|
||||
|
||||
this.setRegex = function(input)
|
||||
{
|
||||
input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
|
||||
matchRegex = new RegExp("(" + input + ")","i");
|
||||
}
|
||||
|
||||
this.getRegex = function()
|
||||
{
|
||||
return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
|
||||
}
|
||||
|
||||
// recursively apply word highlighting
|
||||
this.hiliteWords = function(node)
|
||||
{
|
||||
if(node == undefined || !node) return;
|
||||
if(!matchRegex) return;
|
||||
if(skipTags.test(node.nodeName)) return;
|
||||
|
||||
if(node.hasChildNodes()) {
|
||||
for(var i=0; i < node.childNodes.length; i++)
|
||||
this.hiliteWords(node.childNodes[i]);
|
||||
}
|
||||
if(node.nodeType == 3) { // NODE_TEXT
|
||||
if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
|
||||
//find the slide's section element and save it in our list of matching slides
|
||||
var secnode = node;
|
||||
while (secnode != null && secnode.nodeName != 'SECTION') {
|
||||
secnode = secnode.parentNode;
|
||||
}
|
||||
|
||||
var slideIndex = Reveal.getIndices(secnode);
|
||||
var slidelen = matchingSlides.length;
|
||||
var alreadyAdded = false;
|
||||
for (var i=0; i < slidelen; i++) {
|
||||
if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) {
|
||||
alreadyAdded = true;
|
||||
}
|
||||
}
|
||||
if (! alreadyAdded) {
|
||||
matchingSlides.push(slideIndex);
|
||||
}
|
||||
|
||||
if(!wordColor[regs[0].toLowerCase()]) {
|
||||
wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
|
||||
this.setRegex = function (input) {
|
||||
input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
|
||||
matchRegex = new RegExp("(" + input + ")", "i");
|
||||
}
|
||||
|
||||
var match = document.createElement(hiliteTag);
|
||||
match.appendChild(document.createTextNode(regs[0]));
|
||||
match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
|
||||
match.style.fontStyle = "inherit";
|
||||
match.style.color = "#000";
|
||||
this.getRegex = function () {
|
||||
return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
|
||||
}
|
||||
|
||||
// recursively apply word highlighting
|
||||
this.hiliteWords = function (node) {
|
||||
if (node == undefined || !node) return;
|
||||
if (!matchRegex) return;
|
||||
if (skipTags.test(node.nodeName)) return;
|
||||
|
||||
if (node.hasChildNodes()) {
|
||||
for (var i = 0; i < node.childNodes.length; i++)
|
||||
this.hiliteWords(node.childNodes[i]);
|
||||
}
|
||||
if (node.nodeType == 3) { // NODE_TEXT
|
||||
if ((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
|
||||
//find the slide's section element and save it in our list of matching slides
|
||||
var secnode = node;
|
||||
while (secnode != null && secnode.nodeName != 'SECTION') {
|
||||
secnode = secnode.parentNode;
|
||||
}
|
||||
|
||||
var slideIndex = Reveal.getIndices(secnode);
|
||||
var slidelen = matchingSlides.length;
|
||||
var alreadyAdded = false;
|
||||
for (var i = 0; i < slidelen; i++) {
|
||||
if ((matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v)) {
|
||||
alreadyAdded = true;
|
||||
}
|
||||
}
|
||||
if (!alreadyAdded) {
|
||||
matchingSlides.push(slideIndex);
|
||||
}
|
||||
|
||||
if (!wordColor[regs[0].toLowerCase()]) {
|
||||
wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
|
||||
}
|
||||
|
||||
var match = document.createElement(hiliteTag);
|
||||
match.appendChild(document.createTextNode(regs[0]));
|
||||
match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
|
||||
match.style.fontStyle = "inherit";
|
||||
match.style.color = "#000";
|
||||
|
||||
var after = node.splitText(regs.index);
|
||||
after.nodeValue = after.nodeValue.substring(regs[0].length);
|
||||
node.parentNode.insertBefore(match, after);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// remove highlighting
|
||||
this.remove = function () {
|
||||
var arr = document.getElementsByTagName(hiliteTag);
|
||||
while (arr.length && (el = arr[0])) {
|
||||
el.parentNode.replaceChild(el.firstChild, el);
|
||||
}
|
||||
};
|
||||
|
||||
// start highlighting at target node
|
||||
this.apply = function (input) {
|
||||
if (input == undefined || !input) return;
|
||||
this.remove();
|
||||
this.setRegex(input);
|
||||
this.hiliteWords(targetNode);
|
||||
return matchingSlides;
|
||||
};
|
||||
|
||||
var after = node.splitText(regs.index);
|
||||
after.nodeValue = after.nodeValue.substring(regs[0].length);
|
||||
node.parentNode.insertBefore(match, after);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// remove highlighting
|
||||
this.remove = function()
|
||||
{
|
||||
var arr = document.getElementsByTagName(hiliteTag);
|
||||
while(arr.length && (el = arr[0])) {
|
||||
el.parentNode.replaceChild(el.firstChild, el);
|
||||
function openSearch() {
|
||||
//ensure the search term input dialog is visible and has focus:
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
var inputbox = document.getElementById("searchinput");
|
||||
inputboxdiv.style.display = "inline";
|
||||
inputbox.focus();
|
||||
inputbox.select();
|
||||
}
|
||||
};
|
||||
|
||||
// start highlighting at target node
|
||||
this.apply = function(input)
|
||||
{
|
||||
if(input == undefined || !input) return;
|
||||
this.remove();
|
||||
this.setRegex(input);
|
||||
this.hiliteWords(targetNode);
|
||||
return matchingSlides;
|
||||
};
|
||||
function closeSearch() {
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
inputboxdiv.style.display = "none";
|
||||
if (myHilitor) myHilitor.remove();
|
||||
}
|
||||
|
||||
}
|
||||
function toggleSearch() {
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
if (inputboxdiv.style.display !== "inline") {
|
||||
openSearch();
|
||||
} else {
|
||||
closeSearch();
|
||||
}
|
||||
}
|
||||
|
||||
function openSearch() {
|
||||
//ensure the search term input dialog is visible and has focus:
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
var inputbox = document.getElementById("searchinput");
|
||||
inputboxdiv.style.display = "inline";
|
||||
inputbox.focus();
|
||||
inputbox.select();
|
||||
}
|
||||
function doSearch() {
|
||||
//if there's been a change in the search term, perform a new search:
|
||||
if (searchboxDirty) {
|
||||
var searchstring = document.getElementById("searchinput").value;
|
||||
|
||||
function closeSearch() {
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
inputboxdiv.style.display = "none";
|
||||
if(myHilitor) myHilitor.remove();
|
||||
}
|
||||
if (searchstring === '') {
|
||||
if (myHilitor) myHilitor.remove();
|
||||
matchedSlides = null;
|
||||
} else {
|
||||
//find the keyword amongst the slides
|
||||
myHilitor = new Hilitor("slidecontent");
|
||||
matchedSlides = myHilitor.apply(searchstring);
|
||||
currentMatchedIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSearch() {
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
if (inputboxdiv.style.display !== "inline") {
|
||||
openSearch();
|
||||
}
|
||||
else {
|
||||
closeSearch();
|
||||
}
|
||||
}
|
||||
if (matchedSlides) {
|
||||
//navigate to the next slide that has the keyword, wrapping to the first if necessary
|
||||
if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
|
||||
currentMatchedIndex = 0;
|
||||
}
|
||||
if (matchedSlides.length > currentMatchedIndex) {
|
||||
Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
|
||||
currentMatchedIndex++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function doSearch() {
|
||||
//if there's been a change in the search term, perform a new search:
|
||||
if (searchboxDirty) {
|
||||
var searchstring = document.getElementById("searchinput").value;
|
||||
var dom = {};
|
||||
dom.wrapper = document.querySelector('.reveal');
|
||||
|
||||
if (searchstring === '') {
|
||||
if(myHilitor) myHilitor.remove();
|
||||
matchedSlides = null;
|
||||
}
|
||||
else {
|
||||
//find the keyword amongst the slides
|
||||
myHilitor = new Hilitor("slidecontent");
|
||||
matchedSlides = myHilitor.apply(searchstring);
|
||||
currentMatchedIndex = 0;
|
||||
}
|
||||
}
|
||||
if (!dom.wrapper.querySelector('.searchbox')) {
|
||||
var searchElement = document.createElement('div');
|
||||
searchElement.id = "searchinputdiv";
|
||||
searchElement.classList.add('searchdiv');
|
||||
searchElement.style.position = 'absolute';
|
||||
searchElement.style.top = '10px';
|
||||
searchElement.style.right = '10px';
|
||||
searchElement.style.zIndex = 10;
|
||||
//embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
|
||||
searchElement.innerHTML = '<span><input type="search" id="searchinput" class="searchinput" style="vertical-align: top;"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJiSURBVHjatFZNaxNBGH5md+Mmu92NVdKDRipSAyqCghgQD4L4cRe86UUtAQ+eFCxoa4/25EXBFi8eBE+eRPoDhB6KgiiixdAPCEkx2pjvTXadd9yNsflwuyUDD/O+u8PzzDPvzOwyx3EwyCZhwG3gAkp7MnpjgbopjsltcD4gjuXZZKeAR348MYLYTm3LzOs/y3j3JTfZxgXWXmTuwPHIc4VmoOmv5IrI53+AO2DdHLjkDWQ3GoEEVFXtXQOvkSnPWcyUceviLhwbDYv8/XIVj97kse7TodLvZXxYxrPUHkQ1ufXs3FEdybEIxucySOesoNvUgWU1cP3MkCBfTFdw9fGaAMVmRELq7LBw2Q3/FaAxxWIRpw+ZIr/7IouPqzUBiqmdHAv7EuhRAwf1er2Vy4x1jW3b2d5Jfvu5IPp7l2LYbcgCFFNb+FoJ7oBqEAqFMPNqFcmEgVMJDfMT+1tvN0pNjERlMS6QA5pFOKxiKVPFhakPeL3It+WGJUDxt2wFR+JhzI7v5ctkd8DXOZAkCYYxhO+lKm4+Xfqz/rIixBuNBl7eOYzkQQNzqX249mRl6zUgEcYkaJrGhUwBinVdh6IouPzwE6/DL5w4oLkH8y981aDf+uq6hlKpJESiUdNfDZi7/ehG9K6KfiA3pml0PLcsq+cSMTj2NL9ukc4UOmz7AZ3+crkC4mHujFvXNaMFB3bEr8xPS6p5O+jXxq4VZtaen7/PwzrntjcLUE0iHPS1Ud1cdiEJl/8WivZk0wXd7zWOMkeF8s0CcAmkNrC2nvXZDbbbN73ccYnZoH9bfgswAFzAe9/h3dbKAAAAAElFTkSuQmCC" id="searchbutton" class="searchicon" style="vertical-align: top; margin-top: -1px;"/></span>';
|
||||
dom.wrapper.appendChild(searchElement);
|
||||
}
|
||||
|
||||
if (matchedSlides) {
|
||||
//navigate to the next slide that has the keyword, wrapping to the first if necessary
|
||||
if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
|
||||
currentMatchedIndex = 0;
|
||||
}
|
||||
if (matchedSlides.length > currentMatchedIndex) {
|
||||
Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
|
||||
currentMatchedIndex++;
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById("searchbutton").addEventListener('click', function (event) {
|
||||
doSearch();
|
||||
}, false);
|
||||
|
||||
var dom = {};
|
||||
dom.wrapper = document.querySelector( '.reveal' );
|
||||
document.getElementById("searchinput").addEventListener('keyup', function (event) {
|
||||
switch (event.keyCode) {
|
||||
case 13:
|
||||
event.preventDefault();
|
||||
doSearch();
|
||||
searchboxDirty = false;
|
||||
break;
|
||||
default:
|
||||
searchboxDirty = true;
|
||||
}
|
||||
}, false);
|
||||
|
||||
if( !dom.wrapper.querySelector( '.searchbox' ) ) {
|
||||
var searchElement = document.createElement( 'div' );
|
||||
searchElement.id = "searchinputdiv";
|
||||
searchElement.classList.add( 'searchdiv' );
|
||||
searchElement.style.position = 'absolute';
|
||||
searchElement.style.top = '10px';
|
||||
searchElement.style.right = '10px';
|
||||
searchElement.style.zIndex = 10;
|
||||
//embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
|
||||
searchElement.innerHTML = '<span><input type="search" id="searchinput" class="searchinput" style="vertical-align: top;"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJiSURBVHjatFZNaxNBGH5md+Mmu92NVdKDRipSAyqCghgQD4L4cRe86UUtAQ+eFCxoa4/25EXBFi8eBE+eRPoDhB6KgiiixdAPCEkx2pjvTXadd9yNsflwuyUDD/O+u8PzzDPvzOwyx3EwyCZhwG3gAkp7MnpjgbopjsltcD4gjuXZZKeAR348MYLYTm3LzOs/y3j3JTfZxgXWXmTuwPHIc4VmoOmv5IrI53+AO2DdHLjkDWQ3GoEEVFXtXQOvkSnPWcyUceviLhwbDYv8/XIVj97kse7TodLvZXxYxrPUHkQ1ufXs3FEdybEIxucySOesoNvUgWU1cP3MkCBfTFdw9fGaAMVmRELq7LBw2Q3/FaAxxWIRpw+ZIr/7IouPqzUBiqmdHAv7EuhRAwf1er2Vy4x1jW3b2d5Jfvu5IPp7l2LYbcgCFFNb+FoJ7oBqEAqFMPNqFcmEgVMJDfMT+1tvN0pNjERlMS6QA5pFOKxiKVPFhakPeL3It+WGJUDxt2wFR+JhzI7v5ctkd8DXOZAkCYYxhO+lKm4+Xfqz/rIixBuNBl7eOYzkQQNzqX249mRl6zUgEcYkaJrGhUwBinVdh6IouPzwE6/DL5w4oLkH8y981aDf+uq6hlKpJESiUdNfDZi7/ehG9K6KfiA3pml0PLcsq+cSMTj2NL9ukc4UOmz7AZ3+crkC4mHujFvXNaMFB3bEr8xPS6p5O+jXxq4VZtaen7/PwzrntjcLUE0iHPS1Ud1cdiEJl/8WivZk0wXd7zWOMkeF8s0CcAmkNrC2nvXZDbbbN73ccYnZoH9bfgswAFzAe9/h3dbKAAAAAElFTkSuQmCC" id="searchbutton" class="searchicon" style="vertical-align: top; margin-top: -1px;"/></span>';
|
||||
dom.wrapper.appendChild( searchElement );
|
||||
}
|
||||
|
||||
document.getElementById("searchbutton").addEventListener( 'click', function(event) {
|
||||
doSearch();
|
||||
}, false );
|
||||
|
||||
document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
|
||||
switch (event.keyCode) {
|
||||
case 13:
|
||||
event.preventDefault();
|
||||
doSearch();
|
||||
searchboxDirty = false;
|
||||
break;
|
||||
default:
|
||||
searchboxDirty = true;
|
||||
}
|
||||
}, false );
|
||||
|
||||
document.addEventListener( 'keydown', function( event ) {
|
||||
if( event.key == "F" && (event.ctrlKey || event.metaKey) ) {//Control+Shift+f
|
||||
event.preventDefault();
|
||||
toggleSearch();
|
||||
}
|
||||
}, false );
|
||||
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' );
|
||||
closeSearch();
|
||||
return { open: openSearch };
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key == "F" && (event.ctrlKey || event.metaKey)) {//Control+Shift+f
|
||||
event.preventDefault();
|
||||
toggleSearch();
|
||||
}
|
||||
}, false);
|
||||
if (window.Reveal) Reveal.registerKeyboardShortcut('Ctrl-Shift-F', 'Search');
|
||||
closeSearch();
|
||||
return {open: openSearch};
|
||||
})();
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
// Custom reveal.js integration
|
||||
(function(){
|
||||
var revealElement = document.querySelector( '.reveal' );
|
||||
if( revealElement ) {
|
||||
(function () {
|
||||
var revealElement = document.querySelector('.reveal');
|
||||
if (revealElement) {
|
||||
|
||||
revealElement.addEventListener( 'mousedown', function( event ) {
|
||||
var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
|
||||
revealElement.addEventListener('mousedown', function (event) {
|
||||
var defaultModifier = /Linux/.test(window.navigator.platform) ? 'ctrl' : 'alt';
|
||||
|
||||
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
|
||||
var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 );
|
||||
var modifier = (Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier) + 'Key';
|
||||
var zoomLevel = (Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2);
|
||||
|
||||
if( event[ modifier ] && !Reveal.isOverview() ) {
|
||||
event.preventDefault();
|
||||
if (event[modifier] && !Reveal.isOverview()) {
|
||||
event.preventDefault();
|
||||
|
||||
zoom.to({
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
scale: zoomLevel,
|
||||
pan: false
|
||||
});
|
||||
}
|
||||
} );
|
||||
zoom.to({
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
scale: zoomLevel,
|
||||
pan: false
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
/*!
|
||||
@@ -31,242 +31,243 @@
|
||||
*
|
||||
* Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
var zoom = (function(){
|
||||
var zoom = (function () {
|
||||
|
||||
// The current zoom level (scale)
|
||||
var level = 1;
|
||||
// The current zoom level (scale)
|
||||
var level = 1;
|
||||
|
||||
// The current mouse position, used for panning
|
||||
var mouseX = 0,
|
||||
mouseY = 0;
|
||||
// The current mouse position, used for panning
|
||||
var mouseX = 0,
|
||||
mouseY = 0;
|
||||
|
||||
// Timeout before pan is activated
|
||||
var panEngageTimeout = -1,
|
||||
panUpdateInterval = -1;
|
||||
// Timeout before pan is activated
|
||||
var panEngageTimeout = -1,
|
||||
panUpdateInterval = -1;
|
||||
|
||||
// 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;
|
||||
// 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';
|
||||
}
|
||||
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();
|
||||
}
|
||||
} );
|
||||
// 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;
|
||||
}
|
||||
} );
|
||||
// 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, prefers the use of CSS3
|
||||
* transforms but falls back on zoom for IE.
|
||||
*
|
||||
* @param {Object} rect
|
||||
* @param {Number} scale
|
||||
*/
|
||||
function magnify( rect, scale ) {
|
||||
/**
|
||||
* Applies the CSS required to zoom in, prefers the use of CSS3
|
||||
* transforms but falls back on zoom for IE.
|
||||
*
|
||||
* @param {Object} rect
|
||||
* @param {Number} scale
|
||||
*/
|
||||
function magnify(rect, scale) {
|
||||
|
||||
var scrollOffset = getScrollOffset();
|
||||
var scrollOffset = getScrollOffset();
|
||||
|
||||
// Ensure a width/height is set
|
||||
rect.width = rect.width || 1;
|
||||
rect.height = rect.height || 1;
|
||||
// Ensure a width/height is set
|
||||
rect.width = rect.width || 1;
|
||||
rect.height = rect.height || 1;
|
||||
|
||||
// Center the rect within the zoomed viewport
|
||||
rect.x -= ( window.innerWidth - ( rect.width * scale ) ) / 2;
|
||||
rect.y -= ( window.innerHeight - ( rect.height * scale ) ) / 2;
|
||||
// Center the rect within the zoomed viewport
|
||||
rect.x -= (window.innerWidth - (rect.width * scale)) / 2;
|
||||
rect.y -= (window.innerHeight - (rect.height * scale)) / 2;
|
||||
|
||||
if( supportsTransforms ) {
|
||||
// Reset
|
||||
if( scale === 1 ) {
|
||||
document.body.style.transform = '';
|
||||
document.body.style.OTransform = '';
|
||||
document.body.style.msTransform = '';
|
||||
document.body.style.MozTransform = '';
|
||||
document.body.style.WebkitTransform = '';
|
||||
}
|
||||
// Scale
|
||||
else {
|
||||
var origin = scrollOffset.x +'px '+ scrollOffset.y +'px',
|
||||
transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
|
||||
if (supportsTransforms) {
|
||||
// Reset
|
||||
if (scale === 1) {
|
||||
document.body.style.transform = '';
|
||||
document.body.style.OTransform = '';
|
||||
document.body.style.msTransform = '';
|
||||
document.body.style.MozTransform = '';
|
||||
document.body.style.WebkitTransform = '';
|
||||
}
|
||||
// Scale
|
||||
else {
|
||||
var origin = scrollOffset.x + 'px ' + scrollOffset.y + 'px',
|
||||
transform = 'translate(' + -rect.x + 'px,' + -rect.y + '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.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
|
||||
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 = '';
|
||||
}
|
||||
// Scale
|
||||
else {
|
||||
document.body.style.position = 'relative';
|
||||
document.body.style.left = ( - ( scrollOffset.x + rect.x ) / scale ) + 'px';
|
||||
document.body.style.top = ( - ( scrollOffset.y + rect.y ) / scale ) + 'px';
|
||||
document.body.style.width = ( scale * 100 ) + '%';
|
||||
document.body.style.height = ( scale * 100 ) + '%';
|
||||
document.body.style.zoom = scale;
|
||||
}
|
||||
}
|
||||
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
|
||||
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 = '';
|
||||
}
|
||||
// Scale
|
||||
else {
|
||||
document.body.style.position = 'relative';
|
||||
document.body.style.left = (-(scrollOffset.x + rect.x) / scale) + 'px';
|
||||
document.body.style.top = (-(scrollOffset.y + rect.y) / scale) + 'px';
|
||||
document.body.style.width = (scale * 100) + '%';
|
||||
document.body.style.height = (scale * 100) + '%';
|
||||
document.body.style.zoom = scale;
|
||||
}
|
||||
}
|
||||
|
||||
level = scale;
|
||||
level = scale;
|
||||
|
||||
if( document.documentElement.classList ) {
|
||||
if( level !== 1 ) {
|
||||
document.documentElement.classList.add( 'zoomed' );
|
||||
}
|
||||
else {
|
||||
document.documentElement.classList.remove( 'zoomed' );
|
||||
}
|
||||
}
|
||||
}
|
||||
if (document.documentElement.classList) {
|
||||
if (level !== 1) {
|
||||
document.documentElement.classList.add('zoomed');
|
||||
} else {
|
||||
document.documentElement.classList.remove('zoomed');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
/**
|
||||
* 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 ) );
|
||||
}
|
||||
// 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 );
|
||||
}
|
||||
}
|
||||
// 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.pageYOffset
|
||||
}
|
||||
}
|
||||
function getScrollOffset() {
|
||||
return {
|
||||
x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
|
||||
y: window.scrollY !== undefined ? window.scrollY : window.pageYOffset
|
||||
}
|
||||
}
|
||||
|
||||
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 ) {
|
||||
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;
|
||||
// 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;
|
||||
var bounds = options.element.getBoundingClientRect();
|
||||
// If an element is set, that takes precedence
|
||||
if (!!options.element) {
|
||||
// Space around the zoomed in element to leave on screen
|
||||
var padding = 20;
|
||||
var bounds = options.element.getBoundingClientRect();
|
||||
|
||||
options.x = bounds.left - padding;
|
||||
options.y = bounds.top - padding;
|
||||
options.width = bounds.width + ( padding * 2 );
|
||||
options.height = bounds.height + ( padding * 2 );
|
||||
}
|
||||
options.x = bounds.left - padding;
|
||||
options.y = bounds.top - padding;
|
||||
options.width = bounds.width + (padding * 2);
|
||||
options.height = bounds.height + (padding * 2);
|
||||
}
|
||||
|
||||
// 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 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;
|
||||
if (options.scale > 1) {
|
||||
options.x *= options.scale;
|
||||
options.y *= options.scale;
|
||||
|
||||
magnify( options, options.scale );
|
||||
magnify(options, options.scale);
|
||||
|
||||
if( options.pan !== false ) {
|
||||
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 );
|
||||
// Wait with engaging panning as it may conflict with the
|
||||
// zoom transition
|
||||
panEngageTimeout = setTimeout(function () {
|
||||
panUpdateInterval = setInterval(pan, 1000 / 60);
|
||||
}, 800);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets the document zoom state to its default.
|
||||
*/
|
||||
out: function() {
|
||||
clearTimeout( panEngageTimeout );
|
||||
clearInterval( panUpdateInterval );
|
||||
/**
|
||||
* Resets the document zoom state to its default.
|
||||
*/
|
||||
out: function () {
|
||||
clearTimeout(panEngageTimeout);
|
||||
clearInterval(panUpdateInterval);
|
||||
|
||||
magnify( { x: 0, y: 0 }, 1 );
|
||||
magnify({x: 0, y: 0}, 1);
|
||||
|
||||
level = 1;
|
||||
},
|
||||
level = 1;
|
||||
},
|
||||
|
||||
// Alias
|
||||
magnify: function( options ) { this.to( options ) },
|
||||
reset: function() { this.out() },
|
||||
// Alias
|
||||
magnify: function (options) {
|
||||
this.to(options)
|
||||
},
|
||||
reset: function () {
|
||||
this.out()
|
||||
},
|
||||
|
||||
zoomLevel: function() {
|
||||
return level;
|
||||
}
|
||||
}
|
||||
zoomLevel: function () {
|
||||
return level;
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user