PHP+JavaScript export of CSS to form fields

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

PHP+JavaScript export of CSS to form fields

Post by JAB Creations »

This is the last major part of my site's new feature which will debut with Preview V more then likely before the end of the month. This feature serves the last though important role for my site's editor: retaining the visitor's CSS theme data by repopulating the editor's form fields for reediting their current theme. Without this feature each time visitors would use the editor while they would still see their previous editing "session's" color scheme the forms would not retain those values. So in effect the visitor's theme that they previously edited would become lost and they wouldn't figure it out until they're already lost time/work. So this is obviously a critical part of the editor as the last link that completes the cycle. If it's not clear what this PHP/JavaScript pair of scripts are doing simply look at the default values for all the text fields; they're all blank.

Part of my goal was to simplify how I handled the code while creating minimal load on the server. While I could use PHP to simply dump the entire session variable and have it be handled by JavaScript I felt that as far as I've advanced with JavaScript I wasn't particularly thrilled at coding out more then likely the dozens of lines of code to do what PHP could do in just a few. Plus it may slightly diminish browser support. I also had a suggestion from one of our community gurus here to have PHP generate all of the input fields with the values in place. I felt this would generate unnecessary load on the server for something that a day or two's worth of JavaScript could handle.

Tested JavaScript compatibility...
Gecko 1.0-1.9
IE 4: No
IE 5-8: Yes
Opera 3.62: No
Opera 4.0-9.5

The JavaScript code has no noticeable impact on the page's load time.

Any way I've added a full blown custom theme to be split instead of using a session variable (just easier for testing) but it works fine locally for me any way with the session.

I'm open to any constructive criticism and thoughts.

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>REGEX - Standalone Test Page</title>
<html>
<head>
<script type="text/javascript">
//<![CDATA[
<?php
$css = '#welcome, #content div.border, #content div.bordernorc, #prompts div.scroll, #prompts #promptstabs div.current {background-color: #001; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#body, #prompts {background-color: #002; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}body, html {background-color: #003; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #004; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#bottom, #top {background-color: #005; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}h1 {background-color: #006; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#prompts h2, h2, h3, h4, h5, h6 {background-color: #007; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content a:link, #side a:link, #promptsajax div.scroll a:link, #promptsajax div.noscroll a:link {background-color: #008; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #009; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #010; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #011; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #012; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #013; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#bottom div a {background-color: #014; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#bottom div a:hover, #bottom div a:focus {background-color: #015; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form {background-color: #016; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form fieldset input.button, form fieldset input.text, form fieldset input.url, select, form fieldset textarea {background-color: #017; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}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 {background-color: #018; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form fieldset label {background-color: #019; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}ol, ul {background-color: #020; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}code {background-color: #021; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#head #location a:link, #head #location a:visited, .color1 {background-color: #022; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content span.subtitle, .color2 {background-color: #023; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}p, p.noindent, ol li span, ul li span, .color3 {background-color: #024; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}.color4 {background-color: #025; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}.color5 {background-color: #026; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}';
 
$pieces = explode('}', $css);
//$pieces = explode('}', $_SESSION['css']);
$number = '0';
foreach($pieces as $key=>$value)
{
$my_var1 = explode(' {', $value);
 
// Echo selector as JavaScript ID.
echo "window['ii".$key."0'] = '".$my_var1[0]."';";
 
// Echo selector's array of properties and values.
echo "\nwindow['ii".$key."1'] = '".$my_var1[1]."';\n";
}
?>
 
function insert_variables_exec(selector, set)
{
 //bg-color
      if (set.indexOf('#') == '18') {var temp_var_bgc = set.split('#'); document.getElementById('ce' + selector + '1').value = temp_var_bgc[1];}
 
 //bg-img
 else if (set.indexOf('url(general/') == '19') {var temp_var_bg_img_1 = set.split('url(general/'); var temp_var_bg_img_2 = temp_var_bg_img_1[1].split('.gif)'); document.getElementById('ce' + selector + '2').value = temp_var_bg_img_2[0];}
 
 //border-color
 else if (set.indexOf('#') == '15') {var temp_var_bc = set.split('#'); document.getElementById('ce' + selector + '3').value = temp_var_bc[1];}
 
 //color
 else if (set.indexOf('#') == '8') {var temp_var_c = set.split('#'); document.getElementById('ce' + selector + '4').value = temp_var_c[1];}
 
else {alert('eh nothing?' + set);}
}
 
function insert_variables(selector)
{
 var the_id1 = 'ii' + selector + '1';
 var the_id2 = this[the_id1];
 var property_sets=the_id2.split(';');
 
 insert_variables_exec(selector, property_sets[0]);
 insert_variables_exec(selector, property_sets[1]);
 insert_variables_exec(selector, property_sets[2]);
 insert_variables_exec(selector, property_sets[3]);
}
 
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 insert_variables_trigger()
{
 for (var i=0; i<26; i++) //26
 {
 insert_variables(i);
 }
}
 
function start() {
 color_editor_selectors();
 insert_variables_trigger();
} 
window.onload = start;
//]]>
</script>
<style type="text/css">
/*form {height: 300px; overflow: auto; width: 80%;}*/
</style>
</head>
 
<body>
 
<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>
 
</body>
</html>
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: PHP+JavaScript export of CSS to form fields

Post by JAB Creations »

After implementing the script in to my site locally and interacting with it with the editor I've noticed some undesirable behavior where certain parts of the theme I would create would become lost while other parts would not.

This is ultimately due to the lack or mis-coded selector matching in the JavaScript code. To see it's effects remove the first CSS selector and it's associated properties/values on line 13 and reload the page. The second selector's properties and values are incorrectly assigned to the first selector's input fields and this repeats for the rest of the selectors.

I'll post an updated version once I've corrected this issue (and help with the correction is of course welcome!)
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: PHP+JavaScript export of CSS to form fields

Post by JAB Creations »

I've implemented the corrections and have removed the first, second, and fifth selector's from having any information being set. They are of course skipped correctly now. Any one who is clueless about what I'm talking about should know that the results of this version of the script works fine if the numerical order is broken at any point. If set five is missing set six won't be assigned to set five's form fields...this was the problem with the original version I posted above. The second column (left to right) is numbered in conjunction with what row it should appear on. So for example 001 should appear only on row 1, 024 only on row 24.

To ensure I also didn't repeat this goof as far as putting the wrong property/value sets in the wrong fields I removed one of each towards the later end of the selectors themselves from various sets. You can check if you want though it appears everything is working fine. That of course doesn't mean I don't want constructive commentary because I certainly do. Any way I'm starving and I'm going to go eat, loose consciousness for a few hours and then I'll continue to test the script looking for any undesirable behavior. Thank goodness for alert! :mrgreen:

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>REGEX - Standalone Test Page</title>
<html>
<head>
<script type="text/javascript">
//<![CDATA[
<?php
//#welcome, #content div.border, #content div.bordernorc, #prompts div.scroll, #prompts #promptstabs div.current {background-color: #001; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}
$css = 'body, html {background-color: #003; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #004; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}h1 {background-color: #006; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#prompts h2, h2, h3, h4, h5, h6 {background-color: #007; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content a:link, #side a:link, #promptsajax div.scroll a:link, #promptsajax div.noscroll a:link {background-color: #008; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #009; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #010; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #011; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #012; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#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 {background-color: #013; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#bottom div a {background-color: #014; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#bottom div a:hover, #bottom div a:focus {background-color: #015; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form {background-color: #016; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form fieldset input.button, form fieldset input.text, form fieldset input.url, select, form fieldset textarea {background-color: #017; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}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 {background-color: #018; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}form fieldset label {background-color: #019; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}ol, ul {background-color: #020; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}code {background-color: #021; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#head #location a:link, #head #location a:visited, .color1 {background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}#content span.subtitle, .color2 {background-color: #023; border-color: #fff; color: #fc0;}p, p.noindent, ol li span, ul li span, .color3 {background-color: #024; background-image: url(general/11/002.gif); color: #fc0;}.color4 {background-color: #025; background-image: url(general/11/002.gif); border-color: #fff;}.color5 {background-color: #026; background-image: url(general/11/002.gif); border-color: #fff; color: #fc0;}';
$pieces = explode('}', $css);
//$pieces = explode('}', $_SESSION['css']);
$number = '0';
foreach($pieces as $key=>$value)
{
$my_var1 = explode(' {', $value);
 
// Echo selector as JavaScript ID.
echo "window['ii".$key."0'] = '".$my_var1[0]."';";
 
// Echo selector's array of properties and values.
echo "\nwindow['ii".$key."1'] = '".$my_var1[1]."';\n";
}
?>
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function insert_variables_exec(ce_selector, ii_set)
{
//alert(ce_selector);
 //bg-color
      if (ii_set.indexOf('#') == '18') {var temp_var_bgc = ii_set.split('#'); document.getElementById('ce' + ce_selector + '1').value = temp_var_bgc[1];}
 
 //bg-img
 else if (ii_set.indexOf('url(general/') == '19') {var temp_var_bg_img_1 = ii_set.split('url(general/'); var temp_var_bg_img_2 = temp_var_bg_img_1[1].split('.gif)'); document.getElementById('ce' + ce_selector + '2').value = temp_var_bg_img_2[0];}
 
 //border-color
 else if (ii_set.indexOf('#') == '15') {var temp_var_bc = ii_set.split('#'); document.getElementById('ce' + ce_selector + '3').value = temp_var_bc[1];}
 
 //color
 else if (ii_set.indexOf('#') == '8') {var temp_var_c = ii_set.split('#'); document.getElementById('ce' + ce_selector + '4').value = temp_var_c[1];}
 
else {alert('eh nothing? ' + ce_selector + ' ===?=== ' + ii_set);}
}
 
function insert_variables_match(ce_selector, ii_set)
{
 var split_this_1 = 'ii' + ii_set + '1';
 var split_this_2 = this[split_this_1];
 
 var property_sets=split_this_2.split(';');
 
 insert_variables_exec(ce_selector, property_sets[0]);
 insert_variables_exec(ce_selector, property_sets[1]);
 insert_variables_exec(ce_selector, property_sets[2]);
 insert_variables_exec(ce_selector, property_sets[3]);
}
 
function insert_variables_matcher(selector)
{
//alert(selector);
 var the_selector_ce_1 = 'ce' + selector + '0';
 var the_selector_ce_2 = this[the_selector_ce_1];
 var the_selector_set_1 = 'ii' + selector + '0';
 var the_selector_set_2 = this[the_selector_set_1];
 
 for (var i=0; i<26; i++) //26
 {
  if (document.getElementById('ce' + i + '0').value == the_selector_set_2)
{
insert_variables_match(i, selector);// break;
//alert(document.getElementById('ce' + i + '0').value + ' ==?== ' + the_selector_set_2); break;
}
 
 }
}
 
 
 
function insert_variables_trigger()
{
 for (var i=0; i<26; i++) //26
 {
 //insert_variables_match(i);
 insert_variables_matcher(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();
 insert_variables_trigger();
} 
window.onload = start;
//]]>
</script>
<style type="text/css">
/*form {height: 300px; overflow: auto; width: 80%;}*/
</style>
</head>
 
<body>
 
<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>
 
</body>
</html>
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: PHP+JavaScript export of CSS to form fields

Post by Kieran Huggins »

jQuery springs to mind, since it can accept a CSS selector and has a style method.

Also, you should probably be using external CSS to reduce your server hit, IMO.

You could supplement with some JS/jQuery and an array of selectors and values that you iterate over, applying them after the load
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: PHP+JavaScript export of CSS to form fields

Post by JAB Creations »

I think I've got the essential working smoothly now. I emulated minor random editing as you can see with my latest revision below. If you apply the $css variable from this example to the last you can see it didn't exactly repopulate the fields as desired.

Any way I've been playing with the editor now ensuring when I change something and save the theme I'd ensure it was retained by hitting the save button a second time. If my changes weren't lost then I have everything working fine.

I'm going to invest a little time to do things like detect unsupported properties and alert the user that they will lose custom CSS theme data if they save the form. I'm also open to any other concerns about what someone may want to do at this point. This is all being loaded the onload event and it's running smooth as butter on my system with everything taken in to consideration.

Kieran, you really love jQuery don't you? :mrgreen: I do too however I'm reserving jQuery and other DHTML libraries for optional effects then being utilized as part of the necessary basics. This setup still works in Gecko 1.0+, IE4+, and Opera 4+ and considering the size of the editor even after compression I'm not interested in forcing folks on dial-up to wait an extra 4-6 seconds. This method as far as I can tell creates the least server load (within reason), is the most compatible option as far as browsers/business environments are concerned, and is the least bandwidth intensive.

However I'm still interested in constructive criticisms and opinions even if I seem unlikely to agree. I'm always interested in how others would approach the same goals. After all I wouldn't be asking these questions if I wasn't authentically interested. :)

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>REGEX - Standalone Test Page</title>
<html>
<head>
<script type="text/javascript">
//<![CDATA[
<?php
$css = '#welcome, #content div.border, #content div.bordernorc, #prompts div.scroll, #prompts #promptstabs div.current {background-color: #001;}#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 {background-color: #004;background-image: url(general/11/004.gif);border-color: #f09;}h1 {color: #f0f;}#head #location a:link, #head #location a:visited, .color1 {background-color: #021;}#content span.subtitle, .color2 {background-image: url(general/07/002.gif);}p, p.noindent, ol li span, ul li span, .color3 {background-color: #023;border-color: #cf0;}';
$pieces = explode('}', $css);
//$pieces = explode('}', $_SESSION['css']);
$number = '0';
foreach($pieces as $key=>$value)
{
$my_var1 = explode(' {', $value);
 
// Echo selector as JavaScript ID.
echo "window['ii".$key."0'] = '".$my_var1[0]."';";
 
// Echo selector's array of properties and values.
echo "\nwindow['ii".$key."1'] = '".$my_var1[1]."';\n";
 
//echo $my_var1[1].'---'."\n";
}
?>
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function insert_variables_exec(ce_selector, ii_set)
{
 //bg-color
      if (ii_set.indexOf('#') == '18') {var temp_var_bgc = ii_set.split('#'); document.getElementById('ce' + ce_selector + '1').value = temp_var_bgc[1];}
 
 //bg-img
 else if (ii_set.indexOf('url(general/') == '18') {var temp_var_bg_img_1 = ii_set.split('url(general/'); var temp_var_bg_img_2 = temp_var_bg_img_1[1].split('.gif)'); document.getElementById('ce' + ce_selector + '2').value = temp_var_bg_img_2[0];}
 
 //border-color
 else if (ii_set.indexOf('#') == '14') {var temp_var_bc = ii_set.split('#'); document.getElementById('ce' + ce_selector + '3').value = temp_var_bc[1];}
 
 //color
 else if (ii_set.indexOf('#') == '7') {var temp_var_c = ii_set.split('#'); document.getElementById('ce' + ce_selector + '4').value = temp_var_c[1];}
 
else {alert(ce_selector + ' ===?=== ' + ii_set);}
}
 
function insert_variables_match(ce_selector, ii_set)
{
 var split_this_1 = 'ii' + ii_set + '1';
 var split_this_2 = this[split_this_1];
 var property_sets=split_this_2.split(';');
 
 if (property_sets[0] != null) {insert_variables_exec(ce_selector, property_sets[0]);}
 if (property_sets[1] != null) {insert_variables_exec(ce_selector, property_sets[1]);}
 if (property_sets[2] != null) {insert_variables_exec(ce_selector, property_sets[2]);}
 if (property_sets[3] != null) {insert_variables_exec(ce_selector, property_sets[3]);}
}
 
function insert_variables_matcher(selector)
{
 var the_selector_ce_1 = 'ce' + selector + '0';
 var the_selector_ce_2 = this[the_selector_ce_1];
 var the_selector_set_1 = 'ii' + selector + '0';
 var the_selector_set_2 = this[the_selector_set_1];
 
 for (var i=0; i<26; i++) //26
 {
  if (document.getElementById('ce' + i + '0').value == the_selector_set_2)
  {
   insert_variables_match(i, selector);
  }
 }
}
 
function insert_variables_trigger()
{
 for (var i=0; i<26; i++) //26
 {
 insert_variables_matcher(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();
 insert_variables_trigger();
}
window.onload = start;
//]]>
</script>
<style type="text/css">
/*form {height: 300px; overflow: auto; width: 80%;}*/
</style>
</head>
 
<body>
 
<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>
 
</body>
</html>
Post Reply