{status}
', // feature status (W3C Recommendation) {status} 43 | TMPL_DESCRIPTION = 'Supported from the following versions:
', // description to user 44 | TMPL_DESKTOP_TITLE = '* denotes prefix required.
', 49 | TMPL_LEGEND = 'Stats from caniuse.com
', 51 | TMPL_LOADING = 'Feature "{feature}" not found!
'; 53 | 54 | /* END CONFIGURATION =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ 55 | 56 | var canIUseData, // store data for multiple uses. 57 | storeElementId, // temp storage for elementId if we need to JSONP request 58 | populateOnLoad; // temp storage for if we should populate 59 | 60 | 61 | 62 | // get feature data based on feature name 63 | function getFeature(featureName) { 64 | featureName = featureName.toLowerCase(); 65 | if (canIUseData.query) { 66 | return canIUseData.query.results.json.data[featureName]; 67 | } else if (canIUseData.data) { 68 | return canIUseData.data[featureName]; 69 | } else { 70 | return null; 71 | } 72 | } 73 | 74 | // get the full text description for the support status 75 | function getSupportStatus(key) { 76 | var status = { 77 | "y": "Yes", 78 | "x": "With Prefix", 79 | "n": "No", 80 | "a": "Partial Support", 81 | "p": "Polyfill", 82 | "u": "Unknown" 83 | }; 84 | 85 | return status[key]; 86 | } 87 | 88 | // get the specification status 89 | function getSpecStatus(key) { 90 | var status = { 91 | "rec": "W3C Recommendation", 92 | "pr": "W3C Proposed Recommendation", 93 | "cr": "W3C Candidate Recommendation", 94 | "wd": "W3C Working Draft", 95 | "other": "Non-W3C, but Reputable", 96 | "unoff": "Unofficial or W3C 'Note'" 97 | }; 98 | 99 | return status[key] || "Unknown"; 100 | } 101 | 102 | // find the first version that had this status 103 | function find(needle, haystack) { 104 | 105 | var result = { 106 | "version": -1, 107 | "prefixed": false 108 | }, 109 | compare = -1; 110 | 111 | for (var item in haystack) { 112 | if (haystack.hasOwnProperty(item) && haystack[item].indexOf(needle) > -1) { 113 | // some browser versions are formatted n-n, take the first number for comparison 114 | compare = parseFloat(item.split('-')[0]); 115 | // is this version lower than the current version we have stored? 116 | if (result.version === -1 || result.version > compare) { 117 | result.version = compare; 118 | result.prefixed = (haystack[item].indexOf('x') > -1); 119 | } 120 | } 121 | } 122 | return result; 123 | } 124 | 125 | function findSupport(browserData) { 126 | var status = ['y', 'a', 'p'], 127 | result = {}; 128 | // find what support is available for this browser 129 | for (var i = 0; i < status.length; i++) { 130 | result = find(status[i], browserData); 131 | if (result.version !== -1) { 132 | return { 133 | 'result': status[i], // what type of support 134 | 'prefixed': result.prefixed, 135 | 'version': (result.version !== '0') ? result.version : '0' // the version with that support 136 | }; 137 | } 138 | } 139 | return { 140 | 'result': 'n', 141 | 'prefixed': false, 142 | 'version': 'No' 143 | }; 144 | } 145 | 146 | /* put the data in a more platable format */ 147 | function generateResults(feature) { 148 | var agents = {}, 149 | results = {}, 150 | currentBrowser = '', 151 | support = {}; 152 | 153 | agents = canIUseData.agents || canIUseData.query.results.json.agents; 154 | 155 | results.title = feature.title; // feature name 156 | results.code = feature; // feature code? 157 | results.status = getSpecStatus(feature.status); // feature specification status 158 | results.agents = []; 159 | 160 | for (var i = 0, l = BROWSERS.length; i < l; i++) { 161 | 162 | currentBrowser = BROWSERS[i]; 163 | 164 | if (agents[currentBrowser]) { 165 | 166 | support = findSupport(feature.stats[BROWSERS[i]]); 167 | 168 | results.agents.push({ 169 | "browsercode": currentBrowser, 170 | "prefixed": support.prefixed, 171 | "supportcode": support.result, 172 | "support": getSupportStatus(support.result), 173 | "title": agents[currentBrowser].browser, 174 | "type": agents[currentBrowser].type.toLowerCase(), 175 | "version": support.version 176 | }); 177 | } 178 | } 179 | 180 | return results; 181 | } 182 | 183 | 184 | function generateHtml(results) { 185 | 186 | var html = '', 187 | resultHtml = '', 188 | desktopHtml = '', 189 | mobileHtml = '', 190 | prefixes = false, 191 | result = {}, 192 | i = 0, 193 | l = 0; 194 | 195 | resultHtml = TMPL_TITLE.replace('{title}', results.title); 196 | resultHtml += TMPL_STATUS.replace('{status}', results.status); 197 | resultHtml += TMPL_DESCRIPTION; 198 | 199 | for (i = 0, l = results.agents.length; i < l; i++) { 200 | result = results.agents[i]; // simply things 201 | 202 | // we need to show that prefix notice, captain 203 | if (result.prefixed) { 204 | prefixes = true; 205 | } 206 | 207 | html = TMPL_SUPPORT.replace(/\{browsercode\}/g, result.browsercode) 208 | .replace(/\{prefixed\}/g, (result.prefixed === true) ? '*' : '') 209 | .replace(/\{supportcode\}/g, result.supportcode) 210 | .replace(/\{support\}/g, result.support) 211 | .replace(/\{browser\}/g, result.title) 212 | .replace(/\{version\}/g, result.version); 213 | 214 | if (result.type === 'desktop') { 215 | desktopHtml += html; 216 | } else if (result.type === 'mobile') { 217 | mobileHtml += html; 218 | } 219 | } 220 | 221 | // only show if we are including desktop browsers 222 | if (desktopHtml !== '') { 223 | resultHtml += TMPL_DESKTOP_TITLE; 224 | resultHtml += TMPL_SUPPORT_WRAPPER.replace(/\{items\}/g, desktopHtml); 225 | } 226 | 227 | // only show if we are including mobile browsers 228 | if (mobileHtml !== '') { 229 | resultHtml += TMPL_MOBILE_TITLE; 230 | resultHtml += TMPL_SUPPORT_WRAPPER.replace(/\{items\}/g, mobileHtml); 231 | } 232 | 233 | if (prefixes) { 234 | resultHtml += TMPL_PREFIX_NOTE; 235 | } 236 | 237 | resultHtml += TMPL_LEGEND; 238 | resultHtml += TMPL_FOOTER.replace(/\{feature\}/g, results.featureCode); 239 | return resultHtml; 240 | } 241 | 242 | function generate(elementId) { 243 | var $canIUse = [], 244 | $instance, 245 | featureCode = '', 246 | feature = {}, 247 | result = {}, 248 | i = 0, 249 | l = 0; 250 | 251 | if (typeof elementId === "undefined") { 252 | $canIUse = document.querySelectorAll('.caniuse'); 253 | } else { 254 | $canIUse.push(document.getElementById(elementId)); 255 | } 256 | 257 | l = $canIUse.length; 258 | 259 | for (i = 0; i < l; i++) { 260 | $instance = $canIUse[i]; 261 | featureCode = $instance.getAttribute('data-feature') || 'unknown'; 262 | feature = getFeature(featureCode); 263 | if (feature) { 264 | result = generateResults(feature); 265 | result.featureCode = featureCode; 266 | $instance.innerHTML = generateHtml(result); 267 | } else { 268 | $instance.innerHTML = TMPL_ERROR.replace(/\{feature\}/g, featureCode); 269 | } 270 | } 271 | } 272 | 273 | function showLoading(elementId) { 274 | var $canIUse = [], 275 | $instance, 276 | i = 0, 277 | l = 0; 278 | 279 | if (typeof elementId === "undefined") { 280 | $canIUse = document.querySelectorAll('.caniuse'); 281 | } else { 282 | $canIUse.push(document.getElementById(elementId)); 283 | } 284 | 285 | l = $canIUse.length; 286 | 287 | for (i = 0; i < l; i++) { 288 | $instance = $canIUse[i]; 289 | $instance.innerHTML = TMPL_LOADING; 290 | } 291 | } 292 | 293 | /* 294 | * Load the data that will be used to display information. 295 | */ 296 | function loadData(elementId, populate) { 297 | var url = '', 298 | script = document.createElement('SCRIPT'); 299 | 300 | url = 'http://query.yahooapis.com/v1/public/yql?q=' + 301 | 'select * from json where url = \'' + SOURCE_DATA_URL + '\'' + 302 | '&format=json&jsonCompat=new&callback=canIUseDataLoaded'; 303 | 304 | // remember these for when our JSONP returns 305 | storeElementId = elementId; 306 | populateOnLoad = populate; 307 | 308 | script.src = url; 309 | document.body.appendChild(script); 310 | } 311 | 312 | function populate(elementId) { 313 | if (typeof canIUseData === 'undefined') { 314 | showLoading(elementId); 315 | loadData(elementId, true); 316 | } else { 317 | generate(elementId); 318 | } 319 | } 320 | 321 | /* 322 | * Public Methods 323 | */ 324 | return { 325 | render: populate, 326 | dataLoaded: function (data) { 327 | canIUseData = data; 328 | if (populateOnLoad) { 329 | generate(storeElementId); 330 | } 331 | }, 332 | init: (function () { 333 | if (AUTO_RUN) { 334 | populate(); 335 | } else if (BE_READY) { 336 | loadData(undefined, false); 337 | } 338 | })() 339 | }; 340 | }()); 341 | 342 | function canIUseDataLoaded(data) { 343 | canIUse.dataLoaded(data); 344 | } -------------------------------------------------------------------------------- /js/caniuse.min.js: -------------------------------------------------------------------------------- 1 | // author: andi smith 2 | // website: www.andismith.com 3 | // version: 0.1 4 | 5 | function canIUseDataLoaded(e){canIUse.dataLoaded(e)}var canIUse=function(){function b(e){e=e.toLowerCase();if(m.query){return m.query.results.json.data[e]}else if(m.data){return m.data[e]}else{return null}}function w(e){var t={y:"Yes",x:"With Prefix",n:"No",a:"Partial Support",p:"Polyfill",u:"Unknown"};return t[e]}function E(e){var t={rec:"W3C Recommendation",pr:"W3C Proposed Recommendation",cr:"W3C Candidate Recommendation",wd:"W3C Working Draft",other:"Non-W3C, but Reputable",unoff:"Unofficial or W3C 'Note'"};return t[e]||"Unknown"}function S(e,t){var n={version:-1,prefixed:false},r=-1;for(var i in t){if(t.hasOwnProperty(i)&&t[i].indexOf(e)>-1){r=parseFloat(i.split("-")[0]);if(n.version===-1||n.version>r){n.version=r;n.prefixed=t[i].indexOf("x")>-1}}}return n}function x(e){var t=["y","a","p"],n={};for(var r=0;r