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

Question

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). All the event handlers use delegation.
When I found I had a glitch on Safari on an iPad (every other touch is ignored), I came to look for anyone with the same problem and discovered I had missed the release of version 2. So ...
Is it wise to upgrade?
Can I do everything in version 2 that I could with version 1?
Is the upgrade fairly mechanical? (Set options to enable capability, use new names for events)?
I can't find any guidance for upgrading in the hammer documentation, which is a shame.
Thanks
Brian

Answer 1

Well the simple answer is that "No I can't easily port my Hammer 1.x implementation to 2.0".
Below is a snippet of one of my HTPC JS files, that adds actions to a <div> containing a EPG listing of TV programmes. This works very well with 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 are a few things to note.
I only use one Hammer for the entire <div>, with delegation to each of the individual guideEpgProgramme sub-elements, so that when I touch a listed programme, the handler acts on that one sub-element.
This allows me to dynamically replace the contents of the <div> via Ajax (e.g. for another channel), with no need to re-register handlers.
The Record and Cancel button images are dynamically added and removed as needed and automatically gain the desired pre-registered actions.
The Hammer object is passed to a common utility function EnableDragScroll, which adds handlers for scrolling the (long, variable length) contents within the fixed size guideBrowserItems page area.
There are many instances of ReplacePane("guideBrowserItems", <NEW URL>) to dynamically alter the contents of the <div> without affecting the rest of the page or the script.
And this is just one of the 30+ different Hammer instance with corresponding handling.
None of this way of working appears to be possible in Hammer 2.0.
So for now I will stick with the old mechanisms.