Add annoy parameter to drawer

Fix bouncy logo params so that is attached to the object.
Added annoy parameter to the drawer so that it draws attention to
itself for first time usage.
Updated drawer docs accordingly.

test/apps/widgets/widget_drawer/controllers/index.js

@@ -12,7 +12,8 @@ $.drawer.init({
     ], 
     autoClose: true,
     gutter: 5,
-    overrideMenu: false // Set to true to see the drawer vs the activity menu
+    overrideMenu: false, // Set to true to see the drawer vs the activity menu
+    annoy: true
 });
 $.drawer.checkEnabled();
 

widgets/com.appcelerator.bouncylogo/controllers/widget.js

@@ -13,12 +13,12 @@ var defaults = {
 var animation = require('alloy/animation');
 
 function BouncyLogoInit(args) {
-    _params = _.defaults(args, defaults);
-    $.imageview.image = _params.image;
-    $.imageview.width = _params.width;  
-    $.imageview.height = _params.height;
+    $._params = _.defaults(args, defaults);
+    $.imageview.image = $._params.image;
+    $.imageview.width = $._params.width;  
+    $.imageview.height = $._params.height;
 
-    BouncyLogoBounce(_params);
+    BouncyLogoBounce($._params);
     Ti.Gesture.addEventListener('orientationchange', BouncyLogoRelayout); 
 };
 exports.init = BouncyLogoInit;
@@ -44,14 +44,14 @@ function BouncyLogoRelayout(e) {
     var chain = [ 
         Ti.UI.createAnimation({ opacity: 0, duration: 100 }),
         Ti.UI.createAnimation({ center: { x: w / 2, y: h / 2 }, duration: 100 }),
-        Ti.UI.createAnimation({ opacity: _params.opacity, duration: _params.durationIn })
+        Ti.UI.createAnimation({ opacity: $._params.opacity, duration: $._params.durationIn })
     ];
     Ti.API.info("BouncyLogo animating on re-orientation " + Ti.Gesture.orientation + " (" + w + "x" + h + ")");
     animation.chainAnimate($.imageview, chain);       
 };
 exports.relayout = BouncyLogoRelayout;
 
 function BouncyLogoReset(e) {
-    BouncyLogoBounce(_params);
+    BouncyLogoBounce($._params);
 };
 exports.reset = BouncyLogoReset;

widgets/com.appcelerator.drawer/controllers/widget.js

@@ -17,21 +17,43 @@ var defaults = {
 $._isOpen = false;        // Whether the drawer is open or not.
 $._buttons = [];          // Button descriptions.
 $._params = {};           // Behavior and styling parameters for the drawer. Originally set to defaults.
+$._annoy = false;         // Annoy interval variable, useful for clearInterval.
 
 function pullTabClick(e) {
     $._isOpen = !$._isOpen;
     $.pulltab.backgroundImage = "/images/com.appcelerator.drawer/" + ($._isOpen ? "PullTabDown.png" : "PullTabUp.png");
 
     Ti.API.info(($._isOpen ? "Opening" : "Closing") + " the drawer (buttonbar=" + ($._params.iconSize + $._params.gutter * 2) + ", drawer=" + $.drawer.size.height + ")");
 
-    var animation = Ti.UI.createAnimation({
+    $.drawer.animate({
         bottom: $._isOpen ? 0 : -($._params.iconSize + $._params.gutter * 2),
         opacity: $._isOpen ? $._params.openOpacity : $._params.closeOpacity,
         duration: $._params.animationDuration
     });
-    $.drawer.animate(animation);
+
+    if ($._isOpen && $._annoy)
+        clearInterval($._annoy);
 }
 
+/**
+ * @method jiggle
+ * Jiggles the drawer up and down slightly to draw the user's attention to it. Does nothing if the drawer is already open or the
+ * Android activity menu is being used.
+ */
+exports.jiggle = function DrawerJiggle() {
+    if ($._isOpen || (OS_ANDROID && !$._params.overrideMenu))
+        return;
+
+    var animation = require('alloy/animation');
+
+    var chain = [ // Fade out and move off screen, fade in and move below center, bounce up above center, bring down to center, fade
+        Ti.UI.createAnimation({ bottom: -($._params.iconSize + $._params.gutter * 2) + DRAWER_PULLTAB_HEIGHT, duration: 250 }),
+        Ti.UI.createAnimation({ bottom: -($._params.iconSize + $._params.gutter * 2) - DRAWER_PULLTAB_HEIGHT / 2, duration: 125 }),
+        Ti.UI.createAnimation({ bottom: -($._params.iconSize + $._params.gutter * 2), duration: 125 })
+     ];
+    animation.chainAnimate($.drawer, chain);           
+};
+
 /**
  * @method checkEnabled
  * Request that the drawer run all the associated `enabled` callbacks for the buttons and set
@@ -71,8 +93,8 @@ exports.checkEnabled = function DrawerCheckEnabled() {
  * @param {Number} [closeOpacity=0.75] Opacity of the drawer when it is closed in the view.
  * @param {Number} [animationDuration=500] Duration, in milliseconds, to close or open the drawer.
  * @param {Number} [gutter=0] Offset used to space buttons from each other.
- * @param {String} [overrideMenu=false] Overrides the use of the menu in Android and use a drawer
- * like in iOS and Mobile Web.
+ * @param {String} [overrideMenu=false] Overrides the use of the menu in Android and use a drawer like in iOS and Mobile Web.
+ * @param {Boolean} [annoy=false] Jiggle the drawer up and down until the user opens it the first time.
  */
 
 exports.init = function DrawerInit(args) {
@@ -104,7 +126,13 @@ exports.init = function DrawerInit(args) {
 
                 $.buttonbar.add($._buttons[i].button);      
             }
-        );   
+        );  
+
+        if ($._params.annoy) {
+            $._annoy = setInterval(function DrawerAnnoy() {
+                $.jiggle();
+            }, 2000);
+        } 
     } else if (OS_ANDROID && !$._params.overrideMenu) {
         // On Android, the drawer takes the form of the standard Android menu.
         $.drawer.visible = false;   // Hide the drawer, not needed.

widgets/com.appcelerator.drawer/docs/README.md

@@ -76,13 +76,15 @@ There are number of aspects of the Drawer that you can change, you can include t
 | Parameter | Type | Affects | Description |
 | --------- | ---- | ------- | ----------- |
 | animationDuration | *integer* | iOS, MW | The duration, in milliseconds, of the animation to close/open the drawer. Default: *500* |
+| annoy | *boolean* | iOS, MW | Bounce the drawer slightly every two seconds to draw attention to it. Once the drawer has been opened, disable the bounce. Default: *false* |
 | autoClose | *boolean* | iOS, MW | If true, automatically closes the drawer after a button has been pressed. Default: *false* |
 | closeOpacity| *number* | iOS, MW | A number between 0 (transparent) and 1 (opaque) that denotes the opacity of the drawer when it is closed. Default: *0.75* |
 | gutter | *integer* | iOS, MW | The offset, in pixels, used to space buttons from each other in the drawer. Default: *0* |
 | iconSize | *integer* | iOS, MW | Size of the icon, in pixels, to used on buttons in the drawer. Default: *48x48* |
 | openOpacity | *number* | iOS, MW | A number between 0 (transparent) and 1 (opaque) that denotes the opacity of the drawer when it is open. Default: *0.9* |
 | overrideMenu | *boolean* | Android | Override the use of the activity menu in Android and use a drawer like in iOS/MobileWeb. In this case, the above parameters do affect Android. Default: *false* |
 
+
 ## Enabling and Disabling Buttons
 
 With Android, if overrideMenu is not true, the `enable()` callback is called automatically before the menu is shown. In all other cases, you will need to explicitly call the drawer's `checkEnabled()` method in order to get those callbacks to fire.