Prevent scrolling toolbar with content If content is wider than screen, during scrolling toolbar is not moving anymore.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
diff --git a/plugins/toolbar/prism-toolbar.css b/plugins/toolbar/prism-toolbar.css
index 6d1afb9..2b234e1 100644
--- a/plugins/toolbar/prism-toolbar.css
+++ b/plugins/toolbar/prism-toolbar.css
@@ -1,8 +1,8 @@
-pre.code-toolbar {
+div.code-toolbar {
position: relative;
}
-pre.code-toolbar > .toolbar {
+div.code-toolbar > .toolbar {
position: absolute;
top: .3em;
right: .2em;
@@ -10,19 +10,19 @@ pre.code-toolbar > .toolbar {
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
index 2da7b8a..6e59aed 100644
--- 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
index b206b08..cf4195f 100644
--- a/plugins/toolbar/prism-toolbar.min.js
+++ b/plugins/toolbar/prism-toolbar.min.js
@@ -1 +1 @@
-!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=[],e={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var o;o="function"==typeof a?a:function(t){var e;return"function"==typeof a.onClick?(e=document.createElement("button"),e.type="button",e.addEventListener("click",function(){a.onClick.call(this,t)})):"string"==typeof a.url?(e=document.createElement("a"),e.href=a.url):e=document.createElement("span"),e.textContent=a.text,e},t.push(e[n]=o)},o=Prism.plugins.toolbar.hook=function(a){var o=a.element.parentNode;if(o&&/pre/i.test(o.nodeName)&&!o.classList.contains("code-toolbar")){o.classList.add("code-toolbar");var r=document.createElement("div");r.classList.add("toolbar"),document.body.hasAttribute("data-toolbar-order")&&(t=document.body.getAttribute("data-toolbar-order").split(",").map(function(t){return e[t]||n})),t.forEach(function(t){var e=t(a);if(e){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(e),r.appendChild(n)}}),o.appendChild(r)}};a("label",function(t){var e=t.element.parentNode;if(e&&/pre/i.test(e.nodeName)&&e.hasAttribute("data-label")){var n,a,o=e.getAttribute("data-label");try{a=document.querySelector("template#"+o)}catch(r){}return a?n=a.content:(e.hasAttribute("data-url")?(n=document.createElement("a"),n.href=e.getAttribute("data-url")):n=document.createElement("span"),n.textContent=o),n}}),Prism.hooks.add("complete",o)}}();
\ No newline at end of file
+!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=[],e={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var o;o="function"==typeof a?a:function(t){var e;return"function"==typeof a.onClick?(e=document.createElement("button"),e.type="button",e.addEventListener("click",function(){a.onClick.call(this,t)})):"string"==typeof a.url?(e=document.createElement("a"),e.href=a.url):e=document.createElement("span"),e.textContent=a.text,e},t.push(e[n]=o)},o=Prism.plugins.toolbar.hook=function(a){var o=a.element.parentNode;if(o&&/pre/i.test(o.nodeName)&&!o.classList.contains("code-toolbar")){var r=document.createElement("div");r.classList.add("code-toolbar"),o.parentNode.insertBefore(r,o),r.appendChild(o);var i=document.createElement("div");i.classList.add("toolbar"),document.body.hasAttribute("data-toolbar-order")&&(t=document.body.getAttribute("data-toolbar-order").split(",").map(function(t){return e[t]||n})),t.forEach(function(t){var e=t(a);if(e){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(e),i.appendChild(n)}}),r.appendChild(i)}};a("label",function(t){var e=t.element.parentNode;if(e&&/pre/i.test(e.nodeName)&&e.hasAttribute("data-label")){var n,a,o=e.getAttribute("data-label");try{a=document.querySelector("template#"+o)}catch(r){}return a?n=a.content:(e.hasAttribute("data-url")?(n=document.createElement("a"),n.href=e.getAttribute("data-url")):n=document.createElement("span"),n.textContent=o),n}}),Prism.hooks.add("complete",o)}}();
\ No newline at end of file