swipe uniscrollbox1 with mouse and finger on a touchscreen ??

[erich.wanker]

DesktopApp:

the hole uniscrollbox should be swipe to left and right .. not the content !

i tried to become a delphi event when i swipe a uniscrollbox (NOT the content..) - but i get error: Cannot read property 'addEventListener' of null

 

 

For Test -> please put a uniscrollbox1 and a tunihtmlframe1 on a form:

 

Form->OnCreate:

unihtmlframe1.HTML.Clear;

unihtmlframe1.HTML.Add('<script> ');

unihtmlframe1.HTML.Add('class SwipeEventDispatcher { ');
unihtmlframe1.HTML.Add('    constructor(element, options = {}) { ');
unihtmlframe1.HTML.Add('        this.evtMap = { ');
unihtmlframe1.HTML.Add('            SWIPE_LEFT: [], ');
unihtmlframe1.HTML.Add('            SWIPE_UP: [],       ');
unihtmlframe1.HTML.Add('            SWIPE_DOWN: [],         ');
unihtmlframe1.HTML.Add('            SWIPE_RIGHT: []   ');
unihtmlframe1.HTML.Add('        }; ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('        this.xDown = null; ');
unihtmlframe1.HTML.Add('        this.yDown = null; ');
unihtmlframe1.HTML.Add('        this.element = element; ');
unihtmlframe1.HTML.Add('        this.isMouseDown = false; ');
unihtmlframe1.HTML.Add('        this.listenForMouseEvents = true; ');
unihtmlframe1.HTML.Add('        this.options = Object.assign({ triggerPercent: 0.3 }, options); ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('        element.addEventListener("touchstart", evt => this.handleTouchStart(evt), false); ');
unihtmlframe1.HTML.Add('        element.addEventListener("touchend", evt => this.handleTouchEnd(evt), false); ');
unihtmlframe1.HTML.Add('        element.addEventListener("mousedown", evt => this.handleMouseDown(evt), false); ');
unihtmlframe1.HTML.Add('        element.addEventListener("mouseup", evt => this.handleMouseUp(evt), false); ');
unihtmlframe1.HTML.Add('    } ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('    on(evt, cb) { ');
unihtmlframe1.HTML.Add('        this.evtMap[evt].push(cb); ');
unihtmlframe1.HTML.Add('    } ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('    off(evt, lcb) { ');
unihtmlframe1.HTML.Add('        this.evtMap[evt] = this.evtMap[evt].filter(cb => cb !== lcb); ');
unihtmlframe1.HTML.Add('    } ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('    trigger(evt, data) { ');
unihtmlframe1.HTML.Add('        this.evtMap[evt].map(handler => handler(data)); ');
unihtmlframe1.HTML.Add('    } ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('    handleTouchStart(evt) { ');
unihtmlframe1.HTML.Add('        this.xDown = evt.touches[0].clientX; ');
unihtmlframe1.HTML.Add('        this.yDown = evt.touches[0].clientY; ');
unihtmlframe1.HTML.Add('    } ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('    handleMouseDown(evt) { ');
unihtmlframe1.HTML.Add('        if (this.listenForMouseEvents==false) return; ');
unihtmlframe1.HTML.Add('        this.xDown = evt.clientX; ');
unihtmlframe1.HTML.Add('        this.yDown = evt.clientY; ');
unihtmlframe1.HTML.Add('        this.isMouseDown = true; ');
unihtmlframe1.HTML.Add('    } ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('    handleMouseUp(evt) { ');
unihtmlframe1.HTML.Add('        if (this.isMouseDown == false) return; ');
unihtmlframe1.HTML.Add('        const deltaX = evt.clientX - this.xDown; ');
unihtmlframe1.HTML.Add('        const deltaY = evt.clientY - this.yDown; ');
unihtmlframe1.HTML.Add('        const distMoved = Math.abs(Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY); ');
unihtmlframe1.HTML.Add('        const activePct = distMoved / this.element.offsetWidth; ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('        if (activePct > this.options.triggerPercent) { ');
unihtmlframe1.HTML.Add('            if (Math.abs(deltaX) > Math.abs(deltaY)) { ');
unihtmlframe1.HTML.Add('                deltaX < 0 ? this.trigger("SWIPE_LEFT") : this.trigger("SWIPE_RIGHT"); ');
unihtmlframe1.HTML.Add('            } else { ');
unihtmlframe1.HTML.Add('                deltaY > 0 ? this.trigger("SWIPE_UP") : this.trigger("SWIPE_DOWN"); ');
unihtmlframe1.HTML.Add('            } ');
unihtmlframe1.HTML.Add('        } ');
unihtmlframe1.HTML.Add('    } ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('    handleTouchEnd(evt) { ');
unihtmlframe1.HTML.Add('        const deltaX = evt.changedTouches[0].clientX - this.xDown; ');
unihtmlframe1.HTML.Add('        const deltaY = evt.changedTouches[0].clientY - this.yDown; ');
unihtmlframe1.HTML.Add('        const distMoved = Math.abs(Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY); ');
unihtmlframe1.HTML.Add('        const activePct = distMoved / this.element.offsetWidth; ');
unihtmlframe1.HTML.Add(' ');
unihtmlframe1.HTML.Add('        if (activePct > this.options.triggerPercent) { ');
unihtmlframe1.HTML.Add('            if (Math.abs(deltaX) > Math.abs(deltaY)) { ');
unihtmlframe1.HTML.Add('                deltaX < 0 ? this.trigger("SWIPE_LEFT") : this.trigger("SWIPE_RIGHT"); ');
unihtmlframe1.HTML.Add('            } else { ');
unihtmlframe1.HTML.Add('                deltaY > 0 ? this.trigger("SWIPE_UP") : this.trigger("SWIPE_DOWN"); ');
unihtmlframe1.HTML.Add('            } ');
unihtmlframe1.HTML.Add('        } ');
unihtmlframe1.HTML.Add('    } ');
unihtmlframe1.HTML.Add('} ');
unihtmlframe1.HTML.Add(' ');

unihtmlframe1.HTML.Add('function start_the_thing() { ');
unihtmlframe1.HTML.Add('    dispatcher = new SwipeEventDispatcher(document.getElementById("'+uniscrollbox1.JsName+'")); ');
unihtmlframe1.HTML.Add('    dispatcher.on("SWIPE_RIGHT", () => { console.log("I swiped right!") }) ');
unihtmlframe1.HTML.Add('    dispatcher.on("SWIPE_LEFT", () => { console.log("I swiped left!") }) ');
unihtmlframe1.HTML.Add('console.log("starting Swipe Thing....");    }; ');
unihtmlframe1.HTML.Add('</script> ');

unihtmlframe1.HTML.Add('<script> ');
unihtmlframe1.HTML.Add('start_the_thing();');
unihtmlframe1.HTML.Add('</script> ');

[erich.wanker]

OK .. i got it 🙂

this is just for Fingertouch ..

 

1.) i use: https://github.com/john-doherty/swiped-events/blob/master/src/swiped-events.js

 

2.) uniscrollbox - ClientEvent - ExtEvent

function afterrender(sender, eOpts)
{
sender.getEl().dom.addEventListener('swiped-left', function(e) {
    ajaxRequest(sender, '_left',[]);
    console.log(e.target); // the element that was swiped
});

sender.getEl().dom.addEventListener('swiped-right', function(e) {
    ajaxRequest(sender, '_right',[]);
    console.log(e.target); // the element that was swiped
});

sender.getEl().dom.addEventListener('swiped', function(e) {
    console.log(e.target); // the element that was swiped
    console.log(e.detail.dir); // swiped direction
    ajaxRequest(sender, e.detail.dir,[]);
});
}

3.)

procedure TyourForm.uniscrollboxAjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
begin
unilabel.Caption:= EventName;
end;

 

 

Hope that someone find this usefull 😉

Nice Greetings

Erich

[cwlyj001]

good job, thank you share👍