mobile.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. $(document).ready(function(){
  2. var large_desktop_container = 75.000;
  3. var desktop_container= 60.000;
  4. var tablet_container= 48.000;
  5. var large_mobile_container= 30.000;
  6. var mobile_only= tablet_container - 0.062;
  7. var no_mobile= tablet_container;
  8. var small_mobile_range= large_mobile_container;
  9. var media_mobile = window.matchMedia('(max-width:' + mobile_only + 'em)');
  10. var titlebar = document.getElementById("titlebar");
  11. var sidebar = document.getElementById("admin-sidebar");
  12. var overlay = document.getElementById("overlay");
  13. var mobile = {
  14. setup: function() {
  15. //add event listeners
  16. titlebar.addEventListener('click',mobile.titlebar_click);
  17. sidebar.addEventListener('click',mobile.sidebar_click);
  18. overlay.addEventListener('click',mobile.overlay_click);
  19. },
  20. teardown: function() {
  21. //remove event listeners
  22. titlebar.removeEventListener('click',mobile.titlebar_click);
  23. sidebar.removeEventListener('click',mobile.sidebar_click);
  24. overlay.removeEventListener('click',mobile.overlay_click);
  25. },
  26. titlebar_click: function(event){
  27. //titlebar on click - open sidebar (make sure not a button bar child)
  28. if(!$(event.target).parents('.button-bar').length>0){
  29. $(sidebar).toggle('slide');
  30. overlay.style.display = "inherit";
  31. }
  32. },
  33. sidebar_click: function(){
  34. //sidebar on click - close sidebar
  35. if(event.target == sidebar || event.target == selected[0]) {
  36. $(sidebar).toggle('slide');
  37. overlay.style.display = "none";
  38. }
  39. },
  40. overlay_click: function(){
  41. //overlay on click - close sidebar
  42. $(sidebar).toggle('slide');
  43. overlay.style.display = "none";
  44. }
  45. };
  46. var other = {
  47. setup: function() {
  48. if(sidebar && sidebar.style.display == 'none') {
  49. sidebar.style.display = 'block';
  50. }
  51. },
  52. teardown: function() {
  53. //teardown actions here please
  54. //console.log("Other teardown");
  55. },
  56. onClick: function(){
  57. //onclick event stuff here;
  58. //console.log("Other onClick");
  59. }
  60. };
  61. media_mobile.addListener(function(data) {
  62. if(data.matches) {
  63. other.teardown();
  64. mobile.setup();
  65. } else {
  66. mobile.teardown();
  67. other.setup();
  68. }
  69. });
  70. if (media_mobile.matches) {
  71. mobile.setup();
  72. } else {
  73. other.setup();
  74. }
  75. });