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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 137
      source/js/timeline-embed.js
  2. 3
      source/less/structure.less
  3. 137
      timeline-embed.js
  4. 13
      timeline-min.js
  5. 2
      timeline.css

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

@ -24,29 +24,72 @@
/* 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 cssReady = false;
var isReady = false;
var preload_checks = 0;
var timeout;
var timeline;
/* Add Timeline 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');
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);
LazyLoad.css('http://veritetimeline.appspot.com/latest/timeline.css', cssComplete);
/* Check for jQuery
================================================== */
try {
var jqueryLoaded=jQuery;
jqueryLoaded=true;
@ -54,7 +97,8 @@
var jqueryLoaded=false;
}
//var head= document.getElementsByTagName('head')[0];
/* Load jQuery if it doesn't exist
================================================== */
if (!jqueryLoaded) {
LazyLoad.js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', onJQueryLoaded);
} else {
@ -63,7 +107,7 @@
function onJQueryLoaded() {
LazyLoad.js('http://veritetimeline.appspot.com/latest/timeline-min.js', onJSLoaded);
LazyLoad.js(embed_config.js, onJSLoaded);
}
function onJSLoaded() {
@ -76,65 +120,50 @@
checkLoad();
}
/* Check to see if everything is loaded.
================================================== */
function checkLoad() {
if (preload_checks > 40) {
return;
alert("Error Loading Files")
alert("Error Loading Files");
} else {
preload_checks++;
if (jsReady && cssReady) {
var timeline = new VMM.Timeline();
timeline.init("taylor/data.json");
if (!isReady) {
isReady = true;
timeline = new VMM.Timeline();
timeline.init(embed_config.source);
}
} else {
setTimeout('checkLoad();', 250);
//alert("run timeout");
timeout = setTimeout('checkAgain();', 250);
}
}
}
this.checkAgain = function() {
checkLoad();
}
/*
var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var tjs = document.createElement('script');
tjs.type = 'text/javascript';
tjs.async = true;
tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
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)
/*
Thinking of ditching Lazy loader after some more testing.
*/
/*
var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var tjs = document.createElement('script');
tjs.type = 'text/javascript';
tjs.async = true;
tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
document.getElementsByTagName('head')[0].appendChild(tjs);
*/

3
source/less/structure.less
Unescape View File

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

137
timeline-embed.js
Unescape View File

@ -421,29 +421,72 @@ LazyLoad = (function (doc) {
/* 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 cssReady = false;
var isReady = false;
var preload_checks = 0;
var timeout;
var timeline;
/* Add Timeline 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');
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);
LazyLoad.css('http://veritetimeline.appspot.com/latest/timeline.css', cssComplete);
/* Check for jQuery
================================================== */
try {
var jqueryLoaded=jQuery;
jqueryLoaded=true;
@ -451,7 +494,8 @@ LazyLoad = (function (doc) {
var jqueryLoaded=false;
}
//var head= document.getElementsByTagName('head')[0];
/* Load jQuery if it doesn't exist
================================================== */
if (!jqueryLoaded) {
LazyLoad.js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', onJQueryLoaded);
} else {
@ -460,7 +504,7 @@ LazyLoad = (function (doc) {
function onJQueryLoaded() {
LazyLoad.js('http://veritetimeline.appspot.com/latest/timeline-min.js', onJSLoaded);
LazyLoad.js(embed_config.js, onJSLoaded);
}
function onJSLoaded() {
@ -473,65 +517,50 @@ LazyLoad = (function (doc) {
checkLoad();
}
/* Check to see if everything is loaded.
================================================== */
function checkLoad() {
if (preload_checks > 40) {
return;
alert("Error Loading Files")
alert("Error Loading Files");
} else {
preload_checks++;
if (jsReady && cssReady) {
var timeline = new VMM.Timeline();
timeline.init("taylor/data.json");
if (!isReady) {
isReady = true;
timeline = new VMM.Timeline();
timeline.init(embed_config.source);
}
} else {
setTimeout('checkLoad();', 250);
//alert("run timeout");
timeout = setTimeout('checkAgain();', 250);
}
}
}
this.checkAgain = function() {
checkLoad();
}
/*
var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var tjs = document.createElement('script');
tjs.type = 'text/javascript';
tjs.async = true;
tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
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)
/*
Thinking of ditching Lazy loader after some more testing.
*/
/*
var stylesheet = document.createElement('link');
stylesheet.href = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var tjs = document.createElement('script');
tjs.type = 'text/javascript';
tjs.async = true;
tjs.url = '/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css';
document.getElementsByTagName('head')[0].appendChild(tjs);
*/

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 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{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 img,#timeline embed,#timeline object,#timeline video,#timeline iframe{max-width:100%;}
#timeline img{max-height:100%;border:1px solid #999999;}

Write Preview
Loading…
Cancel
Save