Make scrollZoom config option a flaglist - #3422

Merged
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist
Jan 16, 2019
Merged

Make scrollZoom config option a flaglist#3422
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist

Conversation

@etpinard

@etpinardetpinard commented Jan 8, 2019

Copy link
Copy Markdown
Contributor

An attempt at resolving #143 and #2998 as well as a similar issue-less problem for mapbox subplots.

In brief, this PR makes the config option scrollZoom a flaglist -- with flags for all subplots that support zooming via scroll -- instead of a boolean:

  • its default value now becomes gl3d+geo+mapbox (instead of false) as all three of these subplot types have scroll zoom enabled by default.
  • Setting scrollZoom:true enables scroll zoom for all subplots, which is equivalent to scrollZoom:'cartesian+gl3d+geo+mapbox'
  • Setting scrollZoom:false disables scroll zoom on all subplots, which should make a bunch of users 😄

@plotly/plotly_js what do you think?

@etpinardetpinard added this to the 1.44.0 milestone Jan 8, 2019
@etpinard

Copy link
Copy Markdown
ContributorAuthor

... to be merge into #3376 where I made use of the new plot_config option declarations.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Nice solution, I like it!

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@archmoj would you mind taking a look at this one at some point this week?

@archmoj

Copy link
Copy Markdown
Contributor

@etpinard OK. That's interesting. I'll have a look.

@archmoj
archmoj self-requested a review January 14, 2019 15:03

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great arrangement. Thanks @etpinard.
Please find my comments below.

Comment threadsrc/plots/gl3d/camera.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadsrc/plot_api/plot_api.js
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the revision!
💃

@etpinard

Copy link
Copy Markdown
ContributorAuthor

No problem! Thank you for the review!

Comment on lines +234 to +238
scene.glplot.canvas.addEventListener('wheel', function() {
if(gd._context._scrollZoom.gl3d) {
relayoutCallback(scene);
}
}, passiveSupported ? {passive: false} : false);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled scrollZoom in the plot config, but the mouse is still getting captured when scrolling by the canvas. Looks like it's because of the wheel event listener that's being registered here anyway. After I remove the wheel listener on scene element from chrome inspector, scrolling the page no longer gets captured by the canvas.

@etpinard, can we not add the listener at all if scrollzoom is disabled?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zfei thanks for the debugging. This comment is going to get lost here on a merged PR though, can you make a new issue for this? Or better yet a PR, looks like it's probably a pretty easy fix 😎

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alexcjohnson.

I've never touched the Plotly codebase and haven't set up my mind to go through the learning curve yet. 😉

Will just leave it as an issue for now.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@etpinard@alexcjohnson@archmoj@zfei
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Make scrollZoom config option a flaglist - #3422

Merged
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist
Jan 16, 2019
Merged

Make scrollZoom config option a flaglist#3422
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist

Conversation

@etpinard

@etpinardetpinard commented Jan 8, 2019

Copy link
Copy Markdown
Contributor

An attempt at resolving #143 and #2998 as well as a similar issue-less problem for mapbox subplots.

In brief, this PR makes the config option scrollZoom a flaglist -- with flags for all subplots that support zooming via scroll -- instead of a boolean:

  • its default value now becomes gl3d+geo+mapbox (instead of false) as all three of these subplot types have scroll zoom enabled by default.
  • Setting scrollZoom:true enables scroll zoom for all subplots, which is equivalent to scrollZoom:'cartesian+gl3d+geo+mapbox'
  • Setting scrollZoom:false disables scroll zoom on all subplots, which should make a bunch of users 😄

@plotly/plotly_js what do you think?

@etpinardetpinard added this to the 1.44.0 milestone Jan 8, 2019
@etpinard

Copy link
Copy Markdown
ContributorAuthor

... to be merge into #3376 where I made use of the new plot_config option declarations.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Nice solution, I like it!

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@archmoj would you mind taking a look at this one at some point this week?

@archmoj

Copy link
Copy Markdown
Contributor

@etpinard OK. That's interesting. I'll have a look.

@archmoj
archmoj self-requested a review January 14, 2019 15:03

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great arrangement. Thanks @etpinard.
Please find my comments below.

Comment threadsrc/plots/gl3d/camera.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadsrc/plot_api/plot_api.js
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the revision!
💃

@etpinard

Copy link
Copy Markdown
ContributorAuthor

No problem! Thank you for the review!

Comment on lines +234 to +238
scene.glplot.canvas.addEventListener('wheel', function() {
if(gd._context._scrollZoom.gl3d) {
relayoutCallback(scene);
}
}, passiveSupported ? {passive: false} : false);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled scrollZoom in the plot config, but the mouse is still getting captured when scrolling by the canvas. Looks like it's because of the wheel event listener that's being registered here anyway. After I remove the wheel listener on scene element from chrome inspector, scrolling the page no longer gets captured by the canvas.

@etpinard, can we not add the listener at all if scrollzoom is disabled?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zfei thanks for the debugging. This comment is going to get lost here on a merged PR though, can you make a new issue for this? Or better yet a PR, looks like it's probably a pretty easy fix 😎

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alexcjohnson.

I've never touched the Plotly codebase and haven't set up my mind to go through the learning curve yet. 😉

Will just leave it as an issue for now.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@etpinard@alexcjohnson@archmoj@zfei
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Make scrollZoom config option a flaglist - #3422

Merged
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist
Jan 16, 2019
Merged

Make scrollZoom config option a flaglist#3422
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist

Conversation

@etpinard

@etpinardetpinard commented Jan 8, 2019

Copy link
Copy Markdown
Contributor

An attempt at resolving #143 and #2998 as well as a similar issue-less problem for mapbox subplots.

In brief, this PR makes the config option scrollZoom a flaglist -- with flags for all subplots that support zooming via scroll -- instead of a boolean:

  • its default value now becomes gl3d+geo+mapbox (instead of false) as all three of these subplot types have scroll zoom enabled by default.
  • Setting scrollZoom:true enables scroll zoom for all subplots, which is equivalent to scrollZoom:'cartesian+gl3d+geo+mapbox'
  • Setting scrollZoom:false disables scroll zoom on all subplots, which should make a bunch of users 😄

@plotly/plotly_js what do you think?

@etpinardetpinard added this to the 1.44.0 milestone Jan 8, 2019
@etpinard

Copy link
Copy Markdown
ContributorAuthor

... to be merge into #3376 where I made use of the new plot_config option declarations.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Nice solution, I like it!

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@archmoj would you mind taking a look at this one at some point this week?

@archmoj

Copy link
Copy Markdown
Contributor

@etpinard OK. That's interesting. I'll have a look.

@archmoj
archmoj self-requested a review January 14, 2019 15:03

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great arrangement. Thanks @etpinard.
Please find my comments below.

Comment threadsrc/plots/gl3d/camera.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadsrc/plot_api/plot_api.js
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the revision!
💃

@etpinard

Copy link
Copy Markdown
ContributorAuthor

No problem! Thank you for the review!

Comment on lines +234 to +238
scene.glplot.canvas.addEventListener('wheel', function() {
if(gd._context._scrollZoom.gl3d) {
relayoutCallback(scene);
}
}, passiveSupported ? {passive: false} : false);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled scrollZoom in the plot config, but the mouse is still getting captured when scrolling by the canvas. Looks like it's because of the wheel event listener that's being registered here anyway. After I remove the wheel listener on scene element from chrome inspector, scrolling the page no longer gets captured by the canvas.

@etpinard, can we not add the listener at all if scrollzoom is disabled?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zfei thanks for the debugging. This comment is going to get lost here on a merged PR though, can you make a new issue for this? Or better yet a PR, looks like it's probably a pretty easy fix 😎

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alexcjohnson.

I've never touched the Plotly codebase and haven't set up my mind to go through the learning curve yet. 😉

Will just leave it as an issue for now.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@etpinard@alexcjohnson@archmoj@zfei
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Make scrollZoom config option a flaglist - #3422

Merged
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist
Jan 16, 2019
Merged

Make scrollZoom config option a flaglist#3422
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist

Conversation

@etpinard

@etpinardetpinard commented Jan 8, 2019

Copy link
Copy Markdown
Contributor

An attempt at resolving #143 and #2998 as well as a similar issue-less problem for mapbox subplots.

In brief, this PR makes the config option scrollZoom a flaglist -- with flags for all subplots that support zooming via scroll -- instead of a boolean:

  • its default value now becomes gl3d+geo+mapbox (instead of false) as all three of these subplot types have scroll zoom enabled by default.
  • Setting scrollZoom:true enables scroll zoom for all subplots, which is equivalent to scrollZoom:'cartesian+gl3d+geo+mapbox'
  • Setting scrollZoom:false disables scroll zoom on all subplots, which should make a bunch of users 😄

@plotly/plotly_js what do you think?

@etpinardetpinard added this to the 1.44.0 milestone Jan 8, 2019
@etpinard

Copy link
Copy Markdown
ContributorAuthor

... to be merge into #3376 where I made use of the new plot_config option declarations.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Nice solution, I like it!

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@archmoj would you mind taking a look at this one at some point this week?

@archmoj

Copy link
Copy Markdown
Contributor

@etpinard OK. That's interesting. I'll have a look.

@archmoj
archmoj self-requested a review January 14, 2019 15:03

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great arrangement. Thanks @etpinard.
Please find my comments below.

Comment threadsrc/plots/gl3d/camera.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadsrc/plot_api/plot_api.js
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the revision!
💃

@etpinard

Copy link
Copy Markdown
ContributorAuthor

No problem! Thank you for the review!

Comment on lines +234 to +238
scene.glplot.canvas.addEventListener('wheel', function() {
if(gd._context._scrollZoom.gl3d) {
relayoutCallback(scene);
}
}, passiveSupported ? {passive: false} : false);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled scrollZoom in the plot config, but the mouse is still getting captured when scrolling by the canvas. Looks like it's because of the wheel event listener that's being registered here anyway. After I remove the wheel listener on scene element from chrome inspector, scrolling the page no longer gets captured by the canvas.

@etpinard, can we not add the listener at all if scrollzoom is disabled?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zfei thanks for the debugging. This comment is going to get lost here on a merged PR though, can you make a new issue for this? Or better yet a PR, looks like it's probably a pretty easy fix 😎

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alexcjohnson.

I've never touched the Plotly codebase and haven't set up my mind to go through the learning curve yet. 😉

Will just leave it as an issue for now.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@etpinard@alexcjohnson@archmoj@zfei
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Make scrollZoom config option a flaglist - #3422

Merged
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist
Jan 16, 2019
Merged

Make scrollZoom config option a flaglist#3422
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist

Conversation

@etpinard

@etpinardetpinard commented Jan 8, 2019

Copy link
Copy Markdown
Contributor

An attempt at resolving #143 and #2998 as well as a similar issue-less problem for mapbox subplots.

In brief, this PR makes the config option scrollZoom a flaglist -- with flags for all subplots that support zooming via scroll -- instead of a boolean:

  • its default value now becomes gl3d+geo+mapbox (instead of false) as all three of these subplot types have scroll zoom enabled by default.
  • Setting scrollZoom:true enables scroll zoom for all subplots, which is equivalent to scrollZoom:'cartesian+gl3d+geo+mapbox'
  • Setting scrollZoom:false disables scroll zoom on all subplots, which should make a bunch of users 😄

@plotly/plotly_js what do you think?

@etpinardetpinard added this to the 1.44.0 milestone Jan 8, 2019
@etpinard

Copy link
Copy Markdown
ContributorAuthor

... to be merge into #3376 where I made use of the new plot_config option declarations.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Nice solution, I like it!

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@archmoj would you mind taking a look at this one at some point this week?

@archmoj

Copy link
Copy Markdown
Contributor

@etpinard OK. That's interesting. I'll have a look.

@archmoj
archmoj self-requested a review January 14, 2019 15:03

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great arrangement. Thanks @etpinard.
Please find my comments below.

Comment threadsrc/plots/gl3d/camera.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadsrc/plot_api/plot_api.js
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the revision!
💃

@etpinard

Copy link
Copy Markdown
ContributorAuthor

No problem! Thank you for the review!

Comment on lines +234 to +238
scene.glplot.canvas.addEventListener('wheel', function() {
if(gd._context._scrollZoom.gl3d) {
relayoutCallback(scene);
}
}, passiveSupported ? {passive: false} : false);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled scrollZoom in the plot config, but the mouse is still getting captured when scrolling by the canvas. Looks like it's because of the wheel event listener that's being registered here anyway. After I remove the wheel listener on scene element from chrome inspector, scrolling the page no longer gets captured by the canvas.

@etpinard, can we not add the listener at all if scrollzoom is disabled?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zfei thanks for the debugging. This comment is going to get lost here on a merged PR though, can you make a new issue for this? Or better yet a PR, looks like it's probably a pretty easy fix 😎

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alexcjohnson.

I've never touched the Plotly codebase and haven't set up my mind to go through the learning curve yet. 😉

Will just leave it as an issue for now.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@etpinard@alexcjohnson@archmoj@zfei
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Make scrollZoom config option a flaglist - #3422

Merged
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist
Jan 16, 2019
Merged

Make scrollZoom config option a flaglist#3422
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist

Conversation

@etpinard

@etpinardetpinard commented Jan 8, 2019

Copy link
Copy Markdown
Contributor

An attempt at resolving #143 and #2998 as well as a similar issue-less problem for mapbox subplots.

In brief, this PR makes the config option scrollZoom a flaglist -- with flags for all subplots that support zooming via scroll -- instead of a boolean:

  • its default value now becomes gl3d+geo+mapbox (instead of false) as all three of these subplot types have scroll zoom enabled by default.
  • Setting scrollZoom:true enables scroll zoom for all subplots, which is equivalent to scrollZoom:'cartesian+gl3d+geo+mapbox'
  • Setting scrollZoom:false disables scroll zoom on all subplots, which should make a bunch of users 😄

@plotly/plotly_js what do you think?

@etpinardetpinard added this to the 1.44.0 milestone Jan 8, 2019
@etpinard

Copy link
Copy Markdown
ContributorAuthor

... to be merge into #3376 where I made use of the new plot_config option declarations.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Nice solution, I like it!

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@archmoj would you mind taking a look at this one at some point this week?

@archmoj

Copy link
Copy Markdown
Contributor

@etpinard OK. That's interesting. I'll have a look.

@archmoj
archmoj self-requested a review January 14, 2019 15:03

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great arrangement. Thanks @etpinard.
Please find my comments below.

Comment threadsrc/plots/gl3d/camera.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadsrc/plot_api/plot_api.js
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the revision!
💃

@etpinard

Copy link
Copy Markdown
ContributorAuthor

No problem! Thank you for the review!

Comment on lines +234 to +238
scene.glplot.canvas.addEventListener('wheel', function() {
if(gd._context._scrollZoom.gl3d) {
relayoutCallback(scene);
}
}, passiveSupported ? {passive: false} : false);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled scrollZoom in the plot config, but the mouse is still getting captured when scrolling by the canvas. Looks like it's because of the wheel event listener that's being registered here anyway. After I remove the wheel listener on scene element from chrome inspector, scrolling the page no longer gets captured by the canvas.

@etpinard, can we not add the listener at all if scrollzoom is disabled?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zfei thanks for the debugging. This comment is going to get lost here on a merged PR though, can you make a new issue for this? Or better yet a PR, looks like it's probably a pretty easy fix 😎

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alexcjohnson.

I've never touched the Plotly codebase and haven't set up my mind to go through the learning curve yet. 😉

Will just leave it as an issue for now.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@etpinard@alexcjohnson@archmoj@zfei
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Make scrollZoom config option a flaglist - #3422

Merged
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist
Jan 16, 2019
Merged

Make scrollZoom config option a flaglist#3422
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist

Conversation

@etpinard

@etpinardetpinard commented Jan 8, 2019

Copy link
Copy Markdown
Contributor

An attempt at resolving #143 and #2998 as well as a similar issue-less problem for mapbox subplots.

In brief, this PR makes the config option scrollZoom a flaglist -- with flags for all subplots that support zooming via scroll -- instead of a boolean:

  • its default value now becomes gl3d+geo+mapbox (instead of false) as all three of these subplot types have scroll zoom enabled by default.
  • Setting scrollZoom:true enables scroll zoom for all subplots, which is equivalent to scrollZoom:'cartesian+gl3d+geo+mapbox'
  • Setting scrollZoom:false disables scroll zoom on all subplots, which should make a bunch of users 😄

@plotly/plotly_js what do you think?

@etpinardetpinard added this to the 1.44.0 milestone Jan 8, 2019
@etpinard

Copy link
Copy Markdown
ContributorAuthor

... to be merge into #3376 where I made use of the new plot_config option declarations.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Nice solution, I like it!

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@archmoj would you mind taking a look at this one at some point this week?

@archmoj

Copy link
Copy Markdown
Contributor

@etpinard OK. That's interesting. I'll have a look.

@archmoj
archmoj self-requested a review January 14, 2019 15:03

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great arrangement. Thanks @etpinard.
Please find my comments below.

Comment threadsrc/plots/gl3d/camera.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadsrc/plot_api/plot_api.js
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the revision!
💃

@etpinard

Copy link
Copy Markdown
ContributorAuthor

No problem! Thank you for the review!

Comment on lines +234 to +238
scene.glplot.canvas.addEventListener('wheel', function() {
if(gd._context._scrollZoom.gl3d) {
relayoutCallback(scene);
}
}, passiveSupported ? {passive: false} : false);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled scrollZoom in the plot config, but the mouse is still getting captured when scrolling by the canvas. Looks like it's because of the wheel event listener that's being registered here anyway. After I remove the wheel listener on scene element from chrome inspector, scrolling the page no longer gets captured by the canvas.

@etpinard, can we not add the listener at all if scrollzoom is disabled?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zfei thanks for the debugging. This comment is going to get lost here on a merged PR though, can you make a new issue for this? Or better yet a PR, looks like it's probably a pretty easy fix 😎

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alexcjohnson.

I've never touched the Plotly codebase and haven't set up my mind to go through the learning curve yet. 😉

Will just leave it as an issue for now.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@etpinard@alexcjohnson@archmoj@zfei
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Make scrollZoom config option a flaglist - #3422

Merged
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist
Jan 16, 2019
Merged

Make scrollZoom config option a flaglist#3422
etpinard merged 5 commits into
config-opts-in-plot-schemafrom
scrollzoom-flaglist

Conversation

@etpinard

@etpinardetpinard commented Jan 8, 2019

Copy link
Copy Markdown
Contributor

An attempt at resolving #143 and #2998 as well as a similar issue-less problem for mapbox subplots.

In brief, this PR makes the config option scrollZoom a flaglist -- with flags for all subplots that support zooming via scroll -- instead of a boolean:

  • its default value now becomes gl3d+geo+mapbox (instead of false) as all three of these subplot types have scroll zoom enabled by default.
  • Setting scrollZoom:true enables scroll zoom for all subplots, which is equivalent to scrollZoom:'cartesian+gl3d+geo+mapbox'
  • Setting scrollZoom:false disables scroll zoom on all subplots, which should make a bunch of users 😄

@plotly/plotly_js what do you think?

@etpinardetpinard added this to the 1.44.0 milestone Jan 8, 2019
@etpinard

Copy link
Copy Markdown
ContributorAuthor

... to be merge into #3376 where I made use of the new plot_config option declarations.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Nice solution, I like it!

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@archmoj would you mind taking a look at this one at some point this week?

@archmoj

Copy link
Copy Markdown
Contributor

@etpinard OK. That's interesting. I'll have a look.

@archmoj
archmoj self-requested a review January 14, 2019 15:03

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great arrangement. Thanks @etpinard.
Please find my comments below.

Comment threadsrc/plots/gl3d/camera.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadtest/jasmine/tests/config_test.js
Comment threadsrc/plot_api/plot_api.js
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the revision!
💃

@etpinard

Copy link
Copy Markdown
ContributorAuthor

No problem! Thank you for the review!

Comment on lines +234 to +238
scene.glplot.canvas.addEventListener('wheel', function() {
if(gd._context._scrollZoom.gl3d) {
relayoutCallback(scene);
}
}, passiveSupported ? {passive: false} : false);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled scrollZoom in the plot config, but the mouse is still getting captured when scrolling by the canvas. Looks like it's because of the wheel event listener that's being registered here anyway. After I remove the wheel listener on scene element from chrome inspector, scrolling the page no longer gets captured by the canvas.

@etpinard, can we not add the listener at all if scrollzoom is disabled?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zfei thanks for the debugging. This comment is going to get lost here on a merged PR though, can you make a new issue for this? Or better yet a PR, looks like it's probably a pretty easy fix 😎

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @alexcjohnson.

I've never touched the Plotly codebase and haven't set up my mind to go through the learning curve yet. 😉

Will just leave it as an issue for now.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@etpinard@alexcjohnson@archmoj@zfei