Permalink
Browse files

Added a special feature to Font Resizer.

  • Loading branch information...
1 parent 4ccbfef commit faebab3985ed7f1db4ceed8f6a4061c1dd211066 Aaron Leung committed Oct 20, 2011
Showing with 28 additions and 2 deletions.
  1. +11 −1 examples/font_resizer.html
  2. +17 −1 lib/font_resizer.js
View
12 examples/font_resizer.html
@@ -63,7 +63,7 @@
<span data-ur-font-resizer-component="label"></span>
<span data-ur-font-resizer-component="decrease">[-]</span>
<p data-ur-font-resizer-component="content"
- data-ur-font-resizer-min="20"
+ data-ur-font-resizer-min="50"
data-ur-font-resizer-max="220"
data-ur-font-resizer-size="120"
data-ur-font-resizer-delta="10">To be or not to be, that is the question. Whether 'tis nobler in the mind to endure the slings and arrows of outrageous fortune etc etc.</p>
@@ -79,5 +79,15 @@
<p>To be or not to be, that is the question. Whether 'tis nobler in the mind to endure the slings and arrows of outrageous fortune etc etc.</p>
</div>
</div>
+
+ <h2>A Super-Advanced Example (using the secret "invert" attribute!):</h2>
+ <div class="test">
+ <div data-ur-set="font-resizer">
+ <span data-ur-font-resizer-component="increase">[+]</span>
+ <span data-ur-font-resizer-component="label"></span>
+ <span data-ur-font-resizer-component="decrease">[-]</span>
+ <p data-ur-font-resizer-component="content" data-ur-font-resizer-invert="Bam!">To be or not to be, that is the question. Whether 'tis nobler in the mind to endure the slings and arrows of outrageous fortune etc etc.</p>
+ </div>
+ </div>
</body>
</html>
View
18 lib/font_resizer.js
@@ -33,9 +33,18 @@ Ur.QuickLoaders["font-resizer"] = (function() {
x$(this.increase).click(function (obj) { return function() { obj.change(up); }; }(this));
x$(this.decrease).click(function (obj) { return function() { obj.change(down); }; }(this));
-
+
+ if (this.invert == "Bam!") {
+ this.size = this.min;
+ this.controlSize = this.max;
+ this.increase.style["font-size"] = this.controlSize + "%";
+ this.decrease.style["font-size"] = this.controlSize + "%";
+ this.label.style["font-size"] = this.controlSize + "%";
+ }
+
content[0].style["font-size"] = this.size + "%";
x$(this.label).inner(labelText + this.size + "%");
+
}
FontResizer.prototype.change = function(direction) {
@@ -44,6 +53,13 @@ Ur.QuickLoaders["font-resizer"] = (function() {
this.size += direction * this.delta;
this.content.style["font-size"] = this.size + "%";
this.label.innerText = labelText + this.size + "%";
+
+ if (this.invert == "Bam!") {
+ this.controlSize += -direction * this.delta;
+ this.increase.style["font-size"] = this.controlSize + "%";
+ this.decrease.style["font-size"] = this.controlSize + "%";
+ this.label.style["font-size"] = this.controlSize + "%";
+ }
}
}

0 comments on commit faebab3

Please sign in to comment.