@flourish/header - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0-alpha1

header.js

@@ -7,608 +7,98 @@ (function (global, factory) {
 
-var define = function(constructor, factory, prototype) {
-  constructor.prototype = factory.prototype = prototype;
-  prototype.constructor = constructor;
-};
+	var styles_appended = false;
 
-function extend(parent, definition) {
-  var prototype = Object.create(parent.prototype);
-  for (var key in definition) prototype[key] = definition[key];
-  return prototype;
-}
+	var DEFAULTS = {
+		align: "left",
 
-function Color() {}
+		title: "",
+		title_size: 1.6,
+		title_size_custom: 1.6,
+		title_color: "#333333",
+		title_weight: "bold",
 
-var darker = 0.7;
-var brighter = 1 / darker;
+		subtitle: "",
+		subtitle_size: 1.6,
+		subtitle_size_custom: 1.6,
+		subtitle_color: "#666666",
+		subtitle_weight: "normal",
 
-var reI = "\\s*([+-]?\\d+)\\s*";
-var reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*";
-var reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*";
-var reHex3 = /^#([0-9a-f]{3})$/;
-var reHex6 = /^#([0-9a-f]{6})$/;
-var reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$");
-var reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$");
-var reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$");
-var reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$");
-var reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$");
-var reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
+		text: "",
+		text_size: 1.2,
+		text_size_custom: 1.2,
+		text_color: "#666666",
+		text_weight: "normal",
+	};
 
-var named = {
-  aliceblue: 0xf0f8ff,
-  antiquewhite: 0xfaebd7,
-  aqua: 0x00ffff,
-  aquamarine: 0x7fffd4,
-  azure: 0xf0ffff,
-  beige: 0xf5f5dc,
-  bisque: 0xffe4c4,
-  black: 0x000000,
-  blanchedalmond: 0xffebcd,
-  blue: 0x0000ff,
-  blueviolet: 0x8a2be2,
-  brown: 0xa52a2a,
-  burlywood: 0xdeb887,
-  cadetblue: 0x5f9ea0,
-  chartreuse: 0x7fff00,
-  chocolate: 0xd2691e,
-  coral: 0xff7f50,
-  cornflowerblue: 0x6495ed,
-  cornsilk: 0xfff8dc,
-  crimson: 0xdc143c,
-  cyan: 0x00ffff,
-  darkblue: 0x00008b,
-  darkcyan: 0x008b8b,
-  darkgoldenrod: 0xb8860b,
-  darkgray: 0xa9a9a9,
-  darkgreen: 0x006400,
-  darkgrey: 0xa9a9a9,
-  darkkhaki: 0xbdb76b,
-  darkmagenta: 0x8b008b,
-  darkolivegreen: 0x556b2f,
-  darkorange: 0xff8c00,
-  darkorchid: 0x9932cc,
-  darkred: 0x8b0000,
-  darksalmon: 0xe9967a,
-  darkseagreen: 0x8fbc8f,
-  darkslateblue: 0x483d8b,
-  darkslategray: 0x2f4f4f,
-  darkslategrey: 0x2f4f4f,
-  darkturquoise: 0x00ced1,
-  darkviolet: 0x9400d3,
-  deeppink: 0xff1493,
-  deepskyblue: 0x00bfff,
-  dimgray: 0x696969,
-  dimgrey: 0x696969,
-  dodgerblue: 0x1e90ff,
-  firebrick: 0xb22222,
-  floralwhite: 0xfffaf0,
-  forestgreen: 0x228b22,
-  fuchsia: 0xff00ff,
-  gainsboro: 0xdcdcdc,
-  ghostwhite: 0xf8f8ff,
-  gold: 0xffd700,
-  goldenrod: 0xdaa520,
-  gray: 0x808080,
-  green: 0x008000,
-  greenyellow: 0xadff2f,
-  grey: 0x808080,
-  honeydew: 0xf0fff0,
-  hotpink: 0xff69b4,
-  indianred: 0xcd5c5c,
-  indigo: 0x4b0082,
-  ivory: 0xfffff0,
-  khaki: 0xf0e68c,
-  lavender: 0xe6e6fa,
-  lavenderblush: 0xfff0f5,
-  lawngreen: 0x7cfc00,
-  lemonchiffon: 0xfffacd,
-  lightblue: 0xadd8e6,
-  lightcoral: 0xf08080,
-  lightcyan: 0xe0ffff,
-  lightgoldenrodyellow: 0xfafad2,
-  lightgray: 0xd3d3d3,
-  lightgreen: 0x90ee90,
-  lightgrey: 0xd3d3d3,
-  lightpink: 0xffb6c1,
-  lightsalmon: 0xffa07a,
-  lightseagreen: 0x20b2aa,
-  lightskyblue: 0x87cefa,
-  lightslategray: 0x778899,
-  lightslategrey: 0x778899,
-  lightsteelblue: 0xb0c4de,
-  lightyellow: 0xffffe0,
-  lime: 0x00ff00,
-  limegreen: 0x32cd32,
-  linen: 0xfaf0e6,
-  magenta: 0xff00ff,
-  maroon: 0x800000,
-  mediumaquamarine: 0x66cdaa,
-  mediumblue: 0x0000cd,
-  mediumorchid: 0xba55d3,
-  mediumpurple: 0x9370db,
-  mediumseagreen: 0x3cb371,
-  mediumslateblue: 0x7b68ee,
-  mediumspringgreen: 0x00fa9a,
-  mediumturquoise: 0x48d1cc,
-  mediumvioletred: 0xc71585,
-  midnightblue: 0x191970,
-  mintcream: 0xf5fffa,
-  mistyrose: 0xffe4e1,
-  moccasin: 0xffe4b5,
-  navajowhite: 0xffdead,
-  navy: 0x000080,
-  oldlace: 0xfdf5e6,
-  olive: 0x808000,
-  olivedrab: 0x6b8e23,
-  orange: 0xffa500,
-  orangered: 0xff4500,
-  orchid: 0xda70d6,
-  palegoldenrod: 0xeee8aa,
-  palegreen: 0x98fb98,
-  paleturquoise: 0xafeeee,
-  palevioletred: 0xdb7093,
-  papayawhip: 0xffefd5,
-  peachpuff: 0xffdab9,
-  peru: 0xcd853f,
-  pink: 0xffc0cb,
-  plum: 0xdda0dd,
-  powderblue: 0xb0e0e6,
-  purple: 0x800080,
-  rebeccapurple: 0x663399,
-  red: 0xff0000,
-  rosybrown: 0xbc8f8f,
-  royalblue: 0x4169e1,
-  saddlebrown: 0x8b4513,
-  salmon: 0xfa8072,
-  sandybrown: 0xf4a460,
-  seagreen: 0x2e8b57,
-  seashell: 0xfff5ee,
-  sienna: 0xa0522d,
-  silver: 0xc0c0c0,
-  skyblue: 0x87ceeb,
-  slateblue: 0x6a5acd,
-  slategray: 0x708090,
-  slategrey: 0x708090,
-  snow: 0xfffafa,
-  springgreen: 0x00ff7f,
-  steelblue: 0x4682b4,
-  tan: 0xd2b48c,
-  teal: 0x008080,
-  thistle: 0xd8bfd8,
-  tomato: 0xff6347,
-  turquoise: 0x40e0d0,
-  violet: 0xee82ee,
-  wheat: 0xf5deb3,
-  white: 0xffffff,
-  whitesmoke: 0xf5f5f5,
-  yellow: 0xffff00,
-  yellowgreen: 0x9acd32
-};
+	function appendStyles() {
+		if (styles_appended) return;
+		var css = document.createElement("style");
+		css.type = "text/css";
+		css.innerHTML = ".flourish-header, .flourish-header h1, .flourish-header h2, .flourish-header p { margin: 0; }";
+		document.head.appendChild(css);
+		styles_appended = true;
+	}
 
-define(Color, color, {
-  displayable: function() {
-    return this.rgb().displayable();
-  },
-  hex: function() {
-    return this.rgb().hex();
-  },
-  toString: function() {
-    return this.rgb() + "";
-  }
-});
+	function updateHeaderMargins(state) {
+		if (!state.title && !state.subtitle) return null;
+		else if (state.text) return (state.text_size != "custom" ? state.text_size/2 : state.text_size_custom/2) + "rem";
+		else if (state.subtitle) return (state.subtitle_size != "custom" ? state.subtitle_size/2 : state.subtitle_size_custom/2) + "rem";
+		else if (state.title) return (state.title_size != "custom" ? state.title_size/2 : state.title_size_custom/2) + "rem";
+	}
 
-function color(format) {
-  var m;
-  format = (format + "").trim().toLowerCase();
-  return (m = reHex3.exec(format)) ? (m = parseInt(m[1], 16), new Rgb((m >> 8 & 0xf) | (m >> 4 & 0x0f0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1)) // #f00
-      : (m = reHex6.exec(format)) ? rgbn(parseInt(m[1], 16)) // #ff0000
-      : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
-      : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
-      : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
-      : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
-      : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
-      : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
-      : named.hasOwnProperty(format) ? rgbn(named[format])
-      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
-      : null;
-}
 
-function rgbn(n) {
-  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
-}
+	function init(state) {
+		appendStyles();
+		for (var key in DEFAULTS) {
+			if (state[key] === undefined) state[key] = DEFAULTS[key];
+		}
 
-function rgba(r, g, b, a) {
-  if (a <= 0) r = g = b = NaN;
-  return new Rgb(r, g, b, a);
-}
+		var header_el = document.createElement("header");
+		header_el.className = "flourish-header";
 
-function rgbConvert(o) {
-  if (!(o instanceof Color)) o = color(o);
-  if (!o) return new Rgb;
-  o = o.rgb();
-  return new Rgb(o.r, o.g, o.b, o.opacity);
-}
+		var hgroup_el = document.createElement("hgroup");
+		var title_el = document.createElement("h1");
+		var subtitle_el = document.createElement("h2");
+		var text_el = document.createElement("p");
 
-function rgb(r, g, b, opacity) {
-  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
-}
+		header_el.appendChild(hgroup_el);
+		hgroup_el.appendChild(title_el);
+		hgroup_el.appendChild(subtitle_el);
+		header_el.appendChild(text_el);
 
-function Rgb(r, g, b, opacity) {
-  this.r = +r;
-  this.g = +g;
-  this.b = +b;
-  this.opacity = +opacity;
-}
+		var update = function() {
+			header_el.style.textAlign = state.align;
+			header_el.style.paddingBottom = updateHeaderMargins(state);
 
-define(Rgb, rgb, extend(Color, {
-  brighter: function(k) {
-    k = k == null ? brighter : Math.pow(brighter, k);
-    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-  },
-  darker: function(k) {
-    k = k == null ? darker : Math.pow(darker, k);
-    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-  },
-  rgb: function() {
-    return this;
-  },
-  displayable: function() {
-    return (0 <= this.r && this.r <= 255)
-        && (0 <= this.g && this.g <= 255)
-        && (0 <= this.b && this.b <= 255)
-        && (0 <= this.opacity && this.opacity <= 1);
-  },
-  hex: function() {
-    return "#" + hex(this.r) + hex(this.g) + hex(this.b);
-  },
-  toString: function() {
-    var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-    return (a === 1 ? "rgb(" : "rgba(")
-        + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
-        + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
-        + Math.max(0, Math.min(255, Math.round(this.b) || 0))
-        + (a === 1 ? ")" : ", " + a + ")");
-  }
-}));
+			title_el.innerHTML = state.title ? state.title : "";
+			title_el.style.fontSize = (state.title_size != "custom" ? state.title_size : state.title_size_custom) + "rem";
+			title_el.style.fontWeight = state.title_weight;
+			title_el.style.color = state.title_color;
+			title_el.style.padding = !state.title ? 0 : null;
 
-function hex(value) {
-  value = Math.max(0, Math.min(255, Math.round(value) || 0));
-  return (value < 16 ? "0" : "") + value.toString(16);
-}
+			subtitle_el.innerHTML = state.subtitle ? state.subtitle : "";
+			subtitle_el.style.fontSize = (state.subtitle_size != "custom" ? state.subtitle_size : state.subtitle_size_custom) + "rem";
+			subtitle_el.style.fontWeight = state.subtitle_weight;
+			subtitle_el.style.color = state.subtitle_color;
+			subtitle_el.style.padding = !state.subtitle ? 0 : null;
 
-function hsla(h, s, l, a) {
-  if (a <= 0) h = s = l = NaN;
-  else if (l <= 0 || l >= 1) h = s = NaN;
-  else if (s <= 0) h = NaN;
-  return new Hsl(h, s, l, a);
-}
+			text_el.innerHTML = state.text ? state.text : "";
+			text_el.style.fontSize = (state.text_size != "custom" ? state.text_size : state.text_size_custom) + "rem";
+			text_el.style.fontWeight = state.text_weight;
+			text_el.style.color = state.text_color;
+			text_el.style.padding = !state.text ? 0 : (state.title || state.subtitle ? "1em 0 0" : null);
+		};
 
-function hslConvert(o) {
-  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Color)) o = color(o);
-  if (!o) return new Hsl;
-  if (o instanceof Hsl) return o;
-  o = o.rgb();
-  var r = o.r / 255,
-      g = o.g / 255,
-      b = o.b / 255,
-      min = Math.min(r, g, b),
-      max = Math.max(r, g, b),
-      h = NaN,
-      s = max - min,
-      l = (max + min) / 2;
-  if (s) {
-    if (r === max) h = (g - b) / s + (g < b) * 6;
-    else if (g === max) h = (b - r) / s + 2;
-    else h = (r - g) / s + 4;
-    s /= l < 0.5 ? max + min : 2 - max - min;
-    h *= 60;
-  } else {
-    s = l > 0 && l < 1 ? 0 : h;
-  }
-  return new Hsl(h, s, l, o.opacity);
-}
+		var getHeight = function() {
+			return header_el.getBoundingClientRect().height;
+		};
 
-function hsl(h, s, l, opacity) {
-  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
-}
-
-function Hsl(h, s, l, opacity) {
-  this.h = +h;
-  this.s = +s;
-  this.l = +l;
-  this.opacity = +opacity;
-}
-
-define(Hsl, hsl, extend(Color, {
-  brighter: function(k) {
-    k = k == null ? brighter : Math.pow(brighter, k);
-    return new Hsl(this.h, this.s, this.l * k, this.opacity);
-  },
-  darker: function(k) {
-    k = k == null ? darker : Math.pow(darker, k);
-    return new Hsl(this.h, this.s, this.l * k, this.opacity);
-  },
-  rgb: function() {
-    var h = this.h % 360 + (this.h < 0) * 360,
-        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
-        l = this.l,
-        m2 = l + (l < 0.5 ? l : 1 - l) * s,
-        m1 = 2 * l - m2;
-    return new Rgb(
-      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
-      hsl2rgb(h, m1, m2),
-      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
-      this.opacity
-    );
-  },
-  displayable: function() {
-    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
-        && (0 <= this.l && this.l <= 1)
-        && (0 <= this.opacity && this.opacity <= 1);
-  }
-}));
-
-/* From FvD 13.37, CSS Color Module Level 3 */
-function hsl2rgb(h, m1, m2) {
-  return (h < 60 ? m1 + (m2 - m1) * h / 60
-      : h < 180 ? m2
-      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
-      : m1) * 255;
-}
-
-var deg2rad = Math.PI / 180;
-var rad2deg = 180 / Math.PI;
-
-// https://beta.observablehq.com/@mbostock/lab-and-rgb
-var K = 18;
-var Xn = 0.96422;
-var Yn = 1;
-var Zn = 0.82521;
-var t0 = 4 / 29;
-var t1 = 6 / 29;
-var t2 = 3 * t1 * t1;
-var t3 = t1 * t1 * t1;
-
-function labConvert(o) {
-  if (o instanceof Lab) return new Lab(o.l, o.a, o.b, o.opacity);
-  if (o instanceof Hcl) {
-    if (isNaN(o.h)) return new Lab(o.l, 0, 0, o.opacity);
-    var h = o.h * deg2rad;
-    return new Lab(o.l, Math.cos(h) * o.c, Math.sin(h) * o.c, o.opacity);
-  }
-  if (!(o instanceof Rgb)) o = rgbConvert(o);
-  var r = rgb2lrgb(o.r),
-      g = rgb2lrgb(o.g),
-      b = rgb2lrgb(o.b),
-      y = xyz2lab((0.2225045 * r + 0.7168786 * g + 0.0606169 * b) / Yn), x, z;
-  if (r === g && g === b) x = z = y; else {
-    x = xyz2lab((0.4360747 * r + 0.3850649 * g + 0.1430804 * b) / Xn);
-    z = xyz2lab((0.0139322 * r + 0.0971045 * g + 0.7141733 * b) / Zn);
-  }
-  return new Lab(116 * y - 16, 500 * (x - y), 200 * (y - z), o.opacity);
-}
-
-
-
-function lab(l, a, b, opacity) {
-  return arguments.length === 1 ? labConvert(l) : new Lab(l, a, b, opacity == null ? 1 : opacity);
-}
-
-function Lab(l, a, b, opacity) {
-  this.l = +l;
-  this.a = +a;
-  this.b = +b;
-  this.opacity = +opacity;
-}
-
-define(Lab, lab, extend(Color, {
-  brighter: function(k) {
-    return new Lab(this.l + K * (k == null ? 1 : k), this.a, this.b, this.opacity);
-  },
-  darker: function(k) {
-    return new Lab(this.l - K * (k == null ? 1 : k), this.a, this.b, this.opacity);
-  },
-  rgb: function() {
-    var y = (this.l + 16) / 116,
-        x = isNaN(this.a) ? y : y + this.a / 500,
-        z = isNaN(this.b) ? y : y - this.b / 200;
-    x = Xn * lab2xyz(x);
-    y = Yn * lab2xyz(y);
-    z = Zn * lab2xyz(z);
-    return new Rgb(
-      lrgb2rgb( 3.1338561 * x - 1.6168667 * y - 0.4906146 * z),
-      lrgb2rgb(-0.9787684 * x + 1.9161415 * y + 0.0334540 * z),
-      lrgb2rgb( 0.0719453 * x - 0.2289914 * y + 1.4052427 * z),
-      this.opacity
-    );
-  }
-}));
-
-function xyz2lab(t) {
-  return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0;
-}
-
-function lab2xyz(t) {
-  return t > t1 ? t * t * t : t2 * (t - t0);
-}
-
-function lrgb2rgb(x) {
-  return 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
-}
-
-function rgb2lrgb(x) {
-  return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
-}
-
-function hclConvert(o) {
-  if (o instanceof Hcl) return new Hcl(o.h, o.c, o.l, o.opacity);
-  if (!(o instanceof Lab)) o = labConvert(o);
-  if (o.a === 0 && o.b === 0) return new Hcl(NaN, 0, o.l, o.opacity);
-  var h = Math.atan2(o.b, o.a) * rad2deg;
-  return new Hcl(h < 0 ? h + 360 : h, Math.sqrt(o.a * o.a + o.b * o.b), o.l, o.opacity);
-}
-
-
-
-function hcl(h, c, l, opacity) {
-  return arguments.length === 1 ? hclConvert(h) : new Hcl(h, c, l, opacity == null ? 1 : opacity);
-}
-
-function Hcl(h, c, l, opacity) {
-  this.h = +h;
-  this.c = +c;
-  this.l = +l;
-  this.opacity = +opacity;
-}
-
-define(Hcl, hcl, extend(Color, {
-  brighter: function(k) {
-    return new Hcl(this.h, this.c, this.l + K * (k == null ? 1 : k), this.opacity);
-  },
-  darker: function(k) {
-    return new Hcl(this.h, this.c, this.l - K * (k == null ? 1 : k), this.opacity);
-  },
-  rgb: function() {
-    return labConvert(this).rgb();
-  }
-}));
-
-var A = -0.14861;
-var B = +1.78277;
-var C = -0.29227;
-var D = -0.90649;
-var E = +1.97294;
-var ED = E * D;
-var EB = E * B;
-var BC_DA = B * C - D * A;
-
-function cubehelixConvert(o) {
-  if (o instanceof Cubehelix) return new Cubehelix(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Rgb)) o = rgbConvert(o);
-  var r = o.r / 255,
-      g = o.g / 255,
-      b = o.b / 255,
-      l = (BC_DA * b + ED * r - EB * g) / (BC_DA + ED - EB),
-      bl = b - l,
-      k = (E * (g - l) - C * bl) / D,
-      s = Math.sqrt(k * k + bl * bl) / (E * l * (1 - l)), // NaN if l=0 or l=1
-      h = s ? Math.atan2(k, bl) * rad2deg - 120 : NaN;
-  return new Cubehelix(h < 0 ? h + 360 : h, s, l, o.opacity);
-}
-
-function cubehelix(h, s, l, opacity) {
-  return arguments.length === 1 ? cubehelixConvert(h) : new Cubehelix(h, s, l, opacity == null ? 1 : opacity);
-}
-
-function Cubehelix(h, s, l, opacity) {
-  this.h = +h;
-  this.s = +s;
-  this.l = +l;
-  this.opacity = +opacity;
-}
-
-define(Cubehelix, cubehelix, extend(Color, {
-  brighter: function(k) {
-    k = k == null ? brighter : Math.pow(brighter, k);
-    return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
-  },
-  darker: function(k) {
-    k = k == null ? darker : Math.pow(darker, k);
-    return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
-  },
-  rgb: function() {
-    var h = isNaN(this.h) ? 0 : (this.h + 120) * deg2rad,
-        l = +this.l,
-        a = isNaN(this.s) ? 0 : this.s * l * (1 - l),
-        cosh = Math.cos(h),
-        sinh = Math.sin(h);
-    return new Rgb(
-      255 * (l + a * (A * cosh + B * sinh)),
-      255 * (l + a * (C * cosh + D * sinh)),
-      255 * (l + a * (E * cosh)),
-      this.opacity
-    );
-  }
-}));
-
-var styles_appended = false;
-
-var DEFAULTS = {
-	title: "",
-	subtitle: "",
-	color: "#333333",
-	align: "left",
-	margin: 10,
-	margin_advanced: false,
-	margin_top: 10,
-	margin_right: 10,
-	margin_bottom: 10,
-	margin_left: 10,
-};
-
-function appendStyles() {
-	var css = document.createElement("style");
-	css.type = "text/css";
-	css.innerHTML = ".flourish-header {margin-bottom: 0; } .flourish-header h1, .flourish-header h2 {margin:0; } .flourish-header h1 {font-weight: 700; margin: 0; font-size: 21px; line-height: 24px; } .flourish-header h2 {font-weight: 400; font-size: 18px; line-height: 21px } @media(min-width: 480px) {.flourish-header h1 {font-size: 24px; line-height: 30px; } .flourish-header h2 {font-size: 21px; line-height: 27px; } }";
-	document.head.appendChild(css);
-}
-
-function updateHeaderMargins(state) {
-	if (!state.title && !state.subtitle) {
-		if (state.margin_advanced) return "0 " + state.margin_right + "px 0 " + state.margin_left + "px";
-		else return "0 " + state.margin + "px";
+		return {
+			update: update,
+			getHeight: getHeight,
+			element: header_el
+		};
 	}
-	else if (state.margin_advanced) {
-		return state.margin_top + "px " + state.margin_right + "px " + state.margin_bottom + "px " + state.margin_left + "px ";
-	}
-	else {
-		return state.margin + "px";
-	}
-}
 
+	return init;
 
-function init(state) {
-	if (!styles_appended)	appendStyles();
-	for (var key in DEFAULTS) {
-		if (state[key] === undefined) state[key] = DEFAULTS[key];
-	}
-
-	var header_el = document.createElement("div");
-	header_el.className = "flourish-header";
-
-	var title_el = document.createElement("h1");
-	var subtitle_el = document.createElement("h2");
-
-	header_el.appendChild(title_el);
-	header_el.appendChild(subtitle_el);
-
-	var update = function() {
-		header_el.style.color = state.color;
-		var subtitle_color = color(state.color);
-		subtitle_color.opacity = 0.75;
-		subtitle_el.style.color = subtitle_color.toString();
-
-		header_el.style.padding = updateHeaderMargins(state);
-		header_el.style.textAlign = state.align;
-
-		title_el.innerHTML = state.title ? state.title : "";
-		subtitle_el.innerHTML = state.subtitle ? state.subtitle : "";
-
-		title_el.style.padding = !state.title ? 0 : null;
-		subtitle_el.style.padding = !state.subtitle ? 0 : null;
-	};
-
-	var getHeight = function() {
-		return header_el.getBoundingClientRect().height;
-	};
-
-	return {
-		update: update,
-		getHeight: getHeight,
-		element: header_el
-	};
-}
-
-return init;
-
 })));

package.json

 {
   "name": "@flourish/header",
-  "version": "1.0.1",
+  "version": "2.0.0-alpha1",
   "description": "Adds header",
@@ -19,7 +19,7 @@ "main": "header.js",
     "rollup-plugin-node-resolve": "^3.3.0",
-    "eslint": "^4.19.1",
-    "husky": "^0.14.3",
-    "lint-staged": "^7.0.4",
-    "rollup": "^0.41.1",
-    "uglify-js": "^2.7.5"
+    "eslint": "^5.9.0",
+    "husky": "^1.2.0",
+    "lint-staged": "^8.1.0",
+    "rollup": "^0.67.4",
+    "uglify-js": "^3.4.9"
   },
@@ -32,6 +32,3 @@ "repository": {
     "*.js": "eslint src"
-  },
-  "dependencies": {
-    "d3-color": "^1.2.3"
   }
 }

RELEASE_NOTES.md

@@ -0,1 +1,8 @@
+# 2.0.0 (alpha-1)
+* Big rewrite for use with layout module
+* Add text box
+* Text sizing and colouring
+* Remove margin stuff
+* Semantic HTML5 elements
+
 # 1.0.1
@@ -2,0 +9,0 @@ * Replace subtitle opacity with rgba so it can be overwritten

rollup.config.js

 import nodeResolve from "rollup-plugin-node-resolve";
 
 export default {
-	entry: "src/index.js",
-	format: "umd",
-	moduleName: "header",
-	dest: "header.js",
+	input: "src/index.js",
+	output: {
+		name: "header",
+		file: "header.js",
+		format: "umd"
+	},
 	plugins: [
@@ -9,0 +11,0 @@ nodeResolve()

src/index.js

@@ -1,36 +0,39 @@
-import { color as d3_color } from "d3-color";
-
 var styles_appended = false;
 
 var DEFAULTS = {
+	align: "left",
+
 	title: "",
+	title_size: 1.6,
+	title_size_custom: 1.6,
+	title_color: "#333333",
+	title_weight: "bold",
+
 	subtitle: "",
-	color: "#333333",
-	align: "left",
-	margin: 10,
-	margin_advanced: false,
-	margin_top: 10,
-	margin_right: 10,
-	margin_bottom: 10,
-	margin_left: 10,
+	subtitle_size: 1.6,
+	subtitle_size_custom: 1.6,
+	subtitle_color: "#666666",
+	subtitle_weight: "normal",
+
+	text: "",
+	text_size: 1.2,
+	text_size_custom: 1.2,
+	text_color: "#666666",
+	text_weight: "normal",
 };
 
 function appendStyles() {
+	if (styles_appended) return;
 	var css = document.createElement("style");
 	css.type = "text/css";
-	css.innerHTML = ".flourish-header {margin-bottom: 0; } .flourish-header h1, .flourish-header h2 {margin:0; } .flourish-header h1 {font-weight: 700; margin: 0; font-size: 21px; line-height: 24px; } .flourish-header h2 {font-weight: 400; font-size: 18px; line-height: 21px } @media(min-width: 480px) {.flourish-header h1 {font-size: 24px; line-height: 30px; } .flourish-header h2 {font-size: 21px; line-height: 27px; } }";
+	css.innerHTML = ".flourish-header, .flourish-header h1, .flourish-header h2, .flourish-header p { margin: 0; }";
 	document.head.appendChild(css);
+	styles_appended = true;
 }
 
 function updateHeaderMargins(state) {
-	if (!state.title && !state.subtitle) {
-		if (state.margin_advanced) return "0 " + state.margin_right + "px 0 " + state.margin_left + "px";
-		else return "0 " + state.margin + "px";
-	}
-	else if (state.margin_advanced) {
-		return state.margin_top + "px " + state.margin_right + "px " + state.margin_bottom + "px " + state.margin_left + "px ";
-	}
-	else {
-		return state.margin + "px";
-	}
+	if (!state.title && !state.subtitle) return null;
+	else if (state.text) return (state.text_size != "custom" ? state.text_size/2 : state.text_size_custom/2) + "rem";
+	else if (state.subtitle) return (state.subtitle_size != "custom" ? state.subtitle_size/2 : state.subtitle_size_custom/2) + "rem";
+	else if (state.title) return (state.title_size != "custom" ? state.title_size/2 : state.title_size_custom/2) + "rem";
 }
@@ -40,3 +43,3 @@
 function init(state) {
-	if (!styles_appended)	appendStyles();
+	appendStyles();
 	for (var key in DEFAULTS) {
@@ -46,25 +49,36 @@ if (state[key] === undefined) state[key] = DEFAULTS[key];
 
-	var header_el = document.createElement("div");
+	var header_el = document.createElement("header");
 	header_el.className = "flourish-header";
 
+	var hgroup_el = document.createElement("hgroup");
 	var title_el = document.createElement("h1");
 	var subtitle_el = document.createElement("h2");
+	var text_el = document.createElement("p");
 
-	header_el.appendChild(title_el);
-	header_el.appendChild(subtitle_el);
+	header_el.appendChild(hgroup_el);
+	hgroup_el.appendChild(title_el);
+	hgroup_el.appendChild(subtitle_el);
+	header_el.appendChild(text_el);
 
 	var update = function() {
-		header_el.style.color = state.color;
-		var subtitle_color = d3_color(state.color);
-		subtitle_color.opacity = 0.75;
-		subtitle_el.style.color = subtitle_color.toString();
-
-		header_el.style.padding = updateHeaderMargins(state);
 		header_el.style.textAlign = state.align;
+		header_el.style.paddingBottom = updateHeaderMargins(state);
 
 		title_el.innerHTML = state.title ? state.title : "";
+		title_el.style.fontSize = (state.title_size != "custom" ? state.title_size : state.title_size_custom) + "rem";
+		title_el.style.fontWeight = state.title_weight;
+		title_el.style.color = state.title_color;
+		title_el.style.padding = !state.title ? 0 : null;
+
 		subtitle_el.innerHTML = state.subtitle ? state.subtitle : "";
+		subtitle_el.style.fontSize = (state.subtitle_size != "custom" ? state.subtitle_size : state.subtitle_size_custom) + "rem";
+		subtitle_el.style.fontWeight = state.subtitle_weight;
+		subtitle_el.style.color = state.subtitle_color;
+		subtitle_el.style.padding = !state.subtitle ? 0 : null;
 
-		title_el.style.padding = !state.title ? 0 : null;
-		subtitle_el.style.padding = !state.subtitle ? 0 : null;
+		text_el.innerHTML = state.text ? state.text : "";
+		text_el.style.fontSize = (state.text_size != "custom" ? state.text_size : state.text_size_custom) + "rem";
+		text_el.style.fontWeight = state.text_weight;
+		text_el.style.color = state.text_color;
+		text_el.style.padding = !state.text ? 0 : (state.title || state.subtitle ? "1em 0 0" : null);
 	};
@@ -71,0 +85,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

10161

decreased by-54.11%

Lines of code

178

decreased by-71.97%

Number of low quality alerts

2

increased by100%

Dependency changes

• - Removedd3-color@^1.2.3

• - Removedd3-color@1.4.1(transitive)