Skip to content
Browse files

Add date picker

  • Loading branch information...
1 parent 1b1d5b9 commit 9e24b16f5d4c7e7228e7a7ff5e756b7d3e788e67 @Chouser committed Feb 7, 2011
Showing with 108 additions and 23 deletions.
  1. +52 −4 i2.js
  2. +56 −19 irc.css
View
56 i2.js
@@ -1,5 +1,5 @@
// clojure-irc-log/irc.js
-// Copyright 2010 Chris Houser
+// Copyright 2010 Chris Houser, all rights reserved
// Please ask before using in other projects
function resize() {
@@ -13,12 +13,15 @@ function resize() {
// size so the page_count can be calculated correctly
$('#columns').before('<header><table class="page_head"><tr><td class="page_head_left"></td><td class="page_head_right"></td></tr></table></header>');
$('.page_head_left' ).append($('h1').contents().clone());
- $('.page_head_right').append($('h2').contents().clone());
+ var the_date = $('h2').contents().clone();
+ $('.page_head_right').append(the_date);
+ the_date.wrap('<button onclick="date_click(this)"/>');
+ the_date.before('<span class="cal_btn">►</span> ');
$('h1').css('margin-top', 0);
var page_head = $('.page_head').clone();
- $('.page_head').css('visibility', 'hidden');
- $('#columns').after('<footer><table class="page_foot"><tr><td class="page_foot_left"><button onclick="scrollBy(-1)">&lt;&lt;&lt;</button></td><td class="page_foot_mid"></td><td class="page_foot_right"><button onclick="scrollBy(1)">&gt;&gt;&gt;</button></td></tr></table></footer>');
+ // XXX: change the div below to a button for jumping to other pages
+ $('#columns').after('<footer><table class="page_foot"><tr><td class="page_foot_left"><button onclick="scrollBy(-1)">&lt;&lt;&lt;</button></td><td><center><div class="page_foot_mid"></div></td><td class="page_foot_right"><button onclick="scrollBy(1)">&gt;&gt;&gt;</button></td></tr></table></footer>');
var page_foot = $('.page_foot');
$('header').height($('header').outerHeight());
$('#columns').height(
@@ -108,5 +111,50 @@ $('#frame').scroll(function(e) {
}
});
+var first_date_click = true;
+var date_open = false;
+function date_click(obj) {
+ if(first_date_click) {
+ $(document.body).append(
+ '<script id="more_ui" src="jquery-ui-1.8.9.custom.min.js"></script>'+
+ '<link type="text/css" href="jquery.ui.core.css" rel="stylesheet" />'+
+ '<link type="text/css" href="jquery.ui.datepicker.css" rel="stylesheet"/>'+
+ '<link type="text/css" href="jquery.ui.theme.css" rel="stylesheet" />');
+ first_date_click = false;
+ $.get('/date/', null, function(data, status) {
+ var datehash = {};
+ var mindate = null;
+ var maxdate = null;
+ data.replace( /(\d\d\d\d-\d\d-\d\d)\.html/g, function(s,d) {
+ var date = new Date(d);
+ mindate = date < mindate || !mindate ? date : mindate;
+ maxdate = date > maxdate || !maxdate ? date : maxdate;
+ datehash[new Date(d)] = {url: s};
+ });
+
+ // XXX What if the ui script hasn't finished loading yet?
+ $('#frame').append('<div class="date_picker"/>');
+ $('.date_picker').datepicker({
+ changeYear: true,
+ defaultDate: new Date(obj.textContent),
+ minDate: mindate,
+ maxDate: maxdate,
+ beforeShowDay: function(date) { return [datehash[date]]; },
+ onSelect: function(dateText) {
+ document.location = '/date/' + datehash[new Date(dateText)].url;
+ }
+ });
+ });
+ }
+ if(date_open) {
+ $(document.body).removeClass('date_open');
+ date_open = false;
+ }
+ else {
+ $(document.body).addClass('date_open');
+ date_open = true;
+ }
+};
+
$(document).ready(resize);
//$(document).resize(resize);
View
75 irc.css
@@ -1,3 +1,7 @@
+/* clojure-irc-log/irc.css
+ * Copyright 2010 Chris Houser, all rights reserved
+ * Please ask before using in other projects
+ */
body {
font-family: Georgia,Palatino,Times,"Times New Roman",serif;
font-size: 9pt;
@@ -24,20 +28,16 @@ body {
#columns {
margin: 0 0.5em;
}
-#columns.paged {
+header, footer, #columns.paged {
-webkit-column-width: 34em;
-moz-column-width: 34em;
+ column-width: 34em;
-webkit-column-rule: 1px #ccc solid;
-moz-column-rule: 1px #ccc solid;
+ column-rule: 1px #ccc solid;
}
-header, footer {
- -webkit-column-width: 34em;
- -moz-column-width: 34em;
- -webkit-column-rule: 1px #ccc solid;
- -moz-column-rule: 1px #ccc solid;
- margin: 0 0.5em;
-}
+header, footer { margin: 0 0.5em; }
.page_head, .page_foot {
width: 100%;
border: none;
@@ -47,10 +47,13 @@ header, footer {
.page_head_left, .page_head_right {
font-family: Verdana,Arial,sans-serif;
font-size: 10pt;
- padding: 0.5ex 0;
- padding-bottom: 1ex;
+ padding-top: 0.3ex;
+ padding-bottom: 0.5ex;
}
.page_head_right { text-align: right; }
+.page_foot_left button, .page_foot_right button {
+ width: 100%;
+}
h1, h2 {
margin-left: 90pt;
font-family: Verdana,Arial,sans-serif;
@@ -65,6 +68,25 @@ h2 { font-size: 150%; margin-top: 0; }
}
.page_foot_right { text-align: right; }
+.date_picker {
+ position: absolute;
+ top: 10px;
+ opacity: 0.0;
+ -webkit-transition: opacity 0.5s;
+ -moz-transition: opacity 0.5s;
+ transition: opacity 0.5s;
+ margin-left: 16em;
+ margin-top: 4ex;
+}
+.date_open .date_picker {
+ opacity: 1.0;
+}
+.ui-datepicker {
+ -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
p {
padding: 0.5ex 0;
padding-left: 10em;
@@ -74,19 +96,34 @@ p {
button {
position: relative;
text-align: inherit;
- width: 100%;
background: #fff;
border: 1px #fff solid;
}
-button:hover {
+button:focus, .date_open .page_head button, .page_head:hover button, .page_foot:hover button{
border-color: #ddd #bbb #bbb #ddd;
border-radius: 3px;
background: -moz-linear-gradient(0% 170% 90deg, #ccc, #fff);
background: -webkit-gradient(linear, 0% 0%, 0% 170%, from(#fff), to(#ccc));
}
-button:active {
- top: 1px;
-}
+button:active { top: 1px; }
+.page_head:first-child { opacity: 0.0; }
+.page_head:first-child .page_head_left { visibility: hidden; }
+.date_open .page_head, .page_head:first-child:hover { opacity: 1.0; }
+.cal_btn {
+ display: inline-block;
+ visibility: hidden;
+ -webkit-transition: -webkit-transform 0.1s;
+ -moz-transition: -moz-transform 0.1s;
+ transition: transform 0.1s;
+}
+.page_head:hover .cal_btn, button:focus .cal_btn { visibility: visible; }
+.date_open .cal_btn {
+ visibility: visible;
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+body .ui-widget-content { border-color: #eee; }
/* make anchors behave like timestamps */
a {
@@ -97,9 +134,9 @@ a {
}
/* make nm anchors act like regular links */
-a.nm {
- font-family: Georgia,Palatino,Times,"Times New Roman",serif;
- font-size: 9pt;
+a.nm, .ui-widget a { /* XXX datepicker */
+ font-family: inherit;
+ font-size: inherit;
color: #00f;
visibility: visible;
float: none;
@@ -131,7 +168,7 @@ em {
font-style: normal;
}
a { color: #999; visibility: hidden; text-decoration: none; }
-p:hover a, a.nh { visibility: visible; }
+a:focus, p:hover a, a.nh { visibility: visible; }
a:target { color: #000; visibility: visible; }
p.bdfl b { color: #c00; }

0 comments on commit 9e24b16

Please sign in to comment.
Something went wrong with that request. Please try again.