quattro: added editor buttons to comments
This commit is contained in:
parent
ca105f1c66
commit
b13c6ea9ad
5 changed files with 380 additions and 6 deletions
|
|
@ -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>
|
<a class="comment-edit-photo-link" href="$mylink" title="$mytitle"><img class="my-comment-photo" src="$myphoto" alt="$mytitle" title="$mytitle" /></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-edit-photo-end"></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 }}
|
{{ if $qcomment }}
|
||||||
|
<select id="qcomment-select-$id" name="qcomment-$id" class="qcomment" onchange="qCommentInsert(this,$id);" >
|
||||||
|
<option value=""></option>
|
||||||
{{ for $qcomment as $qc }}
|
{{ for $qcomment as $qc }}
|
||||||
<span class="fakelink qcomment" onclick="commentInsert(this,$id); return false;" >$qc</span>
|
<option value="$qc">$qc</option>
|
||||||
|
|
||||||
{{ endfor }}
|
{{ endfor }}
|
||||||
|
</select>
|
||||||
{{ endif }}
|
{{ 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-text-end"></div>
|
||||||
<div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-$id" style="display: none;" >
|
<div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-$id" style="display: none;" >
|
||||||
|
|
|
||||||
|
|
@ -1734,3 +1734,105 @@ footer {
|
||||||
#adminpage .selectall {
|
#adminpage .selectall {
|
||||||
text-align: right;
|
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 {
|
#adminpage .selectall {
|
||||||
text-align: right;
|
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; }
|
.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>
|
* 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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue