Change size (#16)

Pierre-RA · web-flow · commit 12e5cba40d1d · 2016-10-25T14:43:25.000+02:00
* add new line of buttons

* change fonSize

* fix change size errors
diff --git a/toolbar/test.html b/toolbar/test.html
@@ -12,9 +12,6 @@
 </head>
 <body>
   <style>
-  h2 {
-    margin-bottom: 80px;
-  }
   ul >li {
     display: block;
     border-bottom: 1px dashed #e8e8e8;
diff --git a/toolbar/toolbar.js b/toolbar/toolbar.js
@@ -45,25 +45,41 @@ function loadProvisuToolbar(element, url, file, extra) {
           '<div class="tooltip-inner tooltip-wide"></div></div>',
       });
       $('#toolbar-smaller').click(function() {
-        setFontSize(getFontSize() - 4);
+        setFontSize(-4);
       });
       $('#toolbar-bigger').click(function() {
-        setFontSize(getFontSize() + 4);
+        setFontSize(4);
       });
     });
   }
 }
 
-function getFontSize() {
-  var el = document.body;
-  var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
-  return parseFloat(style);
-}
-
-function setFontSize(size) {
-  var el = document.body;
-  el.style.fontSize = size + 'px';
-  return size;
+function setFontSize(variant) {
+  var tags = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+  var elements = [document.body];
+  var tmp;
+  var currentFontSize;
+  var currentLineHeight;
+  var newSize;
+  var newHeight;
+  for (var i = 0; i < tags.length; i++) {
+    tmp = Array.prototype.slice.call(
+      document.body.getElementsByTagName(tags[i]), 0
+    );
+    elements = elements.concat(tmp);
+  }
+  for (i = 0; i < elements.length; i++) {
+    currentFontSize = parseFloat(
+      window.getComputedStyle(elements[i], null).getPropertyValue('font-size')
+    );
+    currentLineHeight = parseFloat(
+      window.getComputedStyle(elements[i], null).getPropertyValue('line-height')
+    );
+    newSize = currentFontSize + variant;
+    newHeight = currentLineHeight + variant;
+    elements[i].style.fontSize = newSize + 'px';
+    elements[i].style.lineHeight = newHeight + 'px';
+  }
 }
 
 function generateHTML(element, url, i18n, extra) {
@@ -124,17 +140,16 @@ function generateHTML(element, url, i18n, extra) {
       'title="' + i18n.toolbarDescription.message + '">' +
       '<i class="fa fa-low-vision fa-2x" aria-hidden="true"></i>' +
       '</a>' +
-      // Remove font-size buttons
-      // '<button type="button" class="btn btn-default" id="toolbar-smaller" ' +
-      // 'data-toggle="tooltip" data-placement="bottom" ' +
-      // 'title="' + i18n.infoSmaller.message + '">' +
-      // '<i class="fa fa-minus fa-2x" aria-hidden="true"></i>' +
-      // '</button>' +
-      // '<button type="button" class="btn btn-default" id="toolbar-bigger" ' +
-      // 'data-toggle="tooltip" data-placement="bottom" ' +
-      // 'title="' + i18n.infoBigger.message + '">' +
-      // '<i class="fa fa-plus fa-2x" aria-hidden="true"></i>' +
-      // '</button>' +
+      '<button type="button" class="btn btn-default" id="toolbar-smaller" ' +
+      'data-toggle="tooltip" data-placement="bottom" ' +
+      'title="' + i18n.infoSmaller.message + '">' +
+      '<i class="fa fa-minus fa-2x" aria-hidden="true"></i>' +
+      '</button>' +
+      '<button type="button" class="btn btn-default" id="toolbar-bigger" ' +
+      'data-toggle="tooltip" data-placement="bottom" ' +
+      'title="' + i18n.infoBigger.message + '">' +
+      '<i class="fa fa-plus fa-2x" aria-hidden="true"></i>' +
+      '</button>' +
       '</div>';
   }
   document.getElementById(element).innerHTML = html;
