(function(){
/*-------------
using getElementById instead of querySelector in some cases
so that don't have to retrieve the object once for old
browsers, and once for new.
-------------*/
var unsupported = document.getElementById('unsupported'),
overlay = document.getElementById('overlay'),
showcss = document.getElementById('showcss'),
main = document.getElementById('main'),
borderobj = main.lastElementChild,
panels = document.querySelectorAll('form > fieldset > legend'),
close = document.querySelectorAll('.close'),
oncloseclick;
oncloseclick = function(e){
e.preventDefault();
// hides either the unsupported or get the css panel.
e.currentTarget.parentNode.className = 'hide';
// hides the overlay.
e.currentTarget.parentNode.parentNode.className = 'hide';
document.body.className = '';
};
Lib.addHandlers({nodelist:close, event:'click', func:oncloseclick});
if( Lib.hasBorderRadius === false ){
overlay.className = 'show';
unsupported.className = 'show';
} else {
var hasRange,
form,
getcode,
range,
fixranges,
n,
bgimg,
fgimg,
fimg,
div,
unit = 'px';
var onsubmithandler,
onresethandler,
onrangechange,
onborderchange,
onborderwidthchange,
onpanelclick;
form = document.querySelector('form');
getcode = form.querySelector('button#getcode');
brdrstyle = document.querySelectorAll('#setborderstyle select');
range = document.querySelectorAll('#basic input[type=range]');
brdrwidth = document.querySelectorAll('#setborderwidth input[type=range]');
div = document.querySelector('#main div');
bgimg = form['bgimg'];
fgimg = form['fgimg'];
img = Lib.makeImage('images/kananaskis.jpg');
vid = Lib.makeVideo('raindropsinapool');
onrangechange = function(e){
var prop, u = unit, thisedge, otheredge, labels;
var linktl, linktr, linkbl, linkbr;
thisedge = e.target.value + u;
linktl = document.querySelector('#linktopleft').checked;
linktr = document.querySelector('#linktopright').checked;
linkbl = document.querySelector('#linkbottomleft').checked;
linkbr = document.querySelector('#linkbottomright').checked;
labels = {'topleftA':'tl',
'topleftB':'tl',
'toprightA':'tr',
'toprightB':'tr',
'bottomrightA':'br',
'bottomrightB':'br',
'bottomleftA':'bl',
'bottomleftB':'bl'};
switch( e.target.id ){
case 'topleftA':
prop = 'borderTopLeftRadius';
otheredge = ( linktl ) ? range[0].value : range[1].value;
range[1].value = ( linktl ) ? range[0].value : range[1].value;
break;
case 'topleftB':
prop = 'borderTopLeftRadius';
otheredge = ( linktl ) ? range[1].value : range[0].value;
range[0].value = ( linktl ) ? range[1].value : range[0].value;
break;
case 'toprightA':
prop = 'borderTopRightRadius';
otheredge = ( linktr ) ? range[2].value : range[3].value;
range[3].value = ( linktr ) ? range[2].value : range[3].value;
break;
case 'toprightB':
prop = 'borderTopRightRadius';
otheredge = ( linktr ) ? range[3].value : range[2].value;
range[2].value = ( linktr ) ? range[3].value : range[2].value;
break;
case 'bottomrightA':
prop = 'borderBottomRightRadius';
otheredge = ( linkbr ) ? range[4].value : range[5].value;
range[5].value = ( linkbr ) ? range[4].value : range[5].value;
break;
case 'bottomrightB':
prop = 'borderBottomRightRadius';
otheredge = ( linkbr ) ? range[5].value : range[4].value;
range[4].value = ( linkbr ) ? range[5].value : range[4].value;
break;
case 'bottomleftA':
prop = 'borderBottomLeftRadius';
otheredge = ( linkbl ) ? range[6].value : range[7].value;
range[7].value = ( linkbl ) ? range[6].value : range[7].value;
break;
case 'bottomleftB':
prop = 'borderBottomLeftRadius';
otheredge = ( linkbl ) ? range[7].value : range[6].value;
range[6].value = ( linkbl ) ? range[7].value : range[6].value;
break;
}
borderobj.style[prop] = thisedge + ' '+otheredge + u;
document.querySelector( '#'+labels[e.target.id] ).innerHTML = borderobj.style[prop];
Lib.enableButton('getcode');
Lib.enableButton('resetform');
};
onborderchange = function(e){
var whichborder;
switch( e.target.id ){
case 'brdrtop':
whichborder = 'borderTopStyle';
document.querySelector('#brdrwidthtop').value = (document.querySelector('#brdrwidthtop').value > 0) ? document.querySelector('#brdrwidthtop').value : 1;
break;
case 'brdrright':
whichborder = 'borderRightStyle';
document.querySelector('#brdrwidthright').value = (document.querySelector('#brdrwidthright').value > 0) ? document.querySelector('#brdrwidthright').value : 1;
break;
case 'brdrbottom':
whichborder = 'borderBottomStyle';
document.querySelector('#brdrwidthbottom').value = (document.querySelector('#brdrwidthbottom').value > 0) ? document.querySelector('#brdrwidthbottom').value : 1;
break;
case 'brdrleft':
whichborder = 'borderLeftStyle';
document.querySelector('#brdrwidthleft').value = (document.querySelector('#brdrwidthleft').value > 0) ? document.querySelector('#brdrwidthleft').value : 1;
break;
}
borderobj.style[whichborder] = e.target.value;
Lib.enableButton('getcode');
Lib.enableButton('resetform');
};
onborderwidthchange = function(e){
var whichborder, whichstyle, u = unit, evt;
switch( e.target.id ){
case 'brdrwidthtop':
whichborder = 'borderTopWidth';
whichstyle = 'brdrtop';
break;
case 'brdrwidthright':
whichborder = 'borderRightWidth';
whichstyle = 'brdrright';
break;
case 'brdrwidthbottom':
whichborder = 'borderBottomWidth';
whichstyle = 'brdrbottom';
break;
case 'brdrwidthleft':
whichborder = 'borderLeftWidth';
whichstyle = 'brdrleft';
break;
}
/* change the border style to solid so we can see the width change. */
if( form[whichstyle].value === '' ){
form[whichstyle].value = 'solid';
/* dispatch a change event to trigger the change */
evt = document.createEvent('Event');
evt.initEvent('change',false,false);
document.getElementById(whichstyle).dispatchEvent(evt);
}
borderobj.style[whichborder] = e.target.value + u;
Lib.enableButton('getcode');
Lib.enableButton('resetform');
};
onbgchange = function(e){
if( e.target.value === ''){
borderobj.className = '';
} else {
borderobj.className = 'patt'+e.target.value;
}
Lib.enableButton('getcode');
Lib.enableButton('resetform');
};
onfgchange = function(e){
var curchild = main.lastElementChild, selects = document.querySelectorAll('select');
var whichtype = e.currentTarget.value;
switch( whichtype ){
case 'div':
borderobj = div;
break;
case 'video':
borderobj = vid;
vid.play();
break;
case 'img':
borderobj = img;
break;
}
borderobj.id = curchild.id;
main.replaceChild(borderobj, curchild);
/* Reset the form. */
form.setAttribute('class','formonly');
form.reset();
/*******
Set fgimg value to current type of object
so the field stays the same.
********/
form[whichtype].checked = true;
/* Remove any classes from the border object */
borderobj.className = '';
/* Reset styles on all of these objects */
img.style.cssText = '';
vid.style.cssText = '';
div.style.cssText = '';
};
onsubmithandler = function(e){
e.preventDefault();
var x,
num,
extractCSS,
getThese,
output,
pre,
styles;
pre = document.querySelector('pre');
styles = Lib.getStyles( borderobj );
output = '';
extractCSS = function( arrayOfStyles, styleObj){
var i, val, out, len = arrayOfStyles.length, css = [];
for( var i = 0; i < len; i++){
val = styleObj.getPropertyValue(arrayOfStyles[i]);
if( (val != '0px') && (val != 'none') ){
css.push( arrayOfStyles[i]+': '+ val +';' );
}
}
if( css.length > 0 ){
css.push(''); /* pad the array by 1 for formatting reasons */
out = css.join('\n'); /* turn array into a string */
} else {
out = '';
}
return out;
};
getThese = [
['background-image','border-top-right-radius','border-bottom-right-radius','border-bottom-left-radius','border-top-left-radius'],
['border-top-style','border-right-style','border-bottom-style','border-left-style'],
['border-top-width','border-right-width','border-bottom-width','border-left-width']
];
num = getThese.length;
for(x=0; x < num; x++){
output += extractCSS( getThese[x], styles );
}
if( output === ''){
output = 'No styles to output.';
}
pre.innerHTML = output;
overlay.className = showcss.className = 'show';
};
onpanelclick = function(e){
e.stopPropagation();
var transition = Lib.transitionEvent();
var a = 'active';
var act = new RegExp(a,'g');
var parent = e.currentTarget.parentNode;
var panel = parent.querySelector('div');
if(Lib.hasClassList){
parent.classList.toggle(a);
} else {
if( parent.className.match(act) ){
parent.className = parent.className.replace(act,'');
} else {
parent.className += ' '+a;
}
}
};
onresethandler = function(e){
var i, hasclass, curchild, corners = document.querySelectorAll('.crnrsz'), clen = corners.length;
/*
If form has a class of 'formonly', the event came from onfgchange,
and we only want to change the form values.
Otherwise we also want to reset the borderobj.
*/
Lib.hasClassList ? (hasclass = form.classList.contains('formonly') ) : (hasclass = form.className.indexOf('formonly') !== -1);
if( !hasclass ){
/* Get the current last child */
curchild = main.lastElementChild;
div.id = curchild.id;
borderobj = div;
/* Remove any classes from the object */
borderobj.setAttribute('class','');
/* Swap a <div> with the lastElementChild */
main.replaceChild(borderobj, curchild);
/* Reset styles and class on all of these objects */
img.style.cssText = vid.style.cssText = div.style.cssText = '';
}
/* Reset the corners so that they all say 0px */
for(i = 0; i < clen; i++){
corners[i].innerHTML = '0px';
}
/* Disable buttons again since we have reset. */
Lib.disableButton('getcode');
Lib.disableButton('resetform');
/* Remove any classes from the form */
form.setAttribute('class','');
};
/* Adjust UI for browsers without a range UI */
Lib.adjustUI();
/*----------------------
Add event handlers
----------------------*/
Lib.addHandlers({nodelist:range, event:'change', func:onrangechange});
Lib.addHandlers({nodelist:brdrstyle, event:'change', func:onborderchange});
Lib.addHandlers({nodelist:brdrwidth, event:'change', func:onborderwidthchange});
Lib.addHandlers({nodelist:panels, event:'click', func:onpanelclick});
Lib.addHandlers({nodelist:bgimg, event:'click', func:onbgchange});
Lib.addHandlers({nodelist:fgimg, event:'click', func:onfgchange});
form.addEventListener('submit',onsubmithandler,false);
form.addEventListener('reset',onresethandler,false);
/* Add 'android' class to the body if it looks like this is Android. */
if( Lib.mightBeAndroid() ){
document.body.className += ' norangeui';
}
}
})();
<head>
<title>Border Radius Fun — Shiny Demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maiden+Orange">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Gudea:400,700">
<link rel="stylesheet" href="styles/s.css" media="screen">
<link rel="stylesheet" href="styles/middlescreen.css" media="screen and (min-width: 20em)">
<link rel="stylesheet" href="styles/bigscreen.css" media="screen and (min-width: 30em)">
<link rel="stylesheet" href="/styles/panel.css">
</head>
<body id="cssbr">
<header><h1 id="demoname">Border Radius Fun</h1></header>
<section id="main">
<p>
<b id="tl" class="crnrsz">0px</b>
</p>
<p>
<b id="tr" class="crnrsz">0px</b>
</p>
<p>
<b id="bl" class="crnrsz">0px</b>
</p>
<p>
<b id="br" class="crnrsz">0px</b>
</p>
<div id="changeobj"></div>
</section>
<section id="wrap">
<form id="borderoptions">
<fieldset id="basic" class="active">
<legend>Basic options <img src="images/triangle.png" alt="Click this label open or close these controls" width="10" height="10"></legend>
<div>
<fieldset id="foreground" class="hidefromsmall">
<legend>Add a border to a(n):</legend>
<p><input type="radio" id="div" value="div" name="fgimg"> <label for="div"><code>div</code> element</label></p>
<p><input type="radio" id="img" value="img" name="fgimg"> <label for="img"><code>img</code> element</label></p>
<p><input type="radio" id="video" value="video" name="fgimg"> <label for="video"><code>video</code> element</label></p>
</fieldset>
<!-- top left controls -->
<fieldset id="topleft" class="crnr">
<legend>border-top-left-radius</legend>
<p>
<label for="topleftA" class="radius">top-top left</label>
<input type="range" id="topleftA" name="topleftA" min="0" max="300" value="0">
</p>
<p>
<label for="topleftB" class="radius">left-top left</label>
<input type="range" id="topleftB" name="topleftB" min="0" max="300" value="0">
</p>
<p class="samevalues">
<label for="linktopleft" class="checkbox">Link values</label>
<input type="checkbox" id="linktopleft" name="linktopleft" checked>
</p>
</fieldset>
<!-- top right controls -->
<fieldset id="topright" class="crnr">
<legend>border-top-right-radius</legend>
<p>
<label for="toprightA" class="radius">top-top right</label>
<input type="range" id="toprightA" name="toprightA" min="0" max="300" value="0">
</p>
<p>
<label for="toprightB" class="radius">right-top right</label>
<input type="range" id="toprightB" name="toprightB" min="0" max="300" value="0">
</p>
<p class="samevalues">
<label for="linktopright" class="checkbox">Link values</label>
<input type="checkbox" id="linktopright" name="linktopright" checked>
</p>
</fieldset>
<!-- bottom right controls -->
<fieldset id="bottomright" class="crnr">
<legend>border-bottom-right-radius</legend>
<p>
<label for="bottomrightA" class="radius">bottom-bottom right</label>
<input type="range" id="bottomrightA" name="bottomrightA" min="0" max="300" value="0">
</p>
<p>
<label for="bottomrightB" class="radius">right-bottom right</label>
<input type="range" id="bottomrightB" name="bottomrightB" min="0" max="300" value="0">
</p>
<p class="samevalues">
<label for="linkbottomright" class="checkbox">Link values</label>
<input type="checkbox" id="linkbottomright" name="linkbottomright" checked>
</p>
</fieldset>
<!-- bottom Left controls -->
<fieldset id="bottomleft" class="crnr">
<legend>border-bottom-left-radius</legend>
<p>
<label for="bottomleftA" class="radius">bottom-bottom left</label>
<input type="range" id="bottomleftA" name="bottomleftA" min="0" max="300" value="0">
</p>
<p>
<label for="bottomleftB" class="radius">left-bottom left</label>
<input type="range" id="bottomleftB" name="bottomleftB" min="0" max="300" value="0">
</p>
<p class="samevalues">
<label for="linkbottomleft" class="checkbox">Link values</label>
<input type="checkbox" id="linkbottomleft" name="linkbottomleft" checked>
</p>
</fieldset>
</div>
</fieldset> <!-- end basic -->
<fieldset id="advanced" class="active">
<legend>Oh you fancy, huh? <img src="images/triangle.png" alt="Click this label open or close these controls" width="10" height="10"></legend>
<div>
<fieldset id="setborderstyle">
<legend>border-style</legend>
<p>
<label for="brdrtop">top</label>
<select id="brdrtop" name="brdrtop">
<option value="">none</option>
<option value="dashed">dashed</option>
<option value="double">double</option>
<option value="dotted">dotted</option>
<option value="groove">groove</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
<option value="solid">solid</option>
<option value="ridge">ridge</option>
</select>
</p>
<p>
<label for="brdrright">right</label>
<select id="brdrright" name="brdrright">
<option value="">none</option>
<option value="dashed">dashed</option>
<option value="double">double</option>
<option value="dotted">dotted</option>
<option value="groove">groove</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
<option value="solid">solid</option>
<option value="ridge">ridge</option>
</select>
</p>
<p>
<label for="brdrbottom">bottom</label>
<select id="brdrbottom" name="brdrbottom">
<option value="">none</option>
<option value="dashed">dashed</option>
<option value="double">double</option>
<option value="dotted">dotted</option>
<option value="groove">groove</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
<option value="solid">solid</option>
<option value="ridge">ridge</option>
</select>
</p>
<p>
<label for="brdrleft">left</label>
<select id="brdrleft" name="brdrleft">
<option value="">none</option>
<option value="dashed">dashed</option>
<option value="double">double</option>
<option value="dotted">dotted</option>
<option value="groove">groove</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
<option value="solid">solid</option>
<option value="ridge">ridge</option>
</select>
</p>
</fieldset>
<fieldset id="setborderwidth">
<legend>border-width</legend>
<p>
<label for="brdrwidthtop" class="radius">top</label>
<input type="range" id="brdrwidthtop" name="brdrwidthtop" min="0" max="50" value="0">
</p>
<p>
<label for="brdrwidthright" class="radius">right</label>
<input type="range" id="brdrwidthright" name="brdrwidthright" min="0" max="80" value="0">
</p>
<p>
<label for="brdrwidthbottom" class="radius">bottom</label>
<input type="range" id="brdrwidthbottom" name="brdrwidthbottom" min="0" max="50" value="0">
</p>
<p>
<label for="brdrwidthleft" class="radius">left</label>
<input type="range" id="brdrwidthleft" name="brdrwidthleft" min="0" max="80" value="0">
</p>
</fieldset>
<fieldset id="setbgimg" class="hidefromsmall">
<legend>background-image</legend>
<p><input type="radio" name="bgimg" id="diamonds" value="002"><label for="diamonds"><span class="sample patt002"></span>Diamonds</label></p>
<p><input type="radio" name="bgimg" id="zigzag" value="141"><label for="zigzag"><span class="sample patt141"></span>Zig Zag</label></p>
<p><input type="radio" name="bgimg" id="nordic" value="157"><label for="nordic"><span class="sample patt157"></span>Nordic</label></p>
<p class="clear credit">Background patterns by <a href="http://www.squidfingers.com/patterns/" target="_blank">Squidfingers</a></p>
</fieldset>
</div>
</fieldset>
<div id="buttons">
<p><button type="submit" id="getcode" disabled>Get the code</button>
<button type="reset" id="resetform" disabled>Reset</button></p>
</div>
</form>
</section><!-- end wrap -->
<section id="overlay" class="hide">
<section id="showcss" class="hide">
<a class="close">close</a>
<h2>Copy and paste the CSS below into your file</h2>
<pre></pre>
</section>
<section id="unsupported" class="hide">
<a class="close">close</a>
<h2>Get a better browser!</h2>
<p>Your browser doesn't support the CSS3 <a href="http://www.w3.org/TR/css3-background/"><code>border-radius</code> property</a>, so this page will be useless to you.</p>
<p>Please download and install the latest version of <a href="http://www.opera.com/download/">Opera</a>.<br>(The latest versions of <a href="http://www.google.com/chrome/">Chrome</a>, <a href="http://getfirefox.com/">Firefox</a>, <a href="http://www.apple.com/safari/">Safari</a> or <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer</a> will also work.) </p>
</section>
</section>
<script src="/scripts/modernizr.js"></script>
<script src="/scripts/panel.js"></script>
<script src="scripts/options.js"></script>
<script src="scripts/lib.js"></script>
<script src="scripts/js.js"></script>
.hidefromsmall{
display:block;
}
#getcode{display:inline;}
form #advanced p{
float:left;
width: 24%;
}
#setborderstyle p:nth-child(4){
width: 25%;
white-space:nowrap;
border-right: 15px solid rgba(0,0,0,0);
}
form #basic p{
float:left;
width: 32%;
}
form #advanced p{
width: 24%;
}
form #advanced #setbgimg p.credit{
width:100%;
}
form #advanced #setbgimg p{
width: 32%;
}
form #basic p:nth-child(2),
form #basic p:nth-child(3){
border-left: 1% solid rgba(0,0,0,.7);
}
fieldset fieldset{
width: auto;
}
#main{
width: 17em;
}
#main > video, #main > img, #main > div{
width: 15em;
height: 15em;
}
#overlay{
position:fixed;
z-index:9999;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
top:0;
left:0;
margin:0;
}
#overlay section{
display:none;
background: #fff;
margin: 100px auto;
padding: 20px 20px 30px;
position: relative;
width: 80%;
border-radius:5px;
box-shadow: 0 0 100px rgba(0,0,0,.5);
}
#overlay pre{
background-color: #fff;
padding: 5px;
margin:0
}
#overlay h2{
font: normal 1.5em / 1 'Maiden Orange', serif;
font-size:36px;
margin:0 1em .2em 0;
margin:0 1rem .5rem 0;
}
#overlay.show, #overlay section.show{
display: block;
}
pre{
border:1px inset #333;
margin:1em;
padding:1em;
margin:1rem;
padding:1rem;
}