GistのMarkdownで作るプレゼンテーション

presentation.js

var $bgWindow = $('<div/>');
$bgWindow.css({
	'background-color': '#222',
	'opacity': '.95',
	'position': 'fixed',
	'left': 0,
	'top': 0,
	'width': '100%',
	'height': '100%',
	'z-index': 999
});
$('body').append($bgWindow);
 
 
 
 
var $div = $('<div id="slideWindow"/>');
$div.css({
	'margin': '30px',
	'position': 'absolute',
	'left': 0,
	'top': 0,
	'z-index': 9999,
	'width': $('html').width() - 60,
	'height': $('html').height() - 60
});
 
 
var $div_wrap = $('<div id="slideWindow_wrap"/>');
$div_wrap.css({
	'width': '100%',
	'height': '100%'
});
 
$div.append($div_wrap);
 
 
$('h3').each(function(index){
 
	var css = {
		'width': '100%',
		'height': '100%',
		'background-color': '#fff'
	};
 
	if (index == 0) {
 
		var $div1 = $('<div class="slideView markdown-body"/>');
		$div1.css(css);
 
		var $div1_inset = $('<div class="inset"/>');
		$div1_inset.css({'padding': '0 3%', 'font-size': '3em'});
		$div1.append($div1_inset);
 
		// main
		var $h1 = $('<h1/>');
		$h1.css({
			'border-bottom': 'none'
		});
		$h1.html($(this).text());
		$div1_inset.append($h1);
 
		// main
		var html = $(this).nextUntil('h3').clone();
		var $html = $(html);
		$html.find('img').css({'width': '15%', 'position': 'absolute','right': 0, 'bottom': 0});
		$div1_inset.append($html);
 
		$div_wrap.append($div1);
	} else {
 
		var $div2 = $('<div class="slideView markdown-body"/>');
		$div2.css(css);
 
		var $div2_inset = $('<div class="inset"/>');
		$div2_inset.css({'padding': '0 3%', 'font-size': '1.8em', 'line-height': '1.5'});
		$div2.append($div2_inset);
 
		// title
		var $h3 = $('<h3/>');
		$h3.css({'font-size': '.8em'});
		$h3.html($(this).text());
		$div2_inset.append($h3);
 
		// main
		var html = $(this).nextUntil('h3').clone();
		$div2_inset.append(html);
 
		$div_wrap.append($div2);
 
	}
 
});
$('body').append($div);
 
$('.js-task-list-field').remove();
 
 
var slide = {count: 0};
$('.slideView').css({'display': 'none'});
$('.slideView').eq(slide.count).css({'display': 'block'});
 
var $slideCount = $('<div id="count"/>');
var len = $('.slideView').length;
 
$slideCount.html('<span id="slideCount">'+(slide.count+1)+'</span> / <span>'+len+'</span>');
$slideCount.css({'position':'absolute', 'right': '60px', 'top': '50px', 'z-index': 10000, 'color': '#ccc', 'font-size': '2em'});
$('body').append($slideCount);
 
$(window).keyup(function(e){
	if((e.keyCode == 13 || e.keyCode == 37) && slide.count > 0) {
		slide.count--;
		$('#slideCount').text(slide.count+1);
		$('.slideView').css({'display': 'none'});
		$('.slideView').eq(slide.count).css({'display': 'block'});
	}
	if((e.keyCode == 17 || e.keyCode == 39) && slide.count < len-1) {
		slide.count++;
		$('#slideCount').text(slide.count+1);
		$('.slideView').css({'display': 'none'});
		$('.slideView').eq(slide.count).css({'display': 'block'});
	}
});