BC Multiple Random Web App Items Script

random-web-app-items.js

Array.prototype.shuffle = function() {
    var i = this.length, j, temp;
    if ( i == 0 ) return this;
    while ( --i ) {
        j = Math.floor( Math.random() * ( i + 1 ) );
        temp = this[i];
        this[i] = this[j];
        this[j] = temp;
    }
    return this;
}

// We use the "webAppItems" array which is defined at the page level on the page where this javascript is in use

// Function takes two arguments: target and num
  // target: the element you are going to add the web app items to, it's usually an empty div..
    // default value: $("#random-web-app-items")
  // num: the number of random web app items to insert into the target
    // default: 2

function randomWebAppItems(target, num) {
  
    if ( !num ) var num = 2;
    if ( !target ) var target = $("#random-web-app-items");
    if ( !target.length ) return;
    
    // Reduce the number variable by 1 to match arrays starting with a 0 value
    num = num - 1;
    
  // Shuffle the array to get two random ones towards the top
    webAppItems.shuffle();
    
    $.each(webAppItems, function(i) {
        // For only the first two web app items
        if ( i <= num ) {
            var name = this.name;
            var id = this.id;
            var url = this.url;
            var image = this.image;
            // Build some HTML to add to our page
            var imageHTML = "";
            if ( image != "" && image != undefined ) imageHTML = "<img src='"+image+"' width=150 />";
            var html = "<div id=item-"+id+" class=web-app-item data-image='"+image+"'>"+imageHTML+"<div class=name><a href='"+url+"'>"+name+"</a></div></div>";
            // Append this html into our web app item list holder
            target.append(html);
        }
    });
    
}

BC Multiple Random Web App Items

Javascript function randomWebAppItems()

• Takes two arguments: target and num
  ** target: the element you want to insert the HTML code for the widgets into. Default is $("#random-web-app-items").
  ** num: The number of random web app items to insert into your target

Adding new fields/tags for your web app items

For this demo, we use three tags in our HTML that gets inserted: name, url, and image. To add a new field to this script, you'll need to first add the key/value pair in your custom module template. See: https://gist.github.com/thetrickster/5718819

After you've added the new fields/tags to that array, you'll need to update the $.each() function in the randomWebAppItems() function above.

• First, create a variable to grab the key value from the array. For instance, let's say we have a BC web app field called "Event Date". And in our module template we added a keypair of

  "eventdate:" "{tag_event date}"

  then we need to add a line of script in our $.each() function above to grab the value of that key:

var eventdate = this.eventdate;

You can add it after the line:

var image = this.image;

• Next, you'll need to add some markup to the html variable in the $.each() function above... edit the html variable and add this somewhere you want it to appear:

<div class='event-date'>"+eventdate+"</div>

And you're all set! Follow the directions again to add more fields to this script.