Elements Tracking Debug

elements_tracking_debug.js

// Bookmark:
// javascript:(function(){var d=document,s=d.createElement('scr'+'ipt'),b=d.body,l=d.location;s.setAttribute('src','https://raw.github.com/gist/3665292/elements_tracking_debug.js');b.appendChild(s)})();
// loads javascript and executes some code when jQuery is loaded
// note that callback function needs be before calling loadJS(or inline)
// loadJS("http://code.jquery.com/jquery-latest.js", function() { $('my_element').hide(); });
var loadJS = function (url, callback) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.src = url;

  // Attach handlers for all browsers
  var done = false;
  script.onload = script.onreadystatechange = function() {
    if( !done && ( !this.readyState             || 
                    this.readyState == "loaded" || 
                    this.readyState == "complete")) {
      done = true;

      // Continue your code
      callback();

      // Handle memory leak in IE
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );
    }
  };

  head.appendChild(script);
}


// Loading CSS with Callback
// $('head').append('<link rel="stylesheet" href="http://cdn.sstatic.net/stackoverflow/all.css?v=d4a5c7ca0d4c" type="text/css" />');
// check if css loaded
//var fakeListener = setInterval(function(){
//    if($("body").css("text-align")=== "center"){
//        clearInterval(fakeListener)
//        // What you want to do after it loads
//    }
//},50)


var findAttributesUp = function (el, attribute) {
  var attr = [];
  while (el) {
    if (typeof el.getAttribute !== "undefined" &&
       el.getAttribute(attribute) !== null) {
      attr.push(el.getAttribute(attribute));
    }
    el = el.parentNode;
  }
  return attr;
};

var getClickData = function (el, json) {
  var _i,
      _json  = json || s_el || null,
      _attrs = findAttributesUp(el, "data-sc"),
      _data;

  for (_i in _attrs.reverse()) {
    if (_json[_attrs[_i]]) {
      _json = _json[_attrs[_i]];
    }
  }

  if (typeof _json.click == 'function'){
    _json.click = _json.click.call();
  }

  if (typeof _json.click !== "undefined") {
    if (typeof _json.click.track !== "undefined" &&
        _json.click.track === false) {
      return false;
    }

    _data = _json.click;
    delete _data.track;
  }

  return _data;
};

var endsWith = function (str, suffix) {
  return str.indexOf(suffix, str.length - suffix.length) !== -1;
};

var tip_content = function(el) {
  var _sc   = ($(el).attr('data-sc') || "");
  
  var _el = (findAttributesUp(el, "data-sc").reverse().join('.') || "");

  var _data = getClickData(el);
  var _error = false;

  var table = '<table id="#tip">';
  table += '<tr><td>data-sc</td><td>' + _sc +'</td></tr>';
  table += '<tr><td>s_el</td><td>s_el.' + _el +'.click</td></tr>';
 
  if (typeof _data === "undefined" || $.isEmptyObject(_data)) {
     table += '<tr><td></td><td style="color: red"><strong>s_el.'+ _el + '.click data is missing</strong></td></tr>';
    _error = true;
  } else {

    var value = "";
    $.each( _data, function(k, v){

      // clean v
      value = $('<div/>').text(v).html();
    
      // Error Catching Logic

      // evar1 ending with -_-
      if ($.trim(k) === "eVar1" && endsWith($.trim(v), "-_-")) {
        table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'<strong style="color: red">?MISSING?</strong></td></tr>';
        _error = true;
      
      // evar19 ending with :
      } else if ($.trim(k) === "eVar19" && endsWith($.trim(v), ":")) {
        table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'<strong style="color: red">?MISSING?</strong></td></tr>';
        _error = true;
        
      // evar19 containing template data:
      } else if ( ($.trim(k) === "eVar19" || $.trim(k) === "products" || $.trim(k) === "eVar1") && 
                 ( v.indexOf("<POSITION>") !== -1 || v.indexOf("<CAMPAIGN_ID>") !== -1 ||
                  v.indexOf("<OTHER_CTA>") !== -1 ||
                  v.indexOf("<PRODUCT CODE>") !== -1 || v.indexOf("<PRODUCT TYPE>") !== -1 || 
                  v.indexOf("<DWNL_PRODUCT>") !== -1) || v.length < 3) {

        table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'<strong style="color: red"> ?TEMPLATE NOT REPLACED?</strong></td></tr>';
        _error = true;

      } else if ((typeof v.indexOf !== "undefined" ) && ( v.indexOf("<PAGE DESCRIPTOR>") !== -1 || v.indexOf("<CTA DESCRIPTION>") !== -1 || v.indexOf("<NO TEMPLATE>") !== -1)) {
        
        table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'<strong style="color: red"> !!AUTOMATED PLACEHOLDERS FAILED. CONSULT DEVELOPERS!!</strong></td></tr>';
        _error = true;

      // When OK
      } else { 
        table += '<tr><td><strong>' + k +'</strong></td><td>' + value +'</td></tr>';
      }      
    });
  }
  table += '</table>';
  return {sc: _sc, el: _el, content: table, hasError: _error};
};


// Qtip CSS Include
$('head').append('<link rel="stylesheet" href="http://qtip2.com/v/nightly/jquery.qtip.css" type="text/css" />');

// Table CSS
var table_css = "table {  width: auto;   box-shadow: 0 0 4px #CCCCCC;   border-collapse: collapse;   border-spacing: 0;    border-color:#CCCCCC;    border-style:solid;    border-width:1px;  } th, td, caption {   padding: 0px 10px 4px 5px;   font-weight: 300; }  ul {   margin-bottom: 3em; }    thead tr, thead th {   background: none repeat scroll 0 0 #F0F0F0; }  tbody tr:nth-child(2n) td, tbody tr.odd td {   background: none repeat scroll 0 0 #F0F0F0; }";
table_css += " .qtip-default, .qtip-titlebar { font-size: 12.5px !important; background-color:  #FFFFFF !important; border-color: #CCCCCC !important} ";
$("<style type='text/css'>" + table_css + "</style>").appendTo("head");

// Qtip CSS
var qtip_css = ".largeWidth.ui-tooltip { max-width: 500px; }";
$("<style type='text/css'>" + qtip_css + "</style>").appendTo("head");



// search the html elements with data-sc and build qtip2 on them
var data_sc_tag = function() {

  $('a[data-sc]').each(function() {

    var tip = tip_content(this);

    if (tip.hasError) {
      $(this).css("background-color","rgba(229, 20, 0, 0.9)");
    } else {
      $(this).css("background-color","rgba(140, 191, 38, 0.5)");
    }

    $(this).qtip({
      content: {
        title: function(api) {
          return (tip.sc || "");
        },
        text: function(api) {
          // this is a jquery selector, pass only 1st
          return (tip.content || "");
        }
      },
      position: {
          my: 'top left',
          target: 'mouse',
          viewport: $(window), // Keep it on-screen at all times if possible
          adjust: {
              x: 15,  y: 15
          }
      },
      hide: {
          fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
      },
      style: {
        classes: 'ui-tooltip-shadow ui-tooltip-bootstrap my-ui-tooltip largeWidth'
      }
    }); // qtip
  }); // a[data-sc]
}; // data_sc_tag


// load qtip and call data_sc_tag when ready
loadJS('http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.js', data_sc_tag);

// any click on the body refreshes the taging
if (typeof $(document).on == "function") {
  $(document).on('click.scDebug','body', data_sc_tag);
}




// sc_debug
// Generated by CoffeeScript 1.3.3
(function() {
  var get_sc_pix, src2obj;

  get_sc_pix = function() {
    var elem, result;
    result = [];
    if (typeof window === "undefined") {
      throw "only runs within a browser window";
    }
    for (elem in window) {
      if ((elem.substring(0, 9) === "s_i_skype") && window[elem].src) {
        result.push(window[elem].src);
      }
    }
    return result;
  };

  src2obj = function(src) {
    var elem, key, obj, value, _i, _len, _ref;
    obj = {};
    _ref = src.split('?')[1].split('&');
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      elem = _ref[_i];
      key = elem.split('=')[0];
      value = elem.split('=')[1];
      obj[key] = decodeURIComponent(value);
    }
    return obj;
  };

  window.s = window.s || {};

  window.s.get_sc_pix = get_sc_pix;

  window.s.src2obj = src2obj;

  window.s.debug = function(num) {
    return s.src2obj(s.get_sc_pix()[num]);
  };

}).call(this);


// Sidebar Page Tracking
var alert_page = function() {
  var pix = s.debug(0);
  
  var table = '<table id="#pix">';
  $.each(pix, function(k, v){
    table += '<tr><td><strong>' + k +'</strong></td><td>' + v +'</td></tr>';
  });
  table += '</table>';
  createGrowl("trackPage", table, false);
};

// assure loads first qtip, then loads jgrowl.js
loadJS('http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js', function(){
  loadJS('https://cdn.rawgit.com/al3xandr3/3736933/raw/jgrowl.js', alert_page);  
});


// update @Virgo 17 Jan 2013 - fix the data-sc detection
// update @Alexandre 22 April 2013 - improve colors on the Qtip
// update @Alexandre 26 April 2013 - Qtip hiccups: loads and toggle + new error