Index: components/browse/html/browse.html =================================================================== --- components/browse/html/browse.html (revision 9182) +++ components/browse/html/browse.html (working copy) @@ -38,6 +38,7 @@

+ TOGGLE
Index: components/browse/js/Browse.js =================================================================== --- components/browse/js/Browse.js (revision 9182) +++ components/browse/js/Browse.js (working copy) @@ -35,59 +35,6 @@ }; /** - * Renderers out the pieces of the component - * - * @param {Object} that,the component - */ - var renderBrowse = function (that) { - - var utils = fluid.engage.renderUtils; - var renderOpts = { - selectorsToIgnore: ["title", "browseDescription", "browseContents", "browseDescriptionContainer"], - repeatingSelectors: ["lists"] - }; - - var renderer = utils.createRendererFunction(that.container, that.options.selectors, renderOpts); - - var tree = fluid.transform(that.model.categories, function (category) { - var children = []; - var description = category.description; - var name = - fluid.stringTemplate(that.options.strings[category.isCurrent ? "currentCategory" : "upcomingCategory"], {size: category.items.length}); - - if (name) { - var cabinetHandle = utils.uiBound("cabinetHandle"); - children.push(cabinetHandle); - children.push(utils.uiBound("listHeader", name)); - if (description) { - children.push(utils.uiBound("listHeaderDescription", description)); - cabinetHandle.decorators = [{ - type: "addClass", - classes: that.options.styles.listHeaderDescription - }]; - } - } - - var navListModel = fluid.transform(category.items, function (item) { - return { - target: item.url, - image: item.imageUrl, - title: item.title, - description: item.description - }; - }); - children.push(utils.decoratedUIBound("listContents", [{ - type: "fluid", - func: "fluid.navigationList", - options: fluid.merge("merge", fluid.copy(that.options.navigationList.options), {model: navListModel}) - }])); - return utils.uiContainer("lists:", children); - }); - - renderer(tree); - }; - - /** * Initializes the Cabinet component which is used as a subcomponent * * @param {Object} that, the component @@ -96,23 +43,72 @@ that.cabinet = fluid.initSubcomponent(that, "cabinet", [that.locate("browseContents"), fluid.COMPONENT_OPTIONS]); }; - /** - * Initializes the Description component which is used as a subcomponent - * - * @param {Object} that, the component - */ - var initDescription = function (that) { - var descr = that.model.description; - if (descr) { - that.description = fluid.initSubcomponent(that, "description", - [that.locate("browseDescriptionContainer"), - fluid.merge("merge", fluid.copy(that.options.description.options), {model: descr})]); - } - else { - that.locate("browseDescriptionContainer").remove(); - } - }; + function mapToNavListModel(items) { + return fluid.transform(items, function (item) { + return { + target: item.url, + image: item.imageUrl, + title: item.title, + description: item.description + }; + }); + } + function makeProtoComponents(that, navLists) { + return { + title: {messagekey: "%title"}, + browseContents: that.options.useCabinet ? { + decorators: [{ + type: "fluid", + func: "fluid.cabinet", + options: fluid.copy(that.options.cabinet.options) + }] + } : {}, + browseDescriptionContainer: that.model.description ? { + decorators: [{ + type: "fluid", + func: "fluid.description", + options: fluid.merge("merge", fluid.copy(that.options.description.options), {model: that.model.description}) + }] + } : "", + lists: { + children: fluid.transform(that.model.categories || [], function (category, index) { + var description = category.description; + var name = fluid.stringTemplate(that.options.strings[category.name], {size: category.items.length}); + navLists[index] = { + type: "fluid", + func: "fluid.navigationList", + options: fluid.merge("merge", fluid.copy(that.options.navigationList.options), {model: mapToNavListModel(category.items)}) + }; + var child = { + listContents: { + decorators: navLists[index] + } + }; + if (name) { + child.cabinetHandle = description ? { + decorators: [{ + type: "addClass", + classes: that.options.styles.listHeaderDescription + }] + } : {}; + child.listHeader = name; + if (description) { + child.listHeaderDescription = description; + } + } + return child; + }) + } + }; + } + + function assembleTree(that, expander, navLists) { + var protoTree = makeProtoComponents(that, navLists); + var fullTree = expander(protoTree); + return fullTree; + } + /** * Executes the various functions required to properly setup the component * @@ -120,16 +116,28 @@ */ var setup = function (that) { bindEvents(that); - that.locate("title").text(that.title); // Set the page title - initDescription(that); - renderBrowse(that); + var messageLocator = fluid.messageLocator(that.options.strings, fluid.stringTemplate); + that.render = fluid.engage.renderUtils.createRendererFunction(that.container, that.options.selectors, { + selectorsToIgnore: ["browseDescription", "toggle"], + repeatingSelectors: ["lists"], + rendererOptions: { + messageLocator: messageLocator, + model: that.model + } + }); + that.refreshView(); that.events.afterRender.fire(that); - //Initializing the cabinet must come after all of the rendering is complete and the markup is displayed - if (that.options.useCabinet) { - initCabinet(that); - } }; + var activateToggler = function (that, navLists) { + that.locate("toggle").click(function () { + fluid.transform(navLists || [], function (navList) { + navList.that.toggleLayout(); + }); + return false; + }); + }; + /** * The component's creator function * @@ -139,8 +147,16 @@ fluid.browse = function (container, options) { var that = fluid.initView("fluid.browse", container, options); that.model = that.options.model; - that.title = that.options.title || that.model.categories[0].name; + var expander = fluid.renderer.makeProtoExpander({ELstyle: "%"}); + + that.refreshView = function () { + var navLists = []; + var tree = assembleTree(that, expander, navLists); + that.render(tree); + activateToggler(that, navLists); + }; + setup(that); return that; }; @@ -180,7 +196,8 @@ listHeader: ".flc-cabinet-header", listHeaderDescription: ".flc-cabinet-headerDescription", listContents: ".flc-cabinet-contents", - lists: ".flc-cabinet-drawer" + lists: ".flc-cabinet-drawer", + toggle: ".flc-browse-navlist-toggle" }, styles: { Index: components/cabinet/css/Cabinet.css =================================================================== --- components/cabinet/css/Cabinet.css (revision 9182) +++ components/cabinet/css/Cabinet.css (working copy) @@ -12,10 +12,6 @@ .fl-collapsable { margin: 12px; } -.fl-cabinet-drawerClosed { - max-height:50px; -} - .fl-cabinet-animation { -webkit-transition: max-height 0.75s ease-in; } Index: components/cabinet/js/Cabinet.js =================================================================== --- components/cabinet/js/Cabinet.js (revision 9182) +++ components/cabinet/js/Cabinet.js (working copy) @@ -204,7 +204,7 @@ addAria(that); addCSS(that); moveDrawers(that, that.options.startOpen ? open : close, that.locate("drawer"), that.options.preventEventFireOnInit); - if (!that.options.startOpen) { + if (that.options.startOpen) { that.openDrawers(that.locate("openByDefault")); } addClickEvent(that); @@ -273,8 +273,7 @@ styles: { drawerClosed: "fl-cabinet-drawerClosed", - drawerOpened: "fl-cabinet-drawerOpened", - + drawerOpened: "fl-cabinet-drawerOpened", drawer: "fl-container fl-container-autoHeading fl-cabinet-animation fl-container-collapsable", shelf: "fl-container", contents: "fl-cabinet-contents",