From 6de96ee3d854ca69329da15cf6d03e0e50536c19 Mon Sep 17 00:00:00 2001 From: Dinuka De Silva Date: Fri, 19 Aug 2016 15:16:58 +0530 Subject: [PATCH] Code refactoring * removed the onReady event which was in sisiliano.component * moved the ariaDescription function to the sisiliano.component onCreate * deleted the ariaDescription component --- src/controllers/knob/knob.js | 4 +- .../linear-slider/linear-slider.js | 4 +- src/controllers/piano/piano.js | 8 +-- src/controllers/slider/slider.js | 4 +- src/core/ariaDescription.js | 33 ----------- src/core/component.js | 57 ++++++++++++------- test/html/index.html | 1 - test/spec/linear-slider.spec.js | 2 - test/spec/slider.spec.js | 9 ++- 9 files changed, 53 insertions(+), 69 deletions(-) delete mode 100644 src/core/ariaDescription.js diff --git a/src/controllers/knob/knob.js b/src/controllers/knob/knob.js index 53ee6cf..68d4bd1 100644 --- 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 index 1a07881..789f10d 100644 --- 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 index e510ae2..1e4725f 100644 --- 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 index 4c30a43..ede7cca 100644 --- 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 deleted file mode 100644 index 7b9d03c..0000000 --- a/src/core/ariaDescription.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Created by VDESIDI on 7/23/2016. - */ -(function (fluid) { - "use strict"; - fluid.defaults("sisiliano.util.ariaDescription", { - gradeNames: "fluid.component", - ariaDescription: "", - listeners: { - onReady: { - func: "sisiliano.util.ariaDescription.onCreate", - args: ["{that}"] - } - } - }); - - sisiliano.util.ariaDescription.onCreate = function (that) { - var descriptionsPane = $("#sisiliano-component-guide-descriptions"); - if (descriptionsPane.length === 0) { - descriptionsPane = $(""); - $("body").append(descriptionsPane); - } - - var descriptionElementIdOfTheComponent = (that.typeName.replace(/\./g, "-") + "-guide-description").toLowerCase(); - var descriptionElementOfTheComponent = $("#" + descriptionElementIdOfTheComponent); - if (descriptionElementOfTheComponent.length === 0) { - descriptionElementOfTheComponent = $("
" + that.options.ariaDescription + "
"); - descriptionsPane.append(descriptionElementOfTheComponent); - } - - that.locate("componentDiv").attr("aria-describedby", descriptionElementIdOfTheComponent); - }; -})(fluid); diff --git a/src/core/component.js b/src/core/component.js index 6723f55..3624a05 100644 --- 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 = $(""); + $("body").append(descriptionsPane); + } + + var descriptionElementIdOfTheComponent = (that.typeName.replace(/\./g, "-") + "-guide-description").toLowerCase(); + var descriptionElementOfTheComponent = $("#" + descriptionElementIdOfTheComponent); + if (descriptionElementOfTheComponent.length === 0) { + descriptionElementOfTheComponent = $("
" + that.options.ariaDescription + "
"); + 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("
"); - if (!template) { - that.container.html("
"); - that.events.onReady.fire(); - } else { + if (!template && templateUrl) { sisiliano.util.getTemplate(function (template) { - var html = template(that.model); - that.container.html("
" + html + "
"); - 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 index 1d17557..47245e1 100644 --- a/test/html/index.html +++ b/test/html/index.html @@ -21,7 +21,6 @@ - diff --git a/test/spec/linear-slider.spec.js b/test/spec/linear-slider.spec.js index 52c7f10..9bb6db7 100644 --- 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 index 005ee46..126b8d3 100644 --- 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 "
"; + }; + var slider = sisiliano.slider(".test", options); - slider.locate("componentDiv").append("
"); return slider; };