Created by: {{user_name}} on {{created_at}}
Last edited: {{updated_at}}
+
+
+
Update Thumbnail
+ Thumb
+
Delete
diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb
index 8e6b2dba..9ded6a02 100644
--- a/app/views/maps/_mapinfobox.html.erb
+++ b/app/views/maps/_mapinfobox.html.erb
@@ -9,7 +9,7 @@
<% if current_user %>
- Click here to name this map!
+ Click here to name this map
<% end %>
@@ -77,6 +77,11 @@
Created by: <%= @map.user == user ? "You" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %>
Last edited: <%= @map.updated_at.strftime("%m/%d/%Y") %>
+
+
+
Update Thumbnail
+ Thumb
+
Delete
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 8fef2145..381bca7b 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -29,4 +29,7 @@ Rails.application.configure do
# Expands the lines which load the assets
config.assets.debug = false
config.assets.quiet = true
+
+ # S3 file storage
+ config.paperclip_defaults = {} # store on local machine for dev
end
diff --git a/config/initializers/mime_types.rb b/config/initializers/mime_types.rb
index 6e1d16f0..2e0132a6 100644
--- a/config/initializers/mime_types.rb
+++ b/config/initializers/mime_types.rb
@@ -3,3 +3,6 @@
# Add new mime types for use in respond_to blocks:
# Mime::Type.register "text/richtext", :rtf
+
+# RDF export
+Mime::Type.register 'text/turtle', :ttl
diff --git a/config/initializers/rack-attack.rb b/config/initializers/rack-attack.rb
deleted file mode 100644
index 0fd76889..00000000
--- a/config/initializers/rack-attack.rb
+++ /dev/null
@@ -1,61 +0,0 @@
-# frozen_string_literal: true
-class Rack::Attack
- Rack::Attack.cache.store = ActiveSupport::Cache::MemoryStore.new
-
- # Throttle all requests by IP (60rpm)
- #
- # Key: "rack::attack:#{Time.now.to_i/:period}:req/ip:#{req.ip}"
- # throttle('req/ip', :limit => 300, :period => 5.minutes) do |req|
- # req.ip # unless req.path.start_with?('/assets')
- # end
-
- # Throttle POST requests to /login by IP address
- #
- # Key: "rack::attack:#{Time.now.to_i/:period}:logins/ip:#{req.ip}"
- throttle('logins/ip', limit: 5, period: 20.seconds) do |req|
- req.ip if req.path == '/login' && req.post?
- end
-
- # Throttle POST requests to /login by email param
- #
- # Key: "rack::attack:#{Time.now.to_i/:period}:logins/email:#{req.email}"
- #
- # Note: This creates a problem where a malicious user could intentionally
- # throttle logins for another user and force their login requests to be
- # denied, but that's not very common and shouldn't happen to you. (Knock
- # on wood!)
- throttle('logins/email', limit: 5, period: 20.seconds) do |req|
- if req.path == '/login' && req.post?
- # return the email if present, nil otherwise
- req.params['email'].presence
- end
- end
-
- throttle('load_url_title/req/5mins/ip', limit: 300, period: 5.minutes) do |req|
- req.ip if req.path == 'hacks/load_url_title'
- end
- throttle('load_url_title/req/1s/ip', limit: 5, period: 1.second) do |req|
- # If the return value is truthy, the cache key for the return value
- # is incremented and compared with the limit. In this case:
- # "rack::attack:#{Time.now.to_i/1.second}:load_url_title/req/ip:#{req.ip}"
- #
- # If falsy, the cache key is neither incremented nor checked.
-
- req.ip if req.path == 'hacks/load_url_title'
- end
-
- self.throttled_response = lambda do |env|
- now = Time.now
- match_data = env['rack.attack.match_data']
- period = match_data[:period]
- limit = match_data[:limit]
-
- headers = {
- 'X-RateLimit-Limit' => limit.to_s,
- 'X-RateLimit-Remaining' => '0',
- 'X-RateLimit-Reset' => (now + (period - now.to_i % period)).to_s
- }
-
- [429, headers, ['']]
- end
-end
diff --git a/config/initializers/rack_attack.rb b/config/initializers/rack_attack.rb
new file mode 100644
index 00000000..b79f0d10
--- /dev/null
+++ b/config/initializers/rack_attack.rb
@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+module Rack
+ class Attack
+ Rack::Attack.cache.store = ActiveSupport::Cache::MemoryStore.new
+
+ # Throttle all requests by IP (60rpm)
+ #
+ # Key: "rack::attack:#{Time.now.to_i/:period}:req/ip:#{req.ip}"
+ # throttle('req/ip', :limit => 300, :period => 5.minutes) do |req|
+ # req.ip # unless req.path.start_with?('/assets')
+ # end
+
+ # Throttle POST requests to /login by IP address
+ #
+ # Key: "rack::attack:#{Time.now.to_i/:period}:logins/ip:#{req.ip}"
+ throttle('logins/ip', limit: 5, period: 20.seconds) do |req|
+ req.ip if req.path == '/login' && req.post?
+ end
+
+ # Throttle POST requests to /login by email param
+ #
+ # Key: "rack::attack:#{Time.now.to_i/:period}:logins/email:#{req.email}"
+ #
+ # Note: This creates a problem where a malicious user could intentionally
+ # throttle logins for another user and force their login requests to be
+ # denied, but that's not very common and shouldn't happen to you. (Knock
+ # on wood!)
+ throttle('logins/email', limit: 5, period: 20.seconds) do |req|
+ if req.path == '/login' && req.post?
+ # return the email if present, nil otherwise
+ req.params['email'].presence
+ end
+ end
+
+ throttle('load_url_title/req/5mins/ip', limit: 300, period: 5.minutes) do |req|
+ req.ip if req.path == 'hacks/load_url_title'
+ end
+ throttle('load_url_title/req/1s/ip', limit: 5, period: 1.second) do |req|
+ # If the return value is truthy, the cache key for the return value
+ # is incremented and compared with the limit. In this case:
+ # "rack::attack:#{Time.now.to_i/1.second}:load_url_title/req/ip:#{req.ip}"
+ #
+ # If falsy, the cache key is neither incremented nor checked.
+
+ req.ip if req.path == 'hacks/load_url_title'
+ end
+
+ self.throttled_response = lambda do |env|
+ now = Time.zone.now
+ match_data = env['rack.attack.match_data']
+ period = match_data[:period]
+ limit = match_data[:limit]
+
+ headers = {
+ 'X-RateLimit-Limit' => limit.to_s,
+ 'X-RateLimit-Remaining' => '0',
+ 'X-RateLimit-Reset' => (now + (period - now.to_i % period)).to_s
+ }
+
+ [429, headers, ['']]
+ end
+ end
+end
diff --git a/config/initializers/version.rb b/config/initializers/version.rb
index cccd43bf..a1e20598 100644
--- a/config/initializers/version.rb
+++ b/config/initializers/version.rb
@@ -1,4 +1,4 @@
# frozen_string_literal: true
-METAMAPS_VERSION = '3.0.1'
+METAMAPS_VERSION = '3.2'
METAMAPS_BUILD = `git log -1 --pretty=%H`.chomp[0..11].freeze
METAMAPS_LAST_UPDATED = `git log -1 --pretty='%ad'`.split(' ').values_at(1, 2, 4).join(' ').freeze
diff --git a/config/initializers/warden_hooks.rb b/config/initializers/warden_hooks.rb
index da983955..a0d8fd88 100644
--- a/config/initializers/warden_hooks.rb
+++ b/config/initializers/warden_hooks.rb
@@ -1,9 +1,10 @@
-Warden::Manager.after_set_user do |user,auth,opts|
+# frozen_string_literal: true
+Warden::Manager.after_set_user do |user, auth, opts|
scope = opts[:scope]
auth.cookies.signed["#{scope}.id"] = user.id
auth.cookies.signed["#{scope}.expires_at"] = 30.minutes.from_now
end
-Warden::Manager.before_logout do |user, auth, opts|
+Warden::Manager.before_logout do |_user, auth, opts|
scope = opts[:scope]
auth.cookies.signed["#{scope}.id"] = nil
auth.cookies.signed["#{scope}.expires_at"] = nil
diff --git a/config/routes.rb b/config/routes.rb
index 8fe56fd6..5abf5668 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -14,6 +14,7 @@ Metamaps::Application.routes.draw do
get 'starred'
get 'mapper/:id', action: 'mapper'
end
+ get :explore, to: redirect('/')
resources :maps, except: [:index, :edit] do
member do
diff --git a/db/migrate/20170122201451_create_attachments.rb b/db/migrate/20170122201451_create_attachments.rb
new file mode 100644
index 00000000..a798fcfd
--- /dev/null
+++ b/db/migrate/20170122201451_create_attachments.rb
@@ -0,0 +1,12 @@
+class CreateAttachments < ActiveRecord::Migration[5.0]
+ def change
+ create_table :attachments do |t|
+ t.references :attachable, polymorphic: true
+ t.attachment :file
+ t.timestamps
+ end
+
+ remove_attachment :topics, :image
+ remove_attachment :topics, :audio
+ end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 7d146be5..a14b6715 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
#
# It's strongly recommended that you check this file into your version control system.
-ActiveRecord::Schema.define(version: 20161218183817) do
+ActiveRecord::Schema.define(version: 20170122201451) do
# These are extensions that must be enabled in order to support this database
enable_extension "plpgsql"
@@ -26,6 +26,18 @@ ActiveRecord::Schema.define(version: 20161218183817) do
t.index ["user_id"], name: "index_access_requests_on_user_id", using: :btree
end
+ create_table "attachments", force: :cascade do |t|
+ t.string "attachable_type"
+ t.integer "attachable_id"
+ t.string "file_file_name"
+ t.string "file_content_type"
+ t.integer "file_file_size"
+ t.datetime "file_updated_at"
+ t.datetime "created_at", null: false
+ t.datetime "updated_at", null: false
+ t.index ["attachable_type", "attachable_id"], name: "index_attachments_on_attachable_type_and_attachable_id", using: :btree
+ end
+
create_table "delayed_jobs", force: :cascade do |t|
t.integer "priority", default: 0, null: false
t.integer "attempts", default: 0, null: false
@@ -269,17 +281,9 @@ ActiveRecord::Schema.define(version: 20161218183817) do
t.text "link"
t.integer "user_id"
t.integer "metacode_id"
- t.datetime "created_at", null: false
- t.datetime "updated_at", null: false
+ t.datetime "created_at", null: false
+ t.datetime "updated_at", null: false
t.text "permission"
- t.string "image_file_name", limit: 255
- t.string "image_content_type", limit: 255
- t.integer "image_file_size"
- t.datetime "image_updated_at"
- t.string "audio_file_name", limit: 255
- t.string "audio_content_type", limit: 255
- t.integer "audio_file_size"
- t.datetime "audio_updated_at"
t.integer "defer_to_map_id"
t.index ["metacode_id"], name: "index_topics_on_metacode_id", using: :btree
t.index ["user_id"], name: "index_topics_on_user_id", using: :btree
diff --git a/db/seeds.rb b/db/seeds.rb
index 9f586b9d..f919629f 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -38,7 +38,7 @@ Metacode.create(name: 'Process',
manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_process.png',
color: '#BDB25E')
-Metacode.create(name: 'Future',
+Metacode.create(name: 'Future Dev',
manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_futuredev.png',
color: '#25A17F')
@@ -70,7 +70,7 @@ Metacode.create(name: 'Need',
manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_need.png',
color: '#D2A7D4')
-Metacode.create(name: 'Open',
+Metacode.create(name: 'Open Issue',
manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_openissue.png',
color: '#9BBF71')
@@ -142,7 +142,7 @@ Metacode.create(name: 'Aim',
manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_aim.png',
color: '#B0B0B0')
-Metacode.create(name: 'Good',
+Metacode.create(name: 'Good Practice',
manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_goodpractice.png',
color: '#BD9E86')
@@ -198,6 +198,10 @@ Metacode.create(name: 'Status',
manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_status.png',
color: '#EFA7C0')
+Metacode.create(name: 'Story',
+ manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_story.png',
+ color: '#A7A2DC')
+
Metacode.create(name: 'Tool',
manual_icon: 'https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_tool.png',
color: '#828282')
diff --git a/doc/api/traits/searchable.raml b/doc/api/traits/searchable.raml
index fb7700a9..83cfbfb4 100644
--- a/doc/api/traits/searchable.raml
+++ b/doc/api/traits/searchable.raml
@@ -4,3 +4,8 @@ queryParameters:
Search text columns for this string. A query of
"example" will be passed to SQL as LIKE %example%. The searchable columns are: << searchFields >>required: false type: string + searchfields: + description: | + A comma-seperated list of columns to search. For instance, to search a topic's name and description (but not link field) for the string "cognition", you could use `?q=cognition&searchfields=name,desc`. + required: false + type: string diff --git a/doc/production/first-deploy.md b/doc/production/first-deploy.md index 994e68c2..44b6b659 100644 --- a/doc/production/first-deploy.md +++ b/doc/production/first-deploy.md @@ -14,12 +14,28 @@ #### Setup Postgres - sudo apt-get install postgresql-9.4 #specify version!! + sudo apt-get install postgresql-9.4 + # make sure you have development headers for postgres. The package name might be different on your distribution. + sudo apt-get install libpq-dev sudo -u postgres psql postgres=# CREATE USER metamaps WITH PASSWORD 'mycoolpassword' CREATEDB; - postgres=# CREATE DATABASE metamap002_production OWNER metamaps; + postgres=# CREATE DATABASE metamaps_production OWNER metamaps; postgres=# \q +On some deploys, we have had problems with unicode encoding when trying to run `db:setup`. Running the commands in this Github gist resolved the issue: https://gist.github.com/amolkhanorkar/8706915. Try this link if you have problems + +#### Install Node for javascript building + + # this first line lets us use up-to-date versions of node.js + # instead of the old versions in the Ubuntu repositories + curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash - + sudo apt-get install nodejs + sudo ln -s /usr/bin/nodejs /usr/bin/node + +### Install redis server for action cable + + sudo apt-get install redis-server + #### Install system-wide rvm: sudo gpg --keyserver hkp://keys.gnupg.net \ @@ -38,8 +54,15 @@ rvm user gemsets git clone https://github.com/metamaps/metamaps \ --branch instance/mycoolinstance - rvm install $(cat metamaps/.ruby-version) #ensure ruby is installed - cd metamaps + cat metamaps/.ruby-version + +The last line tells you what version of ruby you need to install. For example, at the time of writing the version is 2.3.0. As your normal sudo-enabled user, run + + sudo rvm install 2.3.0 + +Now switch back to the metamaps user and continue + + cd /home/metamaps/metamaps gem install bundler RAILS_ENV=production bundle install @@ -60,16 +83,11 @@ Run this in the metamaps directory, still as metamaps: # create, load schema, seed bundle exec rails db:setup -#### Install node & ES6 modules - - sudo aptitude install nodejs npm - sudo ln -s /usr/bin/nodejs /usr/bin/node - npm install - #### Precompile assets -This step depends on running npm install first; assets:precompile calls `npm install` and `bin/build-apidocs.sh`, both of which require node_modules to be installed. We suggest you run the commands separately this time to better catch any errors. +Note that `rails assets:precompile` will normally call `npm install` and `bin/build-apidocs.sh` as part of its process. Both of these latter commands require `npm install` to be run first. We suggest you run all five commands separately this time (like below) to better catch any errors. In the future, you won't need to run the second and third commands separately. + npm install npm run build bin/build-apidocs.sh bundle exec rails assets:precompile @@ -93,17 +111,18 @@ server to see what problems show up: #### Realtime server: sudo npm install -g forever - (crontab -u metamaps -l 2>/dev/null; echo "@reboot env NODE_REALTIME_PORT=5000 $(which forever) --append -l /home/metamaps/logs/forever.realtime.log start /home/metamaps/metamaps/realtime/realtime-server.js") | crontab -u metamaps - + (sudo crontab -u metamaps -l 2>/dev/null; echo "@reboot NODE_REALTIME_PORT=5000 /usr/bin/forever --minUptime 1000 --spinSleepTime 1000 --append -l /home/metamaps/logs/forever.realtime.log -c /home/metamaps/metamaps/node_modules/.bin/babel-node --workingDir /home/metamaps/metamaps start /home/metamaps/metamaps/realtime/realtime-server.js") | sudo crontab -u metamaps mkdir -p /home/metamaps/logs - env NODE_REALTIME_PORT=5000 forever --append \ + /usr/bin/forever --minUptime 1000 --spinSleepTime 1000 \ + --append -l /home/metamaps/logs/forever.realtime.log \ -c /home/metamaps/metamaps/node_modules/.bin/babel-node \ - -l /home/metamaps/logs/forever.realtime.log \ + --workingDir /home/metamaps/metamaps \ start /home/metamaps/metamaps/realtime/realtime-server.js #### Upstart service for delayed_worker: -Put the following code into `/etc/init/metamaps_delayed_worker.conf`: +If your system uses upstart for init scripts, put the following code into `/etc/init/metamaps_delayed_job.conf`: description "Delayed Jobs Worker for Metamaps" @@ -128,3 +147,30 @@ Then start the service and check the last ten lines of the log file to make sure sudo service metamaps_delayed_job start tail /var/log/upstart/metamaps_delayed_job.log + +#### Systemd service for delayed_worker: + +If your system uses systemd for init scripts, ptu the following code into `/etc/systemd/system/metamaps_delayed_job.service`: + + [Unit] + Description=metamaps delayed job service + After=network-online.target + + [Service] + ExecStart=/usr/local/rvm/gems/ruby-2.3.0@metamaps/bin/bundle exec rails jobs:work + WorkingDirectory=/home/metamaps/metamaps + Restart=always + User=metamaps + Group=metamaps + Environment=HOME=/home/metamaps + Environment=PATH="/usr/local/rvm/gems/ruby-2.3.0@metamaps/bin:/usr/local/rvm/gems/ruby-2.3.0@global/bin:/usr/local/rvm/rubies/ruby-2.3.0/bin:/usr/local/rvm/bin:/usr/local/bin:/usr/bin:/bin" + Environment=GEM_PATH="/usr/local/rvm/gems/ruby-2.3.0@metamaps:/usr/local/rvm/gems/ruby-2.3.0@global" + Environment=RAILS_ENV="production" + + [Install] + WantedBy=multi-user.target + +Then start the service and check the last ten lines of the log file to make sure it's running OK: + + sudo systemctl start metamaps_delayed_job + # ??? how the heck do you check systemd logs?? diff --git a/frontend/src/Metamaps/Cable.js b/frontend/src/Metamaps/Cable.js index ffeb9ffb..1fcc441e 100644 --- a/frontend/src/Metamaps/Cable.js +++ b/frontend/src/Metamaps/Cable.js @@ -1,5 +1,7 @@ /* global $, ActionCable */ +import { indexOf } from 'lodash' + import Active from './Active' import Control from './Control' import Create from './Create' @@ -110,7 +112,7 @@ const Cable = { if (edge.getData('mappings').length - 1 === 0) { Control.hideEdge(edge) } - + var index = indexOf(edge.getData('synapses'), synapse) edge.getData('mappings').splice(index, 1) edge.getData('synapses').splice(index, 1) @@ -128,19 +130,20 @@ const Cable = { // containing only the information we need to determine whether the active mapper // can view this topic, then if we determine it can, we make a call for the full model const t = new DataModel.Topic(event.topic) - - // refactor the heck outta this, its adding wicked wait time - var topic, mapping, mapper, cancel - function waitThenRenderTopic() { - if (topic && mapping && mapper) { - Topic.renderTopic(mapping, topic, true) - Engine.runLayout() - } else if (!cancel) { - setTimeout(waitThenRenderTopic, 10) - } - } if (t.authorizeToShow(m) && !DataModel.Topics.get(event.topic.id)) { + // refactor the heck outta this, its adding wicked wait time + var topic, mapping, mapper, cancel + + const waitThenRenderTopic = () => { + if (topic && mapping && mapper) { + Topic.renderTopic(mapping, topic, true) + Engine.runLayout() + } else if (!cancel) { + setTimeout(waitThenRenderTopic, 10) + } + } + mapper = DataModel.Mappers.get(event.topic.user_id) if (mapper === undefined) { Mapper.get(event.topic.user_id, function(m) { diff --git a/frontend/src/Metamaps/Control.js b/frontend/src/Metamaps/Control.js index 4caa5ccc..e5c0c92d 100644 --- a/frontend/src/Metamaps/Control.js +++ b/frontend/src/Metamaps/Control.js @@ -1,5 +1,3 @@ -/* global $ */ - import _ from 'lodash' import outdent from 'outdent' @@ -8,7 +6,6 @@ import DataModel from './DataModel' import Engine from './Engine' import Filter from './Filter' import GlobalUI from './GlobalUI' -import JIT from './JIT' import Mouse from './Mouse' import Selected from './Selected' import Settings from './Settings' @@ -99,7 +96,6 @@ const Control = { var permToDelete = Active.Mapper.id === topic.get('user_id') || Active.Mapper.get('admin') if (permToDelete) { - var mappableid = topic.id var mapping = node.getData('mapping') topic.destroy() DataModel.Mappings.remove(mapping) @@ -149,7 +145,6 @@ const Control = { } var topic = node.getData('topic') - var mappableid = topic.id var mapping = node.getData('mapping') mapping.destroy() DataModel.Topics.remove(topic) @@ -268,7 +263,6 @@ const Control = { if (edge.getData('synapses').length - 1 === 0) { Control.hideEdge(edge) } - var mappableid = synapse.id synapse.destroy() // the server will destroy the mapping, we just need to remove it here @@ -319,7 +313,6 @@ const Control = { var synapse = edge.getData('synapses')[index] var mapping = edge.getData('mappings')[index] - var mappableid = synapse.id mapping.destroy() DataModel.Synapses.remove(synapse) diff --git a/frontend/src/Metamaps/Create.js b/frontend/src/Metamaps/Create.js index 4e210c41..3b4c6e34 100644 --- a/frontend/src/Metamaps/Create.js +++ b/frontend/src/Metamaps/Create.js @@ -335,18 +335,18 @@ console.log(codesToSwitchToIds) }, source: synapseBloodhound }, - { - name: 'existing_synapses', - limit: 50, - display: function(s) { return s.label }, - templates: { - suggestion: function(s) { - return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s) - }, - header: '
Existing synapses
' + { + name: 'existing_synapses', + limit: 50, + display: function(s) { return s.label }, + templates: { + suggestion: function(s) { + return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s) }, - source: existingSynapseBloodhound - }] + header: 'Existing synapses
' + }, + source: existingSynapseBloodhound + }] ) $('#synapse_desc').keyup(function(e) { diff --git a/frontend/src/Metamaps/DataModel/Map.js b/frontend/src/Metamaps/DataModel/Map.js index 7777c223..76c5eff3 100644 --- a/frontend/src/Metamaps/DataModel/Map.js +++ b/frontend/src/Metamaps/DataModel/Map.js @@ -7,7 +7,6 @@ try { Backbone.$ = window.$ } catch (err) {} import Active from '../Active' import InfoBox from '../Map/InfoBox' import Mapper from '../Mapper' -import Realtime from '../Realtime' const Map = Backbone.Model.extend({ urlRoot: '/maps', diff --git a/frontend/src/Metamaps/DataModel/Synapse.js b/frontend/src/Metamaps/DataModel/Synapse.js index dea7923c..32f337c2 100644 --- a/frontend/src/Metamaps/DataModel/Synapse.js +++ b/frontend/src/Metamaps/DataModel/Synapse.js @@ -1,5 +1,3 @@ -/* global $ */ - import _ from 'lodash' import outdent from 'outdent' import Backbone from 'backbone' @@ -7,8 +5,6 @@ try { Backbone.$ = window.$ } catch (err) {} import Active from '../Active' import Filter from '../Filter' -import JIT from '../JIT' -import Realtime from '../Realtime' import SynapseCard from '../SynapseCard' import Visualize from '../Visualize' diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js index b62ab413..03e8c2e0 100644 --- a/frontend/src/Metamaps/DataModel/Topic.js +++ b/frontend/src/Metamaps/DataModel/Topic.js @@ -1,5 +1,3 @@ -/* global $ */ - import _ from 'lodash' import Backbone from 'backbone' try { Backbone.$ = window.$ } catch (err) {} @@ -7,8 +5,6 @@ try { Backbone.$ = window.$ } catch (err) {} import Active from '../Active' import Engine from '../Engine' import Filter from '../Filter' -import JIT from '../JIT' -import Realtime from '../Realtime' import TopicCard from '../TopicCard' import Visualize from '../Visualize' diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js index 24def309..e68db57a 100644 --- a/frontend/src/Metamaps/DataModel/index.js +++ b/frontend/src/Metamaps/DataModel/index.js @@ -81,11 +81,11 @@ const DataModel = { var myCollection = serverData.Mine ? serverData.Mine : [] var sharedCollection = serverData.Shared ? serverData.Shared : [] var starredCollection = serverData.Starred ? serverData.Starred : [] - var mapperCollection = [] + var mapperCollection = serverData.Mapper ? serverData.Mapper : [] var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' } - if (self.Maps.Mapper.mapperId) { + if (serverData.Mapper && serverData.Mapper.mapperId) { mapperCollection = serverData.Mapper.models - mapperOptionsObj.mapperId = serverData.Mapper.id + mapperOptionsObj.mapperId = serverData.Mapper.mapperId } var featuredCollection = serverData.Featured ? serverData.Featured : [] var activeCollection = serverData.Active ? serverData.Active : [] diff --git a/frontend/src/Metamaps/Debug.js b/frontend/src/Metamaps/Debug.js index 0fe5f769..2871ea4c 100644 --- a/frontend/src/Metamaps/Debug.js +++ b/frontend/src/Metamaps/Debug.js @@ -1,6 +1,9 @@ -const Debug = (arg = window.Metamaps) => { +const Debug = function(arg = window.Metamaps) { + if (arg === undefined && typeof window !== 'undefined') arg = window.Metamaps console.debug(arg) - console.debug(`Metamaps Version: ${arg.VERSION}`) + console.debug(`Metamaps Version: ${arg.ServerData.VERSION}`) + console.debug(`Build: ${arg.ServerData.BUILD}`) + console.debug(`Last Updated: ${arg.ServerData.LAST_UPDATED}`) } export default Debug diff --git a/frontend/src/Metamaps/GlobalUI/ImportDialog.js b/frontend/src/Metamaps/GlobalUI/ImportDialog.js index dfc319b7..1428ab6d 100644 --- a/frontend/src/Metamaps/GlobalUI/ImportDialog.js +++ b/frontend/src/Metamaps/GlobalUI/ImportDialog.js @@ -7,6 +7,7 @@ import outdent from 'outdent' import ImportDialogBox from '../../components/ImportDialogBox' import PasteInput from '../PasteInput' +import Map from '../Map' const ImportDialog = { openLightbox: null, @@ -24,14 +25,19 @@ const ImportDialog = { `)) ReactDOM.render(React.createElement(ImportDialogBox, { onFileAdded: PasteInput.handleFile, - exampleImageUrl: serverData['import-example.png'] + exampleImageUrl: serverData['import-example.png'], + downloadScreenshot: ImportDialog.downloadScreenshot }), $('.importDialogWrapper').get(0)) }, show: function() { ImportDialog.openLightbox('import-dialog') }, hide: function() { - ImportDialog.closeLightbox('import-dialog') + ImportDialog.closeLightbox() + }, + downloadScreenshot: function() { + ImportDialog.hide() + Map.offerScreenshotDownload() } } diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js index 932e3319..a1d2bbff 100644 --- a/frontend/src/Metamaps/GlobalUI/index.js +++ b/frontend/src/Metamaps/GlobalUI/index.js @@ -12,9 +12,11 @@ import NotificationIcon from './NotificationIcon' const GlobalUI = { notifyTimeout: null, + notifyQueue: [], + notifying: false, lightbox: null, init: function(serverData) { - var self = GlobalUI + const self = GlobalUI self.Search.init(serverData) self.CreateMap.init(serverData) @@ -45,7 +47,7 @@ const GlobalUI = { }, 200, 'easeInCubic', function() { $(this).hide() }) }, openLightbox: function(which) { - var self = GlobalUI + const self = GlobalUI $('.lightboxContent').hide() $('#' + which).show() @@ -72,7 +74,7 @@ const GlobalUI = { }, closeLightbox: function(event) { - var self = GlobalUI + const self = GlobalUI if (event) event.preventDefault() @@ -96,23 +98,45 @@ const GlobalUI = { } self.lightbox = null }, - notifyUser: function(message, leaveOpen) { - var self = GlobalUI + notifyUser: function(message, opts = {}) { + const self = GlobalUI + + if (self.notifying) { + self.notifyQueue.push({ message, opts }) + return + } else { + self._notifyUser(message, opts) + } + }, + // note: use the wrapper function notifyUser instead of this one + _notifyUser: function(message, opts = {}) { + const self = GlobalUI + + const { leaveOpen = false, timeOut = 8000 } = opts $('#toast').html(message) self.showDiv('#toast') clearTimeout(self.notifyTimeOut) + if (!leaveOpen) { self.notifyTimeOut = setTimeout(function() { - self.hideDiv('#toast') - }, 8000) + GlobalUI.clearNotify() + }, timeOut) } + + self.notifying = true }, clearNotify: function() { - var self = GlobalUI + const self = GlobalUI - clearTimeout(self.notifyTimeOut) - self.hideDiv('#toast') + // if there are messages remaining, display them + if (self.notifyQueue.length > 0) { + const { message, opts } = self.notifyQueue.shift() + self._notifyUser(message, opts) + } else { + self.hideDiv('#toast') + self.notifying = false + } }, shareInvite: function(inviteLink) { clipboard.copy({ diff --git a/frontend/src/Metamaps/Import.js b/frontend/src/Metamaps/Import.js index deb71048..a7aae5ae 100644 --- a/frontend/src/Metamaps/Import.js +++ b/frontend/src/Metamaps/Import.js @@ -374,7 +374,7 @@ const Import = { $.get('/hacks/load_url_title', { url }, function success(data, textStatus) { - if (data.trim() === '') return + if (typeof data === 'string' && data.trim() === '') return var selector = '#showcard #topic_' + topic.get('id') + ' .best_in_place' if ($(selector).find('form').length > 0) { $(selector).find('textarea, input').val(data.title) diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index c6a2cad9..dbebfce8 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -20,7 +20,7 @@ const Listeners = { if (!(Active.Map || Active.Topic)) return const onCanvas = e.target.tagName === 'BODY' - + switch (e.which) { case 13: // if enter key is pressed // prevent topic creation if sending a message @@ -31,6 +31,10 @@ const Listeners = { case 27: // if esc key is pressed JIT.escKeyHandler() break + case 46: // if DEL is pressed + e.preventDefault() + Control.deleteSelected() + break case 65: // if a or A is pressed if ((e.ctrlKey || e.metaKey) && onCanvas) { const nodesCount = Object.keys(Visualize.mGraph.graph.nodes).length @@ -124,7 +128,6 @@ const Listeners = { break } }) - $(window).resize(function() { if (Visualize && Visualize.mGraph) { Util.resizeCanvas(Visualize.mGraph.canvas) diff --git a/frontend/src/Metamaps/Map/InfoBox.js b/frontend/src/Metamaps/Map/InfoBox.js index 21d947ad..1949e96e 100644 --- a/frontend/src/Metamaps/Map/InfoBox.js +++ b/frontend/src/Metamaps/Map/InfoBox.js @@ -35,9 +35,11 @@ const InfoBox = { data-bip-value="{{desc}}" >{{desc}}`, userImageUrl: '', - init: function(serverData) { + init: function(serverData, updateThumbnail) { var self = InfoBox + self.updateThumbnail = updateThumbnail + $('.mapInfoIcon').click(self.toggleBox) $('.mapInfoBox').click(function(event) { event.stopPropagation() @@ -181,6 +183,7 @@ const InfoBox = { $('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect) $('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap) + $('.mapInfoThumbnail').unbind().click(self.updateThumbnail) $('.mapContributors span, #mapContribs').unbind().click(function(event) { $('.mapContributors .tip').toggle() diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js index 68835ac6..e835d42f 100644 --- a/frontend/src/Metamaps/Map/index.js +++ b/frontend/src/Metamaps/Map/index.js @@ -46,7 +46,10 @@ const Map = { GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html() self.updateStar() - InfoBox.init(serverData) + + InfoBox.init(serverData, function updateThumbnail() { + self.uploadMapScreenshot() + }) CheatSheet.init(serverData) $('.viewOnly .requestAccess').click(self.requestAccess) @@ -253,6 +256,48 @@ const Map = { } }, exportImage: function() { + Map.uploadMapScreenshot() + Map.offerScreenshotDownload() + GlobalUI.notifyUser('Note: this button is going away. Check the map card or the import box for setting the map thumbnail or downloading a screenshot.') + }, + offerScreenshotDownload: () => { + const canvas = Map.getMapCanvasForScreenshots() + const filename = Map.getMapScreenshotFilename(Active.Map) + + var downloadMessage = outdent` + Captured map screenshot! + + DOWNLOAD + ` + GlobalUI.notifyUser(downloadMessage) + }, + uploadMapScreenshot: () => { + const canvas = Map.getMapCanvasForScreenshots() + const filename = Map.getMapScreenshotFilename(Active.Map) + + canvas.canvas.toBlob(imageBlob => { + const formData = new window.FormData() + formData.append('map[screenshot]', imageBlob, filename) + $.ajax({ + type: 'PATCH', + dataType: 'json', + url: `/maps/${Active.Map.id}`, + data: formData, + processData: false, + contentType: false, + success: function(data) { + GlobalUI.notifyUser('Successfully updated map screenshot.') + }, + error: function() { + GlobalUI.notifyUser('Failed to update map screenshot.') + } + }) + }) + }, + getMapCanvasForScreenshots: () => { var canvas = {} canvas.canvas = document.createElement('canvas') @@ -338,8 +383,9 @@ const Map = { node.visited = !T }) - var map = Active.Map - + return canvas + }, + getMapScreenshotFilename: map => { var today = new Date() var dd = today.getDate() var mm = today.getMonth() + 1 // January is 0! @@ -354,30 +400,7 @@ const Map = { var mapName = map.get('name').split(' ').join(['-']) const filename = `metamap-${map.id}-${mapName}-${today}.png` - - var downloadMessage = outdent` - Captured map screenshot! - DOWNLOAD` - GlobalUI.notifyUser(downloadMessage) - - canvas.canvas.toBlob(imageBlob => { - const formData = new window.FormData() - formData.append('map[screenshot]', imageBlob, filename) - $.ajax({ - type: 'PATCH', - dataType: 'json', - url: `/maps/${map.id}`, - data: formData, - processData: false, - contentType: false, - success: function(data) { - console.log('successfully uploaded map screenshot') - }, - error: function() { - console.log('failed to save map screenshot') - } - }) - }) + return filename } } diff --git a/frontend/src/Metamaps/PasteInput.js b/frontend/src/Metamaps/PasteInput.js index 6227b23b..b72ae545 100644 --- a/frontend/src/Metamaps/PasteInput.js +++ b/frontend/src/Metamaps/PasteInput.js @@ -6,6 +6,7 @@ import Visualize from './Visualize' const PasteInput = { // thanks to https://github.com/kevva/url-regex + // eslint-disable-next-line no-useless-escape URL_REGEX: new RegExp('^(?:(?:(?:[a-z]+:)?//)|www\.)(?:\S+(?::\S*)?@)?(?:localhost|(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])(?:\.(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){3}|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#][^\s"]*)?$'), init: function() { diff --git a/frontend/src/Metamaps/Realtime/events.js b/frontend/src/Metamaps/Realtime/events.js index 45626f72..b23fb3f3 100644 --- a/frontend/src/Metamaps/Realtime/events.js +++ b/frontend/src/Metamaps/Realtime/events.js @@ -14,7 +14,7 @@ module.exports = { SEND_COORDS: 'SEND_COORDS', DRAG_TOPIC: 'DRAG_TOPIC', - /* EVENTS RECEIVABLE FROM NODE SERVER*/ + /* EVENTS RECEIVABLE FROM NODE SERVER */ JUNTO_UPDATED: 'JUNTO_UPDATED', INVITED_TO_CALL: 'INVITED_TO_CALL', INVITED_TO_JOIN: 'INVITED_TO_JOIN', @@ -29,5 +29,5 @@ module.exports = { NEW_MAPPER: 'NEW_MAPPER', LOST_MAPPER: 'LOST_MAPPER', TOPIC_DRAGGED: 'TOPIC_DRAGGED', - PEER_COORDS_UPDATED: 'PEER_COORDS_UPDATED', + PEER_COORDS_UPDATED: 'PEER_COORDS_UPDATED' } diff --git a/frontend/src/Metamaps/Realtime/index.js b/frontend/src/Metamaps/Realtime/index.js index e2b2de3c..90d1db67 100644 --- a/frontend/src/Metamaps/Realtime/index.js +++ b/frontend/src/Metamaps/Realtime/index.js @@ -9,8 +9,7 @@ import Create from '../Create' import DataModel from '../DataModel' import JIT from '../JIT' import Util from '../Util' -import Views from '../Views' -import { ChatView } from '../Views' +import Views, { ChatView } from '../Views' import Visualize from '../Visualize' import { @@ -153,7 +152,7 @@ let Realtime = { config: { DOUBLE_CLICK_TOLERANCE: 200 } }) self.room.videoAdded(self.handleVideoAdded) - + self.startActiveMap() } // if Active.Mapper }, diff --git a/frontend/src/Metamaps/Realtime/receivable.js b/frontend/src/Metamaps/Realtime/receivable.js index d37f1b6f..f673d2e5 100644 --- a/frontend/src/Metamaps/Realtime/receivable.js +++ b/frontend/src/Metamaps/Realtime/receivable.js @@ -4,18 +4,12 @@ everthing in this file happens as a result of websocket events */ -import { indexOf } from 'lodash' - import { JUNTO_UPDATED } from './events' import Active from '../Active' import { ChatView } from '../Views' import DataModel from '../DataModel' import GlobalUI from '../GlobalUI' -import Control from '../Control' -import Mapper from '../Mapper' -import Topic from '../Topic' -import Synapse from '../Synapse' import Util from '../Util' import Visualize from '../Visualize' @@ -155,7 +149,7 @@ export const invitedToCall = self => inviter => { notifyText += username + ' is inviting you to a conversation. Join live?' notifyText += ' ' notifyText += ' ' - GlobalUI.notifyUser(notifyText, true) + GlobalUI.notifyUser(notifyText, { leaveOpen: true }) $('#toast button.yes').click(e => self.acceptCall(inviter)) $('#toast button.no').click(e => self.denyCall(inviter)) } @@ -168,7 +162,7 @@ export const invitedToJoin = self => inviter => { var notifyText = username + ' is inviting you to the conversation. Join?' notifyText += ' ' notifyText += ' ' - GlobalUI.notifyUser(notifyText, true) + GlobalUI.notifyUser(notifyText, { leaveOpen: true }) $('#toast button.yes').click(e => self.joinCall()) $('#toast button.no').click(e => self.denyInvite(inviter)) } @@ -207,10 +201,10 @@ export const callInProgress = self => () => { var notifyText = "There's a conversation happening, want to join?" notifyText += ' ' notifyText += ' ' - GlobalUI.notifyUser(notifyText, true) + GlobalUI.notifyUser(notifyText, { leaveOpen: true }) $('#toast button.yes').click(e => self.joinCall()) $('#toast button.no').click(e => GlobalUI.clearNotify()) - ChatView.conversationInProgress() + ChatView.conversationInProgress() } export const callStarted = self => () => { @@ -218,7 +212,7 @@ export const callStarted = self => () => { var notifyText = "There's a conversation starting, want to join?" notifyText += ' ' notifyText += ' ' - GlobalUI.notifyUser(notifyText, true) + GlobalUI.notifyUser(notifyText, { leaveOpen: true }) $('#toast button.yes').click(e => self.joinCall()) $('#toast button.no').click(e => GlobalUI.clearNotify()) ChatView.conversationInProgress() diff --git a/frontend/src/Metamaps/Router.js b/frontend/src/Metamaps/Router.js index f1e2aa97..6df1c264 100644 --- a/frontend/src/Metamaps/Router.js +++ b/frontend/src/Metamaps/Router.js @@ -39,7 +39,7 @@ const _Router = Backbone.Router.extend({ var navigate = function() { self.timeoutId = setTimeout(function() { - self.navigate('') + self.navigateAndTrack('') }, 300) } @@ -121,7 +121,7 @@ const _Router = Backbone.Router.extend({ path += '/' + DataModel.Maps.Mapper.mapperId } - self.navigate(path) + self.navigateAndTrack(path) } var navigateTimeout = function() { self.timeoutId = setTimeout(navigate, 300) @@ -202,6 +202,11 @@ const _Router = Backbone.Router.extend({ const Router = new _Router() +Router.navigateAndTrack = (fragment, options) => { + Router.navigate(fragment, options) + window.ga && window.ga('send', 'pageview', location.pathname, {title: document.title}) +} + Router.intercept = function(evt) { var segments diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js index 1e5c3b66..562843e7 100644 --- a/frontend/src/Metamaps/Util.js +++ b/frontend/src/Metamaps/Util.js @@ -1,6 +1,14 @@ /* global $ */ import { Parser, HtmlRenderer } from 'commonmark' +import { emojiIndex } from 'emoji-mart' +import { escapeRegExp } from 'lodash' + +const emojiToShortcodes = {} +Object.keys(emojiIndex.emojis).forEach(key => { + const emoji = emojiIndex.emojis[key] + emojiToShortcodes[emoji.native] = emoji.colons +}) const Util = { // helper function to determine how many lines are needed @@ -150,6 +158,29 @@ const Util = { canvas.scale(oldAttr.scaleX, oldAttr.scaleY) const newAttr = Util.logCanvasAttributes(canvas) canvas.translate(newAttr.centreCoords.x - oldAttr.centreCoords.x, newAttr.centreCoords.y - oldAttr.centreCoords.y) + }, + removeEmoji: function(withEmoji) { + let text = withEmoji + Object.keys(emojiIndex.emojis).forEach(key => { + const emoji = emojiIndex.emojis[key] + text = text.replace(new RegExp(escapeRegExp(emoji.native), 'g'), emoji.colons) + }) + return text + }, + addEmoji: function(withoutEmoji, opts = { emoticons: true }) { + let text = withoutEmoji + Object.keys(emojiIndex.emojis).forEach(key => { + const emoji = emojiIndex.emojis[key] + text = text.replace(new RegExp(escapeRegExp(emoji.colons), 'g'), emoji.native) + }) + if (opts.emoticons) { + Object.keys(emojiIndex.emoticons).forEach(emoticon => { + const key = emojiIndex.emoticons[emoticon] + const emoji = emojiIndex.emojis[key] + text = text.replace(new RegExp(escapeRegExp(emoticon), 'g'), emoji.native) + }) + } + return text } } diff --git a/frontend/src/Metamaps/Views/ChatView.js b/frontend/src/Metamaps/Views/ChatView.js index f46a2caf..0024a623 100644 --- a/frontend/src/Metamaps/Views/ChatView.js +++ b/frontend/src/Metamaps/Views/ChatView.js @@ -49,7 +49,7 @@ const ChatView = { $('#' + ChatView.domId).hide() }, render: () => { - if (!Active.Map) return + if (!Active.Map) return const self = ChatView self.mapChat = ReactDOM.render(React.createElement(MapChat, { conversationLive: self.conversationLive, @@ -111,7 +111,7 @@ const ChatView = { conversationInProgress: participating => { ChatView.conversationLive = true ChatView.isParticipating = participating - ChatView.render() + ChatView.render() }, conversationEnded: () => { ChatView.conversationLive = false @@ -144,7 +144,7 @@ const ChatView = { }, addMessage: (message, isInitial, wasMe) => { const self = ChatView - if (!isInitial) self.mapChat.newMessage() + if (!isInitial) self.mapChat.newMessage() if (!wasMe && !isInitial && self.alertSound) self.sound.play('receivechat') self.messages.add(message) self.render() diff --git a/frontend/src/Metamaps/Views/Room.js b/frontend/src/Metamaps/Views/Room.js index 3dc43708..f7ffbb8f 100644 --- a/frontend/src/Metamaps/Views/Room.js +++ b/frontend/src/Metamaps/Views/Room.js @@ -1,13 +1,7 @@ /* global $ */ -import Backbone from 'backbone' import attachMediaStream from 'attachmediastream' -// TODO is this line good or bad -// Backbone.$ = window.$ - -import Active from '../Active' -import DataModel from '../DataModel' import Realtime from '../Realtime' import VideoView from './VideoView' diff --git a/frontend/src/Metamaps/Views/index.js b/frontend/src/Metamaps/Views/index.js index ab96e552..c496b3b0 100644 --- a/frontend/src/Metamaps/Views/index.js +++ b/frontend/src/Metamaps/Views/index.js @@ -9,7 +9,7 @@ import { JUNTO_UPDATED } from '../Realtime/events' const Views = { init: (serverData) => { $(document).on(JUNTO_UPDATED, () => ExploreMaps.render()) - ChatView.init([serverData['sounds/MM_sounds.mp3'],serverData['sounds/MM_sounds.ogg']]) + ChatView.init([serverData['sounds/MM_sounds.mp3'], serverData['sounds/MM_sounds.ogg']]) }, ExploreMaps, ChatView, diff --git a/frontend/src/Metamaps/Visualize.js b/frontend/src/Metamaps/Visualize.js index bf7451e2..242de459 100644 --- a/frontend/src/Metamaps/Visualize.js +++ b/frontend/src/Metamaps/Visualize.js @@ -154,8 +154,6 @@ const Visualize = { self.mGraph.graph.empty() } - if (self.type === 'ForceDirected' && Active.Mapper) $.post('/maps/' + Active.Map.id + '/events/user_presence') - function runAnimation() { Loading.hide() $('#new_topic').show() @@ -216,9 +214,9 @@ const Visualize = { var t = Active.Topic if (m && window.location.pathname !== '/maps/' + m.id) { - Router.navigate('/maps/' + m.id) + Router.navigateAndTrack('/maps/' + m.id) } else if (t && window.location.pathname !== '/topics/' + t.id) { - Router.navigate('/topics/' + t.id) + Router.navigateAndTrack('/topics/' + t.id) } }, 800) }, diff --git a/frontend/src/components/ImportDialogBox.js b/frontend/src/components/ImportDialogBox.js index 9cc8b136..85b3ee67 100644 --- a/frontend/src/components/ImportDialogBox.js +++ b/frontend/src/components/ImportDialogBox.js @@ -6,7 +6,6 @@ class ImportDialogBox extends Component { super(props) this.state = { - showImportInstructions: false } } @@ -15,21 +14,9 @@ class ImportDialogBox extends Component { } handleFile = (files, e) => { - // // for some reason it uploads twice, so we need this debouncer - // // eslint-disable-next-line no-return-assign - // this.debouncer = this.debouncer || window.setTimeout(() => this.debouncer = null, 10) - // if (!this.debouncer) { - // this.props.onFileAdded(files[0]) - // } this.props.onFileAdded(files[0]) } - toggleShowInstructions = e => { - this.setState({ - showImportInstructions: !this.state.showImportInstructions - }) - } - render = () => { return (
@@ -40,6 +27,9 @@ class ImportDialogBox extends Component {
Drop files here!
-
)
}
@@ -71,7 +45,8 @@ class ImportDialogBox extends Component {
ImportDialogBox.propTypes = {
onFileAdded: PropTypes.func,
- exampleImageUrl: PropTypes.string
+ exampleImageUrl: PropTypes.string,
+ downloadScreenshot: PropTypes.func
}
export default ImportDialogBox
diff --git a/frontend/src/components/MapChat/Message.js b/frontend/src/components/MapChat/Message.js
index a13bbf3b..7cfe9ff2 100644
--- a/frontend/src/components/MapChat/Message.js
+++ b/frontend/src/components/MapChat/Message.js
@@ -1,5 +1,6 @@
import React from 'react'
import Autolinker from 'autolinker'
+import Util from '../../Metamaps/Util'
const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false })
@@ -10,24 +11,25 @@ function addZero(i) {
return i
}
-function formatDate(created_at) {
- let date = new Date(created_at)
+function formatDate(createdAt) {
+ let date = new Date(createdAt)
let formatted = (date.getMonth() + 1) + '/' + date.getDate()
formatted += ' ' + addZero(date.getHours()) + ':' + addZero(date.getMinutes())
return formatted
}
const Message = props => {
- const { user_image, user_name, message, created_at, heading } = props
- const messageHtml = {__html: linker.link(message)}
+ const { user_image: userImage, user_name: userName, message, created_at: createdAt, heading } = props
+ const messageHtml = {__html: linker.link(Util.addEmoji(message, { emoticons: false }))}
+
return (
Export as JSON
+
+ Download screenshot
+
IMPORT
To upload a file, drop it here:
- - Show/hide import instructions - -
- {!this.state.showImportInstructions ? null : (
- 
-
)}
+ - You can import topics and synapses by uploading a spreadsheet here. - The file should be in comma-separated format (when you save, change the - filetype from .xls to .csv). -
-You can choose which columns to include in your data. Topics must have a name field. Synapses must have Topic 1 and Topic 2.
--
* There are many valid import formats. Try exporting a map to see what columns you can include in your import data. You can also copy-paste from Excel to import, or import JSON.
-* If you are importing a list of links, you can use a Link column in place of the Name column.
-See docs.metamaps.cc for instructions.
- {heading && 
}
+ {heading && 
}
{heading &&
- {user_name}
- {formatDate(created_at)}
+ {userName}
+ {formatDate(createdAt)}
}
diff --git a/frontend/src/components/MapChat/NewMessage.js b/frontend/src/components/MapChat/NewMessage.js
new file mode 100644
index 00000000..2046ac9f
--- /dev/null
+++ b/frontend/src/components/MapChat/NewMessage.js
@@ -0,0 +1,65 @@
+import React, { PropTypes, Component } from 'react'
+import { Emoji, Picker } from 'emoji-mart'
+
+class NewMessage extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ showEmojiPicker: false
+ }
+ }
+
+ toggleEmojiPicker = () => {
+ this.setState({ showEmojiPicker: !this.state.showEmojiPicker })
+ }
+
+ handleClick = (emoji, event) => {
+ const { messageText } = this.props
+ this.props.handleChange({ target: {
+ value: messageText + emoji.colons
+ }})
+
+ this.setState({ showEmojiPicker: false })
+ this.props.focusMessageInput()
+ }
+
+ render = () => {
+ return (
+
+
+ )
+ }
+}
+
+NewMessage.propTypes = {
+ messageText: PropTypes.string,
+ handleChange: PropTypes.func,
+ focusMessageInput: PropTypes.func,
+ textAreaProps: PropTypes.shape({
+ className: PropTypes.string,
+ ref: PropTypes.func,
+ placeholder: PropTypes.string,
+ onKeyUp: PropTypes.func,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func
+ })
+}
+
+export default NewMessage
diff --git a/frontend/src/components/MapChat/Participant.js b/frontend/src/components/MapChat/Participant.js
index 340c92a4..0fede6aa 100644
--- a/frontend/src/components/MapChat/Participant.js
+++ b/frontend/src/components/MapChat/Participant.js
@@ -2,28 +2,28 @@ import React, { PropTypes, Component } from 'react'
class Participant extends Component {
render() {
- const { conversationLive, mapperIsLive, isParticipating, isPending, id, self, image, username, selfName, color } = this.props
+ const { conversationLive, mapperIsLive, isParticipating, isPending, id, self, image, username, color } = this.props
return (
-
+
+
+
-
+
- 
-
-
- {username} {self ? '(me)' : ''}
-
- {!self && !conversationLive &&
+
)
}
}
diff --git a/frontend/src/components/MapChat/index.js b/frontend/src/components/MapChat/index.js
index aa5b354e..27bff527 100644
--- a/frontend/src/components/MapChat/index.js
+++ b/frontend/src/components/MapChat/index.js
@@ -2,6 +2,8 @@ import React, { PropTypes, Component } from 'react'
import Unread from './Unread'
import Participant from './Participant'
import Message from './Message'
+import NewMessage from './NewMessage'
+import Util from '../../Metamaps/Util'
function makeList(messages) {
let currentHeader
@@ -29,7 +31,7 @@ class MapChat extends Component {
messageText: '',
alertSound: true, // whether to play sounds on arrival of new messages or not
cursorsShowing: true,
- videosShowing: true
+ videosShowing: true
}
}
@@ -40,7 +42,7 @@ class MapChat extends Component {
messageText: '',
alertSound: true, // whether to play sounds on arrival of new messages or not
cursorsShowing: true,
- videosShowing: true
+ videosShowing: true
})
}
@@ -94,12 +96,17 @@ class MapChat extends Component {
handleTextareaKeyUp = e => {
if (e.which === 13) {
e.preventDefault()
- const text = this.state.messageText
+ const text = Util.removeEmoji(this.state.messageText)
this.props.handleInputMessage(text)
this.setState({ messageText: '' })
}
}
+ focusMessageInput = () => {
+ if (!this.messageInput) return
+ this.messageInput.focus()
+ }
+
render = () => {
const rightOffset = this.state.open ? '0' : '-300px'
const { conversationLive, isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
@@ -116,12 +123,12 @@ class MapChat extends Component {
+
+
+
+ {username} {self ? '(me)' : ''}
+
+ {!self && !conversationLive &&
{conversationLive && Chat
LIVE
- {isParticipating &&
- LEAVE
- }
- {!isParticipating &&
- JOIN
- }
+ {isParticipating &&
+ LEAVE
+ }
+ {!isParticipating &&
+ JOIN
+ }
}
{participants.map(participant => this.messagesDiv = div}>
+
{ this.messagesDiv = div }}>
{makeList(messages)}
-