Better way to stringify theme

diff --git a/view/theme/frio/templates/theme_settings.tpl b/view/theme/frio/templates/theme_settings.tpl
index f34ca93..9f78047 100644 (file)
--- a/view/theme/frio/templates/theme_settings.tpl
+++ b/view/theme/frio/templates/theme_settings.tpl
@@ -38,18 +38,46 @@
 <script type="text/javascript">
        $(document).ready(function() {
 
-           // Parse initial share_string
-           var nav_bg = $("#id_frio_nav_bg").val();
-           var nav_icon_color = $("#id_frio_nav_icon_color").val();
-           var link_color = $("#id_frio_link_color").val();
-           var background_color = $("#id_frio_background_color").val();
-           var contentbg_transp = $("#frio_contentbg_transp").val();
-           var background_image = $("#id_frio_background_image").val();
-
-           var share_string = "{nav_bg: '" + nav_bg + "', nav_icon_color: '" + nav_icon_color + "', link_color: '" + link_color + "',  background_color: '" + background_color + "', contentbg_transp: '" + contentbg_transp + "', background_image: '" + background_image + "'}";
-        $("#id_frio_share_string").val(share_string);
-
-           // Create colorpickers
+               function GenerateShareString() {
+                       var theme = {};
+                       // Parse initial share_string
+                       if ($("#id_frio_nav_bg").length) {
+                               theme.nav_bg = $("#id_frio_nav_bg").val();
+                       }
+
+                       if ($("#id_frio_nav_icon_color").length) {
+                               theme.nav_icon_color = $("#id_frio_nav_icon_color").val();
+                       }
+
+                       if ($("#id_frio_link_color").length) {
+                               theme.link_color = $("#id_frio_link_color").val();
+                       }
+
+                       if ($("#id_frio_background_color").length) {
+                               theme.background_color = $("#id_frio_background_color").val();
+                       }
+
+                       if ($("#frio_contentbg_transp").length) {
+                               theme.contentbg_transp = $("#frio_contentbg_transp").val();
+                       }
+
+                       if ($("#id_frio_login_bg_image").length) {
+                               theme.login_bg_image = $("#id_frio_login_bg_image").val();
+                       }
+
+                       if ($("#id_frio_login_bg_color").length) {
+                               theme.login_bg_color = $("#id_frio_login_bg_color").val();
+                       }
+
+                       var share_string = JSON.stringify(theme);
+                       $("#id_frio_share_string").val(share_string);
+               }
+
+               // interval because jquery.val does not trigger events
+               window.setInterval(GenerateShareString, 500);
+               GenerateShareString();
+
+               // Create colorpickers
                $("#frio_nav_bg, #frio_nav_icon_color, #frio_background_color, #frio_link_color, #frio_login_bg_color").colorpicker({format: 'hex', align: 'left'});
 
                // show image options when user user starts to type the address of the image
@@ -94,5 +122,5 @@
 <div class="clearfix"></div>
 
 <script type="text/javascript">
-    $(".inputRange").rangeinput();
+       $(".inputRange").rangeinput();
 </script>