Reworked the copy button.

The copy button is now only once in every MultiCodeBlock so that some visual problems are fixed.

+ Removed some CSS

Author: QuickWrite

includes/MultiCodeBlockBuilder.php

@@ -49,12 +49,12 @@ function createTab(string &$code, int $index, string $extra = 'outer') {
  * 
  * @param array $lang All of the languages of the different codeblocks.
  * @param string $code The codeblocks as a whole.
- * @param string $extra Another class to be added to the element.
  * @param bool $addCopy If a copy button should be added to the element.
+ * @param string $extra Another class to be added to the element.
  * 
  * @return string The whole MultiCodeBlock.
  */
-function createFrame(array $lang, string &$code, string $extra = 'outer', bool $addCopy = false) {
+function createFrame(array &$lang, string &$code, bool $addCopy = true, string $extra = 'outer') {
     $size = sizeof($lang);
     $copyIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>';
 
@@ -125,7 +125,7 @@ function createCodeBlock(array &$codeTags, DOMNodeList &$descriptions, $lang, Pa
         $return .= createTab(combineCodeDescription(($isObject ? $highlight->value : $highlight), $languageBlock->getDescription($i), $parser), $i, 'inner');
     }
 
-    $return = createFrame($versions, $return, 'inner', true);
+    $return = createFrame($versions, $return, false, 'inner');
 
     return array($return, replaceLang($lang));
 }
@@ -145,7 +145,12 @@ function &combineCodeDescription(string $code, Description &$desc, Parser &$pars
 
     $keysSize = sizeof($desc->keys);
 
-    $return = '<table class="code-table">';
+    $return = '<table class="code-table">
+        <tr class="table-header">
+            <th>Code</th>
+            <th>Description</th>
+        </tr>
+    ';
 
     $isFirst = ($arr[0] === '' ? true : false);
 

resources/ext.multicodeblock/css/codeblock.css

@@ -1,5 +1,5 @@
 .multicodeblock {
-    margin-top: calc(2em + 15px);
+    margin-top: calc(2em + 20px);
 }
 
 .code-table tbody tr pre {
@@ -29,10 +29,6 @@
     cursor: pointer;
 }
 
-.tab-button:active {
-    background-color: #ddd;
-}
-
 .tab-button:not(:last-of-type) {
     border-bottom: 1px solid #ccc;
 }
@@ -65,7 +61,7 @@
     width: 100%;
     display: flex;
     height: fit-content;
-    transform: translateY(-100%);
+    transform: translateY(calc(-2em - 7.5px));
 }
 
 .inner.tab-button {
@@ -141,11 +137,12 @@
 
 .copy {
     position: absolute;
-    right: 0;
+    right: 1px;
     padding: .7em;
     display: unset;
     cursor: pointer;
     z-index: 99;
+    line-height: 0;
 }
 
 .copy.anim {
@@ -161,13 +158,14 @@
     background-color: #555;
     color: #fff;
     text-align: center;
-    padding: 5px 0;
+    padding: 5px;
     border-radius: 6px;
     z-index: 1;
     transition: opacity .6s;
     top: 100%;
     left: -10%;
-    margin-left: -60px;
+    margin-left: -70px;
+    line-height: initial;
 }
 
 .copy svg {
@@ -186,6 +184,16 @@
     border-color: transparent transparent #555 transparent;
 }
 
+.table-header {
+    transform: translateY(-5px);
+}
+
+.table-header th {
+    border-bottom: #ccc 1px solid;
+    margin: 0;
+    padding-bottom: 3px;
+}
+
 @keyframes bounceIn {
     from, 20%, 40%, 60%, 80%, to {
         animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

resources/ext.multicodeblock/css/highlight.css

@@ -18,14 +18,6 @@ hue-6-2: #c18401
 
 */
 
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #383a42;
-  background: #fafafa;
-}
-
 .hljs-comment,
 .hljs-quote {
   color: #a0a1a7;

resources/ext.multicodeblock/js/multicodeblock.js

@@ -102,7 +102,7 @@ for(let i = 0; i < copyElems.length; i++) {
         let fail = false;
 
         if (navigator.clipboard) {
-            const code = elem.parentElement.getElementsByClassName('tc-active')[0].getElementsByClassName('first');
+            const code = elem.parentElement.getElementsByClassName('outer tc-active')[0].getElementsByClassName('inner tc-active')[0].getElementsByClassName('first');
             let text = '';
             for(let i = 0; i < code.length; i++) {
                 text += code[i].innerText;