diff --git a/css/_igv-widgets-alert-dialog.scss b/css/_igv-ui-alert-dialog.scss similarity index 89% rename from css/_igv-widgets-alert-dialog.scss rename to css/_igv-ui-alert-dialog.scss index 408366f..6691044 100644 --- a/css/_igv-widgets-alert-dialog.scss +++ b/css/_igv-ui-alert-dialog.scss @@ -9,14 +9,17 @@ $igv-alert-dialog-ok-container-height: 64px; $igv-alert-dialog-ok-button-height: 30px; $igv-alert-dialog-body-copy-margin: 16px; -.igv-widgets-alert-dialog-container { +.igv-ui-alert-dialog-container { - box-sizing: content-box; + position: fixed; + + top: 20%; + left: 50%; + transform: translateX(-50%); - position: absolute; z-index: 2048; - top:50%; - left:50%; + + box-sizing: content-box; width:$igv-alert-dialog-width; height:$igv-alert-dialog-height; @@ -69,7 +72,13 @@ $igv-alert-dialog-body-copy-margin: 16px; } // body container - #igv-widgets-alert-dialog-body { + .igv-ui-alert-dialog-body { + + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + color: $igv-dark-grey-color; width: 100%; @@ -77,18 +86,14 @@ $igv-alert-dialog-body-copy-margin: 16px; overflow-y: scroll; - #igv-widgets-alert-dialog-body-copy { - cursor: pointer; - //user-select: none; + .igv-ui-alert-dialog-body-copy { + //cursor: pointer; margin: $igv-alert-dialog-body-copy-margin; width: auto; height: auto; - //overflow-x: hidden; - //overflow-y: scroll; - overflow-wrap: break-word; word-break: break-word; diff --git a/css/app.css b/css/app.css index 00a691c..471b9a8 100644 --- a/css/app.css +++ b/css/app.css @@ -114,15 +114,16 @@ select#igv-app-track-select-modal-select option { font-size: 1rem; } select#igv-app-track-select-modal-select option[disabled] { - color: #afafaf; + color: rgb(175, 175, 175); } -.igv-widgets-alert-dialog-container { - box-sizing: content-box; - position: absolute; - z-index: 2048; - top: 50%; +.igv-ui-alert-dialog-container { + position: fixed; + top: 20%; left: 50%; + transform: translateX(-50%); + z-index: 2048; + box-sizing: content-box; width: 400px; height: 200px; border-color: #7F7F7F; @@ -140,7 +141,7 @@ select#igv-app-track-select-modal-select option[disabled] { justify-content: space-between; align-items: center; } -.igv-widgets-alert-dialog-container > div:first-child { +.igv-ui-alert-dialog-container > div:first-child { display: flex; flex-flow: row; flex-wrap: nowrap; @@ -156,17 +157,20 @@ select#igv-app-track-select-modal-select option[disabled] { border-bottom-width: thin; background-color: #eee; } -.igv-widgets-alert-dialog-container > div:first-child div:first-child { +.igv-ui-alert-dialog-container > div:first-child div:first-child { padding-left: 8px; } -.igv-widgets-alert-dialog-container #igv-widgets-alert-dialog-body { +.igv-ui-alert-dialog-container .igv-ui-alert-dialog-body { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; color: #373737; width: 100%; height: calc(100% - 24px - 64px); overflow-y: scroll; } -.igv-widgets-alert-dialog-container #igv-widgets-alert-dialog-body #igv-widgets-alert-dialog-body-copy { - cursor: pointer; +.igv-ui-alert-dialog-container .igv-ui-alert-dialog-body .igv-ui-alert-dialog-body-copy { margin: 16px; width: auto; height: auto; @@ -175,7 +179,7 @@ select#igv-app-track-select-modal-select option[disabled] { background-color: white; border: unset; } -.igv-widgets-alert-dialog-container > div:last-child { +.igv-ui-alert-dialog-container > div:last-child { width: 100%; margin-bottom: 10px; background-color: white; @@ -185,7 +189,7 @@ select#igv-app-track-select-modal-select option[disabled] { justify-content: center; align-items: center; } -.igv-widgets-alert-dialog-container > div:last-child div { +.igv-ui-alert-dialog-container > div:last-child div { margin: unset; width: 40px; height: 30px; @@ -201,7 +205,7 @@ select#igv-app-track-select-modal-select option[disabled] { border-radius: 4px; background-color: #2B81AF; } -.igv-widgets-alert-dialog-container > div:last-child div:hover { +.igv-ui-alert-dialog-container > div:last-child div:hover { cursor: pointer; border-color: #25597f; background-color: #25597f; diff --git a/css/app.css.map b/css/app.css.map index 55838ec..b6d390c 100644 --- a/css/app.css.map +++ b/css/app.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["_panel.scss","_color.scss","_share-modal.scss","_encode.scss","_track-select.scss","_igv-widgets-alert-dialog.scss","app.scss","_file-load-widget.scss"],"names":[],"mappings":"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;;;AAGF;EACE,aAVkB;;;AAapB;EACE;;;AAGF;EACE;;AACA;EACE,OA3BiB;EA4BjB;;;AAKJ;EACE;EACA;EACA;;;AAKA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,YAlFkB;EAmFlB,kBA1FmB;;;AAgGf;EACE;EACA;EACA;;AAEF;EACE;;;AAMR;EACE;;;AAGF;EACE;;;AAGF;EACE;EAEA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAIA;EACE;;;AAGJ;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;EACE;;AAEA;EACE;;;AAKN;EACE;;;AAGF;EACE;EACA;;;AAKA;EACE;;;AAOF;EACE;;;AAKJ;EAEE;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAOE;EACE,OAvOe;EAwOf;EACA;EACA;;;AAKN;EACE;;;AAKA;EACE,OAtPiB;EAuPjB;EAEA;;AAGF;EAEE;;;AAKJ;EACE;EACA;;;AAGF;EACE,eApQsB;;;AAuQxB;EACE;EAEA,QA3QkC;EA6QlC;;;AAIF;EACE,kBAtRmB;;;AAyRrB;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,OAxSqB;EAySrB;EACA;;;AAGF;EACE,OA7SmB;EA8SnB,cA/SqB;;;AAkTvB;EACE,kBAnTqB;;;AAsTvB;EACE,kBAtTmB;;;AAyTrB;EACE;;;AAQA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAKA;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAGF;EAEE;IACE;IACA;IAEA;IACA,QA9YoB;IA+YpB,aA/YoB;IAiZpB;IACA;IACA;IACA;IACA;;EAEA;IACE,QAxZkB;IAyZlB,aAzZkB;IA0ZlB;IACA;;EACA;IACE,OAlaa;IAmab;;EAIJ;IACE,QAnakB;IAoalB,aApakB;IAqalB;IACA;;EAGF;IACE","file":"app.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["_panel.scss","_color.scss","_share-modal.scss","_encode.scss","_track-select.scss","_igv-ui-alert-dialog.scss","app.scss","_file-load-widget.scss"],"names":[],"mappings":"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kBA5V0B;;;ADYhC;EACE;;;AAGF;EACE,aAVkB;;;AAapB;EACE;;;AAGF;EACE;;AACA;EACE,OA3BiB;EA4BjB;;;AAKJ;EACE;EACA;EACA;;;AAKA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,YAlFkB;EAmFlB,kBA1FmB;;;AAgGf;EACE;EACA;EACA;;AAEF;EACE;;;AAMR;EACE;;;AAGF;EACE;;;AAGF;EACE;EAEA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAIA;EACE;;;AAGJ;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;EACE;;AAEA;EACE;;;AAKN;EACE;;;AAGF;EACE;EACA;;;AAKA;EACE;;;AAOF;EACE;;;AAKJ;EAEE;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAOE;EACE,OAvOe;EAwOf;EACA;EACA;;;AAKN;EACE;;;AAKA;EACE,OAtPiB;EAuPjB;EAEA;;AAGF;EAEE;;;AAKJ;EACE;EACA;;;AAGF;EACE,eApQsB;;;AAuQxB;EACE;EAEA,QA3QkC;EA6QlC;;;AAIF;EACE,kBAtRmB;;;AAyRrB;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,OAxSqB;EAySrB;EACA;;;AAGF;EACE,OA7SmB;EA8SnB,cA/SqB;;;AAkTvB;EACE,kBAnTqB;;;AAsTvB;EACE,kBAtTmB;;;AAyTrB;EACE;;;AAQA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAKA;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAGF;EAEE;IACE;IACA;IAEA;IACA,QA9YoB;IA+YpB,aA/YoB;IAiZpB;IACA;IACA;IACA;IACA;;EAEA;IACE,QAxZkB;IAyZlB,aAzZkB;IA0ZlB;IACA;;EACA;IACE,OAlaa;IAmab;;EAIJ;IACE,QAnakB;IAoalB,aApakB;IAqalB;IACA;;EAGF;IACE","file":"app.css"} \ No newline at end of file diff --git a/css/app.scss b/css/app.scss index c0fc862..b5212cc 100644 --- a/css/app.scss +++ b/css/app.scss @@ -19,7 +19,7 @@ $igv-app-footer-height: 48px; $igv-app-logo-container-width: 20%; $igv-header-height: 48px; -@import "igv-widgets-alert-dialog"; +@import "igv-ui-alert-dialog"; @import "file-load-widget"; html, body { diff --git a/index.html b/index.html index e876efb..5aea087 100644 --- a/index.html +++ b/index.html @@ -40,9 +40,9 @@ - + - + diff --git a/js/app.js b/js/app.js index f156255..acc2ed8 100644 --- a/js/app.js +++ b/js/app.js @@ -63,7 +63,10 @@ let pngSaveImageModal async function main(container, config) { - AlertSingleton.init(container) + const parent = document.getElementById('igv-main') + AlertSingleton.init(parent) + + AlertSingleton.present(`igv webapp is good to go`) $('#igv-app-version').text(`IGV-Web app version ${version()}`) $('#igv-igvjs-version').text(`igv.js version ${igv.version()}`) @@ -205,6 +208,7 @@ async function main(container, config) { if (browser) { Globals.browser = browser await initializationHelper(browser, container, config) + browser.alert.present(`browser ${ browser.guid } is good to go`) } } diff --git a/js/widgets/alertDialog.js b/js/widgets/alertDialog.js index 0662676..683df17 100644 --- a/js/widgets/alertDialog.js +++ b/js/widgets/alertDialog.js @@ -1,76 +1,85 @@ -import * as DOMUtils from "./utils/dom-utils.js" -import makeDraggable from "./utils/draggable.js" +// import DOMPurify from "../node_modules/dompurify/dist/purify.es.mjs" +import makeDraggable from './utils/draggable.js' const httpMessages = { "401": "Access unauthorized", "403": "Access forbidden", "404": "Not found" - } - + }; class AlertDialog { - constructor(parent) { + /** + * Initialize a new alert dialog + * @param parent + * @param alertProps - Optional - properties such as scroll to error + */ + constructor(parent, alertProps) { + this.alertProps = Object.assign({ + /** When an alert is presented - focus occur */ + shouldFocus: true, + /** When focus occur - scroll into that element in the view */ + preventScroll: false + }, alertProps); // container - this.container = DOMUtils.div({class: "igv-widgets-alert-dialog-container"}) - parent.appendChild(this.container) - this.container.setAttribute('tabIndex', '-1') + this.container = document.createElement('div'); + this.container.className = "igv-ui-alert-dialog-container"; + parent.appendChild(this.container); + this.container.setAttribute('tabIndex', '-1'); // header - const header = DOMUtils.div() - this.container.appendChild(header) + const header = document.createElement('div'); + this.container.appendChild(header); - this.errorHeadline = DOMUtils.div() - header.appendChild(this.errorHeadline) - this.errorHeadline.textContent = '' + this.errorHeadline = document.createElement('div'); + header.appendChild(this.errorHeadline); + this.errorHeadline.textContent = ''; // body container - let bodyContainer = DOMUtils.div({id: 'igv-widgets-alert-dialog-body'}) - this.container.appendChild(bodyContainer) + let bodyContainer = document.createElement('div'); + bodyContainer.className = 'igv-ui-alert-dialog-body'; + this.container.appendChild(bodyContainer); // body copy - this.body = DOMUtils.div({id: 'igv-widgets-alert-dialog-body-copy'}) - bodyContainer.appendChild(this.body) + this.body = document.createElement('div'); + this.body.className = 'igv-ui-alert-dialog-body-copy'; + bodyContainer.appendChild(this.body); // ok container - let ok_container = DOMUtils.div() - this.container.appendChild(ok_container) + let ok_container = document.createElement('div'); + this.container.appendChild(ok_container); // ok - this.ok = DOMUtils.div() - ok_container.appendChild(this.ok) - this.ok.textContent = 'OK' + this.ok = document.createElement('div'); + ok_container.appendChild(this.ok); + this.ok.textContent = 'OK'; const okHandler = () => { if (typeof this.callback === 'function') { - this.callback("OK") - this.callback = undefined + this.callback("OK"); + this.callback = undefined; } - this.body.innerHTML = '' - DOMUtils.hide(this.container) + this.body.innerHTML = ''; + this.container.style.display = 'none' } this.ok.addEventListener('click', event => { - event.stopPropagation() - okHandler() - }) + }); this.container.addEventListener('keypress', event => { - event.stopPropagation() - if ('Enter' === event.key) { okHandler() } - }) + }); - makeDraggable(this.container, header) + makeDraggable(this.container, header); - DOMUtils.hide(this.container) + this.container.style.display = 'none' } present(alert, callback) { @@ -79,14 +88,18 @@ class AlertDialog { let string = alert.message || alert if (httpMessages.hasOwnProperty(string)) { - string = httpMessages[string] + string = httpMessages[string]; } + // this.body.innerHTML = DOMPurify.sanitize(string) this.body.innerHTML = string + this.callback = callback - DOMUtils.show(this.container, "flex") - this.container.focus() + this.container.style.display = 'flex' + if (this.alertProps.shouldFocus) { + this.container.focus({ preventScroll: this.alertProps.preventScroll }) + } } } -export default AlertDialog +export default AlertDialog; diff --git a/js/widgets/alertSingleton.js b/js/widgets/alertSingleton.js index 23dd242..5178748 100644 --- a/js/widgets/alertSingleton.js +++ b/js/widgets/alertSingleton.js @@ -1,4 +1,4 @@ -import AlertDialog from './alertDialog.js' +import igv from '../../node_modules/igv/dist/igv.esm.js' class AlertSingleton { constructor(root) { @@ -9,7 +9,7 @@ class AlertSingleton { } init(root) { - this.alertDialog = new AlertDialog(root) + this.alertDialog = new igv.AlertDialog(root) } present(alert, callback) { diff --git a/package.json b/package.json index ea9bbd0..1ff77aa 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "data-modal": "github:igvteam/data-modal#v1.6.1", "igv-utils": "github:igvteam/igv-utils#v1.5.8", "google-utils": "github:igvteam/google-utils#v1.0.2", + "dompurify": "^3.0.9", "rollup": "^2.28.1", "rollup-plugin-copy": "^3.3.0", "rollup-plugin-strip": "^1.2.2",