Prevent run button to be registred for every demo

Author: cherifGsoul

index.js

@@ -73,6 +73,23 @@ function findPre(start) {
     }
 }
 
+function findSelector(start, selector) {
+    while(start) {
+        if(matches.call(start, selector)) {
+            return start;
+        }
+        if(start.querySelector) {
+            var pre = start.querySelector(selector);
+            if(pre) {
+                return pre;
+            }
+        }
+
+        // needs to be previousSibling for zombie
+        start = start.previousSibling;
+    }
+}
+
 function findDemoWrapper(el) {
     while(el && el.parentNode) {
         if(matches.call(el.parentNode, '.demo_wrapper')) {
@@ -96,58 +113,65 @@ module.exports = function() {
     var codepens = document.querySelectorAll(".codepen");
     //remove the old codepen links
     codepens.forEach(function(codepen, i){
+        var wrapper = findSelector(codepen, "pre, .demo_wrapper");
+        wrapper.setAttribute("data-has-run", true);
         codepen.parentNode.removeChild(codepen);
     });
 
     //Register PrismJS "Run" custom button
     Prism.plugins.toolbar.registerButton("run-code", function(env) {
-        var btn = document.createElement("button");
-        btn.innerHTML = "Run";
-        btn.addEventListener('click', function() {
-            var demoWrapper = findDemoWrapper(env.element);
-
-            if (!demoWrapper && matches.call(env.element.parentNode, 'pre')) {
-                var language = env.language;
-                var text = env.code;
-                var data = types[language](text);
-                if (data.js) {
-                    data.js = data.js.trim();
-                }
-                if (data.html) {
-                    data.html = data.html.trim();
+        var demoWrapper = findDemoWrapper(env.element);
+        var pre = env.element.parentElement;
+        var hasRunBtn = demoWrapper ? demoWrapper.getAttribute("data-has-run") : pre.getAttribute("data-has-run");
+        //prevent other demos without codepen link to register Run button
+        if (hasRunBtn) {
+            var btn = document.createElement("button");
+            btn.innerHTML = "Run";
+            btn.addEventListener('click', function() {
+
+                if (!demoWrapper && matches.call(env.element.parentNode, 'pre')) {
+                    var language = env.language;
+                    var text = env.code;
+                    var data = types[language](text);
+                    if (data.js) {
+                        data.js = data.js.trim();
+                    }
+                    if (data.html) {
+                        data.html = data.html.trim();
+                    }
+                    if (data) {
+                        cleanCodePenData(data);
+                        if (window.CREATE_CODE_PEN) {
+                            CREATE_CODE_PEN(data);
+                        } else {
+                            createCodePen(data);
+                        }
+                    } else {
+                        console.warn('Unable to create a codepen for this demo');
+                    }
                 }
-                if (data) {
-                    cleanCodePenData(data);
+                if (demoWrapper && matches.call(demoWrapper, '.demo_wrapper')) {
+                    var htmlCode = demoWrapper.querySelector('[data-for=html] code');
+                    var htmlText = htmlCode ? htmlCode.textContent.trim() : '';
+                    var jsCode = demoWrapper.querySelector('[data-for=js] code');
+                    var jsText = jsCode ? jsCode.textContent.trim() : '';
+                    var cssText = getStylesFromIframe(demoWrapper.querySelector('iframe'));
+                    var codePen = {
+                        html: htmlText,
+                        js: jsText,
+                        js_module: true,
+                        editors: '1011',
+                        css: cssText.trim()
+                    };
+                    cleanCodePenData(codePen);
                     if (window.CREATE_CODE_PEN) {
-                        CREATE_CODE_PEN(data);
+                        CREATE_CODE_PEN(codePen);
                     } else {
-                        createCodePen(data);
+                        createCodePen(codePen);
                     }
-                } else {
-                    console.warn('Unable to create a codepen for this demo');
-                }
-            }
-            if (demoWrapper && matches.call(demoWrapper, '.demo_wrapper')) {
-                var htmlCode = demoWrapper.querySelector('[data-for=html] code');
-                var htmlText = htmlCode ? htmlCode.textContent.trim() : '';
-                var jsCode = demoWrapper.querySelector('[data-for=js] code');
-                var jsText = jsCode ? jsCode.textContent.trim() : '';
-                var cssText = getStylesFromIframe(demoWrapper.querySelector('iframe'));
-                var codePen = {
-                    html: htmlText,
-                    js: jsText,
-                    js_module: true,
-                    editors: '1011',
-                    css: cssText.trim()
-                };
-                cleanCodePenData(codePen);
-                if (window.CREATE_CODE_PEN) {
-                    CREATE_CODE_PEN(codePen);
-                } else {
-                    createCodePen(codePen);
                 }
-            }
-        });
-        return btn;
+            });
+            return btn;
+        }
     });
 };