Add error message and disabling of preview button

src/coffee/controllers/item_page_controller.coffee

@@ -166,7 +166,6 @@ module.exports = class ItemPageController extends PageController
                     @model.item.description = ''
 
                 @_descriptionController.model = @model.item.description
-                @_descriptionController.loadImages()
 
     _endEditingDescription: ->
         oldDescription = @model.item.description

src/coffee/controllers/markdown_image_controller.coffee

@@ -89,6 +89,12 @@ module.exports = class MarkdownImageController extends BaseController
             @$loading.hide duration:Duration.normal
             @$loaded.show duration:Duration.normal, queue:true
 
+        if @model.status is MarkdownImage.Status.empty
+            @$errorMessage.html 'please choose an image'
+            @$errorContainer.show duration:Duration.normal
+        else
+            @$errorContainer.hide duration:Duration.normal
+
         super
 
     # Backbone.View Overrides ######################################################################

src/coffee/controllers/markdown_image_list_controller.coffee

@@ -20,15 +20,13 @@ module.exports = class MarkdownImageListController extends BaseController
         super options
 
         @imageBase = ''
+        @_valid = null
 
     # Public Methods ###############################################################################
 
     getImageUrlForFile: (fileName)->
         @model.getImageUrlForFile fileName
 
-    loadImages: ->
-        @model.loadImages()
-
     reset: ->
         @model.reset()
 
@@ -51,17 +49,27 @@ module.exports = class MarkdownImageListController extends BaseController
     setMarkdownText: (markdownText)->
         @model.markdownText = markdownText
 
+    getValid: ->
+        return @_valid
+
     Object.defineProperties @prototype,
         imageBase:    {get:@prototype.getImageBase,    set:@prototype.setImageBase}
         markdownText: {get:@prototype.getMarkdownText, set:@prototype.setMarkdownText}
+        valid:        {get:@prototype.getValid}
 
     # BaseController Overrides #####################################################################
 
+    onDidModelChange: ->
+        super
+        @_setValid @model.valid
+
     onDidRender: ->
         @$imageContainer = @$('.image_container')
         super
 
     refresh: ->
+        @model.loadImages()
+
         @_controllers ?= []
         index = 0
 
@@ -79,3 +87,14 @@ module.exports = class MarkdownImageListController extends BaseController
 
         while @_controllers.length > index
             @_controllers.pop().remove()
+
+    # Private Methods ##############################################################################
+
+    _setValid: (newValid)->
+        oldValid = @_valid
+        return if newValid is oldValid
+
+        @_valid = newValid
+        logger.debug "setting mic.valid to #{@_valid}"
+        @trigger Event.change + ':valid', this, oldValid, newValid
+        @trigger Event.change

src/coffee/controllers/markdown_section_controller.coffee

@@ -54,9 +54,6 @@ module.exports = class MarkdownSectionController extends BaseController
 
     # Public Methods ###############################################################################
 
-    loadImages: ->
-        @_imageListController.loadImages()
-
     resetToDefaultState: ->
         if @model?
             @state = State.viewing
@@ -157,9 +154,12 @@ module.exports = class MarkdownSectionController extends BaseController
             client: @client
             imageBase: @imageBase
         @on Event.change + ':imageBase', => @_imageListController.model.imageBase = @imageBase
+        @listenTo @_imageListController, Event.change + ':valid', => @tryRefresh()
 
         @$errorText     = @$('.error p')
         @$markdownPanel = @$('.markdown')
+        @$previewButton = @$('button.preview')
+        @$saveButton    = @$('button.save')
         @$sizer         = @$('.sizer')
         @$textarea      = @$('textarea')
         @$title         = @$('h2')
@@ -172,6 +172,7 @@ module.exports = class MarkdownSectionController extends BaseController
         @$title.html @title
         @_imageListController.markdownText = @model
 
+        @_updateButtonStates()
         @_updateSizer()
         @_updatePreview()
         super
@@ -208,6 +209,14 @@ module.exports = class MarkdownSectionController extends BaseController
 
             return result
 
+    _updateButtonStates: ->
+        for $button in [ @$previewButton, @$saveButton ]
+            logger.debug "updating buttons based upon valid state: #{@_imageListController.valid}"
+            if @_imageListController.valid
+                $button.prop 'disabled', false
+            else
+                $button.prop 'disabled', true
+
     _updateSizer: ->
         text = @model
         if @model?
@@ -239,9 +248,9 @@ module.exports = class MarkdownSectionController extends BaseController
             errorPanel:        @$('.error')
             imageList:         @$('.image_list')
             markdownPanel:     @$markdownPanel
-            previewButton:     @$('button.preview')
+            previewButton:     @$previewButton
             returnButton:      @$('button.return')
-            saveButton:        @$('button.save')
+            saveButton:        @$saveButton
             waitingPanel:      @$('.waiting')
 
         visible = {}

src/coffee/models/markdown_image.coffee

@@ -61,10 +61,14 @@ module.exports = class MarkdownImage extends BaseModel
 
         return @_mimeType
 
+    isValid: ->
+        return @status in [ Status.creatable, Status.unchanged, Status.updateable ]
+
     Object.defineProperties @prototype,
         fullPath: {get:@prototype.getFullPath}
         imageUrl: {get:@prototype.getImageUrl}
         mimeType: {get:@prototype.getMimeType}
+        valid:    {get:@prototype.isValid}
 
     # BaseModel Overrides ##########################################################################
 

src/coffee/models/markdown_image_list.coffee

@@ -41,6 +41,9 @@ module.exports = class MarkdownImageList extends BaseModel
                 image.fetch()
 
     reset: ->
+        for fileName, image of @_images
+            @stopListening image
+
         @_images = {}
         @_analyzeMarkdownText()
 
@@ -54,13 +57,19 @@ module.exports = class MarkdownImageList extends BaseModel
 
         return result
 
+    isValid: ->
+        for fileName, image of @_images
+            return false unless image.valid
+        return true
+
     Object.defineProperties @prototype,
         all: {get:@prototype.getAll}
+        valid: {get:@prototype.isValid}
 
     # Private Methods ##############################################################################
 
     _analyzeMarkdownText: ->
-        regex = /\!\[([^\]]*)\]\(([^\)]*)\)/g
+        regex = /\!\[([^\]\n]*)\]\(([^\)\n]*)\)/g
         newImages = {}
         changed = false
 
@@ -73,6 +82,7 @@ module.exports = class MarkdownImageList extends BaseModel
                 image = @_images[fileName]
                 if not image?
                     image = new MarkdownImage {fileName:fileName, path:@imageBase}, {client:@client}
+                    @listenTo image, Event.change, => @trigger Event.change, this
                     @trigger Event.add, this, image
                     changed = true
 

src/jade/templates/markdown_image.jade

@@ -8,8 +8,9 @@
 .view__markdown_image
     .loaded
         .thumbnail: img
-        .fileName: p
+        .dynamic
+            .fileName: p
+            .error: p
         button
         input(type="file", accept="image/gif,image/jpeg,image/png" multiple="false")
-    .error: p
     .loading: p checking for image...

src/scss/tags.scss

@@ -31,6 +31,12 @@ button {
         color: $color-active-hover;
     }
 
+    &:disabled {
+        background: $color-white !important;
+        color: $color-gray-light !important;
+        cursor: default !important;
+    }
+
     &.large {
         margin: 2em 0;
         padding: 0.5em 0.5em;

src/scss/templates/markdown_image.scss

@@ -9,7 +9,7 @@ All rights reserved.
     position: relative; min-width: 33em;
 
     display: inline-block;
-    margin: 1em 2em 0 0;
+    margin: 0 2em 1em 0;
     overflow: hidden;
     vertical-align: top;
 
@@ -27,13 +27,16 @@ All rights reserved.
         }
     }
 
-    .fileName {
+    .dynamic {
-        height: 3em;
+        min-height: 7.5em; min-width: 22em;
+        margin: 0 0 3.5em 11em;
 
-        margin: 1em 0 7em 11em;
+        .fileName {
+            min-height: 2em;
 
-        p {
+            p {
-            font-weight: bold;
+                font-weight: bold;
+            }
         }
     }