Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: multiple dialog, drag n' drop, new style #48

Open
wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

feat: multiple dialog, drag n' drop, new style #48

wants to merge 2 commits into from

Conversation

macmessa
Copy link

Adding:

  • Multiple modal dialogs;
  • Drag and drop;
  • Built-in style;
  • Possibility to use a function as interface for showModalDialog (see bellow).
function showMaximizedDialog(url, args) {
  // showModalDialog.interface
  var WindowParams = [
    'dialogLeft:0',
    'dialogTop:0',
    'dialogHeight:' + screen.availHeight + 'px',
    'dialogWidth:' + screen.availWidth + 'px'
  ].join(';');

  return window.showModalDialog(url, args, WindowParams);

@macmessa
feat: multiple dialog, drag n' drop, new style
ce0046b 
Adding:

- Multiple modal dialogs;
- Drag and drop;
- Built-in style;
- Possibility to use a function as interface for showModalDialog (see bellow).

```js
function showMaximizedDialog(url, args) {
  // showModalDialog.interface
  var WindowParams = [
    'dialogLeft:0',
    'dialogTop:0',
    'dialogHeight:' + screen.availHeight + 'px',
    'dialogWidth:' + screen.availWidth + 'px'
  ].join(';');

  return window.showModalDialog(url, args, WindowParams);
```
fix: call showModalDialog inside another function
54c46f2 
Prevent showModalDialog from breaking when used inside another function.

Reference: niutech#41
@DarkSide666
Copy link

DarkSide666 commented Sep 22, 2020 •
edited
Loading

I was waiting for such PR how years and finally found it !!!
Thank you a LOT @macmessa ! This works perfectly.

Please add also this updated demo.html page (and remove demo-modal.html file) which shows how to use it and how nested dialogs work:

<!DOCTYPE html>
<html>
<head>
    <title>showModalDialog polyfill demo</title>
    <script src="showModalDialog.js"></script>
</head>
<body>
    <h1>showModalDialog polyfill demo</h1>
    <form action="">
        <p><input id="x" placeholder="Input number" /></p>
        <p><input id="button1" type="button" value="Show Modal Dialog using yield" /> <span id="result1"></span></p>
        <p><input id="button2" type="button" value="Show Modal Dialog using async/await" /> <span id="result2"></span></p>
        <p><input id="button3" type="button" value="Show Modal Dialog using eval" /> <span id="result3"></span></p>
        <p><input id="bt_close" type="button" value="Close dialog" /></p>
    </form>

    <hr />
    <p>Dialog received arguments: <b><span id="arg"></span></b></p>
    <script>
        x = document.getElementById('arg').innerHTML = window.dialogArguments;
        if (x) {
            window.returnValue = parseFloat(x) * parseFloat(x); // calc x^2 and return result
        }
    </script>


    <script>
        // close most recent dialog
        document.getElementById('bt_close').addEventListener('click', function() {
            window.close();
        });

        //using yield
        document.getElementById('button1').addEventListener('click', function() {
            spawn(function*() {
                var opt = "dialogWidth:500px;dialogHeight:350px";
                var ret = yield window.showModalDialog("demo.html", document.getElementById("x").value, opt);
                document.getElementById('result1').innerHTML = "Returned from modal: <b>" + ret + "</b>";
            });
        });

        //using async/await
        document.getElementById('button2').addEventListener('click', async function() {
            var opt = "dialogWidth:500px;dialogHeight:350px";
            var ret = await window.showModalDialog("demo.html", document.getElementById("x").value, opt);
            document.getElementById('result2').innerHTML = "Returned from modal: <b>" + ret + "</b>";
        });

        //using eval
        document.getElementById('button3').addEventListener('click', function() {
            var opt = "dialogWidth:500px;dialogHeight:350px";
            var ret = window.showModalDialog("demo.html", document.getElementById("x").value, opt);
            document.getElementById('result3').innerHTML = "Returned from modal: <b>" + ret + "</b>";
        });
    </script>
</body>
</html>

@DarkSide666
Copy link

DarkSide666 commented Sep 22, 2020 •
edited
Loading

  • Works perfectly in Chrome.
  • Edge works fine.
  • Internet Explorer 11 - only eval version works because others are not supported

Doesn't work in Firefox at all

@macmessa
Copy link
Author

macmessa commented Sep 26, 2020 •
edited
Loading

  • Works perfectly in Chrome.
  • Edge works fine.
  • Internet Explorer 11 - only eval version works because others are not supported

Doesn't work in Firefox at all

ASAP I'll add the updates you suggested and take a look at this caller issue.

@macmessa macmessa closed this Sep 26, 2020
@macmessa
Copy link
Author

I've accidentally closed the pull request.

@macmessa macmessa reopened this Sep 26, 2020
@DarkSide666
Copy link

DarkSide666 commented Sep 29, 2020 •
edited
Loading

Thanks! You will have to find the way around using deprecated Function.caller.

In a meantime I created my repo which I will use in one of my legacy projects because this repo is quite stale and PRs can sit there not merged for ages :(
I was allowed to drop IE support in project and that way I could drop eval version which requires caller. Here is repo https://github.com/DarkSide666/showModalDialogMulti. Works flawlessly in all browsers except IE.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@macmessa @DarkSide666