tupali/manup.js

//this is the object we build for an ajax call to get the content of the manifest
//it's a JSON, so we can parse it like a man-child
//verion 0.7
var manUpObject;



//data objects
var tagArray = [], linkArray = [];
var validMetaValues = [{ name: 'mobile-web-app-capable', manifestName: 'display' }, { name: 'apple-mobile-web-app-capable', manifestName: 'display' }, { name: 'apple-mobile-web-app-title', manifestName: 'short_name' }, { name: 'application-name', manifestName: 'short_name' }, { name: 'msapplication-TileColor', manifestName: 'ms_TileColor' }, { name: 'msapplication-square70x70logo', manifestName: 'icons', imageSize: '70x70' }, { name: 'msapplication-square150x150logo', manifestName: 'icons', imageSize: '150x150' },{ name: 'msapplication-wide310x150logo', manifestName: 'icons', imageSize: '310x150' },{ name: 'msapplication-square310x310logo', manifestName: 'icons', imageSize: '310x310' }];
var validLinkValues = [{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '152x152' },{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '120x120' },{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '76x76' },{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '60x60' },{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '57x57' }, { name: 'apple-touch-icon', manifestName: 'icons', imageSize: '72x72' }, { name: 'apple-touch-icon', manifestName: 'icons', imageSize: '114x114' }, { name: 'icon', manifestName: 'icons', imageSize: '128x128' }, { name: 'icon', manifestName: 'icons', imageSize: '192x192' }]


//these next two classes are building the mixed data, pulling out the values we need based on the valid values array
var generateFullMetaData = function(){
 for (var i = 0;i < validMetaValues.length;  i++) {
  if(manUpObject[validMetaValues[i].manifestName]){
      if(validMetaValues[i].manifestName == 'icons'){
          //here we need to loop through each of the images to see if they match
          var imageArray = manUpObject.icons;
          for (var j = 0;j < imageArray.length;  j++) {
              if(imageArray[j].sizes == validMetaValues[i].imageSize){
                //problem is in here, need to asign proper value
                validMetaValues[i].content = imageArray[j].src;
              }
          }
      }else{
          validMetaValues[i].content = manUpObject[validMetaValues[i].manifestName];
          if (validMetaValues[i].manifestName == 'display' && manUpObject.display == 'standalone') validMetaValues[i].content = 'yes'
         // console.log('stop')
      }
  } 
 };

 //console.log(validMetaValues)
 return validMetaValues
};

var generateFullLinkData = function () {
    for (var i = 0; i < validLinkValues.length; i++) {
        if (manUpObject[validLinkValues[i].manifestName]) {
            if (validLinkValues[i].manifestName == 'icons') {
                //here we need to loop through each of the images to see if they match
                var imageArray = manUpObject.icons;
                for (var j = 0; j < imageArray.length; j++) {
                    if (imageArray[j].sizes == validLinkValues[i].imageSize) {
                        //problem is in here, need to asign proper value
                        validLinkValues[i].content = imageArray[j].src;
                    }
                }

            } else {

                validLinkValues[i].content = manUpObject[validLinkValues[i].manifestName];
            }
        }
    };

    //console.log(validMetaValues)
    return validLinkValues
};


        //These are the 2 functions that build out the tags
        //TODO: make it loop once instead of tx
var generateMetaArray = function () {
    var tempMetaArray = generateFullMetaData();
    var headTarget = document.getElementsByTagName('head')[0]
    for (var i = 0; i < tempMetaArray.length; i++) {

        var metaTag = document.createElement('meta');
        metaTag.name = tempMetaArray[i].name;
        metaTag.content = tempMetaArray[i].content;
        headTarget.appendChild(metaTag);

    };

};

var generateLinkArray = function () {
    var tempLinkArray = generateFullLinkData();
    var headTarget = document.getElementsByTagName('head')[0]
    for (var i = 0; i < tempLinkArray.length; i++) {

        var linkTag = document.createElement('link');
        linkTag.setAttribute('rel', tempLinkArray[i].name);
        linkTag.setAttribute('sizes', tempLinkArray[i].imageSize);
        linkTag.setAttribute('href', tempLinkArray[i].content);
        headTarget.appendChild(linkTag);
        //console.log(linkTag);
    }
};
//these functions makes the ajax calls and assigns to manUp object
var generateObj = function (ajaxString) {
    //for testing
    //document.getElementById("output").innerHTML = ajaxString;
    //gen object
    manUpObject = JSON.parse(ajaxString);
    generateLinkArray();
    generateMetaArray();

};

var makeAjax = function (url) {
    if (!window.XMLHttpRequest) return;
    var fullURL;
    var pat = /^https?:\/\//i;
    pat.test(url)?fulURL = url:fullURL = window.location.hostname + url;
    var ajax = new XMLHttpRequest();   
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) generateObj(ajax.responseText)
    };
    ajax.open("GET", url, true);
    ajax.send();
};

var collectManifestObj = function () {
    var links = document.getElementsByTagName('link');
    for (var i = 0; i < links.length; i++) {
        if (links[i].rel && links[i].rel == 'manifest') makeAjax(links[i].href);
    }

};

var testForManifest = function () {
    //i'm not sure what to do here.  I am starchly against browser sniffing and there is no test (yet)
    //I think I'm jsut going to build out the tags on every page until there is a way to test it, so far
    //it looks like the manifest will override the tags
    //browser: we need context here
    collectManifestObj();

}();