Skip to content

Instantly share code, notes, and snippets.

View roseg43's full-sized avatar

Gabriel Rose roseg43

View GitHub Profile
@roseg43
roseg43 / grid.css
Created October 5, 2023 18:26
CSS - Basic customizable content grid
.row {
--column-count: 12;
--grid-gap-width: 16px;
--column-base-min-width: calc((var(--width-grid) - (var(--column-count) - 1) * var(--grid-gap-width)) / var(--column-count));
display: flex;
flex-flow: column;
gap: var(--grid-gap-width);
@media (--bp-medium) {
display: grid;
@roseg43
roseg43 / WordPress Developer Docs - Sticky ToC.user.js
Last active October 2, 2023 14:45
TamperMonkey User Script - WordPress Developer Docs > In-Page Navigation Anchors
// ==UserScript==
// @name WordPress Developer Docs - In-Page Navigation Anchors
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Adds a sticky table of contents to the sidebar that contains anchor links to in-page sections when on developer.wordpress.org
// @author Gabriel Rose (@roseg43)
// @match https://developer.wordpress.org/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=wordpress.org
// @grant none
// ==/UserScript==
@roseg43
roseg43 / MarqueeSelector.js
Created January 20, 2023 16:45
Simple tool for selecting content on a page using a visible marquee
(() => {
/**
* Renders a button that when clicked copies the NodeList passed to the constructor to the clipboard
*
* @param [NodeList] content - a NodeList of selected elements
*/
const CopyToClipBoardBtn = (content) => {
const btn = document.createElement('button');
btn.innerText = 'Copy to clipboard';
@roseg43
roseg43 / _flex-grid.scss
Created December 10, 2019 20:30
Basic SCSS Flexbox Grid
/**
* Basic Flex Grid
* ----------------
* This is a simple flex grid I've been using on a lot of projects. It supports both
* flexible grids as well as rigid column grids. While this is currently designed for internal use
* (it uses flexbox mixins because our build pipeline doesn't support autoprefixer yet), it's not too difficult
* to use in your own projects. Simply replace the flexbox mixins with their relevant rules, and you'll be good
* to go.
* @author Gabe Rose <https://gist.github.com/roseg43>
**/
@roseg43
roseg43 / chartist-plugin-htmllabels.js
Created September 17, 2019 16:08
Allows for custom HTML labels in a ChartistJS chart.
// HTML Label plugin
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.ctHtmlLabels = function(options) {
return function(chart) {
chart.on('draw', function(context) {
if (context.type === 'label') {
// Best to combine with something like sanitize-html
context.element.empty()._node.innerHTML = context.text;
}
});
@roseg43
roseg43 / versionStringRemover.py
Last active March 12, 2019 15:29
A small command-line script to remove version strings from filenames and filename references in directories. Useful for parsing wget scrapes.
import os, re, sys
print ("Asset Renamer v1 ::::::::::::::")
def replaceVersionsInFile(file):
#This regex matches all href and src attributes and finds version strings that either use question marks of the unicode string %3
pattern = "(?:href=[\"\']?([^\"\'>]+)[\"\']?|src=[\"\']?([^\"\'>]+)[\"\']?)([\']?(?=.*%3?)[^\"\']*)|(.*(?=.*\?)[^\"\']*)"
fo = open(file, 'r+');
text = fo.readlines()
fo.seek(0)
fo.truncate()
for line in text:
@roseg43
roseg43 / jquery.anchorNavigation.js
Created December 13, 2016 20:25
A small class that creates a list of page-scrolling anchors based on sections with data-nav-title set.
function anchorNavigation(el) {
var self = this;
this.$el = jq(el);
this.$navigableItems = jq('[data-nav-title]');
this.$el.append('<ul />');
this.$navigationList = this.$el.find('ul');
this.navigationItems = [];
@roseg43
roseg43 / jquery.scheduleManager.js
Created August 30, 2016 14:38
Custom calendar schedule manager that manages selection states and passes selected objects as JSON to a PDF generator.
(function ($) {
// An array of presentationTimeslots
var slots = [];
function presentationTimeslot(el) {
// So that we always have a global object scope that can't be tainted by local scopes
var self = this;
this.$el = $(el);
this.$parentTable = this.$el.parents('table');
@roseg43
roseg43 / bannerMask.jquery.js
Created February 18, 2016 15:37
Dynamic Slanted SVG-clip Banners
(function($) {
var index = 0;
var window_width = $('body').outerWidth();
$.fn.polygonMask = function(direction) {
var $this = $(this),
height = $this.outerHeight(),
offset_top = $this.offset().top;
@roseg43
roseg43 / shoehorn.js
Created April 27, 2015 15:44
Bootstrap Panel Filtering
//TODO: turn into jQuery function
$(function() {
$('.mix').each(function(){$(this).addClass('active');});
$('.filter select').change(function() {
var filter = $(this).val().toLowerCase();
var $filterEls = $('.mix');
$filterEls.each(function() {
var isHidden = false;
var filterVal = $(this).data('filter').toLowerCase();
if (filter == 'all') {