Skip to content

Commit fba703f

Browse files
committed
Revert "Revert "Add embed-advanced example; Add css style embed-simple""
This reverts commit 79c8cd6.
1 parent 79c8cd6 commit fba703f

File tree

6 files changed

+501
-0
lines changed

6 files changed

+501
-0
lines changed
+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
var app = new Vue({
2+
el: "#app",
3+
data: {
4+
title: "",
5+
description: "",
6+
title_url: "",
7+
color: "",
8+
author_name: "",
9+
author_link: "",
10+
author_icon: "",
11+
thumbnail: "",
12+
avatar_url: "",
13+
tts: false,
14+
fields: [
15+
{
16+
name: "",
17+
value: "",
18+
inline: false
19+
}
20+
],
21+
footer: "",
22+
message: "",
23+
username: "",
24+
avatar: ""
25+
},
26+
methods: {
27+
addField() {
28+
var field = {
29+
name: "",
30+
value: "",
31+
inline: false
32+
};
33+
this.fields.push(field);
34+
},
35+
removeField(index) {
36+
this.fields.splice(index, 1);
37+
},
38+
submitForm() {
39+
var data = {
40+
title: this.title,
41+
description: this.description,
42+
title_url: this.title_url,
43+
color: this.color,
44+
author_name: this.author_name,
45+
author_link: this.author_link,
46+
author_icon: this.author_icon,
47+
thumbnail: this.thumbnail,
48+
avatar_url: this.avatar_url,
49+
tts: this.tts,
50+
fields: this.fields,
51+
footer: this.footer,
52+
message: this.message,
53+
username: this.username,
54+
avatar: this.avatar
55+
};
56+
var dataJSON = JSON.stringify(data);
57+
// send request to webhook.php
58+
59+
axios.post("webhook.php", dataJSON).then(res => {
60+
console.log(res.data);
61+
});
62+
},
63+
reset() {
64+
this.title = "";
65+
this.description = "";
66+
this.title_url = "";
67+
this.color = "";
68+
this.author_name = "";
69+
this.author_link = "";
70+
this.author_icon = "";
71+
this.thumbnail = "";
72+
this.avatar_url = "";
73+
this.tts = false;
74+
this.fields = [
75+
{
76+
name: "",
77+
value: "",
78+
inline: false
79+
}
80+
];
81+
this.footer = "";
82+
this.message = "";
83+
this.username = "";
84+
this.avatar = "";
85+
this.$refs.form.reset();
86+
},
87+
setValues() {
88+
this.title = "Discord Embed — Advanced";
89+
this.description =
90+
"MagicTM budują właśnie takie osoby jak Ty. Nie ważne czy jesteś dziewczyną czy chłopakiem. Dołącz do Nas. Wszyscy tutaj zobowiązują się do tego, aby MagicTM reprezentował świat, w którym chcemy żyć i grać.";
91+
this.color = "#7e5dd7";
92+
this.title_url = "https://www.magictm.com/register";
93+
this.author_name = "Marcin Stawowczyk";
94+
this.author_link = "https://www.magictm.com/merlin@2706/";
95+
this.author_icon = "https://i.imgur.com/AQp3Koe.png";
96+
this.thumbnail = "https://i.imgur.com/AQp3Koe.png";
97+
this.avatar_url = "https://i.imgur.com/AQp3Koe.png";
98+
this.tts = false;
99+
(this.fields = [
100+
{
101+
name: "Pole testowe",
102+
value: "Wartosc testowa",
103+
inline: false
104+
},
105+
{
106+
name: "Pole testowe inline",
107+
value: "Wartosc testowa inline",
108+
inline: true
109+
}
110+
]),
111+
(this.footer = '© Marcin "m7rlin" Stawowczyk');
112+
this.message =
113+
"To jest przykładowa wiadomość! Podoba Ci się? Zostaw kciuka w górę.";
114+
this.username = "m7rlin";
115+
this.avatar = "https://i.imgur.com/AQp3Koe.png";
116+
}
117+
}
118+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Discord Embed Advanced</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
7+
<meta charset="utf-8">
8+
<!-- dev version -->
9+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10+
<!-- production version -->
11+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
12+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
13+
<script src="inc/app.js" defer></script>
14+
</head>
15+
<body>
16+
<div id="app">
17+
18+
<header>
19+
<section class="section">
20+
<div class="container">
21+
<h1 class="title is-size-4-touch">Discord Embed</h1>
22+
<p class="subtitle is-size-6-touch">Advanced</p>
23+
<p class="subtitle is-size-7">&copy; Marcin "m7rlin" Stawowczyk — <a href="https://www.magictm.com/register" target="_blank">www.magictm.com</a></p>
24+
<div class="buttons">
25+
<button class="button is-info" @click="setValues">Set values</button>
26+
<button class="button is-danger" @click="reset">Reset</button>
27+
</div>
28+
</div>
29+
</section>
30+
</header>
31+
32+
<main class="has-background-white-ter">
33+
<section class="section">
34+
35+
<div class="container">
36+
<form action="index.php" method="POST" class="column is-5 is-paddingless" ref="form" @submit.prevent="submitForm">
37+
38+
<h2 class="title is-size-4">Embed</h2>
39+
40+
<div class="field">
41+
<label class="label">Title </label>
42+
<div class="control">
43+
<input class="input" type="text" name="title" v-model="title">
44+
</div>
45+
</div>
46+
47+
<div class="field">
48+
<label class="label">Description <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
49+
<div class="control">
50+
<textarea autocomplete="off" name="description" class="textarea" v-model="description"></textarea>
51+
</div>
52+
</div>
53+
54+
<div class="field">
55+
<label class="label">Title URL <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
56+
<div class="control">
57+
<input class="input" type="text" name="title_url" v-model="title_url">
58+
</div>
59+
</div>
60+
61+
<div class="field">
62+
<label class="label">Color <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
63+
<div class="control">
64+
<input class="input" type="color" name="color" v-model="color">
65+
</div>
66+
</div>
67+
<hr>
68+
69+
<h3 class="title is-size-5">Author settings</h3>
70+
71+
<div class="field">
72+
<label class="label">Author name <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
73+
<div class="control">
74+
<input class="input" type="text" name="author_name" v-model="author_name">
75+
</div>
76+
</div>
77+
78+
<div class="field">
79+
<label class="label">Author link <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
80+
<div class="control">
81+
<input class="input" type="text" name="author_link" v-model="author_link">
82+
</div>
83+
</div>
84+
85+
<div class="field">
86+
<label class="label">Author icon <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
87+
<div class="control">
88+
<input class="input" type="text" name="author_icon" v-model="author_icon">
89+
</div>
90+
</div>
91+
<hr>
92+
93+
<h3 class="title is-size-5">Thumbnail settings</h3>
94+
95+
<div class="field">
96+
<label class="label">Thumbnail <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
97+
<div class="control">
98+
<input class="input" type="text" name="thumbnail" v-model="thumbnail">
99+
</div>
100+
</div>
101+
<hr>
102+
103+
<h3 class="title is-size-5">Fields</h3>
104+
105+
<div class="field is-horizontal" v-for="(field,index) of fields">
106+
<div class="field-body">
107+
<div class="field">
108+
<p class="control is-expanded">
109+
<input class="input" type="text" placeholder="Name" v-model="field.name">
110+
</p>
111+
</div>
112+
<div class="field">
113+
<p class="control is-expanded">
114+
<input class="input" type="text" placeholder="Value" v-model="field.value">
115+
</p>
116+
</div>
117+
<div class="field">
118+
<p class="control is-expanded">
119+
<label class="checkbox">
120+
<input type="checkbox" v-model="field.inline">
121+
Inline
122+
</label>
123+
</p>
124+
</div>
125+
<div class="field">
126+
<p class="control is-expanded">
127+
<button class="button is-danger" @click.prevent="removeField(index)">Delete</button>
128+
</p>
129+
</div>
130+
</div>
131+
</div>
132+
133+
<div class="field">
134+
<div class="control">
135+
<button class="button is-success" @click.prevent="addField">
136+
Add new field
137+
</button>
138+
</div>
139+
</div>
140+
141+
<hr>
142+
<h3 class="title is-size-5">Footer settings</h3>
143+
144+
<div class="field">
145+
<label class="label">Footer <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
146+
<div class="control">
147+
<input class="input" type="text" name="footer" v-model="footer">
148+
</div>
149+
</div>
150+
151+
152+
<h2 class="title is-size-4">Message</h2>
153+
154+
<div class="field">
155+
<label class="label">Message <span class="has-text-grey-light has-text-weight-normal">— optional</span></label>
156+
<div class="control">
157+
<textarea autocomplete="off" name="message" class="textarea" placeholder="Twoja wiadomość..." v-model="message">{{ message }}</textarea>
158+
</div>
159+
</div>
160+
161+
<div class="field">
162+
<label class="label">Username</label>
163+
<div class="control">
164+
<input class="input" type="text" name="username" placeholder="MagicTM" v-model="username">
165+
</div>
166+
</div>
167+
168+
<div class="field">
169+
<label class="label">Avatar URL</label>
170+
<div class="control">
171+
<input class="input" type="text" name="avatar_url" v-model="avatar_url">
172+
</div>
173+
</div>
174+
175+
<div class="field">
176+
<div class="control">
177+
<label class="checkbox">
178+
<input type="checkbox" name="tts" v-model="tts">
179+
Send TTS
180+
</label>
181+
</div>
182+
</div>
183+
184+
<div class="filed">
185+
<div class="control">
186+
<input class="button is-success" type="submit" name="action" value="Send webhook">
187+
</div>
188+
</div>
189+
190+
</form>
191+
</div>
192+
</section>
193+
</main>
194+
</div>
195+
</body>
196+
197+
</html>

examples/embed-advanced-css/index.php

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?php
2+
3+
// load website
4+
include "inc/page.inc.php";
5+
6+
?>
+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<?php
2+
3+
header('Content-Type: application/json');
4+
$body = file_get_contents('php://input');
5+
6+
7+
$body = json_decode($body, true);
8+
9+
10+
// load Webhook
11+
require_once "../../LoadWebhook.php";
12+
13+
$message = $body["message"] ?? "";
14+
$username = $body["username"] ?? "www.magictm.com";
15+
$avatar_url = $body["avatar_url"] ?? null;
16+
$tts = $body["tts"] ?? false;
17+
18+
$title = $body["title"] ?? null;
19+
$title_url = $body["title_url"] ?? null;
20+
$description = $body["description"] ?? null;
21+
22+
23+
$color = $body["color"] ?? null;
24+
25+
// author settings
26+
$author_name = $body["author_name"] ?? null;
27+
$author_link = $body["author_link"] ?? null;
28+
$author_icon = $body["author_icon"] ?? null;
29+
30+
// thumbnail settings
31+
$thumbnail = $body["thumbnail"] ?? null;
32+
33+
// footer settings
34+
$footer = $body["footer"] ?? null;
35+
36+
$msg = new DiscordWebhook($webhook["url"]);
37+
38+
$embed = new DiscordEmbed();
39+
// basic settings
40+
$embed->setTitle($title, $title_url)->setDescription($description);
41+
42+
// advanced settigns
43+
$embed->setColor($color)->setImage($thumbnail)->setAuthor($author_name,$author_link,$author_icon)->setFooter($footer);
44+
45+
// set all fields
46+
foreach ($body["fields"] as $key) {
47+
$embed->setField($key["name"], $key["value"], $key["inline"]);
48+
}
49+
50+
51+
$msg->setMessage($message)->setUsername($username)->setAvatar($avatar_url)->setEmbed($embed)->send();
52+
53+
54+
55+
?>

0 commit comments

Comments
 (0)