crappyrules
/
notehub
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

tableau feature added to editing page; styling improved

master
Christian Müller 10 years ago
parent
9acdf8c013
commit
2dee4a9d1d
3 changed files with 39 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      resources/edit.html
  2. 8
      resources/public/js/publishing.js
  3. 35
      resources/public/style.css

7
resources/edit.html
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html style="height: 100%"> <html style="height: 100%;">
<head> <head>
<title>NoteHub &mdash; New Page</title> <title>NoteHub &mdash; New Page</title>
@ -23,11 +23,14 @@
<fieldset id="input-elems"> <fieldset id="input-elems">
<input class="ui-elem" id="plain-password" name="plain-password" placeholder="Password for editing" type="text">&nbsp; <input class="ui-elem" id="plain-password" name="plain-password" placeholder="Password for editing" type="text">&nbsp;
<input class="button ui-elem" id="publish-button" type="submit" value="Publish"> <input class="button ui-elem" id="publish-button" type="submit" value="Publish">
<span id="tableau">
0 words
</span>
<br> <br>
<br> <br>
</fieldset> </fieldset>
</form> </form>
<article id="previewPane"></article> <div id="previewPane"><article id="draft"></article></div>
</div> </div>
</body> </body>

8
resources/public/js/publishing.js
Unescape View File

@ -4,7 +4,8 @@ var $ = function(id) {
var iosDetected = navigator.userAgent.match("(iPad|iPod|iPhone)"); var iosDetected = navigator.userAgent.match("(iPad|iPod|iPhone)");
var timer = null; var timer = null;
var timerDelay = iosDetected ? 800 : 400; var timerDelay = iosDetected ? 800 : 400;
var $note, $action, $preview, $plain_password, updatePreview; var $note, $action, $preview, $plain_password,
updatePreview, $tableau;
var backendTimer; var backendTimer;
function md2html(input) { function md2html(input) {
@ -14,13 +15,15 @@ function md2html(input) {
function saveDraft() { function saveDraft() {
if ($action == "UPDATE") return; if ($action == "UPDATE") return;
console.log("draft autosave..."); console.log("draft autosave...");
$tableau.innerHTML = "Draft autosaved."
localStorage.setItem("draft", $note.value); localStorage.setItem("draft", $note.value);
} }
function onLoad() { function onLoad() {
$note = $("note"); $note = $("note");
$action = $("action").value; $action = $("action").value;
$preview = $("previewPane"); $preview = $("draft");
$tableau = $("tableau");
$plain_password = $("plain-password"); $plain_password = $("plain-password");
updatePreview = function() { updatePreview = function() {
clearTimeout(timer); clearTimeout(timer);
@ -28,6 +31,7 @@ function onLoad() {
var delay = Math.min(timerDelay, timerDelay * (content.length / 400)); var delay = Math.min(timerDelay, timerDelay * (content.length / 400));
timer = setTimeout(function() { timer = setTimeout(function() {
$preview.innerHTML = md2html(content); $preview.innerHTML = md2html(content);
$tableau.innerHTML = content.split(/\s+/).length + " words";
}, delay); }, delay);
}; };
if ($action == "UPDATE") updatePreview(); if ($action == "UPDATE") updatePreview();

35
resources/public/style.css
Unescape View File

@ -249,33 +249,54 @@ td {
#editContainer { #editContainer {
display: flex; display: flex;
flex-direction: row;
height: 100%; height: 100%;
} }
#previewPane { #previewPane {
flex: 1 0 46%; flex: 1 0 50%;
display: flex;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
margin: 0 !important; margin: 0 !important;
padding: 1em;
border-left: 1px solid #444; border-left: 1px solid #444;
} }
#previewPane article {
flex: 1 0;
padding: 2em;
}
#previewPane article h1 {
margin: 0;
}
#editPane { #editPane {
flex: 1 0 46%; display: flex;
flex-direction: column;
flex: 1 0 50%;
height: 100%; height: 100%;
padding: 1em;
} }
textarea { textarea {
font-size: 1em; font-size: 1em;
font-family: Courier; font-family: Courier;
border-radius: 5px; border-radius: 5px;
width: 100%; flex: 1 0;
height: 93%; margin: 1em;
} }
textarea, fieldset { textarea, fieldset {
border: none; border: none;
} }
fieldset {
padding-left: 1em;
padding-right: 1em;
font-family: sans-serif;
}
#tableau {
font-weight: lighter;
color: #054;
float: right;
}
Write Preview
Loading…
Cancel
Save