Adding fb2 and fb1

ryleyb · Mar 25, 2009 · ad2ce4f · ad2ce4f
1 parent b50c29e
commit ad2ce4f
Show file tree

Hide file tree

Showing 12 changed files with 1,400 additions and 0 deletions.
diff --git a/branches/farbtastic-1/CHANGELOG.html b/branches/farbtastic-1/CHANGELOG.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><title>Farbtastic: Changelog</title></head>
+<body>
+  <h1 class="title">Farbtastic: Changelog</h1>
+
+    <h2>1.3 - 2009/xx/xx</h2>
+    <ul>
+      <li>Updated style to use anonymous function wrapper per http://docs.jquery.com/Plugins/Authoring#Custom_Alias.</li>
+      <li>Now it uses the .offset() method available as of jQuery 1.2.x.</li>
+      <li>Works with JavaScript aggregators and compressors.</li>
+    </ul>
+    <h2>1.2 - 2007/01/08</h2>
+    <ul>
+      <li>Fixed bug with linking multiple fields with the same value.</li>
+    </ul>
+    <h2>1.1 - 2006/10/27</h2>
+    <ul>
+      <li>Work around for the transparent PNGs in Internet Explorer.</li>
+      <li>Better mouse handling code to accomodate CSS-based layouts better.</li>
+    </ul>
+    <h2>1.0 - 2006/07/14</h2>
+    <ul>
+      <li>Initial release.</li>
+    </ul>
+
+    <p>More info on <a href="http://www.acko.net/dev/farbtastic">Acko.net</a>.</p>
+    <p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>
+
+</body>
+</html>
diff --git a/branches/farbtastic-1/LICENSE.txt b/branches/farbtastic-1/LICENSE.txt
diff --git a/branches/farbtastic-1/README.html b/branches/farbtastic-1/README.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><title>Farbtastic: jQuery color picker plug-in</title></head>
+<body>
+        <h1 class="title">Farbtastic: jQuery color picker plug-in</h1>
+    <div class="content"><p>Farbtastic is a <a href="http://www.jquery.com/">jQuery</a> plug-in that can add one or more color picker widgets into a page. Each widget is then linked to an existing element (e.g. a text field) and will update the element's value when a color is selected.</p>
+
+<p>Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash or pixel-sized divs are used.</p>
+
+<p>Farbtastic was written by <a href="http://www.acko.net/dev/farbtastic">Steven Wittens</a> and is licensed under the GPL.</p>
+
+<h2>Basic Usage</h2>
+<ol>
+<li>Include farbtastic.js and farbtastic.css in your HTML:<br />
+<div class="codeblock"><code>&lt;script type=&quot;text/javascript&quot; src=&quot;farbtastic.js&quot;&gt;&lt;/script&gt;<br />&lt;link rel=&quot;stylesheet&quot; href=&quot;farbtastic.css&quot; type=&quot;text/css&quot; /&gt;</code></div>
+</li>
+<li>Add a placeholder div and a text field to your HTML, and give each an ID:<br />
+<div class="codeblock"><code>&lt;form&gt;&lt;input type=&quot;text&quot; id=&quot;color&quot; name=&quot;color&quot; value=&quot;#123456&quot; /&gt;&lt;/form&gt;<br />&lt;div id=&quot;colorpicker&quot;&gt;&lt;/div&gt;</code></div>
+</li>
+<li>Add a ready() handler to the document which initializes the color picker and link it to the text field with the following syntax:<br />
+<div class="codeblock"><code>&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp; $(document).ready(function() {<br />&nbsp; &nbsp; $(&#039;#colorpicker&#039;).farbtastic(&#039;#color&#039;);<br />&nbsp; });<br />&lt;/script&gt;</code></div>
+</li>
+</ol>
+<p>See demo1.html and demo2.html for an example (jquery.js is not included!).</p>
+<h2>Styling</h2>
+<p>The color picker is a block-level element and is 195x195 pixels large. You can control the position by styling your placeholder (e.g. floating it).</p>
+<p>Note that the black/white gradients inside wheel.png and mask.png were generated programmatically and cannot be recreated easily in an image editing program.</p>
+<h2>Advanced Usage</h2>
+<h3>jQuery Method</h3>
+<dl>
+<dt>$(...).farbtastic()<br />
+$(...).farbtastic(callback)</dt>
+<dd>This creates color pickers in the selected objects. <code>callback</code> is optional and can be a:</p>
+<ul>
+<li><em>DOM Node</em>, <em>jQuery object</em> or <em>jQuery selector</em>: the color picker will be linked to the selected element(s) by syncing the value (for form elements) and color (all elements).</li>
+<li><em>Function</em>: this function will be called whenever the user chooses a different color.</dd>
+</dl>
+<h3>Object</h3>
+<dl>
+<dt>$.farbtastic(placeholder)<br />
+$.farbtastic(placeholder, callback)<br />
+</dt>
+<dd>Invoking <code>$.farbtastic(placeholder)</code> is the same as using <code>$(placeholder).farbtastic()</code> except that the Farbtastic object is returned instead of the jQuery object. This allows you to use the Farbtastic methods and properties below.</p>
+<p>Note that there is only one Farbtastic object per placeholder. If you call <code>$.farbtastic(placeholder)</code> twice <em>with the same placeholder</em>, you will get the same object back each time.</p>
+<p>The optional <code>callback</code> argument behaves exactly as for the jQuery method.<br />
+</dd>
+</dl>
+</dd>
+</dl>
+<h3>Methods</h3>
+<dl>
+<dt>.linkTo(callback)</dt>
+<dd>Allows you to set a new callback. Any existing callbacks are removed. See above for the meaning of <code>callback</code>.</dd>
+<dt>.setColor(string)</dt>
+<dd>Sets the picker color to the given color in hex representation.</dd>
+<dt>.setColor([h, s, l])</dt>
+<dd>Sets the picker color to the given color in normalized HSL (0..1 scale).</dd>
+</dl>
+<h3>Properties</h3>
+<dl>
+<dt>.linked</dt>
+<dd>The elements (jQuery object) or callback function this picker is linked to.</dd>
+<dt>.color</dt>
+<dd>Current color in hex representation.</dd>
+<dt>.hsl</dt>
+<dd>Current color in normalized HSL.</dd>
+</dl>
+</div>
+</body>
+</html>
diff --git a/branches/farbtastic-1/demo1.html b/branches/farbtastic-1/demo1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+ <title>Farbtastic</title>
+ <script type="text/javascript" src="jquery.js"></script>
+ <script type="text/javascript" src="farbtastic.js"></script>
+ <link rel="stylesheet" href="farbtastic.css" type="text/css" />
+ <script type="text/javascript" charset="utf-8">
+  $(document).ready(function() {
+    $('#demo').hide();
+    $('#picker').farbtastic('#color');
+  });
+ </script>
+</head>
+<body>
+<h1>jQuery Color Picker: Farbtastic</h1>
+
+<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
+
+<form action="" style="width: 400px;">
+  <div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
+</form>
+
+<p>More info on <a href="http://www.acko.net/dev/farbtastic">Acko.net</a>.</p>
+<p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>
+</body>
+</html>
diff --git a/branches/farbtastic-1/demo2.html b/branches/farbtastic-1/demo2.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+ <title>Farbtastic</title>
+ <script type="text/javascript" src="jquery.js"></script>
+ <script type="text/javascript" src="farbtastic.js"></script>
+ <link rel="stylesheet" href="farbtastic.css" type="text/css" />
+ <style type="text/css" media="screen">
+   .colorwell {
+     border: 2px solid #fff;
+     width: 6em;
+     text-align: center;
+     cursor: pointer;
+   }
+   body .colorwell-selected {
+     border: 2px solid #000;
+     font-weight: bold;
+   }
+ </style>
+
+ <script type="text/javascript" charset="utf-8">
+  $(document).ready(function() {
+    $('#demo').hide();
+    var f = $.farbtastic('#picker');
+    var p = $('#picker').css('opacity', 0.25);
+    var selected;
+    $('.colorwell')
+      .each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
+      .focus(function() {
+        if (selected) {
+          $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
+        }
+        f.linkTo(this);
+        p.css('opacity', 1);
+        $(selected = this).css('opacity', 1).addClass('colorwell-selected');
+      });
+  });
+ </script>
+</head>
+<body>
+<h1>jQuery Color Picker: Farbtastic</h1>
+
+<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
+
+<form action="" style="width: 500px;">
+  <div id="picker" style="float: right;"></div>
+  <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
+  <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
+  <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>
+
+</form>
+
+<p>More info on <a href="http://www.acko.net/dev/farbtastic">Acko.net</a>.</p>
+<p>Created by <a href="http://www.acko.net/">Steven Wittens</a>.</p>
+</body>
+</html>
diff --git a/branches/farbtastic-1/farbtastic.css b/branches/farbtastic-1/farbtastic.css
@@ -0,0 +1,33 @@
+.farbtastic {
+  position: relative;
+}
+.farbtastic * {
+  position: absolute;
+  cursor: crosshair;
+}
+.farbtastic, .farbtastic .wheel {
+  width: 195px;
+  height: 195px;
+}
+.farbtastic .color, .farbtastic .overlay {
+  top: 47px;
+  left: 47px;
+  width: 101px;
+  height: 101px;
+}
+.farbtastic .wheel {
+  background: url(wheel.png) no-repeat;
+  width: 195px;
+  height: 195px;
+}
+.farbtastic .overlay {
+  background: url(mask.png) no-repeat;
+}
+.farbtastic .marker {
+  width: 17px;
+  height: 17px;
+  margin: -8px 0 0 -8px;
+  overflow: hidden; 
+  background: url(marker.png) no-repeat;
+}
+