Commit 5a28007d authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review

Adjusting the switchbutton plugin (Bug #1396430)

1) Stop the callback function firing onload of page

2) Allowing to specify the function by reference so one can have either:

  callback_on: function() { },

or

  callback_on: "my_function",

3) Allowing the hidden checkbox to still exist in the tab index for
screenreaders

Change-Id: Ic7a153083446be89eca9f6457b3e05e69cb55a4b
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent 9e0c498c
...@@ -10,4 +10,5 @@ Commit: de704ff1c088e20ce528dff23a26162c439762b0 ...@@ -10,4 +10,5 @@ Commit: de704ff1c088e20ce528dff23a26162c439762b0
Changes: Changes:
* None * Added ability to stop callbacks firing on page load
\ No newline at end of file * Added ability to call callback function by string reference
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
clear_after: null, // Override the element after which the clearing div should be inserted (null > right after the button) clear_after: null, // Override the element after which the clearing div should be inserted (null > right after the button)
on_callback: undefined, //callback function that will be executed after going to on state on_callback: undefined, //callback function that will be executed after going to on state
off_callback: undefined, //callback function that will be executed after going to off state off_callback: undefined, //callback function that will be executed after going to off state
trigger_callback: false
}, },
_create: function() { _create: function() {
...@@ -70,8 +71,10 @@ ...@@ -70,8 +71,10 @@
}, },
_initLayout: function() { _initLayout: function() {
// Hide the receiver element // Hide the receiver element - but we can't use .hide() as screenreaders
this.element.hide(); // cannot find it in tab index so we need to move it off screen
this.element.css({"position": "absolute",
"left": "-3000px"});
// Create our objects: two labels and the button // Create our objects: two labels and the button
this.off_label = $("<span>").addClass("switch-button-label"); this.off_label = $("<span>").addClass("switch-button-label");
...@@ -270,7 +273,11 @@ ...@@ -270,7 +273,11 @@
} }
this.button_bg.addClass("checked"); this.button_bg.addClass("checked");
//execute on state callback if its supplied //execute on state callback if its supplied
if(typeof this.options.on_callback === 'function') this.options.on_callback.call(this); if(this.options.trigger_callback === true) {
if(typeof this.options.on_callback === 'function') this.options.on_callback.call(this);
else if(typeof window[this.options.on_callback] === 'function') window[this.options.on_callback].call(this);
}
this.options.trigger_callback = true;
} }
else { else {
// Update the underlying checkbox state // Update the underlying checkbox state
...@@ -291,7 +298,11 @@ ...@@ -291,7 +298,11 @@
} }
this.button_bg.removeClass("checked"); this.button_bg.removeClass("checked");
//execute off state callback if its supplied //execute off state callback if its supplied
if(typeof this.options.off_callback === 'function') this.options.off_callback.call(this); if(this.options.trigger_callback === true) {
if(typeof this.options.off_callback === 'function') this.options.off_callback.call(this);
else if(typeof window[this.options.off_callback] === 'function') window[this.options.off_callback].call(this);
}
this.options.trigger_callback = true;
} }
// Animate the switch // Animate the switch
this.button.animate({ left: newLeft }, 250, "easeInOutCubic"); this.button.animate({ left: newLeft }, 250, "easeInOutCubic");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment