@offensichtbar-codestock/es6-flex-masonry-grid/dist/js/card.js

ES6 flex masonry grid

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _observer = require("./observer");

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Card = /*#__PURE__*/function () {
  /**
   * Represents the grid element
   * @constructor
   * @param {Node} el - card
   * @param {number} index - index of card
   * @param {boolean} animate - card animation enabled / disabled
   */
  function Card(el, index, animate) {
    _classCallCheck(this, Card);

    this._domelement = el;
    this._offset = 0;
    this._cardindex = index;

    this._init(animate);

    this._observeCard();
  }

  _createClass(Card, [{
    key: "height",
    get: function get() {
      return this._domelement.offsetHeight;
    }
  }, {
    key: "width",
    get: function get() {
      return this._domelement.offsetWidth;
    }
  }, {
    key: "offset",
    get: function get() {
      return this._offset;
    }
  }, {
    key: "cardindex",
    get: function get() {
      return this._cardindex;
    },
    set: function set(index) {
      this._cardindex = index;
    }
    /**
     * Add class to card
     * If animation is set true, wrap card content in div.osb_griditem-inner
     * @param {boolean} animate - card animation enabled / disabled
     */

  }, {
    key: "_init",
    value: function _init(animate) {
      this._domelement.classList.add('osb_griditem');

      if (animate) {
        this._domelement.innerHTML = "<div class='osb_griditem-inner'>".concat(this._domelement.innerHTML, "</div>");
      }
    }
    /**
     * Set element translateY
     * @param {number} offset
     */

  }, {
    key: "translate",
    value: function translate(offset) {
      this._domelement.style.transform = "translateY(-".concat(offset, "px)");
      this._offset = offset;
    }
    /**
     * Initial card animation
     */

  }, {
    key: "animate",
    value: function animate() {
      this._domelement.classList.add('osb_animation-complete');
    }
    /**
     * Reset classList
     */

  }, {
    key: "reset",
    value: function reset() {
      this._domelement.classList.remove('osb_animation-complete');
    }
    /**
     * Observes height changes cards
     */

  }, {
    key: "_observeCard",
    value: function _observeCard() {
      new _observer.ObserveSizing(this._domelement, this);
    }
  }]);

  return Card;
}();

exports["default"] = Card;