add dialogue stuff
This commit is contained in:
parent
27f436d9ef
commit
1c0ad653b2
10 changed files with 194 additions and 1 deletions
38
resources/assets/less/yuuno/dialogue.less
Normal file
38
resources/assets/less/yuuno/dialogue.less
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
.dialogues:not(:empty) {
|
||||||
|
background: fade(#000, 50%);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 2147483648; // fuck it
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialogue {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
display: inline-block;
|
||||||
|
background: #9475b2;
|
||||||
|
box-shadow: 0 0 5px #9475B2;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
background: #8364a1;
|
||||||
|
border: 0 solid transparent;
|
||||||
|
padding: 2px 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -8,6 +8,7 @@
|
||||||
@import "alert";
|
@import "alert";
|
||||||
@import "dropdown";
|
@import "dropdown";
|
||||||
@import "np";
|
@import "np";
|
||||||
|
@import "dialogue";
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Animation Keyframes
|
* Animation Keyframes
|
||||||
|
|
|
@ -3,6 +3,10 @@
|
||||||
/// <reference path="Sakura/Comments.ts" />
|
/// <reference path="Sakura/Comments.ts" />
|
||||||
/// <reference path="Sakura/Config.ts" />
|
/// <reference path="Sakura/Config.ts" />
|
||||||
/// <reference path="Sakura/Cookies.ts" />
|
/// <reference path="Sakura/Cookies.ts" />
|
||||||
|
/// <reference path="Sakura/Dialogue.ts" />
|
||||||
|
/// <reference path="Sakura/DialogueButton.ts" />
|
||||||
|
/// <reference path="Sakura/DialogueType.ts" />
|
||||||
|
/// <reference path="Sakura/Dictionary.ts" />
|
||||||
/// <reference path="Sakura/DOM.ts" />
|
/// <reference path="Sakura/DOM.ts" />
|
||||||
/// <reference path="Sakura/Friend.ts" />
|
/// <reference path="Sakura/Friend.ts" />
|
||||||
/// <reference path="Sakura/HTTPMethod.ts" />
|
/// <reference path="Sakura/HTTPMethod.ts" />
|
||||||
|
@ -13,5 +17,6 @@
|
||||||
/// <reference path="Sakura/IChangelogRelease.ts" />
|
/// <reference path="Sakura/IChangelogRelease.ts" />
|
||||||
/// <reference path="Sakura/IFriendResponse.ts" />
|
/// <reference path="Sakura/IFriendResponse.ts" />
|
||||||
/// <reference path="Sakura/INotification.ts" />
|
/// <reference path="Sakura/INotification.ts" />
|
||||||
|
/// <reference path="Sakura/KeyValuePair.ts" />
|
||||||
/// <reference path="Sakura/Notifications.ts" />
|
/// <reference path="Sakura/Notifications.ts" />
|
||||||
/// <reference path="Sakura/TimeAgo.ts" />
|
/// <reference path="Sakura/TimeAgo.ts" />
|
||||||
|
|
67
resources/assets/typescript/Sakura/Dialogue.ts
Normal file
67
resources/assets/typescript/Sakura/Dialogue.ts
Normal file
|
@ -0,0 +1,67 @@
|
||||||
|
namespace Sakura
|
||||||
|
{
|
||||||
|
export class Dialogue
|
||||||
|
{
|
||||||
|
public Text: string;
|
||||||
|
private Type: DialogueType = DialogueType.Info;
|
||||||
|
private Callbacks: Dictionary<DialogueButton, Function> = new Dictionary<DialogueButton, Function>();
|
||||||
|
public static Container: string = "dialogues";
|
||||||
|
|
||||||
|
public SetType(type: DialogueType): void
|
||||||
|
{
|
||||||
|
this.Type = type;
|
||||||
|
}
|
||||||
|
|
||||||
|
public AddCallback(button: DialogueButton, func: Function): void
|
||||||
|
{
|
||||||
|
if (this.Callbacks.Keys.indexOf(button) >= 0) {
|
||||||
|
this.Callbacks.Remove(button);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.Callbacks.Add(button, func);
|
||||||
|
}
|
||||||
|
|
||||||
|
public Display(): void
|
||||||
|
{
|
||||||
|
var modifiers: string[] = [],
|
||||||
|
buttons: DialogueButton[] = [];
|
||||||
|
|
||||||
|
switch (this.Type) {
|
||||||
|
case DialogueType.Confirm:
|
||||||
|
modifiers.push('confirm');
|
||||||
|
buttons.push(DialogueButton.No);
|
||||||
|
buttons.push(DialogueButton.Yes);
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
modifiers.push('info');
|
||||||
|
buttons.push(DialogueButton.Ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
var container: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', null, modifiers)),
|
||||||
|
text: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'text')),
|
||||||
|
buttonCont: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'buttons'));
|
||||||
|
|
||||||
|
DOM.Append(text, DOM.Text(this.Text));
|
||||||
|
DOM.Append(container, text);
|
||||||
|
|
||||||
|
for (var btnId in buttons) {
|
||||||
|
var btnType: DialogueButton = buttons[btnId],
|
||||||
|
btnText: string = DialogueButton[btnType],
|
||||||
|
button: HTMLButtonElement = <HTMLButtonElement>DOM.Create('button', DOM.BEM('dialogue', 'button'));
|
||||||
|
|
||||||
|
DOM.Append(button, DOM.Text(btnText));
|
||||||
|
button.setAttribute('data-type', btnType.toString());
|
||||||
|
button.addEventListener("click", (ev: any) => {
|
||||||
|
(this.Callbacks.Get(+ev.target.attributes['data-type'].value)).Value.call(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
DOM.Append(buttonCont, button);
|
||||||
|
}
|
||||||
|
|
||||||
|
DOM.Append(container, buttonCont);
|
||||||
|
|
||||||
|
DOM.Append(DOM.ID('dialogues'), container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
9
resources/assets/typescript/Sakura/DialogueButton.ts
Normal file
9
resources/assets/typescript/Sakura/DialogueButton.ts
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
namespace Sakura
|
||||||
|
{
|
||||||
|
export enum DialogueButton
|
||||||
|
{
|
||||||
|
Yes,
|
||||||
|
No,
|
||||||
|
Ok
|
||||||
|
}
|
||||||
|
}
|
8
resources/assets/typescript/Sakura/DialogueType.ts
Normal file
8
resources/assets/typescript/Sakura/DialogueType.ts
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
namespace Sakura
|
||||||
|
{
|
||||||
|
export enum DialogueType
|
||||||
|
{
|
||||||
|
Info,
|
||||||
|
Confirm
|
||||||
|
}
|
||||||
|
}
|
57
resources/assets/typescript/Sakura/Dictionary.ts
Normal file
57
resources/assets/typescript/Sakura/Dictionary.ts
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
namespace Sakura
|
||||||
|
{
|
||||||
|
export class Dictionary<TKey, TValue>
|
||||||
|
{
|
||||||
|
public Keys: TKey[] = [];
|
||||||
|
public Values: TValue[] = [];
|
||||||
|
|
||||||
|
public Add(key: TKey, value: TValue): void
|
||||||
|
{
|
||||||
|
if (this.Keys.indexOf(key) !== -1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.Keys.push(key);
|
||||||
|
this.Values.push(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
public Remove(key: TKey): void
|
||||||
|
{
|
||||||
|
var index: number = this.Keys.indexOf(key);
|
||||||
|
|
||||||
|
if (index >= 0) {
|
||||||
|
this.Keys.splice(index, 1);
|
||||||
|
this.Values.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public Reset(): void
|
||||||
|
{
|
||||||
|
this.Keys = [];
|
||||||
|
this.Values = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
public Get(key: TKey): KeyValuePair<TKey, TValue>
|
||||||
|
{
|
||||||
|
var index: number = this.Keys.indexOf(key);
|
||||||
|
|
||||||
|
if (index >= 0) {
|
||||||
|
var pair: KeyValuePair<TKey, TValue> = new KeyValuePair<TKey, TValue>();
|
||||||
|
pair.Key = this.Keys[index];
|
||||||
|
pair.Value = this.Values[index];
|
||||||
|
return pair;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
public Update(key: TKey, value: TValue): void
|
||||||
|
{
|
||||||
|
var index: number = this.Keys.indexOf(key);
|
||||||
|
|
||||||
|
if (index >= 0) {
|
||||||
|
this.Values[index] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
8
resources/assets/typescript/Sakura/KeyValuePair.ts
Normal file
8
resources/assets/typescript/Sakura/KeyValuePair.ts
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
namespace Sakura
|
||||||
|
{
|
||||||
|
export class KeyValuePair<TKey, TValue>
|
||||||
|
{
|
||||||
|
public Key: TKey;
|
||||||
|
public Value: TValue;
|
||||||
|
}
|
||||||
|
}
|
|
@ -64,6 +64,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="contentwrapper">
|
<div id="contentwrapper">
|
||||||
<div id="notifications" class="alerts"></div>
|
<div id="notifications" class="alerts"></div>
|
||||||
|
<div id="dialogues" class="dialogues"></div>
|
||||||
{% if profile is defined ? profile.background : (user.permission(constant('Sakura\\Perms\\Site::CHANGE_BACKGROUND')) and (user.backgroundSitewide or showBG) and user.background) %}
|
{% if profile is defined ? profile.background : (user.permission(constant('Sakura\\Perms\\Site::CHANGE_BACKGROUND')) and (user.backgroundSitewide or showBG) and user.background) %}
|
||||||
<div id="userBackground" style="background-image: url('{{ route('user.background', (profile is defined ? profile : user).id) }}');"></div>
|
<div id="userBackground" style="background-image: url('{{ route('user.background', (profile is defined ? profile : user).id) }}');"></div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -86,7 +86,6 @@
|
||||||
state = Sakura.DOM.ID('np-state'),
|
state = Sakura.DOM.ID('np-state'),
|
||||||
by = Sakura.DOM.ID('np-by');
|
by = Sakura.DOM.ID('np-by');
|
||||||
|
|
||||||
console.log(data);
|
|
||||||
artist.href = data.artist_url;
|
artist.href = data.artist_url;
|
||||||
artist.textContent = data.artist;
|
artist.textContent = data.artist;
|
||||||
track.href = data.track_url;
|
track.href = data.track_url;
|
||||||
|
|
Reference in a new issue