Foundry support for new item search widget

git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@4959 8810af33-2d31-482b-a856-94f89814c4df

Former-commit-id: fca9c710cd
pull/2/head
jensp 2017-08-29 14:57:11 +00:00
parent f2636f6bb7
commit c9ee53b028
5 changed files with 626 additions and 28 deletions

View File

@ -56,7 +56,7 @@ import javax.ws.rs.QueryParam;
* @author <a href="mailto:jens.pelzetter@googlemail.com">Jens Pelzetter</a>
*/
@RequestScoped
@Path("/{content-section}/assets/")
@Path("/{content-section}/items/")
public class ContentItems {
@Inject

View File

@ -25,6 +25,7 @@
<xsl:import href="cms/asset-search-widget.xsl" />
<xsl:import href="cms/image.xsl" />
<xsl:import href="cms/item-search-widget.xsl" />
<xsl:import href="cms/item-summary.xsl" />
<xsl:import href="cms/notes.xsl" />
<xsl:import href="cms/tasks-panel.xsl" />

View File

@ -0,0 +1,473 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
/*
* Copyright (C) 2017 LibreCCM Foundation.
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301 USA
*/
-->
<!--
Processes the item search widget.
Author: Jens Pelzetter, jens.pelzetter@googlemail.com
-->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:bebop="http://www.arsdigita.com/bebop/1.0"
xmlns:cms="http://www.arsdigita.com/cms/1.0"
xmlns:foundry="http://foundry.libreccm.org"
xmlns:nav="http://ccm.redhat.com/navigation"
exclude-result-prefixes="xsl bebop cms foundry nav"
version="2.0">
<xsl:template match="cms:item-search-widget">
<div class="item-search-widget">
<xsl:choose>
<xsl:when test="./cms:selected-item">
<p>
<xsl:value-of select="./cms-selected-item/@title" />
</p>
<input type="hidden"
id="{./@name}"
value="{./selected-item/@itemId}" />
</xsl:when>
<xsl:otherwise>
<p id="{concat(./@name, '-selected')}">
<strong>
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/no-item-selected')" />
</strong>
</p>
<input type="hidden"
id="{./@name}"
name="{./@name}" />
</xsl:otherwise>
</xsl:choose>
<button id="{concat(./@name, 'select-item-button')}"
type="button"
class="select-item-button"
data-itemtype="{./@item-type}"
data-contentsection="{./@content-section}"
data-dialogId="{concat(./@name, '-dialog')}"
data-target="{./@name}">
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/select-item-button')" />
</button>
<dialog id="{concat(./@name, '-dialog')}"
class="item-search-widget-dialog"
data-itemtype="{./@item-type}"
data-contentsection="{./@content-section}"
data-dispatcherPrefix="{$dispathcher-prefix}"
data-targetId="{./@name}">
<h3 class="titlebar">
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/titlebar')" />
<button type="button"
class="close-button"
data-dialogId="{concat(./@name, '-dialog')}">
<span>
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/titlebar/close')" />
</span>
</button>
</h3>
<div class="controls">
<input type="hidden" id="{concat(./@name, '-last-focus')}" />
<label for="{concat(./@name, 'item-filter')}">
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/filter-list')" />
</label>
<input type="text" id="{concat(./@name, '-dialog-item-filter')}" />
<button type="button"
class="apply-filter"
data-dialogId="{concat(./@name, '-dialog')}">
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/filter-list/apply')" />
</button>
</div>
<div class="selectable-items">
<div class="selectable-items">
<table>
<thead>
<tr>
<th>
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/table/header/title')" />
</th>
<th>
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/table/header/type')" />
</th>
<th>
<xsl:value-of select="foundry:get-internal-static-text('cms', 'item-search-widget/table/header/place')" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
<tr>
<td>
$title
</td>
<td>
$type
</td>
<td>
$place
</td>
</tr>
</tbody>
</table>
</div>
</dialog>
</div>
</xsl:template>
</xsl:stylesheet>

View File

@ -37,7 +37,6 @@ function getAssetsForSelectAssetDialog(dialogId) {
}
request.open("GET", url);
// request.setRequestHeader();
request.addEventListener('load', function (event) {
if (request.status >= 200 && request.status < 300) {
var assets = JSON.parse(request.responseText);
@ -49,7 +48,7 @@ function getAssetsForSelectAssetDialog(dialogId) {
+ "<tr>"
+ "<td>"
+ "<a href=\"#\" onclick=\"setSelectedAsset(" + asset['assetId'] + ", \'" + asset['title'] + "\', \'" + targetId + "\', \'" + dialogId + "\')\">"
+ asset['title'] + "</td>"
+ asset['title']
+ "</a>"
+ "<td>"
+ asset['typeLabel']
@ -86,7 +85,82 @@ function toggleSelectAssetDialog(mode, dialogId) {
if ('show' === mode) {
dialog.setAttribute('open', 'open');
getAssetsForSelectAssetDialog(dialogId)
getAssetsForSelectAssetDialog(dialogId);
} else {
dialog.setAttribute('open', 'false');
}
}
function getItemsForSelectItemDialog(dialogId) {
var dialog = document.querySelector('#' + dialogId);
var type = dialog.getAttribute('data-assettype');
var contentSection = dialog.getAttribute('data-contentsection');
var targetId = dialog.getAttribute('data-targetId');
var filter = document.querySelector('#' + dialogId + '-item-filter');
var query = filter.value;
var dispatcherPrefix = dialog.getAttribute('data-dispatcherPrefix');
var request = new XMLHttpRequest();
var url = dispatcherPrefix.substring(0, dispatcherPrefix.length - "/ccm".length) + "/content-sections/" + contentSection + "/items/";
if (type !== null && type.length > 0) {
url = url + "?type=" + type;
}
if ((type !== null && type.length > 0)
&& (query !== null && query.length > 0)) {
url = url + "&query=" + query;
} else if (query !== null && query.length > 0) {
url = url + "?query=" + query;
}
request.open("GET", url);
request.addEventListener('load', function (event) {
if (request.status >= 200 && request.status <= 300) {
var items = JSON.parse(request.responseText);
var tableRows = "";
var i;
for (i = 0; i < items.length; ++i) {
var item = items[i];
tableRows = tableRows
+ "<tr>"
+ "<td>"
+ "<a href=\"#\" onclick=\"setSelectedAsset(" + item['itemId'] + ", \'" + item['title'] + "\', \'" + targetId + "\', \'" + dialogId + "\')\">"
+ item['title']
+ "</a>"
+ "</td>"
+ "<td>" + item['place'] + "</td>"
+ "</tr>";
}
document
.querySelector('#' + dialogId + "tbody")
.innerHTML = tableRows;
} else {
alert("Error while retrieving items. "
+ "Response code: " + request.status + " "
+ "Message: " + request.statusText);
}
});
request.send();
}
function setSelectedItem(itemId, itemTitle, targetId, dialogId) {
var target = document.querySelector('#' + targetId);
var targetText = document.querySelector("#" + targetId + "-selected");
target.value = itemId;
targetText.textContent = itemTitle;
toggleSelectItemDialog('hide', dialogId);
}
function toggleSelectItemDialog(mode, dialogId) {
var dialog = document.querySelector('#' + dialogId);
if ('show' === mode) {
dialog.setAttribute('open', 'open');
getItemsForSelectItemDialog(dialogId);
} else {
dialog.setAttribute('open', 'false');
}
@ -105,16 +179,6 @@ document.addEventListener('DOMContentLoaded', function () {
var dialogId = button.getAttribute('data-dialogId');
toggleSelectAssetDialog('show', dialogId);
// var assetType = button.getAttribute('data-assettype');
// var contentSection = button.getAttribute('data-contentsection');
// var target = button.getAttribute('data-target');
//
// alert("AssetSelection assetType = " + assetType
// + "; contentSection = " + contentSection
// + "; target = " + target + "; ");
event.stopPropagation();
return false;
});
@ -149,8 +213,56 @@ document.addEventListener('DOMContentLoaded', function () {
event.stopPropagation();
return false;
});
}
});
document.addEventListener('DOMContentLoaded', function() {
var i;
var buttons = document.querySelectorAll('.select-item-button');
for (i = 0; i < buttons.length; ++i) {
buttons[i].addEventListener('click', function(event) {
var button = event.currentTarget;
var dialogId = button.getAttribute('data-dialogId');
toggleSelectItemDialog('show', dialogId);
event.stopPropagation();
return false;
});
}
var closeButtons = document.querySelectorAll('.item-search-widget-dialog .close-button');
for(i = 0; i < closeButtons.length; ++i) {
closeButtons[i].addEventListener('click', function(event) {
var button = event.currentTarget;
var dialogId = button.getAttribute('data-dialogId');
toggleSelectItemDialog('hide', dialogId);
event.stopPropagation();
return false;
});
}
var applyButtons = document.querySelectorAll('.item-search-widget-dialog .apply-filter');
for (i = 0; i < applyButtons.length; ++i) {
applyButtons[i].addEventListener('click', function (event) {
var button = event.currentTarget;
var dialogId = button.getAttribute('data-dialogId');
getAssetsForSelectAssetDialog(dialogId);
event.stopPropagation();
return false;
});
}
});

View File

@ -1432,7 +1432,8 @@ img.cmsImageDisplay {
width: auto;
}
div.asset-search-widget dialog {
div.asset-search-widget dialog,
div.item-search-widget dialog {
background-color: #e6e4f2;
border: 1px solid #555;
@ -1454,27 +1455,32 @@ div.asset-search-widget dialog {
z-index: 999;
}
div.asset-search-widget dialog[open="open"] {
div.asset-search-widget dialog[open="open"],
div.item-search-widget dialog[open="open"] {
display: block;
}
div.asset-search-widget dialog .controls {
div.asset-search-widget dialog .controls,
div.item-search-widget dialog .controls {
padding: 0.5em;
}
div.asset-search-widget dialog .controls label {
div.asset-search-widget dialog .controls label,
div.item-search-widget dialog .controls label {
font-weight: bold;
margin-right: 0.5em;
}
div.asset-search-widget dialog .dialogarea controls button {
div.asset-search-widget dialog .dialogarea controls button,
div.item-search-widget dialog .dialogarea controls button{
margin-left: 0.5em;
}
div .asset-search-widget dialog .selectable-assets {
div.asset-search-widget dialog .selectable-assets,
div.item-search-widget dialog .selectable-assets {
padding: 0;
@ -1487,14 +1493,16 @@ div .asset-search-widget dialog .selectable-assets {
overflow: scroll;
}
div.asset-search-widget dialog .dialogarea table {
div.asset-search-widget dialog .dialogarea table,
div.item-search-widget dialog .dialogarea table {
margin-top: 1em;
margin-left: 0.5em;
margin-right: 0.5em;
}
div.asset-search-widget dialog .selectable-assets table thead tr th {
div.asset-search-widget dialog .selectable-assets table thead tr th,
div.item-search-widget dialog .selectable-assets table thead tr th {
background-color: transparent;
@ -1504,7 +1512,8 @@ div.asset-search-widget dialog .selectable-assets table thead tr th {
}
div.asset-search-widget dialog .titlebar {
div.asset-search-widget dialog .titlebar,
div.item-search-widget dialog .titlebar {
border-bottom: 1px solid #555;
@ -1513,7 +1522,8 @@ div.asset-search-widget dialog .titlebar {
padding: 0.5em 1em;
}
div.asset-search-widget dialog .titlebar .close-button {
div.asset-search-widget dialog .titlebar .close-button,
div.item-search-widget dialog .titlebar .close-button {
background-color: transparent;
@ -1525,11 +1535,13 @@ div.asset-search-widget dialog .titlebar .close-button {
right: 5px;
}
div.asset-search-widget dialog .titlebar .close-button:after {
div.asset-search-widget dialog .titlebar .close-button:after,
div.item-search-widget dialog .titlebar .close-button:after {
content: '\2715';
}
div.asset-search-widget dialog .titlebar .close-button span {
div.asset-search-widget dialog .titlebar .close-button span,
div.item-search-widget dialog .titlebar .close-button span {
position: absolute;
top: -999px;