Skip to content

Commit 14c3f70

Browse files
DavidAnsonDavidAnson
committed
Prototype for using HTML's dialog element instead of jBox for modal dialogs.
1 parent 1809bb8 commit 14c3f70

File tree

3 files changed

+100
-65
lines changed

3 files changed

+100
-65
lines changed

‎locales/en/messages.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5308,6 +5308,10 @@
53085308
"message": "Font",
53095309
"description": "Content of the selector for the OSD Font in the preview"
53105310
},
5311+
"osdSetupFontManagerTitle": {
5312+
"message": "OSD Font Manager",
5313+
"description": "Dialog title"
5314+
},
53115315
"osdSetupFontTypeDefault": {
53125316
"message": "Default",
53135317
"description": "Font Default"

‎src/js/tabs/osd.js

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2760,16 +2760,50 @@ osd.initialize = function (callback) {
27602760
$(".display-layout .preview").css("zoom", previewZoom);
27612761
}
27622762

2763-
// Open modal window
2764-
OSD.GUI.fontManager = new jBox("Modal", {
2765-
width: 750,
2766-
height: 455,
2767-
closeButton: "title",
2768-
animation: false,
2769-
attach: $("#fontmanager"),
2770-
title: "OSD Font Manager",
2771-
content: $("#fontmanagercontent"),
2772-
});
2763+
// START: Reusable modal dialog functions
2764+
2765+
// Get the title bar for a modal dialog
2766+
const getDialogTitleBar = (messageId, onClose) => {
2767+
// HTML structure (should use flexbox)
2768+
const dialogTitleBar = $(`
2769+
<div class="jBox-title" style="height: 47px; padding: 15px 20px;">
2770+
<div style="float: left">${i18n.getMessage(messageId)}</div>
2771+
<div id="dialogclose" style="float: right; cursor: pointer; padding: 5px; margin: -5px;">
2772+
<svg width="10" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
2773+
<line x1="0" y1="0" x2="10" y2="10" stroke="var(--surface-950)" stroke-width="2"/>
2774+
<line x1="0" y1="10" x2="10" y2="0" stroke="var(--surface-950)" stroke-width="2"/>
2775+
</svg>
2776+
</div>
2777+
</div>
2778+
`);
2779+
// Handle close button
2780+
dialogTitleBar.find("#dialogclose").on("click", onClose);
2781+
// Return title bar
2782+
return dialogTitleBar;
2783+
};
2784+
2785+
// Associate a button with a modal dialog
2786+
const enableModalDialog = (buttonSelector, dialogSelector, messageId) => {
2787+
// Get dialog elements
2788+
const dialog = $(dialogSelector);
2789+
const dialogElement = dialog.get(0);
2790+
const dialogContainerElement = dialog.children().first().get(0);
2791+
// Add dialog title bar
2792+
dialog.prepend(getDialogTitleBar(messageId, () => dialogElement.close()));
2793+
// Handle button click
2794+
$(buttonSelector).on("click", () => {
2795+
dialogElement.showModal();
2796+
// Reset any previous scrolling
2797+
dialogContainerElement.scroll(0, 0);
2798+
});
2799+
// Return dialog
2800+
return dialogElement;
2801+
};
2802+
2803+
// END: Reusable modal dialog functions
2804+
2805+
// Enable font manager dialog
2806+
OSD.GUI.fontManager = enableModalDialog("#fontmanager", "#fontmanagerdialog", "osdSetupFontManagerTitle");
27732807

27742808
$(".elements-container div.cf_tip").attr("title", i18n.getMessage("osdSectionHelpElements"));
27752809
$(".videomode-container div.cf_tip").attr("title", i18n.getMessage("osdSectionHelpVideoMode"));
@@ -3583,10 +3617,6 @@ osd.initialize = function (callback) {
35833617
};
35843618

35853619
osd.cleanup = function (callback) {
3586-
if (OSD.GUI.fontManager) {
3587-
OSD.GUI.fontManager.destroy();
3588-
}
3589-
35903620
// unbind "global" events
35913621
$(document).unbind("keypress");
35923622
$(document).off("click", "span.progressLabel a");

‎src/tabs/osd.html

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -149,57 +149,6 @@ <h1 class="tab_title">
149149
</div>
150150
</div>
151151
</div>
152-
153-
<!-- Font Manager dialog -->
154-
<div id="fontmanagercontent" style="display:none; width:720px;">
155-
<div class="font-picker" style="margin-bottom: 10px;">
156-
<h1 class="tab_title" i18n="osdSetupFontPresets"></h1>
157-
<!-- Font preview and list -->
158-
<label class="font-manager-version-info"></label>
159-
<div class="content_wrapper font-preview"></div>
160-
<div class="fontpresets_wrapper">
161-
<label id="font-selector-label" i18n="osdSetupFontPresetsSelector"></label>
162-
<select class="fontpresets">
163-
<option value="-1" disabled i18n="osdSetupFontPresetsSelectorCustomOption"></option>
164-
<!-- Other values populated at runtime -->
165-
</select>
166-
<span id="font-selector-span" i18n="osdSetupFontPresetsSelectorOr"> Or </span>
167-
</div>
168-
<!-- Boot logo setup -->
169-
<h1 class="tab_title" i18n="osdSetupCustomLogoTitle"></h1>
170-
<div class="grid-row">
171-
<div id="font-logo-preview-container" class="content_wrapper grid-col col6">
172-
<div id="font-logo-preview">
173-
<!-- this will be resized at runtime -->
174-
</div>
175-
</div>
176-
<div id="font-logo-info grid-col col6">
177-
<h3 i18n="osdSetupCustomLogoInfoTitle"></h3>
178-
<ul>
179-
<li id="font-logo-info-size" i18n="osdSetupCustomLogoInfoImageSize"></li>
180-
<li id="font-logo-info-colors" i18n="osdSetupCustomLogoInfoColorMap"></li>
181-
</ul>
182-
<p id="font-logo-info-upload-hint" i18n="osdSetupCustomLogoInfoUploadHint"></p>
183-
</div>
184-
</div>
185-
<!-- Replace logo button -->
186-
<div class="default_btn" style="width:100%; float:left;">
187-
<a class="replace_logo" i18n="osdSetupCustomLogoOpenImageButton"></a>
188-
</div>
189-
<!-- Upload progress bar -->
190-
<div class="info">
191-
<a name="progressbar"></a>
192-
<progress class="progress" value="0" min="0" max="100"></progress>
193-
<div class="progressLabel" style="margin-top: -21px; width: 95%; text-align: center; position: absolute;"></div>
194-
</div>
195-
</div>
196-
<!-- Upload button -->
197-
<div class="default_btn green" style="width:100%; float:left;
198-
">
199-
<a class="flash_font active" i18n="osdSetupUploadFont"></a>
200-
</div>
201-
</div>
202-
203152
</div>
204153
</div>
205154
</div>
@@ -211,3 +160,55 @@ <h3 i18n="osdSetupCustomLogoInfoTitle"></h3>
211160
<a class="active save" href="#" i18n="osdSetupSave"></a>
212161
</div>
213162
</div>
163+
164+
<!-- Font Manager dialog -->
165+
<dialog closedby="any" id="fontmanagerdialog" style="width: 750px; border-color: var(--primary-500); padding: 0px;">
166+
<div style="height: 430px; padding: 10px 15px; overflow-y: scroll;">
167+
<div class="font-picker" style="margin-bottom: 10px;">
168+
<h1 class="tab_title" i18n="osdSetupFontPresets"></h1>
169+
<!-- Font preview and list -->
170+
<label class="font-manager-version-info"></label>
171+
<div class="content_wrapper font-preview"></div>
172+
<div class="fontpresets_wrapper">
173+
<label id="font-selector-label" i18n="osdSetupFontPresetsSelector"></label>
174+
<select class="fontpresets">
175+
<option value="-1" disabled i18n="osdSetupFontPresetsSelectorCustomOption"></option>
176+
<!-- Other values populated at runtime -->
177+
</select>
178+
<span id="font-selector-span" i18n="osdSetupFontPresetsSelectorOr"> Or </span>
179+
</div>
180+
<!-- Boot logo setup -->
181+
<h1 class="tab_title" i18n="osdSetupCustomLogoTitle"></h1>
182+
<div class="grid-row">
183+
<div id="font-logo-preview-container" class="content_wrapper grid-col col6">
184+
<div id="font-logo-preview">
185+
<!-- this will be resized at runtime -->
186+
</div>
187+
</div>
188+
<div id="font-logo-info grid-col col6">
189+
<h3 i18n="osdSetupCustomLogoInfoTitle"></h3>
190+
<ul>
191+
<li id="font-logo-info-size" i18n="osdSetupCustomLogoInfoImageSize"></li>
192+
<li id="font-logo-info-colors" i18n="osdSetupCustomLogoInfoColorMap"></li>
193+
</ul>
194+
<p id="font-logo-info-upload-hint" i18n="osdSetupCustomLogoInfoUploadHint"></p>
195+
</div>
196+
</div>
197+
<!-- Replace logo button -->
198+
<div class="default_btn" style="width:100%; float:left;">
199+
<a class="replace_logo" i18n="osdSetupCustomLogoOpenImageButton"></a>
200+
</div>
201+
<!-- Upload progress bar -->
202+
<div class="info">
203+
<a name="progressbar"></a>
204+
<progress class="progress" value="0" min="0" max="100"></progress>
205+
<div class="progressLabel" style="margin-top: -21px; width: 95%; text-align: center; position: absolute;"></div>
206+
</div>
207+
</div>
208+
<!-- Upload button -->
209+
<div class="default_btn green" style="width:100%; float:left;
210+
">
211+
<a class="flash_font active" i18n="osdSetupUploadFont"></a>
212+
</div>
213+
</div>
214+
</dialog>

0 commit comments

Comments
 (0)