Skip to content

Commit

Permalink
Live preview
Browse files Browse the repository at this point in the history
  • Loading branch information
natew committed Mar 31, 2012
1 parent 4c14269 commit fcd58f6
Show file tree
Hide file tree
Showing 9 changed files with 1,546 additions and 193 deletions.
4 changes: 4 additions & 0 deletions app/assets/javascripts/admin.js
@@ -0,0 +1,4 @@
//= require jquery
//= require jquery_ujs
//= require showdown
//= require_tree ./admin
@@ -1,3 +1,5 @@
var showdown = new Showdown.converter();

// Allows for auto expanding textareas
function makeExpandingArea(container) {
var area = container.querySelector('textarea'),
Expand Down Expand Up @@ -52,10 +54,14 @@ function validateTitle() {
}

function savePost() {
var form = $('.edit_post'),
var form = $('.edit_post,#new_post'),
action = form.attr('action');

$.post(action, form.serialize(), function() {
$('#save-button').val('Saved').addClass('saved');
$('#save-button').val('Saved').addClass('saved').attr('disabled','disabled');
});
}

function updatePreview() {
$('#post-preview').html('<h1>'+$('#post_title').val()+'</h1>'+showdown.makeHtml($('#post_content').val()));
}
102 changes: 102 additions & 0 deletions app/assets/javascripts/admin/editor.js
@@ -0,0 +1,102 @@
$(function() {
// Auto-expanding height for editor textareas
var title = document.getElementById('text-title'),
content = document.getElementById('text-content'),
preview = false,
saveInterval = 5000;

// If we're on the edit page
if (title) {
var changed = false;

// Auto expanding textareas. See _functions.js
makeExpandingArea(title);
makeExpandingArea(content);

// Scroll window as we edit long posts
$('#post_content').bind('keyup', function() {
var $this = $(this),
bottom = $this.offset().top + $this.height();

if (bottom > $(window).scrollTop() &&
$this.prop("selectionStart") > ($this.val().length - $this.val().split('\n').slice(-1)[0].length)) {
$(window).scrollTop(bottom);
}
});

// Preview button
$('#preview-button').click(function(e){
e.preventDefault();
if (preview) {
$('#split').removeClass('preview');
preview = false;
} else {
updatePreview();
$('#split').addClass('preview');
preview = true;
}
});

// Set minimum height of content textarea
$('#post_content').css('min-height', $(window).height() - $('#post_title').height() - 130);

// Autosave and post preview
$('#post_content,#post_title').bind('keyup', function(){
changed = true;
$('#save-button').val('Save').removeClass('saved').attr('disabled','');

if (preview) {
updatePreview();
}
});

// Autosave
setInterval(function(){
if (changed) {
changed = false;
savePost();
}
}, saveInterval);

// Ajax save-button
$('#save-button').click(function(){
savePost();
});

// // Preview pops open new window
// var $form = $('form:first'),
// original_action = $form.attr('action');
// $('#preview-button').click(function(e) {
// if (validateTitle()) {
// $form.attr('action', '/preview');
// $form.attr('target', '_blank');
// $form.submit();
// } else {
// e.preventDefault();
// }
// });

// Save button validates
$('#save-button').click(function(e) {
if (validateTitle()) {
$form.attr('target', '_self');
$form.attr('action', original_action);
$form.submit();
} else {
e.preventDefault();
}
});

// Options menu
$('.menu').toggle(function(){
$(this).addClass('active');
$($(this).attr('href')).addClass('visible');
}, function() {
$(this).removeClass('active');
$($(this).attr('href')).removeClass('visible');
});

// Fade out save post notice
$('.notice').delay(2000).fadeOut(500);
}
});
2 changes: 1 addition & 1 deletion app/assets/javascripts/application.js
Expand Up @@ -13,4 +13,4 @@
//= require jquery
//= require jquery_ujs
//= require fitvids.js
//= require_tree .
//= require posts.js
96 changes: 0 additions & 96 deletions app/assets/javascripts/posts.js
@@ -1,99 +1,3 @@
$(function() {
// Auto-expanding height for editor textareas
var title = document.getElementById('text-title'),
content = document.getElementById('text-content');

$('.post').fitVids();

// If we're on the edit page
if (title) {
var changed = false;

// Hide bar
$('#publish-bar').delay(1000).animate({
bottom: '-100px'
});

$('#publish-bar-hover').hover(function() {
$('#publish-bar').animate({
bottom: '0'
});
}, function() {
$('#publish-bar').animate({
bottom: '-100px'
});
});

// Auto expanding textareas. See _functions.js
makeExpandingArea(title);
makeExpandingArea(content);

// Scroll window if we edit long posts
$('#post_content').bind('keyup', function() {
var $this = $(this),
bottom = $this.offset().top + $this.height();

if (bottom > $(window).scrollTop() &&
$this.prop("selectionStart") > ($this.val().length - $this.val().split('\n').slice(-1)[0].length)) {
$(window).scrollTop(bottom);
}
});

// Set minimum height of content textarea
$('#post_content').css('min-height', $(window).height() - $('#post_title').height() - 130);

// Autosave
$('#post_content,#post_title').bind('keyup', function(){
changed = true;
$('#save-button').val('Save').removeClass('saved');
});

setInterval(function(){
if (changed) {
changed = false;
savePost();
}
},5000);

// Ajax save-button
$('#save-button').click(function(){
savePost();
});

// Preview pops open new window
var $form = $('form:first'),
original_action = $form.attr('action');
$('#preview-button').click(function(e) {
if (validateTitle()) {
$form.attr('action', '/preview');
$form.attr('target', '_blank');
$form.submit();
} else {
e.preventDefault();
}
});

// Save button validates
$('#save-button').click(function(e) {
if (validateTitle()) {
$form.attr('target', '_self');
$form.attr('action', original_action);
$form.submit();
} else {
e.preventDefault();
}
});

// Options menu
$('.menu').toggle(function(){
$(this).addClass('active');
$($(this).attr('href')).addClass('visible');
}, function() {
$(this).removeClass('active');
$($(this).attr('href')).removeClass('visible');
});

// Fade out save post notice
$('.notice').delay(2000).fadeOut(500);
}
});

0 comments on commit fcd58f6

Please sign in to comment.