How to run javascript only after the view has loaded in Odoo 10

Question

I installed web hide menu on https://www.odoo.com/apps/modules/8.0/web_menu_hide_8.0/

I modified to use it on Odoo 10, but the form will be adjusted to full width IF we press the hide button, if we were to change to another view after we pressed hide button, the form page will remain same as original (not full width).

So i need to adjust class "o_form_sheet" on form view after the page has been rendered. May i know how can i do that using javascript? Which class & method do i need to extend?

Answer 1

I'm going to answer my own question. After some researched, i found out the best option was to inherit ViewManager widget using load_views function.

var ViewManager = require('web.ViewManager');

ViewManager.include({
    load_views: function (load_fields) {
        var self = this;

        // Check if left menu visible
        var root=self.$el.parents();
        var visible=(root.find('.o_sub_menu').css('display') != 'none')
        if (visible) {
            // Show menu and resize form components to original values
            root.find('.o_form_sheet_bg').css('padding', self.sheetbg_padding);
            root.find('.o_form_sheet').css('max-width', self.sheetbg_maxwidth);
            root.find('.o_form_view div.oe_chatter').css('max-width', self.chatter_maxwidth);
        } else {
            // Hide menu and save original values
            self.sheetbg_padding=root.find('.o_form_sheet_bg').css('padding');
            root.find('.o_form_sheet_bg').css('padding', '16px');
            self.sheetbg_maxwidth=root.find('.o_form_sheet').css('max-width');
            root.find('.o_form_sheet').css('max-width', '100%');
            self.chatter_maxwidth=root.find('.o_form_view div.oe_chatter').css('max-width');
            root.find('.o_form_view div.oe_chatter').css('max-width','100%');
        }

        return this._super.apply(this, arguments, load_fields);
    },
});