λ-wiki

λ-wiki :: syntax_old

www!k! v.20120610

λ-wiki :: éditeur

{h1 syntax °° {first|rest} °° }
{div font-style:italic; text-align:center;| Looking for an optimal binding between syntax and parser !}

_h2 introduction

_p Following some reflexions starting in the epsilonwiki's project in [[href:http://epsilonwiki.free.fr/index.php?view=parser;|parser]] and in [[href:http://epsilonwiki.free.fr/index.php?view=syntaxe;|syntax]], the lambda-style {b °°first rest°° } form is finally choosen with a  "°°|°°" character which clearly separates the two terms {b verb & object} and improves the parsing.

_p 1) The term "{b first}" define the command to be applied to the term "{b rest}" and contains :

_ul30 the name of a HTML tag or of an extended one,
_ul30 optionnal attributes written according to the classical CSSsyntax {b nom:valeur;} for instance :
_ul50 {b |id:myID;}
_ul50 {b |class:myClass;}
_ul50 all the CSS rules
_ul50 and some others like "name title CSS href src height width start loop", depending on the calling tag.
_ul50 if the term {b first} is empty the character "°°|°°" can be omitted.

{p 2) The term "{b rest}" define the command's object and contains :}
{ul30 simple text,}
{ul30 and/or a sequence of expressions according to the form {b °°{first|rest}°°}}
{ul30 the term {b rest} may be empty, for example °° {br} ou {drag} °° }

{h2 wiki-tags list}

{p The {a | epsilon}, {a | lambda} and [[sandbox]] pages present examples of utilization of (the majority) of the wiki-tags, according to the two equivalent forms "epsilon" or "lambda". The other pages present more complex utilizations with integrated javascript code.}

{h4 A)  HTML tags}

{pre °°

1)  seventeen HTML tags "div|span|pre|table|tr|td|h[1-6]|p|
                         center|blockquote|b|i|u|sup|sub|br|hr"
    {tag_name id:ID; class:CLASS; css_name:css_value; ... | a word sequence }
    - id:ID; class:CLASSE; attributes are optionnal
    - CSS rules nom_css:valeur; are optionnal
        - > create the corresponding HTML tags with optionnal attributes

2)  HTML tags "ul" et "ol"
    {ulxx | une suite de mots} ou {olxx | une suite de mots}
    - xx est un entier optionnel
        - > crée des articles de liste à puce ou numérotée

3)  HTML tag "a"
    {a href:adresse; name:nom; | une suite de mots}
    - {a une suite de mots} 
        - > crée un lien vers la page du wiki "une suite de mots"
    - {a href:adresse; | une suite de mots} 
        - > crée un lien vers l'adresse fournie
    - {a name:nom; | une suite de mots} 
        - > définit une ancre (l'ancienne balise ancre est inutile)

4)  HTML tag "img"
    {img src:image.jpg; height:hauteur; | une suite de mots }
        - > affiche une image "image.jpg" de hauteur "hauteur" 
                         avec l'infobulle "une suite de mots"

5)  HTML tag "iframe"
    {iframe href:adresse; width:largeur; height:hauteur; | au moins un espace }
        - > affiche un site dans un cadre de dimensions largeur x hauteur
°° }

{h3 B)  extended tags}
{To be translated in globish ...}
{pre °°

1)  la balise "column" (construite sur la règle CSS multi-column)
    {column nb:xx; | une suite de mots} 
    - xx est un entier optionnel
        - > crée une présentation en 2 ou xx colonnes équilibrées

2)  les balises "note", "note_start" et "note_end"
    - {note une suite de mots | une seconde suite de mots}
        - > affiche ou cache une note apparaissant en suivant 
           (cette forme ne respecte pas la logique verbe- >objet ; à étudier ...)
    - {note_start id:ID; | une suite de mots}
        - > affiche ou cache un bloc "note_end" librement positionnable
   - {note_end id:ID; | une seconde suite de mots}
       - > bloc librement positionnable contrôlé par "note_start"

3)  les balises "show", "hover" et "diapo"
    - {show src:image.jpg; height:hauteur; width:largeur; | une suite de mots }
        - > 
    - {hover height:hauteur; | [image1 un texte] ... [image2 un texte] }
        - > swap entre deux images
    - {diapo height:hauteur; | [adresse un texte] ... [adresse un texte] }
        - > affichage de vignettes déclenchant un effet lightbox

4)  les balises "eval", "input" et "submit"
    - {eval expression} 
        - > calcule une expression mathématique
    - {submit code:ID; | label} 
        - > lance l'exécution du contenu JS d'un bloc ID
    - {input id:ID; code:ID; | valeur par défaut} 
        - >lance l'exécution du contenu JS d'un bloc ID sur l'entrée d'une valeur

5)  diverses balises
    - {mailto jean.moulin@free.fr}
        - > crée un lien vers l'adresse mail fournie si elle est valide
    - {back texte}
        - > affiche un texte lien vers la page précédente
    - {post pseudo date}
        - > affiche le pseudo et la date fournies (utilisé dans le forum)
    - {drag } 
        - > permet de déplacer le bloc parent
    - {sound src:musique.mp3; start:true|false; loop:true|false;| au moins un espace }
        - > affiche un widget son, actif ou non, bouclant ou pas
    - {canvas id:canvas; height:400; width:500; | } 
        - > affiche un canvas ouvrant la possibilité de dessin interactif ... et autres !

6)  formes exceptionnelles
    - ! ! ! commentaire ! ! ! (les points d'exclamation sont collés)
        - > permet de mettre un texte en commentaire, il n'est pas affiché
    - ! ! des balises   ! !   (les points d'exclamation sont collés)
        - > permet de neutraliser des balises
    - _ §xx ... §              (le trait bas "_" est collé au caractère "§")
        - > rend éditable en ligne le bloc encadré
    - enfin : le caractère correspondant au "YEN" n'est pas affiché et doit être évité.

°° }

{h2 alternatives}
{p Allowed alternatives : }
{ul The dual form {b °° _balise { first|rest } °°}, the first one used in epsilonwiki ; it may be a good alternative for readibility of the marked text. The choice is open.}
{ul For the "block" tags : °° h[1-6], p et ul/ol °°, the form {b _balise some words CR}, where CR is the Carriage Return.}

{h2 milestone}
{p We are now closer to a syntax which stays retro-compatible with the previous ones, but which becomes more logical, more coherent with the couple HTML/CSS logic and prone to evolve with more attributes, following the way a CSS rule is added, going from the mandatory one to optional details. The "passing by" user will not see any difference, the more exigeant one will find more tools to build increasing sophisticated and reactive pages.}
{p Looking to the pages "canvas" : [[canvas:helloworld]], [[canvas:bezier]], [[canvas:shapes1]], [[canvas:shapes2]], [[include]] and more to come, opens a way towards a coding environment, maybe something close to this good old chap [[href:../?view=hypercard;|HyperCard]] and its powerfull language, HyperTalk.}

{h6 control and assistance to progressive entry of a tag}
{p In dynamic mode the pages's display is most of the time chaotic as long as expressions are not valid ; the minimum should be to neutralize the effect until the end of the input ; a better one should be to assist the input in proposing default values, a kind of intergrated help. For instance : }

{table
{tr font-weight:bold;| {td } {td progressive entry} {td display or syntax help} }
{tr {td 1)} {td °° {} °° } {td { } } }
{tr {td 2)} {td °° {img  } °° } {td {img } } }
{tr {td 3)} {td °° {img src:data/amelie_sepia; } °° } {td {img src:data/amelie_sepia; }}}
{tr {td 4)} {td °° {img height:30; } °° } {td {img height:30;  }}}
{tr {td 5)} {td °° {img src:data/amelie_sepia; height:30; } °° } 
            {td {img src:data/amelie_sepia; height:30;  }} }
{tr {td 6)} {td °° {img src:data/amelie_sepia; height:30; | infobulle } °° } 
            {td {img src:data/amelie_sepia; height:30; | infobulle } et voilà !} }
}
{p This assitance today limited to the {b img} tag will be progressively extended to all the others.}

{h2 todo}

{ul until now it's only possible to attach identifiers, classes names and CSS rules to the first seventeen tags (from "div" to "hr") ; what about some others ? }
{ul retro-compatibility with the old forms and the simplifed alternatives. Today the tags to be still to implement are the followings :}
{ul30 the old form of img }
{ul30 the old form of show }
{ul30 the old form of display/lightbox }
{ul30 the tags iframe, embed et sound }
{ul30 the tag enlight : this tag should gain interest to be twinned with the tags show and diapo/display/lightbox.}
{ul attach an optional legend to pictures}

{ul Waiting, please ...}

{p {i Alain Marty on april, 6 2012.}}

{h3 analyse (update : 12/04/2012) }
{To be translated in globish ...}

{div border:1px dashed; background:#ffe; padding:10px;|

{p Syntax and parser are narrowly linked, such as plan and section in architecture. In architecture it's not a good practice to draw the plan whithout thinking to the section coming with its own constraints. Even if the syntax is written to fit some wished fonctionnalities, the parser is what makes it actually possible, provided respect to its own constraints. The following analysis of the parser's basic functions shows how the syntax's rules are induced by the parser's internal behavior.}

{h2 parser}
{p Le parser capture les expressions de la forme {b °° {balise key:value; | rest} °° } et les traduit en expressions HTML envoyées au navigateur.}

{h6 1) do_loop()}
{p Le code écrit dans l'éditeur est contenu dans une chaine "str" traitée dans une boucle. L'expression régulière "loop_rex" recherche toutes les séquences de caractères :}
{ul commençant par une accolade ouvrante,}
{ul suivie (sans espace) par une mot correspondant à une balise reconnue,}
{ul suivi par un espace ou un retour à la ligne, }
{ul suivi éventuellement par une suite de caractères ne comprenant pas "°°{ | }°°" terminée par le caractère séparateur "°°|°°"}
{ul suivi par une suite de caractères ne comprenant pas "°°{}°°" }
{ul et se terminant par une accolade fermante.}
{p Pour chaque occurrence, la séquence trouvée est remplacée par une expression HTML retournée par la fonction dispatch(). Enfin, la chaine HTML est envoyée au navigateur pour affichage.}
{pre |°°
var do_loop = function ( str ) {
   var loop_rex = /\{(?:([\w\d]*))(?: |Y)?(?:([^|{}]*?)\|)?([^{}]*?)?\}/g
   while (str != (str = str.replace( loop_rex, dispatch )));
   return str;
}
°° }

{h6 2) dispatch()}
{p La fonction dispatch() analyse la nature de la balise et appelle les fonctions associées à chaque balise. L'extrait ci-dessous montre le cas des balises !!(div|span|pre|table|tr|td|h[1-6]|p|b|i|u|center|blockquote|sup|sub|br|hr)!! et du cas où la balise n'est pas reconnue.}
{pre | °°
var dispatch = function ( m, balise, first, rest ) {
var tags_rex = /^(div|span|pre|table|tr|td|h[1-6]|p|b|i|u|
                                  center|blockquote|sup|sub|br|hr)$/;
   if ( tag.match( tags_rex )) 
      return do_tags( tag, first, rest );
   ...
   else
      return do_else = function ( balise, first, rest );
}	
°° }

{h6 3) do_tag( tag, first, rest ) :}
{p La fonction do_tag() traduit chaque séquence trouvée dans la boucle en expressions HTML. Elle appelle la fonction extract() pour extraire du terme "first" les éventuelles déclarations d'identificateur et de classe ; et ce qui reste du terme "first" est inséré dans un attribut "style".}
{pre |°°
var do_tags = function ( tag, first, rest ) { 
   var id_val    = extract( 'id', first );
   var class_val = extract( 'class', first );
   var style_val = (first != '')? ' style="' + first + '"' :'';
   return '< '+tag+id_val+class_val+style_val+' >'+rest+'< /'+tag+' >';
}
...
var do_else = function ( balise, first, rest ) {
   return '< span style="background:yellow;" >('+balise+' '+first+' '+rest+')< /span >';
}
°° }

{h6 4) extract( key, first )}
{p La fonction extract extraie du terme "first" la valeur correspondante à la clé "key" et retourne l'expression key:"value".}
{pre |°°
var extract = function( key, first ) {
   var val = '';
   var rex = new RegExp( key + ':([^;]*?);' );
   if (first == undefined) 	// needed by webkit, not by moz
      return val;
   var p = first.match( rex );	// id:identificateur;
   if ( p != undefined )
   {	val = p[1];		// id = "identificateur"
	first = first.replace( rex, '' );
   }
   return key+'="'val+'"';  // exemple : id="myID"
}
°° }

{h2 syntaxe}
{p Le tableau ci-dessous présente les affichages correspondants à une écriture progressive du texte balisé, depuis la simple paire d'accolades "°°{}°°" à l'expression affichant une image. Pour éviter en mode dynamique un affichage chaotique de la page, il convient de toujours entrer les accolades par paires. Seul un surlignage en jaune viendra accompagner l'entrée progressive des termes et disparaitre à l'arrivée de la forme valide.}
{table
{tr font-weight:bold; text-align:center;| {td} {td expression}{td affichage}}
{tr {td 1}{td °° {} °° }{td {}}}
{tr {td 2}{td °° {truc} °° }{td {truc}}}
{tr {td 3}{td °° {truc |} °° }{td {truc |}}}
{tr {td 4}{td °° {truc | machin} °° }{td {truc | machin}}}
{tr {td 5}{td °° {b | machin} °° }{td {b | machin}}}
{tr {td 6}{td °° {b | {truc machin} °° }{td {b | {truc machin}}}}
{tr {td 7}{td °° {b | {u machin} °° }{td {b | {u machin}}}}
{tr {td 8}{td °° {img} °° } {td {img} }}
{tr {td 9}{td °° {img height:100; width:100; src:data/amelie_sepia.jpg; |} °° } {td {img height:100; width:100; src:data/amelie_sepia.jpg; |}} }
{tr {td 10}{td °° {img height:100; width:100; src:data/amelie_sepia.jpg; |infobulle} °° }{td {img height:100; width:100; src:data/amelie_sepia.jpg; |infobulle}}}
}

{p A suivre.}

}