Initial Commit

src/js/scaffolding.js

@@ -0,0 +1,158 @@
+import * as Prism from "../../node_modules/prismjs/prism";
+import '../../node_modules/prismjs/components/prism-json';
+import '../../node_modules/prismjs/components/prism-pug';
+import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
+import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
+
+import * as cookie from './_cookies.js';
+import * as get from "./_geturlvars.js";
+import * as colours from "./_color-samples.js";
+
+import * as swtch from "../pg/patterns/components/switch-core/_switch.js";
+import * as tabs from "../pg/patterns/layouts/tabs-core/_tabs.js";
+
+// oneClickSelect.init();
+
+const initComponents = (jQuery) => {
+	swtch.init();
+	tabs.tabs(jQuery);
+}
+
+
+// selectable content
+jQuery.fn.OneClickSelect = function () {
+	return jQuery(this).on('click', function () {
+		/* In here, "this" is the element */
+		var range, selection;
+		if (window.getSelection) {
+			selection = window.getSelection();
+			range = document.createRange();
+			range.selectNodeContents(this);
+			selection.removeAllRanges();
+			selection.addRange(range);
+		} else if (document.body.createTextRange) {
+			range = document.body.createTextRange();
+			range.moveToElementText(this);
+			range.select();
+		}
+	});
+};
+
+String.prototype.toTitleCase = function() {
+	return this.replace(/\w\S*/g, function(txt) {
+		return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+	});
+}
+String.prototype.toSentenceCase = function() {
+	return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
+}
+String.prototype.toContent = function() {
+	return this.replace(/-/g, " ");
+}
+
+
+jQuery(document).ready(function($){
+	if (get.vars.p != undefined) {
+		console.log("category:", get.vars.p)
+		$("main article:not([data-path^='" + get.vars.p + "'])").remove();
+
+		if (get.vars.p == -1) {
+			$("title").html(`${get.vars.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
+		} else {
+			$("title").html(`${get.vars.p.substring(get.vars.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
+		}
+		
+		console.log("get the 'directory'", (get.vars.p.indexOf("/") == -1 ? get.vars.p : get.vars.p.substring(0, get.vars.p.indexOf("/")) ));
+		$(".main-nav nav ul li a[href='./?p=" + (get.vars.p.indexOf("/") == -1 ? get.vars.p : get.vars.p.substring(0, get.vars.p.indexOf("/")) ) + "']").parent().addClass("active");
+	} else {
+		$("header").addClass("show-feature");
+		$(".main-nav nav ul li a[href='./']").parent().addClass("active");
+	}
+
+	let articles = $("article").length;
+	$("article").each(function(k,v){
+		if ($(this).attr("data-template") != "none") {
+			let path = "patterns/" + $(this).attr("data-path") + ($(this).attr("data-core") == "true" ? "-core" : "") + "/index.html";
+			$( "#" + $(this).attr("id") ).load(path, "", function(response, status, xhr){
+				if ( status == "error" ) {
+					$( "#" + $(this).attr("id") ).html(`<div class='notification-box error'><p>This pattern appears to be missing.<br><small>(${path} returned http status 404)</small></p></div>`);
+				}
+				articles--;
+				if (articles == 0) {
+					$("article").each(function(){
+						try {
+							$(this).prepend(`<h1 class="status-${$(this).attr("data-status")}"><span>${$(this).attr("data-pattern").toContent().toSentenceCase()}</span></h1>`);
+						} catch (e) {
+							console.log("Problem creating heading", $(this).attr("data-pattern"));
+							$(this).prepend(`<div class='notification-box warning'><h1>Problem creating heading</h1><p>The content we found for this header was: ${$(this).attr("data-pattern")}. Check that the data-pattern attribute on the article is set properly. Also check that there is no article tag inside the article.</p></div>`);
+						}
+						switch ($(this).attr("data-template")) {
+							case "pug": 
+								$(this).find("pre").each(function(){
+									$(this).wrapInner("<code class='" + $(this).parent().attr("class") +  "'></code>");
+								})
+							break;
+							case "md": 
+								$(this).find("code").addClass("language-html");
+							break;
+						}
+					})
+
+					// things we do on every template after it has been customised. 
+					$("code").each(function(){
+						$(this).html($(this).html().replace(/</g, "&lt;"));
+					}).addClass("line-numbers").addClass('copy-to-clipboard-button').OneClickSelect();
+					initComponents($);
+					Prism.highlightAll();
+
+
+					colours.positionTooltip();
+					$( window ).on("resize", function(){colours.positionTooltip()});
+					$("name > span, color-pill > span").on("click", function(e){
+						e.preventDefault();
+						let w = "";
+						if (e.metaKey || e.ctrlKey || e.keyCode == 91 || e.keyCode == 224) {
+							w = "var";
+						} else if (e.altKey) {
+							w = "token"
+						} else if (e.shiftKey) {
+							w = "rgb";
+						} else {
+							w = "hex";
+						}
+						colours.copy(w, $(this));
+					});
+				}
+			})
+		} else {
+			articles--;
+		}
+	});
+
+	// show deprecated switch
+	initComponents($);
+	function flipDeprecated() {
+		setTimeout(function(){
+			if ($("#deprecated").attr("aria-checked") == "false") {
+				$(".status-deprecated").closest("article").addClass("status-deprecated");
+				cookie.set("hide-deprecated", false, 30, "/");
+			} else {
+				$("article.status-deprecated").removeClass("status-deprecated");
+				cookie.set("hide-deprecated", true, 30, "/");
+			}
+		}, 50);
+	}
+
+	$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
+	setTimeout( function() {
+		if (cookie.get("hide-deprecated") == "true") {
+			$("#deprecated").attr("aria-checked", "true");
+			flipDeprecated();
+		}
+	}, 200);
+	console.log("hide deprecated", { "type": (typeof cookie.get("hide-deprecated")), "value": cookie.get("hide-deprecated") });
+	// /hide deprecated switch
+
+
+
+})