Add mobile styling

public/js/functions.js

@@ -80,29 +80,57 @@ $(function () {
       var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone());
       var pos = $menuItem.offset();
       submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
-      submenu.on( "mouseleave", function(){
+      submenu.on( "mouseleave", function() {
         $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
         $menuItem.removeClass('hover');
       } );
       $('body').append(submenu);
       submenu.children('ul.submenu').slideDown();
 
-      submenu.find('ul.submenu li.has_submenu').click(function(){
-        $(this).find('ul.submenu').slideToggle();
-        $(this).toggleClass('opened');
-      });
+      submenu.find('ul.submenu').subMenu({});
       openPlayerInNewScreen();
     });
   };
 
+  /**
+   * @param {object} _options
+   */
+  $.fn.subMenu = function (_options) {
+    var options = {
+      menuSubmenuClass: 'has_submenu'
+    };
+    $.extend(options, _options);
+    var $container = $(this);
+
+    $container.find('li.' + options.menuSubmenuClass + ' > a').click(function(e) {
+      e.preventDefault();
+      var $li = $(this).closest('li');
+      $li.children('ul.submenu').slideToggle();
+      $li.toggleClass('opened');
+    });
+  };
+
 }(jQuery));
 
 $(function () {
-  $('.menu, .mobile-menu').menu({});
+  $('.menu').menu({});
+  $('.mobile-menu').subMenu({});
+  $('.mobile_menu_button a').click(function() {
+    $('.mobile_menu_container').show();
+  });
+  $('.mobile_close_menu_button a').click(function() {
+    $('.mobile_menu_container').hide();
+  });
+  $('.mobile_menu_container').click(function(e){
+    var $target = $(e.target);
+    if(!$target.closest('#mobile_menu_nav').length &&
+      $('.mobile_menu_container').is(":visible")) {
+      $('.mobile_menu_container').hide();
+    }
+  });
 });
 
 $(function () {
-  console.log($(".prettyPhoto[rel^='prettyPhoto']"));
   $(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({
     show_title: false,
     slideshow: 3000,
@@ -111,6 +139,61 @@ $(function () {
   });
 });
 
+(function ($) {
+
+  /**
+   * @param {object} _options
+   */
+  $.fn.snapTo = function (_options) {
+    var options = {
+      elementClass: 'post'
+    };
+    $.extend(options, _options);
+    var $container = $(this);
+    var $elements = $container.find('.' + options.elementClass + ':visible');
+    var stopSnapTo = false;
+
+    var snapTimeout = null;
+    var snapHandler = function() {
+      if (!stopSnapTo) {
+        stopSnapTo = true;
+        var y = $container.scrollLeft();
+        $elements.each(function () {
+          var offset = $(this).offset();
+          if (offset.left > -(window.screen.width / 2) && offset.left < window.screen.width / 2) {
+            $container.animate({
+              scrollLeft: Math.round(y + offset.left) + 'px'
+            }, 300);
+            return false;
+          }
+        });
+        if (snapTimeout) {
+          clearTimeout(snapTimeout);
+        }
+        snapTimeout = setTimeout(function () {
+          stopSnapTo = false;
+        }, 500);
+      }
+    }
+    var snapToHandlerTimer = null;
+    var scrollHandler = function() {
+      if (snapToHandlerTimer) {
+        clearTimeout(snapToHandlerTimer);
+      }
+      snapToHandlerTimer = setTimeout(snapHandler, 300);
+    };
+
+    $container.on( "scroll", scrollHandler);
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-snapto]').each(function () {
+    $(this).snapTo($(this).data('snapto'));
+  });
+});
+
 (function ($) {
 
   /**