glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make filterbox use onclickoutside

Browse source
This commit is contained in:
Connor Turland 2017-03-15 22:48:03 -04:00
parent d76433d550
commit 38baeee994
10 changed files with 36 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/application.scss.erb
View file

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

37
frontend/src/Metamaps/Filter.js
View file

@ -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 = []

1
frontend/src/Metamaps/GlobalUI/Account.js
View file

@ -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

1
frontend/src/Metamaps/GlobalUI/ReactApp.js
View file

@ -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,

1
frontend/src/Metamaps/JIT.js
View file

@ -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()

1
frontend/src/Metamaps/Map/index.js
View file

@ -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 = []

1
frontend/src/Metamaps/Topic.js
View file

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

22
frontend/src/components/MapView/MapButtons.js
View file

@ -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}>

8
frontend/src/components/MapView/index.js
View file

@ -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}

19
frontend/src/components/common/FilterBox.js
View file

@ -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)