Skip to content

Commit

Permalink
Clean up demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@mixonic @bantic
mixonic authored and bantic committed Jul 31, 2015
1 parent 1fa57e6 commit f49d483
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 84 deletions.
97 changes: 84 additions & 13 deletions demo/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,82 @@
box-sizing: border-box;
}

body {
html, body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #454545;
color: #121212;
margin: 0;
padding: 0;
background-color: #EFEFEF;
padding: 1.2rem;
background-color: #F3F3F3;
font-size: 1.1rem;
line-height: 1.4;
height: 100%;
width: 100%;
}
@media only screen and (max-width: 767px) {
body {
font-size: 0.88em;
font-size: 0.79rem;
}
}

h1, h2, h3, h4, h5 {
font-family: "Merriweather Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0.2rem 0 0.2rem;
}

h1 {
font-size: 1.8rem;
}

h2 {
font-size: 1.4rem;
}

h4 {
font-size: 0.9rem;
color: #3C3C3C;
}

p {
margin: 0.6rem 0 0.6rem;
}

.container {
display: -ms-flexbox;
display: -webkit-flex;
margin: 0.5rem 0 0;
display: flex;
flex-direction: row;
}

.col-container {
display: flex;
flex-direction: column;
}

-ms-flex-pack: justify;
justify-content: space-around;
hr {
content: 0;
height: 0;
border: 0;
border-bottom: 3px solid #121212;
margin: 0.9rem 0 0.8rem;
}

.headline-note {
color: #D0021B;
font-size: 1.0rem;
font-weight: normal;
margin: 0 0.4rem 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.subheadline {
color: #565656;
}

.pane {
max-width: 20%;
padding: 0 1em;
flex: 1;
}

.row {
flex: 1;
}

.pane p.desc {
Expand Down Expand Up @@ -75,13 +126,34 @@ body {
right: 0;
width: 50%;
}
#editor {
font-size: 0.9rem;
}
#serialized-mobiledoc, #mobiledoc-to-load {
overflow: hidden;
padding: 0.25em;
}
#serialized-mobiledoc {
white-space: pre;
background-color: #080808;
font-size: 0.7rem;
}
.output {
margin: 0.3rem;
background: #ffffff;
border: 2px solid #8A888A;
padding: 0.3rem 0 0.3rem 0.5rem;
}
.output.full-left {
margin-left: 0;
}
.output.full-right {
margin-right: 0;
}
.serialized-mobiledoc-wrapper {
line-height: 1.1;
}
#rendered-mobiledoc {
font-size: 0.9rem;
}
#mobiledoc-to-load {
}
Expand All @@ -101,7 +173,6 @@ body {
background-color: transparent;
color: #c0c5ce;
padding: 5em 1em 1em;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 0;
Expand Down
20 changes: 11 additions & 9 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ var selfieCard = {
alert('error getting video feed');
};
if (!navigator.webkitGetUserMedia) {
alert('Cannot get your video because no navigator.webkitGetUserMedia');
alert('This only works in Chrome (no navigator.webkitGetUserMedia)');
}
navigator.webkitGetUserMedia(videoObj, function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
Expand Down Expand Up @@ -99,7 +99,9 @@ var cardWithEditMode = {
button.innerText = 'Change to edit';
button.onclick = env.edit;

card.appendChild(button);
if (env.edit) {
card.appendChild(button);
}
element.appendChild(card);
}
},
Expand Down Expand Up @@ -136,7 +138,9 @@ var cardWithInput = {
button.innerText = 'Edit';
button.onclick = env.edit;

card.appendChild(button);
if (env.edit) {
card.appendChild(button);
}
element.appendChild(card);
}
},
Expand Down Expand Up @@ -172,7 +176,7 @@ var ContentKitDemo = exports.ContentKitDemo = {
syncCodePane: function(editor) {
var codePaneJSON = document.getElementById('serialized-mobiledoc');
var mobiledoc = editor.serialize();
codePaneJSON.innerHTML = this.syntaxHighlight(mobiledoc);
codePaneJSON.innerText = JSON.stringify(mobiledoc, null, ' ');

var cards = {
'simple-card': simpleCard,
Expand Down Expand Up @@ -282,8 +286,7 @@ function isValidJSON(string) {
}
}

function attemptEditorReboot(editor, textarea) {
var textPayload = $(textarea).val();
function attemptEditorReboot(editor, textPayload) {
if (isValidJSON(textPayload)) {
var mobiledoc = readMobiledoc(textPayload);
if (editor) {
Expand Down Expand Up @@ -422,14 +425,13 @@ $(function() {
textarea.val(window.JSON.stringify(mobiledoc, false, 2));

textarea.on('input', function() {
attemptEditorReboot(editor, textarea);
});

$('#select-mobiledoc').on('change', function() {
var mobiledocName = $(this).val();
var mobiledoc = sampleMobiledocs[mobiledocName];
textarea.val(window.JSON.stringify(mobiledoc, false, 2));
textarea.trigger('input');
var text = window.JSON.stringify(mobiledoc, false, 2);
attemptEditorReboot(editor, text);
});

bootEditor(editorEl, mobiledoc);
Expand Down
100 changes: 38 additions & 62 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,86 +10,62 @@
<link href="../css/content-kit-editor.css" rel="stylesheet">

<!-- Include fancy fonts (optional) -->
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Merriweather+Sans:800" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Merriweather+Sans:700" rel="stylesheet">

<!-- CSS just for the demo page -->
<link href="demo.css" rel="stylesheet">
</head>

<body>
<div class="section">
<h1>Content-Kit<span class="headline-note">alpha!</span></h1>
<p class="subheadline">A WYSIWYG editor for rich content</p>
</div>
<hr>
<div class="section">
<p>
Content-Kit is a publishing solution designed for both text and
dynamically rendered cards. Posts are serialized into <a href="https://github.com/bustlelabs/content-kit-editor/blob/master/MOBILEDOC.md">Mobiledoc</a>, and
rendered to DOM in a reader's browser.
</p>
<p>
Read more on the <a href="https://github.com/bustlelabs/content-kit-editor">content-kit-editor</a>
GitHub repo, or on the <a href="http://madhatted.com/">announcement blog post</a>.
</p>
</div>
<div class="section">
<br>
<h2>Try a Demo</h2>
</div>
<div class="container">

<div class="pane">
<h2>mobiledoc to load</h2>
<p class='desc'>
This mobiledoc will be loaded into the editor.
You can change it and see the editor reload with the new contents.
(If there is a JSON syntax error it will be ignored; if there is a parser
error the editor may stop responding.)
<br>
Select a preloaded mobiledoc here:
<select id='select-mobiledoc'>
<option disabled>Choose a mobiledoc...</option>
<option value='simpleMobiledoc'>Simple mobiledoc</option>
<option value='mobileDocWithSimpleCard'>simple card</option>
<option value='mobileDocWithEditCard'>edit card</option>
<option value='mobileDocWithInputCard'>input card</option>
<option value='mobileDocWithSelfieCard'>selfie card</option>
<option value='mobileDocWithMarker'>mobiledoc with simple marker</option>
<option value='mobileDocWithMultipleMarkers'>mobiledoc with multiple markers</option>
<option value='mobileDocWithAttributeMarker'>mobiledoc with attributed marker</option>
</select>
</p>
<div id="mobiledoc-to-load">
<textarea></textarea>
<div class="output full-left">
<select id='select-mobiledoc'>
<option disabled>Load a new Mobiledoc</option>
<option value='simpleMobiledoc'>Simple text content</option>
<option value='mobileDocWithInputCard'>Card with Input</option>
<option value='mobileDocWithSelfieCard'>Selfie Card</option>
</select>
<div id="editor">
</div>
</div>
</div>

<div class="pane">
<h2>editor</h2>
<p class='desc'>
The live-editing surface. Changes here are serialized to mobiledoc
format and displayed to the right.
</p>
<div id="editor">
<div class="output">
<h4>Mobiledoc Output</h4>
<pre class="serialized-mobiledoc-wrapper"><code id="serialized-mobiledoc">
</code></pre>
</div>
</div>

<div class="pane">
<h2>serialized mobiledoc</h2>
<p class='desc'>
When the editor updates, it prints its serialized mobiledoc here.
</p>
<div id="serialized-mobiledoc">
<div class="output full-right">
<h4>Rendered with <a href="https://github.com/bustlelabs/mobiledoc-dom-renderer">DOM-Renderer</a></h4>
<div id="rendered-mobiledoc">
</div>
</div>
</div>

<div class="pane">
<h2>rendered mobiledoc (dom)</h2>
<p class='desc'>
This is the output of using the runtime (client-side)
<a href='http://github.com/bustlelabs/mobiledoc-dom-renderer'>mobiledoc-dom-renderer</a>
on the serialized mobiledoc.
</p>
<div id="rendered-mobiledoc"></div>

<hr>

<h2>innerHTML of editor surface</h2>
<p class='desc'>With special chars to mark text node boundaries and invisible characters.</p>
<div id='editor-html'></div>
</div>

<div class="pane">
<h2>rendered mobiledoc (html)</h2>
<p class='desc'>
This is the output of using the server-side
<a href='http://github.com/bustlelabs/mobiledoc-html-renderer'>mobiledoc-html-renderer</a>
on the serialized mobiledoc.
</p>
<div id="rendered-mobiledoc-html"></div>
</div>

</div>

<!-- Include ContentKit JS -->
Expand Down

0 comments on commit f49d483

Please sign in to comment.