all files / base/ mobile-layout.js

94.34% Statements 50/53
66.67% Branches 4/6
100% Functions 10/10
94.34% Lines 50/53
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   88×                                                                       64×   24×                
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);
            this.treeViewObj = new ej2_navigations_1.TreeView({
                cssClass: this.parent.cssClass,
                enableRtl: this.parent.enableRtl,
                fields: {
                    dataSource: this.parent.layoutModule.kanbanRows,
                    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;
});