diff --git a/Resources/Plugins/edit-design/.meta b/Resources/Plugins/edit-design/.meta index 11426f95..62bbd8d9 100644 --- a/Resources/Plugins/edit-design/.meta +++ b/Resources/Plugins/edit-design/.meta @@ -8,7 +8,7 @@ Edit layout & design chylex [version] -1.1.5 +1.1.6 [website] https://tweetduck.chylex.com diff --git a/Resources/Plugins/edit-design/browser.js b/Resources/Plugins/edit-design/browser.js index 50ca5ea2..a8bb7574 100644 --- a/Resources/Plugins/edit-design/browser.js +++ b/Resources/Plugins/edit-design/browser.js @@ -173,28 +173,44 @@ enabled(){ } // SELECTS else if (tag === "SELECT"){ - if (!item.val(me.config[key]).val()){ - let custom = item.find("option[value='custom']"); - - if (custom.length === 1){ - item.val("custom"); - custom.text(getTextForCustom(key)); + let optionCustom = item.find("option[value^='custom']"); + + let resetMyValue = () => { + if (!item.val(me.config[key]).val() && optionCustom.length === 1){ + item.val(optionCustom.attr("value")); + optionCustom.text(getTextForCustom(key)); } - } + }; + + resetMyValue(); item.change(function(){ // TODO change doesn't fire when Custom is already selected let val = item.val(); - if (val === "custom"){ - val = prompt("Enter custom value:"); + if (val === "custom-px"){ + val = (prompt("Enter custom value (px):") || "").trim(); if (val){ - updateKey(key, val); - item.find("option[value='custom']").text(getTextForCustom(key)); + if (val.endsWith("px")){ + val = val.slice(0, -2).trim(); + } + + if (/^[0-9]+$/.test(val)){ + updateKey(key, val+"px"); + optionCustom.text(getTextForCustom(key)); + } + else{ + alert("Invalid value, only px values are supported."); + resetMyValue(); + } + } + else{ + resetMyValue(); } } else{ updateKey(key, item.val()); + optionCustom.text("Custom"); } }); } diff --git a/Resources/Plugins/edit-design/modal.html b/Resources/Plugins/edit-design/modal.html index 0c4192f5..66c4bde7 100644 --- a/Resources/Plugins/edit-design/modal.html +++ b/Resources/Plugins/edit-design/modal.html @@ -36,7 +36,7 @@ <option value="310px">Medium (310px)</option> <option value="350px">Wide (350px)</option> <option value="400px">Extreme (400px)</option> - <option value="custom">Custom</option> + <option value="custom-px">Custom</option> </optgroup> <option disabled></option> <optgroup label="Dynamic width"> @@ -59,7 +59,7 @@ <option value="14px">Medium (14px)</option> <option value="15px">Large (15px)</option> <option value="16px">Largest (16px)</option> - <option value="custom">Custom</option> + <option value="custom-px">Custom</option> </select> <label class="checkbox"> <input data-td-key="increaseQuoteTextSize" class="js-theme-checkbox touch-larger-label" type="checkbox">