OVH Cloud OVH Cloud

mon mini-toolkit de fenêtrage

35 réponses
Avatar
whygee
J'avais vu il y a qqs ann=E9es un exemple de syst=E8me de fen=EAtrage
pour pages HTML en JavaScript. Je ne l'ai pas retrouv=E9, par
contre j'ai trouv=E9 plusieurs trucs plus ou moins gros ou
mal faits... Et j'ai des besoins assez particuliers,
alors une journ=E9e de boulot et voil=E0 :

http://yasep.org/~whygee/ygwm/ygwm.html

Vu que je n'ai pas recherch=E9 la compatibilit=E9 MSIE,
et que mon application est relativement simple et "sp=E9ciale",
le code est assez court, presque propre, facile =E0 (r=E9)utiliser
(3 petits fichiers) et la CSS permet de bricoler les couleurs
si elles ne conviennent pas :-)

Je me dis que =E7a peut aider des gens ici ou l=E0...

--=20
http://ygdes.com / http://yasep.org

10 réponses

1 2 3 4
Avatar
whygee
SAM wrote:
Ça fonctionne avec mon IE.6
Enfin ... ça fonctionne ... il doit manquer des cancel-du-bulbe car a u
drag ça sélectionne tout le texte que ça peut trouver, sinon tout semble
marcher pareil qu'avec Fx.



j'ai trouvé qqs raisons :
comme j'ai zappé IE, j'ai pas utilisé window.event
et en plus j'ai pas retourné false de tous les handlers
(vu que ça marchait sans sous ff, ça gagne 1 ligne à chaque fois)

--
http://ygdes.com / http://yasep.org
Avatar
SAM
Le 2/10/09 6:52 PM, whygee a écrit :
re,

SAM wrote:
Le 2/9/09 11:15 PM, whygee a écrit :
_o/ Merci pour le beta-test :-)


Je dois avouer que pour un guitariste c'est pas trop mal :-)


?



Tu ne grattes pas ?
C'est pas pour assembler des notes que tu crées ce bignou ?

comment dire... 9WM n'a pas de bouton.
aucune décoration. faut tout faire avec un menu
déroulant avec click droit. et encore les fonctions
sont réduites au minimum...



Arrrrgggghhhh !

CTRL+6 ou CTRL+0 plus les flèches ou les scrollbars
et on a presque le début d'un logiciel de CAO :-D


Ouais ... bon ...


pour moi c'est très important...



c a d que ... un logiciel de CAO (tel que je le vois et utilise) en
Javascript ... boudiou !

Ha! mais si tu aimes les touches pour agir sur les élements, voici :
<http://www.quirksmode.org/js/dragdrop.html>

ce raccourci est déjà occupé par le popup-menu du brouteur




ce qui n'empêche pas que ça se duplique pas dessous le menu.


??? "pourtant ça marche chez moi" :-/



mais "chez moi" aussi ... pas bien.

Je réserve SHIFT pour sélectionner un groupe de lignes.



Ha ben là c'est déjà pris aussi.
clic ici
shift+clic là
tout ce qui est entre les 2 est sélectionné
C'est une propriété du Système !


ben je voulais faire pareil....



Sauf que au naturel ça ne sélectionne que le texte apparent (pas les
tags, mais peut-être avec conversion entre cellules par tab)

mais bon, c'était juste des protos, j'écris tout à la main... etc. :-)
donc ça fait un peu chier de taper "<span style="font-weight:bold">"



Oui, mais non, il ne sert à rien de faire des protos qui seront
complètement à retravailler par la suite juste par méconnaissance ou
pour "aller vite".

et puis 3 lignes de css en haut de page pour enjoliver le rendu ...

<span>rouge</span>
<strong><span>gras rouge</span></strong>
<span><strong>gras bleu</strong></span>
<span><span><strong>gras et gros bleu</strong></span></span>
<code> <tt> <em>
Ya pleins de trucs à faire rien qu'avec les qques tags dispos.
(avec ta BMW9 ça va aller tt seul par racourcis-clavier)

suffit de faire dans le JS
truc.machin.style.left = otr.chose + 'px';
*plus px* !


ah ben si c'était si simple, pourquoi j'ai pas trouvé tout seul ? :-(



Peut-être n'y avait-il pas que ça à l'époque ?
(j'avoue que je suis un peu perdu dans ton système qui fait des A/R
continuels de haut en bas des lignes qu'on ne sait + très bien où on a
besoin d'unités et où il n'en faut surtout pas)

(si on en a un pour dupliquer, on pourrait en avoir un pour gommer)


hmmmm....
à voir...


ben le [+] se transforme en [-] et hop!


"se transforme" ?



Laisse tomber,
le [+] semblant indispensable.

--
sm
Avatar
SAM
Le 2/10/09 6:02 PM, whygee a écrit :
SAM wrote:
Le 2/9/09 3:25 AM, whygee a écrit :


mais il y a des classes partagées, pour factoriser
les définitions dans la CSS...



Oui, j'ai vu. Des trucs à rallonges et pénibles à taper.
Mébon, on n'a qu'à s'adresser aux IDs pour ceux-là.

ou à la class quand-même :

if ( t[i].id == name || t[i].className.indexOf(name)>=0 )


je préfère quand le if est bien explicite, sinon c'est plus lourd à
relire...



question d'habitude.

height = height<ygwm.min_height? height : ygwm.min_height;
new_id.div_height=height;
new_id.div_width = width; // pas certain que ce soit utile


ça va plus vite quand on relit les paramètres ensuite.
comme un sorte de "cache", pas besoin de demander au DOM qui va
reconvertir et tout...



Je ne sais si le DOM reconvertit ou s'il suit tout en direct ?
Avec une 12aines de fenêtres ça doit commencer à faire un paquet de
new_id move_id et tous leurs bébés respectifs (dont bp changent)

en tout cas :
- quand je règle la taille au niveau du div externe,
le "padding: 2px;" de div#ygwm_header, div#ygwm_contents
et div#ygwm_footer, ça fait déborder du div de 4px,



je n'ai eu que le footer qui débordait.
Pas trop regardé à cause de quoi, une petite marge l'a recasé.

[HS]
mouarf :-)
les flèches c'est en fibre de carbone.



alu ou fibre

Et il existe aussi des baguettes en fibre de carbone.
c'est solide, mais impossible à travailler, et cher.



Boudiou !
avec 2 nuits à ne pas passer les fils c'est vraiment si cher ?

et chaque chef d'orchestre a sa sensibilité et exigence



Ha ben s'il faut en passer par les petits caprices des chefs!


--
sm
Avatar
whygee
_o/

SAM wrote:
Je dois avouer que pour un guitariste c'est pas trop mal :-)


?


Tu ne grattes pas ?
C'est pas pour assembler des notes que tu crées ce bignou ?



heuh non :-)
pour assembler des morceaux de code machine,
en premier lieu pour mes propres microprocesseurs,
mais si en plus je peux rendre le "truc" suffisamment
général et générique, ça peut servir pour tout CPU
dont on voudrait faire la description en JavaScript :-)
je connais au moins 2 ou 3 autres CPU qu'il serait
tellement plus facile d'utiliser avec "listed"
qu'en assembleur classique...

Ceci dit, j'ai 4 guitares, 2 basses, 2 didjeridoos,
"un tas de matériel" et ma vieille trompette qu'il faut que je répare :-(
Sans parler du fait que je suis entouré de musiciens
et que je vis au-dessus de plusieurs studios d'enregistrement...
mais c'est une autre histoire.

CTRL+6 ou CTRL+0 plus les flèches ou les scrollbars
et on a presque le début d'un logiciel de CAO :-D


Ouais ... bon ...


pour moi c'est très important...


c a d que ... un logiciel de CAO (tel que je le vois et utilise) en
Javascript ... boudiou !


oui je sais. Mais je pense à la CAO électronique, pas à Autocad&Co

quoiqu'en SVG on peut faire des trucs sympas....
euh non j'ai rien dit.

Ha! mais si tu aimes les touches pour agir sur les élements, voici :
<http://www.quirksmode.org/js/dragdrop.html>


ce site est vraiment toujours aussi excellent :-)

ce raccourci est déjà occupé par le popup-menu du brouteur




ce qui n'empêche pas que ça se duplique pas dessous le menu.


??? "pourtant ça marche chez moi" :-/


mais "chez moi" aussi ... pas bien.


bon...

mais bon, c'était juste des protos, j'écris tout à la main... et c. :-)
donc ça fait un peu chier de taper "<span style="font-weight:bold" >"


Oui, mais non, il ne sert à rien de faire des protos qui seront
complètement à retravailler par la suite juste par méconnaissance ou
pour "aller vite".


essayer de te donner tort sur ce point serait hypocrite et inutile de ma part ;-)

et puis 3 lignes de css en haut de page pour enjoliver le rendu ...
<span>rouge</span>
<strong><span>gras rouge</span></strong>
<span><strong>gras bleu</strong></span>
<span><span><strong>gras et gros bleu</strong></span></span>


???

suffit de faire dans le JS
truc.machin.style.left = otr.chose + 'px';
*plus px* !


ah ben si c'était si simple, pourquoi j'ai pas trouvé tout seul ? :-(


Peut-être n'y avait-il pas que ça à l'époque ?


ça fait 2 ans, j'ai dû oublier...

(j'avoue que je suis un peu perdu dans ton système qui fait des A/R
continuels de haut en bas des lignes qu'on ne sait + très bien où o n a
besoin d'unités et où il n'en faut surtout pas)


arf... je vais tenter d'uniformiser ça.

yg
--
http://ygdes.com / http://yasep.org
Avatar
whygee
re-o_

SAM wrote:
ou à la class quand-même :
if ( t[i].id == name || t[i].className.indexOf(name)>=0 )


ah oui tiens, pas con !

je préfère quand le if est bien explicite, sinon c'est plus lourd à relire...


question d'habitude.


j'ai commencé à faire de la "vraie programmation" en Pascal.
verbeux mais c'est tellement plus clair :-)

new_id.div_width = width; // pas certain que ce soit utile


ça va plus vite quand on relit les paramètres ensuite.
comme un sorte de "cache", pas besoin de demander au DOM qui va
reconvertir et tout...


Je ne sais si le DOM reconvertit ou s'il suit tout en direct ?


dans le doute ...

Avec une 12aines de fenêtres ça doit commencer à faire un paquet de
new_id move_id et tous leurs bébés respectifs (dont bp changent)


new_id et ses enfants, ainsi que le minimum nécessaire de fonctions,
c'est dupliqué à ma connaissance.

c'est pour ça que j'ai fait un objet ygwm séparé, qui
contient le reste des variables et fonctions, pour éviter
de polluer la "variable globale" et réduire les risques de collision...
donc moved_div etc ne sont pas dupliqués.

en tout cas :
- quand je règle la taille au niveau du div externe,
le "padding: 2px;" de div#ygwm_header, div#ygwm_contents
et div#ygwm_footer, ça fait déborder du div de 4px,


je n'ai eu que le footer qui débordait.
Pas trop regardé à cause de quoi, une petite marge l'a recasé.



hmmmm enfin bon, c'est délicat quoi :-/
j'ai pas bien compris pourquoi le padding, qui est normalement
à l'intérieur, se retrouvait comme un border o_O

[HS]
mouarf :-)
les flèches c'est en fibre de carbone.


alu ou fibre


en alu, elles ont tendance à tordre et à pas se détordre facilement .
tiens, ça fait combien d'années que j'ai pas touché à un arc ?

Et il existe aussi des baguettes en fibre de carbone.
c'est solide, mais impossible à travailler, et cher.


Boudiou !
avec 2 nuits à ne pas passer les fils c'est vraiment si cher ?


"2 nuits à ne pas passer les fils" ?

de toutes façon c'était pas seulement un problème de prix,
puisqu'on a acheté la baguette sans trop savoir comment j'arriverais
à la modifier ensuite : acheter une baguette à 60E pour ensuite
risquer de la détruire si je me plante, ben... le modèle à 15E
semblait plus indiqué :-)

et chaque chef d'orchestre a sa sensibilité et exigence


Ha ben s'il faut en passer par les petits caprices des chefs!


Aurélien est VRAIMENT super sympa et sait mettre à l'aise les
gens. C'est une des nombreuses raisons qui font que le concert
s'est si bien passé :-) et travailler avec des artistes est
sympa parce qu'ils me font confiance au niveau technique et
j'ai plus de chance d'influer positivement sur le résultat,
que si la personne avait déjà les idées hyper-fixées...


yg

bon, c'est quand que j'ai le temps de coder, moi ? :-)
--
http://ygdes.com / http://yasep.org
Avatar
whygee
SAM wrote:
Voici un peu modifié :
<http://cjoint.com/?cmedSttRPG>
html, css et JS dans même fichier.



quelques remarques au fur et à mesure que je décortique :
* le fichier est en UTF-8, il faut que je le mette correctement en iso- 8851
(je refais aussi tous les accents)
* j'ai changé les paramètres à fournir à ygwm.new_window,
j'ai ajouté un argument qui donne le contenu de la fenêtre.
- null => c'est le même id (remplacement d'un div, comme avant )
- "none" => on met rien (fenêtre vide)
- un_id => permet d'inclure un autre div que celui qu'on a point é
ça rend listed plus pratique à écrire...
* plusieurs <p> non fermés dans le HTML :-)

bon, et encore plein de modifs qui n'ont rien à voir...

--
http://ygdes.com / http://yasep.org
Avatar
SAM
Le 2/10/09 9:31 PM, whygee a écrit :
SAM wrote:
Voici un peu modifié :
<http://cjoint.com/?cmedSttRPG>
html, css et JS dans même fichier.



quelques remarques au fur et à mesure que je décortique :
* le fichier est en UTF-8, il faut que je le mette correctement en
iso-8851
(je refais aussi tous les accents)



Ha! merdum ... je pensais que ta 9w-truc aurait sû faire
(le NotePad de windows est supposé s'en dépatouiller)
ce sera trop tard mais voici:
<http://cjoint.com/data/cmwB6BDkzA_ygwm_sam_iso.html>

* j'ai changé les paramètres à fournir à ygwm.new_window,
j'ai ajouté un argument qui donne le contenu de la fenêtre.
- null => c'est le même id (remplacement d'un div, comme avant)
- "none" => on met rien (fenêtre vide)
- un_id => permet d'inclure un autre div que celui qu'on a pointé
ça rend listed plus pratique à écrire...
* plusieurs <p> non fermés dans le HTML :-)



Pas grâve c'est facultatif (comme pour les td et tr)

bon, et encore plein de modifs qui n'ont rien à voir...



Elles n'ont pas la TV ?

--
sm
Avatar
whygee
SAM wrote:
Voici un peu modifié :
<http://cjoint.com/?cmedSttRPG>
html, css et JS dans même fichier.



autres remarques :
- pour le support MSIE, j'ajoute
var evt = e || window.event;
là où on utilise l'événement.

- je viens à peine de comprendre à quoi sert pos(ev) :-)

- j'ai pas bien compris
function $(t) {document.getElementById('inf').innerHTML=t;}
ça crée une fonction appelée "$" ?
c'est pas un peu limite ?

- ygwm.showhide() est un sacré exemple de compression du code,
bien que j'ai peur que ce soit moins fiable si un élément
était désynchronisé... donc je garde l'ancien code ;-)

- " +' <div class="ygwm_msg"></div>'"
j'avais pas remarqué de problème sans le "",
ça a posé problème quelque part ?

- il semble y avoir une incohérence, avec offsetWidth,
offsetLeft et offsetHeight, j'ai pas bien compris
pourquoi des variables ont été ajoutées et utilisées
mais sans être initialisées... à moins que ça fasse
partie du DOM ? pour l'instant je vais pas y toucher...

ça a dû être une sacrée histoire de faire toutes ces modificati ons :-)

--
http://ygdes.com / http://yasep.org
Avatar
whygee
SAM wrote:
Le 2/10/09 9:31 PM, whygee a écrit :
quelques remarques au fur et à mesure que je décortique :
* le fichier est en UTF-8, il faut que je le mette correctement en
iso-8851 (je refais aussi tous les accents)


Ha! merdum ... je pensais que ta 9w-truc aurait sû faire


sous Linux le window manager se contente juste ..
de déplacer les fenêtre, tout comme ygwm :-)
ce n'est pas un "gestionnaire de bureau".
et de toute façon c'est l'éditeur ainsi que le
terminal qui doivent se dépatouiller avec les encodings.

(le NotePad de windows est supposé s'en dépatouiller)


j'utilise nano, avec une coloration syntaxique perso :-)

ce sera trop tard mais voici:
<http://cjoint.com/data/cmwB6BDkzA_ygwm_sam_iso.html>


pas la peine, je compare côte à côte les fichiers et
je modifie les miens au fur et à mesure.
j'en apprends beaucoup :-)

* plusieurs <p> non fermés dans le HTML :-)


Pas grâve c'est facultatif (comme pour les td et tr)


ouais ok mais on commence comme ça et on finit par
oublier le reste ... /o

bon, et encore plein de modifs qui n'ont rien à voir...


Elles n'ont pas la TV ?


non, et de toute façon avec tout ce qu'on trouve sur le net,
pourquoi je m'embêterais avec ? :-)
et puis j'ai du code à patcher moi...

d'ici 1h j'aurai une autre version du ygwm...
et il faudra patcher listed ensuite :-)

--
http://ygdes.com / http://yasep.org
Avatar
SAM
Le 2/10/09 10:46 PM, whygee a écrit :
SAM wrote:
Voici un peu modifié :
<http://cjoint.com/?cmedSttRPG>
html, css et JS dans même fichier.



autres remarques :
- pour le support MSIE, j'ajoute
var evt = e || window.event;
là où on utilise l'événement.



comme tu veux,
je n'ai pas vu de couac avec mon IE sans cela
(savoir si pos(ev) est déjà passé par là ou non ?)


- je viens à peine de comprendre à quoi sert pos(ev) :-)



c'est pour tenter d'avoir pageX et pageY avec IE
Mais à tous coups ça ne sert à rien et clientX clientY auraient fait le
taf pour tt le monde.
(QM se sert de ces clients là pour son DnD)

- j'ai pas bien compris
function $(t) {document.getElementById('inf').innerHTML=t;}
ça crée une fonction appelée "$" ?
c'est pas un peu limite ?



Ya un tas de biblis connues qui utilisent ça.
(la prochaine fois je mettrai S comme Stéphane)
C'est un truc à supprimer qui me sert à remplacer les alert()

- ygwm.showhide() est un sacré exemple de compression du code,
bien que j'ai peur que ce soit moins fiable si un élément
était désynchronisé... donc je garde l'ancien code ;-)



comme j'ai perdu l'ancien code dans les oubliettes de mon DD ...
Je ne vois pas comment ça peut se désynchroniser puisque tu y appelles
le parent pour lui demander où il en est.

Tiens ? puisque tu captes tt de suite le parent, pourquoi n'aurai-il pas
lui le maxi/mini ?
ainsi on fait l'économie de this et des display des contents et footer

ygwm.showhide= function(ev) { // à quoi sert ce ev qu'on balade partout?
var parent = ygwm.getParent(this);
parent.className = parent.className.indexOf('maximize')>=0?
parent.className.replace('maximize','minimize') :
parent.className.replace('minimize','maximize');
}

Et changer un peu la CSS et qques bricoles :
<http://cjoint.com/data/cna0SSzlBu_ygwm_sam_iso_1.html>
Je me suis ajouté mon double-clic, na!


- " +' <div class="ygwm_msg"></div>'"
j'avais pas remarqué de problème sans le "",
ça a posé problème quelque part ?



Ça risque de ne pas plaire, le '<' en JS pose parfois pb tands que le
'>', non (ne pas me demander pourquoi, ça date du siècle dernier)
En tous cas dans le view-source de Fx, manifestement ça ne plait pas.

- il semble y avoir une incohérence, avec offsetWidth,
offsetLeft et offsetHeight, j'ai pas bien compris
pourquoi des variables ont été ajoutées et utilisées
mais sans être initialisées... à moins que ça fasse
partie du DOM ?



oui ce sont des propriétés des éléments (alors pourquoi les stocker ?)
Il n'y a que offsetHeight qui m'em...e
je n'arrive pas à voir quand le div (et lequel) récupère div_height
ni exactement quand on en a besoin pour le redimensionnement.

offsetMachinTruc :
<http://www.quirksmode.org/dom/tests/elementdimensions.html>
<http://www.quirksmode.org/dom/w3c_cssom.html>
Voir aussi :
<http://www.quirksmode.org/js/events_properties.html>
dont le truc pour les coordonnées du mulot au clic
<http://www.quirksmode.org/js/events_properties.html#position>
un peu + abouti que mon pos(ev) !
Mébon ... c'est du délayage à la Pascal.

ça a dû être une sacrée histoire de faire toutes ces modifications :-)



Un peu :-)
(déjà arriver à suivre le serpent qui s'entortille ...)

ça peut aussi t'intéresser :
<http://www.quirksmode.org/js/events_mouse.html#relatedtarget>
En attendant de tout reprendre avec un listener général qui pourra
s'occuper de chaque pipeau ou trou de pipeau sans plus de
duplication/multiplication de tous les trucs stockés lors des
new new_window(bla bla);

--
sm
1 2 3 4