From 6c6092bd362e8a8ac5da6e0696b6714385837cab Mon Sep 17 00:00:00 2001 From: Chema Balsas Date: Fri, 18 Jul 2014 13:41:10 +0200 Subject: [PATCH] WCM-59 Group items by category in form builder --- .../docroot/css/content_targeting/main.css | 68 ++++++++++++ .../js/content_targeting/ct_form_builder.js | 104 +++++++++++++++++- 2 files changed, 168 insertions(+), 4 deletions(-) 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