-
Notifications
You must be signed in to change notification settings - Fork 0
/
64-mesajlasma-uygulamasi-arayuzu-teknik2.htm
173 lines (128 loc) · 6.15 KB
/
64-mesajlasma-uygulamasi-arayuzu-teknik2.htm
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
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
<head>
<title>Mesajlaşma Uygulaması Arayüzü</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
MESAJLASMA UYGULAMASI ARAYÜZÜ
POSITION: RELATIVE TEKNİĞİ,
- CSS'teki position özelliği, relative olarak değiştirilen nesneler,
birbirlerini iterek konumlanırlar. Koordinat sistemi devre dışı kalır.
- Kutu içindeki yazılar, kutunun yüksekliğini genişletir.
- Kutu içindeki kutular ise, alt alta dizilir. Üst üste gelemez.
- Bu teknikte, eğer nesnelerden birinin içeriği değiştirilirse,
tarayıcı hesaplamayı yapar ve diğer nesneleri otomatik kaydırır.
padding: iç boşluktur.
margin: dış boşluktur.
- .space özelliği, padding kullanır.
- NOT: basic.js varsayılan position değeri, absolute olarak ayarlanmıştır.
*/
// DEĞİŞKENLER
var articles = [
"Integer at risus in ligula pharetra finibus. Suspendisse et magna convallis, aliquam ex sed, facilisis turpis. Ut commodo urna purus, vitae scelerisque nibh volutpat nec.",
"Vestibulum tempus ornare tellus, lobortis laoreet augue. Suspendisse malesuada ullamcorper sapien, a lacinia eros ornare vel. Praesent lacinia nisl sed lorem sollicitudin, vel rutrum est sagittis.",
"Nulla accumsan ex urna, id rutrum libero finibus sit amet.",
"Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras molestie dui nisi, ac rutrum leo venenatis ac. Maecenas cursus tincidunt nisi quis pellentesque. Vivamus id massa metus. Etiam semper erat quis dolor tristique, non molestie ante mollis.",
"Fusce dignissim.",
"Merhaba,",
"Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.",
"Maecenas commodo varius metus a fermentum."
]
// NOT: metinler, lorem ipsum ile üretilmiştir. Bir anlamı yoktur.
// Başlangıç sayfası
var a0
var messageId = 0
// İlk çalışan fonksiyon.
var start = function() {
// NESNE: Sayfanın taşıyıcısı
a0 = createBox(0, 0, 450, page.height)
that.scrollY = 1
that.center("left")
// 10 tane rasgele mesaj ekle.
for (var i = 0; i < 10; i++) {
createRandomMessage()
}
}
var loop = function() {
// Her saniye, rasgele bir mesaj gönder.
createRandomMessage()
// Her tekrarda, çalıştırılma zamanını değiştir.
setLoopTimer(random(500, 2500))
}
var createRandomMessage = function() {
// Rasgele bir mesaj oluştur.
var randomMessage = articles[random(0, articles.length - 1)]
// Rasgele, 2 kişiden biri yazsın.
if (random(1, 2) == 1) {
addNewMessage(randomMessage, "right", "avatar1.png", "pink")
} else {
addNewMessage(randomMessage, "left", "avatar2.png", "lightblue")
}
}
var addNewMessage = function(message, position, icon, color) {
// Mesajın anahtar numarası
messageId++
var messageItem
// NESNE: Her bir parçanın taşıyıcı kutusu
a0["b" + messageId] = createBox(0, 0, 450, "auto")
a0.add(that)
that.color = "whitesmoke"
// Diğer kutular ile etkileşime girer.
that.element.style.position = "relative"
messageItem = a0["b" + messageId]
// NESNE: Yazılardan biri
messageItem.lblContent = createLabel(0, 0, 350, "auto")
messageItem.add(that)
that.color = color
that.fontSize = 20
that.spaceY = 20
that.spaceX = 10
that.round = 8
// Rasgele metni, nesne içinde göster.
that.text = message
// İçinde bulunduğu kutunun yüksekliğini değiştirir.
that.element.style.position = "relative"
// Nesneye, dışarıdan boşluk bırak.
that.element.style.marginBottom = "10px"
// NESNE: Kullanıcının küçük resmi.
messageItem.imgAvatar = createImage(30, 20, 30, 30)
messageItem.add(that)
that.load("images/31/" + icon)
that.round = 15
// Resme iç boşluk ekle
that.space = 3
that.color = "lightgray"
// Pozisyona göre, farklılıkları uygula.
if (position == "right") {
// Mesaj sağda
messageItem.lblContent.element.style.marginLeft = "85px"
messageItem.imgAvatar.left = 30
} else {
// Mesaj solda
messageItem.lblContent.element.style.marginLeft = "15px"
messageItem.imgAvatar.left = 390
}
// İlk mesaj için, üstten biraz boşluk bırak.
if (messageId == 1) {
messageItem.element.style.marginTop = "50px"
}
messageItem.lblContent.onResize(function(self) {
// Kaydırma çubuğunu altta tut.
a0.element.scrollTo({
left: 0,
top: a0.element.scrollHeight,
behavior: 'smooth'
});
})
}
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>