misago-yesnoswitch.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. // Define extension
  2. function enableYesNoSwitch(selector) {
  3. function createYesNoSwitch($control) {
  4. var name = $control.find('input').first().attr('name');
  5. var value = $control.find("input:checked").val() * 1;
  6. // hide original switch options
  7. $control.find('label').addClass('hidden-original-switch');
  8. var yes_label = $.trim($control.find('label').first().text());
  9. var no_label = $.trim($control.find('label').last().text());
  10. var toggle_off = "fa fa-toggle-off fa-2x";
  11. var toggle_on = "fa fa-toggle-on fa-2x";
  12. // Render new switch
  13. var $new_switch = $('<label class="yes-no-switch"></label>');
  14. var $icon = $('<span class="' + toggle_off + '"></span>');
  15. var $label = $('<strong class="yes-no-label"></strong>');
  16. $control.prepend($new_switch);
  17. $new_switch.append($icon);
  18. $new_switch.append($label);
  19. if (value) {
  20. $new_switch.addClass('active');
  21. $icon.attr("class", toggle_on);
  22. $label.text(yes_label);
  23. } else {
  24. $icon.attr("class", toggle_off);
  25. $label.text(no_label);
  26. }
  27. $new_switch.click(function() {
  28. $this = $(this);
  29. if ($this.hasClass('active')) {
  30. new_value = 0;
  31. $this.removeClass('active');
  32. $icon.attr("class", toggle_off);
  33. $label.text(no_label);
  34. } else {
  35. new_value = 1;
  36. $this.addClass('active');
  37. $icon.attr("class", toggle_on);
  38. $label.text(yes_label);
  39. }
  40. $control.find('.yesno-switch').first().prop('checked', new_value == 1);
  41. $control.find('.yesno-switch').last().prop('checked', new_value == 0);
  42. });
  43. }
  44. $(selector).each(function() {
  45. if ($(this).find('.yesno-switch').length == 2) {
  46. createYesNoSwitch($(this));
  47. }
  48. });
  49. }
  50. // Enable switch
  51. $(function() {
  52. enableYesNoSwitch('.control-radioselect');
  53. });