Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Quote selected text



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Daemon


Punbb Rookie
Punbb Rookie


Tutorial: Quote selected text

Made by Daemon - 2015/01/14


--> Tutorials, tips and tricks <--
Quote selected text



- JavaScript
Placement In the topic

PunBB & Invision:
Code:
[panda=js]/* Quote selected text
Created on 14/01/2015
Made by - Daemon */
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() {
if(_userdata["session_logged_in"] === 1) {
  var newEl = document.createElement('span');
  newEl.className = 'quote_selection';
  newEl.innerHTML = 'Quote';
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.quote_selection {' +
                    '  background: #f0f0f0;' +
                    '  color: #333;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '  display: none;' +
                    '  -webkit-touch-callout: none;' +
                    '  -webkit-user-select: none;' +
                    '  -khtml-user-select: none;' +
                    '  -moz-user-select: none;' +
                    '  -ms-user-select: none;' +
                    '  user-select: none;' +
                    '  padding: 2px 8px;' +
                    '  position: absolute;' +
                    '  border: 1px solid #ddd;' +
                    '  text-shadow: rgba(255,255,255,0.55) 0px 1px 0px;' +
                    '  font-size: 11px;' +
                    '  -webkit-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '  -moz-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '  box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '}';
  document.body.appendChild(style);
  document.body.appendChild(newEl);
  var x = document.querySelectorAll('.post-entry');
  for (var i = 0; i < x.length; i++) {
        x[i].addEventListener('mouseup', function(e) {
            var selectedTxt = getSelectionText();
            if (selectedTxt) {
            fadeIn(newEl);
            newEl.style.top = e.pageY + 'px';
            newEl.style.left = e.pageX + 'px';
            var author = this.parentNode.firstChild.firstChild.firstChild.textContent;
            newEl.onclick = function() {
              $('#text_editor_textarea').sceditor('instance').insertText('[quote="' + author + '"]' + getSelectionText() + '[/quote]');
              newEl.style.display = 'none';
            };
            } else {newEl.style.display = 'none';}
        });
  }
}
});

PhpBB3:
Code:
[panda=js]/* Quote selected text
Created on 14/01/2015
Made by - Daemon */
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() {
if(_userdata["session_logged_in"] === 1) {
  var newEl = document.createElement('span');
  newEl.className = 'quote_selection';
  newEl.innerHTML = 'Quote';
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.quote_selection {' +
                    '  background: #f0f0f0;' +
                    '  color: #333;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '  display: none;' +
                    '  -webkit-touch-callout: none;' +
                    '  -webkit-user-select: none;' +
                    '  -khtml-user-select: none;' +
                    '  -moz-user-select: none;' +
                    '  -ms-user-select: none;' +
                    '  user-select: none;' +
                    '  padding: 2px 8px;' +
                    '  position: absolute;' +
                    '  border: 1px solid #ddd;' +
                    '  text-shadow: rgba(255,255,255,0.55) 0px 1px 0px;' +
                    '  font-size: 11px;' +
                    '  -webkit-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '  -moz-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '  box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '}';
  document.body.appendChild(style);
  document.body.appendChild(newEl);
  var x = document.querySelectorAll('.content');
  for (var i = 0; i < x.length; i++) {
        x[i].addEventListener('mouseup', function(e) {
            var selectedTxt = getSelectionText();
            if (selectedTxt) {
            fadeIn(newEl);
            newEl.style.top = e.pageY + 'px';
            newEl.style.left = e.pageX + 'px';
            var author = this.parentNode.parentNode.querySelector('.postprofile').querySelector('strong[style]').textContent;
            newEl.onclick = function() {
              $('#text_editor_textarea').sceditor('instance').insertText('[quote="' + author + '"]' + getSelectionText() + '[/quote]');
              newEl.style.display = 'none';
            };
            } else {newEl.style.display = 'none';}
        });
  }
}
});

PhpBB2:
Code:
[panda=js]/* Quote selected text
Created on 14/01/2015
Made by - Daemon */
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() {
if(_userdata["session_logged_in"] === 1) {
  var newEl = document.createElement('span');
  newEl.className = 'quote_selection';
  newEl.innerHTML = 'Quote';
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.quote_selection {' +
                    '  background: #f0f0f0;' +
                    '  color: #333;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '  display: none;' +
                    '  -webkit-touch-callout: none;' +
                    '  -webkit-user-select: none;' +
                    '  -khtml-user-select: none;' +
                    '  -moz-user-select: none;' +
                    '  -ms-user-select: none;' +
                    '  user-select: none;' +
                    '  padding: 2px 8px;' +
                    '  position: absolute;' +
                    '  border: 1px solid #ddd;' +
                    '  text-shadow: rgba(255,255,255,0.55) 0px 1px 0px;' +
                    '  font-size: 11px;' +
                    '  -webkit-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '  -moz-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '  box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;' +
                    '}';
  document.body.appendChild(style);
  document.body.appendChild(newEl);
  var x = document.querySelectorAll('td[class*="row"] table');
  for (var i = 0; i < x.length; i++) {
        x[i].addEventListener('mouseup', function(e) {
            var selectedTxt = getSelectionText();
            if (selectedTxt) {
            fadeIn(newEl);
            newEl.style.top = e.pageY + 'px';
            newEl.style.left = e.pageX + 'px';
            var author = this.parentNode.parentNode.querySelector('.name').textContent;
            newEl.onclick = function() {
              $('#text_editor_textarea').sceditor('instance').insertText('[quote="' + author + '"]' + getSelectionText() + '[/quote]');
              newEl.style.display = 'none';
            };
            } else {newEl.style.display = 'none';}
        });
  }
}
});


- Preview





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Quote selected text

Powered by PunBB
Currently 0 users have thanked Daemon for this post:

2
Offline

  SarkZKalie

avatar
Punbb Rookie
Punbb Rookie
Sounds great, man! :3

Powered by PunBB
Currently 0 users have thanked SarkZKalie for this post:

3
Offline

  Shadow

avatar
Administrator
Administrator
[sucesso="Tutorial accepted"]The tutorial has been accepted. [/sucesso]



Forum Administrator, Coolyou,
Due to the volume of PMs I receive, I do not provide support via PM.
We have community forums for most support requests. If it's truly confidential, please do PM me.

Useful links:
-> Before asking question,  please use a Search option.
-> If you want to check our staff members click here.
->  Forum rules, this is a MUST READ thread.
->  FAQ (Frenquently asked questions)

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

4
Offline

  grey24

avatar
Newbie
Newbie
Nice tutorial. Although, I'm having problems in getting the username on the quote. Please see preview below:


Powered by PunBB
Currently 0 users have thanked grey24 for this post:

5
Offline

  grey24

avatar
Newbie
Newbie
Can I request an update on this feature? It no longer work after forumotion maintenance.

Powered by PunBB
Currently 0 users have thanked grey24 for this post:

6
Offline

  zzlasperpen

avatar
Newbie
Newbie
thank you good coding

Powered by PunBB
Currently 0 users have thanked zzlasperpen for this post:

7
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

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