jQuery.betterplace.projectState

betterplace.projectState is a jQuery plugin to display details about and links to your betterplace.org project anywhere on the web.

Features

Theme logic: Just provide other CSS files and images.
Template driven: Modify the passed HTML template snippet to change the layout.
Mulitlingual: German and english language included, use it by passing the shortcde ('de' or 'en').
Multiple projects: Display several (different) projects in one HTML file.

Screenshot

Requirements

The jQuery library.
An authentication key (appname) for the betterplace.org API. Contact solutions@betterplace.org for it.
A PHP-Proxy for calling the betterplace.org JSON API (because it doesn´t support JSONP). You can use the script within this repository.

Instructions

Download the plugin, unzip it and copy it into your desired directory. Include the JavaScript and CSS files, just like:

<head>
    <link rel="stylesheet" type="text/css" href="betterplace.projectState.1.0.css">
    <link rel="stylesheet" type="text/css" href="themes/betterplace/styles.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="betterplace.projectState.1.0.js"></script> 
</head>

Provide a block-level element to display the project and add the class of the desired theme, e.g. like this:

<div class="example betterplace-theme"></div>

Initialize the script by declaring the basic options in an usual jQuery manner (the parameters can be provided as an object literal). For example:

$( '.example' ).betterplaceProjectState(
{                
    app_name            :   'YourBetterplaceAppName',
    proxy_url           :   'json-proxy.php?url=',
    project_id          :   '1234-your-project-ID',
    organisation_name   :   'The name of your organisation',
    anonymous_avatar    :   'themes/betterplace/avatar-anonymous.jpg'
});

You´ll find the explanations to the options below.

Options

app_name - String (needed), used for authentification. Contact solutions@betterplace.org for your personal app_name.

proxy_url - String (needed), default:

proxy_url : 'json-proxy.php?url='

The betterplace.org API doesn´t support cross domain JSON calls. So this PHP proxy runs on the same server as this document and proceeds the same call. See the Simple PHP Proxy project for a very good explanation. You can use the script within this repository.

project_id - String (needed), the ID of the project to show. It´s found in the URL of the project page on betterplace.org, e.g.: 'betterplace.org/de/projects/1234-your-project-ID'.

target_blank - Boolean, default:

target_blank : true

Opens the links in a new window or not.

project_link - Boolean/string, default:

project_link : true

Link target of the project name, true: project page on betterplace.org, false: no link, string: custom URL.

organisation_name - String (needed), name of the organisation, mentioned in the subtitle.

organisation_link - String, link target (URL) of the subtitle.

language - String, language of the descriptions and wording, 'de' or 'en'.

donation_link - String, link target of the donation button, true: standard donation page on betterplace.org, string: custom donation URL.

donations_show_max - Integer, default:

donations_show_max : 10

Value to reduce the donations shown in the list.

anonymous_avatar - String, URL of the image for anonymous donors.

more_donations_link - Boolean/string, default:

more_donations_link : true

Link to see the whole list of donations, true: standard list of donations on betterplace.org, string: custom donations list URL.

base_template - String, default:

base_template : '<h1 class="title"></h1><p class="subtitle"></p><div class="progress_bar"><div class="progress_bar_color"></div><div class="percentage"></div></div><div class="infos"><div class="amount_donations"></div><a class="donate"></a></div><ul class="donations_list"></ul><div class="more_donations"></div>'

HTML of the basic template (excl. donations), feel free to modify. The plugin first checks if there is an HTML to place an information, before requesting and inserting it.

donations_template - String, default:

donations_template : '<li><div class="image"></div><div class="amount"></div><div class="donation_text"><span class="name"></span></div></li>'

HTML of the template for the single donation list elements, feel free to modify. The plugin first checks if there is an HTML to place an information, before requesting and inserting it.

debug - Boolean, default:

debug : false

Provides basic processing information on your JavaScript console. Please turn false in production!

Themes

If you need an individual theme or even developed your own, please let me know.

Licenses

Dual licensed under MIT or GPL Version 2 license.

Version 1.0

Bug tracking

Found a bug? Please create an issue on https://github.com/steffenlohaus/jQuery.betterplace.projectState/issues.

jQuery.betterplace.projectState

README.md

jQuery.betterplace.projectState

Features

Screenshot

Requirements

Instructions

Options

Themes

Licenses

Bug tracking