1 | 'use strict';
|
2 |
|
3 | var domQuery = require('min-dom').query,
|
4 | domClasses = require('min-dom').classes,
|
5 | domify = require('min-dom').domify,
|
6 | bind = require('lodash/bind');
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | function Popup(options) {
|
13 | options = options || {};
|
14 | this.template = options.template || this.template;
|
15 | var el = this.el = domify(this.template);
|
16 |
|
17 | this.header = domQuery('.popup-header', el);
|
18 | this.body = domQuery('.popup-body', el);
|
19 | this.footer = domQuery('.popup-footer', el);
|
20 |
|
21 | document.body.appendChild(el);
|
22 |
|
23 | this._attachEvents();
|
24 | }
|
25 |
|
26 | Popup.prototype.template = '<div class="bpp-properties-panel-popup">' +
|
27 | '<div class="underlay"></div>' +
|
28 | '<div class="popup">' +
|
29 | '<button class="popup-close"><span>Close</span></button>' +
|
30 | '<div class="popup-header"></div>' +
|
31 | '<div class="popup-body"></div>' +
|
32 | '<div class="popup-footer"></div>' +
|
33 | '</div>' +
|
34 | '</div>';
|
35 |
|
36 |
|
37 |
|
38 | Popup.prototype._attachEvents = function() {
|
39 | var self = this;
|
40 | var events = this.events;
|
41 | var el = this.el;
|
42 |
|
43 | Object.keys(events).forEach(function(instruction) {
|
44 | var cb = bind(self[events[instruction]], self);
|
45 | var parts = instruction.split(' ');
|
46 | var evtName = parts.shift();
|
47 | var target = parts.length ? parts.shift() : false;
|
48 | target = target ? domQuery(target, el) : el;
|
49 | if (!target) { return; }
|
50 | target.addEventListener(evtName, cb);
|
51 | });
|
52 | };
|
53 |
|
54 | Popup.prototype._detachEvents = function() {
|
55 | var self = this;
|
56 | var events = this.events;
|
57 | var el = this.el;
|
58 |
|
59 | Object.keys(events).forEach(function(instruction) {
|
60 | var cb = bind(self[events[instruction]], self);
|
61 | var parts = instruction.split(' ');
|
62 | var evtName = parts.shift();
|
63 | var target = parts.length ? parts.shift() : false;
|
64 | target = target ? domQuery(target, el) : el;
|
65 | if (!target) { return; }
|
66 | target.removeEventListener(evtName, cb);
|
67 | });
|
68 | };
|
69 |
|
70 | Popup.prototype.events = {
|
71 |
|
72 | 'click .underlay': '_handleClose',
|
73 | 'click .popup-close': '_handleClose'
|
74 | };
|
75 |
|
76 |
|
77 | Popup.prototype._handleClose = function(evt) {
|
78 | this.close();
|
79 | };
|
80 |
|
81 |
|
82 | Popup.prototype.open = function(content) {
|
83 | domClasses(this.el).add('open');
|
84 | };
|
85 |
|
86 | Popup.prototype.close = function() {
|
87 | domClasses(this.el).remove('open');
|
88 | };
|
89 |
|
90 | Popup.prototype.remove = function() {
|
91 | this._detachEvents();
|
92 | if (document.body.contains(this.el)) {
|
93 | document.body.removeChild(this.el);
|
94 | }
|
95 | };
|
96 |
|
97 | var popup;
|
98 | module.exports = function() {
|
99 | if (!popup) {
|
100 | popup = new Popup();
|
101 | }
|
102 | return popup;
|
103 | };
|