Merge pull request #80 from it3s/media

Media

app/assets/javascripts/components/picture.js.coffee

@@ -0,0 +1,29 @@
+App.components.picture = ->
+  attributes: ->
+    saveButton:   @container.find('.save-button')
+    deleteButton: @container.find('.delete-button')
+
+  initialize: ->
+    @on @attr.saveButton,   'click', @onSave
+    @on @attr.deleteButton, 'click', @onDelete
+
+  onSave: (evt) ->
+    evt.preventDefault()
+    @xhrRequest('update')
+
+  onDelete: (evt) ->
+    evt.preventDefault()
+    @xhrRequest('delete')
+
+  xhrRequest: (type) ->
+    method = if type is 'delete' then 'DELETE'  else 'PUT'
+    action = if type is 'delete' then 'deleted' else 'updated'
+    $.ajax
+      type:     method
+      url:      @attr.url
+      dataType: "json"
+      data:     {picture: {description: @container.find('#description').val()}}
+      success:  (data) =>
+        App.mediator.publish "picture:#{action}", data
+        App.utils.flashMessage(data.flash)
+        App.mediator.publish 'modal:close'

app/assets/javascripts/components/pictureUploader.js.coffee

@@ -0,0 +1,41 @@
+
+App.components.pictureUploader = ->
+  _.extend App.components.uploader(), {
+
+    buttonLabel: "<i class='fa fa-plus'></i>#{I18n.uploader.picture}"
+
+    picturesList: $('.pictures-thumbs')
+
+    pictureThumb: """
+    <li data-picture_id="<%= id %>" >
+      <a href='<%= show_url %>' class='thumb' data-components='modal' data-modal-options='{"remote":"true"}'>
+        <img class='thumb-image' src='<%= image_url %>' ></img>
+      </a>
+    </li>
+    """
+
+    afterInitialize: ->
+      App.mediator.subscribe "picture:updated", @onUpdate.bind(this)
+      App.mediator.subscribe "picture:deleted", @onDelete.bind(this)
+
+    onDone: (e, data) ->
+      setTimeout( =>
+        console.log data.result
+        @addPictureThumb data.result
+        App.utils.flashMessage(data.result.flash)
+        @reset()
+      , 200)
+
+    addPictureThumb: (result) ->
+      picture = $ _.template(@pictureThumb, result)
+      @picturesList.prepend picture
+      App.mediator.publish 'components:start', picture
+
+    onUpdate: (evt, data) ->
+      @picturesList.find("[data-picture_id=#{data.id}]").attr('title', data.description)
+
+    onDelete: (evt, data) ->
+      picture = @picturesList.find("[data-picture_id=#{data.id}]")
+      picture.fadeOut -> picture.remove()
+
+  }

app/assets/javascripts/components/uploader.js.coffee

@@ -2,26 +2,26 @@
 
 uploaderTemplate = """
   <div class="uploader">
-    <div class="upload-success">#{I18n.uploader.uploaded}</div>
-    <span class="upload-button">#{I18n.uploader.select_image}</span>
+    <span class="upload-button"><%= buttonLabel %></span>
   </div>
 """
 
 App.components.uploader = ->
+  buttonLabel: I18n.uploader.select_image
+
   attributes: ->
-    _uploader = $(uploaderTemplate)
+    _uploader = $ _.template(uploaderTemplate, buttonLabel: @buttonLabel)
     {
       field:    @container.closest('.field')
-      url:      @container.closest('form').attr('action')
       uploader: _uploader
       button:   _uploader.find('.upload-button')
-      message:  _uploader.find('.upload-success')
     }
 
   initialize: ->
     @render()
     @on @attr.button, 'click', (evt) => @container.trigger 'click'
     @startPlugin()
+    @afterInitialize?()
 
   render: ->
     @attr.field.hide()
@@ -42,17 +42,26 @@ App.components.uploader = ->
     @attr.button.append "<i class=\"fa fa-spinner fa-spin\"></i>"
     data.submit()
 
-  onDone: ->
-    setTimeout @showMessage.bind(this), 200
+  onDone: (e, data) ->
+    setTimeout( =>
+      @reloadImage(data.result)
+      App.utils.flashMessage(data.result.flash)
+      @reset()
+    , 200)
 
   onFail: (evt, data) ->
-    @attr.button.find('i').remove()
-    @attr.button.text I18n.uploader.select_image
     @attr.button.after "<span class='error'>#{ @getErrorMsg(data) }</span>"
-    @startPlugin() # restart plugin (kludge for retrying uploads)
+    @reset()
 
-  showMessage: ->
-    @attr.button.fadeOut => @attr.message.fadeIn()
+  reloadImage: (res) ->
+    img = $(".avatar img")
+    img.fadeOut ->
+      img.attr("src", res.avatar + '?' + (new Date()).getTime()).fadeIn()
+
+  reset: ->
+    @attr.button.find('i').remove()
+    @attr.button.html @buttonLabel
+    @startPlugin() # restart plugin (kludge for retrying uploads)
 
   getErrorMsg: (data) ->
     errors = data.jqXHR.responseJSON.errors

app/assets/stylesheets/application.css.scss

@@ -60,3 +60,4 @@
 @import "relations";
 @import "activities";
 @import "notifications";
+@import "pictures";

app/assets/stylesheets/core/_mixins.css.scss

@@ -58,6 +58,10 @@
   @include button($meppit-dark-blue, lighten($meppit-dark-blue, 10%), $white, $border: $border);
 }
 
+@mixin red-button {
+  @include button($dark-red, $red, $white, $border: $dark-red);
+}
+
 @mixin map-view() {
   clear: both;
   width: 100%;

app/assets/stylesheets/pictures.css.scss

@@ -0,0 +1,74 @@
+.pictures {
+
+  .uploader .upload-button {
+    @include button;
+    width: auto;
+
+    i { margin-right: 5px; }
+  }
+
+  .pictures-thumbs {
+    margin-top: 10px;
+    margin-left: -5px;
+
+    li { display: inline-block; }
+
+    .thumb {
+      display: inline-block;
+      border-radius: 5px;
+      padding: 10px;
+      margin: 5px;
+      background-color: $meppit-light-blue;
+      vertical-align: top;
+      width: 125px;
+      height: 125px;
+
+      &:hover {
+        background-color: $meppit-blue;
+      }
+
+      .thumb-image {
+        width: 105px;
+        max-height: 105px;
+        border-radius: 5px;
+
+      }
+    }
+  }
+}
+
+.picture {
+  .picture-image {
+    text-align: center;
+
+    img {
+      max-width: 400px;
+      max-height: 400px;
+    }
+  }
+
+  .picture-description {
+    margin-top: 10px;
+
+    textarea {
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  .actions {
+    position: relative;
+    text-align: center;
+    margin-top: 10px;
+
+    .delete-button {
+      @include red-button;
+      display: inline-block;
+      margin-right: 40px;
+    }
+    .save-button {
+      @include green-button;
+      display: inline-block;
+    }
+  }
+}

app/controllers/pictures_controller.rb

@@ -0,0 +1,59 @@
+class PicturesController < ApplicationController
+  before_action :require_login, only: [:upload, :update, :destroy]
+  before_action :find_content
+  before_action :find_picture,  only: [:show, :update, :destroy]
+  before_action :set_edit_mode, only: [:show]
+
+  def upload
+    @picture = Picture.new picture_params
+
+    if @picture.valid? && @picture.save
+      render json: success_json
+    else
+      render json: {errors: @picture.errors.messages}, status: :unprocessable_entity
+    end
+  end
+
+  def show
+    render layout: nil if request.xhr?
+  end
+
+  def update
+    @picture.description = params[:picture][:description] unless params[:picture][:description].blank?
+    @picture.save
+    render json: success_json
+  end
+
+  def destroy
+    @picture.destroy
+    render json: {id: @picture.id, flash: flash_xhr(t 'flash.deleted')}
+  end
+
+  private
+
+    def success_json
+      {
+        id: @picture.id,
+        description: @picture.description,
+        image_url: @picture.image.url,
+        show_url: url_for([@content, @picture]),
+        flash: flash_xhr(t "flash.#{ params[:action] == 'upload' ? 'file_uploaded' : 'saved' }")
+      }
+    end
+
+    def picture_params
+      { image: params[:picture], author: current_user, content: @content }
+    end
+
+    def find_content
+      @content = find_polymorphic_object
+    end
+
+    def find_picture
+      @picture = Picture.find params[:id]
+    end
+
+    def set_edit_mode
+      @edit_enabled = request.env.fetch('HTTP_REFERER', '').split('/').last == 'edit'
+    end
+end

app/controllers/users_controller.rb

@@ -1,9 +1,9 @@
 class UsersController < ApplicationController
   include PasswordResets
 
-  before_action :require_login,      only: [:edit, :update]
-  before_action :find_user,          only: [:show, :edit, :update]
-  before_action :is_current_user,    only: [:edit, :update]
+  before_action :require_login,      only: [:edit, :update, :upload_avatar]
+  before_action :find_user,          only: [:show, :edit, :update, :upload_avatar]
+  before_action :is_current_user,    only: [:edit, :update, :upload_avatar]
   before_action :contributions_list, only: [:show]
   before_action :following_list,     only: [:show]
   before_action :activities_list,    only: [:show]
@@ -46,6 +46,16 @@ def update
     save_object @user, user_params
   end
 
+  def upload_avatar
+    @user.avatar = user_params[:avatar]
+    if @user.valid? && @user.save
+      EventBus.publish "user_updated", user: @user, current_user: current_user, changes: {'avatar'=>[]}
+      render json: {avatar: @user.avatar.url, flash: flash_xhr(t "flash.file_uploaded")}
+    else
+      render json: {errors: @user.errors.messages}, status: :unprocessable_entity
+    end
+  end
+
   private
 
     def user_params

app/models/geo_data.rb

@@ -15,6 +15,7 @@ class GeoData < ActiveRecord::Base
   search_fields scoped: :name, multi: [:name, :description]
   has_maps
   has_paper_trail ignore: [:id, :created_at, :updated_at]
+  has_many :pictures, as: :content
 
   validates :name, presence: true
 

app/models/picture.rb

@@ -0,0 +1,12 @@
+class Picture < ActiveRecord::Base
+  mount_uploader :image, PictureUploader
+  process_in_background :image
+
+  belongs_to :content, polymorphic: true
+  belongs_to :author, class_name: 'User'
+
+
+  validates :image, presence: true
+  validates :author,  presence: true
+
+end

app/uploaders/picture_uploader.rb

@@ -0,0 +1,21 @@
+# encoding: utf-8
+
+class PictureUploader < CarrierWave::Uploader::Base
+  include ::CarrierWave::Backgrounder::Delay
+  include CarrierWave::MiniMagick
+
+  storage :file
+
+  def store_dir
+    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+
+  version :thumb do
+    process :resize_to_fit => [240, 200]
+  end
+
+  def extension_white_list
+    %w(jpg jpeg png)
+  end
+
+end

app/views/geo_data/_content.html.erb

@@ -31,7 +31,7 @@
       <%= render 'relations/show', relations: geo_data.relations_values %>
     </div>
     <div class="tab-content" id="media">
-      Media Placeholder
+      <%= render 'pictures/gallery', object: geo_data %>
     </div>
     <div class="tab-content" id="talk">
       Talk Placeholder

app/views/geo_data/_content_edit.html.erb

@@ -26,7 +26,7 @@
       <%= render 'relations/edit', f: f %>
     </div>
     <div class="tab-content" id="media">
-      Media Placeholder
+      <%= render 'pictures/uploader', object: geo_data %>
     </div>
     <div class="tab-content" id="talk">
       Talk Placeholder

app/views/pictures/_gallery.html.erb

@@ -0,0 +1,9 @@
+<section class="pictures">
+
+  <% if object.pictures.count > 0 %>
+    <%= render 'pictures/thumbs_list', object: object %>
+  <% else %>
+    <p class="empty"><%= t 'components.picture.empty', {name: object.try(:name)} %></p>
+  <% end %>
+
+</section>