[mirotalksfu] - improve Widgets
هذا الالتزام موجود في:
Miroslav Pejic
849
public/css/widgets/Support.css
Normal file
849
public/css/widgets/Support.css
Normal file
@@ -0,0 +1,849 @@
|
||||
/* Keyframes */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Widget Styles */
|
||||
.mirotalk-support-widget {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #1f1f2e 0%, #2a2a3e 100%);
|
||||
color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Light Theme Overrides */
|
||||
.mirotalk-support-widget.light-theme {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
color: #333;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Position Classes */
|
||||
.mirotalk-support-widget.bottom-right,
|
||||
.mirotalk-minimized-btn.bottom-right,
|
||||
.mirotalk-reopener-btn.bottom-right {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.bottom-left,
|
||||
.mirotalk-minimized-btn.bottom-left,
|
||||
.mirotalk-reopener-btn.bottom-left {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-right,
|
||||
.mirotalk-minimized-btn.top-right,
|
||||
.mirotalk-reopener-btn.top-right {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-left,
|
||||
.mirotalk-minimized-btn.top-left,
|
||||
.mirotalk-reopener-btn.top-left {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
/* Widget Hover Effects */
|
||||
.mirotalk-support-widget:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme:hover {
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Online Indicator */
|
||||
.mirotalk-support-widget .online-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
animation: fadeInDown 0.6s ease;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot,
|
||||
.mirotalk-support-widget .status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot.online,
|
||||
.mirotalk-support-widget .status-dot.online {
|
||||
background: #00e676;
|
||||
box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot.offline,
|
||||
.mirotalk-support-widget .status-dot.offline {
|
||||
background: #ff5252;
|
||||
box-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .online-text {
|
||||
color: #00e676;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .offline-text {
|
||||
color: #ff5252;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Widget Controls */
|
||||
.mirotalk-support-widget .widget-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .minimize-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .minimize-btn {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .minimize-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .minimize-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .close-btn {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .close-btn {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .close-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Content Elements */
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: fadeInUp 0.6s ease 0.1s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .main-heading {
|
||||
background: linear-gradient(135deg, #333 0%, #555 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24px;
|
||||
color: #e0e0e0;
|
||||
animation: fadeInUp 0.6s ease 0.2s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .subheading {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-images {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
animation: fadeInUp 0.6s ease 0.3s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #333;
|
||||
margin: 0 6px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .expert-img {
|
||||
border: 3px solid #e0e0e0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .connect-text {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
color: #bbb;
|
||||
animation: fadeInUp 0.6s ease 0.4s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .connect-text {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.mirotalk-support-widget .btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #333 0%, #444 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .btn {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
color: #333;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn:hover {
|
||||
background: linear-gradient(135deg, #444 0%, #555 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .btn:hover {
|
||||
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 230, 118, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn:hover .btn-icon {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.mirotalk-support-widget .footer-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 24px;
|
||||
animation: fadeInUp 0.6s ease 0.5s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .footer-text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .footer-link {
|
||||
color: #00e676;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .footer-link:hover {
|
||||
color: #00c853;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .mirotalk-powered-by {
|
||||
color: #00e676;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .mirotalk-powered-by {
|
||||
color: #00c853;
|
||||
}
|
||||
|
||||
/* Widget States */
|
||||
.mirotalk-support-widget.minimized {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Minimized Button */
|
||||
.mirotalk-minimized-btn {
|
||||
position: fixed;
|
||||
background: linear-gradient(135deg, #1f1f2e 0%, #2a2a3e 100%);
|
||||
color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 9998;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn.light-theme {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
color: #333;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn.light-theme:hover {
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .minimized-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Reopener Button - Fully Rounded */
|
||||
.mirotalk-reopener-btn {
|
||||
position: fixed;
|
||||
background: linear-gradient(135deg, #23233a 0%, #2a2a3e 100%);
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 9998;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.02em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.light-theme {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
color: #222;
|
||||
border: 2px solid rgba(0, 0, 0, 0.13);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn:hover {
|
||||
transform: translateY(-4px) scale(1.07);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
|
||||
background: linear-gradient(135deg, #2a2a3e 0%, #23233a 100%);
|
||||
color: #00e676;
|
||||
border-color: #00e676;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.light-theme:hover {
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
||||
background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
|
||||
color: #00c853;
|
||||
border-color: #00c853;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn .reopener-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn .reopener-content span {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 300px;
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 280px;
|
||||
padding: 20px;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 260px;
|
||||
padding: 18px;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.bottom-left,
|
||||
.mirotalk-support-widget.top-left {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-right,
|
||||
.mirotalk-support-widget.top-left {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-images {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0 3px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .connect-text {
|
||||
font-size: 13px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 11px 12px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
margin-left: -26px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.bottom-right {
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.bottom-left {
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.top-right {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.top-left {
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 240px;
|
||||
padding: 16px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.bottom-left,
|
||||
.mirotalk-support-widget.top-left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-right,
|
||||
.mirotalk-support-widget.top-left {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .online-indicator {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot .mirotalk-support-widget .status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .online-text,
|
||||
.mirotalk-support-widget .offline-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .close-btn {
|
||||
font-size: 16px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-images {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .connect-text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
margin-left: -24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .footer-text {
|
||||
margin-top: 16px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.bottom-right {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.bottom-left {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.top-right {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.top-left {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 220px;
|
||||
padding: 14px;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.bottom-left,
|
||||
.mirotalk-support-widget.top-left {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-right,
|
||||
.mirotalk-support-widget.top-left {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
margin-left: -22px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape Orientation */
|
||||
@media (max-height: 600px) and (orientation: landscape) {
|
||||
.mirotalk-support-widget {
|
||||
padding: 12px;
|
||||
width: 280px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-images {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .connect-text {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .footer-text {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* High DPI Displays */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.mirotalk-support-widget {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
border-width: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility - Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mirotalk-support-widget,
|
||||
.mirotalk-support-widget *,
|
||||
.mirotalk-minimized-btn,
|
||||
.mirotalk-reopener-btn {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot.online,
|
||||
.mirotalk-support-widget .status-dot.online {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus States for Accessibility */
|
||||
.mirotalk-support-widget .btn:focus,
|
||||
.mirotalk-support-widget .minimize-btn:focus,
|
||||
.mirotalk-support-widget .close-btn:focus,
|
||||
.mirotalk-minimized-btn:focus,
|
||||
.mirotalk-reopener-btn:focus {
|
||||
outline: 2px solid #00e676;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.mirotalk-support-widget,
|
||||
.mirotalk-minimized-btn,
|
||||
.mirotalk-reopener-btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -76,7 +76,7 @@ let BRAND = {
|
||||
},
|
||||
about: {
|
||||
imageUrl: '../images/mirotalk-logo.gif',
|
||||
title: '<strong>WebRTC SFU v1.9.21</strong>',
|
||||
title: '<strong>WebRTC SFU v1.9.22</strong>',
|
||||
html: `
|
||||
<button
|
||||
id="support-button"
|
||||
|
||||
@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
|
||||
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
|
||||
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
|
||||
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
|
||||
* @version 1.9.21
|
||||
* @version 1.9.22
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -5529,7 +5529,7 @@ function showAbout() {
|
||||
position: 'center',
|
||||
imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
|
||||
customClass: { image: 'img-about' },
|
||||
title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.21',
|
||||
title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.22',
|
||||
html: `
|
||||
<br />
|
||||
<div id="about">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
|
||||
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
|
||||
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
|
||||
* @version 1.9.21
|
||||
* @version 1.9.22
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
726
public/js/Widget.js
Normal file
726
public/js/Widget.js
Normal file
@@ -0,0 +1,726 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* MiroTalk Widget Factory - Main class for creating and managing widgets
|
||||
*/
|
||||
class MiroTalkWidget {
|
||||
static DEFAULT_OPTIONS = {
|
||||
autoJoin: true,
|
||||
theme: 'dark',
|
||||
widgetState: 'normal', // 'normal', 'minimized', 'closed'
|
||||
widgetType: 'support', // 'support', 'meeting', 'chat' (future)
|
||||
supportWidget: {
|
||||
position: 'bottom-right',
|
||||
expertImages: [
|
||||
'https://i.pravatar.cc/40?img=1',
|
||||
'https://i.pravatar.cc/40?img=2',
|
||||
'https://i.pravatar.cc/40?img=3',
|
||||
],
|
||||
checkOnlineStatus: false,
|
||||
isOnline: true,
|
||||
customMessages: {
|
||||
heading: 'Need a hand?',
|
||||
subheading:
|
||||
'Hop on a <span style="font-weight: bold">Free 1:1 or Group Consultation</span> with a MiroTalk Expert right now!',
|
||||
connectText: 'connect in < 10 seconds',
|
||||
onlineText: 'We are online',
|
||||
offlineText: 'We are offline',
|
||||
poweredBy: 'Powered by <span class="mirotalk-powered-by">MiroTalk</span>',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
constructor(domain, roomId, userName, options = {}) {
|
||||
this.validateRequiredParams(domain, roomId, userName);
|
||||
|
||||
this.protocol = 'https';
|
||||
this.domain = domain;
|
||||
this.roomId = roomId;
|
||||
this.userName = userName;
|
||||
this.options = this.mergeDeep(MiroTalkWidget.DEFAULT_OPTIONS, options);
|
||||
|
||||
// Initialize widget state and status
|
||||
this.widgetState = this.options.widgetState;
|
||||
this.isOnline = this.options.supportWidget.isOnline;
|
||||
|
||||
// Initialize widget registry
|
||||
this.initWidgetRegistry();
|
||||
|
||||
if (this.options.autoJoin) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// INITIALIZATION METHODS
|
||||
// ============================================================================
|
||||
|
||||
validateRequiredParams(domain, roomId, userName) {
|
||||
if (!domain) throw new Error('Domain is required');
|
||||
if (!roomId) throw new Error('Room ID is required');
|
||||
if (!userName) throw new Error('User name is required');
|
||||
}
|
||||
|
||||
initWidgetRegistry() {
|
||||
if (!window.miroTalkWidgets) {
|
||||
window.miroTalkWidgets = new Map();
|
||||
}
|
||||
}
|
||||
|
||||
mergeDeep(target, source) {
|
||||
const result = { ...target };
|
||||
for (const key in source) {
|
||||
if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
|
||||
result[key] = this.mergeDeep(target[key] || {}, source[key]);
|
||||
} else {
|
||||
result[key] = source[key];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
init() {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => this.createWidget());
|
||||
} else {
|
||||
this.createWidget();
|
||||
}
|
||||
}
|
||||
|
||||
async createWidget() {
|
||||
try {
|
||||
await this.loadWidgetAssets();
|
||||
|
||||
const widget = this.createWidgetHTML();
|
||||
const parentNode = this.getParentNode() || document.body;
|
||||
|
||||
if (parentNode !== document.body) {
|
||||
this.clearParentNode(parentNode);
|
||||
}
|
||||
|
||||
parentNode.appendChild(widget);
|
||||
this.widgetState = 'normal';
|
||||
|
||||
// Initialize widget based on configured state
|
||||
setTimeout(() => this.initWidgetState(this.options.widgetState), 200);
|
||||
|
||||
// Start status checking if enabled
|
||||
this.initStatusChecking();
|
||||
|
||||
console.log(`${this.options.widgetType} widget created successfully`);
|
||||
} catch (error) {
|
||||
console.error('Failed to create widget:', error);
|
||||
}
|
||||
}
|
||||
|
||||
initWidgetState(state) {
|
||||
const stateActions = {
|
||||
minimized: () => this.minimizeWidget(),
|
||||
closed: () => this.closeWidget(),
|
||||
normal: () => {}, // Already in normal state
|
||||
};
|
||||
|
||||
const action = stateActions[state];
|
||||
if (action) action();
|
||||
}
|
||||
|
||||
initStatusChecking() {
|
||||
if (this.options.supportWidget.checkOnlineStatus) {
|
||||
this.checkOnlineStatus();
|
||||
setInterval(() => this.checkOnlineStatus(), 30000); // Check every 30s
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// WIDGET CREATION METHODS
|
||||
// ============================================================================
|
||||
|
||||
async loadWidgetAssets() {
|
||||
const assetLoaders = {
|
||||
support: () => this.loadSupportWidgetAssets(),
|
||||
// Future widget types can be added here
|
||||
// 'meeting': () => this.loadMeetingWidgetAssets(),
|
||||
// 'chat': () => this.loadChatWidgetAssets(),
|
||||
};
|
||||
|
||||
const loader = assetLoaders[this.options.widgetType];
|
||||
if (loader) {
|
||||
await loader();
|
||||
} else {
|
||||
throw new Error(`Unknown widget type: ${this.options.widgetType}`);
|
||||
}
|
||||
}
|
||||
|
||||
async loadSupportWidgetAssets() {
|
||||
await this.injectExternalCSS(
|
||||
`${this.protocol}://${this.domain}/css/widgets/Support.css`,
|
||||
'mirotalk-support-css'
|
||||
);
|
||||
}
|
||||
|
||||
createWidgetHTML() {
|
||||
const widgetCreators = {
|
||||
support: () => this.createSupportWidgetHTML(),
|
||||
// Future widget types can be added here
|
||||
// 'meeting': () => this.createMeetingWidgetHTML(),
|
||||
// 'chat': () => this.createChatWidgetHTML(),
|
||||
};
|
||||
|
||||
const creator = widgetCreators[this.options.widgetType];
|
||||
if (creator) {
|
||||
return creator();
|
||||
} else {
|
||||
throw new Error(`Unknown widget type: ${this.options.widgetType}`);
|
||||
}
|
||||
}
|
||||
|
||||
createSupportWidgetHTML() {
|
||||
const { supportWidget, theme } = this.options;
|
||||
const { customMessages, expertImages, position } = supportWidget;
|
||||
|
||||
const widget = document.createElement('div');
|
||||
widget.className = `mirotalk-support-widget ${position} ${theme === 'light' ? 'light-theme' : ''}`;
|
||||
widget.innerHTML = this.getSupportWidgetTemplate({ customMessages, expertImages });
|
||||
|
||||
const widgetId = this.generateWidgetId('widget');
|
||||
this.registerWidget(widgetId, widget);
|
||||
|
||||
return widget;
|
||||
}
|
||||
|
||||
getSupportWidgetTemplate({ customMessages, expertImages }) {
|
||||
return `
|
||||
<div class="online-indicator">
|
||||
<div class="status-dot ${this.isOnline ? 'online' : 'offline'}"></div>
|
||||
<div class="online-text" style="display: ${this.isOnline ? 'inline' : 'none'}">${customMessages.onlineText}</div>
|
||||
<div class="offline-text" style="display: ${this.isOnline ? 'none' : 'inline'}">${customMessages.offlineText}</div>
|
||||
<div class="widget-controls">
|
||||
<button class="minimize-btn" onclick="miroTalkWidgetAction('minimize', this)" title="Minimize">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 13H5v-2h14v2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="close-btn" onclick="miroTalkWidgetAction('close', this)" title="Close">×</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="main-heading">${customMessages.heading}</h2>
|
||||
<p class="subheading">${customMessages.subheading}</p>
|
||||
<div class="expert-images">
|
||||
${expertImages
|
||||
.map(
|
||||
(img, i) => `
|
||||
<img src="${img}" class="expert-img" alt="Expert consultant ${i + 1}" loading="lazy" />
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="connect-text">${customMessages.connectText}</div>
|
||||
${this.createActionButtons()}
|
||||
<div class="footer-text">${customMessages.poweredBy}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createActionButtons() {
|
||||
const buttons = [
|
||||
{ action: 'startAudioCall', icon: this.getAudioIcon(), text: 'Start Audio Call' },
|
||||
{ action: 'startVideoCall', icon: this.getVideoIcon(), text: 'Start Video Call' },
|
||||
{ action: 'startScreenShare', icon: this.getScreenIcon(), text: 'Start Screen Share' },
|
||||
{ action: 'joinRoom', icon: this.getJoinIcon(), text: 'Join Room' },
|
||||
];
|
||||
|
||||
return buttons
|
||||
.map(
|
||||
(btn) => `
|
||||
<button class="btn" onclick="miroTalkWidgetAction('${btn.action}', this)">
|
||||
<div class="btn-icon">${btn.icon}</div>
|
||||
<span class="btn-text">${btn.text}</span>
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// STATE MANAGEMENT METHODS
|
||||
// ============================================================================
|
||||
|
||||
minimizeWidget() {
|
||||
const widget = document.querySelector('.mirotalk-support-widget');
|
||||
if (!widget) {
|
||||
console.warn('Widget not found for minimizing');
|
||||
return;
|
||||
}
|
||||
|
||||
widget.classList.add('minimized');
|
||||
this.widgetState = 'minimized';
|
||||
this.createMinimizedButton();
|
||||
console.log('Widget minimized');
|
||||
}
|
||||
|
||||
restoreWidget() {
|
||||
const widget = document.querySelector('.mirotalk-support-widget');
|
||||
const minimizedBtn = document.querySelector('.mirotalk-minimized-btn');
|
||||
|
||||
if (widget) {
|
||||
widget.classList.remove('minimized');
|
||||
this.widgetState = 'normal';
|
||||
}
|
||||
if (minimizedBtn) {
|
||||
minimizedBtn.remove();
|
||||
}
|
||||
console.log('Widget restored');
|
||||
}
|
||||
|
||||
closeWidget() {
|
||||
this.removeAllWidgetElements();
|
||||
this.widgetState = 'closed';
|
||||
this.createReopenerButton();
|
||||
console.log('Widget closed');
|
||||
}
|
||||
|
||||
reopenWidget() {
|
||||
const reopenerBtn = document.querySelector('.mirotalk-reopener-btn');
|
||||
if (reopenerBtn) reopenerBtn.remove();
|
||||
this.createWidget();
|
||||
console.log('Widget reopened');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// BUTTON CREATION METHODS
|
||||
// ============================================================================
|
||||
|
||||
createMinimizedButton() {
|
||||
this.removeExistingElement('.mirotalk-minimized-btn');
|
||||
|
||||
if (!this.options.supportWidget?.position) {
|
||||
console.error('Support widget position not defined');
|
||||
return;
|
||||
}
|
||||
|
||||
const minimizedBtn = this.createElement('div', {
|
||||
className: this.buildClassNames([
|
||||
'mirotalk-minimized-btn',
|
||||
this.options.supportWidget.position,
|
||||
this.options.theme === 'light' ? 'light-theme' : '',
|
||||
]),
|
||||
});
|
||||
|
||||
const widgetId = this.generateWidgetId('minimized');
|
||||
this.registerWidget(widgetId, minimizedBtn);
|
||||
|
||||
const content = this.createMinimizedContent();
|
||||
minimizedBtn.appendChild(content);
|
||||
minimizedBtn.addEventListener('click', () => this.restoreWidget());
|
||||
|
||||
document.body.appendChild(minimizedBtn);
|
||||
console.log('Minimized button created');
|
||||
}
|
||||
|
||||
createMinimizedContent() {
|
||||
const contentDiv = this.createElement('div', { className: 'minimized-content' });
|
||||
const statusDot = this.createElement('div', {
|
||||
className: `status-dot ${this.isOnline ? 'online' : 'offline'}`,
|
||||
});
|
||||
const textSpan = this.createElement('span', { textContent: 'Support' });
|
||||
|
||||
contentDiv.appendChild(statusDot);
|
||||
contentDiv.appendChild(textSpan);
|
||||
return contentDiv;
|
||||
}
|
||||
|
||||
createReopenerButton() {
|
||||
this.removeExistingElement('.mirotalk-reopener-btn');
|
||||
|
||||
if (!this.options.supportWidget?.position) {
|
||||
console.error('Support widget position not defined');
|
||||
return;
|
||||
}
|
||||
|
||||
const reopenerBtn = this.createElement('div', {
|
||||
className: this.buildClassNames([
|
||||
'mirotalk-reopener-btn',
|
||||
this.options.supportWidget.position,
|
||||
this.options.theme === 'light' ? 'light-theme' : 'dark-theme',
|
||||
]),
|
||||
});
|
||||
|
||||
const widgetId = this.generateWidgetId('reopener');
|
||||
this.registerWidget(widgetId, reopenerBtn);
|
||||
|
||||
reopenerBtn.innerHTML = `
|
||||
<div class="reopener-content" style="display: flex; flex-direction: column; align-items: center;">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4c0 .7.5 1.2 1.2 1.2h16.8c.7 0 1.2-.5 1.2-1.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
|
||||
</svg>
|
||||
<span style="font-size: 13px; font-weight: 500; margin-top: 4px;">Support</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
reopenerBtn.addEventListener('click', () => this.reopenWidget());
|
||||
document.body.appendChild(reopenerBtn);
|
||||
console.log('Reopener button created');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// STATUS MANAGEMENT METHODS
|
||||
// ============================================================================
|
||||
|
||||
async checkOnlineStatus() {
|
||||
try {
|
||||
const response = await fetch(`${this.protocol}://${this.domain}/isRoomActive`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ roomId: this.roomId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const online = data.message && data.message !== 'Unauthorized';
|
||||
this.updateOnlineStatus(online);
|
||||
} catch (error) {
|
||||
console.warn('Failed to check room status:', error.message);
|
||||
this.updateOnlineStatus(false);
|
||||
}
|
||||
}
|
||||
|
||||
updateOnlineStatus(online) {
|
||||
this.isOnline = online;
|
||||
|
||||
const elementsToUpdate = ['.mirotalk-support-widget', '.mirotalk-minimized-btn'];
|
||||
|
||||
elementsToUpdate.forEach((selector) => {
|
||||
const element = document.querySelector(selector);
|
||||
if (element) {
|
||||
this.updateStatusInElement(element, online);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Online status updated:', online);
|
||||
}
|
||||
|
||||
updateStatusInElement(element, online) {
|
||||
const statusDot = element.querySelector('.status-dot');
|
||||
const onlineText = element.querySelector('.online-text');
|
||||
const offlineText = element.querySelector('.offline-text');
|
||||
|
||||
if (statusDot) {
|
||||
statusDot.classList.toggle('online', online);
|
||||
statusDot.classList.toggle('offline', !online);
|
||||
}
|
||||
|
||||
if (onlineText && offlineText) {
|
||||
onlineText.style.display = online ? 'inline' : 'none';
|
||||
offlineText.style.display = online ? 'none' : 'inline';
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ACTION METHODS
|
||||
// ============================================================================
|
||||
|
||||
startAudioCall() {
|
||||
if (this.isOnline) {
|
||||
console.log('Starting audio call...');
|
||||
this.openMeetingWindow({ audio: 1, video: 0, screen: 0 });
|
||||
} else {
|
||||
this.supportOffline();
|
||||
}
|
||||
}
|
||||
|
||||
startVideoCall() {
|
||||
if (this.isOnline) {
|
||||
console.log('Starting video call...');
|
||||
this.openMeetingWindow({ audio: 0, video: 1, screen: 0 });
|
||||
} else {
|
||||
this.supportOffline();
|
||||
}
|
||||
}
|
||||
|
||||
startScreenShare() {
|
||||
if (this.isOnline) {
|
||||
console.log('Starting screen share...');
|
||||
this.openMeetingWindow({ audio: 0, video: 0, screen: 1 });
|
||||
} else {
|
||||
this.supportOffline();
|
||||
}
|
||||
}
|
||||
|
||||
joinRoom() {
|
||||
if (this.isOnline) {
|
||||
console.log('Joining room...');
|
||||
window.open(`${this.protocol}://${this.domain}/join?room=${this.roomId}`, '_blank');
|
||||
} else {
|
||||
this.supportOffline();
|
||||
}
|
||||
}
|
||||
|
||||
openMiroTalk() {
|
||||
window.open(`https://${this.domain}`, '_blank');
|
||||
}
|
||||
|
||||
openMeetingWindow(params) {
|
||||
const queryParams = new URLSearchParams({
|
||||
room: this.roomId,
|
||||
name: this.userName,
|
||||
...params,
|
||||
});
|
||||
window.open(`${this.protocol}://${this.domain}/join?${queryParams}`, '_blank');
|
||||
}
|
||||
|
||||
supportOffline() {
|
||||
alert('Sorry, support is currently offline.');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// UTILITY METHODS
|
||||
// ============================================================================
|
||||
|
||||
async injectExternalCSS(url, id) {
|
||||
if (document.getElementById(id)) return Promise.resolve();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const link = document.createElement('link');
|
||||
link.id = id;
|
||||
link.rel = 'stylesheet';
|
||||
link.href = url;
|
||||
link.onload = () => {
|
||||
console.log(`CSS loaded successfully: ${url}`);
|
||||
resolve();
|
||||
};
|
||||
link.onerror = () => {
|
||||
console.error(`Failed to load CSS: ${url}`);
|
||||
reject(new Error(`Failed to load CSS: ${url}`));
|
||||
};
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
createElement(tag, properties = {}) {
|
||||
const element = document.createElement(tag);
|
||||
Object.assign(element, properties);
|
||||
return element;
|
||||
}
|
||||
|
||||
generateWidgetId(prefix = 'widget') {
|
||||
return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||
}
|
||||
|
||||
registerWidget(widgetId, element) {
|
||||
window.miroTalkWidgets.set(widgetId, this);
|
||||
element.setAttribute('data-widget-id', widgetId);
|
||||
}
|
||||
|
||||
buildClassNames(classes) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
removeExistingElement(selector) {
|
||||
const existingElement = document.querySelector(selector);
|
||||
if (existingElement) existingElement.remove();
|
||||
}
|
||||
|
||||
removeAllWidgetElements() {
|
||||
const selectors = ['.mirotalk-support-widget', '.mirotalk-minimized-btn', '.mirotalk-reopener-btn'];
|
||||
selectors.forEach((selector) => {
|
||||
document.querySelectorAll(selector).forEach((element) => element.remove());
|
||||
});
|
||||
}
|
||||
|
||||
getParentNode() {
|
||||
return document.querySelector('#mirotalk-widget') || document.body;
|
||||
}
|
||||
|
||||
clearParentNode(parentNode) {
|
||||
parentNode.innerHTML = '';
|
||||
}
|
||||
|
||||
getWidgetFromElement(element) {
|
||||
const widget = element.closest('.mirotalk-support-widget, .mirotalk-minimized-btn, .mirotalk-reopener-btn');
|
||||
if (widget) {
|
||||
const widgetId = widget.getAttribute('data-widget-id');
|
||||
return window.miroTalkWidgets ? window.miroTalkWidgets.get(widgetId) : this;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ICON METHODS
|
||||
// ============================================================================
|
||||
|
||||
getAudioIcon() {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path d="M6.6,10.8c1.3,2.6,3.5,4.8,6.1,6.1l2-2c0.4-0.4,1-0.5,1.5-0.3c1.6,0.5,3.3,0.8,5,0.8c0.6,0,1,0.4,1,1V21c0,0.6-0.4,1-1,1C10.1,22,2,13.9,2,4c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1c0,1.7,0.3,3.4,0.8,5C7.1,9.8,7,10.4,6.6,10.8z"></path>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
getVideoIcon() {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path d="M17 10.5V7c0-1.1-.9-2-2-2H5C3.9 5 3 5.9 3 7v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-3.5l4 4v-11l-4 4z"></path>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
getScreenIcon() {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/>
|
||||
<circle cx="12" cy="11" r="2"/>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
getJoinIcon() {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// PUBLIC API METHODS
|
||||
// ============================================================================
|
||||
|
||||
join() {
|
||||
if (!this.getParentNode()) {
|
||||
this.createWidget();
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.removeAllWidgetElements();
|
||||
|
||||
const parentNode = this.getParentNode();
|
||||
if (parentNode && parentNode !== document.body) {
|
||||
this.clearParentNode(parentNode);
|
||||
}
|
||||
|
||||
if (window.miroTalkWidgets) {
|
||||
for (const [key, widget] of window.miroTalkWidgets.entries()) {
|
||||
if (widget === this) {
|
||||
window.miroTalkWidgets.delete(key);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Widget destroyed');
|
||||
}
|
||||
|
||||
updateRoom(newRoomId) {
|
||||
this.roomId = newRoomId;
|
||||
this.createWidget();
|
||||
}
|
||||
|
||||
updateUser(newUserName) {
|
||||
this.userName = newUserName;
|
||||
this.createWidget();
|
||||
}
|
||||
|
||||
getState() {
|
||||
return this.widgetState;
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
return this.widgetState === 'normal';
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// GLOBAL ACTION HANDLER
|
||||
// ============================================================================
|
||||
|
||||
window.miroTalkWidgetAction = function (action, element) {
|
||||
try {
|
||||
const widgetElement = element.closest(
|
||||
'.mirotalk-support-widget, .mirotalk-minimized-btn, .mirotalk-reopener-btn'
|
||||
);
|
||||
|
||||
if (!widgetElement) {
|
||||
console.error('Widget element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
const widgetId = widgetElement.getAttribute('data-widget-id');
|
||||
const widget = window.miroTalkWidgets?.get(widgetId);
|
||||
|
||||
if (!widget) {
|
||||
console.error('Widget instance not found');
|
||||
return;
|
||||
}
|
||||
|
||||
const actions = {
|
||||
minimize: () => widget.minimizeWidget(),
|
||||
close: () => widget.closeWidget(),
|
||||
restore: () => widget.restoreWidget(),
|
||||
reopen: () => widget.reopenWidget(),
|
||||
startAudioCall: () => widget.startAudioCall(),
|
||||
startVideoCall: () => widget.startVideoCall(),
|
||||
startScreenShare: () => widget.startScreenShare(),
|
||||
joinRoom: () => widget.joinRoom(),
|
||||
};
|
||||
|
||||
const actionHandler = actions[action];
|
||||
if (actionHandler) {
|
||||
actionHandler();
|
||||
} else {
|
||||
console.warn('Unknown action:', action);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error executing widget action:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// AUTO-INITIALIZATION
|
||||
// ============================================================================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const autoInit = document.querySelector('[data-mirotalk-auto]');
|
||||
if (!autoInit) return;
|
||||
|
||||
try {
|
||||
const config = {
|
||||
domain: autoInit.getAttribute('data-domain'),
|
||||
roomId: autoInit.getAttribute('data-room') || 'support-room',
|
||||
userName: autoInit.getAttribute('data-user') || `guest-${Math.floor(Math.random() * 10000)}`,
|
||||
theme: autoInit.getAttribute('data-theme') || MiroTalkWidget.DEFAULT_OPTIONS.theme,
|
||||
widgetState: autoInit.getAttribute('data-widget-state') || MiroTalkWidget.DEFAULT_OPTIONS.widgetState,
|
||||
position: autoInit.getAttribute('data-position') || MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.position,
|
||||
checkOnline: autoInit.getAttribute('data-check-online') === 'true',
|
||||
customMessages: {
|
||||
heading:
|
||||
autoInit.getAttribute('data-heading') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.heading,
|
||||
subheading:
|
||||
autoInit.getAttribute('data-subheading') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.subheading,
|
||||
connectText:
|
||||
autoInit.getAttribute('data-connect-text') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.connectText,
|
||||
onlineText:
|
||||
autoInit.getAttribute('data-online-text') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.onlineText,
|
||||
offlineText:
|
||||
autoInit.getAttribute('data-offline-text') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.offlineText,
|
||||
poweredBy:
|
||||
autoInit.getAttribute('data-powered-by') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.poweredBy,
|
||||
},
|
||||
};
|
||||
|
||||
if (config.domain) {
|
||||
new MiroTalkWidget(config.domain, config.roomId, config.userName, {
|
||||
widgetState: config.widgetState,
|
||||
theme: config.theme,
|
||||
supportWidget: {
|
||||
...MiroTalkWidget.DEFAULT_OPTIONS.supportWidget,
|
||||
position: config.position,
|
||||
checkOnlineStatus: config.checkOnline,
|
||||
customMessages: config.customMessages,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to auto-initialize MiroTalk Widget:', error);
|
||||
}
|
||||
});
|
||||
المرجع في مشكلة جديدة
حظر مستخدم