Skip to content

Commit 0907d44

Browse files
johndjamesonjohndjameson
committed
Merge branch 'master' into editor_styles
2 parents dee1f10 + f2960a5 commit 0907d44

10 files changed

Lines changed: 263 additions & 59486 deletions

File tree

‎client/javascripts/application.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
// -------------------------------------
1111

1212
var JS = {};
13-
1413
JS.Globals = {},
1514
JS.Classes = {},
1615
JS.Helpers = {},
@@ -29,6 +28,7 @@ jQuery(function($) {
2928
// Modules
3029

3130
JS.Modules.Layout.init();
31+
JS.Modules.Video.init();
3232

3333
});
3434

‎client/javascripts/components/modules/video.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
// *************************************
2+
//
3+
// Video
4+
// -> Homepage video modal
5+
//
6+
// *************************************
7+
//
8+
// @param $element { jQuery object }
9+
// @param $trigger { jQuery object }
10+
// @param $video { jQuery object }
11+
// @param $close { jQuery object }
12+
// @param $overlay { jQuery object }
13+
// @param overlayNode { string (selector) }
14+
// @param closeNode { string (selector) }
15+
// @param activeClass { string }
16+
//
17+
// *************************************
18+
19+
JS.Modules.Video = (function() {
20+
21+
// -------------------------------------
22+
// Private Variables
23+
// -------------------------------------
24+
25+
var _settings = {};
26+
var _video = null;
27+
28+
// -------------------------------------
29+
// Initialize
30+
// -------------------------------------
31+
32+
var init = function(options) {
33+
_settings = $.extend({
34+
$element : $('body'),
35+
$trigger : $('.js-video-trigger'),
36+
$video : $('.js-video-element'),
37+
$close : $('<a href="#" class="video-close js-video-close">&times;</a>'),
38+
$overlay : $('<div class="video-overlay js-video-overlay"></div>'),
39+
overlayNode : '.js-video-overlay',
40+
closeNode : '.js-video-close',
41+
activeClass : 'is-video-playing'
42+
}, options);
43+
44+
_video = _settings.$video[0];
45+
46+
_setEventHandlers();
47+
};
48+
49+
// -------------------------------------
50+
// Set Event Handlers
51+
// -------------------------------------
52+
53+
var _setEventHandlers = function() {
54+
55+
// ----- Click: Trigger ----- //
56+
57+
_settings.$trigger.on('click', function(event) {
58+
event.preventDefault();
59+
60+
_toggle('open');
61+
});
62+
63+
// ----- Click: Close ----- //
64+
65+
$(document).on('click', _settings.closeNode, function(event) {
66+
event.preventDefault();
67+
68+
_toggle('close');
69+
});
70+
71+
// ----- Click: Overlay ----- //
72+
73+
$(document).on('click', _settings.overlayNode, function(event) {
74+
_toggle('close');
75+
});
76+
77+
// ----- Keydown: Escape ----- //
78+
79+
$(document).on('keydown', function(event) {
80+
console.log(event.which);
81+
switch (event.which) {
82+
case 27:
83+
_toggle('close');
84+
break;
85+
}
86+
});
87+
88+
};
89+
90+
// -------------------------------------
91+
// Toggle
92+
// -------------------------------------
93+
94+
var _toggle = function(state) {
95+
switch(state) {
96+
97+
case 'open':
98+
_settings.$element.prepend(_settings.$overlay);
99+
_settings.$overlay.prepend(_settings.$close);
100+
101+
setTimeout(function() {
102+
_settings.$element.addClass(_settings.activeClass);
103+
}, 200);
104+
105+
setTimeout(function() {
106+
_play();
107+
}, 1000);
108+
109+
break;
110+
111+
case 'close':
112+
_settings.$element.removeClass(_settings.activeClass);
113+
_pause();
114+
115+
break;
116+
}
117+
};
118+
119+
// -------------------------------------
120+
// Play
121+
// -------------------------------------
122+
123+
var _play = function() {
124+
_video.play();
125+
};
126+
127+
// -------------------------------------
128+
// Pause
129+
// -------------------------------------
130+
131+
var _pause = function() {
132+
_video.pause();
133+
};
134+
135+
// -------------------------------------
136+
// Stop
137+
// -------------------------------------
138+
139+
var _stop = function() {
140+
_video.stop();
141+
};
142+
143+
// -------------------------------------
144+
// Public Methods
145+
// -------------------------------------
146+
147+
return {
148+
init : init
149+
};
150+
151+
})();

‎client/stylesheets/application.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
@import 'structures/label'
4444
@import 'structures/layout'
4545
@import 'structures/link'
46+
@import 'structures/video'
4647

4748
// -------------------------------------
4849
// Vendor

‎client/stylesheets/components/_grid.sass‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,13 @@
2626
#{$g-selector}g
2727
@extend .group
2828
display: block
29-
margin-left: -$g-gutter / 2
30-
margin-right: -$g-gutter / 2
29+
margin-left: -$g-gutter
3130

3231
#{$g-selector}g-b
3332
box-sizing: border-box
3433
float: left
3534
margin: 0
36-
padding-left: $g-gutter / 2
37-
padding-right: $g-gutter / 2
35+
padding-left: $g-gutter
3836
width: 100%
3937

4038
// -------------------------------------

‎client/stylesheets/foundation/_config.sass‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,9 +177,9 @@ $g-l: em(1024px)
177177

178178
// Settings
179179
180-
$g-columns: 5
180+
$g-columns: 6
181181
$g-defaults: 's' $g-s, 'm' $g-m, 'l' $g-l
182-
$g-gutter: 20px
182+
$g-gutter: em(40px)
183183
$g-silent: false
184184

185185
// Selector

‎client/stylesheets/foundation/_helpers.sass‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,20 @@
137137
text-overflow: ellipsis
138138
white-space: nowrap
139139

140+
// ----- Faux Hide ----- //
141+
142+
.fauxHide
143+
opacity: 0
144+
overflow: hidden
145+
visibility: hidden
146+
147+
// ----- Faux Hide ----- //
148+
149+
.fauxShow
150+
opacity: 1
151+
overflow: visible
152+
visibility: visible
153+
140154
// ----- List Reset ----- //
141155
142156
.lr

‎client/stylesheets/structures/_video.sass‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// *************************************
2+
//
3+
// Video
4+
// -> Video modal
5+
//
6+
// -------------------------------------
7+
// Template (Haml)
8+
// -------------------------------------
9+
//
10+
// .video
11+
//
12+
// *************************************
13+
14+
.video
15+
@extend .fauxHide
16+
border-radius: $b-borderRadius * 2
17+
left: 50%
18+
max-width: 960px
19+
position: fixed
20+
top: 50%
21+
transform: translate(-50%, -40%)
22+
transition: all 0.3s ease-in-out
23+
z-index: 100
24+
25+
// -------------------------------------
26+
// States
27+
// -------------------------------------
28+
29+
// ----- Playing ----- //
30+
31+
.is-video-playing
32+
position: relative
33+
overflow: hidden
34+
35+
.video,
36+
.video-close,
37+
.video-overlay
38+
@extend .fauxShow
39+
40+
.video
41+
transform: translate(-50%, -50%)
42+
transition: all 0.3s 0.5s ease-in-out
43+
44+
.video-close
45+
transform: scale(1)
46+
transition: all 0.5s 0.7s ease-in-out
47+
48+
.video-overlay
49+
opacity: 0.9
50+
transition: all 0.5s ease-in-out
51+
52+
// -------------------------------------
53+
// Scaffolding
54+
// -------------------------------------
55+
56+
// ----- Close ----- //
57+
58+
.video-close
59+
@extend .fauxHide
60+
color: $c-text-invert
61+
display: block
62+
font-size: $b-fontSize-h1
63+
position: fixed
64+
right: $b-space-s
65+
top: 0
66+
transform: scale(0.5)
67+
transition: all 0.3s ease-in-out
68+
69+
// ----- Overlay ----- //
70+
71+
.video-overlay
72+
@extend .fauxHide
73+
background: $c-highlight
74+
bottom: 0
75+
height: 100%
76+
left: 0
77+
position: absolute
78+
right: 0
79+
top: 0
80+
transition: all 0.3s 0.5s ease-in-out
81+
width: 100%
82+
z-index: 99

0 commit comments

Comments
 (0)