diff --git a/demos/prefsFramework/html/SeparatedPanelPrefsEditor.html b/demos/prefsFramework/html/SeparatedPanelPrefsEditor.html
index cb62ff2492..cedec736ee 100644
--- a/demos/prefsFramework/html/SeparatedPanelPrefsEditor.html
+++ b/demos/prefsFramework/html/SeparatedPanelPrefsEditor.html
@@ -3,6 +3,7 @@
+
diff --git a/demos/prefsFramework/html/SeparatedPanelPrefsEditorWithTTS.html b/demos/prefsFramework/html/SeparatedPanelPrefsEditorWithTTS.html
index 1e36d4bfd1..0bc09fbe93 100644
--- a/demos/prefsFramework/html/SeparatedPanelPrefsEditorWithTTS.html
+++ b/demos/prefsFramework/html/SeparatedPanelPrefsEditorWithTTS.html
@@ -3,6 +3,7 @@
+
diff --git a/demos/prefsFramework/index.html b/demos/prefsFramework/index.html
index 03b42996b0..62b09c5399 100644
--- a/demos/prefsFramework/index.html
+++ b/demos/prefsFramework/index.html
@@ -56,8 +56,10 @@
+
+
@@ -66,7 +68,7 @@
-
+
@@ -88,8 +90,9 @@
build: {
gradeNames: [
"fluid.prefs.auxSchema.starter", // this will add the starter set
+ "fluid.prefs.auxSchema.letterSpace", // this will add the letter space adjuster and enactor
"demo.prefsEditor.auxSchema.simplify", // this will add the simplify adjuster and enactor
- "demo.prefsEditor.progressiveEnhancement" // progressive enhancment
+ "demo.prefsEditor.progressiveEnhancement" // progressive enhancement - may add selfVoicing
],
primarySchema: demo.prefsEditor.primarySchema
}
diff --git a/src/components/overviewPanel/css/OverviewPanel.css b/src/components/overviewPanel/css/OverviewPanel.css
index 984939fdc7..ffd6a97764 100644
--- a/src/components/overviewPanel/css/OverviewPanel.css
+++ b/src/components/overviewPanel/css/OverviewPanel.css
@@ -98,6 +98,7 @@
left: 0;
width: 100%;
line-height: 1em;
+ overflow: auto;
}
diff --git a/src/framework/preferences/css/stylus/FullPrefsEditor.styl b/src/framework/preferences/css/stylus/FullPrefsEditor.styl
index 3bfbc92023..393da1978f 100644
--- a/src/framework/preferences/css/stylus/FullPrefsEditor.styl
+++ b/src/framework/preferences/css/stylus/FullPrefsEditor.styl
@@ -30,9 +30,16 @@
}
// Section header icons
- h2 img {
- margin-bottom: -3px;
- padding-right: 5px;
+ h2 {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ justify-content: flex-start;
+ white-space: normal;
+
+ [class*='fl-icon-'] {
+ margin: 0 0.3em 0 0;
+ }
}
// Text controls
diff --git a/src/framework/preferences/css/stylus/PrefsEditor.styl b/src/framework/preferences/css/stylus/PrefsEditor.styl
index f7465e0de3..9d002ddb8a 100644
--- a/src/framework/preferences/css/stylus/PrefsEditor.styl
+++ b/src/framework/preferences/css/stylus/PrefsEditor.styl
@@ -5,9 +5,9 @@
@import "utils/Themes"
@font-face {
- font-family: 'InfusionIcons';
- src: url('../fonts/InfusionIcons-PrefsEditor.ttf'),
- url('../fonts/InfusionIcons-PrefsEditor.eot');
+ font-family: 'PrefsFramework-Icons';
+ src: url('../fonts/PrefsFramework-Icons.ttf'),
+ url('../fonts/PrefsFramework-Icons.eot');
}
.fl-prefsEditor {
@@ -146,6 +146,7 @@
}
.fl-preview-A {
font-size: 1.7em;
+ letter-spacing: normal // prevents the preview content from shifting when letter-spacing is set
}
// Pseudo content to prevent AT from reading display 'a'
@@ -207,16 +208,17 @@
}
// Font Icons
- .fl-icon-right, .fl-icon-left, .fl-icon-indicator, .fl-icon-crossout, .fl-icon-big-a, .fl-icon-small-a, .fl-icon-line-space-expanded, .fl-icon-line-space-condensed,
- .fl-icon-contrast, .fl-icon-undo, .fl-icon-line-space, .fl-icon-inputs, .fl-icon-simplify, .fl-icon-font, .fl-icon-size, .fl-icon-text-to-speech, .fl-icon-toc {
- font-family: 'InfusionIcons';
+ .fl-icon-indicator, .fl-icon-crossout, .fl-icon-big-a, .fl-icon-small-a, .fl-icon-line-space-expanded, .fl-icon-line-space-condensed,
+ .fl-icon-contrast, .fl-icon-undo, .fl-icon-line-space, .fl-icon-inputs, .fl-icon-simplify, .fl-icon-font, .fl-icon-size, .fl-icon-text-to-speech, .fl-icon-toc,
+ .fl-icon-letter-space, .fl-icon-letter-space-expanded, .fl-icon-letter-space-condensed {
+ font-family: 'PrefsFramework-Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
- margin: 0.2em 0.3em 0 0;
+ margin-right: 0.3em;
font-size: 1.5em;
}
@@ -231,6 +233,12 @@
.fl-icon-small-a:before {
content: "\e007";
}
+ .fl-icon-letter-space-expanded:before {
+ content: "\e000";
+ }
+ .fl-icon-letter-space-condensed:before {
+ content: "\e001";
+ }
.fl-icon-line-space-expanded:before {
content: "\e009";
}
@@ -243,16 +251,22 @@
.fl-choice {
.fl-indicator {
- font-family: 'InfusionIcons' !important;
- font-size: 1.3em;
- margin: -0.75em 0 0 0.75em;
+ font-family: 'PrefsFramework-Icons' !important;
+ margin-top: -1.5em;
height: 1em;
+ width: calc(100% - 5px); // deduct the right margin from the calculation
+ text-align: center;
+ font-size: 1.25em;
+ }
+ &:last-child .fl-indicator {
+ width: 100%;
}
.fl-prefsEditor-themePicker-defaultThemeLabel .fl-crossout {
- font-family: 'InfusionIcons' !important;
- margin-top: -1.25em;
- font-size: 1.85em;
+ font-family: 'PrefsFramework-Icons' !important;
+ background-color: transparent !important;
+ margin-top: -1.05em;
+ font-size: 2.2em;
}
label.fl-theme-prefsEditor-default,
@@ -265,10 +279,7 @@
}
// header icons
- .fl-icon-right:before {
- content: "\e001";
- }
- .fl-icon-left:before {
+ .fl-icon-letter-space:before {
content: "\e002";
}
.fl-icon-contrast:before {
diff --git a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditor.styl b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditor.styl
index 3d243dba51..25d8fc9616 100644
--- a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditor.styl
+++ b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditor.styl
@@ -77,7 +77,7 @@
// Font icon for reset tab
.fl-icon-undo {
- font-family: 'InfusionIcons';
+ font-family: 'PrefsFramework-Icons';
speak: none;
font-style: normal;
font-weight: normal;
diff --git a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl
index 995bfd012f..d518fe7adb 100644
--- a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl
+++ b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl
@@ -82,7 +82,6 @@ html {
}
.fl-heading-text {
- padding-top: 0.2rem;
font-size: 1.3em;
font-weight: 600;
text-align: center;
@@ -217,6 +216,8 @@ html {
[class*='fl-icon-'] {
display: inline;
margin: 0 0.3em;
+ font-size: 1.4em;
+ padding-top: 0.3em;
}
}
}
diff --git a/src/framework/preferences/fonts/InfusionIcons-PrefsEditor.eot b/src/framework/preferences/fonts/InfusionIcons-PrefsEditor.eot
deleted file mode 100644
index 012fa79cbd..0000000000
Binary files a/src/framework/preferences/fonts/InfusionIcons-PrefsEditor.eot and /dev/null differ
diff --git a/src/framework/preferences/fonts/InfusionIcons-PrefsEditor.ttf b/src/framework/preferences/fonts/InfusionIcons-PrefsEditor.ttf
deleted file mode 100644
index 6c03baafbb..0000000000
Binary files a/src/framework/preferences/fonts/InfusionIcons-PrefsEditor.ttf and /dev/null differ
diff --git a/src/framework/preferences/fonts/PrefsFramework-Icons.eot b/src/framework/preferences/fonts/PrefsFramework-Icons.eot
new file mode 100644
index 0000000000..532176be04
Binary files /dev/null and b/src/framework/preferences/fonts/PrefsFramework-Icons.eot differ
diff --git a/src/framework/preferences/fonts/PrefsFramework-Icons.ttf b/src/framework/preferences/fonts/PrefsFramework-Icons.ttf
new file mode 100644
index 0000000000..a1ac5514e6
Binary files /dev/null and b/src/framework/preferences/fonts/PrefsFramework-Icons.ttf differ
diff --git a/src/framework/preferences/fonts/PrefsFramwork-Icons-config.json b/src/framework/preferences/fonts/PrefsFramwork-Icons-config.json
new file mode 100644
index 0000000000..68bdf15492
--- /dev/null
+++ b/src/framework/preferences/fonts/PrefsFramwork-Icons-config.json
@@ -0,0 +1,50 @@
+{
+ "src": [
+ "svg/indicator-arrow-triangle.svg",
+ "svg/crossout-diag-dotted-line.svg",
+ "svg/contrast.svg",
+ "svg/bigA.svg",
+ "svg/smallA.svg",
+ "svg/reset-undo-arrow.svg",
+ "svg/line-space-expanded.svg",
+ "svg/line-space-condensed.svg",
+ "svg/line-space.svg",
+ "svg/links.svg",
+ "svg/simplify.svg",
+ "svg/preferences.svg",
+ "svg/font-style.svg",
+ "svg/size.svg",
+ "svg/text-to-speech-no-article.svg",
+ "svg/table-of-contents.svg",
+ "svg/character-spacing-expanded.svg",
+ "svg/character-spacing-condensed.svg",
+ "svg/character-spacing.svg"
+ ],
+ "options": {
+ "font": "PrefsFramework-Icons",
+ "codepoints": {
+ "character-spacing-expanded": "0xE000",
+ "character-spacing-condensed": "0xE001",
+ "character-spacing": "0xE002",
+ "indicator-arrow-triangle": "0xE003",
+ "crossout-diag-dotted-line": "0xE004",
+ "contrast": "0xE005",
+ "bigA": "0xE006",
+ "smallA": "0xE007",
+ "reset-undo-arrow": "0xE008",
+ "line-space-expanded": "0xE009",
+ "line-space-condensed": "0xE00a",
+ "line-space": "0xE00b",
+ "links": "0xE00c",
+ "simplify": "0xE00d",
+ "preferences": "0xE00e",
+ "font-style": "0xE00f",
+ "size": "0xE010",
+ "text-to-speech-no-article": "0xE011",
+ "table-of-contents": "0xE012"
+ },
+ "templateOptions": {
+ "classPrefix": "fl-icon-"
+ }
+ }
+}
diff --git a/src/framework/preferences/html/PrefsEditorTemplate-letterSpace.html b/src/framework/preferences/html/PrefsEditorTemplate-letterSpace.html
new file mode 100644
index 0000000000..7f685217c9
--- /dev/null
+++ b/src/framework/preferences/html/PrefsEditorTemplate-letterSpace.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/framework/preferences/html/PrefsEditorTemplate-lineSpace.html b/src/framework/preferences/html/PrefsEditorTemplate-lineSpace.html
index 005cb84b1d..d4e07dbbe5 100644
--- a/src/framework/preferences/html/PrefsEditorTemplate-lineSpace.html
+++ b/src/framework/preferences/html/PrefsEditorTemplate-lineSpace.html
@@ -1,10 +1,10 @@
-
-
+
+
diff --git a/src/framework/preferences/html/PrefsEditorTemplate-textSize.html b/src/framework/preferences/html/PrefsEditorTemplate-textSize.html
index 50d259bc26..5ce07d67d3 100644
--- a/src/framework/preferences/html/PrefsEditorTemplate-textSize.html
+++ b/src/framework/preferences/html/PrefsEditorTemplate-textSize.html
@@ -1,10 +1,10 @@
-
-
+
+
diff --git a/src/framework/preferences/js/Enactors.js b/src/framework/preferences/js/Enactors.js
index 4ca572de48..2e0ff324f1 100644
--- a/src/framework/preferences/js/Enactors.js
+++ b/src/framework/preferences/js/Enactors.js
@@ -191,6 +191,33 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
return parseFloat(fontSize);
};
+ /*******************************************************************************
+ * textRelatedSizer
+ *
+ * Provides an abstraction for enactors that need to adjust sizes based on
+ * a text size value from the DOM. This could include things such as:
+ * font-size, line-height, letter-spacing, and etc.
+ *******************************************************************************/
+
+ fluid.defaults("fluid.prefs.enactor.textRelatedSizer", {
+ gradeNames: ["fluid.prefs.enactor", "fluid.viewComponent"],
+ fontSizeMap: {}, // must be supplied by implementors
+ invokers: {
+ set: "fluid.notImplemented", // must be supplied by a concrete implementation
+ getTextSizeInPx: {
+ funcName: "fluid.prefs.enactor.getTextSizeInPx",
+ args: ["{that}.container", "{that}.options.fontSizeMap"]
+ }
+ },
+ modelListeners: {
+ value: {
+ listener: "{that}.set",
+ args: ["{change}.value"],
+ namespace: "setAdaptation"
+ }
+ }
+ });
+
/*******************************************************************************
* textSize
*
@@ -199,7 +226,7 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
// Note that the implementors need to provide the container for this view component
fluid.defaults("fluid.prefs.enactor.textSize", {
- gradeNames: ["fluid.prefs.enactor", "fluid.viewComponent"],
+ gradeNames: ["fluid.prefs.enactor.textRelatedSizer"],
preferenceMap: {
"fluid.prefs.textSize": {
"model.value": "default"
@@ -214,22 +241,14 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
}
}
},
- fontSizeMap: {}, // must be supplied by implementors
invokers: {
set: {
funcName: "fluid.prefs.enactor.textSize.set",
args: ["{arguments}.0", "{that}", "{that}.getTextSizeInPx"]
},
getTextSizeInPx: {
- funcName: "fluid.prefs.enactor.getTextSizeInPx",
args: ["{that}.root", "{that}.options.fontSizeMap"]
}
- },
- modelListeners: {
- value: {
- listener: "{that}.set",
- args: ["{change}.value"]
- }
}
});
@@ -255,22 +274,17 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
// Note that the implementors need to provide the container for this view component
fluid.defaults("fluid.prefs.enactor.lineSpace", {
- gradeNames: ["fluid.prefs.enactor", "fluid.viewComponent"],
+ gradeNames: ["fluid.prefs.enactor.textRelatedSizer"],
preferenceMap: {
"fluid.prefs.lineSpace": {
"model.value": "default"
}
},
- fontSizeMap: {}, // must be supplied by implementors
invokers: {
set: {
funcName: "fluid.prefs.enactor.lineSpace.set",
args: ["{arguments}.0", "{that}", "{that}.getLineHeightMultiplier"]
},
- getTextSizeInPx: {
- funcName: "fluid.prefs.enactor.getTextSizeInPx",
- args: ["{that}.container", "{that}.options.fontSizeMap"]
- },
getLineHeight: {
funcName: "fluid.prefs.enactor.lineSpace.getLineHeight",
args: "{that}.container"
@@ -279,12 +293,6 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
funcName: "fluid.prefs.enactor.lineSpace.getLineHeightMultiplier",
args: [{expander: {func: "{that}.getLineHeight"}}, {expander: {func: "{that}.getTextSizeInPx"}}]
}
- },
- modelListeners: {
- value: {
- listener: "{that}.set",
- args: ["{change}.value"]
- }
}
});
diff --git a/src/framework/preferences/js/LetterSpaceEnactor.js b/src/framework/preferences/js/LetterSpaceEnactor.js
new file mode 100644
index 0000000000..f4a06ebd8c
--- /dev/null
+++ b/src/framework/preferences/js/LetterSpaceEnactor.js
@@ -0,0 +1,99 @@
+/*
+Copyright 2017-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
+*/
+
+var fluid_3_0_0 = fluid_3_0_0 || {};
+
+(function ($, fluid) {
+ "use strict";
+
+ /*******************************************************************************
+ * letterSpace
+ *
+ * Sets the letter space on the container to the number of units to increase
+ * the letter space by. If a negative number is provided, the space between
+ * characters will decrease. Setting the value to 1 or unit to 0 will use the
+ * default letter space.
+ *******************************************************************************/
+
+ // Note that the implementors need to provide the container for this view component
+ fluid.defaults("fluid.prefs.enactor.letterSpace", {
+ gradeNames: ["fluid.prefs.enactor.textRelatedSizer"],
+ preferenceMap: {
+ "fluid.prefs.letterSpace": {
+ "model.value": "default"
+ }
+ },
+ members: {
+ originalLetterSpace: {
+ expander: {
+ func: "{that}.getLetterSpace"
+ }
+ }
+ },
+ invokers: {
+ set: {
+ funcName: "fluid.prefs.enactor.letterSpace.set",
+ args: ["{that}", "{arguments}.0"]
+ },
+ getLetterSpace: {
+ funcName: "fluid.prefs.enactor.letterSpace.getLetterSpace",
+ args: ["{that}", "{that}.getTextSizeInPx"]
+ }
+ },
+ modelListeners: {
+ unit: {
+ listener: "{that}.set",
+ args: ["{change}.value"],
+ namespace: "setAdaptation"
+ },
+ // Replace default model listener, because `value` needs be transformed before being applied.
+ // The `unit` model value should be used for setting the adaptation.
+ value: {
+ listener: "fluid.identity",
+ namespace: "setAdaptation"
+ }
+ },
+ modelRelay: {
+ target: "unit",
+ singleTransform: {
+ type: "fluid.transforms.round",
+ scale: 1,
+ input: {
+ transform: {
+ "type": "fluid.transforms.linearScale",
+ "offset": -1,
+ "input": "{that}.model.value"
+ }
+ }
+ }
+
+ }
+ });
+
+ fluid.prefs.enactor.letterSpace.getLetterSpace = function (that, getTextSizeFn) {
+ var current = parseFloat(that.container.css("letter-spacing"));
+ var textSize = getTextSizeFn();
+ return fluid.roundToDecimal(current / textSize, 2);
+ };
+
+ fluid.prefs.enactor.letterSpace.set = function (that, units) {
+ var targetSize = that.originalLetterSpace;
+
+ if (units) {
+ targetSize = targetSize + units;
+ }
+
+ // setting the style value to "" will remove it.
+ var letterSpace = targetSize ? fluid.roundToDecimal(targetSize, 2) + "em" : "";
+ that.container.css("letter-spacing", letterSpace);
+ };
+
+})(jQuery, fluid_3_0_0);
diff --git a/src/framework/preferences/js/LetterSpacePanel.js b/src/framework/preferences/js/LetterSpacePanel.js
new file mode 100644
index 0000000000..eb564d686b
--- /dev/null
+++ b/src/framework/preferences/js/LetterSpacePanel.js
@@ -0,0 +1,39 @@
+/*
+Copyright 2017 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
+*/
+
+var fluid_3_0_0 = fluid_3_0_0 || {};
+
+(function ($, fluid) {
+ "use strict";
+
+ /*************************************
+ * Preferences Editor Letter Spacing *
+ *************************************/
+
+ /**
+ * A sub-component of fluid.prefs that renders the "letter spacing" panel of the user preferences interface.
+ */
+ fluid.defaults("fluid.prefs.panel.letterSpace", {
+ gradeNames: ["fluid.prefs.panel.stepperAjuster"],
+ preferenceMap: {
+ "fluid.prefs.letterSpace": {
+ "model.value": "default",
+ "range.min": "minimum",
+ "range.max": "maximum",
+ "step": "divisibleBy"
+ }
+ },
+ panelOptions: {
+ labelIdTemplate: "letterSpace-label-%guid"
+ }
+ });
+
+})(jQuery, fluid_3_0_0);
diff --git a/src/framework/preferences/js/LetterSpaceSchemas.js b/src/framework/preferences/js/LetterSpaceSchemas.js
new file mode 100644
index 0000000000..9acf1930ae
--- /dev/null
+++ b/src/framework/preferences/js/LetterSpaceSchemas.js
@@ -0,0 +1,79 @@
+/*
+Copyright 2017-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
+*/
+
+var fluid_3_0_0 = fluid_3_0_0 || {};
+
+(function (fluid) {
+ "use strict";
+
+ /*******************************************************************************
+ * Starter auxiliary schema grade
+ *
+ * Contains the settings for the letter space preference
+ *******************************************************************************/
+
+ // Fine-tune the starter aux schema and add letter space preference
+ fluid.defaults("fluid.prefs.auxSchema.letterSpace", {
+ gradeNames: ["fluid.prefs.auxSchema"],
+ auxiliarySchema: {
+ "namespace": "fluid.prefs.constructed",
+ "terms": {
+ "templatePrefix": "../../framework/preferences/html/",
+ "messagePrefix": "../../framework/preferences/messages/"
+ },
+ "template": "%templatePrefix/SeparatedPanelPrefsEditor.html",
+ "message": "%messagePrefix/prefsEditor.json",
+
+ letterSpace: {
+ type: "fluid.prefs.letterSpace",
+ enactor: {
+ type: "fluid.prefs.enactor.letterSpace",
+ fontSizeMap: {
+ "xx-small": "9px",
+ "x-small": "11px",
+ "small": "13px",
+ "medium": "15px",
+ "large": "18px",
+ "x-large": "23px",
+ "xx-large": "30px"
+ }
+ },
+ panel: {
+ type: "fluid.prefs.panel.letterSpace",
+ container: ".flc-prefsEditor-letter-space",
+ template: "%templatePrefix/PrefsEditorTemplate-letterSpace.html",
+ message: "%messagePrefix/letterSpace.json"
+ }
+ }
+ }
+ });
+
+
+ /*******************************************************************************
+ * Primary Schema
+ *******************************************************************************/
+
+ // add extra prefs to the starter primary schemas
+
+ fluid.defaults("fluid.prefs.schemas.letterSpace", {
+ gradeNames: ["fluid.prefs.schemas"],
+ schema: {
+ "fluid.prefs.letterSpace": {
+ "type": "number",
+ "default": 1,
+ "minimum": 1,
+ "maximum": 2,
+ "divisibleBy": 0.1
+ }
+ }
+ });
+
+})(fluid_3_0_0);
diff --git a/src/framework/preferences/js/Panels.js b/src/framework/preferences/js/Panels.js
index d58b96a8e4..cebafa4cb8 100644
--- a/src/framework/preferences/js/Panels.js
+++ b/src/framework/preferences/js/Panels.js
@@ -785,68 +785,95 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
});
};
- /********************************
- * Preferences Editor Text Size *
- ********************************/
+ /******************************************************
+ * A base grade for textfield stepper adjuster panels *
+ ******************************************************/
- /**
- * A sub-component of fluid.prefs that renders the "text size" panel of the user preferences interface.
- */
- fluid.defaults("fluid.prefs.panel.textSize", {
+ fluid.defaults("fluid.prefs.panel.stepperAjuster", {
gradeNames: ["fluid.prefs.panel"],
- preferenceMap: {
- "fluid.prefs.textSize": {
- "model.textSize": "default",
- "range.min": "minimum",
- "range.max": "maximum",
- "step": "divisibleBy"
- }
- },
+ // preferences maps should map model values to "model.value"
+ // model: {value: ""}
selectors: {
- header: ".flc-prefsEditor-text-size-header",
- textSize: ".flc-prefsEditor-min-text-size",
- label: ".flc-prefsEditor-min-text-size-label",
- multiplier: ".flc-prefsEditor-multiplier",
- textSizeDescr: ".flc-prefsEditor-text-size-descr"
+ header: ".flc-prefsEditor-header",
+ textfieldStepperContainer: ".flc-prefsEditor-textfieldStepper",
+ label: ".flc-prefsEditor-label",
+ descr: ".flc-prefsEditor-descr"
},
- selectorsToIgnore: ["header", "textSize"],
+ selectorsToIgnore: ["header", "textfieldStepperContainer"],
components: {
textfieldStepper: {
type: "fluid.textfieldStepper",
- container: "{that}.dom.textSize",
+ container: "{that}.dom.textfieldStepperContainer",
createOnEvent: "afterRender",
options: {
model: {
- value: "{fluid.prefs.panel.textSize}.model.textSize",
+ value: "{fluid.prefs.panel.stepperAjuster}.model.value",
range: {
- min: "{fluid.prefs.panel.textSize}.options.range.min",
- max: "{fluid.prefs.panel.textSize}.options.range.max"
+ min: "{fluid.prefs.panel.stepperAjuster}.options.range.min",
+ max: "{fluid.prefs.panel.stepperAjuster}.options.range.max"
},
- step: "{fluid.prefs.panel.textSize}.options.step"
+ step: "{fluid.prefs.panel.stepperAjuster}.options.step"
},
scale: 1,
strings: {
- increaseLabel: "{fluid.prefs.panel.textSize}.msgLookup.increaseLabel",
- decreaseLabel: "{fluid.prefs.panel.textSize}.msgLookup.decreaseLabel"
+ increaseLabel: "{fluid.prefs.panel.stepperAjuster}.msgLookup.increaseLabel",
+ decreaseLabel: "{fluid.prefs.panel.stepperAjuster}.msgLookup.decreaseLabel"
},
attrs: {
- "aria-labelledby": "{fluid.prefs.panel.textSize}.options.panelOptions.labelId"
+ "aria-labelledby": "{fluid.prefs.panel.stepperAjuster}.options.panelOptions.labelId"
}
}
}
},
protoTree: {
label: {
- messagekey: "textSizeLabel",
+ messagekey: "label",
decorators: {
attrs: {id: "{that}.options.panelOptions.labelId"}
}
},
- multiplier: {messagekey: "multiplier"},
- textSizeDescr: {messagekey: "textSizeDescr"}
+ descr: {messagekey: "description"}
+ },
+ panelOptions: {
+ labelIdTemplate: "%guid",
+ labelId: {
+ expander: {
+ funcName: "fluid.prefs.panel.stepperAjuster.setLabelID",
+ args: ["{that}.options.panelOptions.labelIdTemplate"]
+ }
+ }
+ }
+ });
+
+ /**
+ * @param {String} template - take string template with a token "%guid" to be replaced by the a unique ID.
+ * @returns {String} - the resolved templated with the injected unique ID.
+ */
+ fluid.prefs.panel.stepperAjuster.setLabelID = function (template) {
+ return fluid.stringTemplate(template, {
+ guid: fluid.allocateGuid()
+ });
+ };
+
+ /********************************
+ * Preferences Editor Text Size *
+ ********************************/
+
+ /**
+ * A sub-component of fluid.prefs that renders the "text size" panel of the user preferences interface.
+ */
+ fluid.defaults("fluid.prefs.panel.textSize", {
+ gradeNames: ["fluid.prefs.panel.stepperAjuster"],
+ preferenceMap: {
+ "fluid.prefs.textSize": {
+ "model.value": "default",
+ "range.min": "minimum",
+ "range.max": "maximum",
+ "step": "divisibleBy"
+ }
},
panelOptions: {
- labelId: "textSize-label-" + fluid.allocateGuid()
+ labelIdTemplate: "textSize-label-%guid"
}
});
@@ -909,60 +936,17 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
* A sub-component of fluid.prefs that renders the "line space" panel of the user preferences interface.
*/
fluid.defaults("fluid.prefs.panel.lineSpace", {
- gradeNames: ["fluid.prefs.panel"],
+ gradeNames: ["fluid.prefs.panel.stepperAjuster"],
preferenceMap: {
"fluid.prefs.lineSpace": {
- "model.lineSpace": "default",
+ "model.value": "default",
"range.min": "minimum",
"range.max": "maximum",
"step": "divisibleBy"
}
},
- selectors: {
- header: ".flc-prefsEditor-line-space-header",
- lineSpace: ".flc-prefsEditor-line-space",
- label: ".flc-prefsEditor-line-space-label",
- multiplier: ".flc-prefsEditor-multiplier",
- lineSpaceDescr: ".flc-prefsEditor-line-space-descr"
- },
- selectorsToIgnore: ["header", "lineSpace"],
- components: {
- textfieldStepper: {
- type: "fluid.textfieldStepper",
- container: "{that}.dom.lineSpace",
- createOnEvent: "afterRender",
- options: {
- model: {
- value: "{fluid.prefs.panel.lineSpace}.model.lineSpace",
- range: {
- min: "{fluid.prefs.panel.lineSpace}.options.range.min",
- max: "{fluid.prefs.panel.lineSpace}.options.range.max"
- },
- step: "{fluid.prefs.panel.lineSpace}.options.step"
- },
- scale: 1,
- strings: {
- increaseLabel: "{fluid.prefs.panel.lineSpace}.msgLookup.increaseLabel",
- decreaseLabel: "{fluid.prefs.panel.lineSpace}.msgLookup.decreaseLabel"
- },
- attrs: {
- "aria-labelledby": "{fluid.prefs.panel.lineSpace}.options.panelOptions.labelId"
- }
- }
- }
- },
- protoTree: {
- label: {
- messagekey: "lineSpaceLabel",
- decorators: {
- attrs: {id: "{that}.options.panelOptions.labelId"}
- }
- },
- multiplier: {messagekey: "multiplier"},
- lineSpaceDescr: {messagekey: "lineSpaceDescr"}
- },
panelOptions: {
- labelId: "lineSpace-label-" + fluid.allocateGuid()
+ labelIdTemplate: "lineSpace-label-%guid"
}
});
diff --git a/src/framework/preferences/js/PrefsEditor.js b/src/framework/preferences/js/PrefsEditor.js
index ef5f3315ff..9b2cc18acd 100644
--- a/src/framework/preferences/js/PrefsEditor.js
+++ b/src/framework/preferences/js/PrefsEditor.js
@@ -293,7 +293,13 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
},
listeners: {
"onCreate.init": "fluid.prefs.prefsEditor.init",
- "onAutoSave.save": "{that}.save"
+ "onAutoSave.save": "{that}.save",
+ // Using afterWrite to update the remote model is a temporary fix until
+ // FLUID-6257 (https://issues.fluidproject.org/browse/FLUID-6257) is addressed.
+ "afterWrite.postFetch": {
+ func: "{that}.fetch",
+ priority: "after:unblock"
+ }
},
model: {
local: {
diff --git a/src/framework/preferences/js/StarterGrades.js b/src/framework/preferences/js/StarterGrades.js
index f44e6c1b1a..1ba0fd29d3 100644
--- a/src/framework/preferences/js/StarterGrades.js
+++ b/src/framework/preferences/js/StarterGrades.js
@@ -185,7 +185,7 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
options: {
gradeNames: "fluid.prefs.prefsEditorConnections",
model: {
- textSize: "{prefsEditor}.model.preferences.textSize"
+ value: "{prefsEditor}.model.preferences.textSize"
},
messageBase: "{messageLoader}.resources.textSize.resourceText",
resources: {
@@ -205,7 +205,7 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
options: {
gradeNames: "fluid.prefs.prefsEditorConnections",
model: {
- lineSpace: "{prefsEditor}.model.preferences.lineSpace"
+ value: "{prefsEditor}.model.preferences.lineSpace"
},
messageBase: "{messageLoader}.resources.lineSpace.resourceText",
resources: {
diff --git a/src/framework/preferences/messages/letterSpace.json b/src/framework/preferences/messages/letterSpace.json
new file mode 100644
index 0000000000..762cbb1581
--- /dev/null
+++ b/src/framework/preferences/messages/letterSpace.json
@@ -0,0 +1,6 @@
+{
+ "label": "Letter Spacing",
+ "description": "Adjust the spacing between letters",
+ "increaseLabel": "increase letter spacing",
+ "decreaseLabel": "decrease letter spacing"
+}
diff --git a/src/framework/preferences/messages/lineSpace.json b/src/framework/preferences/messages/lineSpace.json
index 5923f2239b..79311ba40c 100644
--- a/src/framework/preferences/messages/lineSpace.json
+++ b/src/framework/preferences/messages/lineSpace.json
@@ -1,7 +1,6 @@
{
- "lineSpaceLabel": "Line Spacing",
- "multiplier": "times",
- "lineSpaceDescr": "Adjust the spacing between lines of text",
+ "label": "Line Spacing",
+ "description": "Adjust the spacing between lines of text",
"increaseLabel": "increase line spacing",
"decreaseLabel": "decrease line spacing"
}
diff --git a/src/framework/preferences/messages/textSize.json b/src/framework/preferences/messages/textSize.json
index d076129bf3..8779402dd8 100644
--- a/src/framework/preferences/messages/textSize.json
+++ b/src/framework/preferences/messages/textSize.json
@@ -1,7 +1,6 @@
{
- "textSizeLabel": "Text Size",
- "multiplier": "times",
- "textSizeDescr": "Adjust text size",
+ "label": "Text Size",
+ "description": "Adjust text size",
"increaseLabel": "increase text size",
"decreaseLabel": "decrease text size"
}
diff --git a/src/framework/preferences/preferencesDependencies.json b/src/framework/preferences/preferencesDependencies.json
index b9a1d1d91d..c19bf0cb52 100644
--- a/src/framework/preferences/preferencesDependencies.json
+++ b/src/framework/preferences/preferencesDependencies.json
@@ -18,8 +18,10 @@
"./js/PrefsEditor.js",
"./js/Panels.js",
"./js/SelfVoicingPanel.js",
+ "./js/LetterSpacePanel.js",
"./js/Enactors.js",
"./js/SelfVoicingEnactor.js",
+ "./js/LetterSpaceEnactor.js",
"./js/StarterGrades.js",
"./js/ArrowScrolling.js",
"./js/SeparatedPanelPrefsEditor.js",
@@ -29,6 +31,7 @@
"./js/AuxBuilder.js",
"./js/StarterSchemas.js",
"./js/SelfVoicingSchemas.js",
+ "./js/LetterSpaceSchemas.js",
"./js/Builder.js"
],
"dependencies": [
diff --git a/tests/all-tests.html b/tests/all-tests.html
index a61218354f..6251bf7b27 100644
--- a/tests/all-tests.html
+++ b/tests/all-tests.html
@@ -47,6 +47,8 @@
"./framework-tests/preferences/html/Enactors-test.html",
"./framework-tests/preferences/html/FullNoPreviewPrefsEditor-test.html",
"./framework-tests/preferences/html/FullPreviewPrefsEditor-test.html",
+ "./framework-tests/preferences/html/LetterSpaceEnactor-test.html",
+ "./framework-tests/preferences/html/LetterSpacePanel-test.html",
"./framework-tests/preferences/html/PageEnhancer-test.html",
"./framework-tests/preferences/html/Panels-test.html",
"./framework-tests/preferences/html/PrefsEditor-test.html",
diff --git a/tests/framework-tests/preferences/all-tests.html b/tests/framework-tests/preferences/all-tests.html
index 7fe309eeb9..5bd53843d1 100644
--- a/tests/framework-tests/preferences/all-tests.html
+++ b/tests/framework-tests/preferences/all-tests.html
@@ -16,6 +16,7 @@
"./html/Builder-test.html",
"./html/Enactors-test.html",
"./html/SelfVoicingEnactor-test.html",
+ "./html/LetterSpaceEnactor-test.html",
"./html/SeparatedPanelPrefsEditor-test.html",
"./html/SeparatedPanelPrefsEditorResponsive-test.html",
"./html/FullNoPreviewPrefsEditor-test.html",
@@ -23,6 +24,7 @@
"./html/PageEnhancer-test.html",
"./html/Panels-test.html",
"./html/SelfVoicingPanel-test.html",
+ "./html/LetterSpacePanel-test.html",
"./html/PrimaryBuilder-test.html",
"./html/Store-test.html",
"./html/UIEnhancer-test.html",
diff --git a/tests/framework-tests/preferences/html/Enactors-test.html b/tests/framework-tests/preferences/html/Enactors-test.html
index dea38016e3..53b4a9c756 100644
--- a/tests/framework-tests/preferences/html/Enactors-test.html
+++ b/tests/framework-tests/preferences/html/Enactors-test.html
@@ -40,6 +40,7 @@
+
diff --git a/tests/framework-tests/preferences/html/LetterSpaceEnactor-test.html b/tests/framework-tests/preferences/html/LetterSpaceEnactor-test.html
new file mode 100644
index 0000000000..46c2e4a97f
--- /dev/null
+++ b/tests/framework-tests/preferences/html/LetterSpaceEnactor-test.html
@@ -0,0 +1,64 @@
+
+
+
+
+ Letter Space Enactor Tests
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sample Text
+
+
+
+
diff --git a/tests/framework-tests/preferences/html/LetterSpacePanel-test.html b/tests/framework-tests/preferences/html/LetterSpacePanel-test.html
new file mode 100644
index 0000000000..ea0aed900e
--- /dev/null
+++ b/tests/framework-tests/preferences/html/LetterSpacePanel-test.html
@@ -0,0 +1,62 @@
+
+
+
+
+ Letter Space Panel Tests
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/framework-tests/preferences/html/SeparatedPanelPrefsEditorResponsive-test.html b/tests/framework-tests/preferences/html/SeparatedPanelPrefsEditorResponsive-test.html
index 3e50bfc6e6..7053a3847f 100644
--- a/tests/framework-tests/preferences/html/SeparatedPanelPrefsEditorResponsive-test.html
+++ b/tests/framework-tests/preferences/html/SeparatedPanelPrefsEditorResponsive-test.html
@@ -57,6 +57,9 @@
+
+
+
diff --git a/tests/framework-tests/preferences/js/AuxBuilderTests.js b/tests/framework-tests/preferences/js/AuxBuilderTests.js
index 84682be107..53d676990a 100644
--- a/tests/framework-tests/preferences/js/AuxBuilderTests.js
+++ b/tests/framework-tests/preferences/js/AuxBuilderTests.js
@@ -672,7 +672,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
options: {
gradeNames: ["fluid.prefs.prefsEditorConnections"],
model: {
- textSize: "prefsEditor.model.preferences.fluid_prefs_textSize"
+ value: "prefsEditor.model.preferences.fluid_prefs_textSize"
},
range: {
min: 1,
@@ -820,7 +820,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
options: {
gradeNames: ["fluid.prefs.prefsEditorConnections"],
model: {
- textSize: "prefsEditor.model.preferences.fluid_prefs_textSize"
+ value: "prefsEditor.model.preferences.fluid_prefs_textSize"
},
range: {
min: 1,
@@ -987,7 +987,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
options: {
gradeNames: ["fluid.prefs.prefsEditorConnections"],
model: {
- textSize: "prefsEditor.model.preferences.fluid_prefs_textSize"
+ value: "prefsEditor.model.preferences.fluid_prefs_textSize"
},
range: {
min: 1,
diff --git a/tests/framework-tests/preferences/js/EnactorsTestUtils.js b/tests/framework-tests/preferences/js/EnactorsTestUtils.js
new file mode 100644
index 0000000000..72de1b2487
--- /dev/null
+++ b/tests/framework-tests/preferences/js/EnactorsTestUtils.js
@@ -0,0 +1,33 @@
+/*
+Copyright 2017 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 fluid */
+
+(function () {
+ "use strict";
+
+ fluid.registerNamespace("fluid.tests.enactors.utils");
+
+ /*******************************************************************************
+ * fontSizeMap used for the various size related enactor tests
+ *******************************************************************************/
+
+ fluid.tests.enactors.utils.fontSizeMap = {
+ "xx-small": "9px",
+ "x-small": "11px",
+ "small": "13px",
+ "medium": "15px",
+ "large": "18px",
+ "x-large": "23px",
+ "xx-large": "30px"
+ };
+
+})();
diff --git a/tests/framework-tests/preferences/js/EnactorsTests.js b/tests/framework-tests/preferences/js/EnactorsTests.js
index 7c6aeb0715..95a90fd8a9 100644
--- a/tests/framework-tests/preferences/js/EnactorsTests.js
+++ b/tests/framework-tests/preferences/js/EnactorsTests.js
@@ -1,5 +1,5 @@
/*
-Copyright 2013-2015 OCAD University
+Copyright 2013-2017 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
@@ -172,20 +172,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}]
});
- /*******************************************************************************
- * fontSizeMap used for the various size related enactor tests
- *******************************************************************************/
-
- var fontSizeMap = {
- "xx-small": "9px",
- "x-small": "11px",
- "small": "13px",
- "medium": "15px",
- "large": "18px",
- "x-large": "23px",
- "xx-large": "30px"
- };
-
/*******************************************************************************
* Unit tests for fluid.prefs.enactor.textSize
*******************************************************************************/
@@ -197,7 +183,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
type: "fluid.prefs.enactor.textSize",
container: ".flc-textSize",
options: {
- fontSizeMap: fontSizeMap,
+ fontSizeMap: fluid.tests.enactors.utils.fontSizeMap,
model: {
value: 1
}
@@ -213,12 +199,12 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
var expectedInitialSize = 16;
var muliplier = 2;
var remTestElm = $("#flc-textSize-remTest");
- var initialREMSize = fluid.prefs.enactor.getTextSizeInPx(remTestElm, fontSizeMap);
+ var initialREMSize = fluid.prefs.enactor.getTextSizeInPx(remTestElm, fluid.tests.enactors.utils.fontSizeMap);
jqUnit.assertEquals("Check that the size is pulled from the container correctly", expectedInitialSize, that.initialSize);
that.applier.change("value", muliplier);
jqUnit.assertEquals("The size should be doubled", (expectedInitialSize * muliplier) + "px", that.root.css("fontSize"));
- jqUnit.assertEquals("The font size specified in rem units should be doubled", initialREMSize * muliplier, fluid.prefs.enactor.getTextSizeInPx(remTestElm, fontSizeMap));
+ jqUnit.assertEquals("The font size specified in rem units should be doubled", initialREMSize * muliplier, fluid.prefs.enactor.getTextSizeInPx(remTestElm, fluid.tests.enactors.utils.fontSizeMap));
// reset font size of root
$("html").css("font-size", that.initialSize + "px");
@@ -245,7 +231,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.defaults("fluid.tests.getLineHeightTests", {
gradeNames: ["fluid.test.testEnvironment"],
container: ".flc-lineSpace",
- fontSizeMap: fontSizeMap,
+ fontSizeMap: fluid.tests.enactors.utils.fontSizeMap,
expectedTestSize: 8,
expectedSizeAtUndetected: 1,
components: {
@@ -270,7 +256,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
var testGetLineHeightMultiplier = function (lineHeight, expected) {
var container = $(".flc-lineSpace");
- var fontSize = fluid.prefs.enactor.getTextSizeInPx(container, fontSizeMap);
+ var fontSize = fluid.prefs.enactor.getTextSizeInPx(container, fluid.tests.enactors.utils.fontSizeMap);
var numerizedLineHeight = fluid.prefs.enactor.lineSpace.getLineHeightMultiplier(lineHeight, Math.round(fontSize));
@@ -317,7 +303,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
type: "fluid.prefs.enactor.lineSpace",
container: ".flc-lineSpace",
options: {
- fontSizeMap: fontSizeMap,
+ fontSizeMap: fluid.tests.enactors.utils.fontSizeMap,
model: {
value: 1
}
diff --git a/tests/framework-tests/preferences/js/LetterSpaceEnactorTests.js b/tests/framework-tests/preferences/js/LetterSpaceEnactorTests.js
new file mode 100644
index 0000000000..dc292d8ef1
--- /dev/null
+++ b/tests/framework-tests/preferences/js/LetterSpaceEnactorTests.js
@@ -0,0 +1,153 @@
+/*
+Copyright 2017-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 fluid, jqUnit */
+
+(function ($) {
+ "use strict";
+
+ fluid.registerNamespace("fluid.tests");
+
+ /*******************************************************************************
+ * Unit tests for fluid.prefs.enactor.letterSpace
+ *******************************************************************************/
+
+ fluid.defaults("fluid.tests.prefs.enactor.letterSpaceEnactor", {
+ gradeNames: ["fluid.prefs.enactor.letterSpace"],
+ model: {
+ value: 1
+ },
+ fontSizeMap: fluid.tests.enactors.utils.fontSizeMap
+ });
+
+ fluid.defaults("fluid.tests.letterSpaceTests", {
+ gradeNames: ["fluid.test.testEnvironment"],
+ components: {
+ letterSpace: {
+ type: "fluid.tests.prefs.enactor.letterSpaceEnactor",
+ container: ".flc-letterSpace",
+ createOnEvent: "{letterSpaceTester}.events.onTestCaseStart"
+ },
+ letterSpaceTester: {
+ type: "fluid.tests.letterSpaceTester"
+ }
+ }
+ });
+
+ fluid.defaults("fluid.tests.letterSpaceTester", {
+ gradeNames: ["fluid.test.testCaseHolder"],
+ modules: [{
+ name: "fluid.prefs.enactor.letterSpace",
+ tests: [{
+ expect: 7,
+ name: "Set letter space",
+ sequence: [{
+ listener: "jqUnit.assert",
+ event: "{letterSpaceTests letterSpace}.events.onCreate",
+ args: ["The letter space enactor was created"]
+ }, {
+ func: "fluid.tests.letterSpaceTester.assertLetterSpace",
+ args: ["{letterSpace}", 16, {value: 1, unit: 0}]
+ }, {
+ func: "{letterSpace}.applier.change",
+ args: ["value", 2]
+ }, {
+ changeEvent: "{letterSpace}.applier.modelChanged",
+ spec: {path: "value", priority: "last:testing"},
+ listener: "fluid.tests.letterSpaceTester.assertLetterSpace",
+ args: ["{letterSpace}", 16, {value: 2, unit: 1}]
+ }, {
+ func: "{letterSpace}.applier.change",
+ args: ["value", -0.5]
+ }, {
+ changeEvent: "{letterSpace}.applier.modelChanged",
+ spec: {path: "value", priority: "last:testing"},
+ listener: "fluid.tests.letterSpaceTester.assertLetterSpace",
+ args: ["{letterSpace}", 16, {value: -0.5, unit: -1.5}]
+ }, {
+ funcName: "fluid.tests.letterSpaceTester.reset",
+ args: ["{letterSpace}.container"]
+ }]
+ }]
+ }]
+ });
+
+ fluid.defaults("fluid.tests.letterSpaceExistingTests", {
+ gradeNames: ["fluid.test.testEnvironment"],
+ components: {
+ letterSpace: {
+ type: "fluid.tests.prefs.enactor.letterSpaceEnactor",
+ container: ".flc-letterSpace-existing",
+ createOnEvent: "{letterSpaceTester}.events.onTestCaseStart"
+ },
+ letterSpaceTester: {
+ type: "fluid.tests.letterSpaceExistingTester"
+ }
+ }
+ });
+
+ fluid.defaults("fluid.tests.letterSpaceExistingTester", {
+ gradeNames: ["fluid.test.testCaseHolder"],
+ modules: [{
+ name: "fluid.prefs.enactor.letterSpace",
+ tests: [{
+ expect: 7,
+ name: "Set letter space when existing letter space present",
+ sequence: [{
+ listener: "jqUnit.assert",
+ event: "{letterSpaceExistingTests letterSpace}.events.onCreate",
+ args: ["The letter space enactor was created"]
+ }, {
+ func: "fluid.tests.letterSpaceTester.assertLetterSpace",
+ args: ["{letterSpace}", 16, {value: 1, unit: 0}, 3.2]
+ }, {
+ func: "{letterSpace}.applier.change",
+ args: ["value", 2]
+ }, {
+ changeEvent: "{letterSpace}.applier.modelChanged",
+ spec: {path: "value", priority: "last:testing"},
+ listener: "fluid.tests.letterSpaceTester.assertLetterSpace",
+ args: ["{letterSpace}", 16, {value: 2, unit: 1}, 19.2]
+ }, {
+ func: "{letterSpace}.applier.change",
+ args: ["value", -0.5]
+ }, {
+ changeEvent: "{letterSpace}.applier.modelChanged",
+ spec: {path: "value", priority: "last:testing"},
+ listener: "fluid.tests.letterSpaceTester.assertLetterSpace",
+ args: ["{letterSpace}", 16, {value: -0.5, unit: -1.5}, -20.8]
+ }, {
+ funcName: "fluid.tests.letterSpaceTester.reset",
+ args: ["{letterSpace}.container"]
+ }]
+ }]
+ }]
+ });
+
+ fluid.tests.letterSpaceTester.assertLetterSpace = function (that, baseFontSize, expectedModel, expectedStyleValue) {
+ var pxVal = expectedStyleValue || expectedModel.unit * baseFontSize; // convert from em to px
+ var expectedLetterSpace = pxVal ? pxVal + "px" : "0";
+ jqUnit.assertDeepEq("The model should be set correctly", expectedModel, that.model);
+ jqUnit.assertEquals("The letter-spacing css style should be set to " + expectedLetterSpace, expectedLetterSpace, that.container.css("letter-spacing"));
+ };
+
+ fluid.tests.letterSpaceTester.reset = function (elm) {
+ $(elm).css("letter-spacing", "");
+ };
+
+ $(document).ready(function () {
+ fluid.test.runTests([
+ "fluid.tests.letterSpaceTests",
+ "fluid.tests.letterSpaceExistingTests"
+ ]);
+ });
+
+})(jQuery);
diff --git a/tests/framework-tests/preferences/js/LetterSpacePanelTests.js b/tests/framework-tests/preferences/js/LetterSpacePanelTests.js
new file mode 100644
index 0000000000..170aa970bf
--- /dev/null
+++ b/tests/framework-tests/preferences/js/LetterSpacePanelTests.js
@@ -0,0 +1,85 @@
+/*
+Copyright 2017 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 fluid */
+
+(function ($) {
+ "use strict";
+
+ fluid.registerNamespace("fluid.tests");
+
+ fluid.defaults("fluid.tests.prefs.panel.letterSpace", {
+ gradeNames: ["fluid.prefs.panel.letterSpace", "fluid.tests.panels.utils.defaultTestPanel", "fluid.tests.panels.utils.injectTemplates"],
+ messageBase: {
+ "label": "Letter Spacing",
+ "description": "Adjust the spacing between letters",
+ "increaseLabel": "increase letter spacing",
+ "decreaseLabel": "decrease letter spacing"
+ },
+ model: {
+ value: 0
+ },
+ resources: {
+ template: {
+ href: "../../../../src/framework/preferences/html/PrefsEditorTemplate-letterSpace.html"
+ }
+ }
+ });
+
+ fluid.defaults("fluid.tests.letterSpacePanelTests", {
+ gradeNames: ["fluid.test.testEnvironment"],
+ components: {
+ letterSpace: {
+ type: "fluid.tests.prefs.panel.letterSpace",
+ container: ".flc-letterSpace",
+ createOnEvent: "{letterSpaceTester}.events.onTestCaseStart"
+ },
+ letterSpaceTester: {
+ type: "fluid.tests.letterSpaceTester"
+ }
+ }
+ });
+
+ fluid.defaults("fluid.tests.letterSpaceTester", {
+ gradeNames: ["fluid.test.testCaseHolder"],
+ testOptions: {
+ newValue: 2.5
+ },
+ modules: [{
+ name: "Test the letterSpace settings panel",
+ tests: [{
+ expect: 2,
+ name: "Test the rendering of the letterSpace panel",
+ sequence: [{
+ event: "{fluid.tests.letterSpacePanelTests letterSpace}.events.afterRender",
+ priority: "last:testing",
+ listener: "fluid.tests.panels.utils.checkModel",
+ args: ["value", "{letterSpace}.model", 0]
+ }, {
+ func: "fluid.tests.panels.changeInput",
+ args: ["{letterSpace}.dom.textfieldStepperContainer", "{that}.options.testOptions.newValue"]
+ }, {
+ listener: "fluid.tests.panels.utils.checkModel",
+ args: ["value", "{letterSpace}.model", "{that}.options.testOptions.newValue"],
+ spec: {path: "value", priority: "last:testing"},
+ changeEvent: "{letterSpace}.applier.modelChanged"
+ }]
+ }]
+ }]
+ });
+
+ $(document).ready(function () {
+ fluid.test.runTests([
+ "fluid.tests.letterSpacePanelTests"
+ ]);
+ });
+
+})(jQuery);
diff --git a/tests/framework-tests/preferences/js/PanelTestUtils.js b/tests/framework-tests/preferences/js/PanelTestUtils.js
index 91c0ff17c3..cabba80142 100644
--- a/tests/framework-tests/preferences/js/PanelTestUtils.js
+++ b/tests/framework-tests/preferences/js/PanelTestUtils.js
@@ -1,5 +1,5 @@
/*
-Copyright 2013-2015 OCAD University
+Copyright 2013-2017 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
@@ -54,4 +54,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
jqUnit.assertEquals("The toggle off text is " + messageBase.switchOff, messageBase.switchOff, that.switchUI.locate("off").text());
};
+ fluid.tests.panels.changeInput = function (controlContainer, newValue) {
+ fluid.changeElementValue(controlContainer.find("input"), newValue);
+ };
+
})();
diff --git a/tests/framework-tests/preferences/js/PanelsTests.js b/tests/framework-tests/preferences/js/PanelsTests.js
index 0f4531ee82..8e3f183b0e 100644
--- a/tests/framework-tests/preferences/js/PanelsTests.js
+++ b/tests/framework-tests/preferences/js/PanelsTests.js
@@ -1304,24 +1304,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}]
});
- /*******************************************************************************
- * Test functions shared by text field slider unit tests
- *******************************************************************************/
- fluid.tests.testDefault = function (that, messageMap) {
- var inputValue = parseFloat(that.container.find("input").val(), 10);
- var messageBase = that.options.messageBase;
- jqUnit.assertEquals("The default input value has been set to the min value", that.options.range.min, inputValue);
-
- fluid.each(messageMap, function (messageName, selectorName) {
- jqUnit.assertEquals("The label text is " + messageBase[messageName], messageBase[messageName], that.locate(selectorName).text());
- });
-
- };
-
- fluid.tests.changeInput = function (textSlider, newValue) {
- fluid.changeElementValue(textSlider.find("input"), newValue);
- };
-
/*******************************************************************************
* textSize
*******************************************************************************/
@@ -1329,7 +1311,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.defaults("fluid.tests.prefs.panel.textSize", {
gradeNames: ["fluid.prefs.panel.textSize", "fluid.tests.panels.utils.defaultTestPanel", "fluid.tests.panels.utils.injectTemplates"],
model: {
- textSize: 1
+ value: 1
},
messageBase: {
"textSizeLabel": "Text Size",
@@ -1372,14 +1354,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
event: "{fluid.tests.textSizePanel textSize}.events.afterRender",
priority: "last:testing",
listener: "fluid.tests.panels.utils.checkModel",
- args: ["textSize", "{textSize}.model", 1]
+ args: ["value", "{textSize}.model", 1]
}, {
- func: "fluid.tests.changeInput",
- args: ["{textSize}.dom.textSize", "{that}.options.testOptions.newValue"]
+ func: "fluid.tests.panels.changeInput",
+ args: ["{textSize}.dom.textfieldStepperContainer", "{that}.options.testOptions.newValue"]
}, {
listener: "fluid.tests.panels.utils.checkModel",
- args: ["textSize", "{textSize}.model", "{that}.options.testOptions.newValue"],
- spec: {path: "textSize", priority: "last"},
+ args: ["value", "{textSize}.model", "{that}.options.testOptions.newValue"],
+ spec: {path: "value", priority: "last"},
changeEvent: "{textSize}.applier.modelChanged"
}]
}]
@@ -1393,7 +1375,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.defaults("fluid.tests.prefs.panel.lineSpace", {
gradeNames: ["fluid.prefs.panel.lineSpace", "fluid.tests.panels.utils.defaultTestPanel", "fluid.tests.panels.utils.injectTemplates"],
model: {
- lineSpace: 1
+ value: 1
},
messageBase: {
"lineSpaceLabel": "Line Spacing",
@@ -1442,14 +1424,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
event: "{fluid.tests.lineSpacePanel lineSpace}.events.afterRender",
priority: "last:testing",
listener: "fluid.tests.panels.utils.checkModel",
- args: ["lineSpace", "{lineSpace}.model", 1]
+ args: ["value", "{lineSpace}.model", 1]
}, {
- func: "fluid.tests.changeInput",
- args: ["{lineSpace}.dom.lineSpace", "{that}.options.testOptions.newValue"]
+ func: "fluid.tests.panels.changeInput",
+ args: ["{lineSpace}.dom.textfieldStepperContainer", "{that}.options.testOptions.newValue"]
}, {
listener: "fluid.tests.panels.utils.checkModel",
- args: ["lineSpace", "{lineSpace}.model", "{that}.options.testOptions.newValue"],
- spec: {path: "lineSpace", priority: "last"},
+ args: ["value", "{lineSpace}.model", "{that}.options.testOptions.newValue"],
+ spec: {path: "value", priority: "last"},
changeEvent: "{lineSpace}.applier.modelChanged"
}
]