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 13 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 109
      source/js/Slider/VMM.Slider.Slide.js
  2. 37
      source/js/Slider/VMM.Slider.js

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

@ -1,24 +1,41 @@
/* Slider Slide
================================================== */
if (typeof VMM.Slider != 'undefined') {
// VMM.Slider.Slide(element, data)
VMM.Slider.Slide = function(d, _parent) {
var data = d;
var slide = {};
var media = "";
var loaded = false;
var preloaded = false;
var is_skinny = false;
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;
var $media, $text, $slide, $wrap, element, c,
data = d,
slide = {},
element = "",
media = "",
loaded = false,
preloaded = false,
is_skinny = false,
_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
================================================== */
this.show = function(skinny) {
_enqueue = false;
timer.skinny = skinny;
_removeque = false;
clearTimeout(timer.remove);
if (!loaded) {
if (preloaded) {
reLayout(skinny);
clearTimeout(timer.relayout);
timer.relayout = setTimeout(reloadLayout, times.relayout);
} else {
render(skinny);
}
@ -26,11 +43,20 @@ if (typeof VMM.Slider != 'undefined') {
};
this.hide = function() {
if (loaded) {
removeSlide();
if (loaded && !_removeque) {
_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) {
if (loaded && preloaded) {
reLayout(skinny);
@ -86,39 +112,68 @@ if (typeof VMM.Slider != 'undefined') {
/* PRIVATE
================================================== */
var render = function(skinny) {
buildSlide(skinny);
trace("RENDER " + _id);
loaded = 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() {
//VMM.attachElement(element, "");
trace("REMOVE SLIDE TIMER FINISHED");
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 (skinny) {
if (!is_skinny) {
if (!is_skinny || reload) {
VMM.Lib.removeClass($slide, "pad-left");
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;
}
} else {
if (is_skinny) {
if (is_skinny || reload) {
VMM.Lib.addClass($slide, "pad-left");
VMM.Lib.detach($text);
VMM.Lib.detach($media);
VMM.Lib.append($slide, $media);
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");
$slide = VMM.appendAndGetElement($wrap, "<div>");
@ -141,7 +196,7 @@ if (typeof VMM.Slider != 'undefined') {
/* HEADLINE
================================================== */
if (data.headline != null && data.headline != "") {
c.has.headline = true;
c.has.headline = true;
if (data.type == "start") {
c.text += VMM.createElement("h2", VMM.Util.linkify_with_twitter(data.headline, "_blank"), "start");
} else {
@ -164,6 +219,12 @@ if (typeof VMM.Slider != 'undefined') {
}
/* SLUG
================================================== */
if (data.needs_slug) {
}
/* MEDIA
================================================== */
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.text) {
if (skinny) {
if (timer.skinny) {
VMM.Lib.addClass($slide, c.layout);
is_skinny = true;
} 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) {
preloadTimeOutSlides();
} else {
for(var k = 0; k < slides.length; k++) {
slides[k].clearTimers();
}
timer = setTimeout(preloadTimeOutSlides, config.duration);
}
}
var preloadTimeOutSlides = function() {
for(var k = 0; k < slides.length; k++) {
slides[k].enqueue = true;
}
for(var j = 0; j < config.preload; j++) {
if ( !((current_slide + j) > slides.length - 1)) {
slides[current_slide + j].show();
slides[current_slide + j].enqueue = false;
}
if ( !( (current_slide - j) < 0 ) ) {
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();
}
var sizeSlide = function(slide_id) {
}
/* SIZE SLIDES
================================================== */
var sizeSlides = function() {
@ -402,10 +423,16 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
// FIX FOR NON-WEBKIT BROWSERS
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 + ".twitter .avatar img", "max-height", 32 );
VMM.Lib.css( layout_media + ".twitter .avatar img", "max-width", 32 );
VMM.Lib.css( layout_media + ".twitter .avatar img", "max-height", 32 );
VMM.Lib.css( layout_text_media + ".avatar img", "max-width", 32 );
VMM.Lib.css( layout_text_media + ".avatar img", "max-height", 32 );
VMM.Lib.css( layout_media + ".avatar img", "max-width", 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
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
VMM.Lib.width( layout_media + ".wikipedia", 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
for(var i = 0; i < slides.length; i++) {

Write Preview
Loading…
Cancel
Save