private createControlElements()

in src/globemap.ts [1571:1653]
70 lines of code
5 McCabe index (conditional complexity)

        private createControlElements(): Element {
            const protocol: string = "http";
            let svgNS: string = `${protocol}://www.w3.org/2000/svg`;

            const circle = (cx: number, cy: number, r: number, classNames?: string) => {
                let c = document.createElementNS(svgNS, "circle");
                c.setAttribute("cx", cx.toString());
                c.setAttribute("cy", cy.toString());
                c.setAttribute("r", r.toString());
                if (classNames) {
                    (<{ className }>c).className.baseVal = classNames;
                }
                return c;
            };

            const path = (d: string, classNames?: string) => {
                let p = document.createElementNS(svgNS, "path");
                p.setAttribute("d", d);
                if (classNames) {
                    (<{ className }>p).className.baseVal = classNames;
                }
                return p;
            };

            const rect = (x: number, y: number, width: number, height: number, classNames?: string) => {
                let r = document.createElementNS(svgNS, "rect");
                r.setAttribute("x", x.toString());
                r.setAttribute("y", y.toString());
                r.setAttribute("width", width.toString());
                r.setAttribute("height", height.toString());
                if (classNames) {
                    (<{ className }>r).className.baseVal = classNames;
                }
                return r;
            };

            const g = (classNames: string) => {
                let g = document.createElementNS(svgNS, "g");
                if (classNames) {
                    (<{ className }>g).className.baseVal = classNames;
                }
                return g;
            };

            let moveUpButton = g("control js-control--move-up");
            moveUpButton.appendChild(circle(85, 20, 17));
            moveUpButton.appendChild(path("M85 8 l12 20 a40,70 0 0,0 -24,0z"));

            let moveRightButton = g("control js-control--move-right");
            moveRightButton.appendChild(circle(119, 54, 17, "zoomControlCircle"));
            moveRightButton.appendChild(path("M130.9 54 l-20 -12 a70,40 0 0,1 0,24z", "zoomControlPath"));

            let moveDownButton = g("control js-control--move-down");
            moveDownButton.appendChild(circle(85, 88, 17));
            moveDownButton.appendChild(path("M 85 100 l12 -20 a40,70 0 0,1 -24,0z"));

            let moveLeftButton = g("control js-control--move-left");
            moveLeftButton.appendChild(circle(51, 54, 17));
            moveLeftButton.appendChild(path("M39 54 l20 -12 a70,40 0 0,0 0,24z"));

            let zoomDownButton = g("control js-control--zoom-down");
            zoomDownButton.appendChild(circle(51, 122, 17));
            zoomDownButton.appendChild(rect(42, 120, 17, 6, "zoomControlPath"));

            let zoomUpButton = g("control js-control--zoom-up");
            zoomUpButton.appendChild(circle(119, 122, 17));
            zoomUpButton.appendChild(rect(110.5, 120, 17, 6));
            zoomUpButton.appendChild(rect(116, 114, 6, 17));

            let controlsContainerSVG = document.createElementNS(svgNS, "svg");
            (<{ className }>controlsContainerSVG).className.baseVal = "controls";
            controlsContainerSVG.setAttribute("width", "145");
            controlsContainerSVG.setAttribute("height", "145");

            controlsContainerSVG.appendChild(moveUpButton);
            controlsContainerSVG.appendChild(moveRightButton);
            controlsContainerSVG.appendChild(moveDownButton);
            controlsContainerSVG.appendChild(moveLeftButton);
            controlsContainerSVG.appendChild(zoomDownButton);
            controlsContainerSVG.appendChild(zoomUpButton);

            return controlsContainerSVG;
        }