Terrible workaround for positioning bug of bootstrap-tourist

I really can't find a way to fix this bug: IGreatlyDislikeJavascript/bootstrap-tourist#50
mlocati · Apr 8, 2020 · 1d8ef78 · 1d8ef78
1 parent dcbbce8
commit 1d8ef78
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 14 deletions.
diff --git a/assets/cms/js/help/guide-manager.js b/assets/cms/js/help/guide-manager.js
@@ -88,9 +88,24 @@
 
         get: function() {
             return ConcreteHelpGuideManager;
-        }
-
+        },
 
+        // Temporary fix for https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist/issues/50
+        POSITIONING_BUG_HACK_ID: 'ccm-help-tour-hack',
+
+        // Temporary fix for https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist/issues/50
+        createPositioningBugHackElement: function($target) {
+            var $hack;
+            $hack = $('<div id="' + this.POSITIONING_BUG_HACK_ID + '" />').css({
+                position: 'absolute',
+                left: $target.offset().left,
+                top: $target.offset().top,
+                width: $target.width(),
+                height: $target.height(),
+            });
+            $(document.body).append($hack);
+            return $hack;
+        },
     };
 
 

diff --git a/assets/cms/js/help/guides/add-content-edit-mode.js b/assets/cms/js/help/guides/add-content-edit-mode.js
@@ -3,7 +3,8 @@
 
 ;(function(global, $) {
 
-    var $tmp;
+    var $hack;
+
 	ConcreteHelpGuideManager.register('add-content-edit-mode', function() {
 		var i18n = ccmi18n_helpGuides['add-content-edit-mode'];
 		var steps = [{
@@ -16,20 +17,38 @@
 			placement: 'right',
 			preventInteraction: true,
 		},{
-			element: '#ccm-panel-add-block .ccm-panel-header-accordion',
+			element: '#' + ConcreteHelpGuideManager.POSITIONING_BUG_HACK_ID,
 			content: '<h3>' + i18n[2].title + '</h3>' + i18n[2].text,
 			placement: 'right',
 			preventInteraction: true,
+			onShow: function(tour) {
+			    $hack = ConcreteHelpGuideManager.createPositioningBugHackElement($('#ccm-panel-add-block .ccm-panel-header-accordion'));
+			},
+			onHidden: function(tour) {
+			    $hack.remove();
+			},
 		},{
-			element: '#ccm-panel-add-block input[data-input=search-blocks]',
+		    element: '#' + ConcreteHelpGuideManager.POSITIONING_BUG_HACK_ID,
 			content: '<h3>' + i18n[3].title + '</h3>' + i18n[3].text,
 			placement: 'right',
 			preventInteraction: true,
+            onShow: function(tour) {
+                $hack = ConcreteHelpGuideManager.createPositioningBugHackElement($('#ccm-panel-add-block input[data-input=search-blocks]'));
+            },
+            onHidden: function(tour) {
+                $hack.remove();
+            },
 		},{
-			element: '#ccm-panel-add-block .ccm-panel-add-block-draggable-block-type:first>*:first',
+		    element: '#' + ConcreteHelpGuideManager.POSITIONING_BUG_HACK_ID,
 			content: '<h3>' + i18n[4].title + '</h3>' + i18n[4].text,
 			placement: 'right',
 			preventInteraction: true,
+            onShow: function(tour) {
+                $hack = ConcreteHelpGuideManager.createPositioningBugHackElement($('#ccm-panel-add-block .ccm-panel-add-block-draggable-block-type:first'));
+            },
+            onHidden: function(tour) {
+                $hack.remove();
+            },
 		}];
 
 		return new Tour({

diff --git a/assets/cms/js/help/guides/add-page.js b/assets/cms/js/help/guides/add-page.js
@@ -3,6 +3,8 @@
 
 ;(function(global, $) {
 
+    var $hack;
+
 	ConcreteHelpGuideManager.register('add-page', function() {
 		var i18n = ccmi18n_helpGuides['add-page'];
 		var hideOverlay = function() {
@@ -29,13 +31,25 @@
 				ConcreteEvent.unsubscribe('PanelOpen.concreteAddPageTour');
 			}
 		},{
-			element: '#ccm-panel-sitemap header:nth-of-type(1)',
+		    element: '#' + ConcreteHelpGuideManager.POSITIONING_BUG_HACK_ID,
 			content: '<h3>' + i18n[1].title + '</h3>' + i18n[1].text,
 			placement: 'left',
+            onShow: function(tour) {
+                $hack = ConcreteHelpGuideManager.createPositioningBugHackElement($('#ccm-panel-sitemap header:nth-of-type(1)>*:first'));
+            },
+            onHidden: function(tour) {
+                $hack.remove();
+            },
 		},{
-			element: '#ccm-panel-sitemap header:nth-of-type(2)',
+		    element: '#' + ConcreteHelpGuideManager.POSITIONING_BUG_HACK_ID,
 			content: '<h3>' + i18n[2].title + '</h3>' + i18n[2].text,
 			placement: 'left',
+            onShow: function(tour) {
+                $hack = ConcreteHelpGuideManager.createPositioningBugHackElement($('#ccm-panel-sitemap header:nth-of-type(2)>*:first'));
+            },
+            onHidden: function(tour) {
+                $hack.remove();
+            },
 		}];
 
 		return new Tour({

diff --git a/assets/cms/js/help/guides/dashboard.js b/assets/cms/js/help/guides/dashboard.js
@@ -3,6 +3,8 @@
 
 ;(function(global, $) {
 
+    var $hack;
+
 	ConcreteHelpGuideManager.register('dashboard', function() {
 		var i18n = ccmi18n_helpGuides.dashboard;
 		var hideOverlay = function() {
@@ -29,10 +31,16 @@
 				ConcreteEvent.unsubscribe('PanelOpen.concreteDashboardTour');
 			},
 		},{
-			element: 'div#ccm-panel-dashboard ul.nav a[href$=sitemap]:first',
+            element: '#' + ConcreteHelpGuideManager.POSITIONING_BUG_HACK_ID,
 			content: '<h3>' + i18n[1].title + '</h3>' + i18n[1].text,
 			placement: 'left',
 			preventInteraction: true,
+            onShow: function(tour) {
+                $hack = ConcreteHelpGuideManager.createPositioningBugHackElement($('div#ccm-panel-dashboard ul.nav a[href$=sitemap]:first').parent());
+            },
+            onHidden: function(tour) {
+                $hack.remove();
+            },
 		}];
 
 		return new Tour({

diff --git a/assets/cms/js/help/guides/personalize.js b/assets/cms/js/help/guides/personalize.js
@@ -3,6 +3,8 @@
 
 ;(function(global, $) {
 
+    var $hack;
+
 	ConcreteHelpGuideManager.register('personalize', function() {
 		var i18n = ccmi18n_helpGuides.personalize;
 		var hideOverlay = function() {
@@ -29,12 +31,18 @@
 				ConcreteEvent.unsubscribe('PanelOpen.concretePersonalizeTour');
 			}
 		},{
-			element: 'a[data-launch-panel-detail=page-design]:first',
+            element: '#' + ConcreteHelpGuideManager.POSITIONING_BUG_HACK_ID,
 			content: '<h3>' + i18n[1].title + '</h3>' + i18n[1].text,
-			onShown: ConcreteHelpGuideManager.updateStepFooter,
-			onHide: function() {
-				ConcreteEvent.unsubscribe('PanelOpenDetail.concretePersonalizeTour');
-			}
+            onShow: function(tour) {
+                $hack = ConcreteHelpGuideManager.createPositioningBugHackElement($('a[data-launch-panel-detail=page-design]:first'));
+            },
+            onShown: ConcreteHelpGuideManager.updateStepFooter,
+            onHide: function() {
+                ConcreteEvent.unsubscribe('PanelOpenDetail.concretePersonalizeTour');
+            },
+            onHidden: function(tour) {
+                $hack.remove();
+            },
 		},{
 			element: 'span.ccm-page-design-theme-customize',
 			content: '<h3>' + i18n[2].title + '</h3>' + i18n[2].text,