From 788a759b6abfc82e92665340c4abc449a1508715 Mon Sep 17 00:00:00 2001 From: Zach Wise Date: Wed, 25 Jul 2012 16:29:39 -0500 Subject: [PATCH] Now uses StoryJS embed code and method --- compiled/css/themes/dark.css | 6 +- compiled/css/timeline.css | 6 +- compiled/js/storyjs-embed-cdn.js | 881 +++++++++++++++++++++++++ compiled/js/storyjs-embed-generator.js | 5 + compiled/js/storyjs-embed.js | 802 ++++++++++++++++++++++ compiled/js/timeline-embed.js | 36 - source/js/Core | 2 +- source/less/Core | 2 +- 8 files changed, 1696 insertions(+), 44 deletions(-) create mode 100644 compiled/js/storyjs-embed-cdn.js create mode 100644 compiled/js/storyjs-embed-generator.js create mode 100644 compiled/js/storyjs-embed.js delete mode 100644 compiled/js/timeline-embed.js diff --git a/compiled/css/themes/dark.css b/compiled/css/themes/dark.css index b810640..4f15728 100644 --- a/compiled/css/themes/dark.css +++ b/compiled/css/themes/dark.css @@ -130,6 +130,9 @@ .vco-slider .slider-item .content-container.layout-media{width:100%;}.vco-slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.vco-slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;} .vco-slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.vco-slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;line-height:0px;padding:0px;} .vco-slider .slider-item .content-container.layout-media .twitter,.vco-slider .slider-item .content-container.layout-media .wikipedia,.vco-slider .slider-item .content-container.layout-media .googleplus{max-width:70%;} +.storyjs-embed{background-color:#1a1a1a;margin-bottom:20px;border:1px solid #333333;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);} +.storyjs-embed.full-embed{overflow:hidden;border:0 !important;padding:0 !important;margin:0 !important;clear:both;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;} +.storyjs-embed.sized-embed{overflow:hidden;border:1px solid #333333;padding-top:7px;padding-bottom:7px;margin:0 !important;clear:both;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;} .vco-storyjs{width:100%;height:100%;padding:0px;margin:0px;background-color:#1a1a1a;position:absolute;z-index:100;clear:both;overflow:hidden;}.vco-storyjs .vmm-clear:before,.vco-storyjs .vmm-clear:after{content:"";display:table;} .vco-storyjs .vmm-clear:after{clear:both;} .vco-storyjs .vmm-clear{*zoom:1;} @@ -174,9 +177,6 @@ .vco-storyjs .storify .thumbnail-inline{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-184px -96px;} .vco-storyjs .googleplus .thumbnail-inline{background-image:url(themes/timeline-dark.png?v3.4);background-repeat:no-repeat;background-position:-208px -96px;} .vco-storyjs .zFront{z-index:204;} -#timeline-embed{background-color:#1a1a1a;margin-bottom:20px;border:1px solid #333333;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);} -#timeline-embed.full-embed{overflow:hidden;border:0 !important;padding:0 !important;margin:0 !important;clear:both;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;} -#timeline-embed.sized-embed{overflow:hidden;border:1px solid #333333;padding-top:7px;padding-bottom:7px;margin:0 !important;clear:both;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;} @media only screen and (max-width:480px),only screen and (max-device-width:480px){}@media (max-width:600px){.vco-slider .slider-item .content .content-container{display:block;}.vco-slider .slider-item .content .content-container .text{width:100%;max-width:100%;min-width:120px;display:block;}.vco-slider .slider-item .content .content-container .text .container{display:block;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;} .vco-slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:none;}.vco-slider .slider-item .content .content-container .media .media-wrapper{margin-left:0px;margin-right:0px;width:100%;display:block;} .vco-slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container{border:none;}}.vco-notouch .vco-navigation .toolbar .zoom-in:hover,.vco-notouch .vco-navigation .toolbar .zoom-out:hover,.vco-notouch .vco-navigation .toolbar .back-home:hover{color:#0bd4e3;cursor:pointer;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} .vco-notouch .vco-navigation .timenav .content .marker.active:hover{cursor:default;}.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag .flag-content h3,.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag-small .flag-content h3{color:#0bd4e3;} .vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag .flag-content h4,.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag-small .flag-content h4{color:#999999;} diff --git a/compiled/css/timeline.css b/compiled/css/timeline.css index 556d280..c0e2292 100644 --- a/compiled/css/timeline.css +++ b/compiled/css/timeline.css @@ -130,6 +130,9 @@ .vco-slider .slider-item .content-container.layout-media{width:100%;}.vco-slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.vco-slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;} .vco-slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.vco-slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;line-height:0px;padding:0px;} .vco-slider .slider-item .content-container.layout-media .twitter,.vco-slider .slider-item .content-container.layout-media .wikipedia,.vco-slider .slider-item .content-container.layout-media .googleplus{max-width:70%;} +.storyjs-embed{background-color:#ffffff;margin-bottom:20px;border:1px solid #cccccc;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);} +.storyjs-embed.full-embed{overflow:hidden;border:0 !important;padding:0 !important;margin:0 !important;clear:both;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;} +.storyjs-embed.sized-embed{overflow:hidden;border:1px solid #cccccc;padding-top:7px;padding-bottom:7px;margin:0 !important;clear:both;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;} .vco-storyjs{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;z-index:100;clear:both;overflow:hidden;}.vco-storyjs .vmm-clear:before,.vco-storyjs .vmm-clear:after{content:"";display:table;} .vco-storyjs .vmm-clear:after{clear:both;} .vco-storyjs .vmm-clear{*zoom:1;} @@ -174,9 +177,6 @@ .vco-storyjs .storify .thumbnail-inline{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-184px -96px;} .vco-storyjs .googleplus .thumbnail-inline{background-image:url(timeline.png?v3.4);background-repeat:no-repeat;background-position:-208px -96px;} .vco-storyjs .zFront{z-index:204;} -#timeline-embed{background-color:#ffffff;margin-bottom:20px;border:1px solid #cccccc;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);} -#timeline-embed.full-embed{overflow:hidden;border:0 !important;padding:0 !important;margin:0 !important;clear:both;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;} -#timeline-embed.sized-embed{overflow:hidden;border:1px solid #cccccc;padding-top:7px;padding-bottom:7px;margin:0 !important;clear:both;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;} @media only screen and (max-width:480px),only screen and (max-device-width:480px){}@media (max-width:600px){.vco-slider .slider-item .content .content-container{display:block;}.vco-slider .slider-item .content .content-container .text{width:100%;max-width:100%;min-width:120px;display:block;}.vco-slider .slider-item .content .content-container .text .container{display:block;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;} .vco-slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:none;}.vco-slider .slider-item .content .content-container .media .media-wrapper{margin-left:0px;margin-right:0px;width:100%;display:block;} .vco-slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container{border:none;}}.vco-notouch .vco-navigation .toolbar .zoom-in:hover,.vco-notouch .vco-navigation .toolbar .zoom-out:hover,.vco-notouch .vco-navigation .toolbar .back-home:hover{color:#0088cc;cursor:pointer;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} .vco-notouch .vco-navigation .timenav .content .marker.active:hover{cursor:default;}.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag .flag-content h3,.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag-small .flag-content h3{color:#0088cc;} .vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag .flag-content h4,.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag-small .flag-content h4{color:#999999;} diff --git a/compiled/js/storyjs-embed-cdn.js b/compiled/js/storyjs-embed-cdn.js new file mode 100644 index 0000000..d17c5a6 --- /dev/null +++ b/compiled/js/storyjs-embed-cdn.js @@ -0,0 +1,881 @@ +/* + VéritéCo Timeline CDN 0.8 + Designed and built by Zach Wise digitalartwork.net +*/ + +/* CodeKit Import + http://incident57.com/codekit/ +================================================== */ +// @codekit-append "Embed.js"; + +/* REPLACE THIS WITH YOUR GOOGLE ANALYTICS ACCOUNT +================================================== */ +var embed_analytics = "UA-537357-20"; + +/* REPLACE THIS WITH YOUR BASE PATH FOR TIMELINE +================================================== */ +//var embed_path = "http://embed.verite.co/timeline/"; + +/* LOAD TIMER +================================================== */ +var load_time_start = new Date().getTime(), the_load_time = 0; + +/* GOOGLE ANALYTICS +================================================== */ +var _gaq = _gaq || []; + + +(function() { + var ga = document.createElement('script'), s = document.getElementsByTagName('script')[0]; + ga.type = 'text/javascript'; + ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + s.parentNode.insertBefore(ga, s); + + _gaq.push(['_setAccount', embed_analytics]); + _gaq.push(['_trackPageview']); + +})(); + +/* TIMELINE CDN SPECIFIC +================================================== */ +var getUrlVars = function() { + var varobj = {}, url_vars = [], uv ; + + //url_vars = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + url_vars = window.location.href.slice(window.location.href.indexOf('?') + 1); + + if (url_vars.match('#')) { + url_vars = url_vars.split('#')[0]; + } + url_vars = url_vars.split('&'); + + for(var i = 0; i < url_vars.length; i++) { + uv = url_vars[i].split('='); + varobj[uv[0]] = uv[1]; + } + + return varobj; +}; + +var onHeadline = function(e, headline) { + var the_page_title = "/" + headline, + the_page_url = location.href; + + document.title = headline; + the_load_time = Math.floor((new Date().getTime() - load_time_start)/100)/10; + _gaq.push(['_trackEvent', 'Timeline', headline, the_page_url, the_load_time]); + +}; + +var url_config = getUrlVars(); + + + + +/*********************************************** + Begin LazyLoad.js +***********************************************/ + +/*jslint browser: true, eqeqeq: true, bitwise: true, newcap: true, immed: true, regexp: false */ + +/** +LazyLoad makes it easy and painless to lazily load one or more external +JavaScript or CSS files on demand either during or after the rendering of a web +page. + +Supported browsers include Firefox 2+, IE6+, Safari 3+ (including Mobile +Safari), Google Chrome, and Opera 9+. Other browsers may or may not work and +are not officially supported. + +Visit https://github.com/rgrove/lazyload/ for more info. + +Copyright (c) 2011 Ryan Grove +All rights reserved. + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the 'Software'), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +@module lazyload +@class LazyLoad +@static +@version 2.0.3 (git) +*/ + +LazyLoad = (function (doc) { + // -- Private Variables ------------------------------------------------------ + + // User agent and feature test information. + var env, + + // Reference to the element (populated lazily). + head, + + // Requests currently in progress, if any. + pending = {}, + + // Number of times we've polled to check whether a pending stylesheet has + // finished loading. If this gets too high, we're probably stalled. + pollCount = 0, + + // Queued requests. + queue = {css: [], js: []}, + + // Reference to the browser's list of stylesheets. + styleSheets = doc.styleSheets; + + // -- Private Methods -------------------------------------------------------- + + /** + Creates and returns an HTML element with the specified name and attributes. + + @method createNode + @param {String} name element name + @param {Object} attrs name/value mapping of element attributes + @return {HTMLElement} + @private + */ + function createNode(name, attrs) { + var node = doc.createElement(name), attr; + + for (attr in attrs) { + if (attrs.hasOwnProperty(attr)) { + node.setAttribute(attr, attrs[attr]); + } + } + + return node; + } + + /** + Called when the current pending resource of the specified type has finished + loading. Executes the associated callback (if any) and loads the next + resource in the queue. + + @method finish + @param {String} type resource type ('css' or 'js') + @private + */ + function finish(type) { + var p = pending[type], + callback, + urls; + + if (p) { + callback = p.callback; + urls = p.urls; + + urls.shift(); + pollCount = 0; + + // If this is the last of the pending URLs, execute the callback and + // start the next request in the queue (if any). + if (!urls.length) { + callback && callback.call(p.context, p.obj); + pending[type] = null; + queue[type].length && load(type); + } + } + } + + /** + Populates the env variable with user agent and feature test + information. + + @method getEnv + @private + */ + function getEnv() { + var ua = navigator.userAgent; + + env = { + // True if this browser supports disabling async mode on dynamically + // created script nodes. See + // http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order + async: doc.createElement('script').async === true + }; + + (env.webkit = /AppleWebKit\//.test(ua)) + || (env.ie = /MSIE/.test(ua)) + || (env.opera = /Opera/.test(ua)) + || (env.gecko = /Gecko\//.test(ua)) + || (env.unknown = true); + } + + /** + Loads the specified resources, or the next resource of the specified type + in the queue if no resources are specified. If a resource of the specified + type is already being loaded, the new request will be queued until the + first request has been finished. + + When an array of resource URLs is specified, those URLs will be loaded in + parallel if it is possible to do so while preserving execution order. All + browsers support parallel loading of CSS, but only Firefox and Opera + support parallel loading of scripts. In other browsers, scripts will be + queued and loaded one at a time to ensure correct execution order. + + @method load + @param {String} type resource type ('css' or 'js') + @param {String|Array} urls (optional) URL or array of URLs to load + @param {Function} callback (optional) callback function to execute when the + resource is loaded + @param {Object} obj (optional) object to pass to the callback function + @param {Object} context (optional) if provided, the callback function will + be executed in this object's context + @private + */ + function load(type, urls, callback, obj, context) { + var _finish = function () { finish(type); }, + isCSS = type === 'css', + nodes = [], + i, len, node, p, pendingUrls, url; + + env || getEnv(); + + if (urls) { + // If urls is a string, wrap it in an array. Otherwise assume it's an + // array and create a copy of it so modifications won't be made to the + // original. + urls = typeof urls === 'string' ? [urls] : urls.concat(); + + // Create a request object for each URL. If multiple URLs are specified, + // the callback will only be executed after all URLs have been loaded. + // + // Sadly, Firefox and Opera are the only browsers capable of loading + // scripts in parallel while preserving execution order. In all other + // browsers, scripts must be loaded sequentially. + // + // All browsers respect CSS specificity based on the order of the link + // elements in the DOM, regardless of the order in which the stylesheets + // are actually downloaded. + if (isCSS || env.async || env.gecko || env.opera) { + // Load in parallel. + queue[type].push({ + urls : urls, + callback: callback, + obj : obj, + context : context + }); + } else { + // Load sequentially. + for (i = 0, len = urls.length; i < len; ++i) { + queue[type].push({ + urls : [urls[i]], + callback: i === len - 1 ? callback : null, // callback is only added to the last URL + obj : obj, + context : context + }); + } + } + } + + // If a previous load request of this type is currently in progress, we'll + // wait our turn. Otherwise, grab the next item in the queue. + if (pending[type] || !(p = pending[type] = queue[type].shift())) { + return; + } + + head || (head = doc.head || doc.getElementsByTagName('head')[0]); + pendingUrls = p.urls; + + for (i = 0, len = pendingUrls.length; i < len; ++i) { + url = pendingUrls[i]; + + if (isCSS) { + node = env.gecko ? createNode('style') : createNode('link', { + href: url, + rel : 'stylesheet' + }); + } else { + node = createNode('script', {src: url}); + node.async = false; + } + + node.className = 'lazyload'; + node.setAttribute('charset', 'utf-8'); + + if (env.ie && !isCSS) { + node.onreadystatechange = function () { + if (/loaded|complete/.test(node.readyState)) { + node.onreadystatechange = null; + _finish(); + } + }; + } else if (isCSS && (env.gecko || env.webkit)) { + // Gecko and WebKit don't support the onload event on link nodes. + if (env.webkit) { + // In WebKit, we can poll for changes to document.styleSheets to + // figure out when stylesheets have loaded. + p.urls[i] = node.href; // resolve relative URLs (or polling won't work) + pollWebKit(); + } else { + // In Gecko, we can import the requested URL into a