commit 797306dea4fe3a102679fc1f20cac0cd03b5ceb4
parent f64280d45dca4c95373c73412460e7db18522533
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Wed, 28 Apr 2010 11:43:30 +0000
affichage des ports
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@25 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
| M | jside/ide.js | | | 88 | ++++++++++++++++++++++++++++++++++++++++---------------------------------------- |
| M | jside/index.html | | | 50 | ++++++++++++++++++++++++++++++++++++++++++++++---- |
| M | jside/style.css | | | 191 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------- |
3 files changed, 221 insertions(+), 108 deletions(-)
diff --git a/jside/ide.js b/jside/ide.js
@@ -38,6 +38,10 @@ String.prototype.escapeXML = function() {
.replace(/'/g, "'");
}
+String.prototype.toDom = function() {
+ return $("" + this);
+}
+
function world() {
this.blocs = [];
this.maxuid = 0;
@@ -54,6 +58,8 @@ function bloc(uid, nom, description) {
this.nom = nom || "Nouveau bloc";
this.description = description || "Aucune description.";
this.definitions = [];
+ this.entrees = 3;
+ this.sorties = 2;
b = this;
}
@@ -124,25 +130,29 @@ function rechercher(terme) {
)
.map(function(idx, elem) {
- var res = $($('#modele-resultat-recherche').jqote(elem))
- .data("uid", elem.uid)
- .click(function() {
- log(elem.uid);
- });
-
- res.find('.editer').click(function() {
- arreterRecherche();
- uiEditer(elem.uid);
- return false;
- });
-
- res.find('.utiliser').click(function() {
- arreterRecherche();
- uiUtiliser(elem.uid);
- return false;
- });
+ return $('#modele-resultat-recherche')
+ .jqote(elem)
+ .toDom()
+ .data("uid", elem.uid)
+ .click(function() {
+ log(elem.uid);
+ })
+
+ .find('.editer')
+ .click(function() {
+ arreterRecherche();
+ uiEditer(elem.uid);
+ return false;
+ })
+ .end()
- return res;
+ .find('.utiliser')
+ .click(function() {
+ arreterRecherche();
+ uiUtiliser(elem.uid);
+ return false;
+ })
+ .end();
})
.appendTo('#resultats-recherche tbody');
@@ -165,21 +175,22 @@ function uiReduireBloc () {
.toggleClass('icone-moins')
.toggleClass('icone-plus')
.parents('.bloc')
- .find('.contenu')
- .toggle()
- .end()
- .toggleResizable();
+ .find('.contenu')
+ .toggle()
+ .end()
+ .toggleResizable();
}
function uiUtiliser(uid) {
var uidParent = $w.blocActif;
log("Utilisation de " + $w.blocs[uid].nom + " pour " + $w.blocs[uidParent].nom);
-
- $($('#modele-utilisation-bloc').jqote($w.blocs[uid]))
- /*.attr('id', "utilisation-" + uidParent + "-pour-" + uid)*/
- .draggable({ containment: '#edition-' + uidParent})
- .resizable()
+
+ $('#modele-utilisation-bloc')
+ .jqote($w.blocs[uid])
+ .toDom()
+ .draggable({ containment: '#edition-' + uidParent + ' > .contenu'})
+ .resizable({ containment: '#edition-' + uidParent + ' > .contenu'}) /* Small bug here… */
.find('.reduire')
.click(uiReduireBloc)
.end()
@@ -199,27 +210,16 @@ function uiNouveauBloc() {
function nouveauBloc(nom) {
var b = $w.addBloc(nom);
- $("<div/>")
- .attr('id', "edition-" + b.uid)
- .hide()
- .appendTo('#edition-blocs');
+ $('#modele-edition-bloc')
+ .jqote(b)
+ .toDom()
+ .attr('id', "edition-" + b.uid)
+ .hide()
+ .appendTo('#edition-blocs');
return b;
}
-/* function uiShowBox() {
- var b = $w.addBloc();
-
- $('#edition').append("<div id=\"edition-" + b.uid + "\"></div>");
- var div = $('#edition-' + b.uid);
-
- div.addClass("bloc parent serialize");
- div.draggable({ containment: '#edition' });
- div.resizable();
-
- log("Nouveau bloc.");
-} */
-
jQuery.fn.extend({
blink: function (count, speed) {
elem = this;
diff --git a/jside/index.html b/jside/index.html
@@ -71,19 +71,61 @@
</tbody>
</table>
<div id="edition-blocs">
- <script type="text/x-jqote-template" id="modele-utilisation-bloc">
+ <script type="text/x-jqote-template" id="modele-edition-bloc">
<![CDATA[
- <div class="bloc">
+ <div class="editionBloc">
<div class="tete">
- <span class="reduire icone icone-moins"></span>
+ <!--<span class="reduire icone icone-moins"></span>-->
<%= this.nom %>
</div>
<div class="contenu">
- <%= this.description %>
</div>
</div>
]]>
</script>
+ <script type="text/x-jqote-template" id="modele-utilisation-bloc">
+ <![CDATA[
+ <div class="bloc">
+ <table class="agencement-bloc">
+ <tbody>
+ <tr style="height: 1em;">
+ <td colspan="3" class="tete">
+ <span class="reduire icone icone-moins"></span>
+ <%= this.nom %>
+ </td>
+ </tr>
+ <tr>
+ <td class="ports entree">
+ <table class="ports entree">
+ <tbody>
+ <% for (i = 0; i < this.entrees; i++) { %>
+ <tr>
+ <td class="port entree">●</td>
+ </tr>
+ <% } %>
+ </tbody>
+ </table>
+ </td>
+ <td style="text-align:center;" class="contenu">
+ <%= this.description %>
+ </td>
+ <td class="ports sortie">
+ <table class="ports sortie">
+ <tbody>
+ <% for (i = 0; i < this.sorties; i++) { %>
+ <tr>
+ <td class="port sortie">●</td>
+ </tr>
+ <% } %>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ ]]>
+ </script>
</div>
</div>
<div class="log">
diff --git a/jside/style.css b/jside/style.css
@@ -1,66 +1,57 @@
+/* Mise en page */
+
body {
margin: 0;
}
-.log {
- position: absolute;
- top: 75%;
- bottom: 0;
- left: 0;
- right: 0;
-}
-.log p {
- border-bottom: thin solid lightgray;
- padding: 0.7em 0.3em 0.3em;
- margin: 0;
-}
-#log-en-tete {
- padding: 0 1em;
- margin: 0;
- font-size: small;
- background-color: lightgray;
-}
+/* Tous */
-.log h2 {
- display: inline;
- font-size: 100%;
- margin-right : 1em;
+.bouton {
+ display: inline-block;
+ padding: 0.1em 0.2em;
+ margin: 0.2em;
+ text-decoration: none;
+ border-width: thin;
+ border-style: solid;
}
-#log-en-tete .bouton {
+.bouton {
color: #333;
border-color: #999;
background-color: #eee
}
-#log-en-tete .bouton:hover {
+.bouton:hover {
color: #555;
border-color: #ccc;
background-color: #fff
}
-.log .contenu {
- position: absolute;
- top: 1.7em; /* Hack, mais CSS ne nous permettra pas de faire mieux… :( */
- bottom: 0;
- left: 0;
- right: 0;
- overflow: auto;
+/* Icônes */
+
+.icone {
+ display: block;
+ font-weight: bolder;
+ color: black;
+ text-align: center;
+ min-width: 1em;
}
-#outils {
- margin: 0;
+.icone-plus:before {
+ content: "+";
}
-.bouton {
- display: inline-block;
- padding: 0.1em 0.2em;
- margin: 0.2em;
- text-decoration: none;
- border-width: thin;
- border-style: solid;
+.icone-moins:before {
+ content: "-";
+}
+
+
+
+/* Outils */
+#outils {
+ margin: 0;
}
#outils .bouton {
@@ -87,9 +78,9 @@ body {
background-color: #fed;
}
-#outils .clear {
- clear:both;
-}
+
+
+/* Zone principale */
#edition {
position: absolute;
@@ -101,6 +92,7 @@ body {
padding: 1em;
}
+/* Résultats de la recherche */
#resultats-recherche {
width: 100%;
border-collapse: collapse;
@@ -126,41 +118,120 @@ body {
right: 0;
}
+/* Édition des blocs */
+
+#edition-blocs > .editionBloc > .contenu {
+ position: absolute;
+ top: 2em;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0.2em;
+}
+
.bloc {
border: medium solid gray;
+ background-color: white;
position: absolute;
- width: 25%;
- height: 30%;
- top: 10%;
- left: 20%;
+ width: 350px;
+ height: 110px;
+ top: 100px;
+ left: 200px;
}
-.bloc .tete {
+.agencement-bloc {
+ width: 100%;
+ height: 100%;
+}
+
+.tete {
margin: 0.2em;
padding: 0.3em;
background-color: lightgray;
}
-.bloc .tete .icone {
+.bloc .tete {
+ text-align: center;
+}
+
+.tete .icone {
float: right;
}
-.bloc .contenu {
+.contenu {
padding: 0.4em;
}
-.icone {
- display: block;
- font-weight: bolder;
- color: black;
- text-align: center;
- min-width: 1em;
+.bloc .ports {
+ width:100%;
+ height:100%;
+ width: 1em;
}
-.icone-plus:before {
- content: "+";
+.bloc .ports.sortie {
+ text-align: right;
}
-.icone-moins:before {
- content: "-";
+.bloc .ports.entree {
+ text-align: left;
+}
+
+.bloc .port.sortie:hover {
+ color: green;
+}
+
+.bloc .port.entree:hover {
+ color: green;
+}
+
+
+
+/* Log */
+
+.log {
+ position: absolute;
+ top: 75%;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.log p {
+ border-bottom: thin solid lightgray;
+ padding: 0.7em 0.3em 0.3em;
+ margin: 0;
+}
+
+#log-en-tete {
+ padding: 0 1em;
+ margin: 0;
+ font-size: small;
+ background-color: lightgray;
+}
+
+.log h2 {
+ display: inline;
+ font-size: 100%;
+ margin-right : 1em;
+}
+
+#log-en-tete .bouton {
+ color: #333;
+ border-color: #999;
+ background-color: #eee
+}
+
+#log-en-tete .bouton:hover {
+ color: #555;
+ border-color: #ccc;
+ background-color: #fff
+}
+
+.log .contenu {
+ position: absolute;
+ top: 1.7em; /* Hack, mais CSS ne nous permettra pas de faire mieux… :( */
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow: auto;
}
