focus-outside

what is this

A good clickOutside library, which solves the problem that iframe cannot trigger clickOutside, and it supports grouping binding processing.

API

Bind Params

Notice

When the element is bound, focus-outside sets the element as a focusable element, which will give it a highlight style when it gets the focus browser. If you don't want to see this style, you only need to put this element The CSS property outline is set to none. The bind function of the focsout-outside version 0.5.0 adds a className parameter, adding a class name for each bound element. The default class name is focus-outside, and the class name is removed from the element when the unbind function is executed.

<div id="focus-ele"></div>

// js
const elm = document.querySelector('#focus-ele')
// default classname is focus-outside
focusBind(elm, callback, 'key', 'my-focus-name')

// css
// If you need to override all the default styles, you can put this code in the global CSS.
.my-focus-name {
  outline: none;
}

Use FocusOutside

Simple Example

// import { bind, unbidn } from 'focus-outside'
// It is recommended to use the following alias to prevent conflicts with your function naming.
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

// If you are using a CDN, you should use it like this.
// <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
// const { bind: focusBind, unbind: focusUnbind } = FocusOutside

const elm = document.querySelector('#dorpdown-button')
// bind function
focusBind(elm, callback)

function callback () {
  console.log('You clicked on the area outside the dropdown button.')
  // clear bind
  focusUnbind(elm)
}

View Online Example

Use of key

import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

const btnOne = document.querySelector('#button-one')
const btnTwo = document.querySelector('#button-two')
const btnThree = document.querySelector('#button-three')
const clearBtn = document.querySelector('#button-clear')

// Binding function and key
focusBind(btnOne, callbackOne, 'button-group')
focusBind(btnTwo, callbackTwo, 'button-group')
focusBind(btnThree, callbackThree, 'custom-button')
focusBind(clearBtn, clearCallback)

function callbackOne () {
  console.log('if you click on btnOne and btnTwo will not trigger this function')
}

function callbackTwo () {
  console.log('if I was triggered, it means you clicked on elements other than btnOne and btnTwo')
}

function callbackThree () {
  console.log('you clicked outside the btn-three')
}

function clearCallback() {
  console.log('Clear all button binding functions')
  focusUnbind(btnOne)
  focusUnbind(btnTwo)
  focusUnbind(btnThree)
  focusUnbind(clearBtn)
}

Used in Vue

// outside.js
export default {
  bind (el, binding) {
    focusBind(el, binding.value)
  },

  unbind (el, binding) {
    focusUnbind(el)
  }
}

// xx.vue
<template>
  <div v-outside="handleOutside"></div>
</template>

import outside from './outside.js'

export default {
  directives: { outside },

  methods: {
    handleOutside () {
      // Do something...
    }
  }
}

View Online Example

Used in Element

<el-dropdown
  ref="dropdown"
  trigger="click">
  <span class="el-dropdown-link">
    dropdown menu<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu
    ref="dropdownContent"
    slot="dropdown">
    <el-dropdown-item>Oyster</el-dropdown-item>
    <el-dropdown-item>Gold cake</el-dropdown-item>
    <el-dropdown-item>Lion head</el-dropdown-item>
    <el-dropdown-item>Snail powder</el-dropdown-item>
    <el-dropdown-item>Double skin milk</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

export default {
  mounted () {
    focusBind(this.$refs.dropdown.$el, this.$refs.dropdown.hide)
    focusBind(this.$refs.dropdownContent.$el, this.$refs.dropdown.hide)
  },

  destoryed () {
    focusUnbind(this.$refs.dropdown.$el)
    focusUnbind(this.$refs.dropdownContent.$el)
  }
}

View Online Example

Used in Ant Design

import { Menu, Dropdown, Icon, Button } from 'antd'
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

function getItems () {
  return [1,2,3,4].map(item => {
    return <Menu.Item key={item}>{item} st menu item </Menu.Item>
  })
}

class MyMenu extends React.Component {
  constructor (props) {
    super(props)
    this.menuElm = null
  }

  render () {
    return (<Menu ref="menu" onClick={this.props.onClick}>{getItems()}</Menu>)
  }

  componentDidMount () {
    this.menuElm = ReactDOM.findDOMNode(this.refs.menu)
    if (this.menuElm && this.props.outside) focusBind(this.menuElm, this.props.outside)
  }

  componentWillUnmount () {
    if (this.menuElm && this.props.outside) focusUnbind(this.menuElm)
  }
}

class MyDropdown extends React.Component {

  constructor (props) {
    super(props)
    this.dropdownElm = null
  }

  state = {
    visible: false
  }

  render () {
    const menu = (<MyMenu outside={ this.handleOutside } onClick={ this.handleClick } />)
    return (
      <Dropdown
        ref="divRef"
        visible={this.state.visible}
        trigger={['click']}
        overlay={ menu }>
        <Button style={{ marginLeft: 8 }} onClick={ this.handleClick }>
          Button <Icon type="down" />
        </Button>
      </Dropdown>
    )
  }

  componentDidMount () {
    this.dropdownElm = ReactDOM.findDOMNode(this.refs.divRef)
    if (this.dropdownElm) focusBind(this.dropdownElm, this.handleOutside)
  }

  componentWillUnmount () {
    if (this.dropdownElm) focusUnbind(this.dropdownElm)
  }

  handleOutside = () => {
    this.setState({ visible: false })
  }

  handleClick = () => {
    this.setState({ visible: !this.state.visible })
  }
}

ReactDOM.render(
  <MyDropdown/>,
  document.getElementById('container')
)

View Online Example

Build a development environment

1. Fork project, then clone to local.
git clone [email protected]:txs1992/focus-outside.git

2. Installation dependencies (make sure your computer has Node.js installed)
yarn install

3. run the project
yarn dev

License

MIT