Skip to content

Instantly share code, notes, and snippets.

View JonathanDn's full-sized avatar
💭
Building Reusable Vue Components

Yonatan Doron JonathanDn

💭
Building Reusable Vue Components
106 followers · 18 following
View GitHub Profile
@JonathanDn
JonathanDn / app.consts.ts
Last active January 14, 2018 07:15
Redux Typescript - UI Reducers - TOGGLE / UPDATE for common UI States
export module UIConsts {
export const UI_UPDATE = 'UI_UPDATE';
export const TOGGLE_UI_STATE = 'TOGGLE_UI_STATE';
}
@JonathanDn
JonathanDn / layout.css
Created January 5, 2018 11:00
Intersting CSS Layout with Flexbox
.app-container {
display: flex;
justify-content:center;
}
.main-content {
display: flex;
flex-direction: column;
align-items:center;
background-color: gray;
@JonathanDn
JonathanDn / layout.css
Last active January 5, 2018 11:00
Intersting CSS Layout with Flexbox - codepen here: https://codepen.io/anon/pen/QavZQR
.app-container {
display: flex;
justify-content:center;
}
.main-content {
display: flex;
flex-direction: column;
align-items:center;
background-color: gray;
@JonathanDn
JonathanDn / email-validation.service.ts
Last active July 17, 2017 06:51
Angular - general validation service, provide it and call with the email to check, return true /false according. Raw
import {Injectable} from "@angular/core";
@Injectable()
export class GeneralValidationService {
constructor() {}
getEmailValidity(email) {
let regex: any = /^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+((?:\.){1}[a-zA-Z0-9-]+)$/;
let isEmailValid = false;
if (email && email.match(regex).length) {
return isEmailValid = true;
@JonathanDn
JonathanDn / email-validation.service.ts
Last active July 16, 2017 08:42
Angular - email validation service, provide it and call with the email to check, return true /false according.
import {Injectable} from "@angular/core";
@Injectable()
export class EmailValidationService {
private regex: any = /^[a-zA-Z0-9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+((?:\.){1}[a-zA-Z0-9-]+)$/;
private isEmailValid = false;
constructor() {}
getEmailValidity(email) {
if (email && email.match(this.regex)) {
return this.isEmailValid = true;
@JonathanDn
JonathanDn / app.component.ts
Last active June 12, 2017 07:43
Angular 2 - Javascript Vanilla - getDateNow() --> 'dd/mm/yyy hh:mm'
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'app.html',
styleUrls: ['app.scss']
})
export class AppComponent implements OnInit {
private d;
private dateFormat;
@JonathanDn
JonathanDn / url-constructor.ts
Last active March 24, 2017 11:07
URL constructing function with ascending arguments
export function format(str, argumentsArr?) {
let urlConstruct = str;
for (var i = 0; i < argumentsArr.length; i++) {
// g - global search, m - multiline
let regEx = new RegExp("\\{" + (i) + "\\}", 'gm');
// Handle multiple whitespaces in STRING type arguments
if (typeof(argumentsArr[i]) === 'string') {
argumentsArr[i] = argumentsArr[i].replace(/\s/g, '');
}
// Add to url construct
@JonathanDn
JonathanDn / timeline.component.ts
Created February 19, 2017 17:00
Angular 2 - D3 Horizontal Scrollable Timeline, with mock date data / real log data - circles re-rendering when zoom activated & when side-scrolling - change colors according to input v1.0.0
import {Component, OnInit, Input, ChangeDetectionStrategy} from '@angular/core';
import * as d3 from 'd3';
import {Observable} from "rxjs";
import {UIConsts} from "../../../../shared/app.consts";
@Component({
selector: 'timeline',
styleUrls: ['timeline.scss'],
template: `
<div class="timeline-svg-container">
@JonathanDn
JonathanDn / timeline.html
Last active June 26, 2017 10:53
Vanilla JS - Horizontal Scrollable Timeline, with mock date data circles re-rendering when zoom activated & when side-scrolling - change colors according to input v1.0.5.1
<div class="chart"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
@JonathanDn
JonathanDn / item-detail.spec.ts
Created December 29, 2016 10:17
Angular2 - comp unit testing - my first test
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
// Component Dependencies:
// items:
import {ItemDetailsComponent} from './Item-details.component';
import {ItemOverviewComponent} from './Item-overview/Item-overview.component';
import {ItemFullDataViewComponent} from './Item-full-data-view/Item-full-data-view.component';