Front-end componentization series catalog

  • Build components using JSX Parser
  • “Two” uses JSX to establish a Markup component style
  • “Three” use JSX to realize Carousel multicast module
  • “Four” with JavaScript timeline and animation
  • “Five” with JavaScript to achieve gesture library – implementation of listening logic
  • Using JavaScript to Implement Gesture Library — Gesture Logic
  • . To be continued…

In the last issue of Implementing Listening Logic, we implemented the basic gesture listening logic together. With these gestures listening in, we can begin to implement the logic of each gesture. Eventually we can apply these gestures to our Carouche component.

Next we begin to implement the logic of Gesture.

Start the event

First we’ll fire a start event, which is the first event that fires when our finger touches the screen. There are three situations:

  • fingers
    • The end event is emitted, and that makes onetapThe act of clicking
    • This is done by listening for the End event
  • Drag your finger over 10 px
    • This is thepan startThe act of dragging
    • We can determine the current distance from the last contact in the move event
  • Hold your finger in the current position for more than 0.5 seconds
    • This is thepress startThe act of pressing.
    • We can do this by adding a setTimeout

Press event

So our first step is to add a setTimout handler to the start function.

let handler;

let start = point= > {
  handler = setTimeout(() = > {
    console.log('presss ');
  }, 500);
};
Copy the code

In general, press is a common behavior. But this is actually a Press Start event, followed by a Press End event. We can also call this press event collectively, and the user of the gesture library only needs to listen for the press event, rarely the Press End event.

It is important to note that the 500 ms setTimout may be cancelled when other events are triggered. So we need to give this logic a handler and put it in global scope so that other events can get this variable and use it to cancel the processing logic.

Pan event

We then listen for the pan movement of 10px, which requires us to record the x and Y coordinates of the user’s initial touch of the screen. As the user moves his finger, we continuously calculate the distance between the newly moved position and the initial position. If this distance exceeds 10px, our Pan start event will be triggered.

So first we need to add the coordinates of startX and startY to the start function. Note that since both values are used in multiple places, they also need to be declared in the global scope.

Then calculate the diameter distance between the current contact and the starting point in the move function. X2 +y2=z2x^2 +y ^2 =z ^2×2+y2=z2. Y is the distance between the y coordinate of the current exit point and the y coordinate of the starting point. And then you end up with the second power of the distance and you end up with the second power of the diameter distance.

We generally avoid using the square root in code because it can have a performance impact. We know that the final thing to determine is whether the diameter distance is greater than a fixed 10px. That means that z is equal to 10, and z to the second power is 100, so we can just figure out if this distance is greater than 100.

One other thing to note here is that when we move our finger beyond 10px, if we move our finger back instead of leaving the screen, we are not 10px away from the starting point. But this is actually a PAN event, because we do move more than 10px, and after that all moves are PAN events.

So we need an isPan state. The first move beyond 10px will trigger pan-start, set isPan to true, and all subsequent moves will trigger PAN events.

According to the Press event we talked about above, the press event will be cancelled if there is a movement within 0.5 seconds after we press our finger. So here we need clearTimeout to clear out the PressStart handler.

let handler;
let startX, startY;
let isPan = false;

let start = point= > {
  (startX = point.clientX), (startY = point.clientY);

  isPan = false;

  handler = setTimeout(() = > {
    console.log('pressstart');
  }, 500);
};

let move = point= > {
  let dx = point.clientX - startX,
    dy = point.clientY - startY;

  let d = dx ** 2 + dy ** 2;

  if(! isPan && d >100) {
    isPan = true;
    console.log('pan-start');
    clearTimeout(handler);
  }

  if (isPan) {
    console.log(dx, dy);
    console.log('pan'); }};Copy the code

Tap the event

The logic of Tap can be checked in the end event. First, we have a default isTap equal to true. If we trigger a PAN event, we will not trigger the tap logic, so tap and PAN are mutually exclusive. But to keep them from becoming very coupled, instead of using the original isPan as the judging state, we declare another isTap state for recording.

Tap and pan have separate states. Press also has an isPress state. Its default value is false. If our 0.5 second timer is triggered, isPress will also be true.

Since we have added states to each event, we will set the values of those states for each event when it fires.

  • When the press
    • isTap = false
    • isPan = false
    • isPress = true
  • When the pan
    • isTap = false
    • isPan = true
    • isPress = false
  • When the tap
    • isTap = true
    • isPan = false
    • isPress = false

If we find that the user does not move or hold the touch screen for more than 0.5 seconds, the end function will be called when the user leaves the screen, and we can assume that the user action is TAP. Note here that our press 0.5 second timer is not turned off, so we need clearTimeout(handler) in isTap logic.

To cancel the press timer, we need to do some protection logic in the handler callback. After press-start is triggered, we need to ensure that every click on the screen is triggered only once. So at the end of the setTimout callback, We need to add handler = null. Once press-start is triggered, it will not be triggered again.

let handler;
let startX, startY;
let isPan = false,
  isPress = false,
  isTap = false;

let start = point= > {
  (startX = point.clientX), (startY = point.clientY);

  isPan = false;
  isTap = true;
  isPress = false;

  handler = setTimeout(() = > {
    isPan = false;
    isTap = false;
    isPress = true;
    console.log('press-start');
    handler = null;
  }, 500);
};

let move = point= > {
  let dx = point.clientX - startX,
    dy = point.clientY - startY;

  let d = dx ** 2 + dy ** 2;

  if(! isPan && d >100) {
    isPan = true;
    isTap = false;
    isPress = false;
    console.log('pan-start');
    clearTimeout(handler);
  }

  if (isPan) {
    console.log(dx, dy);
    console.log('pan'); }};let end = point= > {
  if (isTap) {
    console.log('tap');
    clearTimeout(handler); }};Copy the code

End event

At the end here we’re dealing with all the end times, press-end and pan-end.

Both end events are evaluated in the end function. If a pan-start or press-start event is triggered during a user operation, the corresponding state will be true in the end function.

So we changed the end function to the following:

let end = point= > {
  if (isTap) {
    console.log('tap');
    clearTimeout(handler);
  }

  if (isPan) {
    console.log('pan-end');
  }

  if (isPress) {
    console.log('press-end'); }};Copy the code

Finally, we need to clear the setTimeout of the Press event when the Cancel event fires. Since our operation is interrupted, there is no chance that our long press event will be triggered.

/ / to join the cancel
let cancel = point= > {
  clearTimeout(handler);
  console.log('cancel');
};
Copy the code

We’ve done all the events in the gesture library except for the flick logic. And can also correctly distinguish between these gestures.

This time we will stop here, next time we will complete the logic of this gesture library, and rearrange the state of it! Stay tuned and stay tuned

I’m Three Diamonds from Tech Galaxy, a tech guy who is reinventing knowledge. See you next time.

⭐️ three elder brother recommended

Open Source Project Recommendation

Hexo Theme Aurora

Recently updated to version 1.5.0, it contains the following:

“Preview”

: sparkles: new

  • Adaptive “Recommended Articles” layout (added a new”Top article layout“!!
    • The ability to toggle between Recommended articles and Top articles modes
    • If the total number of articles is less than 3, it will automatically switch to “Top articles” mode
    • Add “top” and “Recommended” tags to the article card
    • Book: document
  • Added custom containers like VuePress# 77
    • InfoThe container
    • WarningThe container
    • DangerThe container
    • DetailThe container
    • preview
  • Support for more SEO meta data# 76
    • addeddescription
    • addedkeywords
    • addedauthor
    • Book: document

Recently, bloggers have been fully engaged in the development of a “futuristic” Hexo theme, a blog theme based on the aurora.

If you’re a developer, creating a personal blog can be another bright spot on your resume. And if you have a really cool blog, it’s even brighter. It’s just sparkling.

If you like this theme, please click 🌟 on Github and let each other shine

Github address: github.com/auroral-ui/… Topics using document: aurora. Tridiamond. Tech/useful /

VSCode Aurora Future

Yeah, the blogger also did a VSCode theme for Aurora. The Hexo Theme Aurora color scheme was used. The key feature of this theme is to use only 3 colors, which reduces the distraction of multi-color coding and allows you to focus on writing code.

Like you can support oh! Just type “Aurora Future” into VSCode’s plugin search to find this theme. ~

Github address: github.com/auroral-ui/… Theme plugin address: marketplace.visualstudio.com/items?itemN…

Firefox Aurora Future

I don’t know about you, but I’ve been using Firefox for development lately. I think Firefox is really good. I recommend you try it.

And of course what I want to show you here is that I did an Aurora theme for Firefox as well. Right! They use the same color system. Like small partners can try oh!

Subject address: addons.mozilla.org/en-US/firef…