Showing error message if JavaScript is off or browser not supported (not for view mode)

2025-10-29 06:05:55 +01:00 · 2015-12-24 12:57:46 +01:00
parent 1c523e772d
commit 2ae55dd150
7 changed files with 85 additions and 19 deletions
--- a/src/client/js/app-edit.js
+++ b/src/client/js/app-edit.js
@@ -6,8 +6,14 @@
      updatePreviewRunning = false,
      previewIsDirty = false;

+  if (slimwiki.supportedBrowser) {
+    init();
+  }
+

  function init() {
+    document.getElementById('close-edit-mode').style.display = 'block';
+
    editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
      // Config see: https://codemirror.net/doc/manual.html
      mode: 'gfm',
@@ -58,6 +64,4 @@
    window.scrollTo(0, scrollFactor * (bodyElem.scrollHeight - bodyElem.clientHeight));
  }

-  init();
-
 })(window, document, slimwiki, console, CodeMirror);
--- a/src/client/js/app-view.js
+++ b/src/client/js/app-view.js
@@ -7,7 +7,9 @@
    updateSyntaxHighlighting: updateSyntaxHighlighting
  };

-  init();
+  if (slimwiki.supportedBrowser) {
+    init();
+  }


  function init() {
@@ -21,6 +23,8 @@
  }

  function initCreateUserForm() {
+    document.getElementById('create-user-box').style.display = 'block';
+
    document.getElementById('showConfigBtn').addEventListener('click', function() {
      var user = document.getElementById('user').value,
          pass = document.getElementById('password').value;
--- a/src/client/less/layout.less
+++ b/src/client/less/layout.less
@@ -20,7 +20,8 @@ html, body {
 }

 .mode-edit {
-  .close-edit-mode {
+  #close-edit-mode {
+    display: none;
    position: fixed;
    top: 0;
    right: 50%;
@@ -31,6 +32,7 @@ html, body {
  }

  #editor-wrapper {
+    display: none;
    position: fixed;
    top: 0;
    left: 0;
@@ -46,6 +48,10 @@ html, body {
    // -> We hide the textarea in order to avoid flickering while loading
    display: none;
  }
+
+  #main-wrapper {
+    display: none;
+  }
 }

 .main-column {
--- a/src/client/less/view.less
+++ b/src/client/less/view.less
@@ -10,6 +10,16 @@ body {

 // Views

+#fatal-error-message {
+  margin-top: 150px;
+  text-align: center;
+  font-size: 20px;
+
+  .btn {
+    margin-top: 30px;
+  }
+}
+
 .breadcrumbs {
  background-color: white;

@@ -46,7 +56,9 @@ footer {
 }

 .mode-createUser {
-  form {
+  #create-user-box {
+    display: none;
+
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
--- a/src/server/i18n/de.php
+++ b/src/server/i18n/de.php
@@ -1,7 +1,10 @@
 <?php

 $i18n = array(
+    'error.noJavaScript' => 'Bitte aktivieren Sie JavaScript in den Einstellungen Ihres Browser um diese Seite verwenden zu können.',
+    'error.browserNotSupported' => 'Ihr Browser wird nicht unterstützt. Bitte verwenden Sie einen aktuellen Browser.',
    'button.cancel' => 'Abbrechen',
+    'button.back' => 'Zurück',
    'button.edit' => 'Bearbeiten',
    'button.createUser' => 'Benutzer erstellen',
    'createUser.userName' => 'Benutzername',
--- a/src/server/i18n/en.php
+++ b/src/server/i18n/en.php
@@ -1,7 +1,10 @@
 <?php

 $i18n = array(
+    'error.noJavaScript' => 'Please activate JavaScript in the settings of your browser in order to use this site.',
+    'error.browserNotSupported' => 'Your browser is not supported. Please use an up-to-date browser.',
    'button.cancel' => 'Cancel',
+    'button.back' => 'Back',
    'button.edit' => 'Edit',
    'button.createUser' => 'Create user',
    'createUser.userName' => 'User name',
--- a/src/server/layout/page.php
+++ b/src/server/layout/page.php
@@ -37,19 +37,65 @@ $mode = $data['mode'];
  <link href=".tmp/app-view.css" rel="stylesheet" />
  <!-- endbuild -->

+  <script type="text/javascript">
+    window.slimwiki = {
+      <?php // We support IE 9+. We need addEventListener, querySelectorAll and JSON.parse  ?>
+      supportedBrowser: !! document.addEventListener,
+      settings: <?php
+        $settings = array(
+          "mode" => $mode
+        );
+        if ($mode == 'edit') {
+          $settings['articleFilename'] = $data['articleFilename'];
+        }
+        echo json_encode($settings);
+      ?>
+    };
+  </script>
+
 </head>
 <body class="mode-<?php echo $mode; ?>">

 <?php
+
+if ($mode != 'view') {
+  // Show an error message if JavaScript is off or if the browser is not supported.
+  // NOTE: In view mode we don't show an error. Instead, syntax highlighting will be off for unsupported browsers.
+  ?><div id="fatal-error-message"><div><?php echo $i18n['error.noJavaScript']; ?></div><a class="btn btn-default" href="<?php echo $data['requestPath']; ?>"><?php echo $i18n['button.back']; ?></a></div>
+  <script type="text/javascript">
+    (function() {
+      var errElem = document.getElementById('fatal-error-message');
+      if (slimwiki.supportedBrowser) {
+        errElem.parentNode.removeChild(errElem);
+      } else {
+        errElem.firstChild.innerHTML = <?php echo json_encode($i18n['error.browserNotSupported']); ?>;
+      }
+    })();
+  </script>
+  <?php
+}
+
 if ($mode == 'edit') {
 ?><div id="editor-wrapper">
  <textarea id="editor"><?php echo str_replace('<', '&lt;', $data['articleMarkdown']); ?></textarea>
 </div>
-<div class="close-edit-mode"><a class="btn btn-default" href="<?php echo $data['requestPath']; ?>">X</a></div><?php
+<script type="text/javascript">
+  if (slimwiki.supportedBrowser) {
+    document.getElementById('editor-wrapper').style.display = 'block';
+  }
+</script>
+<div id="close-edit-mode"><a class="btn btn-default" href="<?php echo $data['requestPath']; ?>">X</a></div><?php
 } // if ($mode == 'edit')

 ?>
 <div id="main-wrapper"><?php
+  if ($mode == 'edit') {
+    ?><script type="text/javascript">
+      if (slimwiki.supportedBrowser) {
+        document.getElementById('main-wrapper').style.display = 'block';
+      }
+    </script><?php
+  }

  if ($mode == 'view' || $mode == 'edit') {
  ?>
@@ -79,7 +125,7 @@ if ($mode == 'edit') {

  if ($mode == 'createUser') {
  ?>
-  <form onsubmit="return false">
+  <form id="create-user-box" onsubmit="return false">
    <div class="form-group">
      <label for="user"><?php echo $i18n['createUser.userName']; ?></label>
      <input type="text" class="form-control" id="user" placeholder="<?php echo $i18n['createUser.userName']; ?>">
@@ -104,18 +150,6 @@ if ($mode == 'edit') {

 ?></div><?php // id="main-wrapper" ?>

-<script type="text/javascript">
-  window.slimwiki = <?php
-    $settings = array(
-      "mode" => $mode
-    );
-    if ($mode == 'edit') {
-      $settings['articleFilename'] = $data['articleFilename'];
-    }
-    echo json_encode(array( "settings" => $settings ));
-  ?>;
-</script>
-
 <?php if ($mode == 'edit') { ?>
 <!-- build:js client/edit.js -->
 <script src="client/libs/CodeMirror/lib/codemirror.js"></script>