Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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.
  • Loading branch information...
commit e26ab5b7d47ca300d6bed46cb57cfb0415221ce4 1 parent e601f83
@orthlieb orthlieb authored
View
3  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();
View
14 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,7 +44,7 @@ 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);
@@ -52,6 +52,6 @@ function BouncyLogoRelayout(e) {
exports.relayout = BouncyLogoRelayout;
function BouncyLogoReset(e) {
- BouncyLogoBounce(_params);
+ BouncyLogoBounce($._params);
};
exports.reset = BouncyLogoReset;
View
38 widgets/com.appcelerator.drawer/controllers/widget.js
@@ -17,6 +17,7 @@ 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;
@@ -24,15 +25,36 @@ function pullTabClick(e) {
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
* their state. Call this function whenever a state change could affect the enable state of
@@ -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.
View
2  widgets/com.appcelerator.drawer/docs/README.md
@@ -76,6 +76,7 @@ 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* |
@@ -83,6 +84,7 @@ There are number of aspects of the Drawer that you can change, you can include t
| 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.
Please sign in to comment.
Something went wrong with that request. Please try again.