React-samples/src/toast/templates.js at master · SyncfusionExamples/React-samples · GitHub

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var sample_base_1 = require("../common/sample-base");
var ej2_base_1 = require("@syncfusion/ej2-base");
var ej2_react_buttons_1 = require("@syncfusion/ej2-react-buttons");
var ej2_react_dropdowns_1 = require("@syncfusion/ej2-react-dropdowns");
var ej2_react_notifications_1 = require("@syncfusion/ej2-react-notifications");
var ej2_base_2 = require("@syncfusion/ej2-base");
require("./templates.css");
var Templates = (function (_super) {
    __extends(Templates, _super);
    function Templates() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.cusPosition = { X: 'Right' };
        _this.tempPosition = !ej2_base_2.Browser.isDevice ? { X: 'Right', Y: 'Bottom' } : { X: 'Center', Y: 'Top' };
        _this.tempTarget = !ej2_base_2.Browser.isDevice ? document.body : '#toast_template_target';
        _this.template = '<div class="e-toast-template">${if(image)}<img class="e-toast-icon e-toast-image" src="${image.url}" />${/if} ${if(from || subject)}<div class="e-toast-message">${if(from)}<div class="e-toast-title">${from}</div>${/if} ${if(subject)}<div class="e-toast-content">${subject}</div>${/if}</div>${/if}</div>';
        _this.toastData = [
            { from: ' Anjolie Stokes', subject: 'Networking Referral', image: { url: 'src/toast/resource/laura.png' }, },
            { from: ' Ila Russo', subject: 'Business dinner invitation', image: { url: 'src/toast/resource/janat.png' }, },
            { from: ' Camden Mcmillan', subject: 'Reference Request - Cameran Hester', image: { url: 'src/toast/resource/camden.png' }, },
            { from: ' Chase Solomon', subject: 'New business relationship confirmation', image: { url: 'src/toast/resource/chase.png' }, },
            {
                from: ' Inga Scott', subject: 'Application for Sales Associate', image: { url: 'src/toast/resource/michael.png' },
            }
        ];
        _this.toastFlag = 0;
        _this.snoozeFlag = false;
        _this.listObj = new ej2_react_dropdowns_1.DropDownList({
            placeholder: 'Select a snooze time',
            popupHeight: '200px',
            change: _this.listChange.bind(_this)
        });
        return _this;
    }
    Templates.prototype.remainderClick = function () {
        var obj = this.cardTemplateFn(this.toastData[this.toastFlag])[0];
        this.toastObjEmail.show({ template: obj.outerHTML });
        ++this.toastFlag;
        if (this.toastFlag === (this.toastData.length)) {
            this.toastFlag = 0;
        }
    };
    Templates.prototype.alarmClick = function () {
        this.toastObj.show();
    };
    Templates.prototype.onOpenToast = function () {
        var dismisBtn = document.getElementById('dismiss');
        var snooze = document.getElementById('snooze');
        snooze.addEventListener('click', function () {
            this.snoozeFlag = true;
            this.toastObj.hide();
        }.bind(this));
        dismisBtn.addEventListener('click', function () {
            this.toastObj.hide();
        }.bind(this));
        document.addEventListener('click', function (e) {
            var closestEle = ej2_base_2.closest(e.target, '.e-toast-container');
            var alarm = document.getElementById('Alarm_turn_on');
            var btnEle = document.getElementById('toast_mail_remainder');
            if (!ej2_base_1.isNullOrUndefined(this.toastObj) && e.target !== alarm && e.target !== btnEle && closestEle !== this.toastObj.element && closestEle !== this.toastObjEmail.element) {
                this.toastObj.hide('All');
                this.toastObjEmail.hide('All');
            }
        }.bind(this));
    };
    Templates.prototype.onToastClose = function () {
        var alarm = document.getElementById('Alarm_turn_on');
        alarm.style.display = 'inline-block';
        if (this.snoozeFlag) {
            this.toastObj.show({ timeOut: (parseInt(this.listObj.value.toString(), 10) * 60000) });
            this.snoozeFlag = false;
        }
    };
    Templates.prototype.onToastBeforeOpen = function (e) {
        var alarm = document.getElementById('Alarm_turn_on');
        alarm.style.display = 'none';
        this.listObj.appendTo(e.element.querySelector('#snoozeDD'));
    };
    Templates.prototype.listChange = function (e) {
        this.snoozeFlag = true;
        this.toastObj.hide();
    };
    Templates.prototype.cardTemplateFn = function (data) {
        return ej2_base_2.compile(this.template.trim())(data);
    };
    Templates.prototype.toastObjCreate = function () {
        setTimeout(function () {
            this.toastObj.show();
        }.bind(this), 200);
    };
    Templates.prototype.toastObjEmailCreate = function () {
        setTimeout(function () {
            this.toastObjEmail.show({ template: this.cardTemplateFn(this.toastData[this.toastFlag])[0].outerHTML });
            ++this.toastFlag;
        }.bind(this), 200);
    };
    Templates.prototype.render = function () {
        var _this = this;
        function templatedata(data) {
            return (React.createElement("div", { id: "template_toast_ele" },
                React.createElement("div", { id: 'template_toast' },
                    React.createElement("div", { className: "horizontal-align" },
                        React.createElement("div", { className: 'e-icons toast-icons e-alarm' }),
                        React.createElement("div", { className: 'toast-content' },
                            React.createElement("div", { className: 'toast-title' }, "Weekend Alarm"),
                            React.createElement("div", { className: 'toast-message' }, " With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E. Olive Way by 10:00PM "))),
                    React.createElement("img", { src: "./src/toast/resource/map.jpg", width: "100%", height: "70%" }),
                    React.createElement("div", { className: "snooze" }, " Snooze for "),
                    React.createElement("div", { id: 'snoozedropDown' },
                        React.createElement("select", { id: "snoozeDD" },
                            React.createElement("option", { value: "2min" }, "2 minutes"),
                            React.createElement("option", { value: "5min" }, "5 minutes"),
                            React.createElement("option", { value: "10min" }, "10 minutes"))),
                    React.createElement("div", { className: "snoozeBtn" },
                        React.createElement("button", { id: "snooze", className: 'e-btn e-flat e-primary', style: { 'margin-right': '15px' } }, " Snooze "),
                        React.createElement("button", { id: "dismiss", className: 'e-btn e-flat e-primary' }, " Dismiss ")))));
        }
        return (React.createElement("div", { className: 'control-pane' },
            React.createElement("div", { className: 'col-lg-12 control-section toast-template-section' },
                React.createElement("div", { className: "e-sample-resize-container" },
                    React.createElement("div", { className: "row" },
                        React.createElement("div", { id: "reminder" },
                            React.createElement(ej2_react_buttons_1.ButtonComponent, { className: "e-btn", id: 'toast_mail_remainder', onClick: this.remainderClick.bind(this) }, " Mail Reminder"),
                            React.createElement(ej2_react_buttons_1.ButtonComponent, { className: "e-btn", id: 'Alarm_turn_on', onClick: this.alarmClick.bind(this) }, "Turn on Alarm"))),
                    React.createElement("div", { className: "row" },
                        React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
                            React.createElement(ej2_react_notifications_1.ToastComponent, { ref: function (toast) { _this.toastObjEmail = toast; }, id: 'toast_custom', position: this.cusPosition, animation: this.cusAnimation, newestOnTop: true, showCloseButton: true, timeOut: 0, created: this.toastObjEmailCreate.bind(this) })),
                        React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
                            React.createElement(ej2_react_notifications_1.ToastComponent, { ref: function (scope) { _this.toastObj = scope; }, id: 'toast_template', position: this.tempPosition, target: this.tempTarget, template: templatedata, extendedTimeout: 0, timeOut: 120000, open: this.onOpenToast.bind(this), close: this.onToastClose.bind(this), beforeOpen: this.onToastBeforeOpen.bind(this), created: this.toastObjCreate.bind(this) }),
                            React.createElement("div", { id: "toast_template_target" }))))),
            React.createElement("div", { id: "action-description" },
                React.createElement("p", null, "This sample demonstrates the Template rendering of the Toast. Static HTML toast to display an alarm notification which can be snoozed or dismissed and Dynamic template rendered using template engine to display mail remainders.")),
            React.createElement("div", { id: "description" },
                React.createElement("p", null, "This sample illustrates the way to display the template content on the toast. With the usage of Template, the user can format and structure the HTML content to be displayed on the toast as per their application needs."),
                React.createElement("ul", null,
                    React.createElement("li", null, "Alarm toast is integrated with button and drop-down list that allows to set timeOut for toast and close it."),
                    React.createElement("li", null, "Dynamic toast opened based on the data source given to add mail reminder notifications and it can be hidden using the close button available.")),
                React.createElement("p", null,
                    "More information about Toast can be found in this ",
                    React.createElement("a", { target: "_blank", href: "http://ej2.syncfusion.com/react/documentation/toast/getting-started.html" }, "documentation section"),
                    "."))));
    };
    return Templates;
}(sample_base_1.SampleBase));
exports.Templates = Templates;