// ==UserScript==
// @name        Expand project columns
// @namespace   basicinc.github.projects.expand
// @description Expand project columns
// @include     https://github.com/*/*/projects/*
// @version     1.0
// @grant       none
// ==/UserScript==

document.querySelectorAll(".js-details-container").forEach(function(node){
  var div = document.createElement('div');
  var expand_button='<button class="float-right btn-octicon p-1 tooltipped tooltipped-w" type="button" aria-label="Expand this column" aria-expanded="false">\
    <svg class="octicon octicon-chevron-right" aria-hidden="true" height="16" version="1.1" viewBox="0 0 8 16" width="12">\
      <path fill-rule="evenodd" d="M7.5 8l-5 5L1 11.5 4.75 8 1 4.5 2.5 3z"></path>\
    </svg>\
  </button>'
  div.innerHTML = expand_button;
  var expand_button = div.childNodes[0];
  expand_button.addEventListener("click", function(){
    this.parentElement.parentElement.setAttribute("style","min-width:1000px;max-width:1000px");
    this.setAttribute("style","display:none");    
    this.nextSibling.setAttribute("style","");
  })
  node.insertBefore(expand_button, node.childNodes.first)

  var collapse_button='<button class="float-right btn-octicon p-1 tooltipped tooltipped-w" type="button" aria-label="Collapse this column" aria-expanded="false" style="display:none">\
    <svg class="octicon octicon-chevron-left" aria-hidden="true" height="16" version="1.1" viewBox="0 0 8 16" width="12">\
      <path fill-rule="evenodd" d="M5.5 3L7 4.5 3.25 8 7 11.5 5.5 13l-5-5z"></path>\
    </svg>\
  </button>'
  div.innerHTML = collapse_button;
  var collapse_button = div.childNodes[0];
  collapse_button.addEventListener("click", function(){
    this.parentElement.parentElement.setAttribute("style","");
    this.setAttribute("style","display:none");    
    this.previousSibling.setAttribute("style","");
  })
  node.insertBefore(collapse_button, node.childNodes.first)
})