osr force show, supply a guid and then render any available osr template on any site

bookmarklet

javascript:"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();!function(){var e=function(){var e={get:function(e){return new Promise(function(t,n){var i=new XMLHttpRequest;i.onreadystatechange=function(){var e=void 0;if(4===i.readyState&&200===i.status&&i.responseText)try{e=JSON.parse(i.responseText)}catch(n){e=i.responseText}finally{t(e)}},i.open("GET",e),i.send()})}},t={osr:function(t){return e.get(t)},sdk:function(t){return e.get(t)},template:function(t){return e.get(t).then(function(e){return Object.keys(e).reduce(function(t,n){return t[n]=decodeURIComponent(e[n]),t},{})})}},n=function(e){var t=document.createElement(e.el||"div"),n=e.attrs||{};for(var i in n)t[i]=n[i];return{el:t,appendOn:function(e){return new Promise(function(n,i){e.appendChild(t),n(t)})},remove:function(){return new Promise(function(e,n){t.parentNode.removeChild(t),e(t)})}}},i=function(e){return{templates:function(){return e.pageConfigs.map(function(e){return{name:e.name,templates:e.pageInstances.reduce(function(e,t){return[].concat.apply([],t.filters.map(function(e){return e.templates.osr}))},[])}})}}},r=function(e){return JSON.stringify(e,null,2).replace(/[\[\]\{\}\'\"\,]/gi,"").replace(/^\s{2,}/gm,"")},o=function(){function e(t,n){_classCallCheck(this,e),this.apikey=t,this.eventConfig=n,this.routes={litebox:"/litebox/template/",osrConfig:"/osr/"},this.eventMap={outsideClick:[".osr-overlay"],closeClick:[".close-sc",".no-thanks-sc",".exit-sc"],continueClick:[".cta-sc"],emailBasketClick:[".send-sc"]},this.apiHost="https://d22j4fzzszoii2.cloudfront.net",this.overlayStyle="div.osr-overlay { background: rgba(0,0,0,0.7); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf45484d', endColorstr='#bf000000',GradientType=0 ); width: 100%; height: 100%; z-index: 99999; top: 0; left: 0; position:fixed; } div.osr-overlay.sc-hidden { display: none; } div.osr-content { margin: 0 auto; position: relative; background-color: #FFFFFF; top: 10% }"}return _createClass(e,[{key:"init",value:function(){var e=this;return new Promise(function(n,i){t.osr(e.apiHost+e.routes.osrConfig+e.apikey).then(function(t){return e.clientId=t.clientId,t}).then(e.promptTemplate.bind(e)).then(function(t){return e.availableTemplates=t.available,t.url}).then(t.template).then(e.render.bind(e)).then(function(t){return e.view=t}).then(e.bindTemplateEvents.bind(e)).then(n)["catch"](console.warn.bind(console))})}},{key:"promptTemplate",value:function(e){var t=this;return new Promise(function(n,o){var a=i(e).templates(),s=r(a),l=prompt("Choose a template to render by typing its template id number \n\n"+s),c=t.apiHost+t.routes.litebox+(e.clientId+"/"+l);n({available:a,url:c})})}},{key:"render",value:function(e){var t=this;return new Promise(function(i,r){var o=document.querySelector("head"),a=n({el:"style",attrs:{innerHTML:t.overlayStyle}}),s=n({el:"style",attrs:{id:"sc-osr-style",innerHTML:e.stylesheet}}),l=n({el:"div",attrs:{className:"osr-overlay sc-lb"}}),c=n({el:"div",attrs:{className:"osr-content sc-lb",innerHTML:e.html}});a.appendOn(o).then(function(e){return s.appendOn(o)}).then(function(e){return l.appendOn(document.body)}).then(function(e){return c.appendOn(e)}).then(function(e){return i({overlayStyle:a,osrStyle:s,overlay:l,container:c})})})}},{key:"show",value:function(){this.view.overlay.el.classList.remove("sc-hidden")}},{key:"hide",value:function(){this.view.overlay.el.classList.add("sc-hidden")}},{key:"bindTemplateEvents",value:function(e){var t=this;return new Promise(function(e,n){var i=function(e,t,n){return n()},r=function(e){return e.reduce(function(e,t){var n=document.querySelectorAll(t);return e=[].concat.apply(e,[].slice.call(n))},[])},o={outside:{selectors:r(t.eventMap.outsideClick),onClick:function(e){e.target.className.indexOf("osr-overlay sc-lb")>-1&&t.hide()}},exit:{selectors:r(t.eventMap.closeClick),onClick:function(e){return(t.eventConfig.closeClick||i)("CLOSE_CLICK",e,t.hide.bind(t))}},"continue":{selectors:r(t.eventMap.continueClick),onClick:function(e){return(t.eventConfig.continueClick||i)("CONTINUE_CLICK",e,t.hide.bind(t))}},emb:{selectors:r(t.eventMap.emailBasketClick),onClick:function(e){return(t.eventConfig.emailBasketClick||i)("EMAIL_BASKET_CLICK",e,t.hide.bind(t))}}},a=function(e){o[e].selectors.forEach(function(t){return t.addEventListener("click",o[e].onClick,!1)})};for(var s in o)a(s);e()})}}]),e}();return function(){function e(t){var n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];_classCallCheck(this,e),this.apikey=t,this.eventConfig=n,this.osr=new o(this.apikey,this.eventConfig)}return _createClass(e,[{key:"init",value:function(){var e=this;this.osr.init().then(function(){e.templates=e.osr.availableTemplates})}},{key:"switchTemplate",value:function(e){var n=this;this.osr.view.container.remove().then(function(){var i=e||parseInt(prompt("Templates available for this client ID. Enter new filename to get templates for that client. \n\n"+r(n.osr.availableTemplates))),a=(n.osr.availableTemplates.reduce(function(e,t){return t.templates.forEach(function(t){return e.push(t)}),e},[]),new o),s=""+a.apiHost+a.routes.litebox+n.osr.clientId+"/"+i;t.template(s).then(a.render.bind(a)).then(a.bindTemplateEvents.bind(a))})}},{key:"switchClient",value:function(e){var t=this,n=this.osr.config;n.guid=guid||prompt("Enter another filename"),this.osr.view.container.remove(),this.osr=new o(n),this.osr.init().then(function(){t.templates=t.osr.availableTemplates})}}]),e}()}(),t=new e(prompt("find available OSR templates to render by entering client api key (aka guid)"),{continueClick:function(e,t,n){console.log(e,t.target),n()},closeClick:function(e,t,n){console.log(e,t.target),n()},emailBasketClick:function(e,t,n){console.log(e,t.target),n()}});t.init()}();

force-show.es6.js

/**
 * @param {object} userConfig
 * @property {string} conf.filename - evals __sco.config to get guid adn then that lets you know what templates are available
 * @property {function} conf.continueClick - first parameter is callback, call it to unblock ui
 * @property {function} conf.emailBasketClick - same as above
 * @property {function} conf.closeClick - same as above
 */

(() => {


  var Osr = (() => {

    const $http = {
      get: url => new Promise((resolve, reject) => {
        let req = new XMLHttpRequest();
        req.onreadystatechange = () => {
          let body;
          if (req.readyState !== 4 || req.status !== 200 || !req.responseText) {
            return;
          }
          try {
            body = JSON.parse(req.responseText);
          }
          catch(e) {
            body = req.responseText;
          }
          finally {
            resolve(body);
          }
        };
        req.open('GET', url);
        req.send();
      })
    };

    const $resource = {
      osr: url => $http.get(url),
      sdk: url => $http.get(url),
      template: url => $http
        .get(url)
        .then(data => Object.keys(data).reduce((acc, key) => {
          acc[key] = decodeURIComponent(data[key]);
          return acc;
        }, {}))
    };

    const $createElement = obj => {
      let el = document.createElement(obj.el || 'div');
      let attrs = obj.attrs || {};
      for (let p in attrs)
        el[p] = attrs[p];
      return {
        el,
        appendOn: parent => new Promise((resolve, reject) => {
          parent.appendChild(el);
          resolve(el);
        }),
        remove: () => new Promise((resolve, reject) => {
          el.parentNode.removeChild(el);
          resolve(el);
        })
      }
    };

    const $reduceOsr = conf => {
      return {
        templates: () => conf.pageConfigs.map(o => {
          return {
            name: o.name,
            templates: o.pageInstances.reduce((acc, p) => {
              return [].concat.apply([], p.filters.map(f => f.templates.osr));
            }, [])
          }
        })
      }
    };

    const $find = (needle, collection) => {
      const key = Object.keys(needle)[0];
      const val = needle[key];
      for (let i = 0; i < collection.length; i++) {
        if (collection[i][key].toLowerCase() === val.toLowerCase()) {
          return collection[i];
        }
      }
    }

    const $pretty = obj => JSON.stringify(obj, null, 2).replace(/[\[\]\{\}\'\"\,]/gi, '').replace(/^\s{2,}/gm, '');

    class Osr {

      constructor(apikey, eventConfig) {
        this.apikey = apikey;
        this.eventConfig = eventConfig;
        this.routes = { litebox: '/litebox/template/', osrConfig: '/osr/' };
        this.eventMap = {
          outsideClick: ['.osr-overlay'],
          closeClick: ['.close-sc', '.no-thanks-sc', '.exit-sc'],
          continueClick: ['.cta-sc'],
          emailBasketClick: ['.send-sc']
        };
        this.apiHost = 'https://d22j4fzzszoii2.cloudfront.net';
        this.overlayStyle = "div.osr-overlay { background: rgba(0,0,0,0.7); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf45484d', endColorstr='#bf000000',GradientType=0 ); width: 100%; height: 100%; z-index: 99999; top: 0; left: 0; position:fixed; } div.osr-overlay.sc-hidden { display: none; } div.osr-content { margin: 0 auto; position: relative; background-color: #FFFFFF; top: 10% }";
      }

      init() {
        return new Promise((resolve, reject) => {
          $resource
            .osr(this.apiHost + this.routes.osrConfig + this.apikey)
            .then(conf => {
              this.clientId = conf.clientId;
              return conf;
            })
            .then(this.promptTemplate.bind(this))
            .then(templates => {
              this.availableTemplates = templates.available;
              return templates.url;
            })
            .then($resource.template)
            .then(this.render.bind(this))
            .then(view => this.view = view)
            .then(this.bindTemplateEvents.bind(this))
            .then(resolve)
            .catch(console.warn.bind(console));
        });
      } 

      promptTemplate(config) { 
        return new Promise((resolve, reject) => {
          const available = $reduceOsr(config).templates();
          const disp = $pretty(available);
          const tmplId = prompt('Choose a template to render by typing its template id number \n\n' + disp);
          const url = this.apiHost + this.routes.litebox + `${config.clientId}/${tmplId}`;
          resolve({ available, url });
        });
      }

      render(assets) {
        return new Promise((resolve, reject) => {
          const head = document.querySelector('head');
          let overlayStyle = $createElement({
            el: 'style',
            attrs: { innerHTML: this.overlayStyle }
          });
          let osrStyle = $createElement({ 
            el: 'style', 
            attrs: { id: 'sc-osr-style', innerHTML: assets.stylesheet } 
          });
          let overlay = $createElement({
            el: 'div',
            attrs: { className: 'osr-overlay sc-lb' }
          });
          let container = $createElement({
            el: 'div',
            attrs: { className: 'osr-content sc-lb', innerHTML: assets.html  }
          });
          overlayStyle
            .appendOn(head)
            .then(el => osrStyle.appendOn(head))
            .then(el => overlay.appendOn(document.body))
            .then(el => container.appendOn(el))
            .then(el => resolve({ overlayStyle, osrStyle, overlay, container }));
        });
      }

      show() {
        this.view.overlay.el.classList.remove('sc-hidden');
      }

      hide() {
        this.view.overlay.el.classList.add('sc-hidden');
      }

      bindTemplateEvents(view) {
        return new Promise((resolve, reject) => {
          const dummy = (type, e, next) => next();
          const concat = selectors => selectors.reduce((acc, sel) => {
            let elems = document.querySelectorAll(sel);
            return acc = [].concat.apply(acc, [].slice.call(elems));
          }, []);
          const triggers = {
            outside: {
              selectors: concat(this.eventMap.outsideClick),
              onClick: e => {
                if (e.target.className.indexOf('osr-overlay sc-lb') > -1) {
                  this.hide();
                }
              }
            },
            exit: {
              selectors: concat(this.eventMap.closeClick),
              onClick: e => (this.eventConfig.closeClick || dummy)('CLOSE_CLICK', e, this.hide.bind(this))
            },
            continue: {
              selectors: concat(this.eventMap.continueClick),
              onClick: e => (this.eventConfig.continueClick || dummy)('CONTINUE_CLICK', e, this.hide.bind(this))
            },
            emb: {
              selectors: concat(this.eventMap.emailBasketClick),
              onClick: e => (this.eventConfig.emailBasketClick || dummy)('EMAIL_BASKET_CLICK', e, this.hide.bind(this))
            }
          };
          for (let p in triggers) {
            triggers[p].selectors.forEach(el => el.addEventListener('click', triggers[p].onClick, false));
          }
          resolve();
        })
      }

    }

    return class ForceShow {

      constructor(apikey, eventConfig = {}) {
        this.apikey = apikey;
        this.eventConfig = eventConfig;
        this.osr = new Osr(this.apikey, this.eventConfig);
      }

      init() {
        this.osr.init().then(() => {
          this.templates = this.osr.availableTemplates;
        });
      }

      switchTemplate(templateId) {
        this
          .osr.view.container.remove()
          .then(() => {
            const id = templateId || parseInt(prompt('Templates available for this client ID. Enter new filename to get templates for that client. \n\n' + $pretty(this.osr.availableTemplates)));
            const templates = this.osr.availableTemplates.reduce((acc, o) => {
              o.templates.forEach(t => acc.push(t));
              return acc;
            }, []);
            const osr = new Osr();
            const url = `${osr.apiHost}${osr.routes.litebox}${this.osr.clientId}/${id}`;
            $resource.template(url)
              .then(osr.render.bind(osr))
              .then(osr.bindTemplateEvents.bind(osr));
          });
      }

      switchClient(needle) {
        let conf = this.osr.config;
        conf.guid = guid || prompt('Enter another filename');
        this.osr.view.container.remove();
        this.osr = new Osr(conf);
        this.osr.init().then(() => {
          this.templates = this.osr.availableTemplates;
        });
      }

    }

  })();

  var osr = new Osr(prompt('find available OSR templates to render by entering client api key (aka guid)'), {
    continueClick: (type, e, proceed) => {
      console.log(type, e.target);
      proceed();
    },
    closeClick: (type, e, proceed) => {
      console.log(type, e.target);
      proceed();
    },
    emailBasketClick: (type, e, proceed) => {
      console.log(type, e.target);
      proceed()
    }
  });

  osr.init();

})()

force-show.min.es5.js

"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();!function(){var e=function(){var e={get:function(e){return new Promise(function(t,n){var i=new XMLHttpRequest;i.onreadystatechange=function(){var e=void 0;if(4===i.readyState&&200===i.status&&i.responseText)try{e=JSON.parse(i.responseText)}catch(n){e=i.responseText}finally{t(e)}},i.open("GET",e),i.send()})}},t={osr:function(t){return e.get(t)},sdk:function(t){return e.get(t)},template:function(t){return e.get(t).then(function(e){return Object.keys(e).reduce(function(t,n){return t[n]=decodeURIComponent(e[n]),t},{})})}},n=function(e){var t=document.createElement(e.el||"div"),n=e.attrs||{};for(var i in n)t[i]=n[i];return{el:t,appendOn:function(e){return new Promise(function(n,i){e.appendChild(t),n(t)})},remove:function(){return new Promise(function(e,n){t.parentNode.removeChild(t),e(t)})}}},i=function(e){return{templates:function(){return e.pageConfigs.map(function(e){return{name:e.name,templates:e.pageInstances.reduce(function(e,t){return[].concat.apply([],t.filters.map(function(e){return e.templates.osr}))},[])}})}}},r=function(e){return JSON.stringify(e,null,2).replace(/[\[\]\{\}\'\"\,]/gi,"").replace(/^\s{2,}/gm,"")},o=function(){function e(t,n){_classCallCheck(this,e),this.apikey=t,this.eventConfig=n,this.routes={litebox:"/litebox/template/",osrConfig:"/osr/"},this.eventMap={outsideClick:[".osr-overlay"],closeClick:[".close-sc",".no-thanks-sc",".exit-sc"],continueClick:[".cta-sc"],emailBasketClick:[".send-sc"]},this.apiHost="https://d22j4fzzszoii2.cloudfront.net",this.overlayStyle="div.osr-overlay { background: rgba(0,0,0,0.7); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf45484d', endColorstr='#bf000000',GradientType=0 ); width: 100%; height: 100%; z-index: 99999; top: 0; left: 0; position:fixed; } div.osr-overlay.sc-hidden { display: none; } div.osr-content { margin: 0 auto; position: relative; background-color: #FFFFFF; top: 10% }"}return _createClass(e,[{key:"init",value:function(){var e=this;return new Promise(function(n,i){t.osr(e.apiHost+e.routes.osrConfig+e.apikey).then(function(t){return e.clientId=t.clientId,t}).then(e.promptTemplate.bind(e)).then(function(t){return e.availableTemplates=t.available,t.url}).then(t.template).then(e.render.bind(e)).then(function(t){return e.view=t}).then(e.bindTemplateEvents.bind(e)).then(n)["catch"](console.warn.bind(console))})}},{key:"promptTemplate",value:function(e){var t=this;return new Promise(function(n,o){var a=i(e).templates(),s=r(a),l=prompt("Choose a template to render by typing its template id number \n\n"+s),c=t.apiHost+t.routes.litebox+(e.clientId+"/"+l);n({available:a,url:c})})}},{key:"render",value:function(e){var t=this;return new Promise(function(i,r){var o=document.querySelector("head"),a=n({el:"style",attrs:{innerHTML:t.overlayStyle}}),s=n({el:"style",attrs:{id:"sc-osr-style",innerHTML:e.stylesheet}}),l=n({el:"div",attrs:{className:"osr-overlay sc-lb"}}),c=n({el:"div",attrs:{className:"osr-content sc-lb",innerHTML:e.html}});a.appendOn(o).then(function(e){return s.appendOn(o)}).then(function(e){return l.appendOn(document.body)}).then(function(e){return c.appendOn(e)}).then(function(e){return i({overlayStyle:a,osrStyle:s,overlay:l,container:c})})})}},{key:"show",value:function(){this.view.overlay.el.classList.remove("sc-hidden")}},{key:"hide",value:function(){this.view.overlay.el.classList.add("sc-hidden")}},{key:"bindTemplateEvents",value:function(e){var t=this;return new Promise(function(e,n){var i=function(e,t,n){return n()},r=function(e){return e.reduce(function(e,t){var n=document.querySelectorAll(t);return e=[].concat.apply(e,[].slice.call(n))},[])},o={outside:{selectors:r(t.eventMap.outsideClick),onClick:function(e){e.target.className.indexOf("osr-overlay sc-lb")>-1&&t.hide()}},exit:{selectors:r(t.eventMap.closeClick),onClick:function(e){return(t.eventConfig.closeClick||i)("CLOSE_CLICK",e,t.hide.bind(t))}},"continue":{selectors:r(t.eventMap.continueClick),onClick:function(e){return(t.eventConfig.continueClick||i)("CONTINUE_CLICK",e,t.hide.bind(t))}},emb:{selectors:r(t.eventMap.emailBasketClick),onClick:function(e){return(t.eventConfig.emailBasketClick||i)("EMAIL_BASKET_CLICK",e,t.hide.bind(t))}}},a=function(e){o[e].selectors.forEach(function(t){return t.addEventListener("click",o[e].onClick,!1)})};for(var s in o)a(s);e()})}}]),e}();return function(){function e(t){var n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];_classCallCheck(this,e),this.apikey=t,this.eventConfig=n,this.osr=new o(this.apikey,this.eventConfig)}return _createClass(e,[{key:"init",value:function(){var e=this;this.osr.init().then(function(){e.templates=e.osr.availableTemplates})}},{key:"switchTemplate",value:function(e){var n=this;this.osr.view.container.remove().then(function(){var i=e||parseInt(prompt("Templates available for this client ID. Enter new filename to get templates for that client. \n\n"+r(n.osr.availableTemplates))),a=(n.osr.availableTemplates.reduce(function(e,t){return t.templates.forEach(function(t){return e.push(t)}),e},[]),new o),s=""+a.apiHost+a.routes.litebox+n.osr.clientId+"/"+i;t.template(s).then(a.render.bind(a)).then(a.bindTemplateEvents.bind(a))})}},{key:"switchClient",value:function(e){var t=this,n=this.osr.config;n.guid=guid||prompt("Enter another filename"),this.osr.view.container.remove(),this.osr=new o(n),this.osr.init().then(function(){t.templates=t.osr.availableTemplates})}}]),e}()}(),t=new e(prompt("find available OSR templates to render by entering client api key (aka guid)"),{continueClick:function(e,t,n){console.log(e,t.target),n()},closeClick:function(e,t,n){console.log(e,t.target),n()},emailBasketClick:function(e,t,n){console.log(e,t.target),n()}});t.init()}();