mirror of
https://github.com/marty-oehme/scripts.git
synced 2024-11-14 13:58:07 +00:00
b149834b79
This script does two things: 1) Display the image with an user defined width; 2) Wrap the image in an anchor tag that links to the full size image. TODO: do not resize the image when it does not have a width attribute AND is smaller than the maxWidth.
85 lines
2.7 KiB
QML
85 lines
2.7 KiB
QML
import QtQml 2.0
|
|
|
|
QtObject {
|
|
property int maxWidth;
|
|
|
|
property variant settingsVariables: [{
|
|
"identifier": "maxWidth",
|
|
"name": "Max width for image preview",
|
|
"description": "Note that when the original image width is unknown (e.g. when using Markdown-it), images with a smaller width than this setting will be blown-up. This can not be prevented right now.",
|
|
"type": "integer",
|
|
"default": "640",
|
|
}];
|
|
|
|
/**
|
|
* This function is called when the markdown html of a note is generated
|
|
*
|
|
* It allows you to modify this html
|
|
* This is for example called before by the note preview
|
|
*
|
|
* @param {Note} note - the note object
|
|
* @param {string} html - the html that is about to being rendered
|
|
* @return {string} the modfied html or an empty string if nothing should be modified
|
|
*/
|
|
function noteToMarkdownHtmlHook(note, html) {
|
|
/**
|
|
* This script does two things:
|
|
* 1) Display the image with an user defined width;
|
|
* 2) Wrap the image in an anchor tag that links to the full size image.
|
|
* TODO: do not resize the image when it does not have a width attribute
|
|
* AND is smaller than the maxWidth. Wrapping an image in a table with
|
|
* `<td width="640">` does not work.
|
|
*/
|
|
html = html.replace(/<img(?:.[^>]*)/g, handleImg);
|
|
|
|
// script.log(html);
|
|
return html;
|
|
}
|
|
|
|
/**
|
|
* Handle image.
|
|
* @param imgTag
|
|
* @returns {string}
|
|
*/
|
|
function handleImg(imgTag) {
|
|
var src = getImgSrc(imgTag);
|
|
imgTag = handleWidth(imgTag);
|
|
return '<a href="' + src + '">' + imgTag + '></a';
|
|
}
|
|
|
|
/**
|
|
* Handle width attribute.
|
|
* @param imgTag
|
|
* @returns {*}
|
|
*/
|
|
function handleWidth(imgTag) {
|
|
// Check if the img tag has a width attribute set.
|
|
var widthMatch = /(?:width=")(.[^"]*)/g.exec(imgTag);
|
|
// If the width attribute is larger than maxWidth, change.
|
|
if (widthMatch) {
|
|
var width = widthMatch[1];
|
|
if (width > maxWidth) {
|
|
imgTag = imgTag.replace(widthMatch[0], 'width="' + maxWidth);
|
|
}
|
|
}
|
|
// No width attribute, add one.
|
|
// TODO: blows up the image when original is smaller than maxWidth.
|
|
// This occurs when using Markdown-it for example.
|
|
else {
|
|
imgTag = imgTag.replace('<img', '<img width="' + maxWidth + '" ');
|
|
}
|
|
|
|
return imgTag;
|
|
}
|
|
|
|
/**
|
|
* Get image src attribute.
|
|
* @param imgTag
|
|
* @returns {string}
|
|
*/
|
|
function getImgSrc(imgTag) {
|
|
var srcMatch = /(?:src=")(.[^"]*)/g.exec(imgTag);
|
|
var src = srcMatch[1];
|
|
return src;
|
|
}
|
|
}
|