[WonderPush] Category-specific notification subscription switch sample code

page.html

<!-- With tags put inside the switch -->
<div>
  Follow:
  <div class="wonderpush-tag-switch" style="display: inline-block;" data-tag-field="string_categories" data-tag-value="music" data-on="Music" data-off="Music"></div>
  <div class="wonderpush-tag-switch" style="display: inline-block;" data-tag-field="string_categories" data-tag-value="sport" data-on="Sport" data-off="Sport"></div>
</div>
<!-- Or with tags put outside the switch -->
<div>
  <div class="wonderpush-tag-switch" style="display: inline-block;" data-tag-field="string_categories" data-tag-value="music" data-sentence="Music"></div>
  <div class="wonderpush-tag-switch" style="display: inline-block;" data-tag-field="string_categories" data-tag-value="sport" data-sentence="Sport"></div>
</div>

tag-switch.js

WonderPush.ready(function(WonderPushSDK) {
  var targetClass = 'wonderpush-tag-switch';
  var classPrefix = 'wp-';
  function setupTagSwitches() {
    var tagSwitchesNodeList = document.querySelectorAll('.' + targetClass);
    Array.prototype.slice.call(tagSwitchesNodeList).forEach(function(switchEl) {
      var hasTagValue = function() {
        var cachedTags = JSON.parse(localStorage.wonderpushSubscriptionSwitchTags || '{}');
        if (!(switchEl.dataset.tagField in cachedTags)) cachedTags[switchEl.dataset.tagField] = [];
        var cachedValues = cachedTags[switchEl.dataset.tagField];
        return cachedValues.indexOf(switchEl.dataset.tagValue) >= 0;
      };
      if (!switchEl || switchEl.dataset.wpInitialized === 'true') return;
      switchEl.dataset.wpInitialized = 'true';
      /*
        <div class="wp-switch-wrapper">
          Push notifications:
          <label class="wp-switch">
            <input id="wonderpush-tag-switch-input" type="checkbox" class="wp-switch-input">
            <span class="wp-switch-label" data-on="ON" data-off="OFF"></span>
            <span class="wp-switch-handle"></span>
          </label>
        </div>
      */
      var switchClassPrefix = switchEl.dataset.classPrefix || classPrefix;
      switchEl.innerHTML = (switchEl.dataset.prepend || '')
          + '<div class="'+switchClassPrefix+'switch-wrapper"/>'
          + (switchEl.dataset.append || '');
      var wrapper = switchEl.querySelector('.'+switchClassPrefix+'switch-wrapper');
      var sentence = document.createElement('SPAN');
      sentence.innerHTML = switchEl.dataset.sentence || '';
      var label = document.createElement('LABEL');
      label.classList.add(switchClassPrefix+'switch');
      label.className += ' ' + (switchEl.dataset.class || '');
      if (switchEl.dataset.colorOn ) label.classList.add(switchClassPrefix+'switch-on-'  + switchEl.dataset.colorOn);
      if (switchEl.dataset.colorOff) label.classList.add(switchClassPrefix+'switch-off-' + switchEl.dataset.colorOff);
      var input = document.createElement('INPUT');
      input.type = 'checkbox';
      input.classList.add(switchClassPrefix+'switch-input');
      input.checked = hasTagValue();
      label.appendChild(input);
      var switchLabels = document.createElement('SPAN');
      switchLabels.classList.add(switchClassPrefix+'switch-label');
      switchLabels.dataset.on  = switchEl.dataset.on  || 'ON';
      switchLabels.dataset.off = switchEl.dataset.off || 'OFF';
      label.appendChild(switchLabels);
      var switchHandle= document.createElement('SPAN');
      switchHandle.classList.add(switchClassPrefix+'switch-handle');
      label.appendChild(switchHandle);
      wrapper.appendChild(sentence);
      wrapper.appendChild(label);
      // Bind listeners
      var clickListener = function(evt) {
        evt.stopPropagation();
        if (input.checked && WonderPushSDK.Notification.getSubscriptionState() !== WonderPushSDK.SubscriptionState.SUBSCRIBED) {
          WonderPushSDK.askNativePushNotificationPermission();
          // FIXME
          evt.preventDefault();
          return;
        }
        var cachedTags = JSON.parse(localStorage.wonderpushSubscriptionSwitchTags || '{}');
        if (!(switchEl.dataset.tagField in cachedTags)) {
          cachedTags[switchEl.dataset.tagField] = [];
        }
        var cachedValues = cachedTags[switchEl.dataset.tagField];
        if (input.checked) {
          if (cachedValues.indexOf(switchEl.dataset.tagValue) < 0) {
            cachedValues.push(switchEl.dataset.tagValue);
          }
        } else {
          cachedValues = cachedValues.filter(function(item) { return item !== switchEl.dataset.tagValue;});
        }
        cachedTags[switchEl.dataset.tagField] = cachedValues;
        localStorage.wonderpushSubscriptionSwitchTags = JSON.stringify(cachedTags);
        var diff = {};
        diff[switchEl.dataset.tagField] = cachedValues;
        WonderPushSDK.putInstallationCustomProperties(diff);
        return false;
      };
      input.addEventListener('click', clickListener);
      window.addEventListener('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 (wrapper) {
            if (detail.state === detail.WonderPushSDK.SubscriptionState.UNSUPPORTED) {
              // Hide the switch container
              $(wrapper).addClass('hide');
            } else {
              // Unhide the switch container
              $(wrapper).removeClass('hide');
            }
          }
          // Update the switch state in to reflect the actual subscription state
          switch (detail.state) {
            case detail.WonderPushSDK.SubscriptionState.UNSUPPORTED:
              input.disabled = true;
              input.checked = false;
              break;
            case detail.WonderPushSDK.SubscriptionState.UNDETERMINED:
            case detail.WonderPushSDK.SubscriptionState.NOT_SUBSCRIBED:
            case detail.WonderPushSDK.SubscriptionState.UNSUBSCRIBED:
              input.disabled = false;
              input.checked = false;
              break;
            case detail.WonderPushSDK.SubscriptionState.SUBSCRIBED:
              input.disabled = false;
              input.checked = hasTagValue();
              break;
          }
        }
      });
    });
  }
  if (document.readyState !== 'loading') {
    setupTagSwitches();
  } else {
    document.addEventListener('DOMContentLoaded', function() {
      setupTagSwitches();
    });
  }
});