Probem with direct link positioning on ipad

brucemcpherson commented 3 years ago

goes to the end for both chrome & safari on ipad rather than the targted element in the visualization. Works on other reviewed platforms. d3chart.vue is the component in question

this works the positioning

it slides the target element into view
then simulates a mouse click on the target element to insert itself into the normal click handling.

the argument to handleMouseClick is simulating a mouse click event with the supposedly newly upda clientX and clientY

    this.handleIntoView(foundling.d3This, () => {
      const n = d3
        .select(foundling.d3This)
        .node()
        .getBoundingClientRect();
      this.handleMouseClick(
        foundling.d3This,
        {
          clientX: n.x,
          clientY: n.y,
        },
        foundling.item
      );
    });

handleintoview uses element.scrollIntoView (this should position the selected element at the top of the screen), then postponses till the next tick to give time for things to settle down

scrolling up a bit to get passed the toolbar at the top

postpones to another tick handling the simulated mouse click.

handleIntoView(element, after) {
  // this could push it too high so we need to scroll down a bit
  element.scrollIntoView();
  this.$nextTick(() => {
    scrollUp();
    if (after) this.$nextTick(after);
  });
},

I suspect that on the ipad either element.scrollintoview doesnt work, or it needs more time for the dom to settle than Vue nextTick()

brainysmurf commented 3 years ago

Thanks for the issue. Curious if this project could turn into a way for us to organize as a kind of directory.

I'm at a school going back to f2f this week, so I probaby won't get around to priortizing it. But I have heard that element.scrollIntoView() on iPad/Mac needs a nested div to work correctly. Sorry I can't quite do a pull request but maybe that'll get someone started?

brucemcpherson commented 3 years ago

Yes I can see a few people complaining about that on IOS, although MDN claims it's supporte. I've found a polyfill that claims to patch it for IOS, so I'll try it later.

Thanks for the tip.

On Sun, 7 Mar 2021 at 23:41, Adam Morris notifications@github.com wrote:

Thanks for the issue. Curious if this project could turn into a way for us to organize as a kind of directory.

I'm at a school going back to f2f this week, so I probaby won't get around to priortizing it. But I have heard that element.scrollIntoView() on iPad/Mac needs a nested div to work correctly. Sorry I can't quite do a pull request but maybe that'll get someone started?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/brucemcpherson/gitvizzy/issues/6#issuecomment-792376317, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOONBETUDVP3A4XBB2DLALTCQFJNANCNFSM4YXWYU7Q .

brucemcpherson commented 3 years ago

btw - there's an Apps Script library to access the compressed data for this https://ramblings.mcpher.com/vizzy-scrviz/vizzy-build-apps-script/ https://scrviz.web.app?manifest=brucemcpherson%2FbmVizzyCache%2Fappsscript.json

I'm already using it to maintain this sheet https://docs.google.com/spreadsheets/d/1DlKpVVYCrCPNfRbGsz6N_K3oPTgdC9gQIKi0aNb42uI/edit#gid=0 https://scrviz.web.app?manifest=brucemcpherson%2FbmVizzyCacheLibrarySheet%2Fappsscript.json

Which is a source for Andrew Roberts Directory of libraries

So yeah - there's certainly potential for doing more stuff.

On Sun, 7 Mar 2021 at 23:41, Adam Morris notifications@github.com wrote:

Thanks for the issue. Curious if this project could turn into a way for us to organize as a kind of directory.

I'm at a school going back to f2f this week, so I probaby won't get around to priortizing it. But I have heard that element.scrollIntoView() on iPad/Mac needs a nested div to work correctly. Sorry I can't quite do a pull request but maybe that'll get someone started?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/brucemcpherson/gitvizzy/issues/6#issuecomment-792376317, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOONBETUDVP3A4XBB2DLALTCQFJNANCNFSM4YXWYU7Q .

brucemcpherson / gitvizzy

Probem with direct link positioning on ipad #6