diff --git a/content-targeting-web/docroot/css/content_targeting/main.css b/content-targeting-web/docroot/css/content_targeting/main.css
index ca69c3ae1..6ab5fa676 100644
--- a/content-targeting-web/docroot/css/content_targeting/main.css
+++ b/content-targeting-web/docroot/css/content_targeting/main.css
@@ -46,8 +46,72 @@
margin: 10px 0;
overflow: hidden;
+ .category-header {
+ border-bottom: solid 1px #DDD;
+ margin-bottom: 5px;
+ margin-right: 20px;
+ padding: 10px 0;
+ position: relative;
+
+ .category-icon {
+ background-color: #009AE5;
+ color: #FFF;
+ display: inline-block;
+ font-size: 30px;
+ padding: 5px;
+ }
+
+ .category-info {
+ left: 50px;
+ line-height: 16px;
+ position: absolute;
+ top: 10px;
+
+ .category-title {
+ color: #009AE5;
+ font-size: 15px;
+ font-weight: 400;
+ }
+
+ .category-description {
+ font-size: 13px;
+ }
+ }
+
+ &:after{
+ color: #009AE5;
+ content: "\f054";
+ font-family: "fontawesome-alloy";
+ font-size: 14px;
+ position: absolute;
+ right: 0;
+ top: 20px;
+ }
+
+ &.toggler-header-expanded:after {
+ content: "\f078";
+ }
+ }
+
+ .category-content {
+ margin-right: 20px;
+ padding-left: 40px;
+
+ &.toggler-content-expanded {
+ border-bottom: solid 1px #DDD;
+ }
+ }
+
+ .category-wrapper:last-child {
+ .category-content.toggler-content-expanded {
+ border-bottom: none;
+ }
+ }
+
.diagram-builder-field {
+ float: none;
height: inherit;
+ margin-bottom: 10px;
position: relative;
text-align: left;
width: 100%;
@@ -57,6 +121,10 @@
color: #009ae5;
}
+ &.unselectable {
+ color: inherit;
+ }
+
.diagram-builder-field-icon {
display: block;
font-size: 22px;
diff --git a/content-targeting-web/docroot/js/content_targeting/ct_form_builder.js b/content-targeting-web/docroot/js/content_targeting/ct_form_builder.js
index 5de6f018a..e44b33773 100644
--- a/content-targeting-web/docroot/js/content_targeting/ct_form_builder.js
+++ b/content-targeting-web/docroot/js/content_targeting/ct_form_builder.js
@@ -18,6 +18,16 @@ AUI.add(
'
{editor}
' +
'',
+ ITEM_CATEGORY_HEADER_TPL = '' +
+ '
' +
+ '
' +
+ '
{name}
' +
+ '
{description}
' +
+ '
' +
+ '
',
+
+ ITEM_CATEGORY_CONTENT_TPL = '',
+
LiferayCTFormItemSearch = A.Base.create('Search', A.Base, [A.AutoCompleteBase],
{
initializer: function() {
@@ -68,23 +78,45 @@ AUI.add(
_afterUiSetAvailableFields: function(event) {
var instance = this,
+ fieldsContainer = A.one('.diagram-builder-fields-container'),
searchBox = instance.get('searchBox');
if (searchBox) {
A.one('.tab-pane.active').insertBefore(
searchBox,
- A.one('.diagram-builder-fields-container')
+ fieldsContainer
).removeClass('hide');
}
+ var categories = {};
+
A.Array.each(
instance.get('availableFields'),
function(item) {
var title = item.labelNode.one('.field-title').text();
- item.get('node').attr('title', title);
+ var itemNode = item.get('node');
+
+ itemNode.attr('title', title);
+
+ var category = item.get('options').category;
+
+ var categoryKey = category.key;
+
+ if (category && categoryKey) {
+ if (!categories[categoryKey]) {
+ categories[categoryKey] = {
+ category: category,
+ fields: []
+ };
+ }
+
+ categories[categoryKey].fields.push(itemNode);
+ }
}
);
+
+ instance._groupFields(categories, fieldsContainer);
},
_createItemFilter: function() {
@@ -117,6 +149,60 @@ AUI.add(
return fieldSearch;
},
+ _groupFields: function(categories, fieldsContainer) {
+ var instance = this,
+ categoryContent,
+ categoryHeader,
+ categoryWrapper;
+
+ A.Object.each(
+ categories,
+ function(item) {
+ categoryHeader = A.Node.create(
+ A.Lang.sub(
+ ITEM_CATEGORY_HEADER_TPL,
+ {
+ description: item.category.description,
+ icon: item.category.icon,
+ name: item.category.name
+ }
+ )
+ );
+
+ categoryContent = A.Node.create(
+ A.Lang.sub(
+ ITEM_CATEGORY_CONTENT_TPL
+ )
+ );
+
+ A.Array.each(
+ item.fields,
+ function(field) {
+ categoryContent.append(field);
+ }
+ );
+
+ categoryWrapper = A.Node.create('');
+ categoryWrapper.append(categoryHeader);
+ categoryWrapper.append(categoryContent);
+
+ fieldsContainer.append(categoryWrapper);
+ }
+ );
+
+ if (!instance._togglerDelegate) {
+ instance._togglerDelegate = new A.TogglerDelegate(
+ {
+ animated: true,
+ container: fieldsContainer,
+ content: '.category-content',
+ expanded: true,
+ header: '.category-header'
+ }
+ );
+ }
+ },
+
_onClickField: function(event) {
var instance = this,
field = A.Widget.getByNode(event.target);
@@ -165,7 +251,10 @@ AUI.add(
fieldsContainer.all('.form-builder-field').each(
function(field) {
- var description = field.one('.field-description').text(),
+ var categoryIcon = field.attr('data-categoryicon'),
+ categoryKey = field.attr('data-categorykey'),
+ categoryName = field.attr('data-categoryname'),
+ description = field.one('.field-description').text(),
editor = field.attr('data-template'),
icon = field.attr('data-icon'),
key = field.attr('data-key'),
@@ -193,6 +282,13 @@ AUI.add(
description: description
}
),
+ options: {
+ category: {
+ icon: categoryIcon,
+ key: categoryKey,
+ name: categoryName
+ }
+ },
type: key,
unique: unique
}
@@ -310,6 +406,6 @@ AUI.add(
},
'',
{
- requires: ['aui-form-builder', 'aui-parse-content', 'autocomplete-base', 'autocomplete-filters']
+ requires: ['aui-form-builder', 'aui-parse-content', 'aui-toggler', 'autocomplete-base', 'autocomplete-filters']
}
);
\ No newline at end of file