From bf3b49a04b5d3769f187e57961fd516d6c24cbc0 Mon Sep 17 00:00:00 2001
From: ppoffice <zrp1994@gmail.com>
Date: Wed, 15 Jan 2020 12:45:06 -0500
Subject: [PATCH] fix(layout): code block caption bar on safari

---
 source/css/style.styl |  6 +---
 source/js/main.js     | 78 ++++++++++++++++++++++++-------------------
 2 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/source/css/style.styl b/source/css/style.styl
index 019ecdd..9f071e7 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -394,14 +394,11 @@ figure.highlight
         background: rgba(200, 200, 200, 0.15)
 
     figcaption
+        margin: 0 !important
         padding: .3em .75em
         text-align: left
         font-style: normal
         font-size: .8em
-        &:after
-            clear: both
-            content: " "
-            display: table
 
         span
             font-weight: 500
@@ -412,7 +409,6 @@ figure.highlight
             color: #9a9a9a
 
         a
-            float: right
             margin-left: 0.5em
 
         .fold
diff --git a/source/js/main.js b/source/js/main.js
index 55dfdf7..6b36fd9 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -46,52 +46,62 @@
             }
         });
 
-        if (typeof (ClipboardJS) !== 'undefined' && IcarusThemeSettings.article.highlight.clipboard) {
+
+        var clipboard = IcarusThemeSettings.article.highlight.clipboard;
+        var fold = IcarusThemeSettings.article.highlight.fold;
+        fold = fold.trim();
+
+        $('figure.highlight').each(function () {
+            if ($(this).find('figcaption').length) {
+                $(this).find('figcaption').addClass('level');
+                $(this).find('figcaption').append('<div class="level-left">');
+                $(this).find('figcaption').append('<div class="level-right">');
+                $(this).find('figcaption div.level-left').append($(this).find('figcaption').find('span'));
+                $(this).find('figcaption div.level-right').append($(this).find('figcaption').find('a'));
+            } else {
+                if (clipboard || fold) {
+                    $(this).prepend('<figcaption class="level"><div class="level-left"></div><div class="level-right"></div></figcaption>');
+                }
+            }
+        });
+
+        if (typeof (ClipboardJS) !== 'undefined' && clipboard) {
             $('figure.highlight').each(function () {
                 var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
                 var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
                 $(this).attr('id', id);
-                if ($(this).find('figcaption').length) {
-                    $(this).find('figcaption').prepend(button);
-                } else {
-                    $(this).prepend('<figcaption>' + button + '</figcaption>');
-                }
+                $(this).find('figcaption div.level-right').append(button);
             });
             new ClipboardJS('.highlight .copy');
         }
-        var fold = IcarusThemeSettings.article.highlight.fold;
-        if (fold.trim()) {
+
+        if (fold) {
             var button = '<span class="fold">' + (fold === 'unfolded' ? '<i class="fas fa-angle-down"></i>' : '<i class="fas fa-angle-right"></i>') + '</span>';
             $('figure.highlight').each(function () {
-                if ($(this).find('figcaption').length) {
+                // 此处find ">folded" span,如果有自定义code头,并且">folded"进行处理
+                // 使用示例，.md 文件中头行标记">folded"
+                // ```java main.java >folded
+                // import main.java
+                // private static void main(){
+                //     // test
+                //     int i = 0;
+                //     return i;
+                // }
+                // ```
+                if ($(this).find('figcaption').find('span').length > 0) {
+                    let spanArr = $(this).find('figcaption').find('span');
+                    if (spanArr[0].innerText.indexOf(">folded") > -1) {
+                        // 去掉folded
+                        spanArr[0].innerText = spanArr[0].innerText.replace(">folded", "")
+                        button = '<span class="fold"><i class="fas fa-angle-right"></i></span>';
+                        $(this).find('figcaption div.level-left').prepend(button);
 
-                    // 此处find ">folded" span,如果有自定义code头,并且">folded"进行处理
-                    // 使用示例，.md 文件中头行标记">folded"
-                    // ```java main.java >folded
-                    // import main.java
-                    // private static void main(){
-                    //     // test
-                    //     int i = 0;
-                    //     return i;
-                    // }
-                    // ```
-                    if ($(this).find('figcaption').find('span').length > 0) {
-                        let spanArr = $(this).find('figcaption').find('span');
-                        if (spanArr[0].innerText.indexOf(">folded") > -1) {
-                            // 去掉folded
-                            spanArr[0].innerText = spanArr[0].innerText.replace(">folded", "")
-                            button = '<span class="fold"><i class="fas fa-angle-right"></i></span>';
-                            $(this).find('figcaption').prepend(button);
-
-                            // 收叠代码块
-                            toggleFold(this, true);
-                            return;
-                        }
+                        // 收叠代码块
+                        toggleFold(this, true);
+                        return;
                     }
-                    $(this).find('figcaption').prepend(button);
-                } else {
-                    $(this).prepend('<figcaption>' + button + '</figcaption>');
                 }
+                $(this).find('figcaption div.level-left').prepend(button);
                 toggleFold(this, fold === 'folded');
             });