Skip to content

Instantly share code, notes, and snippets.

View mopcweb's full-sized avatar
🎯
Focusing

Danyil Moroz mopcweb

🎯
Focusing
  • Signet
  • Ukraine, Kyiv
View GitHub Profile
@mopcweb
mopcweb / animatedSvgAndSvgLoader.js
Last active November 28, 2020 14:21
Web-Components (not pusblisde yet): <animated-svg>, <svg-loader>
var app=function(t){"use strict";function e(){}function n(t){return t()}function i(){return Object.create(null)}function o(t){t.forEach(n)}function s(t){return"function"==typeof t}function a(t,e){return t!=t?e==e:t!==e}function r(t,e,n){t.insertBefore(e,n||null)}function l(t){t.parentNode.removeChild(t)}function d(t){return document.createElement(t)}function u(t){const e={};for(const n of t)e[n.name]=n.value;return e}let h;function c(t){h=t}function f(){if(!h)throw new Error("Function called outside component initialization");return h}function p(t){f().$$.on_mount.push(t)}function y(t){f().$$.after_update.push(t)}function g(t){f().$$.on_destroy.push(t)}function m(){const t=f();return(e,n)=>{const i=t.$$.callbacks[e];if(i){const o=function(t,e){const n=document.createEvent("CustomEvent");return n.initCustomEvent(t,!1,!1,e),n}(e,n);i.slice().forEach((e=>{e.call(t,o)}))}}}const $=[],b=[],k=[],w=[],x=Promise.resolve();let A=!1;function C(t){k.push(t)}let _=!1;const v=new Set;function D(){if(!_){_=!0;do{for(let t=
@mopcweb
mopcweb / animated-svg.component.ts
Last active October 28, 2020 14:17
Angular component for animating provided (via ng-content) svg paths with optional props. Second component is for providing backdrop loader w/ animated svg. In future planned to be rewritten in WC or via Svelte/Stencil
import { Component, ViewChild, ElementRef, Input, Output, EventEmitter, OnChanges } from '@angular/core';
@Component({
selector: 'animated-svg',
template: '<div #container><ng-content></ng-content></div>',
})
export class AnimatedSvgComponent implements OnChanges {
@Input() public shouldAnimate?: boolean = true;
@Input() public duration?: number;
@Input() public delay?: number;
@mopcweb
mopcweb / Store.ts
Created June 11, 2020 14:57
Simple Store for state management using rxjs
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { cloneDeep } from 'lodash';
export interface State {}
export class Store {
private _state = new BehaviorSubject<State>({});
public constructor() {
// this.state$.subscribe((state) => console.log('state >>>', state));
# This will parse all provided named params in such way:
# TL;DR. someFunction --skip 10 --name "SomeName" --dev. -----> skip=10, name="SomeName", dev=true
# One liner, just easy to use in each necessary function
# while [[ $# -gt 0 ]]; do if [[ $1 == *"--"* ]]; then if [[ $2 != *"--"* ]]; then declare "${1/--/}"="${2:-true}"; else declare "${1/--/}"=true; fi; fi; shift; done
while [[ $# -gt 0 ]]; do
if [[ $1 == *"--"* ]]; then
if [[ $2 != *"--"* ]]; then declare "${1/--/}"="${2:-true}";
else declare "${1/--/}"=true;
@mopcweb
mopcweb / css-ripple-2.ts
Created March 16, 2020 01:08
More lightweight function which creates CSS only ripple effect. For usage w/ JSS. Here ripple always starts from center of ripple container
export function createRipple(color: string = '#ffffff80', duration: number = 1000) {
const styles = {
position: 'relative',
overflow: 'hidden',
transform: 'translate3d(0, 0, 0)',
cursor: 'pointer',
'&::after': {
content: '""',
display: 'block',
@mopcweb
mopcweb / css-ripple.ts
Last active March 16, 2020 01:05
Function which creates CSS only ripple effect. For usage w/ JSS. Via CSS it is impossible to watch for mouseclick position, so ripple effect will work only for m 1 prespecified in config place
interface RippleMixin {
vert?: 'top' | 'bottom' | 'center';
hor?: 'left' | 'right' | 'center';
color?: string;
opacity?: number;
duration?: number;
timingFunction?: string;
}
/**
@mopcweb
mopcweb / clsx.directive.ts
Last active June 11, 2020 14:59
Angular 2+ directive for clsx package
// Usage
// <div [clsx]="[true && 'Test', classes.Test]"></div>
import { Directive, Input, ElementRef, OnChanges } from '@angular/core';
import clsx, { ClassValue } from 'clsx';
/**
* Directive for module clsx.
*
* @see https://www.npmjs.com/package/clsx.
@mopcweb
mopcweb / insert.ts
Last active September 29, 2019 02:55
Inserts data into file into
/* ------------------------------------------------------------------- */
/**
* Inserts data into file
*
* @param path - File path
* @param data - Data to insert
* @param [after] - String | RegExp, after which to insert
* @param [before] - String | RegExp, before which to insert
* @param [removeNewLine] - Whether to remove empty newLine
* after / before insertion position
@mopcweb
mopcweb / createSwaggerDataStructure.ts
Created September 29, 2019 02:50
Creates structure for data (specifically for swagger UI)
/* ------------------------------------------------------------------- */
/**
* Creates structure for data (specifically for swagger)
*
* @param data - Original data object, for which there would
* be created a structure
*/
/* ------------------------------------------------------------------- */
export const createDataStructure = (data: any) => {
@mopcweb
mopcweb / parseTypes.ts
Last active June 11, 2020 15:03
Parses data and corrects types: from string to boolean | number
/* ------------------------------------------------------------------- */
/**
* Parses data and corrects types: from string to boolean | number
*
* @param data - Data to parse
*/
/* ------------------------------------------------------------------- */
export const parseTypes = <T = any>(input: T, deepness?: number): T => {
function parser(data: T, deepLevel = 0): T {