/*
* Copyright 2015 Anyware Services
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Helper to register HTML zone into a page. Such a zone can be selected and highlighted.
* @private
*/
Ext.define('Ametys.plugins.web.page.tool.UIZone', {
singleton: true,
/**
* Register the HTML element zoneName in the document doc as a zone. If empty do some additional graphic.
* @param {HTMLElement} win The document where to work in
* @param {String} pageId The page identifier
* @param {Boolean} modifiable true if the zone is modifiable
* @param {String} zoneName The id of the HTML element surrounding the zone
* @param {String} zoneTitle The title of the zone
* @param {String} zoneDesc The description of the zone
* @param {String} smallImg The path for the small image
* @param {String} mediumImg The path for the small image
* @param {String} largeImg The path for the small image
* @param {Array} availableContentTypes The list of available content types for the zone.
* @param {Array} availableServices The list of available services for the zone.
* @param {Boolean/String} [emptyZone=false] Optional boolean to indicate if zone is empty. Or can be a string (when not really empty - to indicate the page id that the zone items are inherited from)
*/
register: function(win, pageId, modifiable, zoneName, zoneTitle, zoneDesc, smallImg, mediumImg, largeImg, availableContentTypes, availableServices, emptyZone)
{
var doc = win.document;
if (doc.zones == null){ doc.zones = []; }
if (doc.zoneCTypes == null){ doc.zoneCTypes = {}; }
if (doc.zoneServices == null){ doc.zoneServices = {}; }
if (zoneTitle == "") { zoneTitle = "{{i18n PLUGINS_WEB_SKIN_IUZONE_ZONE}}" + "'" + zoneName + "'"; }
if (smallImg == "") { smallImg = "/plugins/web/resources/img/skin/zone_16.png"; }
if (mediumImg == "") { mediumImg = "/plugins/web/resources/img/skin/zone_32.png"; }
if (largeImg == "") { largeImg = "/plugins/web/resources/img/skin/zone_48.png"; }
doc.zones.push(zoneName);
doc.zoneCTypes[zoneName] = availableContentTypes;
doc.zoneServices[zoneName] = availableServices;
var div = doc.getElementById("ametys-cms-zone-" + zoneName);
win.$j(div).addClass('ametys-cms-zone');
var pageTool = parent.Ametys.tool.ToolsManager.getTool('uitool-page$' + pageId)
|| parent.Ametys.tool.ToolsManager.getTool('uitool-sitemappage$' + pageId);
Ametys.plugins.web.page.tool.UIZone.highlight(win, zoneName, pageTool._lastZoneName == zoneName, true);
var img = doc.createElement("img");
win.$j(img).addClass('ametys-cms-zone-grabber');
img.onclick = Ext.bind(parent.Ametys.plugins.web.page.tool.UIZone.highlight, parent.Ametys.plugins.web.page.tool.UIZone.highlight, [win, zoneName]);
img.title = zoneTitle + ": " + zoneDesc.replace(/<br\s*\/>/g, "\n");
if (emptyZone == true || typeof emptyZone == 'string')
{
img.src = Ametys.CONTEXT_PATH + mediumImg;
win.$j(div).addClass('ametys-cms-zone-empty');
var table = doc.createElement("table");
win.$j(table).addClass('ametys-cms-zone-name');
div.appendChild(table);
var row = table.insertRow(0);
var cell1 = doc.createElement("td");
row.appendChild(cell1);
cell1.style.verticalAlign = "top";
cell1.appendChild(img);
cell1.style.width = "36px";
var cell2 = doc.createElement("td");
row.appendChild(cell2);
var p = doc.createElement("p");
win.$j(p).addClass('ametys-cms-zone-empty-para');
cell2.appendChild(p);
p.innerHTML = "<strong>" + zoneTitle + "</strong>";
if (zoneDesc != "")
{
p.innerHTML += "<br/><em>" + zoneDesc + "</em>";
}
var subDiv2 = doc.createElement("div");
div.appendChild(subDiv2);
win.$j(subDiv2).addClass('ametys-cms-zone-empty-desc');
if (emptyZone === true)
{
subDiv2.innerHTML = "{{i18n PLUGINS_WEB_SKIN_IUZONE_EMPTYZONE}}";
}
else
{
subDiv2.innerHTML = "{{i18n PLUGINS_WEB_SKIN_IUZONE_INHERITEDZONE}}";
var img = doc.createElement("img");
win.$j(img).addClass('ametys-cms-zone-inherit');
if (emptyZone.startsWith("sitemap://"))
{
img.onclick = Ext.bind(parent.Ametys.tool.ToolsManager.openTool, parent.Ametys.tool.ToolsManager, ['uitool-sitemappage', {id: emptyZone}]);
}
else
{
img.onclick = Ext.bind(parent.Ametys.tool.ToolsManager.openTool, parent.Ametys.tool.ToolsManager, ['uitool-page', {id: emptyZone}]);
}
img.title = "{{i18n PLUGINS_WEB_SKIN_IUZONE_INHERITEDZONE_GO_UP}}";
img.src = Ametys.getPluginResourcesPrefix('web') + "/img/skin/page_inherited_16.png";
subDiv2.insertBefore(img, subDiv2.childNodes[0]);
}
}
else
{
div.insertBefore(img, div.firstChild);
img.src = Ametys.CONTEXT_PATH + smallImg;
}
if (modifiable)
{
Ametys.plugins.web.page.tool.UIZone.makesDroppable(win, pageId, div, zoneName);
}
},
/**
* Graphically highlight a zone
* @param {HTMLElement} win The document of the page
* @param {String} zoneName The id of the html element (div) of the zone to highlight in the document
* @param {Boolean} on Set to true to highlight or false to set normal
* @param {Boolean} noEvent true to do not send events. false is default
*/
highlight: function(win, zoneName, on, noEvent)
{
var doc = win.document;
var div = doc.getElementById("ametys-cms-zone-" + zoneName);
if (on == null)
{
on = !div.highlightState;
}
if (on)
{
// switch off other zones
for (var i=0; i < doc.zones.length; i++)
{
var aZoneName = doc.zones[i];
if (aZoneName != zoneName)
{
Ametys.plugins.web.page.tool.UIZone.highlight(win, aZoneName, false, true);
}
}
for (var i=0; doc.zoneItems && i < doc.zoneItems.length; i++)
{
var aZoneInfo = doc.zoneItems[i];
Ametys.plugins.web.page.tool.UIZoneItem.highlight(win, aZoneInfo.zoneName, aZoneInfo.zoneItemHTMLId, aZoneInfo.zoneItemId, false, true);
}
}
div.highlightState = on;
if (on)
{
win.$j(div).addClass('ametys-cms-zone-selected');
}
else
{
win.$j(div).removeClass('ametys-cms-zone-selected');
}
if (noEvent != true)
{
Ext.Function.defer(Ametys.plugins.web.page.tool.UIZone._select, 1, Ametys.plugins.web.page.tool.UIZone._select, [win, on ? zoneName : null]);
}
},
/**
* @private
* This function is called when a zone is selected
* @param {HTMLElement} win The document of the page
* @param {String} zoneName The id of selected zone
*/
_select: function(win, zoneName)
{
if (typeof win.onZoneSelected == "function")
{
win.onZoneSelected(zoneName, null, zoneName != null ? win.$j(win.document.getElementById("ametys-cms-zone-" + zoneName)).outerWidth() : null);
}
else
{
Ext.Function.defer(Ametys.plugins.web.page.tool.UIZone._select, 5, Ametys.plugins.web.page.tool.UIZone._select, [win, zoneName]);
}
},
/**
* @protected
* Makes the given zone droppable
* @param {Object} win The window
* @param {String} pageId The page identifier
* @param {HTMLElement} div The div element wrapping the zone
* @param {String} zoneName The zone name in the page
*/
makesDroppable: function(win, pageId, div, zoneName)
{
// Default behavior : Nothing to do
// Has to be overridden
}
});