FLUID-4323: Fix up the interaction between content simplification and…

… the TOC.
fluid-project · Mar 27, 2013 · 208c5bb · 208c5bb
1 parent b575493
commit 208c5bb
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 16 deletions.
diff --git a/src/webapp/components/tableOfContents/html/TableOfContents.html b/src/webapp/components/tableOfContents/html/TableOfContents.html
@@ -1,5 +1,5 @@
 <!-- Table of contents template -->
-<h1>Table of Contents</h1>
+<h1 class="flc-tableOfContents-exclude">Table of Contents</h1>
 <ul class="flc-toc-levels-level1">
     <li class="flc-toc-levels-items1">
         <a class="flc-toc-levels-link1" href="">1</a>

diff --git a/src/webapp/components/tableOfContents/js/TableOfContents.js b/src/webapp/components/tableOfContents/js/TableOfContents.js
@@ -43,16 +43,25 @@ var fluid_1_5 = fluid_1_5 || {};
     };
 
     /**
-     * Invoker function to filter headings.  Default is to filter out the visible headings.
+     * Invoker function to filter headings.  Default is to filter out the visible headings
+     * that don't have a special 'exclusion' class.
      * @param   Object  Contains a list of headings, usually generated by that.locate("headings")
      * @return  filtered headings
      */
     fluid.tableOfContents.filterHeadings = function (headings) {
-        return headings.filter(":visible");
+        return headings.filter(":visible").filter('[class!="flc-tableOfContents-exclude"]');
     };
 
-    fluid.tableOfContents.finalInit = function (that) {
+    fluid.tableOfContents.regenerateToc = function (that) {
         var headings = that.filterHeadings(that.locate("headings"));
+        that.anchorInfo = fluid.transform(headings, function (heading) {
+            return that.headingTextToAnchor(heading);
+        });
+        var headingsModel = that.modelBuilder.assembleModel(headings, that.anchorInfo);
+        that.applier.requestChange("", headingsModel);
+    };
+
+    fluid.tableOfContents.finalInit = function (that) {
 
         that.headingTextToAnchor = function (heading) {
             var guid = that.generateGUID();
@@ -66,9 +75,6 @@ var fluid_1_5 = fluid_1_5 || {};
             return anchorInfo;
         };
 
-        that.anchorInfo = fluid.transform(headings, function (heading) {
-            return that.headingTextToAnchor(heading);
-        });
 
         // TODO: is it weird to have hide and show on a component?
         that.hide = function () {
@@ -79,9 +85,12 @@ var fluid_1_5 = fluid_1_5 || {};
             that.locate("tocContainer").show();
         };
 
-        var headingsModel = that.modelBuilder.assembleModel(headings, that.anchorInfo);
-
-        that.applier.requestChange("", headingsModel);
+        that.applier.modelChanged.addListener("headingsModel", function () {
+            if (that.levels) {
+                that.levels.refreshView();
+            }
+        });
+        that.regenerateToc();
 
         that.events.onReady.fire();
     };
@@ -112,7 +121,11 @@ var fluid_1_5 = fluid_1_5 || {};
         invokers: {
             insertAnchor: "fluid.tableOfContents.insertAnchor",
             generateGUID: "fluid.tableOfContents.generateGUID",
-            filterHeadings: "fluid.tableOfContents.filterHeadings"
+            filterHeadings: "fluid.tableOfContents.filterHeadings",
+            regenerateToc: {
+                funcName: "fluid.tableOfContents.regenerateToc",
+                args: "{that}"
+            }
         },
         selectors: {
             headings: ":header",

diff --git a/src/webapp/components/uiOptions/html/FatPanelUIOptionsFrame.html b/src/webapp/components/uiOptions/html/FatPanelUIOptionsFrame.html
@@ -37,7 +37,8 @@
      </head>
 
     <body class="fl-uiOptions-fatPanel fl-focus">
-        <div class="flc-toc-tocContainer fl-hidden">
+        <div class="fl-hidden">
+            <div class="flc-toc-tocContainer"></div>
         </div>
     </body>
 

diff --git a/src/webapp/integration-demos/uiOptions/js/uiOptionsDemo.js b/src/webapp/integration-demos/uiOptions/js/uiOptionsDemo.js
@@ -6,9 +6,15 @@
     var pathToTemplates = "../../components/uiOptions/html/";
 
     var extraSiteSettings = {
-            simplifiedContent: false,
-            selfVoicing: false
-        };
+        simplifiedContent: false,
+        selfVoicing: false
+    };
+
+    demo.updateToc = function (tocEnactor) {
+        if (tocEnactor.tableOfContents) {
+            tocEnactor.tableOfContents.regenerateToc();
+        }
+    };
 
     demo.initPageEnhancer = function (customThemeName) {
         fluid.pageEnhancer({
@@ -19,6 +25,24 @@
                 theme: {
                     "default": customThemeName
                 }
+            },
+            components: {
+                simplifiedContent: {
+                    options: {
+                        listeners: {
+                            settingChanged: "{uiEnhancer}.events.simplifyContentChanged"
+                        }
+                    }
+                }
+            },
+            events: {
+                simplifyContentChanged: null
+            },
+            listeners: {
+                simplifyContentChanged: {
+                    listener: "demo.updateToc",
+                    args: "{that}.tableOfContents"
+                }
             }
         });
     };

diff --git a/src/webapp/integration-demos/uiOptions/js/uiOptionsExtra.js b/src/webapp/integration-demos/uiOptions/js/uiOptionsExtra.js
@@ -131,6 +131,9 @@ var fluid_1_5 = fluid_1_5 || {};
         model: {
             value: false
         },
+        events: {
+            settingChanged: null
+        },
         invokers: {
             set: {
                 funcName: "fluid.uiOptions.actionAnts.simplifiedContentEnactor.set",
@@ -150,7 +153,7 @@ var fluid_1_5 = fluid_1_5 || {};
 
         if (!that.initialContent || !that.article) {
             that.initialContent = contentContainer.html();
-            $("aside", that.container).addClass("fl-hidden");
+            $("aside", that.container).remove();
             $("img", that.container).css("float", "none");
             $("figure", that.container).css("float", "none");
             var article = contentContainer.find("article").html();
@@ -169,6 +172,7 @@ var fluid_1_5 = fluid_1_5 || {};
                 contentContainer.html(that.initialContent);
             }
         }
+        that.events.settingChanged.fire();
     };
 
     fluid.uiOptions.actionAnts.simplifiedContentEnactor.finalInit = function (that) {
@@ -189,14 +193,23 @@ var fluid_1_5 = fluid_1_5 || {};
             simplifiedContent: {
                 type: "fluid.uiOptions.actionAnts.simplifiedContentEnactor",
                 container: "{uiEnhancer}.container",
+                createOnEvent: "onCreateSimplifiedContent",
                 options: {
                     sourceApplier: "{uiEnhancer}.applier",
                     rules: {
                          "simplifiedContent": "value"
                     }
                 }
             }
+        },
+        events: {
+            onCreateSimplifiedContent: null
         }
     });
+    fluid.uiEnhancer.extraActions.finalInit = function (that) {
+        $(document).ready(function () {
+            that.events.onCreateSimplifiedContent.fire();
+        });
+    };
 
 })(jQuery, fluid_1_5);