Progress bar for diaspora pod donations

I added this little nifty JavaScript bar for 2016 pod donations and it worked well to get the server and costs paid for.

diaspora pod donation progress bar

Wanted to share with other podmins, so a step by step! With links to my code base so you can see it.

Edit app/views/shared/_right_sections.html.haml

Add to beginning:

:javascript
  $(document).ready(function() {progress(103, $(‘#progressBar’));});

Add an empty div (in orange) for the bar to live in somewhere in your donate text. You can see I have a custom donate text area.

.section
.title
%h4{:style => “display:inline;”}
= t(‘aspects.index.donate’)
  #progressBar
    %div
.content
Diasporg costs about $1000USD to keep alive and running a year. For 2016 we are at $1034/$1000! Please help out where you can, yes even $1 helps!
= link_to t(‘aspects.index.donate’), “/supportyourpod”

You can see I have a custom page at /supportyourpod that you will not have, either remove that or link somewhere you want for donations.

Ok now you have a bar and somewhere for the JavaScript to load up, now you need the JavaScript function code. I happen to have a custom .js file already at app/assets/javascripts/diasporg.js

You should make your own .js for custom scripts. So lets say app/assets/javascripts/custom.js

Edit app/assets/javascripts/custom.js (new file)

    function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find(‘div’).animate({ width: progressBarWidth }, 2500).html(percent + “% “);
}

Ok now you have the function to draw the bar. You just need your custom.js to compile!

Edit app/assets/javascripts/main.js

Add your custom here

//= require custom

does not need the .js on the file name, just your file name. If you look at my code I have //=require diasporg since my custom code is in a file named diasporg.

Edit app/assets/stylesheets/sidebar.scss

Add:

+  #progressBar {
+    width: 275px;
+    height: 14px;
+    border: 1px solid #111;
+    background-color: #292929
+  }
+  #progressBar div {
+    height: 100%;
+    color: #fff;
+    text-align: right;
+    line-height: 14px;
+    width: 0;
+    background-color: #009300;
+  }

There you go! Update your assets just like you do when you pull new diaspora code, restart your unicorns and boom. (I use a script for that too here)