Permalink
Browse files

gallery-2011.09.28-20-29 kloots gallery-a11ychecker-ui

  • Loading branch information...
1 parent 27ba9a5 commit 9624c6641bd9ae5558a934484b1bbc42e3aff2a8 YUI Builder committed Sep 28, 2011
@@ -0,0 +1,22 @@
+# A11y Checker Build Properties
+
+# As long as the 'builder' project is cloned to the default folder
+# next to the 'yui3-gallery' project folder, the 'builddir' property does not
+# need to be changed
+#
+# If the 'builder' project is checked out to an alternate location, this
+# property should be updated to point to the checkout location.
+builddir=../../../builder/componentbuild
+
+# The name of the component. E.g. event, attribute, widget
+component=gallery-a11ychecker-ui
+
+# The list of files which should be concatenated to create the component
+# NOTE: For a css component. (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead.
+component.jsfiles=dupe-link-checker-ui.js, dupe-link-label-checker-ui.js, label-checker-ui.js, link-button-checker-ui.js, tooltip.js, show-error.js
+
+# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3.
+component.requires=gallery-a11ychecker-base, frame, overlay, event-mouseenter, dd-plugin
+
+# If your module has a skin file, set this flag to "true"
+component.skinnable=false
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- YUI 3 Gallery Component Build File -->
+<project name="Accessibility Checker" default="local">
+ <description>Accessibility Checker - Build UI module</description>
+ <property file="build.properties" />
+ <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
+</project>
@@ -0,0 +1,65 @@
+(function () {
+
+var ns = Y.namespace("a11ychecker");
+
+ns.showDupeLinks = function () {
+
+ var overlay = new Y.Overlay({ zIndex: 2147483647, xy: [10,10] });
+ overlay.render("body");
+
+ overlay.get("boundingBox").plug(Y.Plugin.Drag);
+
+ overlay.get("contentBox").setStyles({
+ borderColor: "#A6982B",
+ borderWidth: "10px 1px 1px 1px",
+ borderStyle: "solid"
+ });
+
+ // TO DO:
+ // 1) External CSS for styling the iframe content
+ // 2) Means of managing the markup
+ var iframe = new Y.Frame({
+ extracss: "body { color: #000; padding: 5px; background-color: #FFEE69; overflow: hidden; }",
+ content: '<fieldset><legend>Dupe Link Checker Options</legend><div><label for="show-dup">Show All Duplicates</label><input id="show-dup" type="checkbox"></div><div><label for="ignore-ylt">Ignore YLT</label><input id="ignore-ylt" type="checkbox" checked></div></fieldset>'
+ });
+
+ iframe.render(overlay.get("contentBox"));
+
+ var iframeY = iframe.getInstance(),
+ iframeNode = iframe.get("node");
+
+ iframeNode.setStyle("display", "block");
+ iframeNode.set("height", (iframeY.one("body").get("offsetHeight")));
+
+
+ function showDuplicates(config) {
+
+ ns.hideErrors();
+ ns.clearErrors(ns.findDupeLinks);
+
+ config = config || {};
+
+ ns.findDupeLinks(config);
+ ns.showErrors({ tooltip: true });
+
+ }
+
+
+ function runTest(e) {
+
+ ns.hideErrors();
+
+ showDuplicates({
+ all: iframeY.one("#show-dup").get("checked"),
+ ignoreYLT: iframeY.one("#ignore-ylt").get("checked")
+ });
+ }
+
+
+ iframe.delegate("change", runTest, "#show-dup, #ignore-ylt");
+
+ runTest();
+
+};
+
+}());
@@ -0,0 +1,12 @@
+(function () {
+
+var ns = Y.namespace("a11ychecker");
+
+ns.showDupeLinkLabels = function () {
+
+ ns.findDupeLinkLabels();
+ ns.showErrors({ tooltip: true });
+
+};
+
+}());
@@ -0,0 +1,12 @@
+(function () {
+
+var ns = Y.namespace("a11ychecker");
+
+ns.showLabelErrors = function () {
+
+ ns.checkLabels();
+ ns.showErrors({ tooltip: true });
+
+};
+
+}());
@@ -0,0 +1,12 @@
+(function () {
+
+var ns = Y.namespace("a11ychecker");
+
+ns.showLinkButtons = function () {
+
+ ns.findLinkButtons();
+ ns.showErrors();
+
+};
+
+}());
@@ -0,0 +1,140 @@
+(function () {
+
+ YUI.namespace("a11ychecker");
+
+ var ns = Y.namespace("a11ychecker"),
+
+ getErrors = ns.getErrors,
+
+ ERROR_CLASS_NAME = "a11y-checker-error",
+ ERROR_CLASS_SELECTOR = "." + ERROR_CLASS_NAME,
+ ERROR_BORDER_STYLE = "solid 2px red",
+ EMPTY_STRING = "",
+ HASH_SYMBOL = "#",
+ BORDER = "border";
+
+
+ function onTriggerEnter(e) {
+
+ var node = e.node,
+ id = node.get("id"),
+ errors = getErrors(),
+ nodeErrors = errors[id],
+ triggerContent = [],
+ startHTML = "",
+ endHTML = "",
+ errorTag = "div",
+ iframe,
+ iframeBody;
+
+ if (nodeErrors) {
+
+ if (Y.Object.size(nodeErrors) > 1) {
+ startHTML = "<ol>";
+ endHTML = "</ol>";
+ errorTag = "li";
+ }
+
+ if (!(iframe = this.iframe)) {
+ iframe = new Y.Frame({ extracss: "body { color: #000; padding: 2px 5px; border-color: #D4C237 #A6982B #A6982B #A6982B; border-width: 1px; border-style: solid; background-color: #FFEE69; overflow: hidden; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }" });
+ iframe.render(this.get("contentBox"));
+ iframe.get("node").setStyle("display", "block");
+
+ this.iframe = iframe;
+ }
+
+
+ Y.each(nodeErrors, function (v, k) {
+ triggerContent.push("<"+errorTag+">" + v.message + "</"+errorTag+">");
+ });
+
+
+ iframe.set("content", (startHTML + triggerContent.join(EMPTY_STRING) + endHTML));
+
+
+ iframeBody = iframe.getInstance().one("body");
+
+ iframeBody.set("unselectable", "on");
+ iframe.get("node").set("height", iframeBody.get("offsetHeight"));
+
+ }
+
+ }
+
+
+ function createTooltip(config) {
+
+ config = config || {};
+
+ var tooltip = YUI.a11ychecker.tooltip;
+
+ if (!tooltip) {
+
+ tooltip = YUI.a11ychecker.tooltip = new ns.Tooltip({
+ triggerNodes: ERROR_CLASS_SELECTOR,
+ zIndex: 2147483647
+ });
+
+ tooltip.get("boundingBox").setStyle("position", "absolute");
+
+ tooltip.render();
+
+ tooltip.after("visibleChange", function (e) {
+ var value = e.newVal ? "visible" : "hidden";
+ tooltip.get("boundingBox").setStyle("visibility", value);
+ });
+
+ tooltip.on("triggerEnter", onTriggerEnter);
+
+ }
+ else {
+ tooltip.set("triggerNodes", ERROR_CLASS_SELECTOR);
+ }
+
+ return tooltip;
+
+ }
+
+
+ ns.hideErrors = function () {
+
+ Y.each(getErrors(), function (v, k) {
+ Y.one(HASH_SYMBOL + k).setStyle(BORDER, EMPTY_STRING);
+ });
+
+ Y.all(ERROR_CLASS_SELECTOR).removeClass(ERROR_CLASS_NAME);
+
+ var tooltip = YUI.a11ychecker.tooltip;
+
+ if (tooltip) {
+ tooltip.set("triggerNodes", null);
+ }
+
+ };
+
+
+ ns.showErrors = function (config) {
+
+ config = config || {};
+
+ var ttConfig = config.tooltip,
+ node;
+
+ Y.each(getErrors(), function (v, k) {
+
+ node = Y.one(HASH_SYMBOL + k);
+ node.setStyle(BORDER, ERROR_BORDER_STYLE);
+
+ if (ttConfig) {
+ node.addClass(ERROR_CLASS_NAME);
+ }
+
+ });
+
+ if (ttConfig) {
+ createTooltip(ttConfig);
+ }
+
+ };
+
+}());
Oops, something went wrong.

0 comments on commit 9624c66

Please sign in to comment.