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
View GitHub Profile
@JonathanDn
JonathanDn / scrollbar.directive.ts
Last active November 1, 2016 07:42
Angular 2 Malihu Custom Scrollbar Implmentation
import {Directive, ElementRef, Input, Renderer} from '@angular/core';
import 'jquery-mousewheel';
import 'malihu-custom-scrollbar-plugin';
@Directive({
selector: "[app-scrollbar]"
})
export class ScrollbarDirective {
@JonathanDn
JonathanDn / maptokeyvalue.pipe.ts
Created November 3, 2016 08:55
Angular 2 Pipe to map a property : value mapping object into an array of key value pair objects
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'mapToKeyValue'
})
export class MapToKeyValuePipe implements PipeTransform {
transform(obj: Object) {
let modifiedArray = [];
for (let key in obj) {
@JonathanDn
JonathanDn / mapfromkeyvalue.pipe.ts
Last active November 3, 2016 09:59
Angular 2 pipe to map key : value pair object array into object with property value pairs.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'mapFromKeyValue'
})
export class MapFromKeyValuePipe implements PipeTransform {
transform(objArr) {
console.log('obj array looks like this: ', objArr);
let mappingObject = {};
@JonathanDn
JonathanDn / getinitials.pipe.ts
Created November 3, 2016 13:58
Angular 2 pipe to turn string into initials
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'getInitials'
})
export class GetInitialsPipe implements PipeTransform {
transform(value: string) {
return value.replace(/[a-z]/g, '').replace(' ', '');
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'maxLength'
})
export class MaxLengthPipe implements PipeTransform {
transform(value: string, limit: number){
if (value.length > limit) return value.substring(0, limit) + '...';
else return value;
}
@JonathanDn
JonathanDn / app.consts.ts
Last active December 6, 2016 11:16
Angular2 - NgRedux Reducer, make a new state, change it from a sending component, subscribe to changes from a receiving component
export module ItemsConsts {
export const INIT_ITEM_TIMER = 'INIT_ITEM_TIMER';
}
@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';
@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 / 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 / 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