I have created a simple css editing/optimizing system in a wordpress plugin. Basically, the css files are stored in a folder. They are accessed to edit though a selection box using jquery.
HTML
# edit stylesheet
echo '<div id="editStyles" class="s8w-hide">';
echo '<h2>Edit a Stylesheet</h2>';
echo '<form action="" method="post">';
# file name
echo '<div class="s8w-row">';
echo '<div class="s8w-col_12">';
echo '<select id="getStylesheeteEdit" name="filename" class="s8w-expand">';
echo '<option value="">Select Stylesheet to Edit</option>';
foreach(glob(S8W_CSS_GEN . 'common/*.css') as $file) {
$filename = basename($file);
echo '<option value="'.$filename.'">'.$filename.'</option>';
}
echo '</select>';
echo '</div>';
echo '</div>';
# styles
echo '<div class="s8w-row">';
echo '<div class="s8w-col_12">';
echo '<textarea id="showEditStyles" name="styles" class="s8w-expand" style="height: 350px;"></textarea>';
echo '</div>';
echo '</div>';
echo '<div class="s8w-row">';
echo '<div class="s8w-col_12 s8w-center">';
echo '<input type="submit" name="edit_stylesheet" class="s8w navy tiny-radius" value="Edit this Stylesheet">';
echo '</div>';
echo '</div>';
echo '</form>';
jQuery This jquery added slashes so I added the commented out line but it did not remove them.
/* GET STYLESHEET TO EDIT
----------------------------------------------------- */
$( "#getStylesheeteEdit" ).change(function() {
var which = $(this).val();
var file = 'https://s8w.org/wp-content/plugins/IDCCST/css/generator/common/' + which;
$.get(file, function(data) {
//data.replace('\','');
$('#showEditStyles').val(data);
});
});
parsing php I added stripslashes here wich did remove the slashes.
/* EDIT STYLESHEET
--------------------------------------------------------- */
if(array_key_exists('edit_stylesheet',$_POST)){
$filename = $_POST['filename'];
$styles = stripslashes($_POST['styles']);
# update styles
file_put_contents(S8W_CSS_GEN . 'common/'.$filename, $styles);
# parse stylesheets
$msg = 'The stylesheet: '.$filename.' and the S8W Stylesheet have been updated.';
parseStyles($msg);
}
parseStyles($msg); minimzes and writes single style sheet.
<?php
function parseStyles($msg){
/* admin styles
-------------------------------------- */
foreach(glob(S8W_CSS_GEN . 'admin/*.css') as $file) {
$admin_code .= file_get_contents($file);
$prep_styles = file_get_contents($file);
$prep_styles = str_replace("/*","~",$prep_styles);
$prep_styles = str_replace("*/","~",$prep_styles);
preg_match_all("'~(.*?)~'si", $prep_styles, $match);
foreach($match[1] as $val) {
$this_comment = '~'.$val.'~';
$prep_styles = str_replace($this_comment,"",$prep_styles);
}
//$prep_styles = str_replace('"','"',$prep_styles);
$prep_styles = str_replace("r","",$prep_styles);
$prep_styles = str_replace("n","",$prep_styles);
$prep_styles = str_replace("t","",$prep_styles);
$admin_styles .= $prep_styles;
}
/* common styles
-------------------------------------- */
foreach(glob(S8W_CSS_GEN . 'common/*.css') as $file) {
$common_code .= file_get_contents($file);
$prep_styles = file_get_contents($file);
$prep_styles = str_replace("/*","~",$prep_styles);
$prep_styles = str_replace("*/","~",$prep_styles);
preg_match_all("'~(.*?)~'si", $prep_styles, $match);
foreach($match[1] as $val) {
$this_comment = '~'.$val.'~';
$prep_styles = str_replace($this_comment,"",$prep_styles);
}
//$prep_styles = str_replace('"','"',$prep_styles);
$prep_styles = str_replace("r","",$prep_styles);
$prep_styles = str_replace("n","",$prep_styles);
$prep_styles = str_replace("t","",$prep_styles);
$common_styles .= $prep_styles;
}
# write admin styles
$admin_styles = $common_styles.$admin_styles;
file_put_contents(S8W_CSS . 's8w-admin-styles.css', $admin_styles);
# write admin styles
$admin_readable = $common_code.$admin_code;
file_put_contents(S8W_CSS_GEN . 'readable-admin.css', $admin_readable);
$common_styles = $common_styles;
# write admin styles
file_put_contents(S8W_CSS . 's8w-styles.css', $common_styles);
# write admin styles
$common_readable = $common_code;
file_put_contents(S8W_CSS_GEN . 'readable.css', $common_readable);
echo '<Script language="javascript">alert("'.$msg.'");</script>';
}
All of this code works great if the styles do not have double quote. The file is called to the editing textarea and parses perfectly and write the minimized file. However, if the styles have double quotes:
CSS Example with Double Quotes
/* BUTTONS
------------------------------------------------------------------- */
button.s8w,
a.button.s8w,
input[type="submit"].s8w,
input[type="button"].s8w {
position:relative;
top:0;
left:0;
padding:10px 15px;
line-height:100%;
vertical-align: middle;
cursor: pointer;
overflow:visible;
font-weight:normal;
font-size:16px;
text-decoration:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display:inline-block;
zoom:1;
background: #fcfcfc;
color:#666;
border:1px solid #cccccc;
text-align: center;
border-radius: 0;
}
The file will save and be minimized. But when the file is called though jquery, though the edits are saved to the file, the new edits do not render in the textarea and as a result are lost if the file is saved onbce again. Hope I was able to explain the problem clearly. Any help or thoughts are appreciated.
Advertisement
Answer
While I am still not sure what was happening, the problem was in this jQuery:
/* GET STYLESHEET TO EDIT
----------------------------------------------------- */
$( "#getStylesheeteEdit" ).change(function() {
var which = $(this).val();
var file = 'https://s8w.org/wp-content/plugins/IDCCST/css/generator/common/' + which;
$.get(file, function(data) {
//data.replace('\','');
$('#showEditStyles').val(data);
});
});
When a css file was edited the edits would be saved and parsed through the minimizer php, but the above jQuery would not pick up the edits on the saved file when it was reselected. Have no idea as to why?
I was able to resolve the issue by changing the jQuery to:
$( "#getStylesheeteEdit" ).change(function() {
var which = $(this).val();
var url = 'https://s8w.org/wp-content/plugins/IDCCST/css/generator/get-stylsheet.php';
var postit = $.post( url, {which:which});
postit.done(function( data ) {$('#showEditStyles').val(data);});
});
and adding a php parse file with only one line of code to be able to make use of file_get_contents() instead using jQuery to get the contents of the desired css file:
<?php
$file = 'common/'.$_POST['which']; echo file_get_contents($file);