View GitHub Repository arm-ui

Schedule Inspection
Subscribe
Completed
Push — master ( 523210...1c9cdd )
by D
02:41
created

Lightbox.scrollClose   B

↳ Parent: Lightbox

Complexity

Conditions 7

Size

Total Lines 21
Code Lines 16

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 7
eloc 16
dl 0
loc 21
rs 8
c 0
b 0
f 0
1 
"use strict";
2 
Object.defineProperty(exports, "__esModule", { value: true });
3 
const globals_1 = require("../globals/globals");
4 
(function (root, factory) {
5 
    if (typeof globals_1.define === 'function' && globals_1.define.amd) {
6 
        globals_1.define([], factory);
7 
    }
8 
    else if (typeof module === 'object' && module.exports) {
9 
        module.exports = factory();
10 
    }
11 
    else {
12 
        root.Lightbox = factory();
13 
    }
14 
}(typeof self !== 'undefined' ? self : this, function () {
0 ignored issues
– show
Bug introduced by
The variable self seems to be never declared. If this is a global, consider adding a /** global: self */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
15 
    class Lightbox {
16 
        constructor(options) {
17 
            if (!options.targets) {
18 
                throw new Error('No targets');
19 
            }
20 
            this.options = options;
21 
            this.options.targets = typeof options.targets === 'string' ? document.querySelectorAll(options.targets) : options.targets;
22 
            this.initClasses();
23 
            this.initClone();
24 
            this.bodyClose();
25 
        }
26 
        initClasses() {
27 
            this.options.targets.forEach(function (target) {
28 
                target.classList.add('lightbox');
29 
            });
30 
        }
31 
        initHTML(target, position) {
32 
            let wrapper = document.createElement('div');
33 
            new Promise(function (resolve) {
34 
                wrapper.classList.add('lightbox-clone-wrapper');
35 
                setTimeout(resolve, 100);
36 
            }).then(function () {
37 
                wrapper.classList.add('active');
38 
            });
39 
            let clone = document.createElement('div');
40 
            new Promise(function (resolve) {
41 
                clone.classList.add('lightbox-clone');
42 
                clone.style.top = position.top + 'px';
43 
                clone.style.left = position.left + 'px';
44 
                clone.style.width = target.naturalWidth + 'px';
45 
                setTimeout(resolve, 100);
46 
            }).then(function () {
47 
                clone.classList.add('centered');
48 
            });
49 
            let cloneImg = document.createElement('img');
50 
            cloneImg.src = target.src;
51 
            clone.appendChild(cloneImg);
52 
            wrapper.appendChild(clone);
53 
            document.body.appendChild(wrapper);
54 
        }
55 
        initClone() {
56 
            let that = this;
57 
            this.options.targets.forEach(function (target) {
58 
                target.addEventListener('click', function (e) {
59 
                    that.initHTML(e.target, that.getTargetPosition(target));
60 
                    that.scrollClose(target);
61 
                });
62 
            });
63 
        }
64 
        getTargetPosition(target) {
65 
            let targetPosition = target.getBoundingClientRect();
66 
            return {
67 
                top: targetPosition.top,
68 
                left: targetPosition.left
69 
            };
70 
        }
71 
        bodyClose() {
72 
            document.addEventListener('click', function (e) {
73 
                e.preventDefault();
74 
                if (e.target.closest('.lightbox-clone-wrapper')) {
75 
                    let wrapper = document.querySelector('.lightbox-clone-wrapper');
76 
                    if (wrapper) {
77 
                        let clone = wrapper.firstElementChild;
78 
                        new Promise(function (resolve) {
79 
                            clone.classList.remove('centered');
80 
                            setTimeout(resolve, Lightbox.animationCloseSpeed);
81 
                        }).then(function () {
82 
                            wrapper.remove();
83 
                        });
84 
                    }
85 
                }
86 
            });
87 
        }
88 
        scrollClose(target) {
89 
            setTimeout(function () {
90 
                Lightbox.onetime(document, 'scroll', function () {
91 
                    let targetPosition = target.getBoundingClientRect();
92 
                    let wrapper = document.querySelector('.lightbox-clone-wrapper');
93 
                    if (wrapper) {
94 
                        let clone = wrapper.firstElementChild;
95 
                        new Promise(function (resolve) {
96 
                            clone.classList.remove('centered');
97 
                            clone.style.top = targetPosition.top + 'px';
98 
                            clone.style.left = targetPosition.left + 'px';
99 
                            setTimeout(resolve, Lightbox.animationCloseSpeed);
100 
                        }).then(function () {
101 
                            if ((clone.style.top === targetPosition.top + 'px') && (clone.style.left === targetPosition.left + 'px')) {
102 
                                wrapper.remove();
103 
                            }
104 
                        });
105 
                    }
106 
                });
107 
            }, Lightbox.animationCloseSpeed);
108 
        }
109 
        static onetime(node, type, callback) {
110 
            node.addEventListener(type, function (e) {
111 
                e.target.removeEventListener(e.type, callback);
112 
                return callback(e);
113 
            });
114 
        }
115 
    }
116 
    Lightbox.animationCloseSpeed = 150;
117 
    Lightbox.animationTranslateSpeed = 100;
118 
    return Lightbox;
119 
}));
120