تمييز المساهمات حسب الجهاز (الهواتف والكمبيوترات)

[كود جيفري]

نستخدم اليوم أجهزة متعددة للوصول إلى الإنترنت، من الهواتف الذكية إلى أجهزة الكمبيوتر، وأصبح من المفيد أن يعرف الأعضاء والإدارة الجهاز الذي كُتبت منه كل مساهمة. هذا الكود يضيف علامة صغيرة أسفل كل مشاركة توضح مصدرها، فإذا شارك العضو من هاتفه تظهر عبارة "مساهمة من الجوال"، وإذا شارك من الكمبيوتر تظهر عبارة "مساهمة من الكمبيوتر". وهي لمسة جميلة تضفي حيوية على المواضيع، وتمنح الإدارة فكرة عن الأجهزة التي يفضلها أعضاؤها.

مثال على الكود​

شرح تركيب الكود​

كود Javascript
لوحة الإدارة ← عناصر إضافية ← إدارة أكواد Javascript
العنوان: اختيارك
الصلاحيات: اختيارك
أضف الكود إلى: جميع الصفحات

$(document).ready(function () {
  var isEditing = window.location.href.includes('&mode=editpost');
  var isQuote   = window.location.href.includes('&mode=quote');

  var mobileMsg = '[table class="mobileMsg"][tr][td]مساهمة من الجوال [img]https://2img.net/i/fa/twemoji/16x16/1f4f1.png[/img][/td][/tr][/table]';
  var pcMsg     = '[table class="pcMsg"][tr][td]مساهمة من الكمبيوتر [img]https://2img.net/i/fa/twemoji/16x16/1f4bb.png[/img][/td][/tr][/table]';

  function getEditorInstance() {
    var textarea = $("textarea[name='message']");
    if ($.sceditor && textarea.sceditor) {
      return textarea.sceditor("instance");
    }
    return null;
  }

  function getEditorContent() {
    var instance = getEditorInstance();
    return instance ? instance.val() : $("textarea[name='message']").val();
  }

  function setEditorContent(content) {
    var instance = getEditorInstance();
    if (instance) instance.val(content);
    else $("textarea[name='message']").val(content);
  }

  function removeSignatures(content) {
    var regex = /\[table[^\]]*class="(mobileMsg|pcMsg)"[^\]]*\][\s\S]*?\[\/table\]/gi;
    return content.replace(regex, "");
  }

  if (isEditing || isQuote) {
    var interval = setInterval(function () {
      var content = getEditorContent();
      if (content) {
        setEditorContent(removeSignatures(content));
        clearInterval(interval);
      }
    }, 0);
  }

  $('[value="إرسال"],[value="send"]').on('click', function () {
    var currentText = getEditorContent();
    var message;
    var width = $(window).width();

    // الشرط الجديد
    if (width < 900) {
      message = mobileMsg;    
    } else {
      message = pcMsg;
    }

    if (!currentText.includes(mobileMsg) && !currentText.includes(pcMsg)) {
      setEditorContent(currentText + '\n' + message);
    }
  });
});

كود CSS

table.mobileMsg, table.pcMsg {
    width: 100%;
    margin-top: 30px;
    border-collapse: collapse !important;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Arial',sans-serif;
    box-shadow: -1px 5px 16px 1px #0000003b;
    text-align: center;
}
table.mobileMsg td, table.pcMsg td{
    font-weight: 900;
    font-size: 16px;
    color: #fff;
}

table.mobileMsg td {
  background: linear-gradient(135deg, #4CAF50, #81C784);
}
table.pcMsg td {
  background: linear-gradient(135deg, #2196F3, #64B5F6);
}

table.mobileMsg img,table.pcMsg img{
  vertical-align: middle;
  margin-left: 6px;
}

إضافة بسيطة وأنيقة تجعل المساهمات أكثر تفصيلًا وتمنح المنتدى طابعًا عصريًا. كل التقدير لصاحب الكود على هذه الفكرة التي طوّرها بالاستعانة بالذكاء الاصطناعي.

صاحب الكود: كونان2000