(js,css) Resizable left column in attendees editor

Will not work in IE since it doesn't support the "resize" CSS property.

Fixes #1479, #3667

NEWS

@@ -6,6 +6,7 @@ New features
 
 Enhancements
  - [web] allow custom email address to be one of the user's profile (#3551)
+ - [web] the left column of the attendees editor is resizable (not supported in IE) (#1479, #3667)
 
 Bug fixes
  - [eas] make sure we don't sleep for too long when EAS processes need interruption

UI/Templates/SchedulerUI/UIxAttendeesEditor.wox

@@ -11,7 +11,7 @@
   const:toolbar="none"
   const:popup="YES"
   const:cssFiles="datepicker.css,SOGoTimePicker.css"
-  const:jsFiles="datepicker.js,SOGoTimePicker.js">
+  const:jsFiles="datepicker.js,SOGoTimePicker.js,ResizeSensor.js">
   <div class="popupMenu" id="attendeesMenu">
     <ul><!-- space --></ul>
   </div>

UI/WebServerResources/ResizeSensor.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright Marc J. Schmidt. See the LICENSE file at the top-level
+ * directory of this distribution and at
+ * https://github.com/marcj/css-element-queries/blob/master/LICENSE.
+ */
+!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.ResizeSensor=t()}(this,function(){function e(e,t){var i=Object.prototype.toString.call(e),n="[object Array]"===i||"[object NodeList]"===i||"[object HTMLCollection]"===i||"undefined"!=typeof jQuery&&e instanceof jQuery||"undefined"!=typeof Elements&&e instanceof Elements,o=0,s=e.length;if(n)for(;s>o;o++)t(e[o]);else t(e)}var t=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)},i=function(n,o){function s(){var e=[];this.add=function(t){e.push(t)};var t,i;this.call=function(){for(t=0,i=e.length;i>t;t++)e[t].call()},this.remove=function(n){var o=[];for(t=0,i=e.length;i>t;t++)e[t]!==n&&o.push(e[t]);e=o},this.length=function(){return e.length}}function r(e,t){return e.currentStyle?e.currentStyle[t]:window.getComputedStyle?window.getComputedStyle(e,null).getPropertyValue(t):e.style[t]}function d(e,i){if(e.resizedAttached){if(e.resizedAttached)return void e.resizedAttached.add(i)}else e.resizedAttached=new s,e.resizedAttached.add(i);e.resizeSensor=document.createElement("div"),e.resizeSensor.className="resize-sensor";var n="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;",o="position: absolute; left: 0; top: 0; transition: 0s;";e.resizeSensor.style.cssText=n,e.resizeSensor.innerHTML='<div class="resize-sensor-expand" style="'+n+'"><div style="'+o+'"></div></div><div class="resize-sensor-shrink" style="'+n+'"><div style="'+o+' width: 200%; height: 200%"></div></div>',e.appendChild(e.resizeSensor),"static"==r(e,"position")&&(e.style.position="relative");var d=e.resizeSensor.childNodes[0],c=d.childNodes[0],l=e.resizeSensor.childNodes[1],a=function(){c.style.width=1e5+"px",c.style.height=1e5+"px",d.scrollLeft=1e5,d.scrollTop=1e5,l.scrollLeft=1e5,l.scrollTop=1e5};a();var f=!1,h=function(){e.resizedAttached&&(f&&(e.resizedAttached.call(),f=!1),t(h))};t(h);var u,v,z,p,y=function(){(z=e.offsetWidth)==u&&(p=e.offsetHeight)==v||(f=!0,u=z,v=p),a()},m=function(e,t,i){e.attachEvent?e.attachEvent("on"+t,i):e.addEventListener(t,i)};m(d,"scroll",y),m(l,"scroll",y)}e(n,function(e){d(e,o)}),this.detach=function(e){i.detach(n,e)}};return i.detach=function(t,i){e(t,function(e){e.resizedAttached&&"function"==typeof i&&(e.resizedAttached.remove(i),e.resizedAttached.length())||e.resizeSensor&&(e.contains(e.resizeSensor)&&e.removeChild(e.resizeSensor),delete e.resizeSensor,delete e.resizedAttached)})},i});

UI/WebServerResources/UIxAttendeesEditor.css

@@ -40,13 +40,19 @@ TABLE#freeBusy TH
   border: 0px;
   vertical-align: top; }
 
-TABLE#freeBusy TD.freeBusyHeader DIV,
-TABLE#freeBusy TD.freeBusyAttendees DIV
+TABLE#freeBusy TD.freeBusyHeader DIV
 { overflow: hidden; }
 
+TABLE#freeBusy TD.freeBusyAttendees DIV
+{ overflow-x: auto; }
+
 TABLE#freeBusy TD.freeBusyData DIV
 { overflow: scroll; }
 
+TABLE#freeBusyAttendees {
+  width: 100%;
+}
+
 TABLE#freeBusyAttendees TD.attendeeStatus
 { width: 24px;
   min-width: 24px;
@@ -144,16 +150,20 @@ TABLE#freeBusyAttendees TD
 TABLE#freeBusyData TR.futureData TD
 { border-left: none; }
 
-TABLE#freeBusy TD.freeBusyAttendees DIV
-{ width: 16em; }
+TABLE#freeBusy TD.freeBusyAttendees > DIV
+{ min-width: 16em;
+  resize: horizontal; /* NOTE: unsupported property in IE */ }
 
 TABLE#freeBusyAttendees TD.attendees INPUT
 { background-image: url("abcard.png");
   background-repeat: no-repeat;
   background-position: 4px center;
   border: 0px;
-  width: 12em;
-  padding-left: 24px; }
+  box-sizing: border-box;
+  display: table-cell;
+  margin: 0;
+  padding: 6px 0 6px 24px;
+  width: 100%; }
 
 TABLE#freeBusyAttendees TR.futureAttendee INPUT
 { background-image: none;

UI/WebServerResources/UIxAttendeesEditor.js

@@ -1666,6 +1666,12 @@ function onFreeBusyLoadHandler() {
     Event.observe(window, "resize", onWindowResize);
     $$('TABLE#freeBusy TD.freeBusyData DIV').first().observe("scroll", onScroll);
     scrollToEvent();
+
+    // Recompute dimensions of attendees cell (left size) and freebusy data cell (right size)
+    // when the attendees cell is resized.
+    new ResizeSensor($('freeBusyAttendees').parentNode, function() {
+            onWindowResize(null);
+    });
 }
 
 document.observe("dom:loaded", onFreeBusyLoadHandler);