1

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;
    };

});
  • Use mixins approach. – Khoa TruongDinh Dec 29 '17 at 2:40
  • Tried mixins way but i got error TypeError: base is not a constructor. See my update – mrtuvn Dec 29 '17 at 2:53
  • Wait ... let me check again. – Khoa TruongDinh Dec 29 '17 at 3:02
  • I think we are going wrong way. Modify core widget is very bad idea Should revert back all stuff. One more think , I can't set mixins in browser widget, maybe i am doing it wrong. Mixins method maybe only work for components and widget object returned – mrtuvn Dec 29 '17 at 8:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.