Mixin for UI?

[DawPi]

Hello,

we have mixins for controllers:

 

But what about mixins for UI? For example how can I change that part from a ips.ui.uploader.js:

		/**
		 * Sets up this instance
		 *
		 * @returns 	{void}
		 */
		var init = function () {
			
			uploaderID = $( elem ).identify().attr('id');

			if( options.listContainer ){
				listContainer = $( options.listContainer );
			} else if( $( elem ).find('[data-role="fileList"]').length ) {
				listContainer = $( elem ).find('[data-role="fileList"]');
			} else {
				listContainer = $( elem );
			}

			// Do we need to insert a wrapper though?
			if( ips.templates.get( options.template + 'Wrapper' ) ){
				listContainer.prepend( ips.templates.render( options.template + 'Wrapper' ) );

				// Move any existing items
				var firstItem = listContainer.children().first();
				firstItem.append( listContainer.children().not( firstItem ) );

				// Set listContainer to the wrapper
				listContainer = firstItem;

				// And initialize any widgets we might have
				$( document ).trigger( 'contentChange', [ listContainer.parent() ] );
			}

			// Add document events
			$( document ).on( 'addUploaderFile', _addUploaderFile );
			$( document ).on( 'removeAllFiles', _removeAllFiles );

			// Any files to start with?
			if( options.existingFiles ){
				try {
					var files = $.parseJSON( options.existingFiles );

					if( files.length ){
						_buildExistingFiles( files );
					}
				} catch (err) {
					Debug.error("Couldn't build existing files: " + err );
				}
			}

			if( _supportsDraggable() ){
				$( elem ).find('.ipsAttachment_supportDrag')
					.show()
				.end()
				.find('.ipsAttachment_nonDrag')
					.hide();
			}

			// Load the appropriate files
			var load = ['core/interface/plupload/plupload.full.min.js'];

			if( !ips.getSetting('useCompiledFiles') ){
				load = ['core/interface/plupload/moxie.js', 'core/interface/plupload/plupload.dev.js'];
			}

			ips.loader.get( load ).then( function () {
				_setUpUploader();
				_initUploader();
				_postInitEvents();
				_setUpFormEvents();
			});
		},

And add something after:

_setUpFormEvents();

 

[teraßyte]

The ips.ui.uploader.js file is a module, and there's no option to extend modules in the framework as far as I know.

Let's hope something about it changed in v5. 🙄

 

Your only option currently is to create a separate module (with a different/similar name), change only the code you need, and add the new module to the HTML.

Edited March 14 by teraßyte

[DawPi]

2 minutes ago, teraßyte said:

Your only option currently is to create a separate module (with a different/similar name), change only the code you need, and add the new module to the HTML.

What kind of module you're talking about?

[teraßyte]

From the js file (line 61):

ips.createModule('ips.ui.uploader', function(){

 

To create a new one you need to copy/paste the file in your app, change the name, update the names/references, edit the code you need, and call the new module's name in the HTML.

 

This is the code that registers the module (I'll use the dialog one which is more used):

		ips.ui.registerWidget('dialog', ips.ui.dialog, [ 
			'url', 'modal', 'draggable', 'size', 'title', 'close', 'fixed', 'destructOnClose', 'extraClass',
			'callback', 'content', 'forceReload' , 'flashMessage', 'flashMessageTimeout', 'flashMessageEscape', 'showFrom', 'remoteVerify', 'remoteSubmit'
		], { lazyLoad: true, lazyEvents: 'click' } );

You need to change the dialog name (maybe dialogbis) which registers the widget. All the other values in the array are the options you can use inline.

 

This is how the code would be with the original dialog module:

<div data-ipsDialog data-ipsDialog-title="TITLE" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="ITEM SUBMITTED">

This is how it would look with your updated dialogbis module:

<div data-ipsDialogbis data-ipsDialogbis-title="TITLE" data-ipsDialogbis-remoteSubmit data-ipsDialogbis-flashMessage="ITEM SUBMITTED">

 

[DawPi]

It won't work in my situation I affraid. I needed to change that part in the uploader but... It's done. I've added custom script code before body end:

<script defer>
$(document).ready(function() {
  (... rest of the code ....)

 

But thanks for your efforts!