montagejs / montage

Montage is an elegant, open source HTML5 framework maintained by Montage Studio that rivals native SDKs, yet is easier to learn. It offers modular components, two-way data binding, and much more. Join us on irc.freenode.net#montage. Sign up for our beta to build Montage applications in the cloud.
http://montagestudio.com/montagejs
Other
1.5k stars 215 forks source link

Implement Draggable/Droppable handling via getters & setters #1996

Open tejaede opened 6 years ago

tejaede commented 6 years ago

The registration/unregistration of Component#droppable and Component#draggable is currently handled via property change listeners:

https://github.com/montagejs/montage/blob/master/ui/component.js#L1848-L1849

 this.addOwnPropertyChangeListener("draggable", this);
 this.addOwnPropertyChangeListener("droppable", this);

https://github.com/montagejs/montage/blob/master/ui/component.js#L2936-L2954

    handleDraggableChange: {
        value: function (value) {
            if (value) {
                this.registerDraggable();
            } else {
                this.unregisterDraggable();
            }
        }
    },

    handleDroppableChange: {
        value: function (value) {
            if (value) {
                this.registerDroppable();
            } else {
                this.unregisterDroppable();
            }
        }
    },

This prevents a developer from having these properties themselves unless they override the handlers. E.g.

draggable: {
   get: function () {
        //My own draggable logic
   },
   set: function (value) {
        //My own draggable logic
   }
},

//Required to prevent default drag functionality.
handleDraggableChange: {
      value: function () {}
}

This broke backwards compatibility in an existing component of ours. Is there a reason that draggable and droppable can't be handled via getters and setters? If there is a compelling one, we can fix this ourselves in using the strategy above. However, if there is not, I vote they be converted to getters/setters. E.g.

draggable: {
   get: function () {
        return this._draggable;
   },
   set: function (value) {
        if (this._draggable !== value) {
            if (value) {
                this.registerDroppable();
            } else {
                this.unregisterDroppable();
            }
            this._draggable = value;
        }
   }
},