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

Rewrote the responsive sizing of slides. Much better now for skinny sizes

pull/75/head
Zach Wise 13 years ago
parent
3bbd301d2a
commit
aebcc93464
16 changed files with 218 additions and 154 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. 6
      locale/de.js
  2. 6
      locale/en.js
  3. 6
      locale/es.js
  4. 6
      locale/fr.js
  5. 6
      locale/is.js
  6. 6
      locale/it.js
  7. 6
      locale/kr.js
  8. 6
      locale/nl.js
  9. 6
      locale/pt-br.js
  10. 6
      locale/zh-ch.js
  11. 6
      locale/zh-tw.js
  12. 124
      source/js/VMM.Slider.js
  13. 2
      source/js/VMM.Timeline.js
  14. 24
      source/js/VMM.Util.js
  15. 6
      timeline-min.js
  16. 150
      timeline.js

6
locale/de.js
View File

File diff suppressed because one or more lines are too long

6
locale/en.js
View File

File diff suppressed because one or more lines are too long

6
locale/es.js
View File

File diff suppressed because one or more lines are too long

6
locale/fr.js
View File

File diff suppressed because one or more lines are too long

6
locale/is.js
View File

File diff suppressed because one or more lines are too long

6
locale/it.js
View File

File diff suppressed because one or more lines are too long

6
locale/kr.js
View File

File diff suppressed because one or more lines are too long

6
locale/nl.js
View File

File diff suppressed because one or more lines are too long

6
locale/pt-br.js
View File

File diff suppressed because one or more lines are too long

6
locale/zh-ch.js
View File

File diff suppressed because one or more lines are too long

6
locale/zh-tw.js
View File

File diff suppressed because one or more lines are too long

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

@ -284,26 +284,35 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* SIZE SLIDES
================================================== */
var sizeSlides = function() {
var layout_text_media = ".slider-item .layout-text-media .media .media-container ";
var layout_media = ".slider-item .layout-media .media .media-container ";
var layout_both = ".slider-item .media .media-container";
var mediasize = {
text_media: {
width: (config.slider.content.width/100) * 60,
height: config.slider.height - 60,
video: {
width: 0,
height: 0
}
},
media: {
width: config.slider.content.width,
height: config.slider.height - 110,
video: {
width: 0,
height: 0
}
}
}
mediasize.text_media.video = VMM.Util.ratio.fit(mediasize.text_media.width, mediasize.text_media.height, 16, 9);
mediasize.media.video = VMM.Util.ratio.fit(mediasize.media.width, mediasize.media.height, 16, 9);
VMM.Element.css(".slider-item", "width", config.slider.content.width );
VMM.Element.height(".slider-item", config.slider.height);
/* RESIZE IFRAME MEDIA ELEMENTS
================================================== */
var _iframe_height_full = Math.round(config.slider.height) - 160;
var _iframe_width_full = Math.round(config.slider.content.width);
var _iframe_height_full_video = Math.round((_iframe_width_full / 16) * 9) + 25;
var _iframe_width = (config.slider.content.width/100)*60 ;
var _iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
/* MEDIA HEIGHT
================================================== */
var _media_height = Math.round(config.slider.height) - 160;
var _media_width_with_text = ((config.slider.content.width/100) * 60);
/* HANDLE SMALLER SIZES
================================================== */
// HANDLE SMALLER SIZES
var is_skinny = false;
if (current_width <= 650) {
@ -315,12 +324,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
if (is_skinny) {
_media_height = ((config.slider.height/100) * 80 ) - 40;
_iframe_width = config.slider.content.width;
_iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
_iframe_height_full = Math.round((_iframe_width / 16) * 9) + 25;
_media_width_with_text = config.slider.content.width;
mediasize.text_media.width = config.slider.content.width;
mediasize.text_media.height = ((config.slider.height/100) * 50 ) - 50;
//mediasize.media.height = ((config.slider.height/100) * 80 ) - 40;
mediasize.media.height = ((config.slider.height/100) * 70 ) - 40;
mediasize.text_media.video = VMM.Util.ratio.fit(mediasize.text_media.width, mediasize.text_media.height, 16, 9);
mediasize.media.video = VMM.Util.ratio.fit(mediasize.media.width, mediasize.media.height, 16, 9);
VMM.Element.css(".slider-item .layout-text-media .text", "width", "100%" );
VMM.Element.css(".slider-item .layout-text-media .text", "display", "block" );
@ -332,15 +343,18 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Element.css(".slider-item .media blockquote p", "line-height", "18px" );
VMM.Element.css(".slider-item .media blockquote p", "font-size", "16px" );
VMM.Element.css(".slider-item .content", "height", config.slider.height );
VMM.Element.css(".slider-item", "display", "block" );
VMM.Element.css(".slider-item", "overflow-y", "auto" );
// MAINTAINS VERTICAL CENTER IF IT CAN
for(var i = 0; i < slides.length; i++) {
if (VMM.Element.height(VMM.Element.find( slides[i], ".content")) > config.slider.height) {
VMM.Element.css(slides[i], "display", "block" );
} else {
VMM.Element.css(slides[i], "display", "table" );
}
}
} else {
_media_height = config.slider.height - 40;
_iframe_width = (config.slider.content.width/100)*60 ;
_iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
_media_width_with_text = ((config.slider.content.width/100) * 60);
VMM.Element.css(".slider-item .layout-text-media .text", "width", "40%" );
VMM.Element.css(".slider-item .layout-text-media .text", "display", "table-cell" );
@ -358,45 +372,45 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
// MEDIA FRAME
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 );
VMM.Element.css( layout_text_media + ".media-frame", "max-width", mediasize.text_media.width);
VMM.Element.height( layout_text_media + ".media-frame", mediasize.text_media.height);
VMM.Element.width( layout_text_media + ".media-frame", mediasize.text_media.width);
// IMAGES
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-height", _media_height );
VMM.Element.css(".slider-item .layout-media .media .media-container img", "max-height", _media_height - 60 );
VMM.Element.css( layout_text_media + "img", "max-height", mediasize.text_media.height );
VMM.Element.css( layout_media + "img", "max-height", mediasize.media.height );
/* FIX FOR NON-WEBKIT BROWSERS
================================================== */
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", _media_width_with_text );
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", _media_width_with_text );
VMM.Element.css(".slider-item .media .media-container .twitter .avatar img", "max-width", 32 );
VMM.Element.css(".slider-item .media .media-container .twitter .avatar img", "max-height", 32 );
// 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);
// FIX FOR NON-WEBKIT BROWSERS
VMM.Element.css( layout_text_media + "img", "max-width", mediasize.text_media.width );
VMM.Element.css( layout_text_media + ".twitter .avatar img", "max-width", 32 );
VMM.Element.css( layout_text_media + ".twitter .avatar img", "max-height", 32 );
VMM.Element.css( layout_media + ".twitter .avatar img", "max-width", 32 );
VMM.Element.css( layout_media + ".twitter .avatar img", "max-height", 32 );
// IFRAME FULL SIZE VIDEO
VMM.Element.height(".slider-item .layout-media .media .media-container .media-frame", _iframe_height_full_video);
VMM.Element.width(".slider-item .layout-media .media .media-container .media-frame", _iframe_width_full);
VMM.Element.width( layout_text_media + ".media-frame", mediasize.text_media.video.width);
VMM.Element.height( layout_text_media + ".media-frame", mediasize.text_media.video.height);
VMM.Element.width( layout_media + ".media-frame", mediasize.media.video.width);
VMM.Element.height( layout_media + ".media-frame", mediasize.media.video.height);
VMM.Element.css( layout_media + ".media-frame", "max-height", mediasize.media.video.height);
VMM.Element.css( layout_media + ".media-frame", "max-width", mediasize.media.video.width);
// SOUNDCLOUD
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);
VMM.Element.css(".slider-item .media .media-container .soundcloud", "max-height", 168 );
VMM.Element.height( layout_media + ".soundcloud", 168);
VMM.Element.width( layout_media + ".soundcloud", mediasize.media.width);
VMM.Element.width( layout_text_media + ".soundcloud", mediasize.text_media.width);
VMM.Element.css( layout_both + ".soundcloud", "max-height", 168 );
// MAPS
VMM.Element.height(".slider-item .layout-text-media .media .media-container .map", _iframe_height);
VMM.Element.height(".slider-item .layout-media .media .media-container .map", _iframe_height_full_video);
VMM.Element.width(".slider-item .layout-media .media .media-container .map", _iframe_width_full);
VMM.Element.height( layout_text_media + ".map", mediasize.text_media.height);
VMM.Element.css( layout_media + ".map", "max-height", mediasize.media.height);
VMM.Element.width( layout_media + ".map", mediasize.media.width);
// DOCS
VMM.Element.height(".slider-item .layout-text-media .media .media-container .doc", _iframe_height);
VMM.Element.height(".slider-item .layout-media .media .media-container .doc", _iframe_height_full+60);
VMM.Element.height( layout_text_media + ".doc", mediasize.text_media.height);
VMM.Element.height( layout_media + ".doc", mediasize.media.height);
trace(mediasize);
}
/* POSITION SLIDES

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

@ -58,7 +58,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
timeline_id = "#timeline";
}
version = "0.98.2";
version = "0.98.3";
trace("TIMELINE VERSION " + version);

24
source/js/VMM.Util.js
Unescape View File

@ -68,10 +68,28 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
},
ratio: {
/* Get the corresponding ratio number
================================================== */
// VMM.Util.ratio.r16_9(w, h) // Returns corresponding number
fit: function(w, h, ratio_w, ratio_h) {
//VMM.Util.ratio.fit(w, h, ratio_w, ratio_h).width;
var _fit = {width:0,height:0};
// TRY WIDTH FIRST
_fit.width = w;
//_fit.height = Math.round((h / ratio_h) * ratio_w);
_fit.height = Math.round((w / ratio_w) * ratio_h);
if (_fit.height > h) {
_fit.height = h;
//_fit.width = Math.round((w / ratio_w) * ratio_h);
_fit.width = Math.round((h / ratio_h) * ratio_w);
if (_fit.width > w) {
trace("FIT: DIDN'T FIT!!! ")
}
}
return _fit;
},
r16_9: function(w,h) {
//VMM.Util.ratio.r16_9(w, h) // Returns corresponding number
if (w !== null && w !== "") {
return Math.round((h / 16) * 9);
} else if (h !== null && h !== "") {

6
timeline-min.js vendored
View File

File diff suppressed because one or more lines are too long

150
timeline.js
Unescape View File

@ -3448,26 +3448,35 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* SIZE SLIDES
================================================== */
var sizeSlides = function() {
var layout_text_media = ".slider-item .layout-text-media .media .media-container ";
var layout_media = ".slider-item .layout-media .media .media-container ";
var layout_both = ".slider-item .media .media-container";
var mediasize = {
text_media: {
width: (config.slider.content.width/100) * 60,
height: config.slider.height - 60,
video: {
width: 0,
height: 0
}
},
media: {
width: config.slider.content.width,
height: config.slider.height - 110,
video: {
width: 0,
height: 0
}
}
}
mediasize.text_media.video = VMM.Util.ratio.fit(mediasize.text_media.width, mediasize.text_media.height, 16, 9);
mediasize.media.video = VMM.Util.ratio.fit(mediasize.media.width, mediasize.media.height, 16, 9);
VMM.Element.css(".slider-item", "width", config.slider.content.width );
VMM.Element.height(".slider-item", config.slider.height);
/* RESIZE IFRAME MEDIA ELEMENTS
================================================== */
var _iframe_height_full = Math.round(config.slider.height) - 160;
var _iframe_width_full = Math.round(config.slider.content.width);
var _iframe_height_full_video = Math.round((_iframe_width_full / 16) * 9) + 25;
var _iframe_width = (config.slider.content.width/100)*60 ;
var _iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
/* MEDIA HEIGHT
================================================== */
var _media_height = Math.round(config.slider.height) - 160;
var _media_width_with_text = ((config.slider.content.width/100) * 60);
/* HANDLE SMALLER SIZES
================================================== */
// HANDLE SMALLER SIZES
var is_skinny = false;
if (current_width <= 650) {
@ -3479,12 +3488,14 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
if (is_skinny) {
_media_height = ((config.slider.height/100) * 80 ) - 40;
_iframe_width = config.slider.content.width;
_iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
_iframe_height_full = Math.round((_iframe_width / 16) * 9) + 25;
_media_width_with_text = config.slider.content.width;
mediasize.text_media.width = config.slider.content.width;
mediasize.text_media.height = ((config.slider.height/100) * 50 ) - 50;
//mediasize.media.height = ((config.slider.height/100) * 80 ) - 40;
mediasize.media.height = ((config.slider.height/100) * 70 ) - 40;
mediasize.text_media.video = VMM.Util.ratio.fit(mediasize.text_media.width, mediasize.text_media.height, 16, 9);
mediasize.media.video = VMM.Util.ratio.fit(mediasize.media.width, mediasize.media.height, 16, 9);
VMM.Element.css(".slider-item .layout-text-media .text", "width", "100%" );
VMM.Element.css(".slider-item .layout-text-media .text", "display", "block" );
@ -3496,15 +3507,18 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Element.css(".slider-item .media blockquote p", "line-height", "18px" );
VMM.Element.css(".slider-item .media blockquote p", "font-size", "16px" );
VMM.Element.css(".slider-item .content", "height", config.slider.height );
VMM.Element.css(".slider-item", "display", "block" );
VMM.Element.css(".slider-item", "overflow-y", "auto" );
// MAINTAINS VERTICAL CENTER IF IT CAN
for(var i = 0; i < slides.length; i++) {
if (VMM.Element.height(VMM.Element.find( slides[i], ".content")) > config.slider.height) {
VMM.Element.css(slides[i], "display", "block" );
} else {
VMM.Element.css(slides[i], "display", "table" );
}
}
} else {
_media_height = config.slider.height - 40;
_iframe_width = (config.slider.content.width/100)*60 ;
_iframe_height = Math.round((_iframe_width / 16) * 9) + 25;
_media_width_with_text = ((config.slider.content.width/100) * 60);
VMM.Element.css(".slider-item .layout-text-media .text", "width", "40%" );
VMM.Element.css(".slider-item .layout-text-media .text", "display", "table-cell" );
@ -3522,45 +3536,45 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
}
// MEDIA FRAME
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 );
VMM.Element.css( layout_text_media + ".media-frame", "max-width", mediasize.text_media.width);
VMM.Element.height( layout_text_media + ".media-frame", mediasize.text_media.height);
VMM.Element.width( layout_text_media + ".media-frame", mediasize.text_media.width);
// IMAGES
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-height", _media_height );
VMM.Element.css(".slider-item .layout-media .media .media-container img", "max-height", _media_height - 60 );
/* FIX FOR NON-WEBKIT BROWSERS
================================================== */
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", _media_width_with_text );
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", _media_width_with_text );
VMM.Element.css(".slider-item .media .media-container .twitter .avatar img", "max-width", 32 );
VMM.Element.css(".slider-item .media .media-container .twitter .avatar img", "max-height", 32 );
VMM.Element.css( layout_text_media + "img", "max-height", mediasize.text_media.height );
VMM.Element.css( layout_media + "img", "max-height", mediasize.media.height );
// 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);
// FIX FOR NON-WEBKIT BROWSERS
VMM.Element.css( layout_text_media + "img", "max-width", mediasize.text_media.width );
VMM.Element.css( layout_text_media + ".twitter .avatar img", "max-width", 32 );
VMM.Element.css( layout_text_media + ".twitter .avatar img", "max-height", 32 );
VMM.Element.css( layout_media + ".twitter .avatar img", "max-width", 32 );
VMM.Element.css( layout_media + ".twitter .avatar img", "max-height", 32 );
// IFRAME FULL SIZE VIDEO
VMM.Element.height(".slider-item .layout-media .media .media-container .media-frame", _iframe_height_full_video);
VMM.Element.width(".slider-item .layout-media .media .media-container .media-frame", _iframe_width_full);
VMM.Element.width( layout_text_media + ".media-frame", mediasize.text_media.video.width);
VMM.Element.height( layout_text_media + ".media-frame", mediasize.text_media.video.height);
VMM.Element.width( layout_media + ".media-frame", mediasize.media.video.width);
VMM.Element.height( layout_media + ".media-frame", mediasize.media.video.height);
VMM.Element.css( layout_media + ".media-frame", "max-height", mediasize.media.video.height);
VMM.Element.css( layout_media + ".media-frame", "max-width", mediasize.media.video.width);
// SOUNDCLOUD
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);
VMM.Element.css(".slider-item .media .media-container .soundcloud", "max-height", 168 );
VMM.Element.height( layout_media + ".soundcloud", 168);
VMM.Element.width( layout_media + ".soundcloud", mediasize.media.width);
VMM.Element.width( layout_text_media + ".soundcloud", mediasize.text_media.width);
VMM.Element.css( layout_both + ".soundcloud", "max-height", 168 );
// MAPS
VMM.Element.height(".slider-item .layout-text-media .media .media-container .map", _iframe_height);
VMM.Element.height(".slider-item .layout-media .media .media-container .map", _iframe_height_full_video);
VMM.Element.width(".slider-item .layout-media .media .media-container .map", _iframe_width_full);
VMM.Element.height( layout_text_media + ".map", mediasize.text_media.height);
VMM.Element.css( layout_media + ".map", "max-height", mediasize.media.height);
VMM.Element.width( layout_media + ".map", mediasize.media.width);
// DOCS
VMM.Element.height(".slider-item .layout-text-media .media .media-container .doc", _iframe_height);
VMM.Element.height(".slider-item .layout-media .media .media-container .doc", _iframe_height_full+60);
VMM.Element.height( layout_text_media + ".doc", mediasize.text_media.height);
VMM.Element.height( layout_media + ".doc", mediasize.media.height);
trace(mediasize);
}
/* POSITION SLIDES
@ -3817,10 +3831,28 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
},
ratio: {
/* Get the corresponding ratio number
================================================== */
// VMM.Util.ratio.r16_9(w, h) // Returns corresponding number
fit: function(w, h, ratio_w, ratio_h) {
//VMM.Util.ratio.fit(w, h, ratio_w, ratio_h).width;
var _fit = {width:0,height:0};
// TRY WIDTH FIRST
_fit.width = w;
//_fit.height = Math.round((h / ratio_h) * ratio_w);
_fit.height = Math.round((w / ratio_w) * ratio_h);
if (_fit.height > h) {
_fit.height = h;
//_fit.width = Math.round((w / ratio_w) * ratio_h);
_fit.width = Math.round((h / ratio_h) * ratio_w);
if (_fit.width > w) {
trace("FIT: DIDN'T FIT!!! ")
}
}
return _fit;
},
r16_9: function(w,h) {
//VMM.Util.ratio.r16_9(w, h) // Returns corresponding number
if (w !== null && w !== "") {
return Math.round((h / 16) * 9);
} else if (h !== null && h !== "") {
@ -4773,7 +4805,7 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
timeline_id = "#timeline";
}
version = "0.98.2";
version = "0.98.3";
trace("TIMELINE VERSION " + version);

Write Preview
Loading…
Cancel
Save