Fork me on GitHub

Rapport de message :*
 

configurer le style de n'importe quel module

Titre du sujet : configurer le style de n'importe quel module
par olivee sur 19/11/2013 00:29:47

Je lance un petit projet pour xoops. depuis quelques jours je travail sur un outil qui me permet de configurer automatiquement le style de mon module et je suis content du résultat. j'ai essayé de l'adapter pour que ça fonctionne avec n'importe quel module qui utilise son propre fichier style css.
j'explique depuis l'interface admin je peux afficher tous les classes et les id séparément et configurer chaque propriété css appart et voir le résultat en même temps sur la page index.php ou bien n'importe quel autre page du module en question en utilisant jquery.
En tout il y a 3 fichiers à ajouter


dans le dossier du module à coté du fichier index.php on ajoute 2 fichiers

theme_setting.php

<?php

//ceci est un script de test en mode alpha
//il y aura certainement beaucoup de changement.
//partie de configuration a modifier manuellement


//modifier xtubestyle.css par le lien relatif du fichier style css du module. pour le module publisher
//$fichiercssamodifier = './css/publisher.css';

$fichiercssamodifier 'xtubestyle.css';

//modifie le lien vers la page de visualisation jquery
$pageavisualiser 'http://www.tonsite.com/modules/tonmodule/index.php';



//fin de la partie de configuration


$delimiteur1 'jjjjjjjjjj';


//
if (file_exists("../../mainfile.php")) {  
include(
"../../mainfile.php"); 
} elseif (
file_exists("../../../mainfile.php")) {  
include(
"../../../mainfile.php"); 
}


include_once(
"class/cssparser1.php");
$Olivee = new YATOUNES();

if(!
file_exists($fichiercssamodifier)){
echo 
'probleme avec le lien du fichier css il faut le tapper manuellement ligne 7 ';
}

//$fichiercssamodifier = '../../themes/maitscocorporate/style.css';
//$fichiercssamodifier = '../../xoops.css';


$file_orig $fichiercssamodifier
$file_dest $fichiercssamodifier '___original.css'

if(!
file_exists($file_dest) && file_exists($fichiercssamodifier)){
copy ($file_orig$file_dest);
echo 
'fichier de sauvgarde creer';
}



$Olivee->parse_file($fichiercssamodifier);


function 
curl_file_get_contents($url)
{
    if (
function_exists('curl_init'))
    {
        
$ch curl_init();
        
curl_setopt($chCURLOPT_URL$url);
        
curl_setopt($chCURLOPT_HEADER0);
        
curl_setopt($chCURLOPT_RETURNTRANSFER1);
        
curl_setopt($chCURLOPT_USERAGENT'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0');
        
$contents curl_exec($ch);
        
$errormsg curl_error($ch);
        
curl_close($ch);

        if(
$errormsg != '')
        {
            return 
$errormsg;
        }
        return 
$contents;
    }
    else if (
ini_get('allow_url_fopen') == 1)
    {
        return 
file_get_contents($url);
    }

    return 
false;
}

$page_apercu curl_file_get_contents($pageavisualiser);

$page_apercu preg_replace('/<a(.*)href="([^"]*)"(.*)>/','<a$1href="javascript:alert('Ce n est pas accessible pendant le processus de personnalisation.');"$3>',$page_apercu);

echo 
$page_apercu;



echo
'<style>
body {
    margin:0;
    padding:0;
    margin-left: 420px;
}
.pm-ad-zone {
    display:none;    
}
#preroll_placeholder, #Playerholder, object, embed, iframe {
    z-index: 100;
}
#ct_wrapper_width {
    max-width: 100%;
}
.colorpicker {
    z-index: 6666 !important;
}

.ct_sidebar {
    position: fixed;
    overflow-y: auto;
    top:0;
    left:0;
    width: 400px;
    height: 100%;
    display: block;
    padding: 15px 20px;
    background-color: #f5f5f5;
    box-shadow: inset 0 0 4px #777;
    border-right: 1px solid #fff;
    z-index: 5000 !important;
}
.ct_title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4em;
    text-transform:capitalize;
    padding: 5px 0;
    color: #555;
    text-shadow: 0 1px 0 #FFF;
    border-bottom: 3px solid #ddd;
    margin-bottom: 20px;
}
.ct_table {
    font-size: 11px;
    font-weight: bold;
}
.ct_table td {
    border-top: 0;
    border-bottom: 0;
    vertical-align: middle;
    text-shadow: 0 1px 0 #FFF;
    padding: 2px 0;
    margin:0;
}
.ct_table .input-append {
    position: relative;
}
.ct_table .reset-button {
    position: absolute;
    left:-23px;
    top:2px;
}
.ct_submit {
    display: block;
    width: 250px;
}
.ct_sidebar button.btn-small {
    font-size: 11px !important;
    font-weight: bold;
}
</style>'
;


echo 
'

<a href="#" id="toggle4" style="position: fixed; top:0; right:0; background-color:#4CF;width:100px;height:20px; overflow-y: auto; z-index: 5000;">Slide Toggle</a><br /><br />
<div class="toggle4" style="display:none; position: fixed; top:0; right:0; padding: 10px 0; overflow-y: auto; background-color:#4CF;width:30%;height:100%;">

<div class="row-fluid">
    <div class="span12 ct_title">'
.$fichiercssamodifier.' Theme  Module Configuration</div>
</div>
                
    2ND FORM A CHOISIR STYLE FIXE LEFT OU BIEN SLIDER RIGHT
                
                
                JUSTE POUR TESTER L APPERCU
</div>
'
;



echo
'

<div class="ct_sidebar" id="sticky">
<div class="row-fluid">
    <div class="span12 ct_title">'
.$fichiercssamodifier.' Theme  Module Configuration</div>
</div>


<div id="ajax-response-container" style="display:none"></div>
<form name="theme-customization" action="" method="post">
<table width="100%" cellpadding="0" cellspacing="0" class="table ct_table">

'
;
 foreach(
$Olivee->get_css() as $propriete => $attribute){
echo
'
    <tr>
        <td  style="color: red;" width="50%" align="left" valign="middle">'
.$propriete.'</td>

'
;


        
$propriete trim($propriete);
        
$dddd substr($propriete,01);
        
        if(
$dddd == '.'){
        
//$propriete = substr($propriete, 1);
        
$propriete substr_replace($propriete'bob'01);
        }
        if(
$dddd == '#'){
        
//$propriete = substr($propriete, 1);
        
$propriete substr_replace($propriete'ror'01);
        }
        
$propriete str_replace(':''kok'$propriete);
        
$propriete str_replace(', ''fof'$propriete);
        
$propriete str_replace('; ''qoq'$propriete);
        
$propriete str_replace(' .''mom'$propriete);
        
$propriete str_replace(' ''non'$propriete);
        
$propriete str_replace('a.''yoy'$propriete);
        
//$propriete = str_replace('-', '', $propriete);
    
    
            
        
if (is_array($attribute)){
        
$os = array("color""background-color""background");
        foreach(
$attribute as $attr => $valeur){
    
echo
'

<tr>
        <td style="padding-left: 15px; font-family:Arial; font-size: 10px;">'
.$attr.'</td>
        <td>'
.$valeur.'
        
'
;    

    if (
in_array($attr$os)){
echo 
'

            <td>
                <div class="input-append color pull-right" data-color="'
.$valeur.'" data-color-format="hex" id="'.$propriete.$delimiteur1.$attr.'">
                <input id="'
.$propriete.$delimiteur1.$attr.'" name="'.$propriete.$delimiteur1.$attr.'" type="text" size="14" value="'.$valeur.'" style="width: 55px;"/><span class="add-on"><i style="background-color: '.$valeur.'"></i></span>
                </div>
            
            </td>

'
;

     }else{ 
echo
'


            <td>
                <div class="input-append color pull-right">
                <input id="'
.$propriete.$delimiteur1.$attr.'" name="'.$propriete.$delimiteur1.$attr.'" type="text" size="40" value="'.$valeur.'" style="width: 55px;"/>
                </div>
            </td>'
;
            
            
            



    }

            

echo
'            

</td>'
;
 }

echo
'</tr>
    </tr>'
;
     }        




    
global 
$xoopsUser;
    
//$useruid = $xoopsUser -> uid();
$useruid = (is_object($xoopsUser)) ? $xoopsUser->getVar('uid') : 0;
echo 
'userid  '.$useruid;
//if ( $useruid == 1 ){
if($xoopsUser && ($xoopsUser->isAdmin())){
echo 
'  vous etes admin donc vous pouvez enregistrer les modifications';

echo 
'

    <tr>
        <td colspan="2">
            <ul class="pager ct_submit">
                <li class="previous">
                    <button id="button-cancel" class="btn btn-small btn-normal border-radius3">
                        Annuler
                    </button>
                </li>
                <li class="next">
                    <button id="button-save" class="btn btn-small btn-blue border-radius3">
                        Enregistrer
                    </button>
                    <input type="hidden" name="action" value="customize-save" />
                </li>
                <li class="next">
                    <button id="button-reset" class="btn btn-small btn-blue border-radius3">
                        Reprendre la configuration par defaut
                    </button>
                </li><br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
            </ul>
        </td>
    </tr>
'
;


}else{

echo 
'  il faut se loguer en mode admin pour pouvoir enregistrer les modifications';


}


   echo
'</table>

</form>
</div>'
;

        


        




?>
    






<link rel="stylesheet" type="text/css" media="screen" href="http://airborne431.com/assets/js/lib/bootstrap-colorpicker/css/colorpicker.css" />-->
<script src="http://airborne431.com/assets/js/lib/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>

<script type="application/javascript">

$(document).ready(function(){
    
        <?php foreach($Olivee->get_css() as $propriete => $attribute): ?>
    
        //<?php echo $propriete?>
        <?php $propriete trim($propriete);?>
        //<?php echo $propriete?>
        <?php $dddd substr($propriete,01);
        
        if(
$dddd == '.'){
        
//$propriete = substr($propriete, 1);
        
$propriete substr_replace($propriete'bob'01);
        }
        if(
$dddd == '#'){
        
//$propriete = substr($propriete, 1);
        
$propriete substr_replace($propriete'ror'01);
        }
    
        
$propriete str_replace(':''kok'$propriete);
        
$propriete str_replace(', ''fof'$propriete);
        
$propriete str_replace('; ''qoq'$propriete);
        
$propriete str_replace(' .''mom'$propriete);
        
$propriete str_replace(' ''non'$propriete);
        
$propriete str_replace('a.''yoy'$propriete);
        
//$propriete = str_replace('-', '', $propriete);
        
?>
           <?php 
        
        
if (is_array($attribute)):
        foreach(
$attribute as $attr => $valeur): 
    

if (
in_array($attr$os)) : ?>

//$('#<?php echo $propriete.$delimiteur1.$attr?>').colorpicker()

$("#<?php echo $propriete.$delimiteur1.$attr?>").colorpicker().on("changeColor", function(ev){
    hex = ev.color.toHex();
//alert(hex);


    <?php 
$ddddd1 
substr($propriete,03); //Nanhe 
if($ddddd1 == 'bob'){
$propriete1 substr_replace($propriete''03);
}if(
$ddddd1 == 'ror'){
$propriete1 substr_replace($propriete''03);
}

        
?>
        
    $(".<?php echo $propriete1?>").css({
        "background-color": hex
    });
    //$("#<?php echo $valeur;?>").val(hex);
    
});


<?php else :?>

    $('#<?php echo $propriete.$delimiteur1.$attr?>').on('input', function() {
    //var valeur;
    var value = $("#<?php echo $propriete.$delimiteur1.$attr?>").val();
    var propertyName = '<?php echo $attr?>';
    //var value = '#00ff00';
    //alert();
    
    <?php 
$ddddd1 
substr($propriete,03); //Nanhe 
if($ddddd1 == 'bob'){
$propriete1 substr_replace($propriete''03);
}if(
$ddddd1 == 'ror'){
$propriete1 substr_replace($propriete''03);
}

        
?>
    
    $('.<?php echo $propriete1?>').css(propertyName, value);
    var uuuu = '<?php echo $propriete1?>';
    //console.log(uuuu);
    //console.log(propertyName);
    //console.log(value);


});




<?php endif ?>

    



<?php endforeach;
endif; 
?>
    <?php endforeach; ?>
    

    
    



    
    // prevent form submission
    $("form").submit(function(event){
         event.preventDefault();
    });
    
    $("#button-cancel").click(function(){
        window.location = "<?php echo 'theme_setting.php';?>";
    });
    
    $("#button-save").click(function(){
        
        $("#ajax-response-container").html("");
        //$(this).attr("disabled", "disabled").addClass("disabled");

        var_form_data = $('form[name="theme-customization"]').serialize();
        //alert(var_form_data);
        
        $.ajax({
            url: "<?php echo 'theme_settingg.php';?>",
            data: var_form_data,
            type: "POST",
            dataType: "json",
            success: function(data){
                $("#ajax-response-container").html(data["msg"]).show();
                //alert('ok');
                //$("#button-save").removeAttr("disabled").removeClass("disabled");
            },
            error: function(data){
                    //alert(data);
                     //console.log(data);
                    $("#ajax-response-container").html(data["msg"]).show();
                    //$("#ajax-response-container").html("il y a une erreur").show();
            }    
            
        });
    });
    
    
    
    $('#toggle4').click(function() {

    $('.toggle4').slideToggle('slow');

    return false;

});

    
    $('#button-reset').click(function(){
        
        if (confirm('Toutes les modification seront supprimer. CSS par defaut sera installe!')) { 
            $.ajax({
                url: '<?php echo 'theme_settingg.php'?>',
                data: {
                    reset: 'true'
                },
                type: 'POST',
                dataType: 'json',
                success: function(data){
                $("#ajax-response-container").html(data["msg"]).show();
                    window.location = "<?php echo 'theme_setting.php';?>";
                }
            });
        }
        return false;
    });
});

</script>



2eme fichier c'est le fichier theme_settingg.php à ajouter egalement à coté du fichier index.php


<?php

//modifier xtubestyle.css par le lien relatif du fichier style css du module. pour le module publisher
//$fichiercssamodifier = './css/publisher.css';

$fichiercssamodifier 'xtubestyle.css';


if (
$_POST['action'] == 'customize-save'){

$delimiteur1 'jjjjjjjjjj';
$zz '';
$temp = array();
$count 0;
$len count($_POST);
   foreach (
$_POST as $key => $value) {
        
$pieces explode($delimiteur1$key);
        
$dddd substr($pieces[0],03);
        if(
$dddd == 'bob'){
        
$pieces[0] = substr_replace($pieces[0], '.'03);
        }if(
$dddd == 'ror'){
        
$pieces[0] = substr_replace($pieces[0], '#'03);
        }
        
$pieces[0] = str_replace('kok'':'$pieces[0]);
        
$pieces[0] = str_replace('fof'', '$pieces[0]);
        
$pieces[0] = str_replace('qoq''; '$pieces[0]);
        
$pieces[0] = str_replace('mom'' .'$pieces[0]);
        
$pieces[0] = str_replace('non'' '$pieces[0]);
        
$pieces[0] = str_replace('yoy''a.'$pieces[0]);

        if(!
in_array($pieces[0], $temp)){
        
                
$temp[] = $pieces[0];
            
            if (
$count == 0){
                
$zz .= $pieces[0]." {rn";
            }elseif (
$count == $len 1) {
                
$zz .= "}";// last
            
}else{
                
$zz .= "}rn".$pieces[0]." {rn";
            }
        }

        
//$zz .= "t".$pieces[1];
        //$zz .= ': '.$value.";rn ";

        
if ($count == $len 1) {
            
$zz .= "";
        }else{
            
$zz .= "t".$pieces[1];
            
$zz .= ': '.$value.";rn ";
        }
        
$count++;
    }
    
                            
$f = @fopen($fichiercssamodifier'w+');
                            if (
$f) {
                              @
fputs($f$zz."nn");
                              
//echo 'log is done';
                              
@fclose($f);
                            }

    
header("Content-Type: application/json"true);
    echo 
json_encode(array('success' => true,
                            
'msg' => 'enregistre retour a l interface admin'
                          
));
                          exit();

}

if (
$_POST['reset'] == 'true'){

   
$file fopen(''.$fichiercssamodifier.'___original.css''rb');
    
$newfile fopen($fichiercssamodifier'wb');
    while((
$line fgets($file)) !== false) {

       
fputs($newfile$line);
     
    }
    
fclose($newfile);
    
fclose($file);
    
    
header("Content-Type: application/json"true);
        echo 
json_encode(array('success' => true,
                                
'msg' => 'enregistre retour a l interface admin'
                              
));
}
?>







le 3eme fichier c'est le fichier cssparser1.php a ajouter dans le dossier class du module

<?php
//class test pour parser le css du module
//on peut l'utiliser egalement plutard pour parser le css du theme et pourquoi pas le css de xoops pour modifier les classes et les id automatiquement

class YATOUNES
{        
        protected 
$css;
        protected 
$cssprops;
        protected 
$cssstr;


        public function 
__construct() 
        {
                
$this->css = array();
                
$this->cssprops = array();
                
$this->cssstr "";
        }

        public function 
parse_file($file_name)  
        {
                
$fh fopen($file_name"r") or die("Error opening file $file_name");
                
$css_str fread($fhfilesize($file_name));
                
fclose($fh);
                return(
$this->parse_css($css_str));
        }


        public function 
parse_css($css_str
        {
                
$this->cssstr $css_str;
                
$this->css "";
                
$this->cssprops "";

                
// Strip all line endings and both single and multiline comments
                
$css_str preg_replace("//*.+?*//s"""$css_str);

                
$css_class explode("}"$css_str);
                
                while(list(
$key$val) = each($css_class)){
                    
$aCSSObj explode("{"$val);
                    
$cSel strtolower(trim($aCSSObj[0]));
                        if(
$cSel){
                                
$this->cssprops[] = $cSel;
                        
$a explode(";"$aCSSObj[1]);
                        while(list(
$key$val0) = each($a)){
                                        if(
trim($val0)){          
                                                
$aCSSSub explode(":"$val0);
                                                
$cAtt strtolower(trim($aCSSSub[0]));
                                                if(isset(
$aCSSSub[1])){
                                                        
$aCSSItem[$cAtt] = trim($aCSSSub[1]);
                                                } 
                                  }
                        }
                        if((isset(
$this->css[$cSel])) && ($this->css[$cSel])){
                                
$aCSSItem array_merge($this->css[$cSel], $aCSSItem);
                        }                                
                        
$this->css[$cSel] = $aCSSItem;
                        unset(
$aCSSItem);
                        }
                        if(
strstr($cSel",")){
                                
$aTags explode(","$cSel);
                                foreach(
$aTags as $key0 => $value0){
                                        
$this->css[$value0] = $this->css[$cSel];
                                }
                                unset(
$this->css[$cSel]);
                        }                                
                } 
                unset(
$css_str$css_class$aCSSSub$aCSSItem$aCSSObj);
                return 
$this->css;
        }


        public function 
build_css($sorted false
        {
                
$this->cssstr "";                
                foreach(
$this->css as $key0 => $value0) {
                        
$trimmed trim($key0);
                        
$this->cssstr .= "$trimmed {n";
                        if(
$sortedksort(&$this->css[$key0], SORT_STRING);
                        foreach(
$this->css[$key0] as $key1 => $value1) {
                                
$this->cssstr .= "t$key1$value1;n";
                        }
                        
$this->cssstr .= "}n";
                }
                return (
$this->cssstr);
        }
        

        public function 
write_file($file_name$sorted false)
        {
                if(
$this->css == "") die("There is no CSS to write!");
                if(
$this->cssstr == ""$this->build_css($sorted);
                
$fh fopen($file_name"w") or die("Error opening file $file_name");
                
fwrite($fh$this->cssstr);
                
fclose($fh);        
        }
        

        public function 
get_css()
        {
                if (isset(
$this->css)) return ($this->css);        
                return 
false;                
        }
        

        public function 
get_properties()
        {
                if (isset(
$this->cssprops)) return ($this->cssprops);        
                return array();                
        }
        

        public function 
get_property($prop)
        {
                if (isset(
$this->css[$prop])) return ($this->css[$prop]);        
                return array();                
        }
        

        public function 
get_value($prop$attr)
        {
                if (isset(
$this->css[$prop][$attr])) return ($this->css[$prop][$attr]);        
                return 
"";
        }

        public function 
set_value($prop$attr$value)
        {
                if(empty(
$prop)||empty($attr)) return false;
                
$this->css[$prop][$attr] = $value;
        return 
true;
        }
}



chaque développeur ou webmaster peut l’adapter comme il veut en fonction des classes et des id de son module. Il nous permet d'avoir un fichier style au norme de css2 et css3.
pas mal de CMS et de script payant utilisent cette technique pour faciliter la configuration et rendre le script facile et intéressant, j'ai fais pas mal de test avec le fichier css du theme et de xoops et c'est magnifique.

vous pouvez me proposer des corrections s'il y a une partie du code qui vous semble bizarre et s'il y a des autres possibilités que je peux ajouter en plus, j'envisage ajouter la possibilité de modifier le fichier css directement pour ajouter plus de proporités css dans une classe sans passer par ftp et notepad.


edit: OUPS les anti slash ne s'affichent pas. je veut chercher un moyen pour uploader les fichiers sur un serveur

voilà le lien pour télécharger
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

48 Personne(s) en ligne (35 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 1 | Invité(s): 47 | JJDai, Plus ...