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

Finish up a working asynchronous embed 

It works, just need to test IE etc.
pull/20/merge
Zach Wise 13 years ago
parent
e06e1f52d1
commit
9ac4b1d1a8
5 changed files with 186 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 121
      source/js/timeline-embed.js
  2. 3
      source/less/structure.less
  3. 121
      timeline-embed.js
  4. 13
      timeline-min.js
  5. 2
      timeline.css

121
source/js/timeline-embed.js
Unescape View File

@ -24,29 +24,72 @@
/* TIMELINE CDN LOADER /* TIMELINE CDN LOADER
Add container div so that user can set width and height ================================================== */
/* Embed code with config
================================================== */ ================================================== */
// <div id="timeline-embed"></div><script src="load-timeline.js"></script> /*
<!-- Begin Embed Code -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var config = {
width: 900,
height: 700,
source: 'https://docs.google.com/a/digitalartwork.net/spreadsheet/ccc?hl=en_US&key=0Agl_Dv6iEbDadGRwZjJSRTR4RHJpanE2U3lkb0lyYUE&rm=full#gid=0',
css: '../timeline.css',
js: '../timeline.js'
}
</script>
<script type="text/javascript" src="../timeline-embed.js"></script>
<!-- End Embed Code -->
*/
(function() {
(function(embed_loc, embed_doc, embed_window) { /* CONFIG Default
================================================== */
var embed_config = {
width: 800,
height: 600,
source: 'taylor/data.json',
css: 'http://veritetimeline.appspot.com/latest/timeline.css',
js: 'http://veritetimeline.appspot.com/latest/timeline-min.js'
}
if (typeof config == 'object') {
var x;
for (x in config) {
if (Object.prototype.hasOwnProperty.call(config, x)) {
embed_config[x] = config[x];
}
}
}
/* VARS
================================================== */
var jsReady = false; var jsReady = false;
var cssReady = false; var cssReady = false;
var isReady = false;
var preload_checks = 0; var preload_checks = 0;
var timeout;
var timeline;
/* Add Timeline Div /* Add Timeline Div
================================================== */ ================================================== */
var t = document.createElement('div'); var t = document.createElement('div');
document.getElementById("timeline-embed").appendChild(t); var te = document.getElementById("timeline-embed");
te.appendChild(t);
t.setAttribute("id", 'timeline'); t.setAttribute("id", 'timeline');
te.style.width = embed_config.width + 'px';
te.style.height = embed_config.height + 'px';
t.style.position = 'relative';
/* Load CSS
================================================== */
LazyLoad.css(embed_config.css, cssComplete);
/* Check for jQuery
LazyLoad.css('http://veritetimeline.appspot.com/latest/timeline.css', cssComplete); ================================================== */
try { try {
var jqueryLoaded=jQuery; var jqueryLoaded=jQuery;
jqueryLoaded=true; jqueryLoaded=true;
@ -54,7 +97,8 @@
var jqueryLoaded=false; var jqueryLoaded=false;
} }
//var head= document.getElementsByTagName('head')[0]; /* Load jQuery if it doesn't exist
================================================== */
if (!jqueryLoaded) { if (!jqueryLoaded) {
LazyLoad.js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', onJQueryLoaded); LazyLoad.js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', onJQueryLoaded);
} else { } else {
@ -63,7 +107,7 @@
function onJQueryLoaded() { function onJQueryLoaded() {
LazyLoad.js('http://veritetimeline.appspot.com/latest/timeline-min.js', onJSLoaded); LazyLoad.js(embed_config.js, onJSLoaded);
} }
function onJSLoaded() { function onJSLoaded() {
@ -76,23 +120,40 @@
checkLoad(); checkLoad();
} }
/* Check to see if everything is loaded.
================================================== */
function checkLoad() { function checkLoad() {
if (preload_checks > 40) { if (preload_checks > 40) {
return; return;
alert("Error Loading Files") alert("Error Loading Files");
} else { } else {
preload_checks++; preload_checks++;
if (jsReady && cssReady) { if (jsReady && cssReady) {
var timeline = new VMM.Timeline(); if (!isReady) {
timeline.init("taylor/data.json"); isReady = true;
timeline = new VMM.Timeline();
timeline.init(embed_config.source);
}
} else { } else {
setTimeout('checkLoad();', 250); //alert("run timeout");
timeout = setTimeout('checkAgain();', 250);
} }
} }
} }
this.checkAgain = function() {
checkLoad();
}
})();
/*
Thinking of ditching Lazy loader after some more testing.
*/
/* /*
var stylesheet = document.createElement('link'); var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css'; stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
@ -106,35 +167,3 @@
tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css'; tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
document.getElementsByTagName('head')[0].appendChild(tjs); document.getElementsByTagName('head')[0].appendChild(tjs);
*/ */
}) (this, document, window);
/*
document.getElementById('myText');
function(embed_loc, embed_doc, embed_window) {
function e(embed_loc, embed_doc) {
var c,
d = [],
e,
g;
try {
if (document.querySelectorAll) d = document.querySelectorAll(embed_loc + "." + embed_doc);
else if (document.getElementsByClassName) {
c = document.getElementsByClassName(embed_doc);
for (e = 0; g = c[e]; e++) g.tagName.toLowerCase() == embed_loc && d.push(g)
} else {
c = document.getElementsByTagName(a);
var h = RegExp("\\b" + embed_doc + "\\b");
f(c,
function(embed_loc, embed_doc) {
var c = embed_loc.className || embed_loc.getAttribute("class");
c && c.match(h) && d.push(embed_loc)
})
}
} catch(i) {}
return d
}
} (this, document, window)
*/

3
source/less/structure.less
Unescape View File

@ -32,6 +32,9 @@
background-color:@color-background; background-color:@color-background;
position: absolute; position: absolute;
//border: 1px solid @color-line; //border: 1px solid @color-line;
z-index:100;
clear:both;
overflow:hidden; overflow:hidden;

121
timeline-embed.js
Unescape View File

@ -421,29 +421,72 @@ LazyLoad = (function (doc) {
/* TIMELINE CDN LOADER /* TIMELINE CDN LOADER
Add container div so that user can set width and height ================================================== */
/* Embed code with config
================================================== */ ================================================== */
// <div id="timeline-embed"></div><script src="load-timeline.js"></script> /*
<!-- Begin Embed Code -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var config = {
width: 900,
height: 700,
source: 'https://docs.google.com/a/digitalartwork.net/spreadsheet/ccc?hl=en_US&key=0Agl_Dv6iEbDadGRwZjJSRTR4RHJpanE2U3lkb0lyYUE&rm=full#gid=0',
css: '../timeline.css',
js: '../timeline.js'
}
</script>
<script type="text/javascript" src="../timeline-embed.js"></script>
<!-- End Embed Code -->
*/
(function(embed_loc, embed_doc, embed_window) { (function() {
/* CONFIG Default
================================================== */
var embed_config = {
width: 800,
height: 600,
source: 'taylor/data.json',
css: 'http://veritetimeline.appspot.com/latest/timeline.css',
js: 'http://veritetimeline.appspot.com/latest/timeline-min.js'
}
if (typeof config == 'object') {
var x;
for (x in config) {
if (Object.prototype.hasOwnProperty.call(config, x)) {
embed_config[x] = config[x];
}
}
}
/* VARS
================================================== */
var jsReady = false; var jsReady = false;
var cssReady = false; var cssReady = false;
var isReady = false;
var preload_checks = 0; var preload_checks = 0;
var timeout;
var timeline;
/* Add Timeline Div /* Add Timeline Div
================================================== */ ================================================== */
var t = document.createElement('div'); var t = document.createElement('div');
document.getElementById("timeline-embed").appendChild(t); var te = document.getElementById("timeline-embed");
te.appendChild(t);
t.setAttribute("id", 'timeline'); t.setAttribute("id", 'timeline');
te.style.width = embed_config.width + 'px';
te.style.height = embed_config.height + 'px';
t.style.position = 'relative';
/* Load CSS
================================================== */
LazyLoad.css(embed_config.css, cssComplete);
/* Check for jQuery
LazyLoad.css('http://veritetimeline.appspot.com/latest/timeline.css', cssComplete); ================================================== */
try { try {
var jqueryLoaded=jQuery; var jqueryLoaded=jQuery;
jqueryLoaded=true; jqueryLoaded=true;
@ -451,7 +494,8 @@ LazyLoad = (function (doc) {
var jqueryLoaded=false; var jqueryLoaded=false;
} }
//var head= document.getElementsByTagName('head')[0]; /* Load jQuery if it doesn't exist
================================================== */
if (!jqueryLoaded) { if (!jqueryLoaded) {
LazyLoad.js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', onJQueryLoaded); LazyLoad.js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', onJQueryLoaded);
} else { } else {
@ -460,7 +504,7 @@ LazyLoad = (function (doc) {
function onJQueryLoaded() { function onJQueryLoaded() {
LazyLoad.js('http://veritetimeline.appspot.com/latest/timeline-min.js', onJSLoaded); LazyLoad.js(embed_config.js, onJSLoaded);
} }
function onJSLoaded() { function onJSLoaded() {
@ -473,23 +517,40 @@ LazyLoad = (function (doc) {
checkLoad(); checkLoad();
} }
/* Check to see if everything is loaded.
================================================== */
function checkLoad() { function checkLoad() {
if (preload_checks > 40) { if (preload_checks > 40) {
return; return;
alert("Error Loading Files") alert("Error Loading Files");
} else { } else {
preload_checks++; preload_checks++;
if (jsReady && cssReady) { if (jsReady && cssReady) {
var timeline = new VMM.Timeline(); if (!isReady) {
timeline.init("taylor/data.json"); isReady = true;
timeline = new VMM.Timeline();
timeline.init(embed_config.source);
}
} else { } else {
setTimeout('checkLoad();', 250); //alert("run timeout");
timeout = setTimeout('checkAgain();', 250);
} }
} }
} }
this.checkAgain = function() {
checkLoad();
}
})();
/*
Thinking of ditching Lazy loader after some more testing.
*/
/* /*
var stylesheet = document.createElement('link'); var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css'; stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
@ -503,35 +564,3 @@ LazyLoad = (function (doc) {
tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css'; tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
document.getElementsByTagName('head')[0].appendChild(tjs); document.getElementsByTagName('head')[0].appendChild(tjs);
*/ */
}) (this, document, window);
/*
document.getElementById('myText');
function(embed_loc, embed_doc, embed_window) {
function e(embed_loc, embed_doc) {
var c,
d = [],
e,
g;
try {
if (document.querySelectorAll) d = document.querySelectorAll(embed_loc + "." + embed_doc);
else if (document.getElementsByClassName) {
c = document.getElementsByClassName(embed_doc);
for (e = 0; g = c[e]; e++) g.tagName.toLowerCase() == embed_loc && d.push(g)
} else {
c = document.getElementsByTagName(a);
var h = RegExp("\\b" + embed_doc + "\\b");
f(c,
function(embed_loc, embed_doc) {
var c = embed_loc.className || embed_loc.getAttribute("class");
c && c.match(h) && d.push(embed_loc)
})
}
} catch(i) {}
return d
}
} (this, document, window)
*/

13
timeline-min.js vendored
View File

File diff suppressed because one or more lines are too long

2
timeline.css
Unescape View File

@ -19,7 +19,7 @@
#timeline input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} #timeline input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
#timeline textarea{overflow:auto;vertical-align:top;} #timeline textarea{overflow:auto;vertical-align:top;}
#timeline-embed{background-color:#FFF;margin-bottom:20px;border:1px solid #CCC;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:1px 2px 6px rgba(0, 0, 0, 0.25);} #timeline-embed{background-color:#FFF;margin-bottom:20px;border:1px solid #CCC;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:1px 2px 6px rgba(0, 0, 0, 0.25);}
#timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;overflow:hidden;}#timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:2000;width:100%;height:100%;background-color:#e9e9e9;border:1px solid #cccccc;}#timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:28px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;text-transform:uppercase;line-height:36px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;} #timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;z-index:100;clear:both;overflow:hidden;}#timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:2000;width:100%;height:100%;background-color:#e9e9e9;border:1px solid #cccccc;}#timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:28px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;text-transform:uppercase;line-height:36px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;}
#timeline .container.main{position:absolute;top:0px: left:0px;padding-bottom:3px;width:auto;height:auto;margin:0px;clear:both;} #timeline .container.main{position:absolute;top:0px: left:0px;padding-bottom:3px;width:auto;height:auto;margin:0px;clear:both;}
#timeline img,#timeline embed,#timeline object,#timeline video,#timeline iframe{max-width:100%;} #timeline img,#timeline embed,#timeline object,#timeline video,#timeline iframe{max-width:100%;}
#timeline img{max-height:100%;border:1px solid #999999;} #timeline img{max-height:100%;border:1px solid #999999;}

Write Preview
Loading…
Cancel
Save