asked on

Need help with mobile swipe JS

Need help getting mobile swipe to work. Pasting what I currently have. And yes, I know it's a mess. I'll take all the help I can get. Not sure what the dojo is doing??

<!DOCTYPE html><html lang='en' class=''>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<style>
.icon-paging-right:before {
    content: ">";
}

.icon-paging-left:before, .icon-paging-right:before {
    padding: 0 10px;
    line-height: 1px;
}
.icon-paging-left:before, .icon-paging-right:before {
    line-height: 25px;
    font-weight: 900;
    color: #272727;
    font-family: Nunito Sans, sans serif;
    font-size: 24px;
    padding: 0;
}
.prod-item__swatch-wrapper {
    height: 35px;
    margin: 0 auto;
    width: 200px;
    position: relative;
}

@media only screen and (max-width: 767px) {
.prod-item__swatch-wrapper {
    margin-left: 25px;
    height: 26px;
    margin: 0 0 0 25px;
}
}

@media only screen and (max-width: 767px) {
.prod-item__swatch {
    text-align: left;
} 
}
.prod-item__swatch {
    text-align: center;
    height: 35px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
.plp-search-item .prod-item__info {
    float: left;
    width: 141px;
}
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
.prod-item__swatch-block {
    width: 110px;
    height: 26px;
}
}

.prod-item__swatch-block-inner {
width: 270px;
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: white;
}

@media only screen and (max-width: 767px) {
.plp-search-item .prod-item__swatch .faset-swatch {
    width: 26px;
    height: 26px;
}
}
.plp-search-item .prod-item__swatch .faset-swatch {

    padding: 0;
    margin: 0 1px;
}
@media only screen and (max-width: 767px) {
.faset-swatch.selected {
    position: relative;
    padding: 0;
}
}
.faset-swatch {
    display: inline-block;
    padding: 3px;
    vertical-align: middle;
}

.faset-swatch {
    display: inline-block;
    vertical-align: middle;
}

@media only screen and (max-width: 767px) {
.plp-search-item .prod-item__info {
    float: left;
    width: 141px;
}
}

.prod-item__swatch-block {
    position: relative;
    top: 0;
    left: 0;
    width: 110px;
    height: 35px;
    overflow: hidden;
    display: inline-block;
}
</style></head>
<body>
<div class="prod-item__info">
    <div class="prod-item__swatch">
        <div class="prod-item__swatch-wrapper">
                            <span id="arrowLeft_2540333" data-catid="2540333" data-direction="left" class="icon-paging-left btn-arrow js-swatchColorLeft" style="visibility:hidden;"></span>
                            <div id="div_2540333" class="prod-item__swatch-block">
                                <ul id="ul_2540333" class="prod-item__swatch-block-inner" style="width: 189px; left: 0px; top: 0px; position: absolute;">
                                
                                    <li id="li_2540333_0" class="faset-swatch js-faset-swatch defaultSwatch selected">
                                        
                                        <img src="https://via.placeholder.com/26x26">
                                    </li>
                                
                                    <li id="li_2540333_1" class="faset-swatch js-faset-swatch">
                                        
                                        <img src="https://via.placeholder.com/26x26">
                                    </li>
                                
                                    <li id="li_2540333_2" class="faset-swatch js-faset-swatch">
                                        
                                        <img src="https://via.placeholder.com/26x26">
                                    </li>
                                
                                    <li id="li_2540333_3" class="faset-swatch js-faset-swatch">
                                        
                                        <img src="https://via.placeholder.com/26x26">
                                    </li>
                                
                                    <li id="li_2540333_4" class="faset-swatch js-faset-swatch">
                                        
                                        <img src="https://via.placeholder.com/26x26">
                                    </li>
                                
                                    <li id="li_2540333_5" class="faset-swatch js-faset-swatch">
                                        
                                        <img src="https://via.placeholder.com/26x26">
                                    </li>
                                
                                    <li id="li_2540333_6" class="faset-swatch js-faset-swatch">
                                        
                                        <img src="https://via.placeholder.com/26x26">
                                    </li>
                                
                                </ul>
                            </div>
                            <span id="arrowRight_2540333" data-catid="2540333" data-direction="right" class="icon-paging-right btn-arrow js-swatchColorRight" style="visibility: visible;"></span>
                        </div>
                    </div>
                </div>


<script type="javascript">

function(iqstore, helpers, query, on, domClass, mouse, touch, domAttr){ // Wait for the DOM to be ready before working with it
    iqstore.swatchColorInit = function(){ //Initialize a handler for Swatch colors
        var touchOrigin = 0,
        touchEnd = 0,
        touchThreshold = 100,
        touchLockout = false,
        touchTimeout = 400,
        touchTimerActive = false;

        
        var maxWidth = 162,
            swatchWidth = 37;
            horisontalStep = 3 * swatchWidth;
        
        if(helpers.isMobile) {
            maxWidth = 110;
            swatchWidth = 27;
            horisontalStep = swatchWidth;
        }
        iqstore.isAnimated = {};
        
        query('.prod-item__swatch-block-inner').forEach(function(node){ //verify and fix geometry params for all swatch containers
            var catId = node.id.slice(3),
                parentNode = $('div_'+catId);
            
            if (node.childElementCount * swatchWidth > maxWidth){ //show arrows if they are needed
                var arrowRight = $('arrowRight_'+catId),
                    arrows = [arrowRight, $('arrowLeft_'+catId)];
                
                arrowRight.style.visibility = 'visible';
                node.style.width = node.childElementCount * swatchWidth + 'px';
                node.style.left = '0';
                node.style.top = '0';
                node.style.position = 'absolute';
                
                
                
                iqstore.isAnimated[catId] = false;
                //arrows -> onHandler
                if(helpers.isMobile || helpers.isTablet){
                    dojo.forEach(arrows, function(node){
                        on(node, "touchstart", function(e){
                            var _horisontalStep = horisontalStep,
                                _maxWidth = maxWidth,
                                _catId = catId;
                            shiftColors(e, _horisontalStep, _maxWidth, catId);
                            return false;
                        });
                    });
                } else {
                    dojo.forEach(arrows, function(node){
                        on(node, "click", function(e){
                            var _horisontalStep = horisontalStep,
                                _maxWidth = maxWidth,
                                _catId = catId;
                            if (iqstore.isAnimated[catId]){
                                return false;
                            }
                            shiftColors(e, _horisontalStep, _maxWidth);
                            return false;
                        });
                    });
                }
            }
        });
        
        function shiftColors(e, horisontalStep, maxWidth){
            var catId = domAttr.get(e.target, 'data-catId'),
                ulBlock = $('ul_'+catId),
                ulBlockWidth = parseInt(ulBlock.style.width),
                arrowLeft = $('arrowLeft_'+catId),
                arrowRight = $('arrowRight_'+catId),
                direction = domAttr.get(e.target, 'data-direction'),
                moveTo = (direction == 'left') ? 1 : -1,
                positionLeft = (parseInt(ulBlock.style.left) + (horisontalStep*moveTo));
            var slideArgs = {
                node: ulBlock,
                top: '0',
                left: positionLeft.toString(),
                duration: 200,
                unit: "px",
                onBegin: function() {
                    iqstore.isAnimated[catId] = true;
                },
                onEnd: function() {
                    console.log(horisontalStep);
                    iqstore.isAnimated[catId] = false;
                    if (direction == 'left' && positionLeft >= 0){
                        arrowLeft.style.visibility = 'hidden';
                    }
                    if (direction == 'right' && -positionLeft >= ulBlockWidth-maxWidth) {
                        arrowRight.style.visibility = 'hidden'; 
                    }
                    if (direction == 'right') {
                        arrowLeft.style.visibility = 'visible'; 
                    } else if (direction == 'left') {
                        arrowRight.style.visibility = 'visible'; 
                    }
                }
            };
            
            if (direction == 'left' && positionLeft > 0) {
                return;
            }
            
            dojo.fx.slideTo(slideArgs).play();
        }
        

        query('.js-swatchColor').forEach(function(node){ //set Tooltip's relative position
            if(helpers.isMobile || helpers.isTablet){
                on(node, touch.over, function(e){ // switch target's image source on touchover
                    swatchSrcForColor(e);
                });
            } else {
                on(node, mouse.enter, function(e){ // show the Tooltip on mouseover
                     swatchSrcForColor(e);
                });
            }
        });
        
        function swatchSrcForColor(e){
            var parentNode = $(domAttr.get(e.target, 'data-parentId'));
            
            if (domClass.contains(parentNode, 'selected')){ //exit if node has already selected
                return;
            }
            
            var imgSrc = domAttr.get(e.target, 'data-imgSrc'),
                imgNode = $(domAttr.get(e.target, 'data-imgId')),
                catId = domAttr.get(e.target, 'data-catId');
            
            dojo.query('#ul_'+catId+' .js-faset-swatch.selected').forEach(function(el){ //hide previous selected color
                domClass.remove(el, 'selected');
            });
            domClass.add(parentNode, 'selected'); //and set "selected" for the current color
            imgNode.src = imgSrc;
        }
    };
    
    //register a event listeners to the container element.
    function registerEventHandler() {
        
        jQuery(container).click(jQuery.throttle(500, swatchClickListener));
        
        container.addEventListener("touchstart", jQuery.debounce(100, false, swatchTouchHandler));
        
        container.addEventListener("touchmove", jQuery.debounce(100, false, swatchTouchHandler));
        
        container.addEventListener("touchend", jQuery.debounce(100, false, swatchTouchHandler));
        
    }
    
    function swatchTouchHandler(event) {
        
        // update variables with current positions
        if(event.type === "touchstart") {
            
            touchOrigin = event.changedTouches[0].screenX;
            
            touchEnd = event.changedTouches[0].screenX;
            
        } else if(event.type === "touchmove") {
            
            touchEnd = event.changedTouches[0].screenX;
            
        } else if(event.type === "touchend") {
            
            touchEnd = event.changedTouches[0].screenX;
            
        }
        
        // check if proper distance has traveled.
        if(Math.abs(touchOrigin - touchEnd) > touchThreshold && !touchLockout) {
            
            if(touchOrigin < touchEnd) {
                
                touchLockout = true;
                
                
            } else if(touchOrigin > touchEnd) {
                
                touchLockout = true;
                
                
            }
            
        }
        
        // set touch lockout timer to prevent repeated actions.
        if(touchLockout && !touchTimerActive) {
            
            touchTimerActive = true;
            
            setTimeout(function() {
                
                touchLockout = false;
                
                touchTimerActive = false;
                
                touchOrigin = 0;
                
                touchEnd = 0;
                
            }, touchTimeout);
            
        }
        
    }
    
    return iqstore;
});
</script>
</body></html>

Open in new window

Julian Hansen

What are we looking for?

tekgrl

ASKER

I just edited with more complete HTML and CSS. Want to swipe swatches left/right on swipe for mobile/tablet.

Julian Hansen

I understand but what is the issue you are facing?

You have posted some code - but you have not said what you want us to do with the code - is it producing an error? If so what is the error?
It is not doing what it is supposed to do - in which case tell us what it is you expect it to do and what it is actually doing?

If possible setup an example to show us what you have so far.

tekgrl

ASKER

Ok thanks. It is not working. Nothing is happening, so I think it's not reading the javascript? When you click on the arrows the images should advance to the left or right. And swipe on mobile. Attaching the code as a file here too.

Julian Hansen

code does not make any sense.

1. your script definition is wrong <script type="javascript"> will never execute because the browser will not recognise it as a script block

Old style

<script type="text/javascript">

Open in new window

New way

<script>

Open in new window

Then you have a function with no name that looks like it should be an IIFE but it is missing an opening '(' and if that is as it should be then it has a rogue closing ')' at the end. If it is meant to be an IIFE then it should have () at the end.

Changing the code to make it a valid IIFE still does not work as the function is now referring to parameters that have obviously not been passed to it.

So either this is code that has been incorrectly implemented (or copied) from another source
Or
It is missing some pieces that would help it make sense.

As it stands it is a bit of a fruit salad with no clear indication of intent, origin or direction - debugging it in this forum will require a lot more information than has been provided.

tekgrl

ASKER

Sorry, I am trying to cobble this together from a large codebase. I fixed those two items but getting other errors/still not working -- new code attached. Appreciate the help.

tekgrl

ASKER

And if it's helpful, I would like it to function like this:

https://www.backcountry.com/patagonia-re-tool-snap-t-fleece-jacket-womens-pat2999?skid=PAT2999-TITEGNXD-XXS&ti=UExQIENhdDo6OjE6

Except have clickable arrows appear on desktop

Julian Hansen

No code attached and what are we looking for in the link?

tekgrl

ASKER

Why it's erring out
swipe-test.html

Julian Hansen

You posted this link and said you wanted to use a reference but did not say what you wanted to reference in the link.

Why it's erring out

What errors - why not take the time to tell us what you are seeing - we can't guess and if you don't tell us we can't help you.

The errors that show in the console relate to issues with loading Dojo dependencies.

What it is you are trying to achieve - what is it you want your code to do?

tekgrl

ASKER

First of all, how do i fix the dojo dependencies?

Julian Hansen

Where did you get these dependencies from?

'./main', 'iqstore/helpers', 'dojo/query', 'dojo/on', 'dojo/dom-class', 'dojo/mouse', 'dojo/touch', 'dojo/dom-attr', 'dojo/domReady!' ],

Open in new window

dojo is going to try to include those - and it is not finding some of them so somewhere you have a reference wrong.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.