|
|
@@ -1,25 +1,25 @@
|
|
|
-{# itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig #}
|
|
|
-{# Browse brick grid mode layout #}
|
|
|
+{# itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig #}
|
|
|
+{# Browse brick mosaic mode layout #}
|
|
|
{% extends 'itop-portal-base/portal/src/views/bricks/browse/layout.html.twig' %}
|
|
|
|
|
|
{% block bBrowseMainContent %}
|
|
|
- <div id="brick_content_grid">
|
|
|
- {% block bBrowseGridContent %}
|
|
|
- <ol id="grid-breadcrumb" class="breadcrumb">
|
|
|
+ <div id="brick_content_mosaic">
|
|
|
+ {% block bBrowseMosaicContent %}
|
|
|
+ <ol id="mosaic-breadcrumb" class="breadcrumb">
|
|
|
<li><a href="#" data-level-id="L"><span class="fa fa-home"></span></a></li>
|
|
|
</ol>
|
|
|
- <div class="grid-group" data-level-id="L">
|
|
|
+ <div class="mosaic-group" data-level-id="L">
|
|
|
</div>
|
|
|
{% endblock %}
|
|
|
</div>
|
|
|
|
|
|
<div id="brick_content_empty" class="text-center">
|
|
|
- {% block bBrowseGridEmpty %}
|
|
|
+ {% block bBrowseMosaicEmpty %}
|
|
|
{{ 'Brick:Portal:Browse:Filter:NoData'|dict_s }}
|
|
|
{% endblock %}
|
|
|
</div>
|
|
|
- <div id="brick_grid_overlay">
|
|
|
- {% block bBrowseGridOverlay %}
|
|
|
+ <div id="brick_mosaic_overlay">
|
|
|
+ {% block bBrowseMosaicOverlay %}
|
|
|
<div class="overlay_content">
|
|
|
{% include 'itop-portal-base/portal/src/views/helpers/loader.html.twig' %}
|
|
|
</div>
|
|
|
@@ -34,45 +34,45 @@
|
|
|
var sBrowseMode = '{{ sBrowseMode }}';
|
|
|
var oLevelsProperties = {{ aLevelsProperties|raw }};
|
|
|
var oRawDatas = {{ aItems|raw }};
|
|
|
- var sGridEffectName = 'fade';
|
|
|
- var oGridEffectOptions = {};
|
|
|
- var iGridEffectDuration = 200;
|
|
|
+ var sMosaicEffectName = 'fade';
|
|
|
+ var oMosaicEffectOptions = {};
|
|
|
+ var iMosaicEffectDuration = 200;
|
|
|
|
|
|
- // Show a loader over the grid
|
|
|
- var showGridLoader = function()
|
|
|
+ // Show a loader over the mosaic
|
|
|
+ var showMosaicLoader = function()
|
|
|
{
|
|
|
- $("#brick_content_grid").hide();
|
|
|
- $('#brick_grid_overlay').show();
|
|
|
+ $("#brick_content_mosaic").hide();
|
|
|
+ $('#brick_mosaic_overlay').show();
|
|
|
};
|
|
|
// Hide the loader over the tree
|
|
|
- var hideGridLoader = function()
|
|
|
+ var hideMosaicLoader = function()
|
|
|
{
|
|
|
- $('#brick_grid_overlay').hide();
|
|
|
- $("#brick_content_grid").show();
|
|
|
+ $('#brick_mosaic_overlay').hide();
|
|
|
+ $("#brick_content_mosaic").show();
|
|
|
}
|
|
|
// Show the requested level
|
|
|
var showLevel = function(sLevelAlias, sItemId)
|
|
|
{
|
|
|
// Retrieving level to show
|
|
|
var sLevelId = sLevelAlias + ((sItemId !== undefined) ? '::'+sItemId : '' );
|
|
|
- var oLevelElem = $('#brick_content_grid .grid-group[data-level-id="' + sLevelId + '"]');
|
|
|
+ var oLevelElem = $('#brick_content_mosaic .mosaic-group[data-level-id="' + sLevelId + '"]');
|
|
|
var bLevelLoaded = (oLevelElem.length > 0);
|
|
|
|
|
|
// Hiding current level
|
|
|
- $('#brick_content_grid .grid-group:visible').hide(
|
|
|
- sGridEffectName,
|
|
|
- oGridEffectOptions,
|
|
|
- iGridEffectDuration,
|
|
|
+ $('#brick_content_mosaic .mosaic-group:visible').hide(
|
|
|
+ sMosaicEffectName,
|
|
|
+ oMosaicEffectOptions,
|
|
|
+ iMosaicEffectDuration,
|
|
|
function(){
|
|
|
// Showing level
|
|
|
if(!bLevelLoaded)
|
|
|
{
|
|
|
- showGridLoader();
|
|
|
+ showMosaicLoader();
|
|
|
loadChildNodes(sLevelAlias, sItemId);
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
- oLevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
|
|
|
+ oLevelElem.show(sMosaicEffectName, oMosaicEffectOptions, iMosaicEffectDuration, function(){ buildBreadcrumb(); });
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
@@ -80,13 +80,13 @@
|
|
|
// Registers the toggle listeners on the tree nodes. Used after every AJAX calls.
|
|
|
var registerToggleListeners = function()
|
|
|
{
|
|
|
- $('#brick_content_grid .grid-drilldown').off('click').on('click', function (oEvent) {
|
|
|
+ $('#brick_content_mosaic .mosaic-drilldown').off('click').on('click', function (oEvent) {
|
|
|
oEvent.preventDefault();
|
|
|
|
|
|
showLevel($(this).attr('data-level-alias'), $(this).attr('data-item-id'));
|
|
|
});
|
|
|
|
|
|
- $('#brick_content_grid .grid-rollup').off('click').on('click', function (oEvent) {
|
|
|
+ $('#brick_content_mosaic .mosaic-rollup').off('click').on('click', function (oEvent) {
|
|
|
oEvent.preventDefault();
|
|
|
|
|
|
var upperlevelId = $(this).attr('data-level-id');
|
|
|
@@ -96,14 +96,14 @@
|
|
|
});
|
|
|
|
|
|
// Allows link in item's description to work. Otherwise, the predentDefault of the item takes over.
|
|
|
- $('#brick_content_grid .grid-item-description a').off('click').on('click', function(oEvent){
|
|
|
+ $('#brick_content_mosaic .mosaic-item-description a').off('click').on('click', function(oEvent){
|
|
|
oEvent.stopPropagation();
|
|
|
});
|
|
|
};
|
|
|
// Registers the filter listeners on the tree.
|
|
|
var registerFilterListeners = function()
|
|
|
{
|
|
|
- /*$('#brick_search_field').treeListFilter('#brick_content_grid', iSearchDelay, filterResultsHandler);*/
|
|
|
+ /*$('#brick_search_field').treeListFilter('#brick_content_mosaic', iSearchDelay, filterResultsHandler);*/
|
|
|
};
|
|
|
// Load current node childnodes throught AJAX
|
|
|
var loadChildNodes = function(sLevelAlias, sNodeId)
|
|
|
@@ -119,10 +119,10 @@
|
|
|
var sublevel = data.data[index];
|
|
|
var sublevelData = {};
|
|
|
sublevelData[sublevel.level_alias+"::"+sublevel.id] = sublevel;
|
|
|
- buildGrid(sublevelData, sLevelAlias+"::"+sNodeId, false);
|
|
|
+ buildMosaic(sublevelData, sLevelAlias+"::"+sNodeId, false);
|
|
|
}
|
|
|
// Showing sublevel
|
|
|
- $('#brick_content_grid .grid-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
|
|
|
+ $('#brick_content_mosaic .mosaic-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sMosaicEffectName, oMosaicEffectOptions, iMosaicEffectDuration, function(){ buildBreadcrumb(); });
|
|
|
|
|
|
registerToggleListeners();
|
|
|
})
|
|
|
@@ -130,11 +130,11 @@
|
|
|
alert('{{ 'Error:XHR:Fail'|dict_s }}');
|
|
|
})
|
|
|
.always(function(){
|
|
|
- hideGridLoader();
|
|
|
+ hideMosaicLoader();
|
|
|
});
|
|
|
};
|
|
|
- // Build grid nodes from data under the nodeId
|
|
|
- var buildGrid = function(data, nodeId, isRootLevel)
|
|
|
+ // Build mosaic nodes from data under the nodeId
|
|
|
+ var buildMosaic = function(data, nodeId, isRootLevel)
|
|
|
{
|
|
|
if(nodeId === undefined)
|
|
|
{
|
|
|
@@ -149,19 +149,19 @@
|
|
|
// Building node if necessary
|
|
|
if($('div[data-level-id="'+nodeId+'"]').length === 0)
|
|
|
{
|
|
|
- $('#brick_content_grid').append( $('<div></div>').addClass('grid-group').attr('data-level-id', nodeId) );
|
|
|
+ $('#brick_content_mosaic').append( $('<div></div>').addClass('mosaic-group').attr('data-level-id', nodeId) );
|
|
|
}
|
|
|
|
|
|
if(!isRootLevel)
|
|
|
{
|
|
|
// Retrieving upper level id
|
|
|
var levelIdParts = nodeId.split('::');
|
|
|
- var upperlevelId = $('.grid-item[data-level-alias="'+levelIdParts[0]+'"][data-item-id="'+levelIdParts[1]+'"]').closest('.grid-group').attr('data-level-id');
|
|
|
+ var upperlevelId = $('.mosaic-item[data-level-alias="'+levelIdParts[0]+'"][data-item-id="'+levelIdParts[1]+'"]').closest('.mosaic-group').attr('data-level-id');
|
|
|
|
|
|
// Building back button
|
|
|
- if( $('div[data-level-id="'+nodeId+'"] .grid-group-back').length === 0 ) {
|
|
|
- var backElem = $('<div></div>').addClass('grid-group-item').addClass('grid-group-back');
|
|
|
- var aElem = $('<a></a>').addClass('grid-item').addClass('grid-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="grid-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');
|
|
|
+ if( $('div[data-level-id="'+nodeId+'"] .mosaic-group-back').length === 0 ) {
|
|
|
+ var backElem = $('<div></div>').addClass('mosaic-group-item').addClass('mosaic-group-back');
|
|
|
+ var aElem = $('<a></a>').addClass('mosaic-item').addClass('mosaic-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="mosaic-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');
|
|
|
|
|
|
backElem.append(aElem);
|
|
|
$('div[data-level-id="' + nodeId + '"]').append(backElem);
|
|
|
@@ -181,32 +181,32 @@
|
|
|
var url = '';
|
|
|
|
|
|
// Building node
|
|
|
- var itemElem = $('<div></div>').addClass('grid-group-item');
|
|
|
- var aElem = $('<a></a>').addClass('grid-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
|
|
|
+ var itemElem = $('<div></div>').addClass('mosaic-group-item');
|
|
|
+ var aElem = $('<a></a>').addClass('mosaic-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
|
|
|
var iItemFlags = 0;
|
|
|
// - Adding stub div
|
|
|
- var textElem = $('<div></div>').addClass('grid-item-text');
|
|
|
+ var textElem = $('<div></div>').addClass('mosaic-item-text');
|
|
|
// - Adding image
|
|
|
if( (item.image !== undefined) && (item.image !== '') )
|
|
|
{
|
|
|
iItemFlags += 4;
|
|
|
- aElem.append( $('<div></div>').addClass('grid-item-image').append( $('<img />').attr('src', item.image) ) );
|
|
|
+ aElem.append( $('<div></div>').addClass('mosaic-item-image').append( $('<img />').attr('src', item.image) ) );
|
|
|
}
|
|
|
// - Adding name
|
|
|
if( (item.name !== undefined) && (item.name !== '') )
|
|
|
{
|
|
|
iItemFlags += 1;
|
|
|
- textElem.append( $('<div></div>').addClass('grid-item-name').html(item.name) );
|
|
|
+ textElem.append( $('<div></div>').addClass('mosaic-item-name').html(item.name) );
|
|
|
}
|
|
|
// - Adding description
|
|
|
if( (item.description !== undefined) && (item.description !== '') )
|
|
|
{
|
|
|
iItemFlags += 2;
|
|
|
- textElem.append( $('<div></div>').addClass('grid-item-description').html(item.description) );
|
|
|
+ textElem.append( $('<div></div>').addClass('mosaic-item-description').html(item.description) );
|
|
|
}
|
|
|
aElem.append( textElem );
|
|
|
// - Adding CSS class to adjust the layout regarding which properties are available
|
|
|
- aElem.addClass('grid-item-layout-'+iItemFlags);
|
|
|
+ aElem.addClass('mosaic-item-layout-'+iItemFlags);
|
|
|
// - Appending element
|
|
|
$('div[data-level-id="'+nodeId+'"]').append(itemElem);
|
|
|
itemElem.append(aElem);
|
|
|
@@ -221,7 +221,7 @@
|
|
|
switch(levelPrimaryAction.type)
|
|
|
{
|
|
|
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_DRILLDOWN') }}':
|
|
|
- aElem.addClass('grid-drilldown');
|
|
|
+ aElem.addClass('mosaic-drilldown');
|
|
|
break;
|
|
|
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_VIEW') }}':
|
|
|
url = '{{ app.url_generator.generate('p_object_view', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
|
|
|
@@ -254,7 +254,7 @@
|
|
|
}
|
|
|
|
|
|
// Preparing secondary actions container
|
|
|
- var actionsElem = $('<div></div>').addClass('grid-group-item-actions');
|
|
|
+ var actionsElem = $('<div></div>').addClass('mosaic-group-item-actions');
|
|
|
itemElem.append(actionsElem);
|
|
|
// Preparing secondary actions menu
|
|
|
var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
|
|
|
@@ -317,10 +317,10 @@
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
- subitemsElem = $('<div></div>').addClass('grid-group').attr('data-level-id', levelId);
|
|
|
+ subitemsElem = $('<div></div>').addClass('mosaic-group').attr('data-level-id', levelId);
|
|
|
$('div[data-level-id="'+nodeId+'"]').after(subitemsElem);
|
|
|
}
|
|
|
- buildGrid(item.subitems, levelId, false);
|
|
|
+ buildMosaic(item.subitems, levelId, false);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -342,14 +342,14 @@
|
|
|
bLeafLevel = true;
|
|
|
|
|
|
// Retrieving current level id
|
|
|
- var sCurrentLevelId = $('#brick_content_grid > .grid-group:visible').attr('data-level-id');
|
|
|
+ var sCurrentLevelId = $('#brick_content_mosaic > .mosaic-group:visible').attr('data-level-id');
|
|
|
aCurrentLevelParts = sCurrentLevelId.split('::');
|
|
|
|
|
|
// Emptying breadcrumb
|
|
|
- $('#grid-breadcrumb > li:not(:first-of-type)').remove();
|
|
|
+ $('#mosaic-breadcrumb > li:not(:first-of-type)').remove();
|
|
|
|
|
|
// Finding current item
|
|
|
- oCurrentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aCurrentLevelParts[0]+'"][data-item-id="'+aCurrentLevelParts[1]+'"]');
|
|
|
+ oCurrentElem = $('#brick_content_mosaic .mosaic-item[data-level-alias="'+aCurrentLevelParts[0]+'"][data-item-id="'+aCurrentLevelParts[1]+'"]');
|
|
|
if(oCurrentElem.length === 0)
|
|
|
{
|
|
|
return false;
|
|
|
@@ -363,15 +363,15 @@
|
|
|
// Adding level as crumb
|
|
|
var oCrumb = $('<li></li>');
|
|
|
var oCrumbLink = (bLeafLevel) ? $('<span></span>') : $('<a></a>');
|
|
|
- oCrumbLink.html( oCurrentElem.find('.grid-item-name').html() );
|
|
|
+ oCrumbLink.html( oCurrentElem.find('.mosaic-item-name').html() );
|
|
|
oCrumbLink.attr('data-level-id', aCurrentLevelParts.join('::')).attr('href', '#');
|
|
|
- oCrumb.append(oCrumbLink).insertAfter('#grid-breadcrumb > li:first-of-type');
|
|
|
+ oCrumb.append(oCrumbLink).insertAfter('#mosaic-breadcrumb > li:first-of-type');
|
|
|
if(bLeafLevel)
|
|
|
{
|
|
|
oCrumb.addClass('active');
|
|
|
}
|
|
|
// Adding listener
|
|
|
- $('#grid-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
|
|
|
+ $('#mosaic-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
|
|
|
oEvent.preventDefault();
|
|
|
|
|
|
var levelId = $(this).attr('data-level-id');
|
|
|
@@ -381,12 +381,12 @@
|
|
|
});
|
|
|
|
|
|
// Finding parent level
|
|
|
- var oParentLevelElem = oCurrentElem.closest('.grid-group');
|
|
|
+ var oParentLevelElem = oCurrentElem.closest('.mosaic-group');
|
|
|
if(oParentLevelElem.length > 0)
|
|
|
{
|
|
|
var sParentLevelId = oParentLevelElem.attr('data-level-id');
|
|
|
var aParentLevelParts = sParentLevelId.split('::');
|
|
|
- var oParentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aParentLevelParts[0]+'"][data-item-id="'+aParentLevelParts[1]+'"]');
|
|
|
+ var oParentElem = $('#brick_content_mosaic .mosaic-item[data-level-alias="'+aParentLevelParts[0]+'"][data-item-id="'+aParentLevelParts[1]+'"]');
|
|
|
|
|
|
if(oParentElem.length === 1)
|
|
|
{
|
|
|
@@ -398,13 +398,13 @@
|
|
|
$(document).ready(function(){
|
|
|
// Auto collapse item actions popup
|
|
|
$('body').click(function(){
|
|
|
- $('#brick_content_grid .item-action-wrapper.collapse.in').collapse('hide');
|
|
|
+ $('#brick_content_mosaic .item-action-wrapper.collapse.in').collapse('hide');
|
|
|
});
|
|
|
|
|
|
// Build the tree (collapsed)
|
|
|
- showGridLoader();
|
|
|
- buildGrid(oRawDatas);
|
|
|
- hideGridLoader();
|
|
|
+ showMosaicLoader();
|
|
|
+ buildMosaic(oRawDatas);
|
|
|
+ hideMosaicLoader();
|
|
|
registerFilterListeners();
|
|
|
});
|
|
|
</script>
|
glajarige