Embed Details
Add this style information to the head of your file.
<![CDATA[<link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/electeds-look-up.css" type="text/css">]]>
Add this html where you need the graph to appear
<![CDATA[<div class="use-tailwind">
<section v-scope="ElectedsLookUpWrapper($el)" @vue:mounted="wrapperMounted($el)" style="display:none" class="w-11/12 md:w-10/12 mx-auto" id="elected-official-lookup">
<div v-scope="activeElectedModule()"
@vue:mounted="moduleMounted"
id="active-elected-module"
ref="activeElectedModule"
class="fixed inset-top-25 inset-x-0 z-20 w-full md:w-2/3 mx-auto overflow-x-hidden transition-height duration-300 shadow-lg rounded-lg bg-white"
:class="{
'h-0 border-0' : !store.moduleIsActive,
'h-module border-2 border-blue-300' : store.moduleIsActive
}">
<svg
@click.stop="handleXClick"
@keyup.enter.stop="handleXClick"
:tabindex="store.moduleIsActive ? 0 : -1"
aria-label="close elected offical module"
class="h-12 w-12 md:h-24 md:w-24 sticky top-0 z-30 close-icon cursor-pointer"
alt="an icon of an x"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width=".5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="top-0 w-full flex flex-col md:flex-row justify-center items-center gap-x-3 py-3 px-5 md:px-20 mb-10 bg-white">
<div class="w-full mx-auto">
<div class="bg-no-repeat bg-center mx-auto" style="background-image:url('//d1o40k53wiknb7.cloudfront.net/assets/placeholder-headshot.svg');height:200px;width:200px">
<img v-if="store.activeElected.image_url" class=" mx-auto object-cover rounded-full object-top border-4 border-green" style="height:200px;width:200px" :src="store.activeElected.image_url" :alt="'a headshot of ' + store.activeElected.first_name + store.activeElected.last_name ">
</div>
<div style="bottom: 30px" class="relative w-full md:w-3/4 mx-auto bg-blue-400">
<h3 class="px-3 text-white text-center font-normal ">{{name}}</h3>
<h3 class="px-3 text-white text-center font-bold text-2xl md:text-3xl">{{title}}</h3>
</div>
</div>
<div class="grid grid-flow-cols grid-cols-2 gap-x-3 gap-y-10 w-full my-10 md:my-0">
<p class="col-span-2 text-center font-bold">Contact {{titleName}}</p>
<a v-if="email" :aria-label="'Email ' + titleName" :href="'mailto:' + email" target="_blank" class="flex flex-col items-center">
<img width="50" src="//d1o40k53wiknb7.cloudfront.net/assets/mail.svg" alt="an icon of mail">
<h4 class="text-base md:text-xl text-center text-clip">{{email}}</h4>
</a>
<a v-if="form && !email" :aria-label="'Fill out contact form for ' + titleName" :href="form" target="_blank" class="flex flex-col items-center">
<img width= "50" src="//d1o40k53wiknb7.cloudfront.net/assets/send.svg" alt="an icon of a paper airplane">
<h4 class="text-base md:text-xl text-center">Contact Form</h4>
</a>
<a v-if="facebook" :aria-label="'Visit ' + titleName + '\'s Facebook page'" :href="facebook" target="_blank" class="flex flex-col items-center">
<img width="50" src="//d1o40k53wiknb7.cloudfront.net/assets/facebook.svg" alt="an icon of the facebook logo">
<h4 class="text-base md:text-xl text-center">Facebook</h4>
</a>
<a v-if="twitter" :aria-label="'Visit ' + titleName + '\'s Twitter page'" :href="'https://twitter.com/' + twitter" target="_blank" class="flex flex-col items-center">
<img width="50" src="//d1o40k53wiknb7.cloudfront.net/assets/twitter.svg" alt="an icon of the twitter logo">
<h4 class="text-base md:text-xl text-center">Twitter</h4>
</a>
<a v-if="website" :aria-label="'Visit' + titleName + '\'s website'" :href="website" target="_blank" class="flex flex-col items-center">
<img width="50" src="//d1o40k53wiknb7.cloudfront.net/assets/browsing.svg" alt="icon of a computer screen">
<h4 class="text-base md:text-xl text-center">Website</h4>
</a>
</div>
</div>
<ul role="tablist" class="flex justify-evenly">
<li
class="border-b-2 text-xl md:text-2xl font-bold "
:class="
{'cursor-default border-red' : $el.dataset.moduleNav === activeModuleArticle,
'cursor-pointer border-transparent hover:border-red-x-light' : $el.dataset.moduleNav !== activeModuleArticle
}"
data-module-nav="bio"
@click="handleModuleNavClick"
@keyup.enter="handleModuleNavClick"
role="tab"
:tabindex="store.moduleIsActive ? 0 : -1"
aria-controls="module-bio"
:aria-selected="$el.dataset.moduleNav === activeModuleArticle"
>Bio
</li>
<li
class="border-b-2 font-bold text-xl md:text-2xl"
:class="
{'cursor-default border-red' : $el.dataset.moduleNav === activeModuleArticle,
'cursor-pointer border-transparent hover:border-red-x-light' : $el.dataset.moduleNav !== activeModuleArticle
}"
data-module-nav="about"
@click="handleModuleNavClick"
@keyup.enter="handleModuleNavClick"
role="tab"
:tabindex="store.moduleIsActive ? 0 : -1"
aria-controls="module-about"
:aria-selected="$el.dataset.moduleNav === activeModuleArticle"
>District Information
</li>
</ul>
<div v-show="$el.dataset.moduleArticle===activeModuleArticle" data-module-article="bio" id="module-bio" role="tabpanel" class="w-3/4 mx-auto my-10">
<p class="my-3 text-center text-red font-bold">Current Term: {{termStart}} - {{termEnds}}</p>
<p v-html="bio"></p>
</div>
<div v-show="$el.dataset.moduleArticle===activeModuleArticle" data-module-article="about" id="module-about" role="tabpanel" class="w-3/4 mx-auto my-10">
<h3 class="text-center">{{districtAbout.name_formal}}</h3>
<ul class="my-5 list-disc">
<li>Represents: {{districtAbout.label}}</li>
<li v-show="districtAbout.term_length">Term Length: {{districtAbout.term_length}}</li>
<li v-show="districtAbout.term_limit">Term Limit: {{districtAbout.term_limit}}</li>
<li v-show="districtAbout.election_frequency">Elected Every {{districtAbout.election_frequency}}</li>
<li v-show="districtAbout.inauguration_rules">Inauguration: {{districtAbout.inauguration_rules}}</li>
</ul>
</div>
</div> <div v-scope="Search()" role="search" aria-label="for elected officials using a New York City address" class="w-full mx-auto">
<form @submit.prevent="" class="relative w-full md:w-2/3 mx-auto" action="">
<label for="address-search" v-show="!store.startedSearch" :aria-hidden="store.startedSearch">Begin by typing your New York City Address below.</label>
<label for="address-search" v-show="store.searching" :aria-hidden="!store.searching">Select address to see a list of your elected officials.</label>
<label for="address-search" v-show="store.completedSearch" :aria-hidden="!store.completedSearch">Enter another address to search again.</label>
<input
@input.prevent="getAddresses"
class="w-full border-blue-400 border-2 p-2 text-2xl bg-blue-100 text-blue-400 focus:border-4 font-bold"
v-model="addressQuery"
id="address-search"
name="address-search"
type="search"
autocomplete="off"
aria-autocomplete="list"
aria-controls="address-list"
placeholder="1234 Broadway New York NY 10033">
<ul id="address-list" class="absolute z-10 w-full bg-white shadow-lg border-b-2 border-l-2 border-r-2">
<li v-if="store.addressLoading" class="text-xl text-blue-400">Loading address ...</li>
<li v-if="addressError" class="text-xl text-red">Not a New York City address</li>
<li v-if="noElectedsReturned" class="text-xl text-red">Address returned no results. Try again.</li>
<li v-for="address in returnedAddresses"
:data-address="address"
@click="getReps"
@keyup.enter="getReps"
class="cursor-pointer text-base md:text-xl hover:bg-blue-400 focus:bg-blue-400 hover:text-white focus:text-white"
tabindex="0">
{{address}}
</li>
</ul>
</form>
</div> <div class="mt-10">
<div v-scope="Loading()">
<div v-show="!store.electedsLoading && !store.electedsLoaded && !store.generalError" class="w-full h-96 flex flex-col justify-center md:w-3/4 mx-auto">
<img class="w-48 h-48 block mx-auto" src="//d1o40k53wiknb7.cloudfront.net/assets/research.svg" alt="icon of a magnifying searching a book">
</div>
<div v-show="store.electedsLoading" class="w-full h-96 flex flex-col justify-center md:w-3/4 mx-auto" >
<h3 class="text-center text-blue-400">Loading your elected officials ... </h3>
<img class="w-48 h-48 block mx-auto animate-pulse" src="//d1o40k53wiknb7.cloudfront.net/assets/search.svg" alt="icon for the searching screen">
</div>
<div v-show="store.generalError" class="w-full h-96 flex flex-col justify-center md:w-3/4 mx-auto">
<img class="w-48 h-48 block mx-auto" src="//d1o40k53wiknb7.cloudfront.net/assets/message.svg" alt="alert icon">
</div>
</div> <template id="electeds-result-template" v-scope="ElectedsResult">
<h3 class="my-10 text-center">{{districtHeader}}</h3>
<ul
role="row"
class="transition-all duration-1000 grid grid-flow-row grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-x-0 md:gap-x-8">
<li
@click.stop="handleCardClick"
@keyup.enter.stop="handleCardClick"
role="gridcell"
aria-owns="active-elected-module"
:aria-expanded="store.moduleIsActive"
:tabindex="store.moduleIsActive ? -1 : 0"
v-for="(rep, index) in store.reps[`${district}`]"
:data-official-id="rep.official_id"
:data-district-level="district"
:key="index"
class="relative h-32 my-5 p-3 hover:cursor-pointer border-blue-400 focus:border-red hover:border-red bg-gradient-to-tr from-blue-300 to-white border-2 hover:from-red-x-light focus:from-red-x-light rounded-lg"
>
<div class="absolute bottom-0 mb-2" >
<h3 class="text-blue-400 font-normal">{{rep.first_name}} {{rep.last_name}}</h3>
<h3 class="bg-blue-400 px-1 font-bold text-white">{{rep.title}}</h3>
</div>
<img class="h-8 w-8 absolute block right-0 mr-3 mb-2" src="//d1o40k53wiknb7.cloudfront.net/assets/help.svg" alt="help icon">
</li>
</ul>
</template>
<div v-scope="electedsCards()"
v-show="store.completedSearch"
class="w-full md:w-3/4 mx-auto my-20">
<ul id="district-tab-list" role="tablist" class="flex justify-evenly">
<li
@click="handleTabClick"
@keyup.enter="handleTabClick"
aria-label="'Show New York City elected officials'"
tabindex="0"
role="tab"
:aria-selected="store.activeDistrictLevel === 'LOCAL'"
aria-owns="local"
ref="districtTab"
class="font-bold border-b-2"
:class="
{'cursor-default border-red' : store.activeDistrictLevel === 'LOCAL',
'cursor-pointer border-transparent hover:border-red-x-light' : store.activeDistrictLevel !== 'LOCAL'
}"
data-district-level="LOCAL">New York City
</li>
<li
@click="handleTabClick"
@keyup.enter="handleTabClick"
aria-label="Show New York State elected officials"
tabindex="0"
role="tab"
:aria-selected="store.activeDistrictLevel === 'STATE'"
aria-owns="state"
ref="districtTab"
class="font-bold border-b-2"
:class="
{'cursor-default border-red' : store.activeDistrictLevel === 'STATE',
'cursor-pointer border-transparent hover:border-red-x-light' : store.activeDistrictLevel !== 'STATE'
}"
data-district-level="STATE">New York State
</li>
<li
@click="handleTabClick"
@keyup.enter="handleTabClick"
aria-label="Show nationally elected officials"
tabindex="0"
role="tab"
:aria-selected="store.activeDistrictLevel === 'NATIONAL'"
aria-owns="national"
class="font-bold border-b-2"
:class="
{'cursor-default border-red' : store.activeDistrictLevel === 'NATIONAL',
'cursor-pointer border-transparent hover:border-red-x-light' : store.activeDistrictLevel !== 'NATIONAL'
}"
data-district-level="NATIONAL">Federal
</li>
</ul>
<div
id="local" v-show="store.activeDistrictLevel === 'LOCAL'"
v-scope="ElectedsResult({districtHeader:'New York City Elected Officials', district: 'LOCAL', reps: store.reps.LOCAL})"
role="tabpanel"
></div>
<div
id="state"
v-show="store.activeDistrictLevel === 'STATE'" v-scope="ElectedsResult({districtHeader:'New York State Elected Officials', district: 'STATE', reps: store.reps.STATE})"
role="tabpanel"
></div>
<div id="national"
v-show="store.activeDistrictLevel === 'NATIONAL'" v-scope="ElectedsResult({districtHeader:'U.S. Elected Officials', district: 'NATIONAL', reps: store.reps.NATIONAL})"
role="tabpanel"
></div>
</div> </div>
</section>
</div>
<script>
const envDomain = "https:\/\/cccdata.futureman.digital"
</script>]]>
Add this before the closing body tag
<![CDATA[<script src="//d1o40k53wiknb7.cloudfront.net/js/electeds-look-up.js"></script>]]>
