From e9a04939d9ee30574c9262e3fb758429fccb3a5f Mon Sep 17 00:00:00 2001
From: Tyler Hallada <thallada@edx.org>
Date: Fri, 11 May 2018 15:06:31 -0400
Subject: [PATCH] Upgrade SFE, unscrollable body when modal is open.
---
cms/static/sass/elements/_modal.scss | 5 ++
.../lib/xmodule/xmodule/js/src/html/edit.js | 9 ++--
package-lock.json | 50 +++----------------
package.json | 2 +-
4 files changed, 19 insertions(+), 47 deletions(-)
diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss
index 7252534063d..418dfc1cf5e 100644
--- a/cms/static/sass/elements/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -78,3 +78,8 @@
width: 100%;
background: $black;
}
+
+// Mimic Bootstrap functionality which makes the background body unscrollable while the modal is open.
+body.modal-open {
+ overflow: hidden;
+}
diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.js b/common/lib/xmodule/xmodule/js/src/html/edit.js
index d8428dafce9..748faab31ed 100644
--- a/common/lib/xmodule/xmodule/js/src/html/edit.js
+++ b/common/lib/xmodule/xmodule/js/src/html/edit.js
@@ -1215,7 +1215,7 @@
onclick: this.openImageModal
});
this.visualEditor = ed;
- this.imageModal = $('#edit-image-modal .modal');
+ this.imageModal = $('#edit-image-modal #modalWrapper');
/*
These events were added to the plugin code as the TinyMCE PluginManager
@@ -1227,6 +1227,8 @@
ed.on('EditLink', this.editLink);
ed.on('ShowCodeEditor', this.showCodeEditor);
ed.on('SaveCodeEditor', this.saveCodeEditor);
+
+ this.imageModal.on('closeModal', this.closeImageModal);
return this.imageModal.on('submitForm', this.editImageSubmit);
};
@@ -1263,6 +1265,7 @@
imgAttrs['height'] = parseInt(img.attr('height'), 10) || img[0].naturalHeight;
imgAttrs['style'] = img.attr('style');
}
+ $('body').addClass('modal-open'); // prevents background from scrolling while modal is open
return this.imageModal[0].dispatchEvent(new CustomEvent('openModal', {
bubbles: true,
detail: imgAttrs
@@ -1270,9 +1273,7 @@
};
HTMLEditingDescriptor.prototype.closeImageModal = function() {
- return this.imageModal[0].dispatchEvent(new CustomEvent('closeModal', {
- bubbles: true
- }));
+ $('body').removeClass('modal-open');
};
HTMLEditingDescriptor.prototype.saveImageFromModal = function(data) {
diff --git a/package-lock.json b/package-lock.json
index 9e1bd53f224..bc8abc47b00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,12 +86,12 @@
}
},
"@edx/studio-frontend": {
- "version": "1.9.9",
- "resolved": "https://registry.npmjs.org/@edx/studio-frontend/-/studio-frontend-1.9.9.tgz",
- "integrity": "sha512-SGeAIqqbXVHMvhJ0doHbjSuohVozfZ6AajVoAFrXz69BAw1FuvZxilGakeDdhtns3HI8RUwn/81mGelktHLyMQ==",
+ "version": "1.9.12",
+ "resolved": "https://registry.npmjs.org/@edx/studio-frontend/-/studio-frontend-1.9.12.tgz",
+ "integrity": "sha512-/PqIgJev2u+RJxO3xd+B17vaSKx1S2yuPuvxzweRnY0O1gEpUSoQUebVXJwFggIyskVayqqr0pZurbPhrt0zZQ==",
"requires": {
"@edx/edx-bootstrap": "1.0.0",
- "@edx/paragon": "2.7.0",
+ "@edx/paragon": "3.0.5",
"babel-polyfill": "6.26.0",
"classnames": "2.2.5",
"copy-to-clipboard": "3.0.8",
@@ -108,7 +108,6 @@
"react-paginate": "5.2.3",
"react-redux": "5.0.7",
"react-transition-group": "2.3.1",
- "reactstrap": "4.8.0",
"redux": "3.7.2",
"redux-devtools-extension": "2.13.2",
"redux-thunk": "2.2.0",
@@ -127,9 +126,9 @@
}
},
"@edx/paragon": {
- "version": "2.7.0",
- "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-2.7.0.tgz",
- "integrity": "sha512-YbZpn8/84ddsAsh/vWP63Zi9uRTXrvDLVP4ZJqLuQjJhts6OVetXvfWFHON/3fHK4Yvp090xaAWzbpxwJJ88Uw==",
+ "version": "3.0.5",
+ "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-3.0.5.tgz",
+ "integrity": "sha512-iuwNYgpjmzYxIuN78LSCZyBRUZw1jHKvV+daQGxbMWQfEBi/GIGevvD31yb72mai+DUw1AudnxP1/cWcrcWsUw==",
"requires": {
"@edx/edx-bootstrap": "1.0.0",
"babel-polyfill": "6.26.0",
@@ -5977,16 +5976,6 @@
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
"integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
},
- "lodash.isfunction": {
- "version": "3.0.9",
- "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
- "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw=="
- },
- "lodash.isobject": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
- "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
- },
"lodash.keys": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -6042,11 +6031,6 @@
"lodash.escape": "3.2.0"
}
},
- "lodash.tonumber": {
- "version": "4.0.3",
- "resolved": "https://registry.npmjs.org/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz",
- "integrity": "sha1-C5azGzVnJ5Prf1pj7nkfG56QJdk="
- },
"lodash.uniq": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -6767,7 +6751,7 @@
},
"onetime": {
"version": "1.1.0",
- "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+ "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
"dev": true
},
@@ -8101,24 +8085,6 @@
}
}
},
- "reactstrap": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-4.8.0.tgz",
- "integrity": "sha1-6zUGQqYoLHnH4b2Nb3XGJxMaQvY=",
- "requires": {
- "classnames": "2.2.5",
- "lodash.isfunction": "3.0.9",
- "lodash.isobject": "3.0.2",
- "lodash.tonumber": "4.0.3",
- "prop-types": "15.6.0",
- "reactstrap-tether": "1.3.4"
- }
- },
- "reactstrap-tether": {
- "version": "1.3.4",
- "resolved": "https://registry.npmjs.org/reactstrap-tether/-/reactstrap-tether-1.3.4.tgz",
- "integrity": "sha1-htlNMCFv+jTOssYm9LmRLA0ZOJQ="
- },
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
diff --git a/package.json b/package.json
index a1882c188d4..c5ef4c956dd 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"@edx/cookie-policy-banner": "1.1.6",
"@edx/edx-bootstrap": "0.4.3",
"@edx/paragon": "2.6.4",
- "@edx/studio-frontend": "1.9.9",
+ "@edx/studio-frontend": "1.9.12",
"babel-core": "6.26.0",
"babel-loader": "6.4.1",
"babel-plugin-transform-class-properties": "6.24.1",
--
GitLab