search

smnedelko / PixelAdmin

Issue tracker repository
6 stars 0 forks source link

Using PxNav with turbolinks #9

Closed ryush00 closed 7 years ago

ryush00 commented 7 years ago

Hi. I want to us to use PxAdmin with turbolinks(https://github.com/turbolinks/turbolinks). Turbolinks modifies only the body tag of the site, which makes the site faster.

PxNav only works when the page is loaded. If you change the page, the menu will no longer be pressed.

I am currently looking for a solution. Do you have any idea to clear this problem?

Thanks

smnedelko commented 7 years ago

Hi ryush00,

First of all, please replace the js/src/pixeladmin.js file with the next file (screen size detection fix): pixeladmin.js.zip , and recompile sources.

turbolinks is an interesting tool, but it has some restrictions.

You need destroy all plugins before screen change. It's important because some plugins listen for global window.onResize event, which is not removed on the page change. So you can get a huge memory leak in a small amount of time. You can use turbolinks:load and turbolinks:before-cache events.

!! Be careful when you insert javascript into the <body> tag.

Here the example: https://gist.github.com/smnedelko/6b4e6a3f256e587d8b309f429365ea1a

For example, usage of wizard plugin on the page:

<script>
  // Do not create global vars
  (function() {
    var wizardInit = function() {
      $('.wizard').pxWizard();
    };

    var wizardDestroy = function() {
      $('.wizard').pxWizard('destroy');

      // Remove event listeners
      $(document).off('turbolinks:load', wizardInit);
      $(document).off('turbolinks:before-cache', wizardDestroy);
    };

    $(document).on('turbolinks:load', wizardInit);
    $(document).on('turbolinks:before-cache', wizardDestroy);
  })();
</script>

or 

<script>
  // Do not create global vars
  (function() {
    var id = pxUtil.generateUniqueId();

    $(document).on('turbolinks:load.yourapp-' + id, function() {
      $('.wizard').pxWizard();
    });

    $(document).on('turbolinks:before-cache.yourapp-' + id, function() {
      $('.wizard').pxWizard('destroy');

      // Remove event listeners
      $(document).off('turbolinks:load.yourapp-' + id);
      $(document).off('turbolinks:before-cache.yourapp-' + id);
    });
  })();
</script>

NOTE: Javascript inside body tag can be executed twice on second page visit because caching. You can change this behaviour by adding <meta name="turbolinks-cache-control" content="no-preview">