Created
November 28, 2017 22:32
-
-
Save scagood/1bef5aadcf5925273b3ad340c1c3b9d0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"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; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment