[Rt-commit] rt branch, 4.0/theme-editor-ie8, created. rt-4.0.5-112-g5ce09d1

[Thomas Sibley]

The branch, 4.0/theme-editor-ie8 has been created
        at  5ce09d16d60e0a1473d906449f8c951d676ad750 (commit)

- Log -----------------------------------------------------------------
commit 5ce09d16d60e0a1473d906449f8c951d676ad750
Author: Thomas Sibley <trs at bestpractical.com>
Date:   Tue Mar 27 10:52:20 2012 -0400

    Remove and re-add the site CSS element instead of updating it in-place
    
    Not all browsers support updating the innerHTML/children of <style>
    elements, notably IE 8.  Arguably we could use the standard DOM's
    insertRule and IE's addRule to manage the content of <style> elements,
    but it's simpler and more straight-forward to remove and recreate the
    <style> element each time.

diff --git a/share/html/Admin/Tools/Theme.html b/share/html/Admin/Tools/Theme.html
index 11888ca..38eef00 100644
--- a/share/html/Admin/Tools/Theme.html
+++ b/share/html/Admin/Tools/Theme.html
@@ -131,14 +131,24 @@ jQuery(function($) {
                            .text(v[0]));
     });
 
-    $("style#sitecss").text($('#user_css').val());
+    function update_sitecss(text) {
+        if (!text)
+            text = $('#user_css').val();
+
+        // IE 8 doesn't let us update the innerHTML of <style> tags (with jQuery.text())
+        // see: http://stackoverflow.com/questions/2692770/style-style-textcss-appendtohead-does-not-work-in-ie/2692861#2692861
+        $("style#sitecss").remove();
+        $("<style id='sitecss' type='text/css' media='all'>" + text + "</style>").appendTo('head');
+    }
+
+    update_sitecss();
     $('#try').click(function() {
-        $("style#sitecss").text($('#user_css').val());
+        update_sitecss();
     });
 
     $('#reset').click(function() {
         setTimeout(function() {
-          $("style#sitecss").text($('#user_css').val());
+            update_sitecss();
         }, 1000);
     });
 
@@ -174,7 +184,7 @@ jQuery(function($) {
           }
       }
       $('#user_css').val(css);
-      $("style#sitecss").text(css);
+      update_sitecss(css);
     }
 
     $('#color-picker').farbtastic(function(color){ change_color(color, this.hsl[2] > <% $text_threshold %> ? '#000' : '#fff') });

-----------------------------------------------------------------------