quattro: added editor buttons to comments
This commit is contained in:
Tobias Diekershoff
@@ -11,13 +11,42 @@
|
||||
<a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
|
||||
</div>
|
||||
<div class="comment-edit-photo-end"></div>
|
||||
<ul class="comment-edit-bb-$id">
|
||||
<li><a class="editicon boldbb shadow"
|
||||
style="cursor: pointer;" title="$edbold"
|
||||
onclick="insertFormatting('$comment','b', $id);"></a></li>
|
||||
<li><a class="editicon italicbb shadow"
|
||||
style="cursor: pointer;" title="$editalic"
|
||||
onclick="insertFormatting('$comment','i', $id);"></a></li>
|
||||
<li><a class="editicon underlinebb shadow"
|
||||
style="cursor: pointer;" title="$eduline"
|
||||
onclick="insertFormatting('$comment','u', $id);"></a></li>
|
||||
<li><a class="editicon quotebb shadow"
|
||||
style="cursor: pointer;" title="$edquote"
|
||||
onclick="insertFormatting('$comment','quote', $id);"></a></li>
|
||||
<li><a class="editicon codebb shadow"
|
||||
style="cursor: pointer;" title="$edcode"
|
||||
onclick="insertFormatting('$comment','code', $id);"></a></li>
|
||||
<li><a class="editicon imagebb shadow"
|
||||
style="cursor: pointer;" title="$edimg"
|
||||
onclick="insertFormatting('$comment','img', $id);"></a></li>
|
||||
<li><a class="editicon urlbb shadow"
|
||||
style="cursor: pointer;" title="$edurl"
|
||||
onclick="insertFormatting('$comment','url', $id);"></a></li>
|
||||
<li><a class="editicon videobb shadow"
|
||||
style="cursor: pointer;" title="$edvideo"
|
||||
onclick="insertFormatting('$comment','video', $id);"></a></li>
|
||||
</ul>
|
||||
<div class="comment-edit-bb-end"></div>
|
||||
<textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);cmtBbOpen($id);" onBlur="commentClose(this,$id);" >$comment</textarea>
|
||||
{{ if $qcomment }}
|
||||
{{ for $qcomment as $qc }}
|
||||
<span class="fakelink qcomment" onclick="commentInsert(this,$id); return false;" >$qc</span>
|
||||
|
||||
<select id="qcomment-select-$id" name="qcomment-$id" class="qcomment" onchange="qCommentInsert(this,$id);" >
|
||||
<option value=""></option>
|
||||
{{ for $qcomment as $qc }}
|
||||
<option value="$qc">$qc</option>
|
||||
{{ endfor }}
|
||||
</select>
|
||||
{{ endif }}
|
||||
<textarea id="comment-edit-text-$id" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,$id);" onBlur="commentClose(this,$id);" >$comment</textarea>
|
||||
|
||||
<div class="comment-edit-text-end"></div>
|
||||
<div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-$id" style="display: none;" >
|
||||
|
||||
@@ -1734,3 +1734,105 @@ footer {
|
||||
#adminpage .selectall {
|
||||
text-align: right;
|
||||
}
|
||||
/* edit buttons for comments */
|
||||
.icon.dim {
|
||||
opacity: 0.3;
|
||||
filter: alpha(opacity=30);
|
||||
}
|
||||
[class^="comment-edit-bb"] {
|
||||
list-style: none;
|
||||
display: none;
|
||||
margin: 0px 0 0px 60px;
|
||||
width: 75%;
|
||||
}
|
||||
[class^="comment-edit-bb"] > li {
|
||||
display: inline-block;
|
||||
margin: 10px 10px 0 0;
|
||||
visibility: none;
|
||||
}
|
||||
[class^="comment-edit-bb-end"] {
|
||||
clear: both;
|
||||
}
|
||||
.editicon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(bbedit.png);
|
||||
text-decoration: none;
|
||||
}
|
||||
.editicon :hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.boldbb {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
.boldbb:hover {
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
.italicbb {
|
||||
background-position: -16px 0px;
|
||||
}
|
||||
.italicbb:hover {
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
.underlinebb {
|
||||
background-position: -32px 0px;
|
||||
}
|
||||
.underlinebb:hover {
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
.quotebb {
|
||||
background-position: -48px 0px;
|
||||
}
|
||||
.quotebb:hover {
|
||||
background-position: -48px -16px;
|
||||
}
|
||||
.codebb {
|
||||
background-position: -64px 0px;
|
||||
}
|
||||
.codebb:hover {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
.imagebb {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
.imagebb:hover {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
.urlbb {
|
||||
background-position: -96px 0px;
|
||||
}
|
||||
.urlbb:hover {
|
||||
background-position: -96px -16px;
|
||||
}
|
||||
.videobb {
|
||||
background-position: -112px 0px;
|
||||
}
|
||||
.videobb:hover {
|
||||
background-position: -112px -16px;
|
||||
}
|
||||
.attachtype {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 23px;
|
||||
float: left;
|
||||
background-image: url('../../../images/content-types.png');
|
||||
}
|
||||
.body-attach {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.type-video {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
.type-image {
|
||||
background-position: -20px 0px;
|
||||
}
|
||||
.type-audio {
|
||||
background-position: -40px 0px;
|
||||
}
|
||||
.type-text {
|
||||
background-position: -60px 0px;
|
||||
}
|
||||
.type-unkn {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
|
||||
@@ -1734,3 +1734,105 @@ footer {
|
||||
#adminpage .selectall {
|
||||
text-align: right;
|
||||
}
|
||||
/* edit buttons for comments */
|
||||
.icon.dim {
|
||||
opacity: 0.3;
|
||||
filter: alpha(opacity=30);
|
||||
}
|
||||
[class^="comment-edit-bb"] {
|
||||
list-style: none;
|
||||
display: none;
|
||||
margin: 0px 0 0px 60px;
|
||||
width: 75%;
|
||||
}
|
||||
[class^="comment-edit-bb"] > li {
|
||||
display: inline-block;
|
||||
margin: 10px 10px 0 0;
|
||||
visibility: none;
|
||||
}
|
||||
[class^="comment-edit-bb-end"] {
|
||||
clear: both;
|
||||
}
|
||||
.editicon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(bbedit.png);
|
||||
text-decoration: none;
|
||||
}
|
||||
.editicon :hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.boldbb {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
.boldbb:hover {
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
.italicbb {
|
||||
background-position: -16px 0px;
|
||||
}
|
||||
.italicbb:hover {
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
.underlinebb {
|
||||
background-position: -32px 0px;
|
||||
}
|
||||
.underlinebb:hover {
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
.quotebb {
|
||||
background-position: -48px 0px;
|
||||
}
|
||||
.quotebb:hover {
|
||||
background-position: -48px -16px;
|
||||
}
|
||||
.codebb {
|
||||
background-position: -64px 0px;
|
||||
}
|
||||
.codebb:hover {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
.imagebb {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
.imagebb:hover {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
.urlbb {
|
||||
background-position: -96px 0px;
|
||||
}
|
||||
.urlbb:hover {
|
||||
background-position: -96px -16px;
|
||||
}
|
||||
.videobb {
|
||||
background-position: -112px 0px;
|
||||
}
|
||||
.videobb:hover {
|
||||
background-position: -112px -16px;
|
||||
}
|
||||
.attachtype {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 23px;
|
||||
float: left;
|
||||
background-image: url('../../../images/content-types.png');
|
||||
}
|
||||
.body-attach {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.type-video {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
.type-image {
|
||||
background-position: -20px 0px;
|
||||
}
|
||||
.type-audio {
|
||||
background-position: -40px 0px;
|
||||
}
|
||||
.type-text {
|
||||
background-position: -60px 0px;
|
||||
}
|
||||
.type-unkn {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
|
||||
@@ -1225,3 +1225,61 @@ footer { height: 100px; display: table-row; }
|
||||
}
|
||||
.selectall { text-align: right; }
|
||||
}
|
||||
|
||||
/* edit buttons for comments */
|
||||
|
||||
.icon.dim { opacity: 0.3;filter:alpha(opacity=30); }
|
||||
[class^="comment-edit-bb"] {
|
||||
list-style: none;
|
||||
display: none;
|
||||
margin: 0px 0 0px 60px;
|
||||
width: 75%;
|
||||
}
|
||||
[class^="comment-edit-bb"] > li {
|
||||
display: inline-block;
|
||||
margin: 10px 10px 0 0;
|
||||
visibility: none;
|
||||
}
|
||||
[class^="comment-edit-bb-end"] {
|
||||
clear: both;
|
||||
}
|
||||
.editicon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(bbedit.png);
|
||||
text-decoration: none;
|
||||
:hover {background-color: #ccc;}
|
||||
}
|
||||
.boldbb { background-position: 0px 0px; }
|
||||
.boldbb:hover { background-position: 0px -16px; }
|
||||
.italicbb { background-position: -16px 0px; }
|
||||
.italicbb:hover { background-position: -16px -16px; }
|
||||
.underlinebb { background-position: -32px 0px; }
|
||||
.underlinebb:hover { background-position: -32px -16px; }
|
||||
.quotebb { background-position: -48px 0px; }
|
||||
.quotebb:hover { background-position: -48px -16px; }
|
||||
.codebb { background-position: -64px 0px; }
|
||||
.codebb:hover { background-position: -64px -16px; }
|
||||
.imagebb { background-position: -80px 0px; }
|
||||
.imagebb:hover { background-position: -80px -16px; }
|
||||
.urlbb { background-position: -96px 0px; }
|
||||
.urlbb:hover { background-position: -96px -16px; }
|
||||
.videobb { background-position: -112px 0px; }
|
||||
.videobb:hover { background-position: -112px -16px; }
|
||||
|
||||
.attachtype {
|
||||
display: block; width: 20px; height: 23px;
|
||||
float: left;
|
||||
background-image: url('../../../images/content-types.png');
|
||||
}
|
||||
|
||||
.body-attach {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.type-video { background-position: 0px 0px; }
|
||||
.type-image { background-position: -20px 0px; }
|
||||
.type-audio { background-position: -40px 0px; }
|
||||
.type-text { background-position: -60px 0px; }
|
||||
.type-unkn { background-position: -80px 0px; }
|
||||
|
||||
@@ -7,6 +7,89 @@
|
||||
* Maintainer: Tobias <https://diekershoff.homeunix.net/friendika/profile/tobias>
|
||||
*/
|
||||
|
||||
$a->theme_info = array();
|
||||
|
||||
$a->theme_info = array();
|
||||
|
||||
function quattro_init(&$a) {
|
||||
$a->page['htmlhead'] .= <<< EOT
|
||||
<script>
|
||||
function insertFormatting(comment,BBcode,id) {
|
||||
|
||||
var tmpStr = $("#comment-edit-text-" + id).val();
|
||||
if(tmpStr == comment) {
|
||||
tmpStr = "";
|
||||
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
|
||||
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
|
||||
openMenu("comment-edit-submit-wrapper-" + id);
|
||||
$("#comment-edit-text-" + id).val(tmpStr);
|
||||
}
|
||||
|
||||
textarea = document.getElementById("comment-edit-text-" +id);
|
||||
if (document.selection) {
|
||||
textarea.focus();
|
||||
selected = document.selection.createRange();
|
||||
if (BBcode == "url"){
|
||||
selected.text = "["+BBcode+"]" + "http://" + selected.text + "[/"+BBcode+"]";
|
||||
} else
|
||||
selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
|
||||
} else if (textarea.selectionStart || textarea.selectionStart == "0") {
|
||||
var start = textarea.selectionStart;
|
||||
var end = textarea.selectionEnd;
|
||||
if (BBcode == "url"){
|
||||
textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
|
||||
} else
|
||||
textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function cmtBbOpen(id) {
|
||||
$(".comment-edit-bb-" + id).show();
|
||||
}
|
||||
function cmtBbClose(comment, id) {
|
||||
$(".comment-edit-bb-" + id).hide();
|
||||
}
|
||||
$(document).ready(function() {
|
||||
|
||||
$('html').click(function() { $("#nav-notifications-menu" ).hide(); });
|
||||
|
||||
$('.group-edit-icon').hover(
|
||||
function() {
|
||||
$(this).addClass('icon'); $(this).removeClass('iconspacer');},
|
||||
function() {
|
||||
$(this).removeClass('icon'); $(this).addClass('iconspacer');}
|
||||
);
|
||||
|
||||
$('.sidebar-group-element').hover(
|
||||
function() {
|
||||
id = $(this).attr('id');
|
||||
$('#edit-' + id).addClass('icon'); $('#edit-' + id).removeClass('iconspacer');},
|
||||
|
||||
function() {
|
||||
id = $(this).attr('id');
|
||||
$('#edit-' + id).removeClass('icon');$('#edit-' + id).addClass('iconspacer');}
|
||||
);
|
||||
|
||||
|
||||
$('.savedsearchdrop').hover(
|
||||
function() {
|
||||
$(this).addClass('drop'); $(this).addClass('icon'); $(this).removeClass('iconspacer');},
|
||||
function() {
|
||||
$(this).removeClass('drop'); $(this).removeClass('icon'); $(this).addClass('iconspacer');}
|
||||
);
|
||||
|
||||
$('.savedsearchterm').hover(
|
||||
function() {
|
||||
id = $(this).attr('id');
|
||||
$('#drop-' + id).addClass('icon'); $('#drop-' + id).addClass('drophide'); $('#drop-' + id).removeClass('iconspacer');},
|
||||
|
||||
function() {
|
||||
id = $(this).attr('id');
|
||||
$('#drop-' + id).removeClass('icon');$('#drop-' + id).removeClass('drophide'); $('#drop-' + id).addClass('iconspacer');}
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
EOT;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user