Problems with prefix in the PC and mobile version

Forum version : #ModernBB
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link :? https://ekin-ek.666forum.com/


hello everyone~

I set up Javascript but found a problem,
[PC version] runs normally, but if members use [Mobile version] to change the theme name,
The prefix will disappear, and you must re-edit the theme using the [PC version] to display it normally.

My Javascript-1（In all the pages）

Code:

$(function(){
 ?var prefix = [
 ? ?'原创',
 ? ?'原創',
 ? ?'授权',
 ? ?'授權',
 ? ?'无授',
 ? ?'無授',
 ? ?'改图',
 ? ?'改圖',
 ? ?'约稿', ?
 ? ?'代发', ? ?
 ? ? ? ?
 ?],
 ?a = document.getElementsByTagName('A'), i = 0, j = a.length, l = prefix.length;
 ?for (; i<j; i++) for (var k = 0; k<l; k++) RegExp('^\\['+prefix[k]+'\\]').test(a[i].innerHTML) && (a[i].innerHTML = a[i].innerHTML.replace(RegExp('^\\['+prefix[k]+'\\]'), '<span class="topic-prefix1 prefix-'+prefix[k].toLowerCase()+'">'+prefix[k]+'</span>'));
});

$(function(){
 ?var prefix = [
 ? ?'图片',
 ? ?'圖片',
 ? ?'音乐',
 ? ?'音樂',
 ? ?'视频',
 ? ?'視頻',
 ? ?'影片',
 ? ?'文字',
 ? ?'图文',
 ? ?'综艺',
 ? ?'电影',
 ? ?'電影',
 ? ?'电视',
 ? ?'電視',
 ? ?
 ?],
 ?a = document.getElementsByTagName('A'), i = 0, j = a.length, l = prefix.length;
 ?for (; i<j; i++) for (var k = 0; k<l; k++) RegExp('^\\['+prefix[k]+'\\]').test(a[i].innerHTML) && (a[i].innerHTML = a[i].innerHTML.replace(RegExp('^\\['+prefix[k]+'\\]'), '<span class="topic-prefix2 prefix-'+prefix[k].toLowerCase()+'">'+prefix[k]+'</span>'));
});

$(function(){
 ?var prefix = [
 ? ?'礼物',
 ? ?'禮物',
 ? ?'活动',
 ? ?'活動',
 
 ?],
 ?a = document.getElementsByTagName('A'), i = 0, j = a.length, l = prefix.length;
 ?for (; i<j; i++) for (var k = 0; k<l; k++) RegExp('^\\['+prefix[k]+'\\]').test(a[i].innerHTML) && (a[i].innerHTML = a[i].innerHTML.replace(RegExp('^\\['+prefix[k]+'\\]'), '<span class="topic-prefix3 prefix-'+prefix[k].toLowerCase()+'">'+prefix[k]+'</span>'));
});

$(function(){
 ?var prefix = [
 ? ?'指南',
 ? ?'问题',
 ? ?'教學', ?
 
 ?],
 ?a = document.getElementsByTagName('A'), i = 0, j = a.length, l = prefix.length;
 ?for (; i<j; i++) for (var k = 0; k<l; k++) RegExp('^\\['+prefix[k]+'\\]').test(a[i].innerHTML) && (a[i].innerHTML = a[i].innerHTML.replace(RegExp('^\\['+prefix[k]+'\\]'), '<span class="topic-prefix4 prefix-'+prefix[k].toLowerCase()+'">'+prefix[k]+'</span>'));
});

$(function(){
 ?var prefix = [
 ? ?'讨论',
 ? ?'討論',
 ? ?'整理',
 ? ?'分享',
 ? ?'存梗',
 ? ?'脑洞',
 ? ?'腦洞',
 ? ?'盘点',
 
 ?],
 ?a = document.getElementsByTagName('A'), i = 0, j = a.length, l = prefix.length;
 ?for (; i<j; i++) for (var k = 0; k<l; k++) RegExp('^\\['+prefix[k]+'\\]').test(a[i].innerHTML) && (a[i].innerHTML = a[i].innerHTML.replace(RegExp('^\\['+prefix[k]+'\\]'), '<span class="topic-prefix5 prefix-'+prefix[k].toLowerCase()+'">'+prefix[k]+'</span>'));
});

My Javascript-2（In all the pages）

Code:

var prefixes = ["原创","原創","代发","授权","授權","无授","無授"];
 ? var _pm = false;
 ? ?var chk = false;
 ? ?function toMenu(a) {
 ? ? ?var htmlpre = '<select style="margin-right:5px" id="prefix" size="1"><option value="">(None)</option>';
 ? ? ?for (i in a)
 ? ? ?htmlpre += '<option value="' + a[i] + '">' + a[i] + '</option>';
 ? ? ?htmlpre += '</select>';
 ? ? ?return htmlpre;
 ? ?}
 ? ?function checkpre(ar, input) {
 ? ? ?for (i in ar) {
 ? ? ? ? ?var p = new RegExp("" + ar[i], "g");
 ? ? ? ? ?var title = input.substr(0, input.indexOf(']'));
 ? ? ? ? ?if (p.test(title)) return ar[i];
 ? ? ?}
 ? ? ?return "";
 ? ?}
 ? ?$(function () {
 ? ? ?if (_pm) chk = /\privmsg/.test(location.href);
 ? ? ?if (/\/post/.test(location.href) || chk) {
 ? ? ? ? ?$(toMenu(prefixes)).insertBefore("input[name=subject][type=text]");
 ? ? ? ? ?var mw = $("#prefix").width() + 5;
 ? ? ? ? ?$("input[name=subject]").css("width", $("input[name=subject]").width() - mw);
 ? ? ? ? ?var t = $("[name=subject]").val();
 ? ? ? ? ?var cur = checkpre(prefixes, t);
 ? ? ? ? ?if (cur != "") {
 ? ? ? ? ? ?$("[value=" + cur + "]").attr("selected", "selected");
 ? ? ? ? ? ?$("input[name=subject]").val(t.replace('[' + cur + ']', '').trim());
 ? ? ? ? ?}
 ? ? ? ? ?$("input[name=post]").click(function () {
 ? ? ? ? ? ?var sub = $("input[name=subject]").val().trim();
 ? ? ? ? ? ?if (sub != "" && $("#prefix").val() != "")
 ? ? ? ? ? ? ? ?$("input[name=subject]").val("[" + $("#prefix").val() + "]" + sub);
 ? ? ? ? ?});
 ? ? ?}
 ? ?});

Associated CSS：

Code:

 /* Topic prefix */
.prefijo {
 ?background: #1fc4ed;
 ?color: #FFF;
 ?border-radius: 10px;
 ?display: inline-table!important;
 ?line-height: 20px;
 ?padding: 4px;
 ?font-weight: 700!important;
 ?font-size: 16px!important;
 ?margin: 0.5px;
 ?font-family: arial;

/* base prefix 分類 */
.topic-prefix1 {
 ?color:#FFF;
 ?font-weight:bold;
 ?background:#4dc9db;
 ?box-shadow:0 5px 3px rgba(255,255,255, 0.25) inset, 0 -5px 3px rgba(0,0,0, 0.1) inset;
 ?padding:1px 6px;
 ?border-radius:14px;
}
 
.topic-prefix2 {
 ?color:#FFF;
 ?font-weight:bold;
 ?background:#3c83d6;
 ?box-shadow:0 5px 3px rgba(255,255,255, 0.25) inset, 0 -5px 3px rgba(0,0,0, 0.1) inset;
 ?padding:1px 6px;
 ?border-radius:14px;
}
 
.topic-prefix3 {
 ?color:#FFF;
 ?font-weight:bold;
 ?background:#f274e4;
 ?box-shadow:0 5px 3px rgba(255,255,255, 0.25) inset, 0 -5px 3px rgba(0,0,0, 0.1) inset;
 ?padding:1px 6px;
 ?border-radius:14px;
}
 
.topic-prefix4 {
 ?color:#FFF;
 ?font-weight:bold;
 ?background:#d9559b;
 ?box-shadow:0 5px 3px rgba(255,255,255, 0.25) inset, 0 -5px 3px rgba(0,0,0, 0.1) inset;
 ?padding:1px 6px;
 ?border-radius:14px;
}

.topic-prefix5 {
 ?color:#FFF;
 ?font-weight:bold;
 ?background:#9f5ed1;
 ?box-shadow:0 5px 3px rgba(255,255,255, 0.25) inset, 0 -5px 3px rgba(0,0,0, 0.1) inset;
 ?padding:1px 6px;
 ?border-radius:14px;
}
 
/* unique prefixes */
.topic-prefix.prefix-anime {
 ?background:#16B;
}
.topic-prefix.prefix-manga {
 ?background:#16B;
}
 
.topictitle{
line-height:20px;
}
.topictitle>span{
display:inline-table;
}

Maybe the code conflicts with the mobile version, I'm not sure
Thank you very much for your help!

Prefix?

Thanks, @SLGray

The front part of the topic.
（https://help.forumotion.com/t134270-buttons-to-add-prefixes-in-topic-titles#903824）

（https://help.forumotion.com/t144025-change-the-prefixes-by-images?highlight=prefixes）

Thanks.  Could you post a screenshot form a mobile device?

Hi,@SLGray

A member responded to me that after he uses the mobile version to edit the theme, the prefix will disappear.
(Others who use the computer version to edit and publish have no such problem)

So the member can see them, but if he/she edits the topic and send it, the prefix disappears?

SLGray wrote:So the member can see them, but if he/she edits the topic and send it, the prefix disappears?

Yes, if you edit and publish using the mobile version, it will disappear
(I have to use the computer version to help him reselect [prefix] and publish it before it appears again)

And there is no such problem in replying, only in editing topics.

Good afternoon!

1) I see an error in your code:

this line

Code:

var p = new RegExp("\" + ar[i], "g");

replace by this:

Code:

var p = new RegExp("\"" + ar[i], "g");

2) Concerning your problem:

Note this part of the code:

Code:

$("input[name=post]").click(function () {
            var sub = $("input[name=subject]").val().trim();
            if (sub != "" && $("#prefix").val() != "")
                $("input[name=subject]").val("[" + $("#prefix").val() + "]" + sub);
          });

On the PC, the "Send" button is implemented via an input element. In the mobile version of ModernBB, the "Send" button is implemented via button.





Because of this, the code can't find the "Send" button on the mobile version and fails.

Try adding handling for the situation when the button is implemented via the button element:

Full code:

Code:

var prefixes = ["原创","原創","代发","授权","授權","无授","無授"];
  var _pm = false;
    var chk = false;
    function toMenu(a) {
      var htmlpre = '<select style="margin-right:5px" id="prefix" size="1"><option value="">(None)</option>';
      for (i in a)
      htmlpre += '<option value="' + a[i] + '">' + a[i] + '</option>';
      htmlpre += '</select>';
      return htmlpre;
    }
    function checkpre(ar, input) {
      for (i in ar) {
var p = new RegExp("\"" + ar[i], "g");

          var title = input.substr(0, input.indexOf(']'));
          if (p.test(title)) return ar[i];
      }
      return "";
    }
    $(function () {
      if (_pm) chk = /\privmsg/.test(location.href);
      if (/\/post/.test(location.href) || chk) {
          $(toMenu(prefixes)).insertBefore("input[name=subject][type=text]");
          var mw = $("#prefix").width() + 5;
          $("input[name=subject]").css("width", $("input[name=subject]").width() - mw);
          var t = $("[name=subject]").val();
          var cur = checkpre(prefixes, t);
          if (cur != "") {
            $("[value=" + cur + "]").attr("selected", "selected");
            $("input[name=subject]").val(t.replace('[' + cur + ']', '').trim());
          }
        if ($("input[name=post]")) {
          $("input[name=post]").click(function () {
            var sub = $("input[name=subject]").val().trim();
            if (sub != "" && $("#prefix").val() != "")
                $("input[name=subject]").val("[" + $("#prefix").val() + "]" + sub);
          });
        } else if ($("button[name=post]")) {
            $("button[name=post]").click(function () {
            var sub = $("input[name=subject]").val().trim();
            if (sub != "" && $("#prefix").val() != "")
                $("input[name=subject]").val("[" + $("#prefix").val() + "]" + sub);
          });
      }
                 
      }
    });

Thanks, @Razor12345

Oh, that’s how the problem came about.

After I updated the code and tested it with the mobile phone board, the problem was successfully solved!
How amazing!
Thank you both very much for coming out and helping me answer this question.@Razor12345、@SLGray

You are welcome!

Problem solved & topic archived. Please read our forum rules: ESF General Rules