Skip to content

Commit 33cb2ec

Browse files
connortechnologyconnortechnology
authored
Merge pull request #4305 from IgorA100/patch-58218
Feat: Font "Material Icons" load and display as soon as possible
2 parents 36fa6ee + 1166000 commit 33cb2ec

File tree

2 files changed

+60
-40
lines changed

2 files changed

+60
-40
lines changed

‎web/skins/classic/includes/functions.php

Lines changed: 60 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,28 @@ function xhtmlHeadersStart($file, $title) {
6464
<link rel="shortcut icon" href="graphics/favicon.ico"/>
6565
';
6666
}
67-
echo output_link_if_exists(array('css/base/material-icons.css'));
67+
68+
echo output_link_if_exists(array('fonts/material-icons.woff2'), false, $param = ['global', 'preload', ' as="font" type="font/woff2" crossorigin']);
69+
//echo output_link_if_exists(array('fonts/material-icons.woff'), false, $param = ['global', 'preload', ' as="font" type="font/woff" crossorigin']);
70+
echo output_link_if_exists(array('css/base/material-icons.css'), false);
71+
echo output_script_if_exists(array(
72+
'js/fontfaceobserver.standalone.js',
73+
));
74+
75+
?>
76+
<script nonce="<?php echo $cspNonce; ?>">
77+
const fontMaterialIcons = new FontFaceObserver("Material Icons", {weight: 400});
78+
fontMaterialIcons.load(null, 30000).then(function() {
79+
console.log("Material Icons is loaded");
80+
var _style_ = document.createElement('style');
81+
_style_.innerHTML = `.material-icons {display: inline-block !important;}`;
82+
document.querySelector('head').prepend(_style_);
83+
}, function() {
84+
console.log("Material Icons is NOT loaded");
85+
});
86+
</script>
87+
<?php
88+
6889
echo output_cache_busted_stylesheet_links(array(
6990
'css/reset.css',
7091
'css/font-awesome.min.css',
@@ -161,15 +182,25 @@ function getNavBarHTML() {
161182
return ob_get_clean();
162183
}
163184

164-
function output_link_if_exists($files, $cache_bust=true) {
185+
function output_link_if_exists($files, $cache_bust=true, $param=false) {
165186
global $skin;
166187
$html = array();
188+
if ($param) {
189+
$global_file = $param[0]; // The file is global or from a skin
190+
$rel = '"'.$param[1].'"';
191+
$suffix = $param[2];
192+
} else {
193+
$global_file = false;
194+
$rel = '"stylesheet"';
195+
$suffix = ' type="text/css"';
196+
}
167197
foreach ( $files as $file ) {
168-
if ( getSkinFile($file) ) {
198+
$file_ = ($global_file && file_exists($file)) ? $file : getSkinFile($file);
199+
if ($file_) {
169200
if ( $cache_bust ) {
170-
$html[] = '<link rel="stylesheet" href="'.cache_bust('skins/'.$skin.'/'.$file).'" type="text/css"/>';
201+
$html[] = '<link rel='.$rel.' href="'.cache_bust($file_).'" '.$suffix.'/>';
171202
} else {
172-
$html[] = '<link rel="stylesheet" href="skins/'.$skin.'/'.$file.'" type="text/css"/>';
203+
$html[] = '<link rel='.$rel.' href="'.$file_.'" '.$suffix.'/>';
173204
}
174205
}
175206
}
@@ -449,7 +480,7 @@ function getDbConHTML() {
449480
$result .= '<i class="material-icons md-18 mr-1" style="display: inline-block;">storage</i>'.PHP_EOL;
450481
$result .= translate('DB'). ': ' .$connections. '/' .$max_connections.PHP_EOL;
451482
$result .= '</li>'.PHP_EOL;
452-
483+
453484
return $result;
454485
}
455486

@@ -503,7 +534,7 @@ function getStorageHTML() {
503534
$result .= '</div>'.PHP_EOL;
504535
$result .= '</li>'.PHP_EOL;
505536
}
506-
537+
507538
return $result;
508539
}
509540

@@ -538,7 +569,7 @@ function getRamHTML() {
538569
} # end if SwapTotal
539570
$result .= '</li>'.PHP_EOL;
540571
}
541-
572+
542573
return $result;
543574
}
544575

@@ -643,7 +674,7 @@ function getZMVersionHTML() {
643674
$result .= '<li id="getZMVersionHTML" class="nav-item dropdown ' .$class. '" data-placement="bottom" title="' .$tt_text. '">'.PHP_EOL;
644675
$result .= $content;
645676
$result .= '</li>'.PHP_EOL;
646-
677+
647678
return $result;
648679
}
649680

@@ -669,11 +700,11 @@ function getNavBrandHTML() {
669700
function getConsoleHTML() {
670701
global $user;
671702
$result = '';
672-
703+
673704
if (count($user->viewableMonitorIds()) or !ZM\Monitor::find_one()) {
674705
$result .= '<li id="getConsoleHTML" class="nav-item"><a class="nav-link" href="?view=console">'.translate('Console').'</a></li>'.PHP_EOL;
675706
}
676-
707+
677708
return $result;
678709
}
679710

@@ -684,7 +715,7 @@ function getOptionsHTML() {
684715
if ( canView('System') ) {
685716
$result .= '<li id="getOptionsHTML" class="nav-item"><a class="nav-link" href="?view=options">'.translate('Options').'</a></li>'.PHP_EOL;
686717
}
687-
718+
688719
return $result;
689720
}
690721

@@ -706,7 +737,7 @@ function getLogHTML() {
706737
// Returns the html representing the log icon
707738
function getLogIconHTML() {
708739
$result = '';
709-
740+
710741
if ( canView('System') ) {
711742
if ( ZM\logToDatabase() > ZM\Logger::NOLOG ) {
712743
$logstate = logState();
@@ -716,18 +747,18 @@ function getLogIconHTML() {
716747
'</li>'.PHP_EOL;
717748
}
718749
}
719-
750+
720751
return $result;
721752
}
722753

723754
// Returns the html representing the X10 Devices menu item
724755
function getDevicesHTML() {
725756
$result = '';
726-
757+
727758
if ( ZM_OPT_X10 && canView('Devices') ) {
728759
$result .= '<li id="getDevicesHTML" class="nav-item"><a class="nav-link" href="?view=devices">Devices</a></li>'.PHP_EOL;
729760
}
730-
761+
731762
return $result;
732763
}
733764

@@ -761,20 +792,20 @@ function getCycleHTML($view) {
761792
$class = $view == 'cycle' ? ' selected' : '';
762793
$result .= '<li id="getCycleHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=watch&amp;cycle=true">' .translate('Cycle'). '</a></li>'.PHP_EOL;
763794
}
764-
795+
765796
return $result;
766797
}
767798

768799
// Returns the html representing the Montage menu item
769800
function getMontageHTML($view) {
770801
global $user;
771802
$result = '';
772-
803+
773804
if (canView('Stream') and count($user->viewableMonitorIds())) {
774805
$class = $view == 'montage' ? ' selected' : '';
775806
$result .= '<li id="getMontageHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=montage">' .translate('Montage'). '</a></li>'.PHP_EOL;
776807
}
777-
808+
778809
return $result;
779810
}
780811

@@ -801,42 +832,42 @@ function getMontageReviewHTML($view) {
801832
$class = $view == 'montagereview' ? ' selected' : '';
802833
$result .= '<li id="getMontageReviewHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=montagereview' .$live. '">'.translate('MontageReview').'</a></li>'.PHP_EOL;
803834
}
804-
835+
805836
return $result;
806837
}
807838

808839
// Returns the html representing the Montage menu item
809840
function getSnapshotsHTML($view) {
810841
$result = '';
811-
842+
812843
if (defined('ZM_FEATURES_SNAPSHOTS') and ZM_FEATURES_SNAPSHOTS and canView('Snapshots')) {
813844
$class = $view == 'snapshots' ? ' selected' : '';
814845
$result .= '<li id="getSnapshotsHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=snapshots">' .translate('Snapshots'). '</a></li>'.PHP_EOL;
815846
}
816-
847+
817848
return $result;
818849
}
819850

820851
function getReportsHTML($view) {
821852
$result = '';
822-
853+
823854
if (canView('Events')) {
824855
$class = ($view == 'reports' or $view == 'report') ? ' selected' : '';
825856
$result .= '<li id="getReportsHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=reports">'.translate('Reports').'</a></li>'.PHP_EOL;
826857
}
827-
858+
828859
return $result;
829860
}
830861

831862
// Returns the html representing the Audit Events Report menu item
832863
function getRprtEvntAuditHTML($view) {
833864
$result = '';
834-
865+
835866
if ( canView('Events') ) {
836867
$class = $view == 'report_event_audit' ? ' selected' : '';
837868
$result .= '<li id="getRprtEvntAuditHTML" class="nav-item"><a class="nav-link'.$class.'" href="?view=report_event_audit">'.translate('ReportEventAudit').'</a></li>'.PHP_EOL;
838869
}
839-
870+
840871
return $result;
841872
}
842873

@@ -942,7 +973,7 @@ function getStatsTableHTML($eid, $fid, $row='') {
942973
$result .= '</thead>'.PHP_EOL;
943974

944975
$result .= '<tbody>'.PHP_EOL;
945-
976+
946977
if ( count($stats) ) {
947978
foreach ( $stats as $stat ) {
948979
$result .= '<tr>'.PHP_EOL;
@@ -972,7 +1003,7 @@ function getStatsTableHTML($eid, $fid, $row='') {
9721003

9731004
$result .= '</tbody>'.PHP_EOL;
9741005
$result .= '</table>'.PHP_EOL;
975-
1006+
9761007
return $result;
9771008
}
9781009

@@ -993,6 +1024,7 @@ function xhtmlFooter() {
9931024
global $view;
9941025
global $skin;
9951026
global $basename;
1027+
9961028
$skinJsPhpFile = getSkinFile('js/skin.js.php');
9971029
$viewJsFile = getSkinFile('views/js/'.$basename.'.js');
9981030
$viewJsPhpFile = getSkinFile('views/js/'.$basename.'.js.php');
@@ -1012,7 +1044,6 @@ function xhtmlFooter() {
10121044
}
10131045

10141046
echo output_script_if_exists(array(
1015-
'js/fontfaceobserver.standalone.js',
10161047
'js/tableExport.min.js',
10171048
'js/bootstrap-table-1.23.5/bootstrap-table.min.js',
10181049
'js/bootstrap-table-1.23.5/extensions/locale/bootstrap-table-locale-all.min.js',

‎web/skins/classic/js/skin.js

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1231,15 +1231,6 @@ function stringToNumber(str) {
12311231
return parseInt(str.replace(/\D/g, ''));
12321232
}
12331233

1234-
function loadFontFaceObserver() {
1235-
const font = new FontFaceObserver('Material Icons', {weight: 400});
1236-
font.load().then(function() {
1237-
$j('.material-icons').css('display', 'inline-block');
1238-
}, function() {
1239-
$j('.material-icons').css('display', 'inline-block');
1240-
});
1241-
}
1242-
12431234
function thisClickOnStreamObject(clickObj) {
12441235
if (clickObj.id) {
12451236
if (clickObj.id.indexOf('evtStream') != -1 || clickObj.id.indexOf('liveStream') != -1) {
@@ -1593,6 +1584,4 @@ function initPageGeneral() {
15931584
});
15941585
}
15951586

1596-
loadFontFaceObserver();
1597-
15981587
$j( window ).on("load", initPageGeneral);

0 commit comments

Comments
 (0)