Changeset 106894 in spip-zone


Ignore:
Timestamp:
Oct 15, 2017, 4:50:35 PM (22 months ago)
Author:
nicolas.dorigny@…
Message:

Nouvelle version 1.2 :

  • on utilise un <div> englobant pour tout le bloc de code (<pre><code> et le <button> pour copier)
  • ce div utilise une classe simplec_code pour éviter les collisions avec la classe spip_code existante, déjà stylée par défaut
  • on revoit le découpage des fonctions de balisage, avec une fonction unique qui gère le balisage complet : simplec_balisage_code(), qui devient utilisable par d'autres plugins
  • compatibilité avec le plugin coloration_code : on ne surcharge pas les fonctions traiter_echap_code/cadre s'il est activé, dans ce cas c'est lui qui génèrera un balisage propre en appelant simplec_balisage_code()
  • adaptation des css en conséquence, et le bouton "copier" apparait au survol de chaque bloc de code
  • suppression de simplec_options.php devenu inutile
Location:
_plugins_/precode/trunk
Files:
1 deleted
4 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/precode/trunk/css/simplec.css

    r106892 r106894  
    2121
    2222/* Blocs de code */
    23 pre[class] {
     23.simplec_code {
     24  margin-bottom: 1.5em;
     25}
     26.simplec_code pre {
    2427  overflow: hidden;
    2528  position: relative;
     
    2831  line-height: 1.5;
    2932}
    30 pre[class]::before {
     33.simplec_code pre[class]::before {
    3134  content: attr(class);
    3235  position: absolute;
     
    3740  font-size: .8rem;
    3841}
    39 pre[class] code {
     42.simplec_code pre code {
    4043  display: block;
    4144  background: transparent;
     
    4447  overflow: auto;
    4548}
    46 pre code br { display: none !important; } /* patch pour SPIP qui génère des <br> intempestifs, cf.: https://core.spip.net/issues/2504 */
     49.simplec_code pre code br { display: none !important; } /* patch pour SPIP qui génère des <br> intempestifs, cf.: https://core.spip.net/issues/2504 */
    4750
    4851/* Variantes par langage */
    4952
    50 pre[class]        { border-color: rgba(119, 119, 119, .2); border-left-color: #AAA; }
    51 pre[class]::before{ color: rgba(119, 119, 119, .5); }
    52 pre.spip          { border-color: rgba(117, 80, 123, .2); border-left-color: #75507B; }
    53 pre.spip::before  { color: rgba(117, 80, 123, .75); }
    54 pre.html          { border-color: rgba(236, 102, 43, .2); border-left-color: #EC662B; }
    55 pre.html::before  { color: rgba(236, 102, 43, .75); }
    56 pre.css           { border-color: rgba(133, 202, 21, .2); border-left-color: #85CA15; }
    57 pre.css::before   { color: rgba(133, 202, 21, .75); }
    58 pre.less          { border-color: rgba(29, 54, 93, .2); border-left-color: #1d365d; }
    59 pre.less::before  { color: rgba(29, 54, 93, .75); }
    60 pre.sass,
    61 pre.scss          { border-color: rgba(207, 100, 154, .2); border-left-color: #CF649A; }
    62 pre.sass::before,
    63 pre.scss::before  { color: rgba(207, 100, 154, .75); }
    64 pre.js            { border-color: rgba(228, 162, 39, .2); border-left-color: #E4A227; }
    65 pre.js::before    { color: rgba(228, 162, 39, .75); }
    66 pre.php           { border-color: rgba(98, 129, 184, .2); border-left-color: #6281B8; }
    67 pre.php::before   { color: rgba(98, 129, 184, .75); }
    68 pre.xml           { border-color: rgba(229, 184, 3, .2); border-left-color: #E5B803; }
    69 pre.xml::before   { color: rgba(229, 184, 3, .75); }
    70 pre.md            { border-color: rgba(121, 195, 210, .2); border-left-color: #79C3D2; }
    71 pre.md::before    { color: rgba(121, 195, 210, .75); }
     53.simplec_code pre               { border-color: rgba(119, 119, 119, .2); border-left-color: #AAA; }
     54.simplec_code pre:before        { color: rgba(119, 119, 119, .5); }
     55.simplec_code pre.spip,
     56.simplec_code pre.spip2         { border-color: rgba(117, 80, 123, .2); border-left-color: #75507B; }
     57.simplec_code pre.spip::before,
     58.simplec_code pre.spip2::before { color: rgba(117, 80, 123, .75); }
     59.simplec_code pre.html          { border-color: rgba(236, 102, 43, .2); border-left-color: #EC662B; }
     60.simplec_code pre.html::before  { color: rgba(236, 102, 43, .75); }
     61.simplec_code pre.css           { border-color: rgba(133, 202, 21, .2); border-left-color: #85CA15; }
     62.simplec_code pre.css::before   { color: rgba(133, 202, 21, .75); }
     63.simplec_code pre.less          { border-color: rgba(29, 54, 93, .2); border-left-color: #1d365d; }
     64.simplec_code pre.less::before  { color: rgba(29, 54, 93, .75); }
     65.simplec_code pre.sass,
     66.simplec_code pre.scss          { border-color: rgba(207, 100, 154, .2); border-left-color: #CF649A; }
     67.simplec_code pre.sass::before,
     68.simplec_code pre.scss::before  { color: rgba(207, 100, 154, .75); }
     69.simplec_code pre.js            { border-color: rgba(228, 162, 39, .2); border-left-color: #E4A227; }
     70.simplec_code pre.js::before    { color: rgba(228, 162, 39, .75); }
     71.simplec_code pre.php           { border-color: rgba(98, 129, 184, .2); border-left-color: #6281B8; }
     72.simplec_code pre.php::before   { color: rgba(98, 129, 184, .75); }
     73.simplec_code pre.xml           { border-color: rgba(229, 184, 3, .2); border-left-color: #E5B803; }
     74.simplec_code pre.xml::before   { color: rgba(229, 184, 3, .75); }
     75.simplec_code pre.md            { border-color: rgba(121, 195, 210, .2); border-left-color: #79C3D2; }
     76.simplec_code pre.md::before    { color: rgba(121, 195, 210, .75); }
    7277/* http://hex2rgba.devoth.com */
    7378
    7479/* bouton de copie du code */
    75 p.code_button {
    76   text-align: right;
     80.simplec_code {
     81  position: relative;
    7782}
    78 .copy-button {
     83.simplec_code .copy-button {
     84  display: none;
     85  position: absolute;
     86  top: 5px;
     87  right: 4em;
     88  margin: 0;
     89  padding: 0;
     90  background: transparent;
     91  border: 0;
     92  border-radius: 0;
     93  outline: 0;
     94  text-transform: lowercase;
     95  line-height: 1;
     96  font-size: .8rem;
     97  font-family: monospace;
     98  color: #909f77;
     99  cursor: pointer;
    79100}
    80 .copy-button.copied span:before {
    81   content: '\2713\a0';
     101
     102.simplec_code:hover .copy-button,
     103.simplec_code .copy-button.copied {
     104  display: inline-block;
     105}
     106.simplec_code .copy-button:hover,
     107.simplec_code .copy-button.copied {
     108  color: #42DC42 !important; transition: color 250ms ease-out;
     109}
     110.simplec_code .copy-button.copied span:before {
     111  content: '\2713\a0';
    82112}
    83113
  • _plugins_/precode/trunk/js/simplec.js.html

    r106892 r106894  
    1010                // ajouter un bouton pour copier le code
    1111                $('pre:has(code)')
    12                         .after('<p class="code_button"><button type="button" class="copy-button" aria-label="<:simplec:bouton_copier_aria_label:>"><span><:simplec:bouton_copier_label:></span></button></p>');
     12                        .after('<button type="button" class="copy-button" aria-label="<:simplec:bouton_copier_aria_label:>"><span><:simplec:bouton_copier_label:></span></button>');
    1313
    1414                var clip = new Clipboard('.copy-button', {
    1515                        target: function(trigger) {
    16                                 var text = trigger.parentNode.previousSibling.children[0];
     16                                var text = trigger.previousSibling.children[0];
    1717                                return text;
    1818                        }
  • _plugins_/precode/trunk/plugin.xml

    r106892 r106894  
    44        <icon>icon/simplec.png</icon>
    55
    6         <version>1.1.0</version>
     6        <version>1.2.0</version>
    77        <etat>experimental</etat>
    88        <categorie>outil</categorie>
     
    1818        <auteur>Librairie clipboard.js par [Zeno Rocha->https://zenorocha.com]</auteur>
    1919
    20         <options>simplec_options.php</options>
    2120        <fonctions>simplec_fonctions.php</fonctions>
    2221
     
    2625        </pipeline>
    2726
    28         <utilise id="tinytypo" version="[;]" />
    29         <necessite id="SPIP" version="[2.1.0;3.2.99]" />
    30         <necessite id="spip_bonux" version="[2.2.19;]"/>
     27        <utilise id="tinytypo" version="[;]"/>
     28        <utilise id="coloration_code" version="[0.6.7;]"/>
     29        <necessite id="SPIP" version="[2.1.0;3.2.99]"/>
    3130</plugin>
  • _plugins_/precode/trunk/simplec_fonctions.php

    r106892 r106894  
    11<?php
    22
    3 // Surcharge des fonctions de inc/texte_mini pour corriger les <code> générés par SPIP :
    4 // on utilise toujours <pre class="langage"><code>...</code></pre>
    5 // pour les raccourcis SPIP <code class="langage"> et <cadre class="langage">
     3include_spip('inc/plugin');
     4
     5if (!in_array('COLORATION_CODE', array_keys(liste_plugin_actifs()))) {
     6
     7        // Surcharge des fonctions de inc/texte_mini pour corriger les <code> générés par SPIP :
     8        // on utilise toujours <pre class="langage"><code>...</code></pre>
     9        // pour les raccourcis SPIP <code class="langage"> et <cadre class="langage">
     10
     11        function traiter_echap_code($regs) {
     12                return simplec_traiter_echap_code($regs);
     13        }
     14
     15        function traiter_echap_cadre($regs) {
     16                return simplec_traiter_echap_cadre($regs);
     17        }
     18
     19}
    620
    721// Echapper les <code>...</ code>
    822// http://code.spip.net/@traiter_echap_code_dist
    9 function traiter_echap_code($regs) {
    10         $att = $regs[2];
    11         $corps = $regs[3];
     23function simplec_traiter_echap_code($regs) {
     24        $attributs = $regs[2];
     25        $corps     = $regs[3];
    1226
    13         $echap = spip_htmlspecialchars($corps); // il ne faut pas passer dans entites_html, ne pas transformer les &#xxx; du code !
     27        $code = spip_htmlspecialchars($corps); // il ne faut pas passer dans entites_html, ne pas transformer les &#xxx; du code !
    1428
    1529        // ne pas mettre le <div...> s'il n'y a qu'une ligne
    16         if (is_int(strpos($echap, "\n"))) {
     30        if (is_int(strpos($code, "\n"))) {
    1731                // supprimer les sauts de ligne debut/fin
    1832                // (mais pas les espaces => ascii art).
    19                 $echap = preg_replace("/^[\n\r]+|[\n\r]+$/s", "", $echap);
    20                 $echap = "<pre dir='ltr' style='text-align: left;'$att><code>" . $echap . "</code></pre>";
     33                $code = preg_replace("/^[\n\r]+|[\n\r]+$/s", "", $code);
     34                $code = simplec_balisage_code($attributs, $code);
    2135        } else {
    22                 $echap = "<code$att>" . $echap . "</code>";
     36                $code = "<code$attributs>" . $code . "</code>";
    2337        }
    2438
    25         $echap = str_replace("\t", "&nbsp; &nbsp; &nbsp; &nbsp; ", $echap);
    26         $echap = str_replace("  ", " &nbsp;", $echap);
     39        $code = str_replace("\t", "&nbsp; &nbsp; &nbsp; &nbsp; ", $code);
     40        $code = str_replace("  ", " &nbsp;", $code);
    2741
    28         return $echap;
     42        return $code;
    2943}
    3044
    3145// Echapper les <cadre>...</ cadre> aka <frame>...</ frame>
    3246// http://code.spip.net/@traiter_echap_cadre_dist
    33 function traiter_echap_cadre($regs) {
    34         $att = $regs[2];
    35         $echap = trim(entites_html($regs[3]));
    36         $echap = "<pre dir='ltr' style='text-align: left;' $att><code>" . $echap . "</code></pre>";
     47function simplec_traiter_echap_cadre($regs) {
     48        $attributs = $regs[2];
     49        $code      = trim(entites_html($regs[3]));
    3750
    38         return $echap;
     51        return simplec_balisage_code($attributs, $code);
     52}
     53
     54function simplec_balisage_code($attributs, $code) {
     55        return "<div class='simplec_code'>"
     56                . "<pre dir='ltr' style='text-align: left;'$attributs><code>"
     57                . $code
     58                . "</code></pre>"
     59                . "</div>";
    3960}
    4061
    4162// définir spip_htmlspecialchars() pour SPIP 2
    4263
    43 if(!function_exists('spip_htmlspecialchars')) {
     64if (!function_exists('spip_htmlspecialchars')) {
    4465        /**
    4566         * htmlspecialchars wrapper (PHP >= 5.4 compat issue)
    4667         *
    4768         * @param string $string
    48          * @param int $flags
     69         * @param int    $flags
    4970         * @param string $encoding
    50          * @param bool $double_encode
     71         * @param bool   $double_encode
     72         *
    5173         * @return string
    5274         */
Note: See TracChangeset for help on using the changeset viewer.