how to extend default javascript

Question

I try to extend standard magento javascript configuration but I just get nothing.

I'm following this: http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/custom_js.html and this: http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/widgets/widget_calendar.html

To do so in my theme I placed a requirejs-config.js like so:

var config = {
    map: {
        '*' : {
            'myScript1' : 'js/my_script_1',
            'mage/calendar' : 'js/calendar',
            'mage/tabs' : 'js/tabs'
        }
    }
};

my_script_1.js looks roughly like so:

define(['jquery','mage/tabs', 'domReady!'], function ($) {
    $.fn.myFunction = function () {
        // some code ...
    }
});

I can then access that function in my product_page.phtml like so:

<script>// <![CDATA[
    require([
        'jquery',
        'scrollToTarget',
        'domReady!'
    ], function ($) {
        $('.foo').myFunction();
    });
    // ]]>
</script>

This works well. Now I want to do roughly the same in the other two files. But here I want to extend existing functionality.

Here is the js/calendar.js:

define([
    'jquery',
    'jquery/ui',
    'mage/calendar'
], function($){

    $.widget('<vendor>.calendar', $.mage.calendar, {
        calendarConfig: {
            showWeek: false
        }
    });

    return $.<vendor>.calendar;
});

Here is the js/tabs.js:

define([
    'jquery',
    'jquery/ui',
    'mage/tabs'
], function($){

    $.widget('<vendor>.tabs', $.mage.calendar, {
        /**
         * Instantiate collapsible
         * @param element
         * @param index
         * @param active
         * @param disabled
         * @private
         */
        _instantiateCollapsible: function (element, index, active, disabled)   {
          console.log('fooooo');
        },

        _myFunction123: function (foo) {
            return foo;
        }
    });

    return $.<vendor>.tabs;
});

But both extensions (calendar and tabs) don't work. The calendar still shows the weeks and that console.log() in tabs.js is never triggered.

What am I doing wrong here? How do I have to extend this?

EDIT:

So at least the calendar config can be changed like this. Overwrite app/design/frontend/<vendor>/<theme>/Magento_Theme/templates/js/calendar.phtml with the original files from Magento itself and change options there. But this does not reflect the way described in the docs.

Answer 1

Widgets

If files are component or widget you can use following way to extend

Extend mage/tabs (original widget of magento)
File locate in lib/web/mage/tabs

"map": {
      '*': {
          "tabs": "js/mage/tabs", //Everytime tabs called magento will get file in your theme  
      }
},

Now in your js be extended

define([
"jquery",
"jquery/ui",
"mage/tabs" <== widget will use for extend
], function($){
  "use strict";

  $.widget("yournamespace.tabs", $.mage.tabs, {

    /**
     * {@inheritdoc}
     */
    _create : function () {
        this._super(); // Use super method for call parent functions 

    },


   });

  return $.yournamespace.tabs;
});

Components

Example: Magento_Customer/js/view/authentication-popup.js Used for login popup when customer checkout

define(
[
    'jquery',
    'ko',
    'Magento_Customer/js/view/authentication-popup'
],
function ($, ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/authentication-popup'
        },

        /**
         * Init
         */
        initialize: function () {
            var self = this;
            this._super();
            // Your custom code here
        }
    });
}
);