Permalink
Browse files

move the scripts into /js/mylibs. wire things back up.

  • Loading branch information...
1 parent d38d7df commit 9ebfb4c19df67fb4359c02b250fa6107aad8e442 @paulirish committed Oct 24, 2010
View
@@ -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;}
+
View
@@ -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>
@@ -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-->
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes.
Oops, something went wrong.

0 comments on commit 9ebfb4c

Please sign in to comment.