Update retina.js

index.html

@@ -15,7 +15,8 @@
         <hr>
         <ul class="media-list">
           <li class="media" ng-repeat="r in rc.research" ng-show="r.is_visible()">
-            <img class="pull-left" class="media-object" src="{{ r.level > 0 ? r.image : 'assets/unknown.png' }}" alt="">
+            <img ng-show="r.level > 0" class="pull-left" class="media-object" src="{{ r.image }}" alt="">
+            <img ng-hide="r.level > 0" class="pull-left" class="media-object" src="assets/unknown.png" alt="">
             <div class="media-body">
               <h4 class="media-heading">{{ r.level > 0 ? r.name : '?????' }} <span ng-show="r.level > 0" class="badge">Level {{ r.level }}</span></h4>
               <p ng-show="r.level > 0">{{ r.description }} Researching it will give you {{ r.reputation }} reputation.</p>
@@ -146,7 +147,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
     <script src="//d3js.org/d3.v3.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-    <script src="js/external/retina.min.js"></script>
+    <script src="js/external/retina.js"></script>
 
     <script src="js/event.js"></script>
     <script src="js/detector.js"></script>

js/external/retina.js

@@ -0,0 +1,196 @@
+/*!
+ * Retina.js v1.3.0
+ *
+ * Copyright 2014 Imulus, LLC
+ * Released under the MIT license
+ *
+ * Retina.js is an open source script that makes it easy to serve
+ * high-resolution images to devices with retina displays.
+ */
+
+(function() {
+    var root = (typeof exports === 'undefined' ? window : exports);
+    var config = {
+        // An option to choose a suffix for 2x images
+        retinaImageSuffix : '@2x',
+
+        // Ensure Content-Type is an image before trying to load @2x image
+        // https://github.com/imulus/retinajs/pull/45)
+        check_mime_type: true,
+
+        // Resize high-resolution images to original image's pixel dimensions
+        // https://github.com/imulus/retinajs/issues/8
+        force_original_dimensions: true
+    };
+
+    function Retina() {}
+
+    root.Retina = Retina;
+
+    Retina.configure = function(options) {
+        if (options === null) {
+            options = {};
+        }
+
+        for (var prop in options) {
+            if (options.hasOwnProperty(prop)) {
+                config[prop] = options[prop];
+            }
+        }
+    };
+
+    Retina.init = function(context) {
+        if (context === null) {
+            context = root;
+        }
+
+        var existing_onload = context.onload || function(){};
+
+        context.onload = function() {
+            var images = document.getElementsByTagName('img'), retinaImages = [], i, image;
+            for (i = 0; i < images.length; i += 1) {
+                image = images[i];
+                if (!!!image.getAttributeNode('data-no-retina')) {
+                    image.setAttribute('data-at2x-loaded', true);
+                    retinaImages.push(new RetinaImage(image));
+                }
+            }
+            existing_onload();
+        };
+    };
+
+    Retina.recheck = function() {
+        var images = document.getElementsByTagName('img'), retinaImages = [], i, image;
+        for (i = 0; i < images.length; i += 1) {
+            image = images[i];
+            if (!!!image.getAttributeNode('data-no-retina')) {
+                if (!!!image.getAttributeNode('data-at2x-loaded')) {
+                    image.setAttribute('data-at2x-loaded', true);
+                    retinaImages.push(new RetinaImage(image));
+                }
+            }
+        }
+    };
+
+    Retina.isRetina = function(){
+        var mediaQuery = '(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)';
+
+        if (root.devicePixelRatio > 1) {
+            return true;
+        }
+
+        if (root.matchMedia && root.matchMedia(mediaQuery).matches) {
+            return true;
+        }
+
+        return false;
+    };
+
+
+    var regexMatch = /\.\w+$/;
+    function suffixReplace (match) {
+        return config.retinaImageSuffix + match;
+    }
+
+    function RetinaImagePath(path, at_2x_path) {
+        this.path = path || '';
+        if (typeof at_2x_path !== 'undefined' && at_2x_path !== null) {
+            this.at_2x_path = at_2x_path;
+            this.perform_check = false;
+        } else {
+            if (undefined !== document.createElement) {
+                var locationObject = document.createElement('a');
+                locationObject.href = this.path;
+                locationObject.pathname = locationObject.pathname.replace(regexMatch, suffixReplace);
+                this.at_2x_path = locationObject.href;
+            } else {
+                var parts = this.path.split('?');
+                parts[0] = parts[0].replace(regexMatch, suffixReplace);
+                this.at_2x_path = parts.join('?');
+            }
+            this.perform_check = true;
+        }
+    }
+
+    root.RetinaImagePath = RetinaImagePath;
+
+    RetinaImagePath.confirmed_paths = [];
+
+    RetinaImagePath.prototype.is_external = function() {
+        return !!(this.path.match(/^https?\:/i) && !this.path.match('//' + document.domain) );
+    };
+
+    RetinaImagePath.prototype.check_2x_variant = function(callback) {
+        var http, that = this;
+        if (this.is_external()) {
+            return callback(false);
+        } else if (!this.perform_check && typeof this.at_2x_path !== 'undefined' && this.at_2x_path !== null) {
+            return callback(true);
+        } else if (this.at_2x_path in RetinaImagePath.confirmed_paths) {
+            return callback(true);
+        } else {
+            http = new XMLHttpRequest();
+            http.open('HEAD', this.at_2x_path);
+            http.onreadystatechange = function() {
+                if (http.readyState !== 4) {
+                    return callback(false);
+                }
+
+                if (http.status >= 200 && http.status <= 399) {
+                    if (config.check_mime_type) {
+                        var type = http.getResponseHeader('Content-Type');
+                        if (type === null || !type.match(/^image/i)) {
+                            return callback(false);
+                        }
+                    }
+
+                    RetinaImagePath.confirmed_paths.push(that.at_2x_path);
+                    return callback(true);
+                } else {
+                    return callback(false);
+                }
+            };
+            http.send();
+        }
+    };
+
+
+    function RetinaImage(el) {
+        this.el = el;
+        this.path = new RetinaImagePath(this.el.getAttribute('src'), this.el.getAttribute('data-at2x'));
+        var that = this;
+        this.path.check_2x_variant(function(hasVariant) {
+            if (hasVariant) {
+                that.swap();
+            }
+        });
+    }
+
+    root.RetinaImage = RetinaImage;
+
+    RetinaImage.prototype.swap = function(path) {
+        if (typeof path === 'undefined') {
+            path = this.path.at_2x_path;
+        }
+
+        var that = this;
+        function load() {
+            if (! that.el.complete) {
+                setTimeout(load, 5);
+            } else {
+                if (config.force_original_dimensions) {
+                    that.el.setAttribute('width', that.el.width);
+                    that.el.setAttribute('height', that.el.height);
+                }
+
+                that.el.setAttribute('src', path);
+            }
+        }
+        load();
+    };
+
+
+    if (Retina.isRetina()) {
+        Retina.init(root);
+    }
+})();

js/external/retina.min.js

@@ -1,10 +0,0 @@
-/*!
- * Retina.js v1.3.0
- *
- * Copyright 2014 Imulus, LLC
- * Released under the MIT license
- *
- * Retina.js is an open source script that makes it easy to serve
- * high-resolution images to devices with retina displays.
- */
-!function(){function a(){}function b(a){return f.retinaImageSuffix+a}function c(a,c){if(this.path=a||"","undefined"!=typeof c&&null!==c)this.at_2x_path=c,this.perform_check=!1;else{if(void 0!==document.createElement){var d=document.createElement("a");d.href=this.path,d.pathname=d.pathname.replace(g,b),this.at_2x_path=d.href}else{var e=this.path.split("?");e[0]=e[0].replace(g,b),this.at_2x_path=e.join("?")}this.perform_check=!0}}function d(a){this.el=a,this.path=new c(this.el.getAttribute("src"),this.el.getAttribute("data-at2x"));var b=this;this.path.check_2x_variant(function(a){a&&b.swap()})}var e="undefined"==typeof exports?window:exports,f={retinaImageSuffix:"@2x",check_mime_type:!0,force_original_dimensions:!0};e.Retina=a,a.configure=function(a){null===a&&(a={});for(var b in a)a.hasOwnProperty(b)&&(f[b]=a[b])},a.init=function(a){null===a&&(a=e);var b=a.onload||function(){};a.onload=function(){var a,c,e=document.getElementsByTagName("img"),f=[];for(a=0;a<e.length;a+=1)c=e[a],c.getAttributeNode("data-no-retina")||f.push(new d(c));b()}},a.isRetina=function(){var a="(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";return e.devicePixelRatio>1?!0:e.matchMedia&&e.matchMedia(a).matches?!0:!1};var g=/\.\w+$/;e.RetinaImagePath=c,c.confirmed_paths=[],c.prototype.is_external=function(){return!(!this.path.match(/^https?\:/i)||this.path.match("//"+document.domain))},c.prototype.check_2x_variant=function(a){var b,d=this;return this.is_external()?a(!1):this.perform_check||"undefined"==typeof this.at_2x_path||null===this.at_2x_path?this.at_2x_path in c.confirmed_paths?a(!0):(b=new XMLHttpRequest,b.open("HEAD",this.at_2x_path),b.onreadystatechange=function(){if(4!==b.readyState)return a(!1);if(b.status>=200&&b.status<=399){if(f.check_mime_type){var e=b.getResponseHeader("Content-Type");if(null===e||!e.match(/^image/i))return a(!1)}return c.confirmed_paths.push(d.at_2x_path),a(!0)}return a(!1)},b.send(),void 0):a(!0)},e.RetinaImage=d,d.prototype.swap=function(a){function b(){c.el.complete?(f.force_original_dimensions&&(c.el.setAttribute("width",c.el.width),c.el.setAttribute("height",c.el.height)),c.el.setAttribute("src",a)):setTimeout(b,5)}"undefined"==typeof a&&(a=this.path.at_2x_path);var c=this;b()},a.isRetina()&&a.init(e)}();