PurePopup/purePopup.js at master · dFelinger/PurePopup · 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
/*
 * PurePopup by dFelinger
 * https://github.com/dFelinger/PurePopup
 */
;(function() {
    'use strict';

    var Popup = function() {
        // this.el = typeof el === 'object' ? el : document.getElementById(el);

        // For check current popup type
        this.type = 'alert';

        // Set default params
        this.params = {};
        this.setParams();

        this.wrap = document.createElement('div');
        this.wrap.id = 'purePopupWrap';
        document.body.appendChild(this.wrap);
        this.wrap.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            if (e.target == this.wrap) this.close('noActionCancel');

            // TODO: settings: close on click
            if (e.target.className.indexOf('purePopupButton') != -1) this.close(e.target.className.match(/_(.*)_/)[1]);
        }.bind(this));
    }

    Popup.prototype.setParams = function (params, callback) {
        this.params.title = document.title;
        this.params.callback = null;
        this.params.buttons = (this.type == 'alert') ? {ok: 'Ok'} : {ok: 'Ok', cancel: 'Cancel'};
        this.params.inputs = {name: 'Please, enter your name'};

        if (params) {
            if (typeof params == 'object') {
                params = params;
                if (callback && typeof callback == 'function') params.callback = callback;
            } else if (typeof params == 'function') {
                params = {callback: params};
            }
        } else params = {};

        for (var p in params) if (this.params.hasOwnProperty(p)) this.params[p] = params[p];
    }

    Popup.prototype.show = function () {
        this.wrap.className = 'open';
        setTimeout(function(){
            this.wrap.className = 'open pop';
        }.bind(this), 20);
    }

    Popup.prototype.close = function (confirm) {
        this.wrap.className = 'open';
        setTimeout(function() {
            this.wrap.className = '';
            var result = {confirm: confirm};

            var inputs = this.wrap.getElementsByTagName('input');
            for (var i = inputs.length; --i >= 0;) result[inputs[i].name] = inputs[i].value;

            if (this.params.callback) this.params.callback.call(this, result);
        }.bind(this), 300);
    }

    Popup.prototype.alert = function (p, c) {
        this.type = 'alert';
        this.setParams(p, c);

        var buttonsHtml = '';
        for (var i in this.params.buttons) buttonsHtml += '<span class="purePopupButton _'+i+'_">'+this.params.buttons[i]+'</span>';

        this.wrap.innerHTML = '<div>'+
                                '<div>'+
                                    '<div class="purePopupTitle">'+this.params.title+'</div>'+
                                    buttonsHtml+
                                '</div>'+
                               '</div>';
        this.show();
    }

    Popup.prototype.confirm = function (p, c) {
        this.type = 'confirm';
        this.setParams(p, c);

        var buttonsHtml = '';
        for (var i in this.params.buttons) buttonsHtml += '<span class="purePopupButton _'+i+'_">'+this.params.buttons[i]+'</span>';

        this.wrap.innerHTML = '<div>'+
                                '<div>'+
                                    '<div class="purePopupTitle">'+this.params.title+'</div>'+
                                    buttonsHtml+
                                '</div>'+
                               '</div>';
        this.show();
    }

    Popup.prototype.prompt = function (p, c) {
        this.type = 'prompt';
        this.setParams(p, c);

        var inputsHtml = '', tabIndex = 0;
        for (var i in this.params.inputs) inputsHtml += '<label for="purePopupInputs_'+i+'">'+this.params.inputs[i]+'</label><input id="purePopupInputs_'+i+'" name="'+i+'" type="text" tabindex="'+(tabIndex++)+'">';

        var buttonsHtml = '';
        for (var i in this.params.buttons) buttonsHtml += '<span class="purePopupButton _'+i+'_">'+this.params.buttons[i]+'</span>';

        this.wrap.innerHTML = '<div>'+
                                '<div>'+
                                    '<div class="purePopupTitle">'+this.params.title+'</div>'+
                                    inputsHtml+
                                    buttonsHtml+
                                '</div>'+
                               '</div>';
        this.show();
    }

    window.PurePopup = new Popup();
}());