svgHover.ts

svgHover.ts

angular.module("shared.ui").directive(
    "svgHover",
    [
        () => {
            return {
                restrict: "A",
                link: (scope: ng.IScope, element: ng.IAugmentedJQuery) => {
                    function getSvg(svg: HTMLObjectElement): SVGElement {
                        var svgDocument: Document;
                        try {
                            svgDocument = svg.getSVGDocument();
                        } catch (e) {
                            // IE breaks on the first call. But we can let it go with the setTimeout.
                        }
                        // ReSharper disable once Html.TagNotResolved
                        var svgElement: SVGElement = svgDocument ? <SVGElement>svgDocument.getElementsByTagName("svg")[0] : null;

                        return svgElement;
                    };

                    function svgMouseOver() {
                        var svgElement = getSvg(<HTMLObjectElement>element.find("object:first")[0]);
                        // Check if 'hovered' is not already set to make sure it is not set twice
                        if (svgElement && svgElement.getAttribute("class") && svgElement.getAttribute("class").indexOf("hovered") === -1) {
                            var currentClass = svgElement.getAttribute("class");
                            svgElement.setAttribute("class",(currentClass ? currentClass + " " : "") + "hovered");
                        }
                    };

                    function svgMouseLeave() {
                        var svgElement = getSvg(<HTMLObjectElement>element.find("object:first")[0]);
                        if (svgElement) {
                            var currentClass = svgElement.getAttribute("class") || "";
                            svgElement.setAttribute("class", currentClass.replace("hovered", "").trim());
                        }
                    };
                    element.hover(svgMouseOver, svgMouseLeave);
                }
            };
        }
    ]);