PHP+JavaScript export of CSS to form fields
Posted: Thu Jun 19, 2008 9:14 pm
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.
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>