I want to modify mediabrowser
widget of magento
Location that implement widget in
vendor/magento/module-cms/view/adminhtml/templates/browser/content.phtml
browser widget stay in
lib/web/mage/adminhtml/browser.js. I want to add id variable to id element such as "#new_folder" "delete_folder". It will be "#id_new_folder"..
_selectNode: function (event, data) {
var node = data.rslt.obj.data('node');
var my_id = this.options.ID; <== pass my var here
this.activeNode = node;
this.element.find('#'+my_id+'_delete_files, #insert_files').toggleClass(this.options.hidden, true);
this.element.find('#contents').toggleClass(this.options.hidden, false);
this.element.find('#delete_folder').toggleClass(this.options.hidden, node.id == 'root'); //eslint-disable-line eqeqeq
this.element.find('#content_header_text').html(node.id == 'root' ? this.headerText : node.text); //eslint-disable-line eqeqeq
this.drawBreadcrumbs(data);
this.loadFileList(node);
},
I am a bit confuse to choose which one is a better way to create my custom widget
Approach 1
create my new widget with same behavior with browser
So in template i will try to call data-mage-init="customMediaBrowser"
map: {
"*": {
"customMediaBrowser" : "InsideMyModule/js/mage/adminhtml/browser",
}
},
Approach 2
Use feature "mixins" of magento
config: {
mixins: {
'mage/adminhtml/browser': {
'Module_Name/js/mage/adminhtml/browser': true
}
}
},
UPDATE
Here is my content mixins js. Current using magento 2.2.0 with jquery ui 1.9.2
define([
'jquery',
'mage/translate'
], function ($) {
'use strict';
return function (Browser) {
$.widget('mage.mediabrowser', Browser, {
/**
* {@inheritDoc}
*/
_create: function () {
this._super();
console.log('Custom module js widget is triggered!');
}
});
Browser.mediabrowser = $.mage.mediabrowser;
return Browser;
};
});