bobjoll 1.0.3

package/scss/partials/form/_switch-v1-0.scss

@@ -0,0 +1,128 @@
+@if $form-v1-0 {
+	$switch-padding: 2px;
+	$switch-shadow: 0 $base-border-width 0 0 color('gray', 'state');
+
+	.switch {
+		@extend %row-flexbox;
+		@extend .row--vertical-center;
+
+		background-color: color('input', 'background');
+
+		cursor: pointer;
+
+		&:hover {
+			.switch__indicator::after {
+				background-color: color('secondary', 'background');
+			}
+		}	
+
+		.switch__indicator ~ .switch__link,
+		.switch__link ~ .switch__indicator {
+			margin: 0 0 0 $small-spacing;
+		}
+
+		input[type="checkbox"],
+		input[type="radio"] {
+			display: none;
+
+			&:checked ~ .switch__indicator {
+				background-color: color('green', 'state');
+
+				&::before {
+					@include transform(scale(0));
+				}
+
+				&::after {
+					background-color: color('input', 'background');
+
+					box-shadow: 0 0 0 $base-border-width color('border', 'general', 0);
+				}
+			}
+
+			&:checked ~ .switch__link {
+				color: color('text', 'general');
+			}
+		}
+
+		@include element('indicator') {
+			
+			position: relative;
+
+			display: block;
+
+			background: color('switch', 'background');			
+
+			&::before {
+				@include position(absolute, $switch-padding null null $switch-padding);
+				@include transform(scale(1));
+				@include transition(all $base-duration $base-timing);
+
+				// background-color: color('input', 'background');
+
+				z-index: 1;
+
+				content: '';
+			}
+
+			&::after {
+				@include position(absolute, 0 null null 0);
+				@include transition(all $base-duration $base-timing);
+
+				margin: $switch-padding;
+
+				background-color: color('body', 'background');
+
+				box-shadow: $switch-shadow;
+
+				z-index: 2;
+
+				content: '';
+			}
+		}
+
+		// Sizes
+		@each $size in $sizes {
+			@include modifier($size) {
+				$spacing: map-get($input-ui-sizes, $size) / 2;
+				$switch-width: map-get($input-ui-sizes, $size) + $spacing;
+				$switch-height: map-get($input-ui-sizes, $size);
+				$switch-spacing: ((map-get($input-sizes, $size) - map-get($input-ui-sizes, $size)) / 2);
+				$switch-font-size: map-get($font-sizes, $size);
+
+				.switch__indicator {
+					width: $switch-width;
+					height: $switch-height;
+
+					border-radius: $switch-height;
+
+					line-height: $switch-height;
+
+					&::before {
+						width: $switch-width - ($switch-padding * 2);
+						height: $switch-height - ($switch-padding * 2);
+ 
+						border-radius: $switch-height - ($switch-padding * 2);
+					}
+
+					&::after {
+						width: $switch-height - ($switch-padding * 2);
+						height: $switch-height - ($switch-padding * 2);
+
+						border-radius: $switch-height - ($switch-padding * 2);
+					}
+				}
+
+				.switch__link {
+					font-size: $switch-font-size;
+				}
+
+				input[type="checkbox"],
+				input[type="radio"] {
+					&:checked ~ .switch__indicator::after {
+						left: ($switch-width - $switch-height);
+					}
+				}
+			}
+		}
+	}
+}

package/scss/partials/form/_upload-v1-0.scss

@@ -0,0 +1,91 @@
+@if $form-v1-0 {
+	.upload {
+		overflow: hidden;
+
+		height: $base-input-height;
+
+		margin: 0 0 $small-spacing;
+
+		border-radius: $base-border-radius;
+
+		line-height: $base-input-height - ($base-border-width * 2);
+
+		@include element('files') {
+			display: table-cell;
+
+			padding: 0 $base-spacing;
+
+			border: $base-border;
+			border-color: color('border', 'general', 1, 10);
+			border-right: none;
+
+			width: 100%;
+		}
+
+		@include element('link') {
+			@include transition(all $base-duration $base-timing);
+
+			position: relative;
+
+			display: table-cell;
+			
+			padding: 0 $base-spacing;
+
+			background-color: color('button', 'general');
+
+			color: color('text-inverted', 'general');
+			white-space: nowrap;
+
+			&:hover {
+				background-color: color('button', 'general', 1, 10);
+
+				box-shadow: inset 0 ($base-border-width * -1) ($base-border-width) color('shadow', 'general', .35);
+
+				color: pick-visible-color(
+					color('button', 'general', 1, 10),
+					color('text', 'general'),
+					color('text-inverted', 'general')
+				);
+			}
+
+			@include modifier('icon') {
+				padding: 0 $base-spacing 0 ($base-spacing + $small-icon-width + $small-spacing);
+
+				svg {
+					@include position(absolute, 50% null null $base-spacing);
+					@include transform(translateY(-50%));
+
+					fill: color('icon-inverted', 'general');
+				}
+			}
+		}
+
+		@include modifier('sm') {
+			height: $small-input-height;
+
+			line-height: $small-input-height - ($base-border-width * 2);
+		}
+
+		@include modifier('large') {
+			height: $large-input-height;
+
+			line-height: $large-input-height - ($base-border-width * 2);
+		}
+
+		@include modifier('inline') {
+			display: inline-block;
+		}
+
+		input[type="file"] {
+			display: none;
+		}
+
+		label {
+			display: table;
+
+			width: 100%;
+
+			cursor: pointer;
+		}
+	}
+} // End if

package/ts/library/common.ts

@@ -0,0 +1,30 @@
+interface Element {
+  parent(selector: string): Element | undefined;
+  parents(selector: string): Element[];
+}
+
+Element.prototype.parent = function (this: Element, selector: string) {
+  return this.parents(selector)[0];
+};
+
+Element.prototype.parents = function (
+  this: Element,
+  selector: string
+): Element[] {
+  var elements: Element[] = [];
+  var elem: Element | null = this;
+
+  if (elem && elem.parentElement) {
+    while ((elem = elem.parentElement) !== null) {
+      if (elem.nodeType !== Node.ELEMENT_NODE) {
+        continue;
+      }
+
+      if (selector && elem.matches(selector)) {
+        elements.push(elem);
+      }
+    }
+  }
+
+  return elements;
+};

package/ts/library/cookie.ts

@@ -0,0 +1,47 @@
+export class Cookie {
+    public static setItem(name: string, value: string, options?: CookieOptions) {
+        let cookieSettings: CookieSettings = { 
+            expires: new Date(new Date().getTime() + (24 * 60 * 60 * 1000 * 365)),
+            path: '/',
+            ...options 
+        };
+        let cookieString = `${name}=${value};path=${cookieSettings.path}`;
+
+        if (cookieSettings.domain) {
+            cookieString += `;domain=${cookieSettings.domain}`;
+        }
+
+        cookieString += `;expires=${cookieSettings.expires.toUTCString()}`;
+
+        document.cookie = cookieString;
+    }
+
+    public static getItem(name: string) {
+        let c = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
+        return c ? c[2] : null;
+    }
+
+    public static removeItem(name: string) {
+        Cookie.setItem(name, '', {
+            expires: new Date(),
+        });
+    }
+
+    public static isEnabled() {
+        document.cookie = "testcookie";
+        var cookieEnabled = (document.cookie.indexOf("testcookie") != -1) ? true : false;
+        return cookieEnabled || false;
+    }
+}
+
+interface CookieOptions {
+    expires?: Date;
+    path?: string;
+    domain?: string;
+}
+
+interface CookieSettings {
+    expires: Date;
+    path: string;
+    domain?: string;
+}

package/ts/library/delegate.ts

@@ -0,0 +1,122 @@
+class DelegateListeners {
+    private static listeners: {
+        [name: string]: {
+            eventType: Event['type'];
+            eventHandler: Function;
+            elementScopeHandler: EventListener;
+        }[];
+    } = {};
+
+    public static set(selector: string, eventType: Event['type'], eventHandler: Function, elementScopeHandler: EventListener) {
+        if (!DelegateListeners.listeners[selector]) {
+            DelegateListeners.listeners[selector] = [];
+        }
+
+        if (this.unique(DelegateListeners.listeners[selector], eventType, eventHandler)) {
+            let listener = {
+                eventType: eventType,
+                eventHandler: eventHandler,
+                elementScopeHandler: elementScopeHandler,
+            };
+
+            DelegateListeners.listeners[selector].push(listener);
+
+            return listener;
+        } else {
+            return this.get(selector, eventType, eventHandler);
+        }
+    }
+
+    public static get(selector: string, eventType: Event['type'], eventHandler: Function) {
+        if (DelegateListeners.listeners[selector]) {
+            try {
+                return DelegateListeners.listeners[selector].filter((listener) => {
+                    return eventHandler === listener.eventHandler && eventType === listener.eventType;
+                })[0];
+            } catch (err) { };
+        }
+
+        return null;
+    }
+
+    public static delete(selector: string, eventType: Event['type'], eventHandler: Function) {
+        let deleteListenersID: number[] = [];
+
+        if (DelegateListeners.listeners[selector]) {
+            DelegateListeners.listeners[selector].forEach((listener, index: number) => {
+                if (eventType === listener.eventType && eventHandler === listener.eventHandler) {
+                    deleteListenersID.unshift(index);
+                }
+            });
+
+            deleteListenersID.forEach((id) => {
+                DelegateListeners.listeners[selector].splice(id, 1);
+            });
+
+            if (0 === DelegateListeners.listeners[selector].length) {
+                delete DelegateListeners.listeners[selector];
+            }
+        }
+    }
+
+    private static unique(listeners: {
+        eventType: Event['type'];
+        eventHandler: Function;
+        elementScopeHandler: EventListener;
+    }[], eventType: Event['type'], eventHandler: Function): boolean {
+        try {
+            let existing = listeners.filter((listener) => {
+                return eventHandler === listener.eventHandler && eventType === listener.eventType;
+            });
+
+            if (0 === existing.length) {
+                return true;
+            } else {
+                return false;
+            }
+        } catch (err) {
+            return false;
+        }
+    }
+}
+
+export function q(selector: string, parent: HTMLElement | Document = document): HTMLElement | null {
+    const x = parent.querySelector(selector);
+    
+    return x ? x as HTMLElement : x;
+}
+
+export function qq(selector: string, parent: HTMLElement | Document = document): HTMLElement[] {
+    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
+}
+
+export function delegate(selector: string, eventType: Event['type'], eventHandler: Function, elementScope: HTMLElement | Document = document) {
+    let listener = DelegateListeners.set(selector, eventType, eventHandler, function (event: any) {
+        try {
+            let target = event.target;
+
+            while (target && target !== elementScope) {
+                if (target.matches(selector)) {
+                    eventHandler.call(target, [event]);
+                    break;
+                }
+
+                target = (<Element>target.parentNode);
+            }
+        } catch (err) { }
+    });
+
+    if (listener) {
+        elementScope.addEventListener(eventType, listener.elementScopeHandler);
+    }
+}
+
+export function delegateRemove(selector: string, eventType: Event['type'], eventHandler: Function, elementScope: HTMLElement | Document = document) {
+    let listener = DelegateListeners.get(selector, eventType, eventHandler);
+
+    if (listener) {
+        elementScope.removeEventListener(eventType, listener.elementScopeHandler);
+
+        DelegateListeners.delete(selector, eventType, eventHandler);
+    }
+}

package/ts/library/dom.ts

@@ -0,0 +1,124 @@
+class DelegateListeners {
+    private static listeners: {
+        [name: string]: {
+            eventType: Event['type'];
+            eventHandler: Function;
+            elementScopeHandler: EventListener;
+        }[];
+    } = {};
+
+    public static set(selector: string, eventType: Event['type'], eventHandler: Function, elementScopeHandler: EventListener) {
+        if (!DelegateListeners.listeners[selector]) {
+            DelegateListeners.listeners[selector] = [];
+        }
+
+        if (this.unique(DelegateListeners.listeners[selector], eventType, eventHandler)) {
+            let listener = {
+                eventType: eventType,
+                eventHandler: eventHandler,
+                elementScopeHandler: elementScopeHandler,
+            };
+
+            DelegateListeners.listeners[selector].push(listener);
+
+            return listener;
+        } else {
+            return this.get(selector, eventType, eventHandler);
+        }
+    }
+
+    public static get(selector: string, eventType: Event['type'], eventHandler: Function) {
+        if (DelegateListeners.listeners[selector]) {
+            try {
+                return DelegateListeners.listeners[selector].filter((listener) => {
+                    return eventHandler === listener.eventHandler && eventType === listener.eventType;
+                })[0];
+            } catch (err) { };
+        }
+
+        return null;
+    }
+
+    public static delete(selector: string, eventType: Event['type'], eventHandler: Function) {
+        let deleteListenersID: number[] = [];
+
+        if (DelegateListeners.listeners[selector]) {
+            DelegateListeners.listeners[selector].forEach((listener, index: number) => {
+                if (eventType === listener.eventType && eventHandler === listener.eventHandler) {
+                    deleteListenersID.unshift(index);
+                }
+            });
+
+            deleteListenersID.forEach((id) => {
+                DelegateListeners.listeners[selector].splice(id, 1);
+            });
+
+            if (0 === DelegateListeners.listeners[selector].length) {
+                delete DelegateListeners.listeners[selector];
+            }
+        }
+    }
+
+    private static unique(listeners: {
+        eventType: Event['type'];
+        eventHandler: Function;
+        elementScopeHandler: EventListener;
+    }[], eventType: Event['type'], eventHandler: Function): boolean {
+        try {
+            let existing = listeners.filter((listener) => {
+                return eventHandler === listener.eventHandler && eventType === listener.eventType;
+            });
+
+            if (0 === existing.length) {
+                return true;
+            } else {
+                return false;
+            }
+        } catch (err) {
+            return false;
+        }
+    }
+}
+
+export const ww = (window as any);
+
+export function delegate(selector: string, eventType: Event['type'], eventHandler: Function, elementScope: HTMLElement | Document = document) {
+    let listener = DelegateListeners.set(selector, eventType, eventHandler, function (event: any) {
+        try {
+            let target = event.target;
+
+            while (target && target !== elementScope) {
+                if (target.matches(selector)) {
+                    eventHandler.call(target, event);
+                    break;
+                }
+
+                target = (<Element>target.parentNode);
+            }
+        } catch (err) { }
+    });
+
+    if (listener) {
+        elementScope.addEventListener(eventType, listener.elementScopeHandler);
+    }
+}
+
+export function delegateRemove(selector: string, eventType: Event['type'], eventHandler: Function, elementScope: HTMLElement | Document = document) {
+    let listener = DelegateListeners.get(selector, eventType, eventHandler);
+
+    if (listener) {
+        elementScope.removeEventListener(eventType, listener.elementScopeHandler);
+
+        DelegateListeners.delete(selector, eventType, eventHandler);
+    }
+}
+
+export function q(selector: string, parent: HTMLElement | Document = document): HTMLElement | null {
+    const x = parent.querySelector(selector);
+    
+    return x ? x as HTMLElement : x;
+}
+
+export function qq(selector: string, parent: HTMLElement | Document = document): HTMLElement[] {
+    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
+}

package/ts/library/event.ts

@@ -0,0 +1,138 @@
+'use strict';
+
+export abstract class KEventTarget {
+    private eventListeners: { [type: string]: ((ev: KEvent) => any)[] };
+
+    constructor() {
+        this.eventListeners = {};
+    }
+
+    public addEventListener(type: string, listener: (ev: KEvent) => any, useCapture: boolean = true) {
+        const listeners = this.getListeners(type, useCapture);
+        listeners.push(listener);
+    }
+
+    public removeEventListener(type: string, listener: (ev: KEvent) => any, useCapture: boolean = true) {
+        const listeners = this.getListeners(type, useCapture);
+        const i = listeners.indexOf(listener);
+        if (i !== -1) {
+            listeners.splice(i, 1);
+        }
+    }
+
+    public dispatchEvent(evt: KEvent): boolean {
+        const ancestors: KEventTarget[] = [this];
+        let parent = this.getParent();
+
+        while (parent != null) {
+            ancestors.push(parent);
+            parent = parent.getParent();
+        }
+
+        evt._target = this;
+        ancestors.reverse();
+        for (const target of ancestors) {
+            target.fireEvent(evt, true);
+            if (evt.stopPropagationFlag) {
+                return true;
+            }
+        }
+
+        ancestors.reverse();
+        for (const target of ancestors) {
+            target.fireEvent(evt, false);
+            if (evt.stopPropagationFlag) {
+                return true;
+            }
+        }
+
+        return true;
+    }
+
+    private fireEvent(evt: KEvent, capture: boolean): void {
+        const listeners = this.getListeners(evt.type, capture);
+        evt._currentTarget = this;
+
+        for (const l of listeners) {
+            l.call(this, evt);
+            if (evt.stopImmediatePropagationFlag) {
+                break;
+            }
+        }
+    }
+
+    private getListeners(type: string, capture: boolean) {
+        const key = type + (capture ? 'c' : 'b');
+        let listeners = this.eventListeners[key];
+        if (!listeners) {
+            listeners = this.eventListeners[key] = [];
+        }
+        return listeners;
+    }
+
+    private getParent(): KEventTarget | null {
+        return null;
+    }
+}
+
+class KDummyEventTarget extends KEventTarget {
+}
+
+export class KEvent {
+    public type: string;
+    public _target: KEventTarget;
+    public _currentTarget: KEventTarget;
+    public stopPropagationFlag: boolean;
+    public stopImmediatePropagationFlag: boolean;
+    public extra: { [key: string]: any };
+
+    constructor(public wrappedEvent?: Event) {
+        if (wrappedEvent) {
+            this.type = wrappedEvent.type;
+        } else {
+            this.type = 'unknown';
+        }
+        this._target = this._currentTarget = new KDummyEventTarget();
+        this.extra = {};
+        this.stopPropagationFlag = false;
+        this.stopImmediatePropagationFlag = false;
+    }
+
+    // tslint:disable-next-line:function-name
+    public static fromType(type: string, extra?: { [key: string]: any }): KEvent {
+        const ev = new KEvent();
+        ev.type = type;
+        if (extra) {
+            ev.setExtra(extra);
+        }
+        return ev;
+    }
+
+    public get target() {
+        return this._target;
+    }
+
+    public get currentTarget() {
+        return this._currentTarget;
+    }
+
+    public setExtra(e: { [key: string]: any }): this {
+        this.extra = e;
+        return this;
+    }
+
+    public stopPropagation() {
+        this.stopPropagationFlag = true;
+        if (this.wrappedEvent) {
+            this.wrappedEvent.stopPropagation();
+        }
+    }
+
+    public stopImmediatePropagation() {
+        this.stopPropagationFlag = true;
+        this.stopImmediatePropagationFlag = true;
+        if (this.wrappedEvent) {
+            this.wrappedEvent.stopImmediatePropagation();
+        }
+    }
+}