Does the PUP plugin support Simple Machines Forum version 2.1+

[Jailer]

Attention: No official support is provided at Community Help, this is for users helping each other. If you want official support go to chevereto.com/support

I'm having a bit of trouble getting the PUP plugin to work on my forum after uprading to SMF version 2.1.4. I've added the code to the files in the same location I did for 2.0.19 but the upload button is not displaying.

Has anyone been able to get this to work with SMF 2.1+ ? If so what did you do to get it working?

 

[Jailer]

I could really use some help getting this going, I'm not having any luck at all figuring this out.

 

[Rodolfo]

To support SMF 2 modify pup.js. Change this:

            smf: {
                settings: {
                    html:
                        ' <button %x title="%text" class="%bClass"><span class="%iClass">%iconSvg</span><span class="%tClass">%text</span></button> ',
                    css:
                        "%defaultCSS #bbcBox_message .%bClass{margin-right:1px;transition:none;color:%2;padding:0;width:23px;height:21px;border-radius:5px;background-color:%1}#bbcBox_message .%bClass:hover{background-color:%3}#bbcBox_message .%tClass{display:none}",
                    sibling: "#BBCBox_message_button_1_1,.quickReplyContent + div",
                    siblingPos: "before",
                    fitEditor: 1
                },
                palettes: {
                    default: ["#E7E7E7", "#333", "#B0C4D6", "#333"]
                },
                check: "smf_scripturl",
                getEditor: function () {
                    return smf_editorArray.length > 0
                        ? smf_editorArray[0].oTextHandle
                        : document.querySelector(".quickReplyContent textarea");
                }
            },

To this:

           smf2: {
                settings: {
                    html: ' <a %x class="%bClass sceditor-button" unselectable="on" title="%text"><div unselectable="on"><span class="%iClass">%iconSvg</span></div></a> ',
                    css:
                        ".%bClass>div{background:none;font-size:inherit;color:initial;}",
                    sibling: ".sceditor-button-image",
                    siblingPos: "after",
                    fitEditor: 1
                },
                palettes: {
                    default: ["#E7E7E7", "#333", "#B0C4D6", "#333"]
                },
                check: "smf_scripturl",
                getEditor: function () {
                    var editor = this.getEditorFn();
                    if (!editor) {
                        return null;
                    }
                    return editor;
                },
                getEditorFn: function () {
                    var editor = document.querySelector(".sceditor-container textarea");
                    if (editor) {
                        return editor;
                    }
                    return null;
                }
            },
            smf: {
                settings: {
                    html:
                        ' <button %x title="%text" class="%bClass"><span class="%iClass">%iconSvg</span><span class="%tClass">%text</span></button> ',
                    css:
                        "%defaultCSS #bbcBox_message .%bClass{margin-right:1px;transition:none;color:%2;padding:0;width:23px;height:21px;border-radius:5px;background-color:%1}#bbcBox_message .%bClass:hover{background-color:%3}#bbcBox_message .%tClass{display:none}",
                    sibling: "#BBCBox_message_button_1_1,.quickReplyContent + div",
                    siblingPos: "before",
                    fitEditor: 1
                },
                palettes: {
                    default: ["#E7E7E7", "#333", "#B0C4D6", "#333"]
                },
                check: "smf_scripturl",
                getEditor: function () {
                    return smf_editorArray.length > 0
                        ? smf_editorArray[0].oTextHandle
                        : document.querySelector(".quickReplyContent textarea");
                }
            },

Let me know how it works, just tested on a "Post reply" no idea on the other textareas.

 

[Jailer]

That did the trick! Shows up in the quick reply and post pages menu bar.

I know your time is very valuable and I can't thank you enough for taking the time to check into this for me.

 

[Jailer]

Ok new development to add to this. Took a while for this to show up since the pages were obviously browser cached.

Now on my current live SMF forum v2.0.19 the PUP stopped working today. Checked my sandbox testing area that is running SMF v2.1.4 and it was still working fine. Replaced the pup.js file with the original without the modified code above and the v2.0.19 started working again and the test site running the new SMF v2.1.4 stopped working. So there is obviously some sort of conflict where it won't work with both versions at the same time with the modified code. I checked the console in Firefox when opening a page with the missing PUP icon and there are no errors listed in the console.

In short, new pup.js works with new SMF version but not old version. Old pup.js works with old SMF version but new version.

If there is anything I can add to help diagnose what's going please let me know but you may want to hold off making this change as it will break the PUP function on older versions of SMF prior to 2.1.0.

Worst case scenario I can just add the modified code once I upgrade my live site to get things working again. Just not sure how much time you want to put into this since I know you talked about eliminating the PUP completely at one point.

 

[Rodolfo]

I need to ask you something odd, thing is that I need a "needle" to determine which SMF version is running. I need you to go to SMF and ask developers for a JS-way to determine if the browser is rendering SMF 1 or SMF 2. I usually do it picking at a symbol present in one but not another, but I was unable to easily detect a needle.

At this time I'm using this:

smf_scripturl

But that's present in both editions, I need a symbol present just in one.

 

[Jailer]

Got a post over there on their support forum, we will see if they respond. Sometimes they do, sometimes they don't. I posted it in the scripting section so hopefully even if a developer doesn't respond someone else will. There's a lot of very knowledgeable people that hang out on that forum.

 

[Jailer]

Here's a link to the thread. One of the former developers responded so maybe that helps? If not let me know and I'll dig in further.

https://www.simplemachines.org/community/index.php?topic=588159.0

 

[Rodolfo]

            smf2: { // 2.1
                settings: {
                    html: ' <a %x class="%bClass sceditor-button" unselectable="on" title="%text"><div unselectable="on"><span class="%iClass">%iconSvg</span></div></a> ',
                    css:
                        ".%bClass>div{background:none;font-size:inherit;color:initial;}",
                    sibling: ".sceditor-button-image",
                    siblingPos: "after",
                    fitEditor: 1
                },
                palettes: {
                    default: ["#E7E7E7", "#333", "#B0C4D6", "#333"]
                },
                check: "reqOverlayDiv",
                getEditor: function () {
                    var editor = this.getEditorFn();
                    if (!editor) {
                        return null;
                    }
                    return editor;
                },
                getEditorFn: function () {
                    var editor = document.querySelector(".sceditor-container textarea");
                    if (editor) {
                        return editor;
                    }
                    return null;
                }
            },
            smf: { // 2.0
                settings: {
                    html:
                        ' <button %x title="%text" class="%bClass"><span class="%iClass">%iconSvg</span><span class="%tClass">%text</span></button> ',
                    css:
                        "%defaultCSS #bbcBox_message .%bClass{margin-right:1px;transition:none;color:%2;padding:0;width:23px;height:21px;border-radius:5px;background-color:%1}#bbcBox_message .%bClass:hover{background-color:%3}#bbcBox_message .%tClass{display:none}",
                    sibling: "#BBCBox_message_button_1_1,.quickReplyContent + div",
                    siblingPos: "before",
                    fitEditor: 1
                },
                palettes: {
                    default: ["#E7E7E7", "#333", "#B0C4D6", "#333"]
                },
                check: "smf_scripturl",
                getEditor: function () {
                    return smf_editorArray.length > 0
                        ? smf_editorArray[0].oTextHandle
                        : document.querySelector(".quickReplyContent textarea");
                }
            },

 

[Jailer]

            smf2: { // 2.1
                settings: {
                    html: ' <a %x class="%bClass sceditor-button" unselectable="on" title="%text"><div unselectable="on"><span class="%iClass">%iconSvg</span></div></a> ',
                    css:
                        ".%bClass>div{background:none;font-size:inherit;color:initial;}",
                    sibling: ".sceditor-button-image",
                    siblingPos: "after",
                    fitEditor: 1
                },
                palettes: {
                    default: ["#E7E7E7", "#333", "#B0C4D6", "#333"]
                },
                check: "reqOverlayDiv",
                getEditor: function () {
                    var editor = this.getEditorFn();
                    if (!editor) {
                        return null;
                    }
                    return editor;
                },
                getEditorFn: function () {
                    var editor = document.querySelector(".sceditor-container textarea");
                    if (editor) {
                        return editor;
                    }
                    return null;
                }
            },
            smf: { // 2.0
                settings: {
                    html:
                        ' <button %x title="%text" class="%bClass"><span class="%iClass">%iconSvg</span><span class="%tClass">%text</span></button> ',
                    css:
                        "%defaultCSS #bbcBox_message .%bClass{margin-right:1px;transition:none;color:%2;padding:0;width:23px;height:21px;border-radius:5px;background-color:%1}#bbcBox_message .%bClass:hover{background-color:%3}#bbcBox_message .%tClass{display:none}",
                    sibling: "#BBCBox_message_button_1_1,.quickReplyContent + div",
                    siblingPos: "before",
                    fitEditor: 1
                },
                palettes: {
                    default: ["#E7E7E7", "#333", "#B0C4D6", "#333"]
                },
                check: "smf_scripturl",
                getEditor: function () {
                    return smf_editorArray.length > 0
                        ? smf_editorArray[0].oTextHandle
                        : document.querySelector(".quickReplyContent textarea");
                }
            },

I'm so sorry I didn't reply to this sooner. We got a new pup shortly after you posted this and I totally forgot about replying. Yellow lab and we call him the little yellow tornado.

I can confirm that this code is working well on SMF 2.1. I upgraded my forum so I don't have an instance of SMF 2.0 to test it out. Thanks for everything you do @Rodolfo. 👍