javascript.jsonc

// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }
{
    "jQuery - Ajax": {
        "body": [
            "jQuery.ajax({url: '${1:target file}', data: '${2:data to send}', type: 'POST',",
            "\tsuccess: function(data)",
            "\t{",
            "\t\tif(data)",
            "\t\t{",
            "\t\t\t//Data has been returned.",
            "\t\t\t$0",
            "\t\t}",
            "\t}",
            "});"
        ],
        //Output:
        // jQuery.ajax({url: 'target', data: 'data', type: 'POST',
        // 	success: function(data)
        // 		{
        // 			if(data) 
        // 			{
        // 				//Data has been returned.
        // 			}
        // 		}
        // 	});
        //
        "prefix": "jQuery - Ajax",
        "description": "Creates a basic jQuery ajax call."
    },
    "jQuery - Window Load": {
        "body": [
            "jQuery(window).load(function(event)",
            "{",
            "\t$0",
            "}); //End of Window Load."
        ],
        //Output:
        // jQuery(window).load(function(event) {
        // {
        //		
        // }); //End of Window Load.
        "prefix": "jQuery - Window Load",
        "description": "Waits for the page to FULLY load."
    },
    "jQuery - Document Ready": {
        "body": [
            "jQuery(document).ready(function()",
            "{",
            "\t$0",
            "}); //End of Document Ready."
        ],
        //Output:
        // jQuery(document).ready(function() //Wait for page to load.
        // {
        //		
        // }); //End of Document Ready.
        "prefix": "jQuery - Document Ready",
        "description": "Creates a basic jQuery document ready that waits for DOM content to load."
    },
    "jQuery - Selection Listener": {
        "body": [
            "jQuery('${1:element}').on('${2:click keypress}',${4: '${3:element}',} function(event)",
            "{",
            "\tvar code = event.key || event.code; //Get keycode.",
            "\tif (event.type != 'click' && code != ' ' && code != 'Enter') //Check for click, space, and enter. (in that order)",
            "\t\treturn; //If it isn't any of those, don't worry about it.",
            "\t",
            "\t$0",
            "});"
        ],
        //Output:
        // jQuery('element').on('click keypress', 'element', function(event) //Create a jQuery click and keypress listener.
        // {
        // 	var code = event.keyCode || event.which; //Get keycode.
        // 	if (event.type != 'Click' && code != ' ' && code != 'Enter') //Check for click, space, and enter. (in that order)
        // 		return; //If it isn't any of those, don't worry about it.
        //	
        //
        // });
        "prefix": "jQuery - Selection Listener",
        "description": "Creates a jQuery listener for clicks, space, and enter."
    },
    "jQuery - Restrict Text Input": {
        "body": [
            "jQuery('${1:element}').on('keypress', function(event)",
            "{",
            "\t//Presets",
            "\tvar lowercaseLetters = new RegExp('^[a-z]*$');",
            "\tvar uppercaseLetters = new RegExp('^[A-Z]*$');",
            "\tvar words = new RegExp('^[a-zA-Z ]*$');",
            "\tvar numbers = new RegExp ('^[0-9]/*$');",
            "\n",
            "\tvar customRegex = new RegExp('');",
            "\n",
            "\tvar regex = ${2:template}; //Select a preset from above.",
            "\n",
            "\tif (!regex.test(String.fromCharCode(event.charCode))) //Check each key.",
            "\t{",
            "\t\tevent.preventDefault();",
            "\t\treturn false;",
            "\t}",
            "});",
            "$0"
        ],
        //Output:
        // jQuery('element').on('keypress', function(event)
        // {
        // //Presets
        // var lowercaseLetters = new RegExp('^[a-z]*$');
        // var uppercaseLetters = new RegExp('^[A-Z]*$');
        // var letters = new RegExp('^[a-zA-Z ]*$');
        // var numbers = new RegExp ('^[0-9]/*$');
        // var customRegex = new RegExp('');
        // var regex = template; //Select a preset from above.
        // var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        // if (!regex.test(key)) //Check each key.
        // { 
        // 	event.preventDefault();
        // 	return false;
        // }
        // });
        //
        "prefix": "jQuery - Restrict Text Input",
        "description": "Limits what a user can enter in a text field."
    },
    "JavaScript - loadScript (Function)": {
        "body": [
            "function loadScript(source)",
            "{",
            "\tlet script = document.createElement(\"script\");",
            "\tscript.src = source;",
            "\tscript.async = ${2:false}; //Setting this to false will result in longer loading times, but may help solve dependency issues.",
            "\tdocument.body.append(script);",
            "}",
            "$0"
        ],
        //Output:
        // function loadScript(source)
        // {
        // 	let script = document.createElement("script");
        // 	script.src = source;
        // 	script.async = true; //Setting this to false will result in longer loading times, but may help solve dependency issues. 
        // 	document.body.append(script);
        // }
        //
        "prefix": "JavaScript - loadScript (Function)",
        "description": "Creates a function that will load in a separate JS file."
    },
    "JavaScript - waitForElm (Function)": {
        "body": [
            "//USAGE:",
            "//waitForElm('<SELECTOR>').then((elm) => {<FUNCTION>});",
            "function waitForElm(selector) {",
            "\treturn new Promise(resolve => {",
            "\t\tif (document.querySelector(selector)) {",
            "\t\t\treturn resolve(document.querySelector(selector));",
            "\t\t}",
            "\t\t",
            "\t\tconst observer = new MutationObserver(mutations => {",
            "\t\t\tif (document.querySelector(selector)) {",
            "\t\t\t\tresolve(document.querySelector(selector));",
            "\t\t\t\tobserver.disconnect();",
            "\t\t\t}",
            "\t\t});",
            "\t\t",
            "\t\tobserver.observe(document.body, {",
            "\t\t\tchildList: true,",
            "\t\t\tsubtree: true",
            "\t\t});",
            "\t});",
            "}",
            "$0"
        ],
        //Output:
        // function loadScript(selector) {
        // 	return new Promise(resolve => {
        // 		if (document.querySelector(selector)) {
        // 			return resolve(document.querySelector(selector));
        // 		}
        // 		const observer = new MutationObserver(mutations => {
        // 			if (document.querySelector(selector)) {
        // 				resolve(document.querySelector(selector));
        // 				observer.disconnect();
        // 			}
        // 		});
        // 		observer.observe(document.body, {
        // 			childList: true,
        // 			subtree: true
        // 		});
        // 	});
        // }
        //
        //USAGE:
        //waitForElm('<SELECTOR>').then((elm) => {<FUNCTION>});
        "prefix": "JavaScript - waitForElm (Function)",
        "description": "Creates an observer on the document, watching for the specified selector. (This may be REALLY BAD for performance)"
    },
    "jQuery - isLinkSamePageID (Function)": {
        "body": [
            "function isLinkSamePageID(givenLink, verifyElement) {",
            "\t//Check if link has an ID.",
            "\tif (givenLink.includes('#'))",
            "\t\tvar destinationID = givenLink.substring(givenLink.search('#'));",
            "\telse",
            "\t\treturn false;",
            "\t",
            "\tif (givenLink === \"#\") //If HREF is only a pound sign then end this.",
            "\t\treturn false;",
            "\t",
            "\tif (verifyElement)",
            "\t{",
            "\t\tif (jQuery(destinationID)) //Check for ID on page.",
            "\t\t\tverifyElement = true;",
            "\t\telse",
            "\t\t\treturn false;",
            "\t}",
            "\t ",
            "\tvar currentPath = window.location.href; //Get current URL path. This step is needed, but I'm not entirely sure why.",
            "\tvar absoluteCurrentPath = new URL(currentPath.substring(0, currentPath.lastIndexOf(\"/\") + 1), document.baseURI).href; //Get absolute \"root\" path of current document - excludes IDs at the end and files.\t",
            "\tvar absoluteHREF = new URL(givenLink.substring(0, givenLink.lastIndexOf(\"/\")), document.baseURI).href; //Converting to absolute full URL.",
            "",
            "\t//Sometimes a slash is not added. Add one.",
            "\tif (!absoluteHREF.includes(\"?\") && absoluteHREF.charAt(absoluteHREF.length - 1) != \"/\")",
            "\t\tabsoluteHREF = absoluteHREF.concat(\"/\");",
            "",
            "\t//Verifying the link is for THIS page. - And that the header to compensate for, and destination to go to both exist.",
            "\tif (absoluteHREF.includes(\"?\") || absoluteHREF === absoluteCurrentPath)",
            "\t\treturn destinationID;",
            "\telse",
            "\t\treturn false;",
            "}",
            "$0"
        ],
        //output
        // function isLinkSamePageID(givenLink, verifyElement) {
        // 	//Check if link has an ID.
        // 	if (givenLink.includes('#'))
        // 		var destinationID = givenLink.substring(givenLink.search('#'));
        // 	else
        // 		return false;
        // 	if (givenLink === "#") //If HREF is only a pound sign then end this.
        // 		return false;
        // 	if (verifyElement)
        // 	{
        // 		if (jQuery(destinationID)) //Check for ID on page.
        // 			verifyElement = true;
        // 		else
        // 			return false;
        // 	}
        // 	var currentPath = window.location.href; //Get current URL path. This step is needed, but I'm not entirely sure why.
        // 	var absoluteCurrentPath = new URL(currentPath.substring(0, currentPath.lastIndexOf("/") + 1), document.baseURI).href; //Get absolute "root" path of current document - excludes IDs at the end and files.	
        // 	var absoluteHREF = new URL(givenLink.substring(0, givenLink.lastIndexOf("/")), document.baseURI).href; //Converting to absolute full URL.
        // 	//Sometimes a slash is not added. Add one.
        // 	if (!absoluteHREF.includes("?") && absoluteHREF.charAt(absoluteHREF.length - 1) != "/")
        // 		absoluteHREF = absoluteHREF.concat("/");
        // 	//Verifying the link is for THIS page. - And that the header to compensate for, and destination to go to both exist.
        // 	if (absoluteHREF.includes("?") || absoluteHREF === absoluteCurrentPath)
        // 		return destinationID;
        // 	else
        // 		return false;
        // }
        //
        "prefix": "jQuery - isLinkSamePageID (Function)",
        "description": "A function that checks if a provided link references the current page."
    },
    "jQuery - monkeyPatchEventMethods (Function)": {
        "body": [
            "//Logs all calls to preventDefault / stopPropagation in a user-friendly way.",
            "//https://stackoverflow.com/a/42630278",
            "//https://gist.github.com/slorber/b1c0ffef56abd449c05476b5c609a36e",
            "function monkeyPatchEventMethods() {",
            "\tconst logEventMethodCall = (event, methodName) => {",
            "\t\tconst MinimumMeaningfulSelectors = 3; //How many meaningful items we want in log message.",
            "\t\tconst target = event.target;",
            "",
            "\t\tconst selector = (function computeSelector() {",
            "\t\t\tconst parentSelectors = [];",
            "\t\t\tlet node = target;",
            "\t\t\tlet minimumSelectors = 0;",
            "\t\t\tdo {",
            "\t\t\t\tconst meaningfulSelector = node.id ?",
            "\t\t\t\t\t`#${node.id}` : node.classList.length > 0 ?",
            "\t\t\t\t\t\t`.${Array.prototype.join.call(node.classList, '.')}` : undefined;",
            "\t\t\t\tif (meaningfulSelector) minimumSelectors++;",
            "\t\t\t\tconst nodeSelector = `${node.tagName.toLowerCase()}${meaningfulSelector ? meaningfulSelector : ''}`;",
            "\t\t\t\tparentSelectors.unshift(nodeSelector);",
            "\t\t\t\tnode = node.parentNode;",
            "\t\t\t} while (node && node !== document && minimumSelectors < MinimumMeaningfulSelectors);",
            "\t\t\treturn parentSelectors.join(\" > \");",
            "\t\t})();",
            "",
            "\t\tconsole.debug(`${event.type}.${methodName}() on ${selector}`, event);",
            "\t};",
            "",
            "\tconst preventDefault = Event.prototype.preventDefault;",
            "\tEvent.prototype.preventDefault = function () {",
            "\t\tlogEventMethodCall(this, 'preventDefault');",
            "\t\tpreventDefault.call(this);",
            "\t};",
            "",
            "\tconst stopPropagation = Event.prototype.stopPropagation;",
            "\tEvent.prototype.stopPropagation = function () {",
            "\t\tlogEventMethodCall(this, 'stopPropagation');",
            "\t\tstopPropagation.call(this);",
            "\t};",
            "",
            "}",
            "// $0monkeyPatchEventMethods(); //Calling debugging function"
        ],
        //Output:
        // //Logs all calls to preventDefault / stopPropagation in a user-friendly way.
        // //https://stackoverflow.com/a/42630278
        // //https://gist.github.com/slorber/b1c0ffef56abd449c05476b5c609a36e
        // function monkeyPatchEventMethods() {
        // 	const logEventMethodCall = (event, methodName) => {
        // 		const MinimumMeaningfulSelectors = 3; //How many meaningful items we want in log message.
        // 		const target = event.target;
        // 		const selector = (function computeSelector() {
        // 			const parentSelectors = [];
        // 			let node = target;
        // 			let minimumSelectors = 0;
        // 			do {
        // 				const meaningfulSelector = node.id ?
        // 					`#${node.id}` : node.classList.length > 0 ?
        // 						`.${Array.prototype.join.call(node.classList, '.')}` : undefined;
        // 				if (meaningfulSelector) minimumSelectors++;
        // 				const nodeSelector = `${node.tagName.toLowerCase()}${meaningfulSelector ? meaningfulSelector : ''}`;
        // 				parentSelectors.unshift(nodeSelector);
        // 				node = node.parentNode;
        // 			} while (node && node !== document && minimumSelectors < MinimumMeaningfulSelectors);
        // 			return parentSelectors.join(" > ");
        // 		})();
        // 		console.debug(`${event.type}.${methodName}() on ${selector}`, event);
        // 	};
        // 	const preventDefault = Event.prototype.preventDefault;
        // 	Event.prototype.preventDefault = function () {
        // 		logEventMethodCall(this, 'preventDefault');
        // 		preventDefault.call(this);
        // 	};
        // 	const stopPropagation = Event.prototype.stopPropagation;
        // 	Event.prototype.stopPropagation = function () {
        // 		logEventMethodCall(this, 'stopPropagation');
        // 		stopPropagation.call(this);
        // 	};
        // }
        // // monkeyPatchEventMethods(); //Calling debugging function
        "prefix": "jQuery - monkeyPatchEventMethods",
        "description": "A function that provides more descriptive console logging for preventDefault and stopPropagation calls."
    },
    "jQuery - getElementDistanceFromWindowTop (Function)": {
        "body": [
            "//Returns pixels of the element from the top of the displayed window.",
            "function getElementDistanceFromWindowTop(givenSelector) {",
            "{",
            "\tvar scrollTop = jQuery(window).scrollTop();",
            "\tvar elementOffset = jQuery(givenSelector).offset().top;",
            "\tvar elementDistance = (elementOffset - scrollTop);",
            "\t",
            "\treturn elementDistance;",
            "}); //End of Window Load.",
            "$0"
        ],
        //Output:
        // //Returns pixels of the element from the top of the displayed window.
        // function getElementDistanceFromWindowTop(givenSelector) {
        // 	var scrollTop = jQuery(window).scrollTop();
        // 	var elementOffset = jQuery(givenSelector).offset().top;
        // 	var elementDistance = (elementOffset - scrollTop);
        // 	return elementDistance;
        // }
        //
        "prefix": "jQuery - getElementDistanceFromWindowTop",
        "description": "Creates a basic jQuery document ready."
    }
}