4 Replies Latest reply on Aug 26, 2015 4:34 AM by PEPPERFACE

    Vertical Swipe - Wishlist Item

    PEPPERFACE Level 1

      Hi clever Edge people,

       

      What I'd love is for EA to provide a swipeup, swipedown code snippet that performs in the same manner as the existing swipeleft, swiperight.

       

      I know this has been asked about on this forum and that some solutions have been mooted. Sadly none that I'm smart enough to implement, though; so a baked in feature would be of tremendous use.

       

      Any ideas as to whether or not something's likely to roll out?

       

      Here's hoping x x

        • 1. Re: Vertical Swipe - Wishlist Item
          seano2o7 Level 3

          You can add the functions to the Stages compositionReady. Read this

           

          How to get swipe up and swipe down event in jQuery Mobile? - Stack Overflow

           

          You can use a function like this to do it.

           

          var supportTouch = $.support.touch,

                      scrollEvent = "touchmove scroll",

                      touchStartEvent = supportTouch ? "touchstart" : "mousedown",

                      touchStopEvent = supportTouch ? "touchend" : "mouseup",

                      touchMoveEvent = supportTouch ? "touchmove" : "mousemove";

              $.event.special.swipeupdown = {

                  setup: function() {

                      var thisObject = this;

                      var $this = $(thisObject);

                      $this.bind(touchStartEvent, function(event) {

                          var data = event.originalEvent.touches ?

                                  event.originalEvent.touches[ 0 ] :

                                  event,

                                  start = {

                                      time: (new Date).getTime(),

                                      coords: [ data.pageX, data.pageY ],

                                      origin: $(event.target)

                                  },

                                  stop;

           

           

                          function moveHandler(event) {

                              if (!start) {

                                  return;

                              }

                              var data = event.originalEvent.touches ?

                                      event.originalEvent.touches[ 0 ] :

                                      event;

                              stop = {

                                  time: (new Date).getTime(),

                                  coords: [ data.pageX, data.pageY ]

                              };

           

           

                              // prevent scrolling

                              if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {

                                  event.preventDefault();

                              }

                          }

                          $this

                                  .bind(touchMoveEvent, moveHandler)

                                  .one(touchStopEvent, function(event) {

                              $this.unbind(touchMoveEvent, moveHandler);

                              if (start && stop) {

                                  if (stop.time - start.time < 1000 &&

                                          Math.abs(start.coords[1] - stop.coords[1]) > 30 &&

                                          Math.abs(start.coords[0] - stop.coords[0]) < 75) {

                                      start.origin

                                              .trigger("swipeupdown")

                                              .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");

                                  }

                              }

                              start = stop = undefined;

                          });

                      });

                  }

              };

              $.each({

                  swipedown: "swipeupdown",

                  swipeup: "swipeupdown"

              }, function(event, sourceEvent){

                  $.event.special[event] = {

                      setup: function(){

                          $(this).bind(sourceEvent, $.noop);

                      }

                  };

              });

           

          sym.$('element').on('swipedown',function(){alert("swipedown..");} );

          sym.$('element').on('swipeup',function(){alert("swipeup..");} );


          So when you swipe up on a rectangle or whatever you have on the stage called "element" it will alert "swipeup" and same with swipe down.


          I've tested it and it works for me.


          I hope this helps.

          • 2. Re: Vertical Swipe - Wishlist Item
            PEPPERFACE Level 1

            Thank you so much for the response sean0207, it really is greatly appreciated but unfortunately I can't get it to work at this end.

             

            Nothing happens. Which obviously means I've set something up incorrectly, but that was kind of why I posted in the first place. What I'm hoping for from the good folk at Adobe is swipeup (which can be employed to make the timeline play) and swipedown (which can be employed to make the timeline playReverse) provided as a built-in facility; so that folk like me can easily utilise it

             

            Many thanks again, though, for your time.

            • 3. Re: Vertical Swipe - Wishlist Item
              mlprouty Level 1

              this works!! Don't give up.

              Instructions:

              1) Add the latest jquery.js to your Sctipts https://jquery.com/download/

              2) Create an element on the stage such as a large rectangle. Name it "element"

              3) Copy and paste the code in seano2o7's post above to Stages - compositionReady

               

              Honest it works!! thanks seano2o7, I've been looking all over for this!!

               

              Mark

              • 4. Re: Vertical Swipe - Wishlist Item
                PEPPERFACE Level 1

                Mark, you STAR!!! It DOES work! A million thanks for pointing me in the right direction... and seano2o7 for the original code. I'm eternally grateful to you both


                If anyone else is hunting for this solution I've created a very simple working example based on the above but with the result being that a timeline plays, as opposed to a 'swipe up/swipe down alert' being displayed.


                You can grab the zipped Edge Animate file from here.

                 

                Cheeeeeeeers!