commit 52e6b6ab75a48f89c04f94e8648cd21f7eb1151b
parent f746fe5e9eac38468027b6ad17a9c8e08f5b5a55
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Mon, 19 Apr 2010 02:54:17 +0000
Blocs redimensionnables et déplaçables, améliorations du log, un peu de sucre.
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@18 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
8 files changed, 65 insertions(+), 9 deletions(-)
diff --git a/jside/jquery-1.4.2.url b/jside/.url/jquery-1.4.2.url
diff --git a/jside/jquery.scrollTo.url b/jside/.url/jquery.scrollTo.url
diff --git a/jside/.url/ui.url b/jside/.url/ui.url
@@ -0,0 +1 @@
+http://jqueryui.com/download
+\ No newline at end of file
diff --git a/jside/ide.js b/jside/ide.js
@@ -2,6 +2,10 @@ $(document).ready(function () {
setTimeout(init, 200);
});
+$(function() {
+ $("#resizable").resizable();
+});
+
function init() {
$w = new world();
@@ -9,9 +13,12 @@ function init() {
$('#nouveau-lien').click(uiNouveauLien);
logPause = false;
$('#log-pause').click(logPauseToggle);
+
+ $('#test').resizable();
log("Démarré.");
log("Ajoutez des blocs à l'espace de travail pour construire un programme.");
+ blink('#nouveau-bloc');
}
function world() {
@@ -33,14 +40,14 @@ function bloc(uid) {
function uiNouveauBloc() {
var b = $w.addBloc();
+
$('#edition').append("<div id=\"edition-" + b.uid + "\"></div>");
var div = $('#edition-' + b.uid);
- div.width(250);
- div.height(100);
- div.css('top', 100);
- div.css('left', 200);
-/* div.left(100); */
+
div.addClass("bloc parent");
+ div.draggable({ containment: '#edition' });
+ div.resizable();
+
log("Nouveau bloc.");
}
@@ -60,6 +67,20 @@ function logPauseToggle() {
}
}
+function blink(elem) {
+ blinkToRed(elem, 10);
+}
+
+function blinkToRed(elem, count) {
+ if (count > 0) {
+ $(elem).switchClass('boutonNormal', 'boutonHover', 500, function() { blinkToGreen(elem, count); });
+ }
+}
+
+function blinkToGreen(elem, count) {
+ $(elem).switchClass('boutonHover', 'boutonNormal', 500, function() { blinkToRed(elem, count - 1); });
+}
+
function log(msg) {
var elem = $('#log-contenu').append("<p>"+msg+"</p>");
if (!logPause) {
diff --git a/jside/index.html b/jside/index.html
@@ -4,8 +4,22 @@
<head>
<title>IDE</title>
<link rel="stylesheet" type="text/css" href="style.css" />
- <script type="text/javascript" src="jquery-1.4.2.js"></script>
- <script type="text/javascript" src="jquery.scrollTo.js"></script>
+ <link href="jquery/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
+
+ <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
+
+ <script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
+ <script type="text/javascript" src="jquery/jquery.color.js"></script>
+
+ <script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
+ <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.resizable.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.ui.effects.core.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.effects.core.js"></script>
+
<script type="text/javascript" src="ide.js"></script>
</head>
<body id="body">
diff --git a/jside/jquery-1.4.2.js b/jside/jquery/jquery-1.4.2.js
diff --git a/jside/jquery.scrollTo.js b/jside/jquery/jquery.scrollTo.js
diff --git a/jside/style.css b/jside/style.css
@@ -64,6 +64,15 @@ body {
}
#outils .bouton {
+}
+
+#outils .bouton {
+ color: #242;
+ border-color: #8a8;
+ background-color: #efd;
+}
+
+#outils .boutonNormal {
color: #242;
border-color: #8a8;
background-color: #efd;
@@ -75,6 +84,12 @@ body {
background-color: #fed;
}
+#outils .boutonHover {
+ color: #422;
+ border-color: #a88;
+ background-color: #fed;
+}
+
#outils .clear {
clear:both;
}
@@ -86,10 +101,15 @@ body {
bottom: 25%;
left: 0;
right: 0;
+ padding: 1em;
}
.bloc.parent {
background-color: lightgray;
border: medium solid gray;
position: absolute;
-}
-\ No newline at end of file
+ width: 25%;
+ height: 30%;
+ top: 10%;
+ left: 20%;
+}
