tui-calendar/src/js/view/view.js

TOAST UI Calendar

/**
 * @fileoverview The base class of views.
 * @author NHN FE Development Lab <dl_javascript@nhn.com>
 */
'use strict';

var util = require('tui-code-snippet');
var domutil = require('../common/domutil');
var Collection = require('../common/collection');

/**
 * Base class of views.
 *
 * All views create own container element inside supplied container element.
 * @constructor
 * @param {HTMLElement} container Default container element for view.
 *  you can use this element for this.container syntax.
 */
function View(container) {
    var id = util.stamp(this);

    if (util.isUndefined(container)) {
        container = domutil.appendHTMLElement('div');
    }

    domutil.addClass(container, this.cssprefix(id));

    /**
     * unique id
     * @type {number}
     */
    this.id = id;

    /**
     * base element of view.
     * @type {HTMLDIVElement}
     */
    this.container = container;

    /*eslint-disable*/
    /**
     * child views.
     * @type {Collection}
     */
    this.children = new Collection(function(view) {
        return util.stamp(view);
    });
    /* eslint-enable*/

    /**
     * parent view instance.
     * @type {View}
     */
    this.parent = null;

    /**
     * state of view
     */
    this.state = {};
}

/**
 * CSS classname prefix
 * @type {string}
 */
View.prototype.cssPrefix = 'tui-view-';

/**
 * Add child views.
 * @param {View} view The view instance to add.
 * @param {function} [fn] Function for invoke before add. parent view class is supplied first arguments.
 */
View.prototype.addChild = function(view, fn) {
    if (fn) {
        fn.call(view, this);
    }
    // add parent view
    view.parent = this;

    this.children.add(view);
};

/**
 * Remove added child view.
 * @param {(number|View)} id View id or instance itself to remove.
 * @param {function} [fn] Function for invoke before remove. parent view class is supplied first arguments.
 */
View.prototype.removeChild = function(id, fn) {
    var view = util.isNumber(id) ? this.children.items[id] : id;

    id = util.stamp(view);

    if (fn) {
        fn.call(view, this);
    }

    this.children.remove(id);
};

/**
 * Render view recursively.
 */
View.prototype.render = function() {
    this.children.each(function(childView) {
        childView.render();
    });
};

/**
 * Invoke function recursively.
 * @param {function} fn - function to invoke child view recursively
 * @param {boolean} [skipThis=false] - set true then skip invoke with this(root) view.
 */
View.prototype.recursive = function(fn, skipThis) {
    if (!util.isFunction(fn)) {
        return;
    }

    if (!skipThis) {
        fn(this);
    }

    this.children.each(function(childView) {
        childView.recursive(fn);
    });
};

/**
 * Resize view recursively to parent.
 */
View.prototype.resize = function() {
    var args = Array.prototype.slice.call(arguments),
        parent = this.parent;

    while (parent) {
        if (util.isFunction(parent._onResize)) {
            parent._onResize.apply(parent, args);
        }

        parent = parent.parent;
    }
};

/**
 * Invoking method before destroying.
 */
View.prototype._beforeDestroy = function() {};

/**
 * Clear properties
 */
View.prototype._destroy = function() {
    this._beforeDestroy();
    this.children.clear();
    this.container.innerHTML = '';

    this.id = this.parent = this.children = this.container = null;
};

/*eslint-disable*/
/**
 * Destroy child view recursively.
 */
View.prototype.destroy = function(isChildView) {
    this.children.each(function(childView) {
        childView.destroy(true);
        childView._destroy();
    });

    if (isChildView) {
        return;
    }

    this._destroy();
};
/* eslint-enable*/

/**
 * Calculate view's container element bound.
 * @returns {object} The bound of container element.
 */
View.prototype.getViewBound = function() {
    var container = this.container,
        position = domutil.getPosition(container),
        size = domutil.getSize(container);

    return {
        x: position[0],
        y: position[1],
        width: size[0],
        height: size[1]
    };
};

/**
 * Return view default CSS prefix
 * @param {string} [className] - if supplied then return prefix added class name
 * @returns {string} CSS prefix value
 */
View.prototype.cssprefix = function(className) {
    return this.cssPrefix + (className || '');
};

/**
 * set state
 * @param {object} state - state
 */
View.prototype.setState = function(state) {
    util.extend(this.state, state);
};

util.CustomEvents.mixin(View);

module.exports = View;