-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (163 loc) · 7.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>HiperDialog by Hiperesp</title>
<link rel="stylesheet" id="dialog-lights" type="text/css" href="src/css/color/default.css">
<link rel="stylesheet" type="text/css" href="src/css/style.css">
<script type="application/javascript" src="src/js/core.js"></script>
<script type="application/javascript" src="src/js/extra.js"></script>
</head>
<body style="margin: 0;background-image: url('https://source.unsplash.com/random/1366x768'); background-size: cover;background-attachment: fixed;background-position: center;">
<div style="margin: 1em; padding: 1em; border-radius: 0.5em; background-color: hsla(0deg, 0%, 100%, 80%); width: fit-content;">
<h1>HiperDialog</h1><button onclick="toggleDialogLights()">Alterar cores dos dialogs</button>
<hr>
<h2>Exemplos</h2>
<div>
<div>
<h3>Simples</h3>
<div>
<h4>Padrão</h4>
<button onclick="example(0)">Alert</button>
<button onclick="example(1)">Confirm</button>
<button onclick="example(2)">Prompt</button>
</div>
<div>
<h4>Com título</h4>
<button onclick="example(3)">Alert</button>
<button onclick="example(4)">Confirm</button>
<button onclick="example(5)">Prompt</button>
</div>
</div>
<div>
<h3>Avançados</h3>
<div>
<button onclick="example(7)">"Introdução"</button>
</div>
<div>
<button onclick="example(6)">Múltiplos botões</button>
<button onclick="example(9)">Scroll</button>
</div>
</div>
<div>
<h3>Alguns exemplos aplicáveis</h3>
<p>Além de "alert", "confirm" e "prompt".</p>
<div>
<button onclick="example(8)">Feedback</button>
</div>
</div>
</div>
</div>
<script>currentLightMode = 0;
async function toggleDialogLights(){
const modes = ["light", "dark"];
currentLightMode++;
if(currentLightMode>=modes.length) {
currentLightMode = 0;
}
await alertDialog("Trocando o esquema de cores dos diálogos...", "Esquema de cores dos diálogos");
document.querySelector("#dialog-lights").href = "src/css/color/"+modes[currentLightMode]+".css";
await alertDialog("O esquema de cores dos diálogos foram trocadas para \""+modes[currentLightMode]+"\"", "Esquema de cores dos diálogos");
}
async function example(id) {
const examples = [
() => alertDialog("Mensagem para o alert"),
() => confirmDialog("Mensagem para o confirm"),
() => promptDialog("Mensagem para o prompt", "Valor padrão"),
() => alertDialog("Mensagem para o alert", "Título do alert"),
() => confirmDialog("Mensagem para o confirm", "Título do confirm"),
() => promptDialog("Mensagem para o prompt (apaga o valor padrão, tem placeholder)", "Valor padrão", "Título do prompt", "Placeholder"),
() => new Dialog("Teste", "Diálogo de teste")
.addElement(
/*0*/new DialogButton("Denunciar conteúdo impróprio", "negative", true)
,/*1*/new DialogButton("Deixar de seguir", "negative", false)
,/*2*/new DialogButton("Ir para a publicação", "normal", true)
,/*3*/new DialogButton("Compartilhar", "normal", true)
,/*4*/new DialogButton("Copiar link", "normal", false)
,/*5*/new DialogButton("Incorporar", "positive", false)
,/*6*/new DialogButton("Cancelar", "positive", true, true)
)
.prompt(),
async () => {
await alertDialog("Esse é um alert");
const confirmAnswer = await confirmDialog("Esse é um diálogo de confirmação. Você também pode navegar pelas opções utilizando a tecla \"TAB\".");
if(confirmAnswer) {
await alertDialog("Você CONFIRMOU o diálogo de confirmação!");
} else {
await alertDialog("Você NEGOU o diálogo de confirmação!");
}
const promptAnswer = await promptDialog("Qual é o seu nome?");
await alertDialog("Olá, seu nome é "+promptAnswer);
await alertDialog("Você também pode colocar títulos nos dialogs");
await alertDialog("título no Alert", "Como esse")
const confirmAnswer2 = await confirmDialog("título no Confirm Dialog", "Ou esse")
if(confirmAnswer2) {
await alertDialog("com título", "Você confirmou!");
} else {
await alertDialog("com título", "Você negou!");
}
await alertDialog("nos diálogos de prompt!", "Você também pode colocar títulos e placeholders");
const promptAnswer2 = await promptDialog("O placeholder tem o seu nome anterior", "", "Qual é o seu nome? (denovo)", promptAnswer);
await alertDialog("Olá, seu nome é "+promptAnswer2);
await alertDialog("Com inputs e botões habilitados e desabilitados, positivos, negativos e normais", "Você também pode criar diálogos com múltiplas opções");
await alertDialog("do botão \"Diálogo avançado\", da seção \"Avançados\" (ao lado desse botão que você apertou.", "Como esse.");
},
async () => {
let assunto, mensagem;
const clickedButtonId = await new Dialog("Feedback", "Enviar Feedback")
.addElement(
/*0*/assunto = new DialogInput("Assunto")
,/*1*/mensagem = new DialogTextarea("Mensagem")
,/*2*/new DialogButton("Enviar", "positive", undefined, true)
,/*3*/new DialogButton("Cancelar", "negative")
)
.prompt();
if(clickedButtonId==2) {
const confirm = await new Dialog("Confirmar envio do Feedback?")
.addElement(
/*0*/new DialogInput("Assunto", assunto.value, undefined, false)
,/*1*/new DialogTextarea("Mensagem", mensagem.value, false)
,/*2*/new DialogButton("Enviar", "positive", undefined, true)
,/*3*/new DialogButton("Cancelar", "negative")
)
.prompt();
if(confirm==2) {
await alertDialog("O Feedback foi enviado com sucesso, mas na verdade não, já que esse é um exemplo", "Feedback enviado");
return;
}
}
await alertDialog("O Feedback não foi enviado", "Feedback cancelado");
},
() => new Dialog("Teste", "Diálogo de teste")
.addElement(
/* 0*/new DialogButton("Denunciar conteúdo impróprio", "negative", true)
,/* 1*/new DialogButton("Deixar de seguir", "negative", false)
,/* 2*/new DialogButton("Ir para a publicação", "normal", true)
,/* 3*/new DialogButton("Compartilhar", "normal", true)
,/* 4*/new DialogButton("Copiar link", "normal", false)
,/* 5*/new DialogButton("Incorporar", "positive", false)
,/* 6*/new DialogButton("Cancelar", "positive", true, true)
,/* 7*/new DialogButton("Denunciar conteúdo impróprio", "negative", true)
,/* 8*/new DialogButton("Deixar de seguir", "negative", false)
,/* 9*/new DialogButton("Ir para a publicação", "normal", true)
,/*10*/new DialogButton("Compartilhar", "normal", true)
,/*11*/new DialogButton("Copiar link", "normal", false)
,/*12*/new DialogButton("Incorporar", "positive", false)
,/*13*/new DialogButton("Cancelar", "positive", true, true)
,/*14*/new DialogButton("Denunciar conteúdo impróprio", "negative", true)
,/*15*/new DialogButton("Deixar de seguir", "negative", false)
,/*16*/new DialogButton("Ir para a publicação", "normal", true)
,/*17*/new DialogButton("Compartilhar", "normal", true)
,/*18*/new DialogButton("Copiar link", "normal", false)
,/*19*/new DialogButton("Incorporar", "positive", false)
,/*20*/new DialogButton("Cancelar", "positive", true, true)
)
.prompt(),
];
const answer = await examples[id]();
alertDialog("A função anterior retornou \""+answer+"\" ("+typeof answer+").", "Retorno da chamada");
}
</script>
</body>
</html>