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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
(function($) {
'use strict';
// Open and close the sidebar by swiping the sidebar and the blog and vice versa
/**
* Sidebar
* @constructor
*/
var Sidebar = function() {
this.$sidebar = $('#sidebar');
this.$openBtn = $('#btn-open-sidebar');
// Elements where the user can click to close the sidebar
this.$closeBtn = $('#header, #main, .post-header-cover');
// Elements affected by the swipe of the sidebar
// The `pushed` class is added to each elements
// Each element has a different behavior when the sidebar is opened
this.$blog = $('.post-bottom-bar, #header, #main, .post-header-cover');
// If you change value of `mediumScreenWidth`,
// you have to change value of `$screen-min: (md-min)` too
// in `source/_css/utils/variables.scss`
this.$body = $('body');
this.mediumScreenWidth = 768;
};
Sidebar.prototype = {
/**
* Run Sidebar feature
* @return {void}
*/
run: function() {
var self = this;
// Detect the click on the open button
this.$openBtn.click(function() {
if (!self.$sidebar.hasClass('pushed')) {
self.openSidebar();
}
});
// Detect the click on close button
this.$closeBtn.click(function() {
if (self.$sidebar.hasClass('pushed')) {
self.closeSidebar();
}
});
// Detect resize of the windows
$(window).resize(function() {
// Check if the window is larger than the minimal medium screen value
if ($(window).width() > self.mediumScreenWidth) {
self.resetSidebarPosition();
self.resetBlogPosition();
}
else {
self.closeSidebar();
}
});
},
/**
* Open the sidebar by swiping to the right the sidebar and the blog
* @return {void}
*/
openSidebar: function() {
this.swipeBlogToRight();
this.swipeSidebarToRight();
},
/**
* Close the sidebar by swiping to the left the sidebar and the blog
* @return {void}
*/
closeSidebar: function() {
this.swipeSidebarToLeft();
this.swipeBlogToLeft();
},
/**
* Reset sidebar position
* @return {void}
*/
resetSidebarPosition: function() {
this.$sidebar.removeClass('pushed');
},
/**
* Reset blog position
* @return {void}
*/
resetBlogPosition: function() {
this.$blog.removeClass('pushed');
},
/**
* Swipe the sidebar to the right
* @return {void}
*/
swipeSidebarToRight: function() {
var self = this;
// Check if the sidebar isn't swiped
// and prevent multiple click on the open button with `.processing` class
if (!this.$sidebar.hasClass('pushed') && !this.$sidebar.hasClass('processing')) {
// Swipe the sidebar to the right
this.$sidebar.addClass('processing pushed');
// add overflow on body to remove horizontal scroll
this.$body.css('overflow-x', 'hidden');
setTimeout(function() {
self.$sidebar.removeClass('processing');
}, 250);
}
},
/**
* Swipe the sidebar to the left
* @return {void}
*/
swipeSidebarToLeft: function() {
// Check if the sidebar is swiped
// and prevent multiple click on the close button with `.processing` class
if (this.$sidebar.hasClass('pushed') && !this.$sidebar.hasClass('processing')) {
// Swipe the sidebar to the left
this.$sidebar.addClass('processing').removeClass('pushed processing');
// go back to the default overflow
this.$body.css('overflow-x', 'auto');
}
},
/**
* Swipe the blog to the right
* @return {void}
*/
swipeBlogToRight: function() {
var self = this;
// Check if the blog isn't swiped
// and prevent multiple click on the open button with `.processing` class
if (!this.$blog.hasClass('pushed') && !this.$blog.hasClass('processing')) {
// Swipe the blog to the right
this.$blog.addClass('processing pushed');
setTimeout(function() {
self.$blog.removeClass('processing');
}, 250);
}
},
/**
* Swipe the blog to the left
* @return {void}
*/
swipeBlogToLeft: function() {
var self = this;
// Check if the blog is swiped
// and prevent multiple click on the close button with `.processing` class
if (self.$blog.hasClass('pushed') && !this.$blog.hasClass('processing')) {
// Swipe the blog to the left
self.$blog.addClass('processing').removeClass('pushed');
setTimeout(function() {
self.$blog.removeClass('processing');
}, 250);
}
}
};
$(document).ready(function() {
var sidebar = new Sidebar();
sidebar.run();
});
})(jQuery);
|
