7:00 – 3:00 SR

• Freezing rain today. The roads have the dull glaze of ice. It’s a great day for telework.
• Spent a few hours chasing odd errors that I thought were based on JavaScript inheritance but actually turned out to be server oddness. Turns out data provided by remote servers like ‘HTTP_REFERER’ is not standardized and might not be provided. Good thing to note.
• Working on making scatterplot OO. Then I’m going to see if I can make the panel consist of different directives. Or at least use ng-if two switch between the minimal, hovered and selected items.
• OO for scatterplot is done. I didn’t like the way that the gl-matrix library was putting it’s elements into the global/window namespace, so I changed that so that they are now under glx. The way that they were doing it was really odd though:

(function(_global) {
  "use strict";

  var shim = {};
  if (typeof(exports) === 'undefined') {
    if(typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
      shim.exports = {};
      define(function() {
        return shim.exports;
      });
    } else {
      // gl-matrix lives in a browser, define its namespaces in global
      shim.exports = typeof(window) !== 'undefined' ? window : _global;
    }
  }
  else {
    // gl-matrix lives in commonjs, define its namespaces in exports
    shim.exports = exports;
  }

  (function(exports) {
	// all the matrix code goes here

  })(shim.exports);
})(this);

• It turns out that this is a strategy for integrating with Nodejs, which has an ‘exports’ property which is how they handle namespacing. Kind of. More learning to do here.
• Got the switching of html working with ng-if. To keep the smooth transitions, I have an outer wrapper div that gets the overall (size, color) style. It contains three divs that are switched between using ng-if:

<div class="floatingPanelStyle" ng-class="getCssClass()"
     ng-click="selectPanel()"
     ng-mouseenter="hoverPanel(true)"
     ng-mouseleave="hoverPanel(false)"
     ng-style="{'transform':getTransformString()}">
    <!-- <div ng-bind-html="getHtml()"></div> -->
    <div ng-if="checkPanelState('default')"><em>{{panelObj.id}}</em></div>
    <div ng-if="checkPanelState('hover')"><p>Hover</p></p><p>Click <a href="http://google.com">me</a>!</p></div>
    <div ng-if="checkPanelState('selected')"><p>Selected</p></p></div>
</div>

• Next step will be to put more sophisticated markup, like a form in there.