Commit 77861930 authored by BrokenEagle's avatar BrokenEagle Committed by evazion

Resize font and other size parameters when the image resizes

- Each element has the size style elements scaled to the font size with "em"
-- The font size of the element is scaled in percentage to the parent element
- All sizes are then scaled by changing the font size of the note container
- The scale resize calculation uses the large image size
-- Since this is the assumed default size for a user
- Preview sets the font size of the inner box to the base font size
-- This allows the calculations to be performed correctly
parent 44bcef03
......@@ -3,6 +3,7 @@ import Utility from './utility'
let Note = {
HIDE_DELAY: 250,
NORMALIZE_ATTRIBUTES: ['letter-spacing', 'line-height', 'margin-left', 'margin-right', 'margin-top', 'margin-bottom', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom'],
Box: {
create: function(id) {
......@@ -195,6 +196,9 @@ let Note = {
if (was_visible) {
container.style.display = 'block';
}
const $image = $("#image");
const percentage = 100 * ($image.width() / parseFloat($image.data('large-width')));
$(container).css('font-size', percentage + '%');
},
toggle_all: function() {
......@@ -314,7 +318,11 @@ let Note = {
set_text: function($note_body, $note_box, text) {
Note.Body.display_text($note_body, text);
if (Note.embed) {
Note.Body.display_text($note_box.children("div.note-box-inner-border"), text);
const $note_inner_box = $note_box.find("div.note-box-inner-border");
Note.Body.display_text($note_inner_box, text);
$note_inner_box.css("font-size", Note.base_font_size + "px");
Note.normalize_sizes($note_inner_box.children(), Note.base_font_size);
$note_inner_box.css("font-size", "");
}
Note.Body.resize($note_body);
Note.Body.bound_position($note_body);
......@@ -710,6 +718,7 @@ let Note = {
id: "x",
dragging: false,
editing: false,
base_font_size: null,
timeouts: [],
pending: {},
......@@ -749,6 +758,26 @@ let Note = {
Note.id += "x";
},
normalize_sizes: function ($note_elements, parent_font_size) {
if ($note_elements.length === 0) {
return;
}
$note_elements.each(function(i, element) {
const $element = $(element);
const computed_styles = window.getComputedStyle(element);
const font_size = parseFloat(computed_styles.fontSize);
Note.NORMALIZE_ATTRIBUTES.forEach(function(attribute) {
const original_size = parseFloat(computed_styles[attribute]) || 0;
const relative_em = original_size / font_size;
$element.css(attribute, relative_em + "em");
});
const font_percentage = 100 * (font_size / parent_font_size);
$element.css("font-size", font_percentage + "%");
$element.attr("size", "");
Note.normalize_sizes($element.children(), font_size);
});
},
clear_timeouts: function() {
Note.timeouts.forEach(clearTimeout);
Note.timeouts = [];
......@@ -769,10 +798,13 @@ let Note = {
$article.html()
);
});
$("#note-container").append(fragment);
const $note_container = $("#note-container");
$note_container.append(fragment);
if (Note.embed) {
Note.base_font_size = parseFloat(window.getComputedStyle($note_container[0]).fontSize);
$.each($(".note-box"), function(i, note_box) {
Note.Box.resize_inner_border($(note_box));
Note.normalize_sizes($("div.note-box-inner-border", note_box).children(), Note.base_font_size);
});
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment