Add dropdowns to Dialogue

This commit is contained in:
Pachira 2016-12-11 01:06:19 +01:00
parent 9c28638fa7
commit 103a23a5d6
3 changed files with 57 additions and 0 deletions

View file

@ -59,6 +59,22 @@
}
}
&__dropdown {
width: 100%;
box-sizing: border-box;
background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF;
border: 1px solid #CCC;
box-shadow: inset #DDD 0 0 5px;
padding: 3px 4px;
vertical-align: middle;
&-container {
border-top: 1px solid #9475b2;
margin-top: 2px;
padding-top: 2px;
}
}
&__title {
margin: -4px;
background: linear-gradient(90deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE;

View file

@ -8,6 +8,8 @@ namespace Sakura
private Callbacks: Dictionary<DialogueButton, Function> = new Dictionary<DialogueButton, Function>();
public static Container: string = "dialogues";
public Reference: HTMLDivElement;
public DropDownItems: Dictionary<string, string> = new Dictionary<string, string>();
public DropDownSelected: KeyValuePair<string, string> = null;
public SetType(type: DialogueType): void
{
@ -64,6 +66,34 @@ namespace Sakura
DOM.Append(text, DOM.Text(this.Text));
DOM.Append(container, text);
var selectCount: number = this.DropDownItems.Count();
if (selectCount > 0) {
var ddContainer: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'dropdown-container')),
dropdown: HTMLSelectElement = <HTMLSelectElement>DOM.Create('select', DOM.BEM('dialogue', 'dropdown'));
for (var i in this.DropDownItems.Keys) {
var ddItem: KeyValuePair<string, string> = this.DropDownItems.Get(this.DropDownItems.Keys[i]),
itemElement: HTMLOptionElement = <HTMLOptionElement>DOM.Create('option', DOM.BEM('dialogue', 'dropdown-item'));
if (this.DropDownSelected === null) {
this.DropDownSelected = ddItem;
}
itemElement.value = ddItem.Key;
itemElement.innerText = ddItem.Value;
DOM.Append(dropdown, itemElement);
}
dropdown.addEventListener("change", (ev: any) => {
this.DropDownSelected = this.DropDownItems.Get(ev.target.value);
});
DOM.Append(ddContainer, dropdown);
DOM.Append(container, ddContainer);
}
var firstBtn: HTMLButtonElement = null;
for (var btnId in buttons) {

View file

@ -15,6 +15,12 @@ namespace Sakura
this.Values.push(value);
}
public AddObject(object: Object): void {
// this method is disgusting
this.Keys = this.Keys.concat(<any>Object.keys(object));
this.Values = this.Values.concat(<any>(<any>Object).values(object));
}
public Remove(key: TKey): void
{
var index: number = this.Keys.indexOf(key);
@ -53,5 +59,10 @@ namespace Sakura
this.Values[index] = value;
}
}
public Count(): number
{
return this.Keys.length;
}
}
}