SafeFrame External API Wrapper

sf-ext-api-wrapper.js

/* eslint-disable */

function sfExtAPI(logger) {
  var w = window
  var sf = w["$sf"]
  var sfAPI = sf && sf.ext
  var eventHandler = EventHandler()
  
  var log = function (message) {
    if ('localStorage' in w && /sf/.test(localStorage.debug)) {
      (logger || new Function())(message)
    }
  }
  
  function sfApiFacade(name) {
    return (sfAPI && name in sfAPI && sfAPI[name]) || new Function('console && console.error && console.error("SafeFrame is not supported")')
  }

  /**
   * Internal function that will be called as a notification of event status
   *
   * @param {String} status - expanded|collapsed|failed|geom-update|focus-change
   * @param {Object} [data] 
   * @param {String} [data.cmd] - contains original command sent.
   * @param {String} [data.reason] - contains a description of failure
   * @param {any} [data.info] -  contains the object of information sent to host
   */
  function sfExtStatusUpdate(status, data) {
    if (status == "read-cookie") {
      eventHandler.emit('readCookie', null, data)
    } else if (status == "failed" && data.cmd == "read-cookie") {
      eventHandler.emit('readCookie', new Error(data.reason), null)
    }

    if (status == "write-cookie") {
      eventHandler.emit('writeCookie', null, data)
    } else if (status == "failed" && data.cmd == "write-cookie") {
      eventHandler.emit('writeCookie', new Error(data.reason), null)
    }

    if (status === "expanded") {
      eventHandler.emit('expanded')
    }

    if (status === "collapsed") {
      eventHandler.emit('collapsed')
    }

    if (status === "geom-update") {
      eventHandler.emit('geom-update', null, sfApiFacade('geom')())
    }

    if (status === "focus-change") {
      eventHandler.emit('focus-change', null, sfApiFacade('winHasFocus')())
    }
  }

  return {
    register: function (width, height) {
      sfApiFacade('register')(width, height, sfExtStatusUpdate)
    },
    supports: function (which) {
      var o = sfApiFacade('supports')()
      return (o && o[which])
    },
    inViewPercentage: function () {
      return sfApiFacade('inViewPercentage')()
    },
    winHasFocus: function () {
      return sfApiFacade('winHasFocus')()
    },
    geom: function () {
      return sfApiFacade('geom')()
    },
    meta: function(propName, ownerKey) {
      return sfApiFacade('meta')(propName, ownerKey)
    },
    expandAsync: function (exp, callback) {
      sfApiFacade('expand')
      typeof callback === 'function' && eventHandler.on('expanded', callback)
    },
    collapseAsync: function (callback) {
      sfApiFacade('collapse')
      typeof callback === 'function' && eventHandler.on('collapsed', callback)
    },
    readHostCookieAsync: function (cookieName, callback) {
      sfApiFacade('cookie')(cookieName)
      typeof callback === 'function' && eventHandler.on('readCookie', callback)
    },
    writeHostCookieAsync: function (cookieName, cookieValue, callback) {
      sfApiFacade('cookie')(cookieName, cookieValue)
      typeof callback === 'function' && eventHandler.on('writeCookie', callback)
    },
    onGeomUpdate: function (callback) {
      typeof callback === 'function' && eventHandler.on('geom-update', callback)
    },
    onFocusChange: function (callback) {
      typeof callback === 'function' && eventHandler.on('focus-change', callback)
    }
  }

  function EventHandler() {
    function arrayIndexOf (array, searchElement, fromIndex) {
      var k

      if (array === null) {
        throw new TypeError('"this" is null or not defined')
      }

      var o = Object(array)
      var len = o.length >>> 0

      if (len === 0) {
        return -1
      }

      var n = fromIndex | 0

      if (n >= len) {
        return -1
      }

      k = Math.max(n >= 0 ? n : len - Math.abs(n), 0)

      while (k < len) {
        if (k in o && o[k] === searchElement) {
          return k
        }
        k++
      }
      return -1
    }

    function arrayMap (array, fn) {
      var rv = []
    
      for (var i = 0, l = array.length; i < l; i++) {
        rv.push(fn(array[i]))
      }
    
      return rv
    }
    
    var eventHandlerMap = {}

    function on(eventName, callback) {
      eventHandlerMap[eventName] = eventHandlerMap[eventName] || []
      return eventHandlerMap[eventName] instanceof Array && eventHandlerMap[eventName].push(callback)
    }

    function off(eventName, callback) {
      var index = arrayIndexOf(eventHandlerMap[eventName], callback)

      if (index > -1) {
        eventHandlerMap[eventName].splice(index, 1)
        return true
      }

      return false
    }

    function emit(eventName, eventValue, context) {
      context = context || null
      arrayMap(_eventHandlerMap[eventName], function (callbackFunction) {
        typeof callbackFunction === 'function' && callbackFunction.call(context, eventValue)
      })
    }

    return { 
      on: on,
      off: off,
      emit: emit
    }
  }
}

USAGE.md

register

sfApi = sfExtAPI()

// register

sfApi.register(250, 250)

supports

sfApi = sfExtAPI()

sfApi.supports('exp-ovr')      // default: true
sfApi.supports('exp-push')     // default: false
sfApi.supports('read-cookie')  // default: false
sfApi.supports('write-cookie') // default: false

geom

sfApi = sfExtAPI()

sfApi.geom();
//=> results of $sf.ext.geom()

winHasFocus

sfApi = sfExtAPI()

sfApi.winHasFocus();
//=> results of $sf.ext.winHasFocus()

inViewPercentage

sfApi = sfExtAPI()

sfApi.inViewPercentage();
//=> results of $sf.ext.inViewPercentage()

expand / collapse

sfApi = sfExtAPI()

sfApi.expandAsync({ l: 400, t: 200 }, function () {
  console.log('expanded')
});

// collapse

sfApi.collapseAsync(function () {
  console.log('collapsed')
});

cookie

sfApi = sfExtAPI()

sfApi.writeHostCookieAsync('foo', 'bar', function(err, value) {
    if (err) {
      throw err
    }
  
    console.log(value) //=> value is 'bar'
});
//=> true(or false when write command has failed)

sfApi.readHostCookieAsync('foo', function(err, value) {
    if (err) {
      throw err
    }
  
    console.log(value) //=> value is 'bar'
});
//=> true(or false when write command has failed)

extra event handler

sfApi = sfExtAPI()

// 'geom-change' event handler
sfApi.onGeomUpdate(function(err, value) {
    if (err) {
      throw err
    }
    console.log(value) //=> run $sf.ext.geom() when 'geom-update' event occurs
});

// 'focus-change' event handler
sfApi.onFocusChange(function(err, value) {
   if (err) {
      throw err
    }
    console.log(value) //=> run $sf.ext.geom() when 'focus-change' event occurs
})