Index: src/main/webapp/javascript/kaltura-display.js =================================================================== --- src/main/webapp/javascript/kaltura-display.js (revision 98187) +++ src/main/webapp/javascript/kaltura-display.js (working copy) @@ -16,9 +16,57 @@ // http://jshint.com/ /*global jQuery: true, kaltura: true, mediaSelector: true, alert: true, confirm: true */ $(function(){ - + + /* + * look through each of the div.kaltura-media elements that have embedded div.kaltura-media elements + * promote the embedded div.kaltura-media elements to the same level as the parent container + * if the embedded div.kaltura-media element is before the parent's image or non-blank text, + * promote it before the parent; otherwise after the parent + */ + var promoteImages = function(doc) { + $(doc).find("div.kaltura-media:has(div.kaltura-media)").each(function() { + var foundImage = false; + + // had to go native javascript in order to see the text node in context + // with the other node types. Newer versions of jQuery support "content()" function, + // which solves this problem + for (var i = 0; i < this.childNodes.length; i++) { + var child = this.childNodes[i]; + if (child.nodeName === "IMG" || (child.nodeType === 3 && child.textContent.trim() !== "")) { + foundImage = true; + } else if (child.nodeName === "DIV") { + if (!foundImage) { + $(child).insertBefore($(this)); + i--; // moving the child removes it from childNodes + } else { + $(child).insertAfter($(this)); + i--; + } + } + } + }); + }; + + var promoteText = function(doc) { + $(doc).find("div.kaltura-media").each(function(idx, div) { + var length = div.childNodes.length; + for (var i = 0; i < length; i++) { + var childNode = div.childNodes[i]; + if (childNode.nodeType === 3) { // text nodes only + $("" + childNode.textContent + "").insertAfter($(div)); + } + } + }); + }; + var displayKaltura = function(doc) { - + + promoteImages(doc); + promoteText(doc); + + // remove div's without embedded images + $(doc).find("div.kaltura-media:not(:has(img))").remove(); + // find kaltura placeholder divs and process each one $(doc).find("div.kaltura-media").each(function(idx, div){