The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Tutorial] Mention Specific Text

View previous topic View next topic Go down

[Tutorial] Mention 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:
/*
 * Mention Specific Text
 * Version: 1.0
 * Author: Daemon
 * Att: 08/09/2016
 * See more in: http://help.forumotion.com
 */
document.addEventListener('DOMContentLoaded', function() {
if(_userdata.session_logged_in < 1) return;
  var newEl = document.createElement('div');
  newEl.className = 'quote_box';
  newEl.innerHTML =
  '<div>' +
  ' <input type="button" id="quote_selection" value="Quote">' +
  ' <input type="button" id="quote_mention" value="@Mention">' +
  ' <input type="button" onclick="hideBoxQuote()" value="×">' +
  '</div>' +
  '<span class="quote_stem"></span>';
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML =
  '.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_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;' +
  '}';

  document.body.appendChild(style);
  document.body.appendChild(newEl);

  var x = document.getElementsByClassName('postbody');
  var postbody;
  for(var i = 0; i < x.length; i++) {
      postbody = x[i];
      var selectedTxt, author;
      postbody.addEventListener('mouseup', function(e) {
            selectedTxt = getSelectionText();
            if(selectedTxt) {
              fadeIn(newEl);
              newEl.style.top = e.pageY + 'px';
              newEl.style.left = e.pageX + 'px';
              author = postbody.closest("[class*='post--']").querySelector('.username, .author > a, .postprofile > dl > dt strong').textContent;
              document.getElementById('quote_selection').onclick = function() {
                  $('#text_editor_textarea').sceditor('instance').insert('[quote="' + author + '"]' + getSelectionText() + '[/quote]');
                  hideBoxQuote();
              };
              document.getElementById('quote_mention').onclick = function() {
                  $('#text_editor_textarea').sceditor('instance').insert('@' + author);
                  hideBoxQuote();
              };
            } else {
              hideBoxQuote();
            }
      });
  }
});
function getSelectionText() {
    var text;
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != 'Control') {
        text = document.selection.createRange().text;
    }
    return text;
}

function fadeIn(newEl, display) {
  newEl.style.opacity = 0;
  newEl.style.display = display || 'inline';

  (function fade() {
    var val = parseFloat(newEl.style.opacity);
    if (!((val += .1) > 1)) {
      newEl.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}

function hideBoxQuote() {
  document.getElementsByClassName('quote_box')[0].style.display = 'none';
}
avatar
Daemon
Forumember

Posts : 51
Reputation : 27
Language : Português

Back to top Go down

Re: [Tutorial] Mention 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 : 1530
Reputation : 196
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: [Tutorial] Mention 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 : 39639
Reputation : 2666
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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