Single EmberView doing resizable() and draggable()

Question

As per answer of the question Ember.js draggable and droppable jqueryUI / native Drag and drop mixin.

I have implemented JQUERY UI drag, drop, resize mixins in EmberJS. But my problem is i want the same view to do drag and resize. I tried to implement in different ways. You can check in this jsfiddle http://jsfiddle.net/codejack/TGwxf/1/ The view gets UI behaviour of last called mixin only.

Is there any way to get more than 1 behaviour in drag,drop,resize for same view?

EDIT I found out the reason is the 2nd mixin overrides the uievents,uiOptions,uiType variables. But still dont know how to avoid that... only way i can see is writing own Widgets with own events...any way to solve that?

score 2 · Accepted Answer · answered Jan 09 '13 at 11:37

Though the @user1128571 gave a solution which partly solves the problem, here is how i corrected the issue. I added different mixins for Interactions as that will solve the problem.

https://github.com/thecodejack/jquery-ui-ember/blob/master/js/app.js#L104

check the github pages of the module to know how exactly it works

xiaolingxiao · Answer 2 · 2013-01-09T13:38:14.663

You might want the JQ.Widget to look like this, warning it's not pretty:

Here, JQ.UiBase is the same thing as JQ.Widget

JQ.UiBase = Ember.Mixin.create({

    uiWidgets:    {},
    uiAttributes: {},

    // ----------------------------------------------------------------------------
    // setup and teardown

    didInsertElement: function(){
        this._super();
        this._createUiWidgets();
    },

    willDestroyElement: function(){
        this._super();
        // implement tear down
    },

    // ----------------------------------------------------------------------------
    // @Private

    // @Function: for each $.ui specified in the view, create a $.ui widget
    //            add ui widgets to uiWidgets hash, ui widget setting to uiAttributes hash
    _createUiWidgets: function(){
        var widgetTypes    =   this._gatherWidgetTypes();
            uiWidgets      =   this.get('uiWidgets'),
            uiAttributes   =   this.get('uiAttributes'),  
            thisView       =   this;


        widgetTypes.forEach( function( widget ){

            var options           =   thisView.get( widget + 'Options' ) || {},
                handlers          =   thisView._registerEventHandlers( widget ),
                attributes        =   $.extend( options, handlers ),
                uiWidget          =   $.ui[widget]( attributes, thisView.$() );

            uiWidgets[widget]     =   uiWidget;
            uiAttributes[widget]  =   attributes;
        });
    },

    // @Function:  collects named $.ui events from Widget mixin
    //             for each event, if there is an associated callback, wrap it in a function and call the view's context
    // @Return:    a hash map $.ui event to callback function defined in view
    _registerEventHandlers: function( widget_name ){
        var widgetName     =   widget_name + 'Events',
            events         =   this.get( widgetName ) || [],
            thisView       =   this,
            eventHandlers  =   {};

        if ( events.length === 0 ) return;

        // note the iterator is not scoped to the view
        events.forEach( function( event ){
            var callBack = thisView.get( event );
            if ( callBack ){
                eventHandlers[ event ] = function ( event, ui ){ callBack.call( thisView, event, ui ); }; 
            };
        });
        return eventHandlers;
    },

    // TODO --> find alternate implementation that does not break if structure of ui mixins or namespace change
    _gatherWidgetTypes: function() {
        var nameSpace     =  'JQ',
            widgetTypes   =  [];

        Ember.Mixin.mixins(this).forEach( function( mixin ){
            // find widget with correct namespace
            if (  mixin.toString().substring(0,2) === nameSpace ){

                // console.log( 'gather: ', mixin, ' --> ', mixin.mixins[1] )
                // access widget mixin and check widget mixin have properties
                if ( mixin.mixins && mixin.mixins[1] && mixin.mixins[1].properties ){
                    if ( mixin.mixins[1].properties.widgetType ) widgetTypes.push( mixin.mixins[1].properties.widgetType)
                }
            }
        });

        return widgetTypes;
    },

});

And then your resizable mixin would look like this:

JQ.Resizable = Ember.Mixin.create( JQ.UiBase, {

    widgetType:        'resizable',
    resizableOptions:  { 'aspectRatio': 1/1 },
    resizableEvents:   [ 'resize' ],

    resize: function( event, ui ){
            // do stuff

    },

});

The most important function here is the _gatherWidgetTypes, which gathers all JQ-namespaced mixins in the ember object. In my opinion, it's bit of a hack and I ended up not using the JQ.UiBase after making it, favoring to mix logic to create the widget and specifying the event handlers and options into one mixin, which ended up looking cleaner, but that's just me.

Atlast there is an answer here..and your answer almost may solve the issue to avoid over rides...i dont know about this `Ember.Mixin.mixins(this)` ...only problem i see is still events like start,stop gets overridden..actually i made different mixins to avoid you may want to check the code here..https://github.com/thecodejack/jquery-ui-ember/blob/master/js/app.js#L104 ..i know the code may look very noob type..but this solved the problem in less than a hour for me... — thecodejack, Jan 08 '13 at 05:41

Single EmberView doing resizable() and draggable()

2 Answers2

Linked