src / mixin / index.js

Copyright (c) 2018 Florian Klampfer

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see


This component is written in RxJS and reading its code requires some basic understanding of how RxJS works. It may also serve as an example of how to use RxJS.

Other than RxJS, you should be familiar with ES6 Mixin, which is a clever way of using the ES6 class syntax to achieve inheritance-based mixins. The mixin in the main export of this file.


ES6+ functions that we use. import ‘core-js/fn/array/from’; import ‘core-js/fn/function/bind’; import ‘core-js/fn/object/assign’;

Importing the hy-compontent base libary, which helps with making multiple versions of the component (Vanilla JS, WebComponent, etc…).

import { componentMixin, COMPONENT_FEATURE_TESTS, Set } from "hy-component/src/component";
import { rxjsMixin } from "hy-component/src/rxjs";
import { arrayOf, bool, number, oneOf } from "hy-component/src/types";

import { Subject } from "rxjs/_esm5/Subject";


import { setupObservablesMixin } from "./setup";

A set of Modernizr tests that are required for this component to work.

export const MIXIN_FEATURE_TESTS = new Set([

export { Set };

Drawer Mixin

export const drawerMixin = C =>
  class extends setupObservablesMixin(rxjsMixin(componentMixin(C))) {

The name of the component (required by hy-component)

    static get componentName() {
      return "hy-drawer";


The default values (and types) of the configuration options (required by hy-component) See Options for usage information.

    static get types() {
      return {
        opened: bool,
        align: oneOf(["left", "right"]),
        persistent: bool,
        range: arrayOf(number),
        threshold: number,
        preventDefault: bool,
        mouseEvents: bool,

    static get defaults() {
      return {
        opened: false,
        align: "left",
        persistent: false,
        range: [0, 100],
        threshold: 10,
        preventDefault: false,
        mouseEvents: false,


Overriding the setup function.

    setupComponent(el, props) {
      super.setupComponent(el, props);

      this.animateTo$ = new Subject();

Cache DOM elements.

      this.scrimEl = this.sroot.querySelector(".hy-drawer-scrim");
      this.contentEl = this.sroot.querySelector(".hy-drawer-content");

Set the initial alignment class.


Calling the setup observables function function.

    connectComponent() {

TODO: meh..


Firing an event to let the outside world know the drawer is ready.

      this.fireEvent("init", { detail: this.opened });


Public methods of this component. See Methods for more.

    open(animated = true) {
      if (animated) this.animateTo$.next(true);
      else this.opened = true;

    close(animated = true) {
      if (animated) this.animateTo$.next(false);
      else this.opened = false;

    toggle(animated = true) {
      if (animated) this.animateTo$.next(!this.opened);
      else this.opened = !this.opened;

© 2018 Florian Klampfer

Powered by Hydejack v7.5.1