Develop Reference

How to use events in NanoGallery2's API

I'm trying to use NanoGallery2 in my web application and it's nearly fantastic, but a couple of glaring omissions from the API (e.g. handling the display of image information) and the idiosyncratic documentation are driving me crazy.
Anyway, the API documentation lists a number of available events and callbacks. I have no trouble using the callbacks to trigger my own functionality, e.g.
$("#nanogallery2").nanogallery2({
items: images,
fnImgDisplayed: onImageDisplayed,
"lightboxNextImage.nanogallery2": onImageDisplayed,
thumbnailHoverEffect2: "scale120|labelSlideUp|toolsAppear",
});
function onImageDisplayed() {
alert("Image Displayed");
}
However, I cannot for the life of me figure out how to trigger my own functionality when any of the events fire. I'm pretty certain that I'm doing it wrong, but no variation I've tried works. I'm particularly interested in the lightboxNextImage and lightboxPreviousImage events. In the documentation all of the event names are listed with a .nanogallery2 suffix (e.g. lightboxNextImage.nanogallery2) so I'm guessing they aren't used in the same way as callbacks but I've tried everything I can think of. Things I've tried unsuccessfully:
$("#nanogallery2").nanogallery2({
items: images,
"lightboxNextImage.nanogallery2": onImageDisplayed,
thumbnailHoverEffect2: "scale120|labelSlideUp|toolsAppear",
});
function onNextImage() {
alert("Next Image")
}
$("#nanogallery2").nanogallery2({
items: images,
lightboxNextImage: onImageDisplayed,
thumbnailHoverEffect2: "scale120|labelSlideUp|toolsAppear",
});
function onNextImage() {
alert("Next Image")
}
$("#nanogallery2").nanogallery2({
items: images,
lightboxNextImage.nanogallery2: onImageDisplayed,
thumbnailHoverEffect2: "scale120|labelSlideUp|toolsAppear",
});
function onNextImage() {
alert("Next Image")
}
That last one even throws up IntelliSense errors because of the period in the key name, but I was getting desperate.
Can anyone put me out my misery? I've made a Codepen here in which I've been trying my various fruitless methods.

As I suspected, I was being completely stupid and this issue only arose because it's midnight and I'm tired. For the benefit of any other tired soul finding their way here, the solution is to add an event listener to the code like this:
$("#nanogallery2").on("lightboxNextImage.nanogallery2", function () {
alert("Next Image");
});
This uses jQuery but since NanoGallery2 is a jQuery plugin that shouldn't be a problem. I've created an updated Codepen with the working solution here.
This came to me 30 seconds after posting the question. Always the way, isn't it?

Velocity "fadeIn" Issue with Version 2.0.0+ (including 2.0.5)

I am a new programmer of JS. I'm trying to learn some HTML animations on JS and I found an amazing package called "VelocityJS". But when I use the
$ele.velocity("fadeIn")
My chrome keeps throwing an error:
VelocityJS: First argument (fadeIn) was not a property map, a known action, or a registered redirect. Aborting.
Now in the official website,
Chapter "Command" - "fadeIn and fadeOut", there are 2 examples including the usage. But as far as I tested, It only works for the version under 1.5.0.
I wish I can be told if there's any substitution for this after version 2.0.0 (also called Velocity V2)?
And In Chapter "Basics: Performance", it's told that Never use jQuery's $.animate() and $.fade() functions. They slow everything else down, including other animation libraries.
JS FILE
try {
$(test).velocity("fadeIn", { duration: 1500 }).velocity("fadeOut", { delay: 500, duration: 1500 });
} catch {}
HTML FILE
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js"></script>
<div id='test' style="background-color:black">
some place holder
</div>
copy and past the file above to the example at codepen.io
THIS GIVES THE RIGHT OUTPUT.
but the Velocity version of this page is
https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js
As I want to change the "marginTop" property, I need to use a later version.
But I cannot find any documentation on the latest version.
With version 1.5.0, neither of the "marginTop" or "margin-top" works.
With version 2.0.0 - 2.0.5,
$(elementID).velocity("fadeIn",{duration:1000})
has no effect.
Fixing either one is fine for me so far.
Thanks in advance.

Velocity V2 is in beta yet. You could always use direct CSS attributes manipulation with:
element.velocity({
p: { opacity: 1 },
o: { duration: 1500 }
}).velocity({
p: { opacity: 0 },
o: { delay: 500, duration: 1500 }
});
The documentation on for V2 is not maintained on the main site yet. You should instead refer for the docs in the Github wiki

Testing D3.js drag events with Cypress.js

I have an SVG object which uses d3-zoom for zoom and pan functionality. It works flawlessly but the problem showed up when I started to work on integration tests using Cypress.js.
I tried using standard mouse events on the svg element, to simulate drag behavior:
cy.get('svg')
.trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', { position: 'left' })
.trigger('mouseup', { position: 'left', force: true });
The example above is taken from the Cypress drag and drop recipe, and it produces the following error in the nodrag.js file:
cannot read property document of undefined
Below you can see where the error occurs (view is undefined):
__webpack_exports__["default"] = (function(view) {
var root = view.document.documentElement,
...
I spent a lot of hours trying to trigger the event in another way, but without a success - like trying the snippet above with the svg container.
Please keep in mind that I cannot access any d3.js package from the Cypress test because it's imported as an NPM package in a React application.
Thank you in advance for you help!

I could only arrive at a partial answer before I had to move on, but perhaps this can help you, or someone else, find the ultimate solution.
To remedy the error, a view property must be provided for mousedown. Providing window, like this, allowed the D3 methods to fire properly:
cy.get('svg')
.trigger('mousedown', { which: 1, force: true, view: window }) // <-- here
.trigger('mousemove', { position: 'left', view: window }) // <-- here
.trigger('mouseup', { position: 'left', force: true });
However, no dragging or movement occurred during the test run, and other questions emerged from there. Starting with... Is this the right context to send along with the event? It seemed so, since window seems to be the only context that has the property chain that D3 anticipates:
view.document.documentElement
Or is that an anti-pattern... a code smell?
Running down those subsequent questions led to a few observations that seemed to have significance.
The first concerns how D3 handles mouse and drag events. D3 has numerous event listeners and callbacks that override standard events and their respective handlers.
The second, is that iframes are in play with the Cypress test runner.
Could it be that Cypress's programmatically triggered events are firing properly in the Cypress iframe, but due to D3's aggressive event handling, the translation of those events into the application iframe are getting lost? Especially considering that manually dragging a circle in the testing viewport worked fine.
Which, again, leads back to:
Are the programmatically triggered events not being called in the correct context?
Are those events somehow being swallowed by or colliding with D3's event handlers?
I selected the Zoomable Force Directed Graph as my D3 subject, inside of a simple Ember application, for researching this question. It perfectly reproduced the error mentioned, so it definitely seems to be a D3 + Cypress challenge, and unrelated to the front-end framework.
I hope this effort is helpful.
Continued...
After some further reading – Cypress's Trade-offs, and particularly, their open pull request Support for Native Browser Events – it seems likely that the event handling overrides within D3 are not yet fully reconcilable within Cypress. Simpler implementations, like those detailed in the drag and drop example, do not present the event handling challenges introduced by a 3rd party library like D3. However, this support does appear to be under development within the Cypress team.

Try this:
cy.window().then(win => {
cy.get('svg')
.trigger('mousedown', {
which: 1,
force: true,
view: win,
})
.trigger('mousemove', {
clientX: 300,
clientY: 500,
force: true,
})
.trigger('mouseup', {
force: true,
view: win,
});
});
Referencing Jennifer Shehane's answer in this GitHub issue, the answer to the cannot read property document of undefined part is to plug the window object into view in the trigger options. The issue mentioned in jacefarm's answer, where no movement occurred, seems to be resolved by specifying clientX/clientY rather than using positions relative to the selected element.

I used a little bit different from your code so you can try
cy.get('svg')
.trigger('mousedown', { which: 1 })
.trigger('dragstart', {})
.trigger('drag', {});

FWIW I had this same issue and using this library allowed me to interact with the D3 elements: https://github.com/dmtrKovalenko/cypress-real-events

Custom Unobtrusive Validation Method Not Firing as Per Documentation

I've been attempting to implement a ASP.NET MVC custom validation method. Tutorials I've used such as codeproject explain that you add data-val-customname to the element. Then jQuery.validate.unobtrusive.js then uses the third segment of the attribute
data-val-<customname>
as the name of the rule, as shown below.
$.validator.addMethod('customname', function(value, element, param) {
//... return true or false
});
However I just can't get the customname method to fire. By playing around I have been able to get the below code to work, but according to all the sources I've read Unobtrusive validation should not work like this.
$.validator.addMethod('data-val-customname', function(value, element, param) {
//... return true or false
});
I've posted an example of both methods
jsfiddle example
Any help would be much appreciated
I've updated my question hopefully to make clearer.

I have finally found got there in the end, but still feels like too much hard work and therefore I've probably got something wrong. Initial I was scuppered by a bug in Chrome Canary 62 which refused to allow the adding of a custom method.
My next issue was having to load jQuery, jQuery.validate and jQuery.validate.unobtrusive in the markup and then isolate javascript implementation in a ES6 class. I didn't want to add my adaptors before $().ready() because of my class structure and loading of the app file independent of jQuery. So I had to force $.validator.unobtrusive.parse(document);.
Despite this I was still having issues and finally debugged the source code and found that an existing validator information that is attached to the form was not merging with the updated parsed rules, and essentially ignoring any new adaptors added.
My final work around and admit feels like I've done too much, was to destroy the initial validation information before my forced re-parse.
Here is the working jsfiddle demo
Here is some simplified code
onJQueryReady() {
let formValidator = $.data(document.querySelector('form'), "validator" );
formValidator.destroy();
$.validator.unobtrusive.adapters.add("telephone", [], function (options) {
options.rules['telephone'] = {};
options.messages['telephone'] = options.message;
});
$.validator.unobtrusive.parse(document);
$.validator.addMethod("telephone", this.handleValidateTelephoneNumber);
}

Game with AngularJS/Phaser.io and destroy method

I am making a game with a friend and we have some problems with AngularJS and Phaser.
So, we have a page named game, it has a template, a controller and a factory.
There is a page who "redirect" us to the game page (just with a link).
In the template :
<div id="game"></div>
Back
In the factory :
// function prealod and create ....
init: function(data) {
game = new Phaser.Game(width, height, Phaser.AUTO, 'game', { preload: preload, create: create });
},
destroy: function() {
game.destroy();
}
In the controller :
gameFact.init();
$scope.$on('$destroy', function() {
gameFact.destroy();
});
Of course, there are more code.
The problem is simple :
If i come to the game page, Phaser load very well the game (we just display a map with sprites).
After that, i click on the back button and reclick on the link to return to the game page.
If i do that 7 times, there is an error in the console :
Uncaught SyntaxError: Failed to construct 'AudioContext': number of hardware contexts reached maximum (6).
And after few seconds, i have this error :
Uncaught TypeError: Cannot read property 'gain' of undefined
I already search on the web, and the solution are :
Use an iFrame (I really don't think that iFrame is a good solution)
Use the destory method (it doesn't work)
Do you know how to solve this problem ?
If you have any ideas, don't hesitate. Even if you use another game framework (maybe it works the same way).

I had a similar issue, it seems that destroy() doesn't work correctly (issue discussed here) with the current version:
Could you please test out the dev branch, which has lots of fixes for this in.
I resolved the issue by using the dev branch (available here)

You need to use an Angular directive and using the navigation event to do that, check my example: http://market.ionic.io/plugins/ionphaser
Regards, Nicholls

There's a new WebComponent to integrate Phaser with any other Framework https://github.com/proyecto26/ion-phaser