wysiwyg.js.coffee in cambium-0.3.0

- old
+ new
@@ -1,10 +1,87 @@
 class Admin.Views.Wysiwyg extends Backbone.View
 
   el: 'body'
   textarea: '.wysiwyg'
+  modal: '#wysihtml5-insert-image-modal'
+  imagesContainer: 'div.images-container'
 
+  imageTemplate: JST['admin/templates/image']
+
+  events:
+    'click a.browse-images': 'initInsertImage'
+
   initialize: (options) =>
+    @initEditor(options)
+    options.image_upload = true if typeof(options.image_upload) == undefined
+    if options.image_upload == true
+      @renderInsertImageModal()
+      @collection = new Admin.Collections.Images options.url
+      @fetchImages()
+      @initImageUpload()
+    else
+      $('a.browse-images').hide()
+
+  initEditor: (options) =>
     editor = new wysihtml5.Editor options.id, #textarea-id
       toolbar: options.toolbarID # id of toolbar element
       parserRules: wysihtml5ParserRules # defined in parser rules set
       stylesheets: [ WYSIWYG_BASE_STYLES, WYSIWYG_CUSTOM_STYLES ] # defined in admin.html.erb
+
+  fetchImages: =>
+    @collection.fetch
+      success: (images) =>
+        @images = images.toJSON()
+        @renderImages()
+        $("#{@imagesContainer} img").click (e) =>
+          $('input.insert-image').val window.location.origin+$(e.target).data('src')
+          @closeModal()
+
+  renderImages: =>
+    $(@imagesContainer).html ""
+    if @images.length > 0
+      _.each @images, (image) =>
+        if image.filename
+          $(@imagesContainer).append @imageTemplate(image: image)
+
+  renderInsertImageModal: =>
+    $(window).resize(@positionInsertImageModal)
+    $("#{@modal} .modal a.close").click @closeModal
+
+  closeModal: =>
+    $(@modal).hide()
+    $(@el).css
+      overflow: 'auto'
+      height: 'auto'
+
+  initInsertImage: (e) =>
+    $(@el).css
+      overflow: 'hidden'
+      height: '100%'
+    @fetchImages()
+    @positionInsertImageModal()
+    $(@modal).show()
+
+  positionInsertImageModal: =>
+    ww = $(window).width()
+    wh = $(window).height()
+    left = ( ww / 2 ) - 331
+    top = ( wh / 2 ) - 200
+    $("#{@modal} .modal").css
+      top: "#{top}px"
+      left: "#{left}px"
+
+  initImageUpload: =>
+    $("#image_filename").attr "name", "image[filename]"
+    $("#new_image").fileupload
+      add: (e,data) ->
+        $(".images-container").prepend """
+          <div class="loading">Uploading #{data.files[0].name}...</div>
+            """
+        data.submit()
+      complete: (e,data) =>
+        @fetchImages()
+        $(".images-container div.loading").first().remove()
+        # $(".images-container div.loading").insertBefore( $(".images-container img").first() )
+        $(".images-container img").click (e) =>
+          $('input.insert-image').val $(e.target).data('src')
+          @closeModal()