Skip to content

Commit

Permalink
WCM-59 Group items by category in form builder
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbalsas @juliocamarero
jbalsas authored and juliocamarero committed Jul 18, 2014
1 parent 8762c36 commit 6c6092b
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 4 deletions.
68 changes: 68 additions & 0 deletions content-targeting-web/docroot/css/content_targeting/main.css
View file
Expand Up @@ -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%;
Expand All @@ -57,6 +121,10 @@
color: #009ae5;
}

&.unselectable {
color: inherit;
}

.diagram-builder-field-icon {
display: block;
font-size: 22px;
Expand Down
104 changes: 100 additions & 4 deletions content-targeting-web/docroot/js/content_targeting/ct_form_builder.js
View file
Expand Up @@ -18,6 +18,16 @@ AUI.add(
'<div class="field-editor">{editor}</div>' +
'</div>',

ITEM_CATEGORY_HEADER_TPL = '<div class="category-header toggler-header toggler-header-expanded">' +
'<span class="category-icon icon {icon}"></span>' +
'<div class="category-info"> ' +
'<div class="category-title">{name}</div>' +
'<div class="category-description">{description}</div>' +
'</div>' +
'</div>',

ITEM_CATEGORY_CONTENT_TPL = '<div class="category-content toggler-content toggler-content-expanded"></div>',

LiferayCTFormItemSearch = A.Base.create('Search', A.Base, [A.AutoCompleteBase],
{
initializer: function() {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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('<div class="category-wrapper"></div>');
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);
Expand Down Expand Up @@ -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'),
Expand Down Expand Up @@ -193,6 +282,13 @@ AUI.add(
description: description
}
),
options: {
category: {
icon: categoryIcon,
key: categoryKey,
name: categoryName
}
},
type: key,
unique: unique
}
Expand Down Expand Up @@ -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']
}
);

0 comments on commit 6c6092b

Please sign in to comment.