Untitled

<apex:page standardController="Program__c" extensions="commProgramExt" showHeader="true" standardStylesheets="false">

    <head>

        <apex:stylesheet value="{!URLFOR($Resource.sldsScoped, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />

        <style>

            html {
                width: 98%;
                background: white !important;
                height: 100%;
                overflow: hidden;
            }

            body, section {
                width: 100%;
                height: 100%;
                background:#FFF !important;
                background-color:#FFF !important;
            }

            table {
                margin-top: 1rem;
            }

            th {
                text-transform: uppercase;
                font-size: .875rem;
                position: relative;
                color: #696969;
                max-width: 200px;
                border-bottom: 1px solid #d4d4d4;
                padding: .5rem .5rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                font-weight: normal;
                text-align: left;
                background-color: rgb(253, 253, 253);
            }

            thead {
                border-bottom: .1rem solid #D4D4D4;
            }

            .txtCenter {
                text-align: center !important;
            }

            .scrollable {
                overflow-y: scroll;
            }

            ::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                border-radius: 10px;
                background-color: #F9F9F9;
            }
            ::-webkit-scrollbar {
                width: 12px;
                background-color: #F9F9F9;
            }
            ::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #555;
            }


            .slds-button_brand {
                background: #0070d2 !important;
                color: white !important;
                padding: 0 1rem !important;
            }

            .center {
                text-align:center;
            }

            .active {
                display:block;
            }
            .inactive {
                display:none;
            }

            /* THIS WILL CORRECT THE DISTORTION WHEN PAGE IS EMBEDDED IN COMMUNITY */
            /*fix for community*/
            .brandQuaternaryBgr, .sfdcBody {
                background:#FFF !important;
                background-color:#FFF !important;
            }
            html .brandQuaternaryBgr {
                background:#FFF !important;
                background-color:#FFF !important;
            }
        </style>
    </head>

    <body id="pageBody" class="scrollable slds" onload="isCommunity()" >

        <apex:form >

            <div class="slds center">
                <!--<apex:commandButton value="New Session" action="{  goMkSession}" rerender="table" styleClass="slds-button slds-button_brand" />-->
                <button id="mkSession" class="slds-button slds-button_brand" type="button">New Session</button>
            </div>

            <section id="sessionList" class="slds scroll active">


                <table id="table" class="slds-table slds-table_bordered slds-table_cell-buffer">

                    <thead>
                        <tr class="slds-text-title_caps">
                            <th scope="col">
                                <div class="slds-truncate" title="Name">Session Name</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate" title="Contact Record Type">Session Date</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate txtCenter" title="Confirmed">Total Mentee Sessions</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate txtCenter" title="Enrollment Date">Total Mentor Sessions</div>
                            </th>
                        </tr>
                    </thead>

                    <tbody >

                        <apex:repeat var="sesh" value="{!sessions}">
                            <tr>
                                <td>
                                    <apex:outputlink target="_blank" value="/{!sesh.Id}">{!sesh.Name}</apex:outputlink>
                                </td>

                                <td>
                                    <apex:outputfield value="{!sesh.Session_Date__c}" />
                                </td>

                                <td class="txtCenter">
                                    <apex:outputfield value="{!sesh.Total_Mentee_Sessions__c}" />
                                </td>

                                <td class="txtCenter">
                                    <apex:outputfield value="{!sesh.Total_Mentor_Sessions__c}" />
                                </td>
                            </tr>
                        </apex:repeat>

                    </tbody>

                </table>

            </section>

            <section id="sessionNew" class="slds scroll inactive" style="margin-top: 1rem;">

                <div class="center" style="background:#FFF !important">
                    Program
                    <apex:inputField value="{!session.Program__c}" />
                    <br /><br />
                    Date<br />
                    <apex:inputField value="{!session.Session_Date__c}" />
                    <br /><br />

                    <apex:commandButton value="Save" action="{!save}" styleClass="slds-button slds-button_brand" />

                </div>

            </section>

        </apex:form>
    </body>
    <script>
        'use strict'

        const getId = (x) => document.getElementById(x)
        /*
        const isCommunity = () => {
            if (String(location.href).toLowerCase().includes('iframe')) {

                //after testing, assumes we're in a community
                console.log('Community')
                Array.from(document.getElementsByTagName('body')).map((x) => x.classList.remove('brandQuaternaryBgr'))
                Array.from(document.getElementsByTagName('body')).map( x => x.style.background = '#FFF !important' )
            }
        }
        */
        const mkSession = (e) => toggle(['sessionList', 'sessionNew'], e.target)

        const toggle = (arr, elem) => {

            arr.map(x => {

                x = getId(x)

                if(x.classList.contains('active')){
                    x.classList.remove('active')
                    x.classList.add('inactive')
                }
                else {
                    x.classList.remove('inactive')
                    x.classList.add('active')
                }
            })

            if(elem.innerText == 'New Session'){
                elem.innerText = 'Cancel'
                elem.classList.remove('slds-button_brand')
                elem.classList.add('slds-button_neutral')
            }
            else {
                elem.innerText =  'New Session'
                elem.classList.remove('slds-button_neutral')
                elem.classList.add('slds-button_brand')
            }
        }

        // run logic
        //isCommunity()
        getId('mkSession').onclick = (e) => mkSession(e)

    </script>
</apex:page>