Add auto positioning menu

2 files changed, 71 insertions, 78 deletions

diff --git a/js/files.js b/js/files.js
index 06dba1a..d9aeccc 100644
--- a/js/files.js
+++ b/js/files.js
@@ -3,6 +3,11 @@ var RightClick = RightClick || {};
 (function(window, $, RightClick, undefined) {
     'use strict';
 
+    if (!RightClick) {
+        console.log('The RightClick app is recommanded to have context menus');
+        return false;
+    }
+
     var availableApplications = [];
 
     $.get('/apps/files_rightclick/ajax/applications.php', function (data) {
@@ -14,10 +19,8 @@ var RightClick = RightClick || {};
       }
     });
 
-    new RightClick.Menu($('tbody[id*=fileList]'), function (event) {
+    new RightClick.Menu($('tbody[id*=fileList]'), function (event, currentFile, delimiter) {
         var appName = 'files_rightclick';
-        var currentFile = $(event.target).closest('tr');
-        var leftToRemove = currentFile.find('.selection').width();
         var options = new RightClick.Options();
 
         if ($(event.target).parent().hasClass('fileactions') || $(event.target).parent().parent().hasClass('fileactions')) {
@@ -31,8 +34,6 @@ var RightClick = RightClick || {};
         var menu = currentFile.find('.fileActionsMenu');
         var menuStyle = $('style.rightClickStyle');
         var selectedActionsList = $('.selectedActions');
-        var top = (event.pageY - currentFile.offset().top + (currentFile.height() / 4));
-        var left = event.pageX - currentFile.offset().left - leftToRemove - (menu.width() / 2) - 4;
         var generateNewOption = function (action, icon, text, onClick, prepend) {
             if (prepend === undefined)
                 prepend = true;
@@ -53,63 +54,11 @@ var RightClick = RightClick || {};
                 options.prepend(option);
             else
                 options.append(option);
-
-            /*
-            if (prepend === undefined)
-              prepend = true;
-
-            var newOption = $('<li><a href="#" class="menuitem action permanent" data-action="' + action + '"><span class="icon icon-' + icon + '"></span><span>' + text + '</span></a></li>').on('click', function (event) {
-                event.stopPropagation();
-                event.preventDefault();
-
-                menu.remove();
-                currentFile.removeClass('mouseOver');
-                currentFile.removeClass('highlighted');
-                currentFile.find('.action-menu').removeClass('open');
-
-                onClick();
-            });
-
-            if (prepend) {
-                menu.find('ul').prepend(
-                    newOption
-                );
-            }
-            else {
-                menu.find('ul').append(
-                    newOption
-                );
-            }*/
         };
 
         //menu.addClass('rightClickMenu');
         menu.css('visibility', 'hidden');
-
-        if (left < (-leftToRemove)) {
-            left = (-leftToRemove);
-
-            if ((event.pageX - currentFile.offset().left) <= 11)
-              menuStyle.text('.fileActionsMenu.rightClickMenu{border-top-left-radius:0} .fileActionsMenu.rightClickMenu:after{left:0}');
-            else
-              menuStyle.text('.fileActionsMenu.rightClickMenu:after{transform:translateX(-50%);left:' + (event.pageX - currentFile.offset().left) + 'px}');
-        }
-        else if (left + menu.width() + leftToRemove + 10 > currentFile.width()) {
-            left = currentFile.width() - leftToRemove - menu.width() - 10;
-
-            if ((event.pageX - currentFile.offset().left - leftToRemove - left) >= (menu.width() - 11))
-                menuStyle.text('.fileActionsMenu.rightClickMenu{border-top-right-radius:0} .fileActionsMenu.rightClickMenu:after{right:0}');
-            else
-                menuStyle.text('.fileActionsMenu.rightClickMenu:after{transform:translateX(-50%);left:' + (event.pageX - currentFile.offset().left - leftToRemove - left) + 'px}');
-        }
-        else
-            menuStyle.text('.fileActionsMenu.rightClickMenu:after{transform:translateX(-50%);left:' + (menu.width() / 2) + 'px}');
-
-        menu.css({
-            right: 'auto',
-            top: top,
-            left: left
-        });
-
+        
         if (currentFile.hasClass('selected')) {
             menu.find('ul').html('');
 
@@ -210,5 +159,7 @@ var RightClick = RightClick || {};
         }
 */
         return options;
-    }, $('#controls').css('z-index') - 1);
+    }, $('#controls').css('z-index') - 1).setContext(function (event) {
+        return $(event.target).closest('tr');
+    });
 })(window, jQuery, RightClick);
diff --git a/js/script.js b/js/script.js
index 9dd613d..4cb88da 100644
--- a/js/script.js
+++ b/js/script.js
@@ -94,7 +94,9 @@ var RightClick = RightClick || {};
         this.subOptions = subOptions;
 
         this.generate = function () {
-            var a = $('<a>');
+            var a = $('<a>', {
+                'class': 'action action-' + name
+            });
             var iconSpan = $('<span>', {
                 'class': this.icon
             });
@@ -112,9 +114,7 @@ var RightClick = RightClick || {};
                 textSpan.css('cursor', 'default');
             }
 
-            return $('<li>', {
-                'class': 'action action-' + name
-            }).on('click', onClick).append(a.append(iconSpan).append(textSpan));
+            return $('<li>').on('click', onClick).append(a.append(iconSpan).append(textSpan));
         };
 
         this.isDisabled = function () {
@@ -123,24 +123,32 @@ var RightClick = RightClick || {};
     }
 
     exports.menus = [];
-    exports.Menu = function (context, options, zIndex, onClose) {
-        this.context = $(context);
+    exports.Menu = function (delimiter, options, zIndex, onClose) {
+        this.delimiter = $(delimiter);
+        this.context = undefined;
         this.options = options || new exports.Options();
         this.params = {
             'z-index': zIndex || 100
         };
         this.onClose = onClose;
         this.isOpened = false;
-        var menu = this;
 
-        if (context === undefined)
+        if (delimiter === undefined)
             return undefined;
 
+        // Allow onClick function to access to menu data
+        var menu = this;
+
+        this.setContext = function (context) {
+            this.context = context;
+        }
+
         var onClick = function (event) {
             event.stopPropagation();
             event.preventDefault();
 
-            var $this = $(this);
+            var delimiter = $(this);
+            var context = menu.context;
             var options = menu.options;
             var params = menu.params;
 
@@ -150,8 +158,12 @@ var RightClick = RightClick || {};
             menu.attachedEvent = event;
             menu.isOpened = true;
 
+            if (typeof context === "function")
+                context = context(event);
+            context = (context === undefined) ? delimiter : $(context[0]);
+
             if (typeof options === "function")
-                options = options(event);
+                options = options(event, context, delimiter);
 
             if (options.getNbrOfOptions() === 0)
                 return;
@@ -161,10 +173,34 @@ var RightClick = RightClick || {};
                 'class': 'bubble open'
             }).append(options.generate());
 
-            div.appendTo($this);
+            div.appendTo(context);
+
+            var top = event.pageY + context.position().top - context.offset().top + 15;
+            var left = event.pageX + context.position().left - context.offset().left - (div.width() / 2) - 5;
+            var arrow = (div.width() / 2);
+            var space = div.outerWidth(true) - div.innerWidth();
+
+            if (left < 0) {
+                arrow += left;
 
-            var top = event.pageY + $this.position().top - $this.offset().top + 15;
-            var left = event.pageX + $this.position().left - $this.offset().left - (div.width() / 2) - 5;
+                if (arrow < space) {
+                    arrow = space;
+                    div.css('border-top-left-radius', 0);
+                }
+
+                left = 0;
+            }
+            else if (left + div.outerWidth(true) >= context.width()) {
+                var newLeft = context.width() - div.outerWidth(true) - 1;
+                arrow += left - newLeft;
+
+                if (arrow > div.width() - space) {
+                    arrow = div.width() - space;
+                    div.css('border-top-right-radius', 0);
+                }
+
+                left = newLeft;
+            }
 
             div.css({
                 'top': top,
@@ -178,27 +214,33 @@ var RightClick = RightClick || {};
             if (optionsDisabled)
                 div.css('background-color', '#AAA');
 
-            $('style.rightClickStyle').text('#rightClickMenu:after{transform:translateX(-50%);left:' + (div.width() / 2) + 'px;' + (optionsDisabled || options.isFirstDisabled() ? 'border-bottom-color:#AAA;' : '') + '}');
+            $('style.rightClickStyle').text('#rightClickMenu:after{transform:translateX(-50%);left:' + arrow + 'px;' + (optionsDisabled || options.isFirstDisabled() ? 'border-bottom-color:#AAA;' : '') + '}');
 
             return false;
         }
 
         this.close = function () {
-            var opened = this.context.find('#rightClickMenu');
+            var openedMenu = this.delimiter.find('#rightClickMenu');
 
-            if (opened.length > 0) {
+            if (openedMenu.length > 0) {
                 if (this.onClose) {
-                    if (this.onClose(this.attachedEvent, this.context) === false)
+                    if (this.onClose(this.attachedEvent, this.context, this.delimiter) === false)
                         return false;
                 }
 
-                opened.remove();
+                openedMenu.remove();
             }
 
             return true;
         }
 
-        this.context.contextmenu(onClick);
+        this.setAlsoOnLeftClick = function () {
+            this.delimiter.on('click', onClick);
+
+            return this;
+        }
+
+        this.delimiter.contextmenu(onClick);
         exports.menus.push(this);
     };