Custom JavaScript examples

[admin]

Task: change which plan is shown when plan link is clicked depending on object value. For example, there are 2 plans for climate control, winter mode has heating controls, summer mode has air conditioning.

1. Create two plans: named Winter mode and Summer mode
2. Create a boolean object 1/1/1 (for which we assume that true = winter, false = summer)
3. Create a plan link element and add summer-winter to Additional classes. Plan link location does not matter
4. Add this to custom JavaScript (edit config variables as needed if plan names or object address is different):

Code:

$(function() {
 // make sure we're in visualization mode
 if (typeof grp === 'undefined') {
   return;
 }
 
 // config
 var winterPlanName = 'Winter mode'
   , summerPlanName = 'Summer mode'
   , toggleObject = '1/1/1' // true = winter, false = summer
   , planLinkClass = '.summer-winter';

 // find plan id by plan name
 function findPlanByName(name) {
   var id = -1;
   $.each(planStore, function(pid, plan) {
     if (plan.name == name) {
       id = pid;
     }
   });

   return id;
 };

 // listen to changes on summer/winter object
 grp.listen(toggleObject, function(obj) {
   var id = findPlanByName(obj.value ? winterPlanName : summerPlanName)
     , el = $(planLinkClass);

   // remove old click handler
   el.off('vclick');
   // assign new handler
   el.on('vclick', function() {
     showPlan(id);
   });
 });
});