Skip to content

Instantly share code, notes, and snippets.

@erjohnson
Created February 10, 2015 21:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save erjohnson/9288a2535e943581b6fd to your computer and use it in GitHub Desktop.
Save erjohnson/9288a2535e943581b6fd to your computer and use it in GitHub Desktop.
Jot Text Editor Views
<div class="row">
<a class="button button-primary" href="/new">New</a>
</div>
<hr/>
<div class="row">
<ul>
<% @list.each do |doc| %>
<li><a href="/document/<%= doc['path']['key'] %>"><%= doc['value']['title'] %></a></li>
<% end %>
</ul>
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Text Editor App</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/skeleton.css">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>My Text Editor App</h1>
<%= yield %>
</div>
</body>
</html>
<a href="/">Back Home</a>
<hr/>
<div class="row">
<form action="/new" method="POST">
<label>Title</label>
<input class="u-full-width" type="text" name="title">
<input type="submit" value="Submit">
</form>
</div>
<div class="row">
<a class="button button-primary" href="/new">New</a>
</div>
<hr/>
<h4>No documents found.</h4>
<a href="/">Back Home</a>
<hr/>
<h1 id="title"><%= @title %></h1>
<div class="row">
<a class="button" href="/undo/<%= @id %>">Undo</a>
</div>
<p><span id="saved">Saved!</span>&nbsp;</p>
<textarea class="u-full-width" id="editor"></textarea>
<script type="text/javascript">
$(document).ready(function(){
$("textarea#editor").val("<%= @content %>");
function save() {
var title = $("h1#title").text();
var content = $("textarea#editor").val();
$.ajax({
url: '/document/<%= @id %>',
type: 'PUT',
data: { title: title, content: content}
});
$('#saved').show();
setTimeout(function() {
$('#saved').hide();
}, 4000);
};
var timeoutId;
$('#editor').on('input propertychange', function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
save();
}, 1000);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment