| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97 | 1×
1×
1×
1×
115×
1×
3×
3×
3×
1×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
1×
4×
1×
1×
3×
3×
3×
3×
3×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
64×
1×
24×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "@syncfusion/ej2-popups", "./constant", "./css-constant"], function (require, exports, ej2_base_1, ej2_navigations_1, ej2_popups_1, events, cls) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MobileLayout = (function () {
function MobileLayout(parent) {
this.parent = parent;
}
MobileLayout.prototype.renderSwimlaneHeader = function () {
var toolbarWrapper = ej2_base_1.createElement('div', {
className: cls.SWIMLANE_HEADER_CLASS,
innerHTML: '<div class="' + cls.SWIMLANE_HEADER_TOOLBAR_CLASS + '"><div class="' + cls.TOOLBAR_MENU_CLASS +
'"><div class="e-icons ' + cls.TOOLBAR_MENU_ICON_CLASS + '"></div></div><div class="' + cls.TOOLBAR_LEVEL_TITLE_CLASS +
'"><div class="' + cls.TOOLBAR_SWIMLANE_NAME_CLASS + '"></div></div></div>'
});
this.parent.element.appendChild(toolbarWrapper);
ej2_base_1.EventHandler.add(toolbarWrapper.querySelector('.' + cls.TOOLBAR_MENU_ICON_CLASS), 'click', this.menuClick, this);
};
MobileLayout.prototype.renderSwimlaneTree = function () {
var height = this.parent.element.querySelector('.' + cls.SWIMLANE_HEADER_CLASS).offsetHeight;
var treeHeight = window.innerHeight - height;
this.popupOverlay = ej2_base_1.createElement('div', { className: cls.SWIMLANE_OVERLAY_CLASS, styles: 'height: ' + treeHeight + 'px;' });
var wrapper = ej2_base_1.createElement('div', { className: cls.SWIMLANE_CONTENT_CLASS, styles: 'top:' + height + 'px;' });
var treeWrapper = ej2_base_1.createElement('div', {
className: cls.SWIMLANE_RESOURCE_CLASS + ' e-popup-close', styles: 'height: ' + treeHeight + 'px;'
});
wrapper.appendChild(treeWrapper);
wrapper.appendChild(this.popupOverlay);
this.parent.element.appendChild(wrapper);
var swimlaneTree = ej2_base_1.createElement('div', { className: cls.SWIMLANE_TREE_CLASS });
treeWrapper.appendChild(swimlaneTree);
var dataSource = this.parent.enableVirtualization ?
this.parent.virtualLayoutModule.kanbanRows : this.parent.layoutModule.kanbanRows;
this.treeViewObj = new ej2_navigations_1.TreeView({
cssClass: this.parent.cssClass,
enableRtl: this.parent.enableRtl,
fields: {
dataSource: dataSource,
id: 'keyField',
text: 'textField'
},
nodeTemplate: this.parent.swimlaneSettings.template,
nodeClicked: this.treeSwimlaneClick.bind(this),
drawNode: this.drawNode.bind(this)
});
this.treeViewObj.appendTo(swimlaneTree);
var popupObj = {
targetType: 'relative',
actionOnScroll: 'none',
enableRtl: this.parent.enableRtl,
zIndex: 10,
hideAnimation: { name: 'SlideLeftOut', duration: 500 },
showAnimation: { name: 'SlideLeftIn', duration: 500 },
viewPortElement: this.parent.element.querySelector('.' + cls.CONTENT_CLASS)
};
popupObj.content = this.treeViewObj.element;
this.treePopup = new ej2_popups_1.Popup(treeWrapper, popupObj);
};
MobileLayout.prototype.menuClick = function () {
if (this.parent.element.querySelector('.' + cls.SWIMLANE_RESOURCE_CLASS).classList.contains('e-popup-open')) {
this.treePopup.hide();
ej2_base_1.removeClass([this.popupOverlay], 'e-enable');
}
else {
var treeNodes = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item'));
ej2_base_1.removeClass(treeNodes, 'e-active');
ej2_base_1.addClass([treeNodes[this.parent.layoutModule.swimlaneIndex]], 'e-active');
this.treePopup.show();
ej2_base_1.addClass([this.popupOverlay], 'e-enable');
}
};
MobileLayout.prototype.treeSwimlaneClick = function (args) {
this.treePopup.hide();
var treeNodes = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item'));
this.parent.layoutModule.swimlaneIndex = treeNodes.indexOf(args.node);
this.parent.layoutModule.scrollLeft = 0;
this.parent.notify(events.dataReady, { processedData: this.parent.kanbanData });
args.event.preventDefault();
};
MobileLayout.prototype.hidePopup = function () {
this.treePopup.hide();
ej2_base_1.removeClass([this.popupOverlay], 'e-enable');
};
MobileLayout.prototype.getWidth = function () {
return (window.innerWidth * 80) / 100;
};
MobileLayout.prototype.drawNode = function (args) {
Iif (this.parent.swimlaneSettings.template && this.parent.isReact) {
var templateId = this.parent.element.id + '_treeviewTemplate';
var treeViewTemplate = this.parent.templateParser(this.parent.swimlaneSettings.template)(args.nodeData, this.parent, 'nodeTemplate', templateId, false);
ej2_base_1.append(treeViewTemplate, args.node.querySelector('.e-list-text'));
}
};
return MobileLayout;
}());
exports.MobileLayout = MobileLayout;
});
|