Permalink
Browse files

Live preview

  • Loading branch information...
1 parent fc9494f commit 01bb78740f8e79240b3afdb0d43e75b434e6081d @natew committed Mar 31, 2012
@@ -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'),
@@ -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()));
}
@@ -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);
+ }
+});
@@ -13,4 +13,4 @@
//= require jquery
//= require jquery_ujs
//= require fitvids.js
-//= require_tree .
+//= require 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);
- }
});
Oops, something went wrong.

0 comments on commit 01bb787

Please sign in to comment.