Work on the menu

1 files changed, 42 insertions, 0 deletions

diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
new file mode 100644
index 00000000..c401af1d
--- /dev/null
+++ b/tpl/default/js/shaarli.js
@@ -0,0 +1,42 @@
+/**
+ * Handle responsive menu.
+ * Source: http://purecss.io/layouts/tucked-menu-vertical/
+ */
+(function (window, document) {
+    var menu = document.getElementById('shaarli-menu'),
+        WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
+
+    function toggleHorizontal() {
+        [].forEach.call(
+            document.getElementById('shaarli-menu').querySelectorAll('.menu-transform'),
+            function(el){
+                el.classList.toggle('pure-menu-horizontal');
+            }
+        );
+    };
+
+    function toggleMenu() {
+        // set timeout so that the panel has a chance to roll up
+        // before the menu switches states
+        if (menu.classList.contains('open')) {
+            setTimeout(toggleHorizontal, 500);
+        }
+        else {
+            toggleHorizontal();
+        }
+        menu.classList.toggle('open');
+        document.getElementById('menu-toggle').classList.toggle('x');
+    };
+
+    function closeMenu() {
+        if (menu.classList.contains('open')) {
+            toggleMenu();
+        }
+    }
+
+    document.getElementById('menu-toggle').addEventListener('click', function (e) {
+        toggleMenu();
+    });
+
+    window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
+})(this, this.document);
\ No newline at end of file