<!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id='button-#id#'
      class="cursor cmd tooltips cmd-widget container-fluid"
      onClick="jeedom.cmd.execute({id: '#id#'});"
      data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">

   <div class="button">
     <i id="icon-#id#" class="fa fa-lock"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('#taille#') ? parseFloat('#taille#'):60;
     var borderSize = is_numeric('#taille_bordure#') ? parseFloat('#taille_bordure#'):3;
     var iconSize = is_numeric('#taille_icone#') ? parseFloat('#taille_icone#'):30;
     var color = ('#couleur#' !='#'+'couleur#') ? "#couleur#":"white";

     $("#button-#id# .button").css("border", borderSize+"px solid "+color);
     $("#button-#id# .button").css("border-radius", buttonSize+"px");
     $("#button-#id# .button").css("color", color);
     $("#button-#id# .button").css("width", buttonSize+"px");
     $("#button-#id# .button").css("height", buttonSize+"px");
     $("#button-#id# .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-#id# .button i.fa, #button-#id# .button i.fas, #button-#id# .button i.fab").css("line-height",lineheight+"px");
     $("#button-#id# .button i.fa, #button-#id# .button i.fas, #button-#id# .button i.fab").css("color",color);

     var type = ('#type#' !='#'+'type#') ? "#type#":"fa";
     var icon = ('#icone#'!='#'+'icone#') ? "#icone#" : "fa-lock";
     $("#icon-#id#").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-#id#").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-#id#").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script>