Fixed preview issues

admin/controllers/essays.coffee

@@ -128,12 +128,11 @@ class EssayForm extends Spine.Controller
     if @form.hasClass('fullscreen')
       @form.removeClass('fullscreen')
       @fullscreenButton.html @fullscreenButtonText
-      @previewUI?.release()
+      @previewUI?.close()
     else
       @form.addClass('fullscreen')
       @fullscreenButton.html "< Exit #{@fullscreenButtonText}"
-      @previewUI = new PreviewUI(@formBody)
-      @form.append @previewUI.el
+      @previewUI = new PreviewUI field: @formBody
 
   import: (e) =>
     # For importing old HTML to Markdown directly from old location

admin/controllers/scenes.coffee

@@ -9,6 +9,7 @@ require('lib/jquery-xdomainajax')
 
 MultiSelectUI = require('controllers/ui/multi-select')
 FileUploadUI  = require('controllers/ui/file-upload')
+PreviewUI     = require('controllers/ui/preview')
 
 Scene       = require('models/scene')
 Author      = require('models/author')
@@ -127,9 +128,11 @@ class SceneForm extends Spine.Controller
     if @form.hasClass('fullscreen')
       @form.removeClass('fullscreen')
       @fullscreenButton.html @fullscreenButtonText
+      @previewUI?.close()
     else
       @form.addClass('fullscreen')
       @fullscreenButton.html "< Exit #{@fullscreenButtonText}"
+      @previewUI = new PreviewUI field: @formBody
 
   import: (e) =>
     # For importing old HTML to Markdown directly from old location
@@ -165,7 +168,7 @@ class SceneForm extends Spine.Controller
             reMarker = new reMarked(options)
             markdown = reMarker.render($content.html())
             @formBody.val(markdown)
-            
+
           if not @item.old_url
             @formTitle.val($title.text()) if $title
             $slug = @form.find('input[name=slug]')

admin/controllers/ui/preview.coffee

@@ -6,38 +6,54 @@ Showdown    = require('showdown')
 class PreviewUI extends Spine.Controller
   tag: 'div'
   className: 'ui-preview'
+  filed: null
   live: true
   showClose: true
+  autoOpen: true
 
   events:
     'click .close-button':    'close'
+    'click .preview-button':  'render'
 
-  constructor: (@field) ->
+  constructor: ->
     super
-    @field = $(@field) if typeof @field is String
-    @inner = $('<div class="inner" />')
-    @append @inner
-
-    @md = new Showdown.converter()
-    
-    @render()
-    @setupLivePreview() if @live
-    @setupCloseButton() if @showClose
-    @
-
-  render: ->
+    if @field
+      @field = $(@field) if typeof @field is String
+      @inner = $('<div class="inner" />')
+      @el.append @inner
+
+      @md = new Showdown.converter()
+      
+      @render()
+      @setupLivePreview() if @live
+      @setupPreviewButton() unless @live
+      @setupCloseButton() if @showClose
+      @open() if @autoOpen
+      @
+
+  render: (e) =>
     contentHtml = @md.makeHtml(@field.val())
     @inner.html contentHtml
   
-  setupLivePreview: ->
-    @field.on 'keyup', (e) =>
-      @render()
+  setupLivePreview: =>
+    @field.on 'keyup', @render
 
   setupCloseButton: ->
-    @append $('<a class="close-button button small">x</a>')
+    @el.append $('<a class="close-button button small">X</a>')
+
+  setupPreviewButton: ->
+    @el.append $('<a class="preview-button button small">Render</a>')
+
+  open: (e) =>
+    e?.preventDefault()
+    # Add to parent form
+    @parentForm = @field.parents('form')
+    @parentForm.append @el
+    @parentForm.addClass('preview-mode')
 
-  close: (e) ->
+  close: (e) =>
     e?.preventDefault()
+    @parentForm.removeClass('preview-mode')
     @release()
 
 

admin/static/css/theme.styl

@@ -123,7 +123,7 @@ span.label
   overflow: auto
   box-shadow(-4px 4px 0 rgba(0, 0, 0, 0.1))
   -webkit-user-select: none
-  transition(all .3s)
+  transition(0.3s, all)
 
   .app-logo
     padding: 16px 18px
@@ -450,15 +450,16 @@ span.label
           position: fixed
           top: 60px
           bottom: 0
-          left: 10px
-          right: auto
-          width: 48%
+          left: 20%
+          right: 20%
+          width: auto
           height: 90%
           padding: 10px
           border: 0
           background: white
           // outline: 10px solid rgba(255, 255, 255, 0.5)
           z-index: 100
+          transition(0.3s, all)
 
         .ui-preview
           position: fixed
@@ -474,6 +475,14 @@ span.label
           // outline: 10px solid rgba(255, 255, 255, 0.5)
           z-index: 100
 
+        &.preview-mode
+          
+          textarea[name='body'],
+          textarea[name='content']
+            left: 10px
+            right: auto
+            width: 48%
+
         button.fullscreen-button,
         .markdown-help:first-of-type
           position: fixed
@@ -609,13 +618,25 @@ ul.ui-multi-select
   right: 0
   left: 0
   background: #fff
-  padding: 20px
-  overflow: auto
+  transition(0.3s, all)
 
-  .close-button
+  > .button
     position: absolute
     top: 10px
     right: 10px
+    outline: 4px solid rgba(255,255,255,0.7)
+
+    &.preview-button
+      right: 60px
+
+  > .inner
+    position: absolute
+    top: 0
+    bottom: 0
+    right: 0
+    left: 0
+    padding: 20px
+    overflow: auto
 
 .ui-help
   position: absolute

admin/templates/author-form.html

@@ -46,9 +46,9 @@
 
   <div class="sidebar">
     <div class="buttons">
-      <button class="save-button">Save</button>
-      <button class="cancel-button plain">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+      <button class="save-button" tabindex="0">Save</button>
+      <button class="cancel-button plain" tabindex="0">Cancel</button>
+      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/block-form.html

@@ -34,9 +34,9 @@
 
   <div class="sidebar">
     <div class="buttons">
-      <button class="save-button">Save</button>
-      <button class="cancel-button plain">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+      <button class="save-button" tabindex="0">Save</button>
+      <button class="cancel-button plain" tabindex="0">Cancel</button>
+      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/collection-form.html

@@ -42,9 +42,9 @@
 
   <div class="sidebar">
     <div class="buttons">
-      <button class="save-button">Save</button>
-      <button class="cancel-button plain">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+      <button class="save-button" tabindex="0">Save</button>
+      <button class="cancel-button plain" tabindex="0">Cancel</button>
+      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/contact-form.html

@@ -22,9 +22,9 @@
 
   <div class="sidebar">
     <div class="buttons">
-      <button class="save-button">Save</button>
-      <button class="cancel-button plain">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+      <button class="save-button" tabindex="0">Save</button>
+      <button class="cancel-button plain" tabindex="0">Cancel</button>
+      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/essay-form.html

@@ -46,9 +46,9 @@
 
   <div class="sidebar">
     <div class="buttons">
-      <button class="save-button">Save</button>
-      <button class="cancel-button plain">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+      <button class="save-button" tabindex="0">Save</button>
+      <button class="cancel-button plain" tabindex="0">Cancel</button>
+      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/scene-form.html

@@ -42,9 +42,9 @@
 
   <div class="sidebar">
     <div class="buttons">
-      <button class="save-button">Save</button>
-      <button class="cancel-button plain">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+      <button class="save-button" tabindex="0">Save</button>
+      <button class="cancel-button plain" tabindex="0">Cancel</button>
+      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/site-form.html

@@ -66,9 +66,9 @@
 
   <div class="sidebar">
     <div class="buttons">
-      <button class="save-button">Save</button>
-      <button class="cancel-button plain">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+      <button class="save-button" tabindex="0">Save</button>
+      <button class="cancel-button plain" tabindex="0">Cancel</button>
+      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/sponsor-form.html

@@ -49,9 +49,9 @@
 
   <div class="sidebar">
     <div class="buttons">
-      <button class="save-button">Save</button>
-      <button class="cancel-button plain">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+      <button class="save-button" tabindex="0">Save</button>
+      <button class="cancel-button plain" tabindex="0">Cancel</button>
+      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
     </div>
 
     <div class="top-spacer"></div>