split out topic card uploads scss file

fix uploader icons
unfinished, not rebased, topic card uploads
2018-02-05 21:43:26 -08:00 · 2018-02-05 21:43:26 -08:00 · 2018-02-05 21:43:26 -08:00 · 2018-02-05 21:43:10 -08:00 · 2018-02-05 21:39:30 -08:00 · 2018-02-05 21:39:30 -08:00
43 changed files with 941 additions and 202 deletions
--- a/app/assets/images/attachmentFileTypeIcons/open-iconic-document.svg
+++ b/app/assets/images/attachmentFileTypeIcons/open-iconic-document.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="document" viewBox="0 0 8 8">
+  <path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z" />
+</svg>
--- a/app/assets/images/attachmentFileTypeIcons/open-iconic-file.svg
+++ b/app/assets/images/attachmentFileTypeIcons/open-iconic-file.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="file" viewBox="0 0 8 8">
+  <path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3z" />
+</svg>
--- a/app/assets/images/attachmentFileTypeIcons/open-iconic-image.svg
+++ b/app/assets/images/attachmentFileTypeIcons/open-iconic-image.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="image" viewBox="0 0 8 8">
+  <path d="M0 0v8h8v-8h-8zm1 1h6v3l-1-1-1 1 2 2v1h-1l-4-4-1 1v-3z" />
+</svg>
--- a/app/assets/images/attachmentFileTypeIcons/open-iconic-musical-note.svg
+++ b/app/assets/images/attachmentFileTypeIcons/open-iconic-musical-note.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="musical-note" viewBox="0 0 8 8">
+  <path d="M8 0c-5 0-6 1-6 1v4.093999999999999c-.154-.054-.327-.094-.5-.094-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5v-3.969c.732-.226 1.99-.438 4-.5v2.063c-.154-.054-.327-.094-.5-.094-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5v-5.5z"
+  />
+</svg>
--- a/app/assets/images/attachmentFileTypeIcons/open-iconic-question-mark.svg
+++ b/app/assets/images/attachmentFileTypeIcons/open-iconic-question-mark.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="question-mark" data-container-transform="translate(2)" viewBox="0 0 8 8">
+  <path d="M4.469 0c-.854 0-1.48.256-1.875.656s-.54.901-.594 1.281l1 .125c.036-.26.125-.497.313-.688.188-.19.491-.375 1.156-.375.664 0 1.019.163 1.219.344.199.181.281.405.281.656 0 .833-.313 1.063-.813 1.5-.5.438-1.188 1.083-1.188 2.25v.25h1v-.25c0-.833.344-1.063.844-1.5.5-.438 1.156-1.083 1.156-2.25 0-.479-.168-1.02-.594-1.406-.426-.387-1.071-.594-1.906-.594zm-.5 7v1h1v-1h-1z"
+  />
+</svg>
--- a/app/assets/images/recording-button.png
+++ b/app/assets/images/recording-button.png
--- a/app/assets/images/upload_icons/CameraIcons.png
+++ b/app/assets/images/upload_icons/CameraIcons.png
--- a/app/assets/images/upload_icons/CloudIcons.png
+++ b/app/assets/images/upload_icons/CloudIcons.png
--- a/app/assets/images/upload_icons/LinkIcons.png
+++ b/app/assets/images/upload_icons/LinkIcons.png
--- a/app/assets/images/upload_icons/MicIcons.png
+++ b/app/assets/images/upload_icons/MicIcons.png
--- a/app/assets/javascripts/Metamaps.ServerData.js.erb
+++ b/app/assets/javascripts/Metamaps.ServerData.js.erb
@ -13,6 +13,13 @@ Metamaps.ServerData['sounds/MM_sounds.ogg'] = '<%= asset_path 'sounds/MM_sounds.
 Metamaps.ServerData['exploremaps_sprite.png'] = '<%= asset_path 'exploremaps_sprite.png' %>'
 Metamaps.ServerData['map_control_sprite.png'] = '<%= asset_path 'map_control_sprite.png' %>'
 Metamaps.ServerData['user_sprite.png'] = '<%= asset_path 'user_sprite.png' %>'
+Metamaps.ServerData.attachmentFileTypeIcons = {
+  pdf: '<%= asset_path('attachmentFileTypeIcons//open-iconic-document.svg') %>',
+  text: '<%= asset_path('attachmentFileTypeIcons//open-iconic-file.svg') %>',
+  image: '<%= asset_path('attachmentFileTypeIcons//open-iconic-image.svg') %>',
+  audio: '<%= asset_path('attachmentFileTypeIcons//open-iconic-musical-note.svg') %>',
+  unknown: '<%= asset_path('attachmentFileTypeIcons//open-iconic-question-mark.svg') %>'
+}
 Metamaps.ServerData.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>
 Metamaps.ServerData.REALTIME_SERVER = '<%= ENV['REALTIME_SERVER'] %>'
 Metamaps.ServerData.RAILS_ENV = '<%= ENV['RAILS_ENV'] %>'
--- a/app/assets/stylesheets/base.scss.erb
+++ b/app/assets/stylesheets/base.scss.erb
@ -197,6 +197,7 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);

 .CardOnGraph .links {
  position: relative;
+  background-color: #e0e0e0;
  z-index: 2;

  .linkItem {
@ -625,156 +626,6 @@ background-color: #E0E0E0;
 z-index:100;
 }

-#embedlyLinkLoader {
-  margin: 0 auto;
-  width: 28px;
-}
-
-.CardOnGraph .link-adder {
-  width:100%;
-  height:47px;
-  position: relative;
-}
-
-.link-adder a {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  margin-left: 40px;
-  padding-top:9px;
-  font-size: 16px;
-  line-height: 16px;
-}
-
-#addlink, #addupload {
-  display: inline-block;
-  width: 102px;
-  height: 12px;
-  text-align: left;
-  padding: 18px 0 18px 48px;
-  font-size: 12px;
-  color: #9e9e9e;
-  cursor: pointer;
-  position: relative;
-}
-
-#addlink:hover, #addupload:hover {
-  color: #616161;
-}
-
-.attachmentIcon {
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 12px;
-  left: 12px;
-}
-#linkIcon {
-  background-image: url(<%= asset_data_uri('link_sprite.png') %>);
-}
-#uploadIcon {
-  background-image: url(<%= asset_data_uri('upload_sprite.png') %>);
-}
-#addlink:hover #linkIcon, #addupload:hover #uploadIcon {
-  background-position: 0 -24px;
-}
-
-.addLink {
-  position: relative;
-}
-#addLinkInput {
-  height: 32px;
-  width: 268px;
-  padding: 8px 16px 8px 16px;
-  position: relative;
-  border: none;
-  line-height: 14px;
-}
-
-#addLinkInput input{
-padding: 9px 27px 9px 31px;
-height: 12px;
-width: 210px;
-margin: 0 0 0 0;
-border: none;
-outline: none;
-font-size: 12px;
-line-height: 12px;
-background: white;
-color: black;
-font-family: 'din-regular', helvetica, sans-serif;
-}
-#addLinkIcon {
-  position: absolute;
-  top: 12px;
-  left: 20px;
-  width: 24px;
-  height: 24px;
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-image: url(<%= asset_data_uri('link_sprite.png') %>);
-  pointer-events: none;
-  z-index: 1;
-}
-
-#addLinkReset {
-  position: absolute;
-  top: 8px;
-  right: 15px;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  float:none;
-  background-image: url(<%= asset_data_uri('remove.png') %>);
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.embeds.nonEmbedlyLink {
-  padding-top: 24px;
-}
-
-#embedlyLink {
-  border-left: 8px solid #CCC;
-  overflow: hidden;
-  padding: 8px;
-  padding-left: 12px;
-  -moz-box-shadow: 1px 1px 5px 0 #ccc;
-  -webkit-box-shadow: 1px 1px 5px 0 #ccc;
-  box-shadow: 1px 1px 5px 0 #ccc;
-  -moz-border-radius-topright: 5px;
-  -webkit-border-top-right-radius: 5px;
-  border-top-right-radius: 5px;
-  -moz-border-radius-bottomright: 8px;
-  -webkit-border-bottom-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-  margin: 8px;
-}
-
-.linkActions {
-  position: relative;
-}
-
-.CardOnGraph .embeds {
-  position: relative;
-  overflow: hidden;
-}
-
-#linkremove {
-  background-image: url(<%= asset_data_uri 'remove.png' %>);
-  background-repeat: no-repeat;
-  background-position: center center;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 3px;
-  right: 0;
-  cursor: pointer;
-}
-
 .cardSettings {
  position: absolute;
  left: 12px;
--- a/app/assets/stylesheets/topic_card_uploads.scss
+++ b/app/assets/stylesheets/topic_card_uploads.scss
@ -0,0 +1,254 @@
+$attachment_button_size: 32px;
+
+.attachments {
+  border-top: 1px solid #bdbdbd;
+  position: relative;
+  min-height: 3em;
+
+  .file {
+    margin-top: 0.75em;
+    max-width: 85%;
+
+    .filetype-icon {
+      width: 16px;
+      height: 16px;
+      padding: 0.5em;
+      padding-top: 0;
+      float: left;
+    }
+  }
+}
+
+.upload-audio-start,
+.upload-file-dropzone,
+.upload-photo-dropzone,
+.CardOnGraph .attachment-type-chooser > div {
+  text-align: center;
+  color: #cccccc;
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover {
+    color: #999999;
+  }
+
+  &.photo-upload > div {
+    background-image: url(<%= asset_path('upload_icons/CameraIcons.png') %>);
+  }
+  &.link-upload > div {
+    background-image: url(<%= asset_path('upload_icons/LinkIcons.png') %>);
+  }
+  &.audio-upload > div {
+    background-image: url(<%= asset_path('upload_icons/MicIcons.png') %>);
+  }
+  &.file-upload > div {
+    background-image: url(<%= asset_path('upload_icons/CloudIcons.png') %>);
+  }
+}
+
+.photo-upload,
+.link-upload,
+.audio-upload,
+.file-upload {
+  background-repeat: no-repeat;
+  background-size: $attachment_button_size $attachment_button_size;
+  background-position: 0 center;
+  width: $attachment_button_size;
+  height: $attachment_button_size;
+
+  & > div {
+    width: $attachment_button_size;
+    height: $attachment_button_size;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding-top: $attachment_button_size;
+    background-size: $attachment_button_size;
+
+    &:hover {
+      background-position: 0 $attachment_button_size;
+    }
+  }
+
+}
+
+.upload-audio-start,
+.upload-file-dropzone,
+.upload-photo-dropzone {
+  padding-top: 0.75em;
+}
+
+.upload-audio-recording {
+  font-size: small;
+  color: #aaa;
+  text-align: center;
+}
+
+$recording_button_size: 48px;
+.upload-audio-stop {
+  background-image: url(<%= asset_path('recording-button.png') %>);
+  background-size: $recording_button_size;
+  width: $recording_button_size;
+  height: $recording_button_size;
+  margin: 0 auto;
+  cursor: pointer;
+}
+
+.CardOnGraph .attachment-type-chooser {
+  padding-top: .75em;
+
+  & > div {
+    display: inline-block;
+    width: 25%;
+  }
+}
+
+#embedlyLinkLoader {
+  margin: 0 auto;
+  width: 28px;
+}
+
+.CardOnGraph .link-chooser {
+  width:100%;
+  height:47px;
+  position: relative;
+}
+
+.link-chooser a {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-left: 40px;
+  padding-top:9px;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+#addlink, #addupload {
+  display: inline-block;
+  width: 102px;
+  height: 12px;
+  text-align: left;
+  padding: 18px 0 18px 48px;
+  font-size: 12px;
+  color: #9e9e9e;
+  cursor: pointer;
+  position: relative;
+}
+
+#addlink:hover, #addupload:hover {
+  color: #616161;
+}
+
+.attachmentIcon {
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+#linkIcon {
+  background-image: url(<%= asset_data_uri('link_sprite.png') %>);
+}
+#uploadIcon {
+  background-image: url(<%= asset_data_uri('upload_sprite.png') %>);
+}
+#addlink:hover #linkIcon, #addupload:hover #uploadIcon {
+  background-position: 0 -24px;
+}
+
+.addLink {
+  position: relative;
+}
+
+#addLinkInput {
+  height: 32px;
+  width: 268px;
+  padding: 8px 16px 8px 16px;
+  position: relative;
+  border: none;
+  line-height: 14px;
+}
+
+#addLinkInput input{
+  padding: 9px 27px 9px 31px;
+  height: 12px;
+  width: 210px;
+  margin: 0 0 0 0;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  line-height: 12px;
+  background: white;
+  color: black;
+  font-family: 'din-regular', helvetica, sans-serif;
+}
+#addLinkIcon {
+  position: absolute;
+  top: 12px;
+  left: 20px;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-image: url(<%= asset_data_uri('link_sprite.png') %>);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.attachment-cancel {
+  position: absolute;
+  top: 8px;
+  right: 15px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  float:none;
+  background-image: url(<%= asset_data_uri('remove.png') %>);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.embeds.nonEmbedlyLink {
+  padding-top: 24px;
+}
+
+#embedlyLink {
+  border-left: 8px solid #CCC;
+  overflow: hidden;
+  padding: 8px;
+  padding-left: 12px;
+  -moz-box-shadow: 1px 1px 5px 0 #ccc;
+  -webkit-box-shadow: 1px 1px 5px 0 #ccc;
+  box-shadow: 1px 1px 5px 0 #ccc;
+  -moz-border-radius-topright: 5px;
+  -webkit-border-top-right-radius: 5px;
+  border-top-right-radius: 5px;
+  -moz-border-radius-bottomright: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  margin: 8px;
+}
+
+.linkActions {
+  position: relative;
+}
+
+.CardOnGraph .embeds {
+  position: relative;
+  overflow: hidden;
+}
+
+#linkremove {
+  background-image: url(<%= asset_data_uri 'remove.png' %>);
+  background-repeat: no-repeat;
+  background-position: center center;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 3px;
+  right: 0;
+  cursor: pointer;
+}
--- a/app/controllers/api/v2/attachments_controller.rb
+++ b/app/controllers/api/v2/attachments_controller.rb
@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Api
+  module V2
+    class AttachmentsController < RestfulController
+      def searchable_columns
+        [:file]
+      end
+    end
+  end
+end
--- a/app/controllers/attachments_controller.rb
+++ b/app/controllers/attachments_controller.rb
@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class AttachmentsController < ApplicationController
+  before_action :set_attachment, only: [:destroy]
+  after_action :verify_authorized
+
+  def create
+    @attachment = Attachment.new(attachment_params)
+    authorize @attachment
+
+    respond_to do |format|
+      if @attachment.save
+        format.json { render json: @attachment, status: :created }
+      else
+        format.json { render json: @attachment.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  def destroy
+    @attachment.destroy
+    respond_to do |format|
+      format.json { head :no_content }
+    end
+  end
+
+  private
+
+  def set_attachment
+    @attachment = Attachment.find(params[:id])
+    authorize @attachment
+  end
+
+  def attachment_params
+    params.require(:attachment).permit(:id, :file, :attachable_id, :attachable_type)
+  end
+end
--- a/app/models/attachment.rb
+++ b/app/models/attachment.rb
@ -15,7 +15,9 @@ class Attachment < ApplicationRecord
                      end
                    }

+  validates :attachable, presence: true
  validates_attachment_content_type :file, content_type: Attachable.allowed_types
+  validates_attachment_size :file, :in => 0.megabytes..5.megabytes

  def image?
    Attachable.image_types.include?(file.instance.file_content_type)
--- a/app/models/concerns/attachable.rb
+++ b/app/models/concerns/attachable.rb
@ -33,7 +33,8 @@ module Attachable
    end

    def audio_types
-      ['audio/ogg', 'audio/mp3']
+      # .ogg files might be labelled as video
+      ['audio/ogg', 'video/ogg', 'audio/mpeg', 'audio/wav', 'video/webm']
    end

    def text_types
--- a/app/models/topic.rb
+++ b/app/models/topic.rb
@ -69,10 +69,23 @@ class Topic < ApplicationRecord
    Pundit.policy_scope(user, maps).map(&:id)
  end

+  def attachments_json
+    attachments.map do |a|
+      {
+        id: a.id,
+        file_name: a.file_file_name,
+        content_type: a.file_content_type,
+        file_size: a.file_file_size,
+        url: a.file.url
+      }
+    end
+  end
+
  def as_json(options = {})
    super(methods: %i[user_name user_image collaborator_ids])
      .merge(inmaps: inmaps(options[:user]), inmapsLinks: inmaps_links(options[:user]),
-             map_count: map_count(options[:user]), synapse_count: synapse_count(options[:user]))
+             map_count: map_count(options[:user]), synapse_count: synapse_count(options[:user]),
+             attachments: attachments_json)
  end

  def as_rdf
--- a/app/policies/attachment_policy.rb
+++ b/app/policies/attachment_policy.rb
@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class AttachmentPolicy < ApplicationPolicy
+  class Scope < Scope
+    def resolve
+      scope.where(attachable: TopicPolicy::Scope.new(user, Topic).resolve)
+    end
+  end
+
+  def index?
+    true
+  end
+
+  def create?
+    Pundit.policy(user, record.attachable).update?
+  end
+
+  def destroy?
+    Pundit.policy(user, record.attachable).update?
+  end
+end
--- a/app/serializers/api/v2/attachment_serializer.rb
+++ b/app/serializers/api/v2/attachment_serializer.rb
@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Api
+  module V2
+    class AttachmentSerializer < ApplicationSerializer
+      attributes :id,
+                 :file,
+                 :attachable_type,
+                 :attachable_id,
+                 :created_at,
+                 :updated_at
+    end
+  end
+end
--- a/app/serializers/api/v2/topic_serializer.rb
+++ b/app/serializers/api/v2/topic_serializer.rb
@ -14,7 +14,8 @@ module Api
      def self.embeddable
        {
          user: {},
-          metacode: {}
+          metacode: {},
+          attachments: {}
        }
      end

--- a/config/routes.rb
+++ b/config/routes.rb
@ -7,6 +7,8 @@ Metamaps::Application.routes.draw do
  root to: 'main#home', via: :get
  get 'request', to: 'main#requestinvite', as: :request

+  resources :attachments, only: %i[create destroy], shallow: true
+
  namespace :explore do
    get 'active'
    get 'featured'
@ -121,6 +123,7 @@ Metamaps::Application.routes.draw do

  namespace :api, path: '/api', default: { format: :json } do
    namespace :v2, path: '/v2' do
+      resources :attachments, only: %i[index show]
      resources :metacodes, only: %i[index show]
      resources :mappings, only: %i[index create show update destroy]
      resources :maps, only: %i[index create show update destroy] do
--- a/doc/api/api.raml
+++ b/doc/api/api.raml
@ -22,6 +22,7 @@ traits:
  searchable: !include traits/searchable.raml

 schemas:
+  attachment: !include schemas/_attachment.json
  map: !include schemas/_map.json
  mapping: !include schemas/_mapping.json
  metacode: !include schemas/_metacode.json
@ -35,6 +36,7 @@ schemas:
 #  item: !include resourceTypes/item.raml
 #  collection: !include resourceTypes/collection.raml

+/attachments: !include apis/attachments.raml
 /maps: !include apis/maps.raml
 /mappings: !include apis/mappings.raml
 /metacodes: !include apis/metacodes.raml
--- a/doc/api/apis/attachments.raml
+++ b/doc/api/apis/attachments.raml
@ -0,0 +1,16 @@
+get:
+  is: [ searchable: { searchFields: "file" }, orderable, pageable ]
+  securedBy: [ null, token, oauth_2_0 ]
+  responses:
+    200:
+      body:
+        application/json:
+          example: !include ../examples/attachments.json
+/{id}:
+  get:
+    securedBy: [ null, token, oauth_2_0 ]
+    responses:
+      200:
+        body:
+          application/json:
+            example: !include ../examples/attachment.json
--- a/doc/api/examples/attachment.json
+++ b/doc/api/examples/attachment.json
@ -0,0 +1,10 @@
+{
+  "data": {
+    "id": 1,
+    "file": "https://example.org/file.png",
+    "attachable_type": "Topic",
+    "attachable_id": 187,
+    "created_at": "2017-03-01T05:48:09.533Z",
+    "updated_at": "2017-03-01T05:48:09.533Z"
+  }
+}
--- a/doc/api/examples/attachments.json
+++ b/doc/api/examples/attachments.json
@ -0,0 +1,28 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "file": "https://example.org/file.png",
+      "attachable_type": "Topic",
+      "attachable_id": 187,
+      "created_at": "2017-03-01T05:48:09.533Z",
+      "updated_at": "2017-03-01T05:48:09.533Z"
+    },
+    {
+      "id": 2,
+      "file": "https://example.org/file.docx",
+      "attachable_type": "Message",
+      "attachable_id": 1043,
+      "created_at": "2017-03-01T05:50:19.533Z",
+      "updated_at": "2017-03-01T05:50:19.533Z"
+    }
+  ],
+  "page": {
+    "current_page": 1,
+    "next_page": 2,
+    "prev_page": 0,
+    "total_pages": 156,
+    "total_count": 312,
+    "per": 2
+  }
+}
--- a/doc/api/schemas/_attachment.json
+++ b/doc/api/schemas/_attachment.json
@ -0,0 +1,34 @@
+{
+  "name": "Attachment",
+  "type": "object",
+  "properties": {
+    "id": {
+      "$ref": "_id.json"
+    },
+    "file": {
+      "format": "uri",
+      "type": "string"
+    },
+    "attachable_type": {
+      "pattern": "(Topic|Message)",
+      "type": "string"
+    },
+    "attachable_id": {
+      "$ref": "_id.json"
+    },
+    "created_at": {
+      "$ref": "_datetimestamp.json"
+    },
+    "updated_at": {
+      "$ref": "_datetimestamp.json"
+    }
+  },
+  "required": [
+    "id",
+    "file",
+    "attachable_type",
+    "attachable_id",
+    "created_at",
+    "updated_at"
+  ]
+}
--- a/doc/api/schemas/attachment.json
+++ b/doc/api/schemas/attachment.json
@ -0,0 +1,12 @@
+{
+  "name": "Attachment Envelope",
+  "type": "object",
+  "properties": {
+    "data": {
+      "$ref": "_attachment.json"
+    }
+  },
+  "required": [
+    "data"
+  ]
+}
--- a/doc/api/schemas/attachments.json
+++ b/doc/api/schemas/attachments.json
@ -0,0 +1,19 @@
+{
+  "name": "Attachments",
+  "type": "object",
+  "properties": {
+    "data": {
+      "type": "array",
+      "items": {
+        "$ref": "_attachment.json"
+      }
+    },
+    "page": {
+      "$ref": "_page.json"
+    }
+  },
+  "required": [
+    "data",
+    "page"
+  ]
+}
--- a/frontend/src/Metamaps/GlobalUI/ReactApp.js
+++ b/frontend/src/Metamaps/GlobalUI/ReactApp.js
@ -37,12 +37,14 @@ const ReactApp = {
  mobileTitle: '',
  mobileTitleWidth: 0,
  metacodeSets: [],
+  attachmentFileTypeIcons: {},
  init: function(serverData, openLightbox) {
    const self = ReactApp
    self.serverData = serverData
    self.mobileTitle = serverData.mobileTitle
    self.openLightbox = openLightbox
    self.metacodeSets = serverData.metacodeSets
+    self.attachmentFileTypeIcons = serverData.attachmentFileTypeIcons
    routes = makeRoutes(serverData.ActiveMapper)
    self.resize()
    window && window.addEventListener('resize', self.resize)
@ -154,10 +156,13 @@ const ReactApp = {
  getTopicCardProps: function() {
    const self = ReactApp
    return {
-      openTopic: TopicCard.openTopic,
      metacodeSets: self.metacodeSets,
+      onTopicFollow: Topic.onTopicFollow,
+      openTopic: TopicCard.openTopic,
      updateTopic: (topic, obj) => topic.save(obj),
-      onTopicFollow: Topic.onTopicFollow
+      uploadAttachment: TopicCard.uploadAttachment,
+      removeAttachment: TopicCard.removeAttachment,
+      fileTypeIcons: self.attachmentFileTypeIcons
    }
  },
  getContextMenuProps: function() {
--- a/frontend/src/Metamaps/Views/TopicCard.js
+++ b/frontend/src/Metamaps/Views/TopicCard.js
@ -1,3 +1,5 @@
+/* global $ */
+
 import { ReactApp } from '../GlobalUI'

 const TopicCard = {
@ -9,6 +11,56 @@ const TopicCard = {
  hideCard: function() {
    TopicCard.openTopic = null
    ReactApp.render()
+  },
+  uploadAttachment: (topic, file) => {
+    const data = new window.FormData()
+    data.append('attachment[file]', file)
+    data.append('attachment[attachable_type]', 'Topic')
+    data.append('attachment[attachable_id]', topic.id)
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        url: '/attachments',
+        type: 'POST',
+        data,
+        processData: false,
+        contentType: false,
+        success: (data) => {
+          console.log('file upolad success', data)
+          topic.fetch({ success: () => {
+            ReactApp.render()
+            resolve(true)
+          }})
+        },
+        error: (error) => {
+          console.error(error)
+          window.alert('File upload failed')
+          topic.fetch({ success: () => {
+            ReactApp.render()
+            resolve(false)
+          }})
+        }
+      })
+    })
+  },
+  removeAttachment: (topic) => {
+    const attachments = topic.get('attachments')
+    if (!attachments || attachments.length < 1) {
+      return
+    }
+
+    $.ajax({
+      url: `/attachments/${attachments[0].id}`,
+      type: 'DELETE',
+      success: () => {
+        console.log('delete success, syncing topic')
+        topic.fetch({ success: () => ReactApp.render() })
+      },
+      error: error => {
+        console.error(error)
+        window.alert('Failed to remove attachment')
+        topic.fetch({ success: () => ReactApp.render() })
+      }
+    })
  }
 }

--- a/frontend/src/components/TopicCard/Attachments.js
+++ b/frontend/src/components/TopicCard/Attachments.js
@ -1,20 +1,101 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'

-import EmbedlyLink from './EmbedlyLink'
+import EmbedlyLinkChooser from './EmbedlyLinkChooser'
+import EmbedlyCard from './EmbedlyCard'
+import FileUploader from './FileUploader'
+import PhotoUploader from './PhotoUploader'
+import AudioUploader from './AudioUploader'
+import FileAttachment from './FileAttachment'

 class Attachments extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = this.defaultState
+  }
+
+  defaultState = {
+    addingPhoto: false,
+    addingLink: false,
+    addingAudio: false,
+    addingFile: false
+  }
+
+  clearState = () => {
+    this.setState(this.defaultState)
+  }
+
+  // onClick handler for the 4 buttons, which triggers showing the proper uploader
+  choose = key => () => {
+    this.setState(Object.assign({}, this.defaultState, { [key]: true }))
+  }
+
  render = () => {
    const { topic, authorizedToEdit, updateTopic } = this.props
    const link = topic.get('link')
+    const attachments = topic.get('attachments')
+    const file = attachments && attachments.length ? attachments[0] : null
+
+    let childComponent
+    if (link) {
+      childComponent = (
+        <EmbedlyCard link={link}
+          authorizedToEdit={authorizedToEdit}
+          removeLink={this.clearState}
+        />
+      )
+    } else if (file) {
+      childComponent = (
+        <FileAttachment file={file}
+          authorizedToEdit={authorizedToEdit}
+          removeAttachment={this.props.removeAttachment}
+          fileTypeIcons={this.props.fileTypeIcons}
+        />
+      )
+    } else if (!authorizedToEdit) {
+      childComponent = null
+    } else if (this.state.addingPhoto) {
+      childComponent = (
+        <PhotoUploader updateTopic={updateTopic}
+          uploadAttachment={this.props.uploadAttachment}
+          cancel={this.clearState}
+        />
+      )
+    } else if (this.state.addingLink) {
+      childComponent = (
+        <EmbedlyLinkChooser updateTopic={updateTopic}
+          cancel={this.clearState}
+        />
+      )
+    } else if (this.state.addingAudio) {
+      childComponent = (
+        <AudioUploader updateTopic={updateTopic}
+          uploadAttachment={this.props.uploadAttachment}
+          cancel={this.clearState}
+        />
+      )
+    } else if (this.state.addingFile) {
+      childComponent = (
+        <FileUploader updateTopic={updateTopic}
+          uploadAttachment={this.props.uploadAttachment}
+          cancel={this.clearState}
+        />
+      )
+    } else {
+      childComponent = (
+        <div className="attachment-type-chooser">
+          <div className="photo-upload"><div onClick={this.choose('addingPhoto')}>Photo</div></div>
+            <div className="link-upload"><div onClick={this.choose('addingLink')}>Link</div></div>
+              <div className="audio-upload"><div onClick={this.choose('addingAudio')}>Audio</div></div>
+                <div className="file-upload"><div onClick={this.choose('addingFile')}>Upload</div></div>
+        </div>
+      )
+    }

    return (
      <div className="attachments">
-        <EmbedlyLink topicId={topic.id}
-          link={link}
-          authorizedToEdit={authorizedToEdit}
-          updateTopic={updateTopic}
-        />
+        {childComponent}
      </div>
    )
  }
@ -23,7 +104,10 @@ class Attachments extends Component {
 Attachments.propTypes = {
  topic: PropTypes.object, // Backbone object
  authorizedToEdit: PropTypes.bool,
-  updateTopic: PropTypes.func
+  updateTopic: PropTypes.func,
+  uploadAttachment: PropTypes.func,
+  removeAttachment: PropTypes.func,
+  fileTypeIcons: PropTypes.objectOf(PropTypes.string)
 }

 export default Attachments
--- a/frontend/src/components/TopicCard/AudioUploader.js
+++ b/frontend/src/components/TopicCard/AudioUploader.js
@ -0,0 +1,81 @@
+import React, { Component, PropTypes } from 'react'
+
+import Recorder from 'react-recorder'
+
+class AudioUploader extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      command: 'none'
+    }
+  }
+
+  timeLimit30sTimeoutId = null
+
+  enforce30sTimeLimit = cmd => {
+    window.clearTimeout(this.timeLimit30sTimeoutId)
+    if (cmd === 'start') {
+      this.timeLimit30sTimeoutId = window.setTimeout(() => {
+        this.command('stop')()
+      }, 30000)
+    }
+  }
+
+  command = cmd => () => {
+    this.enforce30sTimeLimit(cmd)
+    this.setState({ command: cmd })
+  }
+
+  onStop = blob => {
+    const now = new Date()
+    const date = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}-${now.getHours()}:${now.getMinutes()}`
+    const filename = `metamaps-recorded-audio-${date}.wav`
+    const file = new window.File([blob], filename, { lastModifiedDate: now })
+
+    this.props.uploadAttachment(file).then(success => {
+      if (!success) {
+        this.command('none')
+      }
+    })
+  }
+
+  handleRecordingError = () => {
+    window.alert(`Audio recording failed. Some possible reasons include:
+      not using an HTTPS connection,
+      missing microphone,
+      you haven't allowed your browser access to your microphone,
+      or you need to reload the page.`)
+  }
+
+  render() {
+    return (
+      <div className="audio-uploader">
+        <Recorder command={this.state.command}
+          onStop={this.onStop}
+          onError={this.handleRecordingError}
+        />
+        {this.state.command === 'start' && (
+          <div className="upload-audio-recording">
+            <div className="stop upload-audio-stop" onClick={this.command('stop')} />
+            <div className="upload-audio-recording-text">&nbsp;&nbsp;Recording...</div>
+          </div>
+        )}
+        {this.state.command === 'none' && (
+          <div className="start upload-audio-start" onClick={this.command('start')}>
+            Click to record <br />
+            (max 30 seconds)
+          </div>
+        )}
+        <div className="attachment-cancel" onClick={this.props.cancel} />
+      </div>
+    )
+  }
+}
+
+AudioUploader.propTypes = {
+  uploadAttachment: PropTypes.func,
+  cancel: PropTypes.func
+}
+
+export default AudioUploader
--- a/frontend/src/components/TopicCard/EmbedlyLink/Card.js
+++ b/frontend/src/components/TopicCard/EmbedlyLink/Card.js
@ -1,4 +1,4 @@
-/* global $, embedly */
+/* global embedly */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'

@ -38,29 +38,33 @@ class EmbedlyCard extends Component {
  }

  render = () => {
-    const { link } = this.props
    const { embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state

    const notReady = embedlyLinkStarted && !embedlyLinkLoaded && !embedlyLinkError

    return (
-      <div>
+      <div className="embeds">
        <a style={{ display: notReady ? 'none' : 'block' }}
-          href={link}
+          href={this.props.link}
          id="embedlyLink"
          target="_blank"
          data-card-description="0"
        >
-          {link}
+          {this.props.link}
        </a>
        {notReady && <div id="embedlyLinkLoader">loading...</div>}
+        {this.props.authorizedToEdit && (
+          <div id="linkremove" onClick={this.props.removeLink} />
+        )}
      </div>
    )
  }
 }

 EmbedlyCard.propTypes = {
-  link: PropTypes.string
+  link: PropTypes.string,
+  authorizedToEdit: PropTypes.bool,
+  removeLink: PropTypes.func
 }

 export default EmbedlyCard
--- a/frontend/src/components/TopicCard/EmbedlyLinkChooser.js
+++ b/frontend/src/components/TopicCard/EmbedlyLinkChooser.js
@ -1,10 +1,7 @@
-/* global embedly */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'

-import Card from './Card'
-
-class EmbedlyLink extends Component {
+class EmbedlyLinkChooser extends Component {
  constructor(props) {
    super(props)

@ -13,12 +10,9 @@ class EmbedlyLink extends Component {
    }
  }

-  removeLink = () => {
-    this.props.updateTopic({ link: null })
-  }
-
  resetLink = () => {
    this.setState({ linkEdit: '' })
+    this.props.cancel()
  }

  onLinkChangeHandler = e => {
@ -35,17 +29,11 @@ class EmbedlyLink extends Component {
  }

  render = () => {
-    const { link, authorizedToEdit, topicId } = this.props
    const { linkEdit } = this.state
-    const hasAttachment = !!link
-
-    if (!hasAttachment && !authorizedToEdit) return null

    return (
-      <div className={hasAttachment ? 'embeds' : 'link-adder'}>
-        <div className="addLink"
-          style={{ display: hasAttachment ? 'none' : 'block' }}
-        >
+      <div className="link-chooser">
+        <div className="addLink">
          <div id="addLinkIcon"></div>
          <div id="addLinkInput">
            <input ref={input => (this.linkInput = input)}
@ -53,26 +41,17 @@ class EmbedlyLink extends Component {
              value={linkEdit}
              onChange={this.onLinkChangeHandler}
              onKeyUp={this.onLinkKeyUpHandler}></input>
-            {linkEdit && <div id="addLinkReset" onClick={this.resetLink}></div>}
+            <div className="attachment-cancel" onClick={this.resetLink}></div>
          </div>
        </div>
-        {link && <Card key={topicId} link={link} />}
-        {authorizedToEdit && (
-          <div id="linkremove"
-            style={{ display: hasAttachment ? 'block' : 'none' }}
-            onClick={this.removeLink}
-          />
-        )}
      </div>
    )
  }
 }

-EmbedlyLink.propTypes = {
-  topicId: PropTypes.number,
-  link: PropTypes.string,
-  authorizedToEdit: PropTypes.bool,
-  updateTopic: PropTypes.func
+EmbedlyLinkChooser.propTypes = {
+  updateTopic: PropTypes.func,
+  cancel: PropTypes.func
 }

-export default EmbedlyLink
+export default EmbedlyLinkChooser
--- a/frontend/src/components/TopicCard/FileAttachment.js
+++ b/frontend/src/components/TopicCard/FileAttachment.js
@ -0,0 +1,57 @@
+import React, { Component, PropTypes } from 'react'
+
+class FileAttachment extends Component {
+  getFileType = contentType => {
+    if (contentType === 'text/plain') {
+      return 'text'
+    } else if (contentType === 'application/pdf') {
+      return 'pdf'
+    } else if (contentType.match(/^image\//)) {
+      return 'image'
+    } else if (contentType.match(/^audio\//) ||
+               contentType === 'video/ogg' ||
+               contentType === 'video/webm') {
+      return 'audio'
+    } else {
+      return 'unknown'
+    }
+  }
+
+  getFileIcon = file => {
+    const type = this.getFileType(file.content_type)
+
+    if (this.props.fileTypeIcons[type]) {
+      return this.props.fileTypeIcons[type]
+    } else {
+      return this.props.fileTypeIcons.unknown
+    }
+  }
+
+  render() {
+    const { file } = this.props
+    return (
+      <div className={`file ${this.getFileType(file.content_type)}-file-type`}
+        style={{ clear: 'both' }}
+      >
+        <a href={file.url} target="_blank">
+          <img src={this.getFileIcon(file)} className="filetype-icon" />
+          {file.file_name}
+        </a>
+        <div className="attachment-cancel" onClick={this.props.removeAttachment} />
+      </div>
+    )
+  }
+}
+
+FileAttachment.propTypes = {
+  file: PropTypes.shape({
+    content_type: PropTypes.string,
+    file_name: PropTypes.string,
+    url: PropTypes.string
+  }),
+  authorizedToEdit: PropTypes.bool,
+  removeAttachment: PropTypes.func,
+  fileTypeIcons: PropTypes.objectOf(PropTypes.string)
+}
+
+export default FileAttachment
--- a/frontend/src/components/TopicCard/FileUploader.js
+++ b/frontend/src/components/TopicCard/FileUploader.js
@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react'
+import Dropzone from 'react-dropzone'
+
+class FileUploader extends Component {
+  handleFileUpload = (acceptedFiles, rejectedFiles) => {
+    if (acceptedFiles.length >= 1) {
+      this.props.uploadAttachment(acceptedFiles[0])
+    } else {
+      window.alert('File upload failed, please try again.')
+    }
+  }
+
+  render() {
+    return (
+      <div className="upload-file">
+        <Dropzone className="upload-file-dropzone"
+          onDrop={this.handleFileUpload}
+        >
+          Drag file here <br />
+          (maximum 5mb)
+        </Dropzone>
+        <div className="attachment-cancel" onClick={this.props.cancel} />
+      </div>
+    )
+  }
+}
+
+FileUploader.propTypes = {
+  updateTopic: PropTypes.func,
+  uploadAttachment: PropTypes.func,
+  cancel: PropTypes.func
+}
+
+export default FileUploader
--- a/frontend/src/components/TopicCard/PhotoUploader.js
+++ b/frontend/src/components/TopicCard/PhotoUploader.js
@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react'
+import Dropzone from 'react-dropzone'
+
+class PhotoUploader extends Component {
+  handleFileUpload = (acceptedFiles, rejectedFiles) => {
+    if (acceptedFiles.length >= 1) {
+      this.props.uploadAttachment(acceptedFiles[0])
+    } else {
+      window.alert('File upload failed, please try again.')
+    }
+  }
+
+  render() {
+    return (
+      <div className="upload-photo">
+        <Dropzone className="upload-photo-dropzone"
+          onDrop={this.handleFileUpload}
+        >
+          Drag photo here <br />
+          or click to upload
+        </Dropzone>
+        <div className="attachment-cancel" onClick={this.props.cancel} />
+      </div>
+    )
+  }
+}
+
+PhotoUploader.propTypes = {
+  updateTopic: PropTypes.func,
+  uploadAttachment: PropTypes.func,
+  cancel: PropTypes.func
+}
+
+export default PhotoUploader
--- a/frontend/src/components/TopicCard/index.js
+++ b/frontend/src/components/TopicCard/index.js
@ -10,12 +10,17 @@ import Info from './Info'

 class ReactTopicCard extends Component {
  render = () => {
-    const { currentUser, onTopicFollow, updateTopic } = this.props
+    const {
+      currentUser, onTopicFollow, updateTopic, uploadAttachment,
+      removeAttachment
+    } = this.props
    const topic = this.props.openTopic

    if (!topic) return null

    const wrappedUpdateTopic = obj => updateTopic(topic, obj)
+    const wrappedUploadAttachment = file => uploadAttachment(topic, file)
+    const wrappedRemoveAttachment = () => removeAttachment(topic)

    const authorizedToEdit = topic.authorizeToEdit(currentUser)
    const hasAttachment = topic.get('link') && topic.get('link') !== ''
@ -48,9 +53,13 @@ class ReactTopicCard extends Component {
                authorizedToEdit={authorizedToEdit}
                onChange={wrappedUpdateTopic}
              />
-              <Attachments topic={topic}
+              <Attachments key={topic.id}
+                topic={topic}
                authorizedToEdit={authorizedToEdit}
                updateTopic={wrappedUpdateTopic}
+                uploadAttachment={wrappedUploadAttachment}
+                removeAttachment={wrappedRemoveAttachment}
+                fileTypeIcons={this.props.fileTypeIcons}
              />
              <Info topic={topic} />
              <div className='clearfloat' />
@ -75,7 +84,9 @@ ReactTopicCard.propTypes = {
      name: PropTypes.string
    }))
  })),
-  redrawCanvas: PropTypes.func
+  redrawCanvas: PropTypes.func,
+  uploadAttachment: PropTypes.func,
+  fileTypeIcons: PropTypes.objectOf(PropTypes.string)
 }

 export default ReactTopicCard
--- a/package.json
+++ b/package.json
@ -49,6 +49,7 @@
    "react-draggable": "3.0.3",
    "react-dropzone": "4.1.2",
    "react-onclickoutside": "6.5.0",
+    "react-recorder": "1.0.0",
    "react-router": "3.0.5",
    "redux": "3.7.2",
    "riek": "1.1.0",
--- a/spec/api/v2/attachments_api_spec.rb
+++ b/spec/api/v2/attachments_api_spec.rb
@ -0,0 +1,38 @@
+# frozen_string_literal: true
+require 'rails_helper'
+
+RSpec.describe 'topics API', type: :request do
+  let(:user) { create(:user, admin: true) }
+  let(:token) { create(:token, user: user).token }
+  let(:attachment) { create(:attachment) }
+
+  it 'GET /api/v2/attachments' do
+    create_list(:attachment, 5)
+    get '/api/v2/attachments', params: { access_token: token }
+
+    expect(response).to have_http_status(:success)
+    expect(response).to match_json_schema(:attachments)
+    expect(JSON.parse(response.body)['data'].count).to eq 5
+  end
+
+  it 'GET /api/v2/attachments/:id' do
+    get "/api/v2/attachments/#{attachment.id}"
+
+    expect(response).to have_http_status(:success)
+    expect(response).to match_json_schema(:attachment)
+    expect(JSON.parse(response.body)['data']['id']).to eq attachment.id
+  end
+
+  context 'RAML example' do
+    let(:resource) { get_json_example(:attachment) }
+    let(:collection) { get_json_example(:attachments) }
+
+    it 'resource matches schema' do
+      expect(resource).to match_json_schema(:attachment)
+    end
+
+    it 'collection matches schema' do
+      expect(collection).to match_json_schema(:attachments)
+    end
+  end
+end
--- a/spec/factories/attachments.rb
+++ b/spec/factories/attachments.rb
@ -0,0 +1,6 @@
+# frozen_string_literal: true
+FactoryGirl.define do
+  factory :attachment do
+    association :attachable, factory: :topic
+  end
+end
--- a/spec/policies/map_policy_spec.rb
+++ b/spec/policies/map_policy_spec.rb
@ -23,7 +23,7 @@ RSpec.describe MapPolicy, type: :policy do
    context 'private' do
      let(:map) { create(:map, permission: :private) }
      permissions :show?, :create?, :update?, :destroy? do
-        it 'permits access' do
+        it 'denies access' do
          expect(subject).to_not permit(nil, map)
        end
      end
Author	SHA1	Message	Date
Devin Howard	97b17c678e	split out topic card uploads scss file	2018-02-05 21:43:26 -08:00
Devin Howard	cebf6626ee	fix uploader icons	2018-02-05 21:43:26 -08:00
Devin Howard	ed589c79c4	unfinished, not rebased, topic card uploads	2018-02-05 21:43:26 -08:00
Devin Howard	3b3cec9fcc	rubocop	2018-02-05 21:43:10 -08:00
Devin Howard	0ffdaf200b	fix api docs	2018-02-05 21:39:30 -08:00
Devin Howard	f2d909e2d7	add normal/API endpoints for attachments	2018-02-05 21:39:30 -08:00