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

});
4
  • Use mixins approach. Commented Dec 29, 2017 at 2:40
  • Tried mixins way but i got error TypeError: base is not a constructor. See my update
    – mrtuvn
    Commented Dec 29, 2017 at 2:53
  • Wait ... let me check again. Commented Dec 29, 2017 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
    Commented Dec 29, 2017 at 8:24

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.