diff --git a/Gruntfile.js b/Gruntfile.js index 2738778b29f1c..a0eab7f99db7f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -453,4 +453,35 @@ module.exports = function(grunt) { ]); }); + grunt.registerTask('installation', 'Compiles the error-locales.js translation file', function() { + + // Set the initial template + var template = ` +window.errorLocale = {`; + + grunt.file.recurse('installation/language', function(abspath, rootdir, subdir, filename) { + + if (abspath.indexOf('.ini') > -1) { + var fs = require('fs'), ini = require('ini'), languageStrings = ini.parse(fs.readFileSync(abspath, 'utf-8')); + + if (languageStrings["MIN_PHP_ERROR_LANGUAGE"]) { + template = template + ` + "` + subdir + `": { + "language": "` + languageStrings["MIN_PHP_ERROR_LANGUAGE"] + `", + "header": "` + languageStrings["MIN_PHP_ERROR_HEADER"] + `", + "text1": "` + languageStrings["MIN_PHP_ERROR_TEXT"] + `", + "help-url-text": "` + languageStrings["MIN_PHP_ERROR_URL_TEXT"] + `" + },`; + } + } + }); + + // Add the closing bracket + template = template + ` +}`; + + // Write the file + grunt.file.write('installation/template/js/error-locales.js', template); + }); + }; diff --git a/installation/index.php b/installation/index.php index 71b4da7dd923c..2603a9bcc98f4 100644 --- a/installation/index.php +++ b/installation/index.php @@ -17,7 +17,7 @@ if (version_compare(PHP_VERSION, JOOMLA_MINIMUM_PHP, '<')) { - die('Your host needs to use PHP ' . JOOMLA_MINIMUM_PHP . ' or higher to run this version of Joomla!'); + die(str_replace('{{PHP_VERSION}}', JOOMLA_MINIMUM_PHP, file_get_contents(dirname(__FILE__) . '/template/incompatible.html'))); } /** diff --git a/installation/language/el-GR/el-GR.ini b/installation/language/el-GR/el-GR.ini index 1d4fa0dcb613c..de0c0c12540f5 100644 --- a/installation/language/el-GR/el-GR.ini +++ b/installation/language/el-GR/el-GR.ini @@ -3,6 +3,12 @@ ; License GNU General Public License version 2 or later; see LICENSE.txt ; Note : All ini files need to be saved as UTF-8 +;Minimum PHP error page +MIN_PHP_ERROR_LANGUAGE="Ελληνικά" +MIN_PHP_ERROR_HEADER="Λυπούμαστε, αλλά η έκδοση σας PHP δεν υποστηρίζεται" +MIN_PHP_ERROR_TEXT="Ο διακομιστής πρέπει να έχει εγκατεστημένη PHP έκδοση {{phpversion}} ή νεότερη για να εγκαταστήσετε την συγκεκριμένη έκδοση Joomla!" +MIN_PHP_ERROR_URL_TEXT="Βοήθεια για επίλυση του προβλήματος" + ;Stepbar INSTL_STEP_COMPLETE_LABEL="Ολοκλήρωση" INSTL_STEP_DATABASE_LABEL="Βάση Δεδομένων" diff --git a/installation/language/en-GB/en-GB.ini b/installation/language/en-GB/en-GB.ini index 2bf30607a2734..76b0f3c63eb6a 100644 --- a/installation/language/en-GB/en-GB.ini +++ b/installation/language/en-GB/en-GB.ini @@ -3,6 +3,12 @@ ; License GNU General Public License version 2 or later; see LICENSE.txt ; Note : All ini files need to be saved as UTF-8 +;Minimum PHP error page +MIN_PHP_ERROR_LANGUAGE="English GB" +MIN_PHP_ERROR_HEADER="Sorry, your PHP version is not supported" +MIN_PHP_ERROR_TEXT="Your host needs to use PHP version {{phpversion}} or newer to run this version of Joomla!" +MIN_PHP_ERROR_URL_TEXT="Help me resolve this" + ;Stepbar INSTL_STEP_COMPLETE_LABEL="Finish" INSTL_STEP_DATABASE_LABEL="Database" diff --git a/installation/template/css/error.css b/installation/template/css/error.css new file mode 100644 index 0000000000000..7e88430afeb06 --- /dev/null +++ b/installation/template/css/error.css @@ -0,0 +1,161 @@ +body { + margin: 0; + padding: 0; + font: 14px / 18px sans-serif; + color: #555; + background-color: transparent +} + +html { + background-color: #3a92c8; + background: radial-gradient(circle, #fdfdfd, #f1f1f1); + background-repeat: no-repeat; + background-attachment: fixed; + * background-image: none +} + +ol, ul { + padding: 0; + margin: 0; + list-style: none +} + +a { + color: #0084b4; + text-decoration: none; + outline: 0 +} + +a:hover, a:focus { + text-decoration: underline +} + +p a { + line-height: inherit +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + margin: 0 auto; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.alert-main { + display: block; + position: relative; + background: #fff; + border: 1px solid rgba(0,0,0,0.1); + border-radius: 5px; + padding: 20px 60px; + margin: 0 20px; + box-shadow: 0 0 10px rgba(0,0,0,0.05); +} + +svg { + position: absolute; + bottom: -120px; + right: -70px; + width: 400px; + transform: rotate(10deg); + z-index: -1; +} + +h1, p { + position: relative; + z-index: 10; + text-align: center; + text-rendering: optimizeLegibility +} + +h1 { + margin: 18px 0 0; + font-size: 40px; + font-weight: 200; + line-height: 1; + text-shadow: 0 1px 2px rgba(0, 0, 0, .2) +} + +p, label { + margin: 10px 0 20px; + font-size: 18px; + font-weight: 300; + line-height: 25px; + color: #777 +} + +p a { + font-weight: bold; + color: #1C3D5C +} + +.link-help { + padding: .4rem .85rem; + font-size: 1rem; + font-weight: normal; + border-radius: .25rem; + text-decoration: none; + background-color: #f5f5f5; + border: 1px solid rgba(0,0,0,0.1); +} +.link-help:hover { + background-color: #eee; + text-decoration: none; +} + +.footer { + margin: 8px 20px; + text-align: left; + font-size: 11px +} + +.footer ul { + margin-bottom: 5px; +} + +.footer li { + display: inline; + margin: 0 5px; + line-height: 20px +} + +.footer li, .footer a { + color: #1C3D5C +} + +.footer a:hover { + color: #59B0FF +} + +.links { + display: block; + text-align: center; + margin-top: 4rem; + margin-left: auto; + margin-right: auto; + font-size: 1rem +} +.links li { + display: inline-block; + margin-top: 20px; +} + +@media screen and (max-width:480px) { + .container { + height: auto; + padding-top: 20px; + padding-bottom: 20px; + } + h1 { + font-size: 30px + } + + .link-help { + white-space: nowrap; + } +} diff --git a/installation/template/images/logo.svg b/installation/template/images/logo.svg new file mode 100644 index 0000000000000..1d9c2909db451 --- /dev/null +++ b/installation/template/images/logo.svg @@ -0,0 +1,45 @@ + + + + + + + + + diff --git a/installation/template/incompatible.html b/installation/template/incompatible.html new file mode 100644 index 0000000000000..31c6ec9c473c3 --- /dev/null +++ b/installation/template/incompatible.html @@ -0,0 +1,41 @@ + + + + + + + Joomla Installation Error + + + + + +
+
+
+

Sorry, your PHP version is not supported

+

Your host needs to use PHP version {{PHP_VERSION}} or newer to run this version of Joomla!

+

Help me resolve this

+ + + + + + + + +
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/installation/template/js/error-locales.js b/installation/template/js/error-locales.js new file mode 100644 index 0000000000000..f5862c1fa36b5 --- /dev/null +++ b/installation/template/js/error-locales.js @@ -0,0 +1,15 @@ + +window.errorLocale = { + "el-GR": { + "language": "Ελληνικά", + "header": "Λυπούμαστε, αλλά η έκδοση σας PHP δεν υποστηρίζεται", + "text1": "Ο διακομιστής πρέπει να έχει εγκατεστημένη PHP έκδοση {{phpversion}} ή νεότερη για να εγκαταστήσετε την συγκεκριμένη έκδοση Joomla!", + "help-url-text": "Βοήθεια για επίλυση του προβλήματος" + }, + "en-GB": { + "language": "English GB", + "header": "Sorry, your PHP version is not supported", + "text1": "Your host needs to use PHP version {{phpversion}} or newer to run this version of Joomla!", + "help-url-text": "Help me resolve this" + }, +} \ No newline at end of file diff --git a/installation/template/js/error.js b/installation/template/js/error.js new file mode 100644 index 0000000000000..a5c524dea559a --- /dev/null +++ b/installation/template/js/error.js @@ -0,0 +1,65 @@ +(function() { + "use strict"; + if (errorLocale) { + var header = document.getElementById('headerText'), + text1 = document.getElementById('descText1'); + + // Get the minimum PHP version + window.phpVersion = document.body.getAttribute('data-php-version') || '5.5.9'; + + // Create links for all the languages + Object.keys(errorLocale).forEach(function(key) { + var sel = document.getElementById('translatedLanguagesSelect'); + var opt = document.createElement('option'); + opt.text = errorLocale[key].language; + opt.value = key; + + if (key === 'en-GB') { + opt.setAttribute('selected', 'selected'); + } + + document.getElementById('translatedLanguagesSelect').addEventListener('change', function(e) { + var ref = e.target.value; + if (ref) { + header.innerHTML = errorLocale[ref].header; + text1.innerHTML = errorLocale[ref].text1.replace('{{phpversion}}', phpVersion); + } + + var helpLink = document.getElementById('linkHelp'); + if (helpLink) { + helpLink.innerText = errorLocale[ref]["help-url-text"]; + } + + var meta = document.querySelector('[http-equiv="Content-Language"]'); + if (meta) { + meta.setAttribute('content', ref); + } + }); + + sel.appendChild(opt) + }); + + // Select language based on Browser's language + Object.keys(errorLocale).forEach(function(key) { + if (navigator.language === key) { + // Remove the selected property + document.querySelector('#translatedLanguagesSelect option[value="en-GB"]').removeAttribute('selected'); + document.querySelector("#translatedLanguagesSelect option[value='" + key + "']").setAttribute('selected', 'selected'); + + // Append the translated strings + header.innerHTML = errorLocale[key].header; + text1.innerHTML = errorLocale[key].text1.replace('{{phpversion}}', phpVersion); + + var helpLink = document.getElementById('linkHelp'); + if (helpLink) { + helpLink.innerText = errorLocale[key]["help-url-text"]; + } + + var meta = document.querySelector('[http-equiv="Content-Language"]'); + if (meta) { + meta.setAttribute('content', key); + } + } + }); + } +})(); diff --git a/package.json b/package.json index 7b89fad7b2275..fd387147d04ce 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "grunt-postcss": "0.8.0", "grunt-sass": "^2.0.0", "grunt-scss-lint": "^0.5.0", - "grunt-shell": "latest" + "grunt-shell": "latest", + "ini": "latest" }, "license": "GPL-2.0+" }