Skip to content

Commit

Permalink
FLUID-5201: Composite panel less aggressive
Browse files Browse the repository at this point in the history 
The composite panel will be less aggressive in terms of rebasing/surfacing subcomponents. will only work with fluid.prefs.panel type subcomponents.
  • Loading branch information
@jobara
jobara committed Oct 31, 2013
1 parent b20510c commit 7e521e2
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 26 deletions.
59 changes: 36 additions & 23 deletions src/framework/preferences/js/Panels.js
View file
Expand Up @@ -191,17 +191,24 @@ var fluid_1_5 = fluid_1_5 || {};
resources: {} // template is reserved for the compositePanel's template, the subpanel template should have same key as the selector for its container.
});

fluid.prefs.compositePanel.isPanel = function (compName, compOpts) {
var opts = $.extend(true, {}, fluid.defaults(compName), compOpts);
return fluid.hasGrade(opts, "fluid.prefs.panel");
};

/*
* Creates a grade containing the distributeOptions rules needed for the subcomponents
*/
fluid.prefs.compositePanel.assembleDistributeOptions = function (components) {
var gradeName = "fluid.prefs.compositePanel.distributeOptions";
var distributeRules = [];
$.each(components, function (componentName) {
distributeRules.push({
source: "{that}.options.subPanelOverrides",
target: "{that > " + componentName + "}.options"
});
$.each(components, function (componentName, componentOptions) {
if (fluid.prefs.compositePanel.isPanel(componentOptions.type, componentOptions.options)) {
distributeRules.push({
source: "{that}.options.subPanelOverrides",
target: "{that > " + componentName + "}.options"
});
}
});

fluid.defaults(gradeName, {
Expand Down Expand Up @@ -257,23 +264,27 @@ var fluid_1_5 = fluid_1_5 || {};
*/
fluid.prefs.compositePanel.surfaceSubpanelRendererSelectors = function (components, selectors) {
fluid.each(components, function (compOpts, compName) {
var comp = fluid.defaults(compOpts.type);
fluid.each(comp.selectors, function (selector, selName) {
if (!comp.selectorsToIgnore || $.inArray(selName, comp.selectorsToIgnore) < 0) {
fluid.set(selectors, fluid.prefs.compositePanel.rebaseSelectorName(compName, selName), selectors[compName] + " " + selector);
}
});
if (fluid.prefs.compositePanel.isPanel(compOpts.type, compOpts.options)) {
var comp = fluid.defaults(compOpts.type);
fluid.each(comp.selectors, function (selector, selName) {
if (!comp.selectorsToIgnore || $.inArray(selName, comp.selectorsToIgnore) < 0) {
fluid.set(selectors, fluid.prefs.compositePanel.rebaseSelectorName(compName, selName), selectors[compName] + " " + selector);
}
});
}
});
};

fluid.prefs.compositePanel.surfaceRepeatingSelectors = function (components) {
var repeatingSelectors = [];
fluid.each(components, function (compOpts, compName) {
var comp = fluid.defaults(compOpts.type);
var rebasedRepeatingSelectors = fluid.transform(comp.repeatingSelectors, function (selector) {
return fluid.prefs.compositePanel.rebaseSelectorName(compName, selector);
});
repeatingSelectors = repeatingSelectors.concat(rebasedRepeatingSelectors);
if (fluid.prefs.compositePanel.isPanel(compOpts.type, compOpts.options)) {
var comp = fluid.defaults(compOpts.type);
var rebasedRepeatingSelectors = fluid.transform(comp.repeatingSelectors, function (selector) {
return fluid.prefs.compositePanel.rebaseSelectorName(compName, selector);
});
repeatingSelectors = repeatingSelectors.concat(rebasedRepeatingSelectors);
}
});
return repeatingSelectors;
};
Expand Down Expand Up @@ -339,13 +350,15 @@ var fluid_1_5 = fluid_1_5 || {};
fluid.prefs.compositePanel.produceSubPanelTrees = function (that) {
var tree = {children: []};
fluid.each(that.options.components, function (options, componentName) {
var subPanel = that[componentName];
var expanderOptions = fluid.renderer.modeliseOptions(subPanel.options.expanderOptions, {ELstyle: "${}"}, subPanel);
var expander = fluid.renderer.makeProtoExpander(expanderOptions, subPanel);
var subTree = subPanel.produceTree();
subTree = fluid.get(subPanel.options, "rendererFnOptions.noexpand") ? subTree : expander(subTree);
var rebasedTree = fluid.prefs.compositePanel.rebaseTree(subTree, componentName, that[componentName].options.rules);
tree.children = tree.children.concat(rebasedTree.children);
if (fluid.prefs.compositePanel.isPanel(options.type, options.options)) {
var subPanel = that[componentName];
var expanderOptions = fluid.renderer.modeliseOptions(subPanel.options.expanderOptions, {ELstyle: "${}"}, subPanel);
var expander = fluid.renderer.makeProtoExpander(expanderOptions, subPanel);
var subTree = subPanel.produceTree();
subTree = fluid.get(subPanel.options, "rendererFnOptions.noexpand") ? subTree : expander(subTree);
var rebasedTree = fluid.prefs.compositePanel.rebaseTree(subTree, componentName, that[componentName].options.rules);
tree.children = tree.children.concat(rebasedTree.children);
}
});
return tree;
};
Expand Down
2 changes: 2 additions & 0 deletions src/tests/framework-tests/preferences/html/Panels-test.html
View file
Expand Up @@ -110,5 +110,7 @@ <h2><span class="fl-icon-contrast"></span><span class="flc-prefsEditor-contrast-
<input type="checkbox" id="inputs-choice" class="flc-prefsEditor-inputs-larger fl-force-left" />
</div>

<div class="fluid-5201"></div>

</body>
</html>
67 changes: 64 additions & 3 deletions src/tests/framework-tests/preferences/js/PanelsTests.js
View file
Expand Up @@ -73,9 +73,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}
});

/************************
* combined panel tests *
************************/
/*************************
* composite panel tests *
*************************/

fluid.tests.assertPathsExist = function (root, paths) {
fluid.each(paths, function (path) {
Expand Down Expand Up @@ -296,6 +296,67 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
jqUnit.assertEquals("The markup for subPanel2 should have rendered correctly", that.subPanel2.model.value, that.subPanel2.locate("header").text());
});

/* FLUID-5201: renderer fluid decorator */

fluid.defaults("fluid.tests.panel.sliderTest1", {
gradeNames: ["fluid.prefs.panel", "autoInit"],
selectors: {
textSize: ".flc-prefsEditor-min-val",
label: ".flc-prefsEditor-min-val-label",
smallIcon: ".flc-prefsEditor-min-val-smallIcon",
largeIcon: ".flc-prefsEditor-min-val-largeIcon",
multiplier: ".flc-prefsEditor-multiplier"
},
protoTree: {
label: {messagekey: "textSizeLabel"},
smallIcon: {messagekey: "textSizeSmallIcon"},
largeIcon: {messagekey: "textSizeLargeIcon"},
multiplier: {messagekey: "multiplier"},
textSize: {
decorators: {
type: "fluid",
func: "fluid.prefs.textfieldSlider"
}
}
}
});

jqUnit.test("FLUID-5201: renderer fluid decorator in a composite panel", function () {
jqUnit.expect(1);
var that = fluid.prefs.compositePanel(".fluid-5201", {
selectors: {
sliderTest1: ".flc-tests-panel-sliderTest1"
},
selectorsToIgnore: ["sliderTest1"],
components: {
sliderTest1: {
type: "fluid.tests.panel.sliderTest1",
createOnEvent: "initSubPanels",
container: "{that}.dom.sliderTest1"
}
},
resources: {
template: {
resourceText: '<ul><li class="flc-tests-panel-sliderTest1"></li></ul>'
},
sliderTest1: {
resourceText: '<div class="flc-prefsEditor-min-val"><div class="flc-textfieldSlider-slider"></div><input id="min-val" class="flc-textfieldSlider-field" type="text" /><span class="flc-prefsEditor-multiplier"></span></div>'
}
}
});

// the first call to refreshView does the initial rendeirng which includes
// putting the component defined by the renderer decorator into the components block
that.refreshView();

// the second call to refresh view uses the new components block and shoudl ignore
// the renderer decorator component which isn't a panel
that.refreshView();
jqUnit.assert("The composite panel containing a panel with renderer fluid decorator should have instantiated", that);
});

/* end FLUID-5201 */


/*******************************************************************************
* textFontPanel
Expand Down

0 comments on commit 7e521e2

Please sign in to comment.