Skip to content

Instantly share code, notes, and snippets.

@kyungw00k
Last active February 2, 2018 05:58
Show Gist options
  • Save kyungw00k/de835fade69206f8f02a52e2038da78b to your computer and use it in GitHub Desktop.
Save kyungw00k/de835fade69206f8f02a52e2038da78b to your computer and use it in GitHub Desktop.
SafeFrame External API Wrapper
/* 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
}
}
}

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
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment