Author: jmorliaguet
Date: Sun Apr 2 20:23:52 2006
New Revision: 2763
Modified:
cpsskins/branches/jmo-perspectives/ui/authoring/definitions.py
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Log:
- optimizations: draggable, droppable and shiftable zones are defined by
class names (not by CSS selectors anymore which require too much CPU
to match).
Modified: cpsskins/branches/jmo-perspectives/ui/authoring/definitions.py
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/authoring/definitions.py
(original)
+++ cpsskins/branches/jmo-perspectives/ui/authoring/definitions.py Sun Apr
2 20:23:52 2006
@@ -388,7 +388,7 @@
'id': 'portlet-factory',
'type': 'drag-and-drop',
'dragging': {
- 'sources': ['.toolbox .factory'],
+ 'source': ['factory'],
'offset_x': -5,
'offset_y': -5,
'feedback': {
@@ -399,7 +399,7 @@
}
},
'dropping': {
- 'targets': ['.portletTarget'],
+ 'target': ['portletTarget'],
'highlight': {
'duration': 800,
},
@@ -410,7 +410,7 @@
'id': 'element-mover',
'type': 'drag-and-drop',
'dragging': {
- 'sources': ['.elementMovable'],
+ 'source': ['elementMovable'],
'feedback': {
'opacity': 0.3,
},
@@ -419,7 +419,7 @@
}
},
'shifting': {
- 'element': '.elementShiftable',
+ 'element': 'elementShiftable',
},
'dropping': {
'highlight': {
Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js (original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js Sun Apr 2
20:23:52 2006
@@ -698,6 +698,9 @@
document.onmousedown = this.cancelEvent;
document.onselectstart = this.cancelEvent;
+ this._shiftablezones = [];
+ this._containerzones = [];
+ this._dropzones = [];
this._last_updated = 0;
},
@@ -722,45 +725,37 @@
_setupZones: function() {
var widget = this.widget;
var shifting = this.def.shifting;
- if (shifting && !this._shiftablezones) {
- var shiftablezones = this._shiftablezones = [];
+ if (shifting) {
if (shifting.element) {
- $$(shifting.element).each(function(el) {
- if (el.childOf(widget)) shiftablezones.push(el);
- });
+ this._shiftablezones = document.getElementsByClassName(
+ shifting.element)
}
- if (shifting.container && !this._containerzones) {
- var containerzones = this._containerzones = [];
- $$(shifting.container).each(function(el) {
- if (el.childOf(widget)) containerzones.push(el);
- });
+ if (shifting.container) {
+ this._containerzones = document.getElementsByClassName(
+ shifting.container, widget)
}
}
- if (this.def.dropping && !this._dropzones) {
- var dropzones = this._dropzones = [];
- (this.def.dropping.targets || []).each(function(d) {
- $$(d).each(function(el) {
- if (el.childOf(widget)) dropzones.push(el);
- });
- });
+ if (this.def.dropping) {
+ this._dropzones = document.getElementsByClassName(
+ this.def.dropping.target)
}
},
_findDraggable: function(e) {
var element = $(Event.element(e));
- var handle = this.def.dragging.handle || this.def.dragging.sources || [];
+ var handle = this.def.dragging.handle || this.def.dragging.source || '';
var widget = this.widget;
- var draggable = null;
- $A(handle).each(function(h) {
- $$(h).each(function(el) {
- if (el == element || element.childOf(el)) {
- draggable = el;
- return;
- };
- });
- });
- return draggable;
+ while($(element).parentNode) {
+ if (element.hasClassName(handle)) {
+ return element;
+ }
+ if (!element.childOf(widget)) {
+ return null;
+ }
+ element = element.parentNode;
+ }
+ return null;
},
_getVerticalSpeed: function(y) {
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Sun Apr 2 20:23:52 2006
@@ -28,24 +28,24 @@
margin: 10px;
height: 40px;
}
- table.factory td {
+ td.factory {
padding: 5px;
border: 1px solid #99f;
background-color: #eff;
}
- #dragthis {
+ .dragthis {
padding: 1em;
border: 1px solid #fc0;
background-color: #ff3;
}
- #movethis {
+ .movethis {
padding: 1em;
border: 1px solid #006;
background-color: #fdf;
width: 120px;
margin: 10px;
}
- #drophere {
+ .drophere {
background-color: #fff;
border: 1px dotted #666;
padding: 1em;
@@ -79,7 +79,7 @@
"type": "drag-and-drop",
"action": "displayInfo",
"dragging": {
- "sources": ["div.dragdrop"],
+ "source": "dragdrop",
"feedback": {
"opacity": 0.8,
"clone": true
@@ -89,7 +89,7 @@
}
},
"dropping": {
- "targets": ["div.drop"],
+ "target": "drop",
"highlight": {
"duration": 300
}
@@ -101,7 +101,7 @@
"type": "drag-and-drop",
"action": "displayInfo",
"dragging": {
- "sources": ["#dragthis"],
+ "source": "dragthis",
"feedback": {
"opacity": 0.8,
"border": "#000",
@@ -109,8 +109,8 @@
}
},
"shifting": {
- "element": ".block",
- "container": ".container"
+ "element": "block",
+ "container": "container"
}}
</ins>
@@ -119,11 +119,11 @@
"type": "drag-and-drop",
"action": "displayInfo",
"dragging": {
- "sources": ["#movethis"],
+ "source": "movethis",
"opacity": 0.6
},
"dropping": {
- "targets": ["#drophere"],
+ "target": "drophere",
"highlight": {
"duration": 800
}
@@ -135,7 +135,7 @@
"type": "drag-and-drop",
"action": "displayInfo",
"dragging": {
- "sources": [".block"],
+ "source": "block",
"feedback": {
"opacity": 0.7,
"border": "#000",
@@ -143,8 +143,8 @@
}
},
"shifting": {
- "element": ".block",
- "container": ".container"
+ "element": "block",
+ "container": "container"
},
"dropping": {
"zoomto": {
@@ -159,7 +159,7 @@
"type": "drag-and-drop",
"action": "displayInfo",
"dragging": {
- "sources": ["table.factory td"],
+ "source": "factory",
"feedback": {
"opacity": 0.8
},
@@ -168,7 +168,7 @@
}
},
"dropping": {
- "targets": ["#drophere"],
+ "target": "drophere",
"highlight": {
"duration": 600
}
@@ -178,7 +178,7 @@
<div style="width: 300px; float: left">
<div class="dragdrop">DRAG-AND-DROP ME
- <div id="dragthis">DRAG ME</div>
+ <div class="dragthis">DRAG ME</div>
</div>
<div class="drop">DROP ZONE</div>
@@ -206,15 +206,15 @@
<div style="width: 200px; float: left">
<div class="drop">DROP ZONE</div>
- <div id="drophere">DROP ME HERE</div>
- <div id="movethis">MOVE ME</div>
+ <div class="drophere">DROP ME HERE</div>
+ <div class="movethis">MOVE ME</div>
</div>
- <table class="factory">
+ <table>
<tr>
- <td>A</td>
- <td>B</td>
- <td>C</td>
+ <td class="factory">A</td>
+ <td class="factory">B</td>
+ <td class="factory">C</td>
</tr>
</table>
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
