make filterbox use onclickoutside

app/assets/stylesheets/application.scss.erb

@@ -1048,7 +1048,6 @@ label[for="user_remember_me"] {
 }
 
 .sidebarFilterBox {
-    display:none;
     width: 319px;
     padding: 16px 0;
     overflow-y: auto;

frontend/src/Metamaps/Filter.js

@@ -27,43 +27,6 @@ const Filter = {
   },
   isOpen: false,
   changing: false,
-  toggleBox: function(event) {
-    var self = Filter
-
-    if (self.isOpen) self.close()
-    else self.open()
-
-    event.stopPropagation()
-  },
-  open: function() {
-    var self = Filter
-
-    GlobalUI.Account.close()
-    $('.sidebarFilterIcon div').addClass('hide')
-
-    if (!self.isOpen && !self.changing) {
-      self.changing = true
-
-      var height = $(document).height() - 108
-      $('.sidebarFilterBox').css('max-height', height + 'px').fadeIn(200, function() {
-        self.changing = false
-        self.isOpen = true
-      })
-    }
-  },
-  close: function() {
-    var self = Filter
-    $('.sidebarFilterIcon div').removeClass('hide')
-
-    if (!self.changing) {
-      self.changing = true
-
-      $('.sidebarFilterBox').fadeOut(200, function() {
-        self.changing = false
-        self.isOpen = false
-      })
-    }
-  },
   reset: function() {
     var self = Filter
     self.filters.metacodes = []

frontend/src/Metamaps/GlobalUI/Account.js

@@ -17,7 +17,6 @@ const Account = {
   },
   open: function() {
     var self = Account
-    Filter.close()
     $('.sidebarAccountIcon .tooltipsUnder').addClass('hide')
     if (!self.isOpen && !self.changing) {
       self.changing = true

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -188,7 +188,6 @@ const ReactApp = {
     const self = ReactApp
     return {
       filterData: Filter.dataForPresentation,
-      toggleFilterBox: Filter.toggleBox,
       allForFiltering: Filter.filters,
       visibleForFiltering: Filter.visible,
       toggleMetacode: Filter.toggleMetacode,

frontend/src/Metamaps/JIT.js

@@ -1010,7 +1010,6 @@ const JIT = {
       Create.newTopic.open()
     } else if (!Mouse.didPan) {
       // SINGLE CLICK, no pan
-      Filter.close()
       TopicCard.hideCard()
       SynapseCard.hideCard()
       Create.newTopic.hide()

frontend/src/Metamaps/Map/index.js

@@ -142,7 +142,6 @@ const Map = {
       SynapseCard.hideCard()
       Create.newTopic.hide(true) // true means force (and override pinned)
       Create.newSynapse.hide()
-      Filter.close()
       InfoBox.close()
       Realtime.endActiveMap()
       self.requests = []

frontend/src/Metamaps/Topic.js

@@ -76,7 +76,6 @@ const Topic = {
       $('.rightclickmenu').remove()
       TopicCard.hideCard()
       SynapseCard.hideCard()
-      Filter.close()
     }
   },
   centerOn: function(nodeid, callback) {

frontend/src/components/MapView/MapButtons.js

@@ -8,7 +8,6 @@ class MapButtons extends Component {
     canEditMap: PropTypes.bool,
     onImportClick: PropTypes.func,
     onForkClick: PropTypes.func,
-    onFilterClick: PropTypes.func,
     filterData: PropTypes.object,
     allForFiltering: PropTypes.object,
     visibleForFiltering: PropTypes.object,
@@ -20,10 +19,24 @@ class MapButtons extends Component {
     filterAllSynapses: PropTypes.func,
   }
 
+  constructor(props) {
+    super(props)
+    this.state = {filterBoxOpen: false}
+  }
+
+  reset = () => {
+    this.setState({filterBoxOpen: false})
+  }
+
+  toggleFilterBox = event => {
+    this.setState({filterBoxOpen: !this.state.filterBoxOpen})
+  }
+
   render () {
     const { currentUser, canEditMap, filterBoxHtml, onFilterClick, onImportClick, onForkClick,
             filterData, allForFiltering, visibleForFiltering, toggleMetacode, toggleMapper, toggleSynapse,
             filterAllMetacodes, filterAllMappers, filterAllSynapses } = this.props
+    const { filterBoxOpen } = this.state
     return <div className="mapElement upperRightEl upperRightMapButtons upperRightUI">
       {canEditMap && <div className="importDialog upperRightEl upperRightIcon mapElement" onClick={onImportClick}>
         <div className="tooltipsUnder">
@@ -31,10 +44,10 @@ class MapButtons extends Component {
         </div>
       </div>}
       <div className="sidebarFilter upperRightEl">
-        <div className="sidebarFilterIcon upperRightIcon" onClick={onFilterClick}>
+        <div className="sidebarFilterIcon upperRightIcon ignore-react-onclickoutside" onClick={this.toggleFilterBox}>
           <div className="tooltipsUnder">Filter</div>
         </div>
-        <FilterBox filterData={filterData}
+        {filterBoxOpen && <FilterBox filterData={filterData}
                    allForFiltering={allForFiltering}
                    visibleForFiltering={visibleForFiltering}
                    toggleMetacode={toggleMetacode}
@@ -42,7 +55,8 @@ class MapButtons extends Component {
                    toggleSynapse={toggleSynapse}
                    filterAllMetacodes={filterAllMetacodes}
                    filterAllMappers={filterAllMappers}
-                   filterAllSynapses={filterAllSynapses} />
+                   filterAllSynapses={filterAllSynapses}
+                   closeBox={() => this.reset()} />}
       </div>
       {currentUser && <div className="sidebarFork upperRightEl">
         <div className="sidebarForkIcon upperRightIcon" onClick={onForkClick}>

frontend/src/components/MapView/index.js

@@ -17,7 +17,6 @@ class MapView extends Component {
     mapIsStarred: PropTypes.bool,
     onMapStar: PropTypes.func,
     onMapUnstar: PropTypes.func,
-    toggleFilterBox: PropTypes.func,
     filterData: PropTypes.object,
     allForFiltering: PropTypes.object,
     visibleForFiltering: PropTypes.object,
@@ -53,6 +52,7 @@ class MapView extends Component {
       chatOpen: false
     })
     this.mapChat.reset()
+    this.mapButtons.reset()
     this.props.endActiveMap()
   }
 
@@ -69,7 +69,7 @@ class MapView extends Component {
 
   render = () => {
     const { mobile, map, currentUser, onOpen, onClose,
-            toggleMapInfoBox, infoBoxHtml, toggleFilterBox, allForFiltering, visibleForFiltering,
+            toggleMapInfoBox, infoBoxHtml, allForFiltering, visibleForFiltering,
             toggleMetacode, toggleMapper, toggleSynapse, filterAllMetacodes,
             filterAllMappers, filterAllSynapses, filterData,
             openImportLightbox, forkMap, openHelpLightbox,
@@ -87,11 +87,11 @@ class MapView extends Component {
     const canEditMap = map && map.authorizeToEdit(currentUser)
     // TODO: stop using {...this.props} and make explicit
     return <div className="mapWrapper">
-      <MapButtons currentUser={currentUser}
+      <MapButtons ref={x => this.mapButtons = x}
+                  currentUser={currentUser}
                   onImportClick={openImportLightbox}
                   onForkClick={forkMap}
                   canEditMap={canEditMap}
-                  onFilterClick={toggleFilterBox}
                   filterData={filterData}
                   allForFiltering={allForFiltering}
                   visibleForFiltering={visibleForFiltering}

frontend/src/components/common/FilterBox.js

@@ -1,5 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 
+import onClickOutsideAddon from 'react-onclickoutside'
+
 class FilterBox extends Component {
   static propTypes = {
     filterData: PropTypes.object,
@@ -10,13 +12,20 @@ class FilterBox extends Component {
     toggleSynapse: PropTypes.func,
     filterAllMetacodes: PropTypes.func,
     filterAllMappers: PropTypes.func,
-    filterAllSynapses: PropTypes.func
+    filterAllSynapses: PropTypes.func,
+    closeBox: PropTypes.func
+  }
+
+  handleClickOutside = () => {
+    this.props.closeBox()
   }
 
   render () {
     const { filterData, allForFiltering, visibleForFiltering, toggleMetacode, toggleMapper, toggleSynapse,
             filterAllMetacodes, filterAllMappers, filterAllSynapses } = this.props
-
+    const style = {
+      maxHeight: document.body.clientHeight - 108 + 'px'
+    }
     const mapperAllClass = "showAll showAllMappers"
                               + (allForFiltering.mappers.length === visibleForFiltering.mappers.length ? ' active' : '')
     const mapperNoneClass = "hideAll hideAllMappers"
@@ -29,7 +38,7 @@ class FilterBox extends Component {
                               + (allForFiltering.synapses.length === visibleForFiltering.synapses.length ? ' active' : '')
     const synapseNoneClass = "hideAll hideAllSynapses"
                               + (visibleForFiltering.synapses.length === 0 ? ' active' : '')
-    return <div className="sidebarFilterBox upperRightBox">
+    return <div className="sidebarFilterBox upperRightBox" style={style}>
       <div className="filterBox">
         <h2>FILTER BY</h2>
         <div id="filter_by_mapper" className="filterBySection">
@@ -96,10 +105,10 @@ function Metacode({ visible, name, id, icon, toggle }) {
 }
 
 function Synapse({ visible, desc, icon, toggle }) {
-  return <li onClick={() => toggle(desc)} key={desc} className={visible ? '' : 'toggledOff'}>
+  return <li onClick={() => toggle(desc)} key={desc.replace(/ /g, '')} className={visible ? '' : 'toggledOff'}>
     <img src={icon} alt="synapse icon" />
     <p>{desc}</p>
   </li>
 }
 
-export default FilterBox
+export default onClickOutsideAddon(FilterBox)