How to use the @material/ripple/util.getMatchesProperty function in @material/ripple

To help you get started, we’ve selected a few @material/ripple 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 posva / vue-mdc / src / ripple.js View on Github external
function createAdapter (el) {
  MATCHES = MATCHES || getMatchesProperty(HTMLElement.prototype)
  return {
    browserSupportsCssVars: () => supportsCssVariables(window),
    isSurfaceActive: /* istanbul ignore next */ () => el[MATCHES](':active'),
    addClass: (className) => el.classList.add(className),
    removeClass: (className) => el.classList.remove(className),
    registerInteractionHandler: (evtType, handler) => el.addEventListener(evtType, handler),
    deregisterInteractionHandler: (evtType, handler) => el.removeEventListener(evtType, handler),
    registerResizeHandler: (handler) => window.addEventListener('resize', handler),
    deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
    updateCssVariable: (varName, value) => el.style.setProperty(varName, value),
    computeBoundingRect: () => el.getBoundingClientRect(),
    getWindowPageOffset: /* istanbul ignore next */ () => ({ x: window.pageXOffset, y: window.pageYOffset }),
  }
}
github material-components / material-components-web-components / node_modules / @material / checkbox / index.js View on Github external
initRipple_() {
    const MATCHES = getMatchesProperty(HTMLElement.prototype);
    const adapter = Object.assign(MDCRipple.createAdapter(this), {
      isUnbounded: () => true,
      isSurfaceActive: () => this.nativeCb_[MATCHES](':active'),
      registerInteractionHandler: (type, handler) => this.nativeCb_.addEventListener(type, handler),
      deregisterInteractionHandler: (type, handler) => this.nativeCb_.removeEventListener(type, handler),
    });
    const foundation = new MDCRippleFoundation(adapter);
    return new MDCRipple(this.root_, foundation);
  }
github material-components / material-components-web / packages / mdc-checkbox / index.js View on Github external
initRipple_() {
    const MATCHES = getMatchesProperty(HTMLElement.prototype);
    const adapter = Object.assign(MDCRipple.createAdapter(this), {
      isUnbounded: () => true,
      isSurfaceActive: () => this.nativeCb_[MATCHES](':active'),
      registerInteractionHandler: (type, handler) => this.nativeCb_.addEventListener(type, handler),
      deregisterInteractionHandler: (type, handler) => this.nativeCb_.removeEventListener(type, handler),
    });
    const foundation = new MDCRippleFoundation(adapter);
    return new MDCRipple(this.root_, foundation);
  }