David,
Mike Wooldridge from my team was kind enough to put together some sample code
that might guide you in the right direction.
One way is to copy and edit ML.createSidebar() function to do what you want and
then putting that rewrite in custom/app-config.js.
(Note: You cannot put this rewrite in custom/app.js and expect it to work
because of the sequence in which the JS is loaded.)
As an example, he has made some updates to ML.createSidebar() that maybe along
the lines of what you looking for. It assumes the example Oscar setup and
creates a relationship between the 'award' and 'win' facets. The 'win' facet
only appears in the sidebar if an 'award' facet has been selected (so, it
appears when the 'award' chiclet is appearing). I'm attaching the code (which
would be saved inside custom/app-config.js). The update involves maintaining an
'invisible' array that tracks what facets should not be shown. (This is
different from our 'hidden' array, which tracks when a facet list is collapsed
and still shows its title.). Hope this helps.
You have to rename the .txt file attached as .js
Thanks Mike.
Ganesh Vaideeswaran
Director of Engineering, Application Services
MarkLogic Corporation
[email protected]<mailto:[email protected]>
Phone: +1 650 655 2398
www.marklogic.com<http://www.marklogic.com/>
This e-mail and any accompanying attachments are confidential. The information
is intended solely for the use of the individual to whom it is addressed. Any
review, disclosure, copying, distribution, or use of this e-mail communication
by others is strictly prohibited. If you are not the intended recipient, please
notify us immediately by returning this message to the sender and delete all
copies. Thank you for your cooperation.
From: [email protected]
[mailto:[email protected]] On Behalf Of Steiner, David J.
(LNG-DAY)
Sent: Tuesday, February 12, 2013 7:04 AM
To: MarkLogic Developer Discussion
Subject: [MarkLogic Dev General] Customizing Facets in App Builder (ML6.0)
I have a few high level constraints/facets that are based on collections (i.e.,
I simply gave no prefix in the specification and I get a facet for "collection"
with the counts of all the docs in each collection).
Now, I also have a bunch of other facets that I want to show up but only when
someone picks a particular content type (different content types have different
facets), i.e., someone clicks on one of the high level content types.
I'm assuming that the only way I can modify the sidebar behavior for facets is
to modify javascript - create custom javascript. Is this correct? Or is there
I way I can accomplish this in an easier fashion?
If I have to change the javascript, is there an example of how to do this
somewhere?
Also, I guess at a minimum, I'd like to have the ability to easily specify
whether I wanted the facet to appear opened/expanded or closed. So, for
example, I'd like my collection facets to appear opened, but other range index
facets to appear closed since there will be a lot of them and they will each
have a lot of values.
Thanks,
David
//app-config.js - override /application/app-config.js configurations here
// example of using a different search options (/v1/confiq/query)
//$.extend( controller_config, {optionsNode: "newsearchoptions"} )
// example of defining a proxy with controller
//$.extend( controller_config, {proxy: "someproxy.com:8080"})
// example of using autoZoomOnPoints on startup with map widget config
//$.extend(map_config_1, {autoZoomOnPoints: true});
// example of changing look and feel of heatmaps map widget config
//$.extend(map_config_1,
//{heatmap:{
// radiusFactor:10,
// opacity:30,
// gradient:{ 0.45: "blue", 0.55: "green", 0.65: "yellow", 0.95: "orange",
1.0: "red" },
// max:25
// }
//});
var ML = ML || {};
ML.createSidebar = function (containerID, config) {
config = config || {};
// private properties
var container,
widget,
htmlChiclets,
htmlFacets,
constraint,
name,
label,
constraintType,
chicletHTML,
selected,
hidden,
invisible,
exclude,
facet,
// private methods
displayChiclet,
displayInSidebar,
buildChiclet,
buildFacet,
addToSelected,
removeFromSelected,
trackHidden,
renderCB,
truncateStr,
getBucketLabel;
container = $('#' + containerID);
selected = {};
hidden = [];
invisible = ['win'];
exclude = ['geospatial'];
// Display facet in sidebar based on type and setting?
displayInSidebar = function (facet) {
return ($.inArray(facet.type,exclude) === -1) &&
(facet['side-bar'] === 'true');
};
// Track facets that have been selected (and have chiclets displayed)
addToSelected = function (facet, label) {
selected[facet] = label;
};
// Remove facet from selected list when chiclet is deleted
removeFromSelected = function (facet) {
delete selected[facet];
};
// Track facet lists that have been collapsed (list items not shown)
trackHidden = function (facet) {
var index = $.inArray(facet,hidden);
if (index > -1) {
hidden.splice(index, 1);
} else {
hidden.push(facet);
}
};
// Track facets that are invisible (no header or list shown)
addToInvisible = function (facet) {
var index = $.inArray(facet,invisible);
if (index == -1) {
invisible.push(facet);
}
};
// Remove facet from invisible list
removeFromInvisible = function (facet) {
var index = $.inArray(facet,invisible);
if (index > -1) {
invisible.splice(index, 1);
}
};
// Truncate long strings based on a length limit
truncateStr = function (str, length) {
var returnStr;
if (str.length > length) {
returnStr = str.slice(0, length - 3) + "...";
} else {
returnStr = str;
}
return returnStr;
};
// Get bucket label based on bucket name from config bucket objects
getBucketLabel = function (config, name) {
var result = '';
for (i in config.bucket) {
if (config.bucket[i].name === name) {
result = config.bucket[i]['_value'];
break;
}
}
return result;
};
renderCB = function (data) {
if(!data.boundedbox){
var facet = '';
htmlChiclets = '';
htmlFacets = '';
// Build chiclets and facet lists
for (facet in config.facets) {
if (config.facets[facet] !== undefined) {
// not in array of facet types to exclude and
side-bar setting selected
if (displayInSidebar(config.facets[facet])) {
htmlChiclets += buildChiclet(facet);
if ($.inArray(facet,invisible) == -1) {
htmlFacets += buildFacet(facet,
data);
}
}
}
}
container.html(htmlChiclets + htmlFacets);
}
};
widget = ML.createWidget(container, renderCB);
for (facet in config.facets) {
if (config.facets[facet] !== undefined) {
container.trigger('constraintType', {facet: facet,
type: config.facets[facet].type});
}
}
// Handle facet item clicks
container.on('click', '.facet-item a', function (e) {
e.preventDefault();
// What facet was clicked and what name?
constraint =
this.parentElement.parentElement.parentElement.id.substring(11); // ID text
after "facet-list-"
name = $(this).attr('rel');
label = $(this).html();
constraintType = config.facets[constraint].type;
displayChiclet(constraint, name, label,
config.facets[constraint]);
// Update UI
widget.updateQuery({
value: [name],
facet: constraint,
constraintType: constraintType,
noShadow: true
});
// Selecting an 'award' facet item makes 'win' facets visible
if (constraint === 'award') {
removeFromInvisible('win');
}
});
// Translate select event on a facet into a chiclet
// Can occur when loading bookmark
container.on('select', function (e, data) {
if (config.facets[data.facet] !== undefined) {
var absolute =
config.facets[data.facet]['absolute-buckets'];
if(absolute.use === 'true') {
label = getBucketLabel(absolute, data.value[0]);
} else {
label = data.value[0];
}
displayChiclet(data.facet, data.value[0], label,
config.facets[data.facet]);
}
});
displayChiclet = function (constraint, name, label, configFacets) {
chicletHTML = '';
// Replace chiclet HTML with new text
if (configFacets.label['_value'] !== undefined) {
chicletHTML = configFacets.label['_value'] + ': ' +
label;
} else {
chicletHTML = configFacets.label + ': ' + label;
}
container.find('#chiclet-'+constraint+'
.content').html(truncateStr(chicletHTML, 32));
// Hide list and show chiclet
container.find("#facet-list-"+constraint).hide();
container.find('#chiclet-'+constraint).show();
addToSelected(constraint, label);
};
// Handle chiclet close clicks
container.on('click', 'div.close-chiclet a', function (e) {
e.preventDefault();
// What facet was clicked?
constraint = this.parentElement.parentElement.id.substring(8);
// ID text after "chiclet-"
constraintType = config.facets[constraint].type;
// Hide chiclet and show list
container.find("#facet-list-"+constraint).show();
container.find('#chiclet-'+constraint).hide();
// Update UI
widget.updateQuery({
facet: constraint // deselecting only needs a facet
});
// Closing 'award' chiclet turns 'win' facet invisible
if (constraint === 'award') {
addToInvisible('win');
}
removeFromSelected(constraint);
return false;
});
// Handle title clicks
container.on('click', 'div.facet-list a.tipdown', function (e) {
// What facet was clicked?
constraint = this.id.substring(12); // ID text after
"facet-title-"
// Toggle arrow
container.find("a#facet-title-"+constraint).toggleClass('open');
// Update UI
container.find("#facet-list-"+constraint+'
ul').slideToggle(100);
// Keep track of what's hidden
trackHidden(constraint);
return false;
});
buildChiclet = function (constraint) {
var html = '',
label,
chicletDisplay,
chicletContent;
if (config.facets[constraint].label['_value'] !== undefined)
label = config.facets[constraint].label['_value'];
else
label = config.facets[constraint].label;
chicletDisplay = (selected[constraint] !== undefined) ? '' : '
hidden';
html = '<div id="chiclet-' + constraint + '"
class="chiclet'+chicletDisplay+'">';
chicletContent = (selected[constraint] !== undefined) ?
label+': '+selected[constraint] : '';
html += '<div class="close-chiclet"><a href="#"></a></div><span
class="content" title="'+chicletContent+'">'+truncateStr(chicletContent,
32)+'</span>';
html += '</div><!-- end chiclet -->';
return html;
};
buildFacet = function (constraint, data) {
var html = '',
label,
facetData,
listDisplay,
listHidden,
listTipdown;
if (data.facets[constraint] !== undefined) {
facetData = data.facets[constraint].facetValues;
if (config.facets[constraint].label['_value'] !==
undefined) {
label =
config.facets[constraint].label['_value'];
} else {
label = config.facets[constraint].label;
}
listDisplay = (selected[constraint] !== undefined) ? '
hidden' : '';
if ($.inArray(constraint,hidden) > -1) {
listHidden = ' hidden';
listTipdown = '';
} else {
listHidden = '';
listTipdown = ' open';
}
html = '<div id="facet-list-'+ constraint + '"
class="facet-list'+listDisplay+'">';
html += '<a href="#" id="facet-title-'+ constraint + '"
class="tipdown'+listTipdown+'" title="tip down">';
html += '<div class="facet-title-label"
title="'+label+'">' + truncateStr(label, 32) + '</div>';
html += '</a>';
if (facetData !== undefined) {
html += '<ul class="'+listHidden+'">';
var i, len;
for (i=0,len=facetData.length; i < len; i = i +
1) {
html += '<li class="facet-item">'
+ '<a href="#"
rel="'+facetData[i].name+'" title="'+facetData[i].name+'">' +
truncateStr(facetData[i].value, 32) + '</a> '
+ '<span class="count">(' +
facetData[i].count + ')</span>'
+ '</li>';
}
html += '</ul>';
}
html += '</div><!-- end facet-list -->';
}
return html;
};
};_______________________________________________
General mailing list
[email protected]
http://developer.marklogic.com/mailman/listinfo/general
