timeline.html (3233B)
1 <!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 5 <style type='text/css'> 6 .timeline { 7 margin: 0 0 10px; 8 padding: 0; 9 font-size: 11px; 10 font-family: Lucida Grande, Tahoma, sans-serif; 11 } 12 13 .controls { 14 font-family: Arial, sans-serif; 15 font-size: 14px; 16 } 17 </style> 18 19 <script src="chrome://zotero/content/include.js"></script> 20 <script src="chrome://zotero/skin/timeline/timelineControls.js" type="text/javascript"></script> 21 <script src="chrome://zotero/skin/timeline/timeline-api.js" type="text/javascript"></script> 22 <script type="text/javascript"> 23 var tl; 24 function onLoad(a, b, c, date) { 25 var eventSource = new Timeline.DefaultEventSource(); 26 27 var theme = Timeline.ClassicTheme.create(); 28 theme.event.label.width = 175; 29 date = createDate(date); 30 var bandInfos = [ 31 Timeline.createBandInfo({ 32 eventSource: eventSource, 33 date: date, 34 width: "70%", 35 intervalUnit: a, 36 intervalPixels: 100, 37 theme: theme 38 }), 39 Timeline.createBandInfo({ 40 showEventText: false, 41 trackHeight: 0.5, 42 trackGap: 0.2, 43 eventSource: eventSource, 44 date: date, 45 width: "25%", 46 intervalUnit: b, 47 intervalPixels: 200, 48 theme: theme 49 }), 50 Timeline.createBandInfo({ 51 showEventText: false, 52 trackHeight: 0.5, 53 trackGap: 0.2, 54 eventSource: eventSource, 55 date: date, 56 width: "5%", 57 intervalUnit: c, 58 intervalPixels: 200, 59 theme: theme 60 }) 61 ]; 62 bandInfos[1].syncWith = 0; 63 bandInfos[1].highlight = true; 64 bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout()); 65 bandInfos[2].syncWith = 0; 66 bandInfos[2].highlight = true; 67 68 tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); 69 Timeline.loadXML("zotero://timeline/data/", function(xml, url) { eventSource.loadXML(xml, url); }); 70 71 setupFilterHighlightControls(document.getElementById("my-timeline-controls"), tl, [0,1,2], theme); 72 setupOtherControls(document.getElementById("my-other-controls"), tl, document.location.search); 73 } 74 75 function onResize() { 76 var curDate = tl.getBand(0).getCenterVisibleDate().toString(); 77 tl.layout(); 78 centerTimeline(curDate); 79 } 80 81 Timeline.DurationEventPainter.prototype._showBubble = function(x, y, evt) { 82 // Get ChromeWindow so we have access to ZoteroPane (overlay.js) 83 var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"] 84 .getService(Components.interfaces.nsIWindowMediator); 85 var win = wm.getMostRecentWindow('navigator:browser'); 86 var zp = win.ZoteroPane; 87 zp.show(); 88 zp.selectItem(parseInt(evt.getDescription())); 89 } 90 91 document.write("<title>" + getString("general.title") + "</title>"); 92 </script> 93 </head> 94 <body onload="onLoad();" onresize="onResize()"> 95 <script type="text/javascript">document.write(getTimeline());</script> 96 <div class="controls" id="my-timeline-controls"></div><br/> 97 <div class="controls" id="my-other-controls"></div> 98 </body> 99 </html>