From 358008fca7204b8236a85ccd3d47a19348372366 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Wed, 5 Jul 2017 15:56:00 +0200 Subject: [PATCH 1/9] alert is called in the resize function - so this is not to pulled into the master - its just to demonstrate the alert --- src/app.js | 1 + src/app/modal-dialog-alert.js | 51 +++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 src/app/modal-dialog-alert.js diff --git a/src/app.js b/src/app.js index e3e48f78fc..e4034f42f3 100644 --- a/src/app.js +++ b/src/app.js @@ -31,6 +31,7 @@ var RighthandPanel = require('./app/righthand-panel') var examples = require('./app/example-contracts') // var Txlistener = require('./app/txListener') + var css = csjs` html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } diff --git a/src/app/modal-dialog-alert.js b/src/app/modal-dialog-alert.js new file mode 100644 index 0000000000..9b7144b5ab --- /dev/null +++ b/src/app/modal-dialog-alert.js @@ -0,0 +1,51 @@ +/* global FileReader, confirm, alert */ +var yo = require('yo-yo') +var csjs = require('csjs-inject') + +module.exports = (title, content, ok, cancel) => { + var okDiv = document.getElementById('modal-footer-ok') + var cancelDiv = document.getElementById('modal-footer-cancel') + okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : '' + + var modal = document.querySelector('.modal-body') + var modaltitle = document.querySelector('.modal-header h2') + + modaltitle.innerHTML = ' - ' + if (title) modaltitle.innerHTML = title + + modal.innerHTML = '' + //if (content) modal.appendChild(content) + if (content) modal.innerHTML = content + + var container = document.querySelector('.modal') + container.style.display = container.style.display === 'block' ? hide() : show() + + function okListenner () { + hide() + if (ok && ok.fn) ok.fn() + removeEventListener() + } + + function cancelListenner () { + hide() + if (cancel && cancel.fn) cancel.fn() + removeEventListener() + } + + function hide () { + container.style.display = 'none' + } + + function show () { + container.style.display = 'block' + } + + function removeEventListener () { + okDiv.removeEventListener('click', okListenner) + cancelDiv.removeEventListener('click', cancelListenner) + } + + okDiv.addEventListener('click', okListenner) + cancelDiv.addEventListener('click', cancelListenner) +} \ No newline at end of file From b82224a45215dc0d01961b98c82b77d756bad6d7 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Thu, 6 Jul 2017 17:06:27 +0200 Subject: [PATCH 2/9] alert before alexifying it --- src/app/modal-dialog-alert.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modal-dialog-alert.js b/src/app/modal-dialog-alert.js index 9b7144b5ab..9ec5b2afe8 100644 --- a/src/app/modal-dialog-alert.js +++ b/src/app/modal-dialog-alert.js @@ -15,7 +15,7 @@ module.exports = (title, content, ok, cancel) => { if (title) modaltitle.innerHTML = title modal.innerHTML = '' - //if (content) modal.appendChild(content) + // if (content) modal.appendChild(content) if (content) modal.innerHTML = content var container = document.querySelector('.modal') From cdc4c233b90247e62b31d8b381231977249710c8 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Fri, 21 Jul 2017 15:27:14 +0200 Subject: [PATCH 3/9] updating alert with yo & csjs --- src/app/modal-dialog-alert.js | 122 ++++++++++++++++++++++++++++------ 1 file changed, 103 insertions(+), 19 deletions(-) diff --git a/src/app/modal-dialog-alert.js b/src/app/modal-dialog-alert.js index 9ec5b2afe8..dd38caeac4 100644 --- a/src/app/modal-dialog-alert.js +++ b/src/app/modal-dialog-alert.js @@ -1,35 +1,104 @@ -/* global FileReader, confirm, alert */ var yo = require('yo-yo') var csjs = require('csjs-inject') -module.exports = (title, content, ok, cancel) => { +var css = csjs` + .modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1000; /* Sit on top of everything including the dragbar */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + } + .modalHeader { + padding: 2px 16px; + background-color: orange; + color: white; + } + .modalBody { + padding: 1.5em; + line-height: 1.5em; + } + .modalFooter { + padding: 10px 30px; + background-color: orange; + color: white; + text-align: right; + font-weight: 700; + cursor: pointer; + } + .modalContent { + position: relative; + background-color: #fefefe; + margin: auto; + padding: 0; + line-height: 18px; + font-size: 13px; + border: 1px solid #888; + width: 50%; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.4s; + animation-name: animatetop; + animation-duration: 0.4s + } + .modalFooterOk { + cursor: pointer; + } + @-webkit-keyframes animatetop { + from {top: -300px; opacity: 0} + to {top: 0; opacity: 1} + } + @keyframes animatetop { + from {top: -300px; opacity: 0} + to {top: 0; opacity: 1} + } +` + +module.exports = (content, title, ok, cancel) => { + var containerOrig = document.querySelector('.modal') + var container + if (!containerOrig) { + container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + } else { + var parent = document.querySelector('body') + var child = document.getElementById('modaldialog') + parent.removeChild(child) + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + var okDiv = document.getElementById('modal-footer-ok') - var cancelDiv = document.getElementById('modal-footer-cancel') okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' - cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : '' - var modal = document.querySelector('.modal-body') - var modaltitle = document.querySelector('.modal-header h2') + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h2`) + var modalFooter = document.querySelector(`.${css.modalFooter}`) - modaltitle.innerHTML = ' - ' - if (title) modaltitle.innerHTML = title + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title modal.innerHTML = '' - // if (content) modal.appendChild(content) if (content) modal.innerHTML = content - var container = document.querySelector('.modal') container.style.display = container.style.display === 'block' ? hide() : show() - function okListenner () { + function clickModalFooterListener (event) { hide() - if (ok && ok.fn) ok.fn() removeEventListener() } - function cancelListenner () { + function okListener () { hide() - if (cancel && cancel.fn) cancel.fn() + // if (ok && ok.fn) ok.fn() - what is ok.fn doing? removeEventListener() } @@ -42,10 +111,25 @@ module.exports = (title, content, ok, cancel) => { } function removeEventListener () { - okDiv.removeEventListener('click', okListenner) - cancelDiv.removeEventListener('click', cancelListenner) + okDiv.removeEventListener('click', okListener) + modal.removeEventListener('click', clickModalFooterListener) } - okDiv.addEventListener('click', okListenner) - cancelDiv.addEventListener('click', cancelListenner) -} \ No newline at end of file + okDiv.addEventListener('click', okListener) + modalFooter.addEventListener('click', clickModalFooterListener) +} + +function html () { + return yo`` +} From 3f259a10e4e5705eeb81f05dab15d8768f0d76f3 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 24 Jul 2017 18:00:32 +0200 Subject: [PATCH 4/9] updating modaldialog.js, adding modal-dialog-custom.js - but it has a problem where the cancel inside of modal-dialog-custom.js is loading and removing the cancel button. --- src/app/modal-dialog-custom.js | 9 +++ src/app/modaldialog.js | 130 +++++++++++++++++++++++++++++---- 2 files changed, 126 insertions(+), 13 deletions(-) create mode 100644 src/app/modal-dialog-custom.js diff --git a/src/app/modal-dialog-custom.js b/src/app/modal-dialog-custom.js new file mode 100644 index 0000000000..815c3e01c2 --- /dev/null +++ b/src/app/modal-dialog-custom.js @@ -0,0 +1,9 @@ +var modal = require('./modaldialog.js') +var yo = require('yo-yo') +module.exports = { + alert: function (text) { + modal('', yo`
${text}
`, null, null) + var cancel = document.getElementById('modal-footer-cancel') + cancel.style.display = 'none' + } +} diff --git a/src/app/modaldialog.js b/src/app/modaldialog.js index 0ec9182371..790fd59584 100644 --- a/src/app/modaldialog.js +++ b/src/app/modaldialog.js @@ -1,28 +1,114 @@ +var yo = require('yo-yo') +var csjs = require('csjs-inject') + +var css = csjs` + .modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1000; /* Sit on top of everything including the dragbar */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + } + .modalHeader { + padding: 2px 16px; + background-color: orange; + color: white; + } + .modalBody { + padding: 1.5em; + line-height: 1.5em; + } + .modalFooter { + padding: 10px 30px; + background-color: orange; + color: white; + text-align: right; + font-weight: 700; + cursor: pointer; + } + .modalContent { + position: relative; + background-color: #fefefe; + margin: auto; + padding: 0; + line-height: 18px; + font-size: 13px; + border: 1px solid #888; + width: 50%; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.4s; + animation-name: animatetop; + animation-duration: 0.4s + } + .modalFooterOk { + cursor: pointer; + } + .modalFooterCancel { + cursor: pointer; + } + @-webkit-keyframes animatetop { + from {top: -300px; opacity: 0} + to {top: 0; opacity: 1} + } + @keyframes animatetop { + from {top: -300px; opacity: 0} + to {top: 0; opacity: 1} + } +` + module.exports = (title, content, ok, cancel) => { + var containerOrig = document.querySelector('.modal') + var container + if (!containerOrig) { + container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + } else { + var parent = document.querySelector('body') + var child = document.getElementById('modaldialog') + parent.removeChild(child) + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + var okDiv = document.getElementById('modal-footer-ok') - var cancelDiv = document.getElementById('modal-footer-cancel') okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + + var cancelDiv = document.getElementById('modal-footer-cancel') cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' - var modal = document.querySelector('.modal-body') - var modaltitle = document.querySelector('.modal-header h2') + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h2`) + var modalFooter = document.querySelector(`.${css.modalFooter}`) - modaltitle.innerHTML = ' - ' - if (title) modaltitle.innerHTML = title + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title modal.innerHTML = '' if (content) modal.appendChild(content) - var container = document.querySelector('.modal') container.style.display = container.style.display === 'block' ? hide() : show() - function okListenner () { + function clickModalFooterListener (event) { hide() - if (ok && ok.fn) ok.fn() removeEventListener() } - function cancelListenner () { + function okListener () { + hide() + // if (ok && ok.fn) ok.fn() - what is ok.fn doing? + removeEventListener() + } + + function cancelListener () { hide() if (cancel && cancel.fn) cancel.fn() removeEventListener() @@ -37,10 +123,28 @@ module.exports = (title, content, ok, cancel) => { } function removeEventListener () { - okDiv.removeEventListener('click', okListenner) - cancelDiv.removeEventListener('click', cancelListenner) + okDiv.removeEventListener('click', okListener) + cancelDiv.removeEventListener('click', cancelListener) + modal.removeEventListener('click', clickModalFooterListener) } - okDiv.addEventListener('click', okListenner) - cancelDiv.addEventListener('click', cancelListenner) + okDiv.addEventListener('click', okListener) + cancelDiv.addEventListener('click', cancelListener) + modalFooter.addEventListener('click', clickModalFooterListener) +} + +function html () { + return yo` + ` } From 00b97a7b1726ec54093c37146977e5c507543b39 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 24 Jul 2017 18:17:16 +0200 Subject: [PATCH 5/9] updating the previous commit with run build --- src/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index e4034f42f3..ab570236d7 100644 --- a/src/app.js +++ b/src/app.js @@ -29,9 +29,9 @@ var FilePanel = require('./app/file-panel') var EditorPanel = require('./app/editor-panel') var RighthandPanel = require('./app/righthand-panel') var examples = require('./app/example-contracts') +var modalDialogCustom = require('./app/modal-dialog-custom') // var Txlistener = require('./app/txListener') - var css = csjs` html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } From 1a260c518c0d0db58963891def9168aaf03c6e2e Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Tue, 25 Jul 2017 17:39:59 +0200 Subject: [PATCH 6/9] updated for alert --- index.html | 13 ------------- src/app.js | 10 +++++----- src/app/file-explorer.js | 11 ++++++----- src/app/file-panel.js | 5 +++-- src/app/modal-dialog-custom.js | 4 +--- src/app/modaldialog.js | 9 +-------- 6 files changed, 16 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 1393633d3a..88af3241e9 100644 --- a/index.html +++ b/index.html @@ -38,18 +38,5 @@ - - diff --git a/src/app.js b/src/app.js index ab570236d7..0084266771 100644 --- a/src/app.js +++ b/src/app.js @@ -1,4 +1,4 @@ -/* global alert, confirm, Option, Worker, chrome */ +/* global confirm, prompt, Option, Worker, chrome */ 'use strict' var async = require('async') @@ -242,7 +242,7 @@ function run () { success: function (response) { if (response.data) { if (!response.data.files) { - alert('Gist load error: ' + response.data.message) + modalDialogCustom.alert('Gist load error: ' + response.data.message) return } loadFiles(response.data.files) @@ -254,7 +254,7 @@ function run () { // insert ballot contract if there are no files available if (!loadingFromGist && Object.keys(filesProviders['browser'].list()).length === 0) { if (!filesProviders['browser'].set(examples.ballot.name, examples.ballot.content)) { - alert('Failed to store example contract in browser. Remix will not work properly. Please ensure Remix has access to LocalStorage. Safari in Private mode is known not to work.') + modalDialogCustom.alert('Failed to store example contract in browser. Remix will not work properly. Please ensure Remix has access to LocalStorage. Safari in Private mode is known not to work.') } } @@ -612,9 +612,9 @@ function run () { udapp.event.register('publishContract', this, function (contract) { publishOnSwarm(contract, function (err) { if (err) { - alert('Failed to publish metadata: ' + err) + modalDialogCustom.alert('Failed to publish metadata: ' + err) } else { - alert('Metadata published successfully') + modalDialogCustom.alert('Metadata published successfully') } }) }) diff --git a/src/app/file-explorer.js b/src/app/file-explorer.js index 930ce00f46..c59e903fbb 100755 --- a/src/app/file-explorer.js +++ b/src/app/file-explorer.js @@ -3,6 +3,7 @@ var yo = require('yo-yo') var csjs = require('csjs-inject') var Treeview = require('ethereum-remix').ui.TreeView var modalDialog = require('./modaldialog') +var modalDialogCustom = require('./modal-dialog-custom') var EventManager = require('ethereum-remix').lib.EventManager @@ -133,7 +134,7 @@ function fileExplorer (appAPI, files) { var fileReader = new FileReader() fileReader.onload = function (event) { var success = files.set(name, event.target.result) - if (!success) alert('Failed to create file ' + name) + if (!success) modalDialogCustom.alert('Failed to create file ' + name) else events.trigger('focus', [name]) } fileReader.readAsText(file) @@ -219,12 +220,12 @@ function fileExplorer (appAPI, files) { newPath[newPath.length - 1] = label.innerText newPath = newPath.join('/') if (label.innerText.match(/(\/|:|\*|\?|"|<|>|\\|\||')/) !== null) { - alert('special characters are not allowsed') + modalDialogCustom.alert('special characters are not allowsed') label.innerText = textUnderEdit } else if (!files.exists(newPath)) { files.rename(label.dataset.path, newPath, isFolder) } else { - alert('File already exists.') + modalDialogCustom.alert('File already exists.') label.innerText = textUnderEdit } } else label.innerText = textUnderEdit @@ -253,7 +254,7 @@ function fileExplorer (appAPI, files) { } } if (err) { - alert(`couldn't rename - ${err}`) + modalDialogCustom.alert(`could not rename - ${err}`) label.innerText = textUnderEdit } else { textUnderEdit = label.innerText @@ -305,7 +306,7 @@ function fileExplorer (appAPI, files) { } function fileRenamedError (error) { - alert(error) + modalDialogCustom.alert(error) } function fileAdded (filepath) { diff --git a/src/app/file-panel.js b/src/app/file-panel.js index 316441d37e..2728929ecb 100644 --- a/src/app/file-panel.js +++ b/src/app/file-panel.js @@ -1,10 +1,11 @@ -/* global alert */ + var csjs = require('csjs-inject') var yo = require('yo-yo') var EventManager = require('ethereum-remix').lib.EventManager var FileExplorer = require('./file-explorer') var modalDialog = require('./modaldialog') +var modalDialogCustom = require('./modal-dialog-custom') module.exports = filepanel @@ -214,7 +215,7 @@ function filepanel (appAPI, filesProvider) { function createNewFile () { var newName = filesProvider['browser'].type + '/' + appAPI.createName('Untitled.sol') if (!filesProvider['browser'].set(newName, '')) { - alert('Failed to create file ' + newName) + modalDialogCustom.alert('Failed to create file ' + newName) } else { appAPI.switchToFile(newName) } diff --git a/src/app/modal-dialog-custom.js b/src/app/modal-dialog-custom.js index 815c3e01c2..4e2587b67f 100644 --- a/src/app/modal-dialog-custom.js +++ b/src/app/modal-dialog-custom.js @@ -2,8 +2,6 @@ var modal = require('./modaldialog.js') var yo = require('yo-yo') module.exports = { alert: function (text) { - modal('', yo`
${text}
`, null, null) - var cancel = document.getElementById('modal-footer-cancel') - cancel.style.display = 'none' + modal('', yo`
${text}
`, null, {label:null}) } } diff --git a/src/app/modaldialog.js b/src/app/modaldialog.js index 790fd59584..0bb2042915 100644 --- a/src/app/modaldialog.js +++ b/src/app/modaldialog.js @@ -97,14 +97,9 @@ module.exports = (title, content, ok, cancel) => { container.style.display = container.style.display === 'block' ? hide() : show() - function clickModalFooterListener (event) { - hide() - removeEventListener() - } - function okListener () { hide() - // if (ok && ok.fn) ok.fn() - what is ok.fn doing? + if (ok && ok.fn) ok.fn() removeEventListener() } @@ -125,12 +120,10 @@ module.exports = (title, content, ok, cancel) => { function removeEventListener () { okDiv.removeEventListener('click', okListener) cancelDiv.removeEventListener('click', cancelListener) - modal.removeEventListener('click', clickModalFooterListener) } okDiv.addEventListener('click', okListener) cancelDiv.addEventListener('click', cancelListener) - modalFooter.addEventListener('click', clickModalFooterListener) } function html () { From 070a0d4110d0e600da8c1ab41a9c0c57f4159ba3 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Tue, 25 Jul 2017 17:53:25 +0200 Subject: [PATCH 7/9] update for errors --- src/app/file-explorer.js | 2 +- src/app/modal-dialog-alert.js | 135 --------------------------------- src/app/modal-dialog-custom.js | 2 +- src/app/modaldialog.js | 1 - 4 files changed, 2 insertions(+), 138 deletions(-) delete mode 100644 src/app/modal-dialog-alert.js diff --git a/src/app/file-explorer.js b/src/app/file-explorer.js index c59e903fbb..d660fb5bc4 100755 --- a/src/app/file-explorer.js +++ b/src/app/file-explorer.js @@ -1,4 +1,4 @@ -/* global FileReader, confirm, alert */ +/* global FileReader, confirm */ var yo = require('yo-yo') var csjs = require('csjs-inject') var Treeview = require('ethereum-remix').ui.TreeView diff --git a/src/app/modal-dialog-alert.js b/src/app/modal-dialog-alert.js deleted file mode 100644 index dd38caeac4..0000000000 --- a/src/app/modal-dialog-alert.js +++ /dev/null @@ -1,135 +0,0 @@ -var yo = require('yo-yo') -var csjs = require('csjs-inject') - -var css = csjs` - .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1000; /* Sit on top of everything including the dragbar */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ - } - .modalHeader { - padding: 2px 16px; - background-color: orange; - color: white; - } - .modalBody { - padding: 1.5em; - line-height: 1.5em; - } - .modalFooter { - padding: 10px 30px; - background-color: orange; - color: white; - text-align: right; - font-weight: 700; - cursor: pointer; - } - .modalContent { - position: relative; - background-color: #fefefe; - margin: auto; - padding: 0; - line-height: 18px; - font-size: 13px; - border: 1px solid #888; - width: 50%; - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); - -webkit-animation-name: animatetop; - -webkit-animation-duration: 0.4s; - animation-name: animatetop; - animation-duration: 0.4s - } - .modalFooterOk { - cursor: pointer; - } - @-webkit-keyframes animatetop { - from {top: -300px; opacity: 0} - to {top: 0; opacity: 1} - } - @keyframes animatetop { - from {top: -300px; opacity: 0} - to {top: 0; opacity: 1} - } -` - -module.exports = (content, title, ok, cancel) => { - var containerOrig = document.querySelector('.modal') - var container - if (!containerOrig) { - container = document.querySelector(`.${css.modal}`) - if (!container) { - document.querySelector('body').appendChild(html()) - container = document.querySelector(`.${css.modal}`) - } - } else { - var parent = document.querySelector('body') - var child = document.getElementById('modaldialog') - parent.removeChild(child) - document.querySelector('body').appendChild(html()) - container = document.querySelector(`.${css.modal}`) - } - - var okDiv = document.getElementById('modal-footer-ok') - okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' - - var modal = document.querySelector(`.${css.modalBody}`) - var modalTitle = document.querySelector(`.${css.modalHeader} h2`) - var modalFooter = document.querySelector(`.${css.modalFooter}`) - - modalTitle.innerHTML = '' - if (title) modalTitle.innerHTML = title - - modal.innerHTML = '' - if (content) modal.innerHTML = content - - container.style.display = container.style.display === 'block' ? hide() : show() - - function clickModalFooterListener (event) { - hide() - removeEventListener() - } - - function okListener () { - hide() - // if (ok && ok.fn) ok.fn() - what is ok.fn doing? - removeEventListener() - } - - function hide () { - container.style.display = 'none' - } - - function show () { - container.style.display = 'block' - } - - function removeEventListener () { - okDiv.removeEventListener('click', okListener) - modal.removeEventListener('click', clickModalFooterListener) - } - - okDiv.addEventListener('click', okListener) - modalFooter.addEventListener('click', clickModalFooterListener) -} - -function html () { - return yo`` -} diff --git a/src/app/modal-dialog-custom.js b/src/app/modal-dialog-custom.js index 4e2587b67f..aad4586a85 100644 --- a/src/app/modal-dialog-custom.js +++ b/src/app/modal-dialog-custom.js @@ -2,6 +2,6 @@ var modal = require('./modaldialog.js') var yo = require('yo-yo') module.exports = { alert: function (text) { - modal('', yo`
${text}
`, null, {label:null}) + modal('', yo`
${text}
`, null, { label: null }) } } diff --git a/src/app/modaldialog.js b/src/app/modaldialog.js index 0bb2042915..2adcec66f9 100644 --- a/src/app/modaldialog.js +++ b/src/app/modaldialog.js @@ -87,7 +87,6 @@ module.exports = (title, content, ok, cancel) => { var modal = document.querySelector(`.${css.modalBody}`) var modalTitle = document.querySelector(`.${css.modalHeader} h2`) - var modalFooter = document.querySelector(`.${css.modalFooter}`) modalTitle.innerHTML = '' if (title) modalTitle.innerHTML = title From 1366f359c96cb43a688cd9e01b2f89032c33f38d Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 2 Aug 2017 15:35:03 +0200 Subject: [PATCH 8/9] fix gist publish alert --- src/app.js | 2 +- src/app/files-tab.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app.js b/src/app.js index 0084266771..5063808636 100644 --- a/src/app.js +++ b/src/app.js @@ -1,4 +1,4 @@ -/* global confirm, prompt, Option, Worker, chrome */ +/* global confirm, Option, Worker, chrome */ 'use strict' var async = require('async') diff --git a/src/app/files-tab.js b/src/app/files-tab.js index f23befcc0a..2b0c993f19 100644 --- a/src/app/files-tab.js +++ b/src/app/files-tab.js @@ -1,6 +1,7 @@ -/* global alert, confirm, prompt */ +/* global confirm, prompt */ var yo = require('yo-yo') var $ = require('jquery') +var modalDialogCustom = require('./modal-dialog-custom') var QueryParams = require('./query-params') var queryParams = new QueryParams() @@ -70,7 +71,7 @@ function filesTab (container, appAPI, events, opts) { } }).fail(function (xhr, text, err) { console.log('fail', text) - alert('Failed to create gist: ' + (err || 'Unknown transport error')) + modalDialogCustom.alert('Failed to create gist: ' + (err || 'Unknown transport error')) }) } }) From bda92411a9956f123b09be8a64321af2420564f9 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 3 Aug 2017 10:05:59 +0200 Subject: [PATCH 9/9] just add the modal to body if not already present --- src/app/modaldialog.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/app/modaldialog.js b/src/app/modaldialog.js index 2adcec66f9..5048e8b9e7 100644 --- a/src/app/modaldialog.js +++ b/src/app/modaldialog.js @@ -63,18 +63,8 @@ var css = csjs` ` module.exports = (title, content, ok, cancel) => { - var containerOrig = document.querySelector('.modal') - var container - if (!containerOrig) { - container = document.querySelector(`.${css.modal}`) - if (!container) { - document.querySelector('body').appendChild(html()) - container = document.querySelector(`.${css.modal}`) - } - } else { - var parent = document.querySelector('body') - var child = document.getElementById('modaldialog') - parent.removeChild(child) + var container = document.querySelector(`.${css.modal}`) + if (!container) { document.querySelector('body').appendChild(html()) container = document.querySelector(`.${css.modal}`) }