Issue #94 big graphics update to disable CSS hover and click event on HEAD when not detached

build/bundle.js

@@ -16517,20 +16517,27 @@ var VisBranch = VisBase.extend({
       opacity: this.getTextOpacity()
     });
     this.set('text', text);
+    var attr = this.getAttributes();
 
     var rectPos = this.getRectPosition();
     var sizeOfRect = this.getRectSize();
     var rect = paper
       .rect(rectPos.x, rectPos.y, sizeOfRect.w, sizeOfRect.h, 8)
-      .attr(this.getAttributes().rect);
+      .attr(attr.rect);
     this.set('rect', rect);
 
     var arrowPath = this.getArrowPath();
     var arrow = paper
       .path(arrowPath)
-      .attr(this.getAttributes().arrow);
+      .attr(attr.arrow);
     this.set('arrow', arrow);
 
+    // set CSS
+    var keys = ['text', 'rect', 'arrow'];
+    _.each(keys, function(key) {
+      $(this.get(key).node).css(attr.css);
+    }, this);
+
     this.attachClickHandlers();
     rect.toFront();
     text.toFront();
@@ -16540,16 +16547,30 @@ var VisBranch = VisBase.extend({
     if (this.get('gitVisuals').options.noClick) {
       return;
     }
-    var commandStr = 'git checkout ' + this.get('branch').get('id');
+    var objs = [
-    var Main = require('../app');
+      this.get('rect'),
-    var objs = [this.get('rect'), this.get('text'), this.get('arrow')];
+      this.get('text'),
+      this.get('arrow')
+    ];
 
     _.each(objs, function(rObj) {
-      rObj.click(function() {
+      rObj.click(_.bind(this.onClick ,this));
+      //$(rObj.node).css('cursor', 'pointer');
+    }, this);
+  },
+
+  shouldDisableClick: function() {
+    return this.get('isHead') && !this.gitEngine.getDetachedHead();
+  },
+
+  onClick: function() {
+    if (this.shouldDisableClick()) {
+      return;
+    }
+
+    var commandStr = 'git checkout ' + this.get('branch').get('id');
+    var Main = require('../app');
     Main.getEventBaton().trigger('commandSubmitted', commandStr);
-      });
-      $(rObj.node).css('cursor', 'pointer');
-    });
   },
 
   updateName: function() {
@@ -16583,8 +16604,14 @@ var VisBranch = VisBase.extend({
 
     var arrowPath = this.getArrowPath();
     var dashArray = (this.getIsRemote()) ? '--' : '';
+    var cursorStyle = (this.shouldDisableClick()) ?
+      'auto' :
+      'pointer';
 
     return {
+      css: {
+        cursor: cursorStyle
+      },
       text: {
         x: textPos.x,
         y: textPos.y,
@@ -16622,20 +16649,28 @@ var VisBranch = VisBase.extend({
     this.animateToAttr(toAttr, speed, easing);
   },
 
+  setAttr: function(attr, instant, speed, easing) {
+    var keys = ['text', 'rect', 'arrow'];
+    _.each(keys, function(key) {
+      if (instant) {
+        this.get(key).attr(attr[key]);
+      } else {
+        this.get(key).stop().animate(attr[key], speed, easing);
+      }
+
+      $(this.get(key).node).css(attr.css);
+    }, this);
+  },
+
   animateToAttr: function(attr, speed, easing) {
     if (speed === 0) {
-      this.get('text').attr(attr.text);
+      this.setAttr(attr, /* instant */ true);
-      this.get('rect').attr(attr.rect);
-      this.get('arrow').attr(attr.arrow);
       return;
     }
 
     var s = speed !== undefined ? speed : this.get('animationSpeed');
     var e = easing || this.get('animationEasing');
-
+    this.setAttr(attr, /* instance */ false, s, e);
-    this.get('text').stop().animate(attr.text, s, e);
-    this.get('rect').stop().animate(attr.rect, s, e);
-    this.get('arrow').stop().animate(attr.arrow, s, e);
   }
 });
 
@@ -32031,20 +32066,27 @@ var VisBranch = VisBase.extend({
       opacity: this.getTextOpacity()
     });
     this.set('text', text);
+    var attr = this.getAttributes();
 
     var rectPos = this.getRectPosition();
     var sizeOfRect = this.getRectSize();
     var rect = paper
       .rect(rectPos.x, rectPos.y, sizeOfRect.w, sizeOfRect.h, 8)
-      .attr(this.getAttributes().rect);
+      .attr(attr.rect);
     this.set('rect', rect);
 
     var arrowPath = this.getArrowPath();
     var arrow = paper
       .path(arrowPath)
-      .attr(this.getAttributes().arrow);
+      .attr(attr.arrow);
     this.set('arrow', arrow);
 
+    // set CSS
+    var keys = ['text', 'rect', 'arrow'];
+    _.each(keys, function(key) {
+      $(this.get(key).node).css(attr.css);
+    }, this);
+
     this.attachClickHandlers();
     rect.toFront();
     text.toFront();
@@ -32054,16 +32096,30 @@ var VisBranch = VisBase.extend({
     if (this.get('gitVisuals').options.noClick) {
       return;
     }
-    var commandStr = 'git checkout ' + this.get('branch').get('id');
+    var objs = [
-    var Main = require('../app');
+      this.get('rect'),
-    var objs = [this.get('rect'), this.get('text'), this.get('arrow')];
+      this.get('text'),
+      this.get('arrow')
+    ];
 
     _.each(objs, function(rObj) {
-      rObj.click(function() {
+      rObj.click(_.bind(this.onClick ,this));
+      //$(rObj.node).css('cursor', 'pointer');
+    }, this);
+  },
+
+  shouldDisableClick: function() {
+    return this.get('isHead') && !this.gitEngine.getDetachedHead();
+  },
+
+  onClick: function() {
+    if (this.shouldDisableClick()) {
+      return;
+    }
+
+    var commandStr = 'git checkout ' + this.get('branch').get('id');
+    var Main = require('../app');
     Main.getEventBaton().trigger('commandSubmitted', commandStr);
-      });
-      $(rObj.node).css('cursor', 'pointer');
-    });
   },
 
   updateName: function() {
@@ -32097,8 +32153,14 @@ var VisBranch = VisBase.extend({
 
     var arrowPath = this.getArrowPath();
     var dashArray = (this.getIsRemote()) ? '--' : '';
+    var cursorStyle = (this.shouldDisableClick()) ?
+      'auto' :
+      'pointer';
 
     return {
+      css: {
+        cursor: cursorStyle
+      },
       text: {
         x: textPos.x,
         y: textPos.y,
@@ -32136,20 +32198,28 @@ var VisBranch = VisBase.extend({
     this.animateToAttr(toAttr, speed, easing);
   },
 
+  setAttr: function(attr, instant, speed, easing) {
+    var keys = ['text', 'rect', 'arrow'];
+    _.each(keys, function(key) {
+      if (instant) {
+        this.get(key).attr(attr[key]);
+      } else {
+        this.get(key).stop().animate(attr[key], speed, easing);
+      }
+
+      $(this.get(key).node).css(attr.css);
+    }, this);
+  },
+
   animateToAttr: function(attr, speed, easing) {
     if (speed === 0) {
-      this.get('text').attr(attr.text);
+      this.setAttr(attr, /* instant */ true);
-      this.get('rect').attr(attr.rect);
-      this.get('arrow').attr(attr.arrow);
       return;
     }
 
     var s = speed !== undefined ? speed : this.get('animationSpeed');
     var e = easing || this.get('animationEasing');
-
+    this.setAttr(attr, /* instance */ false, s, e);
-    this.get('text').stop().animate(attr.text, s, e);
-    this.get('rect').stop().animate(attr.rect, s, e);
-    this.get('arrow').stop().animate(attr.arrow, s, e);
   }
 });
 

index.html

@@ -426,7 +426,7 @@
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching
   -->
-  <script src="build/bundle.min.b384fc3e.js"></script>
+  <script src="build/bundle.js"></script>
 
   <!-- The advantage of github pages: super-easy, simple, slick static hostic.
        The downside? No raw logs to parse for analytics, so I have to include

src/js/visuals/visBranch.js

@@ -350,20 +350,27 @@ var VisBranch = VisBase.extend({
       opacity: this.getTextOpacity()
     });
     this.set('text', text);
+    var attr = this.getAttributes();
 
     var rectPos = this.getRectPosition();
     var sizeOfRect = this.getRectSize();
     var rect = paper
       .rect(rectPos.x, rectPos.y, sizeOfRect.w, sizeOfRect.h, 8)
-      .attr(this.getAttributes().rect);
+      .attr(attr.rect);
     this.set('rect', rect);
 
     var arrowPath = this.getArrowPath();
     var arrow = paper
       .path(arrowPath)
-      .attr(this.getAttributes().arrow);
+      .attr(attr.arrow);
     this.set('arrow', arrow);
 
+    // set CSS
+    var keys = ['text', 'rect', 'arrow'];
+    _.each(keys, function(key) {
+      $(this.get(key).node).css(attr.css);
+    }, this);
+
     this.attachClickHandlers();
     rect.toFront();
     text.toFront();
@@ -373,16 +380,29 @@ var VisBranch = VisBase.extend({
     if (this.get('gitVisuals').options.noClick) {
       return;
     }
-    var commandStr = 'git checkout ' + this.get('branch').get('id');
+    var objs = [
-    var Main = require('../app');
+      this.get('rect'),
-    var objs = [this.get('rect'), this.get('text'), this.get('arrow')];
+      this.get('text'),
+      this.get('arrow')
+    ];
 
     _.each(objs, function(rObj) {
-      rObj.click(function() {
+      rObj.click(_.bind(this.onClick ,this));
+    }, this);
+  },
+
+  shouldDisableClick: function() {
+    return this.get('isHead') && !this.gitEngine.getDetachedHead();
+  },
+
+  onClick: function() {
+    if (this.shouldDisableClick()) {
+      return;
+    }
+
+    var commandStr = 'git checkout ' + this.get('branch').get('id');
+    var Main = require('../app');
     Main.getEventBaton().trigger('commandSubmitted', commandStr);
-      });
-      $(rObj.node).css('cursor', 'pointer');
-    });
   },
 
   updateName: function() {
@@ -416,8 +436,14 @@ var VisBranch = VisBase.extend({
 
     var arrowPath = this.getArrowPath();
     var dashArray = (this.getIsRemote()) ? '--' : '';
+    var cursorStyle = (this.shouldDisableClick()) ?
+      'auto' :
+      'pointer';
 
     return {
+      css: {
+        cursor: cursorStyle
+      },
       text: {
         x: textPos.x,
         y: textPos.y,
@@ -455,20 +481,28 @@ var VisBranch = VisBase.extend({
     this.animateToAttr(toAttr, speed, easing);
   },
 
+  setAttr: function(attr, instant, speed, easing) {
+    var keys = ['text', 'rect', 'arrow'];
+    _.each(keys, function(key) {
+      if (instant) {
+        this.get(key).attr(attr[key]);
+      } else {
+        this.get(key).stop().animate(attr[key], speed, easing);
+      }
+
+      $(this.get(key).node).css(attr.css);
+    }, this);
+  },
+
   animateToAttr: function(attr, speed, easing) {
     if (speed === 0) {
-      this.get('text').attr(attr.text);
+      this.setAttr(attr, /* instant */ true);
-      this.get('rect').attr(attr.rect);
-      this.get('arrow').attr(attr.arrow);
       return;
     }
 
     var s = speed !== undefined ? speed : this.get('animationSpeed');
     var e = easing || this.get('animationEasing');
-
+    this.setAttr(attr, /* instance */ false, s, e);
-    this.get('text').stop().animate(attr.text, s, e);
-    this.get('rect').stop().animate(attr.rect, s, e);
-    this.get('arrow').stop().animate(attr.arrow, s, e);
   }
 });