| Current Path : /home/poneycluc/www/plugins/system/t4/admin/assets/js/ |
| Current File : /home/poneycluc/www/plugins/system/t4/admin/assets/js/preview.js |
(function ($) {
var $previewiframe,
previewiframe,
cssTplStyle,
cssTplPalette,
t4_site_root_url,
t4previewkey,
tempId;
var addPreviewInfo = function (url) {
if (url.indexOf("templateStyle") == -1) {
url += url.indexOf("?") > -1 ? "&" : "?";
url += "t4preview=" + t4previewkey + "&templateStyle=" + tempId;
}
var layoutpreview = $("#t4-preview-layout").prop("checked");
if (layoutpreview) {
url += "&t4previewlayout=1";
}
return url;
};
var removeParamUrl = function (url, name) {
var linkbase = url.match(/^[^\#\?]+/) ? url.match(/^[^\#\?]+/)[0] : t4_site_root_url;
var parammer = url.match(/\?(.+)+$/) ? url.match(/\?(.+)+$/)[1].split("&") : [];
parammer.forEach(function (val, i) {
if (val.indexOf(name) != -1) {
parammer.splice(i, 1);
}
});
var changeUrl = parammer.length !== 0 ? linkbase + "?" + parammer.join("&") : linkbase;
return changeUrl;
};
var removePreviewInfo = function (url) {
url = removeParamUrl(url, "t4preview");
url = removeParamUrl(url, "templateStyle");
url = removeParamUrl(url, "t4previewlayout");
// remove t4prevew & templateStyle params
// store
return url;
};
var getPreviewLink = function (link) {
if (!link) link = sessionStorage.getItem("last_preview_link_" + tempId);
if (!link) {
// get default link
link = t4_site_root_url + $previewiframe.data("link");
}
if (!link || link.indexOf(t4_site_root_url) !== 0) link = t4_site_root_url;
return addPreviewInfo(link);
};
var updatePreviewLink = function (link) {
if (!link || link.indexOf(t4_site_root_url) !== 0) return;
sessionStorage.setItem(
"last_preview_link_" + tempId,
removePreviewInfo(link)
);
};
var removePreviewLink = function () {
sessionStorage.removeItem("last_preview_link_" + tempId);
};
var previewTimeout = 0;
var reloadPreview = function (link) {
clearTimeout(previewTimeout);
previewTimeout = setTimeout(function () {
_reloadPreview(link);
}, 10);
};
var _reloadPreview = function (link) {
if (typeof link !== "string") link = "";
// no preview for external link
if (link && link.indexOf(t4_site_root_url) !== 0) {
link = "";
}
var previewlink = getPreviewLink(link);
if (previewiframe.src != previewlink) {
previewiframe.src = previewlink;
// store for next view
updatePreviewLink(previewlink);
} else {
previewiframe.contentWindow.location.reload();
}
};
var reloadAssets = function (e) {
// load fonts
// apply css
// compile style.tpl.css
var params = {};
var root_Lighten_Darken = [];
var root_css = [];
root_Lighten_Darken.push(":root{");
root_css.push(":root{");
var base_color = [
"color_blue",
"color_indigo",
"color_purple",
"color_pink",
"color_red",
"color_orange",
"color_yellow",
"color_green",
"color_teal",
"color_cyan",
];
// get all styles value
$('[name^="typelist-theme["]').each(function () {
var $input = $(this),
name = this.name.substring(
"typelist-theme[".length,
this.name.length - 1
),
val = $input.val();
if (name.match(/_color$/) && !val.match(/^(#|rgb)/)) {
val = $input.data("val") ? $input.data("val") : val;
val = val.replace(/\s/g, "-").replace(/_/g, "-").toLowerCase();
if (val.match(/user/)) {
val = val.replace(/user-/g, "").toLowerCase();
}
params[name] = "var(--" + val + ")";
}
if (base_color.indexOf(name) > -1) {
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-100" + ":" + tinycolor(val).lighten(40).toHexString() + ";" );
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-200" + ":" + tinycolor(val).lighten(30).toHexString() + ";" );
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-300" + ":" + tinycolor(val).lighten(20).toHexString() + ";" );
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-400" + ":" + tinycolor(val).lighten(10).toHexString() + ";" );
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-500" + ":" + tinycolor(val).lighten(0).toHexString() + ";" );
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-600" + ":" + tinycolor(val).darken(10).toHexString() + ";" );
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-700" + ":" + tinycolor(val).darken(20).toHexString() + ";" );
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-800" + ":" + tinycolor(val).darken(30).toHexString() + ";" );
root_Lighten_Darken.push( "--" + name.replace(/_/g, "-") + "-900" + ":" + tinycolor(val).darken(40).toHexString() + ";" );
}
if (name != "styles_palettes") {
params[name] = val;
root_css.push("--" + name.replace(/_/g, "-") + ":" + val + ";");
}
});
$('[name^="typelist-site["]').each(function () {
var $input = $(this),
name = this.name.substring(
"typelist-site[".length,
this.name.length - 1
),
val = $input.val();
if (name == "body_bg_img") val = t4_site_root_url + val;
if (name.match(/_font_weight/)) {
if (val && val.match(/i/)) {
val = val.replace("i", "");
params[name.replace("_weight", "_style")] = "italic";
} else if (val && !val.match(/i/)) {
params[name.replace("_weight", "_style")] = "normal";
} else {
params[name.replace("_weight", "_style")] = "inherit";
}
}
//if(name.match(/letter_spacing/) && val != 'normal') val = val+"px";
if (name == "megamenu_typo_onoff") {
val = $input.prop("checked");
}
params[name] = val;
});
root_css.push("}");
root_Lighten_Darken.push("}");
if (!params.megamenu_typo_onoff) {
params.megamenu_font_family = "inherit";
params.megamenu_font_size = "";
params.megamenu_font_weight = "";
params.megamenu_font_style = "";
params.megamenu_line_height = "";
params.megamenu_letter_spacing = "";
}
var coreCss = compileCss(cssTplStyle, params);
// update init lighten darken base color
coreCss += "\n" + root_css.join("\n");
coreCss += "\n" + root_Lighten_Darken.join("\n");
addCss(coreCss, "core");
// compile palette css
var pattern_css = "";
//var palettes = $('[name="jform[params][system_palettes]"]').val();
var palettes = getPalettes();
// update alias
if (palettes) {
for (var pname in palettes) {
var palette = $.extend(true, {}, palettes[pname]);
for (var name in palette) {
var val = palette[name];
if (name.match(/_color$/) && !val.match(/^(#|rgb)/)) {
val = val.replace(/\s/g, "-").replace(/_/g, "-").toLowerCase();
if (val.match(/user/)) {
val = val.replace(/user-/g, "").toLowerCase();
}
palette[name] = "var(--" + val + ")";
}
}
palette["class"] = "t4-palette-" + pname.toLowerCase();
pattern_css += compileCss(cssTplPalette, palette) + "\n";
}
addCss(pattern_css, "pattern");
}
loadFonts();
// remove preview css
//$previewiframe.contents().find('link[href$="' + tempId + '-preview.css"]').remove();
};
var getPalettes = function () {
var palettes = {};
$(".group_palette .pattern-list > .pattern").each(function (i, el) {
var data = $(el).data();
if (!data.title) return;
if (!data.class)
data.class = data.title.toLowerCase().replace(/\s/g, " ");
palettes[data.class] = data;
});
return palettes;
};
var loadFonts = function () {
var $fonts = $('[id$="_font_family"]'),
fonts = [];
$('[id$="_font_family"]').each(function () {
var $font = $(this),
family = $font.val(),
baseid = this.id.replace(/^(.*)_family$/, "$1"),
weight = $("#" + baseid + "_weight").val(),
load_weight = $font.data("loadweights"),
isGoogle = $font.data("fonttype") == "google";
if (isGoogle) {
var weights = load_weight ? load_weight.split(",") : [];
weights.push(weight ? weight : 400);
weights = weights.filter(function (v, i, a) {
return a.indexOf(v) === i;
});
if (family && family != "inherit")
fonts.push(family + ":" + weights.join(","));
}
});
let tofFont = $("#typelist_theme_dont_use_google_font").val();
// remove current
if (!tofFont && fonts.length) {
// add new
addStylesheet(
"https://fonts.googleapis.com/css?family=" + fonts.join("|"),
"google-font"
);
}
};
var compileCss = function (css_tpl, params) {
css_tpl = css_tpl.replace(/\{/g, "{\n");
css_tpl = css_tpl.replace(/\}/g, "\n}");
var arr = css_tpl.split("\n");
var result = [];
var re = /__([0-9a-z_]+)/gi;
for (var i = 0; i < arr.length; i++) {
var s = arr[i].trim();
if (!s) continue;
var match;
var replaced = false,
found = false;
while ((match = re.exec(s))) {
found = true;
var name = match[1],
val = params[name];
if (val) {
s = s.replace(match[0], val);
replaced = true;
}
}
if (replaced || !found) {
result.push(s);
}
}
css = result.join("\n");
return css;
};
var addStylesheet = function (url, name) {
var $preview_doc = $previewiframe.contents(),
id = "custom-stylesheet-" + name,
$preview_style = $preview_doc.find("#" + id);
if ($preview_style.length) {
// replace content
$preview_style.replaceWith(
'<link id="' +
id +
'" href="' +
url +
'" rel="stylesheet">'
);
} else {
$preview_doc
.find("head")
.append(
'<link id="' +
id +
'" href="' +
url +
'" rel="stylesheet">'
);
}
};
var addCss = function (css, name) {
var $preview_doc = $previewiframe.contents(),
id = "custom-style-" + name,
$preview_style = $preview_doc.find("#" + id);
if ($preview_style.length) {
// replace content
$preview_style.replaceWith('<style id="' + id + '">' + css + "</style>");
} else {
// insert before custom css
var $customcss = $preview_doc.find('link[href*="custom.css"]');
var $newcss = $('<style id="' + id + '">' + css + "</style>");
if ($customcss.length) {
$newcss.insertBefore($customcss);
} else {
$preview_doc.find("head").append($newcss);
}
}
};
var postdataTimeout = {};
var postDraft = function (type, data, firstInit) {
// if (!lastPostData[type]) {
// lastPostData[type] = JSON.stringify(data);
// return;
// }
// if (type != 'layout' && lastPostData[type] == JSON.stringify(data)) return;
// lastPostData[type] = JSON.stringify(data);
if (typeof firstInit == undefined) firstInit = false;
// using timeout
if (postdataTimeout[type]) clearTimeout(postdataTimeout[type]);
postdataTimeout[type] = setTimeout(function () {
// save draft data
var url =
location.pathname +
"?option=com_ajax&plugin=t4&format=json&t4do=draft&id=" +
tempId;
$.post(url, { task: "save", type: type, data: data }).then(function (
response
) {
if (response.ok) {
if (!firstInit) reloadPreview();
} else {
T4Admin.Messages(response.error, "error");
}
});
}, 100);
};
var init = function () {
$previewiframe = $("#custom-style-preview iframe");
previewiframe = $previewiframe.get(0);
t4_site_root_url = window.t4_site_root_url;
cssTplStyle = window.cssTplStyle || "";
cssTplPalette = window.cssTplPalette || "";
t4previewkey = window.t4previewkey || "";
tempId = window.tempId || "";
// register events
$previewiframe.on("load", function (e) {
// Event for link click
$previewiframe.contents().on("click", "a", function (e) {
e.preventDefault();
reloadPreview(this.href);
return false;
});
// store for next view
var previewurl = $previewiframe.data('link') || previewiframe.contentWindow.location.href;
updatePreviewLink(previewurl);
// reload assets
clearTimeout(assetTimeout);
assetTimeout = setTimeout(reloadAssets, 50);
});
//
// $(document).on('reload-preview', reloadPreview);
$(document).on("reload-assets", reloadAssets);
var assetTimeout = 0;
$("body").on("change", '[name^="jform[params][styles_"]', reloadAssets);
$('input.custom-color-item, [name^="typelist-theme["]').on(
"change",
function (e) {
// clearTimeout(assetTimeout);
// assetTimeout = setTimeout(reloadAssets, 50);
var $this = $(e.target);
var typelist = $this.closest(".typelist").data("typelist");
if (!typelist.editting) return;
if (!typelist.firstInit && !typelist.saved) {
typelist.saveButtonAct(true);
} else {
typelist.saveButtonAct(false);
typelist.saved = false;
}
typelist.firstInit = false;
}
);
$('[name^="typelist-navigation["]').on("change", function (e) {
var $this = $(e.target);
var typelist = $this.closest(".typelist").data("typelist");
if (!typelist.editting) return;
if (!typelist.firstInit && !typelist.saved) {
typelist.saveButtonAct(true);
} else {
typelist.saveButtonAct(false);
typelist.saved = false;
}
postDraft("navigation", typelist.val(), typelist.firstInit);
typelist.firstInit = false;
});
$('[name^="typelist-site["]').on("change", function (e) {
var $this = $(this);
var typelist = $this.closest(".typelist").data("typelist");
if (!typelist.editting) return;
if (!typelist.firstInit && !typelist.saved) {
typelist.saveButtonAct(true);
} else {
typelist.saveButtonAct(false);
typelist.saved = false;
}
postDraft("site", typelist.val(), typelist.firstInit);
typelist.firstInit = false;
});
$('.joomla-modal').on('hidden.bs.modal', function (e) {
var $this = $(this);
var typelist = $this.closest(".typelist").data("typelist");
if(typelist) typelist.saveButtonAct(true);
});
$(document).on("click", ".reload-preview", function () {
removePreviewLink();
reloadPreview();
});
$("#t4-preview-layout").on("change", function (e) {
reloadPreview();
});
$("input.t4-layouts").on("change", function (e) {
var $this = $(e.target);
var typelist = $this.closest(".typelist").data("typelist");
if (!typelist.editting) return;
if (!typelist.firstInit && !typelist.saved) {
typelist.saveButtonAct(true);
} else {
typelist.saveButtonAct(false);
}
postDraft("layout", typelist.val(), typelist.firstInit);
typelist.firstInit = false;
});
$(".t4-draft-preview").on("change", function (e) {
var $this = $(this);
postDraft("sub-layout", $this.val());
});
$('.btn-action[data-action="save"]').addClass("disabled").prop("disabled", true);
};
$(document).ready(init);
$(window).on("load", function () {
reloadPreview();
});
$(document).on("typelist.load", function (e, typelist) {
postDraft(typelist.type, typelist.val());
});
$(document).on("typelist.changed", function (e, typelist) {
postDraft(typelist.type, typelist.val());
});
})(jQuery);