devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
255 lines (250 loc) • 10.6 kB
JavaScript
/**
* DevExtreme (cjs/ui/scheduler/header/header.js)
* Version: 21.1.4
* Build date: Mon Jun 21 2021
*
* Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.Header = void 0;
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _type = require("../../../core/utils/type");
var _extend = require("../../../core/utils/extend");
var _iterator = require("../../../core/utils/iterator");
var _array = require("../../../core/utils/array");
var _inflector = require("../../../core/utils/inflector");
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _ui = _interopRequireDefault(require("../../widget/ui.widget"));
var _navigator = require("./navigator");
var _drop_down_menu = _interopRequireDefault(require("../../drop_down_menu"));
var _tabs = _interopRequireDefault(require("../../tabs"));
var _constants = require("../../tabs/constants");
var _errors = _interopRequireDefault(require("../../../core/errors"));
var _message = _interopRequireDefault(require("../../../localization/message"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass)
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function(o, p) {
o.__proto__ = p;
return o
};
return _setPrototypeOf(o, p)
}
var COMPONENT_CLASS = "dx-scheduler-header";
var VIEW_SWITCHER_CLASS = "dx-scheduler-view-switcher";
var VIEW_SWITCHER_LABEL_CLASS = "dx-scheduler-view-switcher-label";
var STEP_MAP = {
day: "day",
week: "week",
workWeek: "workWeek",
month: "month",
timelineDay: "day",
timelineWeek: "week",
timelineWorkWeek: "workWeek",
timelineMonth: "month",
agenda: "agenda"
};
var VIEWS = ["day", "week", "workWeek", "month", "timelineDay", "timelineWeek", "timelineWorkWeek", "timelineMonth", "agenda"];
var Header = function(_Widget) {
_inheritsLoose(Header, _Widget);
function Header() {
return _Widget.apply(this, arguments) || this
}
var _proto = Header.prototype;
_proto._getDefaultOptions = function() {
return (0, _extend.extend)(_Widget.prototype._getDefaultOptions.call(this), {
views: [],
isAdaptive: false,
intervalCount: 1,
currentView: "day",
firstDayOfWeek: void 0,
currentDate: new Date,
min: void 0,
max: void 0,
useDropDownViewSwitcher: false,
_dropDownButtonIcon: "overlay"
})
};
_proto._setOptionsByReference = function() {
_Widget.prototype._setOptionsByReference.call(this);
(0, _extend.extend)(this._optionsByReference, {
currentView: true
})
};
_proto._optionChanged = function(args) {
var value = args.value;
switch (args.name) {
case "views":
this._validateViews();
this._viewSwitcher.option({
items: value,
selectedItem: this.option("currentView")
});
break;
case "customizeDateNavigatorText":
this._navigator.option(args.name, value);
break;
case "currentView":
this._viewSwitcher.option("selectedItem", value);
this._navigator.option("step", STEP_MAP[this._getCurrentViewType()]);
this._changeViewSwitcherLabelText();
break;
case "currentDate":
this._navigator.option("date", value);
break;
case "displayedDate":
this._navigator.option("displayedDate", value);
break;
case "min":
case "max":
case "firstDayOfWeek":
case "intervalCount":
this._navigator.option(args.name, value);
break;
case "tabIndex":
case "focusStateEnabled":
this._viewSwitcher.option(args.name, value);
this._navigator.option(args.name, value);
_Widget.prototype._optionChanged.call(this, args);
break;
case "useDropDownViewSwitcher":
this._refreshViewSwitcher();
break;
default:
_Widget.prototype._optionChanged.call(this, args)
}
};
_proto._init = function() {
_Widget.prototype._init.call(this);
this.$element().addClass(COMPONENT_CLASS)
};
_proto._initMarkup = function() {
_Widget.prototype._initMarkup.call(this);
this._renderNavigator();
this._renderViewSwitcher()
};
_proto._renderNavigator = function() {
this._navigator = this._createComponent("<div>", _navigator.Navigator, {
min: this.option("min"),
max: this.option("max"),
intervalCount: this.option("intervalCount"),
date: this.option("currentDate"),
step: STEP_MAP[this._getCurrentViewType()],
firstDayOfWeek: this.option("firstDayOfWeek"),
tabIndex: this.option("tabIndex"),
focusStateEnabled: this.option("focusStateEnabled"),
observer: this.option("observer"),
customizeDateNavigatorText: this.option("customizeDateNavigatorText"),
todayDate: this.option("todayDate")
});
this._navigator.$element().appendTo(this.$element())
};
_proto._renderViewSwitcher = function() {
this._validateViews();
var $viewSwitcher = (0, _renderer.default)("<div>").addClass(VIEW_SWITCHER_CLASS).appendTo(this.$element());
this.option("useDropDownViewSwitcher") ? this._renderViewSwitcherDropDownMenu($viewSwitcher) : this._renderViewSwitcherTabs($viewSwitcher)
};
_proto._validateViews = function() {
var views = this.option("views");
(0, _iterator.each)(views, (function(_, view) {
var isViewIsObject = (0, _type.isObject)(view);
var viewType = isViewIsObject && view.type ? view.type : view;
if (-1 === (0, _array.inArray)(viewType, VIEWS)) {
_errors.default.log("W0008", viewType)
}
}))
};
_proto._getCurrentViewType = function() {
var currentView = this.option("currentView");
return currentView.type || currentView
};
_proto._renderViewSwitcherTabs = function($element) {
var that = this;
$element.addClass(_constants.TABS_EXPANDED_CLASS);
this._viewSwitcher = this._createComponent($element, _tabs.default, {
selectionRequired: true,
scrollingEnabled: true,
onSelectionChanged: this._updateCurrentView.bind(this),
items: this.option("views"),
itemTemplate: function(item) {
return (0, _renderer.default)("<span>").addClass("dx-tab-text").text(that._getItemText(item))
},
selectedItem: this.option("currentView"),
tabIndex: this.option("tabIndex"),
focusStateEnabled: this.option("focusStateEnabled")
})
};
_proto._getItemText = function(item) {
return item.name || _message.default.format("dxScheduler-switcher" + (0, _inflector.camelize)(item.type || item, true))
};
_proto._refreshViewSwitcher = function() {
this._viewSwitcher._dispose();
this._viewSwitcher.$element().remove();
delete this._viewSwitcher;
this._removeViewSwitcherLabel();
this._renderViewSwitcher()
};
_proto._removeViewSwitcherLabel = function() {
if ((0, _type.isDefined)(this._$viewSwitcherLabel)) {
this._$viewSwitcherLabel.detach();
this._$viewSwitcherLabel.remove();
delete this._$viewSwitcherLabel
}
};
_proto._renderViewSwitcherDropDownMenu = function($element) {
var that = this;
this._$viewSwitcherLabel = (0, _renderer.default)("<div>").addClass(VIEW_SWITCHER_LABEL_CLASS).appendTo(this.$element());
this._changeViewSwitcherLabelText();
this._viewSwitcher = this._createComponent($element, _drop_down_menu.default, {
onItemClick: this._updateCurrentView.bind(this),
buttonIcon: this.option("_dropDownButtonIcon"),
items: this.option("views"),
selectionMode: this.option("isAdaptive") ? "single" : "none",
selectedItemKeys: [this.option("currentView")],
itemTemplate: function(item) {
return (0, _renderer.default)("<span>").addClass("dx-dropdownmenu-item-text").text(that._getItemText(item))
}
})
};
_proto._changeViewSwitcherLabelText = function() {
if (!(0, _type.isDefined)(this._$viewSwitcherLabel)) {
return
}
var currentView = this.option("currentView");
var currentViewText = this._getItemText(currentView);
this._$viewSwitcherLabel.text(currentViewText)
};
_proto._getCurrentViewName = function(currentView) {
return (0, _type.isObject)(currentView) ? currentView.name || currentView.type : currentView
};
_proto._updateCurrentView = function(e) {
var selectedItem = e.itemData || e.component.option("selectedItem");
var viewName = this._getCurrentViewName(selectedItem);
this.notifyObserver("currentViewUpdated", viewName)
};
_proto._renderFocusTarget = function() {};
_proto.notifyObserver = function(subject, args) {
var observer = this.option("observer");
if (observer) {
observer.fire(subject, args)
}
};
_proto.invoke = function() {
var observer = this.option("observer");
if (observer) {
return observer.fire.apply(observer, arguments)
}
};
return Header
}(_ui.default);
exports.Header = Header;
(0, _component_registrator.default)("dxSchedulerHeader", Header);