Commit 20388b3d by murtaugh

editor enhanced interface

1 parent 43f26bd7
......@@ -80,13 +80,7 @@ function parse_href (href) {
that['basehref' ] = base;
that['fragment'] = fragment;
var lsp = base.lastIndexOf("/");
that['basename'] = (lsp !== -1) ? base.substr(lsp+1) : base;
// if (mf.hash && mf.hash.t && mf.hash.t.length >= 1) {
// that['start'] = mf.hash.t[0].startNormalized;
// that['end'] = mf.hash.t[0].endNormalized;
// }
that['basename'] = (lsp !== -1) ? base.substr(lsp+1) : base;
return that;
}
......@@ -101,23 +95,59 @@ function editor (elt, ace) {
tokenclicks,
current_href,
highlightLineStart,
highlightLineEnd;
highlightLineEnd,
root = elt,
body = document.getElementById("editorbody"),
controls = document.getElementById("controls"),
ctrigger = document.getElementById("controltrigger"),
modeselector = document.getElementById("editormode"),
save = document.getElementById("savebutton"),
saveas = document.getElementById("saveasbutton"),
savecopy = document.getElementById("savecopybutton"),
status = document.getElementById("status"),
theme_select = document.getElementById("theme"),
font_size_select = document.getElementById("fontsize"),
wrap = document.getElementById("wrap"),
show_invisible = document.getElementById("showinvisibles");
that.get_session = function (href) {
return sessionsByHref[href];
}
var root = d3.select(elt)
.attr("class", "editor"),
body = root.append("div")
.attr("class", "editorbody"),
foot = root.append("div")
.attr("class", "editorfoot");
ctrigger.addEventListener("mouseenter", function () {
controls.style.display = "block";
});
controls.addEventListener("mouseleave", function () {
controls.style.display = "none";
});
aceeditor = ace.edit(body);
body.style({position: "absolute", left: 0, top: 0, width: "100%", bottom: "32px"});
foot.style({position: "absolute", left: 0, bottom: 0, width: "100%", height: "32px", "z-index": 10});
aceeditor.setFontSize(parseInt(font_size_select.value));
font_size_select.addEventListener("change", function () {
aceeditor.setFontSize(parseInt(this.value));
});
show_invisible.checked = aceeditor.getShowInvisibles();
show_invisible.addEventListener("change", function () {
aceeditor.setShowInvisibles(this.checked);
})
wrap.checked = aceeditor.getOption("wrap");
wrap.addEventListener("change", function () {
aceeditor.setOption("wrap", this.checked);
})
gutter.checked = aceeditor.renderer.getShowGutter();
gutter.addEventListener("change", function () {
aceeditor.renderer.setShowGutter(this.checked);
})
activeline.checked = false;
if (activeline.checked) {
aceeditor.setHighlightActiveLine(true);
}
activeline.addEventListener("change", function () {
aceeditor.setHighlightActiveLine(this.checked);
})
aceeditor = ace.edit(body[0][0]);
window.aceeditor = aceeditor;
function init () {
aceeditor.setOption("wrap", true);
......@@ -153,39 +183,40 @@ function editor (elt, ace) {
start: aa_secondsToTimecode(t)
}, "*");
var tc = aa_secondsToTimecode(t);
console.log("aafragment", tc);
localStorage.setItem("aafragment", JSON.stringify({
time: t,
timecode: tc,
event: "tokenclick"
// console.log("aafragment", tc);
localStorage.setItem("cccontrol", JSON.stringify({
cmd: "fragmentclick",
value: token.value,
time: new Date()
}));
// var href = current_href.replace(/\.srt$/, '');
// $(editor.elt).trigger("fragmentclick", { href: href+"#t="+aa.secondsToTimecode(t) });
} else {
console.log("bad timecode");
}
} // else if (token.type == "markup.underline") { }
} else if (token.type == "markup.underline") {
var clickhref = parse_href(token.value);
localStorage.setItem("cccontrol", JSON.stringify({
cmd: "fragmentclick",
value: token.value,
time: new Date()
}))
}
});
// a bit of a brutal solution but...
$(document).bind("resize", function (e) { aceeditor.resize(); });
// MODE SELECTOR
var modeselector = foot
.append("select")
.attr("class", "editormode");
modeselector
.on("change", function () {
// console.log("change", this, this.value);
aceeditor.getSession().setMode(this.value);
})
.selectAll("option")
.data(modelist.modes)
.enter()
.append("option")
.attr("value", function (d) { return d.mode; })
.text(function (d) { return d.caption; });
modeselector.addEventListener("change", function () {
aceeditor.getSession().setMode(this.value);
}, false);
for (var i=0, l=modelist.modes.length; i<l; i++) {
var opt = document.createElement("option"),
d = modelist.modes[i];
opt.value = d.mode;
opt.textContent = d.caption;
modeselector.appendChild(opt);
}
function post (url, data, callback) {
var request = new XMLHttpRequest();
......@@ -245,37 +276,19 @@ function editor (elt, ace) {
})
}
var save = foot
.append("button")
.text("save")
.on("click", do_save);
foot
.append("button")
.text("save as")
.on("click", function () {
save.addEventListener("click", do_save, false);
saveas.addEventListener("click", function () {
do_save_as("save as...", true);
});
foot
.append("button")
.text("save a copy")
.on("click", function () {
}, false);
savecopy.addEventListener("click", function () {
do_save_as("save a copy...", false);
});
var status = document.createElement("span");
foot[0][0].appendChild(status);
});
var theme_select = document.getElementById("theme");
foot[0][0].appendChild(theme_select);
theme.addEventListener("change", function () {
console.log("theme", this.value);
aceeditor.setTheme(this.value)
});
function highlight(s, e) {
var session = aceeditor.getSession();
if (highlightLineStart) {
......@@ -339,7 +352,7 @@ function editor (elt, ace) {
session.acesession = ace.createEditSession(data, mode);
// index(href.nofrag, data);
modeselector[0][0].value = mode;
modeselector.value = mode;
aceeditor.setSession(session.acesession);
// editor.setOption("showLineNumbers", false);
aceeditor.setHighlightActiveLine(false);
......@@ -366,13 +379,6 @@ function editor (elt, ace) {
}
});
/*
that.newSession = function () {
var session = ace.createEditSession("", "ace/mode/srt-md");
aceeditor.setSession(session);
}
*/
function bind_keys (e) {
e.commands.addCommand({
name: 'pasteTimecode',
......
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>editor</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css" media="screen">
<head>
<meta charset="utf-8">
<title>editor</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<style media="screen" type="text/css">
body {
overflow: hidden;
}
......@@ -17,23 +16,141 @@
left: 0;
right: 0;
}
</style>
<base href="/__makeserver__/editor/">
</head>
<body>
<pre id="editor"></pre>
<select id="theme" size="1">
<optgroup label="Bright"><option value="ace/theme/chrome">Chrome</option><option value="ace/theme/clouds">Clouds</option><option value="ace/theme/crimson_editor">Crimson Editor</option><option value="ace/theme/dawn">Dawn</option><option value="ace/theme/dreamweaver">Dreamweaver</option><option value="ace/theme/eclipse">Eclipse</option><option value="ace/theme/github">GitHub</option><option value="ace/theme/iplastic">IPlastic</option><option value="ace/theme/solarized_light">Solarized Light</option><option value="ace/theme/textmate">TextMate</option><option value="ace/theme/tomorrow">Tomorrow</option><option value="ace/theme/xcode">XCode</option><option value="ace/theme/kuroir">Kuroir</option><option value="ace/theme/katzenmilch">KatzenMilch</option><option value="ace/theme/sqlserver">SQL Server</option></optgroup><optgroup label="Dark"><option value="ace/theme/ambiance">Ambiance</option><option value="ace/theme/chaos">Chaos</option><option value="ace/theme/clouds_midnight">Clouds Midnight</option><option value="ace/theme/cobalt">Cobalt</option><option value="ace/theme/gruvbox">Gruvbox</option><option value="ace/theme/idle_fingers">idle Fingers</option><option value="ace/theme/kr_theme">krTheme</option><option value="ace/theme/merbivore">Merbivore</option><option value="ace/theme/merbivore_soft">Merbivore Soft</option><option value="ace/theme/mono_industrial">Mono Industrial</option><option value="ace/theme/monokai">Monokai</option><option value="ace/theme/pastel_on_dark">Pastel on dark</option><option value="ace/theme/solarized_dark">Solarized Dark</option><option value="ace/theme/terminal">Terminal</option><option value="ace/theme/tomorrow_night">Tomorrow Night</option><option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option><option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option><option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option><option value="ace/theme/twilight">Twilight</option><option value="ace/theme/vibrant_ink">Vibrant Ink</option></optgroup>
</select>
<script src="lib/jquery.min.js"></script>
<script src="lib/d3.min.js"></script>
<script src="lib/ace-builds/src-noconflict/ace.js"></script>
<script src="edit/mode-srtmd.js"></script>
<script src="edit/modelist.js"></script>
<script src="edit/tokenclicks.js"></script>
<script src="edit/editor.js"></script>
<script>
#controls {
position: absolute;
height: auto;
bottom: 0px;
left: 20px;
right: 30px;
z-index: 1001;
background: #f0f0f0;
border-top: 2px solid black;
overflow: auto;
display: none;
}
#controltrigger {
position: absolute;
left: 0px;
right: 0px;
bottom: 0;
/*width: 5px;*/
border-bottom: 1px solid black;
height: 5px;
background: none;
z-index: 1000;
}
</style>
<!-- &lt;base href="/__makeserver__/editor/"&gt; -->
</head>
<body>
<div id="controltrigger"></div>
<div id="controls">
<div>
Mode
<select class="editormode" id="editormode"></select>
</div>
<div>
Theme
<select id="theme" size="1">
<optgroup label="Bright">
<option value="ace/theme/chrome">Chrome</option>
<option value="ace/theme/clouds">Clouds</option>
<option value="ace/theme/crimson_editor">Crimson Editor</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/dreamweaver">Dreamweaver</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/github">GitHub</option>
<option value="ace/theme/iplastic">IPlastic</option>
<option value="ace/theme/solarized_light">Solarized Light</option>
<option value="ace/theme/textmate">TextMate</option>
<option value="ace/theme/tomorrow">Tomorrow</option>
<option value="ace/theme/xcode">XCode</option>
<option value="ace/theme/kuroir">Kuroir</option>
<option value="ace/theme/katzenmilch">KatzenMilch</option>
<option value="ace/theme/sqlserver">SQL Server</option>
</optgroup>
<optgroup label="Dark">
<option value="ace/theme/ambiance">Ambiance</option>
<option value="ace/theme/chaos">Chaos</option>
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
<option value="ace/theme/cobalt">Cobalt</option>
<option value="ace/theme/gruvbox">Gruvbox</option>
<option value="ace/theme/idle_fingers">idle Fingers</option>
<option value="ace/theme/kr_theme">krTheme</option>
<option value="ace/theme/merbivore">Merbivore</option>
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
<option value="ace/theme/mono_industrial">Mono Industrial</option>
<option value="ace/theme/monokai">Monokai</option>
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
<option value="ace/theme/solarized_dark">Solarized Dark</option>
<option value="ace/theme/terminal">Terminal</option>
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
<option value="ace/theme/twilight">Twilight</option>
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
</optgroup>
</select>
</div>
<div>
Font Size
<select id="fontsize" size="1">
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px" selected="selected">12px</option>
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
</select>
</div>
<div>
<input type="checkbox" id="showinvisibles" /> <label for="showinvisibles">Show invisibles</label>
</div>
<div>
<input type="checkbox" id="wrap" /> <label for="wrap">Soft wrap</label>
</div>
<div>
<input type="checkbox" id="gutter" /> <label for="gutter">Show gutter</label>
</div>
<div>
<input type="checkbox" id="activeline" /> <label for="activeline">Highlight active line</label>
</div>
<div>
Key binding
<select id="keybinding" size="1">
<option value="ace">Ace</option>
<option value="vim">Vim</option>
<option value="emacs">Emacs</option>
</select>
</div>
<div>
Press CTRL-F to find, and CTRL-H to find/replace.
</div>
<div>
<span id="status">&nbsp;</span>
</div>
<div>
<button id="savebutton">save</button>
<button id="saveasbutton">save as</button>
<button id="savecopybutton">save a copy</button>
</div>
</div>
<pre id="editor" class="editor">
<div class="editorbody" id="editorbody" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></div>
</pre>
<script src="lib/jquery.min.js"></script>
<!-- <script src="lib/d3.min.js"></script> -->
<script src="lib/ace-builds/src-noconflict/ace.js"></script>
<script src="edit/mode-srtmd.js"></script>
<script src="edit/modelist.js"></script>
<script src="edit/tokenclicks.js"></script>
<script src="edit/editor.js"></script>
<script>
// http://www.joezimjs.com/javascript/3-ways-to-parse-a-query-string-in-a-url/
// console.log("editor.html");
var last_fragment;
......@@ -120,5 +237,6 @@ update_location(window.location.pathname);
})();
</script>
</body>
</html>
\ No newline at end of file
</body>
</html>
document.addEventListener("DOMContentLoaded", function () {
/**********************************/
/* TIMECODE */
function aa_secondsToTimecode (ss, style) {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!