- Issue created by @sdsheridan
- 🇨🇦Canada sdsheridan Toronto
OK, i think i figured out why it wasn't working - i appear to have pulled the wrong hammer.js version from github. After pulling the 2.0.8 version, everything started working.
I'm trying to use hammer.js to capture swipes and translate those into clicks on previous and next links that are furnished by the entity pager module. The links are there, they work, and everything else on the site is working as expected. I've tried to implement hammer.js, but while my custom js is loading that refers to hammer.js, nothing is happening. Any help as to what i may be doing wrong would be great.
Drupal 10 site
Latest hammer.js (2.0.8) in /libraries/hammer.js/
my .libraries.yml file:
page-swipe:
js:
js/page-swipe.js: {}
dependencies:
- core/jquery
- core/drupal
- core/once
hammerjs:
remote: http://hammerjs.github.io/
version: 2.0.8
license:
name: MIT
url: https://github.com/hammerjs/hammer.js/blob/master/LICENSE.md
gpl-compatible: true
js:
/libraries/hammer.js/hammer.min.js: { minified: true }
my custom page-swipe.js
(function ($, Drupal, once) {
'use strict';
Drupal.behaviors.mymodBehavior = {
attach: function (context, settings) {
once('mymod-page-swipe', document.getElementById('main'), context).forEach(function() {
console.log('page-swipe loaded');
var mymod_gesture_listener = new Hammer(document.getElementById('main'));
console.log(mymod_gesture_listener);
// listen to events...
mymod_gesture_listener.on("swipeleft swiperight", function(ev) {
console.log('caught ' + ev.type + ' (outside of switch)');
switch ( ev.type ) {
case 'swipeleft':
console.log('caught ' + ev.type);
document.querySelector('.entity-pager-item-prev a').click();
break;
case 'swiperight' :
console.log('caught ' + ev.type);
document.querySelector('.entity-pager-item-next a').click();
break;
};
});
});
},
};
} (jQuery, Drupal, once));
my code inside hook_node_view_alter
function mymod_node_view_alter(array &$build, \Drupal\Core\Entity\EntityInterface $entity, \Drupal\Core\Entity\Display\EntityViewDisplayInterface $display) {
if ( $entity->bundle() == 'article' ) {
if ( $build['#view_mode'] == 'full' ) {
$build['#attached']['library'][] = 'mymod/hammerjs';
$build['#attached']['library'][] = 'mymod/page-swipe';
}
}
}
I can see all of hammer.js, hammer.min.js, and page-swipe.js in the console. And I get the console message that page-swipe.js has loaded, along with the dump of mymod_genture_listener in the console. So the scripts are being loaded and are executing to a point. However, the other console log messages do not appear in the console, so I'm not sure what to try next.
Active
1.0
Documentation
OK, i think i figured out why it wasn't working - i appear to have pulled the wrong hammer.js version from github. After pulling the 2.0.8 version, everything started working.