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.
i use 1 hammer entire
<div>, delegation each of individualguideepgprogrammesub-elements, when touch listed programme, handler acts on 1 sub-element.this allows me dynamically replace contents of
<div>via ajax (e.g. channel), no need re-register handlers.the record , cancel button images dynamically added , removed needed , automatically gain desired pre-registered actions.
the hammer object passed common utility function
enabledragscroll, adds handlers scrolling (long, variable length) contents within fixed sizeguidebrowseritemspage area.there many instances of
replacepane("guidebrowseritems", <new url>)dynamically alter contents of<div>without affecting rest of page or script.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
Post a Comment