From 639eda6ecdbdf1d76007c8c351742ba6824d938e Mon Sep 17 00:00:00 2001 From: Zach Wise Date: Sun, 27 May 2012 14:37:51 -0500 Subject: [PATCH] Major optimizations and a form of garbage collection to decrease DOM stress when dealing with lots of slides. --- source/js/Slider/VMM.Slider.Slide.js | 117 ++++++++++++++++++++------- source/js/Slider/VMM.Slider.js | 37 ++++++++- 2 files changed, 122 insertions(+), 32 deletions(-) diff --git a/source/js/Slider/VMM.Slider.Slide.js b/source/js/Slider/VMM.Slider.Slide.js index ddb910b..22d6bf7 100644 --- a/source/js/Slider/VMM.Slider.Slide.js +++ b/source/js/Slider/VMM.Slider.Slide.js @@ -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, "
", "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, "
", "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; - } - - var reLayout = function(skinny) { + VMM.Lib.detach($text); + VMM.Lib.detach($media); + }; + + 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, "
", "content"); $slide = VMM.appendAndGetElement($wrap, "
"); @@ -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 { diff --git a/source/js/Slider/VMM.Slider.js b/source/js/Slider/VMM.Slider.js index 25dc492..58b5ac7 100644 --- a/source/js/Slider/VMM.Slider.js +++ b/source/js/Slider/VMM.Slider.js @@ -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++) {