Changeset 3843:f6a2d62807c6

Timestamp:

09/01/18 09:28:56 (7 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

2.14

source:

d2616cbea4808bdd0cbc686d6548ea61810e05dd

Message:

button(type="button") is better than input(type="submit") for show/hide, show/close js button as the input may catch the enter key in form and the button not

Location:

admin

Files:

• js/common.js (modified) (8 diffs)
• style/default-dark.css (modified) (3 diffs)
• style/default.css (modified) (3 diffs)
• style/scss/partials/_auth.scss (modified) (1 diff)
• style/scss/partials/_buttons.scss (modified) (1 diff)

admin/js/common.js

@@ -95 +95 @@
   var toggle = function(i, speed) {
     speed = speed || 0;
+    var b = $(i).get(0);
     if (p.hide) {
-      $(i).get(0).value = p.img_on_txt;
-      $(i).get(0).setAttribute('aria-label', p.img_on_alt);
+      b.firstChild.data = p.img_on_txt;
+      b.setAttribute('value', p.img_on_txt);
+      b.setAttribute('aria-label', p.img_on_alt);
       target.addClass('hide');
     } else {
-      $(i).get(0).value = p.img_off_txt;
-      $(i).get(0).setAttribute('aria-label', p.img_off_alt);
+      b.firstChild.data = p.img_off_txt;
+      b.setAttribute('value', p.img_off_txt);
+      b.setAttribute('aria-label', p.img_off_alt);
       target.removeClass('hide');
       if (p.fn) {
@@ -122 +125 @@
   };
   return this.each(function() {
-    var b = document.createElement('input');
-    b.setAttribute('type', 'submit');
+    var b = document.createElement('button');
+    b.setAttribute('type', 'button');
     b.className = 'details-cmd';
     b.value = p.img_on_txt;
-    b.setAttribute('aria-label', p.img_off_alt);
+    b.setAttribute('aria-label', p.img_on_alt);
+    var t = document.createTextNode(p.img_on_txt);
+    b.appendChild(t);
 
     var ctarget = p.legend_click ? this : b;
@@ -177 +182 @@
   };
   var singleExpander = function singleExpander(line) {
-    $('<input class="details-cmd" type="submit" value="' + dotclear.img_plus_txt + '" aria-label="' + dotclear.img_plus_alt + '"/>').click(function(e) {
+    $('<button type="button" class="details-cmd" aria-label="' + dotclear.img_plus_alt + '">' + dotclear.img_plus_txt + '</button>').click(function (e) {
       toggleArrow(this);
       $.expandContent.options.callback.call(this, line);
@@ -184 +189 @@
   };
   var multipleExpander = function multipleExpander(line, lines) {
-    $('<input class="details-cmd" type="submit" value="' + dotclear.img_plus_txt + '" aria-label="' + dotclear.img_plus_alt + '"/>').click(function(e) {
+    $('<button type="button" class="details-cmd" aria-label="' + dotclear.img_plus_alt + '">' + dotclear.img_plus_txt + '</button>').click(function (e) {
       var that = this;
       var action = toggleArrow(this);
@@ -204 +209 @@
     }
     if (action == 'open') {
-      button.value = dotclear.img_minus_txt;
+      button.firstChild.data = dotclear.img_minus_txt;
+      button.setAttribute('value', dotclear.img_minus_txt);
       button.setAttribute('aria-label', dotclear.img_minus_alt);
     } else {
-      button.value = dotclear.img_plus_txt;
+      button.firstChild.data = dotclear.img_plus_txt;
+      button.setAttribute('value', dotclear.img_plus_txt);
       button.setAttribute('aria-label', dotclear.img_plus_alt);
     }
@@ -244 +251 @@
   };
   var textToggler = function(o) {
-    var b = $('<input class="details-cmd" type="submit" value="' + p.img_on_txt + '" aria-label="' + p.img_on_alt + '"/>');
+    var b = $('<button type="button" class="details-cmd" aria-label="' + p.img_on_alt + '">' + p.img_on_txt + '</button>');
     o.css('cursor', 'pointer');
     var hide = true;
@@ -258 +265 @@
       });
       hide = !hide;
-      var img = $(this).find('input.details-cmd');
+      var img = $(this).find('button.details-cmd');
       if (!hide) {
+        img.html(p.img_off_txt);
         img.attr('value', p.img_off_txt);
         img.attr('aria-label', p.img_off_alt);
       } else {
+        img.html(p.img_on_txt);
         img.attr('value', p.img_on_txt);
         img.attr('aria-label', p.img_on_alt);
@@ -278 +287 @@
   var select = $();
   img.click(function(e) {
+    e.preventDefault();
     return toggle();
-    e.preventDefault();
   });
   $('#content').append(img);

admin/style/default-dark.css

@@ -1335 +1335 @@
   padding: 0; }
 
-input.details-cmd {
+button.details-cmd {
   font-size: 0.9em;
   border: none;
@@ -1343 +1343 @@
   color: currentColor;
   background: transparent; }
-  input.details-cmd:hover, input.details-cmd:focus {
+  button.details-cmd:hover, button.details-cmd:focus {
     background: transparent;
     color: #bee74b; }
@@ -2101 +2101 @@
     padding-bottom: 6px;
     font-size: 1em; }
-  #login-screen input.details-cmd {
-    width: auto;
-    margin: 0 5px 0 0;
-    padding: 0; }
   #login-screen #issue {
     margin-left: 1.33em;

admin/style/default.css

@@ -1335 +1335 @@
   padding: 0; }
 
-input.details-cmd {
+button.details-cmd {
   font-size: 0.9em;
   border: none;
@@ -1343 +1343 @@
   color: currentColor;
   background: transparent; }
-  input.details-cmd:hover, input.details-cmd:focus {
+  button.details-cmd:hover, button.details-cmd:focus {
     background: transparent;
     color: #bee74b; }
@@ -2101 +2101 @@
     padding-bottom: 6px;
     font-size: 1em; }
-  #login-screen input.details-cmd {
-    width: auto;
-    margin: 0 5px 0 0;
-    padding: 0; }
   #login-screen #issue {
     margin-left: 1.33em;

admin/style/scss/partials/_auth.scss

@@ -51 +51 @@
           font-size: 1em;
      }
-  input.details-cmd {
-    width: auto;
-    margin: 0 5px 0 0;
-    padding: 0;
-  }
      #issue {
           margin-left: 1.33em;

admin/style/scss/partials/_buttons.scss

@@ -208 +208 @@
 }
 
-input.details-cmd {
+button.details-cmd {
   font-size: 0.9em;
   border: none;