Browse files

Adding blog design by Smoofles, implemented by Luka

  • Loading branch information...
1 parent 9f5ab38 commit 9b69191d90fc6054309340f4e5ca60cc4fc2d6f0 @sudara committed Aug 7, 2009
View
491 design/new blog/css/blog.css
@@ -0,0 +1,491 @@
+/*Main structure*/
+body{
+font-family: Georgia;
+font-size:10px;
+position:relative;
+margin:auto;
+overflow:scroll;
+background: #e4e4d9;
+}
+html{
+width:990px;
+position:relative;
+margin:auto;
+background: transparent;
+}
+div#wrapper{
+position:relative;
+margin:auto;
+width:980px;
+min-height:600px;
+background: transparent url(../img/back.png) center no-repeat;
+float:left;
+}
+/*start left/main side container*/
+div#wp1{/*left side*/
+position:relative;
+margin:auto;
+float:left;
+width:660px;
+min-height:400px;
+background: transparent;
+}
+.post{/*left side post container*/
+position:relative;
+margin:auto;
+float:left;
+width:660px;
+min-height:300px;
+background: transparent;
+}
+.post-title{/*left side post container*/
+position:relative;
+margin:auto;
+float:none;
+width:660px;
+height:20px;
+background: #f2f2ed;
+padding:0 0 10px 0;
+ -moz-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+ -webkit-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+}
+.post-title-left{/*left side post container*/
+position:relative;
+margin:auto;
+float:left;
+width:130px;
+height:20px;
+text-align:left;
+background: transparent;
+}
+.post-title-right{/*left side post container*/
+position:relative;
+margin:auto;
+float:left;
+width:130px;
+height:20px;
+text-align:right;
+background: transparent;
+}
+.post-title-mid {/*left side post container*/
+position:relative;
+margin:auto;
+float:left;
+width:400px;
+height:20px;
+text-align:center;
+background: transparent;
+}
+.post-body{
+position:relative;
+margin:1px 0 0 0;
+float:left;
+width:660px;
+min-height:300px;
+background: #f9f9f6;
+ -moz-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+ -webkit-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+}
+.post-bot{
+position:relative;
+margin:auto;
+float:left;
+width:660px;
+min-height:30px;
+background: transparent;
+}
+.post-bot-left {/*left side post container*/
+position:relative;
+margin:auto;
+float:left;
+width:130px;
+min-height:30px;
+background: transparent url(../img/arro.png) top center no-repeat;
+}
+.post-bot-mid {/*left side post container*/
+position:relative;
+margin:auto;
+float:left;
+width:400px;
+height:30px;
+background: transparent;
+}
+.post-bot-right{/*left side post container*/
+position:relative;
+margin:auto;
+float:left;
+cursor:pointer;
+top:-2px;
+width:130px;
+height:30px;
+background: transparent url(../img/com-but.png) 32px 0px no-repeat;
+}
+/*end post*/
+/*strat comment*/
+.comment-all{/*left side post container*/
+position:relative;
+margin:0 0 30px 0;
+float:left;
+width:595px;
+padding-left:65px;
+background:transparent;
+}
+.comment{/*left side post container*/
+position:relative;
+margin:auto;
+float:left;
+width:595px;
+min-height:70px;
+border-bottom:1px solid #e5e5db;
+background: transparent;
+ -moz-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+ -webkit-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+}
+.comment-title{
+position:relative;
+margin:auto;
+float:none;
+width:549px;
+padding: 5px 23px 5px 23px;
+background: #f2f2ed;
+}
+.comment-body{
+position:relative;
+margin:0; /*0 1px 0; | 1px space bet. comments*/
+float:none;
+width:549px;
+min-height:7px;
+padding: 13px 23px 13px 23px;
+background: #f2f2ed;
+}
+/*end comment*/
+/*end left/main side container*/
+/*start right side container*/
+div#wp2{/*right side*/
+float:right;
+position:relative;
+margin:auto;
+width:320px;
+min-height:400px;
+background: transparent;
+}
+.wp2-title{/*right side container title*/
+float:none;
+position:relative;
+margin:0 8px 0px 10px;
+width:300px;
+padding:1px 0 1px 0;
+background: #f2f2ed;
+ -moz-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+ -webkit-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+}
+.wp2-title-o{/*right side container title orange*/
+float:none;
+position:relative;
+margin:0 10px 0px 10px;
+width:300px;
+padding:1px 0 1px 0;
+background: #fa934d;
+ -moz-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+ -webkit-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+}
+.wp2-mid{/*right side container txt*/
+float:none;
+position:relative;
+margin:1px 10px 1px 10px;
+width:260px; /*40 px les, because of the padding -> 20px*/
+padding: 10px 20px 5px 20px;
+background: #f9f9f6;
+ -moz-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+ -webkit-box-shadow: 0px 1px 3px rgba(87,78,62,0.10);
+}
+/*tweeter start*/
+div#tweets{/*right side container txt tweeter*/
+float:none;
+position:relative;
+padding: 0;
+margin:0;
+background: transparent;
+list-style-type: none;
+}
+p.ptweet{
+background: transparent;
+list-style-type: none;
+font-size:12px;
+}
+a.atweet{
+ display:block;
+ font-size:12px;
+ color:#a59493;
+}
+#tweets ul {
+ margin:0;
+ padding:0;
+}
+#tweets ul li {
+ list-style-type:none; /*keine bullets -> omg that sucked*/
+ outline:none;
+ margin:0;
+ padding:0;
+ margin:auto;
+ !text-decoration:none;
+}
+/*tweeter end*/
+/*end right side container*/
+/*mein end*/
+/*header start*/
+div#header{/*header: logo, link to alonetone, title, */
+position:relative;
+margin:auto;
+width:980px;
+min-height:90px;
+background: #e4e4d9;
+}
+div#hd1{/*header left side*/
+position:relative;
+float:left;
+margin:auto;
+width:660px;
+min-height:90px;
+background: transparent;
+}
+div#hd1-top{/*header left side link to alonetone*/
+position:relative;
+margin:auto;
+width:660px;
+min-height:25px;
+background: transparent;
+}
+div#hd1-bot{/*header left side*/
+position:relative;
+margin:auto;
+width:660px;
+min-height:65px;
+background: transparent url(../img/title.png) center no-repeat;
+}
+div#hd2{/*header right side*/
+position:relative;
+margin:auto;
+float:right;
+width:320px;
+min-height:90px;
+background: transparent url(../img/logo.png) center top no-repeat;
+}
+/*bottom start*/
+div#bottom{
+position:relative;
+margin:30px 0 0 0;
+float:none;
+width:970px;
+min-height:250px;
+background: #574e3e;
+float:left;
+}
+.bottom-left{
+position:relative;
+padding-top:30px;
+margin:auto;
+width:325px;
+min-height:220px;
+border-right: 1px solid #6c614d;
+background: transparent url(../img/latestup.png) 10px 10px no-repeat;
+float:left;
+}
+.bottom-mid{
+position:relative;
+padding-top:30px;
+margin:auto;
+width:320px;
+min-height:220px;
+border-right: 1px solid #6c614d;
+background: transparent url(../img/latestco.png) 8px 10px no-repeat;
+float:left;
+}
+.bottom-right{
+position:relative;
+padding-top:30px;
+margin:auto;
+width:321px;
+min-height:220px;
+background: transparent url(../img/cukickass.png) 9px 9px no-repeat;
+float:left;
+}
+/*bottom end*/
+/*text styles start*/
+h1.h1post{
+ color:#f8ab75;
+ padding:0px;
+ margin:0px;
+ margin: 10px 0 0 0;
+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
+ font-size:30px;
+ font-weight:bold;
+ text-align:center;
+}
+h2.h2post{
+ padding:0;
+ margin:0;
+ color:#a29f95;
+ margin: 0 0 25px 0;
+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
+ font-size:10px;
+ font-weight:bolder;
+ text-align:center;
+}
+h1.post-entry{
+ color:#f8ab75;
+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
+ font-size:11px;
+ font-weight:bold;
+}
+h1.right-orange{
+ color:#f98845;
+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
+ font-size:11px;
+ font-weight:bold;
+ text-align:center;
+ font-style:italic;
+}
+h1.right-white{
+ color:#fff;
+ text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+ font-size:12px;
+ font-weight:bold;
+ text-align:center;
+ font-style:italic;
+}
+h1.h1-comment{
+ margin:0;
+ padding:0;
+ color:#928987;
+ font-size:14px;
+ font-weight:bolder;
+ text-align:left;
+ font-style:normal;
+}
+h2.h2-comment{
+ margin:0;
+ padding:0;
+ color:#928987;
+ font-size:13px;
+ font-weight:bold;
+ text-align:left;
+ font-style:normal;
+}
+h1.h1bottom{
+ color:#fff;
+ margin:0;
+ margin-left:10px;
+ margin-top:15px;
+ text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+ font-size:14px;
+ font-weight:bolder;
+ text-align:left;
+ font-style:normal;
+}
+p.p-post{
+ color:#000;
+ margin:10px 64px 46px 64px;
+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
+ font-size:14px;
+ line-height:20px;
+ font-weight:normal;
+ text-align:justify;
+ font-style:normal;
+}
+p.p-comment{
+ color:#000;
+ margin:0;
+ font-size:13px;
+ font-weight:normal;
+ text-align:left;
+ font-style:normal;
+}
+p.pbottom{
+ color:#fff;
+ margin:0px 0 5px 10px ;
+ text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+ font-size:12px;
+ font-weight:normal;
+ text-align:left;
+ font-style:normal;
+}
+
+p.right-black{
+ color:#000;
+ margin:0px;
+ padding:0px;
+ font-size:11px;
+ font-weight:normal;
+ text-align:left;
+ font-style:normal;
+}
+/*text styles end*/
+/*links styles start*/
+a{
+ color:#d55232;
+ display:inline;
+ text-decoration:none;
+}
+
+a.right-red{
+ color:#d55232;
+ display:block;
+ text-decoration:none;
+ font-size:11px;
+ margin:0px 0 5px 0 ;
+ padding:0px;
+ font-weight:normal;
+ text-align:left;
+ font-style:normal;
+}
+a.prev-next{
+ display:block;
+ text-decoration:none;
+ margin:0px;
+ font-size:12px;
+ color:#a9a9a9}
+a.prev-next:visited {
+ display:block;
+ padding-top:8px;
+ text-decoration:none;
+ margin:0px;
+ font-size:12px;
+ color:#a9a9a9}
+a.prev-next:hover {
+ display:block;
+ text-decoration:none;
+ margin:0px;
+ font-size:12px;
+ color:#000}
+/*links styles end*/
+/*ul li post styles start*/
+ul.ul-post{
+ color:#d55232;
+ margin:-35px 0 0 0 ;
+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
+ font-size:14px;
+ line-height:5px;
+ font-weight:normal;
+ text-align:justify;
+ font-style:normal;
+}
+li.li-post{
+ color:#000;
+ margin: 10px 0 5px 40px;
+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
+ font-size:14px;
+ line-height:5px;
+ font-weight:normal;
+ text-align:justify;
+ font-style:normal;
+ list-style-image: url(../img/bullet.png);/*bullet img, I could do it with span styles if you would like?*/
+}
+
+/*ul li post styles end*/
+{
+ -moz-outline-style: none;
+}
+
+
+
View
BIN design/new blog/img/arro.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN design/new blog/img/back.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN design/new blog/img/bullet.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN design/new blog/img/com-but.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN design/new blog/img/cukickass.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN design/new blog/img/latestco.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN design/new blog/img/latestup.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN design/new blog/img/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN design/new blog/img/title.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
135 design/new blog/index.html
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head><title>Alonetone Blog</title>
+ <link href="css/blog.css" rel="Stylesheet" type="text/css" media="screen" />
+ <script type="text/javascript" src="js/twitter.js"></script>
+ <script type="text/javascript" src="js/alonetoneblog.js"></script>
+ </head>
+ <body>
+ <div id="wrapper">
+<!-- header start -->
+ <div id="header">
+ <div id="hd1"><!-- header left side -->
+ <div id="hd1-top">
+<!-- link to alonetone --><a class="prev-next" href ="http://alonetone.com/">&nbsp;&nbsp;&nbsp;&nbsp;&laquo;Back to alonetone.com</a>
+ </div><!-- div end hd1-top -->
+ <div id="hd1-bot"><!-- title --></div><!-- div end hd1-bot -->
+ </div><!-- div end hd1 -->
+ <div id="hd2"><!-- header right side --><!-- logo --></div><!-- div end hd2 -->
+ </div><!-- div end header -->
+<!-- header end -->
+<!-- main start -->
+ <div id="wp1"><!-- left side wrapper -->
+ <div class="post">
+ <div class="post-title">
+ <div class="post-title-left"><a class="prev-next" href ="#">&laquo;Previous entry</a></div><!-- div end post-title-left -->
+ <div class="post-title-mid">
+ <h1 class="post-entry"> Blog entry 20 of 20 </h1><!-- <%= blog entry %> -->
+ </div><!-- div end post-title-mid -->
+ <div class="post-title-right"><a class="prev-next" href ="#">Next entry&raquo;</a></div><!-- div end post-title-right -->
+ </div><!-- div end post-title -->
+ <div class="post-body">
+ <h1 class="h1post">spring cleaning, see who follows who</h1>
+ <h2 class="h2post">posted by <a href ="#">Sudara</a> on March 22,2009 - comments -</h1>
+ <p class="p-post">Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+
+
+ <ul class="ul-post">
+ <li class="li-post">a test</li>
+ <li class="li-post">a test</li>
+ <li class="li-post">a test</li>
+ </ul>
+
+<p class="p-post">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br /> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br /> <br /><a href ="http://alonetone.com/">testing link</a></p>
+ </div><!-- div end post-body -->
+ <div class="post-bot">
+ <div class="post-bot-left"></div><!-- div end post-bot-left -->
+ <div class="post-bot-mid"></div><!-- div end post-bot-mid -->
+ <div class="post-bot-right"></div><!-- div end post-bot-right -->
+ </div><!-- div end post-body -->
+ <div class="comment-all">
+ <div class="comment">
+ <div class="comment-title">
+ <h1 class="h1-comment">The comments so far:</h1>
+ </div><!-- div end comment-title -->
+ <div class="comment-body">
+ <h2 class="h2-comment"><a href ="#">Sudara</a> said 3 months ago</h1>
+ <p class="p-comment">I love making fresh music!</p>
+ </div><!-- div end comment-body -->
+ </div><!-- div end comment -->
+ <div class="comment">
+ <div class="comment-title">
+ <h1 class="h1-comment">The comments so far:</h1>
+ </div><!-- div end comment-title -->
+ <div class="comment-body">
+ <h2 class="h2-comment"><a href ="#">Sudara</a> said 3 months ago</h1>
+ <p class="p-comment">I love making fresh music!</p>
+ </div><!-- div end comment-body -->
+ </div><!-- div end comment -->
+ <div class="comment">
+ <div class="comment-title">
+ <h1 class="h1-comment">The comments so far:</h1>
+ </div><!-- div end comment-title -->
+ <div class="comment-body">
+ <h2 class="h2-comment"><a href ="#">Sudara</a> said 3 months ago</h1>
+ <p class="p-comment">I love making fresh music!</p>
+ </div><!-- div end comment-body -->
+ </div><!-- div end comment -->
+ <div class="comment">
+ <div class="comment-title">
+ <h1 class="h1-comment">The comments so far:</h1>
+ </div><!-- div end comment-title -->
+ <div class="comment-body">
+ <h2 class="h2-comment"><a href ="#">Sudara</a> said 3 months ago</h1>
+ <p class="p-comment">I love making fresh music!</p>
+ </div><!-- div end comment-body -->
+ </div><!-- div end comment -->
+ </div><!-- div end comment-all -->
+ </div><!-- div end post -->
+ </div><!-- div end wp1-->
+ <div id="wp2"><!-- right side wrapper -->
+ <div class="wp2-title"><h1 class="right-orange">&bull;tweets&bull;</h1>
+ </div><!-- div end wp2-title-->
+ <div class="wp2-mid"><div id="tweets"></div>
+ </div><!-- div end wp2-mid-->
+ <div class="wp2-title-o"><h1 class="right-white">JOIN THE ALONETONE CHAT FOR FREE!! </h1>
+ </div><!-- div end wp2-title-->
+ <div class="wp2-mid">
+ <a class="right-red" href ="#">Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy </a>
+ <a class="right-red" href ="#">Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy </a>
+ </div><!-- div end wp2-mid-->
+ <div class="wp2-title"><h1 class="right-orange">&bull;recent comments&bull;</h1>
+ </div><!-- div end wp2-title-->
+ <div class="wp2-mid"><a class="right-red" href ="#">Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy </a>
+ </div><!-- div end wp2-mid-->
+ <div class="wp2-title"><h1 class="right-orange">&bull;archives&bull;</h1>
+ </div><!-- div end wp2-title-->
+ <div class="wp2-mid">
+ <p class="right-black">2009</p>
+ <a class="right-red" href ="#">Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy </a>
+ <p class="right-black">2010</p>
+ <a class="right-red" href ="#">Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy </a>
+ </div><!-- div end wp2-mid-->
+ </div><!-- div end wp2-->
+ <div id="bottom">
+ <div class="bottom-left">
+ <h1 class="h1bottom">La lolelilo</h1>
+ <p class="pbottom">Lorem ipsum dolor sit amet</p>
+ <h1 class="h1bottom">La lolelilo</h1>
+ <p class="pbottom">Lorem ipsum dolor sit amet</p>
+ <h1 class="h1bottom">La lolelilo</h1>
+ <p class="pbottom">Lorem ipsum dolor sit amet</p>
+ </div><!-- div end bottom-left -->
+ <div class="bottom-mid">
+ <h1 class="h1bottom">La lolelilo</h1>
+ <p class="pbottom">Lorem ipsum dolor sit amet</p>
+ </div><!-- div end bottom-mid -->
+ <div class="bottom-right">
+ <h1 class="h1bottom">La lolelilo</h1>
+ <p class="pbottom">Lorem ipsum dolor sit amet</p>
+ </div><!-- div end bottom-right -->
+ </div><!-- div end bottom -->
+ </div><!-- div end wrapper -->
+ </body>
+</html>
View
8 design/new blog/js/alonetoneblog.js
@@ -0,0 +1,8 @@
+ getTwitters('tweets', {
+ id: 'alonetone',
+ count: 4,
+ enableLinks: true,
+ ignoreReplies: false,
+ clearContents: true,
+ template: '<p class="ptweet">%text%<a class="atweet" href="http://twitter.com/%user_screen_name%/statuses/%id%/" class="timelink">%time%</a></p>'
+ });
View
368 design/new blog/js/twitter.js
@@ -0,0 +1,368 @@
+/**
+ * remy sharp / http://remysharp.com
+ * http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
+ *
+ * @params
+ * cssIdOfContainer: e.g. twitters
+ * options:
+ * {
+ * id: {String} username,
+ * count: {Int} 1-20, defaults to 1 - max limit 20
+ * prefix: {String} '%name% said', defaults to blank
+ * clearContents: {Boolean} true, removes contents of element specified in cssIdOfContainer, defaults to true
+ * ignoreReplies: {Boolean}, skips over tweets starting with '@', defaults to false
+ * template: {String} HTML template to use for LI element (see URL above for examples), defaults to predefined template
+ * enableLinks: {Boolean} linkifies text, defaults to true,
+ * timeout: {Int} How long before triggering onTimeout, defaults to 10 seconds if onTimeout is set
+ * onTimeoutCancel: {Boolean} Completely cancel twitter call if timedout, defaults to false
+ * onTimeout: {Function} Function to run when the timeout occurs. Function is bound to element specified with
+ * cssIdOfContainer (i.e. 'this' keyword)
+ *
+ * CURRENTLY DISABLED DUE TO CHANGE IN TWITTER API:
+ * withFriends: {Boolean} includes friend's status
+ *
+ * }
+ *
+ * @license MIT (MIT-LICENSE.txt)
+ * @version 1.12.2 - Fixed Safari 4 returning blank by using simple cache busting
+ * @date $Date: 2009-03-09 09:46:25 +0000 (Mon, 09 Mar 2009) $
+ */
+
+// to protect variables from resetting if included more than once
+if (typeof renderTwitters != 'function') (function () {
+ /** Private variables */
+ var browser = (function() {
+ var b = navigator.userAgent.toLowerCase();
+
+ // Figure out what browser is being used
+ return {
+ safari: /webkit/.test(b),
+ opera: /opera/.test(b),
+ msie: /msie/.test(b) && !(/opera/).test(b),
+ mozilla: /mozilla/.test(b) && !(/(compatible|webkit)/).test(b)
+ };
+ })();
+
+ var guid = 0;
+ var readyList = [];
+ var isReady = false;
+
+ /** Global functions */
+
+ // to create a public function within our private scope, we attach the
+ // the function to the window object
+ window.renderTwitters = function (obj, options) {
+ // private shortcuts
+ function node(e) {
+ return document.createElement(e);
+ }
+
+ function text(t) {
+ return document.createTextNode(t);
+ }
+
+ var target = document.getElementById(options.twitterTarget);
+ var data = null;
+ var ul = node('ul'), li, statusSpan, timeSpan, i, max = obj.length > options.count ? options.count : obj.length;
+
+ for (i = 0; i < max && obj[i]; i++) {
+ data = getTwitterData(obj[i]);
+
+ if (options.ignoreReplies && obj[i].text.substr(0, 1) == '@') {
+ max++;
+ continue; // skip
+ }
+
+ li = node('li');
+
+ if (options.template) {
+ li.innerHTML = options.template.replace(/%([a-z_\-\.]*)%/ig, function (m, l) {
+ var r = data[l] + "" || "";
+ if (l == 'text' && options.enableLinks) r = linkify(r);
+ return r;
+ });
+ } else {
+ statusSpan = node('span');
+ statusSpan.className = 'twitterStatus';
+ timeSpan = node('span');
+ timeSpan.className = 'twitterTime';
+ statusSpan.innerHTML = obj[i].text; // forces the entities to be converted correctly
+
+ if (options.enableLinks == true) {
+ statusSpan.innerHTML = linkify(statusSpan.innerHTML);
+ }
+
+ timeSpan.innerHTML = relative_time(obj[i].created_at);
+
+ if (options.prefix) {
+ var s = node('span');
+ s.className = 'twitterPrefix';
+ s.innerHTML = options.prefix.replace(/%(.*?)%/g, function (m, l) {
+ return obj[i].user[l];
+ });
+ li.appendChild(s);
+ li.appendChild(text(' ')); // spacer :-(
+ }
+
+ li.appendChild(statusSpan);
+ li.appendChild(text(' '));
+ li.appendChild(timeSpan);
+ }
+
+ ul.appendChild(li);
+ }
+
+ if (options.clearContents) {
+ while (target.firstChild) {
+ target.removeChild(target.firstChild);
+ }
+ }
+
+ target.appendChild(ul);
+ };
+
+ window.getTwitters = function (target, id, count, options) {
+ guid++;
+
+
+ if (typeof id == 'object') {
+ options = id;
+ id = options.id;
+ count = options.count;
+ }
+
+ // defaulting options
+ if (!count) count = 1;
+
+ if (options) {
+ options.count = count;
+ } else {
+ options = {};
+ }
+
+ if (!options.timeout && typeof options.onTimeout == 'function') {
+ options.timeout = 10;
+ }
+
+ if (typeof options.clearContents == 'undefined') {
+ options.clearContents = true;
+ }
+
+ // Hack to disable withFriends, twitter changed their API so this requires auth
+ // http://getsatisfaction.com/twitter/topics/friends_timeline_api_call_suddenly_requires_auth
+ if (options.withFriends) options.withFriends = false;
+
+ // need to make these global since we can't pass in to the twitter callback
+ options['twitterTarget'] = target;
+
+ // default enable links
+ if (typeof options.enableLinks == 'undefined') options.enableLinks = true;
+
+ // this looks scary, but it actually allows us to have more than one twitter
+ // status on the page, which in the case of my example blog - I do!
+ window['twitterCallback' + guid] = function (obj) {
+ if (options.timeout) {
+ clearTimeout(window['twitterTimeout' + guid]);
+ }
+ renderTwitters(obj, options);
+ };
+
+ // check out the mad currying!
+ ready((function(options, guid) {
+ return function () {
+ // if the element isn't on the DOM, don't bother
+ if (!document.getElementById(options.twitterTarget)) {
+ return;
+ }
+
+ var url = 'http://www.twitter.com/statuses/' + (options.withFriends ? 'friends_timeline' : 'user_timeline') + '/' + id + '.json?callback=twitterCallback' + guid + '&count=20&cb=' + Math.random();
+
+ if (options.timeout) {
+ window['twitterTimeout' + guid] = setTimeout(function () {
+ // cancel callback
+ if (options.onTimeoutCancel) window['twitterCallback' + guid] = function () {};
+ options.onTimeout.call(document.getElementById(options.twitterTarget));
+ }, options.timeout * 1000);
+ }
+
+ var script = document.createElement('script');
+ script.setAttribute('src', url);
+ document.getElementsByTagName('head')[0].appendChild(script);
+ };
+ })(options, guid));
+ };
+
+ // GO!
+ DOMReady();
+
+
+ /** Private functions */
+
+ function getTwitterData(orig) {
+ var data = orig, i;
+ for (i in orig.user) {
+ data['user_' + i] = orig.user[i];
+ }
+
+ data.time = relative_time(orig.created_at);
+
+ return data;
+ }
+
+ function ready(callback) {
+ if (!isReady) {
+ readyList.push(callback);
+ } else {
+ callback.call();
+ }
+ }
+
+ function fireReady() {
+ isReady = true;
+ var fn;
+ while (fn = readyList.shift()) {
+ fn.call();
+ }
+ }
+
+ // ready and browser adapted from John Resig's jQuery library (http://jquery.com)
+ function DOMReady() {
+ if ( browser.mozilla || browser.opera ) {
+ document.addEventListener( "DOMContentLoaded", fireReady, false );
+ } else if ( browser.msie ) {
+ // If IE is used, use the excellent hack by Matthias Miller
+ // http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
+
+ // Only works if you document.write() it
+ document.write("<scr" + "ipt id=__ie_init defer=true src=//:><\/script>");
+
+ // Use the defer script hack
+ var script = document.getElementById("__ie_init");
+
+ // script does not exist if jQuery is loaded dynamically
+ if (script) {
+ script.onreadystatechange = function() {
+ if ( this.readyState != "complete" ) return;
+ this.parentNode.removeChild( this );
+ fireReady.call();
+ };
+ }
+
+ // Clear from memory
+ script = null;
+
+ // If Safari is used
+ } else if ( browser.safari ) {
+ // Continually check to see if the document.readyState is valid
+ var safariTimer = setInterval(function () {
+ // loaded and complete are both valid states
+ if ( document.readyState == "loaded" ||
+ document.readyState == "complete" ) {
+
+ // If either one are found, remove the timer
+ clearInterval( safariTimer );
+ safariTimer = null;
+ // and execute any waiting functions
+ fireReady.call();
+ }
+ }, 10);
+ }
+ }
+
+ function relative_time(time_value) {
+ var values = time_value.split(" "),
+ parsed_date = Date.parse(values[1] + " " + values[2] + ", " + values[5] + " " + values[3]),
+ date = new Date(parsed_date),
+ relative_to = (arguments.length > 1) ? arguments[1] : new Date(),
+ delta = parseInt((relative_to.getTime() - parsed_date) / 1000),
+ r = '';
+
+ function formatTime(date) {
+ var hour = date.getHours(),
+ min = date.getMinutes() + "",
+ ampm = 'AM';
+
+ if (hour == 0) {
+ hour = 12;
+ } else if (hour > 12) {
+ hour -= 12;
+ ampm = 'PM';
+ }
+
+ if (min.length == 1) {
+ min = '0' + min;
+ }
+
+ return hour + ':' + min + ' ' + ampm;
+ }
+
+ function formatDate(date) {
+ var ds = date.toDateString().split(/ /),
+ mon = ds[1],
+ day = ds[2],
+ dayi = parseInt(day),
+ year = date.getFullYear(),
+ thisyear = (new Date()).getFullYear(),
+ th = 'th';
+
+ // anti-'th' - but don't do the 11th, 12th or 13th
+ if ((dayi % 10) == 1 && day.substr(0, 1) != '1') {
+ th = 'st';
+ } else if ((dayi % 10) == 2 && day.substr(0, 1) != '1') {
+ th = 'nd';
+ } else if ((dayi % 10) == 3 && day.substr(0, 1) != '1') {
+ th = 'rd';
+ }
+
+ if (day.substr(0, 1) == '0') {
+ day = day.substr(1);
+ }
+
+ return mon + ' ' + day + th + (thisyear != year ? ', ' + year : '');
+ }
+
+ delta = delta + (relative_to.getTimezoneOffset() * 60);
+
+ if (delta < 5) {
+ r = 'less than 5 seconds ago';
+ } else if (delta < 30) {
+ r = 'half a minute ago';
+ } else if (delta < 60) {
+ r = 'less than a minute ago';
+ } else if (delta < 120) {
+ r = '1 minute ago';
+ } else if (delta < (45*60)) {
+ r = (parseInt(delta / 60)).toString() + ' minutes ago';
+ } else if (delta < (2*90*60)) { // 2* because sometimes read 1 hours ago
+ r = 'about 1 hour ago';
+ } else if (delta < (24*60*60)) {
+ r = 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
+ } else {
+ if (delta < (48*60*60)) {
+ r = formatTime(date) + ' yesterday';
+ } else {
+ r = formatTime(date) + ' ' + formatDate(date);
+ // r = (parseInt(delta / 86400)).toString() + ' days ago';
+ }
+ }
+
+ return r;
+ }
+
+ function linkify(s) {
+ var entities = {
+ '"' : '&quot;',
+ '&' : '&amp;',
+ '<' : '&lt;',
+ '>' : '&gt;'
+ };
+
+ return s.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g, function(m) {
+ return m.link(m);
+ }).replace(/(^|[^\w])(@[\d\w\-]+)/g, function(d, m1, m2) {
+ return m1 + '@<a href="http://twitter.com/' + m2.substr(1) + '">' + m2.substr(1) + '</a>';
+ }).replace(/"&<>/, function (m) {
+ return entities[m];
+ });
+ }
+})();

0 comments on commit 9b69191

Please sign in to comment.