The dark side of the force

I have been spending a lot of time lately working on a new javascript based interface. As with any js project we ended up with a lot of layers. For instance for a simple numeric input there are:

• the html input
• the kendo numerictextbox
• the aurelia-kendo-bridge wrapper
• our own wrapper to allow for some level of DRY

The fun part is that we needed of course some functionality which did not existed in the kendo component (adding support for financial shortcuts: 10k => 10,000).

Since I still have an OOP structured mind, with lot of years of java pattern I thought: Ok, will create a component which extends on kendo and re-wrap.

This would look similar to:

<pre lang="javascript">$(function() {

    // wrap the widget in a closure. Not necessary in doc ready, but a good practice
    (function($) {

        // shorten references to variables. this is better for uglification 
        var kendo = window.kendo,
            ui = kendo.ui,
            NumericTextBox = ui.NumericTextBox;

        // create a new widget which extends the first custom widget
        var NumberInput = NumericTextBox.extend({

            // every widget has an init function
            init: function(element, options) {
                var that = this;
                NumericTextBox.fn.init.call(that, element, options);

            },

            _keypress: function(e) {
                //override here!!
            },

            options: {
                name: "NumberInput"
            }
        });

        // add this new widget to the UI namespace.
        ui.plugin(NumberInput);

    })(jQuery);
});

Well, this seemed ok and it worked ok but still requires a lot of work to wrap into an usable aurelia component which maps all the events and options: precision, step …

At this moment it struck me! This is javascript! BUHUHU, there is no need for all this. I could just do this in our wrapper:

<pre lang="javascript">
    attached() {
        this.taskQueue.queueTask(() => {
            //assuming ak-numerictextbox="k-widget.bind:numericTextBox; in the template
            this.numericTextBox._orig_keypress = this.numericTextBox._keypress;
            this.numericTextBox._keypress = this._keypress;
        });
    }

Now I have switched to the dark side of the force! More details on this github.