Making the PIN panel collapsable would get better experience.

[peterzhangsnail]

First of all, the idea of providing a human-readable version is remarkable, thank you, guys! It just happens when you want to pin a lot of links to do a comparison or summarizing. The PIN panel would take over all the room of the sidebar and making it hard to handle the TOC.

[peterzhangsnail]

After you guys clone or download this repo and run npm build to get the ouput. Here's a DIY way to add the PIN list toggle button to the spec.
It's all about modifying two files:
out/ecmarkup.js
out/ecmarkup.css
In the out/ecmarkup.js, just add these code to the end of it:

//----------------------------------------------------------------------------------
//add toggle icon to the menu
window.onload = function(){
  var MenuPins = document.getElementById('menu-pins');
  var MenuPaneHeader = MenuPins.querySelectorAll('.menu-pane-header')[0];

  var MenuPaneHeaderToggle = document.createElement('span');
  var MenuPaneHeaderToggleIcon = document.createTextNode('◢');
  MenuPaneHeaderToggle.appendChild(MenuPaneHeaderToggleIcon);
  MenuPaneHeaderToggle.setAttribute('class','MenuPinsNormal MenuPinsNormalCollpase');
  MenuPaneHeaderToggle.setAttribute('id','MenuPaneHeaderToggle');
  MenuPaneHeaderToggle.onclick = MenuPinsToggle; //add event that toggles the pin list

  MenuPaneHeader.appendChild(MenuPaneHeaderToggle);
};

//toggle the MenuPinsList 
function MenuPinsToggle(){
  var MenuPinsList = document.getElementById('menu-pins-list');
  var MenuPaneHeaderToggle = document.getElementById('MenuPaneHeaderToggle');

  if(MenuPinsList.style.display === 'none'){
    MenuPinsList.style.display = 'block';
    MenuPaneHeaderToggle.setAttribute('class','MenuPinsNormal MenuPinsNormalCollpase');
  }else{
    MenuPinsList.style.display = 'none';
    MenuPaneHeaderToggle.setAttribute('class','MenuPinsNormal');
  }
}

And in the out/ecmarkup.css, add these to the end of it:

.MenuPinsNormal {
  cursor: pointer;
  position: absolute;
  right:0px;
  display: inline-block;
  transform: rotate(45deg) translate(-15px, 10px);
}

.MenuPinsNormalCollpase {
  transform: rotate(-45deg) translate(-15px, -15px);
}

Then you will get your collapsable DIY PIN list.

[ljharb]

@peterzhangsnail would you be interested in making a PR to https://github.com/bterlson/ecmarkup to add that functionality?

[peterzhangsnail]

It has flaws. The solution mentioned before only solves this problem on PC. How it may look on the mobile device has not been tested. So a thorough test is necessary. And to your invitation, the answer is yes, of course.

[peterzhangsnail]

@ljharb I have been running a few tests and make sure that all the media rules get considered. It seems fine to me now. Then replace element.css in the ecmarkup/css/ and menu.js in the ecmarkup/js/ directory with the updated files, run npm run build after that. The ouput works well.

[ljharb]

If that could be done in ecmarkup itself, rather than just in this repo, that would be ideal.

[peterzhangsnail]

@ljharb It can be done, just need to add a file 'pinCollpase.js' to replace the two files with our updated files and change the build script in the package.json into "build": "node pinCollapse.js && npm run build-master"

[peterzhangsnail]

@ljharb Here's the pinCollapse.js, just make it so,bro.(Of course, use it after double check)
pinCollapse.zip

[ljharb]

Any chance you could make a PR to ecmarkup for that?

[peterzhangsnail]

@ljharb Launch a pull request there, just waiting for the owner's test and merge.