Permalink
Browse files

add time of day specific demo

  • Loading branch information...
1 parent 17bce87 commit 1d6aa948bbf8fbabc153481988bd1eade9ace301 @benbrown benbrown committed Jan 16, 2013
Showing with 224 additions and 83 deletions.
  1. +59 −50 aware.js
  2. +0 −32 demo.html
  3. +2 −1 readme.md
  4. +163 −0 time_of_day.html
View
109 aware.js
@@ -106,50 +106,7 @@
}
- $.fn.aware = function(options) {
-
- var settings = {
- dateAttribute: 'data-pubDate',
- bufferTime: 60*60*1000 // by default, leave things new if they are an hour old or less
-
- }
-
- var reader = {};
-
-
- $.extend(settings,options);
-
- // retrieve user's last visit timestamp
- // but make sure not to override it if already set once this session!
- if (!lastVisit) {
- lastVisit = getLastVisit();
- }
- var now = new Date();
- if (!lastVisit) {
- setLastVisit(now);
- $('body').addClass('first-visit');
- reader.lastVisit = now;
- reader.firstVisit = true;
- reader.secondsSinceLastVisit = 0;
- window.reader = reader;
- } else {
- lastVisit = new Date(lastVisit);
- reader.lastVisit = lastVisit;
-
- if (lastVisit.getDOY() < now.getDOY()) {
- $('body').addClass('first-visit-of-day');
- $('body').addClass('repeat-visitor');
- reader.firstVisitOfDay = true;
- reader.repeatVisitor = true;
-
- } else {
- if (!$('body').hasClass('first-visit')) {
- $('body').addClass('repeat-visitor');
- reader.repeatVisitor = true;
- }
- }
- }
-
+ $.fn.time_of_day = function(time_of_day) {
// What time of day is it?
// Is it sunny or dark?
// Is it lunch time? Or late night?
@@ -167,12 +124,14 @@
7-19 daytime
19-7 nighttime
- */
- var time_of_day = new Date().getHours();
- if (time_of_day >= 4 && time_of_day < 7) {
+ */
+ reader.morning = reader.afternoon = reader.lunchtime = reader.daytime = reader.nighttime = false;
+ if (time_of_day >= 4 && time_of_day < 6) {
+ reader.time_of_day = 'early';
+ } else if (time_of_day >= 6 && time_of_day < 8) {
reader.time_of_day = 'earlymorning';
reader.morning = true;
- } else if (time_of_day >= 7 && time_of_day < 11) {
+ } else if (time_of_day >= 8 && time_of_day < 11) {
reader.time_of_day = 'latemorning';
reader.morning = true;
} else if (time_of_day >= 11 && time_of_day < 13) {
@@ -193,7 +152,7 @@
reader.time_of_day = 'latenight';
}
- if (time_of_day >= 7 && time_of_day <19) {
+ if (time_of_day >= 6 && time_of_day <19) {
reader.daytime = true;
$('body').addClass('daytime');
@@ -209,8 +168,54 @@
$('body').addClass('afternoon');
}
- $('body').addClass(reader.time_of_day);
+ $('body').addClass(reader.time_of_day);
+ }
+
+ $.fn.aware = function(options) {
+
+ var settings = {
+ dateAttribute: 'data-pubDate',
+ bufferTime: 60*60*1000 // by default, leave things new if they are an hour old or less
+
+ }
+
+ var reader = {};
+
+
+ $.extend(settings,options);
+
+ // retrieve user's last visit timestamp
+ // but make sure not to override it if already set once this session!
+ if (!lastVisit) {
+ lastVisit = getLastVisit();
+ }
+ var now = new Date();
+ if (!lastVisit) {
+ setLastVisit(now);
+ $('body').addClass('first-visit');
+ reader.lastVisit = now;
+ reader.firstVisit = true;
+ reader.secondsSinceLastVisit = 0;
+ window.reader = reader;
+ } else {
+ lastVisit = new Date(lastVisit);
+ reader.lastVisit = lastVisit;
+
+ if (lastVisit.getDOY() < now.getDOY()) {
+ $('body').addClass('first-visit-of-day');
+ $('body').addClass('repeat-visitor');
+ reader.firstVisitOfDay = true;
+ reader.repeatVisitor = true;
+
+ } else {
+ if (!$('body').hasClass('first-visit')) {
+ $('body').addClass('repeat-visitor');
+ reader.repeatVisitor = true;
+ }
+ }
+ }
+
if (!reader.firstVisit) {
this.each(function() {
// find the date element
@@ -228,11 +233,15 @@
});
}
+
reader.secondsSinceLastVisit = Math.floor((now-lastVisit)/1000);
reader.timeSinceLastVisit = relativeTimestamp(now-lastVisit);
window.reader = reader;
+
+ $.fn.time_of_day(new Date().getHours());
+
setLastVisit(now);
}
View
@@ -197,38 +197,6 @@
overflow: visible;
}
- .leanback #featured {
- width: 30%;
- float: left;
- }
- .leanback #blog {
- margin-left: 30%;
- margin-right: 0;
- width: auto;
- }
- .leanback #links {
- display: none;
- float: right;
- width: 25%;
- }
- .leanback .post {
- position: relative; background: #CCC; height: 150px; float: left;
- width: 40%;
- padding:0;
- margin: 0.5%;
- }
-
- .leanback .post .permalink {
- position: absolute;
- bottom: 10px;
- }
- .leanback .post p {
- display: none;
-
- }
-
-
-
</style>
</head>
View
@@ -93,10 +93,11 @@ There are additional classes for smaller slices of the day:
.evening
.night
.latenight
+ .early
In addition, the *reader* object contains this same information:
- reader.time_of_day - earlymorning, latemorning, noonish,earlyevening,evening,night, or latenight
+ reader.time_of_day - early,earlymorning, latemorning, noonish,earlyevening,evening,night, or latenight
reader.morning - true/false
reader.afternoon - true/false
reader.daytime - true/false
View
@@ -0,0 +1,163 @@
+<head>
+ <title>Reader Aware Design Demo</title>
+ <script src="http://xoxco.com/js/jquery.min.js"></script>
+ <script src="aware.js"></script>
+ <script>
+ $(function() {
+ $().aware();
+ });
+ </script>
+ <style>
+
+ body {
+ font-family: 'helvetica';
+ }
+
+ #wrapper {
+ width: 90%;
+ max-width: 1024px;
+ margin: 0px auto;
+ overflow: visible;
+ text-align: center;
+ }
+
+ h1 {
+ font-size: 60px;
+ }
+
+ #time_of_day {
+ width: 50%;
+ }
+
+ #time {
+ font-weight: bold;
+ font-size: 24px;
+ font-family: monospace;
+ }
+
+/* Hide messages by default */
+
+ h1.morning, h1.afternoon, h1.nighttime {
+ display: none;
+ }
+
+/* special styles for day time */
+ body.daytime {
+ color: #369;
+ background-color: #FFF;
+ }
+
+
+ body.morning {
+ background-image: -webkit-linear-gradient(#f1d97a 0%, #ffffff 25%)
+
+ }
+
+ body.morning.earlymorning {
+ background-color: #333;
+ background-image: -webkit-linear-gradient( #333 0%,#f1d97a 90%);
+ }
+
+ body.earlymorning h1 {
+ color: #FFF;
+ }
+
+ .morning h1.morning {
+ display: block;
+ }
+
+ .morning .h1.earlymorning {
+ display: none;
+ }
+
+ .morning.earlymorning .h1.morning {
+ display: block;
+ }
+
+ .afternoon h1.afternoon {
+ display: block;
+ }
+
+/* special styles for night time */
+ body.nighttime {
+ color: #fff;
+ background-color: #333;
+ }
+
+ body.nighttime h1 {
+ color: #610a8d;
+ }
+ body.nighttime a {
+ color: #8331cb;
+ }
+
+ .nighttime h1.nighttime {
+ display: block;
+ }
+
+ body.night {
+ background-image: -webkit-linear-gradient(#000 0%, #333 60%)
+
+ }
+
+ body.latenight {
+ background-image: -webkit-linear-gradient(#000 0%, #333 90%)
+ }
+
+ body.latenight h1 {
+ color:fuchsia;
+ }
+
+
+
+ </style>
+
+ <script>
+ $(function() {
+ function showTime(time) {
+ m = 'am';
+ if (time >= 12 && time < 24) {
+ m = 'pm';
+ }
+ if (time > 12) {
+ time -= 12;
+ }
+ if (time == 0) {
+ time = 12;
+ }
+ time = time + ':00'+m;
+ $('#time').html(time);
+ }
+
+ $('#time_of_day').on('change',function() {
+ $('body').removeClass();
+ showTime($(this).val());
+ $().time_of_day($(this).val());
+
+ });
+
+ $('#time_of_day').val(new Date().getHours());
+ showTime(new Date().getHours());
+
+ })
+ </script>
+</head>
+<body>
+ <div style="background: #5DACE2; color: #FFF; padding: 5px; text-align: right;">
+ Powered by Aware.js: <a href="http://xoxco.com/projects/code/aware/">Get the code</a>
+ </div>
+ <div id="wrapper">
+ <h1 class="morning">Good Morning!</h1>
+ <h1 class="afternoon">Good Afternoon!</h1>
+ <h1 class="nighttime">Good Evening!</h1>
+
+ <h1>The design of this page responds to the time it is where you're sitting right now.</h1>
+ <form>
+ <p>Change the time</p>
+ <p id="time">12:00</p>
+ <input id="time_of_day" type="range" min="0" max="24" />
+ </form>
+ <h1>How?</h1>
+ <h1><a href="http://xoxco.com/projects/code/aware/">$().aware();</a></h1>
+ </div>
+</body>

0 comments on commit 1d6aa94

Please sign in to comment.