hammer.js - Does Hammer 2.0 allow me to to everything I do in 1.0.5? -


my htpc project (open source) uses hammer 1.0.5 extensively - 32 separate hammer instances in many pages; 184 different event handlers; handles many different event types (tap, doubletap, touch, release, hold, drag, dragup, dragdown, swipeleft, swiperight, swipeup, swipedown). event handlers use delegation.

when found had glitch on safari on ipad (every other touch ignored), came same problem , discovered had missed release of version 2. ...

  • is wise upgrade?
  • can everything in version 2 version 1?
  • is upgrade mechanical? (set options enable capability, use new names events)?

i can't find guidance upgrading in hammer documentation, shame.

thanks

brian

well simple answer "no can't port hammer 1.x implementation 2.0".

below snippet of 1 of htpc js files, adds actions <div> containing epg listing of tv programmes. works 1.x.

var listingshammer = null;  function addlistingshammeractions() {     $("#guidebrowseritems").each(function () {         var h = $(window).height() - 24         var t = $(this).offset().top         console.log("#guidebrowseritems h=" + h + "; t=" + t + " => " + (h - t))         $(this).height(h - t)     });      if (!listingshammer) {         listingshammer = $(".guidebrowseritems").hammer({ prevent_default: true });     }      enabledragscroll(listingshammer)      listingshammer.on("tap", ".guideepgprogramme", function (e) {         var programitem = this;         $(".guideepgprogrammedescription").remove();         $(".guideepgprogrammecancel").remove();         $(".guideepgprogrammerecord").remove();         $(".guideepgprogrammerecordseries").remove();          $.ajax({             url: "/guide/description?id=" + programitem.id,             success: function (description) {                 if (hasclass(programitem, "guideepgprogrammescheduled")) {                     $(programitem).prepend('<img class="guideepgprogrammecancel" id="' + programitem.id + '" src="/content/buttons/smallround/exit.png" />')                 } else {                     $(programitem).prepend('<img class="guideepgprogrammerecordseries" id="' + programitem.id + '" src="/content/buttons/smallround/transport.rec.series.png" />')                     $(programitem).prepend('<img class="guideepgprogrammerecord" id="' + programitem.id + '" src="/content/buttons/smallround/transport.rec.png" />')                 }                 $(programitem).append('<div class="guideprogrammeinfo guideepgprogrammedescription">' + description + '</div>')                 cache: false             }         })     });      listingshammer.on("tap", ".guideepgprogrammerecord", function (e) {         var programitem = this;          $.ajax({             url: "/guide/record?id=" + programitem.id,             success: function (error) {                 if (error == "") {                     $(".guideselectoritems").html("")                     replacepane("guidebrowseritems", "/guide/listingspane?mode=guideschedule", "none")                 }                 else {                     alert(error)                 }                 cache: false             }         })     });      listingshammer.on("tap", ".guideepgprogrammerecordseries", function (e) {         var programitem = this;          $.ajax({             url: "/guide/recordseries?id=" + programitem.id,             success: function (error) {                 if (error == "") {                     $(".guideselectoritems").html("")                     replacepane("guidebrowseritems", "/guide/listingspane?mode=guideschedule", "none")                 }                 else {                     alert(error)                 }                 cache: false             }         })     });      listingshammer.on("tap", ".guideepgprogrammecancel", function (e) {         var programitem = this;          $.ajax({             url: "/guide/cancel?id=" + programitem.id,             success: function (error) {                 if (error == "") {                     $(".guideselectoritems").html("")                     replacepane("guidebrowseritems", "/guide/listingspane?mode=guideschedule", "none")                 }                 else {                     alert(error)                 }                 cache: false             }         })     });      listingshammer.on("tap", ".guideepgseriescancel", function (e) {         var seriesitem = this;          $.ajax({             url: "/guide/cancelseries?id=" + seriesitem.id,             success: function () {                 $(".guideselectoritems").html("")                 replacepane("guidebrowseritems", "/guide/listingspane?mode=guideseries", "none")                 cache: false             }         })     });  } 

there few things note.

  1. i use 1 hammer entire <div>, delegation each of individual guideepgprogramme sub-elements, when touch listed programme, handler acts on 1 sub-element.

  2. this allows me dynamically replace contents of <div> via ajax (e.g. channel), no need re-register handlers.

  3. the record , cancel button images dynamically added , removed needed , automatically gain desired pre-registered actions.

  4. the hammer object passed common utility function enabledragscroll, adds handlers scrolling (long, variable length) contents within fixed size guidebrowseritems page area.

  5. there many instances of replacepane("guidebrowseritems", <new url>) dynamically alter contents of <div> without affecting rest of page or script.

  6. and 1 of 30+ different hammer instance corresponding handling.

none of way of working appears possible in hammer 2.0.

so stick old mechanisms.


Comments

Popular posts from this blog

node.js - Using Node without global install -

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

java - Null response to php query in android, even though php works properly -