From 52f94655781e2cd21947a9ac1d10fc450693e812 Mon Sep 17 00:00:00 2001
From: Fabrixxm <fabrix.xm@gmail.com>
Date: Wed, 29 Jul 2015 11:30:04 +0200
Subject: [PATCH] filebrowser fixs, use it in comment textareas

move filebrowser js to single file
document filebrowser usage
replace "onclick" for comment style buttons with data-* and move logic to main.js
use filebrowser to insert images in comments
---
 js/filebrowser.js                             | 116 ++++++++++++++++++
 js/main.js                                    |  27 ++++
 view/templates/filebrowser_plain.tpl          |  74 +++--------
 view/templates/jot-header.tpl                 |   4 +-
 view/theme/dispy/templates/comment_item.tpl   |  16 +--
 .../duepuntozero/templates/comment_item.tpl   |  16 +--
 .../frost-mobile/templates/comment_item.tpl   |  16 +--
 view/theme/frost/templates/comment_item.tpl   |  16 +--
 view/theme/quattro/templates/comment_item.tpl |  19 ++-
 view/theme/vier/templates/comment_item.tpl    |  14 +--
 10 files changed, 210 insertions(+), 108 deletions(-)
 create mode 100644 js/filebrowser.js

diff --git a/js/filebrowser.js b/js/filebrowser.js
new file mode 100644
index 0000000000..8f7b78d197
--- /dev/null
+++ b/js/filebrowser.js
@@ -0,0 +1,116 @@
+/**
+ * Filebrowser - Friendica Communications Server
+ * 
+ * Copyright (c) 2010-2013 the Friendica Project
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This code handle user interaction for image/file upload/browser dialog.
+ * Is loaded from filebrowser_plain.tpl
+ *
+ * To load filebrowser in colorbox, call
+ *
+ *     $.colorbox({href: ulr, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ *
+ * where url is:
+ *
+ * 		<baseurl>/fbrowser/<type>/?mode=minimal[#<eventname>-<id>]
+ *
+ * 		baseurl: baseurl from friendica
+ * 		type: one of "image", "file"
+ * 		eventname: event name to catch return value
+ * 		id: id returned to event handler
+ *
+ * 	When user select an item, an event in fired in parent page, on body element
+ * 	The event is named
+ *
+ * 		fbrowser.<type>.[<eventname>]
+ * 		
+ * 	with params:
+ *
+ * 		filemane: filename of item choosed by user
+ * 		embed: bbcode to embed element into posts
+ * 		id: id from url
+ *
+ *  example:
+ *
+ *  	// open dialog for select an image for a textarea with id "myeditor"
+ *		var id="myeditor";
+ *		$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#example-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ *
+ *		// setup event handler to get user selection
+ *		$("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {
+ *			// close colorbox
+ *			$.colorbox.close();
+ *			// replace textxarea text with bbcode
+ *			$(id).value = bbcode;
+ *		});
+ **/
+ 
+var FileBrowser = {
+	nickname : "",
+	type : "",
+	event: "",
+	id : null,
+	
+	init: function(nickname, type) {
+		FileBrowser.nickname = nickname;
+		FileBrowser.type = type;
+		FileBrowser.event = "fbrowser."+type;
+		if (location['hash']!=="") {
+			var h = location['hash'].replace("#","");
+			FileBrowser.event = FileBrowser.event + "." + h.split("-")[0];
+			FileBrowser.id = h.split("-")[1];
+		}
+		
+		console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id );
+		$(".photo-album-photo-link").on('click', function(e){
+			e.preventDefault();
+			
+			var embed = "";
+			if (FileBrowser.type == "image") {
+				embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
+			}
+			if (FileBrowser.type=="file") {
+				// attachment links are "baseurl/attach/id"; we need id
+				embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]";
+			}
+			console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id);
+			parent.$("body").trigger(FileBrowser.event, [
+				this.dataset.filename,
+				embed,
+				FileBrowser.id
+			]);
+			
+		});
+		
+		if ($("#upload-image").length)
+			var image_uploader = new window.AjaxUpload(
+				'upload-image',
+				{ action: 'wall_upload/'+FileBrowser.nickname,
+					name: 'userfile',
+					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+					onComplete: function(file,response) {
+						location = baseurl + "/fbrowser/image/?mode=minimal"+location['hash'];
+						location.reload(true);
+					}				 
+				}
+			);
+
+		if ($("#upload-file").length)
+			var file_uploader = new window.AjaxUpload(
+				'upload-file',
+				{ action: 'wall_attach/'+FileBrowser.nickname,
+					name: 'userfile',
+					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+					onComplete: function(file,response) {
+						location = baseurl + "/fbrowser/file/?mode=minimal"+location['hash'];
+						location.reload(true);				}				 
+				}
+		);
+	}
+};
+
diff --git a/js/main.js b/js/main.js
index 239a875cb4..d3cce33040 100644
--- a/js/main.js
+++ b/js/main.js
@@ -51,6 +51,33 @@
 			e.tipTip({defaultPosition: pos, edgeOffset: 8});
 		});*/
 		
+		/* setup comment textarea buttons */
+		
+		$('[data-role="insert-formatting"]').on('click', function(e) {
+			e.preventDefault();
+			var o = $(this);
+			var comment = o.data('comment');
+			var bbcode  = o.data('bbcode');
+			var id = o.data('id');
+			if (bbcode=="img") {
+				$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#comment-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+				return;	
+			}
+			
+			insertFormatting(comment, bbcode, id);
+		});
+
+		/* event from comment textarea button popups */
+		/* insert returned bbcode at cursor position or replace selected text */
+		$("body").on("fbrowser.image.comment", function(e, filename, bbcode, id) {
+			console.log("on", id);
+			$.colorbox.close();
+			var textarea = document.getElementById("comment-edit-text-" +id);
+			var start = textarea.selectionStart;
+			var end = textarea.selectionEnd;
+			textarea.value = textarea.value.substring(0, start) + bbcode + textarea.value.substring(end, textarea.value.length);
+		});
+	
 		
 		
 		/* setup onoff widgets */
diff --git a/view/templates/filebrowser_plain.tpl b/view/templates/filebrowser_plain.tpl
index 4d29f60b8f..9b70fbf852 100644
--- a/view/templates/filebrowser_plain.tpl
+++ b/view/templates/filebrowser_plain.tpl
@@ -4,28 +4,36 @@
 	-->
 
 <script type="text/javascript" src="{{$baseurl}}/js/ajaxupload.js" ></script>
-
+<script type="text/javascript" src="{{$baseurl}}/js/filebrowser.js"></script>
+<script>
+	$(function() {
+		FileBrowser.init("{{$nickname}}", "{{$type}}");
+	});
+</script>
 <div class="fbrowser {{$type}}">
 
 	<div class="path">
 		{{foreach $path as $p}}<a href="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
 	</div>
 	
+	{{if $folders }}
 	<div class="folders">
 		<ul>
 			{{foreach $folders as $f}}<li><a href="{{$baseurl}}/fbrowser/{{$type}}/{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
 		</ul>
 	</div>
+	{{/if}}
 		
-	{{foreach $files as $f}}
-	<div class="photo-album-image-wrapper">
-		<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
-			<img src="{{$f.2}}">
-			<p>{{$f.1}}</p>
-		</a>
+	<div class="list">
+		{{foreach $files as $f}}
+		<div class="photo-album-image-wrapper">
+			<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
+				<img src="{{$f.2}}">
+				<p>{{$f.1}}</p>
+			</a>
+		</div>
+		{{/foreach}}
 	</div>
-	<div class="photo-album-image-wrapper-end"></div>
-	{{/foreach}}
 
 	<div class="upload">
 		<button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button> 
@@ -33,54 +41,6 @@
 </div>
 
 
-
-	<script>
-		$(".photo-album-photo-link").on('click', function(e){
-			e.preventDefault();
-			
-			{{if $type == "image"}}
-			var embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
-			{{/if}}
-			{{if $type == "file"}}
-			var embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img] "+this.dataset.filename+"[/url]";
-			{{/if}}
-			console.log(this.dataset.filename, embed, parent.$("body"));
-			parent.$("body").trigger("fbrowser.{{$type}}", [
-				this.dataset.filename,
-				embed,
-			]);
-			
-		});
-		
-		if ($("#upload-image").length)
-			var image_uploader = new window.AjaxUpload(
-				'upload-image',
-				{ action: 'wall_upload/{{$nickname}}',
-					name: 'userfile',
-					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
-					onComplete: function(file,response) {
-						location = baseurl + "/fbrowser/image/?mode=minimal";
-						location.reload(true);
-					}				 
-				}
-			);
-
-		if ($("#upload-file").length)
-			var file_uploader = new window.AjaxUpload(
-				'upload-file',
-				{ action: 'wall_attach/{{$nickname}}',
-					name: 'userfile',
-					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
-					onComplete: function(file,response) {
-						location = baseurl + "/fbrowser/file/?mode=minimal";
-						location.reload(true);				}				 
-				}
-			);
-		
-		
-
-	</script>
-
 	</body>
 	
 </html>
diff --git a/view/templates/jot-header.tpl b/view/templates/jot-header.tpl
index 5f498e706f..c4934f10b6 100644
--- a/view/templates/jot-header.tpl
+++ b/view/templates/jot-header.tpl
@@ -142,11 +142,11 @@ function enableOnUser(){
 		 **/
 	
 		/* callback */
-		$('body').on('fbrowser.image', function(e, filename, embedcode) {
+		$('body').on('fbrowser.image', function(e, filename, embedcode, id) {
 			$.colorbox.close();
 			addeditortext(embedcode);
 		});
-		$('body').on('fbrowser.file', function(e, filename, embedcode) {
+		$('body').on('fbrowser.file', function(e, filename, embedcode, id) {
 			$.colorbox.close();
 			addeditortext(embedcode);
 		});
diff --git a/view/theme/dispy/templates/comment_item.tpl b/view/theme/dispy/templates/comment_item.tpl
index b9462e0a7a..9af0254546 100644
--- a/view/theme/dispy/templates/comment_item.tpl
+++ b/view/theme/dispy/templates/comment_item.tpl
@@ -16,28 +16,28 @@
 				<ul class="comment-edit-bb-{{$id}}">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"></a></li>
 				</ul>
 				<div class="comment-edit-bb-end"></div>
 				<textarea id="comment-edit-text-{{$id}}"
diff --git a/view/theme/duepuntozero/templates/comment_item.tpl b/view/theme/duepuntozero/templates/comment_item.tpl
index afbac7c643..1bb9dc6663 100644
--- a/view/theme/duepuntozero/templates/comment_item.tpl
+++ b/view/theme/duepuntozero/templates/comment_item.tpl
@@ -20,28 +20,28 @@
 				<ul class="comment-edit-bb-{{$id}}">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$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(this, {{$id}});" onBlur="commentClose(this,{{$id}});cmtBbClose(this,{{$id}});" >{{$comment}}</textarea>			
diff --git a/view/theme/frost-mobile/templates/comment_item.tpl b/view/theme/frost-mobile/templates/comment_item.tpl
index bd3e57716d..11aa31116a 100644
--- a/view/theme/frost-mobile/templates/comment_item.tpl
+++ b/view/theme/frost-mobile/templates/comment_item.tpl
@@ -31,28 +31,28 @@
 				<ul class="comment-edit-bb-{{$id}}">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 {{*<!--					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>-->*}}
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$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}});cmtBbClose({{$id}});" >{{$comment}}</textarea>-->*}}
diff --git a/view/theme/frost/templates/comment_item.tpl b/view/theme/frost/templates/comment_item.tpl
index 34eade3585..56adbb1af3 100644
--- a/view/theme/frost/templates/comment_item.tpl
+++ b/view/theme/frost/templates/comment_item.tpl
@@ -30,28 +30,28 @@
 				<ul class="comment-edit-bb" id="comment-edit-bb-{{$id}}">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$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}});cmtBbClose({{$id}});" >{{$comment}}</textarea>-->*}}
diff --git a/view/theme/quattro/templates/comment_item.tpl b/view/theme/quattro/templates/comment_item.tpl
index d3d5c46320..20417c1e18 100644
--- a/view/theme/quattro/templates/comment_item.tpl
+++ b/view/theme/quattro/templates/comment_item.tpl
@@ -15,34 +15,33 @@
 					class="comment-edit-bb">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"></a></li>
 				</ul>	
 				<textarea id="comment-edit-text-{{$id}}" 
 					class="comment-edit-text-empty" 
 					name="body" 
-					onFocus="commentOpen(this,{{$id}}) && cmtBbOpen({{$id}});" 
-					onBlur="commentClose(this,{{$id}}) && cmtBbClose({{$id}});" >{{$comment}}</textarea>
+					onFocus="commentOpen(this,{{$id}}) && cmtBbOpen({{$id}});" >{{$comment}}</textarea>
 				{{if $qcomment}}
 					<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});" >
 					<option value=""></option>
diff --git a/view/theme/vier/templates/comment_item.tpl b/view/theme/vier/templates/comment_item.tpl
index 62a42c6e86..7a9627b779 100644
--- a/view/theme/vier/templates/comment_item.tpl
+++ b/view/theme/vier/templates/comment_item.tpl
@@ -31,14 +31,14 @@
 				<div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-{{$id}}" style="display: none;" >
 
 				<div class="comment-edit-bb">
-	                                <a title="{{$edimg}}" onclick="insertFormatting('{{$comment}}','img',{{$id}});"><i class="icon-picture"></i></a>      
-	                                <a title="{{$edurl}}" onclick="insertFormatting('{{$comment}}','url',{{$id}});"><i class="icon-link"></i></a>
-	                                <a title="{{$edvideo}}" onclick="insertFormatting('{{$comment}}','video',{{$id}});"><i class="icon-film"></i></a>
+	                                <a title="{{$edimg}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"><i class="icon-picture"></i></a>      
+	                                <a title="{{$edurl}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"><i class="icon-link"></i></a>
+	                                <a title="{{$edvideo}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"><i class="icon-film"></i></a>
                                                                                 
-	                                <a title="{{$eduline}}" onclick="insertFormatting('{{$comment}}','u',{{$id}});"><i class="icon-underline"></i></a>
-	                                <a title="{{$editalic}}" onclick="insertFormatting('{{$comment}}','i',{{$id}});"><i class="icon-italic"></i></a>
-	                                <a title="{{$edbold}}" onclick="insertFormatting('{{$comment}}','b',{{$id}});"><i class="icon-bold"></i></a>
-	                                <a title="{{$edquote}}" onclick="insertFormatting('{{$comment}}','quote',{{$id}});"><i class="icon-quote-left"></i></a>
+	                                <a title="{{$eduline}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"><i class="icon-underline"></i></a>
+	                                <a title="{{$editalic}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"><i class="icon-italic"></i></a>
+	                                <a title="{{$edbold}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"><i class="icon-bold"></i></a>
+	                                <a title="{{$edquote}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"><i class="icon-quote-left"></i></a>
 
                                 </div>
 					<input type="submit" onclick="post_comment({{$id}}); return false;" id="comment-edit-submit-{{$id}}" class="comment-edit-submit" name="submit" value="{{$submit}}" />
-- 
2.39.5