<#--
Note!
This component uses key events. The component listens to key events for a
specific element that must have focus to trigger events.
Its possible to listen for global events, i.e. key events for the document
but since several key listening components might live on the same page
that can't be done.
The browser gives focus to links or form elements, since the dashlets
are represented by "li"-tags they will not get focus. To achieve this
anyway a non visible "a"-tag is placed in each "li"-tag so we
can get focus and thereafter listen to individual key events.
Inside the a element is a transparent gif with width and height of 100%
to make the browsers focus indication borders go around the whole dashlet.
Since the cursor is changed using CSS selectors on the currently selected
element a div is in front of both the a element and the image is a div,
to make sure it becomes the selected element.
-->
<div class="customise-dashlets">
<script type="text/javascript">//<![CDATA[
new Alfresco.CustomiseDashlets("${args.htmlid}").setMessages(
${messages}
).setOptions(
{
currentLayout:
{
templateId: "${currentLayout.templateId}",
noOfColumns: ${currentLayout.noOfColumns},
description: "${currentLayout.description}",
icon: "${url.context}/components/dashboard/images/${currentLayout.templateId}.png"
},
dashboardUrl: "${dashboardUrl}",
dashboardId: "${dashboardId}"
});
//]]></script>
<div id="${args.htmlid}-instructions-div" class="instructions">
<h2>${msg("header.dashlets")}</h2>
<hr />
<div>
<div class="text">${msg("label.instructions")}</div>
<div class="buttons" id="${args.htmlid}-toggleDashletsButtonWrapper-div">
<input id="${args.htmlid}-addDashlets-button" type="button" value="${msg("button.addDashlets")}" />
</div>
</div>
</div>
<div id="${args.htmlid}-available-div" class="available" style="display: none;">
<div>
<div class="text">
<a class="closeLink" href="#" id="${args.htmlid}-closeAddDashlets-link">${msg("link.close")}</a>
<h3 class="padded">${msg("section.addDashlets")}</h3>
</div>
<ul id="${args.htmlid}-column-ul-0" class="availableList">
<#list availableDashlets as dashlet>
<li class="customisableDashlet available" dashletUrl="${dashlet.url}">
<a href="#"><img class="draggable" src="${url.context}/yui/assets/skins/default/transparent.gif" alt="" /></a>
<span >${dashlet.shortName}</span>
<div class="draggable" title="${dashlet.description}"></div>
</li>
</#list>
</ul>
</div>
</div>
<div class="used">
<div id="${args.htmlid}-wrapper-div" class="noOfColumns${currentLayout.noOfColumns}">
<div class="usedActions"> </div>
<#list columns as column>
<div class="column" id="${args.htmlid}-column-div-${column_index + 1}" <#if (column_index >= currentLayout.noOfColumns)>style="display: none;"</#if>>
<h3 class="padded">${msg("header.column", column_index + 1)}</h3>
<ul id="${args.htmlid}-column-ul-${column_index + 1}" class="usedList">
<#list column as dashlet>
<li class="customisableDashlet used" dashletUrl="${dashlet.url}" originalRegionId="${dashlet.originalRegionId}">
<a href="#"><img class="draggable" src="${url.context}/yui/assets/skins/default/transparent.gif" alt="" /></a>
<span>${dashlet.shortName}</span>
<div class="draggable" title="${dashlet.description}"></div>
</li>
</#list>
</ul>
</div>
</#list>
<div class="usedActions">
<span id="${args.htmlid}-trashcan-img" class="trashcan" title="${msg("help.trashcan")}"> </span>
</div>
</div>
</div>
<div class="actions">
<hr />
<div>
<div class="buttons">
<input id="${args.htmlid}-save-button" type="button" value="${msg("button.save")}" />
<input id="${args.htmlid}-cancel-button" type="button" value="${msg("button.cancel")}" />
</div>
</div>
</div>
<div style="display: none;">
<ul>
<!-- The shadow dashlet that is used during drag n drop to "make space" for the dragged dashlet -->
<li class="shadow" id="${args.htmlid}-dashlet-li-shadow"></li>
</ul>
</div>
</div>
|
function getNoOfColumns(template)
{
var noOfColumns = 0;
while (template.properties["gridColumn" + (noOfColumns + 1)] !== null)
{
noOfColumns++;
}
return noOfColumns;
}
// Get available components of family/type dashlet
var webscripts;
if (args.dashboardType == "user")
{
webscripts = sitedata.findWebScripts("user-dashlet");
}
else if (args.dashboardType == "site")
{
webscripts = sitedata.findWebScripts("site-dashlet");
}
if (!webscripts)
{
webscripts = [];
}
var tmp = sitedata.findWebScripts("dashlet");
if (tmp || tmp.length > 0)
{
webscripts = webscripts.concat(tmp);
}
// Transform the webscripts to easy-to-access dashlet items for the template
var availableDashlets = [];
for (var i = 0; i < webscripts.length; i++)
{
var webscript = webscripts[i];
var uris = webscript.getURIs();
if (uris !== null && uris.length > 0 && webscript.shortName !== null)
{
availableDashlets[i] =
{
url: uris[0],
shortName: webscript.shortName,
description: webscript.description
};
}
// else skip this webscript since it lacks uri or shortName
}
var dashboardUrl, dashboardId;
if (args.dashboardType == "user")
{
dashboardId = "user/" + user.name + "/dashboard";
dashboardUrl = "user/" + stringUtils.urlEncode(user.name) + "/dashboard";
}
else if (args.dashboardType == "site")
{
dashboardId = "site/" + page.url.templateArgs.site + "/dashboard";
dashboardUrl = dashboardId;
}
var components = sitedata.findComponents("page", null, dashboardId, null);
if (components === undefined || components.length === 0)
{
components = [];
}
// Transform the webscripts to easy-to-access dashlet items for the template
var columns = [[], [], [], []];
for (i = 0; i < components.length; i++)
{
var comp = components[i];
var regionId = comp.properties["region-id"];
var url = comp.properties.url;
if (regionId !== null && url !== null)
{
// Create dashlet
var shortName;
var description;
for (var j = 0; j < availableDashlets.length; j++)
{
var d = availableDashlets[j];
if (d.url == url)
{
shortName = d.shortName;
description = d.description;
break;
}
}
var dashlet =
{
url: url,
shortName: shortName,
description: description,
originalRegionId: regionId
};
// Place it in correct column and in a temporary row literal
if (regionId.match("^component-\\d+-\\d+$"))
{
var column = parseInt(regionId.substring(regionId.indexOf("-") + 1, regionId.lastIndexOf("-"))),
row = parseInt(regionId.substring(regionId.lastIndexOf("-") + 1));
columns[column-1][row-1] = dashlet;
}
}
// else skip this component since it lacks regionId or shortName
}
// Get current template
var currentTemplate = sitedata.findTemplate(dashboardId),
currentNoOfColumns = getNoOfColumns(currentTemplate),
currentLayout =
{
templateId: currentTemplate.id,
noOfColumns: currentNoOfColumns,
description: currentTemplate.description
};
// Define the model for the template
model.availableDashlets = availableDashlets;
model.dashboardUrl = dashboardUrl;
model.dashboardId = dashboardId;
model.columns = columns;
model.currentLayout = currentLayout; |