From befd0a4762148841b49b32cd701ed32896d78e95 Mon Sep 17 00:00:00 2001 From: Walter Lee Davis Date: Sat, 19 Jul 2014 10:08:38 -0400 Subject: [PATCH 1/3] add Prototype.js handler --- flowtype.js | 86 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 56 insertions(+), 30 deletions(-) diff --git a/flowtype.js b/flowtype.js index 5ed5162..0e5ecb0 100644 --- a/flowtype.js +++ b/flowtype.js @@ -9,40 +9,66 @@ * * Thanks to Giovanni Difeterici (http://www.gdifeterici.com/) */ - -(function($) { - $.fn.flowtype = function(options) { - -// Establish default settings/variables -// ==================================== - var settings = $.extend({ +if(!!Prototype.Version){ + Element.addMethods({ + flowtype: function(element, options){ + var settings = $H({ maximum : 9999, minimum : 1, maxFont : 9999, minFont : 1, fontRatio : 35 - }, options), - -// Do the magic math -// ================= - changes = function(el) { - var $el = $(el), - elw = $el.width(), - width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw, - fontBase = width / settings.fontRatio, - fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase; - $el.css('font-size', fontSize + 'px'); + }).merge($H(options)); + + changes = function() { + var elw = element.getWidth(), + width = elw > settings.get('maximum') ? settings.get('maximum') : elw < settings.get('minimum') ? settings.get('minimum') : elw, + fontBase = width / settings.get('fontRatio'), + fontSize = fontBase > settings.get('maxFont') ? settings.get('maxFont') : fontBase < settings.get('minFont') ? settings.get('minFont') : fontBase; + element.setStyle('font-size:' + fontSize + 'px'); }; - -// Make the magic visible -// ====================== - return this.each(function() { - // Context for resize callback - var that = this; - // Make changes upon resize - $(window).resize(function(){changes(that);}); - // Set changes on load - changes(this); + changes(); + Event.observe(window, 'resize', function(){ + changes(); }); - }; -}(jQuery)); \ No newline at end of file + return element; + } + }); +}else{ + (function($) { + $.fn.flowtype = function(options) { + + // Establish default settings/variables + // ==================================== + var settings = $.extend({ + maximum : 9999, + minimum : 1, + maxFont : 9999, + minFont : 1, + fontRatio : 35 + }, options), + + // Do the magic math + // ================= + changes = function(el) { + var $el = $(el), + elw = $el.width(), + width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw, + fontBase = width / settings.fontRatio, + fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase; + $el.css('font-size', fontSize + 'px'); + }; + + // Make the magic visible + // ====================== + return this.each(function() { + // Context for resize callback + var that = this; + // Make changes upon resize + $(window).resize(function(){changes(that);}); + // Set changes on load + changes(this); + }); + }; + }(jQuery)); +} From 2d172c8e751a74c99e41a19250b6c43e81bb0c71 Mon Sep 17 00:00:00 2001 From: Walter Lee Davis Date: Sat, 19 Jul 2014 10:08:53 -0400 Subject: [PATCH 2/3] updated documentation --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e115529..f1dddcc 100644 --- a/README.md +++ b/README.md @@ -84,14 +84,18 @@ _Note:_ Setting a specific font-size in your CSS file will make sure that your w ### Step 2: Include FlowType.JS ### -After you have downloaded FlowType.JS, include both jQuery and `flowtype.js` in the head of your HTML document. +After you have downloaded FlowType.JS, include both jQuery or Prototype and `flowtype.js` in the head of your HTML document. ### Step 3: Call FlowType.JS ### To begin the magic, simply call FlowType.JS before the close of your body tag: ```javascript +// jQuery: $('body').flowtype(); + +// Prototype: +$(document.body).flowtype(); ``` ### Step 4: Make Changes ### @@ -110,6 +114,6 @@ $('body').flowtype({ ## Brought to you by... ## -This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus). +This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus). FlowType also works with Prototype.js thanks to [Walter Davis Studio](http://walterdavisstudio.com). FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission. \ No newline at end of file From f91df7be35bb15a334038c49eacef2bef8135007 Mon Sep 17 00:00:00 2001 From: Walter Lee Davis Date: Sat, 19 Jul 2014 10:14:23 -0400 Subject: [PATCH 3/3] translated all the examples in the documentation --- README.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/README.md b/README.md index f1dddcc..feee170 100644 --- a/README.md +++ b/README.md @@ -17,10 +17,17 @@ Set minimum and maximum width thresholds to control the FlowType.JS magic within In this example, FlowType.JS will stop resizing text once the element width becomes smaller than 500px or larger than 1200px. ```javascript +// jQuery: $('body').flowtype({ minimum : 500, maximum : 1200 }); + +// Prototype: +$(document.body).flowtype({ + minimum : 500, + maximum : 1200 +}); ``` Set minimum and maximum font-size thresholds to control the FlowType.JS magic within specific font sizes. @@ -28,10 +35,17 @@ Set minimum and maximum font-size thresholds to control the FlowType.JS magic wi In this example, FlowType.JS will stop resizing text once the font-size becomes smaller than 12px or larger than 40px. ```javascript +// jQuery: $('body').flowtype({ minFont : 12, maxFont : 40 }); + +// Prototype: +$(document.body).flowtype({ + minFont : 12, + maxFont : 40 +}); ``` ### Font-size ### @@ -43,9 +57,15 @@ _Note:_ Because each font is different, you will need to "tweak" `fontSize` and ~~Line-height (`lineRatio`) is set based on the `fontRatio` size, and defaults to 1.45 (the recommended line-height for maximum legibility).~~ See *line-height* below. ```javascript +// jQuery: $('body').flowtype({ fontRatio : 30 }); + +// Prototype: +$(document.body).flowtype({ + fontRatio : 30 +}); ``` @@ -103,6 +123,7 @@ $(document.body).flowtype(); You will most likely want to change the default settings. To do so, simply include these options in your code and tweak away: ```javascript +// jQuery: $('body').flowtype({ minimum : 500, maximum : 1200, @@ -110,6 +131,14 @@ $('body').flowtype({ maxFont : 40, fontRatio : 30 }); +// Prototype: +$(document.body).flowtype({ + minimum : 500, + maximum : 1200, + minFont : 12, + maxFont : 40, + fontRatio : 30 +}); ``` ## Brought to you by... ##