+
+
+
Import data
+
diff --git a/frontend/src/Metamaps/GlobalUI/ImportDialog.js b/frontend/src/Metamaps/GlobalUI/ImportDialog.js
new file mode 100644
index 00000000..96f9524f
--- /dev/null
+++ b/frontend/src/Metamaps/GlobalUI/ImportDialog.js
@@ -0,0 +1,38 @@
+/* global $ */
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import outdent from 'outdent'
+
+import ImportDialogBox from '../../components/ImportDialogBox'
+
+import PasteInput from '../PasteInput'
+
+const ImportDialog = {
+ openLightbox: null,
+ closeLightbox: null,
+
+ init: function (serverData, openLightbox, closeLightbox) {
+ const self = ImportDialog
+ self.openLightbox = openLightbox
+ self.closeLightbox = closeLightbox
+
+ $('#lightbox_content').append($(outdent`
+
diff --git a/frontend/src/components/MapListItem.js b/frontend/src/components/Maps/MapListItem.js
similarity index 100%
rename from frontend/src/components/MapListItem.js
rename to frontend/src/components/Maps/MapListItem.js
diff --git a/frontend/src/components/MapperCard.js b/frontend/src/components/Maps/MapperCard.js
similarity index 68%
rename from frontend/src/components/MapperCard.js
rename to frontend/src/components/Maps/MapperCard.js
index e2f4cb33..dbb06cbc 100644
--- a/frontend/src/components/MapperCard.js
+++ b/frontend/src/components/Maps/MapperCard.js
@@ -3,14 +3,14 @@ import React, { Component, PropTypes } from 'react'
class MapperCard extends Component {
render = () => {
const { user } = this.props
-
+
return (
+
+
+ `))
+ ReactDOM.render(React.createElement(ImportDialogBox, {
+ onFileAdded: PasteInput.handleFile,
+ exampleImageUrl: serverData['import-example.png']
+ }), $('.importDialogWrapper').get(0))
+ },
+ show: function () {
+ ImportDialog.openLightbox('import-dialog')
+ },
+ hide: function () {
+ ImportDialog.closeLightbox('import-dialog')
+ }
+}
+
+export default ImportDialog
diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js
index 3b16375e..4eb29bb7 100644
--- a/frontend/src/Metamaps/GlobalUI/index.js
+++ b/frontend/src/Metamaps/GlobalUI/index.js
@@ -6,6 +6,7 @@ import Create from '../Create'
import Search from './Search'
import CreateMap from './CreateMap'
import Account from './Account'
+import ImportDialog from './ImportDialog'
/*
* Metamaps.Backbone
@@ -21,6 +22,7 @@ const GlobalUI = {
self.Search.init()
self.CreateMap.init()
self.Account.init()
+ self.ImportDialog.init(Metamaps.Erb, self.openLightbox, self.closeLightbox)
if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
@@ -141,5 +143,5 @@ const GlobalUI = {
}
}
-export { Search, CreateMap, Account }
+export { Search, CreateMap, Account, ImportDialog }
export default GlobalUI
diff --git a/frontend/src/Metamaps/Import.js b/frontend/src/Metamaps/Import.js
index f3e872ec..868843bf 100644
--- a/frontend/src/Metamaps/Import.js
+++ b/frontend/src/Metamaps/Import.js
@@ -411,6 +411,7 @@ const Import = {
newKey = newKey.replace(/\s/g, '') // remove whitespace
if (newKey === 'url') newKey = 'link'
if (newKey === 'title') newKey = 'name'
+ if (newKey === 'label') newKey = 'desc'
if (newKey === 'description') newKey = 'desc'
if (newKey === 'direction') newKey = 'category'
return newKey
diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js
index 4c2f78bb..43f04a30 100644
--- a/frontend/src/Metamaps/Map/index.js
+++ b/frontend/src/Metamaps/Map/index.js
@@ -40,6 +40,11 @@ const Map = {
init: function () {
var self = Map
+ // prevent right clicks on the main canvas, so as to not get in the way of our right clicks
+ $('#wrapper').on('contextmenu', function (e) {
+ return false
+ })
+
$('.starMap').click(function () {
if ($(this).is('.starred')) self.unstar()
else self.star()
@@ -52,7 +57,7 @@ const Map = {
GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
self.updateStar()
- self.InfoBox.init()
+ InfoBox.init()
CheatSheet.init()
$(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper)
@@ -102,7 +107,7 @@ const Map = {
Selected.reset()
// set the proper mapinfobox content
- Map.InfoBox.load()
+ InfoBox.load()
// these three update the actual filter box with the right list items
Filter.checkMetacodes()
@@ -132,7 +137,7 @@ const Map = {
Create.newTopic.hide(true) // true means force (and override pinned)
Create.newSynapse.hide()
Filter.close()
- Map.InfoBox.close()
+ InfoBox.close()
Realtime.endActiveMap()
}
},
diff --git a/frontend/src/Metamaps/PasteInput.js b/frontend/src/Metamaps/PasteInput.js
index 6f1cc03f..f0425032 100644
--- a/frontend/src/Metamaps/PasteInput.js
+++ b/frontend/src/Metamaps/PasteInput.js
@@ -21,16 +21,7 @@ const PasteInput = {
e.preventDefault();
var coords = Util.pixelsToCoords({ x: e.clientX, y: e.clientY })
if (e.dataTransfer.files.length > 0) {
- var fileReader = new window.FileReader()
- fileReader.readAsText(e.dataTransfer.files[0])
- fileReader.onload = function(e) {
- var text = e.currentTarget.result
- if (text.substring(0,5) === '(.*)<\/string>[\s\S]*/m, '$1')
- }
- self.handle(text, coords)
- }
+ self.handleFile(e.dataTransfer.files[0], coords)
}
// OMG import bookmarks 😍
if (e.dataTransfer.items.length > 0) {
@@ -52,7 +43,21 @@ const PasteInput = {
})
},
- handle: function(text, coords) {
+ handleFile: (file, coords = null) => {
+ var self = PasteInput
+ var fileReader = new window.FileReader()
+ fileReader.readAsText(file)
+ fileReader.onload = function(e) {
+ var text = e.currentTarget.result
+ if (text.substring(0,5) === '(.*)<\/string>[\s\S]*/m, '$1')
+ }
+ self.handle(text, coords)
+ }
+ },
+
+ handle: function(text, coords = null) {
var self = PasteInput
if (text.match(self.URL_REGEX)) {
diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js
index d179713e..44bbfdb6 100644
--- a/frontend/src/Metamaps/index.js
+++ b/frontend/src/Metamaps/index.js
@@ -10,7 +10,7 @@ import Create from './Create'
import Debug from './Debug'
import Filter from './Filter'
import GlobalUI, {
- Search, CreateMap, Account as GlobalUI_Account
+ Search, CreateMap, ImportDialog, Account as GlobalUI_Account
} from './GlobalUI'
import Import from './Import'
import JIT from './JIT'
@@ -47,6 +47,7 @@ Metamaps.GlobalUI = GlobalUI
Metamaps.GlobalUI.Search = Search
Metamaps.GlobalUI.CreateMap = CreateMap
Metamaps.GlobalUI.Account = GlobalUI_Account
+Metamaps.GlobalUI.ImportDialog = ImportDialog
Metamaps.Import = Import
Metamaps.JIT = JIT
Metamaps.Listeners = Listeners
diff --git a/frontend/src/components/ImportDialogBox.js b/frontend/src/components/ImportDialogBox.js
new file mode 100644
index 00000000..bfb60235
--- /dev/null
+++ b/frontend/src/components/ImportDialogBox.js
@@ -0,0 +1,76 @@
+import React, { PropTypes, Component } from 'react'
+import Dropzone from 'react-dropzone'
+
+class ImportDialogBox extends Component {
+ constructor (props) {
+ super(props)
+
+ this.state = {
+ showImportInstructions: false
+ }
+ }
+
+ handleExport = format => () => {
+ window.open(`${window.location.pathname}/export.${format}`, '_blank')
+ }
+
+ 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])
+ }
+ }
+
+ toggleShowInstructions = e => {
+ this.setState({
+ showImportInstructions: !this.state.showImportInstructions
+ })
+ }
+
+ render = () => {
+ return (
+
+
+ Drop files here!
+
+
+ )
+ }
+}
+
+ImportDialogBox.propTypes = {
+ onFileAdded: PropTypes.func,
+ exampleImageUrl: PropTypes.string
+}
+
+export default ImportDialogBox
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Maps/Header.js
similarity index 76%
rename from frontend/src/components/Header.js
rename to frontend/src/components/Maps/Header.js
index ee4184d5..d323c0d5 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Maps/Header.js
@@ -21,15 +21,15 @@ class Header extends Component {
const { signedIn, section } = this.props
const activeClass = (title) => {
- let forClass = "exploreMapsButton"
- forClass += " " + title + "Maps"
- if (title == "my" && section == "mine" ||
- title == section) forClass += " active"
+ let forClass = 'exploreMapsButton'
+ forClass += ' ' + title + 'Maps'
+ if (title === 'my' && section === 'mine' ||
+ title === section) forClass += ' active'
return forClass
}
- const explore = section == "mine" || section == "active" || section == "starred" || section == "shared" || section == "featured"
- const mapper = section == "mapper"
+ const explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
+ const mapper = section === 'mapper'
return (
EXPORT
+
+ Export as CSV
+
+
+ Export as JSON
+
+ 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.
+
@@ -38,31 +38,31 @@ class Header extends Component {
-
)
diff --git a/frontend/src/components/Maps.js b/frontend/src/components/Maps/index.js
similarity index 76%
rename from frontend/src/components/Maps.js
rename to frontend/src/components/Maps/index.js
index 7931da5d..22a41d3e 100644
--- a/frontend/src/components/Maps.js
+++ b/frontend/src/components/Maps/index.js
@@ -1,20 +1,19 @@
import React, { Component, PropTypes } from 'react'
-import Header from './Header.js'
-import MapperCard from './MapperCard.js'
-import MapCard from './MapCard.js'
-import MapListItem from './MapListItem.js'
+import Header from './Header'
+import MapperCard from './MapperCard'
+import MapCard from './MapCard'
+import MapListItem from './MapListItem'
class Maps extends Component {
render = () => {
const { maps, currentUser, section, displayStyle, user, moreToLoad, loadMore } = this.props
let mapElements
- if (displayStyle == 'grid') {
+ if (displayStyle === 'grid') {
mapElements = maps.models.map(function (map) {
return
+
-
-
-
-
-
-
+
+
+
+
+
+
{ user.name }
@@ -19,10 +19,10 @@ class MapperCard extends Component {
{ user.numMaps }
maps{ user.numTopics }
topics{ user.numSynapses }
synapses{ user.numTopics }
topics{ user.numSynapses }
synapses