Here is my full standalone test file. I've made two $example variables available on lines 13 and 14, the first all four properties are set (so there is no issue). The second doesn't have the background-color (the first property expected by PHP) set so that is the known issue.
I'm thinking about going back to the regex though I'm sure I'll have to implement changes to that.
Also I know I could possibly move this stuff to JavaScript though like I said earlier that gives me less to figure out with PHP.
I'm curious what you guys think of the stand alone test file though I am not ready to post this in the critique forum...
Code: Select all
<?php session_name("member"); session_start();
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Standalone Test Page</title>
<html>
<head>
<script type="text/javascript">
//<![CDATA[
<?php
$example1 = '#welcome, #content div.border, #content div.bordernorc, #prompts div.scroll, #prompts #promptstabs div.current {background-color: #000; background-image: url(general/11/004.gif); border-color: #3f6; color: #f33;}#body, #prompts {background-color: #3cf; background-image: url(general/11/002.gif); border-color: #0c6; color: #96f;}';
$example2 = '#welcome, #content div.border, #content div.bordernorc, #prompts div.scroll, #prompts #promptstabs div.current {background-image: url(general/11/002.gif); color: #6f0;}body, html {background-color: #c9f; color: #cc0;}';
//$pieces = explode('}', $_SESSION['css']);
$pieces = explode('}', $example1);
//$pieces = explode('}', $example2);
$number = '0';
foreach($pieces as $key=>$value)
{
$my_var1 = split(' {', $value);
echo 'window[\'ii'.$key.'0\'] = \''.$my_var1[0]."';\n";
$my_var2 = split(';', $my_var1[1]);
$rules1 = substr($my_var1[1], strpos($my_var1[1], '{') + 19, strpos($my_var1[1], '}') - (strpos($my_var1[1], '{')-3));
echo 'var ii'.$key.'1 = \''.$rules1."';\n";
$rules2 = substr($my_var2[1], strpos($my_var2[1], '{') + 31, strpos($my_var2[1], '}') - (strpos($my_var2[1], '{')-6));
echo 'var ii'.$key.'2 = \''.$rules2."';\n";
$rules3 = substr($my_var2[2], strpos($my_var2[2], '{') + 16, strpos($my_var2[2], '}') - (strpos($my_var2[2], '{')-6));
echo 'var ii'.$key.'3 = \''.$rules3."';\n";
$rules4 = substr($my_var2[3], strpos($my_var2[3], '{') + 9, strpos($my_var2[3], '}') - (strpos($my_var2[3], '{')-6));
echo 'var ii'.$key.'4 = \''.$rules4."';\n";
}
?>
function fill_values(my_param)
{
for (var i=0; i<3; i++) //26
{
var the_selector = i;
var the_var_form = 'ce' + the_selector + '0';
var the_var_form1 = 'ce' + the_selector + '1';
var the_var_form2 = 'ce' + the_selector + '2';
var the_var_form3 = 'ce' + the_selector + '3';
var the_var_form4 = 'ce' + the_selector + '4';
var s = 'ii' + my_param + '0';
var s1 = 'ii' + my_param + '1';
var s2 = 'ii' + my_param + '2';
var s3 = 'ii' + my_param + '3';
var s4 = 'ii' + my_param + '4';
if (document.getElementById(the_var_form).value == this[s]) {alert(the_var_form + 'match at ii' + the_selector + '0');
document.getElementById('ce' + i+ + '1').value = this[s1];
document.getElementById('ce' + i+ + '2').value = this[s2];
document.getElementById('ce' + i+ + '3').value = this[s3];
document.getElementById('ce' + i+ + '4').value = this[s4];
}
}
}
function fill_values_exec()
{
for (var i=0; i<3; i++) //26
{
fill_values(i);
}
}
function color_editor_selectors()
{
for (var i=0; i<document.getElementById('step_one').length; i++)
{
document.getElementById('ce' + i+ + '0').value = document.getElementById('step_one').options[i].value;
}
}
function start() {
color_editor_selectors();
fill_values_exec();
}
window.onload = start;
//]]>
</script>
<style type="text/css">
form {height: 300px; overflow: auto; width: 80%;}
</style>
</head>
<body>
<div>add select menu, then onload event, split after '}', foreach match, create 'ce' of input id that array item matches</div>
<form>
<fieldset>
<select id="step_one" tabindex="3">
<option value="#welcome, #content div.border, #content div.bordernorc, #prompts div.scroll, #prompts #promptstabs div.current">Primary Set 1 (Content, Prompt Content)</option>
<option value="#body, #prompts">Primary Set 2 (Body ID, Prompt Base)</option>
<option value="body, html">Primary Set 3 (Body Element)</option>
<option value="#content div.border div.border div.border, #head, #prompts #promptsbuttons, #prompts #promptstabs, #prompts #promptstabs div, #side div.inset, #side h2, #side form, div.footer, div.header, table tfoot, table thead, table tbody tr">Secondary Set</option>
<option value="#bottom, #top">Frame (Bottom, Top)</option>
<option value="h1">Header (Primary)</option>
<option value="#prompts h2, h2, h3, h4, h5, h6">Header (Subheaders)</option>
<option value="#content a:link, #side a:link, #promptsajax div.scroll a:link, #promptsajax div.noscroll a:link">Links</option>
<option value="#content a:link:hover, #side a:link:hover, #promptsajax div.scroll a:link:hover, #promptsajax div.noscroll a:hover, #side div.inset div.scroll a:hover, #content a:link:focus, #side a:link:focus, #promptsajax div.scroll a:link:focus, #promptsajax div.noscroll a:focus, #side div.inset div.scroll a:focus">Links (Focus, Hover)</option>
<option value="#content a:link:visited, #side a:link:visited, #promptsajax div.scroll a:link:visited, #promptsajax div.noscroll a:visited, #side div.inset div.scroll a:visited">Links (Visited)</option>
<option value="#menua1, #menua2, #menua3, #menua4, #menua5, #menua6, #menua7, #menua8, #menua9, a.menuaa, a.tools, #toola1, #toola2, div.list div, #sidetoggle a, #sidetoggle div, #prompts #promptsbuttons div a, #prompts #promptstabs div a">Menus</option>
<option value="#menua1 a:hover, #menua2 a:hover, #menua3 a:hover, #menua4 a:hover, #menua5 a:hover, #menua6 a:hover, #menua7 a:hover, #menua8 a:hover, #menua9 a:hover, #menua1 a:focus, #menua2 a:focus, #menua3 a:focus, #menua4 a:focus, #menua5 a:focus, #menua6 a:focus, #menua7 a:focus, #menua8 a:focus, #menua9 a:focus, a.menuaa:hover, a.tools:hover, #toola1:hover, #toola2:hover, div.list div:hover, #sidetoggle a:hover, #sidetoggle div:hover, a.menuaa:focus, a.tools:focus, #toola1:focus, #toola2:focus, div.list div:focus, #sidetoggle a:focus, #sidetoggle div:focus, #prompts #promptsbuttons a:focus, #prompts #promptsbuttons a:hover">Menus (Focus, Hover)</option>
<option value="#menua1:visited, #menua2:visited, #menua3:visited, #menua4:visited, #menua5:visited, #menua6:visited, #menua7:visited, #menua8:visited, #menua9:visited, a.menuaa:visited, a.tools:visited, #toola1:visited, #toola2:visited, div.list div:visited, #sidetoggle a:visited, #sidetoggle div:visited, #prompts #promptsbuttons div a:visited, #prompts #promptstabs div a:visited">Menus (Visited)</option>
<option value="#bottom div a">Music Player</option>
<option value="#bottom div a:hover, #bottom div a:focus">Music Player (Hover, Focus)</option>
<option value="form">Forms</option>
<option value="form fieldset input.button, form fieldset input.text, form fieldset input.url, select, form fieldset textarea">Forms Fields (Buttons, Text)</option>
<option value="form fieldset input.button:hover, form fieldset input.text:hover, form fieldset input.url:hover, select:hover, form fieldset textarea:hover, form fieldset input.button:focus, form fieldset input.text:focus, form fieldset input.url:focus, select:focus, form fieldset textarea">Forms Fields (Focus, Hover)</option>
<option value="form fieldset label">Form Labels</option>
<option value="ol, ul">Lists (Ordered, Unordered)</option>
<option value="code">Code (Computer Code)</option>
<option value="#head #location a:link, #head #location a:visited, .color1">Color 1 (Location)</option>
<option value="#content span.subtitle, .color2">Color 2 (Subtitle)</option>
<option value="p, p.noindent, ol li span, ul li span, .color3">Color 3 (Lists, Paragraph, Span)</option>
<option value=".color4">Color 4 (Dashes)</option>
<option value=".color5">Color 5 (Parenthesis, Quotes)</option>
</select>
<br style="clear: both;" />
<input id="ce00" name="ce00" type="text" value="" />
<input id="ce01" name="ce01" type="text" value="" />
<input id="ce02" name="ce02" type="text" value="" />
<input id="ce03" name="ce03" type="text" value="" />
<input id="ce04" name="ce04" type="text" value="" />
<br />
<input id="ce10" name="ce10" type="text" value="" />
<input id="ce11" name="ce11" type="text" value="" />
<input id="ce12" name="ce12" type="text" value="" />
<input id="ce13" name="ce13" type="text" value="" />
<input id="ce14" name="ce14" type="text" value="" />
<br />
<input id="ce20" name="ce20" type="text" value="" />
<input id="ce21" name="ce21" type="text" value="" />
<input id="ce22" name="ce22" type="text" value="" />
<input id="ce23" name="ce23" type="text" value="" />
<input id="ce24" name="ce24" type="text" value="" />
<br />
<input id="ce30" name="ce30" type="text" value="" />
<input id="ce31" name="ce31" type="text" value="" />
<input id="ce32" name="ce32" type="text" value="" />
<input id="ce33" name="ce33" type="text" value="" />
<input id="ce34" name="ce34" type="text" value="" />
<br />
<input id="ce40" name="ce40" type="text" value="" />
<input id="ce41" name="ce41" type="text" value="" />
<input id="ce42" name="ce42" type="text" value="" />
<input id="ce43" name="ce43" type="text" value="" />
<input id="ce44" name="ce44" type="text" value="" />
<br />
<input id="ce50" name="ce50" type="text" value="" />
<input id="ce51" name="ce51" type="text" value="" />
<input id="ce52" name="ce52" type="text" value="" />
<input id="ce53" name="ce53" type="text" value="" />
<input id="ce54" name="ce54" type="text" value="" />
<br />
<input id="ce60" name="ce60" type="text" value="" />
<input id="ce61" name="ce61" type="text" value="" />
<input id="ce62" name="ce62" type="text" value="" />
<input id="ce63" name="ce63" type="text" value="" />
<input id="ce64" name="ce64" type="text" value="" />
<br />
<input id="ce70" name="ce70" type="text" value="" />
<input id="ce71" name="ce71" type="text" value="" />
<input id="ce72" name="ce72" type="text" value="" />
<input id="ce73" name="ce73" type="text" value="" />
<input id="ce74" name="ce74" type="text" value="" />
<br />
<input id="ce80" name="ce80" type="text" value="" />
<input id="ce81" name="ce81" type="text" value="" />
<input id="ce82" name="ce82" type="text" value="" />
<input id="ce83" name="ce83" type="text" value="" />
<input id="ce84" name="ce84" type="text" value="" />
<br />
<input id="ce90" name="ce90" type="text" value="" />
<input id="ce91" name="ce91" type="text" value="" />
<input id="ce92" name="ce92" type="text" value="" />
<input id="ce93" name="ce93" type="text" value="" />
<input id="ce94" name="ce94" type="text" value="" />
<br />
<input id="ce100" name="ce100" type="text" value="" />
<input id="ce101" name="ce101" type="text" value="" />
<input id="ce102" name="ce102" type="text" value="" />
<input id="ce103" name="ce103" type="text" value="" />
<input id="ce104" name="ce104" type="text" value="" />
<br />
<input id="ce110" name="ce110" type="text" value="" />
<input id="ce111" name="ce111" type="text" value="" />
<input id="ce112" name="ce112" type="text" value="" />
<input id="ce113" name="ce113" type="text" value="" />
<input id="ce114" name="ce114" type="text" value="" />
<br />
<input id="ce120" name="ce120" type="text" value="" />
<input id="ce121" name="ce121" type="text" value="" />
<input id="ce122" name="ce122" type="text" value="" />
<input id="ce123" name="ce123" type="text" value="" />
<input id="ce124" name="ce124" type="text" value="" />
<br />
<input id="ce130" name="ce130" type="text" value="" />
<input id="ce131" name="ce131" type="text" value="" />
<input id="ce132" name="ce132" type="text" value="" />
<input id="ce133" name="ce133" type="text" value="" />
<input id="ce134" name="ce134" type="text" value="" />
<br />
<input id="ce140" name="ce140" type="text" value="" />
<input id="ce141" name="ce141" type="text" value="" />
<input id="ce142" name="ce142" type="text" value="" />
<input id="ce143" name="ce143" type="text" value="" />
<input id="ce144" name="ce144" type="text" value="" />
<br />
<input id="ce150" name="ce150" type="text" value="" />
<input id="ce151" name="ce151" type="text" value="" />
<input id="ce152" name="ce152" type="text" value="" />
<input id="ce153" name="ce153" type="text" value="" />
<input id="ce154" name="ce154" type="text" value="" />
<br />
<input id="ce160" name="ce160" type="text" value="" />
<input id="ce161" name="ce161" type="text" value="" />
<input id="ce162" name="ce162" type="text" value="" />
<input id="ce163" name="ce163" type="text" value="" />
<input id="ce164" name="ce164" type="text" value="" />
<br />
<input id="ce170" name="ce170" type="text" value="" />
<input id="ce171" name="ce171" type="text" value="" />
<input id="ce172" name="ce172" type="text" value="" />
<input id="ce173" name="ce173" type="text" value="" />
<input id="ce174" name="ce174" type="text" value="" />
<br />
<input id="ce180" name="ce180" type="text" value="" />
<input id="ce181" name="ce181" type="text" value="" />
<input id="ce182" name="ce182" type="text" value="" />
<input id="ce183" name="ce183" type="text" value="" />
<input id="ce184" name="ce184" type="text" value="" />
<br />
<input id="ce190" name="ce190" type="text" value="" />
<input id="ce191" name="ce191" type="text" value="" />
<input id="ce192" name="ce192" type="text" value="" />
<input id="ce193" name="ce193" type="text" value="" />
<input id="ce194" name="ce194" type="text" value="" />
<br />
<input id="ce200" name="ce200" type="text" value="" />
<input id="ce201" name="ce201" type="text" value="" />
<input id="ce202" name="ce202" type="text" value="" />
<input id="ce203" name="ce203" type="text" value="" />
<input id="ce204" name="ce204" type="text" value="" />
<br />
<input id="ce210" name="ce210" type="text" value="" />
<input id="ce211" name="ce211" type="text" value="" />
<input id="ce212" name="ce212" type="text" value="" />
<input id="ce213" name="ce213" type="text" value="" />
<input id="ce214" name="ce214" type="text" value="" />
<br />
<input id="ce220" name="ce220" type="text" value="" />
<input id="ce221" name="ce221" type="text" value="" />
<input id="ce222" name="ce222" type="text" value="" />
<input id="ce223" name="ce223" type="text" value="" />
<input id="ce224" name="ce224" type="text" value="" />
<br />
<input id="ce230" name="ce230" type="text" value="" />
<input id="ce231" name="ce231" type="text" value="" />
<input id="ce232" name="ce232" type="text" value="" />
<input id="ce233" name="ce233" type="text" value="" />
<input id="ce234" name="ce234" type="text" value="" />
<br />
<input id="ce240" name="ce240" type="text" value="" />
<input id="ce241" name="ce241" type="text" value="" />
<input id="ce242" name="ce242" type="text" value="" />
<input id="ce243" name="ce243" type="text" value="" />
<input id="ce244" name="ce244" type="text" value="" />
<br />
<input id="ce250" name="ce250" type="text" value="" />
<input id="ce251" name="ce251" type="text" value="" />
<input id="ce252" name="ce252" type="text" value="" />
<input id="ce253" name="ce253" type="text" value="" />
<input id="ce254" name="ce254" type="text" value="" />
</fieldset>
</form>
<div>
<?php
$pieces = explode('}', $_SESSION['css']);
$number = '0';
foreach($pieces as $key=>$value)
{
$my_var1 = split(' {', $value);
echo 'window[\'ii'.$key.'0\'] = \''.$my_var1[0]."';\n<br />";
$my_var2 = split(';', $my_var1[1]);
$rules1 = substr($my_var1[1], strpos($my_var1[1], '{') + 19, strpos($my_var1[1], '}') - (strpos($my_var1[1], '{')-3));
echo 'var ii'.$key.'1 = \''.$rules1."';\n<br />";
$rules2 = substr($my_var2[1], strpos($my_var2[1], '{') + 31, strpos($my_var2[1], '}') - (strpos($my_var2[1], '{')-6));
echo 'var ii'.$key.'2 = \''.$rules2."';\n<br />";
$rules3 = substr($my_var2[2], strpos($my_var2[2], '{') + 16, strpos($my_var2[2], '}') - (strpos($my_var2[2], '{')-6));
echo 'var ii'.$key.'3 = \''.$rules3."';\n<br />";
$rules4 = substr($my_var2[3], strpos($my_var2[3], '{') + 9, strpos($my_var2[3], '}') - (strpos($my_var2[3], '{')-6));
echo 'var ii'.$key.'4 = \''.$rules4."';\n<br /><br />";
}
// Was going to wrap each rule but it's not working out as I was originally thinking...
//$rules11 = substr($my_var1[1], strpos($my_var1[1], '{') + 0, strpos($my_var1[1], '}') - (strpos($my_var1[1], '{')-16));
//if ($rules11 == 'background-color')
//{}
?>
</div>
</body>
</html>