Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Implemented a sample behavior for resolution switching in HD environm…

…ents based on user prefs
  • Loading branch information...
commit 6baa8aa6d0dce1cd0d9df3d922b6502e8d447928 1 parent 4af59f1
Scott Jehl authored
Showing with 59 additions and 14 deletions.
  1. +19 −3 index.html
  2. +40 −11 picturefill.js
View
22 index.html
@@ -7,8 +7,25 @@
<script src="external/matchmedia.js"></script>
<script src="picturefill.js"></script>
<style>
- body { font-family: sans-serif }
+ body { font-family: sans-serif; max-width: 375px; margin: 50px auto; }
img { max-width: 100% }
+ div[data-picture] {
+ position: relative;
+ display: inline-block;
+ }
+ .pf-pref {
+ position: absolute;
+ right: 1em;
+ bottom: 1em;
+ background: #fff;
+ opacity: .9;
+ padding: .1em .3em;
+ border: 1px solid #aaa;
+ color: #444;
+ font-size: .8em;
+ text-decoration: none;
+ border-radius: .4em;
+ }
</style>
</head>
<body>
@@ -20,8 +37,7 @@
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="external/imgs/small.jpg"></div>
<div data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></div>
- <div data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></div>
- <div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></div>
+ <div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 400px) and (-webkit-min-device-pixel-ratio: 1)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
View
51 picturefill.js
@@ -1,47 +1,76 @@
/*! Picturefill - Author: Scott Jehl, 2012 | License: MIT/GPLv2 */
/*
- Picturefill: A polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
- * Notes:
- * For active discussion of the picture element, see http://www.w3.org/community/respimg/
- * While this code does work, it is intended to be used only for example purposes until either:
- A) A W3C Candidate Recommendation for <picture> is released
- B) A major browser implements <picture>
+ Picturefill: user preference switcher extension for HD
*/
(function( w ){
// Enable strict mode
"use strict";
+
+ // User preference for HD content when available
+ var prefHD = false;
w.picturefill = function() {
var ps = w.document.getElementsByTagName( "div" );
+ //prefHDLoc = prefHD;// || w.localStorage && w.localStorage[ "img-pref-hd" ];
// Loop the pictures
for( var i = 0, il = ps.length; i < il; i++ ){
if( ps[ i ].getAttribute( "data-picture" ) !== null ){
var sources = ps[ i ].getElementsByTagName( "div" ),
- matches = [];
+ matches = [],
+ hasHD = false;
// See if which sources match
for( var j = 0, jl = sources.length; j < jl; j++ ){
var media = sources[ j ].getAttribute( "data-media" );
// if there's no media specified, OR w.matchMedia is supported
if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
- matches.push( sources[ j ] );
+ if( media && media.indexOf( "min-device-pixel-ratio" ) > -1 ){
+ hasHD = true;
+ if( prefHD ){
+ matches.push( sources[ j ] );
+ }
+ }
+ else {
+ matches.push( sources[ j ] );
+ }
}
}
var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
if( matches.length ){
-
+
if( !picImg ){
picImg = w.document.createElement( "img" );
picImg.alt = ps[ i ].getAttribute( "data-alt" );
ps[ i ].appendChild( picImg );
}
-
- picImg.src = matches.pop().getAttribute( "data-src" );
+ picImg.src = matches.pop().getAttribute( "data-src" );
+
+ if( hasHD ){
+
+ var prevSwitch = ps[ i ].getElementsByTagName( "a" )[ 0 ],
+ picSwitch = w.document.createElement( "a" );
+
+ if( prevSwitch ){
+ ps [ i ].removeChild( prevSwitch );
+ }
+
+ picSwitch.href = "#";
+ picSwitch.innerHTML = ( prefHD ? "S" : "H" ) + "D";
+ picSwitch.title = "Switch image to " + ( prefHD ? "Standard" : "High" ) + "Definition";
+ picSwitch.className = "pf-pref pf-pref-" + ( prefHD ? "standard" : "high" );
+ ps[ i ].appendChild( picSwitch );
+ picSwitch.onmouseup = function(){
+ prefHD = !prefHD;
+ w.picturefill();
+ return false;
+ };
+ }
+
}
else if( picImg ){
ps[ i ].removeChild( picImg );
Please sign in to comment.
Something went wrong with that request. Please try again.