very simple presentation with markdown
ansuz
8 years ago
parent
c25ed349e2
commit
5a3da11c40
@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||
<style>
|
||||
html, body{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#bar {
|
||||
height: 40px;
|
||||
}
|
||||
textarea{
|
||||
width: 100%;
|
||||
height: calc(100vh - 40px);
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
|
||||
font-size: 18px;
|
||||
background-color: #073642;
|
||||
color: #839496;
|
||||
|
||||
overflow-x: hidden;
|
||||
|
||||
/* disallow textarea resizes */
|
||||
resize: none;
|
||||
}
|
||||
textarea[disabled] {
|
||||
background-color: #275662;
|
||||
color: #637476;
|
||||
}
|
||||
|
||||
#modal {
|
||||
display: none;
|
||||
}
|
||||
#modal.shown {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 100;
|
||||
background-color: black;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#content h1, h2, h3, h4, h5, h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#content p, #content ul, #content ol{
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="bar">
|
||||
<button id="present">presentation mode
|
||||
</button>
|
||||
</div>
|
||||
<textarea></textarea>
|
||||
<div id="modal">
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<div id="nope"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,118 @@
|
||||
define([
|
||||
'/api/config?cb=' + Math.random().toString(16).substring(2),
|
||||
'/bower_components/chainpad-netflux/chainpad-netflux.js',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/bower_components/textpatcher/TextPatcher.amd.js',
|
||||
'/common/cryptpad-common.js',
|
||||
'/slide/slide.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js',
|
||||
'/customize/pad.js'
|
||||
], function (Config, Realtime, Crypto, TextPatcher, Cryptpad, Slide) {
|
||||
var $ = window.jQuery;
|
||||
|
||||
/*
|
||||
TODO
|
||||
* patch in changes using DiffDOM
|
||||
* predraw some things in case they use external assets
|
||||
* strip out script tags?
|
||||
* better CSS
|
||||
* use codemirror instead of a text editor
|
||||
* add ability to link to a rendered slide
|
||||
* ui hint for escaping presentation mode
|
||||
*/
|
||||
|
||||
var secret = Cryptpad.getSecrets();
|
||||
|
||||
var module = window.APP = {
|
||||
TextPatcher: TextPatcher,
|
||||
Slide: Slide,
|
||||
};
|
||||
|
||||
var userName = module.userName = Crypto.rand64(8);
|
||||
|
||||
var initializing = true;
|
||||
var $textarea = $('textarea');
|
||||
|
||||
var $modal = $('#modal');
|
||||
var $content = $('#content');
|
||||
Slide.setModal($modal, $content);
|
||||
|
||||
var $present = $('#present').click(function () {
|
||||
Slide.show(true, $textarea.val());
|
||||
Cryptpad.log("Hit ESC to exit presentation mode");
|
||||
});
|
||||
|
||||
var config = module.config = {
|
||||
initialState: '',
|
||||
websocketURL: Config.websocketURL,
|
||||
channel: secret.channel,
|
||||
crypto: Crypto.createEncryptor(secret.key),
|
||||
};
|
||||
|
||||
var setEditable = function (bool) { $textarea.attr('disabled', !bool); };
|
||||
var canonicalize = function (text) { return text.replace(/\r\n/g, '\n'); };
|
||||
|
||||
setEditable(false);
|
||||
|
||||
var onInit = config.onInit = function (info) {
|
||||
window.location.hash = info.channel + secret.key;
|
||||
$(window).on('hashchange', function() {
|
||||
window.location.reload();
|
||||
});
|
||||
};
|
||||
|
||||
var onRemote = config.onRemote = function (info) {
|
||||
if (initializing) { return; }
|
||||
var userDoc = module.realtime.getUserDoc();
|
||||
var content = canonicalize($textarea.val());
|
||||
|
||||
var op = TextPatcher.diff(content, userDoc);
|
||||
var elem = $textarea[0];
|
||||
|
||||
var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
|
||||
return TextPatcher.transformCursor(elem[attr], op);
|
||||
});
|
||||
|
||||
$textarea.val(userDoc);
|
||||
elem.selectionStart = selects[0];
|
||||
elem.selectionEnd = selects[1];
|
||||
|
||||
Slide.update(content);
|
||||
};
|
||||
|
||||
var onLocal = config.onLocal = function () {
|
||||
if (initializing) { return; }
|
||||
var content = canonicalize($textarea.val());
|
||||
module.patchText(content);
|
||||
Slide.update(content);
|
||||
};
|
||||
|
||||
var onReady = config.onReady = function (info) {
|
||||
var realtime = module.realtime = info.realtime;
|
||||
module.patchText = TextPatcher.create({
|
||||
realtime: realtime
|
||||
});
|
||||
|
||||
var content = canonicalize(realtime.getUserDoc());
|
||||
$textarea.val(content);
|
||||
|
||||
Slide.update(content);
|
||||
|
||||
setEditable(true);
|
||||
initializing = false;
|
||||
};
|
||||
|
||||
var onAbort = config.onAbort = function (info) {
|
||||
$textarea.attr('disabled', true);
|
||||
window.alert("Server Connection Lost");
|
||||
};
|
||||
|
||||
var rt = Realtime.start(config);
|
||||
|
||||
['cut', 'paste', 'change', 'keyup', 'keydown', 'select', 'textInput']
|
||||
.forEach(function (evt) {
|
||||
$textarea.on(evt, onLocal);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
@ -0,0 +1,77 @@
|
||||
define([
|
||||
'/bower_components/marked/marked.min.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js',
|
||||
],function (Marked) {
|
||||
var $ = window.jQuery;
|
||||
|
||||
var truthy = function (x) { return x; };
|
||||
|
||||
var Slide = {
|
||||
index: 0,
|
||||
lastIndex: 0,
|
||||
content: [],
|
||||
};
|
||||
var $modal;
|
||||
var $content;
|
||||
Slide.setModal = function ($m, $c) {
|
||||
$modal = Slide.$modal = $m;
|
||||
$content = Slide.$content = $c;
|
||||
};
|
||||
var draw = Slide.draw = function (i) {
|
||||
console.log("Trying to draw slide #%s", i);
|
||||
if (typeof(Slide.content[i]) !== 'string') { return; }
|
||||
|
||||
var c = Slide.content[i];
|
||||
console.log(c);
|
||||
$content.html(Marked(c));
|
||||
};
|
||||
|
||||
var show = Slide.show = function (bool, content) {
|
||||
Slide.shown = bool;
|
||||
if (bool) {
|
||||
Slide.update(content);
|
||||
Slide.draw(Slide.index);
|
||||
$modal.addClass('shown');
|
||||
return;
|
||||
}
|
||||
$modal.removeClass('shown');
|
||||
};
|
||||
|
||||
var update = Slide.update = function (content) {
|
||||
if (!Slide.shown) { return; }
|
||||
console.log(content);
|
||||
Slide.content = content.split(/\n\-\-\-\n/).filter(truthy);
|
||||
draw(Slide.index);
|
||||
};
|
||||
|
||||
var left = Slide.left = function () {
|
||||
console.log('left');
|
||||
var i = Slide.index = Math.max(0, Slide.index - 1);
|
||||
Slide.draw(i);
|
||||
};
|
||||
|
||||
var right = Slide.right = function () {
|
||||
console.log('right');
|
||||
var i = Slide.index = Math.min(Slide.content.length, Slide.index + 1);
|
||||
Slide.draw(i);
|
||||
};
|
||||
|
||||
$(document).on('keyup', function (e) {
|
||||
if (!Slide.shown) { return; }
|
||||
switch(e.which) {
|
||||
case 37:
|
||||
Slide.left();
|
||||
break;
|
||||
case 39: // right
|
||||
Slide.right();
|
||||
break;
|
||||
case 27: // esc
|
||||
show(false);
|
||||
break;
|
||||
default:
|
||||
console.log(e.which);
|
||||
}
|
||||
});
|
||||
|
||||
return Slide;
|
||||
});
|
||||
Loading…
Reference in New Issue