Version 5.0.0 beta 1

applications/gallery/data/javascript.xml

@@ -1,118 +1,26 @@
 <?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.carousel.js" javascript_type="controller" javascript_version="107827" javascript_position="1000200"><![CDATA[/**
- * Invision Community
- * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
- *
- * ips.browse.carousel.js - Controller for Gallery carousel
- *
- * Author: Ehren Harber
- */
-;( function(){
-	"use strict";
-
-	ips.controller.register('gallery.front.browse.carousel', {
-		
-		initialize () {
-
-			this.carouselControls = this.scope[0].closest('[data-carousel-controls]');
-			this.carousel = document.getElementById(this.carouselControls.dataset.carouselControls);
-
-			if(this.carouselControls && this.carousel.scrollWidth > this.carousel.clientWidth){
-				this.showArrows();
-			} else {
-				return;
-			}
-
-			this.buttons = this.scope[0].querySelectorAll('[data-carousel-arrow]');
-			this.buttons.forEach(button => {
-				button.addEventListener('click', this.scrollPanels);
-			});
-
-		},
-
-		showArrows: function(){
-
-			this.carouselControls.hidden = false;
-
-		},
-
-		scrollPanels: function(ev) {
-
-			let carouselControls = this.closest('[data-carousel-controls]'),
-				carousel = document.getElementById(carouselControls.dataset.carouselControls),
-				direction = this.dataset.carouselArrow,
-				currentScroll = carousel.scrollLeft,
-			 	scrollByVar = getComputedStyle(carousel).getPropertyValue('--carousel--scroll'),
-			 	carouselChildWidth = carousel.firstElementChild.offsetWidth,
-			 	scrollBy = scrollByVar * (carouselChildWidth);
-
-			if (direction == 'prev'){
-			 	scrollBy = -scrollBy;
-			}
-			if (currentScroll == '0' && direction == 'prev'){
-				carousel.scrollLeft = carousel.scrollWidth;
-			} else if ((currentScroll == carousel.scrollWidth - carousel.clientWidth) && (direction == 'next')){
-				carousel.scrollLeft = 0;
-			} else {
-				carousel.scrollLeft = currentScroll + scrollBy;
-			}
-		},
-
-	});
-}());]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/browse" javascript_name="ips.browse.list.js" javascript_type="controller" javascript_version="107827" javascript_position="1000200">/**
- * Invision Community
- * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
- *
- * ips.browse.list.js - Gallery browse list controller
- *
- * Author: Rikki Tissier
- */
-;( function($, _, undefined){
-	&quot;use strict&quot;;
-
-	ips.controller.register('gallery.front.browse.list', {
-
-		initialize: function () {
-			this.on( 'change', '[data-role=&quot;moderation&quot;]', this.selectImage );
-		},
-
-		/**
-		 * Toggles classes when the moderation checkbox is checked
-		 *
-		 * @param	{event} 	e 		Event object
-		 * @returns {void}
-		 */
-		selectImage: function (e) {
-			var row = $( e.currentTarget ).closest('.cGalleryImageItem');
-			row.toggleClass( 'cGalleryImageItem_selected', $( e.currentTarget ).is(':checked') );
-		}
-	});
-}(jQuery, _));</file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/global" javascript_name="ips.global.nsfw.js" javascript_type="controller" javascript_version="107827" javascript_position="1000250">;( function($, _, undefined){
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/global" javascript_name="ips.global.nsfw.js" javascript_type="controller" javascript_version="5000026" javascript_position="1000200">;( function($, _, undefined){
     &quot;use strict&quot;;
 
     ips.controller.register('gallery.front.global.nsfw', {
 
         initialize () {
-            this.on( 'click', '.ipsImageBlock__nsfw button', this.removeOverlays );
+            this.on( 'click', '.ipsNsfwOverlay button', this.removeOverlays );
         },
 
         removeOverlays( e ) {
-            e.preventDefault();
-
-            var expires = new Date();
+            let expires = new Date();
             expires.setDate( expires.getDate() + 365 );
             ips.utils.cookie.set( 'nsfwImageOptIn', true, expires.toUTCString() );
 
-            $('.ipsImageBlock__nsfw').fadeOut(500, function() { this.remove() });
+            $('.ipsNsfwOverlay').fadeOut(500, function() { this.remove() });
         },
 
     });
 
 }(jQuery, _));</file>
- <file javascript_app="gallery" javascript_location="admin" javascript_path="controllers/settings" javascript_name="ips.settings.settings.js" javascript_type="controller" javascript_version="107827" 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="5000026" javascript_position="1000050">/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -169,7 +77,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="107827" 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="5000026" javascript_position="1000100"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -246,41 +154,8 @@
 		 * @returns {void}
 		 */
 		_resizeFormDiv: function (form) {
-			this.scope.find('[data-role="chooseAlbumType"]').hide();
-			var self = this;
-
-			var resize = function (animate) {
-				var height = form.innerHeight() + 130;
-				var submitHeight = form.find('.cGalleryDialog_submitBar').height();
-				
-				if( animate ){
-					self.scope.closest('.cGalleryDialog').animate({
-						minHeight: ( height + submitHeight ) + 'px'
-					});
-				} else {
-					self.scope.closest('.cGalleryDialog').css({
-						minHeight: ( height + submitHeight ) + 'px'
-					});
-				}
-			}
-
-			form.show().css({
-				opacity: "0.001"
-			});
-
-			if( this.scope.closest('.ipsDialog').length ){
-				resize(true);
-			}
-
-			form.animate({
-				opacity: "1"
-			}, function () {
-				if( self.scope.closest('.ipsDialog').length ){
-					self._resizeTimer = setInterval( function () {
-						resize(false);
-					}, 500);
-				}
-			});
+			this.scope.find('[data-role="chooseAlbumType"]').attr("hidden", "");
+			form.removeAttr("hidden");
 		},
 
 		/**
@@ -369,7 +244,7 @@
 	});
 }(jQuery, _));
 ]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.existingAlbums.js" javascript_type="controller" javascript_version="107827" javascript_position="1000100"><![CDATA[/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.existingAlbums.js" javascript_type="controller" javascript_version="5000026" javascript_position="1000100"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -388,18 +263,7 @@
 		 */
 		initialize: function () {
 			this.on( 'click', '#elGallerySubmit_albumChooser > li', this.clickAlbum );
-			this._checkSelected();
-		},
-
-		/**
-		 * Event handler for clicking an album entry
-		 *
-		 * @param	{event} 	e 	Event object
-		 * @returns {void}
-		 */
-		clickAlbum: function (e) {
-			$( e.currentTarget ).find('input[type="radio"]').prop( 'checked', true );
-			this._checkSelected();
+			this.clickAlbum();
 		},
 
 		/**
@@ -407,16 +271,16 @@
 		 *
 		 * @returns {void}
 		 */
-		_checkSelected: function () {
-			if( this.scope.find('input[name="existing_album"]:checked').length ){
-				this.scope.find('button[type="submit"]').prop( 'disabled', false );
+		clickAlbum: function (e) {
+			if( this.scope.find('[name="existing_album"]:checked').length ){
+				this.scope.find('[type="submit"]').prop( 'disabled', false );
 			} else {
-				this.scope.find('button[type="submit"]').prop( 'disabled', true );
+				this.scope.find('[type="submit"]').prop( 'disabled', true );
 			}
 		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/submit" javascript_name="ips.submit.uploadImages.js" javascript_type="controller" javascript_version="107827" 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="5000026" javascript_position="1000100"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -463,8 +327,8 @@
 			$('.cGallerySubmit_bottomBar').removeClass('ipsHide');
 
 			//  We want to move the allowed types of files span
-			$('[data-role="allowedTypes"]').html( this.scope.find('span.ipsType_light.ipsType_small').html() );
-			this.scope.find('span.ipsType_light.ipsType_small').remove();
+			$('[data-role="allowedTypes"]').html( this.scope.find('span.i-color_soft.i-font-size_-2').html() );
+			this.scope.find('span.i-color_soft.i-font-size_-2').remove();
 
 			//  And change the uploader message
 			this.scope.find('.ipsAttachment_supportDrag').html( ips.getString('uploader_add_images') );
@@ -547,7 +411,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="107827" 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="5000026" javascript_position="1000100"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -585,6 +449,7 @@
 			this.on( 'click', '[data-role="imageDescriptionUseEditor"]', this.setUpImageDescriptionRich );
 			this.on( 'click', '[data-role="imageDescriptionUseTextarea"]', this.setUpImageDescriptionPlain );
 			this.on( 'click', '[data-role="addCopyrightCredit"]', this.showCopyrightCredit );
+			this.on( 'click', '[data-role="saveDetails"]', this.saveDetails );
 			this.on( 'click', '[data-role="saveInfo"]', this.saveInfo );
 
 			// Handle events from uploader
@@ -607,8 +472,8 @@
 		 * @returns {void}
 		 */
 		setup: function () {
-			// On initial load, destroy the ckeditor object as it will be recreated for each individual form
-			ips.ui.editor.destruct( this.scope.find('[data-ipseditor]') );
+			// On initial load, destroy the tiptap object as it will be recreated for each individual form
+			ips.ui.editorv5.destruct( this.scope.find('[data-ipseditorv5]') );
 
 			if( this.scope.find('.cGalleryDialog_imageForm').is(':visible') ){
 				this._enlargeUploadStep();
@@ -707,6 +572,38 @@
 			$(e.currentTarget).trigger('closeMenu');
 		},
 
+		/**
+		 * Mobile-specific functionality for 'save' button
+		 *
+		 * @returns {void}
+		 */
+		saveDetails: function (e) {
+			if( e ){
+				e.preventDefault();
+			}
+
+			this._markActiveImageAsSaved();
+
+			// Show and then hide a 'saved' message
+			$(e.currentTarget).next('[data-role="savedMessage"]').fadeIn();
+			setTimeout( function () {
+				$(e.currentTarget).next('[data-role="savedMessage"]').fadeOut();
+			}, 2000 );
+
+			// Hide any error messages
+			if( e ){
+				$( e.currentTarget ).closest('.cGallerySubmit_details').find('[data-errorField]').hide();
+			}
+
+			// Mobile-only behavior
+			if( ips.utils.responsive.enabled() && ips.utils.responsive.currentIs('phone') ){
+				// Fade out details form
+				this._toggleDetailsPanelMobile(false);
+				// Remove active selection styles
+				this.scope.find('.cGallerySubmit_activeFile').removeClass('cGallerySubmit_activeFile');
+			}
+		},
+
 		/**
 		 * Confirm the user wants to close the dialog
 		 *
@@ -753,33 +650,22 @@
 		 * @returns {void}
 		 */
 		setUpImageDetailsForm: function (e) {
-
 			// Remove selection from all other files
 			this.scope.find('.cGallerySubmit_activeFile').removeClass('cGallerySubmit_activeFile');
 			$( e.currentTarget ).addClass('cGallerySubmit_activeFile');
-			let imageId;
-			let tempId;
-			const detailsPanel = this.scope.find('[data-role="imageDetails"]');
 
 			// Get the image ID first
-			if ($(e.currentTarget).attr('data-uploading-temp-id')) {
-				// if the details pane was opened before the fileid was set, we use the existing temp id
-				imageId = $(e.currentTarget).attr('data-uploading-temp-id')
-			} else if( $( e.currentTarget ).attr('data-fileid').startsWith('o_') ) {
-				imageId = $('input[name="images_existing\\[' + $( e.currentTarget ).attr('data-fileid') + '\\]"').val();
-				if (!imageId) {
-					imageId = $(e.currentTarget).attr('data-fileid');
-					$(e.currentTarget).attr('data-uploading-temp-id', $(e.currentTarget).attr('data-fileid'))
-				}
-			} else if ( $(e.currentTarget).attr('data-fileid') && parseInt($(e.currentTarget).attr('data-fileid')) ) {
-				imageId = $( e.currentTarget ).attr('data-fileid');
-			} else {
-				// in this case, we assume it's still uploading
-				tempId = imageId = Math.round(Math.random() * Math.pow(2, 32)).toString(16)
-				$(e.currentTarget).attr('data-uploading-temp-id', imageId)
+			if( $( e.currentTarget ).attr('data-fileid').indexOf('o_') != -1 )
+			{
+				var imageId = $('input[name="images_existing\\[' + $( e.currentTarget ).attr('data-fileid') + '\\]"').val();
+			}
+			else
+			{
+				var imageId = $( e.currentTarget ).attr('data-fileid');
 			}
 
-			var imagePreview = $( e.currentTarget ).find('.ipsImage').attr('src');
+			var imagePreview = $( e.currentTarget ).find('[data-role="preview"] img').attr('src');
+			var detailsPanel = this.scope.find('[data-role="imageDetails"]');
 
 			// Hide our existing form, if any
 			detailsPanel.find('.cGallerySubmit_details, [data-role="submitHelp"]').hide();
@@ -793,7 +679,6 @@
 				}
 			} else {
 				// Otherwise, clone our existing form to use
-				$('[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>";
 
@@ -807,25 +692,17 @@
 				var filenameWithoutExt = filename.replace(/\.[^/.]+$/, '');
 				$('#elInput_image_title_' + imageId ).val( filenameWithoutExt );
 
-				// Fix yes/no fields as they will reinitialize and break
-				detailsPanel.find('> form #image_details_' + imageId ).find('.ipsToggle').remove();
 
 				if( !_.isUndefined( imagePreview ) ){
 					imageForm
 						.find('.cGallerySubmit_preview')
-							.removeClass('ipsBox_transparent')
-							.removeClass('ipsNoThumb')
-							.removeClass('ipsNoThumb_video')
-							.html( $("<img class='ipsImage'/>").attr('src', imagePreview ) )
+							.html("<img src='" + imagePreview + "' alt='' />")
 							.show();
 				}
 				else {
 					imageForm
 						.find('.cGallerySubmit_preview')
-							.addClass('ipsBox_transparent')
-							.addClass('ipsNoThumb')
-							.addClass('ipsNoThumb_video')
-							.html("")
+							.html("<i></i>")
 							.show();
 				}
 
@@ -898,16 +775,16 @@
 		 * @returns {void}
 		 */
 		setUpImageDescriptionRich: function(e) {
-			var currentDescription = $( e.currentTarget ).closest('[data-role="imageDescriptionTextarea"]')
-				.find( '> textarea' )
+			const currentDescription = $(e.currentTarget).closest('[data-role="imageDescriptionTextarea"]')
+				.find('> textarea')
 				.val()
 				.trim();
 			if( currentDescription.length ){
-				var editorObj = ips.ui.editor.getObj( $( e.currentTarget ).closest('[data-role="imageDescriptionTextarea"]')
+				const editorObj = ips.ui.editorv5.getObj($(e.currentTarget).closest('[data-role="imageDescriptionTextarea"]')
 					.prev('[data-role="imageDescriptionEditor"]')
-					.find('[data-ipseditor]') );
-				var editorInstance = editorObj.getInstance();
-				editorInstance.setData( currentDescription );
+					.find('[data-ipseditorv5]'));
+				const editorInstance = editorObj.getInstance();
+				editorInstance.commands.setContent( currentDescription );
 				$( e.currentTarget ).closest('[data-role="imageDescriptionTextarea"]')
 					.find( '> textarea' )
 					.val('');
@@ -927,9 +804,9 @@
 		 * @returns {void}
 		 */
 		setUpImageDescriptionPlain: function (e) {
-			var editorObj = ips.ui.editor.getObj( $( e.currentTarget ).closest('[data-role="imageDescriptionEditor"]')
-				.find('[data-ipseditor]') );
-			var currentDescription = $( editorObj.getInstance().getData() ).text()
+			const editorObj = ips.ui.editorv5.getObj($(e.currentTarget).closest('[data-role="imageDescriptionEditor"]')
+				.find('[data-ipseditorv5]'));
+			const currentDescription = $(editorObj.getInstance().getHTML()).text()
 				.trim();
 			if( currentDescription.length ){
 				$( e.currentTarget ).closest('[data-role="imageDescriptionEditor"]')
@@ -980,12 +857,12 @@
 			// If we are submitting images, get the info we need
 			if( form.attr('id') == 'elGallerySubmit' ){
 				// Sync editor to its textarea
-				this.scope.find('[data-ipseditor]').each( function(){
+				this.scope.find('[data-ipseditorv5]').each( function(){
 					try {
-						var editorObj = ips.ui.editor.getObj( $( this ) );
+						var editorObj = ips.ui.editorv5.getObj( $( this ) );
 						var editorInstance = editorObj.getInstance();
 
-						$( this ).find('textarea[data-role="contentEditor"]').val( editorInstance.getData() );
+						$( this ).find('textarea[data-role="contentEditor"]').val( editorInstance.getHTML() );
 					} catch (err) {
 						Debug.error("Couldn't update textarea from editor");
 					}
@@ -1032,20 +909,7 @@
 				form.find('textarea[name="images_order"]').val( JSON.stringify( imageOrder ) );
 
 				// And get the individual image details and store in the submission
-				const tempIdMap = {}
-				form.find('[data-uploading-temp-id][data-fileid]').each(function() {
-					tempIdMap[$(this).attr('data-uploading-temp-id')] = $(this).attr('data-fileid');
-				})
-
-				form.find('textarea[name="images_info"]').val( JSON.stringify( $('#form_imageDetails').serializeArray().map(({name, value}) => {
-					for(const key in tempIdMap) {
-						if (name.includes(key)) {
-							name = name.replaceAll(key, tempIdMap[key])
-							break;
-						}
-					}
-					return {name, value}
-				}) ) );
+				form.find('textarea[name="images_info"]').val( JSON.stringify( $('#form_imageDetails').serializeArray() ) );
 
 				// Hide/disable some stuff
 				this.scope.find('[data-role="imageDetails"]').addClass('ipsHide');
@@ -1141,7 +1005,7 @@
 
 			if( response.imageTags && wrapper.find('.cGalleryTagsField').hasClass('ipsHide') ){
 				wrapper.find('.cGalleryTagsField').removeClass('ipsHide');
-				wrapper.find('.cGalleryTagsField .ipsFieldRow_content').append( response.imageTags );
+				wrapper.find('.cGalleryTagsField .ipsFieldRow__content').append( response.imageTags );
 			}
 
 			if( response.tagsField && wrapper.find('.cGalleryTagsButton').hasClass('ipsHide') )	{
@@ -1275,6 +1139,8 @@
 					wrapper.find('[data-role="images"]').animate({
 						opacity: "1"
 					});
+				
+					dialogElem.find('.ipsDialog_close').hide();
 
 					$( document ).trigger( 'contentChange', [ wrapper ] );
 				});
@@ -1300,7 +1166,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="107827" javascript_position="1000150">/**
+ <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.image.js" javascript_type="controller" javascript_version="5000026" javascript_position="1000150">/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -1442,7 +1308,7 @@
 		}
 	});
 }(jQuery, _));</file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.note.js" javascript_type="controller" javascript_version="107827" 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="5000026" javascript_position="1000150"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -1835,6 +1701,7 @@
 			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();
 
@@ -1861,6 +1728,7 @@
 					}
 				}
 			}
+			*/
 
 			// 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.
@@ -1900,7 +1768,7 @@
 		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="controllers/view" javascript_name="ips.view.notes.js" javascript_type="controller" javascript_version="107827" 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="5000026" javascript_position="1000150"><![CDATA[/**
  * Invision Community
  * (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
  *
@@ -1983,35 +1851,35 @@
 		}
 	});
 }(jQuery, _));]]></file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.browse.js" javascript_type="template" javascript_version="107827" javascript_position="1000050">// Empty</file>
- <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.submit.js" javascript_type="template" javascript_version="107827" 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>\
+ <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.browse.js" javascript_type="template" javascript_version="5000026" javascript_position="1000050">// Empty</file>
+ <file javascript_app="gallery" javascript_location="front" javascript_path="templates" javascript_name="ips.templates.submit.js" javascript_type="template" javascript_version="5000026" javascript_position="1000050"><![CDATA[ips.templates.set('gallery.submit.imageItem', " \
+	<div class='ipsAttach ipsImageAttach {{#done}}ipsAttach_done{{/done}}' id='{{id}}' data-role='file' data-fileid='{{id}}' data-fullsizeurl='{{imagesrc}}' data-thumbnailurl='{{thumbnail}}' data-isImage='1'>\
+		<ul class='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-solid fa-plus'></i></a></li>\
 			</li>\
-			<li class='ipsPos_right' {{#newUpload}}style='display: none'{{/newUpload}} data-role='deleteFileWrapper'>\
+			<li class='i-margin-start_auto' {{#newUpload}}style='display: none'{{/newUpload}} data-role='deleteFileWrapper'>\
 				<input type='hidden' name='{{field_name}}_keep[{{id}}]' value='1'>\
-				<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>\
+				<a href='#' data-role='deleteFile' class='ipsButton ipsButton--small ipsButton--soft' data-ipsTooltip title='{{#lang}}attachRemove{{/lang}}'><i class='fa-regular fa-trash-can'></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' 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>\
+				<span class='ipsImageAttach_status i-color_soft' data-role='status'>{{{status}}}</span>\
+				<meter class='ipsMeter' data-role='progressbar' max='100'></meter>\
 			{{/status}}\
 			{{#thumb}}\
 				{{{thumb}}}\
 			{{/thumb}}\
 		</div>\
-		<h2 class='ipsType_reset ipsAttach_title ipsType_medium ipsTruncate ipsTruncate_line cGalleryImageAttach_info' data-role='title'>{{title}}</h2>\
-		<p class='ipsType_light cGalleryImageAttach_info'>{{size}} {{#statusText}}&middot; <span data-role='status'>{{statusText}}</span>{{/statusText}}</p>\
+		<h2 class='ipsAttach_title ipsTruncate_1 cGalleryImageAttach_info' data-role='title'>{{title}}</h2>\
+		<p class='cGalleryImageAttach_info'>{{size}} {{#statusText}}&middot; <span data-role='status'>{{statusText}}</span>{{/statusText}}</p>\
 	</div>\
 ");
 
 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="107827" 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="5000026" 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'>\
@@ -2026,9 +1894,9 @@ ips.templates.set('gallery.notes.delete', " \
 
 ips.templates.set('gallery.notes.edit', " \
 	<textarea>{{note}}</textarea>\
-	<ul class='ipsList_inline'>\
-		<li><button data-action='save' class='ipsButton ipsButton_light ipsButton_verySmall'>{{#lang}}save_note{{/lang}}</button></li>\
-		<li><a href='#' data-action='cancel'>{{#lang}}cancel_note{{/lang}}</a></li>\
+	<ul class='ipsButtons i-justify-content_start i-margin-top_2'>\
+		<li><button data-action='save' class='ipsButton ipsButton--positive'>{{#lang}}save_note{{/lang}}</button></li>\
+		<li><a href='#' class='ipsButton ipsButton--inherit' data-action='cancel'>{{#lang}}cancel_note{{/lang}}</a></li>\
 	</ul>\
 ");]]></file>
  <order app="global" path="/dev/js//framework/">templates