Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #18205 from edx/thallada/sfe-modal-improvements

Browse Source 
Upgrade SFE, unscrollable body when modal is open.
This commit is contained in:
Tyler Hallada
2018-05-15 16:40:49 -04:00
committed by GitHub
parent 34129e2464 e9a04939d9
commit 8cf77f2382
4 changed files with 19 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cms/static/sass/elements/_modal.scss
View File

@@ -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;
}

9
common/lib/xmodule/xmodule/js/src/html/edit.js
View File

@@ -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) {

50
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -5,7 +5,7 @@
"@edx/cookie-policy-banner": "1.1.8",
"@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",