Skip to content

Commit

Permalink
WCM-58 Generate markup and simplify generated JS
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbalsas @juliocamarero
jbalsas authored and juliocamarero committed Apr 10, 2014
1 parent 0344d8f commit cef6dbb
Show file tree
Hide file tree
Showing 6 changed files with 402 additions and 261 deletions.
1 change: 1 addition & 0 deletions portlets/content-targeting-portlet/docroot/WEB-INF/liferay-portlet.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<header-portlet-css>/css/content_targeting/main.css</header-portlet-css>
<header-portlet-javascript>/js/content_targeting/input_slider.js</header-portlet-javascript>
<header-portlet-javascript>/js/content_targeting/search.js</header-portlet-javascript>
<header-portlet-javascript>/js/content_targeting/ct_form_builder.js</header-portlet-javascript>
<css-class-wrapper>content-targeting-portlet</css-class-wrapper>
</portlet>
<portlet>
Expand Down
4 changes: 2 additions & 2 deletions ...let/docroot/WEB-INF/src/com/liferay/contenttargeting/portlet/ContentTargetingPortlet.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -455,7 +455,7 @@ else if (path.equals(ContentTargetingPath.EDIT_USER_SEGMENT)) {
ruleTemplate.setInstanceId(
ruleInstance.getRuleInstanceId());
ruleTemplate.setRule(rule);
ruleTemplate.setTemplate(HtmlUtil.escapeJS(html));
ruleTemplate.setTemplate(HtmlUtil.escapeAttribute(html));

addedRuleTemplates.add(ruleTemplate);
}
Expand All @@ -478,7 +478,7 @@ else if (path.equals(ContentTargetingPath.EDIT_USER_SEGMENT)) {
null, _cloneTemplateContext(template));

ruleTemplate.setRule(rule);
ruleTemplate.setTemplate(HtmlUtil.escapeJS(html));
ruleTemplate.setTemplate(HtmlUtil.escapeAttribute(html));

ruleTemplates.add(ruleTemplate);
}
Expand Down
16 changes: 12 additions & 4 deletions portlets/content-targeting-portlet/docroot/css/content_targeting/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,21 @@

.form-builder {
.form-builder-content {
.form-builder-content-container {
padding-left: 240px;
}

.tabbable {
margin-left: 0;
width: 240px;
}

.tabbable-content {
> .nav {
display: none;
}

.tab-content {
padding: 0 20px 10px 0;

.tab-pane {
display: none;
height: auto;
Expand All @@ -27,6 +34,7 @@

.search-panels-input {
border-radius: 0;
width: 166px;
}
}
}
Expand All @@ -38,7 +46,6 @@

.diagram-builder-field {
height: inherit;
padding-left: 10px;
position: relative;
text-align: left;
width: 100%;
Expand All @@ -56,7 +63,7 @@

.diagram-builder-field-label {
font-size: 12px;
left: 60px;
left: 40px;
line-height: 18px;
position: absolute;
top: 5px;
Expand All @@ -80,6 +87,7 @@
.diagram-builder-drop-container {
height: auto;
min-height: 500px;
padding-bottom: 0;
}

.toolbar {
Expand Down
268 changes: 81 additions & 187 deletions portlets/content-targeting-portlet/docroot/html/content_targeting/edit_user_segment.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,206 +34,100 @@

<@aui["input"] name="description" />

<div class="panel-page-menu rules-search hide">
<div class="search-panels">
<i class="icon-search"></i>
<@aui["field-wrapper"] label="Rules">
<div id="formBuilderBB" class="yui3-widget component diagram-builder form-builder liferayctformbuilder">
<div id="formBuilderCB" class="diagram-builder-content form-builder-content">
<div class="tabbable">
<div class="tabbable-content">
<ul class="nav nav-tabs">
<li class="active"><a href="javascript:;">Add node</a></li>
<li><a href="javascript:;">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane">
<div class="panel-page-menu hide" id="formBuilderSB">
<div class="search-panels">
<i class="icon-search"></i>

<div class="search-panels-bar">
<@aui["input"] cssClass="search-panels-input search-query" label="" name="searchPanel" type="text" />
</div>
</div>
</div>

<ul class="diagram-builder-fields-container form-builder-fields-container clearfix">
<#list ruleTemplates as template>
<#assign rule = template.getRule()>
<#assign templateKey = template.getTemplateKey()>

<li class="diagram-builder-field form-builder-field hide" data-icon="${rule.getIcon()}" data-key="${templateKey}" data-template="${template.getTemplate()}" data-unique="${(!rule.isInstantiable())?string}">
<span class="icon diagram-builder-field-icon ${rule.getIcon()}"></span>
<div class="diagram-builder-field-label">
<div class="row">
<div class="rule-title">${rule.getName(locale)}</div>
<div class="rule-description">${rule.getDescription(locale)}</div>
</div>
</div>
</li>
</#list>
</ul>
</div>
<div class="tab-pane"></div>
</div>
</div>
</div>

<div class="diagram-builder-content-container form-builder-content-container">
<div class="diagram-builder-canvas form-builder-canvas">
<div class="diagram-builder-drop-container form-builder-drop-container">
<#if userSegment??>
<#list addedRuleTemplates as template>
<#assign rule = template.getRule()>
<#assign templateKey = template.getTemplateKey()>

<div class="widget component form-builder-field yui3-widget hide" data-icon="${rule.getIcon()}" data-key="${templateKey}" data-template="${template.getTemplate()}" data-unique="${(!rule.isInstantiable())?string}">
<div>
<div>
<div class="rule-header">
<div class="rule-icon"><i class="${rule.getIcon()}"></i></div>
<div class="row rule-info">
<div class="rule-title">${rule.getName(locale)}</div>
<div class="rule-description">${rule.getDescription(locale)}</div>
</div>
</div>
<div class="rule-editor">
</div>
</div>
</div>
</div>
</#list>
</#if>
</div>
</div>
</div>

<div class="search-panels-bar">
<@aui["input"] cssClass="search-panels-input search-query span12" label="" name="searchPanel" type="text" />
</div>
</div>
</div>

<div id="formBuilder"></div>
</@>

<@aui["button-row"]>
<@aui["button"] cssClass="pull-right" type="submit" />
<@aui["button"] type="submit" />
<@aui["button"] href="${redirect}" type="cancel" />
</@>
</@>

<@aui["script"] use="aui-form-builder,aui-parse-content,autocomplete-base,autocomplete-filters">

A.FormBuilder.CTRuleFieldTemplate = '<div>' +
'<div class="rule-header">' +
'<div class="rule-icon">' +
'<i class="{icon}"></i>' +
'</div>' +
'<div class="row rule-info">' +
'<div class="rule-title">{name}</div>' +
'<div class="rule-description">{description}</div>' +
'</div>' +
'</div>' +
'<div class="rule-editor">{editor}</div>' +
'</div>';

A.FormBuilder.prototype._onClickField = function(event) {
var instance = this,
field = A.Widget.getByNode(event.target);

instance.simulateFocusField(field, event.target);

event.stopPropagation();
};

A.FormBuilder.prototype.simulateFocusField = function(field, target) {
var instance = this,
lastFocusedField = instance.lastFocusedField;

if (lastFocusedField) {
lastFocusedField.blur();
}

instance.lastFocusedField = field.focus();

if (target) {
target.focus();
}
};

<#assign templates = ruleTemplates>

<#include "rule_field_template.ftl" />

<#if userSegment??>
<#assign templates = addedRuleTemplates>

<#include "rule_field_template.ftl" />
</#if>

var userSegmentBuilder = new A.FormBuilder(
<@aui["script"] use="liferay-ct-form-builder">
var userSegmentBuilder = new A.LiferayCTFormBuilder(
{
boundingBox: '#formBuilder',

availableFields:
[
<#list rules as rule>
{
iconClass: '${rule.getIcon()}',

<#if !rule.isInstantiable()>
id: '${rule.getRuleKey()}Unique',
</#if>

label: '<div class="row"><div class="rule-title">${rule.getName(locale)}</div><div class="rule-description">${rule.getDescription(locale)}</div></div>',
type: '${rule.getRuleKey()}',
unique: ${(!rule.isInstantiable())?string}
}

<#if rule_has_next>,</#if>
</#list>
]

<#if userSegment??>
,

fields:
[
<#list ruleInstances as ruleInstance>
<#assign rule = rulesRegistry.getRule(ruleInstance.getRuleKey())>

{
iconClass: '${rule.getIcon()}',

<#if !rule.isInstantiable()>
id: '${rule.getRuleKey()}Unique',
</#if>

label: '${rule.getName(locale)}',
type: '${rule.getRuleKey()}_${ruleInstance.getRuleInstanceId()}',
unique: ${(!rule.isInstantiable())?string}
}

<#if ruleInstance_has_next>,</#if>
</#list>
]
</#if>
boundingBox: '#formBuilderBB',
contentBox: '#formBuilderCB',
searchBox: '#formBuilderSB'
}
).render();

A.one('.tab-pane.active').insertBefore(
A.one('.rules-search'),
A.one('.diagram-builder-fields-container')
).removeClass('hide');

var RuleSearch = A.Base.create('ruleSearch', A.Base, [A.AutoCompleteBase],
{
initializer: function () {
this._bindUIACBase();
this._syncUIACBase();
}
}
);

var ruleFilter = new RuleSearch(
{
inputNode: '.rules-search .search-panels-input',
minQueryLength: 0,
queryDelay: 0,

source: (function () {
var results = [];

A.all('.diagram-builder-fields-container .rule-title').each(function (node) {
results.push({
node: node,
searchData: node.text()
});
});

return results;
}()),

resultTextLocator: 'searchData',

resultFilters: 'phraseMatch'
}
);

ruleFilter.on(
'results',
function (e) {
A.all('.diagram-builder-field').addClass('hide');

A.Array.each(
e.results,
function (result) {
result.raw.node.ancestor('.diagram-builder-field').removeClass('hide');
}
);
}
);

saveRules = function() {
var userSegment = {
rules: []
};

userSegmentBuilder.get('fields').each(
function(item) {
var rule = {
id: item.get('id'),
data: [],
type: item.get('type')
};

var contentBox = item.get('contentBox');

contentBox.all('input, select, textarea').each(
function(input) {
rule.data.push(
{
name: input.attr('name'),
value: input.val()
}
);
}
);

userSegment.rules.push(rule);
}
);

document.<@portlet["namespace"] />fm.<@portlet["namespace"] />userSegmentRules.value = JSON.stringify(userSegment);
document.<@portlet["namespace"] />fm.<@portlet["namespace"] />userSegmentRules.value = userSegmentBuilder.exportAsJSON();

submitForm(document.<@portlet["namespace"] />fm);
};
</@>
Loading

0 comments on commit cef6dbb

Please sign in to comment.