javascript - Extending Touch EventListener to Additional DOM Element -
i used codrops article/experiment create interactive environment local group use @ conferences. problem default interaction not intuitive. template used flickity.js , seems classie.js create sliding interface having trouble with.
the page can found here:
issue: way activate view-full clicking on html element:
<h2 class=".stack-title"> // after stack active should able activate full view clicking on first .stack-item used create thumbnail below it. entire div should clickable. users touching everywhere on screen , not clicking title desired action. hope makes sense.
in other words should able click stack-title , image below title of each stack pull stack full view mode on screen. click x or anywhere else on screen close full view.
the following located in main.js , reference found create events referring to.
// function initevents() { stacks.foreach(function(stack) { var titleel = stack.queryselector('.stack-title'); // expand/close stack titleel.addeventlistener('click', function(ev) { ev.preventdefault(); if( classie.has(stack, 'is-selected') ) { // current stack if( classie.has(bodyel, 'view-full') ) { // stack opened var closestack = function() { classie.remove(bodyel, 'move-items'); onendtransition(slider, function() { classie.remove(bodyel, 'view-full'); bodyel.style.height = ''; flkty.binddrag(); flkty.options.accessibility = true; canmoveheroimage = true; }); }; // if user scrolled down, let's first scroll before closing stack. var scrolled = scrolly(); if( scrolled > 0 ) { smooth_scroll_to(isfirefox ? docelem : bodyel || docelem, 0, 500).then(function() { closestack(); }); } else { closestack(); } } else if( canopen ) { // stack closed canmoveheroimage = false; classie.add(bodyel, 'view-full'); settimeout(function() { classie.add(bodyel, 'move-items'); }, 25); bodyel.style.height = stack.offsetheight + 'px'; flkty.unbinddrag(); flkty.options.accessibility = false; } } else if( classie.has(stack, 'stack-prev') ) { flkty.previous(true); } else if( classie.has(stack, 'stack-next') ) { flkty.next(true); } }); titleel.addeventlistener('mouseenter', function(ev) { if( classie.has(stack, 'is-selected') ) { canmoveheroimage = false; imghero.style.webkittransform = 'perspective(1000px) translate3d(0,0,0) rotate3d(1,1,1,0deg)'; imghero.style.transform = 'perspective(1000px) translate3d(0,0,0) rotate3d(1,1,1,0deg)'; } }); titleel.addeventlistener('mouseleave', function(ev) { // if current stack , it's not opened.. if( classie.has(stack, 'is-selected') && !classie.has(bodyel, 'view-full') ) { canmoveheroimage = true; } }); }); window.addeventlistener('mousemove', throttle(function(ev) { if( !canmoveheroimage ) return false; var xval = -1/(win.height/2)*ev.clienty + 1, yval = 1/(win.width/2)*ev.clientx - 1, transx = 20/(win.width)*ev.clientx - 10, transy = 20/(win.height)*ev.clienty - 10, transz = 100/(win.height)*ev.clienty - 50; imghero.style.webkittransform = 'perspective(1000px) translate3d(' + transx + 'px,' + transy + 'px,' + transz + 'px) rotate3d(' + xval + ',' + yval + ',0,2deg)'; imghero.style.transform = 'perspective(1000px) translate3d(' + transx + 'px,' + transy + 'px,' + transz + 'px) rotate3d(' + xval + ',' + yval + ',0,2deg)'; }, 100)); // window resize window.addeventlistener( 'resize', throttle(function(ev) { // recalculate window width/height win = { width: window.innerwidth, height: window.innerheight }; // reset body height if stack opened if( classie.has(bodyel, 'view-full') ) { // stack opened bodyel.style.height = stacks[flkty.selectedindex].offsetheight + 'px'; } }, 50)); // flickity events: flkty.on('cellselect', function() { canopen = false; classie.remove(bodyel, 'item-clickable'); var prevstack = stackswrapper.queryselector('.stack-prev'), nextstack = stackswrapper.queryselector('.stack-next'), selidx = flkty.selectedindex, cellscount = flkty.cells.length, previdx = selidx > 0 ? selidx - 1 : cellscount - 1; nextidx = selidx < cellscount - 1 ? selidx + 1 : 0; if( prevstack ) { classie.remove(prevstack, 'stack-prev'); } if( nextstack ) { classie.remove(nextstack, 'stack-next'); } classie.add(stacks[previdx], 'stack-prev'); classie.add(stacks[nextidx], 'stack-next'); }); flkty.on('dragstart', function() { canopen = false; classie.remove(bodyel, 'item-clickable'); }); flkty.on('settle', function() { classie.add(bodyel, 'item-clickable'); canopen = true; }); } init(); })();
i wrapped title , first stack item in div class .touch-me , worked well. had tried , received error. may have mistyped because made sense.
issue: works on mouseclick, not working touch on windows. have untested in other environment because deployed on windows touch screen.
although cannot tell layer not close on touch when swipe or touch header image stack.... i'm afraid not have skillset modify logic in javascript since not entirely understand plugins being used.
Comments
Post a Comment