Add popup display mode

Allows the popup to be stretched to the full width of the screen, anchored to the top or bottom of the window.
This commit is contained in:
toasted-nutbread 2019-02-14 21:42:59 -05:00
parent 01f611d189
commit ba972d8547
5 changed files with 37 additions and 0 deletions

View File

@ -190,6 +190,7 @@ function optionsSetDefaults(options) {
debugInfo: false, debugInfo: false,
maxResults: 32, maxResults: 32,
showAdvanced: false, showAdvanced: false,
popupDisplayMode: 'default',
popupWidth: 400, popupWidth: 400,
popupHeight: 250, popupHeight: 250,
popupOffset: 10, popupOffset: 10,

View File

@ -31,6 +31,7 @@ async function formRead() {
optionsNew.general.debugInfo = $('#show-debug-info').prop('checked'); optionsNew.general.debugInfo = $('#show-debug-info').prop('checked');
optionsNew.general.showAdvanced = $('#show-advanced-options').prop('checked'); optionsNew.general.showAdvanced = $('#show-advanced-options').prop('checked');
optionsNew.general.maxResults = parseInt($('#max-displayed-results').val(), 10); optionsNew.general.maxResults = parseInt($('#max-displayed-results').val(), 10);
optionsNew.general.popupDisplayMode = $('#popup-display-mode').val();
optionsNew.general.popupWidth = parseInt($('#popup-width').val(), 10); optionsNew.general.popupWidth = parseInt($('#popup-width').val(), 10);
optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10); optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10);
optionsNew.general.popupOffset = parseInt($('#popup-offset').val(), 10); optionsNew.general.popupOffset = parseInt($('#popup-offset').val(), 10);
@ -162,6 +163,7 @@ async function onReady() {
$('#show-debug-info').prop('checked', options.general.debugInfo); $('#show-debug-info').prop('checked', options.general.debugInfo);
$('#show-advanced-options').prop('checked', options.general.showAdvanced); $('#show-advanced-options').prop('checked', options.general.showAdvanced);
$('#max-displayed-results').val(options.general.maxResults); $('#max-displayed-results').val(options.general.maxResults);
$('#popup-display-mode').val(options.general.popupDisplayMode);
$('#popup-width').val(options.general.popupWidth); $('#popup-width').val(options.general.popupWidth);
$('#popup-height').val(options.general.popupHeight); $('#popup-height').val(options.general.popupHeight);
$('#popup-offset').val(options.general.popupOffset); $('#popup-offset').val(options.general.popupOffset);

View File

@ -74,6 +74,14 @@
</select> </select>
</div> </div>
<div class="form-group">
<label for="popup-display-mode">Popup display mode</label>
<select class="form-control" id="popup-display-mode">
<option value="default">Default</option>
<option value="full-width">Full width</option>
</select>
</div>
<div class="form-group options-advanced"> <div class="form-group options-advanced">
<label for="audio-playback-volume">Audio playback volume (percent)</label> <label for="audio-playback-volume">Audio playback volume (percent)</label>
<input type="number" min="0" max="100" id="audio-playback-volume" class="form-control"> <input type="number" min="0" max="100" id="audio-playback-volume" class="form-control">

View File

@ -27,3 +27,25 @@ iframe#yomichan-float {
visibility: hidden; visibility: hidden;
z-index: 2147483647; z-index: 2147483647;
} }
iframe#yomichan-float.yomichan-float-full-width {
border-left: none;
border-right: none;
left: 0 !important;
right: 0 !important;
width: 100% !important;
box-sizing: border-box;
resize: none;
}
iframe#yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
border-bottom: none;
top: auto !important;
bottom: 0 !important;
}
iframe#yomichan-float.yomichan-float-full-width.yomichan-float-above {
border-top: none;
top: 0 !important;
bottom: auto !important;
}

View File

@ -62,6 +62,7 @@ class Popup {
} }
} }
let above = false;
let y = 0; let y = 0;
let height = Math.max(containerHeight, options.general.popupHeight); let height = Math.max(containerHeight, options.general.popupHeight);
const yBelow = elementRect.bottom + options.general.popupOffset; const yBelow = elementRect.bottom + options.general.popupOffset;
@ -75,11 +76,14 @@ class Popup {
} else { } else {
height = Math.max(height - overflowAbove, 0); height = Math.max(height - overflowAbove, 0);
y = Math.max(yAbove - height, 0); y = Math.max(yAbove - height, 0);
above = true;
} }
} else { } else {
y = yBelow; y = yBelow;
} }
this.container.classList.toggle('yomichan-float-full-width', options.general.popupDisplayMode === 'full-width');
this.container.classList.toggle('yomichan-float-above', above);
this.container.style.left = `${x}px`; this.container.style.left = `${x}px`;
this.container.style.top = `${y}px`; this.container.style.top = `${y}px`;
this.container.style.width = `${width}px`; this.container.style.width = `${width}px`;