Update patterns and core JS
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
// core and prism
|
||||
import * as core from './_core.js';
|
||||
import * as Prism from "../../node_modules/prismjs/prism";
|
||||
import '../../node_modules/prismjs/components/prism-json';
|
||||
@@ -6,20 +7,31 @@ import '../../node_modules/prismjs/components/prism-sass';
|
||||
import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
|
||||
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
|
||||
|
||||
import * as colours from "./_color-samples.js";
|
||||
|
||||
// import pattern stuff.
|
||||
import * as swtch from "../pg/patterns/components/switch-core/_switch.js";
|
||||
import * as stickynote from "../pg/patterns/components/sticky-note-core/_sticky-note.js";
|
||||
import * as tabs from "../pg/patterns/layouts/tabs-core/_tabs.js";
|
||||
|
||||
const initComponents = (jQuery) => {
|
||||
swtch.init();
|
||||
tabs.init();
|
||||
stickynote.init();
|
||||
}
|
||||
// init core
|
||||
core.init({
|
||||
success: (a) => {
|
||||
tabs.init(a);
|
||||
swtch.init(a);
|
||||
stickynote.init(a);
|
||||
},
|
||||
notFound: (a, path) => {
|
||||
a.innerHTML = `${a.innerHTML}<div class='notification-box error'><p>This pattern appears to be missing.<br><small>(${path} returned http status 404)</small></p></div>`;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// handler for the deprecated switch
|
||||
|
||||
/*
|
||||
// selectable content
|
||||
jQuery.fn.OneClickSelect = function () {
|
||||
return jQuery(this).on('click', function () {
|
||||
@@ -38,116 +50,32 @@ jQuery.fn.OneClickSelect = function () {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
*/
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
|
||||
if (core.url.p != undefined) {
|
||||
console.log("category:", core.url.p)
|
||||
$("main article:not([data-path^='" + core.url.p + "'])").remove();
|
||||
|
||||
if (core.url.p == -1) {
|
||||
$("title").html(`${core.url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
|
||||
} else {
|
||||
$("title").html(`${core.url.p.substring(core.url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
|
||||
}
|
||||
|
||||
console.log("get the 'directory'", (core.url.p.indexOf("/") == -1 ? core.url.p : core.url.p.substring(0, core.url.p.indexOf("/")) ));
|
||||
$(".main-nav nav ul li a[href='./?p=" + (core.url.p.indexOf("/") == -1 ? core.url.p : core.url.p.substring(0, core.url.p.indexOf("/")) ) + "']").parent().addClass("active");
|
||||
} else {
|
||||
$("header").addClass("show-feature");
|
||||
$(".main-nav nav ul li a[href='./']").parent().addClass("active");
|
||||
}
|
||||
|
||||
// window.onresize = () => {
|
||||
// console.log("resize called")
|
||||
// initComponents($);
|
||||
// }
|
||||
|
||||
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";
|
||||
console.log(path)
|
||||
$( "#" + $(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-display-text") != undefined ? $(this).attr("data-display-text") : $(this).attr("data-pattern").toContent().toSentenceCase())}<div role="tooltip" inert tip-position="right">${$(this).attr("data-status").toContent().toSentenceCase()}</div></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, "<"));
|
||||
}).addClass("line-numbers").addClass('copy-to-clipboard-button').OneClickSelect();
|
||||
initComponents($);
|
||||
Prism.highlightAll();
|
||||
|
||||
core.colour.positionTooltip();
|
||||
$( window ).on("resize", function(){core.colour.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";
|
||||
}
|
||||
core.colour.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");
|
||||
core.cookie.set("hide-deprecated", false, 30, "/");
|
||||
core.cookie.set("show-deprecated", false, 30, "/");
|
||||
} else {
|
||||
$("article.status-deprecated").removeClass("status-deprecated");
|
||||
core.cookie.set("hide-deprecated", true, 30, "/");
|
||||
core.cookie.set("show-deprecated", true, 30, "/");
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
|
||||
setTimeout( function() {
|
||||
if (core.cookie.get("hide-deprecated") == "true") {
|
||||
if (core.cookie.get("show-deprecated") == "true") {
|
||||
$("#deprecated").attr("aria-checked", "true");
|
||||
flipDeprecated();
|
||||
}
|
||||
}, 200);
|
||||
console.log("hide deprecated", { "type": (typeof core.cookie.get("hide-deprecated")), "value": core.cookie.get("hide-deprecated") });
|
||||
console.log("hide deprecated", { "type": (typeof core.cookie.get("show-deprecated")), "value": core.cookie.get("show-deprecated") });
|
||||
// /hide deprecated switch
|
||||
|
||||
// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
|
||||
})
|
||||
|
||||
// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
|
||||
Reference in New Issue
Block a user