swipe left on sidemenu

Post Reply
spadovan
Posts: 116
Joined: 05 Jun 2013, 12:04

13 Feb 2017, 11:06

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

User avatar
aragorn
Posts: 2366
Joined: 29 Jun 2013, 12:38

13 Feb 2017, 14:51

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;

Code: Select all

...
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');
            }
        });
       ....
},
...

spadovan
Posts: 116
Joined: 05 Jun 2013, 12:04

14 Feb 2017, 08:39

Thank you for your precious suggestion.

Your code seemed not to work properly, so i ended up writing this code:

Code: Select all

...
		$(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

User avatar
aragorn
Posts: 2366
Joined: 29 Jun 2013, 12:38

14 Feb 2017, 09:25

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

Code: Select all

// 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();
         }
   });
    
});

spadovan
Posts: 116
Joined: 05 Jun 2013, 12:04

14 Feb 2017, 10:46

Perfect !

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

User avatar
aragorn
Posts: 2366
Joined: 29 Jun 2013, 12:38

14 Feb 2017, 11:11

You're welcome! Thanks for the update!

spadovan
Posts: 116
Joined: 05 Jun 2013, 12:04

15 Feb 2017, 19:12

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

User avatar
aragorn
Posts: 2366
Joined: 29 Jun 2013, 12:38

16 Feb 2017, 14:13

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

I think to add your code into next realase ;)

Code: Select all

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

spadovan
Posts: 116
Joined: 05 Jun 2013, 12:04

17 Feb 2017, 08:50

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

User avatar
aragorn
Posts: 2366
Joined: 29 Jun 2013, 12:38

22 Feb 2017, 11:20

teşekkürler
- :) :) Rica ederim :)

Post Reply
  • Information
  • Who is online

    Users browsing this forum: marcotandrad and 1 guest