Option to display copy buttons. (#1050)

* Option to display copy buttons.

- Added field to playpen data structure
- Communicate through window.playpen_copyable
- Javascript updated to check before displaying copy buttons.

* html -> html_config

Also:
- update description of copyable in source code.
- update description of line_numbers (my last PR to this repository)

book-example/src/format/config.md

@@ -181,6 +181,7 @@ The following configuration options are available:
 Available configuration options for the `[output.html.playpen]` table:
 
 - **editable:** Allow editing the source code. Defaults to `false`.
+- **copyable:** Display the copy button on code snippets. Defaults to `true`.
 - **copy-js:** Copy JavaScript files for the editor to the output directory.
   Defaults to `true`.
 - **line-numbers** Display line numbers on editable sections of code. Requires both `editable` and `copy-js` to be `true`. Defaults to `false`.

src/config.rs

@@ -492,10 +492,12 @@ impl HtmlConfig {
 pub struct Playpen {
     /// Should playpen snippets be editable? Default: `false`.
     pub editable: bool,
+    /// Display the copy button. Default: `true`.
+    pub copyable: bool,
     /// Copy JavaScript files for the editor to the output directory?
     /// Default: `true`.
     pub copy_js: bool,
-    /// Display line numbers on playpen snippets
+    /// Display line numbers on playpen snippets. Default: `false`.
     pub line_numbers: bool,
 }
 
@@ -503,6 +505,7 @@ impl Default for Playpen {
     fn default() -> Playpen {
         Playpen {
             editable: false,
+            copyable: true,
             copy_js: true,
             line_numbers: false,
         }
@@ -638,6 +641,7 @@ mod tests {
         };
         let playpen_should_be = Playpen {
             editable: true,
+            copyable: true,
             copy_js: true,
             line_numbers: false,
         };

src/renderer/html_handlebars/hbs_renderer.rs

@@ -456,6 +456,9 @@ fn make_data(
             data.insert("playpen_line_numbers".to_owned(), json!(true));
         }
     }
+    if html_config.playpen.copyable {
+        data.insert("playpen_copyable".to_owned(), json!(true));
+    }
 
     let search = html_config.search.clone();
     if cfg!(feature = "search") {

src/theme/book.js

@@ -202,25 +202,27 @@ function playpen_text(playpen) {
         });
     });
 
-    Array.from(document.querySelectorAll('pre code')).forEach(function (block) {
+    if (window.playpen_copyable) {
-        var pre_block = block.parentNode;
+        Array.from(document.querySelectorAll('pre code')).forEach(function (block) {
-        if (!pre_block.classList.contains('playpen')) {
+            var pre_block = block.parentNode;
-            var buttons = pre_block.querySelector(".buttons");
+            if (!pre_block.classList.contains('playpen')) {
-            if (!buttons) {
+                var buttons = pre_block.querySelector(".buttons");
-                buttons = document.createElement('div');
+                if (!buttons) {
-                buttons.className = 'buttons';
+                    buttons = document.createElement('div');
-                pre_block.insertBefore(buttons, pre_block.firstChild);
+                    buttons.className = 'buttons';
+                    pre_block.insertBefore(buttons, pre_block.firstChild);
+                }
+
+                var clipButton = document.createElement('button');
+                clipButton.className = 'fa fa-copy clip-button';
+                clipButton.title = 'Copy to clipboard';
+                clipButton.setAttribute('aria-label', clipButton.title);
+                clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';
+
+                buttons.insertBefore(clipButton, buttons.firstChild);
             }
-
+        });
-            var clipButton = document.createElement('button');
+    }
-            clipButton.className = 'fa fa-copy clip-button';
-            clipButton.title = 'Copy to clipboard';
-            clipButton.setAttribute('aria-label', clipButton.title);
-            clipButton.innerHTML = '<i class=\"tooltiptext\"></i>';
-
-            buttons.insertBefore(clipButton, buttons.firstChild);
-        }
-    });
 
     // Process playpen code blocks
     Array.from(document.querySelectorAll(".playpen")).forEach(function (pre_block) {
@@ -238,19 +240,21 @@ function playpen_text(playpen) {
         runCodeButton.title = 'Run this code';
         runCodeButton.setAttribute('aria-label', runCodeButton.title);
 
-        var copyCodeClipboardButton = document.createElement('button');
-        copyCodeClipboardButton.className = 'fa fa-copy clip-button';
-        copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>';
-        copyCodeClipboardButton.title = 'Copy to clipboard';
-        copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);
-
         buttons.insertBefore(runCodeButton, buttons.firstChild);
-        buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);
-
         runCodeButton.addEventListener('click', function (e) {
             run_rust_code(pre_block);
         });
 
+        if (window.playpen_copyable) {
+            var copyCodeClipboardButton = document.createElement('button');
+            copyCodeClipboardButton.className = 'fa fa-copy clip-button';
+            copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>';
+            copyCodeClipboardButton.title = 'Copy to clipboard';
+            copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);
+
+            buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);
+        }
+
         let code_block = pre_block.querySelector("code");
         if (window.ace && code_block.classList.contains("editable")) {
             var undoChangesButton = document.createElement('button');

src/theme/index.hbs

@@ -236,6 +236,12 @@
         </script>
         {{/if}}
         
+        {{#if playpen_copyable}}
+        <script type="text/javascript">
+            window.playpen_copyable = true;
+        </script>
+        {{/if}}
+
         {{#if playpen_js}}
         <script src="{{ path_to_root }}ace.js" type="text/javascript" charset="utf-8"></script>
         <script src="{{ path_to_root }}editor.js" type="text/javascript" charset="utf-8"></script>