Rewrite Mayan's Javascript suite MayanApp into ECMAScript2015. Remove use is waitForJQuery.

Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>

HISTORY.rst

@@ -25,7 +25,8 @@
 - Include querystring when force reload of a bare template view.
 - Speed up document image fade in reveal.
 - Use reseteable timer to ensure more document panels heights are matched.
-
+- Rewrote Mayan's Javascript suite MayanApp into ECMAScript2015.
+- Remove use is waitForJQuery.
 
 3.0.1 (2018-07-08)
 =================

mayan/apps/appearance/static/appearance/js/base.js

@@ -1,26 +1,12 @@
 'use strict';
 
-var app = new App();
+// Make it globally available. Used by event.links
+
+var MayanAppClass = MayanApp;
+
 var partialNavigation = new PartialNavigation({
     initialURL: initialURL,
+    disabledAnchorClasses: ['disabled'],
     excludeAnchorClasses: ['fancybox', 'new_window', 'non-ajax'],
-    formBeforeSerializeCallbacks: [App.MultiObjectFormProcess],
+    formBeforeSerializeCallbacks: [MayanApp.MultiObjectFormProcess],
 });
-
-jQuery(document).ready(function() {
-    app.setupAutoSubmit();
-    app.setupFullHeightResizing();
-    app.setupItemsSelector();
-    app.setupNavbarCollapse();
-    app.setupNewWindowAnchor();
-    app.setupAJAXperiodicWorkers();
-    partialNavigation.initialize();
-});
-
-var afterBaseLoad = function () {
-    MayanImage.intialize();
-    app.doToastrMessages();
-    app.resizeFullHeight();
-    app.setupSelect2();
-    app.setupScrollView();
-}

mayan/apps/appearance/static/appearance/js/mayan_image.js

@@ -1,79 +1,80 @@
 'use strict';
 
-var MayanImage = function (options) {
-    this.element = options.element;
-    this.load();
-}
+class MayanImage {
+    constructor (options) {
+        this.element = options.element;
+        this.load();
+    }
 
-MayanImage.intialize = function () {
-    var app = this;
+    static intialize () {
+        var app = this;
 
-    this.fancybox = $().fancybox({
-        animationDuration : 300,
-        buttons : [
-            'fullScreen',
-            'close',
-        ],
-        selector: 'a.fancybox',
-        afterShow: function (instance, current) {
-            $('a.a-caption').on('click', function(event) {
-                instance.close(true);
-            });
-        },
-        infobar: true,
+        this.fancybox = $().fancybox({
+            animationDuration : 300,
+            buttons : [
+                'fullScreen',
+                'close',
+            ],
+            selector: 'a.fancybox',
+            afterShow: function (instance, current) {
+                $('a.a-caption').on('click', function(event) {
+                    instance.close(true);
+                });
+            },
+            infobar: true,
 
-    });
+        });
 
-    $('img.lazy-load').lazyload({
-        appear: function(elements_left, settings) {
-            new MayanImage({element: $(this)});
-        },
-        threshold: 400,
-    });
+        $('img.lazy-load').lazyload({
+            appear: function(elements_left, settings) {
+                new MayanImage({element: $(this)});
+            },
+            threshold: 400,
+        });
 
-    $('img.lazy-load-carousel').lazyload({
-        appear: function(elements_left, settings) {
-            new MayanImage({element: $(this)});
-        },
-        container: $('#carousel-container'),
-        threshold: 2000,
-    });
+        $('img.lazy-load-carousel').lazyload({
+            appear: function(elements_left, settings) {
+                new MayanImage({element: $(this)});
+            },
+            container: $('#carousel-container'),
+            threshold: 2000,
+        });
 
-    $('.lazy-load').on('load', function() {
-        $(this).hide();
-        $(this).fadeIn(300);
-        $(this).siblings('.spinner-container').remove();
-        $(this).removeClass('lazy-load pull-left');
-    });
+        $('.lazy-load').on('load', function() {
+            $(this).hide();
+            $(this).fadeIn(300);
+            $(this).siblings('.spinner-container').remove();
+            $(this).removeClass('lazy-load pull-left');
+        });
 
-    $('.lazy-load-carousel').on('load', function() {
-        $(this).hide();
-        $(this).fadeIn(300);
-        $(this).siblings('.spinner-container').remove();
-        $(this).removeClass('lazy-load-carousel pull-left');
-    });
+        $('.lazy-load-carousel').on('load', function() {
+            $(this).hide();
+            $(this).fadeIn(300);
+            $(this).siblings('.spinner-container').remove();
+            $(this).removeClass('lazy-load-carousel pull-left');
+        });
+    }
+
+    static timerFunction () {
+        $.fn.matchHeight._maintainScroll = true;
+        $.fn.matchHeight._update();
+    }
+
+    load () {
+        var self = this;
+        var container = this.element.parent().parent().parent();
+
+        this.element.on('error', (function(event) {
+            container.html(MayanImage.templateInvalidDocument);
+        }));
+
+        this.element.attr('src', this.element.attr('data-url'));
+        $.fn.matchHeight._maintainScroll = true;
+
+        clearTimeout(MayanImage.timer);
+        MayanImage.timer = setTimeout(MayanImage.timerFunction, 100);
+    };
 }
 
 MayanImage.templateInvalidDocument = $('#template-invalid-document').html();
-
 MayanImage.timer = setTimeout(null);
-
-MayanImage.timerFunction = function () {
-    $.fn.matchHeight._maintainScroll = true;
-    $.fn.matchHeight._update();
-}
-
-MayanImage.prototype.load = function () {
-    var self = this;
-    var container = this.element.parent().parent().parent();
-
-    this.element.on('error', (function(event) {
-        container.html(MayanImage.templateInvalidDocument);
-    }));
-
-    this.element.attr('src', this.element.attr('data-url'));
-    $.fn.matchHeight._maintainScroll = true;
-
-    clearTimeout(MayanImage.timer);
-    MayanImage.timer = setTimeout(MayanImage.timerFunction, 100);
-};

mayan/apps/appearance/templates/appearance/base_plain.html

@@ -31,16 +31,6 @@
             if (currentHash.length) {
                 window.location = currentHash.substring(1);
             }
-
-            function waitForJQuery(func) {
-                if (window.jQuery) {
-                    func();
-                } else {
-                    setTimeout(function() {
-                        waitForJQuery(func)
-                    }, 50);
-                }
-            }
         </script>
     </head>
     <body>

mayan/apps/appearance/templates/appearance/root.html

@@ -27,17 +27,6 @@
         <link href="{% static 'appearance/vendors/pace-0.7.8/themes/pace-theme-flash.css' %}" media="screen" rel="stylesheet" type="text/css" />
         <link href="{% static 'appearance/css/base.css' %}" media="screen" rel="stylesheet" type="text/css" />
         {% block stylesheets %}{% endblock %}
-        <script>
-            function waitForJQuery(func) {
-                if (window.jQuery) {
-                    func();
-                } else {
-                    setTimeout(function() {
-                        waitForJQuery(func)
-                    }, 50);
-                }
-            }
-        </script>
     </head>
     <body>
         {% if appearance_type == 'plain' %}
@@ -152,15 +141,28 @@
         <script src="{% static 'appearance/js/mayan_app.js' %}" type="text/javascript"></script>
         <script src="{% static 'appearance/js/mayan_image.js' %}" type="text/javascript"></script>
         <script src="{% static 'appearance/js/partial_navigation.js' %}" type="text/javascript"></script>
-
         <script>
             {# Transfer variable from Django to javascript #}
             var initialURL = '{% url home_view %}';
             var djangoDEBUG = {% if debug %}true{% else %}false{% endif %};
             Dropzone.autoDiscover = false;
         </script>
-
         <script src="{% static 'appearance/js/base.js' %}" type="text/javascript"></script>
+        <script>
+            var app = new MayanApp();
+
+            var afterBaseLoad = function () {
+                MayanImage.intialize();
+                app.doToastrMessages();
+                app.resizeFullHeight();
+                app.setupSelect2();
+                app.setupScrollView();
+            }
+
+            jQuery(document).ready(function() {
+                app.initialize();
+            });
+        </script>
     </body>
 </html>
 {% endspaceless %}

mayan/apps/events/links.py

@@ -80,7 +80,7 @@ link_user_notifications_list = Link(
     html_data={
         'apw-attribute': 'count', 'apw-interval': '5000',
         'apw-url': '/api/notifications/?read=False',
-        'apw-callback': 'App.mayanNotificationBadge'
+        'apw-callback': 'MayanAppClass.mayanNotificationBadge'
     }, icon_class=icon_user_notifications_list, text='',
     view='events:user_notifications_list'
 )

mayan/apps/metadata/static/metadata/js/metadata_form.js

@@ -1,11 +1,9 @@
 'use strict';
 
-waitForJQuery(function() {
-    jQuery(document).ready(function() {
-        $('.metadata-value').on('input', function(event) {
-            // Check the checkbox next to a metadata value input when there is
-            // data entry in the value's input.
-            $(event.target).parents('tr').find(':checkbox').prop('checked', true);
-        });
+jQuery(document).ready(function() {
+    $('.metadata-value').on('input', function(event) {
+        // Check the checkbox next to a metadata value input when there is
+        // data entry in the value's input.
+        $(event.target).parents('tr').find(':checkbox').prop('checked', true);
     });
 });