Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/app.el.js

Last active August 29, 2015 14:20
Show Gist options
  • Save clhenrick/59ba0793f4e9e08a24a6 to your computer and use it in GitHub Desktop.
Save clhenrick/59ba0793f4e9e08a24a6 to your computer and use it in GitHub Desktop.
Download ZIP
using handlebars to toggle language. (take 1)
Raw
app.el.js
var app = app || {};
app.el = (function(w,d,$) {
// references to DOM elements
var el = {
navGoNext : d.querySelectorAll('.go-next'),
navGoFirst : d.querySelectorAll('.go-first'),
navGoFour : d.querySelectorAll('.go-step4'),
burgerIcon : d.querySelector('.burger'),
navBar : d.querySelector('.main-nav'),
mainNavList : d.querySelector('.main-nav ul'),
progressCircles : d.querySelectorAll('.margin-circles li'),
slidesContainer : d.querySelector('.slides-container'),
slides : d.querySelectorAll('.slide'),
slide4 : d.querySelector('#slide-8'),
dd : null,
addressInput : d.querySelector('.address-input'),
boroSelect : d.querySelector('.user-data.borough-select'),
boroDropDown : d.getElementById('boroughs'),
boroDropDownItems : d.querySelectorAll('#boroughs li a'),
selectBoro : d.getElementsByName('borough'),
search : d.querySelector('.search'),
valErrors : d.querySelectorAll('.validation-error'),
valErrorAddress : d.getElementById('error-address'),
valErrorBoro : d.getElementById('error-boro'),
valErrorNF : d.getElementById('error-not-found'),
yes : d.querySelectorAll('.yes'),
no : d.querySelectorAll('.no'),
yesNoState : false,
map : d.getElementById('map'),
mapMessage : d.querySelector('.map-message'),
mailTo : d.getElementById('mail-to'),
lightBox : d.getElementById('rent-history'),
addToCalendar : d.getElementById('atc_text_link'),
addToCalendarLink : d.querySelector('.atcb-link'),
noTR : d.querySelector('.no-local-tr'),
yesTR : d.querySelector('.yes-local-tr'),
trModal : d.getElementsByClassName('tr-modal')[0],
learnMore : d.querySelector('.button.learn-more')
};
// trModalClose : d.querySelector('.org-container .close'),
// drop down class
// code reference: http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.drop-down > li');
this.val = undefined;
this.index = -1;
this.initEvents();
}
// dropdown
DropDown.prototype = {
initEvents : function() {
var obj = this;
// console.log('initEvents this: ', this);
obj.dd.on('click', function(e){
e.preventDefault();
// $(this).toggleClass('active');
app.f.toggleClass(this, 'active');
return false;
});
obj.opts.on('click',function(e){
e.preventDefault();
var opt = $(this);
obj.val = opt.text();
// obj.data = opt.children('span').text();
obj.index = opt.index();
obj.placeholder.text('Borough: ' + obj.val);
// console.log('obj: ', obj);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
};
el.dd = new DropDown( $('.user-data.borough-select') );
return {
el : el
};
})(window, document, jQuery);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Am I Rent Stabilized?</title>
<meta name="description" content="Find out if your NYC apartment is rent stabilized!">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- <link rel="stylesheet" type="text/css" href="bower_components/normalize.css/normalize.css"> -->
<!-- <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" /> -->
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link rel="stylesheet" type="text/css" href="../bower_components/cartodb.js/themes/css/cartodb.css">
<link rel="shortcut icon" href="assets/favicon/favicon-96x96.png" />
<!-- <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./assets/favicon/ms-icon-144x144.png"> -->
<script src="http://use.typekit.net/emf7xrp.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-57236362-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="wrapper"></div>
<div id="open-modal" class="tr-modal"></div>
<a href="#_" class="lightbox" id="rent-history">
<img src="../assets/png/sample-rent-history.png">
</a>
<script id="org-template" type="text/x-handlebars-template">
<div class="org-container">
<a href="#close" title="Close" class="close">X</a>
<h1>
Here are some groups that help people with housing
issues in your neighborhood:
</h1>
{{#each orgs}}
<div class="tr-org-info">
<h3>{{name}}</h3>
{{#if website}}
<p class="website-url"><span>Website: </span><a target="_blank" href="{{website}}">{{website}}</a></p>
{{/if}}
{{#if phone}}
<p class="phone-no"><span>Phone: </span>{{phone}}</p>
{{/if}}
{{#if address}}
<p class="address"><span>Address: </span>{{address}}</p>
{{/if}}
{{#if email}}
<p class="email"><span>Email: </span>{{email}}</p>
{{/if}}
<p class="description"><span>Description: </span><br>
{{description}}
</p>
</div>
{{/each}}
</div>
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57236362-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Javascripts -->
<script src="../bower_components/cartodb.js/dist/cartodb.js"></script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-551311020cabbff0" async="async"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/ScrollToPlugin.min.js"></script>
<script type="text/javascript" src="../dist/vendor.js"></script>
<script type="text/javascript" src="../data/main"></script>
<script type="text/javascript">
var template = Handlebars.templates.main;
var html;
$.getJSON('../data/en.json', function(data){
console.log('data: ', data);
html = template(data.languages[0].en);
document.querySelector('#wrapper').innerHTML = html;
});
</script>
<script type="text/javascript" src="../dist/app.js"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function(){
app.init.init();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment