shapes.js

"use strict";
var Shape = function (el, colour) {
    var color, shape,
        that = this;
    shape = el.getAttribute("shape-type") || "square";
    
    change();
    this.newColor = function (color) {
        el.setAttribute("shape-color", color);
        change();
    }
    
    function map (old, fMin, fMax, tMin, tMax) {
        // Catch divied by zero
        if (fMax - fMin === 0) {
            // If the range is 0 to 0 the the answer is always 0
            return 0;
        }
        return ((old - fMin) * (tMax - tMin) / (fMax - fMin)) + tMin;
    }
    
    function stretch (coords) {
        var isString = !!stringToCoords(coords);
        coords = stringToCoords(coords) || coords
        
        if (coords.length <= 0) return false;
        
        var maxX = coords[0][0];
        var maxY = coords[0][1];
        var minX = coords[0][0];
        var minY = coords[0][1];
        var a;
        
        for (a = 0; a < coords.length; a++) {
            if (maxX < coords[a][0]) maxX = coords[a][0];
            if (maxY < coords[a][1]) maxY = coords[a][1];
            
            if (minX > coords[a][0]) minX = coords[a][0];
            if (minY > coords[a][1]) minY = coords[a][1];
        }
        
        for (a = 0; a < coords.length; a++) {
            coords[a][0] = map(coords[a][0], minX, maxX, 0, 100);
            coords[a][1] = map(coords[a][1], minY, maxY, 0, 100);
        }
        
        return isString ? coordsToString(coords, true) : coords;
    }
    
    function stringToCoords(string) {
        var reg = /polygon\(([^\)]+)\)/,
            coords = [];
        if (reg.test(string)) {
            reg = string.match(reg)[1];
            coords = reg.split(",");
            for (var a in coords) {
                coords[a] = coords[a].replace(/[^ \d]/g, '');
                coords[a] = coords[a].trim().split(" ");
            }
            return coords;
        } else {
            return false;
        }
    }
    function coordsToString(array, polygon) {
        var a, toReturn = "";

        polygon = polygon || true;

        for (a = 0; a < array.length; a++) {
            toReturn += array[a][0] + "% " + array[a][1] + "%";
            if (a < array.length - 1) toReturn += ", ";
        }

        return polygon ? "polygon(" + toReturn + ")" : toReturn;
    }
    function nSidedCoords(sides, radius, offsetX, offsetY, offsetT) {
        var a, toReturn = [];

        radius = radius || 50;
        offsetX = offsetX || 50;
        offsetY = offsetY || 50;
        offsetT = offsetT || - Math.PI / 2;

        sides = parseInt(sides, 10);
        radius = parseFloat(radius, 10);
        offsetX = parseFloat(offsetX, 10);
        offsetY = parseFloat(offsetY, 10);

        for (a = 0; a < sides; a++) {
            toReturn[a] = [
                radius * Math.cos(2 * Math.PI * a / sides + offsetT) + offsetX,
                radius * Math.sin(2 * Math.PI * a / sides + offsetT) + offsetY
            ];
        }

        return toReturn;
    }
    
    function nSidedPolygon(sides) {
        sides = nSidedCoords(sides);
        sides = stretch(sides);
        return coordsToString(sides);
    }
    function makeStar(sides, intSize) {
        var external, internal, a, toReturn = [];
        sides = sides || 5;
        intSize = intSize || 25;
        external = nSidedCoords(sides);
        internal = nSidedCoords(sides, intSize, 50, 50, - Math.PI / 2 + Math.PI / sides);

        for (a = 0; a < external.length; a++) {
            toReturn[toReturn.length] = external[a];
            toReturn[toReturn.length] = internal[a];
        }

        
        return coordsToString(toReturn);
    }
    function makeArrow(orientation, arrowSize, tailSize) {
        var coords = [];
        arrowSize = arrowSize || 40;
        tailSize = tailSize || 60;

        switch (orientation) {
            case 0: // up
                coords[coords.length] = [50, 0];
                coords[coords.length] = [100, arrowSize];
                coords[coords.length] = [100 - (100 - tailSize) / 2, arrowSize];
                coords[coords.length] = [100 - (100 - tailSize) / 2, 100];
                coords[coords.length] = [(100 - tailSize) / 2, 100];
                coords[coords.length] = [(100 - tailSize) / 2, arrowSize];
                coords[coords.length] = [0, arrowSize];
                break;
            case 1: // down
                coords[coords.length] = [50, 100];
                coords[coords.length] = [0, 100 - arrowSize];
                coords[coords.length] = [(100 - tailSize) / 2, 100 - arrowSize];
                coords[coords.length] = [(100 - tailSize) / 2, 0];
                coords[coords.length] = [100 - (100 - tailSize) / 2, 0];
                coords[coords.length] = [100 - (100 - tailSize) / 2, 100 - arrowSize];
                coords[coords.length] = [100, 100 - arrowSize];
                break;
            case 2: // left
                coords[coords.length] = [0, 50];
                coords[coords.length] = [arrowSize, 100];
                coords[coords.length] = [arrowSize, 100 - (100 - tailSize) / 2];
                coords[coords.length] = [100, 100 - (100 - tailSize) / 2];
                coords[coords.length] = [100, (100 - tailSize) / 2];
                coords[coords.length] = [arrowSize, (100 - tailSize) / 2];
                coords[coords.length] = [arrowSize, 0];
                break;
            case 3: // right
                coords[coords.length] = [100, 50];
                coords[coords.length] = [100 - arrowSize, 0];
                coords[coords.length] = [100 - arrowSize, (100 - tailSize) / 2];
                coords[coords.length] = [0, (100 - tailSize) / 2];
                coords[coords.length] = [0, 100 - (100 - tailSize) / 2];
                coords[coords.length] = [100 - arrowSize, 100 - (100 - tailSize) / 2];
                coords[coords.length] = [100 - arrowSize, 100];
                break;
        }
        return coordsToString(coords);
    }
    function makeChevron(orientation, percentage) {
        var coords = [];
        percentage = percentage || 25;

        switch (orientation) {
            case 0: // up
                coords[coords.length] = [50, 0];
                coords[coords.length] = [100, percentage];
                coords[coords.length] = [100, 100];
                coords[coords.length] = [50, 100 - percentage];
                coords[coords.length] = [0, 100];
                coords[coords.length] = [0, percentage];
                break;
            case 1: // down
                coords[coords.length] = [50, 100];
                coords[coords.length] = [0, 100 - percentage];
                coords[coords.length] = [0, 0];
                coords[coords.length] = [50, percentage];
                coords[coords.length] = [100, 0];
                coords[coords.length] = [100, 100 - percentage];
                break;
            case 2: // left
                coords[coords.length] = [0, 50];
                coords[coords.length] = [percentage, 100];
                coords[coords.length] = [100, 100];
                coords[coords.length] = [100 - percentage, 50];
                coords[coords.length] = [100, 0];
                coords[coords.length] = [percentage, 0];
                break;
            case 3: // right
                coords[coords.length] = [100, 50];
                coords[coords.length] = [100 - percentage, 0];
                coords[coords.length] = [0, 0];
                coords[coords.length] = [percentage, 50];
                coords[coords.length] = [0, 100];
                coords[coords.length] = [100 - percentage, 100];
                break;
        }

        return coordsToString(coords);
    }
    function makeCross(percentage) {
        var coords = [];
        percentage = percentage || 20;

        coords[coords.length] = [percentage, 0];
        coords[coords.length] = [50, 50 - percentage];
        coords[coords.length] = [100 - percentage, 0];
        coords[coords.length] = [100, percentage];
        coords[coords.length] = [50 + percentage, 50];
        coords[coords.length] = [100, 100 - percentage];
        coords[coords.length] = [100 - percentage, 100];
        coords[coords.length] = [50, 50 + percentage];
        coords[coords.length] = [percentage, 100];
        coords[coords.length] = [0, 100 - percentage];
        coords[coords.length] = [50 - percentage, 50];
        coords[coords.length] = [0, percentage];

        return coordsToString(coords);
    }
    function makeBevel(percentage) {
        var coords = [];
        percentage = percentage || 20;

        coords[coords.length] = [percentage, 0];
        coords[coords.length] = [100 - percentage, 0];
        coords[coords.length] = [100, percentage];
        coords[coords.length] = [100, 100 - percentage];
        coords[coords.length] = [100 - percentage, 100];
        coords[coords.length] = [percentage, 100];
        coords[coords.length] = [0, 100 - percentage];
        coords[coords.length] = [0, percentage];

        return coordsToString(coords);
    }
    function makeRabbet(percentage) {
        var coords = [];
        percentage = percentage || 20;

        coords[coords.length] = [percentage, 0];
        coords[coords.length] = [100 - percentage, 0];
        coords[coords.length] = [100 - percentage, percentage];
        coords[coords.length] = [100, percentage];
        coords[coords.length] = [100, 100 - percentage];
        coords[coords.length] = [100 - percentage, 100 - percentage];
        coords[coords.length] = [100 - percentage, 100];
        coords[coords.length] = [percentage, 100];
        coords[coords.length] = [percentage, 100 - percentage];
        coords[coords.length] = [0, 100 - percentage];
        coords[coords.length] = [0, percentage];
        coords[coords.length] = [percentage, percentage];

        return coordsToString(coords);
    }
    function makeTrapezoid(percentage) {
        var coords = [];
        percentage = percentage || 20;

        coords[coords.length] = [percentage, 0];
        coords[coords.length] = [100 - percentage, 0];
        coords[coords.length] = [100, 100];
        coords[coords.length] = [0, 100];

        return coordsToString(coords);
    }
    function makeParallelogram(percentage, reverse) {
        var coords = [];
        reverse = reverse || false;
        percentage = percentage || 20;
        if (reverse) {
            coords[coords.length] = [0, 0];
            coords[coords.length] = [100 - percentage, 0];
            coords[coords.length] = [100, 100];
            coords[coords.length] = [percentage, 100];
        } else {
            coords[coords.length] = [percentage, 0];
            coords[coords.length] = [100, 0];
            coords[coords.length] = [100 - percentage, 100];
            coords[coords.length] = [0, 100];
        }

        return coordsToString(coords);
    }
    
    function pathInvert(clipPath) {
        var coords = stringToCoords(clipPath);
        coords.push(coords[0]);
        coords.push([0, 0]);
        coords.push([100, 0]);
        coords.push([100, 100]);
        coords.push([0, 100]);
        coords.push([0, 0]);
        
        return coordsToString(coords);
    }
    
    function change() {
        var shapeOptions, shapeImage, clipPath;

        shapeOptions = el.getAttribute("shape-options");
        shapeImage = el.getAttribute("shape-image") || false;
        color = el.getAttribute("shape-color") || colour || "transparent";
        clipPath = "";

        el.style.background = color;
        if (shapeImage) {
            el.style.backgroundImage = "url(" + shapeImage + ")";
            el.style.backgroundSize = "100% 100%";
            el.style.backgroundRepeat= "no-repeat";
            that.image = shapeImage.toLowerCase();
        }
        if (shapeOptions || false)
            that.options = shapeOptions.toLowerCase();
        
        that.color = color.toLowerCase();
        that.shape = shape.toLowerCase();
        
        switch (shape.toLowerCase()) {
            case "pentagon":
                clipPath = nSidedPolygon(5);
                break;
            case "hexagon":
                clipPath = nSidedPolygon(6);
                break;
            case "heptagon":
                clipPath = nSidedPolygon(7);
                break;
            case "octagon":
                clipPath = nSidedPolygon(8);
                break;
            case "nonagon":
                clipPath = nSidedPolygon(9);
                break;
            case "decagon":
                clipPath = nSidedPolygon(10);
                break;
            case "polygon":
                clipPath = nSidedPolygon(shapeOptions || 4);
                break;
            case "bevel":
                clipPath = makeBevel(shapeOptions);
                break;
            case "rabbet":
                clipPath = makeRabbet(shapeOptions);
                break;
            case "parallelogram":
                clipPath = makeParallelogram(shapeOptions);
                break;
            case "trapezoid":
                clipPath = makeTrapezoid(shapeOptions);
                break;
            case "rhombus":
                clipPath = "polygon(0 50%, 50% 0%,100% 50%, 50% 100%)";
                break;
            case "arrow":
            case "arrow-up":
                if (shapeOptions || false) {
                    shapeOptions = shapeOptions.split(" ");
                    clipPath = makeArrow(0, shapeOptions[0], shapeOptions[1]);
                } else {
                    clipPath = makeArrow(0);
                }
                break;
            case "arrow-down":
                if (shapeOptions || false) {
                    shapeOptions = shapeOptions.split(" ");
                    clipPath = makeArrow(1, shapeOptions[0], shapeOptions[1]);
                } else {
                    clipPath = makeArrow(1);
                }
                break;
            case "arrow-left":
                if (shapeOptions || false) {
                    shapeOptions = shapeOptions.split(" ");
                    clipPath = makeArrow(2, shapeOptions[0], shapeOptions[1]);
                } else {
                    clipPath = makeArrow(2);
                }
                break;
            case "arrow-right":
                if (shapeOptions || false) {
                    shapeOptions = shapeOptions.split(" ");
                    clipPath = makeArrow(3, shapeOptions[0], shapeOptions[1]);
                } else {
                    clipPath = makeArrow(3);
                }
                break;
            case "chevron":
            case "chevron-up":
                clipPath = makeChevron(0, shapeOptions);
                break;
            case "chevron-down":
                clipPath = makeChevron(1, shapeOptions);
                break;
            case "chevron-left":
                clipPath = makeChevron(2, shapeOptions);
                break;
            case "chevron-right":
                clipPath = makeChevron(3, shapeOptions);
                break;
            case "star":
                if (shapeOptions || false) {
                    shapeOptions = shapeOptions.split(" ");
                    clipPath = makeStar(shapeOptions[0], shapeOptions[1]);
                } else {
                    clipPath = makeStar();
                }
                break;
            case "cross":
                if (shapeOptions || false) {
                    shapeOptions = shapeOptions.split(" ");
                    clipPath = makeCross(shapeOptions[0], shapeOptions[1]);
                } else {
                    clipPath = makeCross();
                }
                break;
            case "circle":
                clipPath = "ellipse(50% 50% at 50% 50%)";
                break;
            case "triangle":
            case "triangle-up":
                clipPath = "polygon(" + (shapeOptions || "50") + "% 0, 0% 100%, 100% 100%)";
                break;
            case "triangle-right":
                clipPath = "polygon(100% " + (shapeOptions || "50") + "%, 0% 100%, 0% 0%)";
                break;
            case "triangle-left":
                clipPath = "polygon(0% " + (shapeOptions || "50") + "%, 100% 0%, 100% 100%)";
                break;
            case "triangle-down":
                clipPath = "polygon(" + (shapeOptions || "50") + "% 100%, 100% 0%, 0% 0%)";
                break;
        }
        
        // clipPath = pathInvert(clipPath);
        
        el.style.clipPath = clipPath;
        el.style.webkitClipPath = clipPath;
    }

    this.element = el;
    this.change = change;
};