attachment preview: frontend work (works with frio)

view/theme/frio/css/style.css

@@ -1340,6 +1340,67 @@ section #jotOpen {
 #jot-text-wrap textarea {
     min-height: 100px;
 }
+/*#jot-attachment-preview {
+    display: none;
+}*/
+#jot-text-wrap .preview textarea {
+    width: 100%;
+}
+#preview_profile-jot-text {
+    position: relative;
+    padding: 0px 10px;
+    margin-top: -2px;
+    border: 2px solid #ededed;
+    border-top: none;
+    box-shadow: none;
+    border-radius: 0 0 4px 4px;
+    background: #fff;
+    color: #555;
+}
+textarea#profile-jot-text:focus + #preview_profile-jot-text {
+    border: 2px solid #6fdbe8;
+    border-top: none;
+}
+.preview hr.previewseparator {
+    margin-top: 0px;
+    border-color: #D2D2D2;
+}
+#previewImgBtn_profile-jot-text,
+.closePreview  {
+    position: absolute;
+    top: 15px;
+}
+.closePreview {
+    right: 15px;
+    z-index: 1;
+}
+.previewImgBtn {
+    left: 15px;
+}
+.preview button.previewActionBtn {
+    display:block;
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    color: #fff;
+    border: 2px solid #fff;
+    box-shadow: 0 0 3px gray;
+    background: #777;
+    text-align: center;
+    line-height: 2px;
+    text-decoration: none;
+    padding: 0 0 1px 1px;
+    opacity: 0.7;
+}
+.preview button.previewActionBtn:hover {
+    opacity: 1;
+}
+.preview .closePreview button.previewActionBtn {
+    font-size: 25px;
+}
+#previewInputTitle_profile-jot-text {
+    width: 100%;
+}
 #profile-jot-wrapper button#profile-jot-submit {
     margin-top: 5px;
 }
@@ -1347,7 +1408,7 @@ section #jotOpen {
     padding: 10px 15px;
 }
 
-/* ACL */
+/* ACL 
 /*#jot-modal-body {
     height: auto;
     max-height: calc(100vh - 130px);

view/theme/frio/js/jot.js

@@ -0,0 +1,94 @@
+var linkPreview;
+
+$(document).ready(function() {
+	linkPreview = $('#profile-jot-text').linkPreview();
+});
+
+
+/**
+ * Insert a link into friendica jot.
+ * 
+ * @returns {void}
+ */
+function jotGetLink() {
+	var currentText = $("#profile-jot-text").val();
+	var noAttachment = '';
+	reply = prompt(aStr.linkurl);
+	if(reply && reply.length) {
+		// There should be only one attachment per post.
+		// So we need to remove the old one.
+		$('#jot-attachment-preview').empty();
+		$('#profile-rotator').show();
+		if (currentText.includes("[attachment") && currentText.includes("[/attachment]")) {
+			noAttachment = '&noAttachment=1';
+		}
+
+		// We use the linkPreview library to have a preview
+		// of the attachments.
+		linkPreview.crawlText(reply + noAttachment);
+		autosize.update($("#profile-jot-text"));
+	}
+}
+
+/**
+ * Get in a textarea the previous word before the cursor.
+ * 
+ * @param {object} text Textarea elemet.
+ * @param {integer} caretPos Cursor position.
+ * 
+ * @returns {string} Previous word.
+ */
+function returnWord(text, caretPos) {
+	var index = text.indexOf(caretPos);
+	var preText = text.substring(0, caretPos);
+	// If the last charachter is a space remove the one space
+	// We need this in friendica for the url  preview.
+	if (preText.slice(-1) == " ") {
+		preText = preText.substring(0, preText.length -1);
+	}
+//	preText = preText.replace(/^\s+|\s+$/g, "");
+	if (preText.indexOf(" ") > 0) {
+		var words = preText.split(" ");
+		return words[words.length - 1]; //return last word
+	}
+	else {
+		return preText;
+	}
+}
+
+/**
+ * Get in a textarea the previous word before the cursor.
+ * 
+ * @param {string} id The ID of a textarea element.
+ * @returns {sting|null} Previous word or null if no word is available.
+ */
+function getPrevWord(id) {
+	var text = document.getElementById(id);
+	var caretPos = getCaretPosition(text);
+	var word = returnWord(text.value, caretPos);
+	if (word != null) {
+		return word
+	}
+
+}
+
+/**
+ * Get the cursor posiotion in an text element.
+ * 
+ * @param {object} ctrl Textarea elemet.
+ * @returns {integer} Position of the cursor.
+ */
+function getCaretPosition(ctrl) {
+	var CaretPos = 0;   // IE Support
+	if (document.selection) {
+		ctrl.focus();
+		var Sel = document.selection.createRange();
+		Sel.moveStart('character', -ctrl.value.length);
+		CaretPos = Sel.text.length;
+	}
+	// Firefox support
+	else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
+		CaretPos = ctrl.selectionStart;
+	}
+	return (CaretPos);
+}

view/theme/frio/templates/jot-header.tpl

@@ -1,5 +1,7 @@
 
-<script type="text/javascript" src="{{$baseurl}}/view/js/ajaxupload.js" ></script>
+<script type="text/javascript" src="{{$baseurl}}/view/js/ajaxupload.js"></script>
+<script type="text/javascript" src="{{$baseurl}}/view/js/linkPreview.js"></script>
+<script type="text/javascript" src="{{$baseurl}}/view/theme/frio/js/jot.js"></script>
 
 <script type="text/javascript">
 	var editor = false;
@@ -39,6 +41,7 @@
 
 <script type="text/javascript">
 	var ispublic = '{{$ispublic}}';
+	aStr.linkurl = '{{$linkurl}}';
 
 
 	$(document).ready(function() {
@@ -126,24 +129,6 @@
 		}
 	}
 
-	function jotGetLink() {
-		var currentText = $("#profile-jot-text").val();
-		var noAttachment = '';
-		reply = prompt("{{$linkurl}}");
-		if(reply && reply.length) {
-			reply = bin2hex(reply);
-			$('#profile-rotator').show();
-			if (currentText.includes("[attachment") && currentText.includes("[/attachment]")) {
-				noAttachment = '&noAttachment=1';
-			}
-			$.get('parse_url?binurl=' + reply + noAttachment, function(data) {
-				addeditortext(data);
-				$('#profile-rotator').hide();
-			});
-			autosize.update($("#profile-jot-text"));
-		}
-	}
-
 	function jotVideoURL() {
 		reply = prompt("{{$vidurl}}");
 		if(reply && reply.length) {
@@ -158,7 +143,6 @@
 		}
 	}
 
-
 	function jotGetLocation() {
 		reply = prompt("{{$whereareu}}", $('#jot-location').val());
 		if(reply && reply.length) {
@@ -226,7 +210,6 @@
 	}
 
 	function itemFiler(id) {
-
 		var bordercolor = $("input").css("border-color");
 
 		$.get('filer/', function(data){