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

Major optimizations and a form of garbage collection to decrease DOM stress when dealing with lots of slides.

pull/127/merge
Zach Wise 12 years ago
parent
a20574a203
commit
639eda6ecd
2 changed files with 122 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 107
      source/js/Slider/VMM.Slider.Slide.js
  2. 37
      source/js/Slider/VMM.Slider.js

107
source/js/Slider/VMM.Slider.Slide.js
Unescape View File

@ -1,24 +1,41 @@
/* Slider Slide /* Slider Slide
================================================== */ ================================================== */
if (typeof VMM.Slider != 'undefined') { if (typeof VMM.Slider != 'undefined') {
// VMM.Slider.Slide(element, data)
VMM.Slider.Slide = function(d, _parent) { VMM.Slider.Slide = function(d, _parent) {
var data = d; var $media, $text, $slide, $wrap, element, c,
var slide = {}; data = d,
var media = ""; slide = {},
var loaded = false; element = "",
var preloaded = false; media = "",
var is_skinny = false; loaded = false,
var element = VMM.appendAndGetElement(_parent, "<div>", "slider-item"); preloaded = false,
var c = {slide:"", text: "", media: "", media_element: "", layout: "content-container layout", has: { headline: false, text: false, media: false }}; is_skinny = false,
var $media, $text, $slide, $wrap; _enqueue = true,
_removeque = false,
_id = "slide_",
timer = {pushque:"", render:"", relayout:"", remove:"", skinny:false},
times = {pushque:500, render:100, relayout:100, remove:30000};
_id = _id + data.uniqueid;
this.enqueue = _enqueue;
this.id = _id;
element = VMM.appendAndGetElement(_parent, "<div>", "slider-item");
c = {slide:"", text: "", media: "", media_element: "", layout: "content-container layout", has: { headline: false, text: false, media: false }};
/* PUBLIC /* PUBLIC
================================================== */ ================================================== */
this.show = function(skinny) { this.show = function(skinny) {
_enqueue = false;
timer.skinny = skinny;
_removeque = false;
clearTimeout(timer.remove);
if (!loaded) { if (!loaded) {
if (preloaded) { if (preloaded) {
reLayout(skinny); clearTimeout(timer.relayout);
timer.relayout = setTimeout(reloadLayout, times.relayout);
} else { } else {
render(skinny); render(skinny);
} }
@ -26,11 +43,20 @@ if (typeof VMM.Slider != 'undefined') {
}; };
this.hide = function() { this.hide = function() {
if (loaded) { if (loaded && !_removeque) {
removeSlide(); _removeque = true;
clearTimeout(timer.remove);
timer.remove = setTimeout(removeSlide, times.remove);
} }
}; };
this.clearTimers = function() {
//clearTimeout(timer.remove);
clearTimeout(timer.relayout);
clearTimeout(timer.pushque);
clearTimeout(timer.render);
};
this.layout = function(skinny) { this.layout = function(skinny) {
if (loaded && preloaded) { if (loaded && preloaded) {
reLayout(skinny); reLayout(skinny);
@ -86,39 +112,68 @@ if (typeof VMM.Slider != 'undefined') {
/* PRIVATE /* PRIVATE
================================================== */ ================================================== */
var render = function(skinny) { var render = function(skinny) {
buildSlide(skinny); trace("RENDER " + _id);
loaded = true; loaded = true;
preloaded = true; preloaded = true;
var timer = setTimeout(VMM.ExternalAPI.pushQues, 500); timer.skinny = skinny;
buildSlide();
clearTimeout(timer.pushque);
clearTimeout(timer.render);
timer.pushque = setTimeout(VMM.ExternalAPI.pushQues, times.pushque);
}; };
var removeSlide = function() { var removeSlide = function() {
//VMM.attachElement(element, ""); //VMM.attachElement(element, "");
trace("REMOVE SLIDE TIMER FINISHED");
loaded = false; loaded = false;
} VMM.Lib.detach($text);
VMM.Lib.detach($media);
var reLayout = function(skinny) { };
var reloadLayout = function() {
loaded = true;
reLayout(timer.skinny, true);
};
var reLayout = function(skinny, reload) {
if (c.has.text) { if (c.has.text) {
if (skinny) { if (skinny) {
if (!is_skinny) { if (!is_skinny || reload) {
VMM.Lib.removeClass($slide, "pad-left"); VMM.Lib.removeClass($slide, "pad-left");
VMM.Lib.detach($text); VMM.Lib.detach($text);
VMM.Lib.prepend($slide, $text); VMM.Lib.detach($media);
VMM.Lib.append($slide, $text);
VMM.Lib.append($slide, $media);
is_skinny = true; is_skinny = true;
} }
} else { } else {
if (is_skinny) { if (is_skinny || reload) {
VMM.Lib.addClass($slide, "pad-left"); VMM.Lib.addClass($slide, "pad-left");
VMM.Lib.detach($text); VMM.Lib.detach($text);
VMM.Lib.detach($media);
VMM.Lib.append($slide, $media);
VMM.Lib.append($slide, $text); VMM.Lib.append($slide, $text);
is_skinny = false is_skinny = false;
}
} }
} else if (reload) {
if (c.has.headline) {
VMM.Lib.detach($text);
VMM.Lib.append($slide, $text);
} }
VMM.Lib.detach($media);
VMM.Lib.append($slide, $media);
} }
} }
var buildSlide = function(skinny) { var buildSlide = function() {
trace("BUILDSLIDE");
$wrap = VMM.appendAndGetElement(element, "<div>", "content"); $wrap = VMM.appendAndGetElement(element, "<div>", "content");
$slide = VMM.appendAndGetElement($wrap, "<div>"); $slide = VMM.appendAndGetElement($wrap, "<div>");
@ -164,6 +219,12 @@ if (typeof VMM.Slider != 'undefined') {
} }
/* SLUG
================================================== */
if (data.needs_slug) {
}
/* MEDIA /* MEDIA
================================================== */ ================================================== */
if (data.asset != null && data.asset != "") { if (data.asset != null && data.asset != "") {
@ -179,7 +240,7 @@ if (typeof VMM.Slider != 'undefined') {
if (c.has.media){ c.layout += "-media" }; if (c.has.media){ c.layout += "-media" };
if (c.has.text) { if (c.has.text) {
if (skinny) { if (timer.skinny) {
VMM.Lib.addClass($slide, c.layout); VMM.Lib.addClass($slide, c.layout);
is_skinny = true; is_skinny = true;
} else { } else {

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

@ -279,23 +279,44 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
if (skip) { if (skip) {
preloadTimeOutSlides(); preloadTimeOutSlides();
} else { } else {
for(var k = 0; k < slides.length; k++) {
slides[k].clearTimers();
}
timer = setTimeout(preloadTimeOutSlides, config.duration); timer = setTimeout(preloadTimeOutSlides, config.duration);
} }
} }
var preloadTimeOutSlides = function() { var preloadTimeOutSlides = function() {
for(var k = 0; k < slides.length; k++) {
slides[k].enqueue = true;
}
for(var j = 0; j < config.preload; j++) { for(var j = 0; j < config.preload; j++) {
if ( !((current_slide + j) > slides.length - 1)) { if ( !((current_slide + j) > slides.length - 1)) {
slides[current_slide + j].show(); slides[current_slide + j].show();
slides[current_slide + j].enqueue = false;
} }
if ( !( (current_slide - j) < 0 ) ) { if ( !( (current_slide - j) < 0 ) ) {
slides[current_slide - j].show(); slides[current_slide - j].show();
slides[current_slide - j].enqueue = false;
}
}
if (slides.length > 50) {
for(var i = 0; i < slides.length; i++) {
if (slides[i].enqueue) {
slides[i].hide();
}
} }
} }
sizeSlides(); sizeSlides();
} }
var sizeSlide = function(slide_id) {
}
/* SIZE SLIDES /* SIZE SLIDES
================================================== */ ================================================== */
var sizeSlides = function() { var sizeSlides = function() {
@ -402,10 +423,16 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
// FIX FOR NON-WEBKIT BROWSERS // FIX FOR NON-WEBKIT BROWSERS
VMM.Lib.css( layout_text_media + "img", "max-width", mediasize.text_media.width ); VMM.Lib.css( layout_text_media + "img", "max-width", mediasize.text_media.width );
VMM.Lib.css( layout_text_media + ".twitter .avatar img", "max-width", 32 ); VMM.Lib.css( layout_text_media + ".avatar img", "max-width", 32 );
VMM.Lib.css( layout_text_media + ".twitter .avatar img", "max-height", 32 ); VMM.Lib.css( layout_text_media + ".avatar img", "max-height", 32 );
VMM.Lib.css( layout_media + ".twitter .avatar img", "max-width", 32 ); VMM.Lib.css( layout_media + ".avatar img", "max-width", 32 );
VMM.Lib.css( layout_media + ".twitter .avatar img", "max-height", 32 ); VMM.Lib.css( layout_media + ".avatar img", "max-height", 32 );
VMM.Lib.css( layout_text_media + ".article-thumb", "max-width", "50%" );
//VMM.Lib.css( layout_text_media + ".article-thumb", "max-height", 100 );
VMM.Lib.css( layout_media + ".article-thumb", "max-width", 200 );
//VMM.Lib.css( layout_media + ".article-thumb", "max-height", 100 );
// IFRAME FULL SIZE VIDEO // IFRAME FULL SIZE VIDEO
VMM.Lib.width( layout_text_media + ".media-frame", mediasize.text_media.video.width); VMM.Lib.width( layout_text_media + ".media-frame", mediasize.text_media.video.width);
@ -434,6 +461,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
// IE8 NEEDS THIS // IE8 NEEDS THIS
VMM.Lib.width( layout_media + ".wikipedia", mediasize.media.width); VMM.Lib.width( layout_media + ".wikipedia", mediasize.media.width);
VMM.Lib.width( layout_media + ".twitter", mediasize.media.width); VMM.Lib.width( layout_media + ".twitter", mediasize.media.width);
VMM.Lib.width( layout_media + ".plain-text-quote", mediasize.media.width);
VMM.Lib.width( layout_media + ".plain-text", mediasize.media.width);
// 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++) {

Write Preview
Loading…
Cancel
Save