// Note: this file is not processed by Velocity
(function ($) {
ThemePress.Frames = {
calculateFrameUsingPageSections: function ($layerHolder) {
var $layoutStyles = $("#content-layout-styles", $layerHolder);
$layerHolder.empty().append($layoutStyles);
$(".columnLayout", "#rendered-page").filter(function () {
// Skip nested layouts (probably a page include)
return !$(this).parent().closest(".columnLayout").length;
}).each(function () {
var $section = $(this);
var $container = $("
").addClass("tp-content-container");
var columnTypeClasses;
if ($section.hasClass("single")) columnTypeClasses = [ "tp-full" ];
else if ($section.hasClass("two-equal")) columnTypeClasses = [ "tp-half", "tp-half" ];
else if ($section.hasClass("two-left-sidebar")) columnTypeClasses = [ "tp-three-tenths", "tp-seven-tenths" ];
else if ($section.hasClass("two-right-sidebar")) columnTypeClasses = [ "tp-seven-tenths", "tp-three-tenths" ];
else if ($section.hasClass("three-equal")) columnTypeClasses = [ "tp-third", "tp-third", "tp-third" ];
else if ($section.hasClass("three-with-sidebars")) columnTypeClasses = [ "tp-quarter", "tp-half", "tp-quarter" ];
if (!columnTypeClasses) return;
// Add a column to $container for each type in columnTypeClasses. Each column will contain a single block with
// default text indicating no content was provided.
var $noContent = $("
").addClass("no-content-provided").append($("").text("No content provided."));
var $block = $("").addClass("brikit-content-block tp-block").append($noContent);
while (columnTypeClasses.length > 0) {
var $column = $("
").addClass("tp-column").addClass(columnTypeClasses.shift()).append($block.clone());
$container.append($column);
}
var $layer = $("
").addClass("tp-layer").append($container)
$layerHolder.append($layer);
});
},
getPageBlocks: function () {
return $("#rendered-page .brikit-content-block.original:not(.from-layout)");
},
initializePageUsingFrame: function () {
var $layerHolder = $("#frame-layers");
if (!$layerHolder.length) return;
// If the layers were not provided by the template, reverse engineer the layout using Confluence page sections
var automaticLayout = $layerHolder.hasClass("automatic-layout");
if (!$layerHolder.data("frame") || automaticLayout) ThemePress.Frames.calculateFrameUsingPageSections($layerHolder);
// If there are no layers yet, then we can just use whatever was defined on the current page
if (!$(".brikit-content-block", $layerHolder).length) {
$("#rendered-page").show();
return;
}
// Use old-style Theme Press blocks as the content source.
// If none found (not an old-style Theme Press page), use Confluence page sections.
// If none found, use the entire rendered page as one block.
var $pageBlocks = ThemePress.Frames.getPageBlocks().addClass("unframed");
var fromContentBlocks = $pageBlocks.length;
if (!fromContentBlocks && !ThemePress.Frames.ignoreSections()) $pageBlocks = $("#rendered-page .innerCell");
var fromPageSections = !fromContentBlocks && $pageBlocks.length;
if (!fromContentBlocks && !fromPageSections) $pageBlocks = $("#rendered-page .brikit-content-block");
// If we have named blocks in the content source, try to match them to the template's named blocks
if (fromContentBlocks) {
$pageBlocks.filter("[data-name]").each(function () {
var $templateBlock = $(".brikit-content-block[data-name='" + $(this).data("name") + "']", "#frame-layers").first();
if ($templateBlock.length) ThemePress.Frames.replaceTemplateBlockWithPageBlock($(this), $templateBlock, true);
});
$pageBlocks = ThemePress.Frames.getPageBlocks();
}
// For each block in the frame, move the blocks found on the page, stopping when we run out of page-provided blocks.
// If there's already a block id of -1, it's from a fake layer, so we need to add an extra block when the user edits any of them.
var missingBlockId = $pageBlocks.filter("[data-content-block=-1]").length ? -2 : -1;
// Note that we skip over blocks that have content provided by the page frame
$(".tp-block, .brikit-content-block:not(.filled)", "#frame-layers").filter(function () {
var isEmpty = !$(this).children(":not(.block-toggle):not(.no-content-provided)").length;
if (!isEmpty) $(this).addClass("from-layout");
return isEmpty;
}).each(function (i) {
var $templateBlock = $(this);
if ($pageBlocks.length <= i) {
if (!fromContentBlocks && !fromPageSections) $templateBlock.attr("data-content-block", "0");
else if (fromContentBlocks) $templateBlock.attr("data-content-block", missingBlockId);
missingBlockId -= 1;
return;
}
var $pageBlock = $($pageBlocks.get(i));
// If we're rendering a simple page, extract it from the rendered-page element
if (!fromContentBlocks && !fromPageSections) {
$pageBlock = $pageBlock.contents();
}
// If we're dealing with page sections, then disable block editing and remove the innerCell class to simplify formatting
else if (fromPageSections) {
$pageBlock.removeClass("innerCell").addClass("tp-block-liner");
$templateBlock.removeAttr("data-content-block")
}
ThemePress.Frames.replaceTemplateBlockWithPageBlock($pageBlock, $templateBlock, fromContentBlocks);
});
// Hide the no-content message in page frame blocks for which there is no matching page content to fill.
$(".no-content-provided").hide();
// For automatic layouts, make the blocks in each layer draw the same height
if (automaticLayout) $(".tp-layer", $layerHolder).each(function () {
var $blocks = $(".tp-block", this);
var height = 0;
$blocks.each(function() { height = Math.max(height, $(this).height()); });
$blocks.css("min-height", height);
});
},
ignoreSections: function () {
return $("#frame-layers.ignore-sections").length;
},
isPageUsingFrame: function () {
return $("#main-content.frames").length;
},
replaceTemplateBlockWithPageBlock: function ($pageBlock, $templateBlock, fromContentBlocks) {
var templateStyle = $templateBlock.attr("style");
var pageStyle = $pageBlock.attr("style");
$pageBlock.attr("style", (templateStyle ? $templateBlock.attr("style") + " " : "") + (pageStyle ? $pageBlock.attr("style") : ""));
if (fromContentBlocks) {
$templateBlock.replaceWith($pageBlock.addClass("filled"));
// Transfer block settings from page frame to page
$pageBlock.adjustClass("mobile-hide", $templateBlock.hasClass("mobile-hide"));
$pageBlock.adjustClass("not-tabbed", $templateBlock.hasClass("not-tabbed"));
$pageBlock.adjustClass("brikit-content-alternate-style", $templateBlock.hasClass("brikit-content-alternate-style"));
$pageBlock.adjustClass("rich-link-hovers", $templateBlock.hasClass("rich-link-hovers"));
if (typeof($pageBlock.data("name")) == "undefined") $pageBlock.attr("data-name", $templateBlock.data("name"));
$pageBlock.removeClass("unframed");
}
else {
$pageBlock.addClass("not-from-block from-layout");
$templateBlock.empty().append($pageBlock);
}
}
};
ThemePress.Frames.initializePageUsingFrame();
})(jQuery);