Updates
Updates
This commit is contained in:
BIN
src/.DS_Store
vendored
BIN
src/.DS_Store
vendored
Binary file not shown.
145
src/js/_core.js
Normal file
145
src/js/_core.js
Normal file
@@ -0,0 +1,145 @@
|
||||
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, " ");
|
||||
}
|
||||
|
||||
const copyColourFallback = (copyInfo, attr) => {
|
||||
console.log("fallback")
|
||||
var textArea = document.createElement('textarea');
|
||||
textArea.value = copyInfo;
|
||||
|
||||
// Avoid scrolling to bottom
|
||||
textArea.style.top = '0';
|
||||
textArea.style.left = '0';
|
||||
textArea.style.position = 'fixed';
|
||||
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
var successful = document.execCommand('copy');
|
||||
setTimeout(function () {
|
||||
if (successful) {
|
||||
//copyInfo.success();
|
||||
showMessage(`Copied ${attr}.`)
|
||||
} else {
|
||||
//copyInfo.error();
|
||||
showMessage(`Copy failed (${attr}).`, false)
|
||||
}
|
||||
}, 1);
|
||||
} catch (err) {
|
||||
setTimeout(function () {
|
||||
showMessage(`Copy failed (${attr}). ${err.Message}`, false);
|
||||
|
||||
//copyInfo.error(err);
|
||||
}, 1);
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
const showMessage = (m, s) => {
|
||||
s = s == undefined ? true : s;
|
||||
console.log("Copy success (navigator.clipboard)");
|
||||
$("body").prepend("<div id='copystatus' style='display: none;'><div class='"+(s ? "succeeded" : "failed")+"'>" + m + "</div></div>");
|
||||
$("#copystatus > div").css("top", (window.scrollY + 100)+ "px");
|
||||
$("#copystatus").fadeIn(1000, function(){
|
||||
$(this).fadeOut( 1000, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const getURLVars = () => {
|
||||
var oResult = {};
|
||||
if (location.search.length > 0) {
|
||||
var aQueryString = (location.search.substr(1)).split("&");
|
||||
for (var i = 0; i < aQueryString.length; i++) {
|
||||
var aTemp = aQueryString[i].split("=");
|
||||
if (aTemp[1].length > 0) {
|
||||
oResult[aTemp[0]] = decodeURIComponent(aTemp[1].replace(/\+/g, '%20'));
|
||||
}
|
||||
}
|
||||
}
|
||||
return oResult;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
url: getURLVars(),
|
||||
cookie: {
|
||||
set: (name, value, expires, path, domain, secure) => {
|
||||
switch(typeof expires) {
|
||||
case "number" :
|
||||
var d = new Date()
|
||||
expires = d.setTime(d + (expires*24*60*60*1000));
|
||||
break;
|
||||
case "object" :
|
||||
expires = expires.toGMTString();
|
||||
}
|
||||
document.cookie= name + "=" + escape(value) +
|
||||
((expires) ? "; expires=" + expires : "") +
|
||||
("; path=/") +
|
||||
((domain) ? "; domain=" + domain : "") +
|
||||
((secure) ? "; secure" : "");
|
||||
},
|
||||
get: (cname) => {
|
||||
var name = cname + "=";
|
||||
var ca = document.cookie.split(";");
|
||||
for(var i = 0; i <ca.length; i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)===" ") {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) === 0) {
|
||||
return c.substring(name.length,c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
},
|
||||
remove: (cnane) => {
|
||||
setCookie(cname, "", -1);
|
||||
},
|
||||
},
|
||||
colour: {
|
||||
// showMessage: (m, s) => {
|
||||
// showMessage(m, s);
|
||||
// },
|
||||
copy: (w, t) => {
|
||||
let c = t.parent().attr("data-" + (w=="var" ? "token" : w));
|
||||
c = w == "var" ? `var(${c})` : c;
|
||||
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(c).then(function() {
|
||||
showMessage(`Copied ${w}.`);
|
||||
}, function(e) {
|
||||
copyColourFallback(c,w);
|
||||
});
|
||||
} else {
|
||||
copyColourFallback(c, w);
|
||||
}
|
||||
},
|
||||
positionTooltip: () => {
|
||||
$("color-pill > span").each(function(){
|
||||
if ((Number($("p").css('font-size').replace("px","")) * 10) > $(this).offset().left) {
|
||||
$(this).children("div.tooltip-tc").attr("tip-position", "right");
|
||||
} else {
|
||||
$(this).children("div.tooltip-tc").attr("tip-position", "bottom");
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
init: (callback) => {
|
||||
|
||||
|
||||
callback();
|
||||
}
|
||||
};
|
||||
@@ -1,28 +1,29 @@
|
||||
import * as core from './_core.js';
|
||||
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/components/prism-sass';
|
||||
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 stickynote from "../pg/patterns/components/sticky-note-core/_sticky-note.js";
|
||||
import * as tabs from "../pg/patterns/layouts/tabs-core/_tabs.js";
|
||||
|
||||
// oneClickSelect.init();
|
||||
|
||||
const initComponents = (jQuery) => {
|
||||
swtch.init();
|
||||
tabs.tabs(jQuery);
|
||||
tabs.init();
|
||||
stickynote.init();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// selectable content
|
||||
jQuery.fn.OneClickSelect = function () {
|
||||
return jQuery(this).on('click', function () {
|
||||
/* In here, "this" is the element */
|
||||
// In here, "this" is the element
|
||||
var range, selection;
|
||||
if (window.getSelection) {
|
||||
selection = window.getSelection();
|
||||
@@ -38,41 +39,37 @@ jQuery.fn.OneClickSelect = function () {
|
||||
});
|
||||
};
|
||||
|
||||
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 (core.url.p != undefined) {
|
||||
console.log("category:", core.url.p)
|
||||
$("main article:not([data-path^='" + core.url.p + "'])").remove();
|
||||
|
||||
if (get.vars.p == -1) {
|
||||
$("title").html(`${get.vars.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
|
||||
if (core.url.p == -1) {
|
||||
$("title").html(`${core.url.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")}`);
|
||||
$("title").html(`${core.url.p.substring(core.url.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");
|
||||
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>`);
|
||||
@@ -81,7 +78,7 @@ jQuery(document).ready(function($){
|
||||
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>`);
|
||||
$(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>`);
|
||||
@@ -105,9 +102,8 @@ jQuery(document).ready(function($){
|
||||
initComponents($);
|
||||
Prism.highlightAll();
|
||||
|
||||
|
||||
colours.positionTooltip();
|
||||
$( window ).on("resize", function(){colours.positionTooltip()});
|
||||
core.colour.positionTooltip();
|
||||
$( window ).on("resize", function(){core.colour.positionTooltip()});
|
||||
$("name > span, color-pill > span").on("click", function(e){
|
||||
e.preventDefault();
|
||||
let w = "";
|
||||
@@ -120,7 +116,7 @@ jQuery(document).ready(function($){
|
||||
} else {
|
||||
w = "hex";
|
||||
}
|
||||
colours.copy(w, $(this));
|
||||
core.colour.copy(w, $(this));
|
||||
});
|
||||
}
|
||||
})
|
||||
@@ -135,24 +131,23 @@ jQuery(document).ready(function($){
|
||||
setTimeout(function(){
|
||||
if ($("#deprecated").attr("aria-checked") == "false") {
|
||||
$(".status-deprecated").closest("article").addClass("status-deprecated");
|
||||
cookie.set("hide-deprecated", false, 30, "/");
|
||||
core.cookie.set("hide-deprecated", false, 30, "/");
|
||||
} else {
|
||||
$("article.status-deprecated").removeClass("status-deprecated");
|
||||
cookie.set("hide-deprecated", true, 30, "/");
|
||||
core.cookie.set("hide-deprecated", true, 30, "/");
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
|
||||
setTimeout( function() {
|
||||
if (cookie.get("hide-deprecated") == "true") {
|
||||
if (core.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") });
|
||||
console.log("hide deprecated", { "type": (typeof core.cookie.get("hide-deprecated")), "value": core.cookie.get("hide-deprecated") });
|
||||
// /hide deprecated switch
|
||||
|
||||
|
||||
|
||||
})
|
||||
// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
|
||||
})
|
||||
|
||||
BIN
src/pg/.DS_Store
vendored
BIN
src/pg/.DS_Store
vendored
Binary file not shown.
@@ -112,7 +112,32 @@
|
||||
- return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
- });
|
||||
- }
|
||||
|
||||
- function generateSCSS(c, p) {
|
||||
- let o = "";
|
||||
- for (let i = 0; i < c.length; i++) {
|
||||
- o += `\n\t${p}-${c[i].name.toLowerCase()}: ${ color(c[i].color, "hex").toLowerCase() },\n`;
|
||||
- for (let ii = 0; ii < c[i].grad.l.length; ii++) {
|
||||
- o += `\t${p}-${c[i].grad.l[ii].n.toLowerCase()}: ${ color(c[i].grad.l[ii].c, "hex").toLowerCase() },\n`;
|
||||
- }
|
||||
- for (let ii = 0; ii < c[i].grad.d.length; ii++) {
|
||||
- o += `\t${p}-${c[i].grad.d[ii].n.toLowerCase()}: ${ color(c[i].grad.d[ii].c, "hex").toLowerCase() },\n`;
|
||||
- }
|
||||
- }
|
||||
- return o;
|
||||
- }
|
||||
- function generateCSS(c, p) {
|
||||
- let o = "";
|
||||
- for (let i = 0; i < c.length; i++) {
|
||||
- o += `\n\t--${p}-${c[i].name.toLowerCase()}: ${ color(c[i].color, "hex").toLowerCase() },\n`;
|
||||
- for (let ii = 0; ii < c[i].grad.l.length; ii++) {
|
||||
- o += `\t--${p}-${c[i].grad.l[ii].n.toLowerCase()}: ${ color(c[i].grad.l[ii].c, "hex").toLowerCase() },\n`;
|
||||
- }
|
||||
- for (let ii = 0; ii < c[i].grad.d.length; ii++) {
|
||||
- o += `\t--${p}-${c[i].grad.d[ii].n.toLowerCase()}: ${ color(c[i].grad.d[ii].c, "hex").toLowerCase() },\n`;
|
||||
- }
|
||||
- }
|
||||
- return o;
|
||||
- }
|
||||
|
||||
|
||||
mixin accessibility-info(c)
|
||||
@@ -167,17 +192,12 @@ mixin accessibility-info(c)
|
||||
|
||||
|
||||
|
||||
|
||||
mixin color-samples(colors, theid)
|
||||
color-samples
|
||||
- let css = [];
|
||||
- let scss = [];
|
||||
- for (var i = 0; i < colors.length; ++i) {
|
||||
- let fgcolor = ( getContrastRatio(color(colors[i].color, "rgb"), "rgb(0,0,0)") <= 4.5 ? "#FFF" : "#000" );
|
||||
- css.push("");
|
||||
- scss.push("");
|
||||
- css.push("--" + colorpfx + "-" + colors[i].name.toLowerCase() + ": " + color(colors[i].color, "hex") + ";");
|
||||
- scss.push(colorpfx + "-" + colors[i].name.toLowerCase() + ": " + color(colors[i].color, "hex") + ",");
|
||||
|
||||
color-sample( data-color= colors[i].color style="background-color: "+ colors[i].color + "; color: " + fgcolor)
|
||||
|
||||
@@ -191,8 +211,6 @@ mixin color-samples(colors, theid)
|
||||
- if (colors[i].grad.l.length > 0 || colors[i].grad.d.length > 0 ) {
|
||||
sample-block
|
||||
- for ( var ii = 0; ii < colors[i].grad.l.length; ++ii ) {
|
||||
- css.push("--" + colorpfx + "-" + colors[i].grad.l[ii].n.toLowerCase() +": "+ color( colors[i].grad.l[ii].c, "hex") + ";");
|
||||
- scss.push(colorpfx + "-" + colors[i].grad.l[ii].n.toLowerCase() +": "+ color( colors[i].grad.l[ii].c, "hex") + ",");
|
||||
color-pill(data-hex= color( colors[i].grad.l[ii].c, "hex") data-rgb= color(colors[i].grad.l[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.l[ii].n)
|
||||
span(style="background-color: " + colors[i].grad.l[ii].c )
|
||||
div.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom")
|
||||
@@ -205,8 +223,6 @@ mixin color-samples(colors, theid)
|
||||
|
||||
sample-block
|
||||
- for ( var ii = 0; ii < colors[i].grad.d.length; ++ii ) {
|
||||
- css.push("--" + colorpfx + "-" + colors[i].grad.d[ii].n.toLowerCase() +": "+ color( colors[i].grad.d[ii].c, "hex") + ";");
|
||||
- scss.push(colorpfx + "-" + colors[i].grad.d[ii].n.toLowerCase() +": "+ color( colors[i].grad.d[ii].c, "hex") + ",");
|
||||
color-pill(data-hex= color(colors[i].grad.d[ii].c, "hex") data-rgb= color(colors[i].grad.d[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.d[ii].n)
|
||||
span(style="background-color: " + colors[i].grad.d[ii].c )
|
||||
div.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom")
|
||||
@@ -226,18 +242,8 @@ mixin color-samples(colors, theid)
|
||||
- scsstab = scsstab == undefined ? "scss" : scsstab
|
||||
|
||||
div(data-tab= csstab )
|
||||
- let cssStr = ":root {"
|
||||
- for (i = 0; i < css.length; i++) {
|
||||
- cssStr += "\t" + css[i] + "\n";
|
||||
- }
|
||||
- cssStr += "}"
|
||||
pre.language-css= cssStr
|
||||
pre.language-css= ":root {" + generateCSS(colors, colorpfx) + "}"
|
||||
//- pre.language-css= cssStr
|
||||
|
||||
div(data-tab= scsstab )
|
||||
- let scssStr = "$" + colorpfx + ": ("
|
||||
- for (i = 0; i < scss.length; i++) {
|
||||
- scssStr += "\t" + scss[i] + "\n";
|
||||
- }
|
||||
- scssStr += ");\n:root {\n\t@each $name, $color in $" + colorpfx + " {\n\t\t--#{$name}: #{$color};\n\t}\n}"
|
||||
pre.language-css= scssStr
|
||||
|
||||
pre.language-css= "$" + colorpfx + ": (" + generateSCSS(colors, colorpfx) + ");\n:root {\n\t@each $name, $color in $" + colorpfx + " {\n\t\t--#{$name}: #{$color};\n\t}\n}"
|
||||
|
||||
@@ -1,42 +1,54 @@
|
||||
- var site = "DS2 core"
|
||||
- var lang = "en"
|
||||
- var lang = "en-uk"
|
||||
- var colorpfx = "colour"
|
||||
- var headings = ["What is it", "When to use it", "How to use it"]
|
||||
- var root = "."
|
||||
|
||||
-
|
||||
var content = [
|
||||
{
|
||||
var content = [
|
||||
{
|
||||
name: "colours",
|
||||
status: "complete",
|
||||
core: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "components",
|
||||
status: "in-progress",
|
||||
status: "complete",
|
||||
template: "none",
|
||||
files: [
|
||||
{
|
||||
name: "sticky-note",
|
||||
status: "in-progress",
|
||||
core: true,
|
||||
},
|
||||
{
|
||||
name: "switch",
|
||||
status: "in-progress",
|
||||
core: true,
|
||||
},
|
||||
{
|
||||
name: "tooltip",
|
||||
status: "in-progress",
|
||||
core: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "layouts",
|
||||
status: "complete",
|
||||
template: "none",
|
||||
core: true,
|
||||
files: [
|
||||
{
|
||||
name: "breakpoints",
|
||||
status: "complete",
|
||||
name: "header",
|
||||
status: "in-progress",
|
||||
core: true,
|
||||
},
|
||||
{
|
||||
name: "header",
|
||||
status: "complete",
|
||||
name: "breakpoints",
|
||||
status: "in-progress",
|
||||
core: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "tabs",
|
||||
status: "complete",
|
||||
@@ -46,11 +58,33 @@
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
status: "complete",
|
||||
status: "complete",
|
||||
core: true,
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
-
|
||||
var statuses = [
|
||||
{
|
||||
name: "not-started",
|
||||
color: "transparent",
|
||||
},
|
||||
{
|
||||
name: "in-progress",
|
||||
color: "var(--color-oj)",
|
||||
},
|
||||
{
|
||||
name: "complete",
|
||||
color: "var(--color-lime)",
|
||||
},
|
||||
{
|
||||
name: "deprecated",
|
||||
color: "var(--color-raspberry)",
|
||||
},
|
||||
]
|
||||
|
||||
- var generateSCSS = ["colours"]
|
||||
|
||||
|
||||
-
|
||||
var colours = [
|
||||
@@ -87,6 +121,4 @@
|
||||
]
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
]
|
||||
62
src/pg/_core.scss.pug
Normal file
62
src/pg/_core.scss.pug
Normal file
@@ -0,0 +1,62 @@
|
||||
//- This file is used to generate ../scss/_core.scss and will overwrite what is in that include.
|
||||
|
||||
include _config
|
||||
include _color-samples
|
||||
|
||||
-var out = ""
|
||||
|
||||
-
|
||||
out = `/* Core Code
|
||||
This file is generates _core.scss using information in ../pg/_config.pug.
|
||||
Please make your changes in your _config.pug file so that they are not
|
||||
overwritten. \n */\n\n\n`
|
||||
|
||||
|
||||
- out += `//colour tokens\n$${colorpfx}: (`
|
||||
|
||||
each val in generateColourToken
|
||||
- out += generateSCSS(eval(val), colorpfx)
|
||||
|
||||
|
||||
|
||||
|
||||
//- var scss = $colors
|
||||
| !{generateSCSS(eval(val), colorpfx)}
|
||||
|
||||
- out += ");\n:root {\n\t@each $name, $color in $" + colorpfx + " {\n\t\t--#{$name}: #{$color};\n\t}\n}"
|
||||
|
||||
|
||||
|
||||
//- This is the end of the statuses
|
||||
- out += "\n\n\n// Statuses\n$statuses: (\n"
|
||||
each status in statuses || []
|
||||
- out += `\t"${status.name}": ${status.color},\n`
|
||||
-out += ");"
|
||||
|
||||
|
||||
-
|
||||
out += `\n\nh1[class^="status"], h2[class^="status"], span[class^="status"] {
|
||||
&::after {
|
||||
$size: 1.5rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #CCC;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: $size;
|
||||
margin-left: .5rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: $size;
|
||||
}
|
||||
}
|
||||
@each $name, $color in $statuses {
|
||||
.status-#{$name}::after {
|
||||
background-color: $color;
|
||||
}
|
||||
}`
|
||||
//- / This is the end of the statuses
|
||||
|
||||
- out += "\n\n//! / Core Code\n\n"
|
||||
|
||||
|
||||
| !{out}
|
||||
@@ -56,6 +56,11 @@ html(lang= lang )
|
||||
|
||||
block header
|
||||
|
||||
p.deprecated-switch
|
||||
span
|
||||
span#deprecated(role="switch")
|
||||
label(for="deprecated") Show deprecated patterns
|
||||
|
||||
main#main
|
||||
|
||||
h1= site
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
include _config
|
||||
block config
|
||||
|
||||
mixin h(h)
|
||||
if headings[h]
|
||||
h2= headings[h]
|
||||
|
||||
- var getDate = function(){
|
||||
- var d = new Date();
|
||||
- return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
|
||||
|
||||
54
src/pg/download.php.pug
Normal file
54
src/pg/download.php.pug
Normal file
@@ -0,0 +1,54 @@
|
||||
-
|
||||
var php = `<?php
|
||||
function recursor($dir, $type) {
|
||||
$result = array();
|
||||
|
||||
// create the pattern to get the type
|
||||
$x = "/_*.";
|
||||
for ($i = 0; $i < strlen($type); $i++){
|
||||
$x .= "[" . strtolower($type[$i]) . strtoupper($type[$i]) ."]";
|
||||
}
|
||||
|
||||
// get the directories
|
||||
foreach(glob($dir . "/*") as $d) {
|
||||
if ( is_dir( $d ) ) {
|
||||
|
||||
// find the files in each directory
|
||||
foreach (glob($d . $x) as $f) {
|
||||
$result[] = $f;
|
||||
}
|
||||
// $more = recursor($d, $type);
|
||||
// $result = array_merge($result, $more);
|
||||
$result = array_merge($result, recursor($d, $type));
|
||||
}
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
|
||||
$allowed_types = ["scss", "js"];
|
||||
$patterns = dirname(dirname(__file__)) . "/src/pg/patterns";
|
||||
|
||||
|
||||
if (!isset($_SERVER['QUERY_STRING']) || !in_array($_SERVER['QUERY_STRING'], $allowed_types)) {
|
||||
echo "File extension type is not defined. Ensure that you have added ?[file extension] to the URL. If you have defined a file extension and it is not allowed, you'll need to contact the an administrator to get the requested files.";
|
||||
die();
|
||||
}
|
||||
|
||||
$type = $_SERVER['QUERY_STRING'];
|
||||
|
||||
$file_list = recursor($patterns, $type);
|
||||
|
||||
$f = tmpfile();
|
||||
$t = stream_get_meta_data($f)['uri'];
|
||||
$z = new ZipArchive();
|
||||
|
||||
$zf = $z->open($t, ZipArchive::CREATE);
|
||||
foreach($file_list as $f) {
|
||||
$z->addFile($f, preg_replace('/^.*?patterns\\//', '', $f));
|
||||
}
|
||||
$z->close();
|
||||
|
||||
header('Content-type: application/zip');
|
||||
header(sprintf('Content-Disposition: attachment; filename="%s.zip"', $type));
|
||||
echo(file_get_contents($t)); ?>`
|
||||
| !{php}
|
||||
@@ -1,7 +1,6 @@
|
||||
extends _master-index.pug
|
||||
|
||||
block config
|
||||
- var site = "DS2 core"
|
||||
|
||||
|
||||
block head
|
||||
|
||||
BIN
src/pg/patterns/.DS_Store
vendored
BIN
src/pg/patterns/.DS_Store
vendored
Binary file not shown.
@@ -3,4 +3,5 @@ extends ../../_master-pattern
|
||||
|
||||
block content
|
||||
include ../../_color-samples
|
||||
+color-samples(colours, "colours")
|
||||
h2 Primary colours
|
||||
+color-samples(colours, "colors")
|
||||
|
||||
BIN
src/pg/patterns/components/.DS_Store
vendored
BIN
src/pg/patterns/components/.DS_Store
vendored
Binary file not shown.
138
src/pg/patterns/components/sticky-note-core/_sticky-note.js
Normal file
138
src/pg/patterns/components/sticky-note-core/_sticky-note.js
Normal file
@@ -0,0 +1,138 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
const font = {
|
||||
size: 0
|
||||
}
|
||||
|
||||
const pos = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
function drag(sticky) {
|
||||
sticky.onmousedown = event => {
|
||||
// get the position within the sticky
|
||||
pos.x = (event.clientX - sticky.offsetLeft);
|
||||
pos.y = (event.clientY - sticky.offsetTop);
|
||||
|
||||
// on mouse move, move the sticky to the position, minus the offset, of the mouse
|
||||
document.onmousemove = documentEvent => {
|
||||
sticky.style.top = (documentEvent.clientY - pos.y) + 'px';
|
||||
sticky.style.left = (documentEvent.clientX - pos.x) + 'px';
|
||||
sticky.setAttribute("moved", "true");
|
||||
}
|
||||
// when done, remove mouse move and mouse up handlers.
|
||||
document.onmouseup = () => {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function waitForElement(selector) {
|
||||
return new Promise(resolve => {
|
||||
if (document.querySelector(selector)) {
|
||||
return resolve(document.querySelector(selector));
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(mutations => {
|
||||
if (document.querySelector(selector)) {
|
||||
observer.disconnect();
|
||||
resolve(document.querySelector(selector));
|
||||
}
|
||||
});
|
||||
|
||||
// If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const checkBottom = (attach) => {
|
||||
// check if top or bottom
|
||||
if (attach.y < 0) {
|
||||
attach.ys = "bottom";
|
||||
attach.y = attach.y * -1;
|
||||
}
|
||||
}
|
||||
|
||||
const setStickyPostions = (s, attach) => {
|
||||
// set
|
||||
s.style[attach.ys] = `${attach.y}px`;
|
||||
s.style[attach.xs] = `${attach.x}px`;
|
||||
s.style.display = "grid";
|
||||
}
|
||||
|
||||
const css = (el, attr) => {
|
||||
let st = ""
|
||||
Object.entries(attr).forEach(val => {
|
||||
const [key, value] = val;
|
||||
st += `${key}: ${value}; `;
|
||||
})
|
||||
el.setAttribute("style",st.trim());
|
||||
}
|
||||
|
||||
const setupStickies = () => {
|
||||
let stickies = document.querySelectorAll("sticky-note");
|
||||
stickies.forEach((s) => {
|
||||
if (s.style.position !== "absolute") {
|
||||
|
||||
let wrapper = document.createElement("sticky-note-wrapper");
|
||||
|
||||
s.parentNode.insertBefore(wrapper, s);
|
||||
wrapper.appendChild(s);
|
||||
|
||||
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
|
||||
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
|
||||
}
|
||||
calculateStickyPosition(s);
|
||||
drag(s);
|
||||
s.ondblclick = (e) => {
|
||||
if (e.ctrlKey) {
|
||||
calculateStickyPosition(s);
|
||||
} else {
|
||||
// add one click select
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const calculateStickyPosition = (s) => {
|
||||
let float = s.getAttribute("float");
|
||||
let p = s.parentNode.getBoundingClientRect()
|
||||
switch (float) {
|
||||
case "left":
|
||||
css(s, {left: (p.left * -1) + "px"})
|
||||
break;
|
||||
case "right":
|
||||
css(s, { left: (Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) - p.left - s.offsetWidth - (font.size * 2)) + "px" });
|
||||
break;
|
||||
}
|
||||
|
||||
let offset = s.getAttribute("offset");
|
||||
if (offset !== null) {
|
||||
offset = offset.trim().split(" ");
|
||||
css(s, {top: offset[0], left: offset[1] })
|
||||
}
|
||||
}
|
||||
|
||||
export function init(callback){
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
|
||||
setupStickies();
|
||||
|
||||
let stickies = document.querySelectorAll("sticky-note");
|
||||
stickies.forEach((s) => {
|
||||
|
||||
})
|
||||
|
||||
window.onresize = () => {
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
|
||||
let stickies = document.querySelectorAll("sticky-note");
|
||||
stickies.forEach((s) => {
|
||||
calculateStickyPosition(s);
|
||||
});
|
||||
}
|
||||
}
|
||||
152
src/pg/patterns/components/sticky-note-core/_sticky-note.scss
Normal file
152
src/pg/patterns/components/sticky-note-core/_sticky-note.scss
Normal file
@@ -0,0 +1,152 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
@use 'sass:color';
|
||||
@use "sass:map";
|
||||
@use 'sass:list';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
|
||||
|
||||
$sticky-colors: (
|
||||
"yellow": #ffffd3,
|
||||
"blue": #94daea,
|
||||
"pink": #fa728b,
|
||||
"green": #bbfbc0 ) !default;
|
||||
|
||||
@mixin sticky-note {
|
||||
sticky-note-wrapper {
|
||||
box-sizing: border-box;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: .5rem;
|
||||
position: relative;
|
||||
width: .5rem;
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
sticky-note {
|
||||
cursor: grab;
|
||||
display: grid;
|
||||
float: left;
|
||||
font-size: 1rem;
|
||||
height: 13rem;
|
||||
left: 0;
|
||||
place-items: stretch;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 13rem;
|
||||
z-index: 100;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
//width: 15rem;
|
||||
// background-color: green;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
//width: 20rem;
|
||||
// background-color: blue;
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
//width: 30rem;
|
||||
// background-color: yellow;
|
||||
}
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
@content;
|
||||
|
||||
> div {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
&:nth-child(1) {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
display: grid;
|
||||
margin: 2rem 1rem .25rem .36rem;
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
}
|
||||
&:nth-child(2) {
|
||||
clip-path: url(#stickyClip);
|
||||
display: grid;
|
||||
font-family: "Kalam", cursive;
|
||||
font-style: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.25rem;
|
||||
padding: 1rem;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
// not adding this because maybe we want the sticky note text to be able to be selected and copied.
|
||||
// user-select: none;
|
||||
> * {
|
||||
font-family: "Kalam", cursive !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
max-width: 13rem;
|
||||
min-width: 13rem;
|
||||
width: 1rem;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 1.75rem;
|
||||
max-width: 21rem;
|
||||
min-height: 21rem;
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
font-size: 2.5rem;
|
||||
max-width: 26rem;
|
||||
min-height: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// default colour
|
||||
> div:nth-child(2) {
|
||||
$sticky-color: nth(map.values($sticky-colors), 1);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
lighten($sticky-color, 2%) 0%,
|
||||
$sticky-color 2%,
|
||||
$sticky-color 12%,
|
||||
darken($sticky-color, 2%) 75%,
|
||||
darken($sticky-color, 5%) 100%
|
||||
);
|
||||
}
|
||||
// all class colors
|
||||
@each $class, $sticky-color in $sticky-colors {
|
||||
&.#{$class} > div:nth-child(2) {
|
||||
@if $class != nth(map.keys($sticky-colors), 1) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
lighten($sticky-color, 2%) 0%,
|
||||
$sticky-color 2%,
|
||||
$sticky-color 12%,
|
||||
darken($sticky-color, 2%) 75%,
|
||||
darken($sticky-color, 5%) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:has(sticky-note:hover) {
|
||||
background-color: #{nth(map.values($sticky-colors), 1)};
|
||||
border: 1px solid black;
|
||||
|
||||
}
|
||||
@each $class, $sticky-color in $sticky-colors {
|
||||
&:has(sticky-note.#{$class}:hover) {
|
||||
background-color: $sticky-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/pg/patterns/components/sticky-note-core/index.pug
Normal file
24
src/pg/patterns/components/sticky-note-core/index.pug
Normal file
@@ -0,0 +1,24 @@
|
||||
extends ../../../_master-pattern.pug
|
||||
block content
|
||||
+h(0)
|
||||
+h(1)
|
||||
+h(2)
|
||||
p Uses absolute positioning.
|
||||
sticky-note(float="right").blue This #[strong is] a test
|
||||
| You might need to add relative positioning to it's container.
|
||||
|
||||
p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements".
|
||||
|
||||
sticky-note another one
|
||||
|
||||
p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements".
|
||||
|
||||
|
||||
|
||||
div#sticky-note.tab-group
|
||||
pre.language-css(data-tab="css")
|
||||
include sticky-note.css
|
||||
pre.language-css(data-tab="scss")
|
||||
include _sticky-note.scss
|
||||
pre.language-js(data-tab="js")
|
||||
include _sticky-note.js
|
||||
126
src/pg/patterns/components/sticky-note-core/sticky-note.css
Normal file
126
src/pg/patterns/components/sticky-note-core/sticky-note.css
Normal file
@@ -0,0 +1,126 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");
|
||||
sticky-note-wrapper {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 0.5rem;
|
||||
position: relative;
|
||||
width: 0.5rem;
|
||||
}
|
||||
sticky-note-wrapper * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
sticky-note-wrapper sticky-note {
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
float: left;
|
||||
font-size: 1rem;
|
||||
height: 13rem;
|
||||
left: 0;
|
||||
place-items: stretch;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 13rem;
|
||||
z-index: 100;
|
||||
}
|
||||
sticky-note-wrapper sticky-note:active {
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
sticky-note-wrapper sticky-note.right {
|
||||
float: right;
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div {
|
||||
-ms-grid-row: 1;
|
||||
grid-row: 1;
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div:nth-child(1) {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
-webkit-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
margin: 2rem 1rem 0.25rem 0.36rem;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
clip-path: url(#stickyClip);
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
font-family: "Kalam", cursive;
|
||||
font-style: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.25rem;
|
||||
padding: 1rem;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) > * {
|
||||
font-family: "Kalam", cursive !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
max-width: 13rem;
|
||||
min-width: 13rem;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
font-size: 1.75rem;
|
||||
max-width: 21rem;
|
||||
min-height: 21rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
font-size: 2.5rem;
|
||||
max-width: 26rem;
|
||||
min-height: 26rem;
|
||||
}
|
||||
}
|
||||
sticky-note-wrapper sticky-note > div:nth-child(2) {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ffffdd), color-stop(2%, #ffffd3), color-stop(12%, #ffffd3), color-stop(75%, #ffffc9), to(#ffffba));
|
||||
background: linear-gradient(180deg, #ffffdd 0%, #ffffd3 2%, #ffffd3 12%, #ffffc9 75%, #ffffba 100%);
|
||||
}
|
||||
sticky-note-wrapper sticky-note.blue > div:nth-child(2) {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#9dddec), color-stop(2%, #94daea), color-stop(12%, #94daea), color-stop(75%, #8bd7e8), to(#7fd3e6));
|
||||
background: linear-gradient(180deg, #9dddec 0%, #94daea 2%, #94daea 12%, #8bd7e8 75%, #7fd3e6 100%);
|
||||
}
|
||||
sticky-note-wrapper sticky-note.pink > div:nth-child(2) {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fa7c93), color-stop(2%, #fa728b), color-stop(12%, #fa728b), color-stop(75%, #fa6883), to(#f95977));
|
||||
background: linear-gradient(180deg, #fa7c93 0%, #fa728b 2%, #fa728b 12%, #fa6883 75%, #f95977 100%);
|
||||
}
|
||||
sticky-note-wrapper sticky-note.green > div:nth-child(2) {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#c5fcc9), color-stop(2%, #bbfbc0), color-stop(12%, #bbfbc0), color-stop(75%, #b1fab7), to(#a3faaa));
|
||||
background: linear-gradient(180deg, #c5fcc9 0%, #bbfbc0 2%, #bbfbc0 12%, #b1fab7 75%, #a3faaa 100%);
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note:hover) {
|
||||
background-color: #ffffd3;
|
||||
border: 1px solid black;
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note.yellow:hover) {
|
||||
background-color: #ffffd3;
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note.blue:hover) {
|
||||
background-color: #94daea;
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note.pink:hover) {
|
||||
background-color: #fa728b;
|
||||
}
|
||||
sticky-note-wrapper:has(sticky-note.green:hover) {
|
||||
background-color: #bbfbc0;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
@import "_sticky-note";
|
||||
@include sticky-note;
|
||||
@@ -1,3 +1,5 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
function flip(e) {
|
||||
let sw = e.currentTarget;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
$switch-accent: #2e51a1 !default; // switch background when switched right (on/ true)
|
||||
|
||||
@@ -3,6 +3,10 @@ extends ../../../_master-pattern.pug
|
||||
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
+h(1)
|
||||
+h(2)
|
||||
|
||||
h2 Example
|
||||
p.switch
|
||||
label(for="example-switch") Switch label
|
||||
|
||||
5
src/pg/patterns/components/tooltip-core/_tooltip.pug
Normal file
5
src/pg/patterns/components/tooltip-core/_tooltip.pug
Normal file
@@ -0,0 +1,5 @@
|
||||
a(href="#") Link with a tool tip
|
||||
div(role="tooltip" inert tip-position="bottom") Tool tip content
|
||||
|
||||
a(href="#") Link with a tool tip
|
||||
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content
|
||||
177
src/pg/patterns/components/tooltip-core/_tooltip.scss
Normal file
177
src/pg/patterns/components/tooltip-core/_tooltip.scss
Normal file
@@ -0,0 +1,177 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
$tooltip-border-radius: .5rem !default;
|
||||
$tooltip-dark-allow: true !default;
|
||||
$tooltip-dark-background: #1f2127 !default;
|
||||
$tooltip-dark-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 50%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 50%)) !default;
|
||||
$tooltip-dark-foreground: #fff !default;
|
||||
$tooltip-light-background: #fff !default;
|
||||
$tooltip-light-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 15%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 15%)) !default;
|
||||
$tooltip-light-foreground: #000 !default;
|
||||
$tooltip-padding-sides: 1.5rem !default;
|
||||
$tooltip-padding-top-bottom: 0.75rem !default;
|
||||
$tooltip-pointer-size: 1rem !default;
|
||||
$tooltip-pointer-bottom: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom / 100% 50% no-repeat !default;
|
||||
$tooltip-pointer-left: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left / 50% 100% no-repeat !default;
|
||||
$tooltip-pointer-right: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right / 50% 100% no-repeat !default;
|
||||
$tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top / 100% 50% no-repeat !default;
|
||||
/* Position Options
|
||||
- top / block-start
|
||||
- right / inline-end
|
||||
- bottom / block-end
|
||||
- left / inline-start
|
||||
*/
|
||||
|
||||
@mixin tooltip {
|
||||
[role="tooltip"] {
|
||||
background: $tooltip-light-background;
|
||||
border-radius: $tooltip-border-radius;
|
||||
color: $tooltip-light-foreground;
|
||||
filter: $tooltip-light-drop-shadow;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
inline-size: max-content;
|
||||
line-height: initial;
|
||||
margin: 0;
|
||||
max-inline-size: 25rem;
|
||||
opacity: 0;
|
||||
padding: $tooltip-padding-top-bottom $tooltip-padding-sides;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
text-align: start;
|
||||
transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
user-select: none;
|
||||
will-change: filter;
|
||||
z-index: 10;
|
||||
|
||||
&::before {
|
||||
clip-path: inset(50%);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
content: "; Has tooltip: ";
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: $tooltip-light-background;
|
||||
content: "";
|
||||
inset: 0;
|
||||
mask: var(--tooltip-pointer);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:is( [tip-position="top"],
|
||||
[tip-position="block-start"],
|
||||
:not([tip-position]),
|
||||
[tip-position="bottom"],
|
||||
[tip-position="block-end"]
|
||||
) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:is( [tip-position="top"],
|
||||
[tip-position="block-start"],
|
||||
:not([tip-position])
|
||||
) {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-end: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
|
||||
--tooltip-x: calc(50% * -1);
|
||||
|
||||
&::after {
|
||||
--tooltip-pointer: #{$tooltip-pointer-bottom};
|
||||
inset-block-end: calc($tooltip-pointer-size * -1);
|
||||
border-block-end: $tooltip-pointer-size solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:is( [tip-position="right"],
|
||||
[tip-position="inline-end"]
|
||||
) {
|
||||
inset-inline-start: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
|
||||
inset-block-end: 50%;
|
||||
--tooltip-y: 50%;
|
||||
|
||||
&::after {
|
||||
--tooltip-pointer: #{$tooltip-pointer-left};
|
||||
inset-inline-start: calc($tooltip-pointer-size * -1);
|
||||
border-inline-start: $tooltip-pointer-size solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:is( [tip-position="bottom"],
|
||||
[tip-position="block-end"]
|
||||
) {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-start: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
|
||||
--tooltip-x: calc(50% * -1);
|
||||
|
||||
&::after {
|
||||
--tooltip-pointer: #{$tooltip-pointer-top};
|
||||
inset-block-start: calc($tooltip-pointer-size * -1);
|
||||
border-block-start: $tooltip-pointer-size solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:is( [tip-position="left"],
|
||||
[tip-position="inline-start"]
|
||||
) {
|
||||
inset-inline-end: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
|
||||
inset-block-end: 50%;
|
||||
--tooltip-y: 50%;
|
||||
|
||||
&::after {
|
||||
--tooltip-pointer: #{$tooltip-pointer-right};
|
||||
inset-inline-end: calc($tooltip-pointer-size * -1);
|
||||
-webkit-border-end: $tooltip-pointer-size solid transparent;
|
||||
border-inline-end: $tooltip-pointer-size solid transparent;
|
||||
}
|
||||
}
|
||||
@if ($tooltip-dark-allow == true ) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $tooltip-dark-background;
|
||||
color: $tooltip-dark-foreground;
|
||||
filter: $tooltip-dark-drop-shadow;
|
||||
&::after {
|
||||
background: $tooltip-dark-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:has(> [role="tooltip"]) {
|
||||
position: relative;
|
||||
&:is(:hover, :focus-visible, :active) > [role="tooltip"] {
|
||||
opacity: 1;
|
||||
transition-delay: 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
|
||||
:has(> [role="tooltip"]:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) [role="tooltip"] {
|
||||
--tooltip-y: 3px;
|
||||
}
|
||||
|
||||
:has(> [role="tooltip"]:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) [role="tooltip"] {
|
||||
--tooltip-x: calc(-1 * -3px * -1);
|
||||
}
|
||||
|
||||
:has(> [role="tooltip"]:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) [role="tooltip"] {
|
||||
--tooltip-y: -3px;
|
||||
}
|
||||
|
||||
:has(> [role="tooltip"]:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) [role="tooltip"] {
|
||||
--tooltip-x: calc(-1 * 3px * -1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
32
src/pg/patterns/components/tooltip-core/index.pug
Normal file
32
src/pg/patterns/components/tooltip-core/index.pug
Normal file
@@ -0,0 +1,32 @@
|
||||
extends ../../../_master-pattern.pug
|
||||
|
||||
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
+h(1)
|
||||
+h(2)
|
||||
|
||||
p Either form works. Place this inside another element for the tooltip to be "linked to that element."
|
||||
|
||||
|
||||
|
||||
|
||||
p Tool tip positions are:
|
||||
ul
|
||||
li top / block-start
|
||||
li right / inline-end
|
||||
li bottom / block-end
|
||||
li left / inline-start
|
||||
|
||||
|
||||
div#tooltip.tab-group
|
||||
pre.language-html(data-tab="html")
|
||||
include _tooltip.pug
|
||||
pre.language-pug(data-tab="pug")
|
||||
include tooltip.pug
|
||||
pre.language-css(data-tab="css")
|
||||
include tooltip.css
|
||||
pre.language-css(data-tab="scss")
|
||||
include _tooltip.scss
|
||||
|
||||
155
src/pg/patterns/components/tooltip-core/tooltip.css
Normal file
155
src/pg/patterns/components/tooltip-core/tooltip.css
Normal file
@@ -0,0 +1,155 @@
|
||||
/* Position Options
|
||||
- top / block-start
|
||||
- right / inline-end
|
||||
- bottom / block-end
|
||||
- left / inline-start
|
||||
*/
|
||||
[role=tooltip] {
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
color: #000;
|
||||
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
|
||||
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
inline-size: -webkit-max-content;
|
||||
inline-size: -moz-max-content;
|
||||
inline-size: max-content;
|
||||
line-height: initial;
|
||||
margin: 0;
|
||||
max-inline-size: 25rem;
|
||||
opacity: 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
text-align: start;
|
||||
-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||||
-ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||||
transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
|
||||
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
|
||||
transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
will-change: filter;
|
||||
z-index: 10;
|
||||
}
|
||||
[role=tooltip]::before {
|
||||
clip-path: inset(50%);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
content: "; Has tooltip: ";
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
[role=tooltip]::after {
|
||||
background: #fff;
|
||||
content: "";
|
||||
inset: 0;
|
||||
-webkit-mask: var(--tooltip-pointer);
|
||||
mask: var(--tooltip-pointer);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=top],
|
||||
[tip-position=block-start],
|
||||
:not([tip-position]),
|
||||
[tip-position=bottom],
|
||||
[tip-position=block-end]) {
|
||||
text-align: center;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=top],
|
||||
[tip-position=block-start],
|
||||
:not([tip-position])) {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-end: calc(100% + 0.75rem + 1rem);
|
||||
--tooltip-x: calc(50% * -1);
|
||||
}
|
||||
[role=tooltip]:is([tip-position=top],
|
||||
[tip-position=block-start],
|
||||
:not([tip-position]))::after {
|
||||
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
|
||||
inset-block-end: -1rem;
|
||||
-webkit-border-after: 1rem solid transparent;
|
||||
border-block-end: 1rem solid transparent;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=right],
|
||||
[tip-position=inline-end]) {
|
||||
inset-inline-start: calc(100% + 1.5rem + 1rem);
|
||||
inset-block-end: 50%;
|
||||
--tooltip-y: 50%;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=right],
|
||||
[tip-position=inline-end])::after {
|
||||
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
|
||||
inset-inline-start: -1rem;
|
||||
-webkit-border-start: 1rem solid transparent;
|
||||
border-inline-start: 1rem solid transparent;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=bottom],
|
||||
[tip-position=block-end]) {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-start: calc(100% + 0.75rem + 1rem);
|
||||
--tooltip-x: calc(50% * -1);
|
||||
}
|
||||
[role=tooltip]:is([tip-position=bottom],
|
||||
[tip-position=block-end])::after {
|
||||
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
|
||||
inset-block-start: -1rem;
|
||||
-webkit-border-before: 1rem solid transparent;
|
||||
border-block-start: 1rem solid transparent;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=left],
|
||||
[tip-position=inline-start]) {
|
||||
inset-inline-end: calc(100% + 1.5rem + 1rem);
|
||||
inset-block-end: 50%;
|
||||
--tooltip-y: 50%;
|
||||
}
|
||||
[role=tooltip]:is([tip-position=left],
|
||||
[tip-position=inline-start])::after {
|
||||
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
|
||||
inset-inline-end: -1rem;
|
||||
-webkit-border-end: 1rem solid transparent;
|
||||
border-inline-end: 1rem solid transparent;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[role=tooltip] {
|
||||
background: #1f2127;
|
||||
color: #fff;
|
||||
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
|
||||
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
|
||||
}
|
||||
[role=tooltip]::after {
|
||||
background: #1f2127;
|
||||
}
|
||||
}
|
||||
|
||||
:has(> [role=tooltip]) {
|
||||
position: relative;
|
||||
}
|
||||
:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
|
||||
opacity: 1;
|
||||
-webkit-transition-delay: 300ms;
|
||||
transition-delay: 300ms;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
|
||||
--tooltip-y: 3px;
|
||||
}
|
||||
:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
|
||||
--tooltip-x: calc(-1 * -3px * -1);
|
||||
}
|
||||
:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
|
||||
--tooltip-y: -3px;
|
||||
}
|
||||
:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
|
||||
--tooltip-x: calc(-1 * 3px * -1);
|
||||
}
|
||||
}
|
||||
6
src/pg/patterns/components/tooltip-core/tooltip.pug
Normal file
6
src/pg/patterns/components/tooltip-core/tooltip.pug
Normal file
@@ -0,0 +1,6 @@
|
||||
.
|
||||
a(href="#") Link with a tool tip
|
||||
div(role="tooltip" inert tip-position="bottom") Tool tip content
|
||||
|
||||
a(href="#") Link with a tool tip
|
||||
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content
|
||||
5
src/pg/patterns/components/tooltip-core/tooltip.scss
Normal file
5
src/pg/patterns/components/tooltip-core/tooltip.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
@import "_tooltip.scss";
|
||||
@include tooltip;
|
||||
BIN
src/pg/patterns/layouts/.DS_Store
vendored
BIN
src/pg/patterns/layouts/.DS_Store
vendored
Binary file not shown.
@@ -1,3 +1,6 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
|
||||
|
||||
@mixin breakpoint-debug {
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
//- required variables
|
||||
//- site - the site name that goes in the site title
|
||||
//- root - the path to the root of the site
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
$header-bg-color: var(--color-grey-xl) !default;
|
||||
$font-heading: sans-serif !default;
|
||||
$font-weight: 700 !default;
|
||||
|
||||
@@ -1 +1,53 @@
|
||||
header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--color-grey-xl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}
|
||||
header {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-rows: 1.75rem 3.5rem;
|
||||
grid-template-rows: 1.75rem 3.5rem;
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 2;
|
||||
grid-column: 2/4;
|
||||
overflow: hidden;
|
||||
}
|
||||
header svg {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1/-1;
|
||||
-ms-grid-row-align: stretch;
|
||||
-ms-grid-column-align: stretch;
|
||||
place-self: stretch;
|
||||
}
|
||||
header svg text {
|
||||
-webkit-transform: translate(-1rem, 7.25rem);
|
||||
-ms-transform: translate(-1rem, 7.25rem);
|
||||
transform: translate(-1rem, 7.25rem);
|
||||
font-size: 10rem;
|
||||
font-weight: 1000;
|
||||
font-family: sans-serif;
|
||||
fill: var(--color-grey-xl);
|
||||
}
|
||||
header > div {
|
||||
-ms-grid-row: 2;
|
||||
grid-row: 2;
|
||||
grid-column: 1/-1;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-column-gap: 1rem;
|
||||
-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
|
||||
-ms-grid-columns: auto max-content max-content;
|
||||
grid-template-columns: auto -webkit-max-content -webkit-max-content;
|
||||
grid-template-columns: auto max-content max-content;
|
||||
}
|
||||
header > div .header-title h1 {
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
header > div .header-title h1 a, header > div .header-title h1 a:visited {
|
||||
border-bottom: none;
|
||||
color: var(--colour-black);
|
||||
font-family: sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
// this file imports and generates the css for inclusion
|
||||
|
||||
// this file should not be minified
|
||||
|
||||
49
src/pg/patterns/layouts/table-core/_table.scss
Normal file
49
src/pg/patterns/layouts/table-core/_table.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
$font-body: sans-serif !default;
|
||||
|
||||
@mixin table {
|
||||
table:not([role="presentation"]) {
|
||||
border-collapse: collapse;
|
||||
border-top: 2px solid var(--color-grey);
|
||||
margin: 0 0 1rem 0;
|
||||
caption {
|
||||
font-family: $font-body;
|
||||
font-family: 1.25rem;
|
||||
}
|
||||
thead {
|
||||
tr {
|
||||
td, th {
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
border-right: 1px solid var(--color-white);
|
||||
background-color: var(--color-grey-xxl);
|
||||
font-family: $font-body;
|
||||
font-weight: bold;
|
||||
padding: .25rem .5rem;
|
||||
&:last-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-grey-xl);
|
||||
border-right: 1px solid var(--color-grey-xl);
|
||||
font-family: $font-body;
|
||||
padding: .25rem .5rem;
|
||||
&:last-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
&:last-child td {
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
}
|
||||
}
|
||||
+ caption {
|
||||
font-family: $font-body;
|
||||
font-size: .9rem;
|
||||
caption-side: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
src/pg/patterns/layouts/tabs-core/_tabs-jquery.js
Normal file
27
src/pg/patterns/layouts/tabs-core/_tabs-jquery.js
Normal file
@@ -0,0 +1,27 @@
|
||||
jQuery(document).ready(function($){
|
||||
$(".tab-group").each(function(){
|
||||
if ($(this).children('[role="tablist"]').length > 0) {
|
||||
let tabgroup = $(this).attr("id"),
|
||||
tablist = "";
|
||||
$(this).children("*").each(function(){
|
||||
let tab = $(this).attr("data-tab");
|
||||
if (typeof tab !== 'undefined' && tab !== false) {
|
||||
let tabID = tab.replace(/\W+/g,"-").toLowerCase();
|
||||
$(this).wrap(`<div id="tab-panel-${tabgroup + "-" + tabID }" ${(tablist == "" ? "class='open'" : "")} role="tabpanel" tabindex="0" aria-labeledby="tab-${tabgroup + "-" + tabID }"></div>`);
|
||||
tablist += `<li role="tab" ${(tablist == "" ? "class='selected'" : "")} id="tab-${tabgroup + "-" + tab.replace(/\W+/g,"-").toLowerCase()}"><span>${tab}</span></li>`;
|
||||
} else {
|
||||
$(this).addClass("tab-hidden");
|
||||
}
|
||||
|
||||
})
|
||||
$(this).prepend(`<ul role="tablist">${tablist}<li role="separator" class="separator"></li></ul>`);
|
||||
|
||||
$(this).children('[role="tab"]').on("click", function(){
|
||||
$(this).parent().children('[role="tab"]').removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
$(this).parent().parent().children('[role="tabpanel"]').removeClass("open");
|
||||
$("#" + $(this).attr("id").replace("tab", "tab-panel")).addClass("open");
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -1,24 +1,56 @@
|
||||
export function tabs($) {
|
||||
$(".tab-group").each(function(){
|
||||
let tabgroup = $(this).attr("id"),
|
||||
tablist = "";
|
||||
$(this).children("*").each(function(){
|
||||
let tab = $(this).attr("data-tab");
|
||||
if (typeof tab !== 'undefined' && tab !== false) {
|
||||
let tabID = tab.replace(/\W+/g,"-").toLowerCase();
|
||||
$(this).wrap(`<div id="tab-panel-${tabgroup + "-" + tabID }" ${(tablist == "" ? "class='open'" : "")} role="tabpanel" tabindex="0" aria-labeledby="tab-${tabgroup + "-" + tabID }"></div>`);
|
||||
tablist += `<li tabindex="0" role="tab" ${(tablist == "" ? "class='selected'" : "")} id="tab-${tabgroup + "-" + tab.replace(/\W+/g,"-").toLowerCase()}"><span>${tab}</span></li>`;
|
||||
} else {
|
||||
$(this).addClass("tab-hidden");
|
||||
}
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
//- import * as tabs from "../pg/patterns/layouts/tabs/_tabs-core.js";
|
||||
//- tabs.init();
|
||||
|
||||
|
||||
export function init() {
|
||||
const tabGroups = document.querySelectorAll(".tab-group, tabset");
|
||||
|
||||
tabGroups.forEach(tabGroup => {
|
||||
if (tabGroup.querySelector("[role=tablist]") === null) {
|
||||
const tabgroup = tabGroup.getAttribute("id");
|
||||
let tablist = "";
|
||||
|
||||
Array.from(tabGroup.children).forEach(child => {
|
||||
const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
if (tab !== null) {
|
||||
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
|
||||
const tabPanel = document.createElement('div');
|
||||
tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
|
||||
tabPanel.className = tablist === "" ? "open" : "";
|
||||
tabPanel.setAttribute("role", "tabpanel");
|
||||
tabPanel.setAttribute("tabindex", "0");
|
||||
tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
|
||||
tabPanel.appendChild(child.cloneNode(true));
|
||||
child.parentNode.replaceChild(tabPanel, child);
|
||||
tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
|
||||
} else {
|
||||
child.classList.add("tab-hidden");
|
||||
}
|
||||
});
|
||||
|
||||
const ul = document.createElement('ul');
|
||||
ul.setAttribute("role", "tablist");
|
||||
ul.innerHTML = `${tablist}<li role="separator" class="separator"></li>`;
|
||||
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
||||
|
||||
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
||||
tab.addEventListener("click", () => {
|
||||
const siblings = Array.from(tab.parentNode.children);
|
||||
siblings.forEach(sibling => sibling.classList.remove("selected"));
|
||||
tab.classList.add("selected");
|
||||
|
||||
const tabPanels = Array.from(tab.parentNode.parentNode.children)
|
||||
.filter(child => child.getAttribute("role") === "tabpanel");
|
||||
tabPanels.forEach(panel => panel.classList.remove("open"));
|
||||
|
||||
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
|
||||
document.getElementById(tabPanelId).classList.add("open");
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
$(this).prepend(`<ul role="tablist">${tablist}<li role="separator" class="separator"></li></ul>`);
|
||||
})
|
||||
$('[role="tab"]').on("click", function(){
|
||||
$(this).parent().children('[role="tab"]').removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
$(this).parent().parent().children('[role="tabpanel"]').removeClass("open");
|
||||
$("#" + $(this).attr("id").replace("tab", "tab-panel")).addClass("open");
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
4
src/pg/patterns/layouts/tabs-core/_tabs.pug
Normal file
4
src/pg/patterns/layouts/tabs-core/_tabs.pug
Normal file
@@ -0,0 +1,4 @@
|
||||
div#uniqueID.tab-group
|
||||
div(data-tab="[tab title]")
|
||||
div(data-tab="[tab title]")
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
$tab-border: var(--color-grey) !default;
|
||||
$tab-selected: var(--color-white) !default;
|
||||
$tab-notselected: var(--color-grey-xxl) !default;
|
||||
|
||||
@mixin tabs {
|
||||
.tab-group {
|
||||
tabset, .tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
> ul {
|
||||
display: flex;
|
||||
@@ -7,8 +14,8 @@
|
||||
padding: 0;
|
||||
|
||||
li.separator {
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
border-bottom: 1px solid $tab-border;
|
||||
border-left: 1px solid $tab-border;
|
||||
display: inline-block;
|
||||
margin: .45rem 0 0 0;
|
||||
width: 100%;
|
||||
@@ -20,22 +27,23 @@
|
||||
}
|
||||
|
||||
[role="tab"] {
|
||||
background-color: var(--color-white);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
border-top: 1px solid var(--color-grey);
|
||||
background-color: $tab-selected;
|
||||
border-left: 1px solid $tab-border;
|
||||
border-top: 1px solid $tab-border;
|
||||
border-radius: .5rem .5rem 0 0;
|
||||
cursor:pointer;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem .14rem 1.5rem;
|
||||
z-index: 2;
|
||||
|
||||
&:last-of-type {
|
||||
border-right: 1px solid var(--color-grey);
|
||||
border-right: 1px solid $tab-border;
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
background-color: var(--color-grey-xxl);
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
background-color: $tab-notselected;
|
||||
border-bottom: 1px solid $tab-border;
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -45,8 +53,8 @@
|
||||
|
||||
}
|
||||
[role="tabpanel"] {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-grey);
|
||||
background-color: $tab-selected;
|
||||
border: 1px solid $tab-border;
|
||||
border-top: none;
|
||||
padding: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
extends ../../../_master-pattern.pug
|
||||
|
||||
|
||||
block content
|
||||
|
||||
+h(0)
|
||||
+h(1)
|
||||
+h(2)
|
||||
|
||||
p The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should
|
||||
|
||||
ul
|
||||
@@ -14,21 +21,24 @@ block content
|
||||
p Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content.
|
||||
|
||||
|
||||
p The tab module is untested, but contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).
|
||||
p The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).
|
||||
|
||||
div#tabs.tab-group
|
||||
pre.language-html(data-tab="html").
|
||||
<div class="tab-group" id="[unique name]">
|
||||
<div data-tab="[tab title]"></div>
|
||||
<div data-tab="[tab title]"></div>
|
||||
...
|
||||
</div>
|
||||
|
||||
pre.language-css(data-tab="css")
|
||||
|
||||
|
||||
|
||||
tabset#tabs
|
||||
pre.language-html(tab="html")
|
||||
include _tabs.pug
|
||||
|
||||
//- pre.language-pug(tab="pug").
|
||||
include _tabs.pug
|
||||
|
||||
pre.language-css(tab="css")
|
||||
include tabs.css
|
||||
|
||||
pre.language-css(data-tab="scss")
|
||||
pre.language-css(tab="scss")
|
||||
include _tabs.scss
|
||||
|
||||
pre.language-css(data-tab="js")
|
||||
pre.language-css(tab="js")
|
||||
include _tabs.js
|
||||
|
||||
|
||||
@@ -1,51 +1,52 @@
|
||||
.tab-group {
|
||||
tabset, .tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
.tab-group > ul {
|
||||
tabset > ul, .tab-group > ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.tab-group > ul li.separator {
|
||||
tabset > ul li.separator, .tab-group > ul li.separator {
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
display: inline-block;
|
||||
margin: 0.45rem 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tab-group .tab-hidden {
|
||||
tabset .tab-hidden, .tab-group .tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
.tab-group [role=tab] {
|
||||
tabset [role=tab], .tab-group [role=tab] {
|
||||
background-color: var(--color-white);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
border-top: 1px solid var(--color-grey);
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem 0.14rem 1.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
.tab-group [role=tab]:last-of-type {
|
||||
tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
|
||||
border-right: 1px solid var(--color-grey);
|
||||
}
|
||||
.tab-group [role=tab]:not(.selected) {
|
||||
tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
|
||||
background-color: var(--color-grey-xxl);
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
}
|
||||
.tab-group [role=tab] span {
|
||||
tabset [role=tab] span, .tab-group [role=tab] span {
|
||||
display: block;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
.tab-group [role=tabpanel] {
|
||||
tabset [role=tabpanel], .tab-group [role=tabpanel] {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-grey);
|
||||
border-top: none;
|
||||
padding: 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.tab-group [role=tabpanel]:not(.open) {
|
||||
tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
// this file imports and generates the css for inclusion
|
||||
|
||||
// this file should not be minified
|
||||
//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
@import "_tabs.scss";
|
||||
@include tabs;
|
||||
@@ -1,60 +1,32 @@
|
||||
@mixin status {
|
||||
div.status-report {
|
||||
p.heading, td[colspan="2"] {
|
||||
font-size: 1.125rem;
|
||||
font-weight: bolder !important;
|
||||
grid-column: 1 / -1;
|
||||
margin: 2rem 0 .5rem 0;
|
||||
padding-top: 1.5rem !important;
|
||||
|
||||
}
|
||||
td:not([colspan="2"]) {
|
||||
span {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1rem;
|
||||
margin: 0 1rem 0 0;
|
||||
span[class^="status"]::after {
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contain {
|
||||
max-width: 100%;
|
||||
width: 30rem;
|
||||
ul {
|
||||
margin: 0 0 1rem 0;
|
||||
padding: 0;
|
||||
li {
|
||||
ul {
|
||||
padding: .5rem 0 0 1rem;
|
||||
}
|
||||
list-style-type: none;
|
||||
margin: 0 0 .25rem 0;
|
||||
> span {
|
||||
float: right;
|
||||
margin: 0 1rem 0 0;
|
||||
width: 8rem;
|
||||
span[class^="status"]::after {
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
float: right
|
||||
}
|
||||
}
|
||||
|
||||
// > span {
|
||||
// // display: inline-block;
|
||||
// float: right;
|
||||
// // width: 10rem;
|
||||
// > span::after {
|
||||
// height: 1rem !important;
|
||||
// width: 1rem !important;
|
||||
// margin-right: 1rem;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin status {
|
||||
div.status-report {
|
||||
p.heading, td[colspan="2"] {
|
||||
font-size: 1.125rem;
|
||||
font-weight: bolder !important;
|
||||
grid-column: 1 / -1;
|
||||
margin: 2rem 0 .5rem 0;
|
||||
padding-top: 1.5rem !important;
|
||||
|
||||
}
|
||||
td:not([colspan="2"]) {
|
||||
span {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1rem;
|
||||
margin: 0 1rem 0 0;
|
||||
span[class^="status"]::after {
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
a {
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
&.indent {
|
||||
a {
|
||||
margin: 0 1rem 0 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,114 +1,128 @@
|
||||
extends ../../../_master-pattern.pug
|
||||
//- extends ../../_master-pattern.pug
|
||||
|
||||
block content
|
||||
-
|
||||
- let list = []
|
||||
- for(let i = 0; i < content.length; i++) {
|
||||
- list.push({ "name": content[i].name, "path": content[i].name, "status": content[i].status } )
|
||||
- if (content[i].files != undefined) {
|
||||
- for (let ii = 0; ii < content[i].files.length; ii++) {
|
||||
- list.push({ "name": content[i].files[ii].name, "path": content[i].name +"."+ content[i].files[ii].name, "status": content[i].files[ii].status } )
|
||||
- if (content[i].files[ii].files != undefined) {
|
||||
- for (let iii = 0; iii < content[i].files[ii].files.length; iii++) {
|
||||
- list.push({ "name": content[i].files[ii].files[iii].name, "path": content[i].name +"."+ content[i].files[ii].name + "." + content[i].files[ii].files[iii].name, "status": content[i].files[ii].files[iii].status } )
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
- list.sort((a, b) => {
|
||||
- if (a.name < b.name) {
|
||||
- return -1;
|
||||
- }
|
||||
- if (a.name > b.name) {
|
||||
- return 1;
|
||||
- }
|
||||
- return 0;
|
||||
- });
|
||||
- function createURL(p) {
|
||||
- p = p.split(".")
|
||||
// - return p.length
|
||||
- return "./?p=" + p[0] + (p.length >= 2 ? "/" + p[1] : "") + (p.length >= 3 ? "/" + p[2] : "")
|
||||
- }
|
||||
- function getCategory(p) {
|
||||
- p = p.split(".")
|
||||
// - return p.length
|
||||
- return (p.length > 1 ? p[0].toContent().toSentenceCase() : "") + (p.length > 2 ? " / " + p[1].toContent().toSentenceCase() : "") + (p.length > 3 ? " / " + p[2].toContent().toSentenceCase() : "")
|
||||
- }
|
||||
- function getCount(obj) {
|
||||
- console.log(obj.name)
|
||||
- let count = 0;
|
||||
- if (obj.files != undefined) {
|
||||
- for(let i=0; i<obj.files.length; i++) {
|
||||
- count = count + getCount(obj.files[i])
|
||||
- }
|
||||
- }
|
||||
- count++;
|
||||
- return count;
|
||||
- }
|
||||
|
||||
div.tab-group#status-report
|
||||
div.status-report.status-report-structure(data-tab="by structure")
|
||||
div.contain
|
||||
each category in content
|
||||
p.heading= category.name.toContent().toSentenceCase() + " (" + getCount(category) + ")"
|
||||
ul
|
||||
li
|
||||
a(href="./?p=" + category.name)= category.name.toContent().toSentenceCase()
|
||||
span
|
||||
span(class="status-" + category.status)= category.status.toContent().toSentenceCase()
|
||||
|
||||
//- pre.language-js= JSON.stringify(category).replace(/,/g, ",\n")
|
||||
|
||||
if category.files
|
||||
each pattern in category.files
|
||||
li
|
||||
a(href="./?p=" + category.name + "/" + pattern.name )= pattern.name.toContent().toSentenceCase()
|
||||
span
|
||||
span(class="status-" + pattern.status)= pattern.status.toContent().toSentenceCase()
|
||||
if pattern.files
|
||||
ul
|
||||
each sub in pattern.files
|
||||
li
|
||||
a(href="./?p=" + category.name + "/" + pattern.name + "/" + sub.name )= sub.name.toContent().toSentenceCase()
|
||||
span
|
||||
span(class="status-" + sub.status)= sub.status.toContent().toSentenceCase()
|
||||
|
||||
div.status-report.status-report-status(data-tab="by status")
|
||||
- let statuses = ["not-started", "in-progress", "complete", "needs-review", "deprecated"];
|
||||
table
|
||||
thead
|
||||
tr
|
||||
td Pattern
|
||||
td Path
|
||||
tbody
|
||||
each status in statuses
|
||||
- out = list.filter(list => list.status === status)
|
||||
tr
|
||||
td(colspan="2")
|
||||
span(class="status-" + status)= status.toContent().toSentenceCase() + " (" + out.length + ")"
|
||||
|
||||
each item in out
|
||||
tr
|
||||
td
|
||||
a(href= createURL(item.path) )= item.name.toContent().toSentenceCase()
|
||||
td= getCategory(item.path)
|
||||
|
||||
div.status-report.status-report-alpha(data-tab="alphabetical")
|
||||
table
|
||||
thead
|
||||
tr
|
||||
td Pattern
|
||||
td Status
|
||||
td Path
|
||||
tbody
|
||||
each item in list
|
||||
tr
|
||||
td
|
||||
a(href= createURL(item.path) )= item.name.toContent().toSentenceCase()
|
||||
td
|
||||
span
|
||||
span(class="status-" + item.status)= item.status.toContent().toTitleCase()
|
||||
td= getCategory(item.path)
|
||||
|
||||
extends ../../_master-pattern.pug
|
||||
|
||||
block content
|
||||
-
|
||||
- let list = []
|
||||
- for(let i = 0; i < content.length; i++) {
|
||||
- list.push({ "name": content[i].name, "path": content[i].name, "status": content[i].status, "display": content[i].display } )
|
||||
- if (content[i].files != undefined) {
|
||||
- for (let ii = 0; ii < content[i].files.length; ii++) {
|
||||
- list.push({ "name": content[i].files[ii].name, "path": content[i].name +"."+ content[i].files[ii].name, "status": content[i].files[ii].status } )
|
||||
- if (content[i].files[ii].files != undefined) {
|
||||
- for (let iii = 0; iii < content[i].files[ii].files.length; iii++) {
|
||||
- list.push({ "name": content[i].files[ii].files[iii].name, "path": content[i].name +"."+ content[i].files[ii].name + "." + content[i].files[ii].files[iii].name, "status": content[i].files[ii].files[iii].status } )
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
- list.sort((a, b) => {
|
||||
- if (a.name < b.name) {
|
||||
- return -1;
|
||||
- }
|
||||
- if (a.name > b.name) {
|
||||
- return 1;
|
||||
- }
|
||||
- return 0;
|
||||
- });
|
||||
- function createURL(p) {
|
||||
- p = p.split(".")
|
||||
// - return p.length
|
||||
- return "./?p=" + p[0] + (p.length >= 2 ? "/" + p[1] : "") + (p.length >= 3 ? "/" + p[2] : "")
|
||||
- }
|
||||
- function getCategory(p) {
|
||||
- p = p.split(".")
|
||||
// - return p.length
|
||||
- return (p.length > 1 ? p[0].toContent().toSentenceCase() : "") + (p.length > 2 ? " / " + p[1].toContent().toSentenceCase() : "") + (p.length > 3 ? " / " + p[2].toContent().toSentenceCase() : "")
|
||||
- }
|
||||
- function getCount(obj) {
|
||||
- console.log(obj.name)
|
||||
- let count = 0;
|
||||
- if (obj.files != undefined) {
|
||||
- for(let i=0; i<obj.files.length; i++) {
|
||||
- count = count + getCount(obj.files[i])
|
||||
- }
|
||||
- }
|
||||
- count++;
|
||||
- return count;
|
||||
- }
|
||||
|
||||
div.tab-group#status-report
|
||||
div.status-report.status-report-structure(data-tab="by structure")
|
||||
table.custom(role="presentation")
|
||||
tbody
|
||||
each category in content
|
||||
tr
|
||||
td(colspan="2")= category.name.toContent().toSentenceCase() + " (" + getCount(category) + ")"
|
||||
tr
|
||||
td
|
||||
a(href="./?p=" + category.name)
|
||||
if category.display
|
||||
| !{category.display}
|
||||
else
|
||||
| !{category.name.toContent().toSentenceCase()}
|
||||
td
|
||||
span(class="status-" + category.status)= category.status.toContent().toSentenceCase()
|
||||
|
||||
|
||||
if category.files
|
||||
each pattern in category.files
|
||||
tr
|
||||
td
|
||||
a(href="./?p=" + category.name + "/" + pattern.name )
|
||||
if pattern.display
|
||||
| !{pattern.display}
|
||||
else
|
||||
| !{pattern.name.toContent().toSentenceCase()}
|
||||
td
|
||||
span(class="status-" + pattern.status)= pattern.status.toContent().toSentenceCase()
|
||||
|
||||
if pattern.files
|
||||
|
||||
each sub in pattern.files
|
||||
tr
|
||||
td.indent
|
||||
a(href="./?p=" + category.name + "/" + pattern.name + "/" + sub.name )
|
||||
if sub.display
|
||||
| !{sub.display}
|
||||
else
|
||||
| !{sub.name.toContent().toSentenceCase()}
|
||||
td
|
||||
span(class="status-" + sub.status)= sub.status.toContent().toSentenceCase()
|
||||
|
||||
div.status-report.status-report-status(data-tab="by status")
|
||||
table(role="presentation")
|
||||
|
||||
tbody
|
||||
each status in statuses || []
|
||||
- out = list.filter(list => list.status === status.name)
|
||||
tr
|
||||
td(colspan="2")
|
||||
span(class="status-" + status.name)= status.name.toContent().toSentenceCase() + " (" + out.length + ")"
|
||||
|
||||
each item in out
|
||||
tr
|
||||
td
|
||||
a(href= createURL(item.path) )
|
||||
if item.display
|
||||
| !{item.display}
|
||||
else
|
||||
| !{item.name.toContent().toSentenceCase()}
|
||||
td= getCategory(item.path)
|
||||
|
||||
div.status-report.status-report-alpha(data-tab="alphabetical")
|
||||
table(role="presentation")
|
||||
tbody
|
||||
each item in list
|
||||
tr
|
||||
td
|
||||
a(href= createURL(item.path) )
|
||||
if item.display
|
||||
| !{item.display}
|
||||
else
|
||||
| !{item.name.toContent().toSentenceCase()}
|
||||
td
|
||||
span
|
||||
span(class="status-" + item.status)= item.status.toContent().toTitleCase()
|
||||
td= getCategory(item.path)
|
||||
|
||||
|
||||
68
src/scss/_core.scss
Normal file
68
src/scss/_core.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
// This file is geneated by ../pg/_config.pug. Please make your changes there so they are not overwritten
|
||||
|
||||
$colors: (
|
||||
color-blue: #2e51a1,
|
||||
color-blue-l: #5c7abf,
|
||||
color-blue-xl: #b2c3ec,
|
||||
color-blue-d: #133176,
|
||||
color-blue-xd: #031235,
|
||||
|
||||
color-oj: #f0b031,
|
||||
color-oj-l: #ffcc67,
|
||||
color-oj-xl: #ffe4ad,
|
||||
color-oj-d: #cb8906,
|
||||
color-oj-xd: #9d6900,
|
||||
|
||||
color-raspberry: #da2c5b,
|
||||
color-raspberry-l: #ed5e85,
|
||||
color-raspberry-xl: #f9a4bb,
|
||||
color-raspberry-d: #9f0c34,
|
||||
color-raspberry-xd: #400011,
|
||||
|
||||
color-lime: #cde92f,
|
||||
color-lime-l: #e2f963,
|
||||
color-lime-xl: #effca6,
|
||||
color-lime-d: #9bb40b,
|
||||
color-lime-xd: #607100,
|
||||
|
||||
color-grey: #7f7f7f,
|
||||
color-grey-l: #b2b2b2,
|
||||
color-grey-xl: #d8d8d8,
|
||||
color-grey-xxl: #f0f0f0,
|
||||
color-white: #fff,
|
||||
color-page: #fff,
|
||||
color-light: #fff,
|
||||
color-grey-d: #4c4c4c,
|
||||
color-grey-xd: #4c4c4c,
|
||||
color-black: #000,
|
||||
color-dark: #000,
|
||||
|
||||
color-error: #a00109,
|
||||
color-error-text: #fff,
|
||||
|
||||
color-warn: #a38301,
|
||||
color-warn-text: #fff,
|
||||
|
||||
color-notify: #599601,
|
||||
color-notify-text: #fff,
|
||||
|
||||
color-info: #b2c3ec,
|
||||
color-info-text: #000,
|
||||
);
|
||||
:root {
|
||||
@each $name, $color in $colors {
|
||||
--#{$name}: #{$color};
|
||||
}
|
||||
}
|
||||
|
||||
@import "color-samples";
|
||||
|
||||
|
||||
$statuses: (
|
||||
"not-started": transparent,
|
||||
"another-status": red,
|
||||
"in-progress": var(--color-oj),
|
||||
"complete": var(--color-lime),
|
||||
"needs-review": var(--color-oj-xd),
|
||||
"deprecated": var(--color-raspberry),
|
||||
);
|
||||
@@ -1,149 +0,0 @@
|
||||
|
||||
|
||||
// all the really old stuff
|
||||
|
||||
|
||||
// body {
|
||||
// $hh: 75px;
|
||||
// $ww: 200px;
|
||||
// display: grid;
|
||||
// grid-template-columns: $ww calc(100vw - (#{$ww} ) );
|
||||
// grid-template-rows: $hh calc(100vh - #{$hh});
|
||||
// overflow: hidden;
|
||||
// margin: 0;
|
||||
|
||||
// header {
|
||||
// align-self: stretch;
|
||||
// color: var(--colour-white);
|
||||
// display: grid;
|
||||
// place-items: end;
|
||||
// background-color: var(--colour-green);
|
||||
// grid-column: 1 / -1;
|
||||
// grid-row: 1;
|
||||
// div {
|
||||
// padding: .5rem;
|
||||
// }
|
||||
// h1 {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// text-align: right;
|
||||
// font-family: $font-heading;
|
||||
// }
|
||||
// }
|
||||
// main {
|
||||
// display: inherit;
|
||||
// // grid-gap: 1rem;
|
||||
// grid-template-columns: inherit;
|
||||
// grid-column: 1 / -1;
|
||||
// aside {
|
||||
|
||||
// grid-column: 1;
|
||||
// place-items: stretch;
|
||||
// background-color: var(--colour-green);
|
||||
// > ul {
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: scroll;
|
||||
// max-height: calc(100vh - (75px + 2rem));
|
||||
// &::-webkit-scrollbar {
|
||||
// width: 0 !important
|
||||
// }
|
||||
// }
|
||||
// ul {
|
||||
// list-style-type: none;
|
||||
// padding: 0 0 .75rem 0;
|
||||
// li {
|
||||
|
||||
// @each $name, $colour in $statuses {
|
||||
// .status-#{$name}::after {
|
||||
// background-color: var(--colour-#{$colour});
|
||||
// border: 1px solid var(--colour-black-3);
|
||||
// border-radius: 50%;
|
||||
// content: " ";
|
||||
// display: inline-block;
|
||||
// height: .5rem;
|
||||
// margin-left: .5rem;
|
||||
// width: .5rem;
|
||||
// }
|
||||
// }
|
||||
// .status- { // don't show a border if a no status informatoin is actually included
|
||||
// border: none;
|
||||
// }
|
||||
|
||||
// details {
|
||||
// padding: 0 0 0 .5rem;
|
||||
// > summary {
|
||||
// color: var(--colour-white);
|
||||
// list-style: none;
|
||||
// display: grid;
|
||||
// grid-template-columns: auto max-content;
|
||||
|
||||
// }
|
||||
// summary::after {
|
||||
// content: '►\00a0';
|
||||
// place-self: center;
|
||||
// }
|
||||
// &[open] summary:after {
|
||||
// content: "▼\00a0";
|
||||
// place-self: center;
|
||||
// }
|
||||
// ul li {
|
||||
// padding: 0 0 0 .5rem;
|
||||
|
||||
// &.active {
|
||||
// background-color: var(--colour-white);
|
||||
// a {
|
||||
// color: var(--colour-black);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// a {
|
||||
// color: var(--colour-white);
|
||||
// display: block;
|
||||
// font-family: $font-body;
|
||||
// padding: .25rem;
|
||||
// text-decoration: none;
|
||||
// &:hover {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// }
|
||||
// &.active { // (li)
|
||||
// summary {
|
||||
// background-color: var(--colour-white);
|
||||
// a {
|
||||
// color: var(--colour-black);
|
||||
// }
|
||||
// }
|
||||
// details {
|
||||
// summary {
|
||||
// &::after {
|
||||
// color: var(--colour-black);
|
||||
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// section {
|
||||
// grid-column: 2;
|
||||
// align-items: stretch;
|
||||
// justify-content: stretch;
|
||||
// padding: 1.5rem 0 1.5rem 1.5rem;
|
||||
// object {
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// }
|
||||
// h1 {
|
||||
// font-family: $font-heading;
|
||||
// padding: 0;
|
||||
// margin:0 0 .5rem 0;
|
||||
// }
|
||||
// p {
|
||||
// @extend h1;
|
||||
// margin:0 0 1rem 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -1,81 +0,0 @@
|
||||
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
|
||||
|
||||
@mixin rainbow {
|
||||
@include break(xs) { --am-bp: 'xs'; background-color: rgba(yellow, .1); }
|
||||
@include break(sm) { --am-bp: 'sm'; background-color: rgba(green, .1); }
|
||||
@include break(md) { --am-bp: 'md'; background-color: rgba(blue, .1); }
|
||||
@include break(lg) { --am-bp: 'lg'; background-color: rgba(indigo, .1); }
|
||||
@include break(xl) { --am-bp: 'xl'; background-color: rgba(violet, .1); }
|
||||
}
|
||||
|
||||
|
||||
@mixin break($bps, $points: $grid-breakpoints) {
|
||||
|
||||
@each $bp in $bps {
|
||||
|
||||
$min: 0;
|
||||
$max: 0;
|
||||
|
||||
@if str-length($bp) == 2 {
|
||||
|
||||
// only a single break point was received
|
||||
$min: map-get($points, $bp);
|
||||
@if $bp == "xl" {
|
||||
// just in case the single breakpoint is extra large,
|
||||
// we have an extra large to end of 10million-1.
|
||||
$max: 9999999px;
|
||||
} @else {
|
||||
$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
|
||||
}
|
||||
|
||||
} @else {
|
||||
|
||||
|
||||
@if str-slice($bp, 0, 1) == "-" {
|
||||
// no lower breakpoint was received
|
||||
$min: null;
|
||||
$max: map-get($points, str-slice($bp, 2, 3));
|
||||
|
||||
} @else {
|
||||
|
||||
$min: map-get($points, unquote(str-slice($bp, 0, 2)));
|
||||
|
||||
|
||||
@if str-length($bp) == 3 {
|
||||
// no upper break point was received
|
||||
$max: null;
|
||||
} @else {
|
||||
$max: map-get($points, str-slice($bp, 4, 5));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $min != null and $max != null {
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $min == null {
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cf {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user