Changeset 42232 in spip-zone for _plugins_/css_imbriques


Ignore:
Timestamp:
Nov 12, 2010, 3:41:48 PM (9 years ago)
Author:
arno@…
Message:

Introduction de pseudo-CSS pour les styles qui demandent de coder plusieurs lignes (par exemple: -spip-border-radius, -spip-opacity...), avec compatibilité MSIE quand c'est possible.

Location:
_plugins_/css_imbriques
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/css_imbriques/css_imbriques_fonctions.php

    r38364 r42232  
    22
    33function css_inserer_tab($def) {
    4         $def = mb_ereg_replace("\n", "\n\t", $def);
     4        $def = preg_replace(",\n,", "\n\t", $def);
    55       
    66        return "\t".$def;
     
    4343}
    4444
     45function css_imbriques_couleurs_ie ($coul) {
     46       
     47        if (preg_match(",^\#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$,", $coul, $conv)) {
     48                $coul = "#".$conv[1].$conv[1].$conv[2].$conv[2].$conv[3].$conv[3];
     49        }
     50       
     51        return $coul;
     52}
     53
     54function css_imbriques_traiter_spip($regs) {
     55        // -spip-box-sizing
     56        // -spip-font-smoothing
     57        // -spip-gradient
     58       
     59       
     60        $style = $regs[1];
     61        $val = trim($regs[2]);
     62       
     63        switch($style) {
     64                case "border-radius" :
     65                        $ret = "-webkit-border-radius:$val;";
     66                        $ret .= "-moz-border-radius:$val;";
     67                        $ret .= "border-radius:$val;";
     68                        break;
     69                case "border-top-right-radius" :
     70                        $ret = "-webkit-border-top-right-radius:$val;";
     71                        $ret .= "-moz-border-radius-topright:$val;";
     72                        $ret .= "border-border-top-right-radius:$val;";
     73                        break;
     74                case "border-top-left-radius" :
     75                        $ret = "-webkit-border-top-left-radius:$val;";
     76                        $ret .= "-moz-border-radius-topleft:$val;";
     77                        $ret .= "border-border-top-left-radius:$val;";
     78                        break;
     79                case "border-bottom-right-radius" :
     80                        $ret = "-webkit-border-bottom-right-radius:$val;";
     81                        $ret .= "-moz-border-radius-bottomright:$val;";
     82                        $ret .= "border-border-bottom-right-radius:$val;";
     83                        break;
     84                case "border-bottom-left-radius" :
     85                        $ret = "-webkit-border-bottom-left-radius:$val;";
     86                        $ret .= "-moz-border-radius-bottomleft:$val;";
     87                        $ret .= "border-border-bottom-left-radius:$val;";
     88                        break;
     89                       
     90                case "opacity" :
     91                        $val_ie = round($val * 100);
     92                        $ret = "-webkit-opacity:$val;";
     93                        $ret .= "-moz-opacity:$val;";
     94                        $ret .= "opacity:$val;";
     95                        $ret .= "-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(opacity=$val_ie)\";zoom:1;";
     96                        break;
     97                case "box-shadow":
     98                        $ret = "-webkit-box-shadow:$val;";
     99                        $ret .= "-moz-box-shadow:$val;";
     100                        $ret .= "box-shadow:$val;";
     101                       
     102                        if (preg_match(",(\-?[0-9]+)px\ *(\-?[0-9]+)px\ *([0-9]+)px\ *(#?[0-9a-zA-Z]*),", $val, $val_ie)) {
     103                                $x = $val_ie[1];
     104                                $y = $val_ie[2];
     105                                $s = $val_ie[3];
     106                                $coul = $val_ie[4];
     107                               
     108                                if ($x == 0) {
     109                                        if ($y > 0) $angle = 180;
     110                                        else $angle = 0;
     111                                } else if ($x > 0 && $y >= 0) {
     112                                        $angle = 90 - round(rad2deg(atan(-1 * $y / $x)));
     113                                } else if ($x > 0 && $y < 0) {
     114                                        $angle = 90 - round(rad2deg(atan(-1 * $y / $x)));
     115                                } else if ($x < 0 && $y >= 0) {
     116                                        $angle = round(rad2deg(atan($y / $x))) - 90;
     117                                } else if ($x < 0 && $y < 0) {
     118                                        $angle = round(rad2deg(atan($y / $x))) - 90;
     119                                }
     120                               
     121                                if ($angle < 0) $angle = $angle + 360;
     122                               
     123                                $distance = round(sqrt($x*$x + $y*$y));
     124                               
     125                                // Bon, ca ne marche pas bien, il faut plus de tests...
     126                                //$ret .= "zoom:1; filter: progid:DXImageTransform.Microsoft.Shadow(color=$coul,direction=$angle, Strength=$s);";
     127                        }
     128                        break;
     129                case "gradient":
     130                        // -spip-gradient: top, #000000, #ffffff;
     131                        // directions: "top" (vertical) ou "left" (horizontal)
     132                        if (preg_match("#\ ?(.*)\ ?\,\ ?(.*)\ ?\,\ ?(.*)\ ?#", $val, $conv)) {
     133                                $dir = strtolower($conv[1]);
     134                                $debut = $conv[2];
     135                                $fin = $conv[3];
     136                               
     137                                $debut_ie = css_imbriques_couleurs_ie($debut);
     138                                $fin_ie = css_imbriques_couleurs_ie($fin);
     139                               
     140                                if ($dir == "top") {
     141                                        $ret = "background: -webkit-gradient(linear, left top, left bottom, from($debut), to($fin));";
     142                                        $ret .= "background-image: -moz-linear-gradient(top, $debut, $fin);";
     143                                        $ret .= "filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='$debut_ie', endColorstr='$fin_ie');";
     144                                        $ret .= "-ms-filter: \"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='$debut_ie', endColorstr='$fin_ie')\";";
     145                                }
     146                                else {
     147                                        $ret = "background: -webkit-gradient(linear, left top, right top, from($debut), to($fin));";
     148                                        $ret .= "background-image: -moz-linear-gradient(left, $debut, $fin);";
     149                                        $ret .= "filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='$debut_ie', endColorstr='$fin_ie');";
     150                                        $ret .= "-ms-filter: \"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='$debut_ie', endColorstr='$fin_ie')\";";
     151                                }
     152                                $ret .= "zoom:1;";
     153                                $ret .= "background: $debut:";
     154                        }
     155                        break;
     156        }
     157       
     158       
     159        return $ret;
     160
     161       
     162}
     163
     164function css_imbriques_pseudo($css) {
     165       
     166        $css = preg_replace_callback(",\-spip\-([a-z\-]*)\ *\:\ *([^\;]*)\ *\;,", "css_imbriques_traiter_spip", $css);
     167       
     168        return $css;
     169}
     170
     171
    45172function css_imbriques_decouper ($css) {
    46173       
    47174       
    48         $css = mb_ereg_replace("\n[\t\ ]*", "\n", trim($css));
    49         $css = mb_ereg_replace("\n+", "\n", $css);
     175        $css = preg_replace(",\n[\t\ ]*,", "\n", trim($css));
     176        $css = preg_replace(",\n+,", "\n", $css);
    50177       
    51178        // Remettre les criteres multilignes sur une ligne
    52         $css = mb_ereg_replace("\,\ *\n", ", ", $css);
     179        $css = preg_replace("#\,\ *\n#", ", ", $css);
    53180       
    54181
     
    61188        $css = "   {\n$css\n}";
    62189       
     190        $css = css_imbriques_pseudo($css);
    63191       
    64192        while (preg_match ("/([^\{\n]*)\{([^\{]*)\}/U", $css, $regs)) {
     
    73201                        $fin = substr($css, $pos + strlen($chaine), strlen($css));
    74202
    75                         if (mb_ereg("\,", $intitule)) {
     203                        if (preg_match("#\,#", $intitule)) {
    76204                                $entrees = explode(",", $intitule);
    77205                               
     
    110238                        //      $classe = css_imbriques_enfants($compteur, $classe[$compteur], $classe, $enfants);
    111239       
    112                                 $definition[$compteur] = mb_ereg_replace("[\ \n]*\[\[[0-9]*\]\][\ \n]*", "", $definition[$compteur]);
     240                                $definition[$compteur] = preg_replace("#[\ \n]*\[\[[0-9]*\]\][\ \n]*#", "", $definition[$compteur]);
    113241       
    114242                               
     
    129257
    130258
    131 
    132        
    133 /*     
    134 
    135         $css = "";
    136         foreach($classe as $num=>$nom) {
    137                 $def= $definition[$num];
    138                 if (strlen($def) > 0) {
    139                         $css .= "$nom {\n";
    140                         $def = "\t".mb_ereg_replace("\n", "\n\t", $def);
    141                         $css .= $def;
    142                         $css .= "\n}\n";
    143                 }
    144         }
    145         */
    146        
    147259       
    148260        // Derniere passe: "minifier" les CSS
     
    184296        $contenu = css_imbriques_decouper ($contenu);
    185297
    186         /*
    187 
    188         // reperer les @import auxquels il faut propager le direction_css
    189         preg_match_all(",\@import\s*url\s*\(\s*['\"]?([^'\"/][^:]*)['\"]?\s*\),Uims",$contenu,$regs);
    190         $src = array();$src_direction_css = array();$src_faux_abs=array();
    191         $d = dirname($css);
    192         foreach($regs[1] as $k=>$import_css){
    193                 $css_direction = direction_css("$d/$import_css",$voulue);
    194                 // si la css_direction est dans le meme path que la css d'origine, on tronque le path, elle sera passee en absolue
    195                 if (substr($css_direction,0,strlen($d)+1)=="$d/") $css_direction = substr($css_direction,strlen($d)+1);
    196                 // si la css_direction commence par $dir_var on la fait passer pour une absolue
    197                 elseif (substr($css_direction,0,strlen($dir_var))==$dir_var) {
    198                         $css_direction = substr($css_direction,strlen($dir_var));
    199                         $src_faux_abs["/@@@@@@/".$css_direction] = $css_direction;
    200                         $css_direction = "/@@@@@@/".$css_direction;
    201                 }
    202                 $src[] = $regs[0][$k];
    203                 $src_direction_css[] = str_replace($import_css,$css_direction,$regs[0][$k]);
    204         }
    205         $contenu = str_replace($src,$src_direction_css,$contenu);
    206         */
    207298        // passer les url relatives a la css d'origine en url absolues
    208299        $contenu = preg_replace(",url\s*\(\s*['\"]?([^'\"/][^:]*)['\"]?\s*\),UimsS",
  • _plugins_/css_imbriques/plugin.xml

    r34910 r42232  
    22        <nom>CSS imbriqu&eacute;s</nom>
    33        <auteur>ARNO*</auteur>
    4         <version>1.1</version>
     4        <version>1.2</version>
    55        <etat>stable</etat>
    66        <description>Ce plugin permet de traiter des CSS imbriqu&eacute;s.</description>
    7         <lien>http://www.paris-beyrouth.org/Plugin-CSS-imbriques</lien>
     7        <lien>http://plugins.spip.net/css-imbriques</lien>
    88        <prefix>css_imbriques</prefix>
    99        <fonctions>css_imbriques_fonctions.php</fonctions>
Note: See TracChangeset for help on using the changeset viewer.