Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

User prefs diff to explore #50

Closed
wants to merge 10 commits into from

3 participants

@scottjehl
Owner

No description provided.

scottjehl and others added some commits
scottjehl null commit - update ghpages, update!
794dbb0
scottjehl This branch is a div-based equivalent of the picture element markup p…
…attern. It can be used today without concern for running into problems with differences in future picture implementations. That said, it will always be tied to JavaScript, and the markup is a little clunky to those with an eye for semantics.
1bb548a
scottjehl oh alerts? oldskoo. gone
a548592
scottjehl following up with the same fix for the div branch, addressing #11
4af59f1
Scott Jehl Implemented a sample behavior for resolution switching in HD environm…
…ents based on user prefs
6baa8aa
Scott Jehl persist prefs in localStorage if possible
86a1ab8
Scott Jehl styles
c984e30
Scott Jehl updates, merges from master
35d2902
Scott Jehl updated markup
95ee9ad
@Wilto Wilto Throttling the resize event prevents small-screen browsers from trigg…
…ering multiple resize events as high-res images are loaded in.
25db27b
@scottjehl

Nice change. Could this line just be w.setTimeout( w.picturefill, 150 ); ?

@staabm staabm commented on the diff
picturefill.js
((39 lines not shown))
}
}
+
+ var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+ if( matches.length ){
+
+ if( !picImg ){
+ picImg = w.document.createElement( "img" );
+ picImg.alt = ps[ i ].getAttribute( "data-alt" );
@staabm
staabm added a note

Couldn't it take the alt description from the image inside the noscript tag, so we don't need tp define the alt text twice?

@staabm
staabm added a note

@scottjehl just curious.. why do you define the ALT twice?

@scottjehl Owner

I believe it was a result of cross-browser difficulty in easily accessing that fallback image and its alt.

@staabm
staabm added a note

are you open for a PR regarding this?

@scottjehl Owner

Hmm. Not sure, I'd take a look, but it seems an alt on the picture element itself is a good place for it moving forward, whereas the fallback image is meant to be an uninvolved fallback (whether it's an image, text, or whatever makes sense)

@scottjehl Owner

Just interested in reducing the repetition there?

@staabm
staabm added a note

yes, just because of the repetition. the image needs the alt tag for semantic and seo reasons. and the data-picture could re-use it (just in case there is no data-alt defined).

@scottjehl Owner
@Wilto Collaborator
Wilto added a note

This change would match up a little closer with the picture spec, too. I talked it over with a bunch of A11y Task Force folks a while back, and they think it’s best that the fallback content serves as the a11y content.

See all eight chapters of: http://lists.w3.org/Archives/Public/public-html/2012Sep/0029.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@scottjehl
Owner

I'm going to keep this as a branch.

@scottjehl scottjehl closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 22, 2012
  1. null commit - update ghpages, update!

    scottjehl authored
Commits on Mar 26, 2012
  1. This branch is a div-based equivalent of the picture element markup p…

    scottjehl authored
    …attern. It can be used today without concern for running into problems with differences in future picture implementations. That said, it will always be tied to JavaScript, and the markup is a little clunky to those with an eye for semantics.
  2. oh alerts? oldskoo. gone

    scottjehl authored
Commits on Apr 23, 2012
Commits on Jun 16, 2012
  1. Implemented a sample behavior for resolution switching in HD environm…

    Scott Jehl authored
    …ents based on user prefs
  2. persist prefs in localStorage if possible

    Scott Jehl authored
Commits on Jun 20, 2012
  1. styles

    Scott Jehl authored
  2. updates, merges from master

    Scott Jehl authored
  3. updated markup

    Scott Jehl authored
Commits on Jun 23, 2012
  1. @Wilto

    Throttling the resize event prevents small-screen browsers from trigg…

    Wilto authored
    …ering multiple resize events as high-res images are loaded in.
This page is out of date. Refresh to see the latest.
Showing with 81 additions and 24 deletions.
  1. +20 −4 index.html
  2. +61 −20 picturefill.js
View
24 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: .8;
+ padding: .1em .3em;
+ color: #444;
+ font-size: .7em;
+ text-decoration: none;
+ border-radius: .2em;
+ font-weight: bold;
+ }
</style>
</head>
<body>
@@ -19,9 +36,8 @@
<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/medium.jpg" data-media="(min-width: 300px)"></div>
+ <div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 300px) and (-webkit-min-device-pixel-ratio: 1.5)"></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
81 picturefill.js
@@ -1,51 +1,92 @@
/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with divs). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
-
(function( w ){
// Enable strict mode
"use strict";
+
+ // User preference for HD content when available
+ var prefHD = false || w.localStorage && w.localStorage[ "picturefill-prefHD" ] === "true";
w.picturefill = function() {
var ps = w.document.getElementsByTagName( "div" );
-
+
// 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" );
@staabm
staabm added a note

Couldn't it take the alt description from the image inside the noscript tag, so we don't need tp define the alt text twice?

@staabm
staabm added a note

@scottjehl just curious.. why do you define the ALT twice?

@scottjehl Owner

I believe it was a result of cross-browser difficulty in easily accessing that fallback image and its alt.

@staabm
staabm added a note

are you open for a PR regarding this?

@scottjehl Owner

Hmm. Not sure, I'd take a look, but it seems an alt on the picture element itself is a good place for it moving forward, whereas the fallback image is meant to be an uninvolved fallback (whether it's an image, text, or whatever makes sense)

@scottjehl Owner

Just interested in reducing the repetition there?

@staabm
staabm added a note

yes, just because of the repetition. the image needs the alt tag for semantic and seo reasons. and the data-picture could re-use it (just in case there is no data-alt defined).

@scottjehl Owner
@Wilto Collaborator
Wilto added a note

This change would match up a little closer with the picture spec, too. I talked it over with a bunch of A11y Task Force folks a while back, and they think it’s best that the fallback content serves as the a11y content.

See all eight chapters of: http://lists.w3.org/Archives/Public/public-html/2012Sep/0029.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ ps[ i ].appendChild( picImg );
+ }
+ picImg.src = matches.pop().getAttribute( "data-src" );
- // Find any existing img element in the picture element
- 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 );
+ 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;
+ if( w.localStorage ){
+ w.localStorage[ "picturefill-prefHD" ] = prefHD;
+ }
+ w.picturefill();
+ return false;
+ };
+ }
+
+ }
+ else if( picImg ){
+ ps[ i ].removeChild( picImg );
}
-
- picImg.src = matches.pop().getAttribute( "data-src" );
- }
- else if( picImg ){
- ps[ i ].removeChild( picImg );
}
}
- }
};
// Run on resize and domready (w.load as a fallback)
if( w.addEventListener ){
- w.addEventListener( "resize", w.picturefill, false );
+ var throttle;
+ w.addEventListener( "resize", function() {
+ if( throttle ) { w.clearTimeout( throttle ); }
+ throttle = w.setTimeout(function () {
+ w.picturefill();
+ }, 150 );
+ }, false );
w.addEventListener( "DOMContentLoaded", function(){
w.picturefill();
// Run once only
@@ -57,4 +98,4 @@
w.attachEvent( "onload", w.picturefill );
}
-}( this ));
+}( this ));
Something went wrong with that request. Please try again.