tupali/manup.js
2017-10-30 14:27:04 -05:00

134 lines
5.8 KiB
JavaScript

//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();
}();