Oscar Marina oscarmarina

Senior Front End Developer at BBVA ❤️ Web Components

oscarmarina / findall_elements_deep.js

Created May 16, 2020 05:30 — forked from ebidel/findall_elements_deep.js

Finds all elements on the page, including those within shadow dom.

	/**
	* @author ebidel@ (Eric Bidelman)
	* License Apache-2.0
	*/

	/**
	* Finds all elements on the page, inclusive of those within shadow roots.
	* @param {string=} selector Simple selector to filter the elements by. e.g. 'a', 'div.main'
	* @return {!Array<string>} List of anchor hrefs.
	*/

oscarmarina / index.html

Created May 16, 2020 05:31 — forked from ebidel/index.html

<responsive-element> custom element for enabling container/element queries

	<!-- based on https://twitter.com/ebidel/status/933496242272747520 -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title><responsive-element></title>
	<link rel="stylesheet" href="styles.css">
	</head>

oscarmarina / storage-event.js

Created June 1, 2020 06:09

	(function() {
	if (window['StorageEvent'].name === 'StorageEvent') {
	return;
	}

	var _setItem = window.sessionStorage.setItem;
	Object.getPrototypeOf(window.sessionStorage).setItem = function(key, value) {
	_setItem.call(this, key, value);
	document.dispatchEvent(new CustomEvent('storage', { bubbles: true, composed: true, detail: { key: key, value: value } }));
	}

oscarmarina / custom-element-define-twice.js

Created June 1, 2020 06:18

	(function() {
	const _customElementsDefine = window.customElements.define;
	window.customElements.define = (name, cl, conf) => {
	if (customElements.get(name)) {
	console.warn(name + 'has been defined twice');
	} else {
	_customElementsDefine.call(window.customElements, name, cl, conf);
	}
	};

oscarmarina / button.css

Last active September 3, 2022 09:14

Reset Button

	button{
	-moz-osx-font-smoothing: inherit;
	-webkit-font-smoothing: inherit;
	-webkit-appearance: button;
	appearance: button;
	background-color: transparent;
	border-style: none;
	color: inherit;
	cursor: pointer;
	display: inline-block;

oscarmarina / Calculating date from today date to (+) or (-) days

Created June 17, 2020 06:30

	window.localStorage.setItem('expirationDate', new Date((new Date()).getTime() + (15 * 24 * 60 * 60 * 1000)).toString());

	window.localStorage.setItem('expirationDate', new Date((new Date()).getTime() - (15 * 24 * 60 * 60 * 1000)).toString());

oscarmarina / shadycss

Created June 20, 2020 19:00

https://www.jsdelivr.com/package/npm/@webcomponents/shadycss

oscarmarina / supportsMedia.js

Created July 16, 2020 09:35

	function supportsMedia(query) {
	// This works because `media` serializes to 'not all' for unsupported queries
	return matchMedia(query).media === query;
	}

	supportsMedia('(prefers-color-sheme: dark)');
	supportsMedia('(prefers-reduced-data: reduce');

oscarmarina / unsafe-static.js

Last active July 17, 2020 06:32

	/* eslint-disable complexity */
	const stringsCache = new WeakMap();

	/**
	* https://github.com/Polymer/lit-html/pull/274
	*
	* https://github.com/corpusculejs/corpuscule/blob/master/packages/lit-html-renderer/docs/withCustomElement.md
	* https://github.com/bashmish/carehtml
	*
	* A value that's interpolated directly into the template before parsing.

oscarmarina / deep-active-element.js

Last active August 3, 2020 06:42

	/**
	* Returns the deepest active element.
	*
	* @param {HTMLElement} element - The element to search.
	* @returns {!HTMLElement} - Active element
	*/
	export function deepActiveElement(element = document.activeElement) {
	let elementActive = element;

	// document.activeElement can be null