commit 660e98325474355dcfa9cd2a766e78f4be97b59a
parent 96560a7311f23676c26aad23023cdec57515528a
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Tue, 18 May 2010 15:36:03 +0000
ports sortable (partie graphique)
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@59 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
11 files changed, 527 insertions(+), 55 deletions(-)
diff --git a/jside3/extensions-jQuery.js b/jside3/extensions-jQuery.js
@@ -305,5 +305,45 @@ jQuery.fn.extend({
// Start first blink
elem.dequeue("blink");
+ },
+ stepAnimateClass: function(from, to) {
+ var el = $(this[0]); // TODO : faire un foreach.
+ var actions = {};
+ var props = ['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'];
+
+ // Get the end
+ var end = {};
+ var oldstyle = el.attr('style');
+ var oldclasses = el.attr('className');
+ el.addClass(to);
+ $.each(props, function(i, attr) {
+ end[attr] = el.css(attr);
+ });
+ el.attr('className', oldclasses);
+ el.addClass(from);
+
+ // Prepare animations
+ $.each(props, function(i, attr) {
+ actions[attr] = {
+ elem: el[0],
+ end: end[attr],
+ pos: 0
+ };
+ $.fx.step[attr](actions[attr]);
+ });
+ el.attr('style', '');
+ el.attr('style', oldstyle);
+ el.attr('className', oldclasses);
+
+ return function(pos) {
+ if (pos === undefined) {
+ el.attr('style', '');
+ el.attr('style', oldstyle);
+ }
+ for (i in actions) {
+ actions[i].pos = pos;
+ $.fx.step[i](actions[i]);
+ }
+ }
}
});
diff --git a/jside3/index.html b/jside3/index.html
@@ -11,6 +11,8 @@
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
<script type="text/javascript" src="jquery/jquery.jqote2.js"></script>
<script type="text/javascript" src="jquery/jquery.my.enumerable.js"></script>
+ <script type="text/javascript" src="jquery/jquery.event.drag-1.5.js"></script>
+ <script type="text/javascript" src="jquery/jquery.event.drop-1.2.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" type="text/css" href="jquery/themes/custom-theme/jquery.ui.all.css" />
@@ -18,10 +20,10 @@
<script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.draggable.js"></script>
- <script type="text/javascript" src="jquery/ui/jquery.ui.droppable.js"></script>
+<!-- <script type="text/javascript" src="jquery/ui/jquery.ui.droppable.js"></script>-->
<script type="text/javascript" src="jquery/ui/jquery.ui.resizable.js"></script>
- <script type="text/javascript" src="jquery/ui/jquery.ui.sortable.js"></script>
- <script type="text/javascript" src="jquery/ui/jquery.ui.selectable.js"></script>
+<!-- <script type="text/javascript" src="jquery/ui/jquery.ui.sortable.js"></script>-->
+<!-- <script type="text/javascript" src="jquery/ui/jquery.ui.selectable.js"></script>-->
<script type="text/javascript" src="jquery/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="jquery/jquery.layout.js"></script>
@@ -49,6 +51,7 @@
<script type="text/javascript" src="mvc/instance-bloc.js"></script>
<script type="text/javascript" src="mvc/definitions.js"></script>
<script type="text/javascript" src="mvc/ports.js"></script>
+ <script type="text/javascript" src="mvc/port-in-ports.js"></script>
<script type="text/javascript" src="mvc/port.js"></script>
<script type="text/javascript" src="mvc/definition.js"></script>
@@ -143,8 +146,8 @@
<div class="clearfloat"></div>
</div>
<div class="définitions vContenus">
- <div class="définitions vPorts-entrée"></div>
- <div class="définitions vPorts-sortie"></div>
+ <table class="définitions vPorts-entrée"></table>
+ <table class="définitions vPorts-sortie"></table>
<div class="définitions vContenusTabs">
<div class="définition vCorps vAucune-définition">
Aucune définition.
@@ -158,22 +161,46 @@
</script>
<script type="text/x-jqote-template" id="vue-ports-entrée">
<![CDATA[
- <div class="ports vPorts vEntrée">
- </div>
+ <table class="ports vPorts vEntrée">
+ </table>
]]>
</script>
<script type="text/x-jqote-template" id="vue-ports-sortie">
<![CDATA[
- <div class="ports vPorts vSortie">
- </div>
+ <table class="ports vPorts vSortie">
+ </table>
]]>
</script>
<script type="text/x-jqote-template" id="vue-port">
<![CDATA[
- <span class="port vMain">
+ <span class="port vBox vMain">
+ </span>
+ ]]>
+ </script>
+ <script type="text/x-jqote-template" id="vue-port-drag">
+ <![CDATA[
+ <span class="port vBox vMain drag">
</span>
]]>
</script>
+ <script type="text/x-jqote-template" id="vue-port-in-ports">
+ <![CDATA[
+ <tr>
+ <td class="port target">
+ </td>
+ </tr>
+ ]]>
+ </script>
+ <script type="text/x-jqote-template" id="vue-port-placeholder">
+ <![CDATA[
+ <tr class="port placeholder vTr vMain">
+ <td class="port placeholder vTd">
+ <span class="port placeholder vBox">
+ </span>
+ </td>
+ </tr>
+ ]]>
+ </script>
<script type="text/x-jqote-template" id="vue-définition-titre">
<![CDATA[
<h3 class="définition vTitre">Nom de la définition</h3>
diff --git a/jside3/jquery/jquery.event.drag-1.5.js b/jside3/jquery/jquery.event.drag-1.5.js
@@ -0,0 +1,137 @@
+/*!
+jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
+Liscensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
+*/
+;(function($){ // secure $ jQuery alias
+/*******************************************************************************************/
+// Created: 2008-06-04 | Updated: 2009-03-24
+/*******************************************************************************************/
+// Events: drag, dragstart, dragend
+/*******************************************************************************************/
+
+// jquery method
+$.fn.drag = function( fn1, fn2, fn3 ){
+ if ( fn2 ) this.bind('dragstart', fn1 ); // 2+ args
+ if ( fn3 ) this.bind('dragend', fn3 ); // 3 args
+ return !fn1 ? this.trigger('drag') // 0 args
+ : this.bind('drag', fn2 ? fn2 : fn1 ); // 1+ args
+ };
+
+// local refs
+var $event = $.event, $special = $event.special,
+
+// special event configuration
+drag = $special.drag = {
+ not: ':input', // don't begin to drag on event.targets that match this selector
+ distance: 0, // distance dragged before dragstart
+ which: 1, // mouse button pressed to start drag sequence
+ dragging: false, // hold the active target element
+ setup: function( data ){
+ data = $.extend({
+ distance: drag.distance,
+ which: drag.which,
+ not: drag.not
+ }, data || {});
+ data.distance = squared( data.distance ); // x² + y² = distance²
+ $event.add( this, "mousedown", handler, data );
+ if ( this.attachEvent ) this.attachEvent("ondragstart", dontStart ); // prevent image dragging in IE...
+ },
+ teardown: function(){
+ $event.remove( this, "mousedown", handler );
+ if ( this === drag.dragging ) drag.dragging = drag.proxy = false; // deactivate element
+ selectable( this, true ); // enable text selection
+ if ( this.detachEvent ) this.detachEvent("ondragstart", dontStart ); // prevent image dragging in IE...
+ }
+ };
+
+// prevent normal event binding...
+$special.dragstart = $special.dragend = { setup:function(){}, teardown:function(){} };
+
+// handle drag-releatd DOM events
+function handler ( event ){
+ var elem = this, returned, data = event.data || {};
+ // mousemove or mouseup
+ if ( data.elem ){
+ // update event properties...
+ elem = event.dragTarget = data.elem; // drag source element
+ event.dragProxy = drag.proxy || elem; // proxy element or source
+ event.cursorOffsetX = data.pageX - data.left; // mousedown offset
+ event.cursorOffsetY = data.pageY - data.top; // mousedown offset
+ event.offsetX = event.pageX - event.cursorOffsetX; // element offset
+ event.offsetY = event.pageY - event.cursorOffsetY; // element offset
+ }
+ // mousedown, check some initial props to avoid the switch statement
+ else if ( drag.dragging || ( data.which>0 && event.which!=data.which ) ||
+ $( event.target ).is( data.not ) ) return;
+ // handle various events
+ switch ( event.type ){
+ // mousedown, left click, event.target is not restricted, init dragging
+ case 'mousedown':
+ $.extend( data, $( elem ).offset(), {
+ elem: elem, target: event.target,
+ pageX: event.pageX, pageY: event.pageY
+ }); // store some initial attributes
+ $event.add( document, "mousemove mouseup", handler, data );
+ selectable( elem, false ); // disable text selection
+ drag.dragging = null; // pending state
+ return false; // prevents text selection in safari
+ // mousemove, check distance, start dragging
+ case !drag.dragging && 'mousemove':
+ if ( squared( event.pageX-data.pageX )
+ + squared( event.pageY-data.pageY ) // x² + y² = distance²
+ < data.distance ) break; // distance tolerance not reached
+ event.target = data.target; // force target from "mousedown" event (fix distance issue)
+ returned = hijack( event, "dragstart", elem ); // trigger "dragstart", return proxy element
+ if ( returned !== false ){ // "dragstart" not rejected
+ drag.dragging = elem; // activate element
+ drag.proxy = event.dragProxy = $( returned || elem )[0]; // set proxy
+ }
+ // mousemove, dragging
+ case 'mousemove':
+ if ( drag.dragging ){
+ returned = hijack( event, "drag", elem ); // trigger "drag"
+ if ( $special.drop ){ // manage drop events
+ $special.drop.allowed = ( returned !== false ); // prevent drop
+ $special.drop.handler( event ); // "dropstart", "dropend"
+ }
+ if ( returned !== false ) break; // "drag" not rejected, stop
+ event.type = "mouseup"; // helps "drop" handler behave
+ }
+ // mouseup, stop dragging
+ case 'mouseup':
+ $event.remove( document, "mousemove mouseup", handler ); // remove page events
+ if ( drag.dragging ){
+ if ( $special.drop ) $special.drop.handler( event ); // "drop"
+ hijack( event, "dragend", elem ); // trigger "dragend"
+ }
+ selectable( elem, true ); // enable text selection
+ drag.dragging = drag.proxy = data.elem = false; // deactivate element
+ break;
+ }
+ return true;
+ };
+
+// set event type to custom value, and handle it
+function hijack ( event, type, elem ){
+ event.type = type; // force the event type
+ var result = $.event.handle.call( elem, event );
+ return result===false ? false : result || event.result;
+ };
+
+// return the value squared
+function squared ( value ){ return Math.pow( value, 2 ); };
+
+// suppress default dragstart IE events...
+function dontStart(){ return ( drag.dragging === false ); };
+
+// toggles text selection attributes
+function selectable ( elem, bool ){
+ if ( !elem ) return; // maybe element was removed ?
+ elem.unselectable = bool ? "off" : "on"; // IE
+ elem.onselectstart = function(){ return bool; }; // IE
+ //if ( document.selection && document.selection.empty ) document.selection.empty(); // IE
+ if ( elem.style ) elem.style.MozUserSelect = bool ? "" : "none"; // FF
+ };
+
+/*******************************************************************************************/
+})( jQuery ); // confine scope
+\ No newline at end of file
diff --git a/jside3/jquery/jquery.event.drop-1.2.js b/jside3/jquery/jquery.event.drop-1.2.js
@@ -0,0 +1,157 @@
+/*! jquery.event.drop.js * v1.2
+Copyright (c) 2008-2009, Three Dub Media (http://threedubmedia.com)
+Liscensed under the MIT License (http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt)
+*/;(function($){ // secure $ jQuery alias
+// Created: 2008-06-04 | Updated: 2009-03-16
+/*******************************************************************************************/
+// Events: drop, dropstart, dropend
+/*******************************************************************************************/
+
+// JQUERY METHOD
+$.fn.drop = function( fn1, fn2, fn3 ){
+ if ( fn2 ) this.bind('dropstart', fn1 ); // 2+ args
+ if ( fn3 ) this.bind('dropend', fn3 ); // 3 args
+ return !fn1 ? this.trigger('drop') // 0 args
+ : this.bind('drop', fn2 ? fn2 : fn1 ); // 1+ args
+ };
+
+// DROP MANAGEMENT UTILITY
+$.dropManage = function( opts ){ // return filtered drop target elements, cache their positions
+ opts = opts || {};
+ // safely set new options...
+ drop.data = [];
+ drop.filter = opts.filter || '*';
+ drop.delay = opts.delay || drop.delay;
+ drop.tolerance = opts.tolerance || null;
+ drop.mode = opts.mode || drop.mode || 'intersect';
+ // return the filtered set of drop targets
+ return drop.$targets.filter( drop.filter ).each(function(){
+ // locate and store the filtered drop targets
+ drop.data[ drop.data.length ] = drop.locate( this );
+ });
+ };
+
+// local refs
+var $event = $.event, $special = $event.special,
+
+// SPECIAL EVENT CONFIGURATION
+drop = $special.drop = {
+ delay: 100, // default frequency to track drop targets
+ mode: 'intersect', // default mode to determine valid drop targets
+ $targets: $([]), data: [], // storage of drop targets and locations
+ setup: function(){
+ drop.$targets = drop.$targets.add( this );
+ drop.data[ drop.data.length ] = drop.locate( this );
+ },
+ teardown: function(){ var elem = this;
+ drop.$targets = drop.$targets.not( this );
+ drop.data = $.grep( drop.data, function( obj ){
+ return ( obj.elem !== elem );
+ });
+ },
+ // shared handler
+ handler: function( event ){
+ var dropstart = null, dropped;
+ event.dropTarget = drop.dropping || undefined; // dropped element
+ if ( drop.data.length && event.dragTarget ){
+ // handle various events
+ switch ( event.type ){
+ // drag/mousemove, from $.event.special.drag
+ case 'drag': // TOLERATE >>
+ drop.event = event; // store the mousemove event
+ if ( !drop.timer ) // monitor drop targets
+ drop.timer = setTimeout( tolerate, 20 );
+ break;
+ // dragstop/mouseup, from $.event.special.drag
+ case 'mouseup': // DROP >> DROPEND >>
+ drop.timer = clearTimeout( drop.timer ); // delete timer
+ if ( !drop.dropping ) break; // stop, no drop
+ if ( drop.allowed )
+ dropped = hijack( event, "drop", drop.dropping ); // trigger "drop"
+ dropstart = false;
+ // activate new target, from tolerate (async)
+ case drop.dropping && 'dropstart': // DROPSTART >> ( new target )
+ dropstart = dropstart===null && drop.allowed ? true : false;
+ // deactivate active target, from tolerate (async)
+ case drop.dropping && 'dropend': // DROPEND >>
+ hijack( event, "dropend", drop.dropping ); // trigger "dropend"
+ drop.dropping = null; // empty dropper
+ if ( dropped === false ) event.dropTarget = undefined;
+ if ( !dropstart ) break; // stop
+ // activate target, from tolerate (async)
+ case drop.allowed && 'dropstart': // DROPSTART >>
+ event.dropTarget = this;
+ drop.dropping = hijack( event, "dropstart", this )!==false ? this : null; // trigger "dropstart"
+ break;
+ }
+ }
+ },
+ // returns the location positions of an element
+ locate: function( elem ){ // return { L:left, R:right, T:top, B:bottom, H:height, W:width }
+ var $el = $(elem), pos = $el.offset(), h = $el.outerHeight(), w = $el.outerWidth();
+ return { elem: elem, L: pos.left, R: pos.left+w, T: pos.top, B: pos.top+h, W: w, H: h };
+ },
+ // test the location positions of an element against another OR an X,Y coord
+ contains: function( target, test ){ // target { L,R,T,B,H,W } contains test [x,y] or { L,R,T,B,H,W }
+ return ( ( test[0] || test.L ) >= target.L && ( test[0] || test.R ) <= target.R
+ && ( test[1] || test.T ) >= target.T && ( test[1] || test.B ) <= target.B );
+ },
+ // stored tolerance modes
+ modes: { // fn scope: "$.event.special.drop" object
+ // target with mouse wins, else target with most overlap wins
+ 'intersect': function( event, proxy, target ){
+ return this.contains( target, [ event.pageX, event.pageY ] ) ? // check cursor
+ target : this.modes['overlap'].apply( this, arguments ); // check overlap
+ },
+ // target with most overlap wins
+ 'overlap': function( event, proxy, target ){
+ // calculate the area of overlap...
+ target.overlap = Math.max( 0, Math.min( target.B, proxy.B ) - Math.max( target.T, proxy.T ) )
+ * Math.max( 0, Math.min( target.R, proxy.R ) - Math.max( target.L, proxy.L ) );
+ if ( target.overlap > ( ( this.best || {} ).overlap || 0 ) ) // compare overlap
+ this.best = target; // set as the best match so far
+ return null; // no winner
+ },
+ // proxy is completely contained within target bounds
+ 'fit': function( event, proxy, target ){
+ return this.contains( target, proxy ) ? target : null;
+ },
+ // center of the proxy is contained within target bounds
+ 'middle': function( event, proxy, target ){
+ return this.contains( target, [ proxy.L+proxy.W/2, proxy.T+proxy.H/2 ] ) ? target : null;
+ }
+ }
+ };
+
+// set event type to custom value, and handle it
+function hijack ( event, type, elem ){
+ event.type = type; // force the event type
+ try { var result = $event.handle.call( elem, event );
+ } catch ( ex ){ /* catch IE error with async event handling */ }
+ return result===false ? false : result || event.result;
+ };
+
+// async, recursive tolerance execution
+function tolerate (){
+ var i = 0, drp, winner, // local variables
+ xy = [ drop.event.pageX, drop.event.pageY ], // mouse location
+ drg = drop.locate( drop.event.dragProxy ); // drag proxy location
+ drop.tolerance = drop.tolerance || drop.modes[ drop.mode ]; // custom or stored tolerance fn
+ do if ( drp = drop.data[i] ){ // each drop target location
+ // tolerance function is defined, or mouse contained
+ winner = drop.tolerance ? drop.tolerance.call( drop, drop.event, drg, drp )
+ : drop.contains( drp, xy ) ? drp : null; // mouse is always fallback
+ }
+ while ( ++i<drop.data.length && !winner ); // loop
+ drop.event.type = ( winner = winner || drop.best ) ? 'dropstart' : 'dropend'; // start ? stop
+ if ( drop.event.type=='dropend' || winner.elem!=drop.dropping ) // don't dropstart on active drop target
+ drop.handler.call( winner ? winner.elem : drop.dropping, drop.event ); // handle events
+ if ( drop.last && xy[0] == drop.last.pageX && xy[1] == drop.last.pageY ) // no movement
+ delete drop.timer; // idle, don't recurse
+ else drop.timer = setTimeout( tolerate, drop.delay ); // recurse
+ drop.last = drop.event; // to compare idleness
+ drop.best = null; // reset comparitors
+ };
+
+/*******************************************************************************************/
+})(jQuery); // confine scope
+\ No newline at end of file
diff --git a/jside3/mvc/definitions.js b/jside3/mvc/definitions.js
@@ -9,15 +9,6 @@ function VDéfinitions(vInstanceBlocParente) {
this.vTitresTabs = this.find('.définitions.vTitresTabs');
this.vBoutonNouvelleDéfinition = this.find('.définitions.vNouvelle-définition');
-
- this.vBoutonNouvelleDéfinition.draggable({
- connectToSortable: '#mydiv',
- cancel: '',
- revert: 'invalid',
- helper: function() {
- return new VPort('body');
- }
- }).css('z-index', '1000');
this.vContenus = this.find('.définitions.vContenus');
this.vContenusTabs = this.find('.définitions.vContenusTabs');
@@ -29,7 +20,23 @@ function VDéfinitions(vInstanceBlocParente) {
this.aucuneDéfinition = true;
+
var that = this;
+ jQuery.event.special.drag.not = ''; // accept drag on all elements.
+ this.vBoutonNouvelleDéfinition.bind('dragstart', function(event){
+ $.dropManage({ mode:'intersect', filter:'.port.target' });
+ return $('#vue-port-drag').jqote({}).appendTo('body');
+ });
+
+ this.vBoutonNouvelleDéfinition.bind('drag', function(event){
+ $(event.dragProxy).position({my: 'center', at: 'center', of: event});
+ return true;
+ });
+
+ this.vBoutonNouvelleDéfinition.bind('dragend', function(event){
+ $(event.dragProxy).fadeOut();
+ });
+
this.ajoutVDéfinition = function(vTitreDéfinition, vCorpsDéfinition) {
if (this.aucuneDéfinition) {
this.vTitreAucuneDéfinition.hide();
@@ -53,12 +60,11 @@ function VDéfinitions(vInstanceBlocParente) {
contenuTab.show();
};
- this.setVPortsEntrée = function(vPortsEntrée) {
- this.vPortsEntrée.replaceWith(vPortsEntrée);
- };
-
- this.setVPortsSortie = function(vPortsSortie) {
- this.vPortsSortie.replaceWith(vPortsSortie);
+ this.setVPorts = function(vPorts, sens) {
+ if (sens == 'entrée')
+ this.vPortsEntrée.replaceWith(vPorts);
+ else
+ this.vPortsSortie.replaceWith(vPorts);
};
this.ajusterBarreTitres = function() {
diff --git a/jside3/mvc/monde.js b/jside3/mvc/monde.js
@@ -86,7 +86,7 @@ function MMonde(nom) {
};
/* Outils */
- this.outilZone = this.actionAucune;
+ this.outilZone = this.actionNouveauBloc;
/* Scratch */
this.mBlocScratch = new MBloc();
diff --git a/jside3/mvc/port-in-ports.js b/jside3/mvc/port-in-ports.js
@@ -0,0 +1,72 @@
+function VPortInPorts(vPortsParente, vPortFille, modèle) {
+ var pip = $('#vue-port-in-ports').jqote({}).toDom();
+ var ph1 = $('#vue-port-placeholder').jqote().toDom();
+ var ph2 = $('#vue-port-placeholder').jqote().toDom();
+ $.extend(this, pip.add(ph1).add(ph2));
+ this.pip = pip;
+ this.ph1 = ph1;
+ this.ph2 = ph2;
+
+ vPortsParente.append(this.ph1).append(this.pip).append(this.ph2);
+
+ this.pip.target = this.pip.find('.port.target');
+ this.ph1.box = ph1.find('.port.placeholder.vBox');
+ this.ph2.box = ph2.find('.port.placeholder.vBox');
+ this.ph1.td = ph1.find('.port.placeholder.vTd');
+ this.ph2.td = ph2.find('.port.placeholder.vTd');
+
+ this.pip.target.append(vPortFille);
+ this.ph1.hide();
+ this.ph2.hide();
+
+ var a1 = ph1.box.stepAnimateClass('active', '');
+ var a2 = ph2.box.stepAnimateClass('active', '');
+ var animProxy = function() {};
+ var targetMiddle = 0;
+ var insertBefore = false;
+ var dragProxy = null;
+
+ var that = this;
+ var upOrDown = function(e) {
+ if (e.pageY < targetMiddle) {
+ insertBefore = true;
+ // Glow when we get close
+ var h1 = that.ph1.td.height() / 2;
+ var dist1 = e.pageY - that.ph1.box.offY() + (that.ph1.box.height() / 2);
+ var factor1 = Math.min(1, Math.abs(dist1 / h1));
+ a1(Math.sqrt(factor1));
+ //animProxy(Math.sqrt(factor1));
+ // Hide and seek
+ that.ph1.show();
+ that.ph2.hide();
+ } else {
+ insertBefore = false;
+ // Glow when we get close
+ var h2 = that.ph2.td.height() / 2;
+ var dist2 = e.pageY - that.ph2.box.offY() + (that.ph2.box.height() / 2);
+ var factor2 = Math.min(1, Math.abs(dist2 / h2));
+ a2(Math.sqrt(factor2));
+ //animProxy(Math.sqrt(factor2));
+ // Hide and seek
+ that.ph1.hide();
+ that.ph2.show();
+ }
+ };
+
+ this.pip.target.bind('dropstart', function(e) {
+ targetMiddle = that.pip.target.offY()
+ + (that.pip.target.height() / 2);
+ /* dragProxy = e.dragProxy;
+ * animProxy = $(dragProxy).stepAnimateClass('active', ''); */
+ $('body').bind('mousemove', upOrDown);
+ upOrDown(e);
+ });
+ this.pip.target.bind('drop', function(e) {
+ e.dragTarget.droppedOn(modèle, insertBefore);
+ });
+ this.pip.target.bind('dropend', function(e) {
+ that.ph1.hide();
+ that.ph2.hide();
+ $('body').unbind('mousemove', upOrDown);
+ });
+}
+\ No newline at end of file
diff --git a/jside3/mvc/port.js b/jside3/mvc/port.js
@@ -14,16 +14,34 @@ function MPort(sens, blocParent) {
});
}
-function VPort(vPortsParente) {
+function VPort(vPortsParente, modèle) {
$.extend(this, (
$('#vue-port')
.jqote({})
.toDom()));
+
+ this.bind('dragstart', function(event){
+ $.dropManage({ mode:'intersect', filter:'.port.target' });
+ return $('#vue-port-drag').jqote({}).appendTo('body');
+ });
+
+ this.bind('drag', function(event){
+ $(event.dragProxy).position({my: 'center', at: 'center', of: event});
+ return true;
+ });
+
+ this.bind('dragend', function(event){
+ $(event.dragProxy).fadeOut();
+ });
- this.appendTo(vPortsParente);
+ vPortsParente.addVPort(this, modèle);
}
function CPort(mPort, vPortsParente) {
this.modèle = mPort;
- this.vue = new VPort(vPortsParente);
+ this.vue = new VPort(vPortsParente, this.modèle);
+
+ this.vue[0].droppedOn = function(destination, insertBefore) { // unsing this.vue[0] is a bit of a hack…
+ console.log("dropped on", destination, insertBefore);
+ };
}
diff --git a/jside3/mvc/ports.js b/jside3/mvc/ports.js
@@ -1,27 +1,27 @@
/* Pas de modèle pour ports: c'est juste une partie de définitions */
-function VPorts(vDéfinitionsParente) {
- this.vPortsEntrée = $('#vue-ports-entrée')
- .jqote({})
- .toDom();
- this.vPortsSortie = $('#vue-ports-sortie')
- .jqote({})
- .toDom();
-
- $.extend(this, this.vPortsEntrée.add(this.vPortsSortie));
+function VPorts(vDéfinitionsParente, sens) {
+ $.extend(this,(
+ $('#vue-ports-'+sens)
+ .jqote({})
+ .toDom()));
- this.vPortsSortie.sortable({
+ /*this.sortable({
revert:true,
placeholder: 'port-placeholder'
- });
+ });*/
+
+ this.addVPort = function(vPort, modèle) {
+ new VPortInPorts(this, vPort, modèle);
+ };
- vDéfinitionsParente.setVPortsEntrée(this.vPortsEntrée);
- vDéfinitionsParente.setVPortsSortie(this.vPortsSortie);
+ vDéfinitionsParente.setVPorts(this, sens);
}
function CPorts(mInstanceBloc, vDéfinitionsParente) {
this.modèle = mInstanceBloc;
- this.vue = new VPorts(vDéfinitionsParente);
+ this.vueEntrée = new VPorts(vDéfinitionsParente, 'entrée');
+ this.vueSortie = new VPorts(vDéfinitionsParente, 'sortie');
this.modèle.bloc.onAjoutPortEntrée(function(port) {
that.modèle.bloc.monde.log.envoiMessage("Ajout de port d'entrée", port);
@@ -29,11 +29,11 @@ function CPorts(mInstanceBloc, vDéfinitionsParente) {
this.modèle.bloc.onAjoutPortSortie(function(port) {
that.modèle.bloc.monde.log.envoiMessage("Ajout de port de sortie", port);
});
-
- new CPort(null, this.vue.vPortsEntrée);
- new CPort(null, this.vue.vPortsEntrée);
- new CPort(null, this.vue.vPortsEntrée);
- new CPort(null, this.vue.vPortsSortie);
- new CPort(null, this.vue.vPortsSortie);
+ new CPort('a', this.vueEntrée);
+ new CPort('b', this.vueEntrée);
+ new CPort('c', this.vueEntrée);
+
+ new CPort('d', this.vueSortie);
+ new CPort('e', this.vueSortie);
}
diff --git a/jside3/style.css b/jside3/style.css
@@ -223,7 +223,7 @@ body {
position: absolute;
top: 0;
width: 20px;
- bottom: 0;
+ height: 100%;
text-align: center;
}
@@ -236,7 +236,7 @@ body {
}
/* Port */
-.port.vMain {
+.port.vBox {
display: inline-block;
background-color: lightblue;
border: thin solid blue;
@@ -244,12 +244,22 @@ body {
height: 10px;
}
-.port-placeholder {
- display: inline-block;
+.port.vBox.drag {
+ position: absolute;
+}
+
+.port.vBox.placeholder {
background-color: lightgray;
border: thin solid gray;
- width: 10px;
- height: 10px;
+}
+
+.port.vBox.active {
+ background-color: lightgreen;
+ border: thin solid green;
+}
+
+.port.placeholder.vTd {
+ background-color: #eee;
}
/* Zone */
diff --git a/jside3/url b/jside3/url
@@ -0,0 +1,2 @@
+http://blog.threedubmedia.com/2008/08/eventspecialdrag.html
+http://blog.threedubmedia.com/2008/08/eventspecialdrop.htm
