UPDATE: while I was pressing enter in StackOverflow is accidentally got submitted! Updating the Post at the moment
Update 2: complete post finished
I currently have a problem combining Javascript with jQuery in Electron.
I am running javascript most of the time, but to give the app a more native feeling I discovered smoothState.js
. It works as expected but for some reason it breaks all my other JS code if it's activated.
Take for example the following snippet in my HTML:
<div id="title-bar">
<div id="title-bar-btns">
<a id="min-btn"><img src="../Resources/Minimize_button.svg" height="25px" width="25px" /></a>
<a id="max-btn"><img src="../Resources/Maximize_button.svg" height="25px" width="25px" /></a>
<a id="close-btn"><img src="../Resources/Cross_button.svg" height="25px" width="25px" /></a>
</div>
</div>
With the following JS code:
minimizeButton.addEventListener('click', function (event) {
console.info('lol');
var window = remote.getCurrentWindow();
window.minimize();
});
maximizeButton.addEventListener('click', function (event) {
var window = remote.getCurrentWindow();
if (!window.isMaximized()) {
window.maximize();
} else {
window.unmaximize();
}
});
closeButton.addEventListener('click', function (event) {
var window = remote.getCurrentWindow();
window.close();
});
This works whenever smoothState is not activated (or just commented out of the code). However when smoothState is triggered, none of my normal JS code works anymore. I have a lot of buttons that rely on JS like the example above.
Jquery is imported as follows (it's installed via npm):
window.$ = window.jQuery = require('jquery');
And the code for smoothState is just a small variation of an example:
window.$(document).ready(function(){
'use strict';
var $page = window.$('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 4,
onStart: {
duration: 100, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
So, if there is a possibility can I combine the use of smoothState.js, jQuery and normal JS without breaking one another?\
Edit: You can also use this gist for reference: https://gist.github.com/Subject4S/c1b2c79db929c73ca3876ef4b59f90fe