diff options
Diffstat (limited to 'app/dispatch/static/materialize/js/materialbox.js')
| -rw-r--r-- | app/dispatch/static/materialize/js/materialbox.js | 289 |
1 files changed, 289 insertions, 0 deletions
diff --git a/app/dispatch/static/materialize/js/materialbox.js b/app/dispatch/static/materialize/js/materialbox.js new file mode 100644 index 0000000..5523fb1 --- /dev/null +++ b/app/dispatch/static/materialize/js/materialbox.js @@ -0,0 +1,289 @@ +(function ($) {
+
+ $.fn.materialbox = function () {
+
+ return this.each(function() {
+
+ if ($(this).hasClass('initialized')) {
+ return;
+ }
+
+ $(this).addClass('initialized');
+
+ var overlayActive = false;
+ var doneAnimating = true;
+ var inDuration = 275;
+ var outDuration = 200;
+ var origin = $(this);
+ var placeholder = $('<div></div>').addClass('material-placeholder');
+ var originalWidth = 0;
+ var originalHeight = 0;
+ var ancestorsChanged;
+ var ancestor;
+ var originInlineStyles = origin.attr('style');
+ origin.wrap(placeholder);
+
+
+ // Start click handler
+ origin.on('click', function() {
+ var placeholder = origin.parent('.material-placeholder');
+ var windowWidth = window.innerWidth;
+ var windowHeight = window.innerHeight;
+ var originalWidth = origin.width();
+ var originalHeight = origin.height();
+
+
+ // If already modal, return to original
+ if (doneAnimating === false) {
+ returnToOriginal();
+ return false;
+ }
+ else if (overlayActive && doneAnimating===true) {
+ returnToOriginal();
+ return false;
+ }
+
+
+ // Set states
+ doneAnimating = false;
+ origin.addClass('active');
+ overlayActive = true;
+
+ // Set positioning for placeholder
+ placeholder.css({
+ width: placeholder[0].getBoundingClientRect().width,
+ height: placeholder[0].getBoundingClientRect().height,
+ position: 'relative',
+ top: 0,
+ left: 0
+ });
+
+ // Find ancestor with overflow: hidden; and remove it
+ ancestorsChanged = undefined;
+ ancestor = placeholder[0].parentNode;
+ var count = 0;
+ while (ancestor !== null && !$(ancestor).is(document)) {
+ var curr = $(ancestor);
+ if (curr.css('overflow') !== 'visible') {
+ curr.css('overflow', 'visible');
+ if (ancestorsChanged === undefined) {
+ ancestorsChanged = curr;
+ }
+ else {
+ ancestorsChanged = ancestorsChanged.add(curr);
+ }
+ }
+ ancestor = ancestor.parentNode;
+ }
+
+ // Set css on origin
+ origin.css({
+ position: 'absolute',
+ 'z-index': 1000,
+ 'will-change': 'left, top, width, height'
+ })
+ .data('width', originalWidth)
+ .data('height', originalHeight);
+
+ // Add overlay
+ var overlay = $('<div id="materialbox-overlay"></div>')
+ .css({
+ opacity: 0
+ })
+ .click(function(){
+ if (doneAnimating === true)
+ returnToOriginal();
+ });
+
+ // Put before in origin image to preserve z-index layering.
+ origin.before(overlay);
+
+ // Set dimensions if needed
+ var overlayOffset = overlay[0].getBoundingClientRect();
+ overlay.css({
+ width: windowWidth,
+ height: windowHeight,
+ left: -1 * overlayOffset.left,
+ top: -1 * overlayOffset.top
+ })
+
+ // Animate Overlay
+ overlay.velocity({opacity: 1},
+ {duration: inDuration, queue: false, easing: 'easeOutQuad'} );
+
+ // Add and animate caption if it exists
+ if (origin.data('caption') !== "") {
+ var $photo_caption = $('<div class="materialbox-caption"></div>');
+ $photo_caption.text(origin.data('caption'));
+ $('body').append($photo_caption);
+ $photo_caption.css({ "display": "inline" });
+ $photo_caption.velocity({opacity: 1}, {duration: inDuration, queue: false, easing: 'easeOutQuad'});
+ }
+
+ // Resize Image
+ var ratio = 0;
+ var widthPercent = originalWidth / windowWidth;
+ var heightPercent = originalHeight / windowHeight;
+ var newWidth = 0;
+ var newHeight = 0;
+
+ if (widthPercent > heightPercent) {
+ ratio = originalHeight / originalWidth;
+ newWidth = windowWidth * 0.9;
+ newHeight = windowWidth * 0.9 * ratio;
+ }
+ else {
+ ratio = originalWidth / originalHeight;
+ newWidth = (windowHeight * 0.9) * ratio;
+ newHeight = windowHeight * 0.9;
+ }
+
+ // Animate image + set z-index
+ if(origin.hasClass('responsive-img')) {
+ origin.velocity({'max-width': newWidth, 'width': originalWidth}, {duration: 0, queue: false,
+ complete: function(){
+ origin.css({left: 0, top: 0})
+ .velocity(
+ {
+ height: newHeight,
+ width: newWidth,
+ left: $(document).scrollLeft() + windowWidth/2 - origin.parent('.material-placeholder').offset().left - newWidth/2,
+ top: $(document).scrollTop() + windowHeight/2 - origin.parent('.material-placeholder').offset().top - newHeight/ 2
+ },
+ {
+ duration: inDuration,
+ queue: false,
+ easing: 'easeOutQuad',
+ complete: function(){doneAnimating = true;}
+ }
+ );
+ } // End Complete
+ }); // End Velocity
+ }
+ else {
+ origin.css('left', 0)
+ .css('top', 0)
+ .velocity(
+ {
+ height: newHeight,
+ width: newWidth,
+ left: $(document).scrollLeft() + windowWidth/2 - origin.parent('.material-placeholder').offset().left - newWidth/2,
+ top: $(document).scrollTop() + windowHeight/2 - origin.parent('.material-placeholder').offset().top - newHeight/ 2
+ },
+ {
+ duration: inDuration,
+ queue: false,
+ easing: 'easeOutQuad',
+ complete: function(){doneAnimating = true;}
+ }
+ ); // End Velocity
+ }
+
+ // Handle Exit triggers
+ $(window).on('scroll.materialbox', function() {
+ if (overlayActive) {
+ returnToOriginal();
+ }
+ });
+
+ $(window).on('resize.materialbox', function() {
+ if (overlayActive) {
+ returnToOriginal();
+ }
+ });
+
+ $(document).on('keyup.materialbox', function(e) {
+ // ESC key
+ if (e.keyCode === 27 &&
+ doneAnimating === true &&
+ overlayActive) {
+ returnToOriginal();
+ }
+ });
+
+ }); // End click handler
+
+
+ // This function returns the modaled image to the original spot
+ function returnToOriginal() {
+
+ doneAnimating = false;
+
+ var placeholder = origin.parent('.material-placeholder');
+ var windowWidth = window.innerWidth;
+ var windowHeight = window.innerHeight;
+ var originalWidth = origin.data('width');
+ var originalHeight = origin.data('height');
+
+ origin.velocity("stop", true);
+ $('#materialbox-overlay').velocity("stop", true);
+ $('.materialbox-caption').velocity("stop", true);
+
+ // disable exit handlers
+ $(window).off('scroll.materialbox');
+ $(document).off('keyup.materialbox');
+ $(window).off('resize.materialbox');
+
+ $('#materialbox-overlay').velocity({opacity: 0}, {
+ duration: outDuration, // Delay prevents animation overlapping
+ queue: false, easing: 'easeOutQuad',
+ complete: function(){
+ // Remove Overlay
+ overlayActive = false;
+ $(this).remove();
+ }
+ });
+
+ // Resize Image
+ origin.velocity(
+ {
+ width: originalWidth,
+ height: originalHeight,
+ left: 0,
+ top: 0
+ },
+ {
+ duration: outDuration,
+ queue: false, easing: 'easeOutQuad',
+ complete: function() {
+ placeholder.css({
+ height: '',
+ width: '',
+ position: '',
+ top: '',
+ left: ''
+ });
+
+ origin.removeAttr('style');
+ origin.attr('style', originInlineStyles);
+
+ // Remove class
+ origin.removeClass('active');
+ doneAnimating = true;
+
+ // Remove overflow overrides on ancestors
+ if (ancestorsChanged) {
+ ancestorsChanged.css('overflow', '');
+ }
+ }
+ }
+ );
+
+ // Remove Caption + reset css settings on image
+ $('.materialbox-caption').velocity({opacity: 0}, {
+ duration: outDuration, // Delay prevents animation overlapping
+ queue: false, easing: 'easeOutQuad',
+ complete: function(){
+ $(this).remove();
+ }
+ });
+
+ }
+ });
+ };
+
+ $(document).ready(function(){
+ $('.materialboxed').materialbox();
+ });
+
+}( jQuery ));
|