1

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

Subject
  • 11
  • 3

0 Answers0