From 4e39b9bb0cbc8c71ca0e7d9864f834127773da04 Mon Sep 17 00:00:00 2001 From: Andrew Miner Date: Mon, 8 Jun 2015 12:27:36 -0700 Subject: [PATCH] Add error message and disabling of preview button --- .../controllers/item_page_controller.coffee | 1 - .../markdown_image_controller.coffee | 6 +++++ .../markdown_image_list_controller.coffee | 25 ++++++++++++++++--- .../markdown_section_controller.coffee | 19 ++++++++++---- src/coffee/models/markdown_image.coffee | 4 +++ src/coffee/models/markdown_image_list.coffee | 12 ++++++++- src/jade/templates/markdown_image.jade | 5 ++-- src/scss/tags.scss | 6 +++++ src/scss/templates/markdown_image.scss | 15 ++++++----- 9 files changed, 75 insertions(+), 18 deletions(-) diff --git a/src/coffee/controllers/item_page_controller.coffee b/src/coffee/controllers/item_page_controller.coffee index d896c8594..c7c7212cf 100644 --- a/src/coffee/controllers/item_page_controller.coffee +++ b/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 diff --git a/src/coffee/controllers/markdown_image_controller.coffee b/src/coffee/controllers/markdown_image_controller.coffee index 4ec87a8a7..1ef83f1fe 100644 --- a/src/coffee/controllers/markdown_image_controller.coffee +++ b/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 ###################################################################### diff --git a/src/coffee/controllers/markdown_image_list_controller.coffee b/src/coffee/controllers/markdown_image_list_controller.coffee index cd19c3e9f..45d3b0e7b 100644 --- a/src/coffee/controllers/markdown_image_list_controller.coffee +++ b/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 diff --git a/src/coffee/controllers/markdown_section_controller.coffee b/src/coffee/controllers/markdown_section_controller.coffee index 1a8223ace..322637394 100644 --- a/src/coffee/controllers/markdown_section_controller.coffee +++ b/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 = {} diff --git a/src/coffee/models/markdown_image.coffee b/src/coffee/models/markdown_image.coffee index d92b902e3..b7ead70fe 100644 --- a/src/coffee/models/markdown_image.coffee +++ b/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 ########################################################################## diff --git a/src/coffee/models/markdown_image_list.coffee b/src/coffee/models/markdown_image_list.coffee index 9720ba758..f79d7f4d8 100644 --- a/src/coffee/models/markdown_image_list.coffee +++ b/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 diff --git a/src/jade/templates/markdown_image.jade b/src/jade/templates/markdown_image.jade index 99730406f..0e6004b38 100644 --- a/src/jade/templates/markdown_image.jade +++ b/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... diff --git a/src/scss/tags.scss b/src/scss/tags.scss index 47f4cacd9..b84a7b563 100644 --- a/src/scss/tags.scss +++ b/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; diff --git a/src/scss/templates/markdown_image.scss b/src/scss/templates/markdown_image.scss index 4b37447b6..dd184cb80 100644 --- a/src/scss/templates/markdown_image.scss +++ b/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 { - height: 3em; + .dynamic { + min-height: 7.5em; min-width: 22em; + margin: 0 0 3.5em 11em; - margin: 1em 0 7em 11em; + .fileName { + min-height: 2em; - p { - font-weight: bold; + p { + font-weight: bold; + } } }