diff --git a/src/registrar/assets/js/get-gov-reports.js b/src/registrar/assets/js/get-gov-reports.js
index 403a9c41e..65608ede9 100644
--- a/src/registrar/assets/js/get-gov-reports.js
+++ b/src/registrar/assets/js/get-gov-reports.js
@@ -59,6 +59,80 @@
/** An IIFE to initialize the analytics page
*/
(function () {
+
+ // This code is adapted from here:
+ // https://stackoverflow.com/questions/28569667/fill-chart-js-bar-chart-with-diagonal-stripes-or-other-patterns
+ function createDiagonalPattern(backgroundColor, lineColor="white") {
+ // create a 10x10 px canvas for the pattern's base shape
+ let shape = document.createElement("canvas")
+ shape.width = 20
+ shape.height = 20
+ // get the context for drawing
+ let c = shape.getContext("2d")
+
+ // Fill with specified background color
+ c.fillStyle = backgroundColor
+ c.fillRect(0, 0, shape.width, shape.height)
+
+ // Set stroke properties
+ c.strokeStyle = lineColor
+ c.lineWidth = 2
+
+ // Draw diagonal lines similarly to the patternomaly library
+ c.beginPath()
+
+ // First diagonal line
+ let halfSize = shape.width / 2
+ let gap = 1
+
+ c.moveTo(halfSize - gap, -gap)
+ c.lineTo(shape.width + 1, halfSize + 1)
+
+ // Second diagonal line (offset)
+ c.moveTo(halfSize - gap - halfSize, halfSize - gap)
+ c.lineTo(shape.width + 1 - halfSize, halfSize + 1 + halfSize)
+
+ c.stroke()
+
+ return c.createPattern(shape, "repeat")
+ }
+
+ function createDiagonalRightLeftPattern(backgroundColor, lineColor="white") {
+ // create a 20x20 px canvas for larger pattern repeat
+ let shape = document.createElement("canvas")
+ shape.width = 20
+ shape.height = 20
+ // get the context for drawing
+ let c = shape.getContext("2d")
+
+ // Fill with specified background color
+ c.fillStyle = backgroundColor
+ c.fillRect(0, 0, shape.width, shape.height)
+
+ // Translate and rotate context
+ c.translate(shape.width, 0)
+ c.rotate(90 * Math.PI / 180)
+
+ // Set stroke properties
+ c.strokeStyle = lineColor
+ c.lineWidth = 2
+
+ // First diagonal line
+ let halfSize = shape.width / 2
+ let gap = 1
+
+ c.moveTo(halfSize - gap, -gap)
+ c.lineTo(shape.width + 1, halfSize + 1)
+
+ // Second diagonal line (offset)
+ c.moveTo(halfSize - gap - halfSize, halfSize - gap)
+ c.lineTo(shape.width + 1 - halfSize, halfSize + 1 + halfSize)
+
+ c.stroke()
+
+ return c.createPattern(shape, "repeat")
+ }
+
function createComparativeColumnChart(canvasId, title, labelOne, labelTwo) {
var canvas = document.getElementById(canvasId);
if (!canvas) {
@@ -79,9 +153,7 @@
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1,
data: listOne,
- backgroundColor: [
- pattern.draw('diagonal-right-left', 'rgba(255, 99, 132, 0.3)'),
- ]
+ backgroundColor: createDiagonalRightLeftPattern('rgba(255, 99, 132, 0.3)')
},
{
label: labelTwo,
@@ -89,9 +161,7 @@
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
data: listTwo,
- backgroundColor: [
- pattern.draw('diagonal', 'rgba(75, 192, 192, 0.3)'),
- ]
+ backgroundColor: createDiagonalPattern('rgba(75, 192, 192, 0.3)')
},
],
};
diff --git a/src/registrar/assets/js/patternomaly.js b/src/registrar/assets/js/patternomaly.js
deleted file mode 100644
index e349db0f0..000000000
--- a/src/registrar/assets/js/patternomaly.js
+++ /dev/null
@@ -1,1110 +0,0 @@
-// This file is copied from the patternomaly library for chart.js.
-// This allows us to add patterns for better accessibility for color-blind users.
-// Source: https://github.com/ashiguruma/patternomaly
-
-(function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
- typeof define === 'function' && define.amd ? define(factory) :
- (global.pattern = factory());
-}(this, (function () { 'use strict';
-
-var BACKGROUND_COLOR = 'rgba(100, 100, 100, 0.7)';
-var PATTERN_COLOR = 'rgba(255, 255, 255, 0.8)';
-var POINT_STYLE = 'round';
-
-var asyncGenerator = function () {
- function AwaitValue(value) {
- this.value = value;
- }
-
- function AsyncGenerator(gen) {
- var front, back;
-
- function send(key, arg) {
- return new Promise(function (resolve, reject) {
- var request = {
- key: key,
- arg: arg,
- resolve: resolve,
- reject: reject,
- next: null
- };
-
- if (back) {
- back = back.next = request;
- } else {
- front = back = request;
- resume(key, arg);
- }
- });
- }
-
- function resume(key, arg) {
- try {
- var result = gen[key](arg);
- var value = result.value;
-
- if (value instanceof AwaitValue) {
- Promise.resolve(value.value).then(function (arg) {
- resume("next", arg);
- }, function (arg) {
- resume("throw", arg);
- });
- } else {
- settle(result.done ? "return" : "normal", result.value);
- }
- } catch (err) {
- settle("throw", err);
- }
- }
-
- function settle(type, value) {
- switch (type) {
- case "return":
- front.resolve({
- value: value,
- done: true
- });
- break;
-
- case "throw":
- front.reject(value);
- break;
-
- default:
- front.resolve({
- value: value,
- done: false
- });
- break;
- }
-
- front = front.next;
-
- if (front) {
- resume(front.key, front.arg);
- } else {
- back = null;
- }
- }
-
- this._invoke = send;
-
- if (typeof gen.return !== "function") {
- this.return = undefined;
- }
- }
-
- if (typeof Symbol === "function" && Symbol.asyncIterator) {
- AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
- return this;
- };
- }
-
- AsyncGenerator.prototype.next = function (arg) {
- return this._invoke("next", arg);
- };
-
- AsyncGenerator.prototype.throw = function (arg) {
- return this._invoke("throw", arg);
- };
-
- AsyncGenerator.prototype.return = function (arg) {
- return this._invoke("return", arg);
- };
-
- return {
- wrap: function (fn) {
- return function () {
- return new AsyncGenerator(fn.apply(this, arguments));
- };
- },
- await: function (value) {
- return new AwaitValue(value);
- }
- };
-}();
-
-var classCallCheck = function (instance, Constructor) {
- if (!(instance instanceof Constructor)) {
- throw new TypeError("Cannot call a class as a function");
- }
-};
-
-var createClass = function () {
- function defineProperties(target, props) {
- for (var i = 0; i < props.length; i++) {
- var descriptor = props[i];
- descriptor.enumerable = descriptor.enumerable || false;
- descriptor.configurable = true;
- if ("value" in descriptor) descriptor.writable = true;
- Object.defineProperty(target, descriptor.key, descriptor);
- }
- }
-
- return function (Constructor, protoProps, staticProps) {
- if (protoProps) defineProperties(Constructor.prototype, protoProps);
- if (staticProps) defineProperties(Constructor, staticProps);
- return Constructor;
- };
-}();
-
-var _extends = Object.assign || function (target) {
- for (var i = 1; i < arguments.length; i++) {
- var source = arguments[i];
-
- for (var key in source) {
- if (Object.prototype.hasOwnProperty.call(source, key)) {
- target[key] = source[key];
- }
- }
- }
-
- return target;
-};
-
-var inherits = function (subClass, superClass) {
- if (typeof superClass !== "function" && superClass !== null) {
- throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
- }
-
- subClass.prototype = Object.create(superClass && superClass.prototype, {
- constructor: {
- value: subClass,
- enumerable: false,
- writable: true,
- configurable: true
- }
- });
- if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
- if (!self) {
- throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
- }
-
- return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var Shape = function () {
- function Shape() {
- var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
- var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BACKGROUND_COLOR;
- var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : PATTERN_COLOR;
- classCallCheck(this, Shape);
-
- this._canvas = document.createElement('canvas');
- this._context = this._canvas.getContext('2d');
-
- this._canvas.width = size;
- this._canvas.height = size;
-
- this._context.fillStyle = backgroundColor;
- this._context.fillRect(0, 0, this._canvas.width, this._canvas.height);
-
- this._size = size;
- this._patternColor = patternColor;
-
- return this;
- }
-
- createClass(Shape, [{
- key: 'setStrokeProps',
- value: function setStrokeProps() {
- this._context.strokeStyle = this._patternColor;
- this._context.lineWidth = this._size / 10;
- this._context.lineJoin = POINT_STYLE;
- this._context.lineCap = POINT_STYLE;
- }
- }, {
- key: 'setFillProps',
- value: function setFillProps() {
- this._context.fillStyle = this._patternColor;
- }
- }]);
- return Shape;
-}();
-
-var Plus = function (_Shape) {
- inherits(Plus, _Shape);
-
- function Plus() {
- classCallCheck(this, Plus);
- return possibleConstructorReturn(this, (Plus.__proto__ || Object.getPrototypeOf(Plus)).apply(this, arguments));
- }
-
- createClass(Plus, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawPlus();
- this.drawPlus(halfSize, halfSize);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawPlus',
- value: function drawPlus() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2;
- var quarterSize = size / 4;
-
- this._context.moveTo(quarterSize + offsetX, 0 + offsetY);
- this._context.lineTo(quarterSize + offsetX, halfSize + offsetY);
- this._context.moveTo(0 + offsetX, quarterSize + offsetY);
- this._context.lineTo(halfSize + offsetX, quarterSize + offsetY);
-
- this._context.closePath();
- }
- }]);
- return Plus;
-}(Shape);
-
-var Cross = function (_Shape) {
- inherits(Cross, _Shape);
-
- function Cross() {
- classCallCheck(this, Cross);
- return possibleConstructorReturn(this, (Cross.__proto__ || Object.getPrototypeOf(Cross)).apply(this, arguments));
- }
-
- createClass(Cross, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawCross();
- this.drawCross(halfSize, halfSize);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawCross',
- value: function drawCross() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2;
- var gap = 2;
-
- this._context.moveTo(offsetX + gap, offsetY + gap);
- this._context.lineTo(halfSize - gap + offsetX, halfSize - gap + offsetY);
- this._context.moveTo(offsetX + gap, halfSize - gap + offsetY);
- this._context.lineTo(halfSize - gap + offsetX, offsetY + gap);
-
- this._context.closePath();
- }
- }]);
- return Cross;
-}(Shape);
-
-var Dash = function (_Shape) {
- inherits(Dash, _Shape);
-
- function Dash() {
- classCallCheck(this, Dash);
- return possibleConstructorReturn(this, (Dash.__proto__ || Object.getPrototypeOf(Dash)).apply(this, arguments));
- }
-
- createClass(Dash, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawDash();
- this.drawDash(halfSize, halfSize);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawDash',
- value: function drawDash() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2;
- var gap = 2;
-
- this._context.moveTo(offsetX + gap, offsetY + gap);
- this._context.lineTo(halfSize - gap + offsetX, halfSize - gap + offsetY);
-
- this._context.closePath();
- }
- }]);
- return Dash;
-}(Shape);
-
-var CrossDash = function (_Shape) {
- inherits(CrossDash, _Shape);
-
- function CrossDash() {
- classCallCheck(this, CrossDash);
- return possibleConstructorReturn(this, (CrossDash.__proto__ || Object.getPrototypeOf(CrossDash)).apply(this, arguments));
- }
-
- createClass(CrossDash, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
- this._context.beginPath();
-
- this.setStrokeProps();
-
- var cross = new Cross();
- cross.drawCross.call(this);
-
- var dash = new Dash();
- dash.drawDash.call(this, halfSize, halfSize);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }]);
- return CrossDash;
-}(Shape);
-
-var Dot = function (_Shape) {
- inherits(Dot, _Shape);
-
- function Dot() {
- classCallCheck(this, Dot);
- return possibleConstructorReturn(this, (Dot.__proto__ || Object.getPrototypeOf(Dot)).apply(this, arguments));
- }
-
- createClass(Dot, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setFillProps();
-
- this.drawDot();
- this.drawDot(halfSize, halfSize);
-
- this._context.fill();
-
- return this._canvas;
- }
- }, {
- key: 'drawDot',
- value: function drawDot() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
- var diameter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this._size / 10;
-
- var size = this._size;
- var quarterSize = size / 4;
- var x = quarterSize + offsetX;
- var y = quarterSize + offsetY;
-
- this._context.moveTo(x + quarterSize, y);
- this._context.arc(x, y, diameter, 0, 2 * Math.PI);
-
- this._context.closePath();
- }
- }]);
- return Dot;
-}(Shape);
-
-var DotDash = function (_Shape) {
- inherits(DotDash, _Shape);
-
- function DotDash() {
- classCallCheck(this, DotDash);
- return possibleConstructorReturn(this, (DotDash.__proto__ || Object.getPrototypeOf(DotDash)).apply(this, arguments));
- }
-
- createClass(DotDash, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- var dash = new Dash();
- dash.drawDash.call(this, halfSize, halfSize);
-
- this._context.closePath();
- this._context.stroke();
-
- this.setFillProps();
-
- var dot = new Dot();
- dot.drawDot.call(this);
-
- this._context.fill();
-
- return this._canvas;
- }
- }]);
- return DotDash;
-}(Shape);
-
-var Disc = function (_Dot) {
- inherits(Disc, _Dot);
-
- function Disc() {
- classCallCheck(this, Disc);
- return possibleConstructorReturn(this, (Disc.__proto__ || Object.getPrototypeOf(Disc)).apply(this, arguments));
- }
-
- createClass(Disc, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
- var diameter = this._size / 5;
-
- this._context.beginPath();
-
- this.setFillProps();
-
- this.drawDot(0, 0, diameter);
- this.drawDot(halfSize, halfSize, diameter);
-
- this._context.fill();
-
- return this._canvas;
- }
- }]);
- return Disc;
-}(Dot);
-
-var Ring = function (_Dot) {
- inherits(Ring, _Dot);
-
- function Ring() {
- classCallCheck(this, Ring);
- return possibleConstructorReturn(this, (Ring.__proto__ || Object.getPrototypeOf(Ring)).apply(this, arguments));
- }
-
- createClass(Ring, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
- var diameter = this._size / 5;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawDot(0, 0, diameter);
- this.drawDot(halfSize, halfSize, diameter);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }]);
- return Ring;
-}(Dot);
-
-var Line = function (_Shape) {
- inherits(Line, _Shape);
-
- function Line() {
- classCallCheck(this, Line);
- return possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).apply(this, arguments));
- }
-
- createClass(Line, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawLine();
- this.drawLine(halfSize, halfSize);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawLine',
- value: function drawLine() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var quarterSize = size / 4;
-
- this._context.moveTo(0, quarterSize + offsetY);
- this._context.lineTo(this._size, quarterSize + offsetY);
-
- this._context.closePath();
- }
- }]);
- return Line;
-}(Shape);
-
-var VerticalLine = function (_Line) {
- inherits(VerticalLine, _Line);
-
- function VerticalLine() {
- classCallCheck(this, VerticalLine);
- return possibleConstructorReturn(this, (VerticalLine.__proto__ || Object.getPrototypeOf(VerticalLine)).apply(this, arguments));
- }
-
- createClass(VerticalLine, [{
- key: 'drawTile',
- value: function drawTile() {
- this._context.translate(this._size, 0);
- this._context.rotate(90 * Math.PI / 180);
-
- Line.prototype.drawTile.call(this);
-
- return this._canvas;
- }
- }]);
- return VerticalLine;
-}(Line);
-
-var Weave = function (_Shape) {
- inherits(Weave, _Shape);
-
- function Weave() {
- classCallCheck(this, Weave);
- return possibleConstructorReturn(this, (Weave.__proto__ || Object.getPrototypeOf(Weave)).apply(this, arguments));
- }
-
- createClass(Weave, [{
- key: 'drawTile',
- value: function drawTile() {
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawWeave(0, 0);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawWeave',
- value: function drawWeave(offsetX, offsetY) {
- var size = this._size;
- var halfSize = size / 2;
-
- this._context.moveTo(offsetX + 1, offsetY + 1);
- this._context.lineTo(halfSize - 1, halfSize - 1);
-
- this._context.moveTo(halfSize + 1, size - 1);
- this._context.lineTo(size - 1, halfSize + 1);
-
- this._context.closePath();
- }
- }]);
- return Weave;
-}(Shape);
-
-var Zigzag = function (_Shape) {
- inherits(Zigzag, _Shape);
-
- function Zigzag() {
- classCallCheck(this, Zigzag);
- return possibleConstructorReturn(this, (Zigzag.__proto__ || Object.getPrototypeOf(Zigzag)).apply(this, arguments));
- }
-
- createClass(Zigzag, [{
- key: 'drawTile',
- value: function drawTile() {
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawZigzag();
- this.drawZigzag(this._size / 2);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawZigzag',
- value: function drawZigzag() {
- var offsetY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
- var size = this._size;
- var quarterSize = size / 4;
- var halfSize = size / 2;
- var tenthSize = size / 10;
-
- this._context.moveTo(0, tenthSize + offsetY);
- this._context.lineTo(quarterSize, halfSize - tenthSize + offsetY);
- this._context.lineTo(halfSize, tenthSize + offsetY);
- this._context.lineTo(size - quarterSize, halfSize - tenthSize + offsetY);
- this._context.lineTo(size, tenthSize + offsetY);
- }
- }]);
- return Zigzag;
-}(Shape);
-
-var ZigzagVertical = function (_Zigzag) {
- inherits(ZigzagVertical, _Zigzag);
-
- function ZigzagVertical() {
- classCallCheck(this, ZigzagVertical);
- return possibleConstructorReturn(this, (ZigzagVertical.__proto__ || Object.getPrototypeOf(ZigzagVertical)).apply(this, arguments));
- }
-
- createClass(ZigzagVertical, [{
- key: 'drawTile',
- value: function drawTile() {
- this._context.translate(this._size, 0);
- this._context.rotate(90 * Math.PI / 180);
-
- Zigzag.prototype.drawTile.call(this);
-
- return this._canvas;
- }
- }]);
- return ZigzagVertical;
-}(Zigzag);
-
-var Diagonal = function (_Shape) {
- inherits(Diagonal, _Shape);
-
- function Diagonal() {
- classCallCheck(this, Diagonal);
- return possibleConstructorReturn(this, (Diagonal.__proto__ || Object.getPrototypeOf(Diagonal)).apply(this, arguments));
- }
-
- createClass(Diagonal, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawDiagonalLine();
- this.drawDiagonalLine(halfSize, halfSize);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawDiagonalLine',
- value: function drawDiagonalLine() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2;
- var gap = 1;
-
- this._context.moveTo(halfSize - gap - offsetX, gap * -1 + offsetY);
- this._context.lineTo(size + 1 - offsetX, halfSize + 1 + offsetY);
-
- this._context.closePath();
- }
- }]);
- return Diagonal;
-}(Shape);
-
-var DiagonalRightLeft = function (_Diagonal) {
- inherits(DiagonalRightLeft, _Diagonal);
-
- function DiagonalRightLeft() {
- classCallCheck(this, DiagonalRightLeft);
- return possibleConstructorReturn(this, (DiagonalRightLeft.__proto__ || Object.getPrototypeOf(DiagonalRightLeft)).apply(this, arguments));
- }
-
- createClass(DiagonalRightLeft, [{
- key: 'drawTile',
- value: function drawTile() {
- this._context.translate(this._size, 0);
- this._context.rotate(90 * Math.PI / 180);
-
- Diagonal.prototype.drawTile.call(this);
-
- return this._canvas;
- }
- }]);
- return DiagonalRightLeft;
-}(Diagonal);
-
-var Square = function (_Shape) {
- inherits(Square, _Shape);
-
- function Square() {
- classCallCheck(this, Square);
- return possibleConstructorReturn(this, (Square.__proto__ || Object.getPrototypeOf(Square)).apply(this, arguments));
- }
-
- createClass(Square, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setFillProps();
-
- this.drawSquare();
- this.drawSquare(halfSize, halfSize);
-
- this._context.fill();
-
- return this._canvas;
- }
- }, {
- key: 'drawSquare',
- value: function drawSquare() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2;
- var gap = size / 20;
-
- this._context.fillRect(offsetX + gap, offsetY + gap, halfSize - gap * 2, halfSize - gap * 2);
-
- this._context.closePath();
- }
- }]);
- return Square;
-}(Shape);
-
-var Box = function (_Shape) {
- inherits(Box, _Shape);
-
- function Box() {
- classCallCheck(this, Box);
- return possibleConstructorReturn(this, (Box.__proto__ || Object.getPrototypeOf(Box)).apply(this, arguments));
- }
-
- createClass(Box, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawBox();
- this.drawBox(halfSize, halfSize);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawBox',
- value: function drawBox() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2;
- var gap = size / 20;
-
- this._context.strokeRect(offsetX + gap, offsetY + gap, halfSize - gap * 4, halfSize - gap * 4);
-
- this._context.closePath();
- }
- }]);
- return Box;
-}(Shape);
-
-var Triangle = function (_Shape) {
- inherits(Triangle, _Shape);
-
- function Triangle() {
- classCallCheck(this, Triangle);
- return possibleConstructorReturn(this, (Triangle.__proto__ || Object.getPrototypeOf(Triangle)).apply(this, arguments));
- }
-
- createClass(Triangle, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setFillProps();
-
- this.drawTriangle();
- this.drawTriangle(halfSize, halfSize);
-
- this._context.fill();
-
- return this._canvas;
- }
- }, {
- key: 'drawTriangle',
- value: function drawTriangle() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2;
- var quarterSize = size / 4;
-
- this._context.moveTo(quarterSize + offsetX, offsetY);
- this._context.lineTo(halfSize + offsetX, halfSize + offsetY);
- this._context.lineTo(offsetX, halfSize + offsetY);
-
- this._context.closePath();
- }
- }]);
- return Triangle;
-}(Shape);
-
-var TriangleVertical = function (_Triangle) {
- inherits(TriangleVertical, _Triangle);
-
- function TriangleVertical() {
- classCallCheck(this, TriangleVertical);
- return possibleConstructorReturn(this, (TriangleVertical.__proto__ || Object.getPrototypeOf(TriangleVertical)).apply(this, arguments));
- }
-
- createClass(TriangleVertical, [{
- key: 'drawTile',
- value: function drawTile() {
- var size = this._size;
-
- this._context.translate(size, size);
- this._context.rotate(180 * Math.PI / 180);
-
- Triangle.prototype.drawTile.call(this);
-
- return this._canvas;
- }
- }]);
- return TriangleVertical;
-}(Triangle);
-
-var Diamond = function (_Shape) {
- inherits(Diamond, _Shape);
-
- function Diamond() {
- classCallCheck(this, Diamond);
- return possibleConstructorReturn(this, (Diamond.__proto__ || Object.getPrototypeOf(Diamond)).apply(this, arguments));
- }
-
- createClass(Diamond, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setFillProps();
-
- this.drawDiamond();
- this.drawDiamond(halfSize, halfSize);
-
- this._context.fill();
-
- return this._canvas;
- }
- }, {
- key: 'drawDiamond',
- value: function drawDiamond() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2;
- var quarterSize = size / 4;
-
- this._context.moveTo(quarterSize + offsetX, offsetY);
- this._context.lineTo(halfSize + offsetX, quarterSize + offsetY);
- this._context.lineTo(quarterSize + offsetX, halfSize + offsetY);
- this._context.lineTo(offsetX, quarterSize + offsetY);
-
- this._context.closePath();
- }
- }]);
- return Diamond;
-}(Shape);
-
-var DiamondBox = function (_Diamond) {
- inherits(DiamondBox, _Diamond);
-
- function DiamondBox() {
- classCallCheck(this, DiamondBox);
- return possibleConstructorReturn(this, (DiamondBox.__proto__ || Object.getPrototypeOf(DiamondBox)).apply(this, arguments));
- }
-
- createClass(DiamondBox, [{
- key: 'drawTile',
- value: function drawTile() {
- var halfSize = this._size / 2;
-
- this._context.beginPath();
-
- this.setStrokeProps();
-
- this.drawDiamond();
- this.drawDiamond(halfSize, halfSize);
-
- this._context.stroke();
-
- return this._canvas;
- }
- }, {
- key: 'drawDiamond',
- value: function drawDiamond() {
- var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
- var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var size = this._size;
- var halfSize = size / 2 - 1;
- var quarterSize = size / 4;
-
- this._context.moveTo(quarterSize + offsetX, offsetY + 1);
- this._context.lineTo(halfSize + offsetX, quarterSize + offsetY);
- this._context.lineTo(quarterSize + offsetX, halfSize + offsetY);
- this._context.lineTo(offsetX + 1, quarterSize + offsetY);
-
- this._context.closePath();
- }
- }]);
- return DiamondBox;
-}(Diamond);
-
-var shapes = {
- 'plus': Plus,
- 'cross': Cross,
- 'dash': Dash,
- 'cross-dash': CrossDash,
- 'dot': Dot,
- 'dot-dash': DotDash,
- 'disc': Disc,
- 'ring': Ring,
- 'line': Line,
- 'line-vertical': VerticalLine,
- 'weave': Weave,
- 'zigzag': Zigzag,
- 'zigzag-vertical': ZigzagVertical,
- 'diagonal': Diagonal,
- 'diagonal-right-left': DiagonalRightLeft,
- 'square': Square,
- 'box': Box,
- 'triangle': Triangle,
- 'triangle-inverted': TriangleVertical,
- 'diamond': Diamond,
- 'diamond-box': DiamondBox
-};
-
-var deprecatedShapes = {
- 'circle': shapes['disc'],
- 'triangle-vertical': shapes['triangle-inverted'],
- 'line-horizontal': shapes['line'],
- 'line-diagonal-lr': shapes['diagonal'],
- 'line-diagonal-rl': shapes['diagonal-right-left'],
- 'zigzag-horizontal': shapes['zigzag'],
- 'diamond-outline': shapes['diamond-box']
-};
-
-var completeShapesList = [];
-
-function getRandomShape() {
- var excludedShapeTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
- var shapesList = Object.keys(shapes);
-
- excludedShapeTypes.forEach(function (shapeType) {
- shapesList.splice(shapesList.indexOf(shapeType), 1);
- });
-
- var randomIndex = Math.floor(Math.random() * shapesList.length);
-
- return shapesList[randomIndex];
-}
-
-_extends(completeShapesList, shapes, deprecatedShapes);
-
-function draw() {
- var shapeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'square';
- var backgroundColor = arguments[1];
- var patternColor = arguments[2];
- var size = arguments[3];
-
- var patternCanvas = document.createElement('canvas');
- var patternContext = patternCanvas.getContext('2d');
- var outerSize = size * 2;
-
- var Shape = completeShapesList[shapeType];
- var shape = new Shape(size, backgroundColor, patternColor);
-
- var pattern = patternContext.createPattern(shape.drawTile(), 'repeat');
-
- patternCanvas.width = outerSize;
- patternCanvas.height = outerSize;
-
- pattern.shapeType = shapeType;
-
- return pattern;
-}
-
-function generate(colorList) {
- var firstShapeType = void 0;
- var previousShapeType = void 0;
-
- return colorList.map(function (color, index, list) {
- var shapeType = void 0;
-
- if (index === 0) {
- shapeType = getRandomShape();
- previousShapeType = shapeType;
- firstShapeType = previousShapeType;
- } else if (index === list.length - 1) {
- shapeType = getRandomShape([previousShapeType, firstShapeType]);
- } else {
- shapeType = getRandomShape([previousShapeType]);
- previousShapeType = shapeType;
- }
-
- return draw(shapeType, color);
- });
-}
-
-var pattern = {
- draw: draw,
- generate: generate
-};
-
-return pattern;
-
-})));
-//# sourceMappingURL=patternomaly.js.map
diff --git a/src/registrar/templates/admin/base_site.html b/src/registrar/templates/admin/base_site.html
index d7c43647a..b80917bb2 100644
--- a/src/registrar/templates/admin/base_site.html
+++ b/src/registrar/templates/admin/base_site.html
@@ -23,7 +23,6 @@
-
{% endblock %}