Skip to content

Commit d52f6b6

Browse files
JoshBeveridgeJoshBeveridge
committed
Adds Dialogue Modals
1 parent 0563bd7 commit d52f6b6

14 files changed

+774
-130
lines changed

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
cache

‎app/js/clone.js

+182-55
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,227 @@
1-
21
// =============================================================================
32

4-
// Utilities JavaScript (jQuery)
3+
// Utilities JavaScript (jQuery)
54

65
// =============================================================================
76

87
(function ($) {
98

109
// Add isValid()
1110

12-
$.fn.isValid = function () {
13-
return this[0].checkValidity()
14-
}
11+
$.fn.isValid = function () {
12+
return this[0].checkValidity()
13+
}
1514

1615
// Root
1716

18-
var $root = $('html, body');
17+
var $root = $('html, body');
1918

2019
// Add has attribute Function
2120

22-
$.fn.hasAttr = function (name) {
23-
var attr = $(this).attr(name);
24-
// For some browsers, `attr` is undefined; for others,
25-
// `attr` is false. Check for both.
26-
return (typeof attr !== typeof undefined && attr !== false);
27-
};
21+
$.fn.hasAttr = function (name) {
22+
var attr = $(this).attr(name);
23+
return (typeof attr !== typeof undefined && attr !== false);
24+
};
2825

2926
// User Agent Data Attributes ==============================================
3027

31-
var ua = navigator.userAgent;
32-
ua = ua.toString();
33-
// console.log("hello");
34-
$('body').attr('id', ua);
28+
var ua = navigator.userAgent;
29+
ua = ua.toString();
30+
$('body').attr('id', ua);
3531

36-
$(document).ready(function () {
32+
// Core ====================================================================
3733

38-
// Accordion Handlers ==================================================
34+
$(document).ready(function () {
3935

40-
function accordionTrigger(trigger) {
41-
if ($(trigger).parent(".accordion").hasClass("active")) {
42-
$(trigger).attr("aria-expanded", "false");
43-
$(trigger).parent(".accordion").removeClass("active");
44-
$(trigger).parent(".accordion").find(".accordion-content").attr("aria-hidden", "true");
45-
}
46-
else {
47-
$(trigger).attr("aria-expanded", "true");
48-
$(trigger).parent(".accordion").addClass("active");
49-
$(trigger).parent(".accordion").find(".accordion-content").attr("aria-hidden", "false");
36+
// Accordion Handlers ==============================================
37+
38+
function accordionTrigger(trigger) {
39+
if ($(trigger).parent(".accordion").hasClass("active")) {
40+
$(trigger).attr("aria-expanded", "false");
41+
$(trigger).parent(".accordion").removeClass("active");
42+
$(trigger).parent(".accordion").find(".accordion-content").attr("aria-hidden", "true");
43+
}
44+
else {
45+
$(trigger).attr("aria-expanded", "true");
46+
$(trigger).parent(".accordion").addClass("active");
47+
$(trigger).parent(".accordion").find(".accordion-content").attr("aria-hidden", "false");
48+
}
5049
}
51-
}
5250

53-
$(document).on("click", ".accordion-trigger", function (e) {
51+
$(document).on("click", ".accordion-trigger", function (e) {
52+
e.preventDefault();
53+
accordionTrigger(this);
54+
});
55+
56+
// Carousel Controls ===============================================
5457

55-
accordionTrigger(this);
58+
$("[class*='carousel--']").slick({
59+
nextArrow: '<button class="slick-next" title="View the next slide." type="button"><i class="material-icons">arrow_forward_ios</i></button>',
60+
prevArrow: '<button class="slick-prev" title="View the previous slide." type="button"><i class="material-icons">arrow_back_ios</i></button>',
61+
lazyLoad: "progressive"
62+
});
5663

57-
});
64+
// Form Handlers ===================================================
5865

59-
$(document).on("keyup", ".accordion-trigger", function (e) {
66+
// HTML5 Validation --------------------------------------------
6067

61-
if (e.which == 13) {
62-
accordionTrigger(this);
63-
}
68+
// Password Toggle ---------------------------------------------
6469

65-
});
70+
$(".password button").on("click", function (e) {
6671

67-
// Carousel Controls ===================================================
72+
e.preventDefault();
6873

69-
$("[class*='carousel--']").slick({
70-
nextArrow: '<button class="slick-next" title="View the next slide." type="button"><i class="material-icons">arrow_forward_ios</i></button>',
71-
prevArrow: '<button class="slick-prev" title="View the previous slide." type="button"><i class="material-icons">arrow_back_ios</i></button>',
72-
lazyLoad: "progressive"
73-
});
74+
var x = $(this).siblings("input");
7475

75-
// Form Handlers =======================================================
76+
if (x.attr("type") === "password") {
77+
x.attr("type", "text");
78+
x.parents(".password").addClass("visible");
79+
}
80+
else {
81+
x.attr("type", "password");
82+
x.parents(".password").removeClass("visible");
83+
}
7684

77-
// HTML5 Validation ------------------------------------------------
85+
});
7886

79-
// Password Toggle -------------------------------------------------
87+
// Dialogue Handlers ===============================================
8088

81-
$(".password button").on("click", function (e) {
89+
function dialogueTrigger(trigger) {
8290

83-
e.preventDefault();
91+
var dialogueID = $(trigger).attr("data-dialogue-id");
92+
var dialogue = $(".dialogue-scroll-wrapper[data-dialogue-id='" + dialogueID +"']");
93+
94+
if($(dialogue).hasClass("active")) {
95+
$("body").css("overflow", "visible");
96+
$(".dialogue-overlay").removeClass("active");
97+
$(dialogue).removeClass("active contained overflowing");
98+
$(dialogue).attr("aria-hidden", "true");
99+
$(".dialogue-ancestor").focus();
100+
}
101+
else {
102+
103+
$("*").removeClass("dialogue-ancestor");
104+
$(trigger).addClass("dialogue-ancestor");
105+
console.log($(".dialogue-ancestor"));
106+
$("body").css("overflow", "hidden");
107+
$(".dialogue-overlay").addClass("active");
108+
$(dialogue).addClass("active");
109+
$(dialogue).attr("aria-hidden", "false");
110+
111+
dialogueSizing(dialogue);
112+
113+
var focusableItems = $(dialogue).find(":focusable");
114+
var firstInput = focusableItems.first();
115+
console.log(firstInput);
116+
var lastInput = focusableItems.last();
117+
console.log(lastInput);
118+
119+
if (dialogue.find("form").length == 0) {
120+
lastInput.focus();
121+
}
122+
else {
123+
firstInput.focus();
124+
}
125+
126+
dialogueTabbing(firstInput, lastInput);
127+
dialogueEscape();
128+
129+
}
130+
131+
}
132+
133+
function dialogueSizing(dialogue) {
134+
135+
var viewportHeight = $(window).height();
84136

85-
var x = $(this).siblings("input");
137+
if (dialogue != null) {
138+
139+
var dialogueHeight = $(dialogue).find(".dialogue").height();
140+
141+
if (dialogueHeight > viewportHeight) {
142+
$(dialogue).removeClass("overflowing container").addClass("overflowing");
143+
}
144+
else {
145+
$(dialogue).removeClass("overflowing container").addClass("contained");
146+
}
86147

87-
if (x.attr("type") === "password") {
88-
x.attr("type", "text");
89-
x.parents(".password").addClass("visible");
90148
}
91149
else {
92-
x.attr("type", "password");
93-
x.parents(".password").removeClass("visible");
150+
$(".dialogue-scroll-wrapper").each(function() {
151+
152+
var dialogueHeight = $(this).find(".dialogue").height();
153+
console.log(dialogueHeight);
154+
155+
if (dialogueHeight > viewportHeight) {
156+
$(this).removeClass("overflowing container").addClass("overflowing");
157+
}
158+
else {
159+
$(this).removeClass("overflowing container").addClass("contained");
160+
}
161+
162+
});
94163
}
95164

165+
}
166+
167+
$(document).on("click", "button[data-dialogue-id]", function(e) {
168+
e.preventDefault();
169+
dialogueTrigger(this);
170+
});
171+
172+
$( window ).resize(function(e) {
173+
e.preventDefault();
174+
dialogueSizing();
96175
});
97176

98-
});
177+
// Tab Handler -------------------------------------------------
178+
179+
function dialogueTabbing(first, last) {
180+
181+
$(document).on("keydown", function(e){
182+
183+
var keyCode = e.keyCode || e.which;
184+
185+
if (keyCode == 9 && !e.shiftKey) {
186+
if ($(last).is(":focus")) {
187+
e.preventDefault();
188+
$(first).focus();
189+
}
190+
}
191+
else if (keyCode == 9 && e.shiftKey) {
192+
if ($(first).is(":focus")) {
193+
e.preventDefault();
194+
$(last).focus();
195+
}
196+
}
197+
198+
});
199+
200+
}
201+
202+
// Escape Handler ------------------------------------------
203+
204+
function dialogueEscape() {
205+
206+
$(document).on("keyup", function(e){
207+
208+
if ((e.key==='Escape'||e.key==='Esc'||e.keyCode===27)){
209+
210+
$(".dialogue-overlay").removeClass("active");
211+
$(".dialogue-scroll-wrapper").removeClass("active contained overflowing");
212+
$("body").css("overflow", "visible");
213+
214+
if (e.stopPropagation) {
215+
e.stopPropagation();
216+
e.preventDefault();
217+
}
218+
219+
}
220+
221+
});
222+
223+
}
224+
225+
});
99226

100227
})(jQuery);

‎app/scss/clone.scss

+4
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,10 @@
9191

9292
@import "components/carousel";
9393

94+
// Dialogues
95+
96+
@import "components/dialogue";
97+
9498
// Iframes
9599

96100
@import "components/iframe";

‎app/scss/components/_accordion.scss

+4
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,12 @@
88
.accordion {
99

1010
.accordion-trigger {
11+
background: none;
12+
border: none;
1113
cursor: pointer;
1214
position: relative;
15+
text-align: left;
16+
width: 100%;
1317

1418
[class*="accordion-icon--"] {
1519
font-size: $font-scale--h4;

0 commit comments

Comments
 (0)