Add live style previews to profile edit page

sections/user/edit.php

@@ -145,13 +145,11 @@ echo $Val->GenerateJS('userform');
 <?  foreach ($Stylesheets as $Style) { ?>
             <div class="preview_wrapper">
               <div class="preview_image" name="<?=($Style['Name'])?>">
-                <a href="<?=STATIC_SERVER.'stylespreview/full_'.$Style['Name'].'.png'?>" target="_blank">
-                  <img src="<?=STATIC_SERVER.'stylespreview/thumb_'.$Style['Name'].'.png'?>" alt="<?=$Style['Name']?>" />
-                </a>
+                <img src="<?=STATIC_SERVER.'stylespreview/thumb_'.$Style['Name'].'.png'?>" alt="<?=$Style['Name']?>" />
+                <p class="preview_name">
+                  <label><input type="radio" name="stylesheet_gallery" value="<?=($Style['ID'])?>" /> <?=($Style['ProperName'])?></label>
+                </p>
               </div>
-              <p class="preview_name">
-                <label><input type="radio" name="stylesheet_gallery" value="<?=($Style['ID'])?>" /> <?=($Style['ProperName'])?></label>
-              </p>
             </div>
 <?  } ?>
           </div>

static/functions/cssgallery.js

@@ -14,8 +14,13 @@ $(document).ready(function () {
     var radiobutton = parent.find('input');
     radiobutton.prop('checked', true);
     $('select#stylesheet').val(radiobutton.attr('value'));
+    $('select#stylesheet').change();
     $('input#styleurl').val('');
   })
+  // Passthrough image click to radio button
+  $('.preview_image').click(function(e) {
+    e.currentTarget.children[1].children[0].children[0].click()
+  })
   // If the drop-down is changed, select the appropriate item in gallery, clear the custom CSS field
   $('select#stylesheet').change(function() {
     var radiobutton = $('input[name="stylesheet_gallery"][value="' + $(this).val() + '"]');
@@ -44,4 +49,30 @@ $(document).ready(function () {
       $('#toggle_css_gallery').text($(this).is(':visible') ? 'Hide gallery' : 'Show gallery');
     });
   });
+  document.querySelectorAll('[name=style_additions\\[\\]]').forEach(function(el) {
+    el.addEventListener('change', function(e) {
+      if (e.target.checked) {
+        document.body.classList.add('style_'+e.target.value)
+      } else {
+        document.body.classList.remove('style_'+e.target.value)
+      }
+    })
+  })
+  var userstyle = $('link[rel=stylesheet][title]')[0]
+  $('select#stylesheet').on('change', function(e) {
+    var changetext = e.target.options[e.target.selectedIndex].text.toLowerCase()
+    userstyle.href = userstyle.href.replace(/\/[^\/]+?\/style.css/, '/'+changetext+'/style.css')
+    $('.style_addition').each(function(i, el){
+      if (el.id == 'style_addition_'+changetext) {
+        if (el.children.length) {
+          el.classList.remove('hidden')
+          $('#style_additions_tr')[0].classList.remove('hidden')
+        } else {
+          $('#style_additions_tr')[0].classList.add('hidden')
+        }
+      } else {
+        el.classList.add('hidden')
+      }
+    })
+  })
 });

static/functions/user_settings.js

@@ -145,4 +145,4 @@ function fetchPushbulletDevices(apikey) {
       $('#pushdevice').html('<option>' + textStatus + '</option>');
     }
   });
-}
+}

static/styles/global.css

@@ -518,13 +518,11 @@ tr.torrent .bookmark>a:after {
 .preview_wrapper {
   position: relative;
   display: inline-block;
-  width: 29%;
-  height: 120px;
+  width: 40%;
   margin: 0 10px;
 }
 .preview_image {
   display: block;
-  height: 80px;
   cursor: pointer;
   overflow: hidden;
 }