FilesExpand file tree

 master

/

sidebar.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

50 lines (47 loc) · 1.99 KB

 master

/

sidebar.js

Copy path

Top

File metadata and controls

• Code
• Blame

50 lines (47 loc) · 1.99 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

/* global CONFIG */

document.addEventListener('DOMContentLoaded', () => {

const isRight = CONFIG.sidebar.position === 'right';

const sidebarToggleMotion = {

mouse: {},

init : function() {

window.addEventListener('mousedown', this.mousedownHandler.bind(this));

window.addEventListener('mouseup', this.mouseupHandler.bind(this));

document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));

document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));

window.addEventListener('sidebar:show', this.showSidebar);

window.addEventListener('sidebar:hide', this.hideSidebar);

},

mousedownHandler: function(event) {

this.mouse.X = event.pageX;

this.mouse.Y = event.pageY;

},

mouseupHandler: function(event) {

const deltaX = event.pageX - this.mouse.X;

const deltaY = event.pageY - this.mouse.Y;

const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main');

// Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.

if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {

this.hideSidebar();

}

},

clickHandler: function() {

document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();

},

showSidebar: function() {

document.body.classList.add('sidebar-active');

const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft';

document.querySelectorAll('.sidebar .animated').forEach((element, index) => {

element.style.animationDelay = (100 * index) + 'ms';

element.classList.remove(animateAction);

setTimeout(() => {

// Trigger a DOM reflow

element.classList.add(animateAction);

});

});

},

hideSidebar: function() {

document.body.classList.remove('sidebar-active');

}

};

sidebarToggleMotion.init();

});