chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-04-20 21:15:48 +02:00
Code

Add basic support for custom values in the edit-design plugin

Browse Source
This commit is contained in:
chylex 2017-03-31 18:59:11 +02:00
parent dee99caa7d
commit b3521d2a18
2 changed files with 33 additions and 10 deletions
Resources/Plugins/edit-design
browser.jsmodal.html

29
Resources/Plugins/edit-design/browser.js
View File

@ -114,6 +114,10 @@ enabled(){
let modal = $("#td-design-plugin-modal");
this.setAndShowContainer(modal, false);
let getTextForCustom = function(key){
return "Custom ("+me.config[key]+")";
};
modal.find("[data-td-key]").each(function(){
let item = $(this);
let tag = item.prop("tagName");
@ -133,10 +137,29 @@ enabled(){
}
// SELECTS
else if (tag === "SELECT"){
item.val(me.config[key]);
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));
}
}
item.change(function(){
updateKey(key, item.val());
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){
updateKey(key, val);
item.find("option[value='custom']").text(getTextForCustom(key));
}
}
else{
updateKey(key, item.val());
}
});
}
// CUSTOM ELEMENTS

14
Resources/Plugins/edit-design/modal.html
View File

@ -36,6 +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>
</optgroup>
<option disabled></option>
<optgroup label="Dynamic width">
@ -53,13 +54,12 @@
<b>Font size</b>
</label>
<select data-td-key="fontSize">
<option value="12px" data-td-font-size="smallest">Tiny (12px)</option>
<option value="13px" data-td-font-size="small">Small (13px)</option>
<option value="14px" data-td-font-size="medium">Medium (14px)</option>
<option value="15px" data-td-font-size="large">Large (15px)</option>
<option value="16px" data-td-font-size="largest">Very Large (16px)</option>
<option value="18px" data-td-font-size="largest">Massive (18px)</option>
<option value="20px" data-td-font-size="largest">Extreme (20px)</option>
<option value="12px">Tiny (12px)</option>
<option value="13px">Small (13px)</option>
<option value="14px">Medium (14px)</option>
<option value="15px">Large (15px)</option>
<option value="16px">Largest (16px)</option>
<option value="custom">Custom</option>
</select>
</div>