Skip to content

Commit

Permalink
move the scripts into /js/mylibs. wire things back up.
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulirish
paulirish committed Oct 24, 2010
1 parent d38d7df commit 9ebfb4c
Show file tree
Hide file tree
Showing 15 changed files with 258 additions and 269 deletions.
44 changes: 43 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,11 +221,53 @@ button { width: auto; overflow: visible; }


/* Primary Styles
Author:
Author: MEEEEEEE
*/



@font-face {
font-family: 'ballterminals';
src: url('WOODENNI-webfont.eot');
src: local('SMILEYFACE'), url('WOODENNI-webfont.woff') format('woff'), url('WOODENNI-webfont.ttf') format('truetype'), url('WOODENNI-webfont.svg#webfontfwuwarlQ') format('svg');
font-weight: normal;
font-style: normal;
}




body { background: #999; text-align: center; font-family: 'Cooper', 'Cooper Black', 'Cooper Std', 'ballterminals'; background-image: -webkit-gradient(radial, 50% 0, 800, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.5) )); }
body{ height: 600px; width: 99%;}
h1 { margin: 200px auto 0; max-width: 900px; font-size: 90px; color: fuchsia; text-align: center; }
fieldset { border: 0; margin: 0; padding: 0; width: 400px; height: 170px; position: absolute; left: 50%; top: 0px; margin-left: -200px;}
/* */
input[type='range'], .fd-slider { position: absolute !important; left: 50%; top: 80px; width: 100px;
/* */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
/* */
}
input[type='range']:nth-child(2), #fd-slider-lenSW { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
input[type='range']:nth-child(3), #fd-slider-lenNW { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); }
input[type='range']:nth-child(4), #fd-slider-lenNE { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
/* */
input[type='color'], input.color { font-size: 1em; width: 10em; font-family: 'Cooper Std'; position: absolute; left: 0%; top: 40%;}

label { position: absolute; right: 50px; top: 40%; color: #666; }
button { position: absolute; right: 50px; top: 60%; ; }

body .fd-slider-inner { background: none!important; border: 0!important;}

textarea { font-family: Inconsolata, 'Lucida Console', Courier, monospace; font-size: 18px; position: absolute; left: 50%; width: 500px; margin-left: -250px; top: 470px; height: 125px; background: rgba(0,0,0,.7); color: white;}




Expand Down
272 changes: 20 additions & 252 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,53 +59,9 @@



@font-face {
font-family: 'ballterminals';
src: url('WOODENNI-webfont.eot');
src: local('SMILEYFACE'), url('WOODENNI-webfont.woff') format('woff'), url('WOODENNI-webfont.ttf') format('truetype'), url('WOODENNI-webfont.svg#webfontfwuwarlQ') format('svg');
font-weight: normal;
font-style: normal;
}




body { background: #999; text-align: center; font-family: 'Cooper', 'Cooper Black', 'Cooper Std', 'ballterminals'; background-image: -webkit-gradient(radial, 50% 0, 800, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.5) )); }
body{ height: 600px; width: 99%;}
h1 { margin: 200px auto 0; max-width: 900px; font-size: 90px; color: fuchsia; text-align: center; }
fieldset { border: 0; margin: 0; padding: 0; width: 400px; height: 170px; position: absolute; left: 50%; top: 0px; margin-left: -200px;}
/* */
input[type='range'], .fd-slider { position: absolute !important; left: 50%; top: 80px; width: 100px;
/* */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
/* */
}
input[type='range']:nth-child(2), #fd-slider-lenSW { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
input[type='range']:nth-child(3), #fd-slider-lenNW { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); }
input[type='range']:nth-child(4), #fd-slider-lenNE { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
/* */
input[type='color'], input.color { font-size: 1em; width: 10em; font-family: 'Cooper Std'; position: absolute; left: 0%; top: 40%;}

label { position: absolute; right: 50px; top: 40%; color: #666; }
button { position: absolute; right: 50px; top: 60%; ; }

body .fd-slider-inner { background: none!important; border: 0!important;}

textarea { font-family: Inconsolata, 'Lucida Console', Courier, monospace; font-size: 18px; position: absolute; left: 50%; width: 500px; margin-left: -250px; top: 470px; height: 125px; background: rgba(0,0,0,.7); color: white;}


</style>

<script src="html5widgets/js/modernizr.com/modernizr-1.5.min.js"></script>

<body>

<fieldset>
Expand All @@ -124,233 +80,45 @@ <h1 contenteditable>MOTHER EFFING TEXT-SHADOW</h1>

<script>

var h1 = document.querySelector('h1');


// tell unsupporting browsers to FUCK OFF
if (!'textShadow' in document.body.style){
document.querySelector('fieldset').style.display = 'none';
document.querySelector('textarea').style.display = 'none';
h1.style.marginTop = 0;
h1.innerHTML = 'Your browser doesn\'t support text-shadow. <small style="font-size: 20px">It was even in CSS2.0!</small> Just terrible...';
}


// possible values 1 or -1
var offset = {
x : 1,
y : 1
}

var color = '#ffffff';

var length = 11;
var string = '';

var wackyMode = false;

var directionMap = {
SE : { x: 1 , y: 1 },
SW : { x: -1, y: 1 },
NW : { x: -1, y: -1},
NE : { x: 1 , y: -1}
};

var direction = 'SE';


[].forEach.call( document.querySelectorAll('input[type="range"]') , function(elem, i){

elem.addEventListener('change',function(e){

// reset so we dont do multiple directions
if (!wackyMode){
[].forEach.call( document.querySelectorAll('input[type="range"]') , function(slider, i){
if (slider == elem) return;
slider.value = 0;
});
}

direction = elem.id.replace('len','');

length = e.target.value;

doIt();

},false);

});


// color
function changeColor(e){
color = e.target.value;
doIt();
};

var elColor = document.querySelector('input[type="color"]');
elColor.addEventListener('blur', changeColor, false);
elColor.addEventListener('focus', changeColor, false);

document.querySelector('input[type="checkbox"]').addEventListener('change', function(e){
wackyMode = e.target.checked;
}, false);

document.querySelector('button').addEventListener('click', function f(e){
f.on = !f.on;
e.target.innerHTML = f.on ? 'what does it mean?' : 'all the way';
RAINBOWZ(f.on);
}, false);

function doIt(){

h1.style.textShadow = '';
string = '';

offset = directionMap[direction];

var sliders = document.querySelectorAll('input[type="range"]');

if (wackyMode){
for (var j = 0; j < sliders.length; j++){

offset = directionMap[sliders[j].id.replace('len','')];
var value = sliders[j].value;

for (var i = -1; ++i < value; ){
string += color + ' ' + (i+1) * offset.x + 'px ' + (i+1) * offset.y + 'px,';
}
}
} else {
for (var i = -1; ++i < length; ){
string += color + ' ' + (i+1) * offset.x + 'px ' + (i+1) * offset.y + 'px,';
}
}


string = string.slice(0,string.length-1);

setShadow(string);
}

doIt();


function setShadow(string){
h1.style.textShadow = string;

document.querySelector('textarea').value = 'text-shadow: ' + string + ';';

}


/**
* Converts an RGB color value to HSL. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
* Assumes r, g, and b are contained in the set [0, 255] and
* returns h, s, and l in the set [0, 1].
*
* @param Number r The red color value
* @param Number g The green color value
* @param Number b The blue color value
* @return Array The HSL representation
*/
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;

if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}

h = Math.round( h * 360);
s = Math.round( s * 100);
l = Math.round( l * 100);

return 'hsl(' + h + ',' + s + '%,' + l + '%)'; //[h, s, l]
}

function hex2hsl(hex){
hex = hex.replace('#','');
var rgb = parseInt(hex, 16); // value is 1675421

var red = (rgb >> 16) & 0xFF; // returns 255
var green = (rgb >> 8) & 0xFF; // 170
var blue = rgb & 0xFF; // 221

return rgbToHsl(red,green,blue);
}


var RAINBOWZ = function(bool) {

if (!bool) {
doIt();
return;
}

var maxCount = 400;
shadows = '-1px -1px hsl(0,100%,50%)';

for ( var i = 1; i < maxCount; i++ ) {
var normI = i / maxCount,
hue = normI * 360 * 6,
x = parseInt( Math.sin( normI * Math.PI * 2 * 2 ) * 60 );

shadows += ', ' + x + 'px ' + i + 'px hsl(' + hue + ', 100%, 50%)'
}

setShadow(shadows)
};










</script>


<!-- Color Element -->
<script src="html5widgets/js/jscolor/jscolor.js"></script>

<!-- Javascript at the bottom for fast page loading -->

<!-- Range Element -->
<link rel="stylesheet" href="html5widgets/css/slider.css">
<!--[if lte IE 6]>
<link rel="stylesheet" href="html5widgets/css/slider_ie.css">
<![endif]-->
<script src="html5widgets/js/frequency-decoder.com/slider.js"></script>

<script src="html5widgets/js/EventHelpers.js"></script>
<script src="html5widgets/js/html5Widgets.js"></script>




<!-- Javascript at the bottom for fast page loading -->


<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>


<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>

<script src="js/plugins.js"></script>

<!-- Color Element -->
<script src="js/mylibs/jscolor/jscolor.js"></script>


<script src="js/mylibs/frequency-decoder.com/slider.js"></script>

<script src="js/mylibs/EventHelpers.js"></script>
<script src="js/mylibs/html5Widgets.js"></script>





<script src="js/script.js"></script>

<!-- end concatenated and minified scripts-->


Expand Down
0 html5widgets/js/EventHelpers.js → js/mylibs/EventHelpers.js
View file
File renamed without changes.
0 ...idgets/js/frequency-decoder.com/slider.js → js/mylibs/frequency-decoder.com/slider.js
View file
File renamed without changes.
0 html5widgets/js/html5.js → js/mylibs/html5.js
View file
File renamed without changes.
0 html5widgets/js/html5Widgets.js → js/mylibs/html5Widgets.js
View file
File renamed without changes.
0 html5widgets/js/jscolor/arrow.gif → js/mylibs/jscolor/arrow.gif
View file
File renamed without changes
0 html5widgets/js/jscolor/cross.gif → js/mylibs/jscolor/cross.gif
View file
File renamed without changes
0 html5widgets/js/jscolor/demo.html → js/mylibs/jscolor/demo.html
View file
File renamed without changes.
0 html5widgets/js/jscolor/hs.png → js/mylibs/jscolor/hs.png
View file
File renamed without changes
0 html5widgets/js/jscolor/hv.png → js/mylibs/jscolor/hv.png
View file
File renamed without changes
0 html5widgets/js/jscolor/jscolor.js → js/mylibs/jscolor/jscolor.js
View file
File renamed without changes.
0 ...ets/js/modernizr.com/modernizr-1.5.min.js → js/mylibs/modernizr.com/modernizr-1.5.min.js
View file
File renamed without changes.
Loading

0 comments on commit 9ebfb4c

Please sign in to comment.