ui.html

<title>Gmail Shared Labels</title>
<style>
  body {padding:0px; margin:0px;}
  #main { padding: 10px }
  header {
    background-color: #F1F1F1;
    height: 60px;
    width: 100%;
  }
  img#logo {float:left;padding:0 30px}
  h2 { color:#4285f4; font-weight:bold; margin: 0 10px; padding:15px 10px 10px 240px }
  button { 
    color:white;
    background-color: hsl(217,99%,65%);
    font-size:13pt;
    padding:5px;
    font-weight:bold
  }
  button:hover {
    background-color: hsl(217,99%,70%);
  }
  button.done {
    background-color: hsl(217,30%,70%);
  }
  .invisible { display:none }
</style>
<header>
<img id="logo" src="<?= logo ?>" />
<h2>Gmail Shared Labels</h2>
</header>
<div id="main">
<p>
Gmail Shared Labels is a tool that lets you share labels (i.e. folders) with your google domain colleagues or others that share the same script instance. (i.e. the url of this page)
</p>
<h3>Instructions</h3>
<p>
<b>How shared labels work:</b>
  Once installed, this script runs every <?= synchronization_lag ?> minutes on your mailbox
  and each of your colleagues&rsquo;.  Any email threads you or your colleagues have marked with a
  shared label are labeled on your own inbox.
<p>
Occasionally one wants to remove a label.  In the original use-case, if you mark a thread as <code>resolved</code>
but then new information comes and you want to remove the label -- just removing the label on your own thread
will just get re-marked with the label, since in the past it was marked that way.  Thus, we need an UNlabel label -- a label to mark a thread, to tell your own inbox and others that the label should be removed.  The UNlabel
should not be used as anything other than for removing the main label -- the script goes through and removes the
unlabel, too.

<p>
<b>Setting up shared labels:</b>
To get started, name the group that uses the shared label -- this is just a descriptive name for the purposes
of this configuration screen, and mark yourself as a member.  Then tell your colleagues to visit this
page as well, and check the Member box by the label you created and to save/install.
<p>


<button onclick='install()' id ='install'><?= installed ? 'Save' : 'Install' ?></button>
<button onclick='uninstall()' id='uninstall' class='<?= installed ? '' : 'invisible' ?>'>Uninstall</button>

<h3>Shared Labels</h3>
<ul id="sharedlabels"></ul>

<div id="triggers"></div>

<h3>Code</h3>
<p>
[<a href="https://github.com/schuyler1d/gmail-sharedlabels" target="_blank">source code</a>]

<script>
function $(x) { return document.getElementById(x); }
function show(id, newcls, text) {
  var elt = $(id);
  elt.className = newcls||'';
  if (text) { elt.innerHTML = text }
}
function hide(id) {$(id).className = 'invisible'; }
var runner = google.script.run
  .withFailureHandler(function(error, message) {
    console.log(error, message);
    alert('Error while ' + message + ': ' + error.message);
    show('install', '', 'Save');
  });    
var sf = $('sharedlabels');

function install() {
  //1. get data from dom
  var config = {};
  for (var i=0,il=sf.childNodes.length; i<il; i++) {
    var li = sf.childNodes.item(i);
    var inputs = li.getElementsByTagName('input');
    var liData = {};
    for (var j=0,jl=inputs.length; j<jl; j++) {
      var lj = inputs[j];
      liData[lj.name] = ((lj.type == 'checkbox') ? lj.checked : lj.value);
    }
    config[liData.name] = liData;
  }
  show('install', '', 'Saving...');
  //2. save the data
  runner.withSuccessHandler(function(config) {
    show('install', 'done', 'Saved');
    setTimeout(function() {
      show('install', '', 'Save');
    }, 4000);
    show('uninstall');
    updateTriggerInstallation(config);
  }).install(config);
}

function uninstall() {
  runner.withSuccessHandler(function(config) {
    show('install', '', 'Install');
    hide('uninstall');
    updateTriggerInstallation(config);
  }).uninstall();
}

function folderLine(f, newElt) {
  var li = document.createElement('li');
  var lt = String.fromCharCode(60); //greater than sign;
  li.innerHTML = ((newElt ? lt+'div class="newElt">Add'+lt+'/div>' : '')
                  + 'Group name:'+lt+'input name="name" ' + (newElt ? '' : 'readonly') + ' value="' + f.name + '"/>'
                  + 'Label name:'+lt+'input name="label" value="' + f.label + '"/>'
                  + 'Unlabel name:'+lt+'input name="unlabel" value="' + f.unlabel + '"/>'
                  + 'Member:'+lt+'input type="checkbox" name="member" ' + (f.member ? 'checked' : '') + ' />'
                  + ''+lt+'div style="display:none">members listed here'+lt+'/div>'
                 );
  return li;
}

function updateTriggerInstallation(config) {
  var tdiv = $('triggers');
  tdiv.innerHTML =  ((config.triggers) ?
                     'Syncing is installed'
                     : 'Syncing is not yet installed');
}

//INIT
runner.withSuccessHandler(function(config) {
  console.log(config);
  for (var n in config.labels) {
    var f = config.labels[n];
    sf.appendChild(folderLine(f));
  }
  var newLine = folderLine({member:true, label:'', unlabel:'', name:''}, true);
  sf.appendChild(newLine);
  updateTriggerInstallation(config);
}).loadPage();

document.body.addEventListener('keyup', function(evt) {
  //stop any special chars besides space in name or labels
  //especially important to stop are ',' ';' and quote chars
  var elt = evt.srcElement;
  if (elt.type == 'text') {
    if (/[^\/\w ]/.test(elt.value)) {
      elt.value = String(elt.value).replace(/[^\/\w ]/g, '');
    }
  }
}, true);
</script>