Merge pull request #114 from JsSucks/slider

Slider

client/src/modules/thememanager.js

@@ -170,10 +170,15 @@ export default class ThemeManager extends ContentManager {
                 let scss_value = null;
                 let scss_line = null;
 
-                if (typeof setting.value == 'string')
+                if (typeof setting.value == 'string') {
-                    scss_value = setting.scss_raw ? setting.value : '\'' + setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'') + '\'';
+                    scss_value = setting.scss_raw
-                else if (typeof setting.value === 'boolean' || typeof setting.value === 'number')
+                        ? setting.value
+                        : '\'' + setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'') + '\'';
+                } else if (setting.type === 'slider') {
+                    scss_value = setting.value * setting.multi || 1;
+                } else if (typeof setting.value === 'boolean' || typeof setting.value === 'number') {
                     scss_value = setting.value.toString();
+                }
 
                 scss_name = setting.id.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-');
 

tests/themes/Example/config.json

@@ -20,6 +20,25 @@
                     "hint": "A colour setting type would be nice here",
                     "scss_raw": true
                 },
+                {
+                    "id": "spanOpacity",
+                    "type": "slider",
+                    "value": 50,
+                    "min": 0,
+                    "max": 100,
+                    "step": 1,
+                    "unit": "%",
+                    "multi": "0.01",
+                    "text": "Span border opacity",
+                    "hint": "test"
+                },
+                {
+                    "id": "avatar",
+                    "type": "text",
+                    "value": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
+                    "text": "Avatar replace",
+                    "hint": "Replace all avatars" 
+                },
                 {
                     "id": "default-0",
                     "type": "text",

tests/themes/Example/index.scss

@@ -6,4 +6,8 @@ div {
 
 span {
     border: 1px solid rgba(20, 20, 20, $spanOpacity);
-}
+}
+
+.avatar-large {
+    background-image: url($avatar) !important;
+}

tests/themes/Example/vars.scss

@@ -1,2 +1,3 @@
 $divBg: green !default;
-$spanOpacity: 0.5 !default;
+$spanOpacity: 0.5 !default;
+$avatar: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg" !default;