How to use fastdom - 10 common examples

calculate() {
    fastdom.measure(() => {
      this.refs.content.style.width = '';
      // Content
      const content = this.refs.content;
      const contentRect = content.getBoundingClientRect();
      const contentPadding = this.getPaddingTop(content);
      // Calculate the extra offset added by any other fixed elements above this one
      const fixedElements = this.fixedElements ? $(this.fixedElements) : [];
      const fixedOffset = fixedElements.reduce((offset, el) => {
        return offset + el.getBoundingClientRect().height;
      }, 0);
      this.setState({
        contentRect,
        contentTop: contentPadding + fixedOffset,
        scrollOffset: contentRect.top + window.pageYOffset - fixedOffset - contentPadding
      });
    });

listenToUnreadMessages() {
    const {
      handleReadMessage,
      time,
      lastReadMessageTime,
    } = this.props;

    if (lastReadMessageTime > time) {
      return;
    }

    const node = this.text;

    fastdom.measure(() => {
      const {
        lastReadMessageTime: updatedLastReadMessageTime,
      } = this.props;
      // this function is called after so we need to get the updated lastReadMessageTime

      if (updatedLastReadMessageTime > time) {
        return;
      }

      if (isElementInViewport(node)) { // no need to listen, the message is already in viewport
        handleReadMessage(time);
      } else {
        this.addScrollListeners();
      }
    });
  }

export function eventbriteTicketButton(el) {
  fastdom.measure(() => {
    const eventbriteId = el.getAttribute('data-eventbrite-ticket-id');

    fetch(`/eventbrite/button/events/${eventbriteId}/ticket_classes`)
      .then(resp => resp.json())
      .then(ticketButton => {
        fastdom.mutate(() => {
          // This is a nasty hack to update the event info bar
          if (ticketButton.onSaleStatus === 'sold_out') {
            const el = document.getElementById('js-event-booking-info');
            if (el) {
              el.parentNode.removeChild(el);
            }
          }
          el.innerHTML = ticketButton.html;
        });
      });

calculate(first) {
    fastdom.measure(() => {
      // Calculate the extra offset added by any other fixed elements above this one
      const fixedElementsAbove = this.props.fixedElementsAbove
        ? $(this.props.fixedElementsAbove) : [];
      const fixedOffsetAbove = fixedElementsAbove.reduce((offset, el) =>
        offset + el.getBoundingClientRect().height
      , 0);
      // Calculate the extra offset added by any other fixed elements below this one
      const fixedElementsBelow = this.props.fixedElementsBelow
        ? $(this.props.fixedElementsBelow) : [];
      const fixedOffsetBelow = fixedElementsBelow.reduce((offset, el) =>
        offset + el.getBoundingClientRect().height
      , 0);
      // Content
      const content = this.refs.content;
      const contentRect = content.getBoundingClientRect();
      const contentPadding = this.getPadding(content, PADDING_IDENTITY());

/* using a reversed loop for efficiency */
                    for (let i = checkEnd; i >= checkStart; i--) {
                        fastdom.measure(() => {
                            if (skip) {
                                Vue.set(visibility, i, false);
                            } else if (els[i]) {
                                checkElem(i);
                                if (i < checkEnd && !visibility[i] && visibility[i + 1]) skip = true;
                            }
                        });
                    }
                } else {
                    /* If scrolling down, we only need to check visible items plus those after them */
                    if (direction == DIRECTION_DOWN) checkStart = visibility.indexOf(true);
                    for (let i = checkStart; i <= checkEnd; i++) {
                        fastdom.measure(() => {
                            if (skip) {
                                Vue.set(visibility, i, false);
                            } else if (els[i]) {
                                checkElem(i);
                                if (i > checkStart && !visibility[i] && visibility[i - 1]) skip = true;
                            }
                        });
                    }
                }

                function checkElem(i) {
                    var top = els[i].offsetTop - scrollTop;
                    var bottom = top + placeholders[i];
                    visibility[i] = bottom > -preloadHeight && top < preloadHeight;
                }
            }

fastdom.read(() => {
        // Our grid is a square, set the height of the grid wrapper
        // to the width of the grid wrapper
        fastdom.write(() => {
          this.$gridWrapper.css(
            'height',
            `${this.$gridWrapper.offset().width}px`,
          );
        });
        this.gridHeightIsSet = true;
      });
    } else if (this.gridHeightIsSet) {

setGridHeight() {
    if (!this.$gridWrapper) {
      this.$gridWrapper = $(findDOMNode(this.gridWrapper));
    }

    if (
      isBreakpoint({
        max: 'tablet',
      })
    ) {
      fastdom.read(() => {
        // Our grid is a square, set the height of the grid wrapper
        // to the width of the grid wrapper
        fastdom.write(() => {
          this.$gridWrapper.css(
            'height',
            `${this.$gridWrapper.offset().width}px`,
          );
        });
        this.gridHeightIsSet = true;
      });
    } else if (this.gridHeightIsSet) {
      // Remove inline style if tablet and wider
      this.$gridWrapper.attr('style', '');
    }
  }

beforeEach(function() {
    this.origFastdom = new fastdom.constructor;
    this.fastdom = new Fastdom(this.origFastdom);
  });

const runTabClick = (tab, otherTabs) => {
  fastdom.mutate(() => {
    forEach(otherTabs, removeActive);
    addActive(tab);
    emitter.emit('tab:select', { tab, panel: getPanel(tab) });
  });
};

Cast.prototype.renderNew = function(block){
  this.emit('render', block)
  fastdom.write(function(){
    this.el.appendChild(block.el);
  }.bind(this));
  fastdom.defer(block.show.bind(block));
};