TheVishnuKumar/Convert Visualforce Checkboxes And Radio Buttons in Lightning Design System

## Convert Visualforce Checkboxes And Radio Buttons in Lightning Design System
<!--
    Description: The main script to convert select list/radio from classic to lightning UI.
    Author: Vishnu Kumar
-->
<style>
   .convertToLSD{
      opacity: 0;
   }
</style>
<script>
   //Convert Standard Checkboxes and Radio Buttons to SLDS
   function convertCheckBoxToLDS() {
     var Row = document.getElementsByClassName("convertToLSD");
     for (var k = 0; k < Row.length; k++) {
         var colTds = Row[k].getElementsByTagName("td");
         for (var i = 0; i < colTds.length; i++) {
             var inrHtml = colTds[i].innerHTML;
             var chkId = inrHtml.substring(inrHtml.indexOf("id=") + 4, inrHtml.indexOf("\"", inrHtml.indexOf("id=") + 4));
             var chkBx = inrHtml.substring(inrHtml.indexOf("<input"), inrHtml.indexOf(">") + 1);
             var chkLable = colTds[i].getElementsByTagName("label")[0].textContent;
             var typeOfInput = colTds[i].getElementsByTagName("input")[0].getAttribute("type");
             var newChkBox = '<label class="slds-' + typeOfInput + '" for="' + chkId + '">' + chkBx +
                 '<span class="slds-' + typeOfInput + '--faux"></span>' +
                 '<span class="slds-form-element__label">' + chkLable + '</span>' +
                 '</label>';
             colTds[i].innerHTML = newChkBox;
         }

         Row[k].style.opacity = 1;
     }
   }
</script>

## VFToLDS.page
<!--
    Description: Demo of using the auto conversion select list from classic to lightning.
    Author: Vishnu Kumar
-->
<apex:page controller="VFToLDSController" sidebar="false" showHeader="false" standardStylesheets="false">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="{!URLFOR($Resource.SLDS080,'SLDS080/assets/styles/salesforce-lightning-design-system.css')}" type="text/css" rel="stylesheet" />

<style>
    body{
        background-color: whitesmoke;
    }
</style>

<script>
    $( document ).ready(function() {
        convertCheckBoxToLDS();
    });

    //Convert standard checkboxes to Lightning Design System
    function convertCheckBoxToLDS() {
        var Row = document.getElementsByClassName("convertToLSD");
        for (var k = 0; k < Row.length; k++) {
            var colTds = Row[k].getElementsByTagName("td");
            for (var i = 0; i < colTds.length; i++) {
                var inrHtml = colTds[i].innerHTML;
                var chkId = inrHtml.substring(inrHtml.indexOf("id=") + 4, inrHtml.indexOf("\"", inrHtml.indexOf("id=") + 4));
                var chkBx = inrHtml.substring(inrHtml.indexOf("<input"), inrHtml.indexOf(">") + 1);
                var chkLable = colTds[i].getElementsByTagName("label")[0].textContent;
                var typeOfInput = colTds[i].getElementsByTagName("input")[0].getAttribute("type");
                var newChkBox = '<label class="slds-' + typeOfInput + '" for="' + chkId + '">' + chkBx +
                    '<span class="slds-' + typeOfInput + '--faux"></span>' +
                    '<span class="slds-form-element__label">' + chkLable + '</span>' +
                    '</label>';
                colTds[i].innerHTML = newChkBox;
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<div class="slds-page-header nav" role="banner">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <div class="slds-media">
        <div class="slds-media__figure">
          <b>VF<font style="font-size:40px;color: blue;">2</font>LDS</b>
        </div>
        <div class="slds-media__body">
            <p class="slds-text-heading--label" style="font-size: 15px;margin-top: 13px;">Convert Visualforce checkboxes in Lightning Design System Using Javascript</p>
        </div>
      </div>
    </div>
  </div>
</div>

<apex:form >
    <table style="width:100%;margin-left: 16%;">
        <tr>
            <td>
                <h1><b>Before</b></h1>
                <div style="height:200px;width:200px;" class="slds-scrollable--y">
                    <apex:selectCheckboxes layout="pageDirection">
                        <apex:selectOptions value="{!lstSelOpt}"/>
                    </apex:selectCheckboxes>
                </div>
            </td>
            <td>
                <h1><b>After</b></h1>
                <div style="height:200px;width:200px;" class="slds-scrollable--y">
                    <!--This list will be converted in SLDS format-->
                    <!--I have specified styleclass here as convertToLSD. The script will pick this list only.-->
                    <apex:selectCheckboxes styleClass="convertToLSD" layout="pageDirection">
                        <apex:selectOptions value="{!lstSelOpt}"/>
                    </apex:selectCheckboxes>
                </div>
            </td>
        </tr>
    </table>
</apex:form>
</html>
</apex:page>

## VFToLDSController.cls
/*
    Description: This class is generation dummy data for select list.
    Author: Vishnu Kumar
*/
public class VFToLDSController{
    public List<SelectOption> lstSelOpt{get;set;}
    public VFToLDSController(){
        lstSelOpt = new List<SelectOption>();
        for(integer i=1 ; i<100 ; i++ ){
           lstSelOpt.add( new SelectOption( 'ID-'+i, 'CheckBox'+i ) );
        }
    }
}
	<!--
	Description: The main script to convert select list/radio from classic to lightning UI.
	Author: Vishnu Kumar
	-->
	<style>
	.convertToLSD{
	opacity: 0;
	}
	</style>
	<script>
	//Convert Standard Checkboxes and Radio Buttons to SLDS
	function convertCheckBoxToLDS() {
	var Row = document.getElementsByClassName("convertToLSD");
	for (var k = 0; k < Row.length; k++) {
	var colTds = Row[k].getElementsByTagName("td");
	for (var i = 0; i < colTds.length; i++) {
	var inrHtml = colTds[i].innerHTML;
	var chkId = inrHtml.substring(inrHtml.indexOf("id=") + 4, inrHtml.indexOf("\"", inrHtml.indexOf("id=") + 4));
	var chkBx = inrHtml.substring(inrHtml.indexOf("<input"), inrHtml.indexOf(">") + 1);
	var chkLable = colTds[i].getElementsByTagName("label")[0].textContent;
	var typeOfInput = colTds[i].getElementsByTagName("input")[0].getAttribute("type");
	var newChkBox = '<label class="slds-' + typeOfInput + '" for="' + chkId + '">' + chkBx +
	'<span class="slds-' + typeOfInput + '--faux"></span>' +
	'<span class="slds-form-element__label">' + chkLable + '</span>' +
	'</label>';
	colTds[i].innerHTML = newChkBox;
	}

	Row[k].style.opacity = 1;
	}
	}
	</script>
	<!--
	Description: Demo of using the auto conversion select list from classic to lightning.
	Author: Vishnu Kumar
	-->
	<apex:page controller="VFToLDSController" sidebar="false" showHeader="false" standardStylesheets="false">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<link href="{!URLFOR($Resource.SLDS080,'SLDS080/assets/styles/salesforce-lightning-design-system.css')}" type="text/css" rel="stylesheet" />

	<style>
	body{
	background-color: whitesmoke;
	}
	</style>

	<script>
	$( document ).ready(function() {
	convertCheckBoxToLDS();
	});

	//Convert standard checkboxes to Lightning Design System
	function convertCheckBoxToLDS() {
	var Row = document.getElementsByClassName("convertToLSD");
	for (var k = 0; k < Row.length; k++) {
	var colTds = Row[k].getElementsByTagName("td");
	for (var i = 0; i < colTds.length; i++) {
	var inrHtml = colTds[i].innerHTML;
	var chkId = inrHtml.substring(inrHtml.indexOf("id=") + 4, inrHtml.indexOf("\"", inrHtml.indexOf("id=") + 4));
	var chkBx = inrHtml.substring(inrHtml.indexOf("<input"), inrHtml.indexOf(">") + 1);
	var chkLable = colTds[i].getElementsByTagName("label")[0].textContent;
	var typeOfInput = colTds[i].getElementsByTagName("input")[0].getAttribute("type");
	var newChkBox = '<label class="slds-' + typeOfInput + '" for="' + chkId + '">' + chkBx +
	'<span class="slds-' + typeOfInput + '--faux"></span>' +
	'<span class="slds-form-element__label">' + chkLable + '</span>' +
	'</label>';
	colTds[i].innerHTML = newChkBox;
	}
	}
	}
	</script>

	<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<div class="slds-page-header nav" role="banner">
	<div class="slds-grid">
	<div class="slds-col slds-has-flexi-truncate">
	<div class="slds-media">
	<div class="slds-media__figure">
	<b>VF<font style="font-size:40px;color: blue;">2</font>LDS</b>
	</div>
	<div class="slds-media__body">
	<p class="slds-text-heading--label" style="font-size: 15px;margin-top: 13px;">Convert Visualforce checkboxes in Lightning Design System Using Javascript</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<apex:form >
	<table style="width:100%;margin-left: 16%;">
	<tr>
	<td>
	<h1><b>Before</b></h1>
	<div style="height:200px;width:200px;" class="slds-scrollable--y">
	<apex:selectCheckboxes layout="pageDirection">
	<apex:selectOptions value="{!lstSelOpt}"/>
	</apex:selectCheckboxes>
	</div>
	</td>
	<td>
	<h1><b>After</b></h1>
	<div style="height:200px;width:200px;" class="slds-scrollable--y">
	<!--This list will be converted in SLDS format-->
	<!--I have specified styleclass here as convertToLSD. The script will pick this list only.-->
	<apex:selectCheckboxes styleClass="convertToLSD" layout="pageDirection">
	<apex:selectOptions value="{!lstSelOpt}"/>
	</apex:selectCheckboxes>
	</div>
	</td>
	</tr>
	</table>
	</apex:form>
	</html>
	</apex:page>
	/*
	Description: This class is generation dummy data for select list.
	Author: Vishnu Kumar
	*/
	public class VFToLDSController{
	public List<SelectOption> lstSelOpt{get;set;}
	public VFToLDSController(){
	lstSelOpt = new List<SelectOption>();
	for(integer i=1 ; i<100 ; i++ ){
	lstSelOpt.add( new SelectOption( 'ID-'+i, 'CheckBox'+i ) );
	}
	}
	}