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.

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

Allow scroll wheel to bubble if no scrolling happened #1373

Merged
merged 4 commits into from Jun 12, 2019

Conversation

Projects
None yet
1 participant
@cmdcolin
Copy link
Contributor

commented May 29, 2019

This PR addresses a possible long standing need to allow scroll wheel events to bubble

Here is an example page that uses jbrowse in an iframe embedding

<html>
  <head>

  <body>
        <div style="width: 100%; height:100px; background: grey">
        <h1>MyWebSite header</h1>
        <p>Main menu, about, help, etc</p>
        </div>
        <iframe id="jbrowse_iframe" width="100%" height="800px" src="index.html"></iframe>

        <div style="width: 100%; height:200px; background: grey">
        <h1>MyWebSite footer</h1>
    <p>(c) 1999</p>
    </div>
  </body>
</html>

If you look at this page without this PR added, any vertical scrolling inside the jbrowse iframe (or div, if it was embedded as a div) would not work, because jbrowse manually stops it. <Edit: Actually not anywhere in the jbrowse iframe, just in the GenomeView panel>

This PR proposes changing it to only stop it if the vertical scroll did anything in the jbrowse content pane area

CC @garrettjstevens @enuggetry @scottcain

I think that this scenario can enhance usages in embeddings

I would be curious if people could try downloading this snippet of embedding, test it out, and let me know what you think

@cmdcolin

This comment has been minimized.

Copy link
Contributor Author

commented May 29, 2019

@enuggetry It's also pretty easy to add the saving of the variables into the header into this script e.g. https://jbrowse.org/docs/faq.html#how-can-i-get-jbrowse-to-update-the-url-of-a-parent-page-when-jbrowse-is-inside-of-an-iframe

<html>
  <head>

  <body>
        <div style="width: 100%; height:100px; background: grey">
        <h1>MyWebSite header</h1>
        <p>Main menu, about, help, etc</p>
        </div>
        <iframe id="jbrowse_iframe" width="100%" height="800px" src="index.html"></iframe>

        <div style="width: 100%; height:200px; background: grey">
        <h1>MyWebSite footer</h1>
    <p>(c) 1999</p>
    </div>
        <script>
        // note: this script should be below the declaration of the iframe, or otherwise be wrapped in a document.onready

        // https://stackoverflow.com/questions/2090551/parse-query-string-in-javascript
        function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split('&');
                for (var i = 0; i < vars.length; i++) {
                        var pair = vars[i].split('=');
                        if (decodeURIComponent(pair[0]) == variable) {
                                return decodeURIComponent(pair[1]);
                        }
                }
        }
        // subscribe to jbrowse movements inside of the iframe and update parent page url
        var datadir = getQueryVariable('data');
        var iframe = document.getElementById('jbrowse_iframe');
        iframe.addEventListener('load', function() {
                var JBrowse = iframe.contentWindow.JBrowse;
                JBrowse.subscribe( '/jbrowse/v1/n/navigate',  function(obj) {
                        var shareURL = JBrowse.makeCurrentViewURL();
                        var parser = new URL(shareURL);
                        window.history.replaceState( {}, "", parser.search );
                });
        });
        // pass the parameters from the parent page into the iframe
        iframe.src = iframe.src + window.location.search;
        </script>
  </body>
</html>

@cmdcolin

This comment has been minimized.

Copy link
Contributor Author

commented May 29, 2019

something might have happened on upgrading to trusty ubuntu build in travis (which they rolled out via a/b testing) to make this build fail, will see what we can do but it's not relevant to the PR

@cmdcolin cmdcolin force-pushed the scroll_wheel_bubble branch from 886235d to 2a9963e May 30, 2019

@cmdcolin

This comment has been minimized.

Copy link
Contributor Author

commented May 30, 2019

From a usability perspective I am actually curious if this behavior is better or worse...I thought it might be better but maybe it is just weird. Feedback welcome...

@cmdcolin cmdcolin force-pushed the scroll_wheel_bubble branch from 2a9963e to a0461ef Jun 12, 2019

@cmdcolin cmdcolin merged commit e9c2ef8 into dev Jun 12, 2019

0 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build is in progress
Details

@cmdcolin cmdcolin deleted the scroll_wheel_bubble branch Jun 13, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.