Initial commit of theme for Planet Musings
This commit is contained in:
Jacques Distler
parent
6428cfd56d
commit
d7f7182579
18
themes/musings/config.ini
Normal file
18
themes/musings/config.ini
Normal file
@ -0,0 +1,18 @@
|
||||
[Planet]
|
||||
template_files:
|
||||
atom.xml.xslt
|
||||
foafroll.xml.xslt
|
||||
opml.xml.xslt
|
||||
index.html.xslt
|
||||
|
||||
template_directories:
|
||||
../common
|
||||
|
||||
bill_of_materials:
|
||||
default.css
|
||||
personalize.js
|
||||
images/feed-icon-10x10.png
|
||||
images/opml.png
|
||||
images/foaf.png
|
||||
images/venus.png
|
||||
images/venus.ico
|
||||
382
themes/musings/default.css
Normal file
382
themes/musings/default.css
Normal file
@ -0,0 +1,382 @@
|
||||
/*
|
||||
* Written by Stefano Mazzocchi <stefano at apache dot org>
|
||||
*/
|
||||
|
||||
/* ----------------------------- Global Definitions -------------------- */
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
color: #222;
|
||||
background-color: #fff;
|
||||
quotes: "\201C" "\201E" "\2018" "\2019";
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
padding: 10px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
color: #FFF;
|
||||
font-weight: normal;
|
||||
background-color: #036;
|
||||
border-bottom: 2px solid #bbb
|
||||
}
|
||||
|
||||
/* ----------------------------- Sidebar --------------------------- */
|
||||
|
||||
#sidebar {
|
||||
float: right;
|
||||
top: 150px;
|
||||
right: 0px;
|
||||
width: 11em;
|
||||
background-color: white;
|
||||
padding: 0px 10px 20px 0px;
|
||||
margin: 0px 0px 20px 20px;
|
||||
border-left: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#sidebar h2 {
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
font-size: .9em;
|
||||
background-color: #BCD;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
padding: 3px 0px 2px 4px;
|
||||
margin: 15px 0px 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#sidebar p {
|
||||
font-size: .8em;
|
||||
padding-left: 20px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#sidebar ul {
|
||||
font-family: sans-serif;
|
||||
margin-left: 5px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
#sidebar li {
|
||||
margin-left: 0px;
|
||||
text-indent: -15px;
|
||||
list-style-type: none;
|
||||
font-size: .8em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
#sidebar ul li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#sidebar ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#sidebar img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#sidebar dl {
|
||||
font-size: .8em;
|
||||
padding-left: 1.0em;
|
||||
}
|
||||
|
||||
#sidebar dl ul {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#sidebar dt {
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
padding-left: 1.0em;
|
||||
}
|
||||
|
||||
#sidebar dd {
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
|
||||
#sidebar .message {
|
||||
cursor: help;
|
||||
border-bottom: 1px dashed red;
|
||||
}
|
||||
|
||||
#sidebar a:active,
|
||||
#sidebar a:hover {
|
||||
color: #FFCC66;
|
||||
}
|
||||
|
||||
#sidebar a.message:hover {
|
||||
cursor: help;
|
||||
background-color: #ffD0D0;
|
||||
color:#000;
|
||||
border: 1px dashed red !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
#sidebar dl a {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/* ----------------------------- Body ---------------------------- */
|
||||
|
||||
#body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.admin {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#body h2.date {
|
||||
text-transform: none;
|
||||
font-size: 1em;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
border-top: 1px solid #ccc;
|
||||
background-color: #BCD;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 3px 15px 2px 5px;
|
||||
max-width:43em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------- News ---------------------------- */
|
||||
|
||||
.news {
|
||||
margin: 30px 10px 30px 10px;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.news h3 {
|
||||
margin: 0 0 .5em 0;
|
||||
padding: 0px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.news h3 a {
|
||||
color:#036;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.news .content {
|
||||
margin: 5px 5px 5px 15px;
|
||||
padding: 0px 1em 1em 1em;
|
||||
border-left: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
line-height: 1.5em;
|
||||
font-size: 1em;
|
||||
font-family: sans-serif;
|
||||
max-width:40em;
|
||||
}
|
||||
|
||||
.news .links {
|
||||
|
||||
}
|
||||
|
||||
.news .permalink {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.news .icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------- News Content ---------------------------- */
|
||||
|
||||
.news .content p {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.news .content img {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.news .content blockquote {
|
||||
margin: 10px 35px 10px 35px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.news .content pre {
|
||||
font-family: monospace;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
margin: 10px 20px 10px 20px;
|
||||
background-color: #f8f8f8;
|
||||
overflow: auto;
|
||||
}
|
||||
.news .content code {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.news .content ul, .news .content ol {
|
||||
margin: 5px 35px 5px 35px;
|
||||
padding: 5px;
|
||||
counter-reset: item;
|
||||
}
|
||||
|
||||
.news .content ul > ul, .news .content ul > ol, .news .content ol > ul, .news .content ol > ol {
|
||||
margin: 0px 0px 0px 35px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.news .content li {
|
||||
padding: 1px;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.news code {
|
||||
font-family: large;
|
||||
}
|
||||
|
||||
.news .content :link,
|
||||
.news .content :visited {
|
||||
text-decoration: none;
|
||||
font-weight:bold;
|
||||
color:#036;
|
||||
}
|
||||
.news .content p:hover a,
|
||||
.news .content dt:hover a,
|
||||
.news .content dd:hover a,
|
||||
.news .content li:hover a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news :link:active,
|
||||
.news :visited:active,
|
||||
.news :link:hover,
|
||||
.news :visited:hover {
|
||||
color: #FFCC66;
|
||||
}
|
||||
|
||||
/* --------------------------- Accomodations ----------------------- */
|
||||
|
||||
/* Cosmic Variance */
|
||||
.alignright {
|
||||
float:right;
|
||||
}
|
||||
.alignleft {
|
||||
float:left;
|
||||
}
|
||||
img.alignright {
|
||||
padding: 4px;
|
||||
margin: 0 0 2px 7px;
|
||||
display: inline;
|
||||
}
|
||||
img.centered {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
/* Backreaction */
|
||||
div.content:hover a,
|
||||
div.permalink:hover a {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
/* Musings/String Coffee Table */
|
||||
math[display=block] {overflow:auto;}
|
||||
math { white-space: nowrap }
|
||||
.eqno {float:right}
|
||||
merror {display:inline;font-size:1em;}
|
||||
img.mathlogo, img.svglogo {
|
||||
float:right;
|
||||
border:0
|
||||
}
|
||||
.footnote {font-size: .9em}
|
||||
.update h4 {
|
||||
display:inline;
|
||||
font-size:1em;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
/* Bosker Blog */
|
||||
p.center {text-align:center}
|
||||
|
||||
/* boing boing */
|
||||
br {
|
||||
clear: none !important;
|
||||
}
|
||||
|
||||
/* engadget */
|
||||
h6 {
|
||||
clear: left !important;
|
||||
}
|
||||
|
||||
/* cadenhead */
|
||||
p.sourcecode {
|
||||
font-family: monospace;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
margin: 10px 20px 10px 20px;
|
||||
background-color: #f8f8f8;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* programmableweb */
|
||||
.imgRight {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* gizmodo */
|
||||
img.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* gizmodo */
|
||||
img.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* gizmodo */
|
||||
img.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* wikipedia */
|
||||
table {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* del.icio.us */
|
||||
.delicious-tags {
|
||||
font-size: .8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ----------------------------- Footer ---------------------------- */
|
||||
|
||||
#footer {
|
||||
padding: 0px;
|
||||
margin: 30px 0px 50px 50px;
|
||||
}
|
||||
|
||||
#footer p {
|
||||
padding: 2px 2px 2px 5px;
|
||||
background-color: #ccc;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
border-left: 1px solid #aaa;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
BIN
themes/musings/images/venus.ico
Normal file
BIN
themes/musings/images/venus.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 894 B |
BIN
themes/musings/images/venus.png
Normal file
BIN
themes/musings/images/venus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 570 B |
249
themes/musings/index.html.xslt
Normal file
249
themes/musings/index.html.xslt
Normal file
@ -0,0 +1,249 @@
|
||||
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
|
||||
xmlns:atom="http://www.w3.org/2005/Atom"
|
||||
xmlns:xhtml="http://www.w3.org/1999/xhtml"
|
||||
xmlns:planet="http://planet.intertwingly.net/"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
exclude-result-prefixes="atom planet">
|
||||
|
||||
<xsl:output method="xml" doctype-system="http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd" doctype-public="-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"/>
|
||||
|
||||
<xsl:template match="atom:feed">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<!-- head -->
|
||||
<xsl:text> </xsl:text>
|
||||
<head>
|
||||
<link rel="stylesheet" href="default.css" type="text/css" />
|
||||
<title><xsl:value-of select="atom:title"/></title>
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
<meta name="generator" content="{atom:generator}" />
|
||||
<xsl:if test="atom:link[@rel='self']">
|
||||
<link rel="alternate" href="{atom:link[@rel='self']/@href}"
|
||||
title="{atom:title}" type="{atom:link[@rel='self']/@type}" />
|
||||
</xsl:if>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="images/venus.ico" />
|
||||
<link rel="icon" type="image/x-icon" href="images/venus.ico" />
|
||||
<script type="text/javascript" src="personalize.js">
|
||||
<!-- hack to prevent XHTML tag minimization -->
|
||||
<xsl:text> </xsl:text>
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<xsl:text> </xsl:text>
|
||||
<body>
|
||||
<xsl:text> </xsl:text>
|
||||
<h1><xsl:value-of select="atom:title"/></h1>
|
||||
|
||||
<xsl:text> </xsl:text>
|
||||
<div id="sidebar">
|
||||
|
||||
<xsl:text> </xsl:text>
|
||||
<h2>Subscriptions</h2>
|
||||
<xsl:text> </xsl:text>
|
||||
<ul>
|
||||
<xsl:for-each select="planet:source">
|
||||
<xsl:sort select="planet:name"/>
|
||||
<xsl:text> </xsl:text>
|
||||
<li>
|
||||
<!-- icon -->
|
||||
<a title="subscribe to {planet:name}’s feed">
|
||||
<xsl:choose>
|
||||
<xsl:when test="planet:http_location">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="planet:http_location"/>
|
||||
</xsl:attribute>
|
||||
</xsl:when>
|
||||
<xsl:when test="atom:link[@rel='self']/@href">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link[@rel='self']/@href"/>
|
||||
</xsl:attribute>
|
||||
</xsl:when>
|
||||
</xsl:choose>
|
||||
<img src="images/feed-icon-10x10.png" alt="(feed)"/>
|
||||
</a>
|
||||
|
||||
<!-- name -->
|
||||
<a href="{atom:link[@rel='alternate']/@href}">
|
||||
<xsl:choose>
|
||||
<xsl:when test="planet:message">
|
||||
<xsl:attribute name="class">message</xsl:attribute>
|
||||
<xsl:attribute name="title">
|
||||
<xsl:value-of select="planet:message"/>
|
||||
</xsl:attribute>
|
||||
</xsl:when>
|
||||
<xsl:when test="atom:title">
|
||||
<xsl:attribute name="title">
|
||||
<xsl:value-of select="atom:title"/>
|
||||
</xsl:attribute>
|
||||
</xsl:when>
|
||||
</xsl:choose>
|
||||
<xsl:value-of select="planet:name"/>
|
||||
</a>
|
||||
</li>
|
||||
</xsl:for-each>
|
||||
<xsl:text> </xsl:text>
|
||||
</ul>
|
||||
|
||||
<xsl:text> </xsl:text>
|
||||
<h2>Info</h2>
|
||||
|
||||
<dl>
|
||||
<dt>Last updated:</dt>
|
||||
<dd>
|
||||
<span class="date" title="GMT">
|
||||
<xsl:value-of select="atom:updated/@planet:format"/>
|
||||
</span>
|
||||
</dd>
|
||||
<dt>Powered by:</dt>
|
||||
<dd>
|
||||
<a href="http://intertwingly.net/code/venus/" title="Sam Ruby’s Venus">
|
||||
<img src="images/venus.png" width="80" height="15"
|
||||
alt="Planet" />
|
||||
</a>
|
||||
</dd>
|
||||
<dt>Export:</dt>
|
||||
<dd>
|
||||
<a href="opml.xml" title="export the {planet:name} subscription list in OPML format">
|
||||
<img src="images/opml.png" alt="OPML"/>
|
||||
</a>
|
||||
</dd>
|
||||
<dd>
|
||||
<a href="foafroll.xml" title="export the {planet:name} subscription list in FOAF format">
|
||||
<img src="images/foaf.png" alt="FOAF"/>
|
||||
</a>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
|
||||
<xsl:text> </xsl:text>
|
||||
<div id="body">
|
||||
<xsl:apply-templates select="atom:entry"/>
|
||||
<xsl:text> </xsl:text>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template match="atom:entry">
|
||||
<!-- date header -->
|
||||
<xsl:variable name="date" select="substring(atom:updated,1,10)"/>
|
||||
<xsl:if test="not(preceding-sibling::atom:entry
|
||||
[substring(atom:updated,1,10) = $date])">
|
||||
<xsl:text> </xsl:text>
|
||||
<h2 class="date">
|
||||
<xsl:value-of select="substring-before(atom:updated/@planet:format,', ')"/>
|
||||
<xsl:text>, </xsl:text>
|
||||
<xsl:value-of select="substring-before(substring-after(atom:updated/@planet:format,', '), ' ')"/>
|
||||
</h2>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:text> </xsl:text>
|
||||
<div class="news">
|
||||
|
||||
<xsl:if test="@xml:lang">
|
||||
<xsl:attribute name="xml:lang">
|
||||
<xsl:value-of select="@xml:lang"/>
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
|
||||
<!-- entry title -->
|
||||
<xsl:text> </xsl:text>
|
||||
<h3>
|
||||
<a href="{atom:source/atom:link['alternate']/@href}" class="icon">
|
||||
<xsl:attribute name="title" select="{atom:source/atom:title}"/>
|
||||
<xsl:value-of select="atom:source/planet:name"/>
|
||||
</a>
|
||||
<xsl:if test="atom:title">
|
||||
<xsl:text> </xsl:text>
|
||||
<xsl:choose>
|
||||
<xsl:when test="atom:source/atom:icon">
|
||||
<img src="{atom:source/atom:icon}" class="icon"/>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<xsl:text>—</xsl:text>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
<xsl:text> </xsl:text>
|
||||
<a href="{atom:link[@rel='alternate']/@href}">
|
||||
<xsl:if test="atom:title/@xml:lang != @xml:lang">
|
||||
<xsl:attribute name="xml:lang" select="{atom:title/@xml:lang}"/>
|
||||
</xsl:if>
|
||||
<xsl:value-of select="atom:title"/>
|
||||
</a>
|
||||
</xsl:if>
|
||||
</h3>
|
||||
|
||||
<!-- entry content -->
|
||||
<xsl:text> </xsl:text>
|
||||
<div class="content">
|
||||
<xsl:choose>
|
||||
<xsl:when test="atom:content">
|
||||
<xsl:apply-templates select="atom:content"/>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<xsl:apply-templates select="atom:summary"/>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
|
||||
<!-- entry footer -->
|
||||
<xsl:text> </xsl:text>
|
||||
<div class="permalink">
|
||||
<a href="{atom:link[@rel='alternate']/@href}" class="permalink">
|
||||
<xsl:choose>
|
||||
<xsl:when test="atom:author/atom:name">
|
||||
<xsl:text>by </xsl:text>
|
||||
<xsl:value-of select="atom:author/atom:name"/>
|
||||
<xsl:text> at </xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:when test="atom:source/atom:author/atom:name">
|
||||
<xsl:text>by </xsl:text>
|
||||
<xsl:value-of select="atom:source/atom:author/atom:name"/>
|
||||
<xsl:text> at </xsl:text>
|
||||
</xsl:when>
|
||||
</xsl:choose>
|
||||
<span class="date" title="GMT">
|
||||
<xsl:value-of select="atom:updated/@planet:format"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</xsl:template>
|
||||
|
||||
<!-- xhtml content -->
|
||||
<xsl:template match="atom:content/xhtml:div | atom:summary/xhtml:div">
|
||||
<xsl:copy>
|
||||
<xsl:if test="../@xml:lang and not(../@xml:lang = ../../@xml:lang)">
|
||||
<xsl:attribute name="xml:lang">
|
||||
<xsl:value-of select="../@xml:lang"/>
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<xsl:apply-templates select="@*|node()"/>
|
||||
</xsl:copy>
|
||||
</xsl:template>
|
||||
|
||||
<!-- plain text content -->
|
||||
<xsl:template match="atom:content/text() | atom:summary/text()">
|
||||
<div class="content" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<xsl:if test="../@xml:lang and not(../@xml:lang = ../../@xml:lang)">
|
||||
<xsl:attribute name="xml:lang">
|
||||
<xsl:value-of select="../@xml:lang"/>
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<xsl:copy-of select="."/>
|
||||
</div>
|
||||
</xsl:template>
|
||||
|
||||
<!-- Feedburner detritus -->
|
||||
<xsl:template match="xhtml:div[@class='feedflare']"/>
|
||||
|
||||
<!-- pass through everything else -->
|
||||
<xsl:template match="@*|node()">
|
||||
<xsl:copy>
|
||||
<xsl:apply-templates select="@*|node()"/>
|
||||
</xsl:copy>
|
||||
</xsl:template>
|
||||
|
||||
</xsl:stylesheet>
|
||||
220
themes/musings/personalize.js
Normal file
220
themes/musings/personalize.js
Normal file
@ -0,0 +1,220 @@
|
||||
var entries = []; // list of news items
|
||||
|
||||
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
|
||||
"Friday", "Saturday"];
|
||||
var months = ["January", "February", "March", "April", "May", "June", "July",
|
||||
"August", "September", "October", "November", "December"];
|
||||
|
||||
// event complete: stop propagation of the event
|
||||
function stopPropagation(event) {
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.returnValue = false;
|
||||
}
|
||||
}
|
||||
|
||||
// scroll back to the previous article
|
||||
function prevArticle(event) {
|
||||
for (var i=entries.length; --i>=0;) {
|
||||
if (entries[i].anchor.offsetTop < document.documentElement.scrollTop) {
|
||||
window.location.hash=entries[i].anchor.id;
|
||||
stopPropagation(event);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// advance to the next article
|
||||
function nextArticle(event) {
|
||||
for (var i=1; i<entries.length; i++) {
|
||||
if (entries[i].anchor.offsetTop-20 > document.documentElement.scrollTop) {
|
||||
window.location.hash=entries[i].anchor.id;
|
||||
stopPropagation(event);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// process keypresses
|
||||
function navkey(event) {
|
||||
var checkbox = document.getElementById('navkeys');
|
||||
if (!checkbox || !checkbox.checked) return;
|
||||
|
||||
if (!event) event=window.event;
|
||||
key=event.keyCode;
|
||||
|
||||
if (!document.documentElement) return;
|
||||
if (!entries[0].anchor || !entries[0].anchor.offsetTop) return;
|
||||
|
||||
if (key == 'J'.charCodeAt(0)) nextArticle(event);
|
||||
if (key == 'K'.charCodeAt(0)) prevArticle(event);
|
||||
}
|
||||
|
||||
// create (or reset) a cookie
|
||||
function createCookie(name,value,days) {
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime()+(days*24*60*60*1000));
|
||||
var expires = "; expires="+date.toGMTString();
|
||||
}
|
||||
else expires = "";
|
||||
document.cookie = name+"="+value+expires+"; path=/";
|
||||
}
|
||||
|
||||
// read a cookie
|
||||
function readCookie(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0;i < ca.length;i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// each time the value of the option changes, update the cookie
|
||||
function selectOption() {
|
||||
var checkbox = document.getElementById('navkeys');
|
||||
if (!checkbox) return;
|
||||
createCookie("navkeys", checkbox.checked?'true':'false', 365);
|
||||
}
|
||||
|
||||
// add navkeys option to sidebar
|
||||
function addOption(event) {
|
||||
if (entries.length > 1 && entries[entries.length-1].parent.offsetTop > 0) {
|
||||
var sidebar = document.getElementById('sidebar');
|
||||
if (!sidebar) return;
|
||||
|
||||
for (var i=entries.length; --i>=0;) {
|
||||
var a = entries[i].anchor = document.createElement('a');
|
||||
a.id = "news-" + i;
|
||||
entries[i].parent.insertBefore(a, entries[i].parent.firstChild);
|
||||
}
|
||||
|
||||
var h2 = document.createElement('h2');
|
||||
h2.appendChild(document.createTextNode('Options'));
|
||||
sidebar.appendChild(h2);
|
||||
|
||||
var form = document.createElement('form');
|
||||
var p = document.createElement('p');
|
||||
var input = document.createElement('input');
|
||||
input.type = "checkbox";
|
||||
input.id = "navkeys";
|
||||
p.appendChild(input);
|
||||
var a = document.createElement('a');
|
||||
a.title = "Navigate entries";
|
||||
a.appendChild(document.createTextNode('Enable '));
|
||||
var code = document.createElement('code');
|
||||
code.appendChild(document.createTextNode('J'));
|
||||
a.appendChild(code);
|
||||
a.appendChild(document.createTextNode(' and '));
|
||||
code = document.createElement('code');
|
||||
code.appendChild(document.createTextNode('K'));
|
||||
a.appendChild(code);
|
||||
a.appendChild(document.createTextNode(' keys'));
|
||||
p.appendChild(a);
|
||||
form.appendChild(p);
|
||||
sidebar.appendChild(form);
|
||||
|
||||
var cookie = readCookie("navkeys");
|
||||
if (cookie && cookie == 'true') input.checked = true;
|
||||
input.onclick = selectOption;
|
||||
document.onkeydown = navkey;
|
||||
}
|
||||
}
|
||||
|
||||
// convert date to local time
|
||||
var localere = /^(\w+) (\d+) (\w+) \d+ 0?(\d\d?:\d\d):\d\d ([AP]M) (EST|EDT|CST|CDT|MST|MDT|PST|PDT)/;
|
||||
function localizeDate(element) {
|
||||
var date = new Date();
|
||||
date.setTime(Date.parse(element.innerHTML + " GMT"));
|
||||
|
||||
var local = date.toLocaleString();
|
||||
var match = local.match(localere);
|
||||
if (match) {
|
||||
element.innerHTML = match[4] + ' ' + match[5].toLowerCase();
|
||||
element.title = match[6] + " \u2014 " +
|
||||
match[1] + ', ' + match[3] + ' ' + match[2];
|
||||
return days[date.getDay()] + ', ' + months[date.getMonth()] + ' ' +
|
||||
date.getDate() + ', ' + date.getFullYear();
|
||||
} else {
|
||||
element.title = element.innerHTML + ' GMT';
|
||||
element.innerHTML = local;
|
||||
return days[date.getDay()] + ', ' + date.getDate() + ' ' +
|
||||
months[date.getMonth()] + ' ' + date.getFullYear();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// find entries (and localizeDates)
|
||||
function findEntries() {
|
||||
|
||||
var span = document.getElementsByTagName('span');
|
||||
|
||||
for (var i=0; i<span.length; i++) {
|
||||
if (span[i].className == "date" && span[i].title == "GMT") {
|
||||
var date = localizeDate(span[i]);
|
||||
|
||||
var parent = span[i];
|
||||
while (parent && parent.className != 'news') {
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
|
||||
if (parent) {
|
||||
var info = entries[entries.length] = new Object();
|
||||
info.parent = parent;
|
||||
info.date = date;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// insert/remove date headers to indicate change of date in local time zone
|
||||
function moveDateHeaders() {
|
||||
lastdate = ''
|
||||
for (var i=0; i<entries.length; i++) {
|
||||
var parent = entries[i].parent;
|
||||
var date = entries[i].date;
|
||||
|
||||
sibling = parent.previousSibling;
|
||||
while (sibling && sibling.nodeType != 1) {
|
||||
sibling = sibling.previousSibling;
|
||||
}
|
||||
|
||||
if (sibling && sibling.nodeName.toLowerCase() == 'h2') {
|
||||
if (lastdate == date) {
|
||||
sibling.parentNode.removeChild(sibling);
|
||||
} else {
|
||||
sibling.innerHTML = date;
|
||||
lastdate = date;
|
||||
}
|
||||
} else if (lastdate != date) {
|
||||
var h2 = document.createElement('h2');
|
||||
h2.className = 'date'
|
||||
h2.appendChild(document.createTextNode(date));
|
||||
parent.parentNode.insertBefore(h2, parent);
|
||||
lastdate = date;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// adjust dates to local time zones, optionally provide navigation keys
|
||||
function personalize() {
|
||||
findEntries();
|
||||
addOption();
|
||||
moveDateHeaders();
|
||||
}
|
||||
|
||||
// hook event
|
||||
window.onload = personalize;
|
||||
if (document.addEventListener) {
|
||||
onDOMLoad = function() {
|
||||
window.onload = undefined;
|
||||
personalize();
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", onDOMLoad, false);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user