JSFiddle - React, Tailwind, and code Playground

by ruslanchek

JavaScript

var Marker = function (params) {
    this.instance = {};
    this.params = {
        width: 70,
        height: 50,
        background: 'red',
        onclick: null
    };
    this.object = null;

    $.extend(this.params, params);

    this.show = function () {
        $('body').append(this.object);
    }

    this.hide = function () {
        this.object.remove();
    }

    this.onclick = function () {
        var t = this;

        this.object.on('click', function () {
            if (t.params.onclick) {
                t.params.onclick(t);
            }
        });
    }

    this.create = function () {
        this.object = $('<div style="width: ' + this.params.width + 'px; height: ' + this.params.height + 'px; background: ' + this.params.background + '"></div>');

        this.onclick();
    }

    this.create();
};

var PosMarker = function (params) {
    this.params = {
        onclick: null
    };

    $.extend(this.params, params);

    //Inherit
    this.moveR = function () {
        this.object.animate({
            marginLeft: 180
        }, 4000)
    }

    this.moveL = function () {
        this.object.animate({
            marginLeft: 0
        }, 4000)
    }

    this.__proto__ = new Marker(this.params);
};

var pm = new PosMarker({
    width: 200,

    onclick: function (self) {
        alert(self.params.width)
    }
});

var pm1 = new PosMarker({
    width: 20,

    onclick: function (self) {
        console.log(self)
    }
});

pm1.show();
pm.show();
pm1.moveR();