Touch

Bootstrap 5 Touch

This component allows you to improve the user experience on mobile touch screens by calling methods on the following custom events: pinch, swipe, tap, press, pan and rotate.

Note: Read the API tab to find all available options and advanced customization

Note: This method is intended only for users of mobile touch screens, so it won't work for the mouse or keyboard events.

Press

Press calls the chosen method when the touch event on the element lasts longer than 250 milliseconds.

Hold the button to remove the mask from the image

Edit in sandbox 
        
            
        <div>
          <div class="bg-image">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" />
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)" id="remove-bg">
              <div class="d-flex justify-content-center align-items-center h-100">
                <p id="press-text" class="text-white mb-0"> Hold the button to remove the mask from the image</p>
              </div>
            </div>
          </div>
  
          <div class="my-3">
            <button type="button" class="btn btn-primary btn-press">Tap & hold to show image</button>
          </div>
        </div>
      
        
    
        
            
        const btnPress = document.querySelector('.btn-press');
        const removeBg = document.querySelector('#remove-bg');
        const pressText = document.querySelector('#press-text');
        
        const touch = new mdb.Touch(btnPress, 'press', { time: 2000 });
        touch.init();
        
        const colorGen = () => {
          const randomNum = () => {
            return Math.floor(Math.random() * 255) + 1;
          };
          return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
        };

        btnPress.addEventListener('press', (e) => {
          removeBg.style.backgroundColor = 'rgba(0,0,0,0)';
          pressText.innerText = "";
        })

Press duration

Touch event press with custom duration.

Hold the button to remove the mask from the image with 5 seconds

Edit in sandbox 
        
            
            <div>
              <div class="bg-image">
                <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" />
                <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)" id="bg-press-duration">
                  <div class="d-flex justify-content-center align-items-center h-100">
                    <p class="text-white mb-0" id="press-duration-text">Hold the button to remove the mask from the image with 5 seconds</p>
                  </div>
                </div>
              </div>
      
              <div class="my-3">
                <button type="button" class="btn btn-primary btn-press-duration">Tap & hold to show image</button>
              </div>
            </div>
          
        
    
        
            
            const btnPressDuration = document.querySelector('.btn-press-duration');
            const touchPressDuration = new mdb.Touch(btnPressDuration, 'press', { time: 5000 });
            touchPressDuration.init();
            
            const colorGen = () => {
              const randomNum = () => {
                return Math.floor(Math.random() * 255) + 1;
              };
              return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
            }

            const bgPressDuration = document.querySelector('#bg-press-duration');
            const pressDurationText = document.querySelector('#press-duration-text');
            btnPressDuration.addEventListener('press', () => {
              bgPressDuration.style.backgroundColor = 'rgba(0,0,0,0)';
              pressDurationText.innerText = "";
            });

Tap

The callback on tap event is called with an object containing origin field - the x and y cooridinates of the user's touch.

Tap button to change a color

Edit in sandbox 
        
            
        <div>
          <div class="bg-image">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" />
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)" id="bg-tap">
              <div class="d-flex justify-content-center align-items-center h-100">
                <p class="text-white mb-0">Tap button to change a color</p>
              </div>
            </div>
          </div>
  
          <div class="my-3">
            <button type="button" class="btn btn-primary btn-tap">Tap to change a color</button>
          </div>
        </div>
      
        
    
        
            
        const btnTap = document.querySelector('.btn-tap');
        const tap = new mdb.Touch(btnTap, 'tap');
        tap.init();

        const colorGen = () => {
          const randomNum = () => {
            return Math.floor(Math.random() * 255) + 1;
          };
          return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
        };
          
                
        const bgTap = document.querySelector('#bg-tap');
        btnTap.addEventListener('tap', (e) => {
          bgTap.style.backgroundColor = colorGen();
        });

Double Tap

Set default taps to touch event.

Change background color with 2 taps

Edit in sandbox 
        
            
            <div>
              <div class="bg-image">
                <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" />
                <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)" id="bg-double-tap">
                  <div class="d-flex justify-content-center align-items-center h-100">
                    <p class="text-white mb-0">Change background color with 2 taps</p>
                  </div>
                </div>
              </div>
    
              <div class="my-3">
                <button type="button" class="btn btn-primary btn-double-tap">Tap button twice</button>
              </div>
            </div>
          
        
    
        
            
            const btnDoubleTap = document.querySelector('.btn-double-tap');
            const doubleTap = new mdb.Touch(btnDoubleTap, 'tap', { taps: 2 });
            doubleTap.init();
            
            const colorGen = () => {
              const randomNum = () => {
                return Math.floor(Math.random() * 255) + 1;
              };
              return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
            };

            const doubleTapBg = document.querySelector('#bg-double-tap')
            btnDoubleTap.addEventListener('tap', (e) => {
              doubleTapBg.style.backgroundColor = colorGen();
            });

Pan

The pan event is useful for dragging elements - every time the user moves a finger on the element to which the directive is attached to, the given method is being called with an argument consisting of two keys: x and y (the values corresponds to the horizontal and vertical translation).

Edit in sandbox 
        
            
        <div>
          <div class="bg-image" id="pan">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" id="img-pan"/>
          </div>
        </div>
      
        
    
        
            
        const panEl = document.querySelector("#pan");
        const pan = new mdb.Touch(panEl, 'pan');
        pan.init();
                
        const imgPan = document.querySelector('#img-pan')       
        let moveElement = {
          x: null,
          y: null
        };
                
        panEl.addEventListener('pan', (e) => {
          moveElement = {
            x: moveElement.x + e.x,
            y: moveElement.y + e.y,
          };
          
          imgPan.style.transform = `translate(${moveElement.x}px, ${moveElement.y}px)`
        });

Pan Left

Pan with only left direction

Edit in sandbox 
        
            
            <div>
              <div class="bg-image" id="pan-left">
                <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" id="img-pan-left"/>
              </div>
            </div>
          
        
    
        
            
            const panLeftEl = document.querySelector('#pan-left');
            const panLeft = new mdb.Touch(panLeftEl, 'pan', { direction: 'left' });
            panLeft.init();
            
            const imgPanLeft = document.querySelector('#img-pan-left');
            let moveElementLeft = {
              x: null,
            };
            panLeftEl.addEventListener('panleft', (e) => {
              moveElementLeft = {
                x: moveElementLeft.x + e.x,
              };
              imgPanLeft.style.transform = `translate(${moveElementLeft.x}px, 0px)`;
            });

Pan Right

Pan with only right direction

Edit in sandbox 
        
            
            <div>
              <div class="bg-image" id="pan-right">
                <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" id="img-pan-right"/>
              </div>
            </div>
          
        
    
        
            
            const panRightEl = document.querySelector('#pan-right');
            const panRight = new mdb.Touch(panRightEl, 'pan', { direction: 'right' });
            panRight.init();
            
            const imgPanRight = document.querySelector('#img-pan-right');
            let moveElementRight = {
              x: null,
            };
            panRightEl.addEventListener('panright', (e) => {
              moveElementRight = {
                x: moveElementRight.x + e.x,
              };
              imgPanRight.style.transform = `translate(${moveElementRight.x}px, 0px)`;
            });

Pan Up/Down

Pan with only up/down direction

Edit in sandbox 
        
            
            <div>
              <div class="bg-image" id="pan-up-down">
                <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" id="img-pan-up-down"/>
              </div>
            </div>
          
        
    
        
            
            const panUpDown = document.querySelector('#pan-up-down');
            const imgPanUpDown =document.querySelector('#img-pan-up-down');
            const touchDown = new mdb.Touch(panUpDown, 'pan', { direction: 'down' });
            const touchUp = new mdb.Touch(panUpDown, 'pan', { direction: 'up' });
            touchUp.init();
            touchDown.init();
            
            let moveElementUpDown = {
              y: null
            };
            panUpDown.addEventListener('panup', (e) => {
              moveElementUpDown = {
                y: moveElementUpDown.y + e.y,
              };
              imgPanUpDown.style.transform = `translate(0px, ${moveElementUpDown.y}px)`;
            });
            panUpDown.addEventListener('pandown', (e) => {
              moveElementUpDown = {
                y: moveElementUpDown.y + e.y,
              };
              imgPanUpDown.style.transform = `translate(0px, ${moveElementUpDown.y}px)`;
            });

Pinch

The pinch event calls the given method with an object containing two keys - ratio and origin. The first one it the ratio of the distance between user's fingers on touchend to the same distance on touchstart - it's particularly useful for scaling images. The second one, similarly as in doubleTap event, is a pair of coordinates indicating the middle point between the user's fingers.

Edit in sandbox 
        
            
        <div class="bg-image" id="div-pinch">
          <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" id="pinch"/>
        </div>
      
        
    
        
            
        const pinchEl = document.querySelector("#pinch");
        const pinch = new mdb.Touch(pinchEl, 'pinch');
        pinch.init()
                
        pinchEl.addEventListener('pinch', (e) => {
          e.target.style.transform = `scale(${e.ratio})`;
          e.target.style.transformOrigin = `translate(${e.origin.x}px, ${e.origin.y}px,)`
        });

Swipe Left/Right

The swipe event comes with several modifiers (left, right, up, down) - each of them will ensure that event will fire only on swipe in that particular direction. If the directive is used without any modifier, the callback method will be called each time the swiping occurs, and the string indicating the direction will be passed as an argument.

This example shows example with left and right

Swipe Left-Right to change a color

Edit in sandbox 
        
            
        <div class="bg-image">
          <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" />
          <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)" id="swipe-left-right">
            <div class="d-flex justify-content-center align-items-center h-100">
              <p class="text-white mb-0">Swipe Left-Right to change a color</p>
            </div>
          </div>
        </div>
      
        
    
        
            
        const swipeLeftRight = document.querySelector('#swipe-left-right')
        const touchSwipeLeftRight = new mdb.Touch(swipeLeftRight, 'swipe', {
          threshold: 100
        });
        touchSwipeLeftRight.init();

        const colorGen = () => {
          const randomNum = () => {
            return Math.floor(Math.random() * 255) + 1;
          };
          return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
        };
          
        swipeLeftRight.addEventListener('swipeleft', (e) => {
          e.target.style.backgroundColor = colorGen();
        });
        swipeLeftRight.addEventListener('swiperight', (e) => {
          e.target.style.backgroundColor = colorGen();
        });

Swipe Up/Down

This example shows example with up and down

Swipe Up-Down to change a color

Edit in sandbox 
        
            
        <div class="bg-image">
          <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" />
          <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);" id="swipe-up-down">
            <div class="d-flex justify-content-center align-items-center h-100">
              <p class="text-white mb-0">Swipe Up-Down to change a color</p>
            </div>
          </div>
        </div>
      
        
    
        
            
        const swipeUpDown = document.querySelector('#swipe-up-down')
        const touchSwipeUpDown = new mdb.Touch(swipeUpDown, 'swipe', {
          threshold: 120
        });
        touchSwipeUpDown.init();

        const colorGen = () => {
          const randomNum = () => {
            return Math.floor(Math.random() * 255) + 1;
          };
          return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
        };
          
        swipeUpDown.addEventListener('swipeup', (e) => {
          e.target.style.backgroundColor = colorGen();
        });
        swipeUpDown.addEventListener('swipedown', (e) => {
          e.target.style.backgroundColor = colorGen();
        });

Rotate

This example shows example with rotate

Edit in sandbox 
        
            
        <div class="bg-image">
          <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="img-fluid" id="rotate"/>
        </div>
      
        
    
        
            
        const rotate = document.querySelector('#rotate');
        const touchRotate = new mdb.Touch(rotate, 'rotate');
        touchRotate.init();
        
        rotate.addEventListener('rotate', (e) => {
          rotate.style.transform = `rotate(${e.currentAngle}turn)`;
        })

Touch - API

Usage

Via JavaScript

Edit in sandbox 
        
            
        const myTouch = new mdb.Touch(document.getElementById('id'), event, options)

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
        
            
        $(document).ready(() => {
          $('.example-class').touch(event, options);
        });

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-time="".

Tap

Name Type Default Description
interval number 500 Set interval to tap
time number 250 Set delays time to tap event
taps number 1 Set default value of number for taps
pointers number 1 Set default value of number for pointers

Press

Name Type Default Description
time number 250 Set time delays to take tap
pointers number 1 Set default value of number for pointers

Swipe

Name Type Default Description
threshold number 10 Set distance bettwen when event fires
direction string all Set direction to swipe. Available options: all, right, left, top, up.

Rotate

Name Type Default Description
angle number 0 Set started angle to rotate.
pointers number 2 Set default value of number for pointers

Pan

Name Type Default Description
threshold number 20 Set distance bettwen when event fires
direction string all Set direction to pan. Available options: all, right, left, top, up.
pointers number 1 Set default value of number for pointers

Pinch

Name Type Default Description
pointers number 2 Option for tap event, set duration to how long it takes to take a tap
threshold number 10 Set distance bettwen when event fires

Methods

Name Description Example
dispose Destroy component with this method element.dispose()
getInstance Static method which allows you to get the touch instance associated to a DOM element. Touch.getInstance(element)
getOrCreateInstance Static method which returns the touch instance associated to a DOM element or create a new one in case it wasn't initialized. Touch.getOrCreateInstance(element)
Edit in sandbox 
        
            
        const element = document.getElementById('id')
        const myTouch = new mdb.Touch(element, 'tap')
        myTouch.dispose()

Events

Name Description
tap This event fires tap touch funcionality.
press This event fires press touch funcionality.
pan This event fires pan touch funcionality.
pinch This event fires pinch touch funcionality.
swipe This event fires swipe touch funcionality.
rotate This event fires rotate touch funcionality.
Edit in sandbox 
        
            
        const element = document.getElementById('element-id');
        const touchEvent = new mdb.Touch(element, 'rotate');
        touchEvent.init();
        
        element.addEventListener('rotate', (e) => {
          // do something...
        })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
        import { Touch } from 'mdb-ui-kit';