Skip to content

Commit

Permalink
Merge pull request #3446 from /issues/3397/1
Browse files Browse the repository at this point in the history
Fixes #3391 - Add ability to close modals with Esc key
  • Loading branch information
ksy36 authored Aug 17, 2020
2 parents 4886309 + 3204668 commit f130ccd
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 27 deletions.
49 changes: 49 additions & 0 deletions tests/functional/reporting-issue-wizard-non-auth.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const { assert } = intern.getPlugin("chai");
const { registerSuite } = intern.getInterface("object");
const FunctionalHelpers = require("./lib/helpers.js");
const path = require("path");
const keys = require("@theintern/leadfoot/keys").default;

const cwd = intern.config.basePath;
const VALID_IMAGE_PATH = path.join(cwd, "tests/fixtures", "green_square.png");
Expand Down Expand Up @@ -613,5 +614,53 @@ registerSuite("Reporting with wizard", {
.end()
);
},
"Learn more modal - closing with Esc": function () {
return (
FunctionalHelpers.openPage(this, url("issues/new"), "#js-ReportForm")
.execute(() => {
// Click on "What is a web compatibility issue?"
document
.querySelector("[data-popup-trigger='what-is-compat']")
.click();
})
.end()
// Make sure that popup is visible and close it
.findDisplayedByCssSelector(".popup-modal")
.getAttribute("class")
.then((className) => {
assert.include(className, "is--visible");
})
.pressKeys(keys.ESCAPE)
.end()
.findByCssSelector(".popup-modal")
.getAttribute("class")
.then((className) => {
assert.notInclude("is--visible", className);
})
.end()
.execute(() => {
// Click on "All information included in this report will
// be publicly visible. Learn More?" modal
document
.querySelector("[data-popup-trigger='privacy-modal']")
.click();
})
.end()
// Make sure that popup is visible and close it
.findDisplayedByCssSelector(".popup-modal")
.getAttribute("class")
.then((className) => {
assert.include(className, "is--visible");
})
.pressKeys(keys.ESCAPE)
.end()
.findByCssSelector(".popup-modal")
.getAttribute("class")
.then((className) => {
assert.notInclude("is--visible", className);
})
.end()
);
},
},
});
65 changes: 42 additions & 23 deletions webcompat/static/js/lib/issue-wizard-popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,58 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import $ from "jquery";
import Mousetrap from "Mousetrap";
import { sendAnalyticsEvent } from "./wizard/analytics.js";

function Popup() {
this.init = function () {
this.closeButtons = document.querySelectorAll(".popup-modal__close");
this.modalTriggers = document.querySelectorAll(".popup-trigger");
this.overlay = document.querySelector(".popup-overlay");

this.setUpEvents();
};

this.setUpEvents = function () {
this.popupHandler();
this.modalTriggers.forEach(
function (trigger) {
trigger.addEventListener("click", this.openModal.bind(this));
}.bind(this)
);

this.closeButtons.forEach(
function (btn) {
btn.addEventListener("click", this.closeModal.bind(this));
}.bind(this)
);

Mousetrap.bind("esc", this.closeModal.bind(this));
};

this.openModal = function (e) {
e.preventDefault();

var popupTrigger = e.target.dataset.popupTrigger;
var popupModal = document.querySelector(
'[data-popup-modal="'.concat(popupTrigger, '"]')
);
sendAnalyticsEvent(
// transform trigger into camelCase and send as our event
popupTrigger.replace(/-([a-z])/g, function (match) {
return match[1].toUpperCase();
}),
"click"
);
popupModal.classList.add("is--visible");
this.overlay.classList.add("is-blacked-out");
};

this.popupHandler = function () {
var modalTriggers = document.querySelectorAll(".popup-trigger");
var overlay = document.querySelector(".popup-overlay");
var closeButtons = document.querySelectorAll(".popup-modal__close");
modalTriggers.forEach(function (trigger) {
trigger.addEventListener("click", function (e) {
e.preventDefault();
sendAnalyticsEvent("whatIsCompat", "click");
var popupTrigger = trigger.dataset.popupTrigger;
var popupModal = document.querySelector(
'[data-popup-modal="'.concat(popupTrigger, '"]')
);
popupModal.classList.add("is--visible");
overlay.classList.add("is-blacked-out");
closeButtons.forEach(function (btn) {
btn.addEventListener("click", function () {
popupModal.classList.remove("is--visible");
overlay.classList.remove("is-blacked-out");
});
});
});
});
this.closeModal = function () {
var popupModal = document.querySelector(".popup-modal.is--visible");
if (popupModal && this.overlay.classList.contains("is-blacked-out")) {
popupModal.classList.remove("is--visible");
this.overlay.classList.remove("is-blacked-out");
}
};

return this.init();
Expand Down
8 changes: 4 additions & 4 deletions webcompat/templates/issue-wizard-form.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
<div class="input-description">
<div id="desc-url" class="is-hidden">
Thank you for filing a web compatibility issue.
<a href="#" class="popup-trigger mobile-only" data-popup-trigger="what-is-webcompat">Learn more</a>
<a href="#" class="popup-trigger mobile-only" data-popup-trigger="what-is-compat">Learn more</a>
<br>
Do we have the <strong>correct site?</strong>
</div>
Expand Down Expand Up @@ -48,7 +48,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
<div class="input-control half">
<div class="col center">
<button class="button issue-btn next-url" disabled>Confirm</button>
<a href="#" class="popup-trigger desktop-only" data-popup-trigger="what-is-webcompat">Learn more about web compatibility</a>
<a href="#" class="popup-trigger desktop-only" data-popup-trigger="what-is-compat">Learn more about web compatibility</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -225,7 +225,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
<div class="warning-text">We recommend testing the website in another browser to validate this as a <strong>web compatibility issue</strong>.</div>
<div class="col center input-control">
<button class="button next-warning issue-btn">Continue without testing</button>
<a href="#" class="popup-trigger" data-popup-trigger="what-is-webcompat">What is a web compatibility issue?</a>
<a href="#" class="popup-trigger" data-popup-trigger="what-is-compat">What is a web compatibility issue?</a>
</div>
</div>

Expand Down Expand Up @@ -386,7 +386,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>

<div
class="popup-modal shadow"
data-popup-modal="what-is-webcompat">
data-popup-modal="what-is-compat">
<img class="close popup-modal__close" src="{{ url_for('static', filename='img/svg/icons/svg-cross-black.svg') }}" title="Close popup" alt="Close popup" />
<div class="slider">
<div class="slides">
Expand Down

0 comments on commit f130ccd

Please sign in to comment.