[smileybutton] Rework addon

- Add frio style
- Remove reference to removed tinymce editor
This commit is contained in:
Hypolite Petovan 2021-02-08 11:02:34 -05:00
parent ebdc1a753d
commit 4f698eb875
6 changed files with 161 additions and 68 deletions

View File

@ -2,36 +2,32 @@
/** /**
* Name: Smileybutton * Name: Smileybutton
* Description: Adds a smileybutton to the Inputbox * Description: Adds a smileybutton to the Inputbox
* Version: 0.2 * Version: 1.0
* Author: Johannes Schwab <https://friendica.jschwab.org/profile/ddorian> * Author: Johannes Schwab <https://friendica.jschwab.org/profile/ddorian>
* Maintainer: Hypolite Petovan <https://friendica.mrpetovan.com/profile/hypolite>
*/ */
use Friendica\Core\Hook; use Friendica\Core\Hook;
use Friendica\Core\Logger;
use Friendica\DI; use Friendica\DI;
function smileybutton_install() { function smileybutton_install()
{
//Register hooks //Register hooks
Hook::register('jot_tool', 'addon/smileybutton/smileybutton.php', 'show_button'); Hook::register('jot_tool', 'addon/smileybutton/smileybutton.php', 'smileybutton_jot_tool');
Logger::log("installed smileybutton");
} }
function show_button(Friendica\App $a, &$b) { function smileybutton_jot_tool(Friendica\App $a, &$b)
{
// Disable if theme is quattro // Disable if theme is quattro
// TODO add style for quattro // TODO add style for quattro
if ($a->getCurrentTheme() == 'quattro') if ($a->getCurrentTheme() == 'quattro') {
return; return;
}
// Disable for mobile because most mobiles have a smiley key for ther own // Disable for mobile because they have a smiley key of their own
if (DI::mode()->isMobile() || DI::mode()->isMobile()) if (DI::mode()->isMobile() || DI::mode()->isMobile()) {
return; return;
}
/**
*
* I have copied this from /include/text.php, removed doubles
* and escaped them.
*
*/
$texts = [ $texts = [
'&lt;3', '&lt;3',
@ -45,19 +41,18 @@ function show_button(Friendica\App $a, &$b) {
':-O', ':-O',
'\\\\o/', '\\\\o/',
'O_o', 'O_o',
":\'(", ':\'(',
":-!", ':-!',
":-/", ':-/',
":-[", ':-[',
"8-)", '8-)',
':beer', ':beer',
':coffee', ':coffee',
':facepalm', ':facepalm',
':like', ':like',
':dislike', ':dislike',
'~friendica', '~friendica',
'red#' 'red#',
]; ];
$icons = [ $icons = [
@ -87,42 +82,41 @@ function show_button(Friendica\App $a, &$b) {
]; ];
// Call hooks to get aditional smileies from other addons // Call hooks to get aditional smileies from other addons
$params = ['texts' => $texts, 'icons' => $icons, 'string' => ""]; //changed $params = ['texts' => $texts, 'icons' => $icons, 'string' => '']; //changed
Hook::callAll('smilie', $params); Hook::callAll('smilie', $params);
//Generate html for smiley list //Generate html for smiley list
$s = "<table class=\"smiley-preview\"><tr>\n\t"; $s = '<table class="smiley-preview"><tr>';
for($x = 0; $x < count($params['texts']); $x ++) { for ($x = 0; $x < count($params['texts']); $x++) {
$icon = $params['icons'][$x]; $icon = $params['icons'][$x];
$icon = str_replace('/>', 'onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')"/>', $icon); $s .= '<td onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')">' . $icon . '</td>';
$icon = str_replace('class="smiley"', 'class="smiley_preview"', $icon); if (($x + 1) % (sqrt(count($params['texts'])) + 1) == 0) {
$s .= "<td>" . $icon . "</td>"; $s .= '</tr><tr>';
if (($x+1) % (sqrt(count($params['texts']))+1) == 0) {
$s .= "</tr>\n\t<tr>";
} }
} }
$s .= "\t</tr></table>"; $s .= '</tr></table>';
//Add css to header //Add css to header
$css_file = 'addon/smileybutton/view/' . $a->getCurrentTheme() . '.css'; $css_file = 'addon/smileybutton/view/' . $a->getCurrentTheme() . '.css';
if (! file_exists($css_file)) if (!file_exists($css_file)) {
$css_file = 'addon/smileybutton/view/default.css'; $css_file = 'addon/smileybutton/view/default.css';
$css_url = DI::baseUrl()->get().'/'.$css_file; }
DI::page()['htmlhead'] .= '<link rel="stylesheet" type="text/css" href="'.$css_url.'" media="all" />'."\r\n";
DI::page()->registerStylesheet($css_file);
//Get the correct image for the theme //Get the correct image for the theme
$image = 'addon/smileybutton/view/' . $a->getCurrentTheme() . '.png'; $image = 'addon/smileybutton/view/' . $a->getCurrentTheme() . '.png';
if (! file_exists($image)) if (!file_exists($image)) {
$image = 'addon/smileybutton/view/default.png'; $image = 'addon/smileybutton/view/default.png';
$image_url = DI::baseUrl()->get().'/'.$image; }
$image_url = DI::baseUrl()->get() . '/' . $image;
//Add the hmtl and script to the page //Add the hmtl and script to the page
$b = <<< EOT $b = <<< EOT
<div id="profile-smiley-wrapper" style="display: block;" > <div id="profile-smiley-wrapper">
<img src="$image_url" class="smiley_button" onclick="toggle_smileybutton()" alt="smiley"> <button type="button" class="btn btn-link smiley_button" onclick="toggle_smileybutton()"><img src="$image_url" alt="smiley"></button>
<div id="smileybutton" style="display:none;"> <div id="smileybutton">
$s $s
</div> </div>
</div> </div>
@ -140,18 +134,11 @@ function show_button(Friendica\App $a, &$b) {
} }
function smileybutton_addsmiley(text) { function smileybutton_addsmiley(text) {
if(plaintext == "none") {
var v = $("#profile-jot-text").val(); var v = $("#profile-jot-text").val();
v = v + text; v = v + text;
$("#profile-jot-text").val(v); $("#profile-jot-text").val(v).focus();
$("#profile-jot-text").focus();
} else {
var v = tinymce.activeEditor.getContent();
v = v + text;
tinymce.activeEditor.setContent(v);
tinymce.activeEditor.focus();
}
} }
</script> </script>
EOT; EOT;
} }

View File

@ -1,9 +1,17 @@
img.smiley_button { #profile-smiley-wrapper {
display: block;
}
#smileybutton {
display: none;
}
.smiley_button > img {
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
img.smiley_preview { table.smiley-preview img.smiley {
max-height: 25px; max-height: 25px;
max-width: 25px; max-width: 25px;
} }
@ -11,3 +19,7 @@ img.smiley_preview {
table.smiley-preview { table.smiley-preview {
border: 1px solid #AAAAAA; border: 1px solid #AAAAAA;
} }
table.smiley-preview td {
cursor: pointer;
}

View File

@ -1,14 +1,26 @@
img.smiley_button { #profile-smiley-wrapper {
display: block;
}
#smileybutton {
display: none;
}
.smiley_button {
height: 18px; height: 18px;
width: 18px; width: 18px;
position: relative; position: relative;
left: 285px; left: 285px;
top: -45px; top: -45px;
padding: 0;
border: 0;
background: none;
} }
img.smiley_preview { table.smiley-preview img.smiley {
max-height: 25px; max-height: 25px;
max-width: 25px; max-width: 25px;
cursor: pointer;
} }
table.smiley-preview { table.smiley-preview {
@ -19,3 +31,7 @@ table.smiley-preview {
left: 285px; left: 285px;
top: -36px; top: -36px;
} }
table.smiley-preview td {
cursor: pointer;
}

View File

@ -0,0 +1,31 @@
#profile-smiley-wrapper {
display: block;
}
#smileybutton {
display: none;
}
.smiley_button > img {
height: 14px;
width: 14px;
}
table.smiley-preview img.smiley {
max-height: 25px;
max-width: 25px;
}
table.smiley-preview {
border: 1px solid #AAAAAA;
}
table.smiley-preview td {
cursor: pointer;
}
#profile-smiley-wrapper > .btn-link {
position: relative;
display: block;
padding: 10px 15px;
}

View File

@ -1,4 +1,12 @@
img.smiley_button { #profile-smiley-wrapper {
display: block;
}
#smileybutton {
display: none;
}
.smiley_button > img {
height: 22px; height: 22px;
width: 22px; width: 22px;
position: relative; position: relative;
@ -8,9 +16,10 @@ img.smiley_button {
border-radius: 0px; border-radius: 0px;
} }
img.smiley_preview { table.smiley-preview img.smiley {
max-height: 25px; max-height: 25px;
max-width: 25px; max-width: 25px;
cursor: pointer;
} }
table.smiley-preview { table.smiley-preview {
@ -19,3 +28,7 @@ table.smiley-preview {
border-radius: 5px; border-radius: 5px;
margin: 5px; margin: 5px;
} }
table.smiley-preview td {
cursor: pointer;
}

View File

@ -1,15 +1,49 @@
img.smiley_button { #profile-smiley-wrapper {
float: left;
margin-left: 15px;
cursor: pointer;
height: 10px;
display: inline-block;
}
#profile-smiley-wrapper .btn {
padding: 0;
margin: 0;
border: 0;
background: none;
width: 20px;
height: 20px;
line-height: inherit;
display: inline-block;
overflow: hidden;
padding: 1px;
color: #999;
vertical-align: text-top;
}
#smileybutton {
position: absolute;
z-index: 99;
display: none;
}
.smiley_button > img {
height: 18px; height: 18px;
width: 18px; width: 18px;
margin-right: 18px; margin-right: 18px;
} }
img.smiley_preview { table.smiley-preview {
max-height: 25px; background-color: #FFF;
max-width: 25px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
} }
table.smiley-preview { table.smiley-preview img.smiley {
border: 1px solid #999999; max-height: 25px;
margin-left: 10px; max-width: 25px;
cursor: pointer;
}
table.smiley-preview td {
cursor: pointer;
} }