Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Add-Ons:
Dynamically Get CSS class names for CSS plugin



morris
Novice

Feb 8, 2005, 4:05 PM


Views: 80891
Dynamically Get CSS class names for CSS plugin

Hey All,

I just wrote a PHP class that will take a css file and get the css class names out of it. And if you want return the javascript code which registers the class names for the CSS plugin for HTML Area 3.0... This is my first publiched PHP class I've ever made so if you write PHP let me know what you think of the code... Thanks,

THE CLASS

Code
<?php 

// ------------------------------------------------
// CSS Extractor Class
// v1.0 by Craig Morris
// Will extract all css class names from a css file
// ------------------------------------------------
class CSSExtractor
{
// -----------------------------------
// regular expression to catch classes
// -----------------------------------
var $REG_EXP = '|((\s*([^,{]+)\s*,?\s*)*?){((\s*([^:]+)\s*:\s*([^;]+?)\s*;\s*)*?)}|';

var $css_url; // URL of the css file

// ------------------------------------
// constructor will only assign CSS URL
// ------------------------------------
function CSSExtractor($css_url)
{
$this->css_url = $css_url;
}

// ------------------------------------------
// get classes from css file and return array
// ------------------------------------------
function extractClasses()
{
// ---------------
// get file string
// ---------------
$handle = fopen($this->css_url, "r");
$css = fread($handle, filesize($this->css_url));
fclose($handle);

// --------------------------
// perform regular expression
// --------------------------
preg_match_all($this->REG_EXP, $css, $matches);

// ----------------------
// process classes in css
// ----------------------
$classes = $matches[1];
$processed_classes = array();
foreach($classes as $key=>$class)
{
$array = explode('.', $class);
$array = explode(':', $array[1]);
if ($array[0] != NULL || $array[0] != '') {
$processed_classes[] = trim($array[0]);
}
}
$processed_classes = array_unique($processed_classes);

// ------------------
// return the classes
// ------------------
return $processed_classes;
}

// ------------------------------------------------------
// echo the javascript required by HTMLArea3.0 CSS Plugin
// ------------------------------------------------------
/*
editor.config.pageStyle = "@import url(../styles/general.css);";
editor.registerPlugin(CSS, {
combos : [
{ label: "CSS Class",
// MENU ITEM CLASS NAME
options: { "None" : "",
"Txt in Drop Menu" : "css class name in file"
}
}
]
});
*/
function getJS($targ='editor')
{
$classes = $this->extractClasses();
$js = "
$targ.config.pageStyle = \"@import url(../styles/general.css);\";
$targ.registerPlugin(CSS, {
combos : [
{ label: \"CSS\",
options: {
";
foreach ($classes as $class)
{
$js .= " \"" . $this->getFriendlyName($class) . '" : "' . $class . "\",\n";
}
// get rid of last ',', -2 because of newline character
$js = substr($js, 0, -2);
$js .= "
}
}
]
});";

return $js;
}

// ------------------------------------------------------
// echo the javascript required by HTMLArea3.0 CSS Plugin
// example: headingCopy becomes Heading Copy
// ------------------------------------------------------
function getFriendlyName($name) {
/* things to do to name
1. turn capital letters into spaces ie headingCopy = heading Copy
2. turn other characters into spaces (-_) heading_copy = heading copy
3. Uppercase the first character of each word in a string
*/
$newName = preg_replace('|([A-Z])|', ' \1', $name); // 1.
$newName = preg_replace('|[-_]|', ' ', $newName); // 2.
$newName = ucwords($newName); // 3.

return $newName;
}

} // end class


Implementation

Code
<!-- HTMLAREA 3.0 --> 
<script type="text/javascript">
//<![CDATA[
_editor_url = "includes/htmlarea3/";
_editor_lang = "en";
//]]>
</script><!-- load the main HTMLArea file -->
<script type="text/javascript" src="includes/htmlarea3/htmlarea.js"></script>

<script type="text/javascript">
//<![CDATA[
HTMLArea.loadPlugin("ImageManager");
HTMLArea.loadPlugin("CSS");
HTMLArea.loadPlugin("TableOperations");
initdocument = function () {
var editor = new HTMLArea("ContentHTML");

<?php
// print out CSS plugin stuff
require_once('includes/CSSExtractor.class.php');
$ce = new CSSExtractor('includes/cms.css');
echo $ce->getJS('editor');
?>

// load table stuff
editor.registerPlugin(TableOperations);

editor.generate();
}
function addEvent(obj, evType, fn)
{
if (obj.addEventListener) { obj.addEventListener(evType, fn, true); return true; }
else if (obj.attachEvent) { var r = obj.attachEvent("on"+evType, fn); return r; }
else { return false; }
}
addEvent(window, 'load', initdocument);
//]]>
</script>
<!-- /HTML AREA 3.0 -->



smaulaz
New User

Feb 9, 2005, 3:14 AM


Views: 80875
Re: [morris] Dynamically Get CSS class names for CSS plugin

Hello

Can you explain me how to implemente your class in the HTMLarea structure ?

I don't work often with php classes.

Thank you in advance.

PS : Sorry for my basic school english.