[Tutorial] Cite Specific Text

Go down

[Tutorial] Cite Specific Text

Post by Daemon on July 15th 2017, 8:43 pm

With this code you can mention a specific text of a post.

Image:


Create a new JS code with the following content:
Code:
/*
 *  Application: Cite specific text
 *  Date: 2016-09-08
 *  Version: 1.109052018
 *  Copyright (c) Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
(function() {
    quote = {
        initialize: function() {
            $(function() {
                if (!$.sceditor && _userdata.session_logged_in < 1) return;
                quote.setupQuote();
            });
        },
        setupQuote: function() {
            $("head").append(
            '<style type="text/css">' +
            '.quote-box {' +
            '  z-index: 999;' +
            '  margin-top: 16px;' +
            '  position: absolute;' +
            '  display: none;' +
            '  background-color: rgba(70,70,70,0.6);' +
            '  padding: 4px;' +
            '  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
            '  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
            '  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7 );' +
            '  -moz-border-radius: 4px;' +
            '  -webkit-border-radius: 4px;' +
            '  border-radius: 4px;' +
            '}' +
            '.quote-box > div {' +
            '  background-color: #f7f7f7;' +
            '  padding: 5px;' +
            '}' +
            '.quote-box > input {' +
            '  margin: 0 3px;' +
            '  cursor: pointer;' +
            '  border-radius: 3px;' +
            '  -webkit-border-radius: 3px;' +
            '  -moz-border-radius: 3px;' +
            '}' +
            '.quote-box > .quote-stem {' +
            '  border-color: transparent transparent #000;' +
            '  opacity: 0.3;' +
            '  border-style: solid;' +
            '  border-width: 15px;' +
            '  display: block;' +
            '  height: 0;' +
            '  left: 5px;' +
            '  position: absolute;' +
            '  top: -30px;' +
            '  width: 0;' +
            '  z-index: 3;' +
            '}' +
            '</style>'
            );
           
            var el = $("<div>", {
                class: "quote-box"
            }).append(
            '<div>' +
            '    <input type="button" onclick="quote.quoteText()" value="Quote">' +
            '    <input type="button" onclick="quote.mention()" value="@Mention">' +
            '    <input type="button" onclick="quote.hideQuote()" value="×">' +
            '</div>' +
            '<span class="quote-stem"></span>'
            );

            $(el).appendTo("body");

            var selectedTxt, author;
            // VERSIONS:                PUNB    || PHPBB3 AND MODERNBB || PHPBB2 || INVISION
            $(document).on("mouseup", ".post-entry, .content, .postbody, .post-entry", function(e) {
                var arr = {
                    'user': [],
                    'text': []
                };
                // VERSIONS:                                          PUNB  ||              PHPBB3              ||              MODERNBB            ||                  PHPBB2                ||        INVISION
                author = $(this).parents("[class*='post--']").find(".username, .author > a, .postprofile strong > a, .postprofile-name, .comment-author, .name, .blog_comment-title > a[href^='/u'], .postprofile-head > a").text(),
                selectedTxt = quote.getSelectionText();
                if(selectedTxt) {
                    $(".quote-box").show().css({top: e.pageY + "px", left: e.pageX + "px"});
                    arr.user.push(author);
                    arr.text.push(selectedTxt);
                    sessionStorage.setItem("quote-box", JSON.stringify(arr));
                } else {
                    quote.hideQuote();
                }
            });
        },
        quoteText: function() {
            var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
            if(stored) {
                $("textarea").sceditor("instance").insert("[quote='" + stored.user + "']" + stored.text + "[/quote]");
                quote.hideQuote();
            }
        },
        mention: function() {
            var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
            if(stored) {
                $("textarea").sceditor("instance").insert("@" + stored.user);
                quote.hideQuote();
            }
        },
        getSelectionText: function() {
            var text;
            if (window.getSelection) {
                text = window.getSelection().toString();
            } else if (document.selection && document.selection.type != "Control") {
                text = document.selection.createRange().text;
            }
            return text;
        },
        hideQuote: function() {
            $(".quote-box").hide();
        }
    };
    quote.initialize()
})();




Last edited by Daemon on June 3rd 2018, 3:58 pm; edited 3 times in total
avatar
Daemon
Forumember

Posts : 100
Reputation : 79
Language : Português

Back to top Go down

Re: [Tutorial] Cite Specific Text

Post by Draxion on July 15th 2017, 9:17 pm

I can confirm this works well on phpbb3. Smile


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2140
Reputation : 273
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: [Tutorial] Cite Specific Text

Post by SLGray on July 16th 2017, 5:27 am

I can confirm it works in #ModernBB .


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43469
Reputation : 3086
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: [Tutorial] Cite Specific Text

Post by Daemon on May 10th 2018, 1:08 am

The code has been fully updated! Any problems, please comment below...
avatar
Daemon
Forumember

Posts : 100
Reputation : 79
Language : Português

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum