attachment preview: frontend work (works with frio)
This commit is contained in:
		
					parent
					
						
							
								0993f3e6ef
							
						
					
				
			
			
				commit
				
					
						07d1932efc
					
				
			
		
					 5 changed files with 613 additions and 28 deletions
				
			
		|  | @ -12,6 +12,7 @@ | |||
| use Friendica\App; | ||||
| use Friendica\Core\Hook; | ||||
| use Friendica\Core\Logger; | ||||
| use Friendica\Core\System; | ||||
| use Friendica\Util\Network; | ||||
| use Friendica\Util\ParseUrl; | ||||
| 
 | ||||
|  | @ -19,6 +20,8 @@ function parse_url_content(App $a) | |||
| { | ||||
| 	$text = null; | ||||
| 	$str_tags = ''; | ||||
| 	$format = ''; | ||||
| 	$ret= ['success' => false, 'contentType' => '']; | ||||
| 
 | ||||
| 	$br = "\n"; | ||||
| 
 | ||||
|  | @ -43,6 +46,10 @@ function parse_url_content(App $a) | |||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 	if (isset($_GET['dataType']) && $_GET['dataType'] == 'json') { | ||||
| 		$format = 'json'; | ||||
| 	} | ||||
| 
 | ||||
| 	// Add url scheme if it is missing
 | ||||
| 	$arrurl = parse_url($url); | ||||
| 	if (empty($arrurl['scheme'])) { | ||||
|  | @ -73,23 +80,36 @@ function parse_url_content(App $a) | |||
| 			} | ||||
| 		} | ||||
| 		$type = null; | ||||
| 		$content_type = ''; | ||||
| 		$bbcode = ''; | ||||
| 		if (array_key_exists('Content-Type', $hdrs)) { | ||||
| 			$type = $hdrs['Content-Type']; | ||||
| 		} | ||||
| 		if ($type) { | ||||
| 			if (stripos($type, 'image/') !== false) { | ||||
| 				echo $br . '[img]' . $url . '[/img]' . $br; | ||||
| 				exit(); | ||||
| 				$content_type = 'image'; | ||||
| 				$bbcode = $br . '[img]' . $url . '[/img]' . $br; | ||||
| 			} | ||||
| 			if (stripos($type, 'video/') !== false) { | ||||
| 				echo $br . '[video]' . $url . '[/video]' . $br; | ||||
| 				exit(); | ||||
| 				$content_type = 'video'; | ||||
| 				$bbcode = $br . '[video]' . $url . '[/video]' . $br; | ||||
| 			} | ||||
| 			if (stripos($type, 'audio/') !== false) { | ||||
| 				echo $br . '[audio]' . $url . '[/audio]' . $br; | ||||
| 				exit(); | ||||
| 				$content_type = 'audio'; | ||||
| 				$bbcode = $br . '[audio]' . $url . '[/audio]' . $br; | ||||
| 			} | ||||
| 		} | ||||
| 		if (!empty($content_type)) { | ||||
| 			if ($format == 'json') { | ||||
| 				$ret['contentType'] = $content_type; | ||||
| 				$ret['data'] = ['url' => $url]; | ||||
| 				$ret['success'] = true; | ||||
| 				System::jsonExit($ret); | ||||
| 			} | ||||
| 
 | ||||
| 			echo $bbcode; | ||||
| 			exit(); | ||||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 
 | ||||
|  | @ -130,6 +150,14 @@ function parse_url_content(App $a) | |||
| 		exit(); | ||||
| 	} | ||||
| 
 | ||||
| 	if ($format == 'json') { | ||||
| 		$ret['data'] = $siteinfo; | ||||
| 		$ret['contentType'] = 'attachment'; | ||||
| 		$ret['success'] = true; | ||||
| 
 | ||||
| 		System::jsonExit($ret); | ||||
| 	} | ||||
| 
 | ||||
| 	// Format it as BBCode attachment
 | ||||
| 	$info = add_page_info_data($siteinfo); | ||||
| 
 | ||||
|  |  | |||
							
								
								
									
										419
									
								
								view/js/linkPreview.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										419
									
								
								view/js/linkPreview.js
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,419 @@ | |||
| /** | ||||
|  * Copyright (c) 2014 Leonardo Cardoso (http://leocardz.com)
 | ||||
|  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 | ||||
|  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 | ||||
|  *  | ||||
|  * restructured from rabzuarus (https://friendica.kommune4.de/profile/rabuzarus)
 | ||||
|  * for the decental social network Friendica. | ||||
|  *  | ||||
|  * Version: 1.4.0 | ||||
|  */ | ||||
| (function ($) { | ||||
| 	$.fn.linkPreview = function (options) { | ||||
| 		var opts = jQuery.extend({}, $.fn.linkPreview.defaults, options); | ||||
| 
 | ||||
| 		var selector = $(this).selector; | ||||
| 		selector = selector.substr(1); | ||||
| 
 | ||||
| 		var previewTpl = '\ | ||||
| 			<div id="preview_' + selector + '" class="preview {0}">{1}</div>\ | ||||
| 			<div style="clear: both"></div>'; | ||||
| 		var attachmentTpl = '\ | ||||
| 			<hr class="previewseparator">\ | ||||
| 			<div id="closePreview_' + selector + '" title="Remove" class="closePreview" >\ | ||||
| 				<button type="button" class="previewActionBtn">×</button>\ | ||||
| 			</div>\ | ||||
| 			<div id="previewImages_' + selector + '" class="previewImages">\ | ||||
| 				<div id="previewImgBtn_' + selector + '" class="previewImgBtn">\ | ||||
| 					<button type="button" id="previewChangeImg_' + selector + '" class="buttonChangeDeactive previewActionBtn" style="display: none">\ | ||||
| 						<i class="fa fa-exchange" aria-hidden="true"></i>\ | ||||
| 					</button>\ | ||||
| 				</div>\ | ||||
| 				<div id="previewImage_' + selector + '" class="previewImage">\ | ||||
| 				</div>\ | ||||
| 				<input type="hidden" id="photoNumber_' + selector + '" class="photoNumber" value="0" />\ | ||||
| 			</div>\ | ||||
| 			<div id="previewContent_' + selector + '" class="previewContent">\ | ||||
| 				<h4 id="previewTitle_' + selector + '" class="previewTitle"></h4>\ | ||||
| 				<blockquote id="previewDescription_' + selector + '" class="previewDescription"></blockquote>\ | ||||
| 				<div id="hiddenDescription_' + selector + '" class="hiddenDescription"></div>\ | ||||
| 				<sup id="previewUrl_' + selector + '" class="previewUrl"></sup>\ | ||||
| 			</div>\ | ||||
| 			<div class="clear"></div>\ | ||||
| 			<hr class="previewseparator">'; | ||||
| 		var text; | ||||
| 		var urlRegex = /(https?\:\/\/|\s)[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})(\/+[a-z0-9_.\:\;-]*)*(\?[\&\%\|\+a-z0-9_=,\.\:\;-]*)?([\&\%\|\+&a-z0-9_=,\:\;\.-]*)([\!\#\/\&\%\|\+a-z0-9_=,\:\;\.-]*)}*/i; | ||||
| 		var binurl; | ||||
| 		var block = false; | ||||
| 		var blockTitle = false; | ||||
| 		var blockDescription = false; | ||||
| 		var cache = {}; | ||||
| 		var images = ""; | ||||
| 		var isExtern = false; | ||||
| 		var photoNumber = 0; | ||||
| 		var firstPosted = false; | ||||
| 		var isActive = false; | ||||
| 		var isCrawling = false; | ||||
| 		var defaultTitle = opts.defaultTitle; | ||||
| 		var defaultDescription = opts.defaultDescription; | ||||
| 
 | ||||
| 		var init = function() { | ||||
| 			$('#' + selector).bind({ | ||||
| 				paste: function () { | ||||
| 					setTimeout(function () { | ||||
| 						crawlText(); | ||||
| 					}, 100); | ||||
| 				}, | ||||
| 				keyup: function (e) { | ||||
| 					// on enter, space, ctrl
 | ||||
| 					if ((e.which === 13 || e.which === 32 || e.which === 17)) { | ||||
| 						crawlText(); | ||||
| 					} | ||||
| 				} | ||||
| 			}); | ||||
| 		}; | ||||
| 		var resetPreview = function() { | ||||
| 			$('#previewChangeImg_' + selector).removeClass('buttonChangeActive'); | ||||
| 			$('#previewChangeImg_' + selector).addClass('buttonChangeDeactive'); | ||||
| 			photoNumber = 0; | ||||
| 			images = ""; | ||||
| 		} | ||||
| 
 | ||||
| 		var crawlText = function (text) { | ||||
| 			block = false; | ||||
| 			images = ''; | ||||
| 			isExtern = false; | ||||
| 
 | ||||
| 			if (typeof text === 'undefined') { | ||||
| 				text = getPrevWord(selector); | ||||
| 			} else { | ||||
| 				isExtern = true; | ||||
| 			} | ||||
| 
 | ||||
| 			if (trim(text) !== "") { | ||||
| 				if (block === false && urlRegex.test(text)) { | ||||
| 					binurl = bin2hex(text); | ||||
| 					block = true; | ||||
| 
 | ||||
| 					isCrawling = true; | ||||
| 					$('#profile-rotator').show(); | ||||
| 
 | ||||
| 					if (binurl in cache) { | ||||
| 						isCrawling = false; | ||||
| 						processContentData(cache[binurl]); | ||||
| 					} else { | ||||
| 						getContentData(binurl, processContentData); | ||||
| 					} | ||||
| 				} | ||||
| 			} | ||||
| 		}; | ||||
| 
 | ||||
| 		var processContentData = function(result) { | ||||
| 			if (result.contentType === 'image') { | ||||
| 				insertImage(result.data); | ||||
| 			} | ||||
| 			if (result.contentType === 'attachment') { | ||||
| 				insertAttachment(result.data); | ||||
| 			} | ||||
| 			$('#profile-rotator').hide(); | ||||
| 		} | ||||
| 
 | ||||
| 		var getContentData = function(binurl, callback) { | ||||
| 			$.get('parse_url?binurl='+ binurl + '&dataType=json', function (answer) { | ||||
| 				if (typeof answer.contentType === 'undefined' | ||||
| 					|| answer.contentType === null) | ||||
| 				{ | ||||
| 					answer.contentType = ""; | ||||
| 				} | ||||
| 				if (typeof answer.data.url === 'undefined' | ||||
| 					|| answer.data.url === null) | ||||
| 				{ | ||||
| 					answer.data.url = ""; | ||||
| 				} | ||||
| 				if (typeof answer.data.title === 'undefined' | ||||
| 					|| answer.data.title === null | ||||
| 					|| answer.data.title === "") | ||||
| 				{ | ||||
| 					answer.data.title = defaultTitle; | ||||
| 				} | ||||
| 				if (typeof answer.data.text === 'undefined' | ||||
| 					|| answer.data.text === null | ||||
| 					|| answer.data.text === "") | ||||
| 				{ | ||||
| 					answer.data.text = ""; | ||||
| 				} | ||||
| 				if (typeof answer.data.images === 'undefined' | ||||
| 					|| answer.data.images === null) | ||||
| 				{ | ||||
| 					answer.data.images = ""; | ||||
| 				} | ||||
| 
 | ||||
| 				// Put the data into a cache
 | ||||
| 				cache[binurl] = answer; | ||||
| 
 | ||||
| 				callback(answer); | ||||
| 
 | ||||
| 				isCrawling = false; | ||||
| 			}); | ||||
| 		} | ||||
| 
 | ||||
| 		var insertImage = function(json) { | ||||
| 			if (!isExtern) { | ||||
| 				return | ||||
| 			} | ||||
| 			var bbcode = '\n[img]' + json.url + '[/img]\n'; | ||||
| 			addeditortext(bbcode); | ||||
| 		}; | ||||
| 
 | ||||
| 		var insertAudio = function(json) { | ||||
| 			if (!isExtern) { | ||||
| 				return | ||||
| 			} | ||||
| 			var bbcode = '\n[audio]' + json.url + '[/audio]\n'; | ||||
| 			addeditortext(bbcode); | ||||
| 		}; | ||||
| 
 | ||||
| 		var insertVideo = function(json) { | ||||
| 			if (!isExtern) { | ||||
| 				return | ||||
| 			} | ||||
| 			var bbcode = '\n[video]' + json.url + '[/video]\n'; | ||||
| 			addeditortext(bbcode); | ||||
| 		}; | ||||
| 
 | ||||
| 		var insertAttachment = function(json) { | ||||
| 			// If we have already a preview, leaver here.
 | ||||
| 			// Note: if we finish the Preview of other media content type,
 | ||||
| 			// we can move this condition to the beggining of crawlText();
 | ||||
| 			if (isActive) { | ||||
| 				return; | ||||
| 			} | ||||
| 
 | ||||
| 			if (json.type != 'link' && json.type != 'video' && json.type != 'photo' || json.url == json.title) { | ||||
| 				return; | ||||
| 			} | ||||
| 
 | ||||
| 			$('#photoNumber_' + selector).val(0); | ||||
| 			resetPreview(); | ||||
| 
 | ||||
| 			var typeClass = 'type-' + json.type; | ||||
| 			var imageClass = 'attachment-preview'; | ||||
| 			var urlHost = ""; | ||||
| 			var description = json.text; | ||||
| 
 | ||||
| 			// Load and add the template if it isn't allready loaded.
 | ||||
| 			if ($('#preview_' + selector).length == 0) { | ||||
| 				var tpl = previewTpl.format(typeClass, attachmentTpl); | ||||
| 				$('#' + selector).after(tpl); | ||||
| 			} | ||||
| 
 | ||||
| 			isActive = true; | ||||
| 
 | ||||
| 			if (description === '') { | ||||
| 				description = defaultDescription; | ||||
| 			} | ||||
| 
 | ||||
| 			$('#previewTitle_' + selector).html("\ | ||||
| 				<span id='previewSpanTitle_" + selector + "' class='previewSpanTitle' >" + escapeHTML(json.title) + "</span>\ | ||||
| 				<input type='text' value='" + escapeHTML(json.title) + "' id='previewInputTitle_" + selector + "' class='previewInputTitle inputPreview' style='display: none;'/>" | ||||
| 			); | ||||
| 
 | ||||
| 
 | ||||
| 			$('#previewDescription_' + selector).html("\ | ||||
| 				<span id='previewSpanDescription_" + selector + "' class='previewSpanDescription' >" + escapeHTML(description) + "</span>\n\ | ||||
| 				<textarea id='previewInputDescription_" + selector + "' class='previewInputDescription' style='display: none;' class='inputPreview' >" + escapeHTML(json.text) + "</textarea>" | ||||
| 			); | ||||
| 
 | ||||
| 			if (json.url) { | ||||
| 				var regexpr = "(https?://)([^:^/]*)(:\\d*)?(.*)?"; | ||||
| 				var regResult = json.url.match(regexpr); | ||||
| 				var urlHost = regResult[1] + regResult[2]; | ||||
| 				$('#previewUrl_' + selector).html("<a href='" + json.url + "'>" + urlHost + "</a>"); | ||||
| 			} | ||||
| 
 | ||||
| 			images = json.images; | ||||
| 
 | ||||
| 			if (Array.isArray(images)) { | ||||
| 				$('#previewImages_' + selector).show(); | ||||
| 			} else { | ||||
| 				$('#previewImages_' + selector).hide(); | ||||
| 			} | ||||
| 
 | ||||
| 			images.length = parseInt(images.length); | ||||
| 			var appendImage = ""; | ||||
| 
 | ||||
| 			for (i = 0; i < images.length; i++) { | ||||
| 				// For small preview images we use a smaller attachment format.
 | ||||
| //				if (Array.isArray(images) && typeof images[i].width !== 'undefined') {
 | ||||
| 					///@todo here we need to add a check for !Config::get('system', 'always_show_preview').
 | ||||
| 					if (images[i].width >= 500 && images[i].width >= images[i].height) { | ||||
| 							imageClass = 'attachment-image'; | ||||
| 					} | ||||
| //				}
 | ||||
| 				if (i === 0) { | ||||
| 					appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' ></img>"; | ||||
| 				} else { | ||||
| 					appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' style='display: none;'></img>"; | ||||
| 				} | ||||
| 			} | ||||
| 
 | ||||
| 			$('#previewImage_' + selector).html(appendImage + "<div id='whiteImage' style='color: transparent; display:none;'>...</div>"); | ||||
| 
 | ||||
| 			// more than just one image.
 | ||||
| 			if (images.length > 1) { | ||||
| 				// Enable the the button to change the preview pictures.
 | ||||
| 				$('#previewChangeImg_' + selector).show(); | ||||
| 
 | ||||
| 				if (firstPosted === false) { | ||||
| 					firstPosted = true; | ||||
| 
 | ||||
| 					$('#previewChangeImg_' + selector).unbind('click').click(function (e) { | ||||
| 						e.stopPropagation(); | ||||
| 						if (images.length > 1) { | ||||
| //							photoNumber = parseInt($('#photoNumber_' + selector).val());
 | ||||
| 							$('#imagePreview_' + selector + '_' + photoNumber).css({ | ||||
| 								'display': 'none' | ||||
| 							}); | ||||
| 							photoNumber += 1; | ||||
| 
 | ||||
| 							// If have reached the last image, begin with the first image.
 | ||||
| 							if (photoNumber === images.length) { | ||||
| 								photoNumber = 0; | ||||
| 							} | ||||
| 
 | ||||
| 							$('#imagePreview_' + selector + '_' + photoNumber).css({ | ||||
| 								'display': 'block' | ||||
| 							}); | ||||
| 							$('#photoNumber_' + selector).val(photoNumber); | ||||
| 						} | ||||
| 					}); | ||||
| 				} | ||||
| 			} | ||||
| 
 | ||||
| 			processEventListener(); | ||||
| 			$('#profile-rotator').hide(); | ||||
| 		}; | ||||
| 
 | ||||
| 		var processEventListener = function() { | ||||
| 			$('#previewSpanTitle_' + selector).unbind('click').click(function (e) { | ||||
| 				e.stopPropagation(); | ||||
| 				if (blockTitle === false) { | ||||
| 					blockTitle = true; | ||||
| 					$('#previewSpanTitle_' + selector).hide(); | ||||
| 					$('#previewInputTitle_' + selector).show(); | ||||
| 					$('#previewInputTitle_' + selector).val($('#previewInputTitle_' + selector).val()); | ||||
| 					$('#previewInputTitle_' + selector).focus().select(); | ||||
| 				} | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewInputTitle_' + selector).blur(function () { | ||||
| 				blockTitle = false; | ||||
| 				$('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val()); | ||||
| 				$('#previewSpanTitle_' + selector).show(); | ||||
| 				$('#previewInputTitle_' + selector).hide(); | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewInputTitle_' + selector).keypress(function (e) { | ||||
| 				if (e.which === 13) { | ||||
| 					blockTitle = false; | ||||
| 					$('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val()); | ||||
| 					$('#previewSpanTitle_' + selector).show(); | ||||
| 					$('#previewInputTitle_' + selector).hide(); | ||||
| 				} | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewSpanDescription_' + selector).unbind('click').click(function (e) { | ||||
| 				e.stopPropagation(); | ||||
| 				if (blockDescription === false) { | ||||
| 					blockDescription = true; | ||||
| 					$('#previewSpanDescription_' + selector).hide(); | ||||
| 					$('#previewInputDescription_' + selector).show(); | ||||
| 					$('#previewInputDescription_' + selector).val($('#previewInputDescription_' + selector).val()); | ||||
| 					$('#previewInputDescription_' + selector).focus().select(); | ||||
| 				} | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewInputDescription_' + selector).blur(function () { | ||||
| 				blockDescription = false; | ||||
| 				$('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val()); | ||||
| 				$('#previewSpanDescription_' + selector).show(); | ||||
| 				$('#previewInputDescription_' + selector).hide(); | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewInputDescription_' + selector).keypress(function (e) { | ||||
| 				if (e.which === 13) { | ||||
| 					blockDescription = false; | ||||
| 					$('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val()); | ||||
| 					$('#previewSpanDescription_' + selector).show(); | ||||
| 					$('#previewInputDescription_' + selector).hide(); | ||||
| 				} | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewSpanTitle_' + selector).mouseover(function () { | ||||
| 				$('#previewSpanTitle_' + selector).css({ | ||||
| 					"background-color": "#ff9" | ||||
| 				}); | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewSpanTitle_' + selector).mouseout(function () { | ||||
| 				$('#previewSpanTitle_' + selector).css({ | ||||
| 					"background-color": "transparent" | ||||
| 				}); | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewSpanDescription_' + selector).mouseover(function () { | ||||
| 				$('#previewSpanDescription_' + selector).css({ | ||||
| 					"background-color": "#ff9" | ||||
| 				}); | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#previewSpanDescription_' + selector).mouseout(function () { | ||||
| 				$('#previewSpanDescription_' + selector).css({ | ||||
| 					"background-color": "transparent" | ||||
| 				}); | ||||
| 			}); | ||||
| 
 | ||||
| 			$('#closePreview_' + selector).unbind('click').click(function (e) { | ||||
| 				e.stopPropagation(); | ||||
| 				block = false; | ||||
| 				images = ''; | ||||
| 				isActive = false; | ||||
| 				firstPosted = false; | ||||
| 				$('#preview_' + selector).fadeOut("fast", function () { | ||||
| 					$('#preview_' + selector).remove(); | ||||
| 					$('#profile-rotator').hide(); | ||||
| 				}); | ||||
| 
 | ||||
| 			}); | ||||
| 		}; | ||||
| 
 | ||||
| 		var trim = function(str) { | ||||
| 			return str.replace(/^\s+|\s+$/g, ""); | ||||
| 		}; | ||||
| 		var escapeHTML = function(unsafe_str) { | ||||
| 			return unsafe_str | ||||
| 				.replace(/&/g, '&') | ||||
| 				.replace(/</g, '<') | ||||
| 				.replace(/>/g, '>') | ||||
| 				.replace(/\"/g, '"') | ||||
| 				.replace(/\[/g, '[') | ||||
| 				.replace(/\]/g, ']') | ||||
| 				.replace(/\'/g, '''); // ''' is not valid HTML 4
 | ||||
| 		} | ||||
| 
 | ||||
| 		// Initialize LinkPreview 
 | ||||
| 		init(); | ||||
| 
 | ||||
| 		return { | ||||
| 			// make crawlText() accessable from the outside.
 | ||||
| 			crawlText: function (text) { | ||||
| 				crawlText(text); | ||||
| 			} | ||||
| 		}; | ||||
| 	}; | ||||
| 
 | ||||
| 	$.fn.linkPreview.defaults = { | ||||
| 		defaultDescription: "Enter a description", | ||||
| 		defaultTitle: "Enter a title" | ||||
| 	}; | ||||
| })(jQuery); | ||||
|  | @ -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); | ||||
|  |  | |||
							
								
								
									
										94
									
								
								view/theme/frio/js/jot.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										94
									
								
								view/theme/frio/js/jot.js
									
										
									
									
									
										Normal file
									
								
							|  | @ -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); | ||||
| } | ||||
|  | @ -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){ | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue