Skip to content

Commit 2134466

Browse files
DavidAnsonDavidAnson
committed
Prototype for using HTML's dialog element instead of jBox for modal dialogs.
1 parent b655064 commit 2134466

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
@@ -2750,16 +2750,50 @@ osd.initialize = function (callback) {
27502750
$(".display-layout .preview").css("zoom", previewZoom);
27512751
}
27522752

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

27642798
$(".elements-container div.cf_tip").attr("title", i18n.getMessage("osdSectionHelpElements"));
27652799
$(".videomode-container div.cf_tip").attr("title", i18n.getMessage("osdSectionHelpVideoMode"));
@@ -3573,10 +3607,6 @@ osd.initialize = function (callback) {
35733607
};
35743608

35753609
osd.cleanup = function (callback) {
3576-
if (OSD.GUI.fontManager) {
3577-
OSD.GUI.fontManager.destroy();
3578-
}
3579-
35803610
// unbind "global" events
35813611
$(document).unbind("keypress");
35823612
$(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)