{"version":3,"sources":["Core/CustomerProfileCard.ts"],"names":["define","require","exports","ModalWindow_1","Object","defineProperty","value","CustomerProfileCard","ZONE_NE","ZONE_NW","ZONE_SE","ZONE_SW","ZONE_CENTRAL","ZENTRAL_ZONE_DEFAULT_SIZE","[object Object]","this","dropdownSelector","modalSelector","customizeProfileLinkSelector","personalizeButtonSelector","resetButtonSelector","categoryTextSelector","selectedZoneInputSelector","positionXInputSelector","positionYInputSelector","formSelector","submitButtonSelector","chartSelector","orbSelector","$","length","centralZoneSize","Number","val","modal","ModalWindow","on","initOrb","click","showModal","resetProfile","zone","toString","selectZone","show","left","innerWidth","width","top","innerHeight","height","css","display","draggable","containment","drag","updateZone","stop","savePosition","e","chart","paddingTop","parseInt","paddingLeft","x","pageX","offset","y","pageY","position","pos","calculateNormalizedPosition","newZone","selectedZone","submit","zoneName","hide"],"mappings":"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","sourcesContent":["import { ModalWindow } from \"./ModalWindow\";\nimport { CustomerProfileCardViewModel } from \"./Interfaces\";\n\nconst ZONE_NE = 'NE';\nconst ZONE_NW = 'NW';\nconst ZONE_SE = 'SE';\nconst ZONE_SW = 'SW';\nconst ZONE_CENTRAL = 'Central';\nconst DROPDOWN_CUSTOMIZED = 'customized';\nconst DROPDOWN_PERSONALIZE = 'personalize';\nconst DROPDOWN_RESET = 'reset';\nconst ZENTRAL_ZONE_DEFAULT_SIZE = 0.1;\n\nexport class CustomerProfileCard {\n    private dropdownSelector = '.customer-profile-card-dropdown';\n    private modalSelector = '#customer-profile-card-modal';\n    private customizeProfileLinkSelector = '.customize-profile-link';\n    private personalizeButtonSelector = '.personalize-customer-profile-button';\n    private resetButtonSelector = '.reset-customer-profile-button';\n    private categoryTextSelector = '.customer-profile-card-zone-text';\n    private selectedZoneInputSelector = '#SelectedZone';\n    private centralZoneSize: number;\n    private positionXInputSelector = '#PositionX';\n    private positionYInputSelector = '#PositionY';\n    private formSelector = '#customerProfileCardForm';\n    private submitButtonSelector = '#CustomerProfileCardSubmitButton';\n    private viewModel: CustomerProfileCardViewModel;\n    private chartSelector = '#CustomerProfileChart';\n    private orbSelector = '#CustomerProfileOrb';\n    private modal: ModalWindow;\n    private selectedZone: string;\n\n    constructor() {\n        if ($(this.modalSelector).length) {\n            this.centralZoneSize = Number($('#CentralZoneSize').val()) || ZENTRAL_ZONE_DEFAULT_SIZE;\n            this.modal = new ModalWindow(this.modalSelector);\n            $(this.modalSelector).on('shown.bs.modal', () => this.initOrb());\n            $(this.personalizeButtonSelector).click(() => this.showModal());\n            $(this.resetButtonSelector).click(() => this.resetProfile());\n        }\n    }\n\n    private showModal() {\n        if (this.modal) {\n            const zone = $(this.selectedZoneInputSelector).val().toString() || ZONE_CENTRAL;\n            this.selectZone(zone);\n            this.modal.show();\n        }\n    }\n\n    private initOrb() {\n        const left = (Number($(this.positionXInputSelector).val()) || 0.5) * $(this.chartSelector).innerWidth() - $(this.orbSelector).width() / 2;\n        const top = (Number($(this.positionYInputSelector).val()) || 0.5) * $(this.chartSelector).innerHeight() - $(this.orbSelector).height() / 2;\n        $(this.orbSelector).css({\n            'left': left + 'px',\n            'top': top + 'px',\n            'display': 'block'\n        });\n\n        // The user can move the orb around by dragging it\n        $(this.orbSelector).draggable({\n            containment: 'parent',\n            drag: () => {\n                this.updateZone();\n            },\n            stop: () => {\n                this.savePosition();\n            }\n        });\n\n        // Alternatively the user can click on the chart\n        $(this.chartSelector).click(e => {\n            const chart = $(this.chartSelector);\n            const paddingTop = parseInt(chart.css('padding-top'));\n            const paddingLeft = parseInt(chart.css('padding-left'));\n            const width = chart.width();\n            const height = chart.height();\n            const x = e.pageX - chart.offset().left;\n            const y = e.pageY - chart.offset().top;\n            // We need to check if the user clicked on the grey area that is defined by the padding\n            if (x > paddingLeft && x < paddingLeft + width && y > paddingTop && y < paddingTop + height) {\n                $(this.orbSelector).css('left', x - $(this.orbSelector).width() / 2 + 'px');\n                $(this.orbSelector).css('top', y - $(this.orbSelector).height() / 2 + 'px');\n                this.updateZone();\n                this.savePosition();\n            }\n        });\n    }\n\n    // Returns the position of the orb on the chart from 0 to 1\n    private calculateNormalizedPosition() {\n        const x = ($(this.orbSelector).position().left + $(this.orbSelector).width() / 2) / $(this.chartSelector).innerWidth();\n        const y = ($(this.orbSelector).position().top + $(this.orbSelector).height() / 2) / $(this.chartSelector).innerHeight();\n        return { x, y };\n    }\n\n    // Shows the correct text for the selected zone\n    private updateZone() {\n        const pos = this.calculateNormalizedPosition();\n        let newZone = ZONE_CENTRAL;\n        if (pos.x < 0.5 - this.centralZoneSize || pos.x > 0.5 + this.centralZoneSize\n            || pos.y < 0.5 - this.centralZoneSize || pos.y > 0.5 + this.centralZoneSize) {\n            if (pos.x > 0.5) {\n                if (pos.y > 0.5) {\n                    newZone = ZONE_SE;\n                } else {\n                    newZone = ZONE_NE;\n                }\n            } else {\n                if (pos.y > 0.5) {\n                    newZone = ZONE_SW;\n                } else {\n                    newZone = ZONE_NW;\n                }\n            }\n        }\n        if (newZone != this.selectedZone) {\n            this.selectZone(newZone);\n        }\n    }\n\n    // Updates the input fields for the orb position\n    private savePosition() {\n        const pos = this.calculateNormalizedPosition();\n        $(this.positionXInputSelector).val(pos.x);\n        $(this.positionYInputSelector).val(pos.y);\n    }\n\n    // Set everything to null and save\n    private resetProfile() {\n        $(this.selectedZoneInputSelector).val('');\n        $(this.positionXInputSelector).val('');\n        $(this.positionYInputSelector).val('');\n        $(this.formSelector).submit();\n    }\n\n    // Shows the correct category text and updates the input field\n    private selectZone(zoneName: string) {\n        this.selectedZone = zoneName;\n        $(this.categoryTextSelector).hide();\n        $(this.categoryTextSelector + '[data-zone=' + zoneName + ']').show();\n        $(this.selectedZoneInputSelector).val(zoneName);\n    }\n}\n\n"],"file":"CustomerProfileCard.js"}