commit 34b885120a773f06d4708eb327a0278c788af6cf
parent f1a36e2bd91ad89b528a643aa57ac046f5ae586c
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Sun, 9 May 2010 02:50:06 +0000
toolkit marche, pas encore d'héritage des widgets, quelques widgets : window, hcontainer, vcontainer, box, + autres
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@34 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
4 files changed, 393 insertions(+), 208 deletions(-)
diff --git a/jside2/index.html b/jside2/index.html
@@ -33,7 +33,7 @@
<div id="test-table-layout" class="tk window">
<table style="height:100%; width:100%;">
<tr style="height:1px">
- <td class="tk title">
+ <td class="tk titre">
<div class="tk box">
Titre
<br/>
@@ -91,7 +91,7 @@
</div>
</div>
<div id="test-js-layout" class="tk window">
- <div class="tk title">
+ <div class="tk titre">
<table class="tk box-table">
<tr>
<td>
@@ -109,10 +109,8 @@
<div class="tk contenu auto-height">
<table class="tk box-table">
<tr>
- <td>
- <div class="tk box">
- Contenu A
- </div>
+ <td class="tk box">
+ Contenu A
</td>
</tr>
</table>
@@ -140,8 +138,6 @@
</table>
</div>
</div>
- <div id="test-tk-layout" class="tk window">
- </div>
<script type="text/x-jqote-template" id="tk-box">
<![CDATA[
<table class="tk box-table">
@@ -156,8 +152,8 @@
<script type="text/x-jqote-template" id="tk-window">
<![CDATA[
<div class="tk window">
- <div class="tk title">
- <%:title%>
+ <div class="tk titre">
+ <%:titre%>
</div>
<div class="tk contenu auto-height">
<%:contenu%>
diff --git a/jside2/test.css b/jside2/test.css
@@ -10,7 +10,7 @@
left: 700px;
}
-#test-tk-layout {
+#test-tk-widget {
left: 1000px;
}
@@ -28,7 +28,7 @@
top:100px;
}
-.tk.title {
+.tk.titre {
text-align: center;
}
@@ -46,26 +46,43 @@
border-collapse: collapse;
}
+.tk.box-td {
+ padding: 0;
+}
+
+.tk.hcontainer-clear {
+ clear: both;
+}
+
+.tk.bouton {
+ text-align: center;
+ border: thin solid gray;
+ font-weight: bold;
+}
+
+.tk.bouton:hover {
+ color: blue;
+ border-color: black;
+ cursor: default;
+}
+
/* Couleurs */
.tk.window {
border: thin solid red;
}
-.tk.title .tk.box {
+.tk.barre-titre {
background-color: lightgreen;
border: thin solid green;
- margin: 5px;
}
.tk.contenu .tk.box {
background-color: lightblue;
border: thin solid blue;
- margin: 5px;
}
.tk.pied .tk.box {
- background-color: lightgray;
- border: thin solid gray;
- margin: 5px;
+ //background-color: lightgray;
+ //border: thin solid gray;
}
diff --git a/jside2/tk/test.js b/jside2/tk/test.js
@@ -2,15 +2,7 @@ $(function () {
$('#test-ui-layout').layout({ applyDefaultStyles: true });
$('#test-ui-layout').children('.ui-layout-north').draggable();
- var outer = 0;
- $('#test-js-layout')
- .each(function (i, e) {
- if ($(e).is('.auto-height')) {
- outer += $(e).outerHeight() - $(e).innerHeight();
- }
- });
-
- var container =
+ /*var container =
$('#test-js-layout');
var total = (container)
.innerHeight();
@@ -24,5 +16,5 @@ $(function () {
(container)
.children('.auto-height')
- .height((total - minus) / nbshares);
+ .height((total - minus) / nbshares);*/
});
diff --git a/jside2/tk/tk.js b/jside2/tk/tk.js
@@ -1,203 +1,383 @@
-function widget(nom, options) {
- if (options === undefined && typeof nom == 'object') {
- var ret = {};
- var widgets = nom;
- for (n in widgets) {
- ret[n] = (widget(n, widgets[n]));
+// Hack pour récupérer les options
+/*var options;
+
+var hackOptions = {
+ options: function(opts) {
+ args = [];
+ for (i = 0; i < arguments.length; i++)
+ args.push(arguments[i]);
+ throw { hackOptions: args };
+ }
+};
+try {
+ def(hackOptions);
+} catch (e) {
+ if ('hackOptions' in e) { options = e.hackOptions; }
+ else { throw e; }
+}*/
+// Fin hack options.
+
+/* Création du hash des options et
+ * du tableau des options positionnelles. */
+function makeOptionsHash(defpos) {
+ var positions = [];
+ var defauts = {};
+ var positionnel = true;
+
+ for (var i = 0; i < defpos.length; i += 2) {
+ var k = defpos[i];
+ var v = defpos[i+1];
+
+ if (k === false || k === null) {
+ positionnel = false;
+ i--; // ne pas prendre la valeur
+ continue;
}
- return ret;
- } else {
- var w = function(opt) {
- return $('#tk-' + nom)
- .jqote($.extend(true, {}, options, opt));
- };
- w.options = options;
- w.nom = nom;
+ if (positionnel)
+ positions.push(k);
- return w;
+ defauts[k] = v;
}
+
+ return {
+ positions: positions,
+ defauts: defauts
+ };
}
+function _options(h, defpos) {
+ var defposhash = makeOptionsHash(defpos);
+ var positions = defposhash.positions;
+ var defauts = defposhash.defauts;
+ var params = {};
+ var firstRest = 0;
+
+ if (h.realArgs[0] && h.realArgs[0].singleton === h.singleton) {
+ // Hash de paramètres nommés dans realArgs[2]
+ params = h.realArgs[1];
+ firstRest = 2;
+ } else {
+ // Paramètres positionnels
+ for (var i = 0; i < Math.min(h.realArgs.length, positions.length); i++) {
+ params[positions[i]] = h.realArgs[i];
+ }
+ firstRest = i;
+ }
+
+ // Reste des arguments
+ for (var i = firstRest; i < h.realArgs.length; i++) {
+ elem = h.realArgs[i];
+ if (elem === null || elem === false) {
+ continue;
+ }
+ if (typeof elem == "string")
+ elem = $('<span/>').text(elem); // $(document.createTextNode(elem)) ne marche pas
+
+ h.rest = h.rest.add(elem);
+ }
+
+ $.extend(h.futurethis, defauts, params);
+}
-$(function () {
+(function() {
+ var singleton = { ans: $() };
+
+ function _uscore(h, args) {
+ if (args.length == 0) {
+ return h.singleton.ans;
+ } else if (args[0] == 'rest') {
+ return h.rest;
+ } else if (args.length == 1) {
+ var sel = args[0];
+ var ret = $();
+ for (var i = 0; i < sel.length; i++) {
+ ret = ret.add(h.rest[sel[i]]); // TODO : vérifier si ça serait pas ret.add($(...))
+ }
+ return ret;
+ }
+ }
+
+ __widget = function (famille, nom, defwidget) {
+ famille[nom] = function() {
+ var h = {
+ singleton: singleton,
+ nom: nom,
+ realArgs: $.makeArray(arguments),
+ newArgs: [], // $.makeArray(arguments)
+ futurethis: {},
+ rest: $(),
+ uscore: function() {
+ return _uscore(h, arguments);
+ }
+ }
+
+ h.uscore.singleton = h.singleton;
+ h.newArgs.unshift(h.uscore);
+
+ $.extend(h.uscore, famille, {
+ options: function() {
+ return _options(h, arguments);
+ }
+ });
+
+ var ret = defwidget.apply(h.futurethis, h.newArgs);
+ if (ret === undefined) { ret = h.singleton.ans; }
+ h.singleton.ans = ret;
+ return ret;
+ };
+ }
+})()
+
+function _widget(famille, defs) {
+ $.each(defs, function(nom, def) {
+ __widget(famille, nom, def);
+ });
+
+ return famille;
+}
+
+function paire(k,v) {
+ var r = {};
+ r[k] = v;
+ return r;
+}
+
+/* Usage :
+ * widget({définitions});
+ * widget(nom, définition);
+ * widget(Famille, {définitions});
+ * widget(Famille, nom, définition);
+ */
+function widget(a, b, c) {
+ var is_fn = (arguments[1] instanceof Function);
+
+ if (arguments.length == 1) return _widget({}, a);
+ if (arguments.length == 2) return _widget(is_fn ? {} : a,
+ is_fn ? paire(a,b) : b);
+ if (arguments.length == 3) return _widget(a, paire(b,c));
+}
+
+/* API :
+ *
+ * widget({
+ * nomWidget1: function(_) {
+ * _.options(
+ * 'monOption', 'valeur par défaut 1', // option positionnelle 1
+ * 'truc', 'valeur par défaut 2', // option positionnelle 2
+ * 'etc', 'valeur par défaut n', // option positionnelle n
+ * null, // ou false
+ * 'uneOption', 'valeur par défaut A', // option nommée uneOption
+ * 'uneAutre', 'valeur par défaut B', // option nommée uneAutre
+ * );
+ * // Chaque widget doit renvoyer un élément, créé par ex. avec $('<div/>'),
+ * // ou avec un autre widget.
+ * return _.autreWidget('Titre', 'Blabla', // On params positionnels de autreWidget
+ * // Mettre _ juste avant le hash d'options nommées.
+ * _.encoreUnAutreWidget(_, {sonOptionNommée: 3, sonTrucPositionnel: 5}),
+ * $("<div>un élément</div>"),
+ * // _('rest') contient le reste des options
+ * _('rest'));
+ * },
+ * autreWidget: function(_) {
+ * ...
+ * }
+ * });
+ *
+ */
+
+(function ($) {
var w = widget({
bloc: function(_) {
- options({
- nom: 'Exemple',
- description: "Un bloc d'exemple"
- });
- return _.window(this.nom, this.description);
+ _.options(
+ 'nom', 'Exemple',
+ 'description', "Un bloc d'exemple"
+ );
+
+ _.window(this.nom, this.description);
},
- window: function(_) {
- options({
- titre: 'Titre',
- contenu: 'Contenu',
- pied: ''
- });
- return _.div('tk window',
- _.div('tk titre', _.box(this.titre))
- _.div('tk contenu', _.box(this.contenu))
- _.div('tk pied', _.box(this.pied)));
+ boutonReduire: function(_) {
+ _.options();
+ _.square('tk bouton reduire','-');
},
- box: function(_) {
- options({ contenu: '' });
- return _.table('tk box-table',
- _.tr('tk box-tr',
- _.td({class: 'tk box-td box', css: {'text-align': _('hpos'), 'vertical-align': _('vpos')} },
- this.contenu)));
- }
-
- /*
- bloc: {
- window: {
- titre: _(nom),
- contenu: _(description),
- },
- options: {
- nom: '?',
- description: '?'
- }
+ boutonFermer: function(_) {
+ _.options();
+ _.square('tk bouton reduire','×');
},
- window: {
- 'div.tk.window': {
- 'div.tk.titre': {
- box: _('titre')
- },
- 'div.tk.contenu.auto-height': {
- box: _('contenu')
- },
- 'div.tk.pied': {
- box: _('pied')
- }
- },
- options: {
- title: 'Titre',
- contenu: 'Contenu',
- pied: ''
- }
+ barreTitre: function(_) {
+ _.options(
+ 'titre', 'Titre',
+ 'canClose', true,
+ 'canReduce', true
+ );
+
+ _.hcontainer('tk barre-titre', [1],
+ fermer = _.div('tk fermer', _.boutonFermer()),
+ titre = _.div('tk titre', _.box(this.titre)),
+ reduire = _.div('tk reduire', _.boutonReduire()));
},
- box: {
- 'table.tk.box-table': {
- 'tr.tk.box-tr': {
- 'td.tk.box-td.box': {
- css: {'text-align': _('hpos'), 'vertical-align': _('vpos')},
- subwidget: {
- _('contenu') }}}},
- options: {
- contenu: '',
- hpos: 'center',
- vpos: 'center'
- }
- }
-
- box3: {
- 'table.tk.box-table': {
- 'tr.tk.box-tr': {
- 'td.tk.box-td.box': {
- css: {'text-align': _('hpos'), 'vertical-align': _('vpos')},
- subwidget: {
- _('contenu') }}}},
- options: {
- contenu: '',
- hpos: 'center',
- vpos: 'center'
+ window: function(_) {
+ _.options(
+ 'titre', 'Titre',
+ 'contenu', 'Contenu',
+ 'pied', '',
+ null,
+ 'width', 300,
+ 'height', 150,
+ 'canReduce', true,
+ 'canClose', true,
+ 'canDock', true
+ );
+
+ _.vcontainer('tk window', [1],
+ _.barreTitre(this.titre, this.canClose, this.canReduce),
+ _.div('tk contenu', _.box(this.contenu)),
+ _.div('tk pied', _.box(this.pied)));
+
+ _().width(this.width);
+ _().height(this.height);
+
+ if (!this.canClose) {
+ fermer.hide();
}
},
- box2: {
- options: {
- contenu: '',
- hpos: 'center',
- vpos: 'center'
- },
- gen7:
- ['table.tk.box-table',
- ['tr.tk.box-tr',
- ['td.tk.box-td.box',
- {css: {'text-align': _('hpos'), 'vertical-align': _('vpos')}
- truc: {}}
- ['subwidget',
- _('contenu') ]]]
- {
- contenu: '',
- hpos: 'center',
- vpos: 'center'
- }
- ],
-
- gen6: {
- 'table.tk.box-table': {
- 'tr.tk.box-tr': {
- 'td.tk.box-td.box': {
- css: {'text-align': _('hpos'), 'vertical-align': _('vpos')},
- truc: {}
- subwidget: _('contenu') }}}},
- gen5: function(_,$$) {
- return {
- 'table.tk.box-table': {
- 'tr.tk.box-tr': {
- 'td.tk.box-td.box': {
- css: {'text-align': this.hpos, 'vertical-align': this.vpos},
- subwidget: {
- this.contenu }}}}}
- },
- gen4: function() {
- return ['table', 'tk box-table',
- ['tr', 'tk box-tr',
- ['td', {class: 'tk, box-td', 'text-align', this.hpos, 'vertical-align', this.vpos},
- ['subwidget', this.contenu]]];
- gen3: function() {
- return table('tk box-table',
- tr('tk box-tr',
- td({class: 'tk, box-td', 'text-align', this.hpos, 'vertical-align', this.vpos},
- this.contenu)))
- }
- gen2: function() {
- $('<table class="tk box-table"/>')
- .append('<tr class="tk box-tr"/>')
- .append('<td class="tk box-td box"/>')
- .css('text-align', this.hpos, 'vertical-align', this.vpos)
- .append(this.contenu)
- .end()
- .end()
- .end();
- },
- gen: function() {
- return {
- tag: 'table',
- class: 'tk box-table',
- content: {
- tag: 'tr',
- class:'tk box-tr',
- content: {
- tag: 'td',
- class: 'tk box-td box',
- css: {'text-align':this.hpos, 'vertical-align': this.vpos},
- content: this.contenu
- }
- }
- }
- }
+ square: function(_) {
+ _.options('class', '');
+ _.div(_, this,
+ _('rest'));
+
+ _().square();
+ },
+ hcontainer: function(_) {
+ _.options(
+ 'class', '',
+ 'autoWidth', []
+ );
+
+ _(this.autoWidth).addClass('auto-width');
+
+ _.div(_, this,
+ _('rest'));
+
+ _().children()
+ .css('float', 'left');
+ _().append('<div class="tk hcontainer-clear">');
+
+ _().autoHsize();
+
},
- box: {
- contenu: '',
- hpos: 'center',
- vpos: 'center'
+ vcontainer: function(_) {
+ _.options(
+ 'class', '',
+ 'autoHeight', []
+ );
+
+ _(this.autoHeight).addClass('auto-height');
+
+ _.div(_, this,
+ _('rest'));
+
+ _().autoVsize();
},
- window: {
+ box: function(_) {
+ _.options(
+ null,
+ 'hpos', false,
+ 'vpos', false
+ );
+
+ css = {};
+ if (this.hpos) { css['text-align'] = this.hpos; }
+ if (this.vpos) { css['vertical-align'] = this.vpos; }
- }*/
+ _.table('tk box-table',
+ _.tr('tk box-tr',
+ _.td(_, {class: 'tk box-td box', css: css },
+ _('rest'))));
+ }
});
- var box = widget('box', {
- contenu: '',
- hpos: 'center',
- vpos: 'center'
+ var htmlElements = [
+ 'div', 'span',
+ 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'tfoot',
+ ];
+
+ $.each(htmlElements, function(i, elem) {
+ widget(w, elem, function(_) {
+ _.options(
+ 'class', ''
+ );
+
+ return $('<' + elem + '/>', this).append(_('rest'));
+ });
});
- w.box({
- contenu:'abc',
- hpos: 'left',
- vpos: 'top',
- }).appendTo('#test-tk-layout');
+ tk = w;
+})(jQuery);
+
+
+jQuery.fn.extend({
+ autoHsize: function() {
+ var that = this;
+ window.setTimeout(function() { $(that)._autoHsize(); });
+ },
+ autoVsize: function() {
+ var that = this;
+ window.setTimeout(function() { $(that)._autoVsize(); });
+ },
+ _autoVsize: function() {
+ var total = $(this)
+ .innerHeight();
+ var minus = $(this)
+ .children(':not(.auto-height)')
+ .invoke('outerHeight', true)
+ .sum();
+ var nbshares = $(this)
+ .children('.auto-height')
+ .size();
+
+ $(this)
+ .children('.auto-height')
+ .height((total - minus) / nbshares);
+
+ return this;
+ },
+ _autoHsize: function() {
+ var total = $(this)
+ .innerWidth();
+ var scope = $(this)
+ .children(':visible:not(.tk.hcontainer-clear)');
+ var minus = (scope)
+ .not('.auto-width')
+ .invoke('outerWidth', true)
+ .sum();
+ var nbshares = (scope)
+ .filter('.auto-width')
+ .size();
+
+ (scope)
+ .filter('.auto-width')
+ .width((total - minus) / nbshares);
+
+ return this;
+ },
+ square: function() {
+ var that = this;
+ window.setTimeout(function() { $(that)._square(); });
+ },
+ _square: function() {
+ if ($(this).width() < $(this).height()) {
+ $(this.width($(this).height()));
+ } else {
+ $(this.height($(this).width()));
+ }
+ return this;
+ }
+});
+
+$(function () {
+ tk.bloc('Un bloc')
+ .attr('id', 'test-tk-widget')
+ .appendTo('body')
+ .autoVsize();
});
