[smileybutton] Rework addon

- Add frio style
- Remove reference to removed tinymce editor

diff --git a/smileybutton/smileybutton.php b/smileybutton/smileybutton.php
index fc42077369fbf4e0c1e5b605ae90fbd1ef9fdede..f01a62015a83a294b96acf21d8ffaaff7d32f9c3 100644 (file)
--- a/smileybutton/smileybutton.php
+++ b/smileybutton/smileybutton.php
@@ -2,38 +2,34 @@
 /**
  * Name: Smileybutton
  * Description: Adds a smileybutton to the Inputbox
- * Version: 0.2
+ * Version: 1.0
  * 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\Logger;
 use Friendica\DI;
 
-function smileybutton_install() {
+function smileybutton_install()
+{
        //Register hooks
-       Hook::register('jot_tool', 'addon/smileybutton/smileybutton.php', 'show_button');
-
-       Logger::log("installed smileybutton");
+       Hook::register('jot_tool', 'addon/smileybutton/smileybutton.php', 'smileybutton_jot_tool');
 }
 
-function show_button(Friendica\App $a, &$b) {
+function smileybutton_jot_tool(Friendica\App $a, &$b)
+{
        // Disable if theme is quattro
        // TODO add style for quattro
-       if ($a->getCurrentTheme() == 'quattro')
+       if ($a->getCurrentTheme() == 'quattro') {
                return;
+       }
 
-       // Disable for mobile because most mobiles have a smiley key for ther own
-       if (DI::mode()->isMobile() || DI::mode()->isMobile())
+       // Disable for mobile because they have a smiley key of their own
+       if (DI::mode()->isMobile() || DI::mode()->isMobile()) {
                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',
-               ":\'(",
-               ":-!",
-               ":-/",
-               ":-[",
-               "8-)",
+               ':\'(',
+               ':-!',
+               ':-/',
+               ':-[',
+               '8-)',
                ':beer',
                ':coffee',
                ':facepalm',
                ':like',
                ':dislike',
-                '~friendica',
-                'red#'
-
+               '~friendica',
+               'red#',
        ];
 
        $icons = [
@@ -87,42 +82,41 @@ function show_button(Friendica\App $a, &$b) {
        ];
 
        // 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);
 
        //Generate html for smiley list
-       $s = "<table class=\"smiley-preview\"><tr>\n\t";
-       for($x = 0; $x < count($params['texts']); $x ++) {
+       $s = '<table class="smiley-preview"><tr>';
+       for ($x = 0; $x < count($params['texts']); $x++) {
                $icon = $params['icons'][$x];
-               $icon = str_replace('/>', 'onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')"/>', $icon);
-               $icon = str_replace('class="smiley"', 'class="smiley_preview"', $icon);
-               $s .= "<td>" . $icon . "</td>";
-               if (($x+1) % (sqrt(count($params['texts']))+1) == 0) {
-                       $s .= "</tr>\n\t<tr>";
+               $s .= '<td onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')">' . $icon . '</td>';
+               if (($x + 1) % (sqrt(count($params['texts'])) + 1) == 0) {
+                       $s .= '</tr><tr>';
                }
        }
-       $s .= "\t</tr></table>";
+       $s .= '</tr></table>';
 
        //Add css to header
        $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_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
        $image = 'addon/smileybutton/view/' . $a->getCurrentTheme() . '.png';
-       if (! file_exists($image))
+       if (!file_exists($image)) {
                $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
        $b = <<< EOT
-       <div id="profile-smiley-wrapper" style="display: block;" >
-               <img src="$image_url" class="smiley_button" onclick="toggle_smileybutton()" alt="smiley">
-               <div id="smileybutton" style="display:none;">
+       <div id="profile-smiley-wrapper">
+               <button type="button" class="btn btn-link smiley_button" onclick="toggle_smileybutton()"><img src="$image_url" alt="smiley"></button>
+               <div id="smileybutton">
                $s
                </div>
        </div>
@@ -140,18 +134,11 @@ function show_button(Friendica\App $a, &$b) {
                }
 
                function smileybutton_addsmiley(text) {
-                       if(plaintext == "none") {
-                               var v = $("#profile-jot-text").val();
-                               v = v + text;
-                               $("#profile-jot-text").val(v);
-                               $("#profile-jot-text").focus();
-                       } else {
-                               var v = tinymce.activeEditor.getContent();
-                               v = v + text;
-                               tinymce.activeEditor.setContent(v);
-                               tinymce.activeEditor.focus();
-                       }
+                       var v = $("#profile-jot-text").val();
+                       v = v + text;
+                       $("#profile-jot-text").val(v).focus();
                }
        </script>
 EOT;
 }
+

diff --git a/smileybutton/view/default.css b/smileybutton/view/default.css
index 161203605444034a85eeebcab7af72bf9e276589..5fd60928da3a19db5e8c7d0c14566876bef49548 100644 (file)
--- a/smileybutton/view/default.css
+++ b/smileybutton/view/default.css
@@ -1,9 +1,17 @@
-img.smiley_button {
+#profile-smiley-wrapper {
+       display: block;
+}
+
+#smileybutton {
+       display: none;
+}
+
+.smiley_button > img {
        height: 18px;
        width: 18px;
 }
 
-img.smiley_preview {
+table.smiley-preview img.smiley {
        max-height: 25px;
        max-width: 25px;
 }
@@ -11,3 +19,7 @@ img.smiley_preview {
 table.smiley-preview {
        border: 1px solid #AAAAAA;
 }
+
+table.smiley-preview td {
+       cursor: pointer;
+}

diff --git a/smileybutton/view/duepuntozero.css b/smileybutton/view/duepuntozero.css
index 0f4ef4aec021e21c13e0fe0c7e2085b2809d735b..92ff4eba35fca3c1b8b928180c5c342e786513a7 100644 (file)
--- a/smileybutton/view/duepuntozero.css
+++ b/smileybutton/view/duepuntozero.css
@@ -1,14 +1,26 @@
-img.smiley_button {
+#profile-smiley-wrapper {
+       display: block;
+}
+
+#smileybutton {
+       display: none;
+}
+
+.smiley_button {
        height: 18px;
        width: 18px;
        position: relative;
        left: 285px;
        top: -45px;
+       padding: 0;
+       border: 0;
+       background: none;
 }
 
-img.smiley_preview {
+table.smiley-preview img.smiley {
        max-height: 25px;
        max-width: 25px;
+       cursor: pointer;
 }
 
 table.smiley-preview {
@@ -19,3 +31,7 @@ table.smiley-preview {
        left: 285px;
        top: -36px;
 }
+
+table.smiley-preview td {
+       cursor: pointer;
+}

diff --git a/smileybutton/view/frio.css b/smileybutton/view/frio.css
new file mode 100644 (file)
index 0000000..dce8482
--- /dev/null
+++ b/smileybutton/view/frio.css
@@ -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;
+}

diff --git a/smileybutton/view/smoothly.css b/smileybutton/view/smoothly.css
index 14ed961ac030f8679711b4d82863f6eba0c8bffe..2f30799f939e415958931139e6a51e81c7060966 100644 (file)
--- a/smileybutton/view/smoothly.css
+++ b/smileybutton/view/smoothly.css
@@ -1,4 +1,12 @@
-img.smiley_button {
+#profile-smiley-wrapper {
+       display: block;
+}
+
+#smileybutton {
+       display: none;
+}
+
+.smiley_button > img {
        height: 22px;
        width: 22px;
        position: relative;
@@ -8,9 +16,10 @@ img.smiley_button {
        border-radius: 0px;
 }
 
-img.smiley_preview {
+table.smiley-preview img.smiley {
        max-height: 25px;
        max-width: 25px;
+       cursor: pointer;
 }
 
 table.smiley-preview {
@@ -19,3 +28,7 @@ table.smiley-preview {
        border-radius: 5px;
        margin: 5px;
 }
+
+table.smiley-preview td {
+       cursor: pointer;
+}

diff --git a/smileybutton/view/vier.css b/smileybutton/view/vier.css
index 4f2378009d6bad5849d766c0fc00c959ee1cfaa7..5862759b39a65df2569bc54aa905b9fbe7bd3e36 100644 (file)
--- a/smileybutton/view/vier.css
+++ b/smileybutton/view/vier.css
@@ -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;
        width: 18px;
        margin-right: 18px;
 }
 
-img.smiley_preview {
+table.smiley-preview {
+       background-color: #FFF;
+       box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+}
+
+table.smiley-preview img.smiley {
        max-height: 25px;
        max-width: 25px;
+       cursor: pointer;
 }
 
-table.smiley-preview {
-       border: 1px solid #999999;
-       margin-left: 10px;
+table.smiley-preview td {
+       cursor: pointer;
 }