Переглянути джерело

making legacy.js work even on IE 6 by avoiding jQuery

El RIDO 6 роки тому
батько
коміт
4332d0edb0
6 змінених файлів з 82 додано та 71 видалено
  1. 1 1
      js/common.js
  2. 45 30
      js/legacy.js
  3. 2 2
      js/privatebin.js
  4. 30 34
      js/test/Check.js
  5. 2 2
      tpl/bootstrap.php
  6. 2 2
      tpl/page.php

+ 1 - 1
js/common.js

@@ -19,8 +19,8 @@ global.prettyPrintOne = window.PR.prettyPrintOne;
 global.showdown = require('./showdown-1.9.1');
 global.DOMPurify = require('./purify-1.0.11');
 global.baseX = require('./base-x-3.0.5.1').baseX;
+global.Legacy = require('./legacy').Legacy;
 require('./bootstrap-3.3.7');
-require('./legacy');
 require('./privatebin');
 
 // internal variables

+ 45 - 30
js/legacy.js

@@ -12,26 +12,19 @@
  *
  * IMPORTANT NOTICE FOR DEVELOPERS:
  * The logic in this file is intended to run in legacy browsers. Avoid any use of:
- * - ES6 or newer in general
+ * - jQuery (doesn't work in older browsers)
+ * - ES5 or newer in general
  * - const/let, use the traditional var declarations instead
  * - async/await or Promises, use traditional callbacks
  * - shorthand function notation "() => output", use the full "function() {return output;}" style
  * - IE doesn't support:
  *   - URL(), use the traditional window.location object
  *   - endsWith(), use indexof()
- * - yes, this logic needs to support IE 5 or 6, to at least display the error message
+ * - yes, this logic needs to support IE 6, to at least display the error message
  */
 
-// main application start, called when DOM is fully loaded
-jQuery(document).ready(function() {
-    'use strict';
-    // run main controller
-    $.Legacy.Check.init();
-});
-
-jQuery.Legacy = (function($) {
-    'use strict';
-
+'use strict';
+(function() {
     /**
      * compatibility check
      *
@@ -198,23 +191,29 @@ jQuery.Legacy = (function($) {
          */
         function showError(message)
         {
-            var $error = $('#errormessage'),
-                $glyphIcon = $error.find(':first'),
-                $element;
-            if ($glyphIcon.length) {
-                // if there is an icon, we need to provide an inner element
-                // to translate the message into, instead of the parent
-                $element = $('<span>');
-                $error.html(' ').prepend($glyphIcon).append($element);
-            } else {
-                $element = $error;
-            }
+            var element = document.getElementById('errormessage');
             if (message.indexOf('<a') === -1) {
-                $element.text(message);
+                element.appendChild(
+                    document.createTextNode(message)
+                );
             } else {
-                $element.html(message);
+                element.innerHTML = message;
             }
-            $error.removeClass('hidden');
+            removeHiddenFromId('errormessage');
+        }
+
+        /**
+         * removes "hidden" CSS class from element with given ID
+         *
+         * @private
+         * @name   Check.removeHiddenFromId
+         * @param  {string} id
+         * @function
+         */
+        function removeHiddenFromId(id)
+        {
+            var element = document.getElementById(id);
+            if (element) element.className = element.className.replace(/\bhidden\b/g, '');
         }
 
         /**
@@ -267,13 +266,13 @@ jQuery.Legacy = (function($) {
                         )
                     );
                 }
-                $('#oldnotice').removeClass('hidden');
+                removeHiddenFromId('oldnotice');
                 init = true;
                 return;
             }
 
             if (!isSecureContext()) {
-                $('#httpnotice').removeClass('hidden');
+                removeHiddenFromId('httpnotice');
             }
             init = true;
 
@@ -284,7 +283,23 @@ jQuery.Legacy = (function($) {
         return me;
     })();
 
-    return {
+    // main application start, called when DOM is fully loaded
+    if (document.readyState === 'complete' || (!document.attachEvent && document.readyState === 'interactive')) {
+        Check.init();
+    } else {
+        if (document.addEventListener) {
+            // first choice is DOMContentLoaded event
+            document.addEventListener('DOMContentLoaded', Check.init, false);
+            // backup is window load event
+            window.addEventListener('load', Check.init, false);
+        } else {
+            // must be IE
+            document.attachEvent('onreadystatechange', Check.init);
+            window.attachEvent('onload', Check.init);
+        }
+    }
+
+    this.Legacy = {
         Check: Check
     };
-})(jQuery);
+}).call(this);

+ 2 - 2
js/privatebin.js

@@ -4926,12 +4926,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             UiHelper.init();
 
             // check for legacy browsers before going any further
-            if (!$.Legacy.Check.getInit()) {
+            if (!Legacy.Check.getInit()) {
                 // Legacy check didn't complete, wait and try again
                 setTimeout(init, 500);
                 return;
             }
-            if (!$.Legacy.Check.getStatus()) {
+            if (!Legacy.Check.getStatus()) {
                 // something major is wrong, stop right away
                 return;
             }

+ 30 - 34
js/test/Check.js

@@ -1,6 +1,6 @@
 'use strict';
 var common = require('../common');
-/* global WebCrypto */
+/* global Legacy, WebCrypto */
 
 describe('Check', function () {
     describe('init', function () {
@@ -15,17 +15,15 @@ describe('Check', function () {
                 jsc.elements(['Bot', 'bot']),
                 'string',
                 function (prefix, botBit, suffix) {
-                    const clean = jsdom('', {
-                        'userAgent': prefix + botBit + suffix
-                    });
-                    $('body').html(
+                    const clean = jsdom(
                         '<html><body><div id="errormessage" class="hidden"></div>' +
-                        '</body></html>'
+                        '</body></html>', {
+                            'userAgent': prefix + botBit + suffix
+                        }
                     );
-                    $.PrivateBin.Alert.init();
-                    $.Legacy.Check.init();
-                    const result1 = $.Legacy.Check.getInit() && !$.Legacy.Check.getStatus(),
-                          result2 = !$('#errormessage').hasClass('hidden');
+                    Legacy.Check.init();
+                    const result1 = Legacy.Check.getInit() && !Legacy.Check.getStatus(),
+                          result2 = (document.getElementById('errormessage').className !== 'hidden');
                     clean();
                     return result1 && result2;
                 }
@@ -42,19 +40,18 @@ describe('Check', function () {
             function (secureProtocol, localhost, domain, tld) {
                 const isDomain = localhost === '',
                       isSecureContext = secureProtocol || !isDomain || tld.length > 0,
-                      clean = jsdom('', {
-                          'url': (secureProtocol ? 'https' : 'http' ) + '://' +
-                                 (isDomain ? domain.join('') + tld : localhost) + '/'
-                      });
-                $('body').html(
-                    '<html><body><div id="errormessage" class="hidden"></div>'+
-                    '<div id="oldnotice" class="hidden"></div></body></html>'
-                );
-                $.PrivateBin.Alert.init();
-                $.Legacy.Check.init();
-                const result1 = $.Legacy.Check.getInit() && !$.Legacy.Check.getStatus(),
-                      result2 = isSecureContext === $('#errormessage').hasClass('hidden'),
-                      result3 = !$('#oldnotice').hasClass('hidden');
+                      clean = jsdom(
+                          '<html><body><div id="errormessage" class="hidden"></div>' +
+                          '<div id="oldnotice" class="hidden"></div></body></html>',
+                          {
+                              'url': (secureProtocol ? 'https' : 'http' ) + '://' +
+                                     (isDomain ? domain.join('') + tld : localhost) + '/'
+                          }
+                      );
+                Legacy.Check.init();
+                const result1 = Legacy.Check.getInit() && !Legacy.Check.getStatus(),
+                      result2 = isSecureContext === (document.getElementById('errormessage').className === 'hidden'),
+                      result3 = (document.getElementById('oldnotice').className !== 'hidden');
                 clean();
                 return result1 && result2 && result3;
             }
@@ -65,18 +62,17 @@ describe('Check', function () {
             'bool',
             jsc.nearray(common.jscA2zString()),
             function (secureProtocol, domain) {
-                const clean = jsdom('', {
-                          'url': (secureProtocol ? 'https' : 'http' ) + '://' + domain.join('') + '/'
-                      });
-                $('body').html(
-                    '<html><body><div id="httpnotice" class="hidden"></div>'+
-                    '</body></html>'
-                );
+                const clean = jsdom(
+                          '<html><body><div id="httpnotice" class="hidden"></div>' +
+                          '</body></html>',
+                          {
+                              'url': (secureProtocol ? 'https' : 'http' ) + '://' + domain.join('') + '/'
+                          }
+                      );
                 window.crypto = new WebCrypto();
-                $.PrivateBin.Alert.init();
-                $.Legacy.Check.init();
-                const result1 = $.Legacy.Check.getInit() && $.Legacy.Check.getStatus(),
-                      result2 = secureProtocol === $('#httpnotice').hasClass('hidden');
+                Legacy.Check.init();
+                const result1 = Legacy.Check.getInit() && Legacy.Check.getStatus(),
+                      result2 = secureProtocol === (document.getElementById('httpnotice').className === 'hidden');
                 clean();
                 return result1 && result2;
             }

+ 2 - 2
tpl/bootstrap.php

@@ -71,8 +71,8 @@ if ($MARKDOWN):
 endif;
 ?>
 		<script type="text/javascript" data-cfasync="false" src="js/purify-1.0.11.js" integrity="sha512-p7UyJuyBkhMcMgE4mDsgK0Lz70OvetLefua1oXs1OujWv9gOxh4xy8InFux7bZ4/DAZsTmO4rgVwZW9BHKaTaw==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/legacy.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-tujqWT2EpSr9Iw6z9ET4P7x4lO6hMT+ccqVvWsq9lZjgbWa52AcML4MMiK6/VNFGna9i1IlyvloY9vBf3HH9XQ==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-qJ7Lfyl7375UWjsItSmAUFwhvynGHUy9U1ldU2OCpFOr5YWhAluEIN0/8ztO7p+5DcljE3wYst1b0ZBiVBEnag==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/legacy.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-mLqRoF9An6JCayodTEduwZLCissP4ItBQmNl1FCN8tgFlnOa0pd5Lu6SOJTDJaWVkiBf87FkLu3hq5LFV8p0jA==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-4iMFqnyyoJ/FJ33aHov+QeItaZ0JegMUjx7J5pXeknEwjXzx4oLw9F9ePI3WK/h3sUYTOK+hdv2JINNGMwi2Vg==" crossorigin="anonymous"></script>
 		<!--[if IE]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;}</style>
 		<![endif]-->

+ 2 - 2
tpl/page.php

@@ -49,8 +49,8 @@ if ($MARKDOWN):
 endif;
 ?>
 		<script type="text/javascript" data-cfasync="false" src="js/purify-1.0.11.js" integrity="sha512-p7UyJuyBkhMcMgE4mDsgK0Lz70OvetLefua1oXs1OujWv9gOxh4xy8InFux7bZ4/DAZsTmO4rgVwZW9BHKaTaw==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/legacy.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-tujqWT2EpSr9Iw6z9ET4P7x4lO6hMT+ccqVvWsq9lZjgbWa52AcML4MMiK6/VNFGna9i1IlyvloY9vBf3HH9XQ==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-qJ7Lfyl7375UWjsItSmAUFwhvynGHUy9U1ldU2OCpFOr5YWhAluEIN0/8ztO7p+5DcljE3wYst1b0ZBiVBEnag==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/legacy.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-mLqRoF9An6JCayodTEduwZLCissP4ItBQmNl1FCN8tgFlnOa0pd5Lu6SOJTDJaWVkiBf87FkLu3hq5LFV8p0jA==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-4iMFqnyyoJ/FJ33aHov+QeItaZ0JegMUjx7J5pXeknEwjXzx4oLw9F9ePI3WK/h3sUYTOK+hdv2JINNGMwi2Vg==" crossorigin="anonymous"></script>
 		<!--[if IE]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;}</style>
 		<![endif]-->