How to detect jQuery mmenu close event

A few days ago, I was trying jQuery mmenu. I had a close button (called #mmenu-btn) that changed shape between open and close states and I wanted to make sure that it will never get stuck in a state different than the desired one.

    

After some reading in the mmenu docs about events and configurations, and after playing a lot with the button and mmenu on desktop and mobile, I had two states to cover:
1- An event is triggered by code (mmenu API): In this case, it is my code, so I can handle it.
2- The user clicks/touches the part outside the mmenu. In this case, the mmenu does not tell me that it is closing now.

For the second case, I found a nice solution that depends on how mmenu works. When mmenu opens, there is a created overlay called #mm-blocker that covers the part outside the menu. When this overlay is clicked, the mmenu is closed. So what I did was to bind the click event (and other similar events) of this #mm-blocker and do whatever I want to change the state of my close button.

// if user clicks outside the mmenu, change the state of mmenu-btn
$('#mm-blocker').on('click mousedown touchstart', function() {
  $('#mmenu-btn').removeClass('close');
});

This was my little trick. I hope it helps.

Nginx + Slim Framework + phpMyAdmin on Ubuntu

Yesterday I was giving Slim Framework a test ride on my Ubuntu machine. But the machine was not ready with Nginx, or phpMyAdmin (I needed it to check the output of an ORM called RedBean). So I'm writing what I did exactly for my reference and for other's benefit.

First, in case you don't have any of the following packages, go ahead and do it

Installations:

Install MySQL

sudo apt-get install mysql-server php5-mysql

and remember your root password you will enter in the installation process.

Install Nginx

sudo apt-get install nginx

Install PHP-FPM (PHP FastCGI Process Manager)

sudo apt-get install php5-fpm

Install phpMyAdmin

sudo apt-get install phpmyadmin

During installation, you will be asked to choose your web server (apache2/lighttpd). But since we will use Nginx, just press the TAB key then Enter. Then you will be asked if you want to proceed with phpMyAdmin database configurations, choose yes and continue then enter your MySQL root password when asked to.

Configurations:

FPM

sudo nano /etc/php5/fpm/php.ini

or as I prefer

sudo gedit /etc/php5/fpm/php.ini

Find the line, cgi.fix_pathinfo=1. Uncomment it and change the 1 to 0.

Then

sudo gedit /etc/php5/fpm/pool.d/www.conf

and find the value given to listen =, to be used later in Nginx configuration.
It should be /var/run/php5-fpm.sock or 127.0.0.1:9000. 

Now restart fpm

sudo service php5-fpm restart

Nginx

Now let's configure Nginx for both phpMyAdmin and Slim Framework project.

sudo gedit /etc/nginx/sites-enabled/default

And add the configurations for both phpMyAdmin and the Slim Framework project.

server {
    listen 80;
    server_name phpmyadmin.local;
    root /usr/share/phpmyadmin;
    index index.php;
    location / {
        try_files $uri $uri/ /index.html;
    }
    # pass the PHP scripts to FastCGI server listening on the php-fpm socket
    location ~ \.php$ {
        try_files $uri =404;
        include fastcgi_params;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;       
    }
}

server {
    listen 80;
    server_name slimtest.local;
    root /home/madly/slim;
    try_files $uri /index.php;
    # pass the PHP scripts to FastCGI server listening on the php-fpm socket
    location /index.php {
        fastcgi_connect_timeout 3s;     # default of 60s is just too long
        fastcgi_read_timeout 10s;       # default of 60s is just too long
        include fastcgi_params;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;      
    }
}

Now let's restart Nginx server to apply the changes

sudo service nginx restart

Notes on these server configs:

1- The fastcgi_pass value is set to unix:/var/run/php5-fpm.sock because of the value I mentioned earlier in fpm configs. It may be 127.0.0.1:9000.

2- I chose to listen to port 80 but with different server names. So I must edit my hosts file

sudo gedit /etc/hosts

and add these two lines

127.0.0.1 phpmyadmin.local
127.0.0.1 slimtest.local 

3- During my tests with these configs, I had the css/img files accessible in my project with paths like

<link rel="stylesheet" type="text/css" href="/css/main.css">

by having a project structure like this

A problem I had:
The following day I had a problem with a project giving me the page "no input file specified". After inspecting the "/var/log/nginx/error.log" file, I found "(13: Permission denied)" errors. So I had to add extra permissions to the project:

chmod -R 755 ./