Board index Premium Layouts and Themes Omega Omega - PrimeFaces swipe left on sidemenu

swipe left on sidemenu

JSF and PrimeFaces version

Post 13 Feb 2017, 11:06

Posts: 69
It should be helpfull to hide sidebar on slide left on mobile devices, could you make it possible ?

I've tryed by myself, but including jquery-mobile.js has wrong side effects with navigation...


thanks

Simone
Primefaces 6.0.14, Mojorra 2.2.8, Wildfly 10.1.0, JDK 8

Post 13 Feb 2017, 14:51

Posts: 1927
I think you can use jquery Touch Swipe API; http://labs.rampinteractive.co.uk/touchSwipe/docs/

Exp;
After you add touch swipe plugin into your project, please try the following codes in layout.js;
...
bindEvents: function() {
        var $this = this;
        $(document.body).swipe({
            swipeLeft: function() {
                $this.menuButton.removeClass('active');
                $this.wrapper.removeClass('sidebar-active-m');
                $this.topbarIcons.removeClass('topbar-icons-visible');
            },
            swipeRight: function() {
                $this.menuButton.addClass('active');
                $this.wrapper.removeClass('sidebar-inactive-l').addClass('sidebar-active-m');
                $this.topbarIcons.removeClass('topbar-icons-visible');
            }
        });
       ....
},
...

Post 14 Feb 2017, 08:39

Posts: 69
Thank you for your precious suggestion.

Your code seemed not to work properly, so i ended up writing this code:
...
      $(this.sidebar).swipe({
         swipeLeft: function (event, direction, distance, duration, fingerCount) {
            $this.menuButton.click();
         }
      });
...


What do you think, is it a good solution ? Is it possible to leave layout.js clean and put this code elsewhere ?

thanks

Simone
Primefaces 6.0.14, Mojorra 2.2.8, Wildfly 10.1.0, JDK 8

Post 14 Feb 2017, 09:25

Posts: 1927
Thanks for the fix! I worked to close/open menu using swipeLeft/swipeRight on document.body. I think you only want to close menu.

Is it possible to leave layout.js clean and put this code elsewhere ?

- Yes. You can add this fix into new JS file. Exp;
//mycustomswipe.js
// Please add swipe.js codes

$( document ).ready(function() {
    var sidebar = $(document.body).children('.wrapper').children('.sidebar'),
    menuButton = $('#omega-menu-button');

    sidebar.swipe({
         swipeLeft: function (event, direction, distance, duration, fingerCount) {
              menuButton.click();
         }
   });
   
});

Post 14 Feb 2017, 10:46

Posts: 69
Perfect !

thank u very much
Primefaces 6.0.14, Mojorra 2.2.8, Wildfly 10.1.0, JDK 8

Post 14 Feb 2017, 11:11

Posts: 1927
You're welcome! Thanks for the update!

Post 15 Feb 2017, 19:12

Posts: 69
What about adding this behaviour in the standard omega layout ? So everyone could benefit of it ?
Primefaces 6.0.14, Mojorra 2.2.8, Wildfly 10.1.0, JDK 8

Post 16 Feb 2017, 14:13

Posts: 1927
Thanks for your suggestion! I'll add swipe feature into next release.

I think to add your code into next realase ;)

$(this.sidebar).swipe({
         swipeLeft: function (event, direction, distance, duration, fingerCount) {
            $this.menuButton.click();
         }
});

Post 17 Feb 2017, 08:50

Posts: 69
teşekkürler
Primefaces 6.0.14, Mojorra 2.2.8, Wildfly 10.1.0, JDK 8


Return to Omega - PrimeFaces