playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Improved styling of tweets 

Also fixed block quote styling and added a new feature to allow
websites to be added to the timeline via a link.
pull/13/head
Zach Wise 13 years ago
parent
9f1ae1f346
commit
4db864f0be
13 changed files with 233 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      source/.DS_Store
  2. 5
      source/js/VMM.Util.js
  3. 194
      source/js/VMM.js
  4. 6
      source/less/gfx.less
  5. 5
      source/less/slider.less
  6. 14
      source/less/structure-feature.less
  7. 2
      source/less/structure-navigation.less
  8. 68
      source/less/structure.less
  9. 1
      source/less/type.less
  10. 6
      timeline-min.js
  11. 15
      timeline.css
  12. BIN
      timeline.png

BIN
source/.DS_Store vendored
View File

Binary file not shown.

5
source/js/VMM.Util.js
Unescape View File

@ -389,6 +389,11 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
return sps.join(" ");
},
/* Replaces dumb quote marks with smart ones
================================================== */
properQuotes: function(str) {
return str.replace(/\"([^\"]*)\"/gi,"“$1”");
},
/* Given an int or decimal, return a string with pretty commas in the correct spot.
================================================== */
niceNumber: function(n){

194
source/js/VMM.js
Unescape View File

@ -1269,6 +1269,12 @@ if (typeof VMM == 'undefined') {
} else if (m.type == "google-map") {
mediaElem = "<div class='thumbnail map'></div>";
return mediaElem;
} else if (m.type == "unknown") {
mediaElem = "";
return mediaElem;
} else if (m.type == "website") {
mediaElem = "<div class='thumbnail website'></div>";
return mediaElem;
} else {
mediaElem = "<div class='thumbnail'></div>";
return mediaElem;
@ -1338,10 +1344,13 @@ if (typeof VMM == 'undefined') {
var soundcloud_id = "soundcloud_" + VMM.Util.unique_ID(5);
mediaElem = "<div class='media-frame soundcloud' id='" + soundcloud_id + "'>Loading Sound</div>";
VMM.ExternalAPI.soundcloud.getSound(m.id, soundcloud_id)
} else if (m.type = "google-map") {
trace("GOOGLE MAP MEDIA CREATE");
} else if (m.type == "google-map") {
mediaElem = "<iframe class='media-frame map' onload='timeline.iframeLoaded()' frameborder='0' width='100%' height='100%' scrolling='no' marginheight='0' marginwidth='0' src='" + m.id + "&amp;output=embed'></iframe>"
//mediaElem = "<iframe class='media-frame video vimeo' onload='timeline.iframeLoaded()' frameborder='0' width='100%' height='100%' src='http://player.vimeo.com/video/" + m.id + "?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff'></iframe>";
} else if (m.type == "unknown") {
trace("NO KNOWN MEDIA TYPE FOUND TRYING TO JUST PLACE THE HTML");
mediaElem = VMM.Util.properQuotes(m.id);
} else if (m.type == "website") {
mediaElem = "<iframe class='media-frame' onload='timeline.iframeLoaded()' frameborder='0' width='100%' height='100%' scrolling='yes' marginheight='0' marginwidth='0' src='" + m.id + "'></iframe>"
} else {
trace("NO KNOWN MEDIA TYPE FOUND");
trace(m.type);
@ -1366,11 +1375,97 @@ if (typeof VMM == 'undefined') {
}).init();
//VMM.mediaType.youtube(d); //should return a true or false
// VMM.MediaType(url); //returns an object with .type and .id
VMM.MediaType = function(d) {
var success = false;
var media = {};
if (d.match("div class='twitter'")) {
media.type = "twitter-ready";
media.id = d;
success = true;
} else if (d.match('(www.)?youtube|youtu\.be')) {
if (d.match('embed')) {
youtube_id = d.split(/embed\//)[1].split('"')[0];
} else {
youtube_id = d.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
}
//youtube_id = d.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
media.type = "youtube";
media.id = youtube_id;
success = true;
} else if (d.match('(player.)?vimeo\.com')) {
//vimeo_id = d.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
vimeo_id = d.split(/video\/|\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
media.type = "vimeo";
media.id = vimeo_id;
success = true;
} else if (d.match('(player.)?soundcloud\.com')) {
//soundcloud_url = unescape(d.split(/value="/)[1].split(/["]/)[0]);
//soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];
media.type = "soundcloud";
media.id = d;
success = true;
} else if (d.match('(www.)?twitter\.com')) {
trace("TWITTER MATCH");
// https://twitter.com/#!/twitterapi/statuses/133640144317198338
// https://twitter.com/#!/DeliciousHot/status/23189589820702720
if (d.match("status\/")) {
twitter_id = d.split("status\/")[1];
} else if (d.match("statuses\/")) {
twitter_id = d.split("statuses\/")[1];
} else {
twitter_id = "";
}
media.type = "twitter";
media.id = twitter_id;
success = true;
} else if (d.match("maps.google.com")) {
//maps.google.com
media.type = "google-map";
media.id = d.split(/src=['|"][^'|"]*?['|"]/gi);
trace("google map " + media.id);
success = true;
} else if (d.match("flickr.com/photos")) {
media.type = "flickr";
//media.id = d.split('/photos/[^/]+/([0-9]+)/gi');
media.id = d.split("photos\/")[1].split("/")[1];
//media.id = media.id.split("/")[1];
trace("FLICKR " + media.id);
success = true;
} else if (d.match(/jpg|png|gif/i)) {
media.type = "image";
media.id = d;
success = true;
} else if (d.indexOf('http://') == 0) {
media.type = "website";
media.id = d;
success = true;
} else {
trace("unknown media");
media.type = "unknown";
media.id = d;
success = true;
}
if (success) {
return media;
} else {
trace("No valid media id detected");
trace(d);
}
return false;
}
VMM.Keys = {
flickr: "6d6f59d8d30d79f4f402a7644d5073e3",
}
VMM.ExternalAPI = {
twitter: {
tweetArray: [],
// VMM.ExternalAPI.twitter.getHTML(id);
@ -1508,6 +1603,7 @@ if (typeof VMM == 'undefined') {
VMM.ExternalAPI.twitter.formatJSON(d, id);
});
},
formatJSON: function(d, id) {
var twit = "<blockquote><p>";
var td = VMM.Util.linkify(d.text);
@ -1515,8 +1611,21 @@ if (typeof VMM == 'undefined') {
td = td.replace(/(#([\w]+))/g,"<a href='http://twitter.com/#search?q=%23$2'>$1</a>");
//twit += VMM.Util.linkify(d.text);
twit += td;
twit += "</p>";
twit += "— " + d.user.name + " (<a href='https://twitter.com/" + d.user.screen_name + "'>@" + d.user.screen_name + "</a>) <a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "'>" + d.created_at + " </a></blockquote>";
twit += "</p></blockquote>";
//twit += "— " + d.user.name + " (<a href='https://twitter.com/" + d.user.screen_name + "'>@" + d.user.screen_name + "</a>) <a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "'>" + d.created_at + " </a>";
//twit += "<a href='" + + "'>" + VMM.ExternalAPI.twitter.prettyParseTwitterDate(d.created_at);
//twit += "<span class='created-at'><a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "'>" + VMM.ExternalAPI.twitter.prettyParseTwitterDate(d.created_at) + " </a></span>";
//twit += "<span class='created-at'><a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "'>" + "Tweet Details" + " </a></span>";
twit += " <a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "' alt='link to original tweet' title='link to original tweet'>" + "<span class='created-at'></span>" + " </a>";
twit += "<div class='vcard author'>"
twit += "<a class='screen-name url' href='https://twitter.com/" + d.user.screen_name + "' data-screen-name='" + d.user.screen_name + "'>";
twit += "<span class='avatar'><img src=' " + d.user.profile_image_url + "' alt=''></span>";
twit += "<span class='fn'>" + d.user.name + "</span>";
twit += "<span class='nickname'>@" + d.user.screen_name + "</span>";
twit += "</a>"
twit += "</div>"
/*
<blockquote class="twitter-tweet">
<p>Tom Brokaw asks <a href="https://twitter.com/search/%2523Romney">#Romney</a> to remove from ads 1997 NBC report on <a href="https://twitter.com/search/%2523Gingrich">#Gingrich</a> legal troubles. Romney unmoved. <a href="http://t.co/re7vtLNt" title="http://thecaucus.blogs.nytimes.com/2012/01/28/nbc-news-asks-romney-campaign-to-remove-ad/?hp">thecaucus.blogs.nytimes.com/2012/01/28/nbc…</a></p>
@ -1528,6 +1637,7 @@ if (typeof VMM == 'undefined') {
}
},
maps: {
},
@ -1651,81 +1761,7 @@ if (typeof VMM == 'undefined') {
}
}
//VMM.mediaType.youtube(d); //should return a true or false
// VMM.MediaType(url); //returns an object with .type and .id
VMM.MediaType = function(d) {
var success = false;
var media = {};
if (d.match("div class='twitter'")) {
media.type = "twitter-ready";
media.id = d;
success = true;
} else if (d.match('(www.)?youtube|youtu\.be')) {
if (d.match('embed')) {
youtube_id = d.split(/embed\//)[1].split('"')[0];
} else {
youtube_id = d.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
}
//youtube_id = d.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
media.type = "youtube";
media.id = youtube_id;
success = true;
} else if (d.match('(player.)?vimeo\.com')) {
//vimeo_id = d.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
vimeo_id = d.split(/video\/|\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
media.type = "vimeo";
media.id = vimeo_id;
success = true;
} else if (d.match('(player.)?soundcloud\.com')) {
//soundcloud_url = unescape(d.split(/value="/)[1].split(/["]/)[0]);
//soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];
media.type = "soundcloud";
media.id = d;
success = true;
} else if (d.match('(www.)?twitter\.com')) {
trace("TWITTER MATCH");
// https://twitter.com/#!/twitterapi/statuses/133640144317198338
// https://twitter.com/#!/DeliciousHot/status/23189589820702720
if (d.match("status\/")) {
twitter_id = d.split("status\/")[1];
} else if (d.match("statuses\/")) {
twitter_id = d.split("statuses\/")[1];
} else {
twitter_id = "";
}
media.type = "twitter";
media.id = twitter_id;
success = true;
} else if (d.match("maps.google.com")) {
//maps.google.com
media.type = "google-map";
media.id = d.split(/src=['|"][^'|"]*?['|"]/gi);
trace("google map " + media.id);
success = true;
} else if (d.match("flickr.com/photos")) {
media.type = "flickr";
//media.id = d.split('/photos/[^/]+/([0-9]+)/gi');
media.id = d.split("photos\/")[1].split("/")[1];
//media.id = media.id.split("/")[1];
trace("FLICKR " + media.id);
success = true;
} else if (d.match(/jpg|png|gif/i)) {
media.type = "image";
media.id = d;
success = true;
}
if (success) {
return media;
} else {
trace("No valid media id detected");
trace(d);
}
return false;
}
/* MEDIA
================================================== */

6
source/less/gfx.less
Unescape View File

@ -37,6 +37,12 @@
background-position: 0 -1111px; width: 24px; height: 24px;
}
.icon-website() {
background-image: url(timeline.png);
background-repeat:no-repeat;
background-position: 0 -1037px; width: 24px; height: 24px;
}
.icon-soundcloud() {
background-image: url(timeline.png);
background-repeat:no-repeat;

5
source/less/slider.less
Unescape View File

@ -60,7 +60,7 @@
//position: relative;
.nav-previous, .nav-next {
position:fixed;
position:absolute;
top: 0px;
//background-color: #f5f5f5; // TEMP
width: @feature-nav-width;
@ -325,6 +325,9 @@
}
}
}
}

14
source/less/structure-feature.less
Unescape View File

@ -30,6 +30,20 @@
}
/* BLOCKQUOTES
================================================== */
blockquote {
font-size: 28px;
text-align:left;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color:@white;
font-family: @font-serif;
color:@color-feature-title;
}
}

2
source/less/structure-navigation.less
Unescape View File

@ -12,6 +12,7 @@
height:@navigation-height;
//overflow: hidden;
border-top: 1px solid @color-line;
position: relative;
//.background-time-tic();
.toolbar {
@ -91,6 +92,7 @@
height: @navigation-content-height;
width:100%;
background-color:@color-background-dark;
//background: @color-background-dark url(timeline-texture.png) repeat;
.timenav-interval-background {
position:absolute;

68
source/less/structure.less
Unescape View File

@ -81,6 +81,8 @@ html, body {
iframe {
//margin-bottom:5px;
}
img {
max-height:100%;
//border: 1px solid @color-line;
@ -97,13 +99,14 @@ html, body {
.twitter {
text-align:left;
//max-width:500px;
font-family: @font-sansserif;
background-color:@white;
margin-left: auto;
margin-right: auto;
clear:both;
blockquote {
font-size: @base-font;
line-height: @base-line;
font-family: @font-sansserif;
color:@color-feature-description;
p {
font-size: 28px;
@ -113,10 +116,69 @@ html, body {
background-color:@white;
font-family: @font-serif;
color:@color-feature-title;
//margin-left:10px;
}
.quote-mark {
color:@color-dark-third;
}
}
.created-at {
.icon-twitter();
width:24px;
height:24px;
overflow:hidden;
margin-left:@base-space;
display:inline-block;
float:right;
.opacity(25);
}
.created-at:hover {
.opacity(100);
}
.vcard {
float:right;
//position: relative;
a {
color: @color-dark-second;
}
a:hover {
text-decoration: none;
.fn {
text-decoration: underline;
}
}
.fn, .nickname {
padding-left: 42px;
}
.fn {
display:block;
//display:inline;
font-weight: bold;
}
.nickname {
margin-top:3px;
display:block;
color: @color-dark-third;
}
.avatar {
float:left;
//position: absolute;
display: block;
width: 32px;
height: 32px;
img {
//border: 0px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
}
}
}
.layout-media {
@ -149,6 +211,10 @@ html, body {
.icon-map();
//.icon-map-pin();
}
.thumbnail.website {
.icon-website();
}
.zFront {
z-index:500;
}

1
source/less/type.less
Unescape View File

@ -159,6 +159,7 @@
line-height: 10px;
display: block;
margin: 0 auto;
clear:both;
}
.caption {
text-align:left;

6
timeline-min.js vendored
View File

File diff suppressed because one or more lines are too long

15
timeline.css
Unescape View File

@ -25,7 +25,16 @@ html,body{height:100%;padding:0px;margin:0px;}
#timeline img{max-height:100%;border:1px solid #999999;}
#timeline a{color:#0088cc;text-decoration:none;}
#timeline a:hover{color:#005580;text-decoration:underline;}
#timeline .twitter{text-align:left;background-color:#ffffff;margin-left:auto;margin-right:auto;}#timeline .twitter blockquote{font-size:14px;line-height:20px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#666666;}#timeline .twitter blockquote p{font-size:28px;line-height:36px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;font-family:"Georgia",Times New Roman,Times,serif;color:#000000;}
#timeline .twitter{text-align:left;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background-color:#ffffff;margin-left:auto;margin-right:auto;clear:both;}#timeline .twitter blockquote{font-size:14px;line-height:20px;color:#666666;}#timeline .twitter blockquote p{font-size:28px;line-height:36px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;font-family:"Georgia",Times New Roman,Times,serif;color:#000000;}
#timeline .twitter blockquote .quote-mark{color:#666666;}
#timeline .twitter .created-at{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -889px;width:24px;height:24px;width:24px;height:24px;overflow:hidden;margin-left:15px;display:inline-block;float:right;filter:alpha(opacity=25);-khtml-opacity:0.25;-moz-opacity:0.25;opacity:0.25;}
#timeline .twitter .created-at:hover{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
#timeline .twitter .vcard{float:right;}#timeline .twitter .vcard a{color:#333333;}
#timeline .twitter .vcard a:hover{text-decoration:none;}#timeline .twitter .vcard a:hover .fn{text-decoration:underline;}
#timeline .twitter .vcard .fn,#timeline .twitter .vcard .nickname{padding-left:42px;}
#timeline .twitter .vcard .fn{display:block;font-weight:bold;}
#timeline .twitter .vcard .nickname{margin-top:3px;display:block;color:#666666;}
#timeline .twitter .vcard .avatar{float:left;display:block;width:32px;height:32px;}#timeline .twitter .vcard .avatar img{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#timeline .layout-media .twitter{max-width:70%;}
#timeline .thumbnail{width:24px;height:24px;overflow:hidden;float:left;margin-right:5px;border:1px solid #cccccc;}
#timeline .thumbnail.twitter{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -889px;width:24px;height:24px;}
@ -33,9 +42,11 @@ html,body{height:100%;padding:0px;margin:0px;}
#timeline .thumbnail.youtube{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1111px;width:24px;height:24px;}
#timeline .thumbnail.soundcloud{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -659px;width:24px;height:24px;}
#timeline .thumbnail.map{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -514px;width:26px;height:21px;}
#timeline .thumbnail.website{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1037px;width:24px;height:24px;}
#timeline .zFront{z-index:500;}
#timeline{}#timeline .feature{width:100%;}#timeline .feature .slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}#timeline .feature .slider h2.date{line-height:24px;}
#timeline .feature .slider .date a,#timeline .feature .slider .title a{color:#999999;}
#timeline .feature .slider blockquote{font-size:28px;text-align:left;line-height:36px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;font-family:"Georgia",Times New Roman,Times,serif;color:#000000;}
.slider{width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask{text-align:center;width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask .slider-container{position:absolute;top:0px;left:-2160px;width:100%;height:100%;text-align:center;display:block;background-color:#ffffff;}.slider .slider-container-mask .slider-container .slider-item-container{display:table-cell;vertical-align:middle;}
.slider img,.slider embed,.slider object,.slider video,.slider iframe{max-width:100%;}
.slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;position:absolute;}
@ -108,5 +119,5 @@ html,body{height:100%;padding:0px;margin:0px;}
#timeline strong{font-weight:bold;}
#timeline Q{quotes:'„' '“';font-style:italic;}
#timeline .credit,#timeline .caption{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
#timeline .credit{color:#999999;text-align:right;font-size:10px;line-height:10px;display:block;margin:0 auto;}
#timeline .credit{color:#999999;text-align:right;font-size:10px;line-height:10px;display:block;margin:0 auto;clear:both;}
#timeline .caption{text-align:left;margin-top:5px;color:#666666;font-size:11px;line-height:14px;}

BIN
timeline.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Write Preview
Loading…
Cancel
Save