Skip to content

Commit

Permalink
Update to move Elected Official Data to Civil Services API.
Browse files Browse the repository at this point in the history 
Added Update Page to allow those managing Bills a way to fetch new data directly from Google.
  • Loading branch information
@manifestinteractive
manifestinteractive committed Feb 27, 2017
1 parent c35dc9e commit ad2f1f7
Show file tree
Hide file tree
Showing 15 changed files with 702 additions and 116 deletions.
101 changes: 31 additions & 70 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ Campaign Zero Widget
![Demo](app-image.gif "Demo")


Widget Data
---

This Widget gets it's Elected Official data from the __[Civil Services API](https://github.com/civilserviceusa/api)__.

The specific bills we keep track of are managed internally by our team.


Usage Instructions
---

Expand Down Expand Up @@ -41,70 +49,32 @@ If you are using something like WordPress that just asks you for the URL for the
https://embed.joincampaignzero.org/widget.js
```

For browsers that let you use iFrames, you can also use:

#### XXXS - 200 x 345:

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="200" height="345" frameborder="0"></iframe>
```

#### XXS - 220 x 345:

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="220" height="345" frameborder="0"></iframe>
```

#### XS - 240 x 345:

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="240" height="345" frameborder="0"></iframe>
```

#### S - 280 x 345:

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="280" height="345" frameborder="0"></iframe>
```

#### M - 300 x 345:
__NOTE__: We no longer recommend the use of iFrames as they have proven to be be unreliable on most websites.

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="300" height="345" frameborder="0"></iframe>
```

#### L - 320 x 345:

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="320" height="345" frameborder="0"></iframe>
```

#### XL - 380 x 345:

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="400" height="380" frameborder="0"></iframe>
```

#### XXL - 400 x 345:

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="400" height="380" frameborder="0"></iframe>
```


Customize Labels
Customize Widget
---

If you are unable to place JavaScript where you want the widget to go, you can use the following HTML directly:

You can add one or all of the following Data Attributes on either the iFrame or `<div id="campaign-zero-widget">` to customize the text:

Data Attribute | Default | Description
----------------------------|----------------------------|-------------
`data-widget-title-text` | End Police Violence | This is the Title at the Top of the Widget
`data-widget-subtitle-text` | Where does your rep stand? | This is the Call to Action Text above the Search Field
`data-widget-button-text` | Find your rep | The is the Button on the Main Page
`data-widget-pick-rep-text` | Pick a Representative | This is the Text at the top of the page after doing a search
You can add one or all of the following Data Attributes on either our `<script>` or `<div id="campaign-zero-widget">` Element to customize the text:

Data Attribute | Default | Description
-----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|-------------
`data-widget-type` | `default` | This should be either `default` or `resistance` depending on which data source you want to use
`data-widget-title-text` | End Police Violence | This is the Title at the Top of the Widget
`data-widget-subtitle-text` | Where does your rep stand? | This is the Call to Action Text above the Search Field
`data-widget-button-text` | Find your rep | The is the Button on the Main Page
`data-widget-pick-rep-text` | Pick a Representative | This is the Text at the top of the page after doing a search
`data-widget-call-action-text` | Call and demand action: | This is the Text above the Phone Number List
`data-widget-email-action-text` | Email and demand action: | This is the Text above the Email List
`data-widget-email-subject` | We need urgent action to end police violence in our district. | This is the Email Subject for Contacting an Elected Official
`data-widget-email-greeting` | Greetings | This is the word before the Elected Official's name, e.g. `Greetings Jane Doe,`
`data-widget-email-body` | I'm from your district, and police violence needs to be urgently addressed through comprehensive legislation as proposed by Campaign Zero. | This is the Body of the Email for sent to the Elected Official
`data-widget-email-action` | [YOUR_MESSAGE_HERE] | This is text at the end of the Email Body where you can encourage the user to add their own message
`data-widget-twitter-text` | Learn where your representatives stand on police violence and demand action now! http://JoinCampaignZero.org/action | This is the Message in Tweet
`data-widget-twitter-hashtags` | CampaignZero | These are the Hashtags used in the Tweet, you can use more than one by using a comma between words
`data-widget-facebook-link` | http://www.joincampaignzero.org/action | This is the URL you want to link to for the Facebook Post
`data-widget-facebook-description` | Learn where your representatives stand on police violence and demand action now! | This is the Description you want shown for the Facebook Post

### Samples:

Expand All @@ -113,20 +83,11 @@ Data Attribute | Default | Description
```

```html
<iframe src="https://embed.joincampaignzero.org" id="campaign-zero" width="200" height="345" frameborder="0" data-widget-title-text="Custom Title" data-widget-subtitle-text="Custom Subtitle" data-widget-button-text="Custom Button" data-widget-pick-rep-text="Custom Rep Header"></iframe>
<script async src="https://embed.joincampaignzero.org/widget.js" charset="utf-8" data-widget-title-text="Custom Title" data-widget-subtitle-text="Custom Subtitle" data-widget-button-text="Custom Button" data-widget-pick-rep-text="Custom Rep Header"></script>
```


Demos
---

* [DEMO](https://embed.joincampaignzero.org)

Developers
---

This Widget gets it's data from our [Campaign Zero API](https://github.com/campaignzero/api).

Both this Widget and its API are open for Developer Contribution.

If you wish to contribute to Campaign Zero development, you will need to request an API Key from [Peter Schmalfeldt](https://twitter.com/mrmidi).
* [DEMO](https://embed.joincampaignzero.org)
79 changes: 57 additions & 22 deletions app/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ var appWidget = {
district: null,
chamber: null,
photo_url: (senator.photo_url) ? senator.photo_url : null,
state: senator.state,
state: senator.address_state,
offices: [
{
name: 'Senate Office',
Expand All @@ -151,7 +151,12 @@ var appWidget = {
* @param state
*/
getBills: function (state) {
var jsonpUrl = appWidget.settings.api.base + 'bills/?state=' + state + '&apikey=' + appWidget.settings.api.key;
var jsonpUrl;
if (appWidget.settings.type === 'default') {
jsonpUrl = appWidget.settings.data + 'bills.php?state=' + state;
} else if (appWidget.settings.type === 'resistance') {
jsonpUrl = appWidget.settings.data + 'resistance.php?state=' + state;
}

jQuery.ajax({
url: jsonpUrl,
Expand Down Expand Up @@ -207,8 +212,29 @@ var appWidget = {
/**
* Get Police Killings
*/
getPoliceKillings: function () {
getPoliceKillings: function (state) {
appWidget.storedResponse.killings = {};

var jsonpUrl = appWidget.settings.data + 'police_killings.php?state=' + state;

jQuery.ajax({
url: jsonpUrl,
type: 'GET',
dataType: 'json',
success: function (response) {
if(response && response.error) {
appWidget.showError('Invalid Police Killings');
appWidget.trackEvent('Error', 'Police Killings Error');
appWidget.storedResponse.killings = {};
} else {
appWidget.storedResponse.killings = response.data;
}
},
error: function (jqXHR, textStatus, errorThrown) {
appWidget.showError('ERROR: ' + errorThrown);
appWidget.trackEvent('Error', 'Reps Error', errorThrown);
}
});
},

/**
Expand Down Expand Up @@ -378,7 +404,7 @@ var appWidget = {

var id = jQuery(this).data('id');
var type = jQuery(this).data('type');
var killings = response.killings || { count: 0 };
var killings = appWidget.storedResponse.killings || { count: 0 };
var rep, chamber, bill;

if (type === 'city-council') {
Expand Down Expand Up @@ -502,14 +528,14 @@ var appWidget = {
}
}

var emailSubject = encodeURIComponent('We need urgent action to end police violence in our district.');
var emailSubject = encodeURIComponent(appWidget.settings.email.subject);
var emailMessage = '';

if(killings && killings.count > 0) {
if(killings && killings.count > 0 && appWidget.settings.type === 'default') {
var label = (killings.count === 1) ? 'person' : 'people';
emailMessage = encodeURIComponent("Greetings " + rep.full_name + ",\r\n\r\nI'm from your district, and police violence needs to be urgently addressed in my community. This year alone, police in " + killings.state + " have killed at least " + killings.count + " " + label + ". We need comprehensive legislation to make deadly force a last resort for police officers, establish alternative responses to minor offenses, demilitarize police departments, ensure independent investigations and prosecutions of police killings, as well as other solutions proposed by Campaign Zero. Here's my story:\r\n\r\n[YOUR_REASON_HERE]");
emailMessage = encodeURIComponent(appWidget.settings.email.greeting + " " + rep.full_name + ",\r\n\r\n" + appWidget.settings.email.body + " This year alone, police in " + killings.state + " have killed at least " + killings.count + " " + label + ". We need comprehensive legislation to make deadly force a last resort for police officers, establish alternative responses to minor offenses, demilitarize police departments, ensure independent investigations and prosecutions of police killings, as well as other solutions proposed by Campaign Zero.\r\n\r\n" + appWidget.settings.email.action);
} else {
emailMessage = encodeURIComponent("Greetings " + rep.full_name + ",\r\n\r\nI'm from your district, and police violence needs to be urgently addressed through comprehensive legislation as proposed by Campaign Zero. Here's why:\r\n\r\n[YOUR_REASON_HERE]");
emailMessage = encodeURIComponent(appWidget.settings.email.greeting + " " + rep.full_name + ",\r\n\r\n" + appWidget.settings.email.body + "\r\n\r\n" + appWidget.settings.email.action);
}

var emailAddress = '';
Expand All @@ -522,8 +548,6 @@ var appWidget = {
emailAddress = '<div class="address-email"><a href="javascript:void(0)">No email address currently available</a></div>';
}

var status = appWidget.templateBills(bills, rep.id);

if (typeof rep.photo_url !== 'undefined' && rep.photo_url !== '') {
var image = (rep.photo_url).startsWith('https://') ? rep.photo_url : 'https://proxy.joincampaignzero.org/' + rep.photo_url;
jQuery('#rep-image', elm).addClass(rep.party.toLowerCase()).css('background-image', 'url(' + image + ')');
Expand All @@ -535,11 +559,18 @@ var appWidget = {
jQuery('.summary-details .party', elm).text(rep.party);
jQuery('.summary-details .district', elm).text(rep.district);
jQuery('.summary-details .chamber', elm).text(rep.chamber);
jQuery('.summary-details .widget-bill-results', elm).html(status);

jQuery('a.widget-twitter', elm).attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(appWidget.settings.twitter.text) + '&hashtags=' + encodeURIComponent(appWidget.settings.twitter.hashtags));
jQuery('a.widget-facebook', elm).attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(appWidget.settings.facebook.link) + '&description=' + encodeURIComponent(appWidget.settings.facebook.description));

appWidget.templateBills(bills, rep.id);

jQuery('.widget-modal .phone-numbers', elm).html(phoneNumbers);
jQuery('.widget-modal .email-addresses', elm).html(emailAddress);

jQuery('.widget-modal-phone h1', elm).text(appWidget.settings.labels.call);
jQuery('.widget-modal-email h1', elm).text(appWidget.settings.labels.email);

// Hide Element Not Needed
if (!rep.district || rep.district === '') {
jQuery('.summary-details .district, .summary-details .district-label', elm).hide();
Expand Down Expand Up @@ -742,7 +773,7 @@ var appWidget = {
var html = '';

if( !bills || bills.length === 0) {
html = html.concat('<div class="support text-center">No bills on this issue.</div>');
jQuery('#widget-bill-results', elm).append('<div class="support text-center">No bills on this issue.</div>');
} else {

bills.sort(function (a, b) {
Expand All @@ -753,9 +784,9 @@ var appWidget = {

for(var i = 0; i < bills.length; i++) {
if(bills[i].status === 'considering') {
html = html.concat('<div class="support"><span class="status ' + bills[i].status + '">' + bills[i].status + '</span> <a target="_blank" rel="noopener" href="' + bills[i].details_url + '">' + bills[i].bill_id + '</a> ' + bills[i].short_description + '</div>');
jQuery('#widget-bill-results', elm).append('<div class="support"><span class="status ' + bills[i].status + '">' + bills[i].status + '</span> <a target="_blank" rel="noopener" href="' + bills[i].url + '">' + bills[i].bill + '</a> ' + bills[i].label + '</div>');
} else {
var billID = bills[i].bill_id;
var billID = bills[i].bill;
setTimeout(function () {
jQuery('#widget-bill-results', elm).append('<div id="loading-results" class="support text-center"><i class="fa fa-spinner fa-pulse fa-fw"></i> Checking status of ' + billID + ' ...</div>');
}, 100);
Expand All @@ -765,21 +796,19 @@ var appWidget = {
jQuery('#loading-results', elm).remove();
}, 500);
var label = (status !== 'unknown') ? status : 'did not vote';
jQuery('#widget-bill-results', elm).append('<div class="support"><span class="status ' + status + ' ' + bill.progress + '">' + label + '</span> <a target="_blank" rel="noopener" href="' + bill.details_url + '">' + bill.bill_id + '</a> ' + bill.short_description + '</div>');
jQuery('#widget-bill-results', elm).append('<div class="support"><span class="status ' + status + ' ' + bill.progress + '">' + label + '</span> <a target="_blank" rel="noopener" href="' + bill.url + '">' + bill.bill + '</a> ' + bill.label + '</div>');

jQuery('#widget-bill-results a', elm).off('click.widget');
jQuery('#widget-bill-results a', elm).on('click.widget', function () {
appWidget.trackEvent('Nav', 'Bill Opened (State)', bill.state);
appWidget.trackEvent('Nav', 'Bill Opened (Status)', status);
appWidget.trackEvent('Nav', 'Bill Opened (Bill)', bill.bill_id);
appWidget.trackEvent('Nav', 'Bill Opened (Session)', bill.session_id);
appWidget.trackEvent('Nav', 'Bill Opened (Bill)', bill.bill);
appWidget.trackEvent('Nav', 'Bill Opened (Session)', bill.session);
});
});
}
}
}

return html;
},

/**
Expand All @@ -789,14 +818,20 @@ var appWidget = {
* @param callback
*/
voteStatus: function (bill, rep_id, callback) {
var jsonpUrl = appWidget.settings.api.base + 'bills/?state=' + bill.state + '&sessionId=' + bill.session_id + '&billId=' + bill.bill_id + '&repId=' + rep_id + '&apikey=' + appWidget.settings.api.key;
var jsonpUrl;

if (appWidget.settings.type === 'default') {
jsonpUrl = appWidget.settings.data + 'bills.php?state=' + bill.state + '&session=' + bill.session + '&bill=' + bill.bill + '&rep=' + rep_id;
} else if (appWidget.settings.type === 'resistance') {
jsonpUrl = appWidget.settings.data + 'resistance.php?state=' + bill.state + '&session=' + bill.session + '&bill=' + bill.bill + '&rep=' + rep_id;
}

$.when( jQuery.ajax(jsonpUrl) ).then(function ( response ) {
appWidget.trackEvent('Vote', 'Status', response.data[bill.chamber][0].vote);
appWidget.trackEvent('Vote', 'Status', response.results.status);
appWidget.trackEvent('Vote', 'Bill', bill.bill);
appWidget.trackEvent('Vote', 'State', bill.state);
appWidget.trackEvent('Vote', 'Session', bill.session);
return callback(bill, response.data[bill.chamber][0].vote);
return callback(bill, response.results.status);
});
},

Expand Down
7 changes: 5 additions & 2 deletions app/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,8 @@
max-height: 110px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
-webkit-overflow-scrolling: touch;
padding-bottom: 30px; }
#campaign-zero-widget .representative .support {
font-weight: 400;
color: #272727;
Expand All @@ -321,7 +322,9 @@
text-decoration: none;
min-width: 50px;
display: inline-block;
text-align: center; }
text-align: center;
line-height: 11px;
min-height: 12px; }
#campaign-zero-widget .representative .support a:hover {
color: #333;
background-color: #fff; }
Expand Down
3 changes: 3 additions & 0 deletions app/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,7 @@
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 30px;
}
.support {
font-weight: 400;
Expand Down Expand Up @@ -436,6 +437,8 @@
min-width: 50px;
display: inline-block;
text-align: center;
line-height: 11px;
min-height: 12px;

&:hover {
color: #333;
Expand Down
Loading

0 comments on commit ad2f1f7

Please sign in to comment.