src/js/modules/lightbox.js - Code Metrics - Inspection of "lightbox" - dmitriyakkerman/arm-ui - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( c86cb5...55df35 )

by D

created 2021-02-16 13:59 UTC

src/js/modules/lightbox.js A

↳ Parent: Project

Complexity

Total Complexity	19
Complexity/F	1.12

Size

Lines of Code	94
Function Count	17

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	19
eloc	59
mnd	2
bc	2
fnc	17
dl	0
loc	94
rs	10
bpm	0.1176
cpm	1.1176
noi	2
c	0
b	0
f	0

9 Functions

Rating	Name	Size	Complexity
A	Lightbox.initClose	4	1
A	Lightbox.bodyClose	11	3
A	Lightbox.initClasses	5	2
A	Lightbox.getTargetPosition	8	1
A	Lightbox.close	9	2
A	Lightbox.scrollClose	7	2
A	Lightbox.initClone	8	3
A	Lightbox.constructor	6	2
A	Lightbox.initHTML	26	3

class Lightbox {
    constructor(options) {
        this.targets = typeof options.targets === 'string' ? document.querySelectorAll(options.targets) : options.targets;
        this.initClasses();
        this.initClone();
        this.initClose();
    }

    initClasses() {
        this.targets.forEach(function (target) {
            target.classList.add('lightbox');
        });
    }

    initHTML(target, position) {
        let wrapper = document.createElement('div');
        wrapper.classList.add('clone-bg');

        setTimeout(() => {
            wrapper.classList.add('active');
        }, 100);

        let clone = document.createElement('div');
        clone.classList.add('clone');
        clone.style.top = position.top + 'px';
        clone.style.left = position.left + 'px';
        clone.style.width = target.naturalWidth + 'px';
        clone.style.height = target.naturalHeight + 'px';

        setTimeout(() => {
            clone.classList.add('centered');
        }, 100);

        let cloneImg = document.createElement('img');
        cloneImg.src = target.src;

        clone.appendChild(cloneImg);
        wrapper.appendChild(clone);
        document.body.appendChild(wrapper);
    }

    initClone() {
        let that = this;
        this.targets.forEach(function (target) {
            target.addEventListener('click', function (e) {
                that.initHTML(e.target, that.getTargetPosition(target));
            })
        });
    }

    getTargetPosition(target) {
        let targetPosition = target.getBoundingClientRect();

        return {
            top: targetPosition.top,
            left: targetPosition.left
        }
    }

    initClose() {
        this.bodyClose();
        this.scrollClose();
    }

    static close() {
        let parent = document.querySelector('.clone-bg');
        let child = parent.querySelector('.clone');
        child.classList.remove('centered');

        setTimeout(() => {
            parent.remove();
        }, 500);
    }

    bodyClose() {
        let that = this;


        document.addEventListener('click', function (e) {
            e.preventDefault();

            if(e.target.closest('.clone-bg')) {
                Lightbox.close();
            }
        });
    }

    scrollClose() {
        let that = this;


        document.addEventListener('scroll', function () {
            Lightbox.close();
        });
    }
}

1			class Lightbox {
2			constructor(options) {
3			this.targets = typeof options.targets === 'string' ? document.querySelectorAll(options.targets) : options.targets;
4			this.initClasses();
5			this.initClone();
6			this.initClose();
7			}
8
9			initClasses() {
10			this.targets.forEach(function (target) {
11			target.classList.add('lightbox');
12			});
13			}
14
15			initHTML(target, position) {
16			let wrapper = document.createElement('div');
17			wrapper.classList.add('clone-bg');
18
19			setTimeout(() => {
20			wrapper.classList.add('active');
21			}, 100);
22
23			let clone = document.createElement('div');
24			clone.classList.add('clone');
25			clone.style.top = position.top + 'px';
26			clone.style.left = position.left + 'px';
27			clone.style.width = target.naturalWidth + 'px';
28			clone.style.height = target.naturalHeight + 'px';
29
30			setTimeout(() => {
31			clone.classList.add('centered');
32			}, 100);
33
34			let cloneImg = document.createElement('img');
35			cloneImg.src = target.src;
36
37			clone.appendChild(cloneImg);
38			wrapper.appendChild(clone);
39			document.body.appendChild(wrapper);
40			}
41
42			initClone() {
43			let that = this;
44			this.targets.forEach(function (target) {
45			target.addEventListener('click', function (e) {
46			that.initHTML(e.target, that.getTargetPosition(target));
47			})
48			});
49			}
50
51			getTargetPosition(target) {
52			let targetPosition = target.getBoundingClientRect();
53
54			return {
55			top: targetPosition.top,
56			left: targetPosition.left
57			}
58			}
59
60			initClose() {
61			this.bodyClose();
62			this.scrollClose();
63			}
64
65			static close() {
66			let parent = document.querySelector('.clone-bg');
67			let child = parent.querySelector('.clone');
68			child.classList.remove('centered');
69
70			setTimeout(() => {
71			parent.remove();
72			}, 500);
73			}
74
75			bodyClose() {
76			let that = this;
			0 ignored issues – show Unused Code introduced 2021-02-16 14:18 UTC by Report Bug Copy Issue Report The variable `that` seems to be never used. Consider removing it. Loading history...
77
78			document.addEventListener('click', function (e) {
79			e.preventDefault();
80
81			if(e.target.closest('.clone-bg')) {
82			Lightbox.close();
83			}
84			});
85			}
86
87			scrollClose() {
88			let that = this;
			0 ignored issues – show Unused Code introduced 2021-02-16 14:18 UTC by Report Bug Copy Issue Report The variable `that` seems to be never used. Consider removing it. Loading history...
89
90			document.addEventListener('scroll', function () {
91			Lightbox.close();
92			});
93			}
94			}

dmitriyakkerman / arm-ui

Push — master ( c86cb5...55df35 )

src/js/modules/lightbox.js A

Complexity

Size

Duplication

Importance

9 Functions

Duplication Side-by-Side

Filter issues like