Permalink
Browse files

Adds additional customization options to SC.AlertPane buttons.

You can now specify isDefault and isCancel properties for a button,
as well as tooltips and layer ids for each button.
  • Loading branch information...
1 parent 89c963e commit edd0aed7ab65dca3135ec60d15eafca4dcd8f842 Greg Fairbanks committed with dcporter Jan 18, 2013
Showing with 131 additions and 9 deletions.
  1. +41 −8 frameworks/desktop/panes/alert.js
  2. +90 −1 frameworks/desktop/tests/panes/alert/ui.js
@@ -59,6 +59,8 @@ SC.BUTTON3_STATUS = 'button3';
In addition to passing a message, description and caption, you can also customize
the title of the button 1 (OK) and add an optional button 2 and 3 (Cancel or Extra).
+ Additionally, you can provide a toolTip and layerId for each button, as well as specify
+ which button should be the default button and the cancel button.
- button1 -- 1st button from the right. default:OK
- button2 -- 2nd button from the right. Optional. Could be Cancel or 2nd action.
@@ -91,6 +93,19 @@ SC.BUTTON3_STATUS = 'button3';
]
});
+ Show an AlertPane with fully customized buttons:
+
+ SC.AlertPane.show({
+ message: "Could not load calendar",
+ description: "Your internet connection may be unavailable or our servers may be down.",
+ caption: "Try again in a few minutes.",
+ buttons: [
+ { title: "Try Again", toolTip: "Retry the connection", layerId: "try-again-button", isDefault: true },
+ { title: "Cancel", toolTip: "Cancel the action", layerId: "cancel-button", isCancel: true },
+ { title: "More Info...", toolTip: "Get more info", layerId: "more-info-button" }
+ ]
+ });
+
Show an AlertPane with a custom OK, a Cancel button and an Extra button,
each with custom titles. Also, pass a delegate that will be invoked when
the user's dismisses the dialog.
@@ -430,29 +445,47 @@ SC.AlertPane.mixin(
@param {Hash} args
@return {SC.AlertPane} the pane shown
*/
- show: function(args) {
+ show: function (args) {
// normalize the arguments if this is a deprecated call
args = SC.AlertPane._argumentsCall.apply(this, arguments);
var pane = this.create(args),
idx = 0,
buttons = args.buttons,
- buttonView, title, action, target, themeName;
+ buttonView, layerId, title, toolTip, action, target, themeName,
+ isDefault, isCancel, hasDefault, hasCancel;
+
+ if (buttons) {
+ // Determine if any button specifies isDefault/isCancel.
+ hasDefault = !!buttons.findProperty('isDefault');
+ hasCancel = !!buttons.findProperty('isCancel');
- if(buttons) {
- buttons.forEach(function(button) {
+ buttons.forEach(function (button) {
idx++;
- if(!button) return;
+ if (!button) return;
buttonView = pane.get('button%@'.fmt(idx));
+ layerId = button.layerId;
title = button.title;
+ toolTip = button.toolTip;
action = button.action;
target = button.target;
themeName = args.themeName || 'capsule';
- buttonView.set('title'.fmt(idx), title);
- if(action) buttonView.set('customAction'.fmt(idx), action);
- if(target) buttonView.set('customTarget'.fmt(idx), target);
+ // If any button has the isDefault/isCancel flags set, we
+ // explicitly cast the button's flag to bool, ensuring that this
+ // overrides the default. Otherwise, we use undefined so we skip
+ // setting the property, ensuring the default value is used.
+ isDefault = hasDefault ? !!button.isDefault : undefined;
+ isCancel = hasCancel ? !!button.isCancel : undefined;
+
+ buttonView.set('title', title);
+ if (toolTip) buttonView.set('toolTip', toolTip);
+ if (action) buttonView.set('customAction', action);
+ if (target) buttonView.set('customTarget', target);
+ if (layerId !== undefined) { buttonView.set('layerId', layerId); }
+ if (isDefault !== undefined) { buttonView.set('isDefault', isDefault); }
+ if (isCancel !== undefined) { buttonView.set('isCancel', isCancel); }
buttonView.set('isVisible', !!title);
buttonView.set('themeName', themeName);
});
@@ -19,7 +19,8 @@ module("SC.AlertPane UI", {
var pane ;
-function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass, themeName) {
+function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass, themeName,
+ button1ToolTip, button2ToolTip, button3ToolTip, button1LayerId, button2LayerId, button3LayerId, defaultButton, cancelButton) {
// wrapper
ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
ok(pane.$().hasClass('sc-alert'), 'pane should have sc-alert class');
@@ -75,6 +76,72 @@ function evaluatePane(pane, message, description, caption, button1Title, button2
ok(button3.$().hasClass('sc-hidden'), 'pane.div button3 should be hidden');
}
+ if (button1ToolTip) {
+ equals(button1.$('label').prop('title'), button1ToolTip, 'pane.div.div button1 should have custom toolTip %@'.fmt(button1ToolTip));
+ } else {
+ equals(button1.$('label').prop('title'), '', 'pane.div.div button1 should have default toolTip BLANK');
+ }
+ if (button2ToolTip) {
+ equals(button2.$('label').prop('title'), button2ToolTip, 'pane.div.div button2 should have custom toolTip %@'.fmt(button2ToolTip));
+ } else {
+ equals(button2.$('label').prop('title'), '', 'pane.div.div button2 should have default toolTip BLANK');
+ }
+ if (button3ToolTip) {
+ equals(button3.$('label').prop('title'), button3ToolTip, 'pane.div.div button3 should have custom toolTip %@'.fmt(button3ToolTip));
+ } else {
+ equals(button3.$('label').prop('title'), '', 'pane.div.div button3 should have default toolTip BLANK');
+ }
+
+ if (button1LayerId) {
+ equals(button1.$().prop('id'), button1LayerId, 'pane.div.div button1 should have custom layerId %@'.fmt(button1LayerId));
+ } else {
+ ok(button1.$().prop('id').indexOf('sc') === 0, 'pane.div.div button1 should have default layerId');
+ }
+ if (button2LayerId) {
+ equals(button2.$().prop('id'), button2LayerId, 'pane.div.div button2 should have custom layerId %@'.fmt(button2LayerId));
+ } else {
+ ok(button2.$().prop('id').indexOf('sc') === 0, 'pane.div.div button2 should have default layerId');
+ }
+ if (button3LayerId) {
+ equals(button3.$().prop('id'), button3LayerId, 'pane.div.div button3 should have custom layerId %@'.fmt(button3LayerId));
+ } else {
+ ok(button3.$().prop('id').indexOf('sc') === 0, 'pane.div.div button3 should have default layerId');
+ }
+
+ if (defaultButton == null) defaultButton = 1;
+ if (defaultButton === 1) {
+ ok(button1.$().hasClass('def'), 'pane.div.div button1 should be default');
+ } else {
+ ok(!button1.$().hasClass('def'), 'pane.div.div button1 should not be default');
+ }
+ if (defaultButton === 2) {
+ ok(button2.$().hasClass('def'), 'pane.div.div button2 should be default');
+ } else {
+ ok(!button2.$().hasClass('def'), 'pane.div.div button2 should not be default');
+ }
+ if (defaultButton === 3) {
+ ok(button3.$().hasClass('def'), 'pane.div.div button3 should be default');
+ } else {
+ ok(!button3.$().hasClass('def'), 'pane.div.div button3 should not be default');
+ }
+
+ if (cancelButton == null) cancelButton = 2;
+ if (cancelButton === 1) {
+ ok(button1.$().hasClass('cancel'), 'pane.div.div button1 should be cancel');
+ } else {
+ ok(!button1.$().hasClass('cancel'), 'pane.div.div button1 should not be cancel');
+ }
+ if (cancelButton === 2) {
+ ok(button2.$().hasClass('cancel'), 'pane.div.div button2 should be cancel');
+ } else {
+ ok(!button2.$().hasClass('cancel'), 'pane.div.div button2 should not be cancel');
+ }
+ if (cancelButton === 3) {
+ ok(button3.$().hasClass('cancel'), 'pane.div.div button3 should be cancel');
+ } else {
+ ok(!button3.$().hasClass('cancel'), 'pane.div.div button3 should not be cancel');
+ }
+
if (!themeName) themeName = 'capsule';
ok(button1.$().hasClass(themeName), 'pane.div.div button1 should have class ' + themeName);
ok(button2.$().hasClass(themeName), 'pane.div.div button2 should have class ' + themeName);
@@ -99,6 +166,28 @@ test("AlertPane.show with icon, message, description, caption and 3 buttons", fu
pane.destroy();
});
+test("AlertPane.show with 3 buttons with isDefault, isCancel, toolTip, and layerId", function () {
+ pane = SC.AlertPane.show({
+ message: 'AlertPane.message',
+ description: 'AlertPane.description',
+ caption: 'AlertPane.caption',
+ icon: 'sc-icon-tools-24',
+ delegate: this,
+ buttons: [
+ { title: 'okButtonTitle', toolTip: 'okButtonToolTip', layerId: 'okButtonLayerId', isCancel: true },
+ { title: 'cancelButtonTitle', toolTip: 'cancelButtonToolTip', layerId: 'cancelButtonLayerId' },
+ { title: 'extraButtonTitle', toolTip: 'extraButtonToolTip', layerId: 'extraButtonLayerId', isDefault: true }
+ ]
+ });
+ evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption',
+ "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', null,
+ 'okButtonToolTip', 'cancelButtonToolTip', 'extraButtonToolTip',
+ 'okButtonLayerId', 'cancelButtonLayerId', 'extraButtonLayerId',
+ 3, 1);
+ pane.dismiss();
+ pane.destroy();
+});
+
test("AlertPane.show with icon, message, description, caption and 3 buttons - old style", function() {
pane = SC.AlertPane.show("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', this);
evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24');

0 comments on commit edd0aed

Please sign in to comment.