تُقدّم إضافة قائمة الزر الأيمن الاحترافية (Context Menu) تجربة تفاعلية جديدة كليًا داخل المنتدى، مستوحاة من واجهات الأنظمة والتطبيقات العصرية. فبدل القوائم التقليدية، يحصل العضو على قائمة ذكية أنيقة تظهر عند النقر بزر الفأرة الأيمن، وتوفّر وصولًا سريعًا لأهم الخيارات والاختصارات دون الحاجة للتنقّل بين الصفحات.
تجمع الإضافة بين التصميم الحديث والوظائف العملية، حيث تأتي بواجهة داكنة مريحة للعين، وأيقونات واضحة، وتنظيم ذكي للعناصر حسب أولوية الاستخدام، مع دعم اختصارات لوحة المفاتيح. والنتيجة هي تجربة استخدام أكثر سلاسة واحترافية، تعكس تطوّر المنتدى واهتمامه بأدق تفاصيل تجربة المستخدم.
تجمع الإضافة بين التصميم الحديث والوظائف العملية، حيث تأتي بواجهة داكنة مريحة للعين، وأيقونات واضحة، وتنظيم ذكي للعناصر حسب أولوية الاستخدام، مع دعم اختصارات لوحة المفاتيح. والنتيجة هي تجربة استخدام أكثر سلاسة واحترافية، تعكس تطوّر المنتدى واهتمامه بأدق تفاصيل تجربة المستخدم.
معاينة الكود
تركيب الكود
1. لوحة الإدارة > عناصر إضافية > HTML و JAVASCRIPT. 2. اختر إدارة أكواد Javascript ثم إنشاء كود جديد. 3. العنوان: أي إسم | أضف الكود إلى: جميع الصفحات.
الكود من انشاء Luffy
منقول من منتدى الدعم
JavaScript:
jQuery(function($) {
var targetInput = null;
var isLogged = (typeof _userdata !== "undefined" && _userdata.session_logged_in == 1);
var myName = "زائر";
var myAvatar = "https://i.servimg.com/u/f68/11/48/38/31/avatar11.png";
var myRole = "زائر";
if (isLogged) {
myName = _userdata.username;
if (_userdata.avatar) {
var tempDiv = document.createElement('div');
tempDiv.innerHTML = _userdata.avatar;
var imgTag = tempDiv.querySelector('img');
if (imgTag) myAvatar = imgTag.src;
}
if (typeof _lang !== "undefined" && _lang["rank_title"]) {
myRole = _lang["rank_title"];
} else {
myRole = "عضو مسجل";
}
}
$('head').append(`
<style>
#ctx-menu {
position: fixed;
background: rgba(20, 25, 35, 0.95) !important;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 15px 40px rgba(0,0,0,0.8);
border-radius: 12px;
padding: 8px;
width: 250px;
display: none;
z-index: 2147483647;
font-family: 'Cairo', sans-serif;
user-select: none;
text-align: right;
direction: rtl;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ctx-header {
padding: 12px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ctx-avatar {
width: 42px; height: 42px; border-radius: 50%;
object-fit: cover; border: 2px solid #3b82f6;
background: #1e293b;
}
.ctx-info { display: flex; flex-direction: column; }
.ctx-name { font-size: 14px; font-weight: bold; color: #fff; }
.ctx-role { font-size: 11px; color: #3b82f6; margin-top: 2px; font-weight: bold; }
.ctx-item {
padding: 9px 12px;
font-size: 13px;
color: #e2e8f0;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
border-radius: 6px;
transition: 0.1s;
margin-bottom: 2px;
}
.ctx-item:hover {
background: #3b82f6;
color: #fff;
}
.ctx-item i { font-size: 18px; color: #94a3b8; width: 20px; text-align: center; transition: 0.2s; }
.ctx-item:hover i { color: #fff; }
.ctx-sep {
height: 1px; background: rgba(255,255,255,0.1); margin: 5px 10px;
}
.ctx-key {
margin-right: auto; font-size: 10px;
background: rgba(255,255,255,0.1); padding: 2px 6px;
border-radius: 4px; color: #94a3b8; font-family: sans-serif;
}
.ctx-item:hover .ctx-key { background: rgba(0,0,0,0.2); color: #fff; }
</style>
`);
var userActionHTML = '';
if (isLogged) {
userActionHTML = `
<div class="ctx-item" id="c-profile">
<i class="material-icons">person</i> <span>ملفي الشخصي</span>
</div>
<div class="ctx-item" id="c-edit">
<i class="material-icons">settings</i> <span>تعديل بياناتي</span>
</div>
`;
} else {
userActionHTML = `
<div class="ctx-item" id="c-register">
<i class="material-icons">person_add</i> <span>إنشاء حساب</span>
</div>
<div class="ctx-item" id="c-login">
<i class="material-icons">login</i> <span>تسجيل دخول</span>
</div>
`;
}
var menuHTML = `
<div id="ctx-menu">
<div class="ctx-header">
<img src="${myAvatar}" class="ctx-avatar">
<div class="ctx-info">
<span class="ctx-name">${myName}</span>
<span class="ctx-role">${myRole}</span>
</div>
</div>
<div class="ctx-item" id="c-back">
<i class="material-icons">arrow_forward</i> <span>رجوع</span>
<span class="ctx-key">Alt+R</span>
</div>
<div class="ctx-item" id="c-reload">
<i class="material-icons">refresh</i> <span>تحديث</span>
<span class="ctx-key">F5</span>
</div>
<div class="ctx-sep"></div>
<div class="ctx-item" id="c-home">
<i class="material-icons">home</i> <span>الرئيسية</span>
</div>
${userActionHTML}
<div class="ctx-sep"></div>
<div class="ctx-item" id="c-copy">
<i class="material-icons">content_copy</i> <span>نسخ</span>
<span class="ctx-key">Ctrl+C</span>
</div>
<div class="ctx-item" id="c-paste">
<i class="material-icons">content_paste</i> <span>لصق</span>
<span class="ctx-key">Ctrl+V</span>
</div>
<div class="ctx-sep"></div>
<div class="ctx-item" id="c-top">
<i class="material-icons">vertical_align_top</i> <span>للأعلى</span>
</div>
</div>
`;
$('#ctx-menu').remove();
$('body').append(menuHTML);
$(document).on('contextmenu', function(e) {
if (e.shiftKey) return true;
e.preventDefault();
targetInput = $(e.target);
var menu = $('#ctx-menu');
menu.css({ display: 'block', visibility: 'hidden' });
var winWidth = $(window).width();
var winHeight = $(window).height();
var menuWidth = menu.outerWidth();
var menuHeight = menu.outerHeight();
var x = e.clientX;
var y = e.clientY;
if ((x + menuWidth) > winWidth) x = winWidth - menuWidth - 10;
if ((y + menuHeight) > winHeight) y = winHeight - menuHeight - 10;
if (x < 0) x = 10;
if (y < 0) y = 10;
menu.css({ top: y, left: x, visibility: 'visible' }).hide().fadeIn(100);
});
$(document).on('click', function() {
$('#ctx-menu').fadeOut(100);
});
$('#c-back').click(function() { window.history.back(); });
$('#c-reload').click(function() { location.reload(); });
$('#c-home').click(function() { window.location.href = '/'; });
$('#c-top').click(function() { $('html, body').animate({ scrollTop: 0 }, 'fast'); });
$('#c-profile').click(function() { window.location.href = '/u' + _userdata.user_id; });
$('#c-edit').click(function() { window.location.href = '/profile?mode=editprofile'; });
$('#c-register').click(function() { window.location.href = '/register'; });
$('#c-login').click(function() { window.location.href = '/login'; });
$('#c-copy').click(function() {
document.execCommand('copy');
});
$('#c-paste').click(async function() {
try {
const text = await navigator.clipboard.readText();
if (targetInput && (targetInput.is('input') || targetInput.is('textarea'))) {
var el = targetInput[0];
var start = el.selectionStart;
var end = el.selectionEnd;
var val = el.value;
el.value = val.slice(0, start) + text + val.slice(end);
el.selectionStart = el.selectionEnd = start + text.length;
el.focus();
} else {
var quickReply = $('#text_editor_textarea, textarea[name="message"]');
if(quickReply.length > 0) {
var el = quickReply[0];
el.value += text;
el.focus();
}
}
} catch (err) {
console.error(err);
}
});
});الكود من انشاء Luffy
منقول من منتدى الدعم