updates

src/utils/dom.js

@@ -57,6 +57,61 @@
 		static section = null;
 	}
 
+	/**
+	 * Set Slide Props
+	 */
+	function setSlideProps(target) {
+
+		const computedStyle = window.getComputedStyle(target);
+
+		let display = computedStyle.getPropertyValue('display');
+		let overflow = computedStyle.getPropertyValue('overflow');
+		let boxSizing = computedStyle.getPropertyValue('box-sizing');
+		let paddingTop = parseInt(computedStyle.getPropertyValue('padding-top').split('px')[0]);
+		let paddingBottom = parseInt(computedStyle.getPropertyValue('padding-bottom').split('px')[0]);
+		let marginTop = parseInt(computedStyle.getPropertyValue('margin-top').split('px')[0]);
+		let marginBottom = parseInt(computedStyle.getPropertyValue('margin-bottom').split('px')[0]);
+
+		if (display == 'none') {
+
+			if (target.style.display) {
+				target.style.removeProperty('display');
+				display = computedStyle.getPropertyValue('display');
+			}
+
+			if (display == 'none') {
+				target.style.display = 'block';
+			}
+		}
+
+		let contentHeight = Math.max(target.offsetHeight - paddingTop - paddingBottom, 0);
+
+		if (boxSizing == 'border-box') {
+			contentHeight = Math.max(target.offsetHeight, 0);
+		}
+
+		return {
+			display: display,
+			style: {
+				height: target.style.height,
+				marginTop: target.style.marginTop,
+				marginBottom: target.style.marginBottom,
+				paddingTop: target.style.paddingTop,
+				paddingBottom: target.style.paddingBottom,
+				overflow: target.style.overflow,
+				display: target.style.display
+			},
+			down: {
+				overflow: overflow,
+				height: contentHeight + 'px',
+				marginTop: marginTop + 'px',
+				marginBottom: marginBottom + 'px',
+				paddingTop: paddingTop + 'px',
+				paddingBottom: paddingBottom + 'px',
+			}
+		};
+	}
+	
 	/**
 	 * Set Dom Uti;s
 	 */
@@ -589,6 +644,238 @@
 			return this;
 		},
 
+		/**
+		 * Slide Down
+		 */
+		slideDown(optsArg) {
+
+			if (this.dataset.slideBusy || window.getComputedStyle(this).getPropertyValue('display') != 'none') {
+				return this;
+			}
+
+			let opts = {
+				duration: 300,
+				display : 'block'
+			};
+			
+			if (Ut.isFn(optsArg)) {
+				opts.complete = optsArg;
+			}
+			else {
+				opts = { ... opts, ... optsArg };
+			}
+
+			this.dataset.slideBusy = 1;
+
+			this.classList.remove('hide');
+
+			if (window.getComputedStyle(this).getPropertyValue('display') == 'none') {						
+				this.style.display = opts.display;
+			}
+
+			const props = setSlideProps(this);
+
+			Object.assign(this.style, {
+				height: '0px',
+				marginTop: '0px',
+				marginBottom: '0px',
+				paddingTop: '0px',
+				paddingBottom: '0px',
+				overflow: 'hidden'
+			});
+
+			const anim = this.animate(props.down,
+			{
+				duration: opts.duration,
+				easing: 'linear',
+				iterations: 1
+			});
+
+			const target = this;
+
+			anim.onfinish = function() {
+
+				Object.assign(target.style, props.style);
+
+				delete target.dataset.slideBusy;
+
+				if (opts.complete) {
+					opts.complete.call(target, target, true);
+				}
+			};
+		},
+
+		/**
+		* SlideUp
+		*/
+		slideUp(optsArg) {
+
+			if (this.dataset.slideBusy || window.getComputedStyle(this).getPropertyValue('display') == 'none') {
+				return this;
+			}
+
+			let opts = {
+				duration: 300
+			};
+
+			if (Ut.isFn(optsArg)) {
+				opts.complete = optsArg;
+			}
+			else {
+				opts = { ... opts, ... optsArg };
+			}
+
+			this.dataset.slideBusy = 1;
+
+			const props = setSlideProps(this);
+
+			Object.assign(this.style, props.down);
+
+			const anim = this.animate({
+				height: '0px',
+				marginTop: '0px',
+				marginBottom: '0px',
+				paddingTop: '0px',
+				paddingBottom: '0px',
+				overflow: 'hidden'
+			}, {
+				duration: opts.duration,
+				easing: 'linear',
+				iterations: 1
+			});
+
+			const target = this;
+			
+			anim.onfinish = function() {
+
+				Object.assign(target.style, props.style);
+
+				target.classList.add('hide');
+
+				delete target.dataset.slideBusy;
+
+				if (opts.complete) {
+					opts.complete.call(target, target, false);
+				}
+			};
+		},
+
+		/**
+		* Slide Toggle
+		*/
+		slideToggle(callback, force) {
+
+			if (window.getComputedStyle(this).getPropertyValue('display') == 'none') {
+				domUtils.slideDown.call(this, callback, force);
+				return this;
+			}
+			
+			domUtils.slideUp.call(this, callback, force);
+
+			return this;
+		},
+		/**
+		 * Fade In
+		 */
+		fadeIn(optsArg) {
+
+			if (this.dataset.fadeBusy || window.getComputedStyle(this).getPropertyValue('display') != 'none') {
+				return this;
+			}
+
+			let opts = {
+				duration: 300,
+				display : 'block'
+			};
+			
+			if (Ut.isFn(optsArg)) {
+				opts.complete = optsArg;
+			}
+			else {
+				opts = { ... opts, ... optsArg };
+			}
+
+			this.dataset.fadeBusy = 1;
+
+			this.classList.remove('hide');
+
+			if (window.getComputedStyle(this).getPropertyValue('display') == 'none') {						
+				this.style.display = opts.display;
+			}
+
+			this.style.opacity = '0';
+
+			const anim = this.animate({ opacity: 1 },
+			{
+				duration  : opts.duration,
+				easing    : 'linear',
+				iterations: 1,
+			});
+
+			const target = this;
+			
+			anim.onfinish = function() {
+				
+				target.style.removeProperty('opacity');
+
+				delete target.dataset.fadeBusy;
+
+				if (opts.complete) {
+					opts.complete.call(target, target, true);
+				}
+			};
+
+			return this;
+		},
+
+		/**
+		 * Fade Out
+		 */
+		fadeOut(optsArg) {
+
+			if (this.dataset.fadeBusy || window.getComputedStyle(this).getPropertyValue('display') == 'none') {
+				return;
+			}
+
+			this.dataset.fadeBusy = 1;
+
+			let opts = {
+				duration: 300
+			};
+			
+			if (Ut.isFn(optsArg)) {
+				opts.complete = optsArg;
+			}
+			else {
+				opts = { ... opts, ... optsArg };
+			}
+
+			this.style.opacity = '1';
+
+			const anim = this.animate({ opacity: 0 },
+			{
+				duration  : opts.duration,
+				easing    : 'linear',
+				iterations: 1,
+			});
+
+			const target = this;
+
+			anim.onfinish = function() {
+
+				target.classList.add('hide');
+				target.style.removeProperty('opacity');
+
+				delete target.dataset.fadeBusy
+
+				if (opts.complete) {
+					opts.complete.call(target, target, false);
+				}
+			};
+
+			return this;
+		},
+		
 		/**
 		 * Dom Content Loaded Handler
 		 */