Page Comparison

// Define one subcomponent
fluid.defaults("tutorials.subcomponent1", {
    gradeNames: ["fluid.littleComponent", "autoInit"]
});

// Define another subcomponent
fluid.defaults("tutorials.subcomponent2", {
    gradeNames: ["fluid.littleComponent", "autoInit"]
});

// Define the parent component, to use the subcomponents
fluid.defaults("tutorials.parentComponent", {
    gradeNames: ["fluid.littleComponent", "autoInit"],
    components: {
        child1: {
            type: "tutorials.subcomponent1"
        },
        child2: {
            type: "tutorials.subcomponent2"
        }
    }
});

fluid.defaults("fluid.fatPanelUIOptions", {
    gradeNames: ["fluid.viewComponent", "autoInit"],            
    components: {
        uiOptions: {
            type: "fluid.uiOptions",
            container: ".flc-slidingPanel-panel"
        },        
        slidingPanel: {
            type: "fluid.slidingPanel",
            priority: "last",
            container: "{fatPanelUIOptions}.container"
        },
        preview: {
            type: "fluid.uiOptions.livePreview"
        }
    }
});       

fluid.defaults("fluid.fullNoPreviewUIOptions", {
    gradeNames: ["fluid.viewComponent", "autoInit"],            
    components: {
        uiOptions: {
            type: "fluid.uiOptions",
            container: "{fullNoPreviewUIOptions}.container"
        }                     
    }
});       

fluid.defaults("fluid.fullPreviewUIOptions", {
    gradeNames: ["fluid.viewComponent", "autoInit"],            
    components: {
        uiOptions: {
            type: "fluid.uiOptions",
            container: "{fullPreviewUIOptions}.container"
        },
        preview: {
            type: "fluid.uiOptions.preview",
            createOnEvent: "onReady"
        }
    }
});       

fluid.defaults("fluid.uiOptions", {
    gradeNames: ["fluid.viewComponent", "autoInit"],
    components: {
        textControls: {
            type: "fluid.uiOptions.textControls",
            container: "{uiOptions}.dom.textControls",
            createOnEvent: "onUIOptionsTemplateReady",
            options: {
                textSize: "{uiOptions}.options.textSize",
                lineSpacing: "{uiOptions}.options.lineSpacing",
                model: "{uiOptions}.model",
                applier: "{uiOptions}.applier"
            }
        },
        layoutControls: {
            type: "fluid.uiOptions.layoutControls",
            container: "{uiOptions}.dom.layoutControls",
            createOnEvent: "onUIOptionsTemplateReady",
            options: {
                model: "{uiOptions}.model",
                applier: "{uiOptions}.applier"
            }
        },
        linksControls: {
            type: "fluid.uiOptions.linksControls",
            container: "{uiOptions}.dom.linksControls",
            createOnEvent: "onUIOptionsTemplateReady",
            options: {
                model: "{uiOptions}.model",
                applier: "{uiOptions}.applier"
            }
        }
    }
});