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

Tweaking CSS date size so that headline is more important than date

pull/23/merge
Zach Wise 13 years ago
parent
05a986b909
commit
b33c4c9ee8
21 changed files with 1950 additions and 344 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. 4
      locale/de.js
  2. 4
      locale/en.js
  3. 4
      locale/es.js
  4. 4
      locale/fr.js
  5. 4
      locale/is.js
  6. 4
      locale/it.js
  7. 4
      locale/kr.js
  8. 4
      locale/nl.js
  9. 4
      locale/pt-br.js
  10. 4
      locale/zh-ch.js
  11. 4
      locale/zh-tw.js
  12. 120
      source/js/VMM.Slider.js
  13. 110
      source/js/VMM.Timeline.js
  14. 1
      source/less/slider.less
  15. 90
      source/less/timeline.less
  16. 15
      source/less/type.less
  17. 4
      source/less/variables.less
  18. 10
      timeline-dark.css
  19. 4
      timeline-min.js
  20. 1666
      timeline.css
  21. 230
      timeline.js

4
locale/de.js
View File

File diff suppressed because one or more lines are too long

4
locale/en.js
View File

File diff suppressed because one or more lines are too long

4
locale/es.js
View File

File diff suppressed because one or more lines are too long

4
locale/fr.js
View File

File diff suppressed because one or more lines are too long

4
locale/is.js
View File

File diff suppressed because one or more lines are too long

4
locale/it.js
View File

File diff suppressed because one or more lines are too long

4
locale/kr.js
View File

File diff suppressed because one or more lines are too long

4
locale/nl.js
View File

File diff suppressed because one or more lines are too long

4
locale/pt-br.js
View File

File diff suppressed because one or more lines are too long

4
locale/zh-ch.js
View File

File diff suppressed because one or more lines are too long

4
locale/zh-tw.js
View File

File diff suppressed because one or more lines are too long

120
source/js/VMM.Slider.js
Unescape View File

@ -2,8 +2,8 @@
================================================== */
if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Slider = function(parent, content_width, content_height, is_timeline) {
//VMM.Slider = function(parent, content_width, content_height, is_timeline) {
VMM.Slider = function(parent, parent_config) {
/* PRIVATE VARS
================================================== */
@ -24,26 +24,59 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
};
var slide_positions = [];
/* LOCAL CONFIG
================================================== */
var config = {
slider: {
width: 720,
height: 400,
content: {
width: 720,
height: 400,
padding: 130,
},
nav: {
width: 100,
height: 200
}
}
};
var _config = {
interval: 10,
something: 0,
width: 720,
height: 400,
content_width: 720,
content_height: 400,
content_padding: 130,
ease: "easeInOutExpo",
duration: 1000,
nav_width: 100,
nav_height: 200,
timeline: false,
spacing: 15,
};
/* APPLY SUPPLIED CONFIG
================================================== */
if (type.of(parent_config) == 'object') {
var x;
for (x in parent_config) {
if (Object.prototype.hasOwnProperty.call(parent_config, x)) {
config[x] = parent_config[x];
}
}
} else if (type.of(_config) == 'object') {
var x;
for (x in _config) {
if (Object.prototype.hasOwnProperty.call(_config, x)) {
config[x] = _config[x];
}
}
}
var slider_width = 1000;
config.slider.width = config.width;
config.slider.height = config.height;
/*
if (content_width != null && content_width != "") {
config.width = content_width;
}
@ -53,6 +86,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
if (is_timeline != null && is_timeline != "") {
config.timeline = is_timeline;
}
*/
var content = "";
var _active = false;
@ -91,19 +125,19 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
this.width = function(w) {
if (w != null && w != "") {
config.width = w;
config.slider.width = w;
reSize();
} else {
return config.width;
return config.slider.width;
}
}
this.height = function(h) {
if (h != null && h != "") {
config.height = h;
config.slider.height = h;
reSize();
} else {
return config.height;
return config.slider.height;
}
}
/* GETTERS AND SETTERS
@ -136,8 +170,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
};
this.setSize = function(w, h) {
if (w != null) {config.width = w};
if (h != null) {config.height = h};
if (w != null) {config.slider.width = w};
if (h != null) {config.slider.height = h};
if (_active) {
reSize();
}
@ -173,13 +207,13 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
if (go_to_slide != null) {_go_to_slide = go_to_slide};
if (from_start != null) {_from_start = from_start};
current_width = config.width;
current_width = config.slider.width;
config.nav_height = VMM.Element.height(navigation.prevBtnContainer);
config.slider.nav.height = VMM.Element.height(navigation.prevBtnContainer);
config.content_width = current_width - (config.content_padding *2);
config.slider.content.width = current_width - (config.slider.content.padding *2);
VMM.Element.width($slides_items, (slides.length * config.content_width));
VMM.Element.width($slides_items, (slides.length * config.slider.content.width));
if (_from_start) {
var _pos = VMM.Element.position(slides[current_slide]);
@ -191,14 +225,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
positionSlides();
// Position Nav
VMM.Element.css(navigation.nextBtn, "left", (current_width - config.nav_width));
VMM.Element.height(navigation.prevBtn, config.height);
VMM.Element.height(navigation.nextBtn, config.height);
VMM.Element.css(navigation.nextBtnContainer, "top", ( (config.height/2) - (config.nav_height/2) ) );
VMM.Element.css(navigation.prevBtnContainer, "top", ( (config.height/2) - (config.nav_height/2) ) );
VMM.Element.css(navigation.nextBtn, "left", (current_width - config.slider.nav.width));
VMM.Element.height(navigation.prevBtn, config.slider.height);
VMM.Element.height(navigation.nextBtn, config.slider.height);
VMM.Element.css(navigation.nextBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) );
VMM.Element.css(navigation.prevBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) );
// Animate Changes
VMM.Element.height($slider_mask, config.height);
VMM.Element.height($slider_mask, config.slider.height);
VMM.Element.width($slider_mask, current_width);
if (_go_to_slide) {
@ -254,9 +288,9 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
if (typeof b.left == "number") {
var _pos = b.left;
if (_pos < -(VMM.Element.position(slides[current_slide]).left) - (config.width/3)) {
if (_pos < -(VMM.Element.position(slides[current_slide]).left) - (config.slider_width/3)) {
onNextClick();
} else if (_pos > -(VMM.Element.position(slides[current_slide]).left) + (config.width/3)) {
} else if (_pos > -(VMM.Element.position(slides[current_slide]).left) + (config.slider_width/3)) {
onPrevClick();
} else {
VMM.Element.animate($slider_container, config.duration, config.ease, {"left": -(VMM.Element.position(slides[current_slide]).left)});
@ -314,14 +348,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* SIZE SLIDES
================================================== */
VMM.Element.css(".slider-item", "width", config.content_width );
VMM.Element.height(".slider-item", config.height);
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-height", config.height - 50 );
VMM.Element.css(".slider-item .layout-media .media .media-container img", "max-height", config.height - 150 );
VMM.Element.css(".slider-item", "width", config.slider.content.width );
VMM.Element.height(".slider-item", config.slider.height);
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-height", config.slider.height - 50 );
VMM.Element.css(".slider-item .layout-media .media .media-container img", "max-height", config.slider.height - 150 );
/* FIX FOR NON-WEBKIT BROWSERS
================================================== */
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.content_width/100) * 60) );
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.slider.content.width/100) * 60) );
/* SOUNDCLOUD
================================================== */
@ -330,34 +364,32 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* RESIZE IFRAME MEDIA ELEMENTS
================================================== */
//var _iframe_height = Math.round(config.height) - 60;
var _iframe_height_full = Math.round(config.height) - 160;
var _iframe_height_full = Math.round(config.slider.height) - 160;
//var _iframe_width = Math.round((_iframe_height / 9) * 16);
var _iframe_width_full = Math.round((_iframe_height_full / 9) * 16);
var _iframe_width = (config.content_width/100)*60 ;
var _iframe_width = (config.slider.content.width/100)*60 ;
var _iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
// NORMAL
VMM.Element.height(".slider-item .media .media-container .media-frame", _iframe_height);
VMM.Element.width(".slider-item .media .media-container .media-frame", _iframe_width);
//VMM.Element.width(".slider-item .media .media-container .media-frame", _iframe_width);
//VMM.Element.css(".slider-item .media .media-container .media-frame", "max-width", config.content_width );
// IFRAME FULL SIZE VIDEO
VMM.Element.height(".slider-item .layout-media .media .media-container .media-frame", _iframe_height_full);
VMM.Element.width(".slider-item .layout-media .media .media-container .media-frame", _iframe_width_full);
// IFRAME FULL SIZE NON VIDEO
VMM.Element.height(".slider-item .layout-media .media .media-container .soundcloud", config.height - 150);
VMM.Element.width(".slider-item .layout-media .media .media-container .soundcloud", config.content_width);
VMM.Element.height(".slider-item .layout-media .media .media-container .soundcloud", config.slider.height - 150);
VMM.Element.width(".slider-item .layout-media .media .media-container .soundcloud", config.slider.content.width);
VMM.Element.width(".slider-item .layout-text-media .media .media-container .soundcloud", _iframe_width);
// MAPS
VMM.Element.height(".slider-item .media .media-container .map", _iframe_height_full);
// MAX WIDTH
VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.content_width );
VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.slider.content.width );
//VMM.Element.width(".slider-item .layout-text-media .media .media-container .media-frame", _iframe_width);
//VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-height", _iframe_height );
@ -365,7 +397,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
================================================== */
var pos = 0;
for(var i = 0; i < slides.length; i++) {
pos = i * (config.width+config.spacing);
pos = i * (config.slider.width+config.spacing);
VMM.Element.css(slides[i], "left", pos);
}
@ -423,7 +455,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Element.visible(navigation.prevBtn, false);
} else {
VMM.Element.visible(navigation.prevBtn, true);
if (config.timeline) {
if (config.type == "timeline") {
VMM.attachElement(navigation.prevDate, data[current_slide - 1].date);
}
VMM.attachElement(navigation.prevTitle, VMM.Util.unlinkify(data[current_slide - 1].title));
@ -432,7 +464,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Element.visible(navigation.nextBtn, false);
} else {
VMM.Element.visible(navigation.nextBtn, true);
if (config.timeline) {
if (config.type == "timeline") {
VMM.attachElement(navigation.nextDate, data[current_slide + 1].date);
}
VMM.attachElement(navigation.nextTitle, VMM.Util.unlinkify(data[current_slide + 1].title) );
@ -441,10 +473,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* ANIMATE SLIDE
================================================== */
if (fast) {
VMM.Element.css($slider_container, "left", -(_pos.left - config.content_padding));
VMM.Element.css($slider_container, "left", -(_pos.left - config.slider.content.padding));
} else{
VMM.Element.stop($slider_container);
VMM.Element.animate($slider_container, _duration, _ease, {"left": -(_pos.left - config.content_padding)});
VMM.Element.animate($slider_container, _duration, _ease, {"left": -(_pos.left - config.slider.content.padding)});
}
if (firstrun) {
@ -454,7 +486,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* SET Vertical Scoll
================================================== */
//opacitySlides(0.85);
if (VMM.Element.height(slides[current_slide]) > config.height) {
if (VMM.Element.height(slides[current_slide]) > config.slider_height) {
VMM.Element.css(".slider", "overflow-y", "scroll" );
} else {
VMM.Element.css(layout, "overflow-y", "hidden" );
@ -475,7 +507,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
navigation.prevBtn = VMM.appendAndGetElement($slider, "<div>", "nav-previous");
navigation.nextBtnContainer = VMM.appendAndGetElement(navigation.nextBtn, "<div>", "nav-container", temp_icon);
navigation.prevBtnContainer = VMM.appendAndGetElement(navigation.prevBtn, "<div>", "nav-container", temp_icon);
if (config.timeline) {
if (config.type == "timeline") {
navigation.nextDate = VMM.appendAndGetElement(navigation.nextBtnContainer, "<div>", "date", "1957");
navigation.prevDate = VMM.appendAndGetElement(navigation.prevBtnContainer, "<div>", "date", "1957");
}

110
source/js/VMM.Timeline.js
Unescape View File

@ -66,13 +66,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
//VMM.appendElement($timeline, "<div class='container main'><div class='feature'><div class='slider'></div></div><div class='navigation'></div></div>");
/* CREATE COMPONENTS
================================================== */
// SLIDER
var slider = new VMM.Slider("div.slider", 720, 400, true);
// TIMENAV
var timenav = new VMM.Timeline.TimeNav("div.navigation", 720, 400, true);
/* PRIVATE VARS
================================================== */
@ -83,24 +77,48 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
/* CONFIG
================================================== */
var config = VMM.Timeline.Config;
VMM.master_config.Timeline = VMM.Timeline.Config;
/* MAP TYPE
options include
Stamen Maps "toner", "watercolor", "sterrain", "toner-lines", "toner-labels"
Apple "apple"
Google "HYBRID", "ROADMAP", "SATELLITE", "TERRAIN"
================================================== */
config.maptype = "toner";
config.interval = 10;
config.something = 0;
config.width = 960;
config.height = 540;
config.spacing = 15;
config.loaded = {slider: false, timenav: false, percentloaded:0};
config.ease = "easeInOutExpo";
config.duration = 1000;
var config = {
type: "timeline",
maptype: "toner",
interval: 10,
something: 0,
width: 960,
height: 540,
spacing: 15,
loaded: {
slider: false,
timenav: false,
percentloaded:0
},
nav: {
width: 960,
height: 200
},
feature: {
width: 960,
height: 540
},
slider: {
width: 720,
height: 400,
content: {
width: 720,
height: 400,
padding: 130,
},
nav: {
width: 100,
height: 200
}
},
ease: "easeInOutExpo",
duration: 1000,
language: VMM.Language
};
VMM.Timeline.Config = config;
VMM.master_config.Timeline = VMM.Timeline.Config;
if (w != null && w != "") {
config.width = w;
@ -116,14 +134,19 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
config.height = VMM.Element.height($timeline);
}
config.nav_width = config.width;
config.nav_height = 200;
config.feature_width = config.width;
config.nav = {
width: config.width,
height: 200
};
config.feature = {
width: config.width,
height: config.height - config.nav.height
}
if (VMM.Browser.device == "mobile") {
config.feature_height = config.height;
config.feature.height = config.height;
} else {
config.feature_height = config.height - config.nav_height;
//config.feature.height = config.height - config.nav.height;
}
/* APPLY SUPPLIED CONFIG TO TIMELINE CONFIG
@ -146,11 +169,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
}
}
// SET THE LANGUAGE OBJECT
config.language = VMM.Language;
VMM.master_config.language = config.language;
/* CHECK FOR IE7
================================================== */
var ie7 = false;
@ -160,6 +178,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
}
}
/* CREATE COMPONENTS
================================================== */
// SLIDER
//var slider = new VMM.Slider("div.slider", 720, 400, true);
var slider = new VMM.Slider("div.slider", config);
// TIMENAV
var timenav = new VMM.Timeline.TimeNav("div.navigation", 720, 400, true);
/* ON EVENT
================================================== */
@ -184,7 +210,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
function reSize() {
updateSize();
slider.setSize(config.feature_width, config.feature_height);
slider.setSize(config.feature.width, config.feature.height);
timenav.setSize(config.width, config.height);
resizeSlides();
};
@ -220,7 +246,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
this.init = function(d) {
trace('TIMELINE INIT');
trace(VMM.Timeline.Config.language);
VMM.Util.date.setLanguage(VMM.Timeline.Config.language);
VMM.bindEvent(global, onDataReady, "DATAREADY");
@ -359,7 +385,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
if (d.asset.media != null && d.asset.media != "") {
_hasmedia = true;
c._media = VMM.MediaElement.create("", d.asset, true, config.feature_width, config.feature_height);
c._media = VMM.MediaElement.create("", d.asset, true, config.feature.width, config.feature.height);
}
}
@ -391,13 +417,13 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
config.width = VMM.Element.width($timeline);
config.height = VMM.Element.height($timeline);
config.nav_width = config.width;
config.feature_width = config.width;
config.nav.width = config.width;
config.feature.width = config.width;
if (VMM.Browser.device == "mobile") {
config.feature_height = config.height;
config.feature.height = config.height;
} else {
config.feature_height = config.height - config.nav_height - 3;
config.feature.height = config.height - config.nav.height - 3;
}
};
@ -418,7 +444,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
VMM.Element.show("div.navigation");
VMM.Element.show("div.nav-next");
VMM.Element.show("div.nav-previous");
VMM.Element.height(".slider-container-mask", config.feature_height);
VMM.Element.height(".slider-container-mask", config.feature.height);
}
/* CHECK FOR TABLET
================================================== */

1
source/less/slider.less
Unescape View File

@ -378,3 +378,4 @@
}
}
}

90
source/less/timeline.less
Unescape View File

@ -23,4 +23,92 @@
@import "elements.less"; // UI Elements etc
// Grid system and page structure
@import "tooltip.less";
@import "tooltip.less";
/* MEDIA QUERIES
================================================== */
/* Mobile and iPhone
================================================== */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
}
/* BELOW 600px
================================================== */
@media (max-width: 600px) {
.slider {
.slider-item {
.content {
/* Layouts
================================================== */
/* All Slides
================================================== */
.content-container {
display:block;
.text {
width:100%;
max-width:100%;
min-width:120px;
display:block;
.container {
display:block;
}
}
.media {
width:100%;
min-width:50%;
float: none;
.media-wrapper {
margin-left:0px;
margin-right:0px;
width:100%;
display:block;
.media-container {
img, iframe {
width:100%;
//max-height:350px;
}
}
}
}
.media.text-media {
.media-wrapper {
.media-container {
border: none;
background-color: @white;
}
}
}
}
/* Text Only Slides
================================================== */
.content-container.layout-text {
}
/* Media Only Slides
================================================== */
.content-container.layout-media {
}
}
}
}
}

15
source/less/type.less
Unescape View File

@ -66,6 +66,7 @@
margin-bottom: @base-space;
font-size: 28px;
line-height: 30px;
small {
font-size: 14px;
line-height: 16px;
@ -74,9 +75,11 @@
}
}
h2.date {
//font-size: 18px;
//line-height: 20px;
//color:@color-feature-date;
font-size: 16px;
line-height:18px;
margin-bottom: 0px;
color:@color-feature-date;
//margin-bottom: @base-space;
}
h3, h4, h5, h6 {
@ -86,8 +89,10 @@
}
}
h3 {
font-size: 24px;
line-height:26px;
font-size: 28px;
line-height: 30px;
//font-size: 24px;
//line-height:26px;
small {
font-size: 14px;
}

4
source/less/variables.less
Unescape View File

@ -14,7 +14,7 @@
@color-dark-third: #666;
@color-dark-fourth: #999;
@color-dark-fifth: #E3E3E3;
@color-dark-fifth: #E3E3E3;
/* COLOR SCHEME
@ -52,7 +52,7 @@
@color-nav-title: @color-dark-fourth;
// Feature
@color-feature-date: @color-dark-third;
@color-feature-date: @color-dark-fourth;
@color-feature-description: @color-dark-third;
@color-feature-title: @color-dark;

10
timeline-dark.css
Unescape View File

@ -1315,6 +1315,12 @@
font-size: 14px;
line-height: 16px;
}
#timeline h2.date {
font-size: 16px;
line-height: 18px;
margin-bottom: 0px;
color: #aaaaaa;
}
#timeline h3,
#timeline h4,
#timeline h5,
@ -1328,8 +1334,8 @@
color: #0bd4e3;
}
#timeline h3 {
font-size: 24px;
line-height: 26px;
font-size: 28px;
line-height: 30px;
}
#timeline h3 small {
font-size: 14px;

4
timeline-min.js vendored
View File

File diff suppressed because one or more lines are too long

1666
timeline.css
View File

File diff suppressed because it is too large Load Diff

230
timeline.js
Unescape View File

@ -2428,8 +2428,8 @@ if(typeof VMM != 'undefined' && typeof VMM.DragSlider == 'undefined') {
================================================== */
if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Slider = function(parent, content_width, content_height, is_timeline) {
//VMM.Slider = function(parent, content_width, content_height, is_timeline) {
VMM.Slider = function(parent, parent_config) {
/* PRIVATE VARS
================================================== */
@ -2450,26 +2450,59 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
};
var slide_positions = [];
/* LOCAL CONFIG
================================================== */
var config = {
slider: {
width: 720,
height: 400,
content: {
width: 720,
height: 400,
padding: 130,
},
nav: {
width: 100,
height: 200
}
}
};
var _config = {
interval: 10,
something: 0,
width: 720,
height: 400,
content_width: 720,
content_height: 400,
content_padding: 130,
ease: "easeInOutExpo",
duration: 1000,
nav_width: 100,
nav_height: 200,
timeline: false,
spacing: 15,
};
/* APPLY SUPPLIED CONFIG
================================================== */
if (type.of(parent_config) == 'object') {
var x;
for (x in parent_config) {
if (Object.prototype.hasOwnProperty.call(parent_config, x)) {
config[x] = parent_config[x];
}
}
} else if (type.of(_config) == 'object') {
var x;
for (x in _config) {
if (Object.prototype.hasOwnProperty.call(_config, x)) {
config[x] = _config[x];
}
}
}
var slider_width = 1000;
config.slider.width = config.width;
config.slider.height = config.height;
/*
if (content_width != null && content_width != "") {
config.width = content_width;
}
@ -2479,6 +2512,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
if (is_timeline != null && is_timeline != "") {
config.timeline = is_timeline;
}
*/
var content = "";
var _active = false;
@ -2517,19 +2551,19 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
this.width = function(w) {
if (w != null && w != "") {
config.width = w;
config.slider.width = w;
reSize();
} else {
return config.width;
return config.slider.width;
}
}
this.height = function(h) {
if (h != null && h != "") {
config.height = h;
config.slider.height = h;
reSize();
} else {
return config.height;
return config.slider.height;
}
}
/* GETTERS AND SETTERS
@ -2562,8 +2596,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
};
this.setSize = function(w, h) {
if (w != null) {config.width = w};
if (h != null) {config.height = h};
if (w != null) {config.slider.width = w};
if (h != null) {config.slider.height = h};
if (_active) {
reSize();
}
@ -2599,13 +2633,13 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
if (go_to_slide != null) {_go_to_slide = go_to_slide};
if (from_start != null) {_from_start = from_start};
current_width = config.width;
current_width = config.slider.width;
config.nav_height = VMM.Element.height(navigation.prevBtnContainer);
config.slider.nav.height = VMM.Element.height(navigation.prevBtnContainer);
config.content_width = current_width - (config.content_padding *2);
config.slider.content.width = current_width - (config.slider.content.padding *2);
VMM.Element.width($slides_items, (slides.length * config.content_width));
VMM.Element.width($slides_items, (slides.length * config.slider.content.width));
if (_from_start) {
var _pos = VMM.Element.position(slides[current_slide]);
@ -2617,14 +2651,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
positionSlides();
// Position Nav
VMM.Element.css(navigation.nextBtn, "left", (current_width - config.nav_width));
VMM.Element.height(navigation.prevBtn, config.height);
VMM.Element.height(navigation.nextBtn, config.height);
VMM.Element.css(navigation.nextBtnContainer, "top", ( (config.height/2) - (config.nav_height/2) ) );
VMM.Element.css(navigation.prevBtnContainer, "top", ( (config.height/2) - (config.nav_height/2) ) );
VMM.Element.css(navigation.nextBtn, "left", (current_width - config.slider.nav.width));
VMM.Element.height(navigation.prevBtn, config.slider.height);
VMM.Element.height(navigation.nextBtn, config.slider.height);
VMM.Element.css(navigation.nextBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) );
VMM.Element.css(navigation.prevBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) );
// Animate Changes
VMM.Element.height($slider_mask, config.height);
VMM.Element.height($slider_mask, config.slider.height);
VMM.Element.width($slider_mask, current_width);
if (_go_to_slide) {
@ -2680,9 +2714,9 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
if (typeof b.left == "number") {
var _pos = b.left;
if (_pos < -(VMM.Element.position(slides[current_slide]).left) - (config.width/3)) {
if (_pos < -(VMM.Element.position(slides[current_slide]).left) - (config.slider_width/3)) {
onNextClick();
} else if (_pos > -(VMM.Element.position(slides[current_slide]).left) + (config.width/3)) {
} else if (_pos > -(VMM.Element.position(slides[current_slide]).left) + (config.slider_width/3)) {
onPrevClick();
} else {
VMM.Element.animate($slider_container, config.duration, config.ease, {"left": -(VMM.Element.position(slides[current_slide]).left)});
@ -2740,14 +2774,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* SIZE SLIDES
================================================== */
VMM.Element.css(".slider-item", "width", config.content_width );
VMM.Element.height(".slider-item", config.height);
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-height", config.height - 50 );
VMM.Element.css(".slider-item .layout-media .media .media-container img", "max-height", config.height - 150 );
VMM.Element.css(".slider-item", "width", config.slider.content.width );
VMM.Element.height(".slider-item", config.slider.height);
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-height", config.slider.height - 50 );
VMM.Element.css(".slider-item .layout-media .media .media-container img", "max-height", config.slider.height - 150 );
/* FIX FOR NON-WEBKIT BROWSERS
================================================== */
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.content_width/100) * 60) );
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.slider.content.width/100) * 60) );
/* SOUNDCLOUD
================================================== */
@ -2756,34 +2790,32 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* RESIZE IFRAME MEDIA ELEMENTS
================================================== */
//var _iframe_height = Math.round(config.height) - 60;
var _iframe_height_full = Math.round(config.height) - 160;
var _iframe_height_full = Math.round(config.slider.height) - 160;
//var _iframe_width = Math.round((_iframe_height / 9) * 16);
var _iframe_width_full = Math.round((_iframe_height_full / 9) * 16);
var _iframe_width = (config.content_width/100)*60 ;
var _iframe_width = (config.slider.content.width/100)*60 ;
var _iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
// NORMAL
VMM.Element.height(".slider-item .media .media-container .media-frame", _iframe_height);
VMM.Element.width(".slider-item .media .media-container .media-frame", _iframe_width);
//VMM.Element.width(".slider-item .media .media-container .media-frame", _iframe_width);
//VMM.Element.css(".slider-item .media .media-container .media-frame", "max-width", config.content_width );
// IFRAME FULL SIZE VIDEO
VMM.Element.height(".slider-item .layout-media .media .media-container .media-frame", _iframe_height_full);
VMM.Element.width(".slider-item .layout-media .media .media-container .media-frame", _iframe_width_full);
// IFRAME FULL SIZE NON VIDEO
VMM.Element.height(".slider-item .layout-media .media .media-container .soundcloud", config.height - 150);
VMM.Element.width(".slider-item .layout-media .media .media-container .soundcloud", config.content_width);
VMM.Element.height(".slider-item .layout-media .media .media-container .soundcloud", config.slider.height - 150);
VMM.Element.width(".slider-item .layout-media .media .media-container .soundcloud", config.slider.content.width);
VMM.Element.width(".slider-item .layout-text-media .media .media-container .soundcloud", _iframe_width);
// MAPS
VMM.Element.height(".slider-item .media .media-container .map", _iframe_height_full);
// MAX WIDTH
VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.content_width );
VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.slider.content.width );
//VMM.Element.width(".slider-item .layout-text-media .media .media-container .media-frame", _iframe_width);
//VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-height", _iframe_height );
@ -2791,7 +2823,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
================================================== */
var pos = 0;
for(var i = 0; i < slides.length; i++) {
pos = i * (config.width+config.spacing);
pos = i * (config.slider.width+config.spacing);
VMM.Element.css(slides[i], "left", pos);
}
@ -2849,7 +2881,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Element.visible(navigation.prevBtn, false);
} else {
VMM.Element.visible(navigation.prevBtn, true);
if (config.timeline) {
if (config.type == "timeline") {
VMM.attachElement(navigation.prevDate, data[current_slide - 1].date);
}
VMM.attachElement(navigation.prevTitle, VMM.Util.unlinkify(data[current_slide - 1].title));
@ -2858,7 +2890,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Element.visible(navigation.nextBtn, false);
} else {
VMM.Element.visible(navigation.nextBtn, true);
if (config.timeline) {
if (config.type == "timeline") {
VMM.attachElement(navigation.nextDate, data[current_slide + 1].date);
}
VMM.attachElement(navigation.nextTitle, VMM.Util.unlinkify(data[current_slide + 1].title) );
@ -2867,10 +2899,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* ANIMATE SLIDE
================================================== */
if (fast) {
VMM.Element.css($slider_container, "left", -(_pos.left - config.content_padding));
VMM.Element.css($slider_container, "left", -(_pos.left - config.slider.content.padding));
} else{
VMM.Element.stop($slider_container);
VMM.Element.animate($slider_container, _duration, _ease, {"left": -(_pos.left - config.content_padding)});
VMM.Element.animate($slider_container, _duration, _ease, {"left": -(_pos.left - config.slider.content.padding)});
}
if (firstrun) {
@ -2880,7 +2912,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* SET Vertical Scoll
================================================== */
//opacitySlides(0.85);
if (VMM.Element.height(slides[current_slide]) > config.height) {
if (VMM.Element.height(slides[current_slide]) > config.slider_height) {
VMM.Element.css(".slider", "overflow-y", "scroll" );
} else {
VMM.Element.css(layout, "overflow-y", "hidden" );
@ -2901,7 +2933,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
navigation.prevBtn = VMM.appendAndGetElement($slider, "<div>", "nav-previous");
navigation.nextBtnContainer = VMM.appendAndGetElement(navigation.nextBtn, "<div>", "nav-container", temp_icon);
navigation.prevBtnContainer = VMM.appendAndGetElement(navigation.prevBtn, "<div>", "nav-container", temp_icon);
if (config.timeline) {
if (config.type == "timeline") {
navigation.nextDate = VMM.appendAndGetElement(navigation.nextBtnContainer, "<div>", "date", "1957");
navigation.prevDate = VMM.appendAndGetElement(navigation.prevBtnContainer, "<div>", "date", "1957");
}
@ -4722,13 +4754,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
//VMM.appendElement($timeline, "<div class='container main'><div class='feature'><div class='slider'></div></div><div class='navigation'></div></div>");
/* CREATE COMPONENTS
================================================== */
// SLIDER
var slider = new VMM.Slider("div.slider", 720, 400, true);
// TIMENAV
var timenav = new VMM.Timeline.TimeNav("div.navigation", 720, 400, true);
/* PRIVATE VARS
================================================== */
@ -4739,24 +4765,48 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
/* CONFIG
================================================== */
var config = VMM.Timeline.Config;
VMM.master_config.Timeline = VMM.Timeline.Config;
/* MAP TYPE
options include
Stamen Maps "toner", "watercolor", "sterrain", "toner-lines", "toner-labels"
Apple "apple"
Google "HYBRID", "ROADMAP", "SATELLITE", "TERRAIN"
================================================== */
config.maptype = "toner";
config.interval = 10;
config.something = 0;
config.width = 960;
config.height = 540;
config.spacing = 15;
config.loaded = {slider: false, timenav: false, percentloaded:0};
config.ease = "easeInOutExpo";
config.duration = 1000;
var config = {
type: "timeline",
maptype: "toner",
interval: 10,
something: 0,
width: 960,
height: 540,
spacing: 15,
loaded: {
slider: false,
timenav: false,
percentloaded:0
},
nav: {
width: 960,
height: 200
},
feature: {
width: 960,
height: 540
},
slider: {
width: 720,
height: 400,
content: {
width: 720,
height: 400,
padding: 130,
},
nav: {
width: 100,
height: 200
}
},
ease: "easeInOutExpo",
duration: 1000,
language: VMM.Language
};
VMM.Timeline.Config = config;
VMM.master_config.Timeline = VMM.Timeline.Config;
if (w != null && w != "") {
config.width = w;
@ -4772,14 +4822,19 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
config.height = VMM.Element.height($timeline);
}
config.nav_width = config.width;
config.nav_height = 200;
config.feature_width = config.width;
config.nav = {
width: config.width,
height: 200
};
config.feature = {
width: config.width,
height: config.height - config.nav.height
}
if (VMM.Browser.device == "mobile") {
config.feature_height = config.height;
config.feature.height = config.height;
} else {
config.feature_height = config.height - config.nav_height;
//config.feature.height = config.height - config.nav.height;
}
/* APPLY SUPPLIED CONFIG TO TIMELINE CONFIG
@ -4802,11 +4857,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
}
}
// SET THE LANGUAGE OBJECT
config.language = VMM.Language;
VMM.master_config.language = config.language;
/* CHECK FOR IE7
================================================== */
var ie7 = false;
@ -4816,6 +4866,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
}
}
/* CREATE COMPONENTS
================================================== */
// SLIDER
//var slider = new VMM.Slider("div.slider", 720, 400, true);
var slider = new VMM.Slider("div.slider", config);
// TIMENAV
var timenav = new VMM.Timeline.TimeNav("div.navigation", 720, 400, true);
/* ON EVENT
================================================== */
@ -4840,7 +4898,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
function reSize() {
updateSize();
slider.setSize(config.feature_width, config.feature_height);
slider.setSize(config.feature.width, config.feature.height);
timenav.setSize(config.width, config.height);
resizeSlides();
};
@ -4876,7 +4934,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
this.init = function(d) {
trace('TIMELINE INIT');
trace(VMM.Timeline.Config.language);
VMM.Util.date.setLanguage(VMM.Timeline.Config.language);
VMM.bindEvent(global, onDataReady, "DATAREADY");
@ -5015,7 +5073,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
if (d.asset.media != null && d.asset.media != "") {
_hasmedia = true;
c._media = VMM.MediaElement.create("", d.asset, true, config.feature_width, config.feature_height);
c._media = VMM.MediaElement.create("", d.asset, true, config.feature.width, config.feature.height);
}
}
@ -5047,13 +5105,13 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
config.width = VMM.Element.width($timeline);
config.height = VMM.Element.height($timeline);
config.nav_width = config.width;
config.feature_width = config.width;
config.nav.width = config.width;
config.feature.width = config.width;
if (VMM.Browser.device == "mobile") {
config.feature_height = config.height;
config.feature.height = config.height;
} else {
config.feature_height = config.height - config.nav_height - 3;
config.feature.height = config.height - config.nav.height - 3;
}
};
@ -5074,7 +5132,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
VMM.Element.show("div.navigation");
VMM.Element.show("div.nav-next");
VMM.Element.show("div.nav-previous");
VMM.Element.height(".slider-container-mask", config.feature_height);
VMM.Element.height(".slider-container-mask", config.feature.height);
}
/* CHECK FOR TABLET
================================================== */

Write Preview
Loading…
Cancel
Save