From a36e5afbf775e0aee82d4c5d10aa3a574296d8d7 Mon Sep 17 00:00:00 2001
From: Andrea Ulliana <aul@odoo.com>
Date: Wed, 29 May 2019 07:48:16 +0000
Subject: [PATCH] [IMP] website: auto-discover all available fonts in the theme
 modal

Before this commit, if a theme had more fonts that the default number
(6), it had to override the customize dialog. Now, the number of fonts
to add in the list is found automatically.

To do so, instead of defining a <selection/> tag with 6+ <opt/> tag, we
are now able to define an unique new tag: <fontselection/> which will do
automatically the job.

Part of https://github.com/odoo/odoo/pull/33442
task-1974659
---
 addons/website/static/src/js/widgets/theme.js | 14 ++++++++
 addons/website/static/src/scss/website.scss   |  1 +
 addons/website/views/website_templates.xml    | 36 +++----------------
 3 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index 0a3571080a2..ff49818eccf 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -378,6 +378,20 @@ var ThemeCustomizeDialog = Dialog.extend({
                         _processItems($item.children(), $element.find('.o_theme_customize_selection'), true);
                         break;
 
+                    case 'FONTSELECTION':
+                        var $options = $();
+                        _.times(parseInt(self.style.getPropertyValue('--number-of-fonts')), function (font) {
+                            $options = $options.add($('<opt/>', {
+                                'data-widget': 'auto',
+                                'data-variable': $item.data('variable'),
+                                'data-value': font + 1,
+                                'data-font': font + 1,
+                            }));
+                        });
+                        $element = $(core.qweb.render('website.theme_customize_dropdown_option'));
+                        _processItems($options, $element.find('.o_theme_customize_selection'), true);
+                        break;
+
                     default:
                         _processItems($item.children(), $container, false);
                         return;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index c63c246acec..1bda068be3f 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -55,6 +55,7 @@ $-font-numbers: (
     --h6: #{$-h6-color};
 
     --logo-height: #{$o-theme-navbar-logo-height};
+    --number-of-fonts: #{length($o-theme-fonts)};
 }
 
 #wrapwrap {
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 28195f913f3..3025d7276cb 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -551,44 +551,16 @@
         <!-- Font options -->
         <content id="theme_customize_content_fonts" string="Fonts" title="Choose your fonts">
             <list string="Title">
-                <selection id="theme_customize_content_fonts_title">
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="1" data-font="1"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="2" data-font="2"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="3" data-font="3"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="4" data-font="4"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="5" data-font="5"/>
-                    <opt data-widget="auto" data-variable="headings-font-number" data-value="6" data-font="6"/>
-                </selection>
+                <fontselection data-variable="headings-font-number"/>
             </list>
             <list string="Body">
-                <selection id="theme_customize_content_fonts_body">
-                    <opt data-widget="auto" data-variable="font-number" data-value="1" data-font="1"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="2" data-font="2"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="3" data-font="3"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="4" data-font="4"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="5" data-font="5"/>
-                    <opt data-widget="auto" data-variable="font-number" data-value="6" data-font="6"/>
-                </selection>
+                <fontselection data-variable="font-number"/>
             </list>
             <list string="Button">
-                <selection id="theme_customize_content_fonts_button">
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="1" data-font="1"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="2" data-font="2"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="3" data-font="3"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="4" data-font="4"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="5" data-font="5"/>
-                    <opt data-widget="auto" data-variable="buttons-font-number" data-value="6" data-font="6"/>
-                </selection>
+                <fontselection data-variable="buttons-font-number"/>
             </list>
             <list string="Navbar">
-                <selection id="theme_customize_content_fonts_navbar">
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="1" data-font="1"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="2" data-font="2"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="3" data-font="3"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="4" data-font="4"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="5" data-font="5"/>
-                    <opt data-widget="auto" data-variable="navbar-font-number" data-value="6" data-font="6"/>
-                </selection>
+                <fontselection data-variable="navbar-font-number"/>
             </list>
         </content>
     </div>