Code refactoring

* removed the onReady event which was in sisiliano.component * moved the ariaDescription function to the sisiliano.component onCreate * deleted the ariaDescription component
fluid-lab · Aug 19, 2016 · 6de96ee · 6de96ee
1 parent 757ca5a
commit 6de96ee
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 69 deletions.
diff --git a/src/controllers/knob/knob.js b/src/controllers/knob/knob.js
@@ -3,7 +3,7 @@
 
     fluid.defaults("sisiliano.knob", {
         gradeNames: ["sisiliano.slider"],
-        template: "src/controllers/knob/knob.html",
+        templateUrl: "src/controllers/knob/knob.html",
         model: {
             styles: {
                 valueText: {
@@ -50,7 +50,7 @@
             circles: ".sisiliano-knob-circle"
         },
         listeners: {
-            onReady: [
+            onCreate: [
                 {
                     func: "sisiliano.knob.onRadiusChange",
                     args: ["{that}", "{that}.model.styles.valueKnob.r"]

diff --git a/src/controllers/linear-slider/linear-slider.js b/src/controllers/linear-slider/linear-slider.js
@@ -5,7 +5,7 @@
         gradeNames: ["sisiliano.border", "sisiliano.slider"],
         defaultViewBox: [0 ,0, 500, 50],
         ariaDescription: "Linear slider, the value can be adjusted by arrow keys. If you are using the mouse, drag along the slider",
-        template: "src/controllers/linear-slider/linear-slider.html",
+        templateUrl: "src/controllers/linear-slider/linear-slider.html",
         model: {
             styles: {
                 pointer: {
@@ -98,7 +98,7 @@
                 func: "sisiliano.linearSlider.onStatusChange",
                 args: ["{that}", "{that}.model.status.isActive"]
             },
-            onReady: [
+            onCreate: [
                 {
                     func: "sisiliano.linearSlider.onResize",
                     args: ["{that}"]

diff --git a/src/controllers/piano/piano.js b/src/controllers/piano/piano.js
@@ -3,7 +3,7 @@
 
     fluid.defaults("sisiliano.piano", {
         gradeNames: ["sisiliano.border", "sisiliano.component"],
-        template: "src/controllers/piano/piano.html",
+        templateUrl: "src/controllers/piano/piano.html",
         ariaDescription: "Piano keys are accessible by mouse and the keyboad as well. Only the active area of the piano is accessible by the keyboard. If you want to move the active area, use left and right keys.",
         model: {
             color: "#4CAF50",
@@ -50,7 +50,7 @@
             pressedKeys: ".sisiliano-piano-key-pressed"
         },
         listeners: {
-            onReady: [
+            onCreate: [
                 {
                     func: "sisiliano.piano.generateKeyboard",
                     args: ["{that}"]
@@ -142,9 +142,9 @@
     };
 
     sisiliano.piano.onCreate = function (that) {
-        var keyBoardElm = d3.select(that.locate("keyBoard").get(0));
+        that.locate("keyBoard").empty();
 
-        keyBoardElm.empty();
+        var keyBoardElm = d3.select(that.locate("keyBoard").get(0));
         keyBoardElm.append("text")
             .attr("x", 0)
             .attr("y", 0)

diff --git a/src/controllers/slider/slider.js b/src/controllers/slider/slider.js
@@ -35,9 +35,7 @@
                 {
                     func: "sisiliano.slider.onInit",
                     args: ["{that}"]
-                }
-            ],
-            onReady: [
+                },
                 {
                     func: "sisiliano.slider.onMinValueChange",
                     args: ["{that}", "{that}.model.min"]

diff --git a/src/core/ariaDescription.js b/src/core/ariaDescription.js
diff --git a/src/core/component.js b/src/core/component.js
@@ -5,12 +5,10 @@
     "use strict";
 
     fluid.defaults("sisiliano.component", {
-        gradeNames: ["sisiliano.util.colorable", "sisiliano.util.ariaDescription", "fluid.viewComponent"],
+        gradeNames: ["sisiliano.util.colorable", "fluid.viewComponent"],
         model: {
-            template: ""
-        },
-        events: {
-            onReady: null
+            templateUrl: "",
+            template: null
         },
         selectors: {
             svg: "svg",
@@ -20,17 +18,15 @@
             onCreate: [
                 {
                     func: "sisiliano.component.onTemplateChange",
-                    args: ["{that}", "{that}.options.template"]
+                    args: ["{that}", "{that}.options.template", "{that}.options.templateUrl"]
                 },
                 {
                     func: "sisiliano.component.onInit",
                     args: ["{that}"]
-                }
-            ],
-            onReady: [
+                },
                 {
-                    func: "{that}.events.onColorChange.fire",
-                    args: ["{that}", "{that}.model.color"]
+                    func: "sisiliano.component.addAriaDescription",
+                    args: ["{that}"]
                 }
             ]
         },
@@ -55,20 +51,39 @@
             });
     };
 
-    sisiliano.component.onTemplateChange = function (that, template) {
+    sisiliano.component.addAriaDescription = function (that) {
+        var descriptionsPane = $("#sisiliano-component-guide-descriptions");
+        if (descriptionsPane.length === 0) {
+            descriptionsPane = $("<div id='sisiliano-component-guide-descriptions' style='visibility: hidden'></div>");
+            $("body").append(descriptionsPane);
+        }
+
+        var descriptionElementIdOfTheComponent = (that.typeName.replace(/\./g, "-") + "-guide-description").toLowerCase();
+        var descriptionElementOfTheComponent = $("#" + descriptionElementIdOfTheComponent);
+        if (descriptionElementOfTheComponent.length === 0) {
+            descriptionElementOfTheComponent = $("<div id='" + descriptionElementIdOfTheComponent + "'>" + that.options.ariaDescription + "</div>");
+            descriptionsPane.append(descriptionElementOfTheComponent);
+        }
+
+        that.locate("componentDiv").attr("aria-describedby", descriptionElementIdOfTheComponent);
+    };
+
+    sisiliano.component.onTemplateChange = function (that, template, templateUrl) {
         //Initializing the sisiliano ID
         var sisilianoId = "fluid-sisiliano-id-" + that.id;
         that.applier.change("id", sisilianoId);
+        that.container.html("<div class='sisiliano' id='" + sisilianoId + "'></div>");
 
-        if (!template) {
-            that.container.html("<div class='sisiliano' id='" + sisilianoId + "'></div>");
-            that.events.onReady.fire();
-        } else {
+        if (!template && templateUrl) {
             sisiliano.util.getTemplate(function (template) {
-                var html = template(that.model);
-                that.container.html("<div class='sisiliano' id='" + sisilianoId + "'>" + html + "</div>");
-                that.events.onReady.fire();
-            }, template);
+                that.options.template = template;
+                that.events.onCreate.fire();
+            }, templateUrl);
+
+            return false;
+        } else if (template) {
+            var html = template(that.model);
+            that.locate("componentDiv").html(html);
         }
     };
 
@@ -105,7 +120,7 @@
             border: ".sisiliano-border-div"
         },
         listeners: {
-            onReady: [
+            onCreate: [
                 {
                     func: "sisiliano.border.onControllerStyleChange",
                     args: ["{that}", "{that}.model.styles"]

diff --git a/test/html/index.html b/test/html/index.html
@@ -21,7 +21,6 @@
 
     <script src="../../dist/templates.js"></script>
     <script src="../../src/index.js"></script>
-    <script src="../../src/core/ariaDescription.js"></script>
     <script src="../../src/core/colorable.js"></script>
     <script src="../../src/core/component.js"></script>
     <script src="../../src/controllers/slider/slider.js"></script>

diff --git a/test/spec/linear-slider.spec.js b/test/spec/linear-slider.spec.js
@@ -25,8 +25,6 @@
     jqUnit.test("linearSlider: mouse events", function () {
         $(".test").empty();
         var linearSlider = sisiliano.linearSlider(".test");
-
-        linearSlider.events.onReady.fire();
         sisiliano.tests.linearSlider.verifyMouseEvents("linearSlider: mouse events", linearSlider);
     });
 

diff --git a/test/spec/slider.spec.js b/test/spec/slider.spec.js
@@ -12,8 +12,15 @@
     };
 
     sisiliano.tests.slider.createNewSlider = function (options) {
+        if (!options) {
+            options = {};
+        }
+
+        options.template = function () {
+            return "<div class='sisiliano-slider-value-text'></div>";
+        };
+
         var slider = sisiliano.slider(".test", options);
-        slider.locate("componentDiv").append("<div class='sisiliano-slider-value-text'></div>");
 
         return slider;
     };