@flourish/footer - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0-alpha1

footer.js

@@ -7,123 +7,141 @@ (function (global, factory) {
 
-var styles_appended = false;
+	var styles_appended = false;
 
-var DEFAULTS = {
-	source_label: "Source: ",
-	source_name: "",
-	source_url: "",
-	source_name_2: "",
-	source_url_2: "",
-	source_name_3: "",
-	source_url_3: "",
-	note: "",
-	size: "12",
-	color: "#aaaaaa",
-	align: "left",
-	margin: "10",
-	margin_advanced: false,
-	margin_top: 10,
-	margin_right: 10,
-	margin_bottom: 0,
-	margin_left: 10
-};
+	var DEFAULTS = {
+		source_label: "Source: ",
 
-function appendStyles() {
-	var css = document.createElement("style");
-	css.type = "text/css";
-	css.innerHTML = ".flourish-footer { margin: 0; } .flourish-footer p { margin: 0; display: inline; } .flourish-footer p:empty { height: 0; } .flourish-footer a {color: inherit; } .flourish-footer .flourish-footer-note {margin-left: 3px; }";
-	document.head.appendChild(css);
-	styles_appended = true;
-}
+		source_name: "",
+		source_url: "",
 
-function updateFooterMargin(state) {
-	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 " + state.margin + "px " + "0 " + state.margin + "px";
-}
+		source_name_2: "",
+		source_url_2: "",
 
-function getFooterMarginHeight(state) {
-	return state.margin_advanced ? state.margin_top + state.margin_bottom : +state.margin;
-}
+		source_name_3: "",
+		source_url_3: "",
 
-function addHttp(url) {
-	if (url.indexOf("http://") !== 0 && url.indexOf("https://") !== 0) return "http://" + url;
-	else return url;
-}
+		note: "",
 
+		size: "12",
+		color: "#aaaaaa",
+		align: "justify",
+		align_vertical: "center",
 
-function init(state) {
-	if (!styles_appended)	appendStyles();
-	var has_footer = false;
+		logo_url: "",
+		logo_height: 20,
+		logo_margin: 5,
+		logo_order: "right"
+	};
 
-	for (var key in DEFAULTS) {
-		if (state[key] === undefined) state[key] = DEFAULTS[key];
+	function appendStyles() {
+		if (styles_appended) return;
+		var css = document.createElement("style");
+		css.type = "text/css";
+		css.innerHTML = ".flourish-footer { margin: 0; } .flourish-footer p { margin: 0; display: inline; } .flourish-footer p:empty { height: 0; } .flourish-footer a { color: inherit; } .flourish-footer-note { padding-left: 3px; } .flourish-footer-source:empty > .flourish-footer-note { padding-left: 0; }";
+		document.head.appendChild(css);
+		styles_appended = true;
 	}
 
-	var footer_el = document.createElement("div");
-	footer_el.className = "flourish-footer";
+	function addHttp(url) {
+		if (url.indexOf("http://") !== 0 && url.indexOf("https://") !== 0) return "http://" + url;
+		else return url;
+	}
 
-	var source_el = document.createElement("p");
-	source_el.className = "flourish-footer-source";
 
-	var note_el = document.createElement("p");
-	note_el.className = "flourish-footer-note";
+	function init(state) {
+		appendStyles();
+		var has_footer = false;
 
-	footer_el.appendChild(source_el);
-	footer_el.appendChild(note_el);
+		for (var key in DEFAULTS) {
+			if (state[key] === undefined) state[key] = DEFAULTS[key];
+		}
 
+		var footer_el = document.createElement("footer");
+		footer_el.className = "flourish-footer";
 
-	var update = function() {
-		var sources = [
-			{ name: state.source_name, url: state.source_url },
-			{ name: state.multiple_sources ? state.source_name_2 : "", url: state.multiple_sources ? state.source_url_2 : "" },
-			{ name: state.multiple_sources ? state.source_name_3 : "", url: state.multiple_sources ? state.source_url_3 : "" }
-		].filter(function(source) {
-			return source.name || source.url;
-		});
+		var text_el = document.createElement("div");
+		text_el.className = "flourish-footer-text";
 
-		has_footer = sources.length > 0 || state.note;
+		var source_el = document.createElement("p");
+		source_el.className = "flourish-footer-source";
 
-		footer_el.style.height = has_footer ? null : 0;
-		footer_el.style.margin = has_footer ? updateFooterMargin(state) : 0;
-		footer_el.style.fontSize = state.size + "px";
-		footer_el.style.textAlign = state.align;
-		footer_el.style.color = state.color;
+		var note_el = document.createElement("p");
+		note_el.className = "flourish-footer-note";
 
-		var source_container = document.createElement("span");
-		sources.forEach(function(source, i) {
-			var link_container = document.createElement("p");
-			if (i > 0) link_container.innerText = ", ";
-			if (source.url) {
-				var link_el = document.createElement("a");
-				link_el.innerText = source.name || source.url;
-				link_el.href = addHttp(source.url);
-				link_el.target = "_blank";
-				link_container.appendChild(link_el);
-			}
-			else {
-				link_container.innerText += source.name || source.url;
-			}
+		var logo_el = document.createElement("img");
+		logo_el.className = "flourish-footer-logo";
 
-			source_container.appendChild(link_container);
-		});
+		text_el.append(source_el);
+		text_el.append(note_el);
+		footer_el.appendChild(text_el);
+		footer_el.appendChild(logo_el);
 
-		source_el.innerHTML = source_container.innerHTML !== "" ? state.source_label + " " + source_container.outerHTML : "";
-		note_el.innerHTML = state.note ? (source_container.innerHTML !== "" ? "• " : "") + state.note : "";
-	};
+		var update = function() {
+			var sources = [
+				{ name: state.source_name, url: state.source_url },
+				{ name: state.multiple_sources ? state.source_name_2 : "", url: state.multiple_sources ? state.source_url_2 : "" },
+				{ name: state.multiple_sources ? state.source_name_3 : "", url: state.multiple_sources ? state.source_url_3 : "" }
+			].filter(function(source) {
+				return source.name || source.url;
+			});
 
-	var getHeight = function() {
-		if (!has_footer) return 0;
-		return footer_el.getBoundingClientRect().height + getFooterMarginHeight(state);
-	};
+			has_footer = sources.length > 0 || state.note;
 
-	return {
-		update: update,
-		getHeight: getHeight,
-		element: footer_el
-	};
-}
+			footer_el.style.display = "flex";
+			footer_el.style.height = has_footer ? null : 0;
+			footer_el.style.width = "100%";
 
-return init;
+			if (state.align == "justify") footer_el.style.justifyContent = "space-between";
+			else if (state.align == "left") footer_el.style.justifyContent = "flex-start";
+			else if (state.align == "right") footer_el.style.justifyContent = "flex-end";
+			else if (state.align == "center") footer_el.style.justifyContent = "center";
 
+			footer_el.style.fontSize = state.size + "px";
+			footer_el.style.color = state.color;
+
+			var source_container = document.createElement("span");
+			sources.forEach(function(source, i) {
+				var link_container = document.createElement("p");
+				if (i > 0) link_container.innerText = ", ";
+				if (source.url) {
+					var link_el = document.createElement("a");
+					link_el.innerText = source.name || source.url;
+					link_el.href = addHttp(source.url);
+					link_el.target = "_blank";
+					link_container.appendChild(link_el);
+				}
+				else {
+					link_container.innerText += source.name || source.url;
+				}
+
+				source_container.appendChild(link_container);
+			});
+
+			text_el.style.order = state.logo_order == "left" ? 2 : null;
+			text_el.style.display = "flex";
+			text_el.style.alignItems = state.align_vertical;
+
+			source_el.innerHTML = source_container.innerHTML !== "" ? state.source_label + " " + source_container.outerHTML : "";
+			note_el.innerHTML = state.note ? (source_container.innerHTML !== "" ? "• " : "") + state.note : "";
+
+			logo_el.src = state.logo_url;
+			logo_el.style.height = state.logo_height + "px";
+			logo_el.style.marginLeft = state.align != "justify" && state.logo_order == "right" ? state.logo_margin + "px" : null;
+			logo_el.style.marginRight = state.align != "justify" && state.logo_order == "left" ? state.logo_margin + "px" : null;
+			logo_el.style.verticalAlign = state.align_vertical;
+		};
+
+		var getHeight = function() {
+			if (!has_footer) return 0;
+			return footer_el.getBoundingClientRect().height;
+		};
+
+		return {
+			update: update,
+			getHeight: getHeight,
+			element: footer_el
+		};
+	}
+
+	return init;
+
 })));

package.json

 {
   "name": "@flourish/footer",
-  "version": "1.0.0",
+  "version": "2.0.0-alpha1",
   "description": "Add footer",
@@ -19,7 +19,7 @@ "main": "footer.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"
   },
@@ -26,0 +26,0 @@ "repository": {

RELEASE_NOTES.md

@@ -0,4 +1,10 @@
+# 2.0.0 (alpha-1)
+* Major rework for use with layout module
+* Logo
+* HTML semantic element
+* Alignment
+
+
 # 1.0.0
-
 * Importable settings
 * Create multiple headers (if you really want to)

rollup.config.js

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

src/index.js

@@ -5,24 +5,30 @@ var styles_appended = false;
 	source_label: "Source: ",
+
 	source_name: "",
 	source_url: "",
+
 	source_name_2: "",
 	source_url_2: "",
+
 	source_name_3: "",
 	source_url_3: "",
+
 	note: "",
+
 	size: "12",
 	color: "#aaaaaa",
-	align: "left",
-	margin: "10",
-	margin_advanced: false,
-	margin_top: 10,
-	margin_right: 10,
-	margin_bottom: 0,
-	margin_left: 10
+	align: "justify",
+	align_vertical: "center",
+
+	logo_url: "",
+	logo_height: 20,
+	logo_margin: 5,
+	logo_order: "right"
 };
 
 function appendStyles() {
+	if (styles_appended) return;
 	var css = document.createElement("style");
 	css.type = "text/css";
-	css.innerHTML = ".flourish-footer { margin: 0; } .flourish-footer p { margin: 0; display: inline; } .flourish-footer p:empty { height: 0; } .flourish-footer a {color: inherit; } .flourish-footer .flourish-footer-note {margin-left: 3px; }";
+	css.innerHTML = ".flourish-footer { margin: 0; } .flourish-footer p { margin: 0; display: inline; } .flourish-footer p:empty { height: 0; } .flourish-footer a { color: inherit; } .flourish-footer-note { padding-left: 3px; } .flourish-footer-source:empty > .flourish-footer-note { padding-left: 0; }";
 	document.head.appendChild(css);
@@ -32,13 +38,2 @@ styles_appended = true;
 
-function updateFooterMargin(state) {
-	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 " + state.margin + "px " + "0 " + state.margin + "px";
-}
-
-function getFooterMarginHeight(state) {
-	return state.margin_advanced ? state.margin_top + state.margin_bottom : +state.margin;
-}
-
 function addHttp(url) {
@@ -51,3 +46,3 @@ if (url.indexOf("http://") !== 0 && url.indexOf("https://") !== 0) return "http://" + url;
 function init(state) {
-	if (!styles_appended)	appendStyles();
+	appendStyles();
 	var has_footer = false;
@@ -59,5 +54,8 @@
 
-	var footer_el = document.createElement("div");
+	var footer_el = document.createElement("footer");
 	footer_el.className = "flourish-footer";
 
+	var text_el = document.createElement("div");
+	text_el.className = "flourish-footer-text";
+
 	var source_el = document.createElement("p");
@@ -69,5 +67,9 @@ source_el.className = "flourish-footer-source";
 
-	footer_el.appendChild(source_el);
-	footer_el.appendChild(note_el);
+	var logo_el = document.createElement("img");
+	logo_el.className = "flourish-footer-logo";
 
+	text_el.append(source_el);
+	text_el.append(note_el);
+	footer_el.appendChild(text_el);
+	footer_el.appendChild(logo_el);
 
@@ -85,6 +87,12 @@ var update = function() {
 
+		footer_el.style.display = "flex";
 		footer_el.style.height = has_footer ? null : 0;
-		footer_el.style.margin = has_footer ? updateFooterMargin(state) : 0;
+		footer_el.style.width = "100%";
+
+		if (state.align == "justify") footer_el.style.justifyContent = "space-between";
+		else if (state.align == "left") footer_el.style.justifyContent = "flex-start";
+		else if (state.align == "right") footer_el.style.justifyContent = "flex-end";
+		else if (state.align == "center") footer_el.style.justifyContent = "center";
+
 		footer_el.style.fontSize = state.size + "px";
-		footer_el.style.textAlign = state.align;
 		footer_el.style.color = state.color;
@@ -110,4 +118,14 @@
 
+		text_el.style.order = state.logo_order == "left" ? 2 : null;
+		text_el.style.display = "flex";
+		text_el.style.alignItems = state.align_vertical;
+
 		source_el.innerHTML = source_container.innerHTML !== "" ? state.source_label + " " + source_container.outerHTML : "";
 		note_el.innerHTML = state.note ? (source_container.innerHTML !== "" ? "• " : "") + state.note : "";
+
+		logo_el.src = state.logo_url;
+		logo_el.style.height = state.logo_height + "px";
+		logo_el.style.marginLeft = state.align != "justify" && state.logo_order == "right" ? state.logo_margin + "px" : null;
+		logo_el.style.marginRight = state.align != "justify" && state.logo_order == "left" ? state.logo_margin + "px" : null;
+		logo_el.style.verticalAlign = state.align_vertical;
 	};
@@ -117,3 +135,3 @@
 		if (!has_footer) return 0;
-		return footer_el.getBoundingClientRect().height + getFooterMarginHeight(state);
+		return footer_el.getBoundingClientRect().height;
 	};
@@ -120,0 +138,0 @@

New alerts

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

Improved metrics

Total package byte prevSize

12114

increased by14.84%

Lines of code

240

increased by10.6%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes