Inheritance question

[Cyrus]

Hi,

I want to extend the Sortable class from the scriptaculous library.
Where is my mistake? It's telling me SortableLabelList.create doesn't
exist - I assumed it is inherited from Sortable.

// extend
SortableLabelList = Class.create(Sortable, {
// redefine onHover
onHover: function($super, element, dropon, overlap) {
$super();
console.log(element);
console.log(dropon);
console.log(overlap);
}
});

// create list
SortableLabelList.create("...");

[T.J. Crowder]

Hi Cyrus,

I don't know much about script.aculo.us, but looking at it
(dragdrop.js), Sortable isn't a class (in the loose way we use that
word in this classless prototypical language JavaScript), it's just an
object with a bunch of functions assigned as properties. So you won't
be able to extend it in this way. Perhaps someone who's done more
with script.aculo.us can point you to a convenient way to achieve the
result you're looking for.

FWIW,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

[Cyrus]

Ok, thanks.

Let me describe my actual problem:

I have a list with labels and checkboxes:

<ul id="list">
<li><label><input type="checkbox" /> My first checkbox</label></li>
<li><label><input type="checkbox" /> My second checkbox</label></li>
...
</ul>

I wanted to have that list sortable. Very easy task with Sortable:

Sortable.create("list");

Works fine except one issue:

Safari and Firefox interpret the drag and drop as a click on the
label. Clicking on the label changes the status of the checkbox. There
must be a way to prevent this.

Do you have any ideas how to do this.

I used the Sortable callback onChange to save the checkbox status
before the drop. The other callback onUpdate is fired before the click
on the label takes effect. I would like to add another change listener
to the checkbox that only takes effect when onUpdate was fired.

[Dan]

You are confusing constructors with class definition.Class.create() is
for defining a new "Class" which will support inheritance. To
construct an instance of a class you defined with var MyClass =
Class.create(baseClass, { ... }) you construct it like you would any
other object:

var myClassInstance = new MyClass();

So, this should work:

// extend
SortableLabelList = Class.create(Sortable, {
// redefine onHover
onHover: function($super, element, dropon, overlap) {
$super();
console.log(element);
console.log(dropon);
console.log(overlap);
}

});

// create list

var mySortableLabelList = new SortableLabelList("...");

For more info, see the example in the documentation:

http://prototypejs.org/api/class/create

Dan

[T.J. Crowder]

Hi Dan,

> You are confusing constructors with class definition

He's not, actually, though I can see why you would think that. When
you're creating a straight Sortable from script.aculo.us, you use
Sortable.create, not new Sortable.[1] It's just the way Sortable was
written, and it happens to use the same function name ("create") as
the function for defining classes in Class. Again, Sortable isn't a
"class" (more accurately, it's not a function used for initializing
prototypes). It's just a collection of properties (most of which are
functions).

[1] http://wiki.github.com/madrobby/scriptaculous/sortable

--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

[Jerod Venema]

If you're trying to avoid the default behaviour for the label (which is to check/uncheck the appropriate form element), you may want to just use prototypes "stop" [1] function. I've never done this, but something like the following ought to work (I think):

Event.observe('mylabel', 'click', function(evt){
  Event.stop(evt);
});

You'll probably want a $$('label') call instead of 'mylabel', but you get the idea.

[1] http://www.prototypejs.org/api/event/stop

--
Jerod Venema
Frozen Mountain Software
http://www.frozenmountain.com/
919-368-5105

[Cyrus]

Hi,

thanks, but I already tried that yesterday:

I like the natural behaviour of the label. In every part of our
software you can click on the label to change the status of the
checkbox. I just don't like it happen when you use the drag and drop
function.

Is there a way to stop that event only after a drop?

I am seeing myself copying the whole Sortable because it cannot be
inherited.

[nlloyds]

Cyrus,

On Jan 14, 1:50 am, Cyrus <arianglan...@googlemail.com> wrote:
> I am seeing myself copying the whole Sortable because it cannot be
> inherited.

I don't know if it's been mentioned, but you since Sortable is just an
object you could try extending it with your own methods like this

var MySortable = Object.extend({
hover : function hover() { ... },
...
}, Sortable);

Don't know if it will work in practice, though.

Nathan

[Dan]

Thanks for correcting me about that. Strange that they would decide to
build the Sortable class in that way.

Dan

[Cyrus]

Thats a good idea. This code works actually. I just cannot (really)
override existing methods. If I include methods with the same name in
MySortable, they are not called, because within Sortable all methods
are called with Sortable.nameOfMethod() - they don't use
this.nameOfMethod().