Skip to content

Commit

Permalink
extracted javascript into single files
Browse files Browse the repository at this point in the history 
added modernizr
  • Loading branch information
@ausi
ausi committed Sep 22, 2011
1 parent 24addbc commit 616f9ba
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 48 deletions.
14 changes: 14 additions & 0 deletions README.md
View file
@@ -0,0 +1,14 @@
Modernizr plugin feature detection for css property "pointer-events"
====================================================================

How to use
----------

<script>
if(Modernizr.pointerevents){
alert('pointer events are supported :)');
}
else{
alert('pointer events are NOT supported!');
}
</script>
15 changes: 15 additions & 0 deletions modernizr-pointerevents.js
View file
@@ -0,0 +1,15 @@
Modernizr.addTest('pointerevents', function(){
var element = document.createElement('script'),
supports;
if(!('pointerEvents' in element.style)){
return false;
}
element.style.pointerEvents = 'auto';
element.style.pointerEvents = 'x';
document.documentElement.appendChild(element);
supports = document.defaultView &&
document.defaultView.getComputedStyle &&
document.defaultView.getComputedStyle(element, '').getPropertyValue('pointer-events') === 'auto';
document.documentElement.removeChild(element);
return supports;
});
1 change: 1 addition & 0 deletions modernizr-pointerevents.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

145 changes: 97 additions & 48 deletions test.html
View file
@@ -1,54 +1,103 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
<script src="./modernizr-pointerevents.js"></script>
<title>Feature detection technique for pointer-events</title>
<style type="text/css">
html{
text-align:center;
font-family:Georgia, serif;
font-size:20px;
background: #700;
color: #ccc;
text-shadow: 0px 2px 3px rgba(0,0,0,0.4);
}
html.pointerevents{
background: #060;
}
h1{
font-family:Trebuchet, 'Trebuchet MS', Arial, Verdana, serif;
font-size:45px;
margin:70px 0;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
ul{
margin:40px 0;
padding:0;
line-height:2em;
}
.no-pointerevents ul li{
background: #060;
border:3px solid #ddd;
}
ul li.noSupport{
background:#900;
border:0;
}
#testWrap{
width:210px;
height:210px;
position:relative;
display:inline-block;
overflow:hidden;
box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
#testWrap a{
border:5px solid #666;
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
text-align:center;
line-height:200px;
background:#eee;
overflow:hidden;
}
#testWrap:hover a{
background:#060;
color:#fff;
}
#testWrap:hover a:before{
content:"supported :)";
display:block;
}
#testWrap a:hover, #testWrap:hover a:hover{
background:#700;
color:#fff;
}
#testWrap a:hover:before, #testWrap:hover a:hover:before{
content:"unsupported!!";
display:block;
}
#testWrap a#testLink1{
z-index:1;
}
#testWrap a#testLink2{
z-index:2;
pointer-events:none;
}
</style>
</head>
<body>
<script>
window.supportsCssPointerEvents = (function(){
var getStyle = function(element, cssProperty){
if(document.defaultView && document.defaultView.getComputedStyle){
return document.defaultView.getComputedStyle(element, "").getPropertyValue(cssProperty);
}
if(element.currentStyle){
return element.currentStyle[cssProperty.replace(/\-(\w)/g, function(match, p1){
return p1.toUpperCase();
})];
}
return "";
};
var element = document.createElement('a');
if(!('pointerEvents' in element.style)){
return false;
}
element.style.pointerEvents = 'auto';
element.style.pointerEvents = 'no supported value';
document.body.appendChild(element);
var supports = getStyle(element, 'pointer-events') === 'auto';
document.body.removeChild(element);
return supports;
})();
document.write('<h1>Your Browser '+(supportsCssPointerEvents ? 'supports' : 'does not support')+' the CSS property "pointer-events"</h1>');
document.write('<li>'+('pointerEvents' in document.documentElement.style ? 'supports' : 'does not support') + ' "pointer-events" as style attribute'+'</li>');
document.write('<li>'+(supportsCssPointerEvents ? 'supports' : 'does not support') + ' "pointer-events" completely'+'</li>');
var output = '';
output += '<h1>Your Browser '+(Modernizr.pointerevents ? 'supports' : 'does not support')+' the CSS property "pointer-events"</h1><ul>';
output += '<li'+('pointerEvents' in document.documentElement.style ? '>supports' : ' class="noSupport">does not support') + ' "pointer-events" as style attribute (maybe only for SVG)'+'</li>';
output += '<li'+(Modernizr.pointerevents ? '>supports' : ' class="noSupport">does not support') + ' "pointer-events" completely'+'</li></ul>';
var element = document.createElement('div');
element.innerHTML = output;
document.body.appendChild(element);
</script>

<style type="text/css">
#testWrap{
width:200px;
height:200px;
border:5px solid #000;
position:relative;
}
#testWrap a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
line-height:200px;
background:#fff;
}
</style>

<div id="testWrap">
<a id="testLink1" href="#" onclick="alert('Your Browser supports pointer-events!');return false;">click here</a>
<a id="testLink2" href="#" onclick="alert('Your Browser does not support pointer-events!');return false;">click here</a>
<a id="testLink1" href="#" onclick="alert('Your Browser supports pointer-events!');return false;">test it!</a>
<a id="testLink2" href="#" onclick="alert('Your Browser does not support pointer-events!');return false;">test it!</a>
</div>
</body>
</html>

0 comments on commit 616f9ba

Please sign in to comment.