remove inline JS in Zikula namespace, refs #3711

zikula · Apr 1, 2020 · f3a109a · f3a109a
1 parent 868c85b
commit f3a109a
Show file tree

Hide file tree

Showing 19 changed files with 236 additions and 297 deletions.
diff --git a/src/Zikula/CoreInstallerBundle/Resources/public/js/ajaxcommon.js b/src/Zikula/CoreInstallerBundle/Resources/public/js/ajaxcommon.js
@@ -1,7 +1,8 @@
 // Copyright Zikula Foundation, licensed MIT.
 
-jQuery( document ).ready(function( $ ) {
-    // the `stages` array is declared in the template
+jQuery(document).ready(function ($) {
+    var stages = $('#stageDefinitions').data('stages');
+
     var route;
     var progressbar = 0;
     var percentage = (1 / stages.length) * 100;
@@ -78,13 +79,13 @@ jQuery( document ).ready(function( $ ) {
     }
 
     function getNextStage(stagename) {
-        if (typeof stagename == 'undefined') return stages[0];
+        if ('undefined' == typeof stagename) return stages[0];
         var key = stages.indexOf(stagename);
-        return (-1 === key) ? stages[0] : stages[++key];
+        return -1 === key ? stages[0] : stages[++key];
     }
 
     function updateProgressBar(stagename) {
-        progressbar = ('finish' === stagename) ? 100 : progressbar + percentage;
+        progressbar = 'finish' === stagename ? 100 : progressbar + percentage;
         $('#progress-bar').css('width', progressbar + '%');
         if ('finish' === stagename) {
             $('#progress-bar').removeClass('progress-bar-striped active');
@@ -101,7 +102,7 @@ jQuery( document ).ready(function( $ ) {
         var table = '<table class="table"><thead><tr><th>Item</th><th>Value</th></tr></thead><tbody>';
         var index;
         for (index = 0; index < resultArray.length; ++index) {
-            table += '<tr><td>'+resultArray[index][0]+'</td><td>'+resultArray[index][1]+'</td></tr>';
+            table += '<tr><td>' + resultArray[index][0] + '</td><td>' + resultArray[index][1] + '</td></tr>';
         }
         table += '</tbody></table>';
 

diff --git a/src/Zikula/CoreInstallerBundle/Resources/public/js/common.js b/src/Zikula/CoreInstallerBundle/Resources/public/js/common.js
@@ -0,0 +1,45 @@
+// Copyright Zikula Foundation, licensed MIT.
+
+jQuery(document).ready(function ($) {
+    $('a.external, #footer a').attr('target', '_blank');
+    $('label.col-form-label').removeClass('col-md-2');
+
+    if ($('#startButton').length > 0) {
+        $('#startButton').removeClass('d-none');
+    }
+
+    $('form:first *:input:text:first').focus();
+
+    if ($('#databaseCredentials').length > 0) {
+        $('#submitButton').closest('form').submit(function(event) {
+            $('#dbCheck').removeClass('d-none');
+        });
+    } else if ($('#userMigration').length > 0) {
+        $('#migrate').on('click', function() {
+            $('#spinner').removeClass('d-none');
+            $(this).addClass('disabled');
+            $(this).bind('click', false);
+            migrate();
+        });
+        function migrate() {
+            $.ajax({
+                data: {},
+                url: $('#pathHolder').data('migrate-route'),
+                success: function(data, textStatus, jqXHR) {
+                    $('.progress-bar').css('width', data.data.percentcomplete + '%');
+                    if (data.data.percentcomplete === 100) {
+                        $('.progress-bar').removeClass('progress-bar-striped active');
+                        var redirect = setTimeout(function() {
+                            window.location = $('#pathHolder').data('redirect-route');
+                        }, 800);
+                    } else {
+                        migrate();
+                    }
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    alert(jqXHR.responseText);
+                }
+            });
+        }
+    }
+});
diff --git a/src/Zikula/CoreInstallerBundle/Resources/views/Install/ajaxinstaller.html.twig b/src/Zikula/CoreInstallerBundle/Resources/views/Install/ajaxinstaller.html.twig
@@ -1,13 +1,12 @@
 {% extends '@ZikulaCoreInstaller/theme.html.twig' %}
-
+{% block childstylesheets %}
+    <link href="{{ asset('bundles/zikulacoreinstaller/css/ajaxinstaller.css') }}" rel="stylesheet" />
+{% endblock %}
 {% block childjavascripts %}
     <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
-    <script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
-    <script type="text/javascript" src="{{ asset('bundles/zikulacoreinstaller/js/ajaxcommon.js') }}"></script>
+    <script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>
+    <script src="{{ asset('bundles/zikulacoreinstaller/js/ajaxcommon.js') }}"></script>
 {% endblock %}
-{%  block childstylesheets %}
-    <link href="{{ asset('bundles/zikulacoreinstaller/css/ajaxinstaller.css') }}" rel="stylesheet" />
-{%  endblock %}
 
 {% block title 'Zikula is installing!'|trans %}
 
@@ -20,10 +19,10 @@
     </div>
 
     <div class="text-center">
-        <a href="#install-card" id="beginInstall" class="btn btn-lg btn-success">{% trans %}Begin Installer{% endtrans %}</a>
+        <a href="#installCard" id="beginInstall" class="btn btn-lg btn-success">{% trans %}Begin Installer{% endtrans %}</a>
     </div>
 
-    <div class="card" id="install-card">
+    <div class="card" id="installCard">
         <div class="card-header">
             <strong>{% trans %}Installing Modules and Helpers{% endtrans %}</strong>
         </div>
@@ -46,12 +45,5 @@
         <a id="continueButton" href="{{ url('install', {'stage': 'complete'}) }}" class="btn btn-lg btn-success d-none">{% trans %}Finish{% endtrans %} <i class="fas fa-angle-double-right"></i></a>
     </div>
 </div>
-{# create a javascript array of all the stages #}
-<script>
-    var stages = [
-    {% for stage in stages %}
-        "{{ stage.name }}",
-    {% endfor %}
-    ];
-</script>
+<div id="stageDefinitions" data-stages='[{% for stage in stages %}"{{ stage.name }}"{% if not loop.last %},{% endif %}{% endfor %}]'></div>
 {% endblock %}
diff --git a/src/Zikula/CoreInstallerBundle/Resources/views/Install/createadmin.html.twig b/src/Zikula/CoreInstallerBundle/Resources/views/Install/createadmin.html.twig
@@ -2,12 +2,11 @@
 {% block title "Zikula Core Installer :: Create administrator's account" %}
 
 {% block content %}
-<div class="card">
+<div class="card" id="adminCredentials">
     <div class="card-header">
         <strong>{% trans %}Create administrator's account{% endtrans %}</strong>
     </div>
     <div class="card-body">
-
         {{ form_start(form) }}
         {{ form_errors(form) }}
 
@@ -47,9 +46,4 @@
         {{ form_end(form) }}
     </div>
 </div>
-<script>
-    $(document).ready(function() {
-        $('form:first *:input:text:first').focus();
-    });
-</script>
 {% endblock %}
diff --git a/src/Zikula/CoreInstallerBundle/Resources/views/Install/dbcreds.html.twig b/src/Zikula/CoreInstallerBundle/Resources/views/Install/dbcreds.html.twig
@@ -2,76 +2,68 @@
 {% block title 'Zikula Core Installer :: Enter database information' %}
 
 {% block content %}
-<div class="card">
+<div class="card" id="databaseCredentials">
     <div class="card-header">
         <strong>{% trans %}Database information{% endtrans %}</strong>
     </div>
     <div class="card-body">
+        {{ form_start(form) }}
+        {{ form_errors(form) }}
 
-    {{ form_start(form) }}
-    {{ form_errors(form) }}
-
-    <div class="form-group row">
-        {{ form_label(form.database_driver) }}
-        <div class="col-md-9">
-            {{ form_errors(form.database_driver) }}
-            {{ form_widget(form.database_driver) }}
+        <div class="form-group row">
+            {{ form_label(form.database_driver) }}
+            <div class="col-md-9">
+                {{ form_errors(form.database_driver) }}
+                {{ form_widget(form.database_driver) }}
+            </div>
         </div>
-    </div>
-    <div class="form-group row">
-        {{ form_label(form.database_host) }}
-        <div class="col-sm-9">
-            {{ form_errors(form.database_host) }}
-            {{ form_widget(form.database_host) }}
+        <div class="form-group row">
+            {{ form_label(form.database_host) }}
+            <div class="col-sm-9">
+                {{ form_errors(form.database_host) }}
+                {{ form_widget(form.database_host) }}
+            </div>
         </div>
-    </div>
-    <div class="form-group row">
-        {{ form_label(form.database_port) }}
-        <div class="col-sm-9">
-            {{ form_errors(form.database_port) }}
-            {{ form_widget(form.database_port) }}
-            {{ form_help(form.database_port) }}
+        <div class="form-group row">
+            {{ form_label(form.database_port) }}
+            <div class="col-sm-9">
+                {{ form_errors(form.database_port) }}
+                {{ form_widget(form.database_port) }}
+                {{ form_help(form.database_port) }}
+            </div>
         </div>
-    </div>
-    <div class="form-group row">
-        {{ form_label(form.database_user) }}
-        <div class="col-md-9">
-            {{ form_errors(form.database_user) }}
-            {{ form_widget(form.database_user) }}
+        <div class="form-group row">
+            {{ form_label(form.database_user) }}
+            <div class="col-md-9">
+                {{ form_errors(form.database_user) }}
+                {{ form_widget(form.database_user) }}
+            </div>
         </div>
-    </div>
-    <div class="form-group row">
-        {{ form_label(form.database_password) }}
-        <div class="col-md-9">
-            {{ form_errors(form.database_password) }}
-            {{ form_widget(form.database_password) }}
+        <div class="form-group row">
+            {{ form_label(form.database_password) }}
+            <div class="col-md-9">
+                {{ form_errors(form.database_password) }}
+                {{ form_widget(form.database_password) }}
+            </div>
         </div>
-    </div>
-    <div class="form-group row">
-        {{ form_label(form.database_name) }}
-        <div class="col-md-9">
-            {{ form_errors(form.database_name) }}
-            {{ form_widget(form.database_name) }}
-            <small class="form-text text-danger">{% trans %}Ensure the database is in UTF-8 format.{% endtrans %}</small>
+        <div class="form-group row">
+            {{ form_label(form.database_name) }}
+            <div class="col-md-9">
+                {{ form_errors(form.database_name) }}
+                {{ form_widget(form.database_name) }}
+                <small class="form-text text-danger">{% trans %}Ensure the database is in UTF-8 format.{% endtrans %}</small>
+            </div>
         </div>
-    </div>
-    <div class="form-group row">
-        <div class="col-md-9 offset-md-3">
-            <p id="db-check" class="d-none"><i class="fas fa-cog fa-spin fa-fw text-success"></i>{% trans %}Checking database connection...{% endtrans %}</p>
-            <input type="submit" id="submit_button" value="{% trans %}Next{% endtrans %}" class="btn btn-success" />
+        <div class="form-group row">
+            <div class="col-md-9 offset-md-3">
+                <p id="dbCheck" class="d-none">
+                    <i class="fas fa-cog fa-spin fa-fw text-success"></i>{% trans %}Checking database connection...{% endtrans %}
+                </p>
+                <input type="submit" id="submitButton" value="{% trans %}Next{% endtrans %}" class="btn btn-success" />
+            </div>
         </div>
-    </div>
 
-    {{ form_end(form) }}
+        {{ form_end(form) }}
     </div>
 </div>
-<script>
-    $(document).ready(function() {
-        $('form:first *:input:text:first').focus();
-
-        $('#submit_button').closest('form').submit(function(event) {
-            $('#db-check').removeClass('d-none');
-        });
-      });
-</script>
 {% endblock %}
diff --git a/src/Zikula/CoreInstallerBundle/Resources/views/Install/mailer.html.twig b/src/Zikula/CoreInstallerBundle/Resources/views/Install/mailer.html.twig
@@ -6,7 +6,7 @@
 {% block title 'Zikula Core Installer :: Enter mailer transport information' %}
 
 {% block content %}
-<div class="card">
+<div class="card" id="mailerConfig">
     <div class="card-header">
         <strong>{% trans %}Mailer transport information{% endtrans %}</strong>
     </div>
@@ -88,9 +88,4 @@
         {{ form_end(form) }}
     </div>
 </div>
-<script>
-    $(document).ready(function() {
-        $('form:first *:input:text:first').focus();
-    });
-</script>
 {% endblock %}
diff --git a/src/Zikula/CoreInstallerBundle/Resources/views/Install/notinstalled.html.twig b/src/Zikula/CoreInstallerBundle/Resources/views/Install/notinstalled.html.twig
@@ -15,7 +15,7 @@
                     {% trans with {'%inst%': inst, '%docs%': docs} %}You are seeing this message because Zikula is not yet installed. You can install Zikula by clicking on the install button, but before doing so please read the %inst%. Further information can be found in the %docs%.{% endtrans %}
                 </p>
                 <noscript><p class="alert alert-warning">{% trans %}You have JavaScript disabled. Please activate it to proceed or use the CLI script instead.{% endtrans %}</p></noscript>
-                <div id="startButton" class="row">
+                <div id="startButton" class="row d-none">
                     <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
                         <a class="btn btn-success btn-lg d-flex align-items-center" href="{{ path('install', {'stage': 'locale' }) }}">
                             <i class="fas fa-thumbs-up fa-3x float-left mr-3"></i> {% trans %}Install Zikula!{% endtrans %}<br />{% trans %}Version{% endtrans %} {{ version }}
@@ -31,9 +31,4 @@
         </div>
     </div>
 </div>
-<script>
-    jQuery(document).ready(function($) {
-        $('#startButton').removeClass('d-none');
-    });
-</script>
 {% endblock %}
diff --git a/src/Zikula/CoreInstallerBundle/Resources/views/Migration/migrate.html.twig b/src/Zikula/CoreInstallerBundle/Resources/views/Migration/migrate.html.twig
@@ -3,7 +3,7 @@
 {% block title 'Migrating Users...'|trans %}
 
 {% block content %}
-<div class="container-fluid">
+<div class="container-fluid" id="userMigration">
     <div class="row">
         <h3>
             <span class="fas fa-cogs"></span>
@@ -20,40 +20,9 @@
                 <span class="sr-only">{% trans %}Progress bar{% endtrans %}</span>
             </div>
         </div>
-        <div class="alert alert-info">{% trans with {'%f': count} %}There are %f users to try to migrate.{% endtrans %}</div>
+        <div class="alert alert-info">{% trans with {'%amount%': count} %}There are %amount% users to try to migrate.{% endtrans %}</div>
         <div class="text-center"><i id="spinner" class="fas fa-cog fa-2x fa-spin fa-fw" class="d-none"></i> <button id="migrate" class="btn btn-lg btn-success">{% trans %}Begin migration{% endtrans %}</button></div>
+        <div id="pathHolder" data-migrate-route="{{ path('zauth_migration') }}" data-redirect-route="{{ path('upgrade', {stage: 'locale'}) }}"></div>
     </div>
 </div>
-<script>
-    (function($) {
-        $(document).ready(function() {
-            $('#migrate').on('click', function() {
-                $('#spinner').removeClass('d-none');
-                $(this).addClass('disabled');
-                $(this).bind('click', false);
-                migrate();
-            });
-            function migrate() {
-                $.ajax({
-                    data: {},
-                    url: '{{ path('zauth_migration') }}',
-                    success: function(data, textStatus, jqXHR) {
-                        $('.progress-bar').css('width', data.data.percentcomplete + '%');
-                        if (data.data.percentcomplete === 100) {
-                            $('.progress-bar').removeClass('progress-bar-striped active');
-                            var redirect = setTimeout(function() {
-                                window.location = '{{ path('upgrade', {stage: 'locale'}) }}';
-                            }, 800);
-                        } else {
-                            migrate();
-                        }
-                    },
-                    error: function(jqXHR, textStatus, errorThrown) {
-                        alert(jqXHR.responseText);
-                    }
-                });
-            }
-        });
-    })(jQuery);
-</script>
 {% endblock %}