[WonderPush] Push notification subscription switch sample code

switch.css

/*
 * Push notification subscription switch
 */

.hide {
  /* Use whichever definition suits you most */
  display: none;
  /*visibility: hidden*/
}

/* Switch */
/* see http://www.cssflow.com/snippets/simple-toggle-switch/demo/scss */
.switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 20px;
  padding: 3px;
  /*background-color: white;*/
  border-radius: 18px;
  /*box-shadow: inset 0 -1px white,
              inset 0 1px 1px rgba(0, 0, 0, .05);*/
  cursor: pointer;
  /*background-image: linear-gradient(to bottom, #eee, white 25px);*/
}

.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 10px;
  text-transform: uppercase;
  background: #eceeef;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12),
              inset 0 0 2px rgba(0, 0, 0, .15);
  transition: .15s ease-out;
  transition-property: opacity, background;
}

.switch-label:before,
.switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  line-height: 1;
  transition: inherit;
}

.switch-label:before {
  content: attr(data-off);
  right: 11px;
  color: #aaa;
  text-shadow: 0 1px rgba(255, 255, 255, .5);
}

.switch-label:after {
  content: attr(data-on);
  left: 11px;
  color: white;
  text-shadow: 0 1px rgba(0, 0, 0, .2);
  opacity: 0;
}

.switch-input:checked ~ .switch-label {
  background: #47a8d8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15),
              inset 0 0 3px rgba(0, 0, 0, .2);
}

.switch-input:checked ~ .switch-label:before { opacity: 0; }
.switch-input:checked ~ .switch-label:after { opacity: 1; }

.switch-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
  background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
  transition: left .15s ease-out;
}

.switch-handle:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  background: #f9f9f9;
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(0, 0, 0, .02);
  background-image: linear-gradient(to bottom, #eee, white);
}

.switch-input:checked ~ .switch-handle {
  left: 40px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, .2);
}

.switch-redgreen > .switch-input ~ .switch-label {
  background: #ed2121;
}
.switch-redgreen > .switch-label:before {
  color: white;
}
.switch-redgreen > .switch-input:checked ~ .switch-label {
  background: #4fb845;
}

.switch-input:disabled ~ .switch-handle {
  background-image: linear-gradient(to bottom, #c0c0c0 40%, #808080);
}
.switch-input:disabled ~ .switch-handle:before {
  background: #b0b0b0;
}
.switch-input:disabled ~ .switch-label {
  background: #c0c0c0;
}
.switch-input:disabled ~ .switch-label:before {
  color: #eee;
}
/*!Switch */

switch.html

<!--
  Drop this code within your page, at an appropriate place
  -->

<!-- This container will be hidden/shown,
     depending on whether the user supports push notifications -->
<div id="push-notif-switch-container hide"><!-- You should probably keep it hidden by default using "hide" -->
  Push notifications:
  <label class="switch"><!-- try adding the "switch-redgreen" class for alternate style -->
    <input id="push-notif-switch" type="checkbox" class="switch-input">
    <span class="switch-label" data-on="ON" data-off="OFF"></span><!-- you can adapt the switch labels here -->
    <span class="switch-handle"></span>
  </label>
</div>

switch.js

//
// Push notification subscription switch
//

// The element to hide using the "hide" CSS class
// Note that it should be hidden by default, as the WonderPush SDK is not loaded for unsupported browsers
var notifSwitchContainer = document.getElementById('push-notif-switch-container');
var notifSwitch = document.getElementById('push-notif-switch');

// Respond to switch clicks by the user
$(notifSwitch).on('click', function(event) {
  var newChecked = notifSwitch.checked;
  event.stopPropagation();
  event.preventDefault();
  WonderPush.ready(function(WonderPushSDK) {
    if (newChecked) {
      WonderPushSDK.askNativePushNotificationPermission();
    } else {
      WonderPushSDK.unsubscribeFromPushNotification();
    }
  });
  return false;
});

// Respond to subscription state changes
$(window).on('WonderPushEvent', function(evt) {
  var event = evt.originalEvent || evt;
  var detail = event.detail || {};
  // Handle subscription changes
  // Note: This event is fired on each page and usually starts with the UNDETERMINED state.
  if (detail.name === 'subscription') {
    // We can show or hide the subscription switch appropriately
    if (notifSwitchContainer) {
      if (detail.state === detail.WonderPushSDK.SubscriptionState.UNSUPPORTED) {
        // Hide the switch container
        $(notifSwitchContainer).addClass('hide');
      } else {
        // Unhide the switch container
        $(notifSwitchContainer).removeClass('hide');
      }
    }
    // Update the switch state in to reflect the actual subscription state
    switch (detail.state) {
      case detail.WonderPushSDK.SubscriptionState.UNSUPPORTED:
        notifSwitch.disabled = true;
        notifSwitch.checked = false;
        break;
      case detail.WonderPushSDK.SubscriptionState.UNDETERMINED:
      case detail.WonderPushSDK.SubscriptionState.NOT_SUBSCRIBED:
      case detail.WonderPushSDK.SubscriptionState.UNSUBSCRIBED:
        notifSwitch.disabled = false;
        notifSwitch.checked = false;
        break;
      case detail.WonderPushSDK.SubscriptionState.SUBSCRIBED:
        notifSwitch.disabled = false;
        notifSwitch.checked = true;
        break;
    }
  } else if (detail.name === 'session') {
    // You can respond to the initialization state of the SDK too.
    // Note: As the WonderPush SDK is not loaded for unsupported browser,
    //       no event is fired in such case.
    switch (detail.state) {
      case detail.WonderPushSDK.SessionState.INIT_SUCCESS:
        show = 'success';
        break;
      case detail.WonderPushSDK.SessionState.INIT_FAILED:
        show = 'failed';
        break;
    }
  }
});