Browse Source

Optimized responsive layout for slides

pull/127/head
Zach Wise 13 years ago
parent
commit
dd0f5725d1
  1. 4
      compiled/css/themes/dark.css
  2. 6
      compiled/css/timeline.css
  3. 48
      compiled/index.html
  4. 8
      compiled/js/locale/de.js
  5. 8
      compiled/js/locale/en.js
  6. 8
      compiled/js/locale/es.js
  7. 8
      compiled/js/locale/fr.js
  8. 8
      compiled/js/locale/is.js
  9. 8
      compiled/js/locale/it.js
  10. 8
      compiled/js/locale/kr.js
  11. 8
      compiled/js/locale/nl.js
  12. 8
      compiled/js/locale/pt-br.js
  13. 8
      compiled/js/locale/zh-ch.js
  14. 8
      compiled/js/locale/zh-tw.js
  15. 8
      compiled/js/timeline-min.js
  16. 106
      compiled/js/timeline.js
  17. 2
      source/js/VMM.ExternalAPI.js
  18. 6
      source/js/VMM.Library.js
  19. 4
      source/js/VMM.MediaElement.js
  20. 80
      source/js/VMM.Slider.Slide.js
  21. 5
      source/js/VMM.Slider.js
  22. 9
      source/js/VMM.Timeline.js
  23. 22
      source/less/VMM.Slider.less
  24. 6
      source/less/VMM.Timeline.less

4
compiled/css/themes/dark.css

@ -66,6 +66,7 @@
.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-x:hidden;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;} .slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-x:hidden;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;}
.slider .slider-item .content .pad-right .text .container{padding-right:15px;} .slider .slider-item .content .pad-right .text .container{padding-right:15px;}
.slider .slider-item .content .pad-left .text .container{padding-left:30px;} .slider .slider-item .content .pad-left .text .container{padding-left:30px;}
.slider .slider-item .content .pad-left .media.text-media .media-wrapper .media-container{border:none;background-color:#1a1a1a;}
.slider .slider-item .content .content-container{display:table;vertical-align:middle;}.slider .slider-item .content .content-container .text{width:40%;max-width:50%;min-width:120px;display:table-cell;vertical-align:middle;}.slider .slider-item .content .content-container .text .container{display:table-cell;vertical-align:middle;text-align:left;}.slider .slider-item .content .content-container .text .container p{-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;} .slider .slider-item .content .content-container{display:table;vertical-align:middle;}.slider .slider-item .content .content-container .text{width:40%;max-width:50%;min-width:120px;display:table-cell;vertical-align:middle;}.slider .slider-item .content .content-container .text .container{display:table-cell;vertical-align:middle;text-align:left;}.slider .slider-item .content .content-container .text .container p{-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}
.slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:left;}.slider .slider-item .content .content-container .media .media-wrapper{margin-left:auto;margin-right:auto;}.slider .slider-item .content .content-container .media .media-wrapper .media-container{display:inline-block;line-height:0px;padding:0px;max-height:100%;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .media-frame,.slider .slider-item .content .content-container .media .media-wrapper .media-container .media-image img{border:1px solid;border-color:#333333 #999999 #999999 #333333;background:#1a1a1a;} .slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:left;}.slider .slider-item .content .content-container .media .media-wrapper{margin-left:auto;margin-right:auto;}.slider .slider-item .content .content-container .media .media-wrapper .media-container{display:inline-block;line-height:0px;padding:0px;max-height:100%;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .media-frame,.slider .slider-item .content .content-container .media .media-wrapper .media-container .media-image img{border:1px solid;border-color:#333333 #999999 #999999 #333333;background:#1a1a1a;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .soundcloud{border:0;} .slider .slider-item .content .content-container .media .media-wrapper .media-container .soundcloud{border:0;}
@ -96,7 +97,8 @@
.slider .slider-item .content .content-container .media .media-wrapper .credit{color:#999999;text-align:right;display:block;margin:0 auto;margin-top:6px;font-size:10px;line-height:13px;} .slider .slider-item .content .content-container .media .media-wrapper .credit{color:#999999;text-align:right;display:block;margin:0 auto;margin-top:6px;font-size:10px;line-height:13px;}
.slider .slider-item .content .content-container .media .media-wrapper .caption{text-align:left;margin-top:10px;color:#aaaaaa;font-size:11px;line-height:14px;text-rendering:optimizeLegibility;} .slider .slider-item .content .content-container .media .media-wrapper .caption{text-align:left;margin-top:10px;color:#aaaaaa;font-size:11px;line-height:14px;text-rendering:optimizeLegibility;}
.slider .slider-item .content .media.text-media .media-wrapper .media-container{border:none;background-color:#1a1a1a;} .slider .slider-item .content .media.text-media .media-wrapper .media-container{border:none;background-color:#1a1a1a;}
.slider .slider-item .content-container.layout-text-media .text-media{padding-right:15px;border-right:1px solid #e3e3e3;} .slider .slider-item .content-container.layout-text-media .text-media{border-top:1px solid #e3e3e3;}
.slider .slider-item .content-container.layout-text-media.pad-left .text-media{padding-right:15px;border-right:1px solid #e3e3e3;border-top:0px solid #e3e3e3;}
.slider .slider-item .content-container.layout-text{width:100%;}.slider .slider-item .content-container.layout-text .text{width:100%;max-width:100%;}.slider .slider-item .content-container.layout-text .text .container{display:block;vertical-align:middle;text-align:left;padding:0px;width:90%;text-align:left;margin-left:auto;margin-right:auto;} .slider .slider-item .content-container.layout-text{width:100%;}.slider .slider-item .content-container.layout-text .text{width:100%;max-width:100%;}.slider .slider-item .content-container.layout-text .text .container{display:block;vertical-align:middle;text-align:left;padding:0px;width:90%;text-align:left;margin-left:auto;margin-right:auto;}
.slider .slider-item .content-container.layout-media{width:100%;}.slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;} .slider .slider-item .content-container.layout-media{width:100%;}.slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;}
.slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content-container.layout-media .media .media-wrapper{display:block;}.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;line-height:0px;padding:0px;} .slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content-container.layout-media .media .media-wrapper{display:block;}.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;line-height:0px;padding:0px;}

6
compiled/css/timeline.css

@ -66,6 +66,7 @@
.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-x:hidden;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;} .slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;display:table;overflow-x:hidden;overflow-y:auto;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .pad-top .text .container{padding-top:15px;}
.slider .slider-item .content .pad-right .text .container{padding-right:15px;} .slider .slider-item .content .pad-right .text .container{padding-right:15px;}
.slider .slider-item .content .pad-left .text .container{padding-left:30px;} .slider .slider-item .content .pad-left .text .container{padding-left:30px;}
.slider .slider-item .content .pad-left .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;}
.slider .slider-item .content .content-container{display:table;vertical-align:middle;}.slider .slider-item .content .content-container .text{width:40%;max-width:50%;min-width:120px;display:table-cell;vertical-align:middle;}.slider .slider-item .content .content-container .text .container{display:table-cell;vertical-align:middle;text-align:left;}.slider .slider-item .content .content-container .text .container p{-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;} .slider .slider-item .content .content-container{display:table;vertical-align:middle;}.slider .slider-item .content .content-container .text{width:40%;max-width:50%;min-width:120px;display:table-cell;vertical-align:middle;}.slider .slider-item .content .content-container .text .container{display:table-cell;vertical-align:middle;text-align:left;}.slider .slider-item .content .content-container .text .container p{-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}
.slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:left;}.slider .slider-item .content .content-container .media .media-wrapper{margin-left:auto;margin-right:auto;}.slider .slider-item .content .content-container .media .media-wrapper .media-container{display:inline-block;line-height:0px;padding:0px;max-height:100%;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .media-frame,.slider .slider-item .content .content-container .media .media-wrapper .media-container .media-image img{border:1px solid;border-color:#cccccc #999999 #999999 #cccccc;background:#ffffff;} .slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:left;}.slider .slider-item .content .content-container .media .media-wrapper{margin-left:auto;margin-right:auto;}.slider .slider-item .content .content-container .media .media-wrapper .media-container{display:inline-block;line-height:0px;padding:0px;max-height:100%;}.slider .slider-item .content .content-container .media .media-wrapper .media-container .media-frame,.slider .slider-item .content .content-container .media .media-wrapper .media-container .media-image img{border:1px solid;border-color:#cccccc #999999 #999999 #cccccc;background:#ffffff;}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .soundcloud{border:0;} .slider .slider-item .content .content-container .media .media-wrapper .media-container .soundcloud{border:0;}
@ -96,7 +97,8 @@
.slider .slider-item .content .content-container .media .media-wrapper .credit{color:#999999;text-align:right;display:block;margin:0 auto;margin-top:6px;font-size:10px;line-height:13px;} .slider .slider-item .content .content-container .media .media-wrapper .credit{color:#999999;text-align:right;display:block;margin:0 auto;margin-top:6px;font-size:10px;line-height:13px;}
.slider .slider-item .content .content-container .media .media-wrapper .caption{text-align:left;margin-top:10px;color:#666666;font-size:11px;line-height:14px;text-rendering:optimizeLegibility;} .slider .slider-item .content .content-container .media .media-wrapper .caption{text-align:left;margin-top:10px;color:#666666;font-size:11px;line-height:14px;text-rendering:optimizeLegibility;}
.slider .slider-item .content .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;} .slider .slider-item .content .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;}
.slider .slider-item .content-container.layout-text-media .text-media{padding-right:15px;border-right:1px solid #e3e3e3;} .slider .slider-item .content-container.layout-text-media .text-media{border-top:1px solid #e3e3e3;}
.slider .slider-item .content-container.layout-text-media.pad-left .text-media{padding-right:15px;border-right:1px solid #e3e3e3;border-top:0px solid #e3e3e3;}
.slider .slider-item .content-container.layout-text{width:100%;}.slider .slider-item .content-container.layout-text .text{width:100%;max-width:100%;}.slider .slider-item .content-container.layout-text .text .container{display:block;vertical-align:middle;text-align:left;padding:0px;width:90%;text-align:left;margin-left:auto;margin-right:auto;} .slider .slider-item .content-container.layout-text{width:100%;}.slider .slider-item .content-container.layout-text .text{width:100%;max-width:100%;}.slider .slider-item .content-container.layout-text .text .container{display:block;vertical-align:middle;text-align:left;padding:0px;width:90%;text-align:left;margin-left:auto;margin-right:auto;}
.slider .slider-item .content-container.layout-media{width:100%;}.slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;} .slider .slider-item .content-container.layout-media{width:100%;}.slider .slider-item .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;}
.slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content-container.layout-media .media .media-wrapper{display:block;}.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;line-height:0px;padding:0px;} .slider .slider-item .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content-container.layout-media .media .media-wrapper{display:block;}.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;line-height:0px;padding:0px;}
@ -169,4 +171,4 @@
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.tooltip-inner{max-width:200px;padding:3px 8px;color:#ffffff;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .tooltip-inner{max-width:200px;padding:3px 8px;color:#ffffff;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.tooltip-arrow{position:absolute;width:0;height:0;} .tooltip-arrow{position:absolute;width:0;height:0;}
@media only screen and (max-width:480px),only screen and (max-device-width:480px){}@media (max-width:600px){.slider .slider-item .content .content-container{display:block;}.slider .slider-item .content .content-container .text{width:100%;max-width:100%;min-width:120px;display:block;}.slider .slider-item .content .content-container .text .container{display:block;} .slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content .content-container .media .media-wrapper{margin-left:0px;margin-right:0px;width:100%;display:block;} .slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;}} @media only screen and (max-width:480px),only screen and (max-device-width:480px){}@media (max-width:600px){.slider .slider-item .content .content-container{display:block;}.slider .slider-item .content .content-container .text{width:100%;max-width:100%;min-width:120px;display:block;}.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;} .slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content .content-container .media .media-wrapper{margin-left:0px;margin-right:0px;width:100%;display:block;} .slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;}}

48
compiled/index.html

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Timeline</title>
<meta name="description" content="Template Description">
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
#timeline-embed{
margin:0px !important;
border:0px solid #CCC !important;
padding:0px !important;
-webkit-border-radius:0px !important;
-moz-border-radius:0px !important;
border-radius:0px !important;
-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;
}
</style>
</head>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadFYzRjJPUGktY0NkWXFUWkVIZDNGRHc&output=html',
font: 'Bevan-PotanoSans', //OPTIONAL
//start_at_end: true, //OPTIONAL
//hash_bookmark: true, //OPTIONAL
css: 'css/timeline.css', //OPTIONAL
js: 'js/timeline.js' //OPTIONAL
}
</script>
<script type="text/javascript" src="js/timeline-embed.js"></script>
<!-- END Timeline Embed -->
</body>
</html>

8
compiled/js/locale/de.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/en.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/es.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/fr.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/is.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/it.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/kr.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/nl.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/pt-br.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/zh-ch.js

File diff suppressed because one or more lines are too long

8
compiled/js/locale/zh-tw.js

File diff suppressed because one or more lines are too long

8
compiled/js/timeline-min.js vendored

File diff suppressed because one or more lines are too long

106
compiled/js/timeline.js

@ -575,6 +575,12 @@ if(typeof VMM != 'undefined') {
} }
}, },
prepend: function(element, value) {
if( typeof( jQuery ) != 'undefined' ){
jQuery(element).prepend(value);
}
},
show: function(element, duration) { show: function(element, duration) {
if (duration != null && duration != "") { if (duration != null && duration != "") {
if( typeof( jQuery ) != 'undefined' ){ if( typeof( jQuery ) != 'undefined' ){
@ -1191,9 +1197,9 @@ if(typeof VMM != 'undefined' && typeof VMM.MediaElement == 'undefined') {
mediaElem = "<div class='media-container' >" + mediaElem + creditElem + captionElem + "</div>"; mediaElem = "<div class='media-container' >" + mediaElem + creditElem + captionElem + "</div>";
// RETURN // RETURN
if (isTextMedia) { if (isTextMedia) {
return "<div class='media text-media'><div class='media-wrapper'>" + mediaElem + "</div></div>"; return "<div class='text-media'><div class='media-wrapper'>" + mediaElem + "</div></div>";
} else { } else {
return "<div class='media'><div class='media-wrapper'>" + mediaElem + "</div></div>"; return "<div class='media-wrapper'>" + mediaElem + "</div>";
} }
/* /*
@ -2122,7 +2128,7 @@ if(typeof VMM != 'undefined' && typeof VMM.ExternalAPI == 'undefined') {
var _wiki = ""; var _wiki = "";
var wiki_text = ""; var wiki_text = "";
var wiki_text_array = wiki_extract.split("<p>"); var wiki_text_array = wiki_extract.split("<p>");
var wiki_number_of_paragraphs = 2; var wiki_number_of_paragraphs = 1;
for(var i = 0; i < wiki_text_array.length; i++) { for(var i = 0; i < wiki_text_array.length; i++) {
if (i+1 <= wiki_number_of_paragraphs && i+1 < wiki_text_array.length) { if (i+1 <= wiki_number_of_paragraphs && i+1 < wiki_text_array.length) {
@ -2976,7 +2982,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
// HANDLE SMALLER SIZES // HANDLE SMALLER SIZES
var is_skinny = false; var is_skinny = false;
if (current_width <= 650) { if (current_width <= 600) {
is_skinny = true; is_skinny = true;
} else if (VMM.Browser.device == "mobile" && VMM.Browser.orientation == "portrait") { } else if (VMM.Browser.device == "mobile" && VMM.Browser.orientation == "portrait") {
is_skinny = true; is_skinny = true;
@ -3069,6 +3075,9 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
// MAINTAINS VERTICAL CENTER IF IT CAN // MAINTAINS VERTICAL CENTER IF IT CAN
for(var i = 0; i < slides.length; i++) { for(var i = 0; i < slides.length; i++) {
slides[i].layout(is_skinny);
if (slides[i].content_height() > config.slider.height + 20) { if (slides[i].content_height() > config.slider.height + 20) {
slides[i].css("display", "block"); slides[i].css("display", "block");
} else { } else {
@ -3281,13 +3290,20 @@ if (typeof VMM.Slider != 'undefined') {
var slide = {}; var slide = {};
var media = ""; var media = "";
var loaded = false; var loaded = false;
var preloaded = false;
var is_skinny = false;
var element = VMM.appendAndGetElement(_parent, "<div>", "slider-item"); var element = VMM.appendAndGetElement(_parent, "<div>", "slider-item");
var c = {slide:"", text: "", media: "", media_element: "", layout: "content-container layout", has: { headline: false, text: false, media: false }};
var $media, $text, $slide, $wrap;
/* PUBLIC /* PUBLIC
================================================== */ ================================================== */
this.show = function() { this.show = function(skinny) {
if (!loaded) { if (!loaded) {
render(); if (preloaded) {
reLayout(skinny);
} else {
render(skinny);
}
} }
}; };
@ -3297,6 +3313,12 @@ if (typeof VMM.Slider != 'undefined') {
} }
}; };
this.layout = function(skinny) {
if (loaded && preloaded) {
reLayout(skinny);
}
};
this.elem = function() { this.elem = function() {
return element; return element;
}; };
@ -3345,21 +3367,42 @@ if (typeof VMM.Slider != 'undefined') {
/* PRIVATE /* PRIVATE
================================================== */ ================================================== */
var render = function() { var render = function(skinny) {
VMM.attachElement(element, ""); buildSlide(skinny);
VMM.appendElement(element, buildSlide() );
loaded = true; loaded = true;
preloaded = true;
var timer = setTimeout(VMM.ExternalAPI.pushQues, 500); var timer = setTimeout(VMM.ExternalAPI.pushQues, 500);
}; };
var removeSlide = function() { var removeSlide = function() {
VMM.attachElement(element, ""); //VMM.attachElement(element, "");
loaded = false; loaded = false;
} }
var buildSlide = function() { var reLayout = function(skinny) {
var c = {slide:"", text: "", media: "", layout: "content-container layout", has: { headline: false, text: false, media: false }};
var b_slide, c_wrap; if (c.has.text) {
if (skinny) {
if (!is_skinny) {
VMM.Lib.removeClass($slide, "pad-left");
VMM.Lib.detach($text);
VMM.Lib.prepend($slide, $text);
is_skinny = true;
}
} else {
if (is_skinny) {
VMM.Lib.addClass($slide, "pad-left");
VMM.Lib.detach($text);
VMM.Lib.append($slide, $text);
is_skinny = false
}
}
}
}
var buildSlide = function(skinny) {
$wrap = VMM.appendAndGetElement(element, "<div>", "content");
$slide = VMM.appendAndGetElement($wrap, "<div>");
/* DATE /* DATE
================================================== */ ================================================== */
@ -3397,7 +3440,7 @@ if (typeof VMM.Slider != 'undefined') {
if (c.has.text || c.has.headline) { if (c.has.text || c.has.headline) {
c.text = VMM.createElement("div", c.text, "container"); c.text = VMM.createElement("div", c.text, "container");
c.text = VMM.createElement("div", c.text, "text"); $text = VMM.appendAndGetElement($slide, "<div>", "text", c.text);
} }
/* MEDIA /* MEDIA
@ -3405,7 +3448,7 @@ if (typeof VMM.Slider != 'undefined') {
if (data.asset != null && data.asset != "") { if (data.asset != null && data.asset != "") {
if (data.asset.media != null && data.asset.media != "") { if (data.asset.media != null && data.asset.media != "") {
c.has.media = true; c.has.media = true;
c.media = VMM.MediaElement.create(data.asset); $media = VMM.appendAndGetElement($slide, "<div>", "media", VMM.MediaElement.create(data.asset));
} }
} }
@ -3413,20 +3456,22 @@ if (typeof VMM.Slider != 'undefined') {
================================================== */ ================================================== */
if (c.has.text) { c.layout += "-text" }; if (c.has.text) { c.layout += "-text" };
if (c.has.media){ c.layout += "-media" }; if (c.has.media){ c.layout += "-media" };
//c.slide = VMM.createElement("div", c.text + c.media, c.layout);
if (c.has.text) { if (c.has.text) {
c.slide = VMM.createElement("div", c.media + c.text, c.layout + " pad-left"); if (skinny) {
VMM.Lib.addClass($slide, c.layout);
is_skinny = true;
} else {
VMM.Lib.addClass($slide, c.layout);
VMM.Lib.addClass($slide, "pad-left");
VMM.Lib.detach($text);
VMM.Lib.append($slide, $text);
}
} else { } else {
c.slide = VMM.createElement("div", c.text + c.media, c.layout); VMM.Lib.addClass($slide, c.layout);
} }
c_wrap = VMM.createElement("div", c.slide, "content");
/* RETURN
================================================== */
// return c.slide;
return c_wrap;
}; };
@ -5593,13 +5638,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
timeline_id = "#timeline"; timeline_id = "#timeline";
} }
version = "1.26"; version = "1.30";
trace("TIMELINE VERSION " + version); trace("TIMELINE VERSION " + version);
/* CONFIG /* CONFIG
================================================== */ ================================================== */
config = { config = {
embed: false,
id: timeline_id, id: timeline_id,
type: "timeline", type: "timeline",
maptype: "toner", maptype: "toner",
@ -6006,8 +6052,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
var td_num = 0; var td_num = 0;
var td = _dates[0].startdate; var td = _dates[0].startdate;
_date.startdate = new Date(_dates[0].startdate); _date.startdate = new Date(_dates[0].startdate);
trace(_dates[0].startdate);
trace(_date.startdate);
if (td.getMonth() === 0 && td.getDate() == 1 && td.getHours() === 0 && td.getMinutes() === 0 ) { if (td.getMonth() === 0 && td.getDate() == 1 && td.getHours() === 0 && td.getMinutes() === 0 ) {
// trace("YEAR ONLY"); // trace("YEAR ONLY");
@ -6036,6 +6080,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
_date.asset = data.asset; _date.asset = data.asset;
_date.fulldate = _date.startdate.getTime(); _date.fulldate = _date.startdate.getTime();
if (config.embed) {
document.title = _date.headline;
}
_dates.push(_date); _dates.push(_date);
} }

2
source/js/VMM.ExternalAPI.js

@ -606,7 +606,7 @@ if(typeof VMM != 'undefined' && typeof VMM.ExternalAPI == 'undefined') {
var _wiki = ""; var _wiki = "";
var wiki_text = ""; var wiki_text = "";
var wiki_text_array = wiki_extract.split("<p>"); var wiki_text_array = wiki_extract.split("<p>");
var wiki_number_of_paragraphs = 2; var wiki_number_of_paragraphs = 1;
for(var i = 0; i < wiki_text_array.length; i++) { for(var i = 0; i < wiki_text_array.length; i++) {
if (i+1 <= wiki_number_of_paragraphs && i+1 < wiki_text_array.length) { if (i+1 <= wiki_number_of_paragraphs && i+1 < wiki_text_array.length) {

6
source/js/VMM.Library.js

@ -214,6 +214,12 @@ if(typeof VMM != 'undefined') {
} }
}, },
prepend: function(element, value) {
if( typeof( jQuery ) != 'undefined' ){
jQuery(element).prepend(value);
}
},
show: function(element, duration) { show: function(element, duration) {
if (duration != null && duration != "") { if (duration != null && duration != "") {
if( typeof( jQuery ) != 'undefined' ){ if( typeof( jQuery ) != 'undefined' ){

4
source/js/VMM.MediaElement.js

@ -160,9 +160,9 @@ if(typeof VMM != 'undefined' && typeof VMM.MediaElement == 'undefined') {
mediaElem = "<div class='media-container' >" + mediaElem + creditElem + captionElem + "</div>"; mediaElem = "<div class='media-container' >" + mediaElem + creditElem + captionElem + "</div>";
// RETURN // RETURN
if (isTextMedia) { if (isTextMedia) {
return "<div class='media text-media'><div class='media-wrapper'>" + mediaElem + "</div></div>"; return "<div class='text-media'><div class='media-wrapper'>" + mediaElem + "</div></div>";
} else { } else {
return "<div class='media'><div class='media-wrapper'>" + mediaElem + "</div></div>"; return "<div class='media-wrapper'>" + mediaElem + "</div>";
} }
/* /*

80
source/js/VMM.Slider.Slide.js

@ -8,13 +8,20 @@ if (typeof VMM.Slider != 'undefined') {
var slide = {}; var slide = {};
var media = ""; var media = "";
var loaded = false; var loaded = false;
var preloaded = false;
var is_skinny = false;
var element = VMM.appendAndGetElement(_parent, "<div>", "slider-item"); var element = VMM.appendAndGetElement(_parent, "<div>", "slider-item");
var c = {slide:"", text: "", media: "", media_element: "", layout: "content-container layout", has: { headline: false, text: false, media: false }};
var $media, $text, $slide, $wrap;
/* PUBLIC /* PUBLIC
================================================== */ ================================================== */
this.show = function() { this.show = function(skinny) {
if (!loaded) { if (!loaded) {
render(); if (preloaded) {
reLayout(skinny);
} else {
render(skinny);
}
} }
}; };
@ -24,6 +31,12 @@ if (typeof VMM.Slider != 'undefined') {
} }
}; };
this.layout = function(skinny) {
if (loaded && preloaded) {
reLayout(skinny);
}
};
this.elem = function() { this.elem = function() {
return element; return element;
}; };
@ -72,21 +85,42 @@ if (typeof VMM.Slider != 'undefined') {
/* PRIVATE /* PRIVATE
================================================== */ ================================================== */
var render = function() { var render = function(skinny) {
VMM.attachElement(element, ""); buildSlide(skinny);
VMM.appendElement(element, buildSlide() );
loaded = true; loaded = true;
preloaded = true;
var timer = setTimeout(VMM.ExternalAPI.pushQues, 500); var timer = setTimeout(VMM.ExternalAPI.pushQues, 500);
}; };
var removeSlide = function() { var removeSlide = function() {
VMM.attachElement(element, ""); //VMM.attachElement(element, "");
loaded = false; loaded = false;
} }
var buildSlide = function() { var reLayout = function(skinny) {
var c = {slide:"", text: "", media: "", layout: "content-container layout", has: { headline: false, text: false, media: false }};
var b_slide, c_wrap; if (c.has.text) {
if (skinny) {
if (!is_skinny) {
VMM.Lib.removeClass($slide, "pad-left");
VMM.Lib.detach($text);
VMM.Lib.prepend($slide, $text);
is_skinny = true;
}
} else {
if (is_skinny) {
VMM.Lib.addClass($slide, "pad-left");
VMM.Lib.detach($text);
VMM.Lib.append($slide, $text);
is_skinny = false
}
}
}
}
var buildSlide = function(skinny) {
$wrap = VMM.appendAndGetElement(element, "<div>", "content");
$slide = VMM.appendAndGetElement($wrap, "<div>");
/* DATE /* DATE
================================================== */ ================================================== */
@ -124,7 +158,7 @@ if (typeof VMM.Slider != 'undefined') {
if (c.has.text || c.has.headline) { if (c.has.text || c.has.headline) {
c.text = VMM.createElement("div", c.text, "container"); c.text = VMM.createElement("div", c.text, "container");
c.text = VMM.createElement("div", c.text, "text"); $text = VMM.appendAndGetElement($slide, "<div>", "text", c.text);
} }
/* MEDIA /* MEDIA
@ -132,7 +166,7 @@ if (typeof VMM.Slider != 'undefined') {
if (data.asset != null && data.asset != "") { if (data.asset != null && data.asset != "") {
if (data.asset.media != null && data.asset.media != "") { if (data.asset.media != null && data.asset.media != "") {
c.has.media = true; c.has.media = true;
c.media = VMM.MediaElement.create(data.asset); $media = VMM.appendAndGetElement($slide, "<div>", "media", VMM.MediaElement.create(data.asset));
} }
} }
@ -140,20 +174,22 @@ if (typeof VMM.Slider != 'undefined') {
================================================== */ ================================================== */
if (c.has.text) { c.layout += "-text" }; if (c.has.text) { c.layout += "-text" };
if (c.has.media){ c.layout += "-media" }; if (c.has.media){ c.layout += "-media" };
//c.slide = VMM.createElement("div", c.text + c.media, c.layout);
if (c.has.text) { if (c.has.text) {
c.slide = VMM.createElement("div", c.media + c.text, c.layout + " pad-left"); if (skinny) {
VMM.Lib.addClass($slide, c.layout);
is_skinny = true;
} else {
VMM.Lib.addClass($slide, c.layout);
VMM.Lib.addClass($slide, "pad-left");
VMM.Lib.detach($text);
VMM.Lib.append($slide, $text);
}
} else { } else {
c.slide = VMM.createElement("div", c.text + c.media, c.layout); VMM.Lib.addClass($slide, c.layout);
} }
c_wrap = VMM.createElement("div", c.slide, "content");
/* RETURN
================================================== */
// return c.slide;
return c_wrap;
}; };

5
source/js/VMM.Slider.js

@ -333,7 +333,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
// HANDLE SMALLER SIZES // HANDLE SMALLER SIZES
var is_skinny = false; var is_skinny = false;
if (current_width <= 650) { if (current_width <= 600) {
is_skinny = true; is_skinny = true;
} else if (VMM.Browser.device == "mobile" && VMM.Browser.orientation == "portrait") { } else if (VMM.Browser.device == "mobile" && VMM.Browser.orientation == "portrait") {
is_skinny = true; is_skinny = true;
@ -426,6 +426,9 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
// MAINTAINS VERTICAL CENTER IF IT CAN // MAINTAINS VERTICAL CENTER IF IT CAN
for(var i = 0; i < slides.length; i++) { for(var i = 0; i < slides.length; i++) {
slides[i].layout(is_skinny);
if (slides[i].content_height() > config.slider.height + 20) { if (slides[i].content_height() > config.slider.height + 20) {
slides[i].css("display", "block"); slides[i].css("display", "block");
} else { } else {

9
source/js/VMM.Timeline.js

@ -62,13 +62,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
timeline_id = "#timeline"; timeline_id = "#timeline";
} }
version = "1.26"; version = "1.30";
trace("TIMELINE VERSION " + version); trace("TIMELINE VERSION " + version);
/* CONFIG /* CONFIG
================================================== */ ================================================== */
config = { config = {
embed: false,
id: timeline_id, id: timeline_id,
type: "timeline", type: "timeline",
maptype: "toner", maptype: "toner",
@ -475,8 +476,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
var td_num = 0; var td_num = 0;
var td = _dates[0].startdate; var td = _dates[0].startdate;
_date.startdate = new Date(_dates[0].startdate); _date.startdate = new Date(_dates[0].startdate);
trace(_dates[0].startdate);
trace(_date.startdate);
if (td.getMonth() === 0 && td.getDate() == 1 && td.getHours() === 0 && td.getMinutes() === 0 ) { if (td.getMonth() === 0 && td.getDate() == 1 && td.getHours() === 0 && td.getMinutes() === 0 ) {
// trace("YEAR ONLY"); // trace("YEAR ONLY");
@ -505,6 +504,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
_date.asset = data.asset; _date.asset = data.asset;
_date.fulldate = _date.startdate.getTime(); _date.fulldate = _date.startdate.getTime();
if (config.embed) {
document.title = _date.headline;
}
_dates.push(_date); _dates.push(_date);
} }

22
source/less/VMM.Slider.less

@ -166,6 +166,15 @@
padding-left: @base-space*2; padding-left: @base-space*2;
} }
} }
.media.text-media {
.media-wrapper {
.media-container {
border: none;
background-color: @white;
}
}
}
} }
.content-container { .content-container {
display:table; display:table;
@ -478,13 +487,24 @@
/* Text and Media Slides /* Text and Media Slides
================================================== */ ================================================== */
.content-container.layout-text-media { .content-container.layout-text-media {
.text-media {
//padding-right:@base-space;
border-top: 1px solid @color-dark-fifth;//@color-line;
//padding-right:@base-space;
//border-right: 1px solid @color-dark-fifth;//@color-line;
}
}
.content-container.layout-text-media.pad-left {
.text-media { .text-media {
padding-right:@base-space; padding-right:@base-space;
border-right: 1px solid @color-dark-fifth;//@color-line; border-right: 1px solid @color-dark-fifth;//@color-line;
border-top: 0px solid @color-dark-fifth;//@color-line;
} }
} }
/* Text Only Slides /* Text Only Slides
================================================== */ ================================================== */
.content-container.layout-text { .content-container.layout-text {

6
source/less/VMM.Timeline.less

@ -85,6 +85,12 @@
display:block; display:block;
.container { .container {
display:block; display:block;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
} }
} }
.media { .media {

Loading…
Cancel
Save