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($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_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,0, 1);
if($dddd == '.'){
//$propriete = substr($propriete, 1);
$propriete = substr_replace($propriete, 'bob', 0, 1);
}
if($dddd == '#'){
//$propriete = substr($propriete, 1);
$propriete = substr_replace($propriete, 'ror', 0, 1);
}
$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,0, 1);
if($dddd == '.'){
//$propriete = substr($propriete, 1);
$propriete = substr_replace($propriete, 'bob', 0, 1);
}
if($dddd == '#'){
//$propriete = substr($propriete, 1);
$propriete = substr_replace($propriete, 'ror', 0, 1);
}
$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,0, 3); //Nanhe
if($ddddd1 == 'bob'){
$propriete1 = substr_replace($propriete, '', 0, 3);
}if($ddddd1 == 'ror'){
$propriete1 = substr_replace($propriete, '', 0, 3);
}
?>
$(".<?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,0, 3); //Nanhe
if($ddddd1 == 'bob'){
$propriete1 = substr_replace($propriete, '', 0, 3);
}if($ddddd1 == 'ror'){
$propriete1 = substr_replace($propriete, '', 0, 3);
}
?>
$('.<?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],0, 3);
if($dddd == 'bob'){
$pieces[0] = substr_replace($pieces[0], '.', 0, 3);
}if($dddd == 'ror'){
$pieces[0] = substr_replace($pieces[0], '#', 0, 3);
}
$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($fh, filesize($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($sorted) ksort(&$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
|
