Neue Typo3 Extension - CSS Editor

<?php
/***************************************************************
*  Copyright notice
*
*  (c) 2008 Matthias Häger <matthias.haeger@uni-konstanz.de>
*  All rights reserved
*
*  This script is part of the TYPO3 project. The TYPO3 project is
*  free software; you can redistribute it and/or modify
*  it under the terms of the GNU General Public License as published by
*  the Free Software Foundation; either version 2 of the License, or
*  (at your option) any later version.
*
*  The GNU General Public License can be found at
*  http://www.gnu.org/copyleft/gpl.html.
*
*  This script is distributed in the hope that it will be useful,
*  but WITHOUT ANY WARRANTY; without even the implied warranty of
*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*  GNU General Public License for more details.
*
*  This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/


    // DEFAULT initialization of a module [BEGIN]
unset($MCONF);
require_once('conf.php');
require_once($BACK_PATH.'init.php');
require_once($BACK_PATH.'template.php');

$LANG->includeLLFile('EXT:rz_csseditor/mod1/locallang.xml');
require_once(PATH_t3lib.'class.t3lib_scbase.php');
$BE_USER->modAccess($MCONF,1);    // This checks permissions and exits if the users has no permission for entry.
    // DEFAULT initialization of a module [END]



/**
  Module 'CSS Editor' for the 'rz_csseditor' extension.
 *
  @author    Matthias Häger <matthias.haeger@uni-konstanz.de>
  @package    TYPO3
  @subpackage    tx_rzcsseditor
 */
class  tx_rzcsseditor_module1 extends t3lib_SCbase {
                var $pageinfo;

                /**
                  Initializes the Module
                  @return    void
                 */
                function init()    {
                    global $BE_USER,$LANG,$BACK_PATH,$TCA_DESCR,$TCA,$CLIENT,$TYPO3_CONF_VARS;

                    parent::init();

                    /*
                    if (t3lib_div::GP('clear_all_cache'))    {
                        $this->include_once[] = PATH_t3lib.'class.t3lib_tcemain.php';
                    }
                    /
                }

                /**
                  Adds items to the ->MOD_MENU array. Used for the function menu selector.
                 *
                  @return    void
                 */
                function menuConfig()    {
                    global $LANG;
                    $this->MOD_MENU = Array (
                        'function' => Array (
                            '1' => $LANG->getLL('function1'),
                            '2' => $LANG->getLL('function2'),
                            '3' => $LANG->getLL('function3'),
                        )
                    );
                    parent::menuConfig();
                }

                /**
                  Main function of the module. Write the content to $this->content
                  If you chose "web" as main module, you will need to consider the $this->id parameter which will contain the uid-number of the page clicked in the page tree
                 *
                  @return    [type]        ...
                 */
                function main()    {
                    global $BE_USER,$LANG,$BACK_PATH,$TCA_DESCR,$TCA,$CLIENT,$TYPO3_CONF_VARS;

                    // Access check!
                    // The page will show only if there is a valid page and if this page may be viewed by the user
                    $this->pageinfo = t3lib_BEfunc::readPageAccess($this->id,$this->perms_clause);
                    $access = is_array($this->pageinfo) ? 1 : 0;


                    //Einführung einer zusätzlichen Abfrage um die Extension auch für Nicht-Admins nutzbar zu machen.
                    if (($this->id && $access) || ($BE_USER->user['admin'] && !$this->id) || 1==1)    {

                            // Draw the header.
                        $this->doc = t3lib_div::makeInstance('mediumDoc');
                        $this->doc->backPath = $BACK_PATH;
                        $this->doc->form='<form action="" method="POST">';

                            // JavaScript
                        $this->doc->JScode = '
                            <script language="javascript" type="text/javascript">
                                script_ended = 0;
                                function jumpToUrl(URL)    {
                                    document.location = URL;
                                }
                            </script>
                        ';
                        $this->doc->postCode='
                            <script language="javascript" type="text/javascript">
                                script_ended = 1;
                                if (top.fsMod) top.fsMod.recentIds["web"] = 0;
                            </script>
                        ';

                        $headerSection = $this->doc->getHeader('pages',$this->pageinfo,$this->pageinfo['_thePath']).'<br />'.$LANG->sL('LLL:EXT:lang/locallang_core.xml:labels.path').': '.t3lib_div::fixed_lgd_pre($this->pageinfo['_thePath'],50);

                        $this->content.=$this->doc->startPage($LANG->getLL('title'));
                        $this->content.=$this->doc->header($LANG->getLL('title'));
                        $this->content.=$this->doc->spacer(5);
                        //$this->content.=$this->doc->section('',$this->doc->funcMenu($headerSection,t3lib_BEfunc::getFuncMenu($this->id,'SET[function]',$this->MOD_SETTINGS['function'],$this->MOD_MENU['function'])));
                        $this->content.=$this->doc->divider(5);


                        // Render content:
                        $this->moduleContent();


                        // ShortCut
                        if ($BE_USER->mayMakeShortcut())    {
                            $this->content.=$this->doc->spacer(20).$this->doc->section('',$this->doc->makeShortcutIcon('id',implode(',',array_keys($this->MOD_MENU)),$this->MCONF['name']));
                        }

                        $this->content.=$this->doc->spacer(10);
                    } else {
                            // If no access or if ID == zero

                        $this->doc = t3lib_div::makeInstance('mediumDoc');
                        $this->doc->backPath = $BACK_PATH;

                        $this->content.=$this->doc->startPage($LANG->getLL('title'));
                        $this->content.=$this->doc->header($LANG->getLL('title'));
                        $this->content.=$this->doc->spacer(5);
                        $this->content.=$this->doc->spacer(10);
                    }
                }

                /**
                  Prints out the module HTML
                 *
                  @return    void
                 */
                function printContent()    {

                    $this->content.=$this->doc->endPage();
                    echo $this->content;
                }

                /**
                  Generates the module content
                 *
                  @return    void
                 */
                function moduleContent()    {
                    //Ermittlung der Gruppe des eingeloggten Benutzers
                    $group_id = (int)strtok($GLOBALS['BE_USER']->user[usergroup], ",");
                    $res = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
                        'title',
                        'be_groups',
                        'uid='.$group_id,
                        '',
                        '',
                        ''
                        );
                    $row=$GLOBALS['TYPO3_DB']->sql_fetch_assoc($res);
                    $group = $row['title'];
                   
                    //Einstellbare Parameter (Keywords)
                    $params = array("CSS_H1", "CSS_H2", "CSS_NAVTOP", "CSS_NAVMAIN", "CSS_LEFTNAV", "CSS_CONTENT", "CSS_LINK");
                    switch((string)$this->MOD_SETTINGS['function'])    {
                        case 1:
                            if(t3lib_div::_POST('do')=="send") {
                                $this->updateCSS($group, $params);
                                $content = "Änderungen eingetragen!";
                                $content .= "<hr>";
                                $content .= $this->renderPage($group, $params);
                            } else {
                                $content = $this->renderPage($group, $params);
                            }
                            $this->content.=$content;
                        break;
                        case 2:
                            $content='<div align=center><strong>Menu item #2...</strong></div>';
                            $this->content.=$this->doc->section('Message #2:',$content,0,1);
                        break;
                        case 3:
                            $content='<div align=center><strong>Menu item #3...</strong></div>';
                            $this->content.=$this->doc->section('Message #3:',$content,0,1);
                        break;
                    }
                }

                /**
                  Generiert die Seite und gibt sie an die übergeordnete Funktion zurück.
                 *
                  @param    String  Name der Gruppe des Benutzers
                  @param    Array    Die Parameter die in der CSS-Datei verändert werden sollen.
                  @return    String    Output der Webseite
                 */
                function renderPage($group, $params) {

                    //Festlegung der Beschreibung der einzelnen Parameter
                    $CSS_H1 = "Hintergrundfarbe Überschrift 1. Ordnung: ";
                    $CSS_H2 = "Farbe der Überschrift 2. Ordnung: ";
                    $CSS_NAVTOP = "Hintergrundfarbe Top-Menü mit Quicklinks: ";
                    $CSS_NAVMAIN = "Hintergrundfarbe Hauptmenü: ";
                    $CSS_LEFTNAV = "Hintergrundfarbe linkes Navigationsmenü: ";
                    $CSS_CONTENT = "Hintergrundfarbe Hauptinhaltsbereich: ";
                    $CSS_LINK = "Farbe eines Links im Inhaltsbereich: ";
                   
                    //Einleitender Text
                    $output = "In diesem Bereich können Sie Farben für Ihren Webauftritt anpassen. Das Layout der Universität wird vorgegeben, Ihre Wahl der Farben wird in einem eigenen CSS-File für Ihre Webseiten niedergelegt. Damit können Sie Ihre Seiten farblich nach Ihren Wünschen gestalten.<br /><br />
In jeder Zeile sehen Sie den aktuellen Hex-Farbwert für die angegebene Eingeschaft. Durch einen Klick auf Edit wird der Farbwähler daneben auf diesen Wert eingestellt. Sie können die Farbe frei verändern, die Auswirkungen können Sie direkt unten in der Vorschau beobachten. Mit einem Klick auf den Button \"Übernehmen\" wird der neue Farbwert übernommen (dargestellt durch rote Farbe). Mit \"Reset\" setzen Sie den Farbwähler auf den Ausgangswert zurück. Endgültig in die Datei geschrieben werden die Änderungen erst bei einem Klick auf \"Änderungen in Datei schreiben.\" <b>Vorsicht: Dieser Klick hat direkte Auswirkungen auf Ihre Webseite.</b>
<br /><br />";                   
                    $output .= "Sie sind Angehöriger der Gruppe: ".$group."<br />";
   
               
                    //Datei öffnen
                    $file = file("https://cms.uni-konstanz.de/fileadmin/templates/".$group.".css");
                    //Array durchlaufen und Zeilennummer (+2) und Wert für wichtige Eigenschaften speichern
                    $css_config = array();
                    for($i=0; $i<count($file);$i++) {
                        foreach($params as $unit) {
                            if(strstr($file[$i], "/***".$unit."***/") != false) {
                                $css_config[$unit."_line"] =  $i+2;
                                $css_config[$unit."_value"] = substr(strrchr($file[$i+2],"#"),0,7);
                            }
                        }
                    }
                    $output .= "<br>";
                   
                    //Globale JavaScript Variablen definieren um später die richtigen Wert in der Vorschau zu verändern.
                    $output .= '<script type = "text/javascript">var ziel; var attribut;</script>';

                    //Formularzeilen und die Buttons zum Editieren
                    $output .= "<form action=\"".$this->file."\" method=\"post\">";
                    $output .= "<input type = \"hidden\" name=\"do\" value=\"send\">";
                    $output .="<table>";
                    foreach($params as $unit) {
                        $output .= "<tr><td>".$$unit."</td><td>";
                        $output .= "<input type = \"hidden\" name=\"".$unit."_line\" value=".$css_config[$unit."_line"].">";
                        if($unit == "CSS_H2" || $unit == "CSS_LINK") {
                            $output .= "<input type = \"text\"
                             onkeyup=\"document.getElementById('".$unit."').style.color=this.value;\"
                            class=\"value-box\"
                            name=\"".$unit."_value\"
                             id=\"".$unit."_value\"
                             value=".$css_config[$unit."_value"].">
                            <input type=\"button\" value=\"Edit\" onclick=\"rgb=hex2val(document.getElementById('".$unit."_value').value); ziel='".$unit."'; attribut='color'; picker.setValue(rgb, false);\"></td></tr>";
                        } else {
                            $output .= "<input type = \"text\"
                             onkeyup=\"document.getElementById('".$unit."').style.backgroundColor=this.value;\"
                            class=\"value-box\"
                             name=\"".$unit."_value\"
                             id=\"".$unit."_value\"
                             value=".$css_config[$unit."_value"].">
                            <input type=\"button\" value=\"Edit\" onclick=\"rgb=hex2val(document.getElementById('".$unit."_value').value); ziel='".$unit."'; attribut='backgroundColor'; picker.setValue(rgb, false)\"></td></tr>";
                       
                        }
                    }
                    $output .= "</table><br /><br /><input type = \"submit\" value=\"Änderungen in Datei schreiben\"> ";
                    $output .= "<input type = \"reset\" value=\"Änderungen zurücksetzen\" onclick=\"location.reload()\">";
                    $output .= "</form><br />";

                    //Darstellung des Farbwählers               
                    $output .= $this->colorChooser();
                    //Darstellung der Live-Vorschau
                    $output .= $this->renderVorschau($params, $css_config);
                    //Rückgabe des Outputs.
                    return $output;

                }

                /**
                  Generiert und konfiguriert den Farbwähler, beinhaltet JavaScript Hilfsfunktionen.
                 *
                  @return    String    Output Farbwähler
                 */
                function colorChooser() {
                    $output;
                   
                    //Grundlegende Div-Boxen für den Inhalt, Einbindung der YUI Scripts und CSS-Files
                    $output .= '
                        <div id="colorChooser" class="yui-skinsam">
                        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/utilities/utilities.js"></script>
                        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/slider/slider-min.js"></script>
                        <link rel="stylesheet" type="text/css" href="/fileadmin/templates/colorpicker.css">
                        <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/colorpicker/colorpicker-min.js"></script>
                        <div id="CC_container"></div>';
                    //JavaScripts für die Ausführung. Zuerst Initialisierung des Farbwählers, danach Funktion die aus einem gegebenen
                    //Hex-Wert ein entsprechendes RGB-Array errechnet. Danach eine Funktion, die die Live-Vorschau aktualisiert und zum
                    //Schluß ein Event-Listener der bei einer Farbveränderung im Farbwähler direkt eine Veränderung in der Vorschau bewirkt.
                    $output .='
                        <script type="text/javascript">
                        var picker = new YAHOO.widget.ColorPicker("CC_container", {
                            showhsvcontrols: true,
                            showhexcontrols: true,
                            images: {
                                PICKER_THUMB: "picker_thumb.png",
                                HUE_THUMB: "hue_thumb.png"
                            }
                        });

                        function hex2val(hex) {
                            MyArray = new Array(parseInt(hex.substring(1,3),16), parseInt(hex.substring(3,5),16), parseInt(hex.substring(5,7),16));
                            return MyArray;
                        }

                        function updateAll(ziel, attribut, value, change) {
                            document.getElementById(ziel+\'_value\').value=v;
                            if(attribut == "color") {
                                document.getElementById(ziel).style.color=v;
                            } else {
                                document.getElementById(ziel).style.backgroundColor=v;
                            }
                            if(change == 1) {
                                document.getElementById(ziel+\'_value\').style.color=\'red\';
                            } else {}

                        }

                        var onRgbChange = function(o) {
                            hexreihe = \'0123456789abcdef\';
                            hex = "#";
                            for(i=0;i<3;i++) {
                                rgb = o.newValue[i];
                                ganz = Math.floor(rgb/16);
                                hex_single = hexreihe.charAt(ganz) + hexreihe.charAt(rgb-ganz*16);
                                hex = hex + hex_single;
                            }
                            if(attribut == "color") {
                                document.getElementById(ziel).style.color=hex;
                            } else {
                                document.getElementById(ziel).style.backgroundColor=hex;
                            }   
                           
                        }
                        picker.on("rgbChange", onRgbChange);
                        </script>';
                       
                        //Zwei Buttons zum Übernehmen der Farbe bzw. zum Reset
                        $output .= '<input type="button" id="closeCC" value="Übernehmen" onclick="v = \'#\'+picker.get(\'hex\'); updateAll(ziel, attribut, v, 1);">
                        <input type="button" id="resetCC" value="Reset" onclick="v = document.getElementById(ziel+\'_value\').value; updateAll(ziel, attribut, v, 0); rgb=hex2val(v); picker.setValue(rgb, false);">
';
                        $output .= '</div>';
                    return $output;
                }

                /**
                  Generiert eine Live-Vorschau der Webseite mit dem Grundlayout der Uni
                 *
                  @param    Array    Die Parameter die in der CSS-Datei verändert werden sollen.
                  @param    Array    Array mit den verschiedenen Farbwerten
                  @return    String    Output der Live-Vorschau
                 */
                function renderVorschau($params, $css_config) {
                    $output = "";
                   
                    //Zeichnung einer Webseite im Uni-Layout mit den CSS-Tags. Grundfarben im eingebundenen CSS-File
                    $output .= '<div id="CSS_BODY">
                        <link rel="stylesheet" type="text/css" href="/fileadmin/templates/vorschau.css">
                    <div id="logo"><img src="http://cms.uni-konstanz.de/fileadmin/templates/uni/logo.jpg" border="0"></div>
                    <div id="identityimage"><img src="http://cms.uni-konstanz.de/uploads/pics/home.png" width="220" height="134" border="0"></div>
                    <div id="heading"><p>Demoseite<br>CSS Vorschau<br></p></div>
                    <div id="CSS_NAVTOP"><ul><li><a>Home</a></li><li><a>Sitemap</a></li><li><a>Impressum</a></li></ul></div>
                    <div id="CSS_NAVMAIN"><ul><li><a style="background:white;" class="active">Menüpunkt 1</a></li><li><a>Menüpunkt 2</a></li></ul></div>
                    <div id="CSS_LEFTNAV"><ul class="leftnav"><li><a href="#">Unterseite</a></li><li><a href="#">2. Unterseite</a></li></ul></div>
                    <div id="CSS_CONTENT"><h1 id="CSS_H1">Überschrift 1. Ordnung</h1>
                    <p>Dies ist ein Blindtext. Dies ist ein Blindtext. Dies ist ein Blindtext. Dies ist ein Blindtext. Dies ist ein Blindtext. Diest ist ein Blindtext. Dies ist ein Blindtext. Dies ist ein Blindtext.</p>
                    <h2 id="CSS_H2">Überschrift 2. Ordnung</h2>
                    <p>Blindtext mit <a id="CSS_LINK" href="#">einem Link</a>!!!!!</p>
                    </div>
                        </div>';
                   
                    //Generierung von JavaScript Code, der der Vorschau die initial eingelesenen Farbwerte aus dem übergebenen Array zuweist.
                    $output .= '<script type="text/javascript">';
                    foreach($params as $unit) {
                        if($unit == "CSS_H2" || $unit == "CSS_LINK") {
                            $output .= "document.getElementById('".$unit."').style.color='".$css_config[$unit."_value"]."';";
                        } else {
                            $output .= "document.getElementById('".$unit."').style.backgroundColor='".$css_config[$unit."_value"]."';";
                        }
                    }
                    $output .= '</script>';

                    //Rückgabe der Vorschau
                    return $output;
                }

                /**
                  Öffnet die CSS-Datei, liest sie in ein Array und überschreibt die bisherigen Werte mit den neuen Angaben.
                 *
                  @param    String  Name der Gruppe des Benutzers
                  @param    Array    Die Parameter die in der CSS-Datei verändert werden sollen.
                  @return    String    Output der Webseite
                 */
                function updateCSS($group, $params) {
                    //Bisherige Datei öffnen
                    $file = file("../../../../fileadmin/templates/".$group.".css");
                   
                    //Array der Parameter durchlaufen
                    foreach($params as $unit){
                        if($unit == "CSS_H2" || $unit == "CSS_LINK") {
                            //Zeile+3 muss ebenfalls geändert werden, damit die Linkfarbe auch bei a:visited gilt
                            if($unit == "CSS_LINK") {
                                $file[t3lib_div::_POST($unit."_line")] = "color:".t3lib_div::_POST($unit."_value").";\n";
                                $file[(int) t3lib_div::_POST($unit."_line") + 3] = "color:".t3lib_div::_POST($unit."_value").";\n";
                            } else {
                                $file[t3lib_div::_POST($unit."_line")] = "color:".t3lib_div::_POST($unit."_value").";\n";
                            }
                        } else {
                            $file[t3lib_div::_POST($unit."_line")] = "background-color:".t3lib_div::_POST($unit."_value").";\n";
                            //Bei der Linksnavigation muss die Änderung der Farben auch auf die Untermenüs übertragen werden. Deshalb Zeile+3 +6 und +9 ebenfalls mit dem Farbwert beschreiben.
                            if($unit == "CSS_LEFTNAV") {
                                $file[(int) t3lib_div::_POST($unit."_line") + 3] = "background-color:".t3lib_div::_POST($unit."_value").";\n";
                                $file[(int) t3lib_div::_POST($unit."_line") + 6] = "background-color:".t3lib_div::_POST($unit."_value").";\n";
                                $file[(int) t3lib_div::_POST($unit."_line") + 9] = "background-color:".t3lib_div::_POST($unit."_value").";\n";
                            }
                        }
                    }
                    $newcss;       
                    //Umwandlung Array in ein String
                    foreach($file as $unit) {
                        $newcss .= $unit;
                    }
                    //String in Datei schreiben
                    t3lib_div::writeFile("../../../../fileadmin/templates/".$group.".css", $newcss);
                    //Ins Logfile schreiben
                    $this->log("[".date("Y-m-d - H:i:s")." - IP: ".$_SERVER['REMOTE_ADDR']."]@@@Geändertes CSS geschrieben: ___".$group."__");
                }

                /**
                  Methode um in ein Logfile zu schreiben.
                 *
                  @params    string    In das Logfile zu schreibender String
                 */
                function log($message) {
                    $logfile = fopen("/var/log/typo3/rz_css_editor.log", "a");   
                    fwrite($logfile, $message."\n");
                }
            }



if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/rz_csseditor/mod1/index.php'])    {
    include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/rz_csseditor/mod1/index.php']);
}




// Make instance:
$SOBE = t3lib_div::makeInstance('tx_rzcsseditor_module1');
$SOBE->init();

// Include files?
foreach($SOBE->include_once as $INC_FILE)    include_once($INC_FILE);

$SOBE->main();
$SOBE->printContent();

 Allgemein /

/***CSS_BODY***/
body {
	background-color: #FFFFFF;
}

/***CSS_H1***/
h1 {
	background-color:#DEE9EF;
}

/***CSS_H2***/
h2 {
	color:#005577;
}

/***CSS_LINK***/
a:link {
	color:#005577;
}
a:visited {
	color:#005577; 
}


/ Statische Navigationsleiste oben /

/***CSS_NAVTOP***/
#navtop {
	background-color: #85a9ba;
}

/ Hauptnavigationsleiste oben /

/***CSS_NAVMAIN***/
#navmain {
	background-color:#DDDDDD;
}


/ Navigationleiste links /

/***CSS_LEFTNAV***/
#leftnav {
	background-color: #dee9ef;
}
ul.leftnav {
	background-color: #dee9ef;
}
ul.leftnav2 {
	background-color: #dee9ef;
}
#leftnav li.notselected a{
	background-color:#dee9ef;
}

/ Inhalt der Seite /

/***CSS_CONTENT***/
#content {
	background-color: #FFFFFF;
}