...
 
Commits (2)
......@@ -15,10 +15,5 @@ Notes
* PDFjs
* What for images ? (leaflet ?!)
* Make saveable ?!
Two samples:
* Separate a "canvas" example (more like classic videowiki)
* "compact player/editor" sample
......@@ -3,38 +3,99 @@ body {
padding: 0;
overflow: hidden;
}
#content {
#frame {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
#player {
position: absolute;
left: 0; right: 0;
width: 100%; height: 100%;
z-index: 1;
#content {
width: 100%;
height: 100%;
}
#buttons {
position: absolute;
left:20px; bottom: 10px;
z-index: 10;
}
#player {}
video {
width: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0;
}
#editor {
position: relative;
}
#editorbg {
position: absolute;
left: 0; right: 0;
width: 100%; height: 100%;
z-index: 10;
left: 0; top: 0; right: 0; bottom: 0;
background: hsla(0, 0%, 66%, 0.5);
}
.CodeMirror {
position: absolute;
left: 0; right: 0;
width: 100%; height: 100%;
background: none;
font-size: 12px;
}
.CodeMirror span {
/* Set height, width, borders, and global font properties here */
/*background: #EEE;*/
}
/*.CodeMirror span {*/
/* background: white;*/
/*}*/
.cm-cctimecode {
color: purple;
}
\ No newline at end of file
}
/* SPLITSCREEN */
#content.splitscreen #editor {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
}
#content.splitscreen #player {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
}
/* OVERLAY */
#content.overlay #editor {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
#content.overlay #player {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>collage code</title>
<title>cceditor</title>
<meta charset="utf-8">
<!-- CODE MIRROR -->
<link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="../node_modules/codemirror/addon/fold/foldgutter.css" />
<script src="../node_modules/codemirror/lib/codemirror.js"></script>
......@@ -11,40 +13,22 @@
<script src="../node_modules/codemirror/addon/fold/foldcode.js"></script>
<script src="../node_modules/codemirror/addon/fold/foldgutter.js"></script>
<script src="../node_modules/codemirror/addon/fold/markdown-fold.js"></script>
<link rel="stylesheet" href="../styles.css" />
<link rel="stylesheet" href="editor.css" />
</head>
<body>
<div id="content">
<div id="player"></div>
<div id="editor">
<textarea id="static">
<https://www.youtube.com/watch?v=Pb0iAFkiEv4>
[link](https://codemirror.net/doc/manual.html#api)
<http://sicv.activearchives.org/share/myfatherisavandal.jpg>
[movie](http://sicv.activearchives.org/share/output-3.mp4)
<http://sicv.activearchives.org/share/visual_vocabularies.pdf>
So imagine typing over this to annotate it now.
Cool eh?
00:00:01
00:00:30
00:01:00
</textarea>
<div id="frame">
<div id="content" class="splitscreen">
<div id="player" class="cell"></div>
<div id="editor" class="cell">
<div id="editorbg"></div>
<textarea id="static"></textarea>
</div>
</div>
<div id="buttons">
<button id="save">save</button><button id="toggle">m</button>
</div>
</div>
<script src="editor.js"></script>
<script src="editor.js"></script>
</body>
</html>
......@@ -168,6 +168,53 @@ module.exports = CCFrame;
},{}],2:[function(require,module,exports){
(function () {
/* some simple utilities */
function getText (url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
callback(null, request.responseText);
} else {
callback("server error", null);
}
};
request.onerror = function() {
callback("connection error", null);
};
request.send();
}
function post (url, data, callback) {
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// request.setRequestHeader('Content-Type', 'application/octet-stream');
request.onload = function() {
if (request.readyState == XMLHttpRequest.DONE && request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
callback(null, resp);
} else {
callback("server error");
}
};
request.onerror = function() {
callback("connection error");
};
var sdata = "";
for (var key in data) {
if (data.hasOwnProperty(key)) {
sdata += (sdata?"&":"") + key+"="+encodeURIComponent(data[key]);
}
}
request.send(sdata);
}
var timecode = require("./timecode.js"),
CCFrame = require("./ccframe.js"),
tcpat = /(?:(\d\d):)?(\d\d):(\d\d)(?:[.,](\d{1,3}))?/;
......@@ -192,7 +239,8 @@ CodeMirror.defineMode("ccmarkdown", function(config, parserConfig) {
var player = new CCFrame(document.getElementById("player")),
editor = CodeMirror.fromTextArea(document.getElementById("static"), {
mode: "ccmarkdown",
lineNumbers: true,
lineNumbers: false,
lineWrapping: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
......@@ -210,11 +258,14 @@ editor.setOption("extraKeys", {
},
"Ctrl-Right": function(cm) {
player.jumpforward();
},
"Ctrl-S": function (cm) {
do_save(cm);
}
});
/* Map URL and timecode clicks */
document.addEventListener("click", function (e) {
function clicker (e) {
var href;
if (e.target.classList.contains("cm-link")) {
href = e.target.textContent;
......@@ -232,7 +283,67 @@ document.addEventListener("click", function (e) {
} else if (e.target.classList.contains("cm-cctimecode")) {
player.currentTime = timecode.timecode_to_seconds(e.target.textContent);
}
})
}
document.addEventListener("click", clicker);
document.addEventListener("touchend", clicker);
/* Class cycler for display modes */
function classcycler (button, target, modes) {
var i = 0;
button.addEventListener("click", function () {console.log("cycle"+i, button, target); target.classList.replace(modes[i], modes[i = (i+1) % modes.length]); });
}
function gebi (id) { return document.getElementById(id); }
classcycler(gebi("toggle"), gebi("content"), "splitscreen overlay".split(" "));
/* Save */
var current_href;
function hashchange () {
var h = window.location.hash;
if (h) {
var m = h.match(/^#(.+)/);
if (m !== null) {
var href = m[1];
if (href !== current_href) {
current_href = href;
getText(href, function (err, text) {
if (err) {
console.log("ERROR", err);
return;
}
editor.setValue(text);
})
}
}
}
}
window.addEventListener("hashchange", hashchange);
hashchange();
function do_save (editor) {
var text = editor.getValue();
var savebutton = gebi("save");
savebutton.classList.add("saving");
savebutton.disabled = true;
// status.innerHTML = "saving...";
if (current_href) {
post(current_href, {text: text}, function (err, resp) {
savebutton.disabled = false;
savebutton.classList.remove("saving");
if (err) {
console.log("post ERROR", err);
} else {
console.log("post", resp);
// status.innerHTML = "Saved " + new Date();
}
})
}
}
gebi("save").addEventListener("click", do_save);
})()
......
(function () {
/* some simple utilities */
function getText (url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
callback(null, request.responseText);
} else {
callback("server error", null);
}
};
request.onerror = function() {
callback("connection error", null);
};
request.send();
}
function post (url, data, callback) {
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// request.setRequestHeader('Content-Type', 'application/octet-stream');
request.onload = function() {
if (request.readyState == XMLHttpRequest.DONE && request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
callback(null, resp);
} else {
callback("server error");
}
};
request.onerror = function() {
callback("connection error");
};
var sdata = "";
for (var key in data) {
if (data.hasOwnProperty(key)) {
sdata += (sdata?"&":"") + key+"="+encodeURIComponent(data[key]);
}
}
request.send(sdata);
}
var timecode = require("./timecode.js"),
CCFrame = require("./ccframe.js"),
tcpat = /(?:(\d\d):)?(\d\d):(\d\d)(?:[.,](\d{1,3}))?/;
......@@ -24,7 +71,8 @@ CodeMirror.defineMode("ccmarkdown", function(config, parserConfig) {
var player = new CCFrame(document.getElementById("player")),
editor = CodeMirror.fromTextArea(document.getElementById("static"), {
mode: "ccmarkdown",
lineNumbers: true,
lineNumbers: false,
lineWrapping: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
......@@ -42,11 +90,14 @@ editor.setOption("extraKeys", {
},
"Ctrl-Right": function(cm) {
player.jumpforward();
},
"Ctrl-S": function (cm) {
do_save(cm);
}
});
/* Map URL and timecode clicks */
document.addEventListener("click", function (e) {
function clicker (e) {
var href;
if (e.target.classList.contains("cm-link")) {
href = e.target.textContent;
......@@ -64,6 +115,66 @@ document.addEventListener("click", function (e) {
} else if (e.target.classList.contains("cm-cctimecode")) {
player.currentTime = timecode.timecode_to_seconds(e.target.textContent);
}
})
}
document.addEventListener("click", clicker);
document.addEventListener("touchend", clicker);
/* Class cycler for display modes */
function classcycler (button, target, modes) {
var i = 0;
button.addEventListener("click", function () {console.log("cycle"+i, button, target); target.classList.replace(modes[i], modes[i = (i+1) % modes.length]); });
}
function gebi (id) { return document.getElementById(id); }
classcycler(gebi("toggle"), gebi("content"), "splitscreen overlay".split(" "));
/* Save */
var current_href;
function hashchange () {
var h = window.location.hash;
if (h) {
var m = h.match(/^#(.+)/);
if (m !== null) {
var href = m[1];
if (href !== current_href) {
current_href = href;
getText(href, function (err, text) {
if (err) {
console.log("ERROR", err);
return;
}
editor.setValue(text);
})
}
}
}
}
window.addEventListener("hashchange", hashchange);
hashchange();
function do_save (editor) {
var text = editor.getValue();
var savebutton = gebi("save");
savebutton.classList.add("saving");
savebutton.disabled = true;
// status.innerHTML = "saving...";
if (current_href) {
post(current_href, {text: text}, function (err, resp) {
savebutton.disabled = false;
savebutton.classList.remove("saving");
if (err) {
console.log("post ERROR", err);
} else {
console.log("post", resp);
// status.innerHTML = "Saved " + new Date();
}
})
}
}
gebi("save").addEventListener("click", do_save);
})()