In-line edit enhancements re-align on show/resize/expand

stephenmcd · May 14, 2012 · faa736a · faa736a
1 parent 37f7ba6
commit faa736a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/mezzanine/core/static/mezzanine/js/editable.js b/mezzanine/core/static/mezzanine/js/editable.js
@@ -36,30 +36,37 @@ $(function($) {
     })
 
     // Iterate through each of the editable areas and set them up.
-    $.each($('.editable-original'), function(i, editable) {
-        editable = $(editable);
-        // Position the editable area's edit link.
-        var link = editable.next('.editable-link');
-        link.css({top: editable.offset().top,
-            left: editable.offset().left - link.width() - 12});
-        // Apply the editable area's overlay handler.
-        var expose = {color: '#333', loadSpeed: 200, opacity: 0.9};
-        var overlay = {expose: expose, closeOnClick: true, close: ':button'};
-        link.overlay(overlay);
-        // Position the editable area's highlight.
-        link.next('.editable-highlight').css({
-            width: editable.width(), height: editable.height(),
-            top: editable.offset().top, left: editable.offset().left
-        });
-    });
+    function realign() {
+	    $.each($('.editable-original'), function(i, editable) {
+	        editable = $(editable);
+	        // Position the editable area's edit link.
+	        var link = editable.next('.editable-link');
+	        link.css({top: editable.offset().top,
+	            left: editable.offset().left - link.width() - 12});
+	        // Apply the editable area's overlay handler.
+	        var expose = {color: '#333', loadSpeed: 200, opacity: 0.9};
+	        var overlay = {expose: expose, closeOnClick: true, close: ':button'};
+	        link.overlay(overlay);
+	        // Position the editable area's highlight.
+	        link.next('.editable-highlight').css({
+	            width: editable.width(), height: editable.height(),
+	            top: editable.offset().top, left: editable.offset().left
+	        });
+	    });
+    }
+
+	realign();
 
     // Show/hide the editable area's highlight when mousing over/out the of
     // the edit link.
-    $('.editable-link').mouseover(function() {
-        $(this).next('.editable-highlight').show();
+    $('.editable-link').hover(function(e) {
+    	$(this).next('.editable-highlight').show();
+    }, function(e) {
+    	$(this).next('.editable-highlight').hide();
     });
-    $('.editable-link').mouseout(function() {
-        $(this).next('.editable-highlight').hide();
+
+    $('.editable-original').on('resize', function(e) {
+    	realign();
     });
 
     // Add the toolbar HTML and handlers.

diff --git a/mezzanine/core/static/mezzanine/js/jquery.ba-resize.min.js b/mezzanine/core/static/mezzanine/js/jquery.ba-resize.min.js
diff --git a/mezzanine/core/templates/includes/editable_loader.html b/mezzanine/core/templates/includes/editable_loader.html
@@ -12,5 +12,6 @@
 </script>
 <script src="{{ STATIC_URL }}mezzanine/js/jquery.tools.js"></script>
 <script src="{{ STATIC_URL }}mezzanine/js/jquery.form.js"></script>
+<script src="{{ STATIC_URL }}mezzanine/js/jquery.ba-resize.min.js"></script>
 <script src="{{ STATIC_URL }}mezzanine/js/editable.js"></script>
 {% endif %}