mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-13 13:03:20 +00:00
292 lines
8.9 KiB
HTML
292 lines
8.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Using Interaction Groups</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
.slot { border:2px solid #aaaaaa; background-color:#dddddd; color:#666666; text-align:center; position: absolute; width:60px; height:60px; }
|
|
.player { border:2px solid #bbbbbb; color:#eeeeee; text-align:center; position: absolute; width:60px; height:60px; }
|
|
.target { border:2px solid #574188; background-color:#cccccc; text-align:center; position: absolute; width:60px; height:60px; }
|
|
|
|
#t1 { left: 10px; top: 0px; }
|
|
#t2 { left: 378px; top: 0px; }
|
|
#b1 { left: 84px; top: 50px; }
|
|
#b2 { left: 158px; top: 50px; }
|
|
#b3 { left: 232px; top: 50px; }
|
|
#b4 { left: 306px; top: 50px; }
|
|
|
|
#pt1 { background-color:#7E695E; left: 84px; top: 150px; }
|
|
#pt2 { background-color:#7E695E; left: 84px; top: 230px; }
|
|
#pb1 { background-color:#416153; left: 195px; top: 150px; }
|
|
#pb2 { background-color:#416153; left: 195px; top: 230px; }
|
|
#pboth1 { background-color:#552E37; left: 306px; top: 150px; }
|
|
#pboth2 { background-color:#552E37; left: 306px; top: 230px; }
|
|
|
|
#usercontrols {
|
|
top: -36px;
|
|
}
|
|
|
|
#workarea {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
</style>
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Using Interaction Groups</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>Using interaction groups, this example demonstrates how to
|
|
tie into the <a href="http://developer.yahoo.com/yui/dragdrop/">Drag & Drop Utility</a>'s interesting moments to provide visual
|
|
affordances for the current drag operation.</p>
|
|
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<div id="usercontrols">
|
|
Interaction Mode:
|
|
<select id="ddmode" >
|
|
<option value="0" selected>Point</option>
|
|
<option value="1">Intersect</option>
|
|
</select>
|
|
</div>
|
|
<div id="workarea">
|
|
|
|
<div class="slot" id="t1" >1</div>
|
|
<div class="slot" id="t2" >2</div>
|
|
<div class="slot" id="b1" >3</div>
|
|
<div class="slot" id="b2" >4</div>
|
|
<div class="slot" id="b3" >5</div>
|
|
<div class="slot" id="b4" >6</div>
|
|
|
|
<div class="player" id="pt1" >1</div>
|
|
<div class="player" id="pt2" >2</div>
|
|
<div class="player" id="pb1" >3</div>
|
|
<div class="player" id="pb2" >4</div>
|
|
<div class="player" id="pboth1" >5</div>
|
|
<div class="player" id="pboth2" >6</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
(function() {
|
|
|
|
YAHOO.example.DDPlayer = function(id, sGroup, config) {
|
|
YAHOO.example.DDPlayer.superclass.constructor.apply(this, arguments);
|
|
this.initPlayer(id, sGroup, config);
|
|
};
|
|
|
|
YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy, {
|
|
|
|
TYPE: "DDPlayer",
|
|
|
|
initPlayer: function(id, sGroup, config) {
|
|
if (!id) {
|
|
return;
|
|
}
|
|
|
|
var el = this.getDragEl()
|
|
YAHOO.util.Dom.setStyle(el, "borderColor", "transparent");
|
|
YAHOO.util.Dom.setStyle(el, "opacity", 0.76);
|
|
|
|
// specify that this is not currently a drop target
|
|
this.isTarget = false;
|
|
|
|
this.originalStyles = [];
|
|
|
|
this.type = YAHOO.example.DDPlayer.TYPE;
|
|
this.slot = null;
|
|
|
|
this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
|
|
YAHOO.log(id + " startpos: " + this.startPos, "info", "example");
|
|
},
|
|
|
|
startDrag: function(x, y) {
|
|
YAHOO.log(this.id + " startDrag", "info", "example");
|
|
var Dom = YAHOO.util.Dom;
|
|
|
|
var dragEl = this.getDragEl();
|
|
var clickEl = this.getEl();
|
|
|
|
dragEl.innerHTML = clickEl.innerHTML;
|
|
dragEl.className = clickEl.className;
|
|
|
|
Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
|
|
Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
|
|
|
|
Dom.setStyle(clickEl, "opacity", 0.1);
|
|
|
|
var targets = YAHOO.util.DDM.getRelated(this, true);
|
|
YAHOO.log(targets.length + " targets", "info", "example");
|
|
for (var i=0; i<targets.length; i++) {
|
|
|
|
var targetEl = this.getTargetDomRef(targets[i]);
|
|
|
|
if (!this.originalStyles[targetEl.id]) {
|
|
this.originalStyles[targetEl.id] = targetEl.className;
|
|
}
|
|
|
|
targetEl.className = "target";
|
|
}
|
|
},
|
|
|
|
getTargetDomRef: function(oDD) {
|
|
if (oDD.player) {
|
|
return oDD.player.getEl();
|
|
} else {
|
|
return oDD.getEl();
|
|
}
|
|
},
|
|
|
|
endDrag: function(e) {
|
|
// reset the linked element styles
|
|
YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1);
|
|
|
|
this.resetTargets();
|
|
},
|
|
|
|
resetTargets: function() {
|
|
|
|
// reset the target styles
|
|
var targets = YAHOO.util.DDM.getRelated(this, true);
|
|
for (var i=0; i<targets.length; i++) {
|
|
var targetEl = this.getTargetDomRef(targets[i]);
|
|
var oldStyle = this.originalStyles[targetEl.id];
|
|
if (oldStyle) {
|
|
targetEl.className = oldStyle;
|
|
}
|
|
}
|
|
},
|
|
|
|
onDragDrop: function(e, id) {
|
|
// get the drag and drop object that was targeted
|
|
var oDD;
|
|
|
|
if ("string" == typeof id) {
|
|
oDD = YAHOO.util.DDM.getDDById(id);
|
|
} else {
|
|
oDD = YAHOO.util.DDM.getBestMatch(id);
|
|
}
|
|
|
|
var el = this.getEl();
|
|
|
|
// check if the slot has a player in it already
|
|
if (oDD.player) {
|
|
// check if the dragged player was already in a slot
|
|
if (this.slot) {
|
|
// check to see if the player that is already in the
|
|
// slot can go to the slot the dragged player is in
|
|
// YAHOO.util.DDM.isLegalTarget is a new method
|
|
if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
|
|
YAHOO.log("swapping player positions", "info", "example");
|
|
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
|
|
this.slot.player = oDD.player;
|
|
oDD.player.slot = this.slot;
|
|
} else {
|
|
YAHOO.log("moving player in slot back to start", "info", "example");
|
|
YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
|
|
this.slot.player = null;
|
|
oDD.player.slot = null
|
|
}
|
|
} else {
|
|
// the player in the slot will be moved to the dragged
|
|
// players start position
|
|
oDD.player.slot = null;
|
|
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
|
|
}
|
|
} else {
|
|
// Move the player into the emply slot
|
|
// I may be moving off a slot so I need to clear the player ref
|
|
if (this.slot) {
|
|
this.slot.player = null;
|
|
}
|
|
}
|
|
|
|
YAHOO.util.DDM.moveToEl(el, oDD.getEl());
|
|
this.resetTargets();
|
|
|
|
this.slot = oDD;
|
|
this.slot.player = this;
|
|
},
|
|
|
|
swap: function(el1, el2) {
|
|
var Dom = YAHOO.util.Dom;
|
|
var pos1 = Dom.getXY(el1);
|
|
var pos2 = Dom.getXY(el2);
|
|
Dom.setXY(el1, pos2);
|
|
Dom.setXY(el2, pos1);
|
|
},
|
|
|
|
onDragOver: function(e, id) {
|
|
},
|
|
|
|
onDrag: function(e, id) {
|
|
}
|
|
|
|
});
|
|
|
|
var slots = [], players = [],
|
|
Event = YAHOO.util.Event, DDM = YAHOO.util.DDM;
|
|
|
|
Event.onDOMReady(function() {
|
|
// slots
|
|
slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
|
|
slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
|
|
slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
|
|
slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
|
|
slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
|
|
slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
|
|
|
|
// players
|
|
players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
|
|
players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
|
|
players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
|
|
players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
|
|
players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
|
|
players[4].addToGroup("bottomslots");
|
|
players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
|
|
players[5].addToGroup("bottomslots");
|
|
|
|
DDM.mode = document.getElementById("ddmode").selectedIndex;
|
|
|
|
Event.on("ddmode", "change", function(e) {
|
|
YAHOO.util.DDM.mode = this.selectedIndex;
|
|
});
|
|
});
|
|
|
|
})();
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|