Prevent scrolling toolbar with content

If content is wider than screen, during scrolling toolbar is not moving anymore.
PrismJS · Feb 22, 2018 · 84eeb89 · 84eeb89
1 parent 7a9dbe0
commit 84eeb89
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/plugins/toolbar/prism-toolbar.css b/plugins/toolbar/prism-toolbar.css
@@ -1,28 +1,28 @@
-pre.code-toolbar {
+div.code-toolbar {
 	position: relative;
 }
 
-pre.code-toolbar > .toolbar {
+div.code-toolbar > .toolbar {
 	position: absolute;
 	top: .3em;
 	right: .2em;
 	transition: opacity 0.3s ease-in-out;
 	opacity: 0;
 }
 
-pre.code-toolbar:hover > .toolbar {
+div.code-toolbar:hover > .toolbar {
 	opacity: 1;
 }
 
-pre.code-toolbar > .toolbar .toolbar-item {
+div.code-toolbar > .toolbar .toolbar-item {
 	display: inline-block;
 }
 
-pre.code-toolbar > .toolbar a {
+div.code-toolbar > .toolbar a {
 	cursor: pointer;
 }
 
-pre.code-toolbar > .toolbar button {
+div.code-toolbar > .toolbar button {
 	background: none;
 	border: 0;
 	color: inherit;
@@ -35,9 +35,9 @@ pre.code-toolbar > .toolbar button {
 	-ms-user-select: none;
 }
 
-pre.code-toolbar > .toolbar a,
-pre.code-toolbar > .toolbar button,
-pre.code-toolbar > .toolbar span {
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
 	color: #bbb;
 	font-size: .8em;
 	padding: 0 .5em;
@@ -47,12 +47,12 @@ pre.code-toolbar > .toolbar span {
 	border-radius: .5em;
 }
 
-pre.code-toolbar > .toolbar a:hover,
-pre.code-toolbar > .toolbar a:focus,
-pre.code-toolbar > .toolbar button:hover,
-pre.code-toolbar > .toolbar button:focus,
-pre.code-toolbar > .toolbar span:hover,
-pre.code-toolbar > .toolbar span:focus {
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
 	color: inherit;
 	text-decoration: none;
 }
diff --git a/plugins/toolbar/prism-toolbar.js b/plugins/toolbar/prism-toolbar.js
@@ -63,7 +63,11 @@
 			return;
 		}
 
-		pre.classList.add('code-toolbar');
+		// Create wrapper for <pre> to prevent scrolling toolbar with content
+		var wrapper = document.createElement("div");
+		wrapper.classList.add("code-toolbar");
+		pre.parentNode.insertBefore(wrapper, pre);
+		wrapper.appendChild(pre);
 
 		// Setup the toolbar
 		var toolbar = document.createElement('div');
@@ -89,8 +93,8 @@
 			toolbar.appendChild(item);
 		});
 
-		// Add our toolbar to the <pre> tag
-		pre.appendChild(toolbar);
+		// Add our toolbar to the currently created wrapper of <pre> tag
+		wrapper.appendChild(toolbar);
 	};
 
 	registerButton('label', function(env) {

diff --git a/plugins/toolbar/prism-toolbar.min.js b/plugins/toolbar/prism-toolbar.min.js