Add UI/models to allow uploading images
This commit is contained in:
Andrew Miner
@@ -0,0 +1,40 @@
|
||||
###
|
||||
Crafting Guide - markdown_image_controller.coffee
|
||||
|
||||
Copyright (c) 2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
###
|
||||
|
||||
BaseController = require './base_controller'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
module.exports = class MarkdownImageController extends BaseController
|
||||
|
||||
constructor: (options={})->
|
||||
if not options.model? then throw new Error 'options.model is required'
|
||||
options.templateName = 'markdown_image'
|
||||
super
|
||||
|
||||
# BaseController Overrides #####################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@$image = @$('img')
|
||||
@$fileName = @$('.fileName p')
|
||||
@$button = @$('button')
|
||||
super
|
||||
|
||||
refresh: ->
|
||||
if @model.mimeType? and @model.encodedData?
|
||||
@$image.attr 'src', "data:#{@model.mimeType};base64,#{@model.encodedData}"
|
||||
else
|
||||
@$image.attr 'src', '/images/unknown.png'
|
||||
|
||||
@$fileName.html @model.fileName
|
||||
|
||||
if @model.encodedData?
|
||||
@$button.html 'Update'
|
||||
else
|
||||
@$button.html 'Choose'
|
||||
|
||||
super
|
||||
@@ -0,0 +1,55 @@
|
||||
###
|
||||
Crafting Guide - markdown_image_list_controller.coffee
|
||||
|
||||
Copyright (c) 2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
###
|
||||
|
||||
BaseController = require './base_controller'
|
||||
MarkdownImageController = require './markdown_image_controller'
|
||||
MarkdownImageList = require '../models/markdown_image_list'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
module.exports = class MarkdownImageListController extends BaseController
|
||||
|
||||
constructor: (options={})->
|
||||
options.model ?= new MarkdownImageList
|
||||
options.templateName = 'markdown_image_list'
|
||||
super options
|
||||
|
||||
# Property Methods #############################################################################
|
||||
|
||||
getMarkdownText: ->
|
||||
return @model.markdownText
|
||||
|
||||
setMarkdownText: (markdownText)->
|
||||
@model.markdownText = markdownText
|
||||
|
||||
Object.defineProperties @prototype,
|
||||
markdownText: {get:@prototype.getMarkdownText, set:@prototype.setMarkdownText}
|
||||
|
||||
# BaseController Overrides #####################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@$imageContainer = @$('.image_container')
|
||||
super
|
||||
|
||||
refresh: ->
|
||||
@_controllers ?= []
|
||||
index = 0
|
||||
|
||||
for image in @model.all
|
||||
controller = @_controllers[index]
|
||||
if not controller?
|
||||
controller = new MarkdownImageController model:image
|
||||
@_controllers.push controller
|
||||
@$imageContainer.append controller.$el
|
||||
controller.render()
|
||||
else
|
||||
controller.model = image
|
||||
|
||||
index += 1
|
||||
|
||||
while @_controllers.length > index
|
||||
@_controllers.pop().remove()
|
||||
@@ -5,12 +5,13 @@ Copyright (c) 2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
###
|
||||
|
||||
BaseController = require './base_controller'
|
||||
convertMarkdown = require 'marked'
|
||||
_ = require 'underscore'
|
||||
{Event} = require '../constants'
|
||||
{Url} = require '../constants'
|
||||
w = require 'when'
|
||||
_ = require 'underscore'
|
||||
BaseController = require './base_controller'
|
||||
convertMarkdown = require 'marked'
|
||||
{Event} = require '../constants'
|
||||
MarkdownImageListController = require './markdown_image_list_controller'
|
||||
{Url} = require '../constants'
|
||||
w = require 'when'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
@@ -132,6 +133,8 @@ module.exports = class MarkdownSectionController extends BaseController
|
||||
# BaseController Overrides #####################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@_imageListController = @addChild MarkdownImageListController, '.image_list'
|
||||
|
||||
@$errorText = @$('.error p')
|
||||
@$markdownPanel = @$('.markdown')
|
||||
@$sizer = @$('.sizer')
|
||||
@@ -144,6 +147,7 @@ module.exports = class MarkdownSectionController extends BaseController
|
||||
|
||||
refresh: ->
|
||||
@$title.html @title
|
||||
@_imageListController.markdownText = @model
|
||||
|
||||
@_updateSizer()
|
||||
@_updatePreview()
|
||||
@@ -210,6 +214,7 @@ module.exports = class MarkdownSectionController extends BaseController
|
||||
editButton: @$('button.edit')
|
||||
editorPanel: @$('.editor')
|
||||
errorPanel: @$('.error')
|
||||
imageList: @$('.image_list')
|
||||
markdownPanel: @$markdownPanel
|
||||
previewButton: @$('button.preview')
|
||||
returnButton: @$('button.return')
|
||||
@@ -226,7 +231,7 @@ module.exports = class MarkdownSectionController extends BaseController
|
||||
else if @state is State.creating
|
||||
visible = buttonPanel:true, creatingPanel:true, editButton:true
|
||||
else if @state is State.editing
|
||||
visible = buttonPanel:true, cancelButton:true, editorPanel:true, previewButton:true
|
||||
visible = buttonPanel:true, cancelButton:true, editorPanel:true, previewButton:true, imageList:true
|
||||
else if @state is State.previewing
|
||||
visible = buttonPanel:true, errorPanel:true, markdownPanel:true, returnButton:true, saveButton:true
|
||||
errorText = "remember: your changes aren't saved yet!"
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
###
|
||||
Crafting Guide - markdown_image.coffee
|
||||
|
||||
Copyright (c) 2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
###
|
||||
|
||||
BaseModel = require './base_model'
|
||||
{Event} = require '../constants'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
module.exports = class MarkdownImage extends BaseModel
|
||||
|
||||
@MIMETYPES = [
|
||||
{patern:/\.png$/i, text:'image/png'}
|
||||
{patern:/\.gif$/i, text:'image/gif'}
|
||||
{patern:/\.jpg$/i, text:'image/jpeg'}
|
||||
{patern:/\.jpeg$/i, text:'image/jpeg'}
|
||||
]
|
||||
|
||||
constructor: (attributes={}, options={})->
|
||||
attributes.encodedData ?= null
|
||||
attributes.fileName ?= ''
|
||||
attributes.path ?= ''
|
||||
attributes.sha ?= null
|
||||
super
|
||||
|
||||
@on Event.change + ':fileName', => @_mimeType = null
|
||||
|
||||
# Property Methods #############################################################################
|
||||
|
||||
getFullPath: ->
|
||||
return "#{@path}/#{@fileName}"
|
||||
|
||||
getMimeType: ->
|
||||
if not @_mimeType?
|
||||
for mimeType in MarkdownImage.MIMETYPES
|
||||
if mimeType.pattern.test @fileName
|
||||
@_mimeType = mimeType.text
|
||||
break
|
||||
|
||||
return @_mimeType
|
||||
|
||||
Object.defineProperties @prototype,
|
||||
fullPath: {get:@prototype.getFullPath}
|
||||
@@ -0,0 +1,66 @@
|
||||
###
|
||||
Crafting Guide - markdown_image_list.coffee
|
||||
|
||||
Copyright (c) 2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
###
|
||||
|
||||
BaseModel = require './base_model'
|
||||
{Event} = require '../constants'
|
||||
MarkdownImage = require './markdown_image'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
module.exports = class MarkdownImageList extends BaseModel
|
||||
|
||||
constructor: (attributes={}, options={})->
|
||||
attributes.markdownText ?= null
|
||||
super attributes, options
|
||||
|
||||
@_images = {}
|
||||
|
||||
@on Event.change + ':markdownText', => @_analyzeMarkdownText()
|
||||
@_analyzeMarkdownText()
|
||||
|
||||
# Property Methods #############################################################################
|
||||
|
||||
getAll: ->
|
||||
fileNames = (fileName for fileName, image of @_images).sort()
|
||||
result = []
|
||||
for fileName in fileNames
|
||||
result.push @_images[fileName]
|
||||
|
||||
return result
|
||||
|
||||
Object.defineProperties @prototype,
|
||||
all: {get:@prototype.getAll}
|
||||
|
||||
# Private Methods ##############################################################################
|
||||
|
||||
_analyzeMarkdownText: ->
|
||||
regex = /\!\[([^\]]*)\]\(([^\)]*)\)/g
|
||||
newImages = {}
|
||||
changed = false
|
||||
|
||||
if @markdownText?
|
||||
while true
|
||||
match = regex.exec @markdownText
|
||||
break unless match?
|
||||
|
||||
fileName = match[2]
|
||||
image = @_images[fileName]
|
||||
if not image?
|
||||
image = new MarkdownImage fileName:fileName
|
||||
@trigger Event.add, this, image
|
||||
changed = true
|
||||
|
||||
newImages[fileName] = image
|
||||
|
||||
for fileName, image of @_images
|
||||
if not newImages[fileName]?
|
||||
@trigger Event.remove, this, image
|
||||
changed = true
|
||||
|
||||
if changed
|
||||
@_images = newImages
|
||||
@trigger Event.change, this
|
||||
Reference in New Issue
Block a user