Merge pull request #315 from nonmakina/refactorDeferredJs

Refactor deferred js

inc/config.php

@@ -1053,10 +1053,13 @@
     // $config['additional_javascript'][] = 'js/style-select.js';
     
     // Defer some additional Javascript for faster initial page load times. Defering may break some scripts.
-    // To enable, replace the $config['additional_javascript'] array with $config['additional_javascript_init']
-    // and $config['additional_javascript_defer'] arrays, then merge them to with array_merge() to generate
-    // the $config['additional_javascript'] array. This is incompatible with additional_javascript_compile.
-    // Remember to add the two scripts above into ['additional_javascript_init']!
+    // To enable, set this to true and add the scripts you want to defer to $config['additional_javascript_defer'].
+    // If using $config['additional_javascript_compile'], this will be ignored and no files will be deferred.
+    // eg.
+    // inc/instance-config.php:
+    // $config['deferred_javascript'] = true;
+    // $config['additional_javascript_defer'][] = 'js/style-select.js';
+    $config['additional_javascript_defer'] = [];
     $config['deferred_javascript'] = false;
 
     // Where these script files are located on the web. Defaults to $config['root'].

inc/functions.php

@@ -1737,7 +1737,7 @@ function buildJavascript() {
 	}
 
 	if ($config['additional_javascript_compile']) {
-		foreach ($config['additional_javascript'] as $file) {
+		foreach (array_merge($config['additional_javascript'], $config['additional_javascript_defer']) as $file) {
 			$script .= file_get_contents($file);
 		}
 	}

inc/instance-config.php

@@ -372,46 +372,44 @@ $config['default_stylesheet'] = array('Dark Red', $config['stylesheets']['Dark R
  */
 
 $config['deferred_javascript'] = true;
-$config['additional_javascript_init'][] = 'js/jquery.min.js';
-$config['additional_javascript_init'][] = 'js/inline-expanding.js';
-$config['additional_javascript_init'][] = 'js/ajax.js';
-
-$config['additional_javascript_init'][] = 'js/post-menu.js';
-$config['additional_javascript_init'][] = 'js/hide-images.js';
-$config['additional_javascript_init'][] = 'js/show-backlinks.js';
-$config['additional_javascript_init'][] = 'js/show-op.js';
-$config['additional_javascript_init'][] = 'js/show-own-posts.js';
-$config['additional_javascript_init'][] = 'js/post-filter.js';
-
-$config['additional_javascript_init'][] = 'js/strftime.min.js';
-$config['additional_javascript_init'][] = 'js/local-time.js';
-$config['additional_javascript_init'][] = 'js/save-user_flag.js';
-$config['additional_javascript_init'][] = 'js/auto-scroll.js';
-$config['additional_javascript_init'][] = 'js/options.js';
-$config['additional_javascript_init'][] = 'js/options/general.js';
-$config['additional_javascript_init'][] = 'js/options/user-css.js';
-$config['additional_javascript_init'][] = 'js/options/user-js.js';
-$config['additional_javascript_init'][] = 'js/style-select.js';
-$config['additional_javascript_init'][] = 'js/flag-preview.js';
-$config['additional_javascript_init'][] = 'js/file-selector.js';
-$config['additional_javascript_init'][] = 'js/post-hover.js';
-$config['additional_javascript_init'][] = 'js/download-original.js';
+$config['additional_javascript'][] = 'js/jquery.min.js';
+$config['additional_javascript'][] = 'js/jquery-ui.custom.min.js';
+$config['additional_javascript'][] = 'js/inline-expanding.js';
+$config['additional_javascript'][] = 'js/ajax.js';
+$config['additional_javascript'][] = 'js/quick-reply.js';
+$config['additional_javascript'][] = 'js/post-hover.js';
+
+$config['additional_javascript'][] = 'js/post-menu.js';
+$config['additional_javascript'][] = 'js/hide-images.js';
+$config['additional_javascript'][] = 'js/show-backlinks.js';
+$config['additional_javascript'][] = 'js/show-op.js';
+$config['additional_javascript'][] = 'js/show-own-posts.js';
+$config['additional_javascript'][] = 'js/post-filter.js';
+
+$config['additional_javascript'][] = 'js/strftime.min.js';
+$config['additional_javascript'][] = 'js/local-time.js';
+$config['additional_javascript'][] = 'js/save-user_flag.js';
+$config['additional_javascript'][] = 'js/auto-scroll.js';
+$config['additional_javascript'][] = 'js/options.js';
+$config['additional_javascript'][] = 'js/options/general.js';
+$config['additional_javascript'][] = 'js/options/user-css.js';
+$config['additional_javascript'][] = 'js/options/user-js.js';
+$config['additional_javascript'][] = 'js/style-select.js';
+$config['additional_javascript'][] = 'js/flag-preview.js';
+$config['additional_javascript'][] = 'js/file-selector.js';
+$config['additional_javascript'][] = 'js/download-original.js';
 $config['additional_javascript_defer'][] = 'js/auto-reload.js';
 $config['additional_javascript_defer'][] = 'js/thread-stats.js';
 $config['additional_javascript_defer'][] = 'js/image-hover.js';
 
-$config['additional_javascript_init'][] = 'js/jquery-ui.custom.min.js';
-$config['additional_javascript_init'][] = 'js/quick-reply.js';
 
-$config['additional_javascript_init'][] = 'js/gallery-view.js';
-$config['additional_javascript_init'][] = 'js/catalog-search.js';
+$config['additional_javascript'][] = 'js/gallery-view.js';
+$config['additional_javascript'][] = 'js/catalog-search.js';
 $config['additional_javascript_defer'][] = 'js/thread-watcher.js';
 $config['additional_javascript_defer'][] = 'js/expand.js';
 $config['additional_javascript_defer'][] = 'js/webm-settings.js';
 $config['additional_javascript_defer'][] = 'js/expand-video.js';
 
-$config['additional_javascript'] = array_merge($config['additional_javascript_init'], $config['additional_javascript_defer']);
-
 $config['flag_preview'] = true;
 
 $config['enable_embedding'] = true;
@@ -549,4 +547,5 @@ $config['reply_limit'] = 600;
 
 // Changes made via web editor by "zul_admin" @ Tue, 27 Apr 2021 15:39:19 -0700:
 $config['max_body'] = 80000;
-
+$config['additional_javascript_compile'] = true;
+$config['minify_js'] = true;

js/file-selector.js

@@ -23,7 +23,7 @@ $('<div class="dropzone-wrap" style="display: none;">'+
 			'<div class="file-thumbs"></div>'+
 		'</div>'+
 	'</div>'+
-'</div>').prependTo('#upload td');
+'</div>').prependTo('#upload td.upload-area');
 
 var files = [];
 $('#upload_file').remove();  // remove the original file selector

js/quick-reply.js

@@ -261,7 +261,7 @@
 						if ($(this).attr('name') == 'spoiler') {
 							$td.find('label').remove();
 							$(this).attr('id', 'q-spoiler-image');
-							$postForm.find('input[type="file"]').parent()
+                                                       $postForm.find('#upload')
 								.removeAttr('colspan')
 								.after($('<td class="spoiler"></td>').append(this, ' ', $('<label for="q-spoiler-image">').text(_('Spoiler Image'))));
 						} else if ($(this).attr('name') == 'no_country') {

templates/header.html

@@ -18,9 +18,9 @@
 			<script type="text/javascript" src="{{ config.url_javascript }}"></script>
 			{% if not config.additional_javascript_compile %}
 				{% if not config.deferred_javascript %}
-					{% for javascript in config.additional_javascript %}<script type="text/javascript" src="{{ config.additional_javascript_url }}{{ javascript }}"></script>{% endfor %}
+					{% for javascript in config.additional_javascript|merge(config.additional_javascript_defer) %}<script type="text/javascript" src="{{ config.additional_javascript_url }}{{ javascript }}"></script>{% endfor %}
 				{% else %}
-					{% for javascript in config.additional_javascript_init %}<script type="text/javascript" src="{{ config.additional_javascript_url }}{{ javascript }}"></script>{% endfor %}
+					{% for javascript in config.additional_javascript %}<script type="text/javascript" src="{{ config.additional_javascript_url }}{{ javascript }}"></script>{% endfor %}
 					{% for javascript in config.additional_javascript_defer %}<script defer type="text/javascript" src="{{ config.additional_javascript_url }}{{ javascript }}"></script>{% endfor %}
 				{% endif %}
 			{% endif %}

templates/post_form.html

@@ -145,7 +145,7 @@
 			<th>
 				{% trans %}File{% endtrans %}
 			</th>
-			<td>
+                       <td class="upload-area">
 				<input type="file" name="file" id="upload_file">
 
 				{% if config.allow_upload_by_url %}