Skip to content

Commit

Permalink
WIP: Start rewriting the demo
Browse files Browse the repository at this point in the history 
TODO:

* Watch the mobiledoc to load and re-start the editor
* Handle errors gracefully
* Show serialized output
* Show rendered output
* Style, make the code panes dark
  • Loading branch information
@mixonic
mixonic committed Jul 8, 2015
1 parent 006f74e commit 43fd3c6
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 133 deletions.
16 changes: 9 additions & 7 deletions demo/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ body {
}
}

.container {
display: flex;
justify-content: space-around;
}

.pane {
}

.editor-pane {
max-width: 50em;
margin: 0 auto;
Expand Down Expand Up @@ -55,13 +63,7 @@ body {
right: 0;
width: 50%;
}
.code-pane {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
#serialized-mobiledoc, #mobiledoc-to-load {
background-color: #2b303b;
overflow: hidden;
}
Expand Down
84 changes: 16 additions & 68 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,67 +3,12 @@
'use strict';

var ContentKitDemo = exports.ContentKitDemo = {
toggleCodePane: function() {
if(document.body.className === 'code-pane-open') {
this.closeCodePane();
} else {
this.openCodePane(editor);
}
},

openCodePane: function() {
window.getSelection().removeAllRanges();
document.body.className = 'code-pane-open';
location.hash = 'code';
},

closeCodePane: function() {
window.getSelection().removeAllRanges();
document.body.className = '';
location.hash = '';
},

syncCodePane: function(editor) {
var codePaneJSON = document.getElementById('code-json');
var codePaneHTML = document.getElementById('code-html');
var codePaneJSON = document.getElementById('serialized-mobiledoc');
var json = editor.serialize();
codePaneJSON.innerHTML = this.syntaxHighlight(json);
},

formatXML: function(xml) {
// https://gist.github.com/sente/1083506
xml = xml.replace(/(>)(<)(\/*)/g, '$1\r\n$2$3');
var formatted = '';
var pad = 0;
var nodes = xml.split('\r\n');
var nodeLen = nodes.length;
var node, indent, padding, i, j;
for(i = 0; i < nodeLen; i++) {
node = nodes[i];
if (node.match( /.+<\/\w[^>]*>$/ )) {
indent = 0;
} else if (node.match( /^<\/\w/ )) {
if (pad != 0) {
pad -= 1;
}
} else if (node.match( /^<\w[^>]*[^\/]>.*$/ )) {
indent = 1;
} else {
indent = 0;
}

padding = '';
for (j = 0; j < pad; j++) {
padding += ' ';
}

formatted += padding + node + '\r\n';
pad += indent;
}

return formatted;
},

syntaxHighlight: function(json) {
// http://stackoverflow.com/a/7220510/189440
if (typeof json !== 'string') {
Expand All @@ -89,19 +34,22 @@ var ContentKitDemo = exports.ContentKitDemo = {

};

// Initialize
if (window.editor) {
ContentKitDemo.syncCodePane(editor);
editor.on('update', function() {
ContentKitDemo.syncCodePane(this);
$(function() {
var textarea = $('#mobiledoc-to-load textarea');
var textPayload = textarea.val();
var payload = JSON.parse(textPayload);
var editorF = new ContentKit.Editor($('#editor')[0], {
mobiledoc: payload,
cards: {
'pick-color': function renderPickColor(payload) {
return 'PICK A COLOR: '+payload.options.join(', ');
}
}
});
var settingsBtn = document.getElementById('settings-btn');
settingsBtn.addEventListener('click', function() {
ContentKitDemo.toggleCodePane();

editorF.on('update', function(editor) {
ContentKitDemo.syncCodePane(editor);
});
}
if (location.hash === '#code') {
ContentKitDemo.openCodePane();
}
});

}(this, document));
88 changes: 31 additions & 57 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,73 +15,47 @@
<link href="demo.css" rel="stylesheet">
</head>
<body>

<div class="editor-pane">

<!-- This is the element we will target for the `Editor` -->
<article class="editor">
<h2>ContentKit Editor</h2>
<p>A modern, minimalist text editor allowing you to write in a distraction free environment. Simply select any text you would like to format and a toolbar will appear where you can toggle options such as <strong>bold</strong> and <em>italic</em>, or create a <a href="https://github.com/bustlelabs/content-kit-editor">link</a>.</p>
<h2>Create headings by pressing "H1" on the toolbar</h2>
<h3>Pressing "H2" will create a subheading, like this one.</h3>
<blockquote>Create block quotes by selecting any text and pressing the "quote" button. Press it again to toggle back to a standard paragraph.</blockquote>
<p>To create a <em>list</em>, start typing a dash followed by a space (<strong>"- "</strong>) on a new line and a list will be automatically created.</p>
<p>To create an <em>ordered list</em>, start typing a one followed by a period and a space (<strong>"1. "</strong>) and the list will be automatically created.</p>

<h3>Tips &amp; Tricks:</h3>
<ul>
<li>Close the formatting toolbar by clicking anywhere, or press <strong>ESC</strong></li>
<li>Make the toolbar sticky by pressing <strong>F5</strong></li>
<li>Double click a word to select it</li>
<li>You only have to select a portion of a paragraph if you want to change it to a heading, subheading, or quote</li>
<li>To create a soft line break, press <strong><em>shift</em></strong> + <strong>enter</strong></li>
<li>Press <strong>enter</strong> twice to exit a list</li>
</ul>

<h3>Keyboard shortcuts:</h3>
<ul>
<li><strong>bold</strong>: (cmd+B)</li>
<li><em>italic</em>: (cmd+I)</li>
<li>undo: (cmd+z)</li>
<li>redo: (cmd+y)</li>
<li>select all text: (cmd+a)</li>
<li>select letters: (hold shift + arrow keys)</li>
<li>close toolbar: (ESC)</li>
</ul>

<p>Enjoy focusing on your content and not worrying about formatting!</p>
</article>

<div class="demo-buttons">
<a id="settings-btn"><i class="icon-settings"></i></a>
<div class="container">

<div class="pane">
<h2>mobiledoc to load</h2>
<div id="mobiledoc-to-load">
<textarea>
[
[],
[
[1, "P", [
[[], 0, "hello world"]
]]
]
]
</textarea>
</div>
</div>

</div>
<div class="pane">
<h2>editor</h2>
<div id="editor">
</div>
</div>

<div class="code-panes" id="code-panes">
<div class="code-pane">
<code id="code-json"></code>
<div class="pane">
<h2>serilized mobiledoc</h2>
<div id="serialized-mobiledoc">
</div>
</div>
<div class="code-pane">
<code id="code-html"></code>

<div class="pane">
<h2>rendered mobiledoc</h2>
<div id="rendered-mobiledoc"></div>
</div>

</div>

<!-- Include ContentKit JS -->
<script src="../global/content-kit-editor.js"></script>

<script>
// Initialize a new Editor
var editor = new ContentKit.Editor('.editor', {
cards: {
'pick-color': function renderPickColor(payload) {
return 'PICK A COLOR: '+payload.options.join(', ');
}
}
});
</script>

<!-- JS just for the demo page -->
<script src="./jquery/jquery.js"></script>
<script src="demo.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
HTMLRenderer
} from 'content-kit-compiler';

import Editor from './editor/editor-factory';
import Editor from './editor/editor';

const ContentKit = {
Type,
Expand Down

0 comments on commit 43fd3c6

Please sign in to comment.