Navigation

← Previous Changeset
Next Changeset →

Changeset 633

Timestamp:

03/15/06 12:17:48 (3 years ago)

Author:

therve@gmail.com

Message:

Upgrade Sortable

Files:

mochikit/branches/scriptaculous/MochiKit/DragAndDrop.js (modified) (6 diffs)
mochikit/branches/scriptaculous/MochiKit/Sortable.js (modified) (15 diffs)
mochikit/branches/scriptaculous/examples/dnd_sortable/dropmarker.png (added)
mochikit/branches/scriptaculous/examples/dnd_sortable/icon.png (added)
mochikit/branches/scriptaculous/examples/dnd_sortable/index.html (modified) (2 diffs)
mochikit/branches/scriptaculous/examples/dnd_sortable/sortable2_test.html (added)
mochikit/branches/scriptaculous/examples/dnd_sortable/sortable3_test.html (added)
mochikit/branches/scriptaculous/examples/dnd_sortable/sortable4_test.html (added)
mochikit/branches/scriptaculous/examples/dnd_sortable/sortable5_test.html (added)
mochikit/branches/scriptaculous/examples/dnd_sortable/sortable_test.html (added)
mochikit/branches/scriptaculous/examples/simple_dnd/dnd_full.html (modified) (1 diff)
mochikit/branches/scriptaculous/examples/simple_dnd/dnd_scroll.html (modified) (1 diff)

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

mochikit/branches/scriptaculous/MochiKit/DragAndDrop.js

r618	r633
88	88
89	89	prepare: function (element) {
90		MochiKit.~~Iter.forEach(this.drops,~~ function (drop) {
	90	MochiKit.Base.map(function (drop) {
91	91	if (drop.isAccepted(element)) {
92	92	if (drop.options.activeclass) {
…	…
98	98	}
99	99	}
100		});
	100	}, this.drops);
101	101	},
102	102
…	…
139	139
140	140	reset: function (element) {
141		MochiKit.~~Iter.forEach(this.drops,~~ function (drop) {
	141	MochiKit.Base.map(function (drop) {
142	142	if (drop.options.activeclass) {
143	143	MochiKit.DOM.removeElementClass(drop.element,
…	…
147	147	drop.options.ondesactive(drop.element, element);
148	148	}
149		});
	149	}, this.drops);
150	150	if (this.last_active) {
151	151	this.last_active.deactivate();
…	…
185	185	if ((typeof(containment) == 'object') &&
186	186	(containment.constructor == Array)) {
187		MochiKit.~~Iter.forEach(containment,~~ function (c) {
	187	MochiKit.Base.map(MochiKit.Base.bind(function (c) {
188	188	this.options._containers.push(MochiKit.DOM.getElement(c));
189		});
	189	}, this), containment);
190	190	} else {
191	191	this.options._containers.push(
…	…
362	362	// 'onStart', 'onEnd', 'onDrag'
363	363	if (this[eventName + 'Count'] > 0) {
364		MochiKit.~~Iter.forEach(this.observers,~~ function (o) {
	364	MochiKit.Base.map(function (o) {
365	365	if (o[eventName]) {
366	366	o[eventName](eventName, draggable, event);
367	367	}
368		});
	368	}, this.observers);
369	369	}
370	370	},
371	371
372	372	_cacheObserverCallbacks: function () {
373		MochiKit.Iter.forEach(['onStart', 'onEnd', 'onDrag'],
374		function (eventName) {
	373	MochiKit.Base.map(function (eventName) {
375	374	MochiKit.DragAndDrop.Draggables[eventName + 'Count'] =
376	375	MochiKit.Base.filter(function (o) {
377	376	return o[eventName];
378	377	}, MochiKit.DragAndDrop.Draggables.observers).length;
379		});
	378	}, ['onStart', 'onEnd', 'onDrag']);
380	379	}
381	380	};

mochikit/branches/scriptaculous/MochiKit/Sortable.js

r616	r633
6	6
7	7	***/
8		SortableObserver = function (element, observer) {
	8
	9	if (typeof(dojo) != 'undefined') {
	10	dojo.provide('MochiKit.DragAndDrop');
	11	dojo.require('MochiKit.Base');
	12	dojo.require('MochiKit.DOM');
	13	dojo.require('MochiKit.Iter');
	14	}
	15
	16	if (typeof(JSAN) != 'undefined') {
	17	JSAN.use("MochiKit.Base", []);
	18	JSAN.use("MochiKit.DOM", []);
	19	JSAN.use("MochiKit.Iter", []);
	20	}
	21
	22	try {
	23	if (typeof(MochiKit.Base) == 'undefined' \|\|
	24	typeof(MochiKit.DOM) == 'undefined' \|\|
	25	typeof(MochiKit.Iter) == 'undefined') {
	26	throw "";
	27	}
	28	} catch (e) {
	29	throw "MochiKit.DragAndDrop depends on MochiKit.Base, MochiKit.DOM and MochiKit.Iter!";
	30	}
	31
	32	if (typeof(MochiKit.Sortable) == 'undefined') {
	33	MochiKit.Sortable = {};
	34	}
	35
	36	MochiKit.Sortable.NAME = 'MochiKit.Sortable';
	37	MochiKit.Sortable.VERSION = '1.3';
	38
	39	MochiKit.Sortable.__repr__ = function () {
	40	return '[' + this.NAME + ' ' + this.VERSION + ']';
	41	};
	42
	43	MochiKit.Sortable.toString = function () {
	44	return this.__repr__();
	45	};
	46
	47	MochiKit.Sortable.EXPORT = [
	48	"SortableObserver"
	49	];
	50
	51	MochiKit.DragAndDrop.EXPORT_OK = [
	52	"Sortable"
	53	];
	54
	55	MochiKit.Sortable.SortableObserver = function (element, observer) {
9	56	this.__init__(element, observer);
10	57	};
11	58
12		SortableObserver.prototype = {
	59	MochiKit.Sortable.SortableObserver.prototype = {
13	60	/***
14	61
…	…
19	66	this.element = MochiKit.DOM.getElement(element);
20	67	this.observer = observer;
21		this.lastValue = Sortable.serialize(this.element);
	68	this.lastValue = MochiKit.Sortable.Sortable.serialize(this.element);
22	69	},
23	70
24	71	onStart: function () {
25		this.lastValue = Sortable.serialize(this.element);
	72	this.lastValue = MochiKit.Sortable.Sortable.serialize(this.element);
26	73	},
27	74
28	75	onEnd: function () {
29		Sortable.unmark();
30		if (this.lastValue != Sortable.serialize(this.element)) {
	76	MochiKit.Sortable.Sortable.unmark();
	77	if (this.lastValue != MochiKit.Sortable.Sortable.serialize(this.element)) {
31	78	this.observer(this.element)
32	79	}
…	…
34	81	};
35	82
36		~~var~~ Sortable = {
	83	MochiKit.Sortable.Sortable = {
37	84	/***
38	85
…	…
59	106	return s.element == element;
60	107	}, this.sortables);
61		MochiKit.~~Iter.forEach(toDestroy,~~ function (s) {
	108	MochiKit.Base.map(function (s) {
62	109	MochiKit.DragAndDrop.Draggables.removeObserver(s.element);
63		MochiKit.~~Iter.forEach(s.droppables,~~ function (d) {
	110	MochiKit.Base.map(function (d) {
64	111	MochiKit.DragAndDrop.Droppables.remove(d);
65		});
66		MochiKit.~~Iter.forEach(s.draggables,~~ function (d) {
	112	}, s.droppables);
	113	MochiKit.Base.map(function (d) {
67	114	d.destroy();
68		});
69		});
	115	}, s.draggables);
	116	}, toDestroy);
70	117	this.sortables = MochiKit.Base.filter(function (s) {
71	118	return s.element != element;
…	…
132	179	containment: options.containment,
133	180	hoverclass: options.hoverclass,
134		onhover: Sortable.onHover,
	181	onhover: MochiKit.Sortable.Sortable.onHover,
135	182	greedy: !options.dropOnEmpty
136	183	}
…	…
148	195	new MochiKit.DragAndDrop.Droppable(element, {
149	196	containment: options.containment,
150		onhover: Sortable.onEmptyHover,
	197	onhover: MochiKit.Sortable.Sortable.onEmptyHover,
151	198	greedy: false
152	199	});
153	200	options.droppables.push(element);
154	201	}
155		MochiKit.Iter.forEach((this.findElements(element, options) \|\| []),
156		function (e) {
	202	MochiKit.Base.map(function (e) {
157	203	// handles are per-draggable
158	204	var handle = options.handle ?
…	…
165	211	new MochiKit.DragAndDrop.Droppable(e, options_for_droppable);
166	212	options.droppables.push(e);
167		});
	213	}, (this.findElements(element, options) \|\| []));
168	214
169	215	// keep reference
…	…
172	218	// for onupdate
173	219	MochiKit.DragAndDrop.Draggables.addObserver(
174		new SortableObserver(element, options.onUpdate));
	220	new MochiKit.Sortable.SortableObserver(element, options.onUpdate));
175	221	},
176	222
…	…
181	227	}
182	228	var elements = [];
183		MochiKit.~~Iter.forEach(element.childNodes,~~ function (e) {
	229	MochiKit.Base.map(MochiKit.Base.bind(function (e) {
184	230	if (e.tagName &&
185	231	e.tagName.toUpperCase() == options.tag.toUpperCase() &&
…	…
194	240	}
195	241	}
196		});
	242	}, this), element.childNodes);
197	243
198	244	return (elements.length > 0 ? elements : null);
…	…
201	247	onHover: function (element, dropon, overlap) {
202	248	if (overlap > 0.5) {
203		Sortable.mark(dropon, 'before');
	249	MochiKit.Sortable.Sortable.mark(dropon, 'before');
204	250	if (dropon.previousSibling != element) {
205	251	var oldParentNode = element.parentNode;
…	…
207	253	dropon.parentNode.insertBefore(element, dropon);
208	254	if (dropon.parentNode != oldParentNode) {
209		Sortable.options(oldParentNode).onChange(element);
	255	MochiKit.Sortable.Sortable.options(oldParentNode).onChange(element);
210	256	}
211		Sortable.options(dropon.parentNode).onChange(element);
	257	MochiKit.Sortable.Sortable.options(dropon.parentNode).onChange(element);
212	258	}
213	259	} else {
214		Sortable.mark(dropon, 'after');
	260	MochiKit.Sortable.Sortable.mark(dropon, 'after');
215	261	var nextElement = dropon.nextSibling \|\| null;
216	262	if (nextElement != element) {
…	…
219	265	dropon.parentNode.insertBefore(element, nextElement);
220	266	if (dropon.parentNode != oldParentNode) {
221		Sortable.options(oldParentNode).onChange(element);
	267	MochiKit.Sortable.Sortable.options(oldParentNode).onChange(element);
222	268	}
223		Sortable.options(dropon.parentNode).onChange(element);
	269	MochiKit.Sortable.Sortable.options(dropon.parentNode).onChange(element);
224	270	}
225	271	}
…	…
230	276	var oldParentNode = element.parentNode;
231	277	dropon.appendChild(element);
232		Sortable.options(oldParentNode).onChange(element);
233		Sortable.options(dropon).onChange(element);
	278	MochiKit.Sortable.Sortable.options(oldParentNode).onChange(element);
	279	MochiKit.Sortable.Sortable.options(dropon).onChange(element);
234	280	}
235	281	},
236	282
237	283	unmark: function () {
238		if (Sortable._marker) {
239		MochiKit.DOM.hideElement(Sortable._marker);
	284	if (MochiKit.Sortable.Sortable._marker) {
	285	MochiKit.DOM.hideElement(MochiKit.Sortable.Sortable._marker);
240	286	}
241	287	},
…	…
243	289	mark: function (dropon, position) {
244	290	// mark on ghosting only
245		var sortable = Sortable.options(dropon.parentNode);
	291	var sortable = MochiKit.Sortable.Sortable.options(dropon.parentNode);
246	292	if (sortable && !sortable.ghosting) {
247	293	return;
248	294	}
249	295
250		if (!Sortable._marker) {
251		Sortable._marker = MochiKit.DOM.getElement('dropmarker') \|\|
	296	if (!MochiKit.Sortable.Sortable._marker) {
	297	MochiKit.Sortable.Sortable._marker = MochiKit.DOM.getElement('dropmarker') \|\|
252	298	document.createElement('DIV');
253		MochiKit.DOM.hideElement(Sortable._marker);
254		MochiKit.DOM.addElementClass(Sortable._marker, 'dropmarker');
255		Sortable._marker.style.position = 'absolute';
	299	MochiKit.DOM.hideElement(MochiKit.Sortable.Sortable._marker);
	300	MochiKit.DOM.addElementClass(MochiKit.Sortable.Sortable._marker, 'dropmarker');
	301	MochiKit.Sortable.Sortable._marker.style.position = 'absolute';
256	302	document.getElementsByTagName('body').item(0).appendChild(
257		Sortable._marker);
	303	MochiKit.Sortable.Sortable._marker);
258	304	}
259	305	var offsets = MochiKit.Position.cumulativeOffset(dropon);
260		Sortable._marker.style.left = offsets[0] + 'px';
261		Sortable._marker.style.top = offsets[1] + 'px';
	306	MochiKit.Sortable.Sortable._marker.style.left = offsets[0] + 'px';
	307	MochiKit.Sortable.Sortable._marker.style.top = offsets[1] + 'px';
262	308
263	309	if (position == 'after') {
264	310	if (sortable.overlap == 'horizontal') {
265		Sortable._marker.style.left = (offsets[0] +
	311	MochiKit.Sortable.Sortable._marker.style.left = (offsets[0] +
266	312	dropon.clientWidth) + 'px';
267	313	} else {
268		Sortable._marker.style.top = (offsets[1] +
	314	MochiKit.Sortable.Sortable._marker.style.top = (offsets[1] +
269	315	dropon.clientHeight) + 'px';
270	316	}
271	317	}
272		MochiKit.DOM.showElement(Sortable._marker);
	318	MochiKit.DOM.showElement(MochiKit.Sortable.Sortable._marker);
273	319	},
274	320

mochikit/branches/scriptaculous/examples/dnd_sortable/index.html

r602	r633
31	31	</p>
32	32	<script type="text/javascript">
33		Sortable.create('dnd_sortable');
	33	MochiKit.Sortable.Sortable.create('dnd_sortable');
34	34
35	35	validate = function () {
…	…
42	42	}
43	43	</script>
44
	44	<p>
	45	<ul>
	46	<li><a href="sortable_test.html">Test 1</a></li>
	47	<li><a href="sortable2_test.html">Test 2</a></li>
	48	<li><a href="sortable3_test.html">Test 3</a></li>
	49	<li><a href="sortable4_test.html">Test 4</a></li>
	50	<li><a href="sortable5_test.html">Test 5</a></li>
	51	</ul>
	52	</p>
45	53	</body>
46	54	</html>

mochikit/branches/scriptaculous/examples/simple_dnd/dnd_full.html

r618	r633
110	110	// <![CDATA[
111	111	// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
112		Sortable.create('thelist');
113		Sortable.create('thelist2');
	112	MochiKit.Sortable.Sortable.create('thelist');
	113	MochiKit.Sortable.Sortable.create('thelist2');
114	114
115	115	// ]]>

mochikit/branches/scriptaculous/examples/simple_dnd/dnd_scroll.html

r618	r633
84	84	// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
85	85	MochiKit.Position.includeScrollOffsets = true;
86		Sortable.create('thelist2', {scroll: 'scroll-container'});
	86	MochiKit.Sortable.Sortable.create('thelist2', {scroll: 'scroll-container'});
87	87
88	88	// ]]>

Navigation

Changeset 633

Legend:

mochikit/branches/scriptaculous/MochiKit/DragAndDrop.js

mochikit/branches/scriptaculous/MochiKit/Sortable.js

mochikit/branches/scriptaculous/examples/dnd_sortable/index.html

mochikit/branches/scriptaculous/examples/simple_dnd/dnd_full.html

mochikit/branches/scriptaculous/examples/simple_dnd/dnd_scroll.html

Download in other formats: