Fix tooltips on frontend editing

joomla · Nov 21, 2017 · a5d5697 · a5d5697
1 parent ab4555f
commit a5d5697
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 141 deletions.
diff --git a/media/system/js/frontediting.js b/media/system/js/frontediting.js
@@ -5,150 +5,37 @@
 
 /**
  * JavaScript behavior to add front-end hover edit icons with tooltips for modules and menu items.
- *
  */
 (function($) {
 
-	$.fn.extend({
-		/**
-		 * This jQuery custom method makes the elements absolute, and with true argument moves them to end of body to avoid CSS inheritence
-		 *
-		 * @param   rebase boolean
-		 * @returns {jQuery}
-		 */
-		jEditMakeAbsolute: function(rebase) {
-
-			return this.each(function() {
-
-				var el = $(this);
-				var pos;
-
-				if (rebase) {
-					pos = el.offset();
-				} else {
-					pos = el.position();
-				}
-
-				el.css({ position: "absolute",
-					marginLeft: 0, marginTop: 0,
-					top: pos.top, left: pos.left,
-					bottom: 'auto', right: 'auto'
-				});
-
-				if (rebase) {
-					el.detach().appendTo("body");
-				}
-			});
-
-		}
-	});
-
 	$(document).ready(function () {
 
-		// Tooltip maximal dimensions for intelligent placement:
-		var actualWidth = 200;
-		var actualHeight = 100;
-		// Tooltip smart tooltip placement function:
-		var tooltipPlacer = function(tip, element) {
-			var $element, above, below, boundBottom, boundLeft, boundRight, boundTop, elementAbove, elementBelow, elementLeft, elementRight, isWithinBounds, left, pos, right;
-			isWithinBounds = function(elementPosition) {
-				return boundTop < elementPosition.top && boundLeft < elementPosition.left && boundRight > (elementPosition.left + actualWidth) && boundBottom > (elementPosition.top + actualHeight);
-			};
-			$element = $(element);
-			pos = $.extend({}, $element.offset(), {
-				width: element.offsetWidth,
-				height: element.offsetHeight
-			});
-			boundTop = $(document).scrollTop();
-			boundLeft = $(document).scrollLeft();
-			boundRight = boundLeft + $(window).width();
-			boundBottom = boundTop + $(window).height();
-			elementAbove = {
-				top: pos.top - actualHeight,
-				left: pos.left + pos.width / 2 - actualWidth / 2
-			};
-			elementBelow = {
-				top: pos.top + pos.height,
-				left: pos.left + pos.width / 2 - actualWidth / 2
-			};
-			elementLeft = {
-				top: pos.top + pos.height / 2 - actualHeight / 2,
-				left: pos.left - actualWidth
-			};
-			elementRight = {
-				top: pos.top + pos.height / 2 - actualHeight / 2,
-				left: pos.left + pos.width
-			};
-			above = isWithinBounds(elementAbove);
-			below = isWithinBounds(elementBelow);
-			left = isWithinBounds(elementLeft);
-			right = isWithinBounds(elementRight);
-			if (above) {
-				return "top";
-			} else {
-				if (below) {
-					return "bottom";
-				} else {
-					if (left) {
-						return "left";
-					} else {
-						if (right) {
-							return "right";
-						} else {
-							return "right";
-						}
-					}
-				}
-			}
-		};
-
 		// Modules edit icons:
-
 		$('.jmoddiv').on({
 			mouseenter: function() {
-
 				// Get module editing URL and tooltip for module edit:
-				var moduleEditUrl = $(this).data('jmodediturl');
-				var moduleTip = $(this).data('jmodtip');
-                var moduleTarget = $(this).data('target');
+				var self = $(this);
+				var moduleEditUrl = self.data('jmodediturl');
+				var moduleTip = self.data('jmodtip');
+                var moduleTarget = self.data('target');
 
 				// Stop timeout on previous tooltip and remove it:
-				$('body>.btn.jmodedit').clearQueue().tooltip('dispose').remove();
+				$('btn.jmodedit').tooltip('dispose').remove();
 
 				// Add editing button with tooltip:
-				$(this).addClass('jmodinside')
-					.prepend('<a class="btn jmodedit" href="#" target="' + moduleTarget + '"><span class="icon-edit"></span></a>')
+				self.addClass('jmodinside')
+					.prepend('<a class="btn btn-link jmodedit" href="#" target="' + moduleTarget + '"><span class="fa fa-edit"></span></a>')
 					.children(":first").attr('href', moduleEditUrl).attr('title', moduleTip)
-					.tooltip({"container": false, html: true, placement: tooltipPlacer})
-					.jEditMakeAbsolute(true);
-
-				$('.btn.jmodedit')
-					.on({
-						mouseenter: function() {
-							// Stop delayed removal programmed by mouseleave of .jmoddiv or of this one:
-							$(this).clearQueue();
-						},
-						mouseleave: function() {
-							// Delay remove editing button if not hovering it:
-							$(this).delay(500).queue(function(next) {
-								$(this).tooltip('dispose').remove();
-								next();
-							});
-						}
-					});
+					.tooltip({container: $('.jmodedit').parent(), html: true, placement: 'auto'});
 			},
 			mouseleave: function() {
-
 				// Delay remove editing button if not hovering it:
-				$('body>.btn.jmodedit').delay(500).queue(function(next) {
-					$(this).tooltip('dispose').remove();
-					next();
-				});
+				$('.btn.jmodedit').remove();
+				$('.tooltip').tooltip('dispose');
 			}
 		});
 
 		// Menu items edit icons:
-
 		var activePopover = null;
 
 		$('.jmoddiv[data-jmenuedittip] .nav li,.jmoddiv[data-jmenuedittip].nav li,.jmoddiv[data-jmenuedittip] .nav .nav-child li,.jmoddiv[data-jmenuedittip].nav .nav-child li').on({
@@ -168,7 +55,7 @@
 				// Get tooltip for menu items from enclosing module
 				var menuEditTip = enclosingModuleDiv.data('jmenuedittip').replace('%s', itemids[1]);
 
-				var content = $('<div><a class="btn jfedit-menu" href="#" target="_blank"><span class="icon-edit"></span></a></div>');
+				var content = $('<div><a class="btn jfedit-menu" href="#" target="_blank"><span class="fa fa-edit"></span></a></div>');
 				content.children('a.jfedit-menu').prop('href', menuitemEditUrl).prop('title', menuEditTip);
 
 				if (activePopover) {
@@ -177,8 +64,7 @@
 				$(this).popover({html:true, content:content.html(), container:'body', trigger:'manual', animation:false, placement: 'bottom'}).popover('show');
 				activePopover = this;
 
-				$('body>div.popover')
-					.on({
+				$('body>div.popover').on({
 					mouseenter: function() {
 						if (activePopover) {
 							$(activePopover).clearQueue();

diff --git a/media/system/js/frontediting.min.js b/media/system/js/frontediting.min.js
diff --git a/templates/cassiopeia/css/template.css b/templates/cassiopeia/css/template.css
@@ -24,11 +24,11 @@
   .flying-focus_target::-moz-focus-inner {
     border: 0 !important; }
 
-/*!
- * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
- * Copyright 2011-2017 The Bootstrap Authors
- * Copyright 2011-2017 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+/*!
+ * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 :root {
   --blue: #006898;
@@ -5903,11 +5903,11 @@ a.text-dark:focus, a.text-dark:hover {
 .invisible {
   visibility: hidden !important; }
 
-/*!
- *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
-/* FONT PATH
+/* FONT PATH
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
@@ -6076,7 +6076,7 @@ a.text-dark:focus, a.text-dark:hover {
 .fa-inverse {
   color: #fff; }
 
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .fa-glass:before {
   content: ""; }
@@ -8505,6 +8505,11 @@ legend {
 .form-control-feedback {
   display: block; }
 
+.jmodedit {
+  position: absolute;
+  top: 10px;
+  right: 10px; }
+
 .container-header {
   position: relative;
   z-index: 10;
@@ -8970,7 +8975,7 @@ joomla-alert {
 @supports (display: grid) {
   .site-grid {
     display: grid;
-    grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". main main main main ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug .";
+    grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". main main main main ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug .";
     grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 270px)) [main-end] minmax(0, 1fr) [full-end];
     grid-gap: 0 15px; }
     .site-grid > [class^='container-'], .site-grid > [class*=' container-'] {
@@ -8993,7 +8998,7 @@ joomla-alert {
       grid-column: full-start / full-end; }
     @media (max-width: 575px) {
       .site-grid {
-        grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". main main main main ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug ."; } }
+        grid-template-areas: ". head head head head ." ". banner banner banner banner ." ". main main main main ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." ". footer footer footer footer ." ". debug debug debug debug ."; } }
     .site-grid .container-header {
       margin-top: 0;
       margin-bottom: 20px; }

diff --git a/templates/cassiopeia/css/template.css.map b/templates/cassiopeia/css/template.css.map
diff --git a/templates/cassiopeia/css/template.min.css b/templates/cassiopeia/css/template.min.css
diff --git a/templates/cassiopeia/scss/blocks/_frontend-edit.scss b/templates/cassiopeia/scss/blocks/_frontend-edit.scss
@@ -0,0 +1,7 @@
+// Frontend Editing
+
+.jmodedit {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
diff --git a/templates/cassiopeia/scss/template.scss b/templates/cassiopeia/scss/template.scss
@@ -28,6 +28,7 @@
 @import "blocks/demo-styling";
 @import "blocks/footer";
 @import "blocks/form";
+@import "blocks/frontend-edit";
 @import "blocks/header";
 @import "blocks/icons";
 @import "blocks/iframe";