Version 4.5.0

applications/gallery/data/javascript.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <javascript app="gallery">
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/browse" javascript_name="ips.browse.lightbox.js" javascript_type="controller" javascript_version="103038" javascript_position="1000200"><![CDATA[/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/browse" javascript_name="ips.browse.lightbox.js" javascript_type="controller" javascript_version="105100" javascript_position="1000200"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -20,6 +20,7 @@
 		initialize: function () {
 			this.on( 'click', '[data-imageLightbox]', this.launchLightbox );
 			this.on( document, 'keydown', this.keyDown );
+			this.on( document, 'click', '.cLightboxClose', this.closeLightbox );
 
 			// Primary event that watches for URL changes
 			History.Adapter.bind( window, 'statechange', _.bind( this.stateChange, this ) );
@@ -38,11 +39,6 @@
 			}
 		},
 
-		/**
-		 * Monitor state change and close lightbox if we go back again
-		 */
-		closeLightboxNextStateChange: false,
-
 		/**
 		 * Handles URL state changes
 		 *
@@ -52,21 +48,14 @@
 			var state = History.getState();
 
 			// Monitor for back button when we're on the 'first' image
-			if( state.data.controller == 'gallery.front.browse.imageLightbox' && ( !_.isUndefined( state.data.initialLaunch ) && state.data.initialLaunch == true ) ) {
-				this.closeLightboxNextStateChange = true;
-			}
-
 			if( state.data.controller != 'gallery.front.view.image' ){
 				if( state.data.controller == 'gallery.front.browse.imageLightbox' && ( _.isUndefined( state.data.initialLaunch ) || state.data.initialLaunch != true ) ) {
-					this.closeLightboxNextStateChange = false;
 					Debug.log( state.data );
-					this.closeLightbox();
+					this.hideLightbox();
 				}
 				return;
 			}
 
-			this.closeLightboxNextStateChange = false;
-
 			// We are looking for next/prev clicks in the lightbox, so make sure we know which was done
 			if( _.isUndefined( state.data.direction ) ){
 				return;
@@ -128,8 +117,6 @@
 				$('#cLightbox').css({
 					zIndex: ips.ui.zIndex()
 				});
-
-				$('.cLightboxClose').on( 'click', this.closeLightbox );
 			} else if( !$('#cLightbox').is(':visible') ) {
 				$('#cLightbox').show();
 			}
@@ -175,25 +162,38 @@
 		},
 
 		/**
-		 * Close the lightbox
+		 * Close the lightbox and update the state history
 		 *
 		 * @returns {void}
 		 */
-		 closeLightbox: function( e ) {
-		 	// Hide the lightbox
-			$('#cLightbox').fadeOut( 400, function(){ 
-				// Empty the lightbox
-				$('#cLightbox > .cLightboxBack').html('');
-			});
-
-			$('body').removeClass('ipsNoScroll');
+		closeLightbox: function( e ) {
+			this.hideLightbox();
 
 			// Store a history entry
 			History.pushState( { controller: 'gallery.front.browse.imageLightbox', bypassStateAdjustment: true }, $('#cLightbox').attr('data-originalTitle'), $('#cLightbox').attr('data-originalUrl') );
-		 }
+		},
+
+		 /**
+		  * Hides the lightbox
+		  *
+		  * @returns {void}
+		  */
+		  hideLightbox: function() {
+			// Hide the lightbox
+			$('#cLightbox').fadeOut( 400 );
+			$('body').removeClass('ipsNoScroll');
+
+			// If it's a video, pause it to stop the sound
+			if( $('#cLightbox video').length )
+			{
+				_.each( $('#cLightbox video'), function( elem ) {
+					elem.pause();
+				} );
+			}
+		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/browse" javascript_name="ips.browse.list.js" javascript_type="controller" javascript_version="103038" javascript_position="1000200">/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/browse" javascript_name="ips.browse.list.js" javascript_type="controller" javascript_version="105100" javascript_position="1000200">/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -241,7 +241,7 @@
 		}
 	});
 }(jQuery, _));</file>
- <file javascript_app="gallery" javascript_location="admin" javascript_path="controllers/settings" javascript_name="ips.settings.settings.js" javascript_type="controller" javascript_version="103038" javascript_position="1000050">/**
+ <file javascript_app="gallery" javascript_location="admin" javascript_path="controllers/settings" javascript_name="ips.settings.settings.js" javascript_type="controller" javascript_version="105100" javascript_position="1000050">/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -298,7 +298,7 @@
 
 	});
 }(jQuery, _));</file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.chooseCategory.js" javascript_type="controller" javascript_version="103038" javascript_position="1000100"><![CDATA[/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.chooseCategory.js" javascript_type="controller" javascript_version="105100" javascript_position="1000100"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -314,13 +314,18 @@
 		_chosen: false,
 		_resizeTimer: null,
 
-		initialize: function () {
+		initialize: function () {			
 			this.on( 'nodeItemSelected', '[data-name="image_category"]', this.chooseCategory );
 			this.on( 'nodeSelectedChanged', '[data-name="image_category"]', this.chooseCategoryInitially );
 			this.on( 'click', '[data-action="continueNoAlbum"]', this.continueNoAlbum );
 			this.on( 'click', '[data-type]:not([data-disabled])', this.chooseAlbumType );
 
+			// Try to set the dialog title
 			this.setup();
+
+			// But in some cases we finish loading before the wrapper controller, so also listen for the wrapper controller to finish
+			// and set the title then, if appropriate
+			this.on( document, 'gallery.wrapperInit', this.setup );
 		},
 		
 		setup: function () {
@@ -389,7 +394,7 @@
 			}
 
 			form.show().css({
-				opacity: 0.001
+				opacity: "0.001"
 			});
 
 			if( this.scope.closest('.ipsDialog').length ){
@@ -397,7 +402,7 @@
 			}
 
 			form.animate({
-				opacity: 1
+				opacity: "1"
 			}, function () {
 				if( self.scope.closest('.ipsDialog').length ){
 					self._resizeTimer = setInterval( function () {
@@ -491,8 +496,9 @@
 		},
 		
 	});
-}(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.existingAlbums.js" javascript_type="controller" javascript_version="103038" javascript_position="1000100"><![CDATA[/**
+}(jQuery, _));
+]]></file>
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.existingAlbums.js" javascript_type="controller" javascript_version="105100" javascript_position="1000100"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -539,7 +545,7 @@
 		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.uploadImages.js" javascript_type="controller" javascript_version="103038" javascript_position="1000100"><![CDATA[/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.uploadImages.js" javascript_type="controller" javascript_version="105100" javascript_position="1000100"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -670,7 +676,7 @@
 		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.wrapper.js" javascript_type="controller" javascript_version="103038" javascript_position="1000100"><![CDATA[/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.wrapper.js" javascript_type="controller" javascript_version="105100" javascript_position="1000100"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -694,6 +700,7 @@
 		initialize: function () {
 			// Intercept form submissions
 			this.on( 'submit', 'form', this.submitForm );
+			this.on( 'click', '[data-role="submitForm"]', this.maybeSubmitForm );
 
 			// If another controller tells us to do something, do it
 			this.on( 'gallery.submit.response', this._updateWrapper );
@@ -717,7 +724,11 @@
 			this.on( 'gallery.enlargeUploader', this.enlargeUploader );
 			this.on( 'gallery.updateTitle', this.updateTitle );
 
+			// Set us up
 			this.setup();
+
+			// Let everyone know we're done in case they're waiting
+			this.trigger('gallery.wrapperInit');
 		},
 
 		/**
@@ -934,7 +945,7 @@
 				}
 			} else {
 				// Otherwise, clone our existing form to use
-				$('[data-role="defaultImageDetailsForm"]').find('#cke_image_description_DEFAULT').remove();
+				$('[data-role="defaultImageDetailsForm"]').find('#cke_filedata__image_description_DEFAULT').remove();
 				var htmlToInsert = $('[data-role="defaultImageDetailsForm"]').html();
 				htmlToInsert	 = '<div id="image_details_' + imageId + '">' + htmlToInsert.replace( /name="image_tags_DEFAULT"/g, 'name="image_tags_DEFAULT" data-ipsAutocomplete ').replace( /_DEFAULT/g, '_' + imageId ) + "</div>";
 
@@ -1015,7 +1026,7 @@
 			if( !show ){
 				detailsPanel
 					.animate({
-						opacity: 0,
+						opacity: "0",
 						top: '400px'
 					}, 400, function () {
 						detailsPanel.hide()
@@ -1024,11 +1035,11 @@
 				detailsPanel
 					.show()
 					.css({
-						opacity: 0,
+						opacity: "0",
 						top: '400px'
 					})
 					.animate({
-						opacity: 1,
+						opacity: "1",
 						top: '0px'
 					}, 400 );
 			}
@@ -1062,6 +1073,25 @@
 			e.preventDefault();			
 		},
 
+		/**
+		 * IE11 doesn't support submit buttons outside of a <form> like HTML5 does.
+		 * So, if we click the button, are on IE11, and not inside a form, manually trigger a submit.
+		 *
+		 * @param 	{event} 	e 		Event object
+		 * @returns {void}
+		 */
+		maybeSubmitForm: function (e) {
+			var isIE11 = !(window.ActiveXObject) && "ActiveXObject" in window;
+
+			if( !$( e.currentTarget ).closest('form').length && $( e.currentTarget ).is('[form]') && isIE11 ){
+				var form = $('#' + $( e.currentTarget ).attr('form'));
+
+				if( form.length ){
+					form.submit();
+				}
+			}
+		},
+
 		/**
 		 * Event handler for submitting forms inside the wizard
 		 *
@@ -1070,7 +1100,7 @@
 		 */
 		submitForm: function (e) {
 			e.preventDefault();
-			
+
 			var form = $( e.currentTarget );
 			var url = form.attr('action');
 
@@ -1102,7 +1132,10 @@
 					}
 				}
 
-				form.find('input[name="images_autofollow_all"]').val( $('#check_image_auto_follow_wrapper').hasClass('ipsToggle_on') ? 1 : 0 );
+				if( ips.getSetting('memberID') )
+				{
+					form.find('input[name="images_autofollow_all"]').val( $('#check_image_auto_follow_wrapper').hasClass('ipsToggle_on') ? 1 : 0 );
+				}
 
 				// Get the order of the images and store this in the submission
 				var imageOrder = [];
@@ -1187,6 +1220,7 @@
 		 * @returns {void}
 		 */		
 		_updateContents: function ( response ) {
+			
 			var wrapper = $('[data-role="submitWrapper"]');
 			var container = wrapper.find('[data-role="container"]');
 
@@ -1315,45 +1349,57 @@
 		_enlargeUploadStep: function (callback) {
 			var wrapper = $('[data-role="submitWrapper"]');
 			var dialogElem = this.scope.closest('.cGalleryDialog_outer > div');
-			var dialogElemPos = ips.utils.position.getElemPosition( dialogElem );
-			var viewportSize = { width: $( window ).width(), height: $( window ).height() };
-			var left = ( viewportSize.width - dialogElem.width() ) / 2;
 
-			// Set the size of the dialog div, and then animate expanding to fullscreen size
-			this.scope.closest('.cGalleryDialog_outer > div').css({
-				width: 'auto',
-				maxWidth: '100%',
-				position: 'fixed',
-				margin: 0,
-				top: dialogElemPos.absPos.top + 'px',
-				left: left + 'px',
-				right: viewportSize.width - ( left + dialogElem.width() ) + 'px'
-			}).animate({
-				left: '10px',
-				right: '10px',
-				bottom: '10px',
-				top: '10px',
-			}, function () {
+			if( dialogElem.length )
+			{
+				var dialogElemPos = ips.utils.position.getElemPosition( dialogElem );
+				var viewportSize = { width: $( window ).width(), height: $( window ).height() };
+				var left = ( viewportSize.width - dialogElem.width() ) / 2;
 
-				// Now fade in the wrapper
-				wrapper.find('[data-role="images"]').css({
-					opacity: 0.0001,
-				}).show();
+				// Set the size of the dialog div, and then animate expanding to fullscreen size
+				this.scope.closest('.cGalleryDialog_outer > div').css({
+					width: 'auto',
+					maxWidth: '100%',
+					position: 'fixed',
+					margin: 0,
+					top: dialogElemPos.absPos.top + 'px',
+					left: left + 'px',
+					right: viewportSize.width - ( left + dialogElem.width() ) + 'px'
+				}).animate({
+					left: '10px',
+					right: '10px',
+					bottom: '10px',
+					top: '10px',
+				}, function () {
 
+					// Now fade in the wrapper
+					wrapper.find('[data-role="images"]').css({
+						opacity: "0.0001",
+					}).show();
+
+					if( callback ){
+						callback();
+					}
+
+					wrapper.find('[data-role="images"]').animate({
+						opacity: "1"
+					});
+
+					$( document ).trigger( 'contentChange', [ wrapper ] );
+				});
+			}
+			else
+			{
 				if( callback ){
 					callback();
 				}
 
-				wrapper.find('[data-role="images"]').animate({
-					opacity: 1
-				});
-
 				$( document ).trigger( 'contentChange', [ wrapper ] );
-			});
+			}
 
 			// Positioning needed for upload step
-			this.scope.find('.cGalleryDialog').css({ minHeight: 0, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 });
-			this.scope.closest('.ipsDialog_content').css({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 });
+			this.scope.find('.cGalleryDialog').css({ minHeight: "0", position: 'absolute', top: "0", left: "0", right: "0", bottom: "0" });
+			this.scope.closest('.ipsDialog_content').css({ position: 'absolute', top: "0", left: "0", right: "0", bottom: "0" });
 
 			if( !wrapper.find('.cGallerySubmit_bottomBar').hasClass('ipsHide') ){
 				wrapper.find('.cGallerySubmit_bottomBar').removeClass('ipsHide').fadeIn();
@@ -1363,7 +1409,7 @@
 		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.image.js" javascript_type="controller" javascript_version="103038" javascript_position="1000150"><![CDATA[/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.image.js" javascript_type="controller" javascript_version="105100" javascript_position="1000150"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -1434,17 +1480,25 @@
 			// Add swipe left/right support
 			delete Hammer.defaults.cssProps.userSelect; // see https://github.com/hammerjs/hammer.js/issues/81
 			var mc = new Hammer( this.scope.find('.elGalleryHeader').get(0) ); // Can't touch this
+
+			var self = this;
 			mc.on( 'swipeleft', function( e ) {
-				$( document ).trigger('lightboxNextImage');
+				if( !self.scope.find('.cGalleryNote_editing').length )
+				{
+					$( document ).trigger('lightboxNextImage');
+				}
 			} );
 			mc.on( 'swiperight', function( e ) {
-				$( document ).trigger('lightboxPrevImage');
+				if( !self.scope.find('.cGalleryNote_editing').length )
+				{
+					$( document ).trigger('lightboxPrevImage');
+				}
 			} );
 
 			// Toggle document scrolling when dialogs open/close
 			var self = this;
 			$(document).on( 'hideDialog', function() {
-				if( self.scope.closest('#cLightbox').length )
+				if( self.scope.closest('#cLightbox').length && !ips.ui.dialog.hasOpenDialogs() )
 				{
 					$('body').addClass('ipsNoScroll');
 				}
@@ -1533,6 +1587,11 @@
 			// Track page view
 			ips.utils.analytics.trackPageView( state.data.realUrl );
 			
+			// If the request was in the lightbox but the lightbox is closed, we must have closed the lightbox but then hit 'back' so now we need to relaunch it
+			if( $('#cLightbox').length && !$('#cLightbox').is(':visible') ) {
+				$('#cLightbox').show();
+			}
+
 			// Scroll to the image but only if we're not in the lightbox
 			if( !$('#cLightbox').length || !$('#cLightbox').is(':visible') ) {
 				this._scrollPage();
@@ -1748,6 +1807,19 @@
 			if( !cacheOnly ){
 				this.cleanContents();
 				this._setImageLoading();
+
+				var urlToRequest = url;
+			}
+			else
+			{
+				// We need to add preload=1 to the 
+				if( url.match(/\?/) ) {
+					if( url.slice(-1) != '?' ){
+						var urlToRequest = url + '&preload=1';	
+					}				
+				} else {
+					var urlToRequest = url + '?preload=1';
+				}
 			}
 
 			// If this is a regular load, set to loading
@@ -1764,6 +1836,7 @@
 			// Already have cached data? Just show it.
 			if( self._cachedUrls[ url ] ){
 				self._updateImage( self._cachedUrls[ url ] );
+				self._markImageRead( url );
 				return;
 			}
 
@@ -1775,7 +1848,7 @@
 				this._ajaxObj = ajax;
 			}
 
-			ajax( url, {
+			ajax( urlToRequest, {
 				dataType: 'json'
 			} )
 				.done( function (response) {
@@ -1797,6 +1870,32 @@
 				});
 		},
 
+		/**
+		 * Mark an image read. When we fetch for caching we don't want the image marked as read, but when we move forward/back
+		 * to view the image in the lightbox, it should be marked at that point.
+		 *
+		 * @param 	{string}	url 	URL of new image to fetch
+		 * @returns {void}
+		 */
+		_markImageRead: function (url) {
+			var self = this;
+
+			if( url.match(/\?/) ) {
+				if( url.slice(-1) != '?' ){
+					url = url + '&do=markread';	
+				}				
+			} else {
+				url = url + '?do=markread';
+			}
+
+			ips.getAjax()( url, {
+				dataType: 'json'
+			} )
+				.done( function (response) {
+					Debug.log( "Marked read" );
+				});
+		},
+
 		/**
 		 * Handles a response from the server with new image info
 		 *
@@ -2008,7 +2107,7 @@
 			if( maxHeight < 400 ){
 				maxHeight = 400;
 			}
-console.dir(imageData);
+
 			if( imageData ){
 				imageData = $.parseJSON( imageData );
 				ratio = imageData['large'][ 0 ] / imageData['large'][ 1 ];
@@ -2018,7 +2117,7 @@ console.dir(imageData);
 					width: imageData['large'][0],
 					height: imageData['large'][1]
 				};
-console.dir(imageSize);
+
 				if( imageSize['width'] > maxWidth ){
 					imageSize['width'] = maxWidth;
 					imageSize['height'] = Math.round( imageSize['width'] / ratio );
@@ -2085,7 +2184,7 @@ console.dir(imageSize);
 		 }
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.note.js" javascript_type="controller" javascript_version="103038" javascript_position="1000150"><![CDATA[/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.note.js" javascript_type="controller" javascript_version="105100" javascript_position="1000150"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -2113,6 +2212,7 @@ console.dir(imageSize);
 			this.on( 'mousedown', '.cGalleryNote_note', this.mouseDown );
 			this.on( 'mouseenter', this.mouseEnter );
 			this.on( 'mouseleave', this.mouseLeave );
+
 			this.setup();
 		},
 
@@ -2124,7 +2224,8 @@ console.dir(imageSize);
 		setup: function () {
 			var self = this;
 
-			if( !_.isUndefined( this.scope.attr('data-editable') ) ){
+			// Force disable for mobile as the behavior isn't terribly good on a small device
+			if( !_.isUndefined( this.scope.attr('data-editable') ) && !ips.utils.responsive.currentIs('phone') ){
 				this._editable = true;
 			}
 
@@ -2155,7 +2256,7 @@ console.dir(imageSize);
 
 			this.scope.draggable('enable');
 
-			if( !$.trim( note ) ){
+			if( !note.trim() ){
 				return;
 			}
 			
@@ -2262,7 +2363,7 @@ console.dir(imageSize);
 		 * @returns {void}
 		 */
 		mouseDown: function () {
-			this.scope.draggable('disable');
+			// this.scope.draggable('disable');
 		},
 
 		/**
@@ -2276,6 +2377,12 @@ console.dir(imageSize);
 				return;
 			}
 
+			if( this._editing === true )
+			{
+				this.scope.find('.cGalleryNote_note > div textarea').focus();
+				return;
+			}
+
 			this._editing = true;
 
 			this.scope
@@ -2477,6 +2584,34 @@ console.dir(imageSize);
 		_updatePosition: function () {
 			var self = this;
 
+			// If the note block is now out of view, flip it to the other side
+			var parent = this.scope.closest('.cGalleryViewImage');
+			var notePos = this.scope.position();
+
+			var posLeft = this.scope.find('.cGalleryNote_note').css('left');
+			var posRight = this.scope.find('.cGalleryNote_note').css('right');
+
+			// If the text box is on the right side, and is now past the boundary of the image, flip it to the left side
+			if( parseInt( posLeft ) > 0 ) {
+				if( notePos['left'] + parseInt( this.scope.width() ) + parseInt( this.scope.find('.cGalleryNote_note').width() ) > parent.width() ) {
+					// But don't bother doing it if it will just be off the other side now
+					if( notePos['left'] - parseInt( this.scope.find('.cGalleryNote_note').width() ) > 0 ) {
+						this.scope.find('.cGalleryNote_note').css( 'left', posRight );
+						this.scope.find('.cGalleryNote_note').css( 'right', posLeft );
+					}
+				}
+			}
+			else
+			{
+				if( notePos['left'] - parseInt( this.scope.find('.cGalleryNote_note').width() ) < 0 ) {
+					// Don't flip if it will be off the other side now
+					if( notePos['left'] + parseInt( this.scope.width() ) + parseInt( this.scope.find('.cGalleryNote_note').width() ) < parent.width() ) {
+						this.scope.find('.cGalleryNote_note').css( 'left', posRight );
+						this.scope.find('.cGalleryNote_note').css( 'right', posLeft );
+					}
+				}
+			}
+
 			// If this is a new note, we don't want to update the position remotely yet.
 			// We'll only do that once the note text is saved for the first time.
 			if( this.scope.attr('data-noteID') == 'new' ){
@@ -2515,7 +2650,7 @@ console.dir(imageSize);
 		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.notes.js" javascript_type="controller" javascript_version="103038" javascript_position="1000150"><![CDATA[/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.notes.js" javascript_type="controller" javascript_version="105100" javascript_position="1000150"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -2598,7 +2733,7 @@ console.dir(imageSize);
 		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.browse.js" javascript_type="template" javascript_version="103038" javascript_position="1000050"><![CDATA[ips.templates.set('gallery.patchwork.indexItem', " \
+ <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.browse.js" javascript_type="template" javascript_version="105100" javascript_position="1000050"><![CDATA[ips.templates.set('gallery.patchwork.indexItem', " \
 	{{#showThumb}}\
 		<span class='cGalleryPatchwork_item' style='width: {{dims.width}}px; height: {{dims.height}}px; margin: {{dims.margin}}px {{dims.marginRight}}px {{dims.margin}}px {{dims.marginLeft}}px'>\
 	{{/showThumb}}\
@@ -2606,7 +2741,14 @@ console.dir(imageSize);
 		<span class='cGalleryPatchwork_item ipsNoThumb ipsNoThumb_video' style='width: {{dims.width}}px; height: {{dims.height}}px; margin: {{dims.margin}}px {{dims.marginRight}}px {{dims.margin}}px {{dims.marginLeft}}px'>\
 	{{/showThumb}}\
 			<a data-imageLightbox title='{{image.caption}}' href='{{image.url}}'>\
-				{{#showThumb}}<img src='{{image.src}}' alt='{{image.caption}}' class='cGalleryPatchwork_image'>{{/showThumb}}\
+				{{#showThumb}}\
+					{{#lazyLoad}}\
+						<img src='{{blankImg}}' data-src='{{image.src}}' data-ratio='{{dims.ratio}}' alt='{{image.caption}}' class='cGalleryPatchwork_image'>\
+					{{/lazyLoad}}\
+					{{^lazyLoad}}\
+						<img src='{{image.src}}' data-ratio='{{dims.ratio}}' alt='{{image.caption}}' class='cGalleryPatchwork_image'>\
+					{{/lazyLoad}}\
+				{{/showThumb}}\
 				<div class='ipsPhotoPanel ipsPhotoPanel_mini'>\
 					<img src='{{image.author.photo}}' class='ipsUserPhoto ipsUserPhoto_mini'>\
 					<div>\
@@ -2614,9 +2756,32 @@ console.dir(imageSize);
 						<span class='ipsType_small ipsTruncate ipsTruncate_line'>{{#lang}}in{{/lang}} {{image.container}}</span>\
 					</div>\
 				</div>\
-				{{#image.allowComments}}\
-					<span class='cGalleryPatchwork_comments' data-commentCount='{{image.comments}}'><i class='fa fa-comment'></i> {{image.comments}}</span>\
-				{{/image.allowComments}}\
+				<ul class='ipsList_inline cGalleryPatchwork_stats'>\
+					{{#image.unread}}\
+						<li class='ipsPos_left'>\
+							<span class='ipsItemStatus ipsItemStatus_small' data-ipsTooltip title='{{image.unread}}'><i class='fa fa-circle'></i></span>\
+						</li>\
+					{{/image.unread}}\
+					{{#image.hasState}}\
+						<li class='ipsPos_left'>\
+							{{#image.state.hidden}}\
+								<span class='ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning' data-ipsTooltip title='{{#lang}}hidden{{/lang}}'><i class='fa fa-eye-slash'></i></span>\
+							{{/image.state.hidden}}\
+							{{#image.state.pending}}\
+								<span class='ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning' data-ipsTooltip title='{{#lang}}pending{{/lang}}'><i class='fa fa-warning'></i></span>\
+							{{/image.state.pending}}\
+							{{#image.state.pinned}}\
+								<span class='ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive' data-ipsTooltip title='{{#lang}}pinned{{/lang}}'><i class='fa fa-thumb-tack'></i></span>\
+							{{/image.state.pinned}}\
+							{{#image.state.featured}}\
+								<span class='ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive' data-ipsTooltip title='{{#lang}}featured{{/lang}}'><i class='fa fa-star'></i></span>\
+							{{/image.state.featured}}\
+						</li>\
+					{{/image.hasState}}\
+					{{#image.allowComments}}\
+						<li class='ipsPos_right' data-commentCount='{{image.comments}}'><i class='fa fa-comment'></i> {{image.comments}}</li>\
+					{{/image.allowComments}}\
+				</ul>\
 			</a>\
 		</span>\
 ");
@@ -2629,7 +2794,14 @@ ips.templates.set('gallery.patchwork.tableItem', " \
 		<div data-imageID='{{image.id}}' class='cGalleryPatchwork_item ipsNoThumb ipsNoThumb_video' style='width: {{dims.width}}px; height: {{dims.height}}px; margin: {{dims.margin}}px {{dims.marginRight}}px {{dims.margin}}px {{dims.marginLeft}}px'>\
 	{{/showThumb}}\
 		<a data-imageLightbox title='{{image.caption}}' href='{{image.url}}'>\
-			{{#showThumb}}<img src='{{image.src}}' alt='{{image.caption}}' class='cGalleryPatchwork_image'>{{/showThumb}}\
+			{{#showThumb}}\
+				{{#lazyLoad}}\
+					<img src='{{blankImg}}' data-src='{{image.src}}' data-ratio='{{dims.ratio}}' alt='{{image.caption}}' class='cGalleryPatchwork_image'>\
+				{{/lazyLoad}}\
+				{{^lazyLoad}}\
+					<img src='{{image.src}}' data-ratio='{{dims.ratio}}' alt='{{image.caption}}' class='cGalleryPatchwork_image'>\
+				{{/lazyLoad}}\
+			{{/showThumb}}\
 			<div class='ipsPhotoPanel ipsPhotoPanel_mini'>\
 				<img src='{{image.author.photo}}' class='ipsUserPhoto ipsUserPhoto_mini'>\
 				<div>\
@@ -2676,7 +2848,7 @@ ips.templates.set('gallery.lightbox.wrapper', " \
 		<div class='cLightboxBack'></div>\
 	</div>\
 ");]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.submit.js" javascript_type="template" javascript_version="103038" javascript_position="1000050"><![CDATA[ips.templates.set('gallery.submit.imageItem', " \
+ <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.submit.js" javascript_type="template" javascript_version="105100" javascript_position="1000050"><![CDATA[ips.templates.set('gallery.submit.imageItem', " \
 	<div class='ipsAttach ipsImageAttach ipsPad_half ipsAreaBackground_light {{#done}}ipsAttach_done{{/done}}' id='{{id}}' data-role='file' data-fileid='{{id}}' data-fullsizeurl='{{imagesrc}}' data-thumbnailurl='{{thumbnail}}' data-isImage='1'>\
 		<ul class='ipsList_inline ipsImageAttach_controls'>\
 			<li data-role='insert' {{#insertable}}style='display: none'{{/insertable}}><a href='#' data-action='insertFile' class='ipsAttach_selection' data-ipsTooltip title='{{#lang}}insertIntoPost{{/lang}}'><i class='fa fa-plus'></i></a></li>\
@@ -2686,7 +2858,7 @@ ips.templates.set('gallery.lightbox.wrapper', " \
 				<a href='#' data-role='deleteFile' class='ipsButton ipsButton_verySmall ipsButton_light' data-ipsTooltip title='{{#lang}}attachRemove{{/lang}}'><i class='fa fa-trash-o'></i></a>\
 			</li>\
 		</ul>\
-		<div class='ipsImageAttach_thumb ipsType_center' data-role='preview' data-grid-ratio='65' data-action='insertFile' {{#thumb}}style='background-image: url( {{thumbnail}} )'{{/thumb}}>\
+		<div class='ipsImageAttach_thumb ipsType_center' data-role='preview' data-grid-ratio='65' data-action='insertFile' {{#thumb}}style='background-image: url( \"{{thumbnail}}\" )'{{/thumb}}>\
 			{{#status}}\
 				<span class='ipsImageAttach_status ipsType_light' data-role='status'>{{{status}}}</span>\
 				<span class='ipsAttachment_progress'><span data-role='progressbar'></span></span>\
@@ -2703,7 +2875,7 @@ ips.templates.set('gallery.lightbox.wrapper', " \
 ips.templates.set('gallery.submit.imageItemWrapper', " \
 	<div class='cGallerySubmit_fileList'>{{{content}}}</div>\
 ");]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.view.js" javascript_type="template" javascript_version="103038" javascript_position="1000050"><![CDATA[ips.templates.set('gallery.notes.wrapper', " \
+ <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.view.js" javascript_type="template" javascript_version="105100" javascript_position="1000050"><![CDATA[ips.templates.set('gallery.notes.wrapper', " \
 <div class='cGalleryNote' data-controller='gallery.front.view.note' data-noteID='{{id}}' data-note=\"{{note}}\" {{#editable}}data-editable{{/editable}} data-posLeft='{{left}}' data-posTop='{{top}}' data-dimWidth='{{width}}' data-dimHeight='{{height}}'>\
 	<div class='cGalleryNote_border'></div>\
 	<div class='cGalleryNote_note' style='display: none'>\
@@ -2733,9 +2905,11 @@ controllers</order>
 jquery
 mustache
 jstz
+IntersectionObserver
 Debug.js
 app.js</order>
  <order app="global" path="/dev/js//library//jquery">jquery.js
+jquery-migrate.js
 jquery.history.js
 jquery.transform.js</order>
  <order app="global" path="/dev/js//library//linkify">linkify.min.js