My teachers and tabbed buckets

assignments-list/README.md

@@ -0,0 +1,2 @@
+This snippet displays a list of open assignments for a student and display them in a table
+

assignments-list/snippet.html

@@ -0,0 +1,63 @@
+<script>
+var $assignmentsList, user;
+
+// Create a div, and give it is unqiue ID
+$assignmentsList = $("<div>", {
+        id: Frog.Utilities.generateSimpleId()
+    }
+);
+
+// Add a table to the div
+$assignmentsList.html(
+    '<b>Your open assignments:</b>'+
+    '<table class="table" id="your_assignments">'+
+        '<tr>'+
+            '<th>Subject</th>'+
+            '<th>Title</th>'+
+            '<th>Due Date</th>'+
+            '<th>Instructions</th>'+
+        '</tr>'+
+    '</table>'
+);
+
+// Use Frog's API to get the logged in student
+user = FrogOS.getUser();
+
+// Use Frog's assignmentreports.getData to get 15 assignments for the logged in student.
+Frog.Model
+    .api('assignmentreports.getData', {
+        filter: { status: "open" },
+        limit: 15,
+        offset: 0,
+        options: { child_uuid: user.uuid },
+        report_name: "student.assignments"
+    }).done(function(assignmentResponse) {
+
+        // Loop through all the responses
+        assignmentResponse.data.forEach(function(work) {
+
+            // Use monment.js to convert the due date timestamp to a human-readable format
+            var dueDate = moment.unix(work.due_date).format("DD/MM/YY");
+
+            // Find the table in the DIV created above and add in the various fields from the API's response as a  new row
+            $assignmentsList.find('tbody')
+                .append(
+                    '<tr>'+
+                         '<td>'+
+                         work.subject_name+
+                         '</td><td><b>'+
+                         work.assignment_name+
+                         '</b></td><td>'+
+                         work.instructions+
+                         '</td><td>'+
+                         dueDate+
+                         '</td>'+
+                    '</tr>'
+                );
+        }
+    );
+});
+
+
+arguments[0].append($assignmentsList);
+</script>

my-teachers/README.md

@@ -0,0 +1,2 @@
+This snippet displays a list of teachers (technically group leaders) for a logged in user
+

my-teachers/snippet.html

@@ -0,0 +1,55 @@
+<script>
+
+var user,$teachersList,myArray;
+
+user = FrogOS.getUser();
+
+$teachersList = $("<div>", {
+    id: Frog.Utilities.generateSimpleId()
+});
+$teachersList.html(
+    '<b>Your teachers:</b>'
+);
+
+myArray=[];
+
+
+/// Get all the groups assoicated with logged in user
+Frog.Model.api('users.getDataInCategory', {
+    user_uuid:user.uuid,
+    /// this uuid does not appear to be required
+    uuid:"67A87F002004C5F7E42DCFF776D54C02662E76BC0F4FCCE2"
+}).done(function(groupResponse) {
+    /// Get the leaders for each group
+    groupResponse.data.groups.forEach(function(grop) {
+            Frog.Model.api('groups.getLeaders', {
+                uuid:grop.uuid
+            }).done(function(leaderResponse) {
+                /// get the user details of each leader
+                Frog.Model.api('users.getOne', {
+                    uuid:leaderResponse.data[0]
+                }).done(function(userResponse) {
+                    ///Only display results with a teacher attached, so profile groups etc... will not be listed
+                    if (userResponse.data.displayname!==undefined && userResponse.data.displayname!==null) {
+                        $teachersList.append(
+                           '<li>'+
+                            grop.name+
+                            ' - '+
+                            userResponse.data.displayname+
+                            '</li>'
+                        );
+                    }
+                });
+
+            });
+       // }
+    });
+});
+
+
+arguments[0].append($teachersList);
+
+
+</script>
+
+

site-icon-as-image/README.md

@@ -0,0 +1,4 @@
+Site Icon as Image
+
++Drop this code into your site in an HTML widget
++As the site loads, it will display the icon

site-icon-as-image/snippet.html

@@ -0,0 +1,28 @@
+<script>
+var siteImLookingAt, siteCore, siteLink, $newDiv;
+
+// arguments[0] is the HTML widget your code is sitting in.  Using this, it is possible to identify the site containing the HTML widget
+siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers');
+
+siteCore = siteImLookingAt.sites_core;
+
+siteLink = siteImLookingAt && siteCore && siteCore.options.site;
+
+// This code below uses jQuery to create a DIV and uses one of Frog's utitilies to create a unique ID, allowing jQuery to append to the div, $newDiv.
+$newDiv = $("<div>", {
+        id: Frog.Utilities.generateSimpleId()
+    }
+);
+
+// Knowing the siteLink from the above, we can use Frog's API sites.getInfo to return the site's icon
+Frog.Model
+    .api('sites.getInfo', {
+        link: siteLink,
+        method: "sites.getInfo"
+    }).done(function(siteResponse) {
+        $newDiv.html("<img src='"+siteResponse.data.icon+"'>");
+    });
+
+arguments[0].append($newDiv);
+
+</script>

site-shared-status/README.md

@@ -0,0 +1,4 @@
+Site shared status
+
++Drop this code into your site in an HTML widget
++As the site loads, it display using a padlock icon whether the site is private or not

site-shared-status/snippet.html

@@ -0,0 +1,50 @@
+<script>
+var siteImLookingAt, siteCore, siteLink, $newDiv;
+
+// arguments[0] is the HTML widget your code is sitting in.  Using this, it is possible to identify the site containing the HTML widget
+siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers');
+
+siteCore = siteImLookingAt.sites_core;
+
+siteLink = siteImLookingAt && siteCore && siteCore.options.site;
+
+// This code below uses jQuery to create a DIV and uses one of Frog's utitilies to create a unique ID, allowing jQuery to append to the div, $newDiv.
+$newDiv = $("<div>", {
+        id: Frog.Utilities.generateSimpleId()
+    }
+);
+
+// Knowing the siteLink from the above, we can use Frog's API sites.getInfo to return the site's icon
+Frog.Model
+    .api('share.getList', {
+        target: "CF96C84720025152F781FF7433761F0D75EAEDCC694DC59C"
+    }).done(function(siteResponse) {
+
+        //Create an variable to add a title to the DIV
+        var alt="";
+        // share.getList does not differentiate between public in school and public on the web, if company is defined, the site is not private
+        if (siteResponse.data.company!==undefined && siteResponse.data.company!==null) {
+            $newDiv.addClass(
+                // Use fontawesome to dpecit status
+                "fa fa-unlock-alt fa-3x"
+            );
+            alt += "Site is not private and is shared with:\n";
+        } else {
+            $newDiv.addClass(
+                "fa fa-lock fa-3x"
+            );
+            alt += "Site is private and is visible to:\n";
+        }
+        //Loop through siteResponse.data.user object and return the displayname value
+        for (var key in siteResponse.data.user) {
+            var obj = siteResponse.data.user[key];
+            alt+=obj.identity.displayname+'\n';
+        }
+        // set the alt variable as $newDiv's title
+        $newDiv.attr('title', alt);
+    });
+
+
+arguments[0].append($newDiv);
+
+</script>

tabbed-buckets/README.md

@@ -0,0 +1,2 @@
+This snippet hides all the buckets (page layout sections) except for the top bucket (bucket 1).  It resets the width of each bucket to 100%, then allows to you switch between buckets using a set of buttons which look like tabs
+

tabbed-buckets/sniipet.html

@@ -0,0 +1,99 @@
+<style>
+
+.maxBuckets {
+   width:100% !important;
+    }
+
+.hideBucket{
+   display:none !important;
+}
+.showBucket {
+   display:block !important;
+}
+
+.bucketTabs {
+    float: left;
+}
+
+.bucketTab {
+    display: inline-block;
+    min-width:65px;
+    height:27px;
+    text-align:center;
+    border: 1px solid #cccccc;
+    border-width: 1px 1px 0 1px;
+    border-radius:5px;
+    border-bottom-right-radius:0px;
+    border-bottom-left-radius:0px;
+    margin: 0px;
+    padding: 5px;
+    padding-top:10px;
+    cursor: pointer;
+    min-width: 20px;
+    font-size:10pt;
+/* Gradient background for the tab buttons */
+    background: #0497da; /* Old browsers */
+    background: -moz-linear-gradient(top,  #0497da 0%, #0064cd 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top,  #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom,  #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */
+    color:#FFFFFF;
+}
+
+.bucket-Tab.active {
+    background: #FFFFFF;
+    color:#000000;
+}
+</style>
+
+<div class="bucketTabs">
+    <div class="bucketTab active" data-no="2">Bucket 2</div>
+    <div class="bucketTab" data-no="3">Bucket 3</div>
+    <div class="bucketTab" data-no="4">Bucket 4</div>
+    <div class="bucketTab" data-no="5">Bucket 5</div>
+    <div class="bucketTab" data-no="6">Bucket 6</div>
+    <div class="bucketTab" data-no="7">Bucket 7</div>
+</div>
+
+<script>
+
+var $siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers').sites_core,
+    $bucketsArray = {};
+
+    // Add a class called maxBuckets to each bucket, this sets their width to 100%
+    $siteImLookingAt.find('.span1').addClass("maxBuckets");
+    $siteImLookingAt.find('.span2').addClass("maxBuckets");
+    $siteImLookingAt.find('.span3').addClass("maxBuckets");
+    $siteImLookingAt.find('.span4').addClass("maxBuckets");
+    $siteImLookingAt.find('.span5').addClass("maxBuckets");
+    $siteImLookingAt.find('.span6').addClass("maxBuckets");
+    $siteImLookingAt.find('.span7').addClass("maxBuckets");
+    $siteImLookingAt.find('.span8').addClass("maxBuckets");
+    $siteImLookingAt.find('.span9').addClass("maxBuckets");
+    $siteImLookingAt.find('.span10').addClass("maxBuckets");
+    $siteImLookingAt.find('.span11').addClass("maxBuckets");
+    $siteImLookingAt.find('.span12').addClass("maxBuckets");
+
+    // Cycle throuch all tab buttons, adding the showBucket class
+    for (var i=2;i<8;i++) {
+        $siteImLookingAt.find('div[data-order='+i+']').addClass('showBucket');
+    }
+    // hideAllShowOne removes showBucket from each bucket and adds the class hideBucket, except the one passed through by the function call.  The function then removes the active class from the highlighted button and adds it to clicked button.  Finally, it adds showBucket onto the requested bucket
+    hideAllShowOne = function(bucket) {
+        for (var i=2;i<8;i++) {
+            $siteImLookingAt.find('div[data-order='+i+']').removeClass('showBucket');
+            $siteImLookingAt.find('div[data-order='+i+']').addClass('hideBucket');
+        }
+        $siteImLookingAt.find('.bucketTab').removeClass("active"); // remove the active class from all DIVs
+        $siteImLookingAt.find('.bucketTab[data-no=' + bucket + ']').addClass("active"); // add the active class to the selected DIV
+        $siteImLookingAt.find('div[data-order='+bucket+']').addClass('showBucket');
+    };
+
+hideAllShowOne(2);
+
+// Adds a click event to each button
+$siteImLookingAt.find('.notice-tab[data-no]').bind('click', function(ev) {
+    hideAllShowOne($(this).data('no'));
+});
+
+</script>