Convert Decorator To Custom Widget In Dojo?

I would like to know if it possible to convert my decorator function in a custom widget (based on dijit/form/Select) in order to apply a monkey patch. Or do you know an alternative

Solution 1:

If you want to create a custom form select js widget in your project , without that decorator ,

For reusability Create JS file (by example app/path/MyCustomSelect.js ) , ( make sure you configuring your dojo to locate the created file see here in documentation ) , after importing the resource (AMD using define )create you widget and inherit the select using the declare class ,

at this stage , you have to ovveride the postCreate ( widget base lifcycle method , this is executed after instantiation and before rendring ) and then add you decorator code (by replacing select by the current scope this ) ,

Why using postcreate , beacause the widget is instantiated and all other referenced ressouce are created , so you can access the this.dropDown property , which is impossible in the constructor method , see the above link for better understand of widget lifecycle phases .

After your use the widget in your app , using require("location_to_your_jsile") , and use its refernce in the callback ,

So the MyCustomSelect.js file should looks like :

define([
  "dojo/_base/declare",
  'dijit/form/Select',
], function(declare, Select) {

  return declare(Select, {
    postCreate: function() {
      //make sur call this , like call super() ; inherited code will be executed this.inherited(arguments);

      console.log(this.dropDown);
      this.dropDown._onUpArrow = function() {
        this.focusPrev()
      }.bind(this.dropDown);

      this.dropDown._onDownArrow = function() {
        this.focusNext()
      }.bind(this.dropDown);

      this.dropDown.focusNext = function() {
        var focusNext = function() {
            var next = this._getNextFocusableChild(this.focusedChild, 1);
            this.focusChild(next);
            if (next.option.group) {
              focusNext();
            }
        }.bind(this);
        focusNext();
      }.bind(this.dropDown);

      this.dropDown.focusPrev = function() {
        var focusPrev = function() {
          var prev = this._getNextFocusableChild(this.focusedChild, -1);
          this.focusChild(prev);
          if (prev.option.group) {
            focusPrev();
          }
        }.bind(this);
        focusPrev();
      }.bind(this.dropDown);

      this.dropDown.onItemHover = function(item) {
        if (item.option.group) {
          item._set('hovering', false);
          return;
        }

        if (this.activated) {
          this.set('selected', item);
          if (item.popup && !item.disabled && !this.hover_timer) {
            this.hover_timer = this.defer(function() {
              this._openItemPopup(item);
            }, this.popupDelay);
          }
        } elseif (this.passivePopupDelay < Infinity) {
          if (this.passive_hover_timer) {
            this.passive_hover_timer.remove();
          }
          this.passive_hover_timer = this.defer(function() {
            this.onItemClick(item, {
              type: 'click'
            });
          }, this.passivePopupDelay);
        }

        this._hoveredChild = item;

        item._set('hovering', true);
      }.bind(this.dropDown);

      this.dropDown._onItemFocus = function(item) {
        if (item.option.group) {
          return;
        }
        if (this._hoveredChild && this._hoveredChild != item) {
          this.onItemUnhover(this._hoveredChild);
        }
        this.set('selected', item);
      }.bind(this.dropDown);
    }
  });
});

If you want a live sample (without using separte file ) see below snippet :) .

require([
  "dojo/_base/declare",
  'dijit/form/Select',
  'dojo/_base/window',
  'dojo/domReady!'
], function(declare, Select, win) {

  varSelectGroup = declare(Select, {
    postCreate: function() {
      //make sur call this , like call super() ; inherited code will be executed this.inherited(arguments);
      
      console.log(this.dropDown);
      this.dropDown._onUpArrow = function() {
        this.focusPrev()
      }.bind(this.dropDown);
     
      this.dropDown._onDownArrow = function() {
        this.focusNext()
      }.bind(this.dropDown);
      
      this.dropDown.focusNext = function() {
        var focusNext = function() {
            var next = this._getNextFocusableChild(this.focusedChild, 1);
            this.focusChild(next);
            if (next.option.group) {
              focusNext();
            }
        }.bind(this);
        focusNext();
      }.bind(this.dropDown);
      
      this.dropDown.focusPrev = function() {
        var focusPrev = function() {
          var prev = this._getNextFocusableChild(this.focusedChild, -1);
          this.focusChild(prev);
          if (prev.option.group) {
            focusPrev();
          }
        }.bind(this);
        focusPrev();
      }.bind(this.dropDown);
      
      this.dropDown.onItemHover = function(item) {
        if (item.option.group) {
          item._set('hovering', false);
          return;
        }

        if (this.activated) {
          this.set('selected', item);
          if (item.popup && !item.disabled && !this.hover_timer) {
            this.hover_timer = this.defer(function() {
              this._openItemPopup(item);
            }, this.popupDelay);
          }
        } elseif (this.passivePopupDelay < Infinity) {
          if (this.passive_hover_timer) {
            this.passive_hover_timer.remove();
          }
          this.passive_hover_timer = this.defer(function() {
            this.onItemClick(item, {
              type: 'click'
            });
          }, this.passivePopupDelay);
        }

        this._hoveredChild = item;

        item._set('hovering', true);
      }.bind(this.dropDown);
      
      this.dropDown._onItemFocus = function(item) {
        if (item.option.group) {
          return;
        }
        if (this._hoveredChild && this._hoveredChild != item) {
          this.onItemUnhover(this._hoveredChild);
        }
        this.set('selected', item);
      }.bind(this.dropDown);
    }
  });
  

  var select = newSelectGroup({
    name: 'select2',
    options: [{
        label: '<i>Colors I love</i>',
        value: 'G 1',
        group: true,
        disabled: true
      },
      {
        label: 'Red',
        value: '1'
      },
      {
        label: 'Green',
        value: '2',
        selected: true
      },
      {
        label: 'Yello',
        value: '3'
      },
      {
        label: 'Purple',
        value: '4'
      },
      {
        label: '<i>Food I love</</i>',
        value: 'G 2',
        group: true,
        disabled: true
      },
      {
        label: 'Red tomatoes',
        value: '1'
      },
      {
        label: 'Green apples',
        value: '3'
      }
    ]
  }, 'select');

  //decorator(select);

});

<linkhref="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" /><script>window.dojoConfig = {
    parseOnLoad: false,
    async: true
  };
</script><scriptsrc="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script><bodyclass="claro"><divid="select"></div></body>