How to use the @instructure/ui-dom-utils.getComputedStyle function in @instructure/ui-dom-utils

To help you get started, we’ve selected a few @instructure/ui-dom-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github instructure / instructure-ui / packages / ui-view / src / View / index.js View on Github external
!((function verifySpanMargin (element, margin) {
        if (!element) {
          return
        }
        const marginValues = margin ? margin.split(' ') : null
        const display = getComputedStyle(element).display

        let verticalMargin = false

        // either top or bottom margin are set
        if (margin) {
          if (marginValues[0] && (marginValues[0] !== 'none' && marginValues[0] !== '0')) {
            verticalMargin = true
          }
          if (marginValues[2] && (marginValues[2] !== 'none' && marginValues[2] !== '0')) {
            verticalMargin = true
          }
        }

        return verticalMargin && display === 'inline'
      })(this._element, this.props.margin)),
      `[View] display style is set to 'inline' and will allow for horizontal margins only.`
github instructure / instructure-ui / packages / ui-elements / src / TruncateText / utils / truncate.js View on Github external
setup () {
    if (!this._stage) {
      return
    }

    const { maxLines, truncate, lineHeight } = this._options
    const style = getComputedStyle(this._parent)
    // if no explicit lineHeight is inherited, use lineHeight multiplier for calculations
    const actualLineHeight = style.lineHeight === 'normal'
      ? lineHeight * parseFloat(style.fontSize)
      : parseFloat(style.lineHeight)
    const node = this._stage.firstChild.children
      ? this._stage.firstChild
      : this._stage

    let nodeDataIndexes = []
    let stringData = []

    this._nodeMap = this.getNodeMap(node)

    for (let i = 0; i < this._nodeMap.length; i++) {
      const item = this._nodeMap[i]
      if (truncate === 'word' && item.data[item.data.length - 1] === ' ') {
github instructure / instructure-ui / packages / ui-elements / src / TruncateText / utils / measureText.js View on Github external
function measure (string, domNode) {
  const style = getComputedStyle(domNode)
  // we use a canvas in a doc fragment to prevent having to render the string full width in the DOM
  const canvas = document.createElement('canvas')
  document.createDocumentFragment().appendChild(canvas)

  const context = canvas.getContext('2d')
  if (!context || !string) {
    return 0
  }

  let text = string
  let letterOffset = 0
  let width = 0
  // grab individual font styles
  // some browsers don't report a value for style['font']
  const font = [
    style['font-weight'],
github instructure / instructure-ui / packages / ui-a11y / src / findFocusable.js View on Github external
function hidden (element) {
  const cs = getComputedStyle(element)
  return (cs.display !== 'inline' && element.offsetWidth <= 0 && element.offsetHeight <= 0) || cs.display === 'none'
}
github instructure / instructure-ui / packages / ui-a11y / src / findFocusable.js View on Github external
function positioned (element) {
  const POS = ['fixed', 'absolute']
  if (POS.includes(element.style.position.toLowerCase())) return true
  if (POS.includes(getComputedStyle(element).getPropertyValue('position').toLowerCase())) return true
  return false
}
github instructure / instructure-ui / packages / ui-i18n / src / getTextDirection.js View on Github external
function getTextDirection (element) {
  if (canUseDOM) {
    if (typeof element === 'undefined' || (element === document.documentElement)) return getDefaultDir()
    return element.getAttribute('dir') || getComputedStyle(element).direction
  }
}