From 4da66d985294eacd0beec919236963036ebffd81 Mon Sep 17 00:00:00 2001
From: peterZhang <peterpeterzhang@foxmail.com>
Date: Tue, 17 Mar 2020 13:17:56 +0800
Subject: [PATCH 1/2] collapsible pin pane

---
 css/elements.css | 16 ++++++++++------
 js/menu.js       | 19 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/css/elements.css b/css/elements.css
index cc93b203..f03bf3bc 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -569,7 +569,8 @@ tr.del > td {
   white-space: nowrap;
 }
 
-#menu-toc .item-toggle {
+#menu-toc .item-toggle,
+#menu-pins-header .item-toggle {
   display: inline-block;
   transform: rotate(-45deg) translate(-5px, -5px);
   transition: transform 0.1s ease;
@@ -593,15 +594,18 @@ tr.del > td {
   width: 20px;
 }
 
-#menu-toc li.active > .item-toggle {
+#menu-toc li.active > .item-toggle,
+#menu-pins-header.active > .item-toggle {
   transform: rotate(45deg) translate(-5px, -5px);
 }
 
-#menu-toc li > ol {
+#menu-toc li > ol,
+#menu-pins-header + #menu-pins-list {
   display: none;
 }
 
-#menu-toc li.active > ol {
+#menu-toc li.active > ol,
+#menu-pins-header.active + #menu-pins-list {
   display: block;
 }
 
@@ -668,10 +672,10 @@ tr.del > td {
   flex-grow: 0;
   flex-shrink: 0;
   width: 100%;
-  
+
   display: flex;
   flex-direction: column;
-  
+
   max-height: 300px;
 }
 
diff --git a/js/menu.js b/js/menu.js
index 208fbd6f..e861485a 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -238,7 +238,7 @@ function Menu() {
   document.addEventListener('keydown', this.documentKeydown.bind(this));
 
   // toc expansion
-  var tocItems = this.$menu.querySelectorAll('#menu-toc li');
+  var tocItems = this.$menu.querySelectorAll('#menu-toc li, #menu-pins .menu-pane-header');
   for (var i = 0; i < tocItems.length; i++) {
     var $item = tocItems[i];
     $item.addEventListener('click', function($item, event) {
@@ -848,3 +848,20 @@ document.addEventListener('DOMContentLoaded', function () {
   Toolbox.init();
   referencePane.init();
 })
+
+// collapsible pin pane
+document.addEventListener('DOMContentLoaded', collapsiblePinPane);
+
+function collapsiblePinPane() {
+  var MenuPins = document.getElementById('menu-pins');
+  var MenuPaneHeader = MenuPins.querySelector('.menu-pane-header');
+  MenuPaneHeader.setAttribute('id', 'menu-pins-header'); // Give the header an id for convenience.
+
+  var pinButton = document.createElement('span');
+  pinButton.textContent = "◢";
+  pinButton.setAttribute('class', 'item-toggle');
+  pinButton.style.cssFloat = 'right'; // Float the button to the right side, making it easier to be noticed.
+  pinButton.style.color = 'black'; // Set a different color for it, so the button won't be mixed with the background.
+
+  MenuPaneHeader.appendChild(pinButton);
+}

From cdc633701f35497432d71a3fc605d7fde3c89194 Mon Sep 17 00:00:00 2001
From: peter Zhang <peterpeterzhang@foxmail.com>
Date: Mon, 4 May 2020 16:39:57 +0800
Subject: [PATCH 2/2] change pin arrow to upward/downward style

---
 css/elements.css | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/css/elements.css b/css/elements.css
index f03bf3bc..513a0f55 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -589,16 +589,27 @@ tr.del > td {
   cursor: pointer;
 }
 
+#menu-pins-header .item-toggle { /*overwrite the transform style in the above css selector, so we can get a upward pin arrow*/
+  transform: rotate(-135deg);
+  transform-origin: center;
+  transition: transform 0s ease;
+}
+
 #menu-toc .item-toggle-none {
   display: inline-block;
   width: 20px;
 }
 
-#menu-toc li.active > .item-toggle,
-#menu-pins-header.active > .item-toggle {
+#menu-toc li.active > .item-toggle {
   transform: rotate(45deg) translate(-5px, -5px);
 }
 
+#menu-pins-header.active > .item-toggle{  /*extra css style for the downward pin arrow*/
+  transform: rotate(45deg);
+  transform-origin: center;
+  transition: transform 0s ease;
+}
+
 #menu-toc li > ol,
 #menu-pins-header + #menu-pins-list {
   display: none;