bobjoll 0.0.4

package/ts/partials/password-v1.0.ts

@@ -0,0 +1,19 @@
+import { delegate } from 'bobjoll/ts/library/dom';
+import 'bobjoll/ts/library/common';
+
+(function() {
+    delegate('.password__toggle', 'click', function(this: HTMLElement) {
+        const parents = this.parents('.password');
+
+        if (parents.length > 0) {
+            const password = parents[0];
+            const input = <HTMLInputElement>password.querySelector('input');
+
+            if (input) {
+                const state = password.classList.toggle('password--show');
+
+                input.type = state ? 'text' : 'password';
+            }
+        }
+    });
+})();

package/ts/partials/popover-v1.0.ts

@@ -0,0 +1,125 @@
+import 'Common';
+import { Settings } from 'Settings';
+import { delegate } from 'bobjoll/ts/library/dom';
+
+(function() {
+	let timeout: number;
+	let active: Element[] = [];
+
+	delegate('.popover__trigger', 'click', function(this: HTMLElement, e: Event) {
+		e.preventDefault();
+
+		let popover: Element | null = this.parentElement;
+
+		if (popover && popover.classList.contains('popover')) {
+			let popoverActive = popover.classList.contains('active');
+
+			hide();
+
+			if (!popoverActive) {
+				let popoverEvent = new Event('show');
+
+				popover.dispatchEvent(popoverEvent);
+				popover.classList.add('active');
+				this.classList.add('active');
+
+				active.push(popover);
+
+				if (popover.classList.contains('popover--mobile-fullscreen')) mobile(popover);
+			}
+		}
+	});
+
+	delegate('.popover__close', 'click', (e: Event) => {
+		e.preventDefault();
+
+		hide();
+	});
+
+	window.addEventListener('resize', () => {
+		if (active && active.length > 0) {
+			if(window.innerWidth <= Settings.breakpoints.sm) {
+				if (timeout) clearTimeout(timeout);
+
+				timeout = setTimeout(() => {
+					[].forEach.call(active, (element: HTMLElement) => {
+						let container = element.querySelector('popover__container');
+
+						if (container) {
+							container.removeAttribute('style');
+
+							if(window.innerWidth > Settings.breakpoints.sm) container.classList.remove('notransition');
+						}
+
+						mobile(element);
+					});
+				});
+			}
+		}
+	});
+
+	window.addEventListener('mouseup', (e: Event) => {
+		let target: EventTarget|null = e.target;
+
+		if (target instanceof HTMLElement) {
+			let popover = target.parents('.popover');
+
+			if (popover.length === 0 && active.length > 0) {
+				hide();
+			}
+		}
+	});
+
+	function mobile(popover: Element) {
+		if (popover && window.innerWidth <= Settings.breakpoints.sm) {
+			let container: HTMLElement | null = (<HTMLElement>popover.querySelector('.popover__container'));
+
+			if (container) {
+				let containerSpacing: number = 12;
+				let containerScrollable: HTMLElement | null = (<HTMLElement>container.querySelector('.scrollable'));
+				let containerBounding = container.getBoundingClientRect();
+
+				if (!container.hasAttribute('style')) {
+					container.classList.add('notransition');
+					container.style.width = document.body.clientWidth + 'px';
+
+					if (containerScrollable) {
+						let maxHeight: number = (window.innerHeight - containerBounding.top) - containerSpacing;
+
+						containerScrollable.style.maxHeight = maxHeight + 'px';
+					}
+
+					if (popover.classList.contains('popover--bottom-left')) {
+						let left: number = containerBounding.left * -1;
+
+						container.style.left = left + 'px';
+					}
+
+					if (popover.classList.contains('popover--bottom-right')) {
+						let right: number = (document.body.clientWidth - containerBounding.right) * -1;
+
+						container.style.right = right + 'px'
+					}
+				}
+			}
+		}
+	}
+
+	function hide() {
+		if (active.length > 0) {
+			let popoverEvent = new Event('hide');
+
+			active.forEach((element: Element, index: number) => {
+				let button: Element | null = element.querySelector('.popover__trigger');
+
+				if (button) button.classList.remove('active');
+
+				element.classList.remove('active');
+				element.dispatchEvent(popoverEvent);
+				element.removeAttribute('style');
+
+				active.splice(index, 1);
+			});
+		}
+	}
+})();

package/ts/partials/progress-bar-v1.0.ts

@@ -0,0 +1,29 @@
+import { q } from '../library/dom';
+
+export default class ProgressBar {
+    public static setValue(selector: string, value: number, completeTitleHtml?: string) {
+
+        if (value >= 0 && value <= 100) {
+            const progressBar = q(selector);
+            if (progressBar) {
+                (q('.progress-bar__value', progressBar) as HTMLElement).style.width = `${value}%`;
+    
+                if (value === 100) {
+                    progressBar.dataset.complete = 'true';
+    
+                    if (completeTitleHtml) {
+    
+                        const progressBarTitle = q('.progress-bar__title', progressBar) as HTMLParagraphElement;
+    
+                        progressBarTitle.innerHTML = completeTitleHtml;
+    
+                        progressBarTitle.classList.add('progress-bar__title-complete');
+                    }
+    
+                } else {
+                    progressBar.dataset.complete = 'false';
+                }
+            }
+        }        
+    }
+}

package/ts/partials/scroll-v1.0.ts

@@ -0,0 +1,169 @@
+import 'bobjoll/ts/library/common';
+import { delegate } from 'bobjoll/ts/library/dom';
+
+export default class Scroll {
+    private static readonly requestAnimationFrame = (
+        (window as any).requestAnimationFrame ||
+        (window as any).webkitRequestAnimationFrame ||
+        (window as any).mozRequestAnimationFrame ||
+        (window as any).msRequestAnimationFrame ||
+        (window as any).oRequestAnimationFrame
+    ).bind(window);
+
+    private static callbacks: Function[] = [];
+    private static instance: Scroll;
+    private static position: Number;
+
+    constructor() {
+      Scroll.position = Scroll.getPosition();
+      this.addEventListeners();
+    }
+
+    private addEventListeners() {
+      const self = this;
+
+      delegate('.scrollTo', 'click', function (this: HTMLElement, e: Event) {
+        e.preventDefault();
+
+        let id: string | null = self.getTarjetId(this.getAttribute('href')) || '';
+
+        let tarjetElement: HTMLElement | null = document.getElementById(id) || null;
+        if (tarjetElement !== null) {
+          self.scrollTo(tarjetElement, 300);
+        }
+      });
+    }
+
+    private getTarjetId(anchor: string | null) {
+      return anchor !== null && anchor.split('#').length > 1
+        ? anchor.split('#')[1]
+        : anchor || null;
+    }
+
+    public static add(callback: Function) {
+        return Scroll.callbacks.push(callback);
+    }
+
+    public static remove(callbackOrIndex: number | Function)  {
+        try {
+            if ('function' === typeof callbackOrIndex) {
+                Scroll.callbacks.slice(Scroll.callbacks.indexOf(callbackOrIndex), 1);
+            } else {
+                Scroll.callbacks.slice(callbackOrIndex, 1);
+            }
+        } catch (err) { }
+    }
+
+    public static clear() {
+        Scroll.callbacks = [];
+    }
+
+    private static callback() {
+        const position = Scroll.getPosition();
+
+        if (position !== Scroll.position) {
+            const direction = position > Scroll.position ? 'down' : 'up';
+
+            Scroll.callbacks.forEach(function (callback) {
+                try {
+                    callback(position, direction);
+                } catch (e) {
+                    console.warn(e);
+                }
+            });
+
+            Scroll.position = Scroll.getPosition();
+        }
+
+        Scroll.requestAnimationFrame(Scroll.callback);
+    }
+
+    public static getPosition() {
+        return window.pageYOffset || (document.body)?document.body.scrollTop:0;
+    }
+
+    public scrollTo(destination: HTMLElement | number, duration = 200, easing = 'linear', callback?: Function) {
+        const easings: { [key: string]: Function; } = {
+            linear(t: number) {
+              return t;
+            },
+            easeInQuad(t: number) {
+              return t * t;
+            },
+            easeOutQuad(t: number) {
+              return t * (2 - t);
+            },
+            easeInOutQuad(t: number) {
+              return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+            },
+            easeInCubic(t: number) {
+              return t * t * t;
+            },
+            easeOutCubic(t: number) {
+              return (--t) * t * t + 1;
+            },
+            easeInOutCubic(t: number) {
+              return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+            },
+            easeInQuart(t: number) {
+              return t * t * t * t;
+            },
+            easeOutQuart(t: number) {
+              return 1 - (--t) * t * t * t;
+            },
+            easeInOutQuart(t: number) {
+              return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
+            },
+            easeInQuint(t: number) {
+              return t * t * t * t * t;
+            },
+            easeOutQuint(t: number) {
+              return 1 + (--t) * t * t * t * t;
+            },
+            easeInOutQuint(t: number) {
+              return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
+            }
+        };
+        
+        const start = window.pageYOffset;
+        const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
+    
+        const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
+        const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop;
+        const destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset);
+    
+        if ('requestAnimationFrame' in window === false) {
+            window.scroll(0, destinationOffsetToScroll);
+            if (callback) {
+                callback();
+            }
+            return;
+        }
+    
+        function scroll() {
+            const now = 'now' in window.performance ? performance.now() : new Date().getTime();
+            const time = Math.min(1, ((now - startTime) / duration));
+            const timeFunction = easings[easing](time);
+
+            window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start));
+        
+            if (
+              Math.ceil(window.pageYOffset) === destinationOffsetToScroll ||
+              Math.ceil(window.pageYOffset) === (destinationOffsetToScroll-1) ||
+              Math.ceil(window.pageYOffset) === (destinationOffsetToScroll+1)
+              ) {
+                if (callback) {
+                    callback();
+                }
+                return;
+            }
+        
+            requestAnimationFrame(scroll);
+        }
+    
+        scroll();
+    }
+}
+
+const scroll = new Scroll();

package/ts/partials/scrollable-v1.0.ts

@@ -0,0 +1,90 @@
+
+interface Touch {
+    identifier: number;
+    target: EventTarget;
+    screenX: number;
+    screenY: number;
+    clientX: number;
+    clientY: number;
+    pageX: number;
+    pageY: number;
+};
+
+interface TouchList {
+    length: number;
+    [key: number]: Touch;
+};
+
+interface TouchEvent extends UIEvent {
+    touches: TouchList;
+    targetTouches: TouchList;
+    changedTouches: TouchList;
+    originalEvent: any;
+};
+
+import { Settings } from 'Settings';
+import { delegate } from 'bobjoll/ts/library/dom';
+
+(function() {
+    let touch = (('ontouchstart' in window) || ((navigator as any).MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+    let start: number;
+    let timeout: number;
+
+    if (touch) {
+        delegate('.scrollable', 'touchstart', function(this: HTMLElement, e: TouchEvent) {
+            e.stopPropagation();
+
+            if (timeout) clearTimeout(timeout);
+
+            if (!disable(this)) {
+                let touch = getTouchEvent(e);
+
+                start = touch.pageY;
+            }
+        });
+
+        delegate('.scrollable', 'touchmove', function(this: HTMLElement, e: TouchEvent) {
+            e.stopPropagation();
+
+            if (!disable(this)) {
+                let touch = getTouchEvent(e);
+                let move = start - touch.pageY;
+
+                if(this.scrollTop + move >= this.scrollHeight - this.clientHeight) {
+                    e.preventDefault();
+                    e.returnValue = false;
+                }
+            }
+        });
+    }
+
+    delegate('.scrollable', 'DOMMouseScroll mousewheel', function(this: HTMLElement, e: any) {
+        e.stopPropagation();
+
+        if(!disable(this) && this.scrollHeight > this.clientHeight) {
+            var up = (e.type == 'DOMMouseScroll' ? e.detail * -40 : e.wheelDelta) > 0,
+                h = this.scrollHeight - this.clientHeight,
+                c = this.scrollTop / h;
+
+            if ((!up && c === 1) || (up && c === 0) || h === 0) {
+                e.preventDefault();
+                e.returnValue = false;
+            }
+        }
+    });
+
+    function disable(element: HTMLElement) {
+        if(element.classList.contains('scrollable--xs') && window.innerWidth >= Settings.breakpoints.xs) return true;
+        if(element.classList.contains('scrollable--sm') && window.innerWidth >= Settings.breakpoints.sm) return true;
+        if(element.classList.contains('scrollable--md') && window.innerWidth >= Settings.breakpoints.md) return true;
+        if(element.classList.contains('scrollable--lg') && window.innerWidth >= Settings.breakpoints.lg) return true;
+
+        return false;
+    }
+
+    function getTouchEvent(e: any) {
+        let event = e;
+
+        return event.targetTouches ? event.targetTouches[0] : event.changedTouches[0];
+    }
+})();

package/ts/partials/tabs-v1.0.ts

@@ -0,0 +1,79 @@
+import 'bobjoll/ts/library/common';
+import { delegate } from 'bobjoll/ts/library/dom';
+
+class Tabs {
+	constructor() {
+		this.addEventListeners();
+	}
+
+	public show(id: string) {
+		let tab = document.getElementById(id);
+
+		if (tab) {
+			let parents = tab.parents('.tabs');
+
+			if (parents && parents.length > 0) {
+				let tabWrapper = parents[0];
+				let tabWrapperButtons = tabWrapper.querySelectorAll('.tabs__link');
+
+				if (tabWrapperButtons.length > 0) {
+					[].forEach.call(tabWrapperButtons, (element: HTMLElement) => {
+						if (element.dataset['tab'] !== id || element.classList.contains('active')) {
+							element.classList.remove('active');
+						}
+
+						if (element.dataset['tab'] === id) {
+							element.classList.add('active');
+						}
+					});
+				}
+			}
+		}
+	}
+
+	private addEventListeners() {
+		const self = this;
+
+		delegate('.tabs__link', 'click', function (this: HTMLElement, e: Event) {
+			let id: string | undefined = this.dataset['tab'];
+
+			if (id) {
+				e.preventDefault();
+
+				self.show(id);
+			}
+		});
+
+		window.addEventListener('resize', () => {
+			if ((window as any).tabsTimeout) clearTimeout((window as any).tabsTimeout);
+
+			(window as any).tabsTimeout = setTimeout(function () {
+				let tabs = document.getElementsByClassName('tabs');
+
+				[].forEach.call(tabs, (element: HTMLElement) => {
+					let tabsButtons = element.querySelectorAll('.tabs__link.active'); // Active tab
+
+					if (tabsButtons.length === 0) {
+						let tabsButton = (<HTMLElement>element.querySelector('.tabs__link')); // First tab
+
+						if (tabsButton) {
+							let id = tabsButton.dataset['tab'];
+
+							if (id) {
+								let tabsButtons = element.querySelectorAll('.tabs__link[data-tab="' + id + '"]'); // Tab buttons with same id
+
+								if (tabsButtons) {
+									[].forEach.call(tabsButtons, (element: HTMLElement) => {
+										element.classList.add('active');
+									});
+								}
+							}
+						}
+					}
+				});
+			}, 150);
+		});
+	}
+}
+
+export default new Tabs();

package/ts/partials/tags-v1.0.ts

@@ -0,0 +1,21 @@
+import { delegate } from 'bobjoll/ts/library/dom';
+
+(function() {
+	delegate('.tags .remove', 'click', function(this: HTMLElement, e: Event) {
+		e.preventDefault();
+
+		let id: string | null = this.getAttribute('for');
+
+		if (id) {
+			let input = (<HTMLInputElement>document.getElementById(id));			
+
+			if (input) {
+				let event = new Event('change');
+
+				input.checked = false;
+
+				input.dispatchEvent(event); 
+			}			
+		}
+	});
+})();

package/ts/partials/trigger-v2.0.ts

@@ -0,0 +1,155 @@
+import { qq, delegate } from 'bobjoll/ts/library/dom';
+import { KEvent, KEventTarget } from 'bobjoll/ts/library/event';
+
+interface TriggerActive {
+    [name: string]: {
+        id: string;
+        permanent: boolean;
+        lockscroll: boolean;
+    };
+}
+
+export class KEventShow extends KEvent {
+    constructor(container: HTMLElement) {
+        super();
+        this.type = 'show';
+        this.extra = container;
+    }
+}
+
+export class KEventHide extends KEvent {
+    constructor(container: HTMLElement) {
+        super();
+        this.type = 'hide';
+        this.extra = container;
+    }
+}
+
+class Trigger extends KEventTarget {
+    private static readonly wrapper = document.body;
+    private static readonly classActive = 'active';
+    private static active: TriggerActive = {};
+
+    constructor() {
+        super();
+
+        this.addEventListeners();
+    }
+
+    private static getActiveTrigger(permanent: boolean = false) {
+        return Object.keys(Trigger.active).reduce((acc: string[], key) => {
+            const settings = Trigger.active[key];
+
+            if (settings && settings.permanent == permanent) {
+                acc.push(settings.id);
+            }
+
+            return acc;
+        }, []);
+    }
+
+    private static getContainer(id: string) {
+        return <HTMLElement>document.getElementById(id) || null;
+    }
+
+    private static getSettings(container: HTMLElement) {
+        return {
+            id: container.id,
+            permanent: container.dataset.permanent ? true : false,
+            lockscroll: container.dataset.lockScroll ? true : false,
+        };
+    }
+
+    private static update(id?: string) {
+        Trigger.wrapper.dataset.trigger = Trigger.getActiveTrigger(true).join(' ') || id || '';
+    }
+
+    public addEventListener(t: 'show', listener: (ev: KEvent) => any, useCapture?: boolean): void;
+    public addEventListener(t: 'hide', listener: (ev: KEvent) => any, useCapture?: boolean): void;
+    public addEventListener(t: string, listener: (ev: KEvent) => any, useCapture: boolean = true): void {
+        super.addEventListener(t, listener, useCapture);
+    }
+
+    public show(id: string) {
+        const container = Trigger.getContainer(id);
+
+        if (container) {
+            container.classList.add(Trigger.classActive);
+
+            qq(`.trigger__button[data-trigger="${id}"]`).forEach(trigger => trigger.classList.add(Trigger.classActive));
+
+            this.add(container);
+
+            this.dispatchEvent(new KEventShow(container));
+        }
+    }
+
+    public hide(id: string) {
+        const container = Trigger.getContainer(id);
+
+        if (container) {
+            container.classList.remove(Trigger.classActive);
+
+            qq(`.trigger__button[data-trigger="${id}"]`).forEach(trigger => trigger.classList.remove(Trigger.classActive));
+
+            this.remove(container);
+
+            this.dispatchEvent(new KEventHide(container));
+        }
+    }
+
+    private add(container: HTMLElement) {
+        const settings = Trigger.getSettings(container);
+
+        if (settings.lockscroll) {
+            Trigger.wrapper.classList.add('overflow-hidden');
+        }
+
+        Trigger.getActiveTrigger().forEach(id => this.hide(id));
+
+        Trigger.active[container.id] = settings;
+
+        Trigger.update(container.id);
+    }
+
+    private remove(container: HTMLElement) {
+        if (Trigger.active[container.id]) {
+            const settings = Trigger.active[container.id];
+
+            if (settings.lockscroll) {
+                Trigger.wrapper.classList.remove('overflow-hidden');
+            }
+
+            delete Trigger.active[container.id];
+        }
+
+        Trigger.update();
+    }
+
+    private addEventListeners() {
+        const self = this;
+
+        delegate('.trigger__button', 'click', function(this: HTMLButtonElement) {
+            const id = this.dataset.trigger || '';
+            const action = this.classList.contains('active') ? 'hide' : 'show';
+
+            self[action](id);
+
+            this.dispatchEvent(new Event(`toggle`));
+        });
+
+        delegate('.trigger__close', 'click', function(this: HTMLButtonElement) {
+            const trigger = this.closest('.trigger');
+
+            if (trigger) {
+                const id = trigger.id;
+
+                self.hide(id);
+            }
+
+            this.dispatchEvent(new Event(`toggle`));
+        });
+    }
+}
+
+export default new Trigger();