changeset 86:a0fdf2cf1d53

add "selection" feature to life_calendar; fix minor typos in deer_crash
author paulo
date Sat, 17 Sep 2016 00:11:41 -0700
parents 03c6971ed023
children 747073e68c42
files deer_crash/index.html life_calendar/index.html life_calendar/tooltip.js
diffstat 3 files changed, 98 insertions(+), 19 deletions(-) [+]
line diff
     1.1 --- a/deer_crash/index.html	Sat Jul 23 15:25:44 2016 -0600
     1.2 +++ b/deer_crash/index.html	Sat Sep 17 00:11:41 2016 -0700
     1.3 @@ -134,7 +134,7 @@
     1.4  Seeing my CBR500R laid down also made me sad. I got it almost brand new about 4 months before and have put less than 4000 miles on it at that time. Those aren't a lot of miles for a motorcycle, but those were a lot of miles for me in such a short amount of time, because I've been having so much fun riding it. I was expecting the worst. I've heard stories of how fragile the plastic fairings are on a sportsbike, how prone they are to shattering from even the mildest drops of the bike; from this crash, at a decent speed against a decent-sized object on the road, I was imagining the bike to be a total loss.
     1.5  </P>
     1.6  <P>
     1.7 -I thought of how expensive it was going to be to fix everything that I may just have to buy a new motorcycle to replace it-- but then I'm having doubts whether that would be worth the money if some stupid deer is just going to decide to crash into it again. I was dreading the idea of spending even more money just to get me back to where I was; that of not being to justify the extra expenses; and, finally, of losing the ability to experience the sublime joys of motorcycle riding itself.
     1.8 +I thought of how expensive it was going to be to fix everything that I may just have to buy a new motorcycle to replace it-- but then I'm having doubts whether that would be worth the money if some stupid deer is just going to decide to crash into it again. I was dreading the idea of spending even more money just to get me back to where I was; that of not being able to justify the extra expenses; and, finally, of losing the ability to experience the sublime joys of motorcycle riding itself.
     1.9  </P>
    1.10  <P>
    1.11  But first, I had to bring the bike back upright right away. It was not exactly because I wanted to inspect the damage I couldn't see yet, or that I had to get it out of the way of other vehicles, or some other purely logical reason like that; it was more of an instinct of somehow preventing more damage to the motorcycle by getting it off the ground and onto its own wheels as soon as possible. This actually makes a lot of sense: it could be leaking fluids, or it could be unstable and shift weight and damage another part if left on the ground. But I wasn't thinking of those at the moment. I just felt as if the bike was an injured animal itself; that it must be helped back to its feet as if it might've felt pain and needed assistance.
    1.12 @@ -158,7 +158,7 @@
    1.13  A park ranger was there within minutes, asking me if I was okay. Again, I said I felt fine, except for the soreness on my left foot.
    1.14  </P>
    1.15  <P>
    1.16 -For a while, a new dangerous situation took place. Cars were stopping or slowing down suddenly when they went around that curve and saw the accident scene. Whether they were gawking at the dead deer, gawking at me or bike, asking me if I needed help, or just really not seeing what's going on in front of them until the last second, a half dozen or so cars almost rear-ended each other and almost caused another crash.
    1.17 +For a while, a new dangerous situation took place. Cars were stopping or slowing down suddenly when they went around that curve and saw the accident scene. Whether they were gawking at the dead deer, gawking at me or the bike, asking me if I needed help, or just really not seeing what's going on in front of them until the last second, a half dozen or so cars almost rear-ended each other and almost caused another crash.
    1.18  </P>
    1.19  <P>
    1.20  Throughout this time, I was pacing around to inspect the damage to me and the bike. Amazingly, we were both almost completely fine.
    1.21 @@ -191,7 +191,7 @@
    1.22  <IMG ALIGN="middle" SRC="10.jpg" BORDER="0" ALT="">
    1.23  </P>
    1.24  <P>
    1.25 -<I>(Damage to leather jacket. The decorative piping is torn up, but the leather on the sleeve itself does not rip. I also only took a picture of the left sleeve, because I thought that's the side I fell and slid on and thought the damage is limited there, but later on I'd notice similar scuffs on the right sleeve. Weird.)</I>
    1.26 +<I>(Damage to leather jacket. The decorative piping is torn up, but the leather on the sleeve itself did not rip. I also only took a picture of the left sleeve, because I thought that's the side I fell and slid on and thought the damage is limited there, but later on I'd notice similar scuffs on the right sleeve. Weird.)</I>
    1.27  </P>
    1.28  <P>
    1.29  <IMG ALIGN="middle" SRC="13.jpg" BORDER="0" ALT="">
     2.1 --- a/life_calendar/index.html	Sat Jul 23 15:25:44 2016 -0600
     2.2 +++ b/life_calendar/index.html	Sat Sep 17 00:11:41 2016 -0700
     2.3 @@ -79,6 +79,12 @@
     2.4                  margin: 1px;
     2.5              }
     2.6  
     2.7 +            div#tooltip h3 {
     2.8 +                color: #333333;
     2.9 +                font-size: 0.8em;
    2.10 +                margin: 2px;
    2.11 +            }
    2.12 +
    2.13              td {
    2.14                  border-color: #FFFFFF;
    2.15              }
    2.16 @@ -133,6 +139,10 @@
    2.17              var remainderWeeks;
    2.18              var restOfYearWeeks;
    2.19  
    2.20 +            var selecting = false;
    2.21 +            var start_wyc = null;
    2.22 +            var end_wyc = null;
    2.23 +
    2.24              function validateBirthday(birthday) {
    2.25                  var birthdayPattern = /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/;
    2.26                  return birthdayPattern.test( $("#birthday").val());
    2.27 @@ -192,14 +202,18 @@
    2.28                          break;
    2.29                      }
    2.30                  }
    2.31 -                var cal = getCalendar(birthdayDate, week, year);
    2.32                  return {
    2.33                      week: week,
    2.34                      year: year,
    2.35 -                    cal: cal,
    2.36 +                    cal: getCalendar(birthdayDate, week, year),
    2.37 +                    weeks: nWeeks*year + week,
    2.38                  }
    2.39              }
    2.40  
    2.41 +            function inSpan(x, s, e) {
    2.42 +                return x >= s && x <= e;
    2.43 +            }
    2.44 +
    2.45              function loop(x, f) {
    2.46                  for (var i = 0; i < x; f(i++));
    2.47              }
    2.48 @@ -212,6 +226,41 @@
    2.49                  return ret;
    2.50              }
    2.51  
    2.52 +            function setStyle(e) {
    2.53 +                var styles = [];
    2.54 +
    2.55 +                if (e["_fill_color"] != undefined) {
    2.56 +                    styles.push("background-color: " + e._fill_color);
    2.57 +                } 
    2.58 +                if (e["_border_color"] != undefined) {
    2.59 +                    styles.push("border-color: " + e._border_color);
    2.60 +                }
    2.61 +
    2.62 +                if (styles.length == 0) {
    2.63 +                    e.setAttribute("style", undefined);
    2.64 +                } else {
    2.65 +                    e.setAttribute("style", styles.join('; '));
    2.66 +                }
    2.67 +            }
    2.68 +
    2.69 +            function highlightDistance(e0, e1_wyc, e2_wyc) {
    2.70 +                var calParent = e0.parentNode.parentNode;
    2.71 +                var min_wyc = (e1_wyc.weeks <= e2_wyc.weeks) ? e1_wyc : e2_wyc;
    2.72 +                var max_wyc = (e2_wyc == min_wyc) ? e1_wyc : e2_wyc;
    2.73 +                for (var year = 0; year < lifespan; year++) {
    2.74 +                    for (var week = 0; week < nWeeks; week++) {
    2.75 +                        w = nWeeks*year + week;
    2.76 +                        e = calParent.childNodes[year].childNodes[week]  
    2.77 +                        if (inSpan(w, min_wyc.weeks, max_wyc.weeks)) {
    2.78 +                            e._border_color = "black";
    2.79 +                        } else {
    2.80 +                            e._border_color = undefined;
    2.81 +                        }
    2.82 +                        setStyle(e);
    2.83 +                    }
    2.84 +                }
    2.85 +            }
    2.86 +
    2.87              function cycleColors(e) {
    2.88                  var colors = [
    2.89                      undefined,
    2.90 @@ -225,11 +274,7 @@
    2.91                  var i = 0;
    2.92                  for (; i < colors.length, colors[i] != e._fill_color; i++);
    2.93                  e._fill_color = colors[(i + 1) % colors.length];
    2.94 -                if (e._fill_color != undefined) {
    2.95 -                    e.setAttribute("style", "background-color: " + e._fill_color);
    2.96 -                } else {
    2.97 -                    e.setAttribute("style", undefined);
    2.98 -                }
    2.99 +                setStyle(e);
   2.100              }
   2.101  
   2.102              function _createElement(tagName, className) {
   2.103 @@ -262,10 +307,40 @@
   2.104                      var calYear = wyc.cal.getFullYear();
   2.105                      var calMonth = wyc.cal.getMonth() + 1;
   2.106                      var calDay = wyc.cal.getDate();
   2.107 -                    createTooltip(evt, calYear + '-' + calMonth + '-' + calDay, "(Week: " + wyc.week + ", Year: " + wyc.year + ")");
   2.108 +                    var title = calYear + '-' + calMonth + '-' + calDay;
   2.109 +                    var text = "(Week: " + wyc.week + ", Year: " + wyc.year + ")";
   2.110 +                    var subtext = null;
   2.111 +                    if (selecting) {
   2.112 +                        end_wyc = wyc;
   2.113 +                        highlightDistance(e, start_wyc, end_wyc);
   2.114 +                    }
   2.115 +                    if (start_wyc && end_wyc) {
   2.116 +                        var min_wyc = (start_wyc.weeks <= end_wyc.weeks) ? start_wyc : end_wyc;
   2.117 +                        var max_wyc = (end_wyc == min_wyc) ? start_wyc : end_wyc;
   2.118 +                        if (inSpan(wyc.weeks, min_wyc.weeks, max_wyc.weeks)) {
   2.119 +                            var sel_weeks = max_wyc.weeks - min_wyc.weeks;
   2.120 +                            var sel_years = sel_weeks/nWeeks;
   2.121 +                            subtext = "[Selected: weeks: " + sel_weeks + " years: " + sel_years.toFixed(2) + "]";
   2.122 +                        }
   2.123 +                    }
   2.124 +                    createTooltip(evt, title, text, subtext);
   2.125                  });
   2.126                  e.addEventListener("click", function() {
   2.127 -                    cycleColors(e);
   2.128 +                    var wyc = getWeekYearCal(e, i);
   2.129 +                    highlightDistance(e, wyc, wyc);
   2.130 +                    if (start_wyc && end_wyc) {
   2.131 +                        start_wyc = null;
   2.132 +                        end_wyc = null;
   2.133 +                    } else {
   2.134 +                        cycleColors(e);
   2.135 +                    }
   2.136 +                });
   2.137 +                e.addEventListener("mousedown", function() {
   2.138 +                    selecting = true;
   2.139 +                    start_wyc = getWeekYearCal(e, i);
   2.140 +                });
   2.141 +                e.addEventListener("mouseup", function() {
   2.142 +                    selecting = false;
   2.143                  });
   2.144              }
   2.145  
     3.1 --- a/life_calendar/tooltip.js	Sat Jul 23 15:25:44 2016 -0600
     3.2 +++ b/life_calendar/tooltip.js	Sat Sep 17 00:11:41 2016 -0700
     3.3 @@ -9,7 +9,7 @@
     3.4  	return document.querySelector("#" + _tt_options.tooltipId);
     3.5  }
     3.6  
     3.7 -function adjustTooltip(evt, tooltipElm, title, text) {
     3.8 +function adjustTooltip(evt, tooltipElm, title, text, subtext) {
     3.9  	var offset = _tt_options.offsetDefault;
    3.10  	var scrollY = window.scrollY || window.pageYOffset;
    3.11  	var scrollX = window.scrollX || window.pageXOffset;
    3.12 @@ -22,37 +22,41 @@
    3.13  	tooltipElm.style.top = tooltipTop + "px";
    3.14  	tooltipElm.style.left = tooltipLeft + "px";
    3.15  
    3.16 -	setTooltipText(tooltipElm, title, text);
    3.17 +	setTooltipText(tooltipElm, title, text, subtext);
    3.18  }
    3.19  
    3.20  function removeTooltip() {
    3.21  	document.querySelector("body").removeChild(getTooltipElm());
    3.22  }
    3.23  
    3.24 -function createTooltip(evt, title, text) {
    3.25 +function createTooltip(evt, title, text, subtext) {
    3.26  	var tooltipElm = getTooltipElm();
    3.27  
    3.28  	if (!tooltipElm) {
    3.29  		tooltipElm = document.createElement("div");
    3.30  		tooltipElm.appendChild(document.createElement("h1"));
    3.31  		tooltipElm.appendChild(document.createElement("h2"));
    3.32 +		tooltipElm.appendChild(document.createElement("h3"));
    3.33  
    3.34 -		tooltipElm.style.position = "absolute";
    3.35 -		tooltipElm.setAttribute("id", _tt_options.tooltipId);
    3.36 +		tooltipElm.style.position = "absolute"; tooltipElm.setAttribute("id", _tt_options.tooltipId);
    3.37  
    3.38  		document.querySelector("body").appendChild(tooltipElm);
    3.39  	}
    3.40  
    3.41 -	adjustTooltip(evt, tooltipElm, title, text);
    3.42 +	adjustTooltip(evt, tooltipElm, title, text, subtext);
    3.43  }
    3.44  
    3.45 -function setTooltipText(tooltipElm, title, text) {
    3.46 +function setTooltipText(tooltipElm, title, text, subtext) {
    3.47  	var eTitle = tooltipElm.children[0];
    3.48  	var eText = tooltipElm.children[1];
    3.49 +	var eSubText = tooltipElm.children[2];
    3.50  	if (eTitle && title) {
    3.51  		eTitle.textContent = title;
    3.52  	}
    3.53  	if (eText && text) {
    3.54  		eText.textContent = text;
    3.55  	}
    3.56 +	if (eSubText) {
    3.57 +		eSubText.textContent = subtext;
    3.58 +	}
    3.59  }