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

Board Index » Forumotion » Tutorials  »  [OLD] Tutorials & Codes »[Javascript] Quote selected text

Foto

[Javascript] Quote selected text

by ,


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

1
Offline

  Daemon

avatar
Punbb Rookie
Punbb Rookie
2015-01-15, 21:55

[Javascript] Quote selected text Alerte10
Tutorial: Quote selected text

Made by Daemon - 2015/01/14


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



1º - 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';}
        });
  }
}
});


2º - Preview
[Javascript] Quote selected text 7kmkAu0



© PunBB Design


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

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

2
Offline

  SarkZKalie

SarkZKalie
Punbb Rookie
Punbb Rookie
2015-01-16, 08:43
Sounds great, man! :3

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

3
Offline

  Shadow

Shadow
Administrator
Administrator
2015-01-16, 14:59
[sucesso="Tutorial accepted"]The tutorial has been accepted. [/sucesso]

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

4
Offline

  grey24

grey24
Newbie
Newbie
2015-07-20, 12:06
Nice tutorial. Although, I'm having problems in getting the username on the quote. Please see preview below:

[Javascript] Quote selected text Ne9WXJC

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

5
Offline

  grey24

grey24
Newbie
Newbie
2015-08-01, 12:10
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

zzlasperpen
Newbie
Newbie
2016-11-01, 05:21
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

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.