| import * as React from "react"; | |
| import { BoxProps, CSSObject } from "@chakra-ui/react"; | |
| interface Options { | |
| /** Distance (in px) under which to still consider interaction a click */ | |
| threshold?: number; | |
| } | |
| /** | |
| * Returns mousedown and mouseup handlers to process clicks on an ancestor of the |
| (function() { | |
| const bg = document.createElement('div'); | |
| bg.style.position = 'absolute'; | |
| bg.style.top = '0'; | |
| bg.style.width = '100%'; | |
| bg.style.height = '100%'; | |
| bg.style.background = '#000'; | |
| bg.style.zIndex = '99999'; | |
| document.body.appendChild(bg); | |
This script will replace the MDC Web packages it finds under node_modules with copies of the folders from a local MDC Web clone. This can be used to test MDC Web code ahead of releases.
Easiest usage:
chmod 700 it
| @function replace-or-append($list, $target, $value) { | |
| $newlist: (); | |
| $replaced: false; | |
| @for $i from 1 through length($list) { | |
| @if (nth($list, $i) == $target) { | |
| $newlist: append($newlist, $value); | |
| $replaced: true; | |
| } @else { | |
| $newlist: append($newlist, nth($list, $i)); |
This gist documents the setup I originally used to run visual diffs on the MDC Web demo pages for testing material-components/material-components-web#1285, but I have used it since then on other projects.
npm i
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <script> | |
| var dojoConfig = { | |
| async: true, | |
| baseUrl: "", | |
| tlmSiblingOfDojo: false | |
| }; | |
| </script> |
| function forDocument(ownerDocument: Document) { | |
| return lang.partial(this, ownerDocument); | |
| } | |
| var byId:{ | |
| (ownerDocument: Document, id: string); | |
| forDocument: (ownerDocument: Document) => (id: string) => Node; | |
| } = <any> function (ownerDocument, id) { | |
| return ownerDocument.getElementById(id); | |
| } |
| /* Discovery Queue should DIAFplzkthx */ | |
| .discovery_queue_ctn { | |
| display: none !important; | |
| } |
| javascript:window.spot=function(){function a(a,b){for(var d,c=document.styleSheets,e=0,f=c.length;f>e;e++)if((!b||c[e].href&&-1!==c[e].href.indexOf(b))&&(d=c[e].cssRules,d&&d.length))for(var g=d.length;g--;)d[g].selectorText&&a(d[g].selectorText)}function b(a,c){c||a(document.documentElement);for(var d=(c||document.documentElement).children,e=0,f=d.length;f>e;e++)a(d[e]),b(a,d[e])}function c(a){var b={},c=getComputedStyle(a);for(var d in c)isNaN(d)&&"function"!=typeof c[d]&&(b[d]=c[d]);return b}function d(a,b){var c=Object.keys(a);if(c.length!==Object.keys(b).length)return!1;for(var d=c.length;d--;)if(a[c[d]]!==b[c[d]])return!1;return!0}return{unusedClasses:function(){var a=Array.prototype.slice,e={},f=[];b(function(b){if(b.className){var g,h,f=a.call(b.classList);g=c(b);for(var i=f.length;i--;)h=f[i],e[h]||(b.classList.remove(h),e[h]=!d(g,c(b)),b.classList.add(h))}});for(var g in e)e[g]===!1&&f.push(g);return f},unusedSelectors:function(b){var c={};return a(function(a){document.querySelector(a)||(c[a]=!0)},b |
| [ | |
| 'ss-cursor', | |
| 'ss-crosshair', | |
| 'ss-search', | |
| 'ss-zoomin', | |
| 'ss-zoomout', | |
| 'ss-view', | |
| 'ss-attach', | |
| 'ss-link', | |
| 'ss-unlink', |