298 lines
10 KiB
JavaScript
298 lines
10 KiB
JavaScript
/*********************************************************************************************************/
|
|
/* Global function and variable for panel/page com */
|
|
/*********************************************************************************************************/
|
|
|
|
var currentTarget = undefined;
|
|
|
|
var refreshLayout = function (parameters) {
|
|
|
|
// hide preview badget
|
|
$("#umbracoPreviewBadge").hide();
|
|
|
|
var string = "less.modifyVars({" + parameters.join(",") + "})";
|
|
eval(string);
|
|
}
|
|
|
|
/* Fonts loaded in the Canvasdesigner panel need to be loaded independently in
|
|
* the content iframe to allow live previewing.
|
|
*/
|
|
var webFontScriptLoaded = false;
|
|
var getFont = function (font) {
|
|
if (!webFontScriptLoaded) {
|
|
$.getScript('https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js')
|
|
.done(function () {
|
|
webFontScriptLoaded = true;
|
|
// Recursively call once webfont script is available.
|
|
getFont(font);
|
|
})
|
|
.fail(function () {
|
|
console.log('error loading webfont');
|
|
});
|
|
}
|
|
else {
|
|
WebFont.load({
|
|
google: {
|
|
families: [font]
|
|
},
|
|
loading: function () {
|
|
//console.log('loading font' + font + ' in iframe');
|
|
},
|
|
active: function () {
|
|
//console.log('loaded font ' + font + ' in iframe');
|
|
},
|
|
inactive: function () {
|
|
//console.log('error loading font ' + font + ' in iframe');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
var closeIntelCanvasdesigner = function (canvasdesignerModel) {
|
|
|
|
if (canvasdesignerModel) {
|
|
|
|
$.each(canvasdesignerModel.configs, function (indexConfig, config) {
|
|
if (config.schema) {
|
|
$(config.schema).unbind();
|
|
$(config.schema).removeAttr("canvasdesigner-over");
|
|
}
|
|
});
|
|
|
|
initBodyClickEvent();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var initBodyClickEvent = function () {
|
|
$("body").on("click", function () {
|
|
if (parent.iframeBodyClick) {
|
|
parent.iframeBodyClick();
|
|
}
|
|
});
|
|
}
|
|
|
|
var initIntelCanvasdesigner = function (canvasdesignerModel) {
|
|
|
|
if (canvasdesignerModel) {
|
|
|
|
// Add canvasdesigner-over attr for each schema from config
|
|
$.each(canvasdesignerModel.configs, function (indexConfig, config) {
|
|
var schema = config.selector ? config.selector : config.schema;
|
|
if (schema) {
|
|
$(schema).attr("canvasdesigner-over", config.schema);
|
|
$(schema).attr("canvasdesigner-over-name", config.name);
|
|
$(schema).css("cursor", "default");
|
|
}
|
|
});
|
|
|
|
// Outline canvasdesigner-over
|
|
$(document).mousemove(function (e) {
|
|
|
|
e.stopPropagation();
|
|
|
|
var target = $(e.target);
|
|
while (target.length > 0 && (target.attr('canvasdesigner-over') == undefined || target.attr('canvasdesigner-over') == '')) {
|
|
target = target.parent();
|
|
}
|
|
|
|
if (target.attr('canvasdesigner-over') != undefined && target.attr('canvasdesigner-over') != '') {
|
|
target.unbind();
|
|
outlinePosition(target);
|
|
|
|
parent.onMouseoverCanvasdesignerItem(target.attr('canvasdesigner-over-name'), target);
|
|
|
|
target.click(function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
//console.info(target.attr('canvasdesigner-over'));
|
|
|
|
currentTarget = target;
|
|
outlineSelected();
|
|
|
|
parent.onClickCanvasdesignerItem(target.attr('canvasdesigner-over'), target);
|
|
return false;
|
|
});
|
|
}
|
|
else {
|
|
outlinePositionHide();
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var refreshOutlinePosition = function(schema) {
|
|
outlinePosition($(schema));
|
|
}
|
|
|
|
var outlinePosition = function (oTarget) {
|
|
|
|
var target = oTarget;
|
|
|
|
if (target.length > 0 && target.attr('canvasdesigner-over') != undefined && target.attr('canvasdesigner-over') != '') {
|
|
|
|
var localname = target[0].localName;
|
|
var height = $(target).outerHeight();
|
|
var width = $(target).outerWidth();
|
|
var position = $(target).offset();
|
|
var posY = position.top ;
|
|
//$(window).scrollTop();
|
|
var posX = position.left;
|
|
//+ $(window).scrollLeft();
|
|
|
|
$(".canvasdesigner-overlay").css('display', 'block');
|
|
$(".canvasdesigner-overlay").css('left', posX);
|
|
$(".canvasdesigner-overlay").css('top', posY);
|
|
$(".canvasdesigner-overlay").css('width', width + "px");
|
|
$(".canvasdesigner-overlay").css('height', height + "px");
|
|
|
|
//console.info("element select " + localname);
|
|
$(".canvasdesigner-overlay span").html(target.attr('canvasdesigner-over-name'));
|
|
|
|
}
|
|
else {
|
|
outlinePositionHide();
|
|
//console.info("element not found select");
|
|
}
|
|
}
|
|
|
|
var refreshOutlineSelected = function (schema) {
|
|
outlineSelected($(schema));
|
|
}
|
|
|
|
var outlineSelected = function (oTarget) {
|
|
|
|
var target = currentTarget;
|
|
|
|
if (oTarget) {
|
|
currentTarget = oTarget;
|
|
target = oTarget;
|
|
}
|
|
|
|
if (target && target.length > 0 && target.attr('canvasdesigner-over') != undefined && target.attr('canvasdesigner-over') != '') {
|
|
|
|
var localname = target[0].localName;
|
|
var height = $(target).outerHeight();
|
|
var width = $(target).outerWidth();
|
|
var position = $(target).offset();
|
|
var posY = position.top;
|
|
//$(window).scrollTop();
|
|
var posX = position.left;
|
|
//+ $(window).scrollLeft();
|
|
|
|
$(".canvasdesigner-overlay-selected").css('display', 'block');
|
|
$(".canvasdesigner-overlay-selected").css('left', posX);
|
|
$(".canvasdesigner-overlay-selected").css('top', posY);
|
|
$(".canvasdesigner-overlay-selected").css('width', width + "px");
|
|
$(".canvasdesigner-overlay-selected").css('height', height + "px");
|
|
|
|
//console.info("element select " + localname);
|
|
$(".canvasdesigner-overlay-selected span").html(target.attr('canvasdesigner-over-name'));
|
|
|
|
}
|
|
else {
|
|
outlinePositionHide();
|
|
//console.info("element not found select");
|
|
}
|
|
|
|
}
|
|
|
|
var outlinePositionHide = function () {
|
|
$(".canvasdesigner-overlay").css('display', "none");
|
|
}
|
|
|
|
var outlineSelectedHide = function () {
|
|
currentTarget = undefined;
|
|
$(".canvasdesigner-overlay-selected").css('display', "none");
|
|
}
|
|
|
|
var initCanvasdesignerPanel = function () {
|
|
|
|
$('link[data-title="canvasdesignerCss"]').attr('disabled', 'disabled');
|
|
|
|
// First load the canvasdesigner config from file
|
|
if (!canvasdesignerConfig) {
|
|
console.info("canvasdesigner config not found");
|
|
}
|
|
|
|
// Add canvasdesigner from HTML 5 data tags
|
|
$("[data-canvasdesigner]").each(function (index, value) {
|
|
var tagName = $(value).data("canvasdesigner") ? $(value).data("canvasdesigner") : $(value)[0].nodeName.toLowerCase();
|
|
var tagSchema = $(value).data("schema") ? $(value).data("schema") : $(value)[0].nodeName.toLowerCase();
|
|
var tagSelector = $(value).data("selector") ? $(value).data("selector") : tagSchema;
|
|
var tagEditors = $(value).data("editors"); //JSON.parse(...);
|
|
canvasdesignerConfig.configs.splice(canvasdesignerConfig.configs.length, 0, {
|
|
name: tagName,
|
|
schema: tagSchema,
|
|
selector: tagSelector,
|
|
editors: tagEditors
|
|
});
|
|
});
|
|
|
|
// For each editor config create a composite alias
|
|
$.each(canvasdesignerConfig.configs, function (configIndex, config) {
|
|
if (config.editors) {
|
|
$.each(config.editors, function (editorIndex, editor) {
|
|
var clearSchema = config.schema.replace(/[^a-zA-Z0-9]+/g, '').toLowerCase();
|
|
var clearEditor = JSON.stringify(editor).replace(/[^a-zA-Z0-9]+/g, '').toLowerCase();
|
|
editor.alias = clearSchema + clearEditor;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Create or update the less file
|
|
$.ajax({
|
|
url: "/Umbraco/Api/CanvasDesigner/Init",
|
|
type: 'POST',
|
|
dataType: "json",
|
|
error: function (err) {
|
|
alert(err.responseText)
|
|
},
|
|
data: {
|
|
config: JSON.stringify(canvasdesignerConfig),
|
|
pageId: pageId
|
|
},
|
|
success: function (data) {
|
|
|
|
// Add Less link in head
|
|
$("head").append("<link>");
|
|
css = $("head").children(":last");
|
|
css.attr({
|
|
rel: "stylesheet/less",
|
|
type: "text/css",
|
|
href: data
|
|
});
|
|
//console.info("Less styles are loaded");
|
|
|
|
// Init Less.js
|
|
$.getScript("/Umbraco/lib/Less/less-1.7.0.min.js", function (data, textStatus, jqxhr) {
|
|
|
|
// Init panel
|
|
if (parent.setFrameIsLoaded) {
|
|
parent.setFrameIsLoaded(canvasdesignerConfig, canvasdesignerPalette);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
$(function () {
|
|
|
|
if (parent.setFrameIsLoaded) {
|
|
|
|
// Overlay background-color: rgba(28, 203, 255, 0.05);
|
|
$("body").append("<div class=\"canvasdesigner-overlay\" style=\"display:none; pointer-events: none; position: absolute; z-index: 9999; border: 1px solid #2ebdff; border-radius: 3px; \"><span style=\"position:absolute;background: #2ebdff; font-family: Helvetica, Arial, sans-serif; color: #fff; padding: 0 5px 0 6px; font-size: 10px; line-height: 17px; display: inline-block; border-radius: 0 0 3px 0;\"></span></div>");
|
|
$("body").append("<div class=\"canvasdesigner-overlay-selected\" style=\"display:none; pointer-events: none; position: absolute; z-index: 9998; border: 2px solid #2ebdff; border-radius: 3px;\"><span style=\"position:absolute;background: #2ebdff; font-family: Helvetica, Arial, sans-serif; color: #fff; padding: 0 5px; font-size: 10px; line-height: 16px; display: inline-block; border-radius: 0 0 3px 0;\"></span></div>");
|
|
|
|
// Set event for any body click
|
|
initBodyClickEvent()
|
|
|
|
// Init canvasdesigner panel
|
|
initCanvasdesignerPanel();
|
|
}
|
|
|
|
});
|