Thread: [Archive-access-cvs] SF.net SVN: archive-access:[3157] trunk/archive-access/projects/wayback/ wayb

SourceForge Headquarters 225 Broadway Suite 1600 San Diego, CA 92101 +1 (858) 422-6466

Revision: 3157
          http://archive-access.svn.sourceforge.net/archive-access/?rev=3157&view=rev
Author:   bradtofel
Date:     2010-06-18 00:39:52 +0000 (Fri, 18 Jun 2010)

Log Message:
-----------
INITIAL REV: new Query Replay .jsp which shows 1 year at a time, displaying the results on a 'cal' style calendar

Added Paths:
-----------
    trunk/archive-access/projects/wayback/wayback-webapp/src/main/webapp/WEB-INF/query/BubbleCalendar.jsp

Added: trunk/archive-access/projects/wayback/wayback-webapp/src/main/webapp/WEB-INF/query/BubbleCalendar.jsp
===================================================================

--- trunk/archive-access/projects/wayback/wayback-webapp/src/main/webapp/WEB-INF/query/BubbleCalendar.jsp	                        (rev 0)
+++ trunk/archive-access/projects/wayback/wayback-webapp/src/main/webapp/WEB-INF/query/BubbleCalendar.jsp	2010-06-18 00:39:52 UTC (rev 3157)
@@ -0,0 +1,604 @@
+<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
+<%@ page import="java.util.List" %>
+<%@ page import="java.util.ArrayList" %>
+<%@ page import="java.util.Calendar" %>
+<%@ page import="java.util.Date" %>
+<%@ page import="java.util.Iterator" %>
+<%@ page import="org.archive.wayback.ResultURIConverter" %>
+<%@ page import="org.archive.wayback.WaybackConstants" %>
+<%@ page import="org.archive.wayback.core.CaptureSearchResult" %>
+<%@ page import="org.archive.wayback.core.CaptureSearchResults" %>
+<%@ page import="org.archive.wayback.core.UIResults" %>
+<%@ page import="org.archive.wayback.partition.BubbleCalendarData" %>
+<%@ page import="org.archive.wayback.util.partition.Partition" %>
+<%@ page import="org.archive.wayback.util.StringFormatter" %>
+<jsp:include page="/WEB-INF/template/CookieJS.jsp" flush="true" />
+<%
+UIResults results = UIResults.extractCaptureQuery(request);
+
+StringFormatter fmt = results.getWbRequest().getFormatter();
+ResultURIConverter uriConverter = results.getURIConverter();
+
+// deployment-specific URL prefixes
+String staticPrefix = results.getStaticPrefix();
+String queryPrefix = results.getQueryPrefix();
+String replayPrefix = results.getReplayPrefix();
+
+//deployment-specific address for the graph generator:
+String graphJspPrefix = results.getContextConfig("graphJspPrefix");
+if(graphJspPrefix == null) {
+	graphJspPrefix = queryPrefix;
+}
+
+// graph size "constants": These are currently baked-in to the JS logic...
+int imgWidth = 735;
+int imgHeight = 75;
+int yearWidth = 49;
+int monthWidth = 4;
+
+BubbleCalendarData data = new BubbleCalendarData(results);
+
+String yearEncoded = data.getYearsGraphString(imgWidth,imgHeight);
+String yearImgUrl = graphJspPrefix + "jsp/graph.jsp?graphdata=" + yearEncoded;
+
+// a Calendar object for doing days-in-week, day-of-week,days-in-month math:
+Calendar cal = BubbleCalendarData.getUTCCalendar();
+
+%>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
+<script type="text/javascript" src="<%= staticPrefix %>js/excanvas.compiled.js"></script>
+<script type="text/javascript" src="<%= staticPrefix %>js/jquery.bt.min.js" charset="utf-8"></script>
+<script type="text/javascript" src="<%= staticPrefix %>js/jquery.hoverintent.min.js" charset="utf-8"></script>
+<script type="text/javascript" src="<%= staticPrefix %>js/graph-calc.js" ></script>
+<!-- More ugly JS to manage the highlight over the graph -->
+<script type="text/javascript">
+
+
+var firstDate = <%= data.dataStartMSSE %>;
+var lastDate = <%= data.dataEndMSSE %>;
+var wbPrefix = "<%= replayPrefix %>";
+var wbCurrentUrl = "<%= data.searchUrlForJS %>";
+
+var curYear = <%= data.yearNum - 1996 %>;
+var curMonth = -1;
+var yearCount = 15;
+var firstYear = 1996;
+var startYear = <%= data.yearNum - 1996 %>;
+var imgWidth = <%= imgWidth %>;
+var yearImgWidth = <%= yearWidth %>;
+var monthImgWidth = <%= monthWidth %>;
+var trackerVal = "none";
+
+function showTrackers(val) {
+	if(val == trackerVal) {
+		return;
+	}
+
+    document.getElementById("wbMouseTrackYearImg").style.display = val;
+    trackerVal = val;
+}
+function getElementX2(obj) {
+	var thing = jQuery(obj);
+	if((thing == undefined) 
+			|| (typeof thing == "undefined") 
+			|| (typeof thing.offset == "undefined")) {
+		return getElementX(obj);
+	}
+	return Math.round(thing.offset().left);
+}
+function setActiveYear(year) {
+    if(curYear != year) {
+        var yrOff = year * yearImgWidth;
+        document.getElementById("wbMouseTrackYearImg").style.left = yrOff + "px";
+        if(curYear != -1) {
+        	document.getElementById("highlight-"+curYear).setAttribute("class","inactiveHighlight");
+        }
+        document.getElementById("highlight-"+year).setAttribute("class","activeHighlight");
+        curYear = year;
+    }
+}
+function trackMouseMove(event,element) {
+
+    var eventX = getEventX(event);
+    var elementX = getElementX2(element);
+    var xOff = eventX - elementX;
+	if(xOff < 0) {
+		xOff = 0;
+	} else if(xOff > imgWidth) {
+		xOff = imgWidth;
+	}
+    var monthOff = xOff % yearImgWidth;
+
+    var year = Math.floor(xOff / yearImgWidth);
+	var yearStart = year * yearImgWidth;
+    var monthOfYear = Math.floor(monthOff / monthImgWidth);
+    if(monthOfYear > 11) {
+        monthOfYear = 11;
+    }
+    var month = (year * 12) + monthOfYear;
+    var day = 1;
+	if(monthOff % 2 == 1) {
+		day = 15;
+	}
+	var dateString = 
+		zeroPad(year + firstYear) + 
+		zeroPad(monthOfYear+1,2) +
+		zeroPad(day,2) + "000000";
+
+	var url = wbPrefix + dateString + '*/' +  wbCurrentUrl;
+	document.getElementById('wm-graph-anchor').href = url;
+	setActiveYear(year);
+}
+</script>
+
+<script type="text/javascript">
+$().ready(function(){
+    $(".date").each(function(i){
+        var size = $(this).find(".hidden").text();
+        var offset = size / 2;
+        if (size >= 1 && size <= 20) {size = 20, offset = 10;}
+        $(this).find("img").attr("src","<%= staticPrefix %>images/blueblob-dk.png");
+        $(this).find(".measure").css({'width':+size+'px','height':+size+'px','top':'-'+offset+'px','left':'-'+offset+'px'});
+    });
+    $(".day a").each(function(i){
+        var dateClass = $(this).attr("class");
+        var dateId = "#"+dateClass;
+        $(this).hover(function(){
+            $(dateId).removeClass("opacity20");
+        },function(){
+            $(dateId).addClass("opacity20");    
+        });
+    });
+    $(".tooltip").bt({
+        positions: ['top','right','left','bottom'],
+        contentSelector: "$(this).find('.pop').html()",
+        padding: '0', 
+        width: '145px',
+        spikeGirth: 12, 
+        spikeLength: 12,
+        overlap: '2px',
+        cornerRadius: 5,
+        fill: '#efefef',
+        strokeWidth: 1,
+        strokeStyle: '#efefef',
+        shadow: true, 
+        shadowColor: '#333',
+        shadowBlur: 6,
+        shadowOffsetX: 0,
+        shadowOffsetY: 0, 
+        noShadowOpts: {strokeStyle:'#ccc'},
+        hoverIntentOpts: {interval:0,timeout:4000}, 
+        clickAnywhereToClose: true,
+        closeWhenOthersOpen: true,
+        windowMargin: 30,
+        cssStyles: {
+            fontSize: '12px',
+            fontFamily: '"Arial","Helvetica Neue","Helvetica",sans-serif',
+            lineHeight: 'normal',
+            padding: '10px',
+            color: '#333'
+        }
+    });
+});
+</script>
+<style type="text/css">
+body,div,p,td,th,ul,ol,li {margin:0;padding:0;}
+body {background-color:#fff;font-family:"Arial","Helvetica Neue","Helvetica",sans-serif;font-size:100%;}
+img {border:none;}
+a {color:#069;}
+.clearfix{width:100%;clear:both;}
+.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
+#position {padding:0;margin:0 auto;width:990px;background-color:#fff;}
+#wbCalendar {position:relative;width:990px;margin-top:25px;}
+.calPosition {padding:15px 0 25px 25px;}
+#calUnder {overflow:hidden;}
+#calOver {position:absolute;top:0;left:0;}
+.hidden{display:none;}
+.opacity20 {
+    opacity:.2;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+	filter: alpha(opacity=20);
+}
+.month {
+    width: 240px;
+    height: 210px;
+    float: left;
+}
+.month table {
+    border-collapse: collapse;
+    font-family: "Arial", sans-serif;
+    border-spacing: 1px;
+}
+.month table th {
+    font-size: 0.75em;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 6px;
+}
+.month table span.label {
+    display: block;
+    min-height: 20px;
+}
+.month table td {
+    padding: 0;
+    vertical-align: middle;
+    color: #666;
+}
+.month table td .day {
+    width: 30px;
+    height: 30px;
+    text-align: center;
+}
+.month table td .day a,
+.month table td .day span {
+    display: block;
+    font-size: 0.6875em;
+    width: 30px;
+    height: 22px;
+    padding-top: 8px;
+}
+.month table td .day a {
+    color: #000;
+    font-weight: 700;
+    text-decoration: none;
+}
+.month table td .day span {
+    padding-top: 9px;
+    height: 19px;
+}
+.month table td .day a:hover {
+    font-size: 0.9375em;
+    padding-top: 6px;
+    height: 22px;
+}
+.month table td .date {
+    width: 30px;
+    height: 30px;
+}
+.month table td .position {
+    position: relative;
+    top: 15px;
+    left: 15px;
+    width: 1px;
+    height: 1px;
+}
+.month table td .measure {
+    position: absolute;
+}
+.activeHighlight {
+    background-color: #000!important;
+    padding-top: 4px;
+    font-size: 1.375em!important;
+    color: #fff300!important;
+    font-weight: normal!important;
+    cursor: pointer;
+}
+.inactiveHighlight {
+    background-color: #fff!important;
+    padding-top: 4px;
+    font-size: .75em!important;
+    color: #000!important;
+    font-weight: normal!important;
+    cursor: pointer;
+}
+
+.bt-content {
+  text-align: left;
+}
+.pop {display:none;}
+.bt-content h3 {font-size: 1em;font-weight: 700;text-transform: uppercase;margin:0 0 5px;}
+.bt-content p {font-size: 0.875em;margin: 5px 0;color:#666;}
+.bt-content ul {line-height:1.5em;margin:0 0 0 1em;}
+.bt-content em {color:#999;}
+.bt-content a:hover {color:#036;}
+
+#wbSearch {float:left;padding:30px 30px 0;}
+#wbSearch #logo {float:left; width:223px;}
+#wbSearch #form {float:left;width:707px;}
+#wbSearch form {margin:0;padding:0;}
+#wbSearch input {font-family:"Arial","Helvetica Neue","Helvetica",sans-serif;font-size:1.125em;}
+#wbSearch input[type=text] {width:450px;font-weight:700;}
+#wbSearch input[type=submit] {vertical-align: middle;}
+#wbMeta {padding:15px 0;}
+#wbMeta p {margin:0 0 2px;padding:0;}
+#wbMeta p.wbThis {font-size:0.75em;}
+#wbMeta p.wbNote {color:#666;font-size: 0.6875em;}
+#wbMeta p.wbNote a {color:#666;}
+#wbChart {text-align:center;padding:0 30px;}
+#wbChartThis {position:relative;margin:0 auto;}
+.wbChartThisContainer,.wbChartHover {width:<%= yearWidth %>px;height:30px;float:left;overflow:visible;}
+.wbChartThisTop {
+    width: <%= yearWidth %>px;
+    height: 80px;
+    border: 1px solid #ccc;
+}
+.wbGradient {
+    background: #f3f3f3 -moz-linear-gradient(top,#ffffff,#f3f3f3);
+    background: #f3f3f3 -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3), color-stop(1.0, #f3f3f3));
+    background-color: #f3f3f3;
+    filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true',startColorstr=#FFFFFFFF, endColorstr=#FFF3F3F3);
+}
+.wbSelected, #wbSelected {
+    background: #fff300!important;
+    border-bottom: 1px solid #000!important;
+    filter: progid:DXImageTransform.Microsoft.Gradient(enabled='false')!important;
+    cursor: pointer;
+}
+#wbSelected {
+    cursor: default!important;
+}
+.wbChartThisBtm {
+    text-align:center;
+}
+.wbChartSm {
+    padding-top: 4px;
+    font-size: 0.625em;
+    color: #999;
+    font-weight: 700;
+}
+.wbChartBig, #wbChartBig {
+    background-color: #000!important;
+    padding-top: 4px;
+    font-size: 1.375em!important;
+    color: #fff300!important;
+    font-weight: normal!important;
+    cursor: pointer;
+}
+#wbChartBig {
+    cursor: default!important;
+}
+#wbChartGraph,#wbChartOver {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    cursor: pointer;
+}
+
+</style>
+
+<script type="text/javascript">
+$().ready(function(){
+    var yrCount = $(".wbChartThisContainer").size();
+    var yrTotal = <%= yearWidth %> * yrCount;
+    var yrPad = (930 - yrTotal) / 2;
+    $("#wbChartThis").css("padding-left",yrPad+"px");
+});
+</script>
+
+<div id="wbChart">
+    
+  <div id="wbChartThis">
+        <a style="position:relative; white-space:nowrap; width:<%= imgWidth %>px;height:<%= imgHeight %>px;" href="" id="wm-graph-anchor">
+        <div id="wm-ipp-sparkline" style="position:relative; white-space:nowrap; width:<%= imgWidth %>px;height:<%= imgHeight %>px;background: #f3f3f3 -moz-linear-gradient(top,#ffffff,#f3f3f3);background: #f3f3f3 -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3), color-stop(1.0, #f3f3f3));background-color: #f3f3f3;filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true',startColorstr=#FFFFFFFF, endColorstr=#FFF3F3F3);cursor:pointer;border: 1px solid #ccc;border-left:none;" title="<%= fmt.format("ToolBar.sparklineTitle") %>">
+			<img id="sparklineImgId" style="position:absolute;z-index:9012;top:0;left:0;"
+				onmouseover="showTrackers('inline');" 
+				onmouseout="showTrackers('none');"
+				onmousemove="trackMouseMove(event,this)"
+				alt="sparklines"
+				width="<%= imgWidth %>"
+				height="<%= imgHeight %>"
+				border="0"
+				src="<%= yearImgUrl %>"></img>
+			<img id="wbMouseTrackYearImg" 
+				style="display:none; position:absolute; z-index:9010;"
+				width="<%= yearWidth %>" 
+				height="<%= imgHeight %>"
+				border="0"
+				src="<%= staticPrefix %>images/toolbar/transp-yellow-pixel.png"></img>
+			<img id="wbMouseTrackMonthImg"
+				style="display:none; position:absolute; z-index:9011; " 
+				width="<%= monthWidth %>"
+				height="<%= imgHeight %>" 
+				border="0"
+				src="<%= staticPrefix %>images/toolbar/transp-red-pixel.png"></img>
+        </div>
+        </a>
+        	<%
+        	for(int i = 1996; i < 2011; i++) {
+        		String curClass = "inactiveHighlight";
+        		if(data.yearNum == i) {
+            		curClass = "activeHighlight";
+        		}
+        	%>
+	            <div class="wbChartThisContainer">
+	                <a style="text-decoration: none;" href="<%= queryPrefix + i + "0101000000*/" + data.searchUrlForJS %>">
+	                
+	                	<div id="highlight-<%= i - 1996 %>"
+						onmouseover="showTrackers('inline'); setActiveYear(<%= i - 1996 %>)" 
+						onmouseout="showTrackers('none');"
+	                	class="<%= curClass %>"><%= i %></div>
+	                </a>
+	            </div>
+            <%
+        	}
+            %>
+  </div>
+</div>
+<div class="clearfix"></div>
+
+<div id="wbCalendar">
+    
+  <div id="calUnder" class="calPosition">
+
+    
+
+
+<%
+// draw 12 months, 0-11 (0=Jan, 11=Dec)
+for(int moy = 0; moy < 12; moy++) {
+	Partition<Partition<CaptureSearchResult>> curMonth = data.monthsByDay.get(moy);
+	List<Partition<CaptureSearchResult>> monthDays = curMonth.list();
+%>
+    <div class="month" id="<%= data.yearNum %>-<%= moy %>">
+	    <table>
+	
+	       <thead>
+	           <tr>
+	               <th colspan="7"><span class="label"></span></th>
+	           </tr>
+	       </thead>
+	       <tbody>
+	           <tr>
+<%
+		cal.setTime(curMonth.getStart());
+		int skipDays = cal.get(Calendar.DAY_OF_WEEK) - 1;
+		int daysInMonth = cal.getActualMaximum(Calendar.DAY_OF_MONTH);
+		// skip until the 1st:
+		for(int i = 0; i < skipDays; i++) {
+			%><td><div class="date"></div></td><%
+		}
+		int dow = skipDays;
+		int dom;
+		for(dom = 0; dom < daysInMonth; dom++) {
+
+
+			int count = monthDays.get(dom).count();
+			if(count > 0) {
+				// one or more captures in this day:
+				CaptureSearchResult firstCaptureInDay = 
+					monthDays.get(dom).list().get(0);
+				String replayUrl = uriConverter.makeReplayURI(
+							firstCaptureInDay.getCaptureTimestamp(),
+							firstCaptureInDay.getOriginalUrl());
+				String safeUrl = fmt.escapeHtml(replayUrl);		
+				%><td>
+                    <div class="date">
+                        <div class="position">
+                           <div class="hidden"><%= count %></div>
+                           <div class="measure opacity20" id=""><img width="100%" height="100%"/></div>
+                        </div>
+                    </div>
+				</td><%
+
+			} else {
+				// zero captures in this day:
+				%><td>
+	                <div class="date"></div>
+				</td><%
+				
+			}
+
+
+			if(((dom+skipDays+1) % 7) == 0) {
+				// end of the week, start a new tr:
+				%></tr><tr><%
+			}
+		}
+		// fill in blank days until the end of the current week:
+		while(((dom+skipDays) % 7) != 0) {
+			%><td></td><%
+			dom++;
+		}
+%>
+			   </tr>
+			</tbody>
+		</table>    
+      </div>
+    
+<%
+}
+%>
+  </div>
+  <div id="calOver" class="calPosition">
+<%
+
+for(int moy = 0; moy < 12; moy++) {
+	Partition<Partition<CaptureSearchResult>> curMonth = data.monthsByDay.get(moy);
+	List<Partition<CaptureSearchResult>> monthDays = curMonth.list();
+%>
+    <div class="month" id="<%= data.yearNum %>-<%= moy %>">
+	    <table>
+	
+	       <thead>
+	           <tr>
+	               <th colspan="7"><span class="label"><%= fmt.format("{0,date,MMM}",curMonth.getStart()) %></span></th>
+	           </tr>
+	       </thead>
+	       <tbody>
+	           <tr>
+<%
+		cal.setTime(curMonth.getStart());
+		int skipDays = cal.get(Calendar.DAY_OF_WEEK) - 1;
+		int daysInMonth = cal.getActualMaximum(Calendar.DAY_OF_MONTH);
+		// skip until the 1st:
+		for(int i = 0; i < skipDays; i++) {
+			%><td><div class="date"></div></td><%
+		}
+		int dow = skipDays;
+		int dom;
+		for(dom = 0; dom < daysInMonth; dom++) {
+
+
+			int count = monthDays.get(dom).count();
+			
+			if(count > 0) {
+				// one or more captures in this day:
+				CaptureSearchResult firstCaptureInDay =
+					monthDays.get(dom).list().get(0);
+				String replayUrl = uriConverter.makeReplayURI(
+						firstCaptureInDay.getCaptureTimestamp(),
+						firstCaptureInDay.getOriginalUrl());
+				Date firstCaptureInDayDate = firstCaptureInDay.getCaptureDate();
+				String safeUrl = fmt.escapeHtml(replayUrl);
+				int dupes = 999;
+
+				%><td>
+                    <div class="date tooltip">
+                        <div class="pop">
+                            <h3><%= fmt.format("{0,date,MMMMM d, yyyy}",firstCaptureInDayDate) %></h3>
+                            <p><%= count %> snapshots, <em><%= dupes %> duplicates</em></p>
+                            <ul>
+							<%
+							Iterator<CaptureSearchResult> dayItr = 
+								monthDays.get(dom).iterator();
+							while(dayItr.hasNext()) {
+								CaptureSearchResult c = dayItr.next();
+								String replayUrl2 = uriConverter.makeReplayURI(
+										c.getCaptureTimestamp(),c.getOriginalUrl());
+								String safeUrl2 = fmt.escapeHtml(replayUrl2);
+								%>
+								<li><a href="<%= safeUrl2 %>"><%= fmt.format("{0,date,HH:mm:ss}",c.getCaptureDate()) %></a></li>
+								<%
+							}
+							%>
+                            </ul>
+                        </div>
+                        <div class="day">
+
+                            <a href="<%= safeUrl %>" title="<%= count %> snapshots (<%= dupes %> duplicates)" class="<%= fmt.format("{0,date,MMM-d-yyyy}",firstCaptureInDayDate) %>"><%= dom + 1 %></a>
+                        </div>
+                    </div>
+			      </td><%
+
+			} else {
+				// zero captures in this day:
+				%><td>
+	                <div class="date">
+	    	            <div class="day"><span><%= dom + 1 %></span></div>
+		            </div>
+				</td><%
+				
+			}
+
+
+			if(((dom+skipDays+1) % 7) == 0) {
+				// end of the week, start a new tr:
+				%></tr><tr><%
+			}
+		}
+		// fill in blank days until the end of the current week:
+		while(((dom+skipDays) % 7) != 0) {
+			%><td></td><%
+			dom++;
+		}
+%>
+			   </tr>
+			</tbody>
+		</table>    
+      </div>
+<%
+}
+%>
+    </div>
+  </div>
\ No newline at end of file


This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.




Thread: [Archive-access-cvs] SF.net SVN: archive-access:[3157] trunk/archive-access/projects/wayback/ wayb

archive-access-cvs