How to use the @material/drawer.MDCTemporaryDrawerFoundation function in @material/drawer

To help you get started, we’ve selected a few @material/drawer 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 src-zone / material / bundle / src / components / drawer / mdc.drawer.directive.ts View on Github external
private initDrawer() {
        if (this.initialized) {
            this.destroyDrawer();
            if (this.hasNecessaryDom()) {
                this.createAdapter();
                let newFoundation = this.type === 'temporary' ?
                    new MDCTemporaryDrawerFoundation(this.mdcAdapter) :
                    new MDCPersistentDrawerFoundation(this.mdcAdapter);
                // first init, then assign to this.foundation, so that
                // this.openMem is used to detect the open state, instead
                // of the new foundation (which would never be opened otherwise):
                newFoundation.init();
                this.open = this.openMem;
                this.foundation = newFoundation;
            } else
                console.error('mdcDrawerContainer can\'t be constructed because of missing DOM elements');
        }
    }
github trimox / angular-mdc-web / src / lib / drawer / temporary / drawer-temporary.ts View on Github external
notifyClose: () => this.closed.emit(),
    isRtl: () => {
      return getComputedStyle(this.elementRef.nativeElement).getPropertyValue('direction') === 'rtl';
    },
    isDrawer: (el) => {
      return this.drawerNav ? el === this.drawerNav.elementRef.nativeElement : false;
    }
  };

  private _foundation: {
    init: Function,
    destroy: Function,
    open: Function,
    close: Function,
    isOpen: Function,
  } = new MDCTemporaryDrawerFoundation(this._mdcAdapter);

  constructor(
    public renderer: Renderer2,
    public elementRef: ElementRef,
    private _registry: EventRegistry) {
    super(renderer, elementRef);
  }

  ngOnChanges(changes: { [key: string]: SimpleChange }): void {
    if (changes['absolute']) {
      const absolute = 'ng-mdc-drawer--absolute';
      changes['absolute'].currentValue ? this._mdcAdapter.addClass(absolute) : this._mdcAdapter.removeClass(absolute);
    }
  }

  ngAfterViewInit(): void {
github material-components / material-components-web / framework-examples / vue / src / v-mdc-drawer / TemporaryDrawer.vue View on Github external
mounted () {
    const {FOCUSABLE_ELEMENTS, OPACITY_VAR_NAME} = MDCTemporaryDrawerFoundation.strings;

    let vm = this;
    this.foundation = new MDCTemporaryDrawerFoundation({
      addClass (className) {
        vm.$set(vm.classes, className, true);
      },
      removeClass (className) {
        vm.$delete(vm.classes, className);
      },
      hasClass (className) {
        return Boolean(vm.classes[className]) || (vm.$el && vm.$el.classList.contains(className));
      },
      hasNecessaryDom () {
        return Boolean(vm.$refs.drawer);
      },
      registerInteractionHandler (evt, handler) {
        vm.$el.addEventListener(evt, handler);
      },
      deregisterInteractionHandler (evt, handler) {