Skip to content
Browse files

Merge remote-tracking branch 'cindyli/FLUID-4323' into demo

* cindyli/FLUID-4323:
  FLUID-4323: Fixed the chrome issue that the table of contents does not populated properly.
  FLUID-4323: Fix up the interaction between content simplification and the TOC.
  • Loading branch information...
2 parents 3dd082c + 63371a5 commit 214080bd5058514a9a54f6174dbc1d404fe25256 @michelled michelled committed
View
2 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>
View
38 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");
+ fluid.tableOfContents.filterHeadings = function (headings, exclude) {
+ return headings.filter(":visible").filter('[class!="' + exclude + '"]');
};
+ fluid.tableOfContents.regenerateToc = function (that) {
+ var headings = that.filterHeadings(that.locate("headings"), that.options.selectors.exclude);
+ 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) {
- var headings = that.filterHeadings(that.locate("headings"));
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,11 +121,16 @@ 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",
- tocContainer: ".flc-toc-tocContainer"
+ tocContainer: ".flc-toc-tocContainer",
+ exclude: "flc-tableOfContents-exclude"
},
events: {
onReady: null,
View
3 src/webapp/components/uiOptions/html/FatPanelUIOptionsFrame.html
@@ -53,7 +53,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>
View
30 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"
+ }
}
});
};
View
33 src/webapp/integration-demos/uiOptions/js/uiOptionsExtra.js
@@ -128,9 +128,15 @@ var fluid_1_5 = fluid_1_5 || {};
selectors: {
content: ".flc-uiOptions-content"
},
+ styles: {
+ simplified: "fl-uiOptins-content-simplified"
+ },
model: {
value: false
},
+ events: {
+ settingChanged: null
+ },
invokers: {
set: {
funcName: "fluid.uiOptions.actionAnts.simplifiedContentEnactor.set",
@@ -147,26 +153,32 @@ var fluid_1_5 = fluid_1_5 || {};
fluid.uiOptions.actionAnts.simplifiedContentEnactor.set = function (value, that) {
var contentContainer = that.container.find(that.options.selectors.content);
+ var simplified = contentContainer.hasClass(that.options.styles.simplified);
if (!that.initialContent || !that.article) {
that.initialContent = contentContainer.html();
- $("aside", that.container).addClass("fl-hidden");
- $("img", that.container).css("float", "none");
- $("figure", that.container).css("float", "none");
- var article = contentContainer.find("article").html();
+ var articleDom = contentContainer.find("article").clone();
+ $("aside", articleDom).remove();
+ $("img", articleDom).css("float", "none");
+ $("figure", articleDom).css("float", "none");
+ var article = articleDom.html();
that.article = article ? article : that.initialContent;
that.origBg = $("body").css("background-image");
}
if (value) {
- if (contentContainer.html() !== that.article) {
+ if (!simplified) {
$("body").css("background-image", "none");
contentContainer.html(that.article);
+ contentContainer.addClass(that.options.styles.simplified);
+ that.events.settingChanged.fire();
}
} else {
- if (contentContainer.html() !== that.initialContent) {
+ if (simplified) {
$("body").css("background-image", that.origBg);
contentContainer.html(that.initialContent);
+ contentContainer.removeClass(that.options.styles.simplified);
+ that.events.settingChanged.fire();
}
}
};
@@ -189,6 +201,7 @@ var fluid_1_5 = fluid_1_5 || {};
simplifiedContent: {
type: "fluid.uiOptions.actionAnts.simplifiedContentEnactor",
container: "{uiEnhancer}.container",
+ createOnEvent: "onCreateSimplifiedContent",
options: {
sourceApplier: "{uiEnhancer}.applier",
rules: {
@@ -205,7 +218,15 @@ var fluid_1_5 = fluid_1_5 || {};
}
}
}
+ },
+ events: {
+ onCreateSimplifiedContent: null
}
});
+ fluid.uiEnhancer.extraActions.finalInit = function (that) {
+ $(document).ready(function () {
+ that.events.onCreateSimplifiedContent.fire();
+ });
+ };
})(jQuery, fluid_1_5);

0 comments on commit 214080b

Please sign in to comment.
Something went wrong with that request. Please try again.