From 3e8b34be2fdeccf16c8b46f1ee518f970853768d Mon Sep 17 00:00:00 2001 From: Mitch Riedstra Date: Tue, 24 Oct 2017 16:59:48 -0400 Subject: Adding in materialize source and templates --- app/dispatch/static/materialize/js/tapTarget.js | 187 ++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 app/dispatch/static/materialize/js/tapTarget.js (limited to 'app/dispatch/static/materialize/js/tapTarget.js') diff --git a/app/dispatch/static/materialize/js/tapTarget.js b/app/dispatch/static/materialize/js/tapTarget.js new file mode 100644 index 0000000..33ed757 --- /dev/null +++ b/app/dispatch/static/materialize/js/tapTarget.js @@ -0,0 +1,187 @@ +(function ($) { + + var methods = { + init: function (options) { + return this.each(function() { + var origin = $('#'+$(this).attr('data-activates')); + var screen = $('body'); + + // Creating tap target + var tapTargetEl = $(this); + var tapTargetWrapper = tapTargetEl.parent('.tap-target-wrapper'); + var tapTargetWave = tapTargetWrapper.find('.tap-target-wave'); + var tapTargetOriginEl = tapTargetWrapper.find('.tap-target-origin'); + var tapTargetContentEl = tapTargetEl.find('.tap-target-content'); + + // Creating wrapper + if (!tapTargetWrapper.length) { + tapTargetWrapper = tapTargetEl.wrap($('
')).parent(); + } + + // Creating content + if (!tapTargetContentEl.length) { + tapTargetContentEl = $('
'); + tapTargetEl.append(tapTargetContentEl); + } + + // Creating foreground wave + if (!tapTargetWave.length) { + tapTargetWave = $('
'); + + // Creating origin + if (!tapTargetOriginEl.length) { + tapTargetOriginEl = origin.clone(true, true); + tapTargetOriginEl.addClass('tap-target-origin'); + tapTargetOriginEl.removeAttr('id'); + tapTargetOriginEl.removeAttr('style'); + tapTargetWave.append(tapTargetOriginEl); + } + + tapTargetWrapper.append(tapTargetWave); + } + + // Open + var openTapTarget = function() { + if (tapTargetWrapper.is('.open')) { + return; + } + + // Adding open class + tapTargetWrapper.addClass('open'); + + setTimeout(function() { + tapTargetOriginEl.off('click.tapTarget').on('click.tapTarget', function(e) { + closeTapTarget(); + tapTargetOriginEl.off('click.tapTarget'); + }); + + $(document).off('click.tapTarget').on('click.tapTarget', function(e) { + closeTapTarget(); + $(document).off('click.tapTarget'); + }); + + var throttledCalc = Materialize.throttle(function() { + calculateTapTarget(); + }, 200); + $(window).off('resize.tapTarget').on('resize.tapTarget', throttledCalc); + }, 0); + }; + + // Close + var closeTapTarget = function(){ + if (!tapTargetWrapper.is('.open')) { + return; + } + + tapTargetWrapper.removeClass('open'); + tapTargetOriginEl.off('click.tapTarget') + $(document).off('click.tapTarget'); + $(window).off('resize.tapTarget'); + }; + + // Pre calculate + var calculateTapTarget = function() { + // Element or parent is fixed position? + var isFixed = origin.css('position') === 'fixed'; + if (!isFixed) { + var parents = origin.parents(); + for(var i = 0; i < parents.length; i++) { + isFixed = $(parents[i]).css('position') == 'fixed'; + if (isFixed) { + break; + } + } + } + + // Calculating origin + var originWidth = origin.outerWidth(); + var originHeight = origin.outerHeight(); + var originTop = isFixed ? origin.offset().top - $(document).scrollTop() : origin.offset().top; + var originLeft = isFixed ? origin.offset().left - $(document).scrollLeft() : origin.offset().left; + + // Calculating screen + var windowWidth = $(window).width(); + var windowHeight = $(window).height(); + 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; + var isCenterY = originTop >= windowHeight*0.25 && originTop <= windowHeight*0.75; + + // Calculating tap target + var tapTargetWidth = tapTargetEl.outerWidth(); + var tapTargetHeight = tapTargetEl.outerHeight(); + var tapTargetTop = originTop + originHeight/2 - tapTargetHeight/2; + var tapTargetLeft = originLeft + originWidth/2 - tapTargetWidth/2; + var tapTargetPosition = isFixed ? 'fixed' : 'absolute'; + + // 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 : ''; + tapTargetWrapperCssObj.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth : ''; + tapTargetWrapperCssObj.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight : ''; + tapTargetWrapperCssObj.left = isLeft ? tapTargetLeft : ''; + tapTargetWrapperCssObj.position = tapTargetPosition; + tapTargetWrapper.css(tapTargetWrapperCssObj); + + // Setting content + tapTargetContentEl.css({ + width: tapTargetTextWidth, + height: tapTargetTextHeight, + top: tapTargetTextTop, + right: tapTargetTextRight, + bottom: tapTargetTextBottom, + left: tapTargetTextLeft, + padding: tapTargetTextPadding, + verticalAlign: tapTargetTextAlign + }); + + // Setting wave + tapTargetWave.css({ + top: tapTargetWaveTop, + left: tapTargetWaveLeft, + width: tapTargetWaveWidth, + height: tapTargetWaveHeight + }); + } + + if (options == 'open') { + calculateTapTarget(); + openTapTarget(); + } + + if (options == 'close') + closeTapTarget(); + }); + }, + open: function() {}, + close: function() {} + }; + + $.fn.tapTarget = function(methodOrOptions) { + if (methods[methodOrOptions] || typeof methodOrOptions === 'object') + return methods.init.apply( this, arguments ); + + $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tap-target' ); + }; + +}( jQuery )); -- cgit v1.2.3