Merge pull request #1081 from MrPetovan/bug/9914-smileybutton-rework

[smileybutton] Rework addon

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');
+	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
 	// 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
+	// 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;
+	}
 
-	/**
+	$texts = [
-	 *
- 	 * I have copied this from /include/text.php, removed doubles
-	 * and escaped them.
-	 *
-	 */
-
-	$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',
+		'~friendica',
-                'red#'
+		'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";
+	$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 = 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
 	$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;" >
+	<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
 		</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();
-				var v = $("#profile-jot-text").val();
+			v = v + text;
-				v = v + text;
+			$("#profile-jot-text").val(v).focus();
-				$("#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();
-			}
 		}
 	</script>
 EOT;
 }
+

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;
+}

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;
+}

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;
+}

smileybutton/view/frost.css

@@ -1,21 +0,0 @@
-img.smiley_button {
-	height: 25;
-	width: 25px;
-	position: relative;
-	left: 335px;
-	top: -45px;
-}
-
-img.smiley_preview {
-	max-height: 25px;
-	max-width: 25px;
-}
-
-table.smiley-preview {
-	border: 1px solid #AAAAAA;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
-	position: relative;
-	left: 285px;
-	top: -36px;
-}

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;
+}

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 {
-	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;
 }