fluid-project · amb26 · Jul 20, 2018 · Aug 2, 2017 · Sep 27, 2017 · Oct 24, 2017
diff --git a/ReleaseNotes.md b/ReleaseNotes.md
@@ -52,6 +52,10 @@ categorized by license:
 * [`fluid.load.scripts` is based on Jake Archibald's script loading example](http://www.html5rocks.com/en/tutorials/speed/script-loading/#toc-dom-rescue)
 * [Open Sans Light font](http://www.google.com/fonts/specimen/Open+Sans)
 
+### BSD-3 ###
+
+* [Sinon v6.1.3](http://sinonjs.org)
+
 ### MIT License ###
 
 * [Buzz v1.1.0](http://buzz.jaysalvat.com)

diff --git a/demos/orator/index.html b/demos/orator/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" type="text/css" href="../../src/lib/normalize/css/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="../lib/foundation/css/foundation.css" />
+    <link rel="stylesheet" type="text/css" href="../../src/framework/core/css/fluid.css" />
+    <link rel="stylesheet" type="text/css" href="../../src/components/orator/css/Orator.css" />
+    <link rel="stylesheet" type="text/css" href="../../src/components/overviewPanel/css/OverviewPanel.css" />
+
+    <script type="text/javascript" src="../../src/lib/jquery/core/js/jquery.js"></script>
+    <script type="text/javascript" src="../../src/lib/jquery/ui/js/jquery-ui.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/jquery.keyboard-a11y.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/Fluid.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/FluidPromises.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/FluidDocument.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/FluidIoC.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/DataBinding.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/ModelTransformation.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/ModelTransformationTransforms.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/FluidView.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/NewViewSupport.js"></script>
+    <script type="text/javascript" src="../../src/framework/enhancement/js/ContextAwareness.js"></script>
+    <script type="text/javascript" src="../../src/components/textToSpeech/js/textToSpeech.js"></script>
+    <script type="text/javascript" src="../../src/components/orator/js/Orator.js"></script>
+    <script type="text/javascript" src="js/oratorDemo.js"></script>
+
+    <!-- required for the Overview Panel -->
+    <script type="text/javascript" src="../../src/framework/core/js/FluidDOMUtilities.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/FluidRequests.js"></script>
+    <script type="text/javascript" src="../../src/lib/fastXmlPull/js/fastXmlPull.js"></script>
+    <script type="text/javascript" src="../../src/framework/renderer/js/fluidParser.js"></script>
+    <script type="text/javascript" src="../../src/framework/core/js/MessageResolver.js"></script>
+    <script type="text/javascript" src="../../src/framework/renderer/js/fluidRenderer.js"></script>
+    <script type="text/javascript" src="../../src/framework/renderer/js/RendererUtilities.js"></script>
+    <script type="text/javascript" src="../../src/components/overviewPanel/js/OverviewPanel.js"></script>
+    <script type="text/javascript" src="../shared/js/overviewWrapper.js"></script>
+
+    <title>Orator Demo</title>
+</head>
+
+<body class="fl-focus">
+    <div class="flc-overviewPanel fl-overviewPanel-container"></div>
+    <div class="row">
+        <div class="flc-orator large-centered">
+            <article class="flc-orator-content">
+                <h1>Diverse Participation and Perspectives</h1>
+
+                <p>
+                    In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills into the design process, and in so doing, weakening the distinction between user and designer. Considering inclusion in all aspects and at all stages of the design process requires that our communication methods, group processes and daily interactions are inclusive. This helps to ensure that the products and services that are created will be more inclusive.
+                </p>
+
+                <p>
+                    To support diverse participation and enable the design to be as closely linked as possible to the application, the design and development tools should be as accessible and usable as possible. Those new to the process must be provided with the information and resources to fully participate (e.g. by being given time to observe and become familiar with the community, culture, collective knowledge and processes). Communication methods should be transparent and multimodal, and design considerations for “alternative” modes of interaction should be given equal weight.
+                </p>
+
+                <p>
+                    <em><strong>Note:</strong> This does not denigrate the skills of professional designers but calls for those skills to become more accessible and for the design process to become more inclusive of diverse designers and consumers. The role of the professional designer expands to include the responsibility for ensuring diverse participation and for ensuring that diverse voices are heard.</em>
+                </p>
+
+                <h2>Try</h2>
+
+                <p>
+                    Make a list of the methods of communication used in your everyday life (meetings, informal discussions, video conferences, phone calls, social media, emails, etc.). Identify some possible barriers that might prevent some from participating in that communication. Consider your own challenges with these processes or those of someone you know.
+                </p>
+
+                <span>Content from <a href="https://guide.inclusivedesign.ca/insights/DiverseParticipationAndPerspectives.html">The Inclusive Design Guide</a>.</span>
+            </article>
+        </div>
+        <script>
+            demo.orator(".flc-orator");
+        </script>
+    </div>
+</body>
+</html>
diff --git a/demos/orator/js/oratorDemo.js b/demos/orator/js/oratorDemo.js
@@ -0,0 +1,55 @@
+/*
+Copyright 2018 OCAD University
+
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+
+/*global demo:true, fluid, jQuery*/
+
+var demo = demo || {};
+
+(function ($, fluid) {
+    "use strict";
+
+    fluid.contextAware.makeChecks({
+        "fluid.supportsTTS": "fluid.textToSpeech.isSupported"
+    });
+
+    fluid.defaults("demo.orator", {
+        gradeNames: ["fluid.viewComponent", "fluid.contextAware"],
+        contextAwareness: {
+            textToSpeech: {
+                checks: {
+                    supported: {
+                        contextValue: "{fluid.supportsTTS}",
+                        equals: true,
+                        gradeNames: "fluid.orator"
+                    }
+                },
+                defaultGradeNames: "demo.orator.unsupported"
+            }
+        }
+    });
+
+    fluid.defaults("demo.orator.unsupported", {
+        strings: {
+            unsupported: "Text-to-Speech is not supported in this browser"
+        },
+        selectors: {
+            content: ".flc-orator-content"
+        },
+        listeners: {
+            "onCreate.unsupported": {
+                "this": "{that}.dom.content",
+                method: "text",
+                args: ["{that}.options.strings.unsupported"]
+            }
+        }
+    });
+
+})(jQuery, fluid);
diff --git a/demos/orator/json/config.json b/demos/orator/json/config.json
@@ -0,0 +1,15 @@
+{
+    "strings": {
+        "componentName": "Orator"
+    },
+    "markup": {
+        "description": "<p>Orator is a component that can be used to vocalize text from a web page.</p><p><em><strong>NOTE:</strong> The Web Speech API may not be supported in older browsers.</em></p>",
+        "instructions": "<ul><li>Click on the play button to start the self voicing.</li><li>Click the pause button to temporarily stop the self voicing.</li><li>Selecting text will display a play button to read back only the selection.</li></ul>"
+    },
+    "links": {
+        "demoCodeLink": "https://github.com/fluid-project/infusion/tree/master/demos/orator",
+        "apiLink": "https://docs.fluidproject.org/infusion/development/to-do/OratorAPI.html",
+        "designLink": "https://wiki.fluidproject.org/display/fluid/%28Floe%29+UI+Options+Design+Walkthrough%2C+C.1",
+        "feedbackLink": "mailto:infusion-users@fluidproject.org?subject=Orator%20feedback"
+    }
+}
diff --git a/demos/prefsFramework/css/main.css b/demos/prefsFramework/css/main.css
@@ -525,12 +525,6 @@ h5 {
     padding: 0;
 }
 
-.demo-content ul {
-    padding: 0;
-    margin: 0;
-}
-
-li { list-style-type:none; }
 div.dropdown {
     z-index:10000000;
     margin-top:2px;

diff --git a/demos/prefsFramework/css/simplify.css b/demos/prefsFramework/css/simplify.css
@@ -0,0 +1,15 @@
+.demo-content-simplified {
+    background-image: none;
+}
+
+.demo-content-simplified aside,
+.demo-content-simplified nav,
+.demo-content-simplified header,
+.demo-content-simplified footer,
+.demo-content-simplified article .icon {
+    display: none;
+}
+
+.demo-content-simplified article #article_image {
+    float: none;
+}
diff --git a/demos/prefsFramework/index.html b/demos/prefsFramework/index.html
@@ -14,9 +14,11 @@
         <link rel="stylesheet" type="text/css" href="../../src/framework/preferences/css/Enactors.css" />
         <link rel="stylesheet" type="text/css" href="../../src/framework/preferences/css/PrefsEditor.css" />
         <link rel="stylesheet" type="text/css" href="../../src/framework/preferences/css/SeparatedPanelPrefsEditor.css" />
+        <link rel="stylesheet" type="text/css" href="../../src/components/orator/css/Orator.css" />
         <link rel="stylesheet" type="text/css" href="../../src/components/overviewPanel/css/OverviewPanel.css" />
 
         <link href="css/main.css" rel="stylesheet" type="text/css" media="screen">
+        <link href="css/simplify.css" rel="stylesheet" type="text/css" media="screen">
 
         <script type="text/javascript" src="../../src/lib/jquery/core/js/jquery.js"></script>
         <script type="text/javascript" src="../../src/lib/jquery/ui/js/jquery-ui.js"></script>
@@ -38,6 +40,7 @@
         <script type="text/javascript" src="../../src/framework/core/js/ModelTransformation.js"></script>
         <script type="text/javascript" src="../../src/framework/core/js/ModelTransformationTransforms.js"></script>
         <script type="text/javascript" src="../../src/framework/core/js/FluidView.js"></script>
+        <script type="text/javascript" src="../../src/framework/core/js/NewViewSupport.js"></script>
         <script type="text/javascript" src="../../src/framework/core/js/ResourceLoader.js"></script>
         <script type="text/javascript" src="../../src/lib/fastXmlPull/js/fastXmlPull.js"></script>
         <script type="text/javascript" src="../../src/framework/renderer/js/fluidParser.js"></script>
@@ -72,6 +75,7 @@
         <script type="text/javascript" src="../../src/framework/preferences/js/Builder.js"></script>
         <script type="text/javascript" src="../../src/components/uiOptions/js/UIOptions.js"></script>
         <script type="text/javascript" src="../../src/components/textToSpeech/js/TextToSpeech.js"></script>
+        <script type="text/javascript" src="../../src/components/orator/js/Orator.js"></script>
 
         <script type="text/javascript" src="js/prefsEditorDemo.js"></script>
 
@@ -130,9 +134,9 @@
         </div>
         <!-- END markup for Preference Editor -->
 
-        <div class="flc-toc-tocContainer toc"> </div>
         <div id="content" class="demo-content">
             <div id="container">
+                <div class="flc-toc-tocContainer toc"> </div>
 
                 <header id="header" class="dotGovSub">
                     <div id="headTitle">
@@ -398,17 +402,16 @@
                     <a href="#">Home</a> &gt;&gt; <a href="#">Climate</a> &gt;&gt; Climate Change Impacts
                 </nav>
 
-                <div id="contentArea" class="home">
-
-                    <article>
+                <div id="contentArea" class="flc-prefs-selfVoicingWidget home">
+                    <article class="flc-orator-content">
                         <h1 class="ocean">Climate Change Impacts</h1>
 
                         <img class="icon" style="padding-right: 5px; float: right;" src="images/theme_climate_90.gif" alt="Oceans and Coasts" height="90" width="90">
                         <aside id="left_box">
 
                             <div class="left_tab"></div>
                             <div class="middle_tab">
-                                <h2 class="h1_middle_text">Resources</h2>
+                                <h2 class="h1_middle_text fl-inverted-color">Resources</h2>
                             </div>
                             <div class="right_tab"></div><div style="clear:both;"></div>
                             <div id="newsReleasesList" style="overflow: hidden;border: 1px #CCC solid ;margin-bottom: 11px; ">

diff --git a/demos/prefsFramework/js/prefsEditorDemo.js b/demos/prefsFramework/js/prefsEditorDemo.js
@@ -120,6 +120,10 @@ var demo = demo || {};
      * simplifyEnactor
      *
      * Simplify content based upon the model value.
+     *
+     * This component is added as an example of how simplification may appear.
+     * However, the following code does not provide a generalized solution that
+     * can be easily used across sites.
      **********************************************************************************/
     fluid.defaults("demo.prefsEditor.simplifyEnactor", {
         gradeNames: ["fluid.prefs.enactor", "fluid.viewComponent"],
@@ -128,63 +132,19 @@ var demo = demo || {};
                 "model.simplify": "default"
             }
         },
-        selectors: {
-            content: ".demo-content"
-        },
         styles: {
-            simplified: "demo-content-simplified" // TODO: This class is not defined anywhere; do we need it?
+            simplified: "demo-content-simplified"
         },
         model: {
             simplify: false
         },
         modelListeners: {
             simplify: {
-                listener: "{that}.set",
-                args: ["{change}.value"],
-                namespace: "setAdaptation"
-            }
-        },
-        events: {
-            settingChanged: null
-        },
-        invokers: {
-            set: {
-                funcName: "demo.prefsEditor.simplifyEnactor.set",
-                args: ["{arguments}.0", "{that}"]
+                "this": "{that}.container",
+                method: "toggleClass",
+                args: ["{that}.options.styles.simplified", "{change}.value"]
             }
         }
     });
 
-    demo.prefsEditor.simplifyEnactor.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();
-            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 (!simplified) {
-                $("body").css("background-image", "none");
-                contentContainer.html(that.article);
-                contentContainer.addClass(that.options.styles.simplified);
-                that.events.settingChanged.fire();
-            }
-        } else {
-            if (simplified) {
-                $("body").css("background-image", that.origBg);
-                contentContainer.html(that.initialContent);
-                contentContainer.removeClass(that.options.styles.simplified);
-                that.events.settingChanged.fire();
-            }
-        }
-    };
-
 })(jQuery, fluid);
diff --git a/demos/prefsFramework/json/config.json b/demos/prefsFramework/json/config.json
@@ -5,7 +5,7 @@
         "titleEnd": "framework demo"
     },
     "markup": {
-        "description": "<p>The Preferences Framework offers a reusable set of schemas, programming APIs, and UI building blocks specific to the creation, persistence, and integration of preference editors into a variety of web-based applications, content management systems, and delivery environments.</p><p><em>NOTE: The 'text-to-speech' and 'simplify' adjusters are not part of the Preferences Framework, but are provided as illustrations for adding additional panels/enactors, as well as a preview of how advanced preferences could be set.</em></p>",
+        "description": "<p>The Preferences Framework offers a reusable set of schemas, programming APIs, and UI building blocks specific to the creation, persistence, and integration of preference editors into a variety of web-based applications, content management systems, and delivery environments.</p><p><em><strong>NOTE:</strong> The 'simplify' adjuster is not part of the Preferences Framework, but is provided as an illustration for adding additional panels/enactors, as well as a preview of how advanced preferences could be set.</em></p>",
         "instructions": "<ul><li>To access the preference editor on this page, click the 'Show Display Preferences' tab in the upper right corner of the window.</li><li>Try adjusting the controls in the panel that opens. You will see the changes applied to the page immediately.</li></ul>"
     },
     "links": {