From 842952fe1f0cc4319849995cbd6759cd670c9c23 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 17 Apr 2018 15:50:24 +0200
Subject: [PATCH] New checkboxes and radio input everywhere

---
 customize.dist/pages.js                       | 108 +++++++++++++-----
 .../src/less2/include/alertify.less           |   4 +-
 .../src/less2/include/checkmark.less          |  17 +++
 .../src/less2/pages/page-login.less           |   2 +
 .../src/less2/pages/page-register.less        |   2 +
 www/common/common-interface.js                |  28 +----
 www/common/common-ui-elements.js              |  24 ++--
 www/register/main.js                          |  13 +--
 www/settings/inner.js                         |  58 ++++------
 www/slide/inner.js                            |  52 +++------
 10 files changed, 160 insertions(+), 148 deletions(-)

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 9567820a9..d2de214a4 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -639,6 +639,81 @@ define([
         );
     };
 
+    Pages.createCheckbox = function (id, label, checked, opts) {
+        opts = opts|| {};
+        // Input properties
+        var inputOpts = {
+            type: 'checkbox',
+            id: id
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        $.extend(inputOpts, opts.input || {});
+
+        // Label properties
+        var labelOpts = {};
+        $.extend(labelOpts, opts.label || {});
+        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
+
+        // Mark properties
+        var markOpts = { tabindex: 0 };
+        $.extend(markOpts, opts.mark || {});
+
+        var input = h('input', inputOpts);
+        var mark = h('span.cp-checkmark-mark', markOpts);
+
+        $(mark).keydown(function (e) {
+            if (e.which === 32) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(input).prop('checked', !$(input).is(':checked'));
+            }
+        });
+
+        return h('label.cp-checkmark', labelOpts, [
+            input,
+            mark,
+            label
+        ]);
+    };
+
+    Pages.createRadio = function (name, id, label, checked, opts) {
+        opts = opts|| {};
+        // Input properties
+        var inputOpts = {
+            type: 'radio',
+            id: id,
+            name: name
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        $.extend(inputOpts, opts.input || {});
+
+        // Label properties
+        var labelOpts = {};
+        $.extend(labelOpts, opts.label || {});
+        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
+
+        // Mark properties
+        var markOpts = { tabindex: 0 };
+        $.extend(markOpts, opts.mark || {});
+
+        var input = h('input', inputOpts);
+        var mark = h('span.cp-radio-mark', markOpts);
+
+        $(mark).keydown(function (e) {
+            if (e.which === 32) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(input).prop('checked', !$(input).is(':checked'));
+            }
+        });
+
+        return h('label.cp-radio', labelOpts, [
+            input,
+            mark,
+            label
+        ]);
+    };
+
     var hiddenLoader = function () {
         var loader = loadingScreen();
         loader.style.display = 'none';
@@ -688,27 +763,10 @@ define([
                         placeholder: Msg.login_confirm,
                     }),
                     h('div.checkbox-container', [
-                        h('input#import-recent', {
-                            name: 'import-recent',
-                            type: 'checkbox',
-                            checked: true
-                        }),
-                        // hscript doesn't generate for on label for some
-                        // reason... use jquery as a temporary fallback
-                        setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
-                        /*h('label', {
-                            'for': 'import-recent',
-                        }, Msg.register_importRecent),*/
+                        Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
                     ]),
                     h('div.checkbox-container', [
-                        h('input#accept-terms', {
-                            name: 'accept-terms',
-                            type: 'checkbox'
-                        }),
-                        setHTML($('<label for="accept-terms"></label>')[0], Msg.register_acceptTerms)
-                        /*setHTML(h('label', {
-                            'for': 'accept-terms',
-                        }), Msg.register_acceptTerms),*/
+                        $(Pages.createCheckbox('import-recent')).append(Msg.register_acceptTerms)[0]
                     ]),
                     h('button#register.btn.cp-login-register', Msg.login_register)
                 ])
@@ -750,17 +808,7 @@ define([
                             placeholder: Msg.login_password,
                         }),
                         h('div.checkbox-container', [
-                            h('input#import-recent', {
-                                name: 'import-recent',
-                                type: 'checkbox',
-                                checked: true
-                            }),
-                            // hscript doesn't generate for on label for some
-                            // reason... use jquery as a temporary fallback
-                            setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
-                            /*h('label', {
-                                'for': 'import-recent',
-                            }, Msg.register_importRecent),*/
+                            Pages.createCheckbox('import-recent', Msg.register_importRecent, true),
                         ]),
                         h('div.extra', [
                             h('button.login.first.btn', Msg.login_login)
diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index 90cef238e..66e66c791 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -280,7 +280,9 @@
                     }
 
                     &:focus {
-                        border: 1px dotted @alertify-base;
+                        //border: 1px dotted @alertify-base;
+                        box-shadow: 0px 0px 5px @colortheme_alertify-primary;
+                        outline: none;
                     }
                     &::-moz-focus-inner {
                         border: 0;
diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less
index 665df1153..5dbf2d125 100644
--- a/customize.dist/src/less2/include/checkmark.less
+++ b/customize.dist/src/less2/include/checkmark.less
@@ -17,6 +17,10 @@
         -ms-user-select: none;
         user-select: none;
 
+        & > a {
+            margin-left: 0.25em;
+        }
+
         &.cp-checkmark-secondary {
             .cp-checkmark-mark {
                 &:after {
@@ -26,6 +30,7 @@
             input {
                 &:checked ~ .cp-checkmark-mark {
                     background-color: @colortheme_checkmark-back2;
+                    border-color: @colortheme_checkmark-back2;
                 }
             }
         }
@@ -37,6 +42,7 @@
             display: none;
             &:checked ~ .cp-checkmark-mark {
                 background-color: @colortheme_checkmark-back1;
+                border-color: @colortheme_checkmark-back1;
                 &:after {
                     display: block;
                 }
@@ -63,6 +69,11 @@
                 border: solid @colortheme_checkmark-col1;
                 border-width: 0 @width @width 0;
             }
+            &:focus {
+                //border-color: #FF007C !important;
+                box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
+                outline: none;
+            }
         }
 
     }
@@ -97,6 +108,7 @@
             display: none;
             &:checked ~ .cp-radio-mark {
                 background-color: @colortheme_checkmark-back1;
+                border-color: @colortheme_checkmark-back1;
                 &:after {
                     display: block;
                 }
@@ -127,6 +139,11 @@
                 //border: solid @colortheme_checkmark-col1;
                 //border-width: 0 @width @width 0;
             }
+            &:focus {
+                //border-color: #FF007C !important;
+                box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
+                outline: none;
+            }
         }
 
     }
diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less
index 77dead84c..dafb447ed 100644
--- a/customize.dist/src/less2/pages/page-login.less
+++ b/customize.dist/src/less2/pages/page-login.less
@@ -1,11 +1,13 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme-all.less";
 @import (once) "../include/alertify.less";
+@import (once) "../include/checkmark.less";
 @import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();
 .alertify_main();
+.checkmark_main(20px);
 
 .form-group {
     .extra {
diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less
index 6336c6aa3..68aa7e802 100644
--- a/customize.dist/src/less2/pages/page-register.less
+++ b/customize.dist/src/less2/pages/page-register.less
@@ -1,11 +1,13 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme-all.less";
 @import (once) "../include/alertify.less";
+@import (once) "../include/checkmark.less";
 @import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();
 .alertify_main();
+.checkmark_main(20px);
 
 .cp-container {
     .form-group {
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index d659b25b2..eafdaca78 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -740,33 +740,9 @@ define([
         });
     };
 
-    UI.createCheckbox = function (id, label, checked) {
-        var inputOpts = {
-            type: 'checkbox',
-            id: id
-        };
-        if (checked) { inputOpts.checked = 'checked'; }
-        console.log(inputOpts);
-        return h('label.cp-checkmark', [
-            h('input', inputOpts),
-            h('span.cp-checkmark-mark'),
-            label
-        ]);
-    };
+    UI.createCheckbox = Pages.createCheckbox;
 
-    UI.createRadio = function (name, id, label, checked) {
-        var inputOpts = {
-            type: 'radio',
-            id: id,
-            name: name
-        };
-        if (checked) { inputOpts.checked = 'checked'; }
-        return h('label.cp-radio', [
-            h('input', inputOpts),
-            h('span.cp-radio-mark'),
-            label
-        ]);
-    };
+    UI.createRadio = Pages.createRadio;
 
     return UI;
 });
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index f4f50b67e..efcf4a677 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -235,8 +235,10 @@ define([
         var link = h('div.cp-share-modal', [
             h('label', Messages.share_linkAccess),
             h('br'),
-            UI.createRadio('cp-share-editable', 'cp-share-editable-true', Messages.share_linkEdit, true),
-            UI.createRadio('cp-share-editable', 'cp-share-editable-false', Messages.share_linkView, false),
+            UI.createRadio('cp-share-editable', 'cp-share-editable-true',
+                           Messages.share_linkEdit, true, { mark: {tabindex:1} }),
+            UI.createRadio('cp-share-editable', 'cp-share-editable-false',
+                           Messages.share_linkView, false, { mark: {tabindex:1} }),
             /*h('input#cp-share-editable-true.cp-share-editable-value', {
                 type: 'radio',
                 name: 'cp-share-editable',
@@ -252,10 +254,10 @@ define([
             h('br'),
             h('label', Messages.share_linkOptions),
             h('br'),
-            UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed),
-            UI.createCheckbox('cp-share-present', Messages.share_linkPresent),
+            UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
+            UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
             h('br'),
-            UI.dialog.selectable('', { id: 'cp-share-link-preview' })
+            UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 })
         ]);
         if (!hashes.editHash) {
             $(link).find('#cp-share-editable-false').attr('checked', true);
@@ -1674,14 +1676,10 @@ define([
         var priv = common.getMetadataMgr().getPrivateData();
         var c = (priv.settings.general && priv.settings.general.creation) || {};
         if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) {
-            $advanced = $('<input>', {
-                type: 'checkbox',
-                checked: 'checked',
-                id: 'cp-app-toolbar-creation-advanced'
-            }).appendTo($advancedContainer);
-            $('<label>', {
-                for: 'cp-app-toolbar-creation-advanced'
-            }).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
+            var $cboxLabel = $(UI.createCheckbox('cp-app-toolbar-creation-advanced',
+                                                 Messages.creation_newPadModalAdvanced, true))
+                                 .appendTo($advancedContainer);
+            $advanced = $cboxLabel.find('input');
             $description.append('<br>');
             $description.append(Messages.creation_newPadModalDescriptionAdvanced);
         }
diff --git a/www/register/main.js b/www/register/main.js
index dea51dad1..8ea17eba7 100644
--- a/www/register/main.js
+++ b/www/register/main.js
@@ -118,15 +118,10 @@ define([
         }, 500);
 
         $register.on('keypress', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            console.error(e.which);
-            switch (e.which) {
-                case 13: return clickRegister();
-                case 13: return clickRegister();
-                default:
-                    //console.log(e.which);
+            if (e.which === 13) {
+                e.preventDefault();
+                e.stopPropagation();
+                return clickRegister();
             }
         });
 
diff --git a/www/settings/inner.js b/www/settings/inner.js
index 21763714d..a6069c21b 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -233,16 +233,14 @@ define([
         // Disable
         $('<span>', {'class': 'cp-sidebarlayout-description'})
             .text(Messages.settings_disableThumbnailsDescription).appendTo($div);
-        var $label = $('<label>', { 'for': 'disableThumbnails', 'class': 'noTitle' })
-            .text(Messages.settings_disableThumbnailsAction);
 
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $checkbox = $('<input>', {
-            'type': 'checkbox',
-            id: 'disableThumbnails'
-        }).on('change', function () {
+        var cbox = UI.createCheckbox('disableThumbnails',
+                                   Messages.settings_disableThumbnailsAction,
+                                   false, { label: {class: 'noTitle'} });
+        var $checkbox = $(cbox).find('input').on('change', function () {
             $spinner.show();
             $ok.hide();
             var val = $checkbox.is(':checked') || false;
@@ -252,8 +250,7 @@ define([
             });
         });
 
-        $checkbox.appendTo($div);
-        $label.appendTo($div);
+        $(cbox).appendTo($div);
 
         $ok.hide().appendTo($div);
         $spinner.hide().appendTo($div);
@@ -283,9 +280,6 @@ define([
 
         $('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
 
-        var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
-            .text(Messages.settings_userFeedback);
-
         $('<span>', {'class': 'cp-sidebarlayout-description'})
             .append(Messages.settings_userFeedbackHint1)
             .append(Messages.settings_userFeedbackHint2).appendTo($div);
@@ -293,10 +287,10 @@ define([
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $checkbox = $('<input>', {
-            'type': 'checkbox',
-            id: 'cp-settings-userfeedback'
-        }).on('change', function () {
+        var cbox = UI.createCheckbox('cp-settings-userfeedback',
+                                   Messages.settings_userFeedback,
+                                   false, { label: {class: 'noTitle'} });
+        var $checkbox = $(cbox).find('input').on('change', function () {
             $spinner.show();
             $ok.hide();
             var val = $checkbox.is(':checked') || false;
@@ -306,8 +300,7 @@ define([
             });
         });
 
-        $checkbox.appendTo($div);
-        $label.appendTo($div);
+        $(cbox).appendTo($div);
 
         $ok.hide().appendTo($div);
         $spinner.hide().appendTo($div);
@@ -730,21 +723,19 @@ define([
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
-                    .text(Messages.settings_padWidthLabel);
-        var $input = $('<input>', {
-            type: 'checkbox',
-            id: 'cp-settings-padwidth'
-        }).on('change', function () {
+        var cbox = UI.createCheckbox('cp-settings-padwidth',
+                                   Messages.settings_padWidthLabel,
+                                   false, { label: {class: 'noTitle'} });
+        var $checkbox = $(cbox).find('input').on('change', function () {
             $spinner.show();
             $ok.hide();
-            var val = $input.is(':checked');
+            var val = $checkbox.is(':checked');
             common.setAttribute(['pad', 'width'], val, function () {
                 $spinner.hide();
                 $ok.show();
             });
-        }).appendTo($div);
-        $label.appendTo($div);
+        });
+        $(cbox).appendTo($div);
 
         $ok.hide().appendTo($div);
         $spinner.hide().appendTo($div);
@@ -753,7 +744,7 @@ define([
         common.getAttribute(['pad', 'width'], function (e, val) {
             if (e) { return void console.error(e); }
             if (val) {
-                $input.attr('checked', 'checked');
+                $checkbox.attr('checked', 'checked');
             }
         });
         return $div;
@@ -805,13 +796,14 @@ define([
         }).css('flex-flow', 'column')
         .appendTo($div);
 
-        var $input = $('<input>', {
-            type: 'checkbox',
-        }).on('change', function () {
-            var val = $input.is(':checked');
+
+        var cbox = UI.createCheckbox('cp-settings-codeindent');
+        var $checkbox = $(cbox).find('input').on('change', function () {
+            var val = $checkbox.is(':checked');
             if (typeof(val) !== 'boolean') { return; }
             common.setAttribute(['codemirror', key], val);
-        }).appendTo($inputBlock);
+        });
+        $(cbox).appendTo($inputBlock);
 
         /*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
             $input[0].checked = !!n;
@@ -819,7 +811,7 @@ define([
 
         common.getAttribute(['codemirror', key], function (e, val) {
             if (e) { return void console.error(e); }
-            $input[0].checked = !!val;
+            $checkbox[0].checked = !!val;
         });
         return $div;
     };
diff --git a/www/slide/inner.js b/www/slide/inner.js
index 88e534b44..76dfeceda 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -153,53 +153,33 @@ define([
             $('<b>').text(Messages.printOptions).appendTo($p);
             $p.append($('<br>'));
             // Slide number
-            $('<input>', {
-                type: 'checkbox',
-                id: 'cp-app-slide-options-number',
-                checked: slideOptionsTmp.slide
-            }).on('change', function () {
+            var cbox = UI.createCheckbox('cp-app-slide-options-number', Messages.printSlideNumber,
+                                         slideOptionsTmp.slide);
+            $(cbox).appendTo($p).find('input').on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.slide = c;
-            }).appendTo($p).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-number'}).text(Messages.printSlideNumber)
-                .appendTo($p);
-            $p.append($('<br>'));
+            }).css('width', 'auto');
             // Date
-            $('<input>', {
-                type: 'checkbox',
-                id: 'cp-app-slide-options-date',
-                checked: slideOptionsTmp.date
-            }).on('change', function () {
+            var cboxDate = UI.createCheckbox('cp-app-slide-options-date', Messages.printDate,
+                                         slideOptionsTmp.date);
+            $(cboxDate).appendTo($p).find('input').on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.date = c;
-            }).appendTo($p).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-date'}).text(Messages.printDate)
-                .appendTo($p);
-            $p.append($('<br>'));
+            }).css('width', 'auto');
             // Title
-            $('<input>', {
-                type: 'checkbox',
-                id: 'cp-app-slide-options-title',
-                checked: slideOptionsTmp.title
-            }).on('change', function () {
+            var cboxTitle = UI.createCheckbox('cp-app-slide-options-title', Messages.printTitle,
+                                         slideOptionsTmp.title);
+            $(cboxTitle).appendTo($p).find('input').on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.title = c;
-            }).appendTo($p).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-title'}).text(Messages.printTitle)
-                .appendTo($p);
-            $p.append($('<br>'));
+            }).css('width', 'auto');
             // Transition
-            $('<input>', {
-                type: 'checkbox',
-                id: 'cp-app-slide-options-transition',
-                checked: slideOptionsTmp.transition
-            }).on('change', function () {
+            var cboxTransition = UI.createCheckbox('cp-app-slide-options-transition', Messages.printTransition,
+                                         slideOptionsTmp.transition);
+            $(cboxTransition).appendTo($p).find('input').on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.transition = c;
-            }).appendTo($p).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-transition'}).text(Messages.printTransition)
-                .appendTo($p);
-            $p.append($('<br>'));
+            }).css('width', 'auto');
             $p.append($('<br>'));
             // Background image
             $('<label>', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground)