hackityhack.ts

hackityhack.ts

private layoutAsync() {
    // CommandBar will also request an animation frame to do its measure pass;
    // set a timeout to defer another loop pass to make sure we run after, and
    // then request our own animation frame.
    setTimeout(() => window.requestAnimationFrame(this.layout), 0)
}

private layout() {
    const commandBar = document.getElementsByClassName('ms-CommandBar')[0]
    if (!commandBar)
        return

    const primaryCommands = commandBar.getElementsByClassName('ms-CommandBar-primaryCommands')[0]
    const sideCommands = commandBar.getElementsByClassName('ms-CommandBar-sideCommands')[0]

    const leftCommands = primaryCommands.getElementsByClassName('ms-CommandBarItem')
    const leftCommand = leftCommands[leftCommands.length - 1]
    const leftBounds = leftCommands[leftCommands.length - 1].getBoundingClientRect()

    const rightCommands = sideCommands.getElementsByClassName('ms-CommandBarItem')
    const rightBounds = rightCommands[rightCommands.length - 1].getBoundingClientRect()

    this.setState({
        bounds: {
            top: leftBounds.top + 'px',
            left: leftBounds.right + 'px',
            width: (rightBounds.left - leftBounds.right) + 'px',
            height: leftBounds.height + 'px'
        }
    })
}