+
+ 1;
- _this62.showIndicators = _this62.options.indicators && _this62.hasMultipleSlides;
- _this62.noWrap = _this62.options.noWrap || !_this62.hasMultipleSlides;
- _this62.pressed = false;
- _this62.dragged = false;
- _this62.offset = _this62.target = 0;
- _this62.images = [];
- _this62.itemWidth = _this62.$el.find('.carousel-item').first().innerWidth();
- _this62.itemHeight = _this62.$el.find('.carousel-item').first().innerHeight();
- _this62.dim = _this62.itemWidth * 2 + _this62.options.padding || 1; // Make sure dim is non zero for divisions.
- _this62._autoScrollBound = _this62._autoScroll.bind(_this62);
- _this62._trackBound = _this62._track.bind(_this62);
-
- // Full Width carousel setup
- if (_this62.options.fullWidth) {
- _this62.options.dist = 0;
- _this62._setCarouselHeight();
-
- // Offset fixed items when indicators.
- if (_this62.showIndicators) {
- _this62.$el.find('.carousel-fixed-item').addClass('with-indicators');
- }
- }
-
- // Iterate through slides
- _this62.$indicators = $('
');
- _this62.$el.find('.carousel-item').each(function (el, i) {
- _this62.images.push(el);
- if (_this62.showIndicators) {
- var $indicator = $('
');
-
- // Add active to first by default.
- if (i === 0) {
- $indicator[0].classList.add('active');
- }
-
- _this62.$indicators.append($indicator);
- }
- });
- if (_this62.showIndicators) {
- _this62.$el.append(_this62.$indicators);
- }
- _this62.count = _this62.images.length;
-
- // Cap numVisible at count
- _this62.options.numVisible = Math.min(_this62.count, _this62.options.numVisible);
-
- // Setup cross browser string
- _this62.xform = 'transform';
- ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) {
- var e = prefix + 'Transform';
- if (typeof document.body.style[e] !== 'undefined') {
- _this62.xform = e;
- return false;
- }
- return true;
- });
-
- _this62._setupEventHandlers();
- _this62._scroll(_this62.offset);
- return _this62;
+ // Create new toast
+ Toast._toasts.push(this);
+ let toastElement = this._createToast();
+ toastElement.M_Toast = this;
+ this.el = toastElement;
+ this._animateIn();
+ this._setTimer();
}
-
- _createClass(Carousel, [{
- key: "destroy",
-
-
- /**
- * Teardown component
- */
- value: function destroy() {
- this._removeEventHandlers();
- this.el.M_Carousel = undefined;
- }
-
- /**
- * Setup Event Handlers
- */
-
- }, {
- key: "_setupEventHandlers",
- value: function _setupEventHandlers() {
- var _this63 = this;
-
- this._handleCarouselTapBound = this._handleCarouselTap.bind(this);
- this._handleCarouselDragBound = this._handleCarouselDrag.bind(this);
- this._handleCarouselReleaseBound = this._handleCarouselRelease.bind(this);
- this._handleCarouselClickBound = this._handleCarouselClick.bind(this);
-
- if (typeof window.ontouchstart !== 'undefined') {
- this.el.addEventListener('touchstart', this._handleCarouselTapBound);
- this.el.addEventListener('touchmove', this._handleCarouselDragBound);
- this.el.addEventListener('touchend', this._handleCarouselReleaseBound);
+ static get defaults() {
+ return _defaults;
+ }
+ static getInstance(el) {
+ return el.M_Toast;
+ }
+ static _createContainer() {
+ const container = document.createElement('div');
+ container.setAttribute('id', 'toast-container');
+ // Add event handler
+ container.addEventListener('touchstart', Toast._onDragStart);
+ container.addEventListener('touchmove', Toast._onDragMove);
+ container.addEventListener('touchend', Toast._onDragEnd);
+ container.addEventListener('mousedown', Toast._onDragStart);
+ document.addEventListener('mousemove', Toast._onDragMove);
+ document.addEventListener('mouseup', Toast._onDragEnd);
+ document.body.appendChild(container);
+ Toast._container = container;
+ }
+ static _removeContainer() {
+ document.removeEventListener('mousemove', Toast._onDragMove);
+ document.removeEventListener('mouseup', Toast._onDragEnd);
+ Toast._container.remove();
+ Toast._container = null;
+ }
+ static _onDragStart(e) {
+ if (e.target && e.target.closest('.toast')) {
+ const toastElem = e.target.closest('.toast');
+ const toast = toastElem.M_Toast;
+ toast.panning = true;
+ Toast._draggedToast = toast;
+ toast.el.classList.add('panning');
+ toast.el.style.transition = '';
+ toast.startingXPos = Toast._xPos(e);
+ toast.time = Date.now();
+ toast.xPos = Toast._xPos(e);
}
-
- this.el.addEventListener('mousedown', this._handleCarouselTapBound);
- this.el.addEventListener('mousemove', this._handleCarouselDragBound);
- this.el.addEventListener('mouseup', this._handleCarouselReleaseBound);
- this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound);
- this.el.addEventListener('click', this._handleCarouselClickBound);
-
- if (this.showIndicators && this.$indicators) {
- this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
- this.$indicators.find('.indicator-item').each(function (el, i) {
- el.addEventListener('click', _this63._handleIndicatorClickBound);
- });
- }
-
- // Resize
- var throttledResize = M.throttle(this._handleResize, 200);
- this._handleThrottledResizeBound = throttledResize.bind(this);
-
- window.addEventListener('resize', this._handleThrottledResizeBound);
- }
-
- /**
- * Remove Event Handlers
- */
-
- }, {
- key: "_removeEventHandlers",
- value: function _removeEventHandlers() {
- var _this64 = this;
-
- if (typeof window.ontouchstart !== 'undefined') {
- this.el.removeEventListener('touchstart', this._handleCarouselTapBound);
- this.el.removeEventListener('touchmove', this._handleCarouselDragBound);
- this.el.removeEventListener('touchend', this._handleCarouselReleaseBound);
- }
- this.el.removeEventListener('mousedown', this._handleCarouselTapBound);
- this.el.removeEventListener('mousemove', this._handleCarouselDragBound);
- this.el.removeEventListener('mouseup', this._handleCarouselReleaseBound);
- this.el.removeEventListener('mouseleave', this._handleCarouselReleaseBound);
- this.el.removeEventListener('click', this._handleCarouselClickBound);
-
- if (this.showIndicators && this.$indicators) {
- this.$indicators.find('.indicator-item').each(function (el, i) {
- el.removeEventListener('click', _this64._handleIndicatorClickBound);
- });
- }
-
- window.removeEventListener('resize', this._handleThrottledResizeBound);
- }
-
- /**
- * Handle Carousel Tap
- * @param {Event} e
- */
-
- }, {
- key: "_handleCarouselTap",
- value: function _handleCarouselTap(e) {
- // Fixes firefox draggable image bug
- if (e.type === 'mousedown' && $(e.target).is('img')) {
- e.preventDefault();
- }
- this.pressed = true;
- this.dragged = false;
- this.verticalDragged = false;
- this.reference = this._xpos(e);
- this.referenceY = this._ypos(e);
-
- this.velocity = this.amplitude = 0;
- this.frame = this.offset;
- this.timestamp = Date.now();
- clearInterval(this.ticker);
- this.ticker = setInterval(this._trackBound, 100);
- }
-
- /**
- * Handle Carousel Drag
- * @param {Event} e
- */
-
- }, {
- key: "_handleCarouselDrag",
- value: function _handleCarouselDrag(e) {
- var x = void 0,
- y = void 0,
- delta = void 0,
- deltaY = void 0;
- if (this.pressed) {
- x = this._xpos(e);
- y = this._ypos(e);
- delta = this.reference - x;
- deltaY = Math.abs(this.referenceY - y);
- if (deltaY < 30 && !this.verticalDragged) {
- // If vertical scrolling don't allow dragging.
- if (delta > 2 || delta < -2) {
- this.dragged = true;
- this.reference = x;
- this._scroll(this.offset + delta);
- }
- } else if (this.dragged) {
- // If dragging don't allow vertical scroll.
+ }
+ static _onDragMove(e) {
+ if (!!Toast._draggedToast) {
e.preventDefault();
- e.stopPropagation();
- return false;
- } else {
- // Vertical scrolling.
- this.verticalDragged = true;
- }
+ const toast = Toast._draggedToast;
+ toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
+ toast.xPos = Toast._xPos(e);
+ toast.velocityX = toast.deltaX / (Date.now() - toast.time);
+ toast.time = Date.now();
+ const totalDeltaX = toast.xPos - toast.startingXPos;
+ const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+ toast.el.style.transform = `translateX(${totalDeltaX}px)`;
+ toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
}
-
- if (this.dragged) {
- // If dragging don't allow vertical scroll.
- e.preventDefault();
- e.stopPropagation();
- return false;
- }
- }
-
- /**
- * Handle Carousel Release
- * @param {Event} e
- */
-
- }, {
- key: "_handleCarouselRelease",
- value: function _handleCarouselRelease(e) {
- if (this.pressed) {
- this.pressed = false;
- } else {
- return;
- }
-
- clearInterval(this.ticker);
- this.target = this.offset;
- if (this.velocity > 10 || this.velocity < -10) {
- this.amplitude = 0.9 * this.velocity;
- this.target = this.offset + this.amplitude;
- }
- this.target = Math.round(this.target / this.dim) * this.dim;
-
- // No wrap of items.
- if (this.noWrap) {
- if (this.target >= this.dim * (this.count - 1)) {
- this.target = this.dim * (this.count - 1);
- } else if (this.target < 0) {
- this.target = 0;
- }
- }
- this.amplitude = this.target - this.offset;
- this.timestamp = Date.now();
- requestAnimationFrame(this._autoScrollBound);
-
- if (this.dragged) {
- e.preventDefault();
- e.stopPropagation();
- }
- return false;
- }
-
- /**
- * Handle Carousel CLick
- * @param {Event} e
- */
-
- }, {
- key: "_handleCarouselClick",
- value: function _handleCarouselClick(e) {
- // Disable clicks if carousel was dragged.
- if (this.dragged) {
- e.preventDefault();
- e.stopPropagation();
- return false;
- } else if (!this.options.fullWidth) {
- var clickedIndex = $(e.target).closest('.carousel-item').index();
- var diff = this._wrap(this.center) - clickedIndex;
-
- // Disable clicks if carousel was shifted by click
- if (diff !== 0) {
- e.preventDefault();
- e.stopPropagation();
- }
- this._cycleTo(clickedIndex);
- }
- }
-
- /**
- * Handle Indicator CLick
- * @param {Event} e
- */
-
- }, {
- key: "_handleIndicatorClick",
- value: function _handleIndicatorClick(e) {
- e.stopPropagation();
-
- var indicator = $(e.target).closest('.indicator-item');
- if (indicator.length) {
- this._cycleTo(indicator.index());
- }
- }
-
- /**
- * Handle Throttle Resize
- * @param {Event} e
- */
-
- }, {
- key: "_handleResize",
- value: function _handleResize(e) {
- if (this.options.fullWidth) {
- this.itemWidth = this.$el.find('.carousel-item').first().innerWidth();
- this.imageHeight = this.$el.find('.carousel-item.active').height();
- this.dim = this.itemWidth * 2 + this.options.padding;
- this.offset = this.center * 2 * this.itemWidth;
- this.target = this.offset;
- this._setCarouselHeight(true);
- } else {
- this._scroll();
- }
- }
-
- /**
- * Set carousel height based on first slide
- * @param {Booleam} imageOnly - true for image slides
- */
-
- }, {
- key: "_setCarouselHeight",
- value: function _setCarouselHeight(imageOnly) {
- var _this65 = this;
-
- var firstSlide = this.$el.find('.carousel-item.active').length ? this.$el.find('.carousel-item.active').first() : this.$el.find('.carousel-item').first();
- var firstImage = firstSlide.find('img').first();
- if (firstImage.length) {
- if (firstImage[0].complete) {
- // If image won't trigger the load event
- var imageHeight = firstImage.height();
- if (imageHeight > 0) {
- this.$el.css('height', imageHeight + 'px');
- } else {
- // If image still has no height, use the natural dimensions to calculate
- var naturalWidth = firstImage[0].naturalWidth;
- var naturalHeight = firstImage[0].naturalHeight;
- var adjustedHeight = this.$el.width() / naturalWidth * naturalHeight;
- this.$el.css('height', adjustedHeight + 'px');
+ }
+ static _onDragEnd() {
+ if (!!Toast._draggedToast) {
+ let toast = Toast._draggedToast;
+ toast.panning = false;
+ toast.el.classList.remove('panning');
+ let totalDeltaX = toast.xPos - toast.startingXPos;
+ let activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+ let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+ // Remove toast
+ if (shouldBeDismissed) {
+ toast.wasSwiped = true;
+ toast.dismiss();
+ // Animate toast back to original position
}
- } else {
- // Get height when image is loaded normally
- firstImage.one('load', function (el, i) {
- _this65.$el.css('height', el.offsetHeight + 'px');
- });
- }
- } else if (!imageOnly) {
- var slideHeight = firstSlide.height();
- this.$el.css('height', slideHeight + 'px');
+ else {
+ toast.el.style.transition = 'transform .2s, opacity .2s';
+ toast.el.style.transform = '';
+ toast.el.style.opacity = '';
+ }
+ Toast._draggedToast = null;
}
- }
-
- /**
- * Get x position from event
- * @param {Event} e
- */
-
- }, {
- key: "_xpos",
- value: function _xpos(e) {
- // touch event
- if (e.targetTouches && e.targetTouches.length >= 1) {
- return e.targetTouches[0].clientX;
+ }
+ static _xPos(e) {
+ if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
+ return e.targetTouches[0].clientX;
}
-
// mouse event
return e.clientX;
- }
-
- /**
- * Get y position from event
- * @param {Event} e
- */
-
- }, {
- key: "_ypos",
- value: function _ypos(e) {
- // touch event
- if (e.targetTouches && e.targetTouches.length >= 1) {
- return e.targetTouches[0].clientY;
- }
-
- // mouse event
- return e.clientY;
- }
-
- /**
- * Wrap index
- * @param {Number} x
- */
-
- }, {
- key: "_wrap",
- value: function _wrap(x) {
- return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + x % this.count) : x;
- }
-
- /**
- * Tracks scrolling information
- */
-
- }, {
- key: "_track",
- value: function _track() {
- var now = void 0,
- elapsed = void 0,
- delta = void 0,
- v = void 0;
-
- now = Date.now();
- elapsed = now - this.timestamp;
- this.timestamp = now;
- delta = this.offset - this.frame;
- this.frame = this.offset;
-
- v = 1000 * delta / (1 + elapsed);
- this.velocity = 0.8 * v + 0.2 * this.velocity;
- }
-
- /**
- * Auto scrolls to nearest carousel item.
- */
-
- }, {
- key: "_autoScroll",
- value: function _autoScroll() {
- var elapsed = void 0,
- delta = void 0;
-
- if (this.amplitude) {
- elapsed = Date.now() - this.timestamp;
- delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
- if (delta > 2 || delta < -2) {
- this._scroll(this.target - delta);
- requestAnimationFrame(this._autoScrollBound);
- } else {
- this._scroll(this.target);
- }
- }
- }
-
- /**
- * Scroll to target
- * @param {Number} x
- */
-
- }, {
- key: "_scroll",
- value: function _scroll(x) {
- var _this66 = this;
-
- // Track scrolling state
- if (!this.$el.hasClass('scrolling')) {
- this.el.classList.add('scrolling');
- }
- if (this.scrollingTimeout != null) {
- window.clearTimeout(this.scrollingTimeout);
- }
- this.scrollingTimeout = window.setTimeout(function () {
- _this66.$el.removeClass('scrolling');
- }, this.options.duration);
-
- // Start actual scroll
- var i = void 0,
- half = void 0,
- delta = void 0,
- dir = void 0,
- tween = void 0,
- el = void 0,
- alignment = void 0,
- zTranslation = void 0,
- tweenedOpacity = void 0,
- centerTweenedOpacity = void 0;
- var lastCenter = this.center;
- var numVisibleOffset = 1 / this.options.numVisible;
-
- this.offset = typeof x === 'number' ? x : this.offset;
- this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
- delta = this.offset - this.center * this.dim;
- dir = delta < 0 ? 1 : -1;
- tween = -dir * delta * 2 / this.dim;
- half = this.count >> 1;
-
- if (this.options.fullWidth) {
- alignment = 'translateX(0)';
- centerTweenedOpacity = 1;
- } else {
- alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
- alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
- centerTweenedOpacity = 1 - numVisibleOffset * tween;
- }
-
- // Set indicator active
- if (this.showIndicators) {
- var diff = this.center % this.count;
- var activeIndicator = this.$indicators.find('.indicator-item.active');
- if (activeIndicator.index() !== diff) {
- activeIndicator.removeClass('active');
- this.$indicators.find('.indicator-item').eq(diff)[0].classList.add('active');
- }
- }
-
- // center
- // Don't show wrapped items.
- if (!this.noWrap || this.center >= 0 && this.center < this.count) {
- el = this.images[this._wrap(this.center)];
-
- // Add active class to center item.
- if (!$(el).hasClass('active')) {
- this.$el.find('.carousel-item').removeClass('active');
- el.classList.add('active');
- }
- var transformString = alignment + " translateX(" + -delta / 2 + "px) translateX(" + dir * this.options.shift * tween * i + "px) translateZ(" + this.options.dist * tween + "px)";
- this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
- }
-
- for (i = 1; i <= half; ++i) {
- // right side
- if (this.options.fullWidth) {
- zTranslation = this.options.dist;
- tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
- } else {
- zTranslation = this.options.dist * (i * 2 + tween * dir);
- tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
- }
- // Don't show wrapped items.
- if (!this.noWrap || this.center + i < this.count) {
- el = this.images[this._wrap(this.center + i)];
- var _transformString = alignment + " translateX(" + (this.options.shift + (this.dim * i - delta) / 2) + "px) translateZ(" + zTranslation + "px)";
- this._updateItemStyle(el, tweenedOpacity, -i, _transformString);
- }
-
- // left side
- if (this.options.fullWidth) {
- zTranslation = this.options.dist;
- tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
- } else {
- zTranslation = this.options.dist * (i * 2 - tween * dir);
- tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
- }
- // Don't show wrapped items.
- if (!this.noWrap || this.center - i >= 0) {
- el = this.images[this._wrap(this.center - i)];
- var _transformString2 = alignment + " translateX(" + (-this.options.shift + (-this.dim * i - delta) / 2) + "px) translateZ(" + zTranslation + "px)";
- this._updateItemStyle(el, tweenedOpacity, -i, _transformString2);
- }
- }
-
- // center
- // Don't show wrapped items.
- if (!this.noWrap || this.center >= 0 && this.center < this.count) {
- el = this.images[this._wrap(this.center)];
- var _transformString3 = alignment + " translateX(" + -delta / 2 + "px) translateX(" + dir * this.options.shift * tween + "px) translateZ(" + this.options.dist * tween + "px)";
- this._updateItemStyle(el, centerTweenedOpacity, 0, _transformString3);
- }
-
- // onCycleTo callback
- var $currItem = this.$el.find('.carousel-item').eq(this._wrap(this.center));
- if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
- this.options.onCycleTo.call(this, $currItem[0], this.dragged);
- }
-
- // One time callback
- if (typeof this.oneTimeCallback === 'function') {
- this.oneTimeCallback.call(this, $currItem[0], this.dragged);
- this.oneTimeCallback = null;
- }
- }
-
- /**
- * Cycle to target
- * @param {Element} el
- * @param {Number} opacity
- * @param {Number} zIndex
- * @param {String} transform
- */
-
- }, {
- key: "_updateItemStyle",
- value: function _updateItemStyle(el, opacity, zIndex, transform) {
- el.style[this.xform] = transform;
- el.style.zIndex = zIndex;
- el.style.opacity = opacity;
- el.style.visibility = 'visible';
- }
-
- /**
- * Cycle to target
- * @param {Number} n
- * @param {Function} callback
- */
-
- }, {
- key: "_cycleTo",
- value: function _cycleTo(n, callback) {
- var diff = this.center % this.count - n;
-
- // Account for wraparound.
- if (!this.noWrap) {
- if (diff < 0) {
- if (Math.abs(diff + this.count) < Math.abs(diff)) {
- diff += this.count;
- }
- } else if (diff > 0) {
- if (Math.abs(diff - this.count) < diff) {
- diff -= this.count;
- }
- }
- }
-
- this.target = this.dim * Math.round(this.offset / this.dim);
- // Next
- if (diff < 0) {
- this.target += this.dim * Math.abs(diff);
-
- // Prev
- } else if (diff > 0) {
- this.target -= this.dim * diff;
- }
-
- // Set one time callback
- if (typeof callback === 'function') {
- this.oneTimeCallback = callback;
- }
-
- // Scroll
- if (this.offset !== this.target) {
- this.amplitude = this.target - this.offset;
- this.timestamp = Date.now();
- requestAnimationFrame(this._autoScrollBound);
- }
- }
-
- /**
- * Cycle to next item
- * @param {Number} [n]
- */
-
- }, {
- key: "next",
- value: function next(n) {
- if (n === undefined || isNaN(n)) {
- n = 1;
- }
-
- var index = this.center + n;
- if (index >= this.count || index < 0) {
- if (this.noWrap) {
- return;
- }
-
- index = this._wrap(index);
- }
- this._cycleTo(index);
- }
-
- /**
- * Cycle to previous item
- * @param {Number} [n]
- */
-
- }, {
- key: "prev",
- value: function prev(n) {
- if (n === undefined || isNaN(n)) {
- n = 1;
- }
-
- var index = this.center - n;
- if (index >= this.count || index < 0) {
- if (this.noWrap) {
- return;
- }
-
- index = this._wrap(index);
- }
-
- this._cycleTo(index);
- }
-
- /**
- * Cycle to nth item
- * @param {Number} [n]
- * @param {Function} callback
- */
-
- }, {
- key: "set",
- value: function set(n, callback) {
- if (n === undefined || isNaN(n)) {
- n = 0;
- }
-
- if (n > this.count || n < 0) {
- if (this.noWrap) {
- return;
- }
-
- n = this._wrap(n);
- }
-
- this._cycleTo(n, callback);
- }
- }], [{
- key: "init",
- value: function init(els, options) {
- return _get(Carousel.__proto__ || Object.getPrototypeOf(Carousel), "init", this).call(this, this, els, options);
- }
-
- /**
- * Get Instance
- */
-
- }, {
- key: "getInstance",
- value: function getInstance(el) {
- var domElem = !!el.jquery ? el[0] : el;
- return domElem.M_Carousel;
- }
- }, {
- key: "defaults",
- get: function () {
- return _defaults;
- }
- }]);
-
- return Carousel;
- }(Component);
-
- M.Carousel = Carousel;
-
- if (M.jQueryLoaded) {
- M.initializeJqueryWrapper(Carousel, 'carousel', 'M_Carousel');
- }
-})(cash);
-;(function ($) {
- 'use strict';
-
- var _defaults = {
- onOpen: undefined,
- onClose: undefined
- };
-
- /**
- * @class
- *
- */
-
- var TapTarget = function (_Component19) {
- _inherits(TapTarget, _Component19);
-
- /**
- * Construct TapTarget instance
- * @constructor
- * @param {Element} el
- * @param {Object} options
- */
- function TapTarget(el, options) {
- _classCallCheck(this, TapTarget);
-
- var _this67 = _possibleConstructorReturn(this, (TapTarget.__proto__ || Object.getPrototypeOf(TapTarget)).call(this, TapTarget, el, options));
-
- _this67.el.M_TapTarget = _this67;
-
- /**
- * Options for the select
- * @member TapTarget#options
- * @prop {Function} onOpen - Callback function called when feature discovery is opened
- * @prop {Function} onClose - Callback function called when feature discovery is closed
- */
- _this67.options = $.extend({}, TapTarget.defaults, options);
-
- _this67.isOpen = false;
-
- // setup
- _this67.$origin = $('#' + _this67.$el.attr('data-target'));
- _this67._setup();
-
- _this67._calculatePositioning();
- _this67._setupEventHandlers();
- return _this67;
}
-
- _createClass(TapTarget, [{
- key: "destroy",
-
-
- /**
- * Teardown component
- */
- value: function destroy() {
- this._removeEventHandlers();
- this.el.TapTarget = undefined;
- }
-
- /**
- * Setup Event Handlers
- */
-
- }, {
- key: "_setupEventHandlers",
- value: function _setupEventHandlers() {
- this._handleDocumentClickBound = this._handleDocumentClick.bind(this);
- this._handleTargetClickBound = this._handleTargetClick.bind(this);
- this._handleOriginClickBound = this._handleOriginClick.bind(this);
-
- this.el.addEventListener('click', this._handleTargetClickBound);
- this.originEl.addEventListener('click', this._handleOriginClickBound);
-
- // Resize
- var throttledResize = M.throttle(this._handleResize, 200);
- this._handleThrottledResizeBound = throttledResize.bind(this);
-
- window.addEventListener('resize', this._handleThrottledResizeBound);
- }
-
- /**
- * Remove Event Handlers
- */
-
- }, {
- key: "_removeEventHandlers",
- value: function _removeEventHandlers() {
- this.el.removeEventListener('click', this._handleTargetClickBound);
- this.originEl.removeEventListener('click', this._handleOriginClickBound);
- window.removeEventListener('resize', this._handleThrottledResizeBound);
- }
-
- /**
- * Handle Target Click
- * @param {Event} e
- */
-
- }, {
- key: "_handleTargetClick",
- value: function _handleTargetClick(e) {
- this.open();
- }
-
- /**
- * Handle Origin Click
- * @param {Event} e
- */
-
- }, {
- key: "_handleOriginClick",
- value: function _handleOriginClick(e) {
- this.close();
- }
-
- /**
- * Handle Resize
- * @param {Event} e
- */
-
- }, {
- key: "_handleResize",
- value: function _handleResize(e) {
- this._calculatePositioning();
- }
-
- /**
- * Handle Resize
- * @param {Event} e
- */
-
- }, {
- key: "_handleDocumentClick",
- value: function _handleDocumentClick(e) {
- if (!$(e.target).closest('.tap-target-wrapper').length) {
- this.close();
- e.preventDefault();
- e.stopPropagation();
+ /**
+ * dismiss all toasts.
+ */
+ static dismissAll() {
+ for (let toastIndex in Toast._toasts) {
+ Toast._toasts[toastIndex].dismiss();
}
- }
-
- /**
- * Setup Tap Target
- */
-
- }, {
- key: "_setup",
- value: function _setup() {
- // Creating tap target
- this.wrapper = this.$el.parent()[0];
- this.waveEl = $(this.wrapper).find('.tap-target-wave')[0];
- this.originEl = $(this.wrapper).find('.tap-target-origin')[0];
- this.contentEl = this.$el.find('.tap-target-content')[0];
-
- // Creating wrapper
- if (!$(this.wrapper).hasClass('.tap-target-wrapper')) {
- this.wrapper = document.createElement('div');
- this.wrapper.classList.add('tap-target-wrapper');
- this.$el.before($(this.wrapper));
- this.wrapper.append(this.el);
+ }
+ _createToast() {
+ let toast = this.options.toastId
+ ? document.getElementById(this.options.toastId)
+ : document.createElement('div');
+ if (toast instanceof HTMLTemplateElement) {
+ const node = toast.content.cloneNode(true);
+ toast = node.firstElementChild;
}
-
- // Creating content
- if (!this.contentEl) {
- this.contentEl = document.createElement('div');
- this.contentEl.classList.add('tap-target-content');
- this.$el.append(this.contentEl);
+ toast.classList.add('toast');
+ toast.setAttribute('role', 'alert');
+ toast.setAttribute('aria-live', 'assertive');
+ toast.setAttribute('aria-atomic', 'true');
+ // Add custom classes onto toast
+ if (this.options.classes.length > 0) {
+ toast.classList.add(...this.options.classes.split(' '));
}
-
- // Creating foreground wave
- if (!this.waveEl) {
- this.waveEl = document.createElement('div');
- this.waveEl.classList.add('tap-target-wave');
-
- // Creating origin
- if (!this.originEl) {
- this.originEl = this.$origin.clone(true, true);
- this.originEl.addClass('tap-target-origin');
- this.originEl.removeAttr('id');
- this.originEl.removeAttr('style');
- this.originEl = this.originEl[0];
- this.waveEl.append(this.originEl);
- }
-
- this.wrapper.append(this.waveEl);
+ if (this.message)
+ toast.innerText = this.message;
+ Toast._container.appendChild(toast);
+ return toast;
+ }
+ _animateIn() {
+ // Animate toast in
+ this.el.style.display = "";
+ this.el.style.opacity = '0';
+ // easeOutCubic
+ this.el.style.transition = `
+ top ${this.options.inDuration}ms ease,
+ opacity ${this.options.inDuration}ms ease
+ `;
+ setTimeout(() => {
+ this.el.style.top = '0';
+ this.el.style.opacity = '1';
+ }, 1);
+ }
+ /**
+ * Create setInterval which automatically removes toast when timeRemaining >= 0
+ * has been reached.
+ */
+ _setTimer() {
+ if (this.timeRemaining !== Infinity) {
+ this.counterInterval = setInterval(() => {
+ // If toast is not being dragged, decrease its time remaining
+ if (!this.panning) {
+ this.timeRemaining -= 20;
+ }
+ // Animate toast out
+ if (this.timeRemaining <= 0) {
+ this.dismiss();
+ }
+ }, 20);
}
- }
-
- /**
- * Calculate positioning
- */
-
- }, {
- key: "_calculatePositioning",
- value: function _calculatePositioning() {
- // Element or parent is fixed position?
- var isFixed = this.$origin.css('position') === 'fixed';
- if (!isFixed) {
- var parents = this.$origin.parents();
- for (var i = 0; i < parents.length; i++) {
- isFixed = $(parents[i]).css('position') == 'fixed';
- if (isFixed) {
- break;
+ }
+ /**
+ * Dismiss toast with animation.
+ */
+ dismiss() {
+ window.clearInterval(this.counterInterval);
+ let activationDistance = this.el.offsetWidth * this.options.activationPercent;
+ if (this.wasSwiped) {
+ this.el.style.transition = 'transform .05s, opacity .05s';
+ this.el.style.transform = `translateX(${activationDistance}px)`;
+ this.el.style.opacity = '0';
+ }
+ // easeOutExpo
+ this.el.style.transition = `
+ margin ${this.options.outDuration}ms ease,
+ opacity ${this.options.outDuration}ms ease`;
+ setTimeout(() => {
+ this.el.style.opacity = '0';
+ this.el.style.marginTop = '-40px';
+ }, 1);
+ setTimeout(() => {
+ // Call the optional callback
+ if (typeof this.options.completeCallback === 'function') {
+ this.options.completeCallback();
}
- }
- }
+ // Remove toast from DOM
+ if (this.el.id != this.options.toastId) {
+ this.el.remove();
+ Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
+ if (Toast._toasts.length === 0) {
+ Toast._removeContainer();
+ }
+ }
+ }, this.options.outDuration);
+ }
+}
+exports.Toast = Toast;
+(() => {
+ Toast._toasts = [];
+ Toast._container = null;
+ Toast._draggedToast = null;
+})();
- // Calculating origin
- var originWidth = this.$origin.outerWidth();
- var originHeight = this.$origin.outerHeight();
- var originTop = isFixed ? this.$origin.offset().top - M.getDocumentScrollTop() : this.$origin.offset().top;
- var originLeft = isFixed ? this.$origin.offset().left - M.getDocumentScrollLeft() : this.$origin.offset().left;
- // Calculating screen
- var windowWidth = window.innerWidth;
- var windowHeight = window.innerHeight;
- var scrollBarWidth = windowWidth - document.documentElement.clientWidth;
- var centerX = windowWidth / 2;
- var centerY = windowHeight / 2;
- var isLeft = originLeft <= centerX;
- var isRight = originLeft > centerX;
- var isTop = originTop <= centerY;
- var isBottom = originTop > centerY;
- var isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75;
+/***/ }),
- // Calculating tap target
- var tapTargetWidth = this.$el.outerWidth();
- var tapTargetHeight = this.$el.outerHeight();
- var tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2;
- var tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2;
- var tapTargetPosition = isFixed ? 'fixed' : 'absolute';
+/***/ "./src/tooltip.ts":
+/*!************************!*\
+ !*** ./src/tooltip.ts ***!
+ \************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
- // Calculating content
- var tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth;
- var tapTargetTextHeight = tapTargetHeight / 2;
- var tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0;
- var tapTargetTextBottom = 0;
- var tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0;
- var tapTargetTextRight = 0;
- var tapTargetTextPadding = originWidth;
- var tapTargetTextAlign = isBottom ? 'bottom' : 'top';
-
- // Calculating wave
- var tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2;
- var tapTargetWaveHeight = tapTargetWaveWidth;
- var tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2;
- var tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
-
- // Setting tap target
- var tapTargetWrapperCssObj = {};
- tapTargetWrapperCssObj.top = isTop ? tapTargetTop + 'px' : '';
- tapTargetWrapperCssObj.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : '';
- tapTargetWrapperCssObj.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : '';
- tapTargetWrapperCssObj.left = isLeft ? tapTargetLeft + 'px' : '';
- tapTargetWrapperCssObj.position = tapTargetPosition;
- $(this.wrapper).css(tapTargetWrapperCssObj);
-
- // Setting content
- $(this.contentEl).css({
- width: tapTargetTextWidth + 'px',
- height: tapTargetTextHeight + 'px',
- top: tapTargetTextTop + 'px',
- right: tapTargetTextRight + 'px',
- bottom: tapTargetTextBottom + 'px',
- left: tapTargetTextLeft + 'px',
- padding: tapTargetTextPadding + 'px',
- verticalAlign: tapTargetTextAlign
- });
-
- // Setting wave
- $(this.waveEl).css({
- top: tapTargetWaveTop + 'px',
- left: tapTargetWaveLeft + 'px',
- width: tapTargetWaveWidth + 'px',
- height: tapTargetWaveHeight + 'px'
- });
- }
-
- /**
- * Open TapTarget
- */
-
- }, {
- key: "open",
- value: function open() {
- if (this.isOpen) {
- return;
- }
-
- // onOpen callback
- if (typeof this.options.onOpen === 'function') {
- this.options.onOpen.call(this, this.$origin[0]);
- }
-
- this.isOpen = true;
- this.wrapper.classList.add('open');
-
- document.body.addEventListener('click', this._handleDocumentClickBound, true);
- document.body.addEventListener('touchend', this._handleDocumentClickBound);
- }
-
- /**
- * Close Tap Target
- */
-
- }, {
- key: "close",
- value: function close() {
- if (!this.isOpen) {
- return;
- }
-
- // onClose callback
- if (typeof this.options.onClose === 'function') {
- this.options.onClose.call(this, this.$origin[0]);
- }
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.Tooltip = void 0;
+const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
+const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
+const _defaults = {
+ exitDelay: 200,
+ enterDelay: 0,
+ text: '',
+ margin: 5,
+ inDuration: 250,
+ outDuration: 200,
+ position: 'bottom',
+ transitionMovement: 10,
+ opacity: 1
+};
+class Tooltip extends component_1.Component {
+ constructor(el, options) {
+ super(el, options, Tooltip);
+ /**
+ * Show tooltip.
+ */
+ this.open = (isManual) => {
+ if (this.isOpen)
+ return;
+ isManual = isManual === undefined ? true : undefined; // Default value true
+ this.isOpen = true;
+ // Update tooltip content with HTML attribute options
+ this.options = Object.assign(Object.assign({}, this.options), this._getAttributeOptions());
+ this._updateTooltipContent();
+ this._setEnterDelayTimeout(isManual);
+ };
+ /**
+ * Hide tooltip.
+ */
+ this.close = () => {
+ if (!this.isOpen)
+ return;
+ this.isHovered = false;
+ this.isFocused = false;
+ this.isOpen = false;
+ this._setExitDelayTimeout();
+ };
+ this._handleMouseEnter = () => {
+ this.isHovered = true;
+ this.isFocused = false; // Allows close of tooltip when opened by focus.
+ this.open(false);
+ };
+ this._handleMouseLeave = () => {
+ this.isHovered = false;
+ this.isFocused = false; // Allows close of tooltip when opened by focus.
+ this.close();
+ };
+ this._handleFocus = () => {
+ if (utils_1.Utils.tabPressed) {
+ this.isFocused = true;
+ this.open(false);
+ }
+ };
+ this._handleBlur = () => {
+ this.isFocused = false;
+ this.close();
+ };
+ this.el.M_Tooltip = this;
+ this.options = Object.assign(Object.assign(Object.assign({}, Tooltip.defaults), this._getAttributeOptions()), options);
this.isOpen = false;
- this.wrapper.classList.remove('open');
-
- document.body.removeEventListener('click', this._handleDocumentClickBound, true);
- document.body.removeEventListener('touchend', this._handleDocumentClickBound);
- }
- }], [{
- key: "init",
- value: function init(els, options) {
- return _get(TapTarget.__proto__ || Object.getPrototypeOf(TapTarget), "init", this).call(this, this, els, options);
- }
-
- /**
- * Get Instance
- */
-
- }, {
- key: "getInstance",
- value: function getInstance(el) {
- var domElem = !!el.jquery ? el[0] : el;
- return domElem.M_TapTarget;
- }
- }, {
- key: "defaults",
- get: function () {
- return _defaults;
- }
- }]);
-
- return TapTarget;
- }(Component);
-
- M.TapTarget = TapTarget;
-
- if (M.jQueryLoaded) {
- M.initializeJqueryWrapper(TapTarget, 'tapTarget', 'M_TapTarget');
- }
-})(cash);
-;(function ($) {
- 'use strict';
-
- var _defaults = {
- classes: '',
- dropdownOptions: {}
- };
-
- /**
- * @class
- *
- */
-
- var FormSelect = function (_Component20) {
- _inherits(FormSelect, _Component20);
-
- /**
- * Construct FormSelect instance
- * @constructor
- * @param {Element} el
- * @param {Object} options
- */
- function FormSelect(el, options) {
- _classCallCheck(this, FormSelect);
-
- // Don't init if browser default version
- var _this68 = _possibleConstructorReturn(this, (FormSelect.__proto__ || Object.getPrototypeOf(FormSelect)).call(this, FormSelect, el, options));
-
- if (_this68.$el.hasClass('browser-default')) {
- return _possibleConstructorReturn(_this68);
- }
-
- _this68.el.M_FormSelect = _this68;
-
- /**
- * Options for the select
- * @member FormSelect#options
- */
- _this68.options = $.extend({}, FormSelect.defaults, options);
-
- _this68.isMultiple = _this68.$el.prop('multiple');
-
- // Setup
- _this68.el.tabIndex = -1;
- _this68._keysSelected = {};
- _this68._valueDict = {}; // Maps key to original and generated option element.
- _this68._setupDropdown();
-
- _this68._setupEventHandlers();
- return _this68;
+ this.isHovered = false;
+ this.isFocused = false;
+ this._appendTooltipEl();
+ this._setupEventHandlers();
}
-
- _createClass(FormSelect, [{
- key: "destroy",
-
-
- /**
- * Teardown component
- */
- value: function destroy() {
- this._removeEventHandlers();
- this._removeDropdown();
- this.el.M_FormSelect = undefined;
- }
-
- /**
- * Setup Event Handlers
- */
-
- }, {
- key: "_setupEventHandlers",
- value: function _setupEventHandlers() {
- var _this69 = this;
-
- this._handleSelectChangeBound = this._handleSelectChange.bind(this);
- this._handleOptionClickBound = this._handleOptionClick.bind(this);
- this._handleInputClickBound = this._handleInputClick.bind(this);
-
- $(this.dropdownOptions).find('li:not(.optgroup)').each(function (el) {
- el.addEventListener('click', _this69._handleOptionClickBound);
- });
- this.el.addEventListener('change', this._handleSelectChangeBound);
- this.input.addEventListener('click', this._handleInputClickBound);
- }
-
- /**
- * Remove Event Handlers
- */
-
- }, {
- key: "_removeEventHandlers",
- value: function _removeEventHandlers() {
- var _this70 = this;
-
- $(this.dropdownOptions).find('li:not(.optgroup)').each(function (el) {
- el.removeEventListener('click', _this70._handleOptionClickBound);
- });
- this.el.removeEventListener('change', this._handleSelectChangeBound);
- this.input.removeEventListener('click', this._handleInputClickBound);
- }
-
- /**
- * Handle Select Change
- * @param {Event} e
- */
-
- }, {
- key: "_handleSelectChange",
- value: function _handleSelectChange(e) {
- this._setValueToInput();
- }
-
- /**
- * Handle Option Click
- * @param {Event} e
- */
-
- }, {
- key: "_handleOptionClick",
- value: function _handleOptionClick(e) {
- e.preventDefault();
- var optionEl = $(e.target).closest('li')[0];
- this._selectOption(optionEl);
- e.stopPropagation();
- }
- }, {
- key: "_selectOption",
- value: function _selectOption(optionEl) {
- var key = optionEl.id;
- if (!$(optionEl).hasClass('disabled') && !$(optionEl).hasClass('optgroup') && key.length) {
- var selected = true;
-
- if (this.isMultiple) {
- // Deselect placeholder option if still selected.
- var placeholderOption = $(this.dropdownOptions).find('li.disabled.selected');
- if (placeholderOption.length) {
- placeholderOption.removeClass('selected');
- placeholderOption.find('input[type="checkbox"]').prop('checked', false);
- this._toggleEntryFromArray(placeholderOption[0].id);
- }
- selected = this._toggleEntryFromArray(key);
- } else {
- $(this.dropdownOptions).find('li').removeClass('selected');
- $(optionEl).toggleClass('selected', selected);
- this._keysSelected = {};
- this._keysSelected[optionEl.id] = true;
- }
-
- // Set selected on original select option
- // Only trigger if selected state changed
- var prevSelected = $(this._valueDict[key].el).prop('selected');
- if (prevSelected !== selected) {
- $(this._valueDict[key].el).prop('selected', selected);
- this.$el.trigger('change');
- }
- }
-
- if (!this.isMultiple) {
- this.dropdown.close();
- }
- }
-
- /**
- * Handle Input Click
- */
-
- }, {
- key: "_handleInputClick",
- value: function _handleInputClick() {
- if (this.dropdown && this.dropdown.isOpen) {
- this._setValueToInput();
- this._setSelectedStates();
- }
- }
-
- /**
- * Setup dropdown
- */
-
- }, {
- key: "_setupDropdown",
- value: function _setupDropdown() {
- var _this71 = this;
-
- this.wrapper = document.createElement('div');
- $(this.wrapper).addClass('select-wrapper ' + this.options.classes);
- this.$el.before($(this.wrapper));
- // Move actual select element into overflow hidden wrapper
- var $hideSelect = $('
');
- $(this.wrapper).append($hideSelect);
- $hideSelect[0].appendChild(this.el);
-
- if (this.el.disabled) {
- this.wrapper.classList.add('disabled');
- }
-
- // Create dropdown
- this.$selectOptions = this.$el.children('option, optgroup');
- this.dropdownOptions = document.createElement('ul');
- this.dropdownOptions.id = "select-options-" + M.guid();
- $(this.dropdownOptions).addClass('dropdown-content select-dropdown ' + (this.isMultiple ? 'multiple-select-dropdown' : ''));
-
- // Create dropdown structure.
- if (this.$selectOptions.length) {
- this.$selectOptions.each(function (el) {
- if ($(el).is('option')) {
- // Direct descendant option.
- var optionEl = void 0;
- if (_this71.isMultiple) {
- optionEl = _this71._appendOptionWithIcon(_this71.$el, el, 'multiple');
- } else {
- optionEl = _this71._appendOptionWithIcon(_this71.$el, el);
- }
-
- _this71._addOptionToValueDict(el, optionEl);
- } else if ($(el).is('optgroup')) {
- // Optgroup.
- var selectOptions = $(el).children('option');
- $(_this71.dropdownOptions).append($('
' + el.getAttribute('label') + '')[0]);
-
- selectOptions.each(function (el) {
- var optionEl = _this71._appendOptionWithIcon(_this71.$el, el, 'optgroup-option');
- _this71._addOptionToValueDict(el, optionEl);
- });
- }
- });
- }
-
- $(this.wrapper).append(this.dropdownOptions);
-
- // Add input dropdown
- this.input = document.createElement('input');
- $(this.input).addClass('select-dropdown dropdown-trigger');
- this.input.setAttribute('type', 'text');
- this.input.setAttribute('readonly', 'true');
- this.input.setAttribute('data-target', this.dropdownOptions.id);
- if (this.el.disabled) {
- $(this.input).prop('disabled', 'true');
- }
-
- $(this.wrapper).prepend(this.input);
- this._setValueToInput();
-
- // Add caret
- var dropdownIcon = $('
');
- $(this.wrapper).prepend(dropdownIcon[0]);
-
- // Initialize dropdown
- if (!this.el.disabled) {
- var dropdownOptions = $.extend({}, this.options.dropdownOptions);
- var userOnOpenEnd = dropdownOptions.onOpenEnd;
-
- // Add callback for centering selected option when dropdown content is scrollable
- dropdownOptions.onOpenEnd = function (el) {
- var selectedOption = $(_this71.dropdownOptions).find('.selected').first();
-
- if (selectedOption.length) {
- // Focus selected option in dropdown
- M.keyDown = true;
- _this71.dropdown.focusedIndex = selectedOption.index();
- _this71.dropdown._focusFocusedItem();
- M.keyDown = false;
-
- // Handle scrolling to selected option
- if (_this71.dropdown.isScrollable) {
- var scrollOffset = selectedOption[0].getBoundingClientRect().top - _this71.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
- scrollOffset -= _this71.dropdownOptions.clientHeight / 2; // center in dropdown
- _this71.dropdownOptions.scrollTop = scrollOffset;
- }
- }
-
- // Handle user declared onOpenEnd if needed
- if (userOnOpenEnd && typeof userOnOpenEnd === 'function') {
- userOnOpenEnd.call(_this71.dropdown, _this71.el);
- }
- };
-
- // Prevent dropdown from closing too early
- dropdownOptions.closeOnClick = false;
-
- this.dropdown = M.Dropdown.init(this.input, dropdownOptions);
- }
-
- // Add initial selections
- this._setSelectedStates();
- }
-
- /**
- * Add option to value dict
- * @param {Element} el original option element
- * @param {Element} optionEl generated option element
- */
-
- }, {
- key: "_addOptionToValueDict",
- value: function _addOptionToValueDict(el, optionEl) {
- var index = Object.keys(this._valueDict).length;
- var key = this.dropdownOptions.id + index;
- var obj = {};
- optionEl.id = key;
-
- obj.el = el;
- obj.optionEl = optionEl;
- this._valueDict[key] = obj;
- }
-
- /**
- * Remove dropdown
- */
-
- }, {
- key: "_removeDropdown",
- value: function _removeDropdown() {
- $(this.wrapper).find('.caret').remove();
- $(this.input).remove();
- $(this.dropdownOptions).remove();
- $(this.wrapper).before(this.$el);
- $(this.wrapper).remove();
- }
-
- /**
- * Setup dropdown
- * @param {Element} select select element
- * @param {Element} option option element from select
- * @param {String} type
- * @return {Element} option element added
- */
-
- }, {
- key: "_appendOptionWithIcon",
- value: function _appendOptionWithIcon(select, option, type) {
- // Add disabled attr if disabled
- var disabledClass = option.disabled ? 'disabled ' : '';
- var optgroupClass = type === 'optgroup-option' ? 'optgroup-option ' : '';
- var multipleCheckbox = this.isMultiple ? "
" : option.innerHTML;
- var liEl = $('
');
- var spanEl = $('
');
- spanEl.html(multipleCheckbox);
- liEl.addClass(disabledClass + " " + optgroupClass);
- liEl.append(spanEl);
-
- // add icons
- var iconUrl = option.getAttribute('data-icon');
- var classes = option.getAttribute('class');
- if (!!iconUrl) {
- var imgEl = $("
![\"\"](\"")
");
- liEl.prepend(imgEl);
- }
-
- // Check for multiple type.
- $(this.dropdownOptions).append(liEl[0]);
- return liEl[0];
- }
-
- /**
- * Toggle entry from option
- * @param {String} key Option key
- * @return {Boolean} if entry was added or removed
- */
-
- }, {
- key: "_toggleEntryFromArray",
- value: function _toggleEntryFromArray(key) {
- var notAdded = !this._keysSelected.hasOwnProperty(key);
- var $optionLi = $(this._valueDict[key].optionEl);
-
- if (notAdded) {
- this._keysSelected[key] = true;
- } else {
- delete this._keysSelected[key];
- }
-
- $optionLi.toggleClass('selected', notAdded);
-
- // Set checkbox checked value
- $optionLi.find('input[type="checkbox"]').prop('checked', notAdded);
-
- // use notAdded instead of true (to detect if the option is selected or not)
- $optionLi.prop('selected', notAdded);
-
- return notAdded;
- }
-
- /**
- * Set text value to input
- */
-
- }, {
- key: "_setValueToInput",
- value: function _setValueToInput() {
- var values = [];
- var options = this.$el.find('option');
-
- options.each(function (el) {
- if ($(el).prop('selected')) {
- var text = $(el).text().trim();
- values.push(text);
- }
- });
-
- if (!values.length) {
- var firstDisabled = this.$el.find('option:disabled').eq(0);
- if (firstDisabled.length && firstDisabled[0].value === '') {
- values.push(firstDisabled.text());
- }
- }
-
- this.input.value = values.join(', ');
- }
-
- /**
- * Set selected state of dropdown to match actual select element
- */
-
- }, {
- key: "_setSelectedStates",
- value: function _setSelectedStates() {
- this._keysSelected = {};
-
- for (var key in this._valueDict) {
- var option = this._valueDict[key];
- var optionIsSelected = $(option.el).prop('selected');
- $(option.optionEl).find('input[type="checkbox"]').prop('checked', optionIsSelected);
- if (optionIsSelected) {
- this._activateOption($(this.dropdownOptions), $(option.optionEl));
- this._keysSelected[key] = true;
- } else {
- $(option.optionEl).removeClass('selected');
- }
- }
- }
-
- /**
- * Make option as selected and scroll to selected position
- * @param {jQuery} collection Select options jQuery element
- * @param {Element} newOption element of the new option
- */
-
- }, {
- key: "_activateOption",
- value: function _activateOption(collection, newOption) {
- if (newOption) {
- if (!this.isMultiple) {
- collection.find('li.selected').removeClass('selected');
- }
- var option = $(newOption);
- option.addClass('selected');
- }
- }
-
- /**
- * Get Selected Values
- * @return {Array} Array of selected values
- */
-
- }, {
- key: "getSelectedValues",
- value: function getSelectedValues() {
- var selectedValues = [];
- for (var key in this._keysSelected) {
- selectedValues.push(this._valueDict[key].el.value);
- }
- return selectedValues;
- }
- }], [{
- key: "init",
- value: function init(els, options) {
- return _get(FormSelect.__proto__ || Object.getPrototypeOf(FormSelect), "init", this).call(this, this, els, options);
- }
-
- /**
- * Get Instance
- */
-
- }, {
- key: "getInstance",
- value: function getInstance(el) {
- var domElem = !!el.jquery ? el[0] : el;
- return domElem.M_FormSelect;
- }
- }, {
- key: "defaults",
- get: function () {
+ static get defaults() {
return _defaults;
- }
- }]);
-
- return FormSelect;
- }(Component);
-
- M.FormSelect = FormSelect;
-
- if (M.jQueryLoaded) {
- M.initializeJqueryWrapper(FormSelect, 'formSelect', 'M_FormSelect');
- }
-})(cash);
-;(function ($, anim) {
- 'use strict';
-
- var _defaults = {};
-
- /**
- * @class
- *
- */
-
- var Range = function (_Component21) {
- _inherits(Range, _Component21);
-
- /**
- * Construct Range instance
- * @constructor
- * @param {Element} el
- * @param {Object} options
- */
- function Range(el, options) {
- _classCallCheck(this, Range);
-
- var _this72 = _possibleConstructorReturn(this, (Range.__proto__ || Object.getPrototypeOf(Range)).call(this, Range, el, options));
-
- _this72.el.M_Range = _this72;
-
- /**
- * Options for the range
- * @member Range#options
- */
- _this72.options = $.extend({}, Range.defaults, options);
-
- _this72._mousedown = false;
-
- // Setup
- _this72._setupThumb();
-
- _this72._setupEventHandlers();
- return _this72;
}
-
- _createClass(Range, [{
- key: "destroy",
-
-
- /**
- * Teardown component
- */
- value: function destroy() {
+ /**
+ * Initializes instances of Tooltip.
+ * @param els HTML elements.
+ * @param options Component options.
+ */
+ static init(els, options = {}) {
+ return super.init(els, options, Tooltip);
+ }
+ static getInstance(el) {
+ return el.M_Tooltip;
+ }
+ destroy() {
+ this.tooltipEl.remove();
this._removeEventHandlers();
- this._removeThumb();
- this.el.M_Range = undefined;
- }
-
- /**
- * Setup Event Handlers
- */
-
- }, {
- key: "_setupEventHandlers",
- value: function _setupEventHandlers() {
- this._handleRangeChangeBound = this._handleRangeChange.bind(this);
- this._handleRangeMousedownTouchstartBound = this._handleRangeMousedownTouchstart.bind(this);
- this._handleRangeInputMousemoveTouchmoveBound = this._handleRangeInputMousemoveTouchmove.bind(this);
- this._handleRangeMouseupTouchendBound = this._handleRangeMouseupTouchend.bind(this);
- this._handleRangeBlurMouseoutTouchleaveBound = this._handleRangeBlurMouseoutTouchleave.bind(this);
-
- this.el.addEventListener('change', this._handleRangeChangeBound);
-
- this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
- this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
-
- this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmoveBound);
- this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmoveBound);
- this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmoveBound);
-
- this.el.addEventListener('mouseup', this._handleRangeMouseupTouchendBound);
- this.el.addEventListener('touchend', this._handleRangeMouseupTouchendBound);
-
- this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleaveBound);
- this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleaveBound);
- this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleaveBound);
- }
-
- /**
- * Remove Event Handlers
- */
-
- }, {
- key: "_removeEventHandlers",
- value: function _removeEventHandlers() {
- this.el.removeEventListener('change', this._handleRangeChangeBound);
-
- this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
- this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
-
- this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmoveBound);
- this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmoveBound);
- this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmoveBound);
-
- this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchendBound);
- this.el.removeEventListener('touchend', this._handleRangeMouseupTouchendBound);
-
- this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleaveBound);
- this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleaveBound);
- this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleaveBound);
- }
-
- /**
- * Handle Range Change
- * @param {Event} e
- */
-
- }, {
- key: "_handleRangeChange",
- value: function _handleRangeChange() {
- $(this.value).html(this.$el.val());
-
- if (!$(this.thumb).hasClass('active')) {
- this._showRangeBubble();
+ this.el.M_Tooltip = undefined;
+ }
+ _appendTooltipEl() {
+ this.tooltipEl = document.createElement('div');
+ this.tooltipEl.classList.add('material-tooltip');
+ const tooltipContentEl = this.options.tooltipId
+ ? document.getElementById(this.options.tooltipId)
+ : document.createElement('div');
+ this.tooltipEl.append(tooltipContentEl);
+ tooltipContentEl.style.display = "";
+ tooltipContentEl.classList.add('tooltip-content');
+ this._setTooltipContent(tooltipContentEl);
+ this.tooltipEl.appendChild(tooltipContentEl);
+ document.body.appendChild(this.tooltipEl);
+ }
+ _setTooltipContent(tooltipContentEl) {
+ if (this.options.tooltipId)
+ return;
+ tooltipContentEl.innerText = this.options.text;
+ }
+ _updateTooltipContent() {
+ this._setTooltipContent(this.tooltipEl.querySelector('.tooltip-content'));
+ }
+ _setupEventHandlers() {
+ this.el.addEventListener('mouseenter', this._handleMouseEnter);
+ this.el.addEventListener('mouseleave', this._handleMouseLeave);
+ this.el.addEventListener('focus', this._handleFocus, true);
+ this.el.addEventListener('blur', this._handleBlur, true);
+ }
+ _removeEventHandlers() {
+ this.el.removeEventListener('mouseenter', this._handleMouseEnter);
+ this.el.removeEventListener('mouseleave', this._handleMouseLeave);
+ this.el.removeEventListener('focus', this._handleFocus, true);
+ this.el.removeEventListener('blur', this._handleBlur, true);
+ }
+ _setExitDelayTimeout() {
+ clearTimeout(this._exitDelayTimeout);
+ this._exitDelayTimeout = setTimeout(() => {
+ if (this.isHovered || this.isFocused)
+ return;
+ this._animateOut();
+ }, this.options.exitDelay);
+ }
+ _setEnterDelayTimeout(isManual) {
+ clearTimeout(this._enterDelayTimeout);
+ this._enterDelayTimeout = setTimeout(() => {
+ if (!this.isHovered && !this.isFocused && !isManual)
+ return;
+ this._animateIn();
+ }, this.options.enterDelay);
+ }
+ _positionTooltip() {
+ const tooltip = this.tooltipEl;
+ const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin;
+ (this.xMovement = 0), (this.yMovement = 0);
+ let targetTop = origin.getBoundingClientRect().top + utils_1.Utils.getDocumentScrollTop();
+ let targetLeft = origin.getBoundingClientRect().left + utils_1.Utils.getDocumentScrollLeft();
+ if (this.options.position === 'top') {
+ targetTop += -tooltipHeight - margin;
+ targetLeft += originWidth / 2 - tooltipWidth / 2;
+ this.yMovement = -this.options.transitionMovement;
}
-
- var offsetLeft = this._calcRangeOffset();
- $(this.thumb).addClass('active').css('left', offsetLeft + 'px');
- }
-
- /**
- * Handle Range Mousedown and Touchstart
- * @param {Event} e
- */
-
- }, {
- key: "_handleRangeMousedownTouchstart",
- value: function _handleRangeMousedownTouchstart(e) {
- // Set indicator value
- $(this.value).html(this.$el.val());
-
- this._mousedown = true;
- this.$el.addClass('active');
-
- if (!$(this.thumb).hasClass('active')) {
- this._showRangeBubble();
+ else if (this.options.position === 'right') {
+ targetTop += originHeight / 2 - tooltipHeight / 2;
+ targetLeft += originWidth + margin;
+ this.xMovement = this.options.transitionMovement;
}
-
- if (e.type !== 'input') {
- var offsetLeft = this._calcRangeOffset();
- $(this.thumb).addClass('active').css('left', offsetLeft + 'px');
+ else if (this.options.position === 'left') {
+ targetTop += originHeight / 2 - tooltipHeight / 2;
+ targetLeft += -tooltipWidth - margin;
+ this.xMovement = -this.options.transitionMovement;
}
- }
-
- /**
- * Handle Range Input, Mousemove and Touchmove
- */
-
- }, {
- key: "_handleRangeInputMousemoveTouchmove",
- value: function _handleRangeInputMousemoveTouchmove() {
- if (this._mousedown) {
- if (!$(this.thumb).hasClass('active')) {
- this._showRangeBubble();
- }
-
- var offsetLeft = this._calcRangeOffset();
- $(this.thumb).addClass('active').css('left', offsetLeft + 'px');
- $(this.value).html(this.$el.val());
+ else {
+ targetTop += originHeight + margin;
+ targetLeft += originWidth / 2 - tooltipWidth / 2;
+ this.yMovement = this.options.transitionMovement;
}
- }
-
- /**
- * Handle Range Mouseup and Touchend
- */
-
- }, {
- key: "_handleRangeMouseupTouchend",
- value: function _handleRangeMouseupTouchend() {
- this._mousedown = false;
- this.$el.removeClass('active');
- }
-
- /**
- * Handle Range Blur, Mouseout and Touchleave
- */
-
- }, {
- key: "_handleRangeBlurMouseoutTouchleave",
- value: function _handleRangeBlurMouseoutTouchleave() {
- if (!this._mousedown) {
- var paddingLeft = parseInt(this.$el.css('padding-left'));
- var marginLeft = 7 + paddingLeft + 'px';
-
- if ($(this.thumb).hasClass('active')) {
- anim.remove(this.thumb);
- anim({
- targets: this.thumb,
- height: 0,
- width: 0,
- top: 10,
- easing: 'easeOutQuad',
- marginLeft: marginLeft,
- duration: 100
- });
- }
- $(this.thumb).removeClass('active');
+ const newCoordinates = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+ tooltip.style.top = newCoordinates.y + 'px';
+ tooltip.style.left = newCoordinates.x + 'px';
+ }
+ _repositionWithinScreen(x, y, width, height) {
+ const scrollLeft = utils_1.Utils.getDocumentScrollLeft();
+ const scrollTop = utils_1.Utils.getDocumentScrollTop();
+ let newX = x - scrollLeft;
+ let newY = y - scrollTop;
+ const bounding = {
+ left: newX,
+ top: newY,
+ width: width,
+ height: height
+ };
+ const offset = this.options.margin + this.options.transitionMovement;
+ const edges = utils_1.Utils.checkWithinContainer(document.body, bounding, offset);
+ if (edges.left) {
+ newX = offset;
}
- }
-
- /**
- * Setup dropdown
- */
-
- }, {
- key: "_setupThumb",
- value: function _setupThumb() {
- this.thumb = document.createElement('span');
- this.value = document.createElement('span');
- $(this.thumb).addClass('thumb');
- $(this.value).addClass('value');
- $(this.thumb).append(this.value);
- this.$el.after(this.thumb);
- }
-
- /**
- * Remove dropdown
- */
-
- }, {
- key: "_removeThumb",
- value: function _removeThumb() {
- $(this.thumb).remove();
- }
-
- /**
- * morph thumb into bubble
- */
-
- }, {
- key: "_showRangeBubble",
- value: function _showRangeBubble() {
- var paddingLeft = parseInt($(this.thumb).parent().css('padding-left'));
- var marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
- anim.remove(this.thumb);
+ else if (edges.right) {
+ newX -= newX + width - window.innerWidth;
+ }
+ if (edges.top) {
+ newY = offset;
+ }
+ else if (edges.bottom) {
+ newY -= newY + height - window.innerHeight;
+ }
+ return {
+ x: newX + scrollLeft,
+ y: newY + scrollTop
+ };
+ }
+ _animateIn() {
+ this._positionTooltip();
+ this.tooltipEl.style.visibility = 'visible';
+ const duration = this.options.inDuration;
+ // easeOutCubic
+ this.tooltipEl.style.transition = `
+ transform ${duration}ms ease-out,
+ opacity ${duration}ms ease-out`;
+ setTimeout(() => {
+ this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`;
+ this.tooltipEl.style.opacity = (this.options.opacity || 1).toString();
+ }, 1);
+ }
+ _animateOut() {
+ const duration = this.options.outDuration;
+ // easeOutCubic
+ this.tooltipEl.style.transition = `
+ transform ${duration}ms ease-out,
+ opacity ${duration}ms ease-out`;
+ setTimeout(() => {
+ this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
+ this.tooltipEl.style.opacity = '0';
+ }, 1);
+ /*
+ anim.remove(this.tooltipEl);
anim({
- targets: this.thumb,
- height: 30,
- width: 30,
- top: -30,
- marginLeft: marginLeft,
- duration: 300,
- easing: 'easeOutQuint'
+ targets: this.tooltipEl,
+ opacity: 0,
+ translateX: 0,
+ translateY: 0,
+ duration: this.options.outDuration,
+ easing: 'easeOutCubic'
});
- }
+ */
+ }
+ _getAttributeOptions() {
+ let attributeOptions = {};
+ const tooltipTextOption = this.el.getAttribute('data-tooltip');
+ const tooltipId = this.el.getAttribute('data-tooltip-id');
+ const positionOption = this.el.getAttribute('data-position');
+ if (tooltipTextOption) {
+ attributeOptions.text = tooltipTextOption;
+ }
+ if (positionOption) {
+ attributeOptions.position = positionOption;
+ }
+ if (tooltipId) {
+ attributeOptions.tooltipId = tooltipId;
+ }
+ return attributeOptions;
+ }
+}
+exports.Tooltip = Tooltip;
- /**
- * Calculate the offset of the thumb
- * @return {Number} offset in pixels
- */
- }, {
- key: "_calcRangeOffset",
- value: function _calcRangeOffset() {
- var width = this.$el.width() - 15;
- var max = parseFloat(this.$el.attr('max')) || 100; // Range default max
- var min = parseFloat(this.$el.attr('min')) || 0; // Range default min
- var percent = (parseFloat(this.$el.val()) - min) / (max - min);
- return percent * width;
- }
- }], [{
- key: "init",
- value: function init(els, options) {
- return _get(Range.__proto__ || Object.getPrototypeOf(Range), "init", this).call(this, this, els, options);
- }
+/***/ }),
- /**
- * Get Instance
- */
+/***/ "./src/utils.ts":
+/*!**********************!*\
+ !*** ./src/utils.ts ***!
+ \**********************/
+/***/ (function(__unused_webpack_module, exports) {
- }, {
- key: "getInstance",
- value: function getInstance(el) {
- var domElem = !!el.jquery ? el[0] : el;
- return domElem.M_Range;
- }
- }, {
- key: "defaults",
- get: function () {
- return _defaults;
- }
- }]);
- return Range;
- }(Component);
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.Utils = void 0;
+/**
+ * Class with utilitary functions for global usage.
+ */
+class Utils {
+ /**
+ * Detects when a key is pressed.
+ * @param e Event instance.
+ */
+ static docHandleKeydown(e) {
+ Utils.keyDown = true;
+ if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) {
+ Utils.tabPressed = true;
+ }
+ }
+ /**
+ * Detects when a key is released.
+ * @param e Event instance.
+ */
+ static docHandleKeyup(e) {
+ Utils.keyDown = false;
+ if ([...Utils.keys.TAB, ...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP].includes(e.key)) {
+ Utils.tabPressed = false;
+ }
+ }
+ /**
+ * Detects when document is focused.
+ * @param e Event instance.
+ */
+ static docHandleFocus(e) {
+ if (Utils.keyDown) {
+ document.body.classList.add('keyboard-focused');
+ }
+ }
+ /**
+ * Detects when document is not focused.
+ * @param e Event instance.
+ */
+ static docHandleBlur(e) {
+ document.body.classList.remove('keyboard-focused');
+ }
+ /**
+ * Generates a unique string identifier.
+ */
+ static guid() {
+ const s4 = () => {
+ return Math.floor((1 + Math.random()) * 0x10000)
+ .toString(16)
+ .substring(1);
+ };
+ return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+ }
+ /**
+ * Checks for exceeded edges
+ * @param container Container element.
+ * @param bounding Bounding rect.
+ * @param offset Element offset.
+ */
+ static checkWithinContainer(container, bounding, offset) {
+ let edges = {
+ top: false,
+ right: false,
+ bottom: false,
+ left: false
+ };
+ let containerRect = container.getBoundingClientRect();
+ // If body element is smaller than viewport, use viewport height instead.
+ let containerBottom = container === document.body
+ ? Math.max(containerRect.bottom, window.innerHeight)
+ : containerRect.bottom;
+ let scrollLeft = container.scrollLeft;
+ let scrollTop = container.scrollTop;
+ let scrolledX = bounding.left - scrollLeft;
+ let scrolledY = bounding.top - scrollTop;
+ // Check for container and viewport for each edge
+ if (scrolledX < containerRect.left + offset || scrolledX < offset) {
+ edges.left = true;
+ }
+ if (scrolledX + bounding.width > containerRect.right - offset ||
+ scrolledX + bounding.width > window.innerWidth - offset) {
+ edges.right = true;
+ }
+ if (scrolledY < containerRect.top + offset || scrolledY < offset) {
+ edges.top = true;
+ }
+ if (scrolledY + bounding.height > containerBottom - offset ||
+ scrolledY + bounding.height > window.innerHeight - offset) {
+ edges.bottom = true;
+ }
+ return edges;
+ }
+ /**
+ * Checks if element can be aligned in multiple directions.
+ * @param el Element to be inspected.
+ * @param container Container element.
+ * @param bounding Bounding rect.
+ * @param offset Element offset.
+ */
+ static checkPossibleAlignments(el, container, bounding, offset) {
+ let canAlign = {
+ top: true,
+ right: true,
+ bottom: true,
+ left: true,
+ spaceOnTop: null,
+ spaceOnRight: null,
+ spaceOnBottom: null,
+ spaceOnLeft: null
+ };
+ let containerAllowsOverflow = getComputedStyle(container).overflow === 'visible';
+ let containerRect = container.getBoundingClientRect();
+ let containerHeight = Math.min(containerRect.height, window.innerHeight);
+ let containerWidth = Math.min(containerRect.width, window.innerWidth);
+ let elOffsetRect = el.getBoundingClientRect();
+ let scrollLeft = container.scrollLeft;
+ let scrollTop = container.scrollTop;
+ let scrolledX = bounding.left - scrollLeft;
+ let scrolledYTopEdge = bounding.top - scrollTop;
+ let scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;
+ // Check for container and viewport for left
+ canAlign.spaceOnRight = !containerAllowsOverflow
+ ? containerWidth - (scrolledX + bounding.width)
+ : window.innerWidth - (elOffsetRect.left + bounding.width);
+ if (canAlign.spaceOnRight < 0) {
+ canAlign.left = false;
+ }
+ // Check for container and viewport for Right
+ canAlign.spaceOnLeft = !containerAllowsOverflow
+ ? scrolledX - bounding.width + elOffsetRect.width
+ : elOffsetRect.right - bounding.width;
+ if (canAlign.spaceOnLeft < 0) {
+ canAlign.right = false;
+ }
+ // Check for container and viewport for Top
+ canAlign.spaceOnBottom = !containerAllowsOverflow
+ ? containerHeight - (scrolledYTopEdge + bounding.height + offset)
+ : window.innerHeight - (elOffsetRect.top + bounding.height + offset);
+ if (canAlign.spaceOnBottom < 0) {
+ canAlign.top = false;
+ }
+ // Check for container and viewport for Bottom
+ canAlign.spaceOnTop = !containerAllowsOverflow
+ ? scrolledYBottomEdge - (bounding.height - offset)
+ : elOffsetRect.bottom - (bounding.height + offset);
+ if (canAlign.spaceOnTop < 0) {
+ canAlign.bottom = false;
+ }
+ return canAlign;
+ }
+ /**
+ * Retrieves target element id from trigger.
+ * @param trigger Trigger element.
+ */
+ static getIdFromTrigger(trigger) {
+ let id = trigger.dataset.target;
+ if (!id) {
+ id = trigger.getAttribute('href');
+ return id ? id.slice(1) : '';
+ }
+ return id;
+ }
+ /**
+ * Retrieves document scroll postion from top.
+ */
+ static getDocumentScrollTop() {
+ return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
+ }
+ ;
+ /**
+ * Retrieves document scroll postion from left.
+ */
+ static getDocumentScrollLeft() {
+ return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+ }
+ /**
+ * Fires the given function after a certain ammount of time.
+ * @param func Function to be fired.
+ * @param wait Wait time.
+ * @param options Additional options.
+ */
+ static throttle(func, wait, options = null) {
+ let context, args, result;
+ let timeout = null;
+ let previous = 0;
+ options || (options = {});
+ let later = function () {
+ previous = options.leading === false ? 0 : new Date().getTime();
+ timeout = null;
+ result = func.apply(context, args);
+ context = args = null;
+ };
+ return function () {
+ let now = new Date().getTime();
+ if (!previous && options.leading === false)
+ previous = now;
+ let remaining = wait - (now - previous);
+ context = this;
+ args = arguments;
+ if (remaining <= 0) {
+ clearTimeout(timeout);
+ timeout = null;
+ previous = now;
+ result = func.apply(context, args);
+ context = args = null;
+ }
+ else if (!timeout && options.trailing !== false) {
+ timeout = setTimeout(later, remaining);
+ }
+ return result;
+ };
+ }
+}
+exports.Utils = Utils;
+/** Specifies wether tab is pressed or not. */
+Utils.tabPressed = false;
+/** Specifies wether there is a key pressed. */
+Utils.keyDown = false;
+/**
+ * Key maps.
+ */
+Utils.keys = {
+ TAB: ['Tab'],
+ ENTER: ['Enter'],
+ ESC: ['Escape', 'Esc'],
+ BACKSPACE: ['Backspace'],
+ ARROW_UP: ['ArrowUp', 'Up'],
+ ARROW_DOWN: ['ArrowDown', 'Down'],
+ ARROW_LEFT: ['ArrowLeft', 'Left'],
+ ARROW_RIGHT: ['ArrowRight', 'Right'],
+ DELETE: ['Delete', 'Del'],
+};
- M.Range = Range;
- if (M.jQueryLoaded) {
- M.initializeJqueryWrapper(Range, 'range', 'M_Range');
- }
+/***/ }),
- Range.init($('input[type=range]'));
-})(cash, M.anime);
+/***/ "./src/waves.ts":
+/*!**********************!*\
+ !*** ./src/waves.ts ***!
+ \**********************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.Waves = void 0;
+class Waves {
+ static _offset(el) {
+ const box = el.getBoundingClientRect();
+ const docElem = document.documentElement;
+ return {
+ top: box.top + window.pageYOffset - docElem.clientTop,
+ left: box.left + window.pageXOffset - docElem.clientLeft
+ };
+ }
+ // https://phoenix-dx.com/css-techniques-for-material-ripple-effect/
+ static renderWaveEffect(targetElement, position = null, color = null) {
+ const isCentered = position === null;
+ const duration = 500;
+ let animationFrame, animationStart;
+ const animationStep = function (timestamp) {
+ if (!animationStart) {
+ animationStart = timestamp;
+ }
+ const frame = timestamp - animationStart;
+ if (frame < duration) {
+ const easing = (frame / duration) * (2 - (frame / duration));
+ const circle = isCentered ? 'circle at 50% 50%' : `circle at ${position.x}px ${position.y}px`;
+ const waveColor = `rgba(${(color === null || color === void 0 ? void 0 : color.r) || 0}, ${(color === null || color === void 0 ? void 0 : color.g) || 0}, ${(color === null || color === void 0 ? void 0 : color.b) || 0}, ${0.3 * (1 - easing)})`;
+ const stop = 90 * easing + "%";
+ targetElement.style.backgroundImage = "radial-gradient(" + circle + ", " + waveColor + " " + stop + ", transparent " + stop + ")";
+ animationFrame = window.requestAnimationFrame(animationStep);
+ }
+ else {
+ targetElement.style.backgroundImage = 'none';
+ window.cancelAnimationFrame(animationFrame);
+ }
+ };
+ animationFrame = window.requestAnimationFrame(animationStep);
+ }
+ static Init() {
+ document.addEventListener("DOMContentLoaded", () => {
+ document.body.addEventListener('click', e => {
+ const trigger = e.target;
+ const el = trigger.closest('.waves-effect');
+ if (el && el.contains(trigger)) {
+ const isCircular = el.classList.contains('waves-circle');
+ const x = e.pageX - Waves._offset(el).left;
+ const y = e.pageY - Waves._offset(el).top;
+ let color = null;
+ if (el.classList.contains('waves-light'))
+ color = { r: 255, g: 255, b: 255 };
+ Waves.renderWaveEffect(el, isCircular ? null : { x, y }, color);
+ }
+ });
+ });
+ }
+}
+exports.Waves = Waves;
+
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+!function() {
+var exports = __webpack_exports__;
+/*!***********************!*\
+ !*** ./src/global.ts ***!
+ \***********************/
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.M = void 0;
+const autocomplete_1 = __webpack_require__(/*! ./autocomplete */ "./src/autocomplete.ts");
+const buttons_1 = __webpack_require__(/*! ./buttons */ "./src/buttons.ts");
+const cards_1 = __webpack_require__(/*! ./cards */ "./src/cards.ts");
+const carousel_1 = __webpack_require__(/*! ./carousel */ "./src/carousel.ts");
+const characterCounter_1 = __webpack_require__(/*! ./characterCounter */ "./src/characterCounter.ts");
+const chips_1 = __webpack_require__(/*! ./chips */ "./src/chips.ts");
+const collapsible_1 = __webpack_require__(/*! ./collapsible */ "./src/collapsible.ts");
+const datepicker_1 = __webpack_require__(/*! ./datepicker */ "./src/datepicker.ts");
+const dropdown_1 = __webpack_require__(/*! ./dropdown */ "./src/dropdown.ts");
+const forms_1 = __webpack_require__(/*! ./forms */ "./src/forms.ts");
+const materialbox_1 = __webpack_require__(/*! ./materialbox */ "./src/materialbox.ts");
+const modal_1 = __webpack_require__(/*! ./modal */ "./src/modal.ts");
+const parallax_1 = __webpack_require__(/*! ./parallax */ "./src/parallax.ts");
+const pushpin_1 = __webpack_require__(/*! ./pushpin */ "./src/pushpin.ts");
+const scrollspy_1 = __webpack_require__(/*! ./scrollspy */ "./src/scrollspy.ts");
+const select_1 = __webpack_require__(/*! ./select */ "./src/select.ts");
+const sidenav_1 = __webpack_require__(/*! ./sidenav */ "./src/sidenav.ts");
+const slider_1 = __webpack_require__(/*! ./slider */ "./src/slider.ts");
+const tabs_1 = __webpack_require__(/*! ./tabs */ "./src/tabs.ts");
+const tapTarget_1 = __webpack_require__(/*! ./tapTarget */ "./src/tapTarget.ts");
+const timepicker_1 = __webpack_require__(/*! ./timepicker */ "./src/timepicker.ts");
+const toasts_1 = __webpack_require__(/*! ./toasts */ "./src/toasts.ts");
+const tooltip_1 = __webpack_require__(/*! ./tooltip */ "./src/tooltip.ts");
+const waves_1 = __webpack_require__(/*! ./waves */ "./src/waves.ts");
+const range_1 = __webpack_require__(/*! ./range */ "./src/range.ts");
+const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
+class M {
+ /**
+ * Automatically initialize components.
+ * @param context Root element to initialize. Defaults to `document.body`.
+ */
+ static AutoInit(context = document.body) {
+ let registry = {
+ Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
+ Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
+ Chips: context.querySelectorAll('.chips:not(.no-autoinit)'),
+ Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'),
+ Datepicker: context.querySelectorAll('.datepicker:not(.no-autoinit)'),
+ Dropdown: context.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
+ Materialbox: context.querySelectorAll('.materialboxed:not(.no-autoinit)'),
+ Modal: context.querySelectorAll('.modal:not(.no-autoinit)'),
+ Parallax: context.querySelectorAll('.parallax:not(.no-autoinit)'),
+ Pushpin: context.querySelectorAll('.pushpin:not(.no-autoinit)'),
+ ScrollSpy: context.querySelectorAll('.scrollspy:not(.no-autoinit)'),
+ FormSelect: context.querySelectorAll('select:not(.no-autoinit)'),
+ Sidenav: context.querySelectorAll('.sidenav:not(.no-autoinit)'),
+ Tabs: context.querySelectorAll('.tabs:not(.no-autoinit)'),
+ TapTarget: context.querySelectorAll('.tap-target:not(.no-autoinit)'),
+ Timepicker: context.querySelectorAll('.timepicker:not(.no-autoinit)'),
+ Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
+ FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)'),
+ };
+ M.Autocomplete.init(registry.Autocomplete, {});
+ M.Carousel.init(registry.Carousel, {});
+ M.Chips.init(registry.Chips, {});
+ M.Collapsible.init(registry.Collapsible, {});
+ M.Datepicker.init(registry.Datepicker, {});
+ M.Dropdown.init(registry.Dropdown, {});
+ M.Materialbox.init(registry.Materialbox, {});
+ M.Modal.init(registry.Modal, {});
+ M.Parallax.init(registry.Parallax, {});
+ M.Pushpin.init(registry.Pushpin, {});
+ M.ScrollSpy.init(registry.ScrollSpy, {});
+ M.FormSelect.init(registry.FormSelect, {});
+ M.Sidenav.init(registry.Sidenav, {});
+ M.Tabs.init(registry.Tabs, {});
+ M.TapTarget.init(registry.TapTarget, {});
+ M.Timepicker.init(registry.Timepicker, {});
+ M.Tooltip.init(registry.Tooltip, {});
+ M.FloatingActionButton.init(registry.FloatingActionButton, {});
+ }
+}
+exports.M = M;
+M.version = '2.1.0';
+M.Autocomplete = autocomplete_1.Autocomplete;
+M.Tabs = tabs_1.Tabs;
+M.Carousel = carousel_1.Carousel;
+M.Dropdown = dropdown_1.Dropdown;
+M.FloatingActionButton = buttons_1.FloatingActionButton;
+M.Chips = chips_1.Chips;
+M.Collapsible = collapsible_1.Collapsible;
+M.Datepicker = datepicker_1.Datepicker;
+M.CharacterCounter = characterCounter_1.CharacterCounter;
+M.Forms = forms_1.Forms;
+M.FormSelect = select_1.FormSelect;
+M.Modal = modal_1.Modal;
+M.Pushpin = pushpin_1.Pushpin;
+M.Materialbox = materialbox_1.Materialbox;
+M.Parallax = parallax_1.Parallax;
+M.Slider = slider_1.Slider;
+M.Timepicker = timepicker_1.Timepicker;
+/** Creates a toast. */
+M.toast = (opt) => new toasts_1.Toast(opt);
+M.Tooltip = tooltip_1.Tooltip;
+M.Sidenav = sidenav_1.Sidenav;
+M.TapTarget = tapTarget_1.TapTarget;
+M.ScrollSpy = scrollspy_1.ScrollSpy;
+M.Range = range_1.Range;
+M.Waves = waves_1.Waves;
+M.Utils = utils_1.Utils;
+(() => {
+ document.addEventListener('keydown', utils_1.Utils.docHandleKeydown, true);
+ document.addEventListener('keyup', utils_1.Utils.docHandleKeyup, true);
+ document.addEventListener('focus', utils_1.Utils.docHandleFocus, true);
+ document.addEventListener('blur', utils_1.Utils.docHandleBlur, true);
+ cards_1.Cards.Init();
+ forms_1.Forms.Init();
+ chips_1.Chips.Init();
+ waves_1.Waves.Init();
+ range_1.Range.Init();
+})();
+
+}();
+/******/ return __webpack_exports__;
+/******/ })()
+;
+});
\ No newline at end of file
diff --git a/client/main.css b/client/main.css
index 2d0bb33..84f632d 100644
--- a/client/main.css
+++ b/client/main.css
@@ -1,26 +1,12 @@
body {
padding: 10px;
font-family: sans-serif;
- background-color: #F9FBFC;
}
.clickable, .closeIcon, .dispo {
cursor: pointer;
}
-.dark-mode {
- background: #191818;
- color: #fcfcfc;
-}
-
-input.dark-mode {
- color: #fcfcfc;
-}
-
-select.dark-mode {
- color: #fcfcfc;
-}
-
li.collection-item {
font-size: 20px;
diff --git a/imports/api/userConfig.js b/imports/api/userConfig.js
new file mode 100644
index 0000000..76ca937
--- /dev/null
+++ b/imports/api/userConfig.js
@@ -0,0 +1,42 @@
+import { Meteor } from 'meteor/meteor';
+import { Mongo } from 'meteor/mongo';
+import { check } from 'meteor/check';
+
+export const UserConfig = new Mongo.Collection('userConfig');
+
+UserConfig.allow({
+ insert: function(userId, doc){
+ // if use id exists, allow insert
+ return !!userId;
+ },
+});
+
+Meteor.methods({
+ 'add.darkModePref' (pref) {
+ check(pref, String);
+
+ if (!this.userId) {
+ throw new Meteor.Error('Not able to change registration setting. Make sure you are logged in with valid system administrator credentials.');
+ }
+
+ return UserConfig.insert({
+ user: this.userId,
+ darkMode: pref,
+ dateAdded: Date()
+ });
+ },
+ 'update.darkModePref' (pref) {
+ check(pref, String);
+
+ if (!this.userId) {
+ throw new Meteor.Error('Not able to change registration setting. Make sure you are logged in with valid system administrator credentials.');
+ }
+
+ return UserConfig.update({ user: this.userId }, {
+ $set: {
+ darkMode: pref,
+ dateUpdate: Date()
+ }
+ });
+ }
+});
\ No newline at end of file
diff --git a/server/methods.js b/server/methods.js
index 6070650..4c2921c 100644
--- a/server/methods.js
+++ b/server/methods.js
@@ -11,7 +11,7 @@ Meteor.methods({
console.log("User id for role: " + Meteor.userId() );
let userId = Meteor.userId();
Roles.addUsersToRoles(userId, role);
- Meteor.call('add.darkPref', false, function(err, result) {
+ Meteor.call('add.darkModePref', "light", function(err, result) {
if (err) {
console.log(" ERROR: can't set user dark mode preference: " + err);
} else {
@@ -22,7 +22,7 @@ Meteor.methods({
console.log("Creating first system admin user: " + Meteor.userId() );
let userId = Meteor.userId();
Roles.addUsersToRoles(userId, "systemadmin");
- Meteor.call('add.darkPref', false, function(err, result) {
+ Meteor.call('add.darkModePref', "light", function(err, result) {
if (err) {
console.log(" ERROR: can't set user dark mode preference: " + err);
} else {
diff --git a/server/publish.js b/server/publish.js
index ad7e3c7..591d3a2 100644
--- a/server/publish.js
+++ b/server/publish.js
@@ -8,6 +8,7 @@ import { Menus } from '../imports/api/menu.js';
import { MenuItems } from '../imports/api/menuItems.js';
import moment from 'moment';
import { TaskItems } from '../imports/api/tasks.js';
+import { UserConfig } from '../imports/api/userConfig.js';
Meteor.publish("SystemConfig", function() {
try {
@@ -17,6 +18,14 @@ Meteor.publish("SystemConfig", function() {
}
});
+Meteor.publish("UserConfigPrefs", function() {
+ try {
+ return UserConfig.find({});
+ } catch (error) {
+ console.log(" ERROR: Error accessing user config: " + error);
+ }
+});
+
Meteor.publish('userList', function() {
return Meteor.users.find({});
});
@@ -37,6 +46,14 @@ Meteor.publish("myProducts", function() {
}
});
+Meteor.publish("limProducts", function(findItemVal) {
+ try {
+ return Products.find({ prodName: {$regex: findItemVal + '.*', $options: 'i' }});
+ } catch (error) {
+ cconsole.log(" ERROR pulling limited product data: " + error);
+ }
+})
+
Meteor.publish("myLists", function() {
try {
return Lists.find( { $or: [ { listOwner: this.userId, listComplete: false }, { listShared: true, listComplete: false } ] } );
@@ -47,7 +64,6 @@ Meteor.publish("myLists", function() {
Meteor.publish("myListItems", function(listId) {
try {
- // console.log("List Id is: " + listId);
return ListItems.find({ listId: listId });
} catch (error) {
console.log(" ERROR pulling list items for this list: " + error);