diff --git a/src/coffee/controllers/markdown_image_controller.coffee b/src/coffee/controllers/markdown_image_controller.coffee index 942df8c23..fe81f1524 100644 --- a/src/coffee/controllers/markdown_image_controller.coffee +++ b/src/coffee/controllers/markdown_image_controller.coffee @@ -17,17 +17,38 @@ module.exports = class MarkdownImageController extends BaseController options.templateName = 'markdown_image' super + # Event Methods ################################################################################ + + onButtonClicked: -> + @$input.click() + + onFileChanged: -> + file = @$input.prop('files')[0] + @_reader = new FileReader + @_reader.onload = => + index = @_reader.result.indexOf ',' + meta = @_reader.result.substring 0, index + encodedData = @_reader.result.substring index + 1 + + match = meta.match /data:(.*);(.*)/ + mimeType = match[1] + encoding = match[2] + + logger.debug "uploaded #{encodedData.length} bytes as #{mimeType} in #{encoding}" + + @_reader.readAsDataURL file + # BaseController Overrides ##################################################################### onDidRender: -> @$image = @$('img') @$fileName = @$('.fileName p') @$button = @$('button') + @$input = @$('input') + super refresh: -> - logger.debug "refreshing with model: #{@model.mimeType}, #{_.ellipsize(@model.encodedData)}" - if @model.mimeType? and @model.encodedData? @$image.attr 'src', "data:#{@model.mimeType};base64,#{@model.encodedData}" else @@ -41,3 +62,10 @@ module.exports = class MarkdownImageController extends BaseController @$button.html 'Choose' super + + # Backbone.View Overrides ###################################################################### + + events: -> + return _.extend super, + 'click button': 'onButtonClicked' + 'change input': 'onFileChanged' diff --git a/src/jade/templates/markdown_image.jade b/src/jade/templates/markdown_image.jade index 0d6288ed4..89f2d6876 100644 --- a/src/jade/templates/markdown_image.jade +++ b/src/jade/templates/markdown_image.jade @@ -9,3 +9,4 @@ .thumbnail: img .fileName: p button + input(type="file", accept="image/gif,image/jpeg,image/png" multiple="false") diff --git a/src/scss/main.scss b/src/scss/main.scss index 066497a16..58e7284c4 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -84,6 +84,7 @@ $color-link: #0000FF; $color-link-subtle: #545A99; $color-text: #000000; $color-text-light: #FFFFFF; +$color-white: #FFFFFF; // Z-Index Layers ////////////////////////////////////////////////////////////////////////////////// diff --git a/src/scss/tags.scss b/src/scss/tags.scss index 0de72e9bb..47f4cacd9 100644 --- a/src/scss/tags.scss +++ b/src/scss/tags.scss @@ -18,10 +18,16 @@ button { cursor: pointer; font-size: $font-size-normal; font-weight: bold; + outline: none; padding: 0.1em 1em; + &:active { + background: $color-active; + color: $color-white; + } + &:hover { - background: white; + background: $color-white; color: $color-active-hover; } diff --git a/src/scss/templates/markdown_image.scss b/src/scss/templates/markdown_image.scss index 7b6c10302..85b60d951 100644 --- a/src/scss/templates/markdown_image.scss +++ b/src/scss/templates/markdown_image.scss @@ -39,4 +39,10 @@ All rights reserved. button { position: absolute; left: 7.33em; bottom: 0.66em; } + + input { + position: absolute; + visibility: none; + z-index: -1; + } } \ No newline at end of file