├── .gitignore
├── ???
├── Gruntfile.js
├── LICENSE.html
├── README.md
├── TDF_typetester.css
├── build
├── css
│ └── style.css
└── js
│ ├── scripts copy.js
│ ├── scripts.js
│ ├── scripts_forCloserCompiler.js
│ ├── typeTester.js
│ ├── typeTester.min.js
│ └── typeTester_forCloserCompiler.js
├── examples
├── example_1.jpg
└── example_2.jpg
├── inContext.html
├── index.html
├── package.json
├── src
├── css
│ ├── style.css
│ └── style.css.map
├── js
│ ├── typeTester.js
│ ├── typeTester.min.js
│ └── typeTester_forCloserCompiler.js
└── sass
│ ├── _config.scss
│ ├── _current.scss
│ ├── _typeTester.scss
│ └── style.scss
└── vendor
└── js
└── bigtext.js
/.gitignore:
--------------------------------------------------------------------------------
1 | sitemap.xml
2 | *.log
3 | .DS_Store
4 | Thumbs.db
5 | node_modules
6 | .sass-cache
7 | .htaccess
8 |
--------------------------------------------------------------------------------
/???:
--------------------------------------------------------------------------------
1 | tt-css
2 |
3 | tt-tag
4 |
5 |
6 | weightselection="Normal:400, Bold:700"
7 |
8 | weightselection=""
9 | italicoptions="ok"
10 | optoptions=""
11 | opt="salt"
12 |
13 |
14 |
15 |
16 |
17 | weightselection="Inline:200, Light:300, Display:400, Shadow:500"
18 |
19 |
20 | weightselection="CleanThin:100, Thin:200, DotLight:300, Light:400, Dot:500, Clean:600, Regular:700, Slant:800, Bold:900"
21 |
22 |
23 | weightselection="Line:100, Thickline:200, FullLine:300, Full:400, Dark:500, Shadow:600, ShadowThickline:700, BlackThickline:800, Black:900"
24 |
25 |
26 | weightselection="Thin:100, XLight:200, Light:300, Regular:400, Medium:500, Bold:700, Heavy:900"
27 |
28 | weightselection="Thin:100, XLight:200, Light:300, Regular:400, Medium:500, Bold:700"
29 |
30 |
31 | weightselection="Thin:100, Light:300, Regular:400, SemiBold:600, Bold:700, XBold:800, Black:900"
32 |
33 |
34 | weightselection=" Light:300, Regular:400, Medium:500,Black:900"
35 |
36 | weightselection=" Light:300, Regular:400, Bold:700,XBold:800"
37 |
38 | weightselection=" Display:300, Normal:400, Poster:500,PosterHeavy:600"
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function(grunt) {
2 |
3 | grunt.initConfig({
4 | pkg: grunt.file.readJSON('package.json'),
5 | banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
6 | '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
7 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
8 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
9 | ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
10 |
11 | sass: {
12 | src: {
13 | options: {
14 | lineNumbers: true
15 | },
16 | files: {
17 | "src/css/style.css": "src/sass/style.scss",
18 | }
19 | }
20 | },
21 | autoprefixer: {
22 | src: {
23 | files: {
24 | 'build/css/style.css': 'src/css/style.css'
25 | }
26 | }
27 | },
28 | copy: {
29 | main: {
30 | files: [{
31 | expand: true,
32 | cwd: 'src/js/',
33 | src: ['**/*.js'],
34 | dest: 'build/js'},
35 | ]
36 | }
37 | },
38 | notify_hooks: {
39 | options: {
40 | enabled: true,
41 | max_jshint_notifications: 5, // maximum number of notifications from jshint output
42 | success: true, // whether successful grunt executions should be notified automatically
43 | duration: 1 // the duration of notification in seconds, for `notify-send only
44 | }
45 | },
46 | watch: {
47 | sass: {
48 | files: ["src/sass/**/*.scss"],
49 | tasks: ["sass"]
50 | },
51 | autoprefixer: {
52 | files: ['src/css/style.css'],
53 | tasks: ['autoprefixer']
54 | },
55 | // uglify: {
56 | // files: ['wp-content/themes/SBKH/src/js/*.js'],
57 | // tasks: ['uglify']
58 | // },
59 | copy:{
60 | files: ["src/js/**/*.js"],
61 | tasks: ["copy"]
62 | }
63 | }
64 | });
65 |
66 | grunt.loadNpmTasks('grunt-notify');
67 | grunt.loadNpmTasks('grunt-autoprefixer');
68 | grunt.loadNpmTasks("grunt-contrib-sass");
69 | grunt.loadNpmTasks('grunt-contrib-watch');
70 | grunt.loadNpmTasks('grunt-contrib-copy');
71 | grunt.loadNpmTasks('grunt-newer');
72 | // grunt.loadNpmTasks('grunt-contrib-uglify');
73 |
74 | grunt.task.run('notify_hooks');
75 | grunt.registerTask('default', ['sass', 'autoprefixer', 'copy']);
76 |
77 | };
--------------------------------------------------------------------------------
/LICENSE.html:
--------------------------------------------------------------------------------
1 | Copyright 2015 Quinn Keaveney
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [TDF Type Tester](http://tendollarfonts.com/)
2 |
3 | TDF Type Tester is a flexible display for the numerouse features available in a typeface.
4 | Made specifically for TDF.
5 |
6 | As seen on [The Designers Foundry](http://tendollarfonts.com/).
7 | https://www.thedesignersfoundry.com/products/finkl-pro
8 |
9 | 
10 | 
11 |
12 |
13 | ## License
14 |
15 | Copyright 2015 Quinn Keaveney.
16 | Feel free to look, learn, comment or criticize. If you want a private license or support please contact me independently.
17 |
18 |
19 | ## Table of contents
20 |
21 | - [Quick Start](#quick-start)
22 | - [Example](#example)
23 | - [Options](#options)
24 | - [Dependencies](#dependencies)
25 | - [Ramp Up](#ramp-up)
26 |
27 |
28 | ## Quick Start
29 | ```
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | ```
45 |
46 |
47 | ## Example
48 |
49 | Simple Example
50 | ```
51 |
52 | ```
53 |
54 | One Feature Example
55 | ```
56 |
57 | ```
58 |
59 | Multiple Feature Example
60 | ```
61 |
62 | ```
63 |
64 | ## Options
65 |
66 | All options are chosen by defining an attribute and feeding it a string.
67 |
68 | W A R N I N G.
69 | The attribute names are case specific.
70 |
71 | ### font
72 | Sets the font-family that the tester looks for.
73 | Default is "'Fakta Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif".
74 | ```
75 | font="atc_timberline"
76 | ```
77 |
78 | ### text
79 | Sets the placeholder text of the tester
80 | Default is "Try Typing Here..." but if you define the font it is "'Try' + font " .
81 | ```
82 | text="Happy New Years!"
83 | ```
84 |
85 | ### size
86 | Sets initial size for tester. Size is set in pixels via font-size.
87 | Default is 40.
88 | ```
89 | size="22"
90 | ```
91 |
92 | ### sizeoptions
93 | Allows slider bar for size.
94 | Default is false.
95 | ```
96 | sizeoptions="true"
97 | ```
98 |
99 | ### tracking
100 | Sets initial tracking for tester. Tracking is set in em via letter-spacing.
101 | You may choose between -0.25 –> 1. Default is 0.
102 | ```
103 | tracking="0.8"
104 | ```
105 |
106 | ### trackingoptions
107 | Allows slider bar for tracking.
108 | Default is false.
109 | ```
110 | trackingoptions="true"
111 | ```
112 |
113 | ### weight
114 | Sets initial weight for tester. Weight is set on a 100 –> 900 scale via font-weight.
115 | Default is 400.
116 | ```
117 | weight="800"
118 | ```
119 |
120 | ### weightoptions
121 | Allows slider bar for weight.
122 | Default is false.
123 | ```
124 | weightoptions="true"
125 | ```
126 |
127 | ### weightselections
128 | Sets slider bar's options for weight.
129 | Default is 100 -> 900.
130 | ```
131 | weightselections="Light:100, Book:400, Black:800"
132 | ```
133 |
134 | ### align
135 | Sets initial alignment for tester. Align is set via text-align. Requires a set size.
136 | You may chose left, center, or right. Default is left.
137 | ```
138 | align="right"
139 | ```
140 |
141 | ### alignoptions
142 | Sets slider bar's options for alignment.
143 | Default is false.
144 | ```
145 | alignoptions="true"
146 | ```
147 |
148 | ### italic
149 | Sets italic for tester. Italic is set via font-style.
150 | Default is false.
151 | ```
152 | italic="true"
153 | ```
154 |
155 | ### italicoptions
156 | Allows switch for italic.
157 | Default is false.
158 | ```
159 | italicoptions="true"
160 | ```
161 |
162 | ### singleline
163 | Sets initial wordwrap for tester. Singleline is set via white-space. Requires a set size.
164 | Default is false.
165 | ```
166 | singleline="true"
167 | ```
168 |
169 | ### singlelineoptions
170 | Allows switch for singleline / wordwrap.
171 | Default is false.
172 | ```
173 | singlelineoptions="true"
174 | ```
175 |
176 | ### opt
177 | Sets initial Open Type Feature for tester. OPT is set via font-feature-settings.
178 | Default is none.
179 | ```
180 | opt="dlig"
181 | ```
182 |
183 | ### optoptions
184 | Allows dropdown for Open Type Features.
185 | Default is false.
186 | ```
187 | optoptions="dlig, hlig"
188 | ```
189 |
190 | ### True or False
191 | You can also set any of the above options with a variety of true or false terms. Cool right?
192 |
193 | True could be "yes", "true", "hawt", "yup", "yep", "siq", "swell", "chiller", "ok", "!", "fine", "right", "good", "aye", "indubitably", "sure", "yeah", "yay", etc...
194 |
195 | False could be "sus", "no", "nah", "nvm", "false", "rathernot", "nope", "naaah", "naah", "bye", "fart", "sans", "terminal".
196 |
197 |
198 | ## Dependencies
199 |
200 | A short list of depencencies for the project.
201 |
202 |
203 | ### Jquery
204 | http://jquery.com/download/
205 | ```
206 |
207 | ```
208 |
209 | ### Jquery UI
210 | http://jquery.com/download/
211 | ```
212 |
213 |
214 | ```
215 |
216 | ### Big Text
217 | https://github.com/zachleat/BigText
218 | ```
219 |
220 | ```
221 |
222 | You can add them all by just copying this
223 | ```
224 |
225 |
226 |
227 |
228 | ```
229 |
230 |
231 | ## Ramp Up
232 |
233 | Install node if you haven't already
234 | http://nodejs.org/
235 |
236 | Install grunt (via terminal)
237 | http://gruntjs.com/getting-started
238 | ```
239 | npm install -g grunt-cli
240 | ```
241 |
242 | Setting up grunt
243 | ```
244 | # set current directory
245 | cd projectDirectory
246 |
247 | # install packages
248 | npm install
249 | ```
250 |
251 | Using grunt
252 | ```
253 | # Run Grunt and grunt watch
254 | grunt && grunt watch
255 | ```
256 |
257 | ### You're all set!
258 |
--------------------------------------------------------------------------------
/build/js/scripts copy.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////
2 | //////////////// ///////////////
3 | //////////////// FUNCTIONS ///////////////
4 | //////////////// ///////////////
5 | ////////////////////////////////////////////////
6 |
7 |
8 | ////////////////////////////////////////////////
9 | //TYPE TESTER BEGINS
10 | ////////////////////////////////////////////////
11 |
12 | ////////////////////////
13 | //Define Variables
14 |
15 | function sized(){
16 | $('.testerFit .type').bigtext({
17 | minfontsize: 14
18 | });
19 | };
20 | var testerNumber = testerTotal = 0;
21 |
22 | function typetester(e, font, size, tracking, italic, weight, opt){
23 | var option, typetester;
24 | var theTester = e;
25 | var size =
26 | font =
27 | options =
28 | tracking =
29 | weight =
30 | italic =
31 | opt =
32 | align =
33 | testerfit =
34 | testerSize =
35 | testerFont =
36 | testerTracking =
37 | testerWeight =
38 | testerItalic =
39 | testerOpt =
40 | testerAlign =
41 | sizeoptions =
42 | trackingoptions =
43 | weightoptions =
44 | italicoptions =
45 | optoptions =
46 | optButton =
47 | testeroptions = "";
48 | var elm = 0;
49 | var text = "Try typing here...";
50 | var yes = [ "yes", "true", "hawt", "yup", "yep", "siq", "swell", "chiller", "ok", "!", "fine", "right", "good", "aye", "indubitably", "sure", "yeah", "yay"];
51 | var no = [ "sus", "no", "nah", "nvm", "false", "rathernot", "nope", "naaah", "naah", "bye", "fart", "sans", "terminal"];
52 |
53 | var optValues = {
54 |
55 | //Kerning
56 | kern: "Kerning",
57 |
58 | //Ligatures
59 | liga: "Common",
60 | dlig: "Discretionary",
61 | hlig: "Historical",
62 | clig: "Contextual",
63 |
64 | //Letter Case
65 | smcp: "Small Caps",
66 | c2sc: "All Small Cap",
67 |
68 | //Number Case
69 | lnum: "Lining",
70 | onum: "Old-Style",
71 |
72 | //Number Spacing
73 | pnum: "Proportional",
74 | tnum: "Tabular",
75 |
76 | //Fractions
77 | frac: "Fractions",
78 | afrc: "Alt Fractions",
79 |
80 | //Numeric Extras
81 | zero: "Slashed Zero",
82 | nalt: "Alt Numbers",
83 |
84 | //Character Alternatives
85 | swsh: "Swash",
86 | calt: "Contextual",
87 | hist: "Historical",
88 | salt: "Stylistic",
89 |
90 | //Alternative Stylistic Sets
91 | ss01: "Style 1",
92 | ss02: "Style 2",
93 | ss03: "Style 3",
94 | ss04: "Style 4",
95 | ss05: "Style 5",
96 |
97 | //Sub Sup scripts
98 | sups: "Superscript",
99 | subs: "Subscript"
100 | }
101 |
102 | var optName = function (propertyName) {
103 | return optValues[propertyName];
104 | };
105 |
106 | var typeVars = ["options", "sizeoptions", "trackingoptions", "opt", "weightoptions", "italicoptions", "size", "font", "tracking", "weight", "italic", "align", "text"];
107 | $.each(typeVars, function(index, value) {
108 | if ($(theTester).is("["+value+"]")) {
109 | eval(value + " = '" + $(theTester).attr(value) + "'");
110 |
111 | }
112 | });
113 |
114 | if ($(theTester).is("[optoptions]")) {
115 | optoptions = $(theTester).attr("optoptions").replace(/\s+/g, '').split(',');
116 |
117 | }
118 |
119 | ////////////////////////
120 | // Set tester Number
121 | testerNumber += 1;
122 | $(theTester).addClass("typeTester" + testerNumber);
123 | if (testerNumber%2 == 0){
124 | $(theTester).addClass("even");
125 | }else{
126 | $(theTester).addClass("odd");
127 | }
128 | if (testerNumber == testerTotal) {
129 | $(theTester).addClass("lastTypeTester");
130 |
131 | };
132 |
133 |
134 | ////////////////////////
135 | //FONT
136 | if (font !== ""){
137 | if ($.inArray(size, no) >= 0){
138 | return false;
139 |
140 | }else{
141 | testerFont = " font-family: " + font + ";";
142 |
143 | }
144 |
145 | }
146 |
147 |
148 | ////////////////////////
149 | //SIZE
150 | if (size !== ""){
151 | if ($.inArray(size, no) >= 0){
152 | testerfit = "testerFit ";
153 | return false;
154 |
155 | }else{
156 | testerSize = " font-size: " + size + "px;";
157 |
158 | }
159 |
160 | }else{
161 | testerfit = "testerFit ";
162 |
163 | }
164 | if (sizeoptions !== ""){
165 | elm += 1;
166 | if ($.inArray(sizeoptions, no) >= 0){
167 | sizeoptions = "";
168 | elm -= 1;
169 |
170 | }else{
171 | testerfit = "";
172 | if (size == ""){
173 | size = "80";
174 |
175 | }
176 | sizeoptions = "\
177 | \
178 | size\
179 | \
180 |
\
181 | ";
182 | }
183 |
184 | }
185 |
186 | ////////////////////////
187 | //TRACKING
188 | if (tracking !== ""){
189 | if ($.inArray(tracking, no) >= 0){
190 | testerTracking = " letter-spacing: 0;";
191 | tracking = "0";
192 | return false;
193 |
194 | }else{
195 | testerTracking = " letter-spacing: " + tracking + "px;";
196 |
197 | }
198 |
199 | }else{
200 | testerTracking = " letter-spacing: 0;";
201 | tracking = "0";
202 |
203 | }
204 | if (trackingoptions !== ""){
205 | elm += 1;
206 | if ($.inArray(trackingoptions, no) >= 0){
207 | trackingoptions = "";
208 | elm -= 1;
209 |
210 | }else{
211 | trackingoptions = "\
212 | \
213 | tracking\
214 | \
215 |
\
216 | ";
217 |
218 | }
219 | }
220 |
221 | ////////////////////////
222 | //WEIGHT
223 | if (weight !== ""){
224 | if ($.inArray(weight, no) >= 0){
225 | testerWeight = " font-weight: normal;";
226 | weight = "400";
227 | return false;
228 |
229 | }else{
230 | testerWeight = " font-weight: " + weight + ";";
231 |
232 | }
233 |
234 | }else{
235 | testerWeight = " font-weight: normal;";
236 | weight = "400";
237 |
238 | }
239 |
240 | if (weightoptions !== ""){
241 | elm += 1;
242 | if ($.inArray(weightoptions, no) >= 0){
243 | weightoptions = "";
244 | elm -= 1;
245 |
246 | }else{
247 | weightoptions = "\
248 | \
249 | weight\
250 | \
251 |
\
252 | ";
253 |
254 | }
255 | }
256 |
257 | ////////////////////////
258 | //ITALICS
259 | if (italic !== ""){
260 | if ($.inArray(italic, no) >= 0){
261 | testerItalic = " font-style: initial;";
262 | return false;
263 |
264 | }else{
265 | italic = "italic";
266 |
267 | }
268 | testerItalic = " font-style: " + italic + ";";
269 |
270 | }else{
271 | testerItalic = " font-style: initial;";
272 |
273 | }
274 |
275 | if (italicoptions !== ""){
276 | elm += 1;
277 | if ($.inArray(italicoptions, no) >= 0){
278 | italicoptions = "";
279 | elm -= 1;
280 |
281 | }else{
282 | italicoptions = "\
283 | \
284 | italic\
285 |
\
286 | ";
287 |
288 | }
289 | }
290 |
291 |
292 | ////////////////////////
293 | //Open Type Feautures
294 | if (optoptions !== ""){
295 | elm += 1;
296 | if ($.inArray(optoptions, no) >= 0){
297 | optoptions = "";
298 | elm -= 1;
299 |
300 | }else{
301 | $.each(optoptions, function(index, value) {
302 | testerOpt += '' + optName(value) + '';
303 | });
304 | optoptions = "\
305 | \
311 | ";
312 | $(theTester).addClass("withOptions");
313 |
314 | }
315 |
316 |
317 | }
318 |
319 | ////////////////////////
320 | //Alignment
321 | if (size !== ""){
322 | if (align !== ""){
323 | testerAlign = " text-align: " + align + ";";
324 | }else{
325 | testerAlign = " text-align: left;"
326 | }
327 | }
328 |
329 |
330 | ////////////////////////
331 | //Put them all together
332 | totaloptions = sizeoptions + trackingoptions + weightoptions + italicoptions + optoptions;
333 |
334 | if (options !== "false"){
335 | testeroptions = "\
336 | " +
337 | totaloptions +
338 | "
"
339 | }
340 |
341 | typetester = "\
342 | \
343 |
\
344 | " + text + "\
345 |
\
346 |
\
231 | size\
232 | \
233 |
\
234 | ";
235 | }
236 |
237 | }
238 |
239 | ////////////////////////
240 | //TRACKING
241 | if (tracking !== ""){
242 | if ($.inArray(tracking, no) >= 0){
243 | testerTracking = " letter-spacing: 0;";
244 | tracking = "0";
245 | return false;
246 |
247 | }else{
248 | testerTracking = " letter-spacing: " + tracking + "px;";
249 |
250 | }
251 |
252 | }else{
253 | testerTracking = " letter-spacing: 0;";
254 | tracking = "0";
255 |
256 | }
257 | if (trackingoptions !== ""){
258 | elm += 1;
259 | if ($.inArray(trackingoptions, no) >= 0){
260 | trackingoptions = "";
261 | elm -= 1;
262 |
263 | }else{
264 | trackingoptions = "\
265 | \
266 | tracking\
267 | \
268 |
\
269 | ";
270 |
271 | }
272 | }
273 |
274 | ////////////////////////
275 | //WEIGHT
276 | if (weight !== ""){
277 | if ($.inArray(weight, no) >= 0){
278 | testerWeight = " font-weight: normal;";
279 | weight = "400";
280 | return false;
281 |
282 | }else{
283 | testerWeight = " font-weight: " + weight + ";";
284 |
285 | }
286 |
287 | }else{
288 | testerWeight = " font-weight: normal;";
289 | weight = "400";
290 |
291 | }
292 |
293 | if (weightoptions !== ""){
294 | elm += 1;
295 | if ($.inArray(weightoptions, no) >= 0){
296 | weightoptions = "";
297 | elm -= 1;
298 |
299 | }else{
300 | weightoptions = "\
301 | \
302 | weight\
303 | \
304 |
\
305 | ";
306 |
307 | }
308 | }
309 |
310 | ////////////////////////
311 | //ITALICS
312 | if (italic !== ""){
313 | if ($.inArray(italic, no) >= 0){
314 | testerItalic = " font-style: initial;";
315 | return false;
316 |
317 | }else{
318 | italic = "italic";
319 |
320 | }
321 | testerItalic = " font-style: " + italic + ";";
322 |
323 | }else{
324 | testerItalic = " font-style: initial;";
325 |
326 | }
327 |
328 | if (italicoptions !== ""){
329 | elm += 1;
330 | if ($.inArray(italicoptions, no) >= 0){
331 | italicoptions = "";
332 | elm -= 1;
333 |
334 | }else{
335 | italicoptions = "\
336 | \
337 | italic\
338 |
\
339 | ";
340 |
341 | }
342 | }
343 |
344 |
345 | ////////////////////////
346 | //Open Type Feautures
347 |
348 | if (optoptions !== ""){
349 | elm += 1;
350 | if ($.inArray(optoptions, no) >= 0){
351 | optoptions = "";
352 | elm -= 1;
353 |
354 | }else{
355 | $.each(optoptions, function(index, value) {
356 | testerOpt += '' + optName(value) + '';
357 | });
358 | optoptions = "\
359 | \
365 | ";
366 | $(theTester).addClass("withOptions");
367 |
368 | }
369 |
370 | }
371 |
372 | if (optoptions !== ""){
373 | if ($.inArray(optoptions, no) >= 0){
374 | }else{
375 |
376 | if (webkit == "safari" || browser == "moz") {
377 | optDisclaim = "Please change browsers for better OPT support";
378 | }
379 | }
380 | }
381 |
382 | ////////////////////////
383 | //Alignment
384 | if (size !== ""){
385 | if (align !== ""){
386 | testerAlign = " text-align: " + align + ";";
387 | }else{
388 | testerAlign = " text-align: left;"
389 | }
390 | }
391 |
392 |
393 | ////////////////////////
394 | //Put them all together
395 | totaloptions = sizeoptions + trackingoptions + weightoptions + italicoptions + optoptions;
396 |
397 | if (options !== "false"){
398 | testeroptions = "\
399 | " +
400 | totaloptions +
401 | "
"
402 | }
403 |
404 |
405 | typetester = "\
406 | \
407 |
\
408 | " + text + "\
409 |
\
410 |
size
";
245 | }
246 |
247 | }
248 |
249 | ////////////////////////
250 | //TRACKING
251 | if (tracking !== ""){
252 | if ($.inArray(tracking, no) >= 0){
253 | testerTracking = " letter-spacing: 0;";
254 | tracking = "0";
255 | return false;
256 |
257 | }else{
258 | testerTracking = " letter-spacing: " + tracking + "em;";
259 |
260 | }
261 |
262 | }else{
263 | testerTracking = " letter-spacing: 0;";
264 | tracking = "0";
265 |
266 | }
267 | if (trackingoptions !== ""){
268 | elm += 1;
269 | if ($.inArray(trackingoptions, no) >= 0){
270 | trackingoptions = "";
271 | elm -= 1;
272 |
273 | }else{
274 | trackingoptions = "tracking
";
275 |
276 | }
277 | }
278 |
279 | ////////////////////////
280 | //WEIGHT
281 | if (weight !== ""){
282 | if ($.inArray(weight, no) >= 0){
283 | testerWeight = " font-weight: normal;";
284 | weight = "400";
285 | return false;
286 |
287 | }else{
288 | testerWeight = " font-weight: " + weight + ";";
289 |
290 | }
291 | }else{
292 | if (weightselection == ""){
293 | testerWeight = " font-weight: normal;";
294 | weight = "400";
295 | }
296 | }
297 |
298 | if (weightoptions !== ""){
299 | elm += 1;
300 | if ($.inArray(weightoptions, no) >= 0){
301 | weightoptions = "";
302 | elm -= 1;
303 |
304 | }else{
305 | weightoptions = "weight
";
306 |
307 | }
308 | }
309 |
310 | if (weightselection !== ""){
311 | elm += 1;
312 | if ($.inArray(weightselection, no) >= 0){
313 | weightselection = "";
314 | elm -= 1;
315 |
316 | }else{
317 | if (weight !== ""){ }else{
318 | if ($.inArray(weightselection, no) >= 0){
319 | testerWeight = " font-weight: normal;";
320 | weight = "400";
321 | return false;
322 |
323 | }else{
324 | weight = obj_weightselection[Object.keys(obj_weightselection)[0]];
325 | testerWeight = " font-weight: " + obj_weightselection[Object.keys(obj_weightselection)[0]] + ";";
326 | }
327 | }
328 |
329 | weightoptions = "weight
";
330 | }
331 | }else{
332 | if (weight == ""){
333 | testerWeight = " font-weight: normal;";
334 | weight = "400";
335 | }
336 | }
337 |
338 |
339 |
340 |
341 | ////////////////////////
342 | //ITALICS
343 | if (italic !== ""){
344 | if ($.inArray(italic, no) >= 0){
345 | testerItalic = " font-style: initial;";
346 | return false;
347 |
348 | }else{
349 | italic = "italic";
350 |
351 | }
352 | testerItalic = " font-style: " + italic + ";";
353 |
354 | }else{
355 | testerItalic = " font-style: initial;";
356 |
357 | }
358 |
359 | if (italicoptions !== ""){
360 | elm += 1;
361 | if ($.inArray(italicoptions, no) >= 0){
362 | italicoptions = "";
363 | elm -= 1;
364 |
365 | }else{
366 | italicoptions = "italic
";
367 |
368 | }
369 | }
370 |
371 |
372 | ////////////////////////
373 | //Open Type Feautures
374 | if (optoptions !== ""){
375 | elm += 1;
376 | if ($.inArray(optoptions, no) >= 0){
377 | optoptions = "";
378 | elm -= 1;
379 |
380 | }else{
381 | $.each(optoptions, function(index, value) {
382 | testerOpt += '' + optName(value) + '';
383 | });
384 | optoptions = "";
385 | $(theTester).addClass("withOptions");
386 |
387 | }
388 | }
389 |
390 | if (optoptions !== ""){
391 | if ($.inArray(optoptions, no) <= 0){
392 | if (webkit == "safari" || browser == "moz") {
393 | optDisclaim = "Switch browsers for better OPT support";
394 | }
395 | }
396 | }
397 |
398 |
399 | ////////////////////////
400 | //Alignment
401 | if (size !== ""){
402 | if (align !== ""){
403 | testerAlign = " text-align: " + align + ";";
404 | }else{
405 | testerAlign = " text-align: left;"
406 | }
407 |
408 | if (alignoptions !== ""){
409 | elm += 1;
410 | if ($.inArray(alignoptions, no) >= 0){
411 | alignoptions = "";
412 | elm -= 1;
413 |
414 | }else{
415 | if (align == ""){
416 | align = "center";
417 |
418 | }
419 | alignoptions = "align
";
420 | }
421 | }
422 | }
423 |
424 | ////////////////////////
425 | //Singleline
426 | if (size !== ""){
427 | if (singleline !== ""){
428 | if ($.inArray(singleline, no) >= 0){
429 | testerSingleline = " white-space: initial;"
430 | }else{
431 | testerSingleline = " white-space: nowrap;";
432 | }
433 | }else{
434 | testerSingleline = " white-space: initial;"
435 | }
436 |
437 | if (singlelineoptions !== ""){
438 | elm += 1;
439 | if ($.inArray(singlelineoptions, no) >= 0){
440 | singlelineoptions = "";
441 | elm -= 1;
442 |
443 | }else{
444 | singlelineoptions = "singleline
";
445 |
446 | }
447 | }
448 | }
449 |
450 |
451 | ////////////////////////
452 | //Text Fallback
453 | if (font !== "") {
454 | if (text == "Try typing here...") {
455 | text = "Try " + font;
456 | };
457 | };
458 |
459 |
460 | ////////////////////////
461 | //Put them all together
462 | totaloptions = sizeoptions + trackingoptions + weightoptions + italicoptions + singlelineoptions + alignoptions + optoptions;
463 |
464 | if (options !== "false"){
465 | testeroptions = "" +
466 | totaloptions + optDisclaim +
467 | "
"
468 | }
469 |
470 | typetester = "" + testeroptions;
471 | typetesterFont = "";
472 |
473 | $(theTester).append(typetester);
474 | $("body").append(typetesterFont);
475 |
476 |
477 | ////////////////////////
478 | //ADD INTERACTIONS
479 | if (sizeoptions !== ""){
480 |
481 | $(".sizeSlider" + testerNumber).slider({
482 | orientation: "horizontal",
483 | range: "min",
484 | min: 15,
485 | max: 215,
486 | value: size,
487 | animate: true,
488 | slide: function(event, ui) {
489 | $(this).find( ".amount" ).text(ui.value + "px");
490 | $(this).parent().parent().find( ".type" ).css("font-size", ui.value + "px");
491 | },
492 | create: function( event, ui ) {
493 | $(this).find( ".amount" ).text(size + "px");
494 | $(this).parent().parent().find( ".type" ).css("font-size", size + "px");
495 | }
496 | });
497 | }
498 |
499 | if (trackingoptions !== ""){
500 | $(".trackingSlider" + testerNumber).slider({
501 | orientation: "horizontal",
502 | range: "min",
503 | min: -0.25,
504 | max: 1,
505 | step: 0.01,
506 | value: tracking,
507 | animate: true,
508 | slide: function(event, ui) {
509 | $(this).find( ".amount" ).text(ui.value + "em");
510 | $(this).parent().parent().find( ".type" ).css("letter-spacing", ui.value + "em");
511 | },
512 | create: function( event, ui ) {
513 | $(this).find( ".amount" ).text(tracking + "em");
514 | $(this).parent().parent().find( ".type" ).css("letter-spacing", tracking + "em");
515 | }
516 |
517 | });
518 | };
519 |
520 |
521 | if (weightoptions !== ""){
522 | if (weightselection == "") {
523 | $(".weightSlider" + testerNumber).slider({
524 | orientation: "horizontal",
525 | range: "min",
526 | min: 100,
527 | max: 900,
528 | step: 100,
529 | value: weight,
530 | animate: true,
531 | slide: function(event, ui) {
532 | $(this).find( ".amount" ).text(ui.value);
533 | $(this).parent().parent().find( ".type" ).css("font-weight", ui.value);
534 | },
535 | create: function( event, ui ) {
536 | $(this).find( ".amount" ).text(weight);
537 | $(this).parent().parent().find( ".type" ).css("font-weight", weight);
538 | }
539 | });
540 | }
541 | };
542 |
543 | var ticker = 0
544 | for(i in obj_weightselection) {
545 | if (weight == obj_weightselection[i]) {
546 | ticker += 1;
547 | firstWeightPosition = ticker;
548 | firstWeightName = i;
549 | firstWeightValue = obj_weightselection[i];
550 | }
551 | }
552 | if (weightselection !== "") {
553 | $(".weightSlider" + testerNumber).slider({
554 | orientation: "horizontal",
555 | range: "min",
556 | min: 1,
557 | max: Object.keys(obj_weightselection).length,
558 | step: 1,
559 | value: firstWeightPosition,
560 | animate: true,
561 | slide: function(event, ui) {
562 | $(this).find( ".amount" ).text(Object.keys(obj_weightselection)[ui.value-1]);
563 | $(this).parent().parent().find( ".type" ).css("font-weight", obj_weightselection[Object.keys(obj_weightselection)[ui.value-1]]);
564 | },
565 | create: function( event, ui ) {
566 | $(this).find( ".amount" ).text(firstWeightName);
567 | $(this).parent().parent().find( ".type" ).css("font-weight", firstWeightValue);
568 |
569 | }
570 | });
571 | }
572 |
573 |
574 | if (italicoptions !== ""){
575 | if ($(".italicButton" + testerNumber).parent().parent().find( ".type" ).css("font-style") == "italic"){
576 | $(".italicButton" + testerNumber).addClass("active");
577 |
578 | }
579 | $(".italicButton" + testerNumber).click(function(){
580 | $(this).toggleClass("active");
581 | if ($(this).hasClass("active")) {
582 | $(this).parent().parent().find( ".type" ).css("font-style", "italic");
583 |
584 | }else{
585 | $(this).parent().parent().find( ".type" ).css("font-style", "initial");
586 |
587 | };
588 | });
589 | };
590 |
591 | if (opt !== ""){
592 | if ($.inArray(opt, no) >= 0){
593 | opt = "";
594 | return false;
595 |
596 | }else{
597 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + opt + '" 1');
598 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + opt + '"=1');
599 | $(theTester).find(".type").css("-ms-font-feature-settings", '"' + opt + '" 1');
600 | $(theTester).find(".type").css("-o-font-feature-settings", '"' + opt + '" 1');
601 | $(theTester).find(".type").css("-webkit-font-feature-settings", '"' + opt + '" 1');
602 | $(theTester).find(".type").css("font-feature-settings", '"' + opt + '" 1');
603 | }
604 | if (optoptions !== ""){
605 | if ($.inArray(optoptions, no) <= 0){
606 | $(theTester).find(".optButton").attr('active', opt);
607 | $(theTester).find("."+opt).addClass('active');
608 | $(theTester).find(".optButton").addClass('active');
609 | $(theTester).find(".optButton .label").addClass('active');
610 | $(theTester).find(".optButton .label").text( opt );
611 | }
612 |
613 | }
614 |
615 | }
616 |
617 | if (optoptions !== ""){
618 | $(".optButton" + testerNumber + " .label").click( function(){
619 | $(this).parent().toggleClass('open');
620 |
621 | });
622 | $(".optButton" + testerNumber + " .dropdown span").click( function(){
623 | optButton = $(this).parent().parent();
624 | if ($(this).hasClass("active")){
625 | optButton.attr('active', 'features');
626 | $(this).removeClass('active');
627 | optButton.removeClass('active');
628 | optButton.find(".label").removeClass('active');
629 | optButton.find(".label").text( optButton.attr('active') );
630 |
631 | $(theTester).find(".type").css("-moz-font-feature-settings", "inherit");
632 | $(theTester).find(".type").css("-ms-font-feature-settings", "inherit");
633 | $(theTester).find(".type").css("-o-font-feature-settings", "inherit");
634 | $(theTester).find(".type").css("-webkit-font-feature-settings", "inherit");
635 | $(theTester).find(".type").css("font-feature-settings", "inherit");
636 | return false;
637 | }
638 | $(this).parent().find("span").removeClass("active");
639 | optButton.attr('active', $(this).attr('class'));
640 | $(this).addClass('active');
641 | optButton.addClass('active');
642 | optButton.find(".label").addClass('active');
643 | optButton.find(".label").text( optButton.attr('active') );
644 |
645 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + optButton.attr('active') + '" 1');
646 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + optButton.attr('active') + '"=1');
647 | $(theTester).find(".type").css("-ms-font-feature-settings", '"' + optButton.attr('active') + '" 1');
648 | $(theTester).find(".type").css("-o-font-feature-settings", '"' + optButton.attr('active') + '" 1');
649 | $(theTester).find(".type").css("-webkit-font-feature-settings", '"' + optButton.attr('active') + '" 1');
650 | $(theTester).find(".type").css("font-feature-settings", '"' + optButton.attr('active') + '" 1');
651 |
652 | });
653 |
654 | };
655 |
656 |
657 | if (size !== ""){
658 |
659 | if (singlelineoptions !== ""){
660 | if ($(".singlelineButton" + testerNumber).parent().parent().find( ".enterTXT" ).css("white-space") == "nowrap"){
661 | $(".singlelineButton" + testerNumber).addClass("active");
662 |
663 | }
664 | $(".singlelineButton" + testerNumber).click(function(){
665 | $(this).toggleClass("active");
666 | if ($(this).hasClass("active")) {
667 | $(this).parent().parent().find( ".enterTXT" ).css("white-space", "nowrap");
668 |
669 | }else{
670 | $(this).parent().parent().find( ".enterTXT" ).css("white-space", "initial");
671 |
672 | };
673 | });
674 | };
675 |
676 |
677 | if (alignoptions !== ""){
678 | $(".alignSlider" + testerNumber).slider({
679 | orientation: "horizontal",
680 | range: "min",
681 | min: 1,
682 | max: 3,
683 | value: alignValues.indexOf(align) + 1,
684 | animate: true,
685 | slide: function(event, ui) {
686 | $(this).find( ".amount" ).text(alignValues[ui.value - 1]);
687 | $(this).parent().parent().find( ".type" ).css("text-align", alignValues[ui.value - 1]);
688 | },
689 | create: function( event, ui ) {
690 | $(this).find( ".amount" ).text(align);
691 | $(this).parent().parent().find( ".type" ).css("text-align", align);
692 | }
693 | });
694 | }
695 | }
696 | }
697 |
698 |
699 | ////////////////////////
700 | //LOAD
701 | $( document ).ready(function() {
702 |
703 | $(".typeTester").each( function(i, e){
704 | testerTotal += 1;
705 | });
706 | $(".typeTester").each( function(i, e){
707 | typetester(e);
708 | });
709 |
710 | sized();
711 |
712 | });
713 | $(window).load(function() {
714 | $(".type").keyup(function(){
715 | sized();
716 | });
717 | sized();
718 |
719 | }); // `~*# The end.
720 |
--------------------------------------------------------------------------------
/build/js/typeTester.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////
2 | //////////////// ///////////////
3 | //////////////// FUNCTIONS ///////////////
4 | //////////////// ///////////////
5 | ////////////////////////////////////////////////
6 |
7 |
8 | ////////////////////////////////////////////////
9 | //TYPE TESTER BEGINS
10 | ////////////////////////////////////////////////
11 |
12 | ////////////////////////
13 | //IF MOBILE
14 |
15 | function isMobile() {
16 | if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/IEMobile/i)){
17 | return true; } else { return false; }
18 | }
19 | function iphone() {
20 | if(navigator.userAgent.match(/iPhone|iPad|iPod/i)){
21 | return true; } else { return false; }
22 | }
23 | var isTouchDevice = 'ontouchstart' in document.documentElement;
24 |
25 | ////////////////////////
26 | //GET VENDOR PREFIXES
27 |
28 | var browser, webkit, touch;
29 |
30 | var prefix = (function () {
31 | var styles = window.getComputedStyle(document.documentElement, ''),
32 | pre = (Array.prototype.slice
33 | .call(styles)
34 | .join('')
35 | .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
36 | )[1],
37 | dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
38 | return {
39 | dom: dom,
40 | lowercase: pre,
41 | css: '-' + pre + '-',
42 | js: pre[0].toUpperCase() + pre.substr(1)
43 | };
44 | })();
45 | browser = prefix.lowercase;
46 |
47 | if (isTouchDevice) {
48 | touch = true;
49 | }else{
50 | touch = false;
51 | }
52 | if (navigator.userAgent.indexOf('Safari') != -1){
53 | if (navigator.userAgent.indexOf('Chrome') == -1){
54 | webkit = 'safari';
55 | } else {
56 | webkit = 'chrome';
57 | }
58 | }
59 |
60 | ////////////////////////
61 | //Define Variables
62 |
63 | function sized(){
64 | $('.testerFit .type').bigtext({
65 | minfontsize: 14
66 | });
67 | };
68 | var testerNumber = testerTotal = 0;
69 |
70 | function typetester(e, font, size, tracking, italic, weight, opt){
71 | var option, options, typetester;
72 | var theTester = e;
73 | var size =
74 | font =
75 | tracking =
76 | weight =
77 | italic =
78 | opt =
79 | align =
80 | singleline =
81 | testerfit =
82 | testerSize =
83 | testerFont =
84 | testerTracking =
85 | testerWeight =
86 | testerItalic =
87 | testerOpt =
88 | testerAlign =
89 | testerSingleline =
90 | sizeoptions =
91 | trackingoptions =
92 | weightoptions =
93 | italicoptions =
94 | singlelineoptions =
95 | alignoptions =
96 | optoptions =
97 | optButton =
98 | optDisclaim =
99 | testeroptions =
100 | weightselection =
101 | weightPosition = "";
102 | var obj_weightselection = {};
103 | var elm = 0;
104 | var text = "Try typing here...";
105 | var yes = [ "yes", "true", "hawt", "yup", "yep", "siq", "swell", "chiller", "ok", "!", "fine", "right", "good", "aye", "indubitably", "sure", "yeah", "yay"];
106 | var no = [ "sus", "no", "nah", "nvm", "false", "rathernot", "nope", "naaah", "naah", "bye", "fart", "sans", "terminal"];
107 |
108 | var alignValues = ["left", "center", "right"];
109 |
110 | var optValues = {
111 |
112 | //Kerning
113 | kern: "Kerning",
114 |
115 | //Ligatures
116 | liga: "Common",
117 | dlig: "Discretionary",
118 | hlig: "Historical",
119 | clig: "Contextual",
120 |
121 | //Letter Case
122 | smcp: "Small Caps",
123 | c2sc: "All Small Cap",
124 |
125 | //Number Case
126 | lnum: "Lining",
127 | onum: "Old-Style",
128 |
129 | //Number Spacing
130 | pnum: "Proportional",
131 | tnum: "Tabular",
132 |
133 | //Fractions
134 | frac: "Fractions",
135 | afrc: "Alt Fractions",
136 |
137 | //Numeric Extras
138 | zero: "Slashed Zero",
139 | nalt: "Alt Numbers",
140 |
141 | //Character Alternatives
142 | swsh: "Swash",
143 | calt: "Contextual",
144 | hist: "Historical",
145 | salt: "Stylistic",
146 |
147 | //Alternative Stylistic Sets
148 | ss01: "Style 1",
149 | ss02: "Style 2",
150 | ss03: "Style 3",
151 | ss04: "Style 4",
152 | ss05: "Style 5",
153 |
154 | //Sub Sup scripts
155 | sups: "Superscript",
156 | subs: "Subscript"
157 | }
158 |
159 | var optName = function (propertyName) {
160 | return optValues[propertyName];
161 | };
162 |
163 | var typeVars = ["sizeoptions", "trackingoptions", "opt", "weightoptions", "italicoptions", "alignoptions", "singlelineoptions", "size", "font", "tracking", "weight", "italic", "align", "singleline", "text"];
164 | $.each(typeVars, function(index, value) {
165 | if ($(theTester).is("["+value+"]")) {
166 | eval(value + " = '" + $(theTester).attr(value) + "'");
167 |
168 | }
169 | });
170 |
171 | if ($(theTester).is("[weightselection]")) {
172 | weightselection = $(theTester).attr("weightselection").replace(/:/g, ',').split(',');
173 | weightselection.forEach(function(val, i) {
174 | weightselection[i] = $.trim(val);
175 | });
176 | weightselection.forEach(function(val, i) {
177 | if (i % 2 === 1) return;
178 | obj_weightselection[val] = weightselection[i + 1];
179 | });
180 | }
181 |
182 | if ($(theTester).is("[optoptions]")) {
183 | optoptions = $(theTester).attr("optoptions").replace(/\s+/g, '').split(',');
184 |
185 | }
186 |
187 | ////////////////////////
188 | // Set tester Number
189 | testerNumber += 1;
190 | $(theTester).addClass("typeTester" + testerNumber);
191 | if (testerNumber%2 == 0){
192 | $(theTester).addClass("even");
193 | }else{
194 | $(theTester).addClass("odd");
195 | }
196 | if (testerNumber == testerTotal) {
197 | $(theTester).addClass("lastTypeTester");
198 |
199 | };
200 |
201 |
202 | ////////////////////////
203 | //FONT
204 | if (font !== ""){
205 | if ($.inArray(size, no) >= 0){
206 | return false;
207 |
208 | }else{
209 | testerFont = " font-family: " + font + ", Fakta Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif;";
210 |
211 | }
212 |
213 | }
214 |
215 |
216 | ////////////////////////
217 | //SIZE
218 | if (size !== ""){
219 | if ($.inArray(size, no) >= 0){
220 | testerfit = "testerFit ";
221 | return false;
222 |
223 | }else{
224 | testerSize = " font-size: " + size + "px;";
225 |
226 | }
227 |
228 | }else{
229 | testerfit = "testerFit ";
230 |
231 | }
232 | if (sizeoptions !== ""){
233 | elm += 1;
234 | if ($.inArray(sizeoptions, no) >= 0){
235 | sizeoptions = "";
236 | elm -= 1;
237 |
238 | }else{
239 | testerfit = "";
240 | if (size == ""){
241 | size = "80";
242 |
243 | }
244 | sizeoptions = "\
245 | \
246 | size\
247 | \
248 |
\
249 | ";
250 | }
251 |
252 | }
253 |
254 | ////////////////////////
255 | //TRACKING
256 | if (tracking !== ""){
257 | if ($.inArray(tracking, no) >= 0){
258 | testerTracking = " letter-spacing: 0;";
259 | tracking = "0";
260 | return false;
261 |
262 | }else{
263 | testerTracking = " letter-spacing: " + tracking + "em;";
264 |
265 | }
266 |
267 | }else{
268 | testerTracking = " letter-spacing: 0;";
269 | tracking = "0";
270 |
271 | }
272 | if (trackingoptions !== ""){
273 | elm += 1;
274 | if ($.inArray(trackingoptions, no) >= 0){
275 | trackingoptions = "";
276 | elm -= 1;
277 |
278 | }else{
279 | trackingoptions = "\
280 | \
281 | tracking\
282 | \
283 |
\
284 | ";
285 |
286 | }
287 | }
288 |
289 | ////////////////////////
290 | //WEIGHT
291 | if (weight !== ""){
292 | if ($.inArray(weight, no) >= 0){
293 | testerWeight = " font-weight: normal;";
294 | weight = "400";
295 | return false;
296 |
297 | }else{
298 | testerWeight = " font-weight: " + weight + ";";
299 |
300 | }
301 | }else{
302 | if (weightselection == ""){
303 | testerWeight = " font-weight: normal;";
304 | weight = "400";
305 | }
306 | }
307 |
308 | if (weightoptions !== ""){
309 | elm += 1;
310 | if ($.inArray(weightoptions, no) >= 0){
311 | weightoptions = "";
312 | elm -= 1;
313 |
314 | }else{
315 | weightoptions = "\
316 | \
317 | weight\
318 | \
319 |
\
320 | ";
321 |
322 | }
323 | }
324 |
325 | if (weightselection !== ""){
326 | elm += 1;
327 | if ($.inArray(weightselection, no) >= 0){
328 | weightselection = "";
329 | elm -= 1;
330 |
331 | }else{
332 | if (weight !== ""){ }else{
333 | if ($.inArray(weightselection, no) >= 0){
334 | testerWeight = " font-weight: normal;";
335 | weight = "400";
336 | return false;
337 |
338 | }else{
339 | weight = obj_weightselection[Object.keys(obj_weightselection)[0]];
340 | testerWeight = " font-weight: " + obj_weightselection[Object.keys(obj_weightselection)[0]] + ";";
341 | }
342 | }
343 |
344 | weightoptions = "\
345 | \
346 | weight\
347 | \
348 |
\
349 | ";
350 | }
351 | }else{
352 | if (weight == ""){
353 | testerWeight = " font-weight: normal;";
354 | weight = "400";
355 | }
356 | }
357 |
358 |
359 |
360 |
361 | ////////////////////////
362 | //ITALICS
363 | if (italic !== ""){
364 | if ($.inArray(italic, no) >= 0){
365 | testerItalic = " font-style: initial;";
366 | return false;
367 |
368 | }else{
369 | italic = "italic";
370 |
371 | }
372 | testerItalic = " font-style: " + italic + ";";
373 |
374 | }else{
375 | testerItalic = " font-style: initial;";
376 |
377 | }
378 |
379 | if (italicoptions !== ""){
380 | elm += 1;
381 | if ($.inArray(italicoptions, no) >= 0){
382 | italicoptions = "";
383 | elm -= 1;
384 |
385 | }else{
386 | italicoptions = "\
387 | \
388 | italic\
389 |
\
390 | ";
391 |
392 | }
393 | }
394 |
395 |
396 | ////////////////////////
397 | //Open Type Feautures
398 | if (optoptions !== ""){
399 | elm += 1;
400 | if ($.inArray(optoptions, no) >= 0){
401 | optoptions = "";
402 | elm -= 1;
403 |
404 | }else{
405 | $.each(optoptions, function(index, value) {
406 | testerOpt += '' + optName(value) + '';
407 | });
408 | optoptions = "\
409 | \
415 | ";
416 | $(theTester).addClass("withOptions");
417 |
418 | }
419 | }
420 |
421 | if (optoptions !== ""){
422 | if ($.inArray(optoptions, no) <= 0){
423 | if (webkit == "safari" || browser == "moz") {
424 | optDisclaim = "Switch browsers for better OPT support";
425 | }
426 | }
427 | }
428 |
429 |
430 | ////////////////////////
431 | //Alignment
432 | if (size !== ""){
433 | if (align !== ""){
434 | testerAlign = " text-align: " + align + ";";
435 | }else{
436 | testerAlign = " text-align: left;"
437 | }
438 |
439 | if (alignoptions !== ""){
440 | elm += 1;
441 | if ($.inArray(alignoptions, no) >= 0){
442 | alignoptions = "";
443 | elm -= 1;
444 |
445 | }else{
446 | if (align == ""){
447 | align = "center";
448 |
449 | }
450 | alignoptions = "\
451 | \
452 | align\
453 | \
454 |
\
455 | ";
456 | }
457 | }
458 | }
459 |
460 | ////////////////////////
461 | //Singleline
462 | if (size !== ""){
463 | if (singleline !== ""){
464 | if ($.inArray(singleline, no) >= 0){
465 | testerSingleline = " white-space: initial;"
466 | }else{
467 | testerSingleline = " white-space: nowrap;";
468 | }
469 | }else{
470 | testerSingleline = " white-space: initial;"
471 | }
472 |
473 | if (singlelineoptions !== ""){
474 | elm += 1;
475 | if ($.inArray(singlelineoptions, no) >= 0){
476 | singlelineoptions = "";
477 | elm -= 1;
478 |
479 | }else{
480 | singlelineoptions = "\
481 | \
482 | singleline\
483 |
\
484 | ";
485 |
486 | }
487 | }
488 | }
489 |
490 |
491 | ////////////////////////
492 | //Text Fallback
493 | if (font !== "") {
494 | if (text == "Try typing here...") {
495 | text = "Try " + font;
496 | };
497 | };
498 |
499 |
500 | ////////////////////////
501 | //Put them all together
502 | totaloptions = sizeoptions + trackingoptions + weightoptions + italicoptions + singlelineoptions + alignoptions + optoptions;
503 |
504 | if (options !== "false"){
505 | testeroptions = "\
506 | " +
507 | totaloptions + optDisclaim +
508 | "
"
509 | }
510 |
511 | typetester = "\
512 | \
513 |
\
514 | " + text + "\
515 |
\
516 |
size
"));if(""!==l){if(0<=$.inArray(l,d))return testerTracking=" letter-spacing: 0;",l="0",!1;testerTracking=" letter-spacing: "+l+"em;"}else testerTracking=" letter-spacing: 0;",l="0";""!==trackingoptions&&(c+=1,0<=$.inArray(trackingoptions,d)?(trackingoptions="",--c):trackingoptions="tracking
");
9 | if(""!==e){if(0<=$.inArray(e,d))return testerWeight=" font-weight: normal;",e="400",!1;testerWeight=" font-weight: "+e+";"}else""==weightselection&&(testerWeight=" font-weight: normal;",e="400");""!==weightoptions&&(c+=1,0<=$.inArray(weightoptions,d)?(weightoptions="",--c):weightoptions="weight
");if(""!==weightselection)if(c+=1,0<=$.inArray(weightselection,d))weightselection=
10 | "",--c;else{if(""===e){if(0<=$.inArray(weightselection,d))return testerWeight=" font-weight: normal;",e="400",!1;e=k[Object.keys(k)[0]];testerWeight=" font-weight: "+k[Object.keys(k)[0]]+";"}weightoptions="weight
"}else""==e&&(testerWeight=" font-weight: normal;",e="400");if(""!==m){if(0<=$.inArray(m,d))return testerItalic=" font-style: initial;",!1;testerItalic=
11 | " font-style: italic;"}else testerItalic=" font-style: initial;";""!==italicoptions&&(c+=1,0<=$.inArray(italicoptions,d)?(italicoptions="",--c):italicoptions="italic
");""!==optoptions&&(c+=1,0<=$.inArray(optoptions,d)?(optoptions="",--c):($.each(optoptions,function(a,b){testerOpt+=''+q[b]+""}),optoptions="",$(a).addClass("withOptions")));""!==optoptions&&0>=$.inArray(optoptions,d)&&("safari"==webkit||"moz"==browser)&&(optDisclaim="Switch browsers for better OPT support");""!==g&&(testerAlign=""!==align?" text-align: "+align+";":" text-align: left;",""!==alignoptions&&(c+=1,0<=$.inArray(alignoptions,d)?(alignoptions="",--c):(""==align&&(align="center"),alignoptions="align
")));""!==g&&(testerSingleline=""!==singleline?0<=$.inArray(singleline,d)?" white-space: initial;":" white-space: nowrap;":" white-space: initial;",""!==singlelineoptions&&(c+=1,0<=$.inArray(singlelineoptions,d)?(singlelineoptions="",--c):singlelineoptions="singleline
"));""!==f&&"Try typing here..."==
14 | n&&(n="Try "+f);totaloptions=sizeoptions+trackingoptions+weightoptions+italicoptions+singlelineoptions+alignoptions+optoptions;testeroptions=""+totaloptions+optDisclaim+"
";f=""+testeroptions;typetesterFont=
15 | "";$(a).append(f);$("body").append(typetesterFont);""!==sizeoptions&&$(".sizeSlider"+testerNumber).slider({orientation:"horizontal",range:"min",min:15,max:215,value:g,animate:!0,slide:function(a,b){$(this).find(".amount").text(b.value+"px");$(this).parent().parent().find(".type").css("font-size",b.value+"px")},create:function(a,b){$(this).find(".amount").text(g+"px");$(this).parent().parent().find(".type").css("font-size",g+"px")}});""!==trackingoptions&&$(".trackingSlider"+testerNumber).slider({orientation:"horizontal",
16 | range:"min",min:-.25,max:1,step:.01,value:l,animate:!0,slide:function(a,b){$(this).find(".amount").text(b.value+"em");$(this).parent().parent().find(".type").css("letter-spacing",b.value+"em")},create:function(a,b){$(this).find(".amount").text(l+"em");$(this).parent().parent().find(".type").css("letter-spacing",l+"em")}});""!==weightoptions&&""==weightselection&&$(".weightSlider"+testerNumber).slider({orientation:"horizontal",range:"min",min:100,max:900,step:100,value:e,animate:!0,slide:function(a,
17 | b){$(this).find(".amount").text(b.value);$(this).parent().parent().find(".type").css("font-weight",b.value)},create:function(a,b){$(this).find(".amount").text(e);$(this).parent().parent().find(".type").css("font-weight",e)}});f=0;for(i in k)e==k[i]&&(firstWeightPosition=f+=1,firstWeightName=i,firstWeightValue=k[i]);""!==weightselection&&$(".weightSlider"+testerNumber).slider({orientation:"horizontal",range:"min",min:1,max:Object.keys(k).length,step:1,value:firstWeightPosition,animate:!0,slide:function(a,
18 | b){$(this).find(".amount").text(Object.keys(k)[b.value-1]);$(this).parent().parent().find(".type").css("font-weight",k[Object.keys(k)[b.value-1]])},create:function(a,b){$(this).find(".amount").text(firstWeightName);$(this).parent().parent().find(".type").css("font-weight",firstWeightValue)}});""!==italicoptions&&("italic"==$(".italicButton"+testerNumber).parent().parent().find(".type").css("font-style")&&$(".italicButton"+testerNumber).addClass("active"),$(".italicButton"+testerNumber).click(function(){$(this).toggleClass("active");
19 | $(this).hasClass("active")?$(this).parent().parent().find(".type").css("font-style","italic"):$(this).parent().parent().find(".type").css("font-style","initial")}));if(""!==h){if(0<=$.inArray(h,d))return h="",!1;$(a).find(".type").css("-moz-font-feature-settings",'"'+h+'" 1');$(a).find(".type").css("-moz-font-feature-settings",'"'+h+'"=1');$(a).find(".type").css("-ms-font-feature-settings",'"'+h+'" 1');$(a).find(".type").css("-o-font-feature-settings",'"'+h+'" 1');$(a).find(".type").css("-webkit-font-feature-settings",
20 | '"'+h+'" 1');$(a).find(".type").css("font-feature-settings",'"'+h+'" 1');""!==optoptions&&0>=$.inArray(optoptions,d)&&($(a).find(".optButton").attr("active",h),$(a).find("."+h).addClass("active"),$(a).find(".optButton").addClass("active"),$(a).find(".optButton .label").addClass("active"),$(a).find(".optButton .label").text(h))}""!==optoptions&&($(".optButton"+testerNumber+" .label").click(function(){$(this).parent().toggleClass("open")}),$(".optButton"+testerNumber+" .dropdown span").click(function(){optButton=
21 | $(this).parent().parent();if($(this).hasClass("active"))return optButton.attr("active","features"),$(this).removeClass("active"),optButton.removeClass("active"),optButton.find(".label").removeClass("active"),optButton.find(".label").text(optButton.attr("active")),$(a).find(".type").css("-moz-font-feature-settings","inherit"),$(a).find(".type").css("-ms-font-feature-settings","inherit"),$(a).find(".type").css("-o-font-feature-settings","inherit"),$(a).find(".type").css("-webkit-font-feature-settings",
22 | "inherit"),$(a).find(".type").css("font-feature-settings","inherit"),!1;$(this).parent().find("span").removeClass("active");optButton.attr("active",$(this).attr("class"));$(this).addClass("active");optButton.addClass("active");optButton.find(".label").addClass("active");optButton.find(".label").text(optButton.attr("active"));$(a).find(".type").css("-moz-font-feature-settings",'"'+optButton.attr("active")+'" 1');$(a).find(".type").css("-moz-font-feature-settings",'"'+optButton.attr("active")+'"=1');
23 | $(a).find(".type").css("-ms-font-feature-settings",'"'+optButton.attr("active")+'" 1');$(a).find(".type").css("-o-font-feature-settings",'"'+optButton.attr("active")+'" 1');$(a).find(".type").css("-webkit-font-feature-settings",'"'+optButton.attr("active")+'" 1');$(a).find(".type").css("font-feature-settings",'"'+optButton.attr("active")+'" 1')}));""!==g&&(""!==singlelineoptions&&("nowrap"==$(".singlelineButton"+testerNumber).parent().parent().find(".enterTXT").css("white-space")&&$(".singlelineButton"+
24 | testerNumber).addClass("active"),$(".singlelineButton"+testerNumber).click(function(){$(this).toggleClass("active");$(this).hasClass("active")?$(this).parent().parent().find(".enterTXT").css("white-space","nowrap"):$(this).parent().parent().find(".enterTXT").css("white-space","initial")})),""!==alignoptions&&$(".alignSlider"+testerNumber).slider({orientation:"horizontal",range:"min",min:1,max:3,value:p.indexOf(align)+1,animate:!0,slide:function(a,b){$(this).find(".amount").text(p[b.value-1]);$(this).parent().parent().find(".type").css("text-align",
25 | p[b.value-1])},create:function(a,b){$(this).find(".amount").text(align);$(this).parent().parent().find(".type").css("text-align",align)}}))}$(document).ready(function(){$(".typeTester").each(function(a,f){testerTotal+=1});$(".typeTester").each(function(a,f){typetester(f)});sized()});$(window).load(function(){$(".type").keyup(function(){sized()});sized()});
--------------------------------------------------------------------------------
/build/js/typeTester_forCloserCompiler.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////
2 | //////////////// ///////////////
3 | //////////////// FUNCTIONS ///////////////
4 | //////////////// ///////////////
5 | ////////////////////////////////////////////////
6 |
7 |
8 | ////////////////////////////////////////////////
9 | //TYPE TESTER BEGINS
10 | ////////////////////////////////////////////////
11 |
12 | ////////////////////////
13 | //IF MOBILE
14 |
15 | function isMobile() {
16 | if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/IEMobile/i)){
17 | return true; } else { return false; }
18 | }
19 | function iphone() {
20 | if(navigator.userAgent.match(/iPhone|iPad|iPod/i)){
21 | return true; } else { return false; }
22 | }
23 | var isTouchDevice = 'ontouchstart' in document.documentElement;
24 |
25 | ////////////////////////
26 | //GET VENDOR PREFIXES
27 |
28 | var browser, webkit, touch;
29 |
30 | var prefix = (function () {
31 | var styles = window.getComputedStyle(document.documentElement, ''),
32 | pre = (Array.prototype.slice
33 | .call(styles)
34 | .join('')
35 | .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
36 | )[1],
37 | dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
38 | return {
39 | dom: dom,
40 | lowercase: pre,
41 | css: '-' + pre + '-',
42 | js: pre[0].toUpperCase() + pre.substr(1)
43 | };
44 | })();
45 | browser = prefix.lowercase;
46 |
47 | if (isTouchDevice) {
48 | touch = true;
49 | }else{
50 | touch = false;
51 | }
52 | if (navigator.userAgent.indexOf('Safari') != -1){
53 | if (navigator.userAgent.indexOf('Chrome') == -1){
54 | webkit = 'safari';
55 | } else {
56 | webkit = 'chrome';
57 | }
58 | }
59 |
60 | ////////////////////////
61 | //Define Variables
62 |
63 | function sized(){
64 | $('.testerFit .type').bigtext({
65 | minfontsize: 14
66 | });
67 | };
68 | var testerNumber = testerTotal = 0;
69 |
70 | function typetester(e, font, size, tracking, italic, weight, opt){
71 | var option, options, typetester;
72 | var theTester = e;
73 | var size =
74 | font =
75 | tracking =
76 | weight =
77 | italic =
78 | opt =
79 | align =
80 | singleline =
81 | testerfit =
82 | testerSize =
83 | testerFont =
84 | testerTracking =
85 | testerWeight =
86 | testerItalic =
87 | testerOpt =
88 | testerAlign =
89 | testerSingleline =
90 | sizeoptions =
91 | trackingoptions =
92 | weightoptions =
93 | italicoptions =
94 | singlelineoptions =
95 | alignoptions =
96 | optoptions =
97 | optButton =
98 | optDisclaim =
99 | testeroptions =
100 | weightselection =
101 | weightPosition = "";
102 | var obj_weightselection = {};
103 | var elm = 0;
104 | var text = "Try typing here...";
105 | var yes = [ "yes", "true", "hawt", "yup", "yep", "siq", "swell", "chiller", "ok", "!", "fine", "right", "good", "aye", "indubitably", "sure", "yeah", "yay"];
106 | var no = [ "sus", "no", "nah", "nvm", "false", "rathernot", "nope", "naaah", "naah", "bye", "fart", "sans", "terminal"];
107 |
108 | var alignValues = ["left", "center", "right"];
109 |
110 | var optValues = {
111 |
112 | //Kerning
113 | kern: "Kerning",
114 |
115 | //Ligatures
116 | liga: "Common",
117 | dlig: "Discretionary",
118 | hlig: "Historical",
119 | clig: "Contextual",
120 |
121 | //Letter Case
122 | smcp: "Small Caps",
123 | c2sc: "All Small Cap",
124 |
125 | //Number Case
126 | lnum: "Lining",
127 | onum: "Old-Style",
128 |
129 | //Number Spacing
130 | pnum: "Proportional",
131 | tnum: "Tabular",
132 |
133 | //Fractions
134 | frac: "Fractions",
135 | afrc: "Alt Fractions",
136 |
137 | //Numeric Extras
138 | zero: "Slashed Zero",
139 | nalt: "Alt Numbers",
140 |
141 | //Character Alternatives
142 | swsh: "Swash",
143 | calt: "Contextual",
144 | hist: "Historical",
145 | salt: "Stylistic",
146 |
147 | //Alternative Stylistic Sets
148 | ss01: "Style 1",
149 | ss02: "Style 2",
150 | ss03: "Style 3",
151 | ss04: "Style 4",
152 | ss05: "Style 5",
153 |
154 | //Sub Sup scripts
155 | sups: "Superscript",
156 | subs: "Subscript"
157 | }
158 |
159 | var optName = function (propertyName) {
160 | return optValues[propertyName];
161 | };
162 |
163 | var typeVars = ["sizeoptions", "trackingoptions", "opt", "weightoptions", "italicoptions", "alignoptions", "singlelineoptions", "size", "font", "tracking", "weight", "italic", "align", "singleline", "text"];
164 | $.each(typeVars, function(index, value) {
165 | if ($(theTester).is("["+value+"]")) {
166 | eval(value + " = '" + $(theTester).attr(value) + "'");
167 |
168 | }
169 | });
170 |
171 | if ($(theTester).is("[weightselection]")) {
172 | weightselection = $(theTester).attr("weightselection").replace(/:/g, ',').split(',');
173 | weightselection.forEach(function(val, i) {
174 | weightselection[i] = $.trim(val);
175 | });
176 | weightselection.forEach(function(val, i) {
177 | if (i % 2 === 1) return;
178 | obj_weightselection[val] = weightselection[i + 1];
179 | });
180 | }
181 |
182 | if ($(theTester).is("[optoptions]")) {
183 | optoptions = $(theTester).attr("optoptions").replace(/\s+/g, '').split(',');
184 |
185 | }
186 |
187 | ////////////////////////
188 | // Set tester Number
189 | testerNumber += 1;
190 | $(theTester).addClass("typeTester" + testerNumber);
191 | if (testerNumber%2 == 0){
192 | $(theTester).addClass("even");
193 | }else{
194 | $(theTester).addClass("odd");
195 | }
196 | if (testerNumber == testerTotal) {
197 | $(theTester).addClass("lastTypeTester");
198 |
199 | };
200 |
201 |
202 | ////////////////////////
203 | //FONT
204 | if (font !== ""){
205 | if ($.inArray(size, no) >= 0){
206 | return false;
207 |
208 | }else{
209 | testerFont = " font-family: " + font + ", 'Fakta Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;";
210 |
211 | }
212 |
213 | }
214 |
215 |
216 | ////////////////////////
217 | //SIZE
218 | if (size !== ""){
219 | if ($.inArray(size, no) >= 0){
220 | testerfit = "testerFit ";
221 | return false;
222 |
223 | }else{
224 | testerSize = " font-size: " + size + "px;";
225 |
226 | }
227 |
228 | }else{
229 | testerfit = "testerFit ";
230 |
231 | }
232 | if (sizeoptions !== ""){
233 | elm += 1;
234 | if ($.inArray(sizeoptions, no) >= 0){
235 | sizeoptions = "";
236 | elm -= 1;
237 |
238 | }else{
239 | testerfit = "";
240 | if (size == ""){
241 | size = "80";
242 |
243 | }
244 | sizeoptions = "size
";
245 | }
246 |
247 | }
248 |
249 | ////////////////////////
250 | //TRACKING
251 | if (tracking !== ""){
252 | if ($.inArray(tracking, no) >= 0){
253 | testerTracking = " letter-spacing: 0;";
254 | tracking = "0";
255 | return false;
256 |
257 | }else{
258 | testerTracking = " letter-spacing: " + tracking + "em;";
259 |
260 | }
261 |
262 | }else{
263 | testerTracking = " letter-spacing: 0;";
264 | tracking = "0";
265 |
266 | }
267 | if (trackingoptions !== ""){
268 | elm += 1;
269 | if ($.inArray(trackingoptions, no) >= 0){
270 | trackingoptions = "";
271 | elm -= 1;
272 |
273 | }else{
274 | trackingoptions = "tracking
";
275 |
276 | }
277 | }
278 |
279 | ////////////////////////
280 | //WEIGHT
281 | if (weight !== ""){
282 | if ($.inArray(weight, no) >= 0){
283 | testerWeight = " font-weight: normal;";
284 | weight = "400";
285 | return false;
286 |
287 | }else{
288 | testerWeight = " font-weight: " + weight + ";";
289 |
290 | }
291 | }else{
292 | if (weightselection == ""){
293 | testerWeight = " font-weight: normal;";
294 | weight = "400";
295 | }
296 | }
297 |
298 | if (weightoptions !== ""){
299 | elm += 1;
300 | if ($.inArray(weightoptions, no) >= 0){
301 | weightoptions = "";
302 | elm -= 1;
303 |
304 | }else{
305 | weightoptions = "weight
";
306 |
307 | }
308 | }
309 |
310 | if (weightselection !== ""){
311 | elm += 1;
312 | if ($.inArray(weightselection, no) >= 0){
313 | weightselection = "";
314 | elm -= 1;
315 |
316 | }else{
317 | if (weight !== ""){ }else{
318 | if ($.inArray(weightselection, no) >= 0){
319 | testerWeight = " font-weight: normal;";
320 | weight = "400";
321 | return false;
322 |
323 | }else{
324 | weight = obj_weightselection[Object.keys(obj_weightselection)[0]];
325 | testerWeight = " font-weight: " + obj_weightselection[Object.keys(obj_weightselection)[0]] + ";";
326 | }
327 | }
328 |
329 | weightoptions = "weight
";
330 | }
331 | }else{
332 | if (weight == ""){
333 | testerWeight = " font-weight: normal;";
334 | weight = "400";
335 | }
336 | }
337 |
338 |
339 |
340 |
341 | ////////////////////////
342 | //ITALICS
343 | if (italic !== ""){
344 | if ($.inArray(italic, no) >= 0){
345 | testerItalic = " font-style: initial;";
346 | return false;
347 |
348 | }else{
349 | italic = "italic";
350 |
351 | }
352 | testerItalic = " font-style: " + italic + ";";
353 |
354 | }else{
355 | testerItalic = " font-style: initial;";
356 |
357 | }
358 |
359 | if (italicoptions !== ""){
360 | elm += 1;
361 | if ($.inArray(italicoptions, no) >= 0){
362 | italicoptions = "";
363 | elm -= 1;
364 |
365 | }else{
366 | italicoptions = "italic
";
367 |
368 | }
369 | }
370 |
371 |
372 | ////////////////////////
373 | //Open Type Feautures
374 | if (optoptions !== ""){
375 | elm += 1;
376 | if ($.inArray(optoptions, no) >= 0){
377 | optoptions = "";
378 | elm -= 1;
379 |
380 | }else{
381 | $.each(optoptions, function(index, value) {
382 | testerOpt += '' + optName(value) + '';
383 | });
384 | optoptions = "";
385 | $(theTester).addClass("withOptions");
386 |
387 | }
388 | }
389 |
390 | if (optoptions !== ""){
391 | if ($.inArray(optoptions, no) <= 0){
392 | if (webkit == "safari" || browser == "moz") {
393 | optDisclaim = "Switch browsers for better OPT support";
394 | }
395 | }
396 | }
397 |
398 |
399 | ////////////////////////
400 | //Alignment
401 | if (size !== ""){
402 | if (align !== ""){
403 | testerAlign = " text-align: " + align + ";";
404 | }else{
405 | testerAlign = " text-align: left;"
406 | }
407 |
408 | if (alignoptions !== ""){
409 | elm += 1;
410 | if ($.inArray(alignoptions, no) >= 0){
411 | alignoptions = "";
412 | elm -= 1;
413 |
414 | }else{
415 | if (align == ""){
416 | align = "center";
417 |
418 | }
419 | alignoptions = "align
";
420 | }
421 | }
422 | }
423 |
424 | ////////////////////////
425 | //Singleline
426 | if (size !== ""){
427 | if (singleline !== ""){
428 | if ($.inArray(singleline, no) >= 0){
429 | testerSingleline = " white-space: initial;"
430 | }else{
431 | testerSingleline = " white-space: nowrap;";
432 | }
433 | }else{
434 | testerSingleline = " white-space: initial;"
435 | }
436 |
437 | if (singlelineoptions !== ""){
438 | elm += 1;
439 | if ($.inArray(singlelineoptions, no) >= 0){
440 | singlelineoptions = "";
441 | elm -= 1;
442 |
443 | }else{
444 | singlelineoptions = "singleline
";
445 |
446 | }
447 | }
448 | }
449 |
450 |
451 | ////////////////////////
452 | //Text Fallback
453 | if (font !== "") {
454 | if (text == "Try typing here...") {
455 | text = "Try " + font;
456 | };
457 | };
458 |
459 |
460 | ////////////////////////
461 | //Put them all together
462 | totaloptions = sizeoptions + trackingoptions + weightoptions + italicoptions + singlelineoptions + alignoptions + optoptions;
463 |
464 | if (options !== "false"){
465 | testeroptions = "" +
466 | totaloptions + optDisclaim +
467 | "
"
468 | }
469 |
470 | typetester = "" + testeroptions;
471 | typetesterFont = "";
472 |
473 | $(theTester).append(typetester);
474 | $("body").append(typetesterFont);
475 |
476 |
477 | ////////////////////////
478 | //ADD INTERACTIONS
479 | if (sizeoptions !== ""){
480 |
481 | $(".sizeSlider" + testerNumber).slider({
482 | orientation: "horizontal",
483 | range: "min",
484 | min: 15,
485 | max: 215,
486 | value: size,
487 | animate: true,
488 | slide: function(event, ui) {
489 | $(this).find( ".amount" ).text(ui.value + "px");
490 | $(this).parent().parent().find( ".type" ).css("font-size", ui.value + "px");
491 | },
492 | create: function( event, ui ) {
493 | $(this).find( ".amount" ).text(size + "px");
494 | $(this).parent().parent().find( ".type" ).css("font-size", size + "px");
495 | }
496 | });
497 | }
498 |
499 | if (trackingoptions !== ""){
500 | $(".trackingSlider" + testerNumber).slider({
501 | orientation: "horizontal",
502 | range: "min",
503 | min: -0.25,
504 | max: 1,
505 | step: 0.01,
506 | value: tracking,
507 | animate: true,
508 | slide: function(event, ui) {
509 | $(this).find( ".amount" ).text(ui.value + "em");
510 | $(this).parent().parent().find( ".type" ).css("letter-spacing", ui.value + "em");
511 | },
512 | create: function( event, ui ) {
513 | $(this).find( ".amount" ).text(tracking + "em");
514 | $(this).parent().parent().find( ".type" ).css("letter-spacing", tracking + "em");
515 | }
516 |
517 | });
518 | };
519 |
520 |
521 | if (weightoptions !== ""){
522 | if (weightselection == "") {
523 | $(".weightSlider" + testerNumber).slider({
524 | orientation: "horizontal",
525 | range: "min",
526 | min: 100,
527 | max: 900,
528 | step: 100,
529 | value: weight,
530 | animate: true,
531 | slide: function(event, ui) {
532 | $(this).find( ".amount" ).text(ui.value);
533 | $(this).parent().parent().find( ".type" ).css("font-weight", ui.value);
534 | },
535 | create: function( event, ui ) {
536 | $(this).find( ".amount" ).text(weight);
537 | $(this).parent().parent().find( ".type" ).css("font-weight", weight);
538 | }
539 | });
540 | }
541 | };
542 |
543 | var ticker = 0
544 | for(i in obj_weightselection) {
545 | if (weight == obj_weightselection[i]) {
546 | ticker += 1;
547 | firstWeightPosition = ticker;
548 | firstWeightName = i;
549 | firstWeightValue = obj_weightselection[i];
550 | }
551 | }
552 | if (weightselection !== "") {
553 | $(".weightSlider" + testerNumber).slider({
554 | orientation: "horizontal",
555 | range: "min",
556 | min: 1,
557 | max: Object.keys(obj_weightselection).length,
558 | step: 1,
559 | value: firstWeightPosition,
560 | animate: true,
561 | slide: function(event, ui) {
562 | $(this).find( ".amount" ).text(Object.keys(obj_weightselection)[ui.value-1]);
563 | $(this).parent().parent().find( ".type" ).css("font-weight", obj_weightselection[Object.keys(obj_weightselection)[ui.value-1]]);
564 | },
565 | create: function( event, ui ) {
566 | $(this).find( ".amount" ).text(firstWeightName);
567 | $(this).parent().parent().find( ".type" ).css("font-weight", firstWeightValue);
568 |
569 | }
570 | });
571 | }
572 |
573 |
574 | if (italicoptions !== ""){
575 | if ($(".italicButton" + testerNumber).parent().parent().find( ".type" ).css("font-style") == "italic"){
576 | $(".italicButton" + testerNumber).addClass("active");
577 |
578 | }
579 | $(".italicButton" + testerNumber).click(function(){
580 | $(this).toggleClass("active");
581 | if ($(this).hasClass("active")) {
582 | $(this).parent().parent().find( ".type" ).css("font-style", "italic");
583 |
584 | }else{
585 | $(this).parent().parent().find( ".type" ).css("font-style", "initial");
586 |
587 | };
588 | });
589 | };
590 |
591 | if (opt !== ""){
592 | if ($.inArray(opt, no) >= 0){
593 | opt = "";
594 | return false;
595 |
596 | }else{
597 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + opt + '" 1');
598 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + opt + '"=1');
599 | $(theTester).find(".type").css("-ms-font-feature-settings", '"' + opt + '" 1');
600 | $(theTester).find(".type").css("-o-font-feature-settings", '"' + opt + '" 1');
601 | $(theTester).find(".type").css("-webkit-font-feature-settings", '"' + opt + '" 1');
602 | $(theTester).find(".type").css("font-feature-settings", '"' + opt + '" 1');
603 | }
604 | if (optoptions !== ""){
605 | if ($.inArray(optoptions, no) <= 0){
606 | $(theTester).find(".optButton").attr('active', opt);
607 | $(theTester).find("."+opt).addClass('active');
608 | $(theTester).find(".optButton").addClass('active');
609 | $(theTester).find(".optButton .label").addClass('active');
610 | $(theTester).find(".optButton .label").text( opt );
611 | }
612 |
613 | }
614 |
615 | }
616 |
617 | if (optoptions !== ""){
618 | $(".optButton" + testerNumber + " .label").click( function(){
619 | $(this).parent().toggleClass('open');
620 |
621 | });
622 | $(".optButton" + testerNumber + " .dropdown span").click( function(){
623 | optButton = $(this).parent().parent();
624 | if ($(this).hasClass("active")){
625 | optButton.attr('active', 'features');
626 | $(this).removeClass('active');
627 | optButton.removeClass('active');
628 | optButton.find(".label").removeClass('active');
629 | optButton.find(".label").text( optButton.attr('active') );
630 |
631 | $(theTester).find(".type").css("-moz-font-feature-settings", "inherit");
632 | $(theTester).find(".type").css("-ms-font-feature-settings", "inherit");
633 | $(theTester).find(".type").css("-o-font-feature-settings", "inherit");
634 | $(theTester).find(".type").css("-webkit-font-feature-settings", "inherit");
635 | $(theTester).find(".type").css("font-feature-settings", "inherit");
636 | return false;
637 | }
638 | $(this).parent().find("span").removeClass("active");
639 | optButton.attr('active', $(this).attr('class'));
640 | $(this).addClass('active');
641 | optButton.addClass('active');
642 | optButton.find(".label").addClass('active');
643 | optButton.find(".label").text( optButton.attr('active') );
644 |
645 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + optButton.attr('active') + '" 1');
646 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + optButton.attr('active') + '"=1');
647 | $(theTester).find(".type").css("-ms-font-feature-settings", '"' + optButton.attr('active') + '" 1');
648 | $(theTester).find(".type").css("-o-font-feature-settings", '"' + optButton.attr('active') + '" 1');
649 | $(theTester).find(".type").css("-webkit-font-feature-settings", '"' + optButton.attr('active') + '" 1');
650 | $(theTester).find(".type").css("font-feature-settings", '"' + optButton.attr('active') + '" 1');
651 |
652 | });
653 |
654 | };
655 |
656 |
657 | if (size !== ""){
658 |
659 | if (singlelineoptions !== ""){
660 | if ($(".singlelineButton" + testerNumber).parent().parent().find( ".enterTXT" ).css("white-space") == "nowrap"){
661 | $(".singlelineButton" + testerNumber).addClass("active");
662 |
663 | }
664 | $(".singlelineButton" + testerNumber).click(function(){
665 | $(this).toggleClass("active");
666 | if ($(this).hasClass("active")) {
667 | $(this).parent().parent().find( ".enterTXT" ).css("white-space", "nowrap");
668 |
669 | }else{
670 | $(this).parent().parent().find( ".enterTXT" ).css("white-space", "initial");
671 |
672 | };
673 | });
674 | };
675 |
676 |
677 | if (alignoptions !== ""){
678 | $(".alignSlider" + testerNumber).slider({
679 | orientation: "horizontal",
680 | range: "min",
681 | min: 1,
682 | max: 3,
683 | value: alignValues.indexOf(align) + 1,
684 | animate: true,
685 | slide: function(event, ui) {
686 | $(this).find( ".amount" ).text(alignValues[ui.value - 1]);
687 | $(this).parent().parent().find( ".type" ).css("text-align", alignValues[ui.value - 1]);
688 | },
689 | create: function( event, ui ) {
690 | $(this).find( ".amount" ).text(align);
691 | $(this).parent().parent().find( ".type" ).css("text-align", align);
692 | }
693 | });
694 | }
695 | }
696 | }
697 |
698 |
699 | ////////////////////////
700 | //LOAD
701 | $( document ).ready(function() {
702 |
703 | $(".typeTester").each( function(i, e){
704 | testerTotal += 1;
705 | });
706 | $(".typeTester").each( function(i, e){
707 | typetester(e);
708 | });
709 |
710 | sized();
711 |
712 | });
713 | $(window).load(function() {
714 | $(".type").keyup(function(){
715 | sized();
716 | });
717 | sized();
718 |
719 | }); // `~*# The end.
720 |
--------------------------------------------------------------------------------
/examples/example_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quitequinn/TypeTester_TDF/cab643857250227cde1a593f2d34dfbabe7e2fb6/examples/example_1.jpg
--------------------------------------------------------------------------------
/examples/example_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quitequinn/TypeTester_TDF/cab643857250227cde1a593f2d34dfbabe7e2fb6/examples/example_2.jpg
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Type Tester TDF",
3 | "version": "1.0.0",
4 | "description": "Type Tester TDF",
5 | "main": "Gruntfile.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": ""
12 | },
13 | "author": "Quinn Keaveney",
14 | "license": "ISC",
15 | "bugs": {
16 | "url": ""
17 | },
18 | "homepage": "",
19 | "devDependencies": {
20 | "grunt": "^0.4.5",
21 | "grunt-autoprefixer": "^2.1.0",
22 | "grunt-contrib-copy": "^0.6.0",
23 | "grunt-contrib-imagemin": "^0.8.1",
24 | "grunt-contrib-jshint": "^0.10.0",
25 | "grunt-contrib-sass": "^0.8.1",
26 | "grunt-contrib-uglify": "^0.6.0",
27 | "grunt-contrib-watch": "^0.6.1",
28 | "grunt-css-url-embed": "^1.5.1",
29 | "grunt-fontface": "^0.9.0",
30 | "grunt-newer": "^0.7.0",
31 | "grunt-notify": "^0.4.1",
32 | "grunt-responsive-images": "^0.1.4",
33 | "grunt-svgmin": "^1.0.0",
34 | "grunt-webfont": "^0.4.8",
35 | "imagemin-mozjpeg": "^2.0.0"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/js/typeTester.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////
2 | //////////////// ///////////////
3 | //////////////// FUNCTIONS ///////////////
4 | //////////////// ///////////////
5 | ////////////////////////////////////////////////
6 |
7 |
8 | ////////////////////////////////////////////////
9 | //TYPE TESTER BEGINS
10 | ////////////////////////////////////////////////
11 |
12 | ////////////////////////
13 | //IF MOBILE
14 |
15 | function isMobile() {
16 | if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/IEMobile/i)){
17 | return true; } else { return false; }
18 | }
19 | function iphone() {
20 | if(navigator.userAgent.match(/iPhone|iPad|iPod/i)){
21 | return true; } else { return false; }
22 | }
23 | var isTouchDevice = 'ontouchstart' in document.documentElement;
24 |
25 | ////////////////////////
26 | //GET VENDOR PREFIXES
27 |
28 | var browser, webkit, touch;
29 |
30 | var prefix = (function () {
31 | var styles = window.getComputedStyle(document.documentElement, ''),
32 | pre = (Array.prototype.slice
33 | .call(styles)
34 | .join('')
35 | .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
36 | )[1],
37 | dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
38 | return {
39 | dom: dom,
40 | lowercase: pre,
41 | css: '-' + pre + '-',
42 | js: pre[0].toUpperCase() + pre.substr(1)
43 | };
44 | })();
45 | browser = prefix.lowercase;
46 |
47 | if (isTouchDevice) {
48 | touch = true;
49 | }else{
50 | touch = false;
51 | }
52 | if (navigator.userAgent.indexOf('Safari') != -1){
53 | if (navigator.userAgent.indexOf('Chrome') == -1){
54 | webkit = 'safari';
55 | } else {
56 | webkit = 'chrome';
57 | }
58 | }
59 |
60 | ////////////////////////
61 | //Define Variables
62 |
63 | function sized(){
64 | $('.testerFit .type').bigtext({
65 | minfontsize: 14
66 | });
67 | };
68 | var testerNumber = testerTotal = 0;
69 |
70 | function typetester(e, font, size, tracking, italic, weight, opt){
71 | var option, options, typetester;
72 | var theTester = e;
73 | var size =
74 | font =
75 | tracking =
76 | weight =
77 | italic =
78 | opt =
79 | align =
80 | singleline =
81 | testerfit =
82 | testerSize =
83 | testerFont =
84 | testerTracking =
85 | testerWeight =
86 | testerItalic =
87 | testerOpt =
88 | testerAlign =
89 | testerSingleline =
90 | sizeoptions =
91 | trackingoptions =
92 | weightoptions =
93 | italicoptions =
94 | singlelineoptions =
95 | alignoptions =
96 | optoptions =
97 | optButton =
98 | optDisclaim =
99 | testeroptions =
100 | weightselection =
101 | weightPosition = "";
102 | var obj_weightselection = {};
103 | var elm = 0;
104 | var text = "Try typing here...";
105 | var yes = [ "yes", "true", "hawt", "yup", "yep", "siq", "swell", "chiller", "ok", "!", "fine", "right", "good", "aye", "indubitably", "sure", "yeah", "yay"];
106 | var no = [ "sus", "no", "nah", "nvm", "false", "rathernot", "nope", "naaah", "naah", "bye", "fart", "sans", "terminal"];
107 |
108 | var alignValues = ["left", "center", "right"];
109 |
110 | var optValues = {
111 |
112 | //Kerning
113 | kern: "Kerning",
114 |
115 | //Ligatures
116 | liga: "Common",
117 | dlig: "Discretionary",
118 | hlig: "Historical",
119 | clig: "Contextual",
120 |
121 | //Letter Case
122 | smcp: "Small Caps",
123 | c2sc: "All Small Cap",
124 |
125 | //Number Case
126 | lnum: "Lining",
127 | onum: "Old-Style",
128 |
129 | //Number Spacing
130 | pnum: "Proportional",
131 | tnum: "Tabular",
132 |
133 | //Fractions
134 | frac: "Fractions",
135 | afrc: "Alt Fractions",
136 |
137 | //Numeric Extras
138 | zero: "Slashed Zero",
139 | nalt: "Alt Numbers",
140 |
141 | //Character Alternatives
142 | swsh: "Swash",
143 | calt: "Contextual",
144 | hist: "Historical",
145 | salt: "Stylistic",
146 |
147 | //Alternative Stylistic Sets
148 | ss01: "Style 1",
149 | ss02: "Style 2",
150 | ss03: "Style 3",
151 | ss04: "Style 4",
152 | ss05: "Style 5",
153 |
154 | //Sub Sup scripts
155 | sups: "Superscript",
156 | subs: "Subscript"
157 | }
158 |
159 | var optName = function (propertyName) {
160 | return optValues[propertyName];
161 | };
162 |
163 | var typeVars = ["sizeoptions", "trackingoptions", "opt", "weightoptions", "italicoptions", "alignoptions", "singlelineoptions", "size", "font", "tracking", "weight", "italic", "align", "singleline", "text"];
164 | $.each(typeVars, function(index, value) {
165 | if ($(theTester).is("["+value+"]")) {
166 | eval(value + " = '" + $(theTester).attr(value) + "'");
167 |
168 | }
169 | });
170 |
171 | if ($(theTester).is("[weightselection]")) {
172 | weightselection = $(theTester).attr("weightselection").replace(/:/g, ',').split(',');
173 | weightselection.forEach(function(val, i) {
174 | weightselection[i] = $.trim(val);
175 | });
176 | weightselection.forEach(function(val, i) {
177 | if (i % 2 === 1) return;
178 | obj_weightselection[val] = weightselection[i + 1];
179 | });
180 | }
181 |
182 | if ($(theTester).is("[optoptions]")) {
183 | optoptions = $(theTester).attr("optoptions").replace(/\s+/g, '').split(',');
184 |
185 | }
186 |
187 | ////////////////////////
188 | // Set tester Number
189 | testerNumber += 1;
190 | $(theTester).addClass("typeTester" + testerNumber);
191 | if (testerNumber%2 == 0){
192 | $(theTester).addClass("even");
193 | }else{
194 | $(theTester).addClass("odd");
195 | }
196 | if (testerNumber == testerTotal) {
197 | $(theTester).addClass("lastTypeTester");
198 |
199 | };
200 |
201 |
202 | ////////////////////////
203 | //FONT
204 | if (font !== ""){
205 | if ($.inArray(size, no) >= 0){
206 | return false;
207 |
208 | }else{
209 | testerFont = " font-family: " + font + ", Fakta Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif;";
210 |
211 | }
212 |
213 | }
214 |
215 |
216 | ////////////////////////
217 | //SIZE
218 | if (size !== ""){
219 | if ($.inArray(size, no) >= 0){
220 | testerfit = "testerFit ";
221 | return false;
222 |
223 | }else{
224 | testerSize = " font-size: " + size + "px;";
225 |
226 | }
227 |
228 | }else{
229 | testerfit = "testerFit ";
230 |
231 | }
232 | if (sizeoptions !== ""){
233 | elm += 1;
234 | if ($.inArray(sizeoptions, no) >= 0){
235 | sizeoptions = "";
236 | elm -= 1;
237 |
238 | }else{
239 | testerfit = "";
240 | if (size == ""){
241 | size = "80";
242 |
243 | }
244 | sizeoptions = "\
245 | \
246 | size\
247 | \
248 |
\
249 | ";
250 | }
251 |
252 | }
253 |
254 | ////////////////////////
255 | //TRACKING
256 | if (tracking !== ""){
257 | if ($.inArray(tracking, no) >= 0){
258 | testerTracking = " letter-spacing: 0;";
259 | tracking = "0";
260 | return false;
261 |
262 | }else{
263 | testerTracking = " letter-spacing: " + tracking + "em;";
264 |
265 | }
266 |
267 | }else{
268 | testerTracking = " letter-spacing: 0;";
269 | tracking = "0";
270 |
271 | }
272 | if (trackingoptions !== ""){
273 | elm += 1;
274 | if ($.inArray(trackingoptions, no) >= 0){
275 | trackingoptions = "";
276 | elm -= 1;
277 |
278 | }else{
279 | trackingoptions = "\
280 | \
281 | tracking\
282 | \
283 |
\
284 | ";
285 |
286 | }
287 | }
288 |
289 | ////////////////////////
290 | //WEIGHT
291 | if (weight !== ""){
292 | if ($.inArray(weight, no) >= 0){
293 | testerWeight = " font-weight: normal;";
294 | weight = "400";
295 | return false;
296 |
297 | }else{
298 | testerWeight = " font-weight: " + weight + ";";
299 |
300 | }
301 | }else{
302 | if (weightselection == ""){
303 | testerWeight = " font-weight: normal;";
304 | weight = "400";
305 | }
306 | }
307 |
308 | if (weightoptions !== ""){
309 | elm += 1;
310 | if ($.inArray(weightoptions, no) >= 0){
311 | weightoptions = "";
312 | elm -= 1;
313 |
314 | }else{
315 | weightoptions = "\
316 | \
317 | weight\
318 | \
319 |
\
320 | ";
321 |
322 | }
323 | }
324 |
325 | if (weightselection !== ""){
326 | elm += 1;
327 | if ($.inArray(weightselection, no) >= 0){
328 | weightselection = "";
329 | elm -= 1;
330 |
331 | }else{
332 | if (weight !== ""){ }else{
333 | if ($.inArray(weightselection, no) >= 0){
334 | testerWeight = " font-weight: normal;";
335 | weight = "400";
336 | return false;
337 |
338 | }else{
339 | weight = obj_weightselection[Object.keys(obj_weightselection)[0]];
340 | testerWeight = " font-weight: " + obj_weightselection[Object.keys(obj_weightselection)[0]] + ";";
341 | }
342 | }
343 |
344 | weightoptions = "\
345 | \
346 | weight\
347 | \
348 |
\
349 | ";
350 | }
351 | }else{
352 | if (weight == ""){
353 | testerWeight = " font-weight: normal;";
354 | weight = "400";
355 | }
356 | }
357 |
358 |
359 |
360 |
361 | ////////////////////////
362 | //ITALICS
363 | if (italic !== ""){
364 | if ($.inArray(italic, no) >= 0){
365 | testerItalic = " font-style: initial;";
366 | return false;
367 |
368 | }else{
369 | italic = "italic";
370 |
371 | }
372 | testerItalic = " font-style: " + italic + ";";
373 |
374 | }else{
375 | testerItalic = " font-style: initial;";
376 |
377 | }
378 |
379 | if (italicoptions !== ""){
380 | elm += 1;
381 | if ($.inArray(italicoptions, no) >= 0){
382 | italicoptions = "";
383 | elm -= 1;
384 |
385 | }else{
386 | italicoptions = "\
387 | \
388 | italic\
389 |
\
390 | ";
391 |
392 | }
393 | }
394 |
395 |
396 | ////////////////////////
397 | //Open Type Feautures
398 | if (optoptions !== ""){
399 | elm += 1;
400 | if ($.inArray(optoptions, no) >= 0){
401 | optoptions = "";
402 | elm -= 1;
403 |
404 | }else{
405 | $.each(optoptions, function(index, value) {
406 | testerOpt += '' + optName(value) + '';
407 | });
408 | optoptions = "\
409 | \
415 | ";
416 | $(theTester).addClass("withOptions");
417 |
418 | }
419 | }
420 |
421 | if (optoptions !== ""){
422 | if ($.inArray(optoptions, no) <= 0){
423 | if (webkit == "safari" || browser == "moz") {
424 | optDisclaim = "Switch browsers for better OPT support";
425 | }
426 | }
427 | }
428 |
429 |
430 | ////////////////////////
431 | //Alignment
432 | if (size !== ""){
433 | if (align !== ""){
434 | testerAlign = " text-align: " + align + ";";
435 | }else{
436 | testerAlign = " text-align: left;"
437 | }
438 |
439 | if (alignoptions !== ""){
440 | elm += 1;
441 | if ($.inArray(alignoptions, no) >= 0){
442 | alignoptions = "";
443 | elm -= 1;
444 |
445 | }else{
446 | if (align == ""){
447 | align = "center";
448 |
449 | }
450 | alignoptions = "\
451 | \
452 | align\
453 | \
454 |
\
455 | ";
456 | }
457 | }
458 | }
459 |
460 | ////////////////////////
461 | //Singleline
462 | if (size !== ""){
463 | if (singleline !== ""){
464 | if ($.inArray(singleline, no) >= 0){
465 | testerSingleline = " white-space: initial;"
466 | }else{
467 | testerSingleline = " white-space: nowrap;";
468 | }
469 | }else{
470 | testerSingleline = " white-space: initial;"
471 | }
472 |
473 | if (singlelineoptions !== ""){
474 | elm += 1;
475 | if ($.inArray(singlelineoptions, no) >= 0){
476 | singlelineoptions = "";
477 | elm -= 1;
478 |
479 | }else{
480 | singlelineoptions = "\
481 | \
482 | singleline\
483 |
\
484 | ";
485 |
486 | }
487 | }
488 | }
489 |
490 |
491 | ////////////////////////
492 | //Text Fallback
493 | if (font !== "") {
494 | if (text == "Try typing here...") {
495 | text = "Try " + font;
496 | };
497 | };
498 |
499 |
500 | ////////////////////////
501 | //Put them all together
502 | totaloptions = sizeoptions + trackingoptions + weightoptions + italicoptions + singlelineoptions + alignoptions + optoptions;
503 |
504 | if (options !== "false"){
505 | testeroptions = "\
506 | " +
507 | totaloptions + optDisclaim +
508 | "
"
509 | }
510 |
511 | typetester = "\
512 | \
513 |
\
514 | " + text + "\
515 |
\
516 |
size
"));if(""!==l){if(0<=$.inArray(l,d))return testerTracking=" letter-spacing: 0;",l="0",!1;testerTracking=" letter-spacing: "+l+"em;"}else testerTracking=" letter-spacing: 0;",l="0";""!==trackingoptions&&(c+=1,0<=$.inArray(trackingoptions,d)?(trackingoptions="",--c):trackingoptions="tracking
");
9 | if(""!==e){if(0<=$.inArray(e,d))return testerWeight=" font-weight: normal;",e="400",!1;testerWeight=" font-weight: "+e+";"}else""==weightselection&&(testerWeight=" font-weight: normal;",e="400");""!==weightoptions&&(c+=1,0<=$.inArray(weightoptions,d)?(weightoptions="",--c):weightoptions="weight
");if(""!==weightselection)if(c+=1,0<=$.inArray(weightselection,d))weightselection=
10 | "",--c;else{if(""===e){if(0<=$.inArray(weightselection,d))return testerWeight=" font-weight: normal;",e="400",!1;e=k[Object.keys(k)[0]];testerWeight=" font-weight: "+k[Object.keys(k)[0]]+";"}weightoptions="weight
"}else""==e&&(testerWeight=" font-weight: normal;",e="400");if(""!==m){if(0<=$.inArray(m,d))return testerItalic=" font-style: initial;",!1;testerItalic=
11 | " font-style: italic;"}else testerItalic=" font-style: initial;";""!==italicoptions&&(c+=1,0<=$.inArray(italicoptions,d)?(italicoptions="",--c):italicoptions="italic
");""!==optoptions&&(c+=1,0<=$.inArray(optoptions,d)?(optoptions="",--c):($.each(optoptions,function(a,b){testerOpt+=''+q[b]+""}),optoptions="",$(a).addClass("withOptions")));""!==optoptions&&0>=$.inArray(optoptions,d)&&("safari"==webkit||"moz"==browser)&&(optDisclaim="Switch browsers for better OPT support");""!==g&&(testerAlign=""!==align?" text-align: "+align+";":" text-align: left;",""!==alignoptions&&(c+=1,0<=$.inArray(alignoptions,d)?(alignoptions="",--c):(""==align&&(align="center"),alignoptions="align
")));""!==g&&(testerSingleline=""!==singleline?0<=$.inArray(singleline,d)?" white-space: initial;":" white-space: nowrap;":" white-space: initial;",""!==singlelineoptions&&(c+=1,0<=$.inArray(singlelineoptions,d)?(singlelineoptions="",--c):singlelineoptions="singleline
"));""!==f&&"Try typing here..."==
14 | n&&(n="Try "+f);totaloptions=sizeoptions+trackingoptions+weightoptions+italicoptions+singlelineoptions+alignoptions+optoptions;testeroptions=""+totaloptions+optDisclaim+"
";f=""+testeroptions;typetesterFont=
15 | "";$(a).append(f);$("body").append(typetesterFont);""!==sizeoptions&&$(".sizeSlider"+testerNumber).slider({orientation:"horizontal",range:"min",min:15,max:215,value:g,animate:!0,slide:function(a,b){$(this).find(".amount").text(b.value+"px");$(this).parent().parent().find(".type").css("font-size",b.value+"px")},create:function(a,b){$(this).find(".amount").text(g+"px");$(this).parent().parent().find(".type").css("font-size",g+"px")}});""!==trackingoptions&&$(".trackingSlider"+testerNumber).slider({orientation:"horizontal",
16 | range:"min",min:-.25,max:1,step:.01,value:l,animate:!0,slide:function(a,b){$(this).find(".amount").text(b.value+"em");$(this).parent().parent().find(".type").css("letter-spacing",b.value+"em")},create:function(a,b){$(this).find(".amount").text(l+"em");$(this).parent().parent().find(".type").css("letter-spacing",l+"em")}});""!==weightoptions&&""==weightselection&&$(".weightSlider"+testerNumber).slider({orientation:"horizontal",range:"min",min:100,max:900,step:100,value:e,animate:!0,slide:function(a,
17 | b){$(this).find(".amount").text(b.value);$(this).parent().parent().find(".type").css("font-weight",b.value)},create:function(a,b){$(this).find(".amount").text(e);$(this).parent().parent().find(".type").css("font-weight",e)}});f=0;for(i in k)e==k[i]&&(firstWeightPosition=f+=1,firstWeightName=i,firstWeightValue=k[i]);""!==weightselection&&$(".weightSlider"+testerNumber).slider({orientation:"horizontal",range:"min",min:1,max:Object.keys(k).length,step:1,value:firstWeightPosition,animate:!0,slide:function(a,
18 | b){$(this).find(".amount").text(Object.keys(k)[b.value-1]);$(this).parent().parent().find(".type").css("font-weight",k[Object.keys(k)[b.value-1]])},create:function(a,b){$(this).find(".amount").text(firstWeightName);$(this).parent().parent().find(".type").css("font-weight",firstWeightValue)}});""!==italicoptions&&("italic"==$(".italicButton"+testerNumber).parent().parent().find(".type").css("font-style")&&$(".italicButton"+testerNumber).addClass("active"),$(".italicButton"+testerNumber).click(function(){$(this).toggleClass("active");
19 | $(this).hasClass("active")?$(this).parent().parent().find(".type").css("font-style","italic"):$(this).parent().parent().find(".type").css("font-style","initial")}));if(""!==h){if(0<=$.inArray(h,d))return h="",!1;$(a).find(".type").css("-moz-font-feature-settings",'"'+h+'" 1');$(a).find(".type").css("-moz-font-feature-settings",'"'+h+'"=1');$(a).find(".type").css("-ms-font-feature-settings",'"'+h+'" 1');$(a).find(".type").css("-o-font-feature-settings",'"'+h+'" 1');$(a).find(".type").css("-webkit-font-feature-settings",
20 | '"'+h+'" 1');$(a).find(".type").css("font-feature-settings",'"'+h+'" 1');""!==optoptions&&0>=$.inArray(optoptions,d)&&($(a).find(".optButton").attr("active",h),$(a).find("."+h).addClass("active"),$(a).find(".optButton").addClass("active"),$(a).find(".optButton .label").addClass("active"),$(a).find(".optButton .label").text(h))}""!==optoptions&&($(".optButton"+testerNumber+" .label").click(function(){$(this).parent().toggleClass("open")}),$(".optButton"+testerNumber+" .dropdown span").click(function(){optButton=
21 | $(this).parent().parent();if($(this).hasClass("active"))return optButton.attr("active","features"),$(this).removeClass("active"),optButton.removeClass("active"),optButton.find(".label").removeClass("active"),optButton.find(".label").text(optButton.attr("active")),$(a).find(".type").css("-moz-font-feature-settings","inherit"),$(a).find(".type").css("-ms-font-feature-settings","inherit"),$(a).find(".type").css("-o-font-feature-settings","inherit"),$(a).find(".type").css("-webkit-font-feature-settings",
22 | "inherit"),$(a).find(".type").css("font-feature-settings","inherit"),!1;$(this).parent().find("span").removeClass("active");optButton.attr("active",$(this).attr("class"));$(this).addClass("active");optButton.addClass("active");optButton.find(".label").addClass("active");optButton.find(".label").text(optButton.attr("active"));$(a).find(".type").css("-moz-font-feature-settings",'"'+optButton.attr("active")+'" 1');$(a).find(".type").css("-moz-font-feature-settings",'"'+optButton.attr("active")+'"=1');
23 | $(a).find(".type").css("-ms-font-feature-settings",'"'+optButton.attr("active")+'" 1');$(a).find(".type").css("-o-font-feature-settings",'"'+optButton.attr("active")+'" 1');$(a).find(".type").css("-webkit-font-feature-settings",'"'+optButton.attr("active")+'" 1');$(a).find(".type").css("font-feature-settings",'"'+optButton.attr("active")+'" 1')}));""!==g&&(""!==singlelineoptions&&("nowrap"==$(".singlelineButton"+testerNumber).parent().parent().find(".enterTXT").css("white-space")&&$(".singlelineButton"+
24 | testerNumber).addClass("active"),$(".singlelineButton"+testerNumber).click(function(){$(this).toggleClass("active");$(this).hasClass("active")?$(this).parent().parent().find(".enterTXT").css("white-space","nowrap"):$(this).parent().parent().find(".enterTXT").css("white-space","initial")})),""!==alignoptions&&$(".alignSlider"+testerNumber).slider({orientation:"horizontal",range:"min",min:1,max:3,value:p.indexOf(align)+1,animate:!0,slide:function(a,b){$(this).find(".amount").text(p[b.value-1]);$(this).parent().parent().find(".type").css("text-align",
25 | p[b.value-1])},create:function(a,b){$(this).find(".amount").text(align);$(this).parent().parent().find(".type").css("text-align",align)}}))}$(document).ready(function(){$(".typeTester").each(function(a,f){testerTotal+=1});$(".typeTester").each(function(a,f){typetester(f)});sized()});$(window).load(function(){$(".type").keyup(function(){sized()});sized()});
--------------------------------------------------------------------------------
/src/js/typeTester_forCloserCompiler.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////
2 | //////////////// ///////////////
3 | //////////////// FUNCTIONS ///////////////
4 | //////////////// ///////////////
5 | ////////////////////////////////////////////////
6 |
7 |
8 | ////////////////////////////////////////////////
9 | //TYPE TESTER BEGINS
10 | ////////////////////////////////////////////////
11 |
12 | ////////////////////////
13 | //IF MOBILE
14 |
15 | function isMobile() {
16 | if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/IEMobile/i)){
17 | return true; } else { return false; }
18 | }
19 | function iphone() {
20 | if(navigator.userAgent.match(/iPhone|iPad|iPod/i)){
21 | return true; } else { return false; }
22 | }
23 | var isTouchDevice = 'ontouchstart' in document.documentElement;
24 |
25 | ////////////////////////
26 | //GET VENDOR PREFIXES
27 |
28 | var browser, webkit, touch;
29 |
30 | var prefix = (function () {
31 | var styles = window.getComputedStyle(document.documentElement, ''),
32 | pre = (Array.prototype.slice
33 | .call(styles)
34 | .join('')
35 | .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
36 | )[1],
37 | dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
38 | return {
39 | dom: dom,
40 | lowercase: pre,
41 | css: '-' + pre + '-',
42 | js: pre[0].toUpperCase() + pre.substr(1)
43 | };
44 | })();
45 | browser = prefix.lowercase;
46 |
47 | if (isTouchDevice) {
48 | touch = true;
49 | }else{
50 | touch = false;
51 | }
52 | if (navigator.userAgent.indexOf('Safari') != -1){
53 | if (navigator.userAgent.indexOf('Chrome') == -1){
54 | webkit = 'safari';
55 | } else {
56 | webkit = 'chrome';
57 | }
58 | }
59 |
60 | ////////////////////////
61 | //Define Variables
62 |
63 | function sized(){
64 | $('.testerFit .type').bigtext({
65 | minfontsize: 14
66 | });
67 | };
68 | var testerNumber = testerTotal = 0;
69 |
70 | function typetester(e, font, size, tracking, italic, weight, opt){
71 | var option, options, typetester;
72 | var theTester = e;
73 | var size =
74 | font =
75 | tracking =
76 | weight =
77 | italic =
78 | opt =
79 | align =
80 | singleline =
81 | testerfit =
82 | testerSize =
83 | testerFont =
84 | testerTracking =
85 | testerWeight =
86 | testerItalic =
87 | testerOpt =
88 | testerAlign =
89 | testerSingleline =
90 | sizeoptions =
91 | trackingoptions =
92 | weightoptions =
93 | italicoptions =
94 | singlelineoptions =
95 | alignoptions =
96 | optoptions =
97 | optButton =
98 | optDisclaim =
99 | testeroptions =
100 | weightselection =
101 | weightPosition = "";
102 | var obj_weightselection = {};
103 | var elm = 0;
104 | var text = "Try typing here...";
105 | var yes = [ "yes", "true", "hawt", "yup", "yep", "siq", "swell", "chiller", "ok", "!", "fine", "right", "good", "aye", "indubitably", "sure", "yeah", "yay"];
106 | var no = [ "sus", "no", "nah", "nvm", "false", "rathernot", "nope", "naaah", "naah", "bye", "fart", "sans", "terminal"];
107 |
108 | var alignValues = ["left", "center", "right"];
109 |
110 | var optValues = {
111 |
112 | //Kerning
113 | kern: "Kerning",
114 |
115 | //Ligatures
116 | liga: "Common",
117 | dlig: "Discretionary",
118 | hlig: "Historical",
119 | clig: "Contextual",
120 |
121 | //Letter Case
122 | smcp: "Small Caps",
123 | c2sc: "All Small Cap",
124 |
125 | //Number Case
126 | lnum: "Lining",
127 | onum: "Old-Style",
128 |
129 | //Number Spacing
130 | pnum: "Proportional",
131 | tnum: "Tabular",
132 |
133 | //Fractions
134 | frac: "Fractions",
135 | afrc: "Alt Fractions",
136 |
137 | //Numeric Extras
138 | zero: "Slashed Zero",
139 | nalt: "Alt Numbers",
140 |
141 | //Character Alternatives
142 | swsh: "Swash",
143 | calt: "Contextual",
144 | hist: "Historical",
145 | salt: "Stylistic",
146 |
147 | //Alternative Stylistic Sets
148 | ss01: "Style 1",
149 | ss02: "Style 2",
150 | ss03: "Style 3",
151 | ss04: "Style 4",
152 | ss05: "Style 5",
153 |
154 | //Sub Sup scripts
155 | sups: "Superscript",
156 | subs: "Subscript"
157 | }
158 |
159 | var optName = function (propertyName) {
160 | return optValues[propertyName];
161 | };
162 |
163 | var typeVars = ["sizeoptions", "trackingoptions", "opt", "weightoptions", "italicoptions", "alignoptions", "singlelineoptions", "size", "font", "tracking", "weight", "italic", "align", "singleline", "text"];
164 | $.each(typeVars, function(index, value) {
165 | if ($(theTester).is("["+value+"]")) {
166 | eval(value + " = '" + $(theTester).attr(value) + "'");
167 |
168 | }
169 | });
170 |
171 | if ($(theTester).is("[weightselection]")) {
172 | weightselection = $(theTester).attr("weightselection").replace(/:/g, ',').split(',');
173 | weightselection.forEach(function(val, i) {
174 | weightselection[i] = $.trim(val);
175 | });
176 | weightselection.forEach(function(val, i) {
177 | if (i % 2 === 1) return;
178 | obj_weightselection[val] = weightselection[i + 1];
179 | });
180 | }
181 |
182 | if ($(theTester).is("[optoptions]")) {
183 | optoptions = $(theTester).attr("optoptions").replace(/\s+/g, '').split(',');
184 |
185 | }
186 |
187 | ////////////////////////
188 | // Set tester Number
189 | testerNumber += 1;
190 | $(theTester).addClass("typeTester" + testerNumber);
191 | if (testerNumber%2 == 0){
192 | $(theTester).addClass("even");
193 | }else{
194 | $(theTester).addClass("odd");
195 | }
196 | if (testerNumber == testerTotal) {
197 | $(theTester).addClass("lastTypeTester");
198 |
199 | };
200 |
201 |
202 | ////////////////////////
203 | //FONT
204 | if (font !== ""){
205 | if ($.inArray(size, no) >= 0){
206 | return false;
207 |
208 | }else{
209 | testerFont = " font-family: " + font + ", 'Fakta Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;";
210 |
211 | }
212 |
213 | }
214 |
215 |
216 | ////////////////////////
217 | //SIZE
218 | if (size !== ""){
219 | if ($.inArray(size, no) >= 0){
220 | testerfit = "testerFit ";
221 | return false;
222 |
223 | }else{
224 | testerSize = " font-size: " + size + "px;";
225 |
226 | }
227 |
228 | }else{
229 | testerfit = "testerFit ";
230 |
231 | }
232 | if (sizeoptions !== ""){
233 | elm += 1;
234 | if ($.inArray(sizeoptions, no) >= 0){
235 | sizeoptions = "";
236 | elm -= 1;
237 |
238 | }else{
239 | testerfit = "";
240 | if (size == ""){
241 | size = "80";
242 |
243 | }
244 | sizeoptions = "size
";
245 | }
246 |
247 | }
248 |
249 | ////////////////////////
250 | //TRACKING
251 | if (tracking !== ""){
252 | if ($.inArray(tracking, no) >= 0){
253 | testerTracking = " letter-spacing: 0;";
254 | tracking = "0";
255 | return false;
256 |
257 | }else{
258 | testerTracking = " letter-spacing: " + tracking + "em;";
259 |
260 | }
261 |
262 | }else{
263 | testerTracking = " letter-spacing: 0;";
264 | tracking = "0";
265 |
266 | }
267 | if (trackingoptions !== ""){
268 | elm += 1;
269 | if ($.inArray(trackingoptions, no) >= 0){
270 | trackingoptions = "";
271 | elm -= 1;
272 |
273 | }else{
274 | trackingoptions = "tracking
";
275 |
276 | }
277 | }
278 |
279 | ////////////////////////
280 | //WEIGHT
281 | if (weight !== ""){
282 | if ($.inArray(weight, no) >= 0){
283 | testerWeight = " font-weight: normal;";
284 | weight = "400";
285 | return false;
286 |
287 | }else{
288 | testerWeight = " font-weight: " + weight + ";";
289 |
290 | }
291 | }else{
292 | if (weightselection == ""){
293 | testerWeight = " font-weight: normal;";
294 | weight = "400";
295 | }
296 | }
297 |
298 | if (weightoptions !== ""){
299 | elm += 1;
300 | if ($.inArray(weightoptions, no) >= 0){
301 | weightoptions = "";
302 | elm -= 1;
303 |
304 | }else{
305 | weightoptions = "weight
";
306 |
307 | }
308 | }
309 |
310 | if (weightselection !== ""){
311 | elm += 1;
312 | if ($.inArray(weightselection, no) >= 0){
313 | weightselection = "";
314 | elm -= 1;
315 |
316 | }else{
317 | if (weight !== ""){ }else{
318 | if ($.inArray(weightselection, no) >= 0){
319 | testerWeight = " font-weight: normal;";
320 | weight = "400";
321 | return false;
322 |
323 | }else{
324 | weight = obj_weightselection[Object.keys(obj_weightselection)[0]];
325 | testerWeight = " font-weight: " + obj_weightselection[Object.keys(obj_weightselection)[0]] + ";";
326 | }
327 | }
328 |
329 | weightoptions = "weight
";
330 | }
331 | }else{
332 | if (weight == ""){
333 | testerWeight = " font-weight: normal;";
334 | weight = "400";
335 | }
336 | }
337 |
338 |
339 |
340 |
341 | ////////////////////////
342 | //ITALICS
343 | if (italic !== ""){
344 | if ($.inArray(italic, no) >= 0){
345 | testerItalic = " font-style: initial;";
346 | return false;
347 |
348 | }else{
349 | italic = "italic";
350 |
351 | }
352 | testerItalic = " font-style: " + italic + ";";
353 |
354 | }else{
355 | testerItalic = " font-style: initial;";
356 |
357 | }
358 |
359 | if (italicoptions !== ""){
360 | elm += 1;
361 | if ($.inArray(italicoptions, no) >= 0){
362 | italicoptions = "";
363 | elm -= 1;
364 |
365 | }else{
366 | italicoptions = "italic
";
367 |
368 | }
369 | }
370 |
371 |
372 | ////////////////////////
373 | //Open Type Feautures
374 | if (optoptions !== ""){
375 | elm += 1;
376 | if ($.inArray(optoptions, no) >= 0){
377 | optoptions = "";
378 | elm -= 1;
379 |
380 | }else{
381 | $.each(optoptions, function(index, value) {
382 | testerOpt += '' + optName(value) + '';
383 | });
384 | optoptions = "";
385 | $(theTester).addClass("withOptions");
386 |
387 | }
388 | }
389 |
390 | if (optoptions !== ""){
391 | if ($.inArray(optoptions, no) <= 0){
392 | if (webkit == "safari" || browser == "moz") {
393 | optDisclaim = "Switch browsers for better OPT support";
394 | }
395 | }
396 | }
397 |
398 |
399 | ////////////////////////
400 | //Alignment
401 | if (size !== ""){
402 | if (align !== ""){
403 | testerAlign = " text-align: " + align + ";";
404 | }else{
405 | testerAlign = " text-align: left;"
406 | }
407 |
408 | if (alignoptions !== ""){
409 | elm += 1;
410 | if ($.inArray(alignoptions, no) >= 0){
411 | alignoptions = "";
412 | elm -= 1;
413 |
414 | }else{
415 | if (align == ""){
416 | align = "center";
417 |
418 | }
419 | alignoptions = "align
";
420 | }
421 | }
422 | }
423 |
424 | ////////////////////////
425 | //Singleline
426 | if (size !== ""){
427 | if (singleline !== ""){
428 | if ($.inArray(singleline, no) >= 0){
429 | testerSingleline = " white-space: initial;"
430 | }else{
431 | testerSingleline = " white-space: nowrap;";
432 | }
433 | }else{
434 | testerSingleline = " white-space: initial;"
435 | }
436 |
437 | if (singlelineoptions !== ""){
438 | elm += 1;
439 | if ($.inArray(singlelineoptions, no) >= 0){
440 | singlelineoptions = "";
441 | elm -= 1;
442 |
443 | }else{
444 | singlelineoptions = "singleline
";
445 |
446 | }
447 | }
448 | }
449 |
450 |
451 | ////////////////////////
452 | //Text Fallback
453 | if (font !== "") {
454 | if (text == "Try typing here...") {
455 | text = "Try " + font;
456 | };
457 | };
458 |
459 |
460 | ////////////////////////
461 | //Put them all together
462 | totaloptions = sizeoptions + trackingoptions + weightoptions + italicoptions + singlelineoptions + alignoptions + optoptions;
463 |
464 | if (options !== "false"){
465 | testeroptions = "" +
466 | totaloptions + optDisclaim +
467 | "
"
468 | }
469 |
470 | typetester = "" + testeroptions;
471 | typetesterFont = "";
472 |
473 | $(theTester).append(typetester);
474 | $("body").append(typetesterFont);
475 |
476 |
477 | ////////////////////////
478 | //ADD INTERACTIONS
479 | if (sizeoptions !== ""){
480 |
481 | $(".sizeSlider" + testerNumber).slider({
482 | orientation: "horizontal",
483 | range: "min",
484 | min: 15,
485 | max: 215,
486 | value: size,
487 | animate: true,
488 | slide: function(event, ui) {
489 | $(this).find( ".amount" ).text(ui.value + "px");
490 | $(this).parent().parent().find( ".type" ).css("font-size", ui.value + "px");
491 | },
492 | create: function( event, ui ) {
493 | $(this).find( ".amount" ).text(size + "px");
494 | $(this).parent().parent().find( ".type" ).css("font-size", size + "px");
495 | }
496 | });
497 | }
498 |
499 | if (trackingoptions !== ""){
500 | $(".trackingSlider" + testerNumber).slider({
501 | orientation: "horizontal",
502 | range: "min",
503 | min: -0.25,
504 | max: 1,
505 | step: 0.01,
506 | value: tracking,
507 | animate: true,
508 | slide: function(event, ui) {
509 | $(this).find( ".amount" ).text(ui.value + "em");
510 | $(this).parent().parent().find( ".type" ).css("letter-spacing", ui.value + "em");
511 | },
512 | create: function( event, ui ) {
513 | $(this).find( ".amount" ).text(tracking + "em");
514 | $(this).parent().parent().find( ".type" ).css("letter-spacing", tracking + "em");
515 | }
516 |
517 | });
518 | };
519 |
520 |
521 | if (weightoptions !== ""){
522 | if (weightselection == "") {
523 | $(".weightSlider" + testerNumber).slider({
524 | orientation: "horizontal",
525 | range: "min",
526 | min: 100,
527 | max: 900,
528 | step: 100,
529 | value: weight,
530 | animate: true,
531 | slide: function(event, ui) {
532 | $(this).find( ".amount" ).text(ui.value);
533 | $(this).parent().parent().find( ".type" ).css("font-weight", ui.value);
534 | },
535 | create: function( event, ui ) {
536 | $(this).find( ".amount" ).text(weight);
537 | $(this).parent().parent().find( ".type" ).css("font-weight", weight);
538 | }
539 | });
540 | }
541 | };
542 |
543 | var ticker = 0
544 | for(i in obj_weightselection) {
545 | if (weight == obj_weightselection[i]) {
546 | ticker += 1;
547 | firstWeightPosition = ticker;
548 | firstWeightName = i;
549 | firstWeightValue = obj_weightselection[i];
550 | }
551 | }
552 | if (weightselection !== "") {
553 | $(".weightSlider" + testerNumber).slider({
554 | orientation: "horizontal",
555 | range: "min",
556 | min: 1,
557 | max: Object.keys(obj_weightselection).length,
558 | step: 1,
559 | value: firstWeightPosition,
560 | animate: true,
561 | slide: function(event, ui) {
562 | $(this).find( ".amount" ).text(Object.keys(obj_weightselection)[ui.value-1]);
563 | $(this).parent().parent().find( ".type" ).css("font-weight", obj_weightselection[Object.keys(obj_weightselection)[ui.value-1]]);
564 | },
565 | create: function( event, ui ) {
566 | $(this).find( ".amount" ).text(firstWeightName);
567 | $(this).parent().parent().find( ".type" ).css("font-weight", firstWeightValue);
568 |
569 | }
570 | });
571 | }
572 |
573 |
574 | if (italicoptions !== ""){
575 | if ($(".italicButton" + testerNumber).parent().parent().find( ".type" ).css("font-style") == "italic"){
576 | $(".italicButton" + testerNumber).addClass("active");
577 |
578 | }
579 | $(".italicButton" + testerNumber).click(function(){
580 | $(this).toggleClass("active");
581 | if ($(this).hasClass("active")) {
582 | $(this).parent().parent().find( ".type" ).css("font-style", "italic");
583 |
584 | }else{
585 | $(this).parent().parent().find( ".type" ).css("font-style", "initial");
586 |
587 | };
588 | });
589 | };
590 |
591 | if (opt !== ""){
592 | if ($.inArray(opt, no) >= 0){
593 | opt = "";
594 | return false;
595 |
596 | }else{
597 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + opt + '" 1');
598 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + opt + '"=1');
599 | $(theTester).find(".type").css("-ms-font-feature-settings", '"' + opt + '" 1');
600 | $(theTester).find(".type").css("-o-font-feature-settings", '"' + opt + '" 1');
601 | $(theTester).find(".type").css("-webkit-font-feature-settings", '"' + opt + '" 1');
602 | $(theTester).find(".type").css("font-feature-settings", '"' + opt + '" 1');
603 | }
604 | if (optoptions !== ""){
605 | if ($.inArray(optoptions, no) <= 0){
606 | $(theTester).find(".optButton").attr('active', opt);
607 | $(theTester).find("."+opt).addClass('active');
608 | $(theTester).find(".optButton").addClass('active');
609 | $(theTester).find(".optButton .label").addClass('active');
610 | $(theTester).find(".optButton .label").text( opt );
611 | }
612 |
613 | }
614 |
615 | }
616 |
617 | if (optoptions !== ""){
618 | $(".optButton" + testerNumber + " .label").click( function(){
619 | $(this).parent().toggleClass('open');
620 |
621 | });
622 | $(".optButton" + testerNumber + " .dropdown span").click( function(){
623 | optButton = $(this).parent().parent();
624 | if ($(this).hasClass("active")){
625 | optButton.attr('active', 'features');
626 | $(this).removeClass('active');
627 | optButton.removeClass('active');
628 | optButton.find(".label").removeClass('active');
629 | optButton.find(".label").text( optButton.attr('active') );
630 |
631 | $(theTester).find(".type").css("-moz-font-feature-settings", "inherit");
632 | $(theTester).find(".type").css("-ms-font-feature-settings", "inherit");
633 | $(theTester).find(".type").css("-o-font-feature-settings", "inherit");
634 | $(theTester).find(".type").css("-webkit-font-feature-settings", "inherit");
635 | $(theTester).find(".type").css("font-feature-settings", "inherit");
636 | return false;
637 | }
638 | $(this).parent().find("span").removeClass("active");
639 | optButton.attr('active', $(this).attr('class'));
640 | $(this).addClass('active');
641 | optButton.addClass('active');
642 | optButton.find(".label").addClass('active');
643 | optButton.find(".label").text( optButton.attr('active') );
644 |
645 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + optButton.attr('active') + '" 1');
646 | $(theTester).find(".type").css("-moz-font-feature-settings", '"' + optButton.attr('active') + '"=1');
647 | $(theTester).find(".type").css("-ms-font-feature-settings", '"' + optButton.attr('active') + '" 1');
648 | $(theTester).find(".type").css("-o-font-feature-settings", '"' + optButton.attr('active') + '" 1');
649 | $(theTester).find(".type").css("-webkit-font-feature-settings", '"' + optButton.attr('active') + '" 1');
650 | $(theTester).find(".type").css("font-feature-settings", '"' + optButton.attr('active') + '" 1');
651 |
652 | });
653 |
654 | };
655 |
656 |
657 | if (size !== ""){
658 |
659 | if (singlelineoptions !== ""){
660 | if ($(".singlelineButton" + testerNumber).parent().parent().find( ".enterTXT" ).css("white-space") == "nowrap"){
661 | $(".singlelineButton" + testerNumber).addClass("active");
662 |
663 | }
664 | $(".singlelineButton" + testerNumber).click(function(){
665 | $(this).toggleClass("active");
666 | if ($(this).hasClass("active")) {
667 | $(this).parent().parent().find( ".enterTXT" ).css("white-space", "nowrap");
668 |
669 | }else{
670 | $(this).parent().parent().find( ".enterTXT" ).css("white-space", "initial");
671 |
672 | };
673 | });
674 | };
675 |
676 |
677 | if (alignoptions !== ""){
678 | $(".alignSlider" + testerNumber).slider({
679 | orientation: "horizontal",
680 | range: "min",
681 | min: 1,
682 | max: 3,
683 | value: alignValues.indexOf(align) + 1,
684 | animate: true,
685 | slide: function(event, ui) {
686 | $(this).find( ".amount" ).text(alignValues[ui.value - 1]);
687 | $(this).parent().parent().find( ".type" ).css("text-align", alignValues[ui.value - 1]);
688 | },
689 | create: function( event, ui ) {
690 | $(this).find( ".amount" ).text(align);
691 | $(this).parent().parent().find( ".type" ).css("text-align", align);
692 | }
693 | });
694 | }
695 | }
696 | }
697 |
698 |
699 | ////////////////////////
700 | //LOAD
701 | $( document ).ready(function() {
702 |
703 | $(".typeTester").each( function(i, e){
704 | testerTotal += 1;
705 | });
706 | $(".typeTester").each( function(i, e){
707 | typetester(e);
708 | });
709 |
710 | sized();
711 |
712 | });
713 | $(window).load(function() {
714 | $(".type").keyup(function(){
715 | sized();
716 | });
717 | sized();
718 |
719 | }); // `~*# The end.
720 |
--------------------------------------------------------------------------------
/src/sass/_config.scss:
--------------------------------------------------------------------------------
1 | $green: #67f4b8;
2 | $salmon: #ED7872;
3 | $white: #fff;
4 | $grey: #f9f9f9;
5 | $black: #000;
6 |
7 | $fast: .25s;
8 |
9 | @mixin m($updown: min, $amount: 600px) {
10 | @if $updown == "max" {
11 | @media (max-width: $amount) { @content; }
12 | }
13 | @if $updown == "min" {
14 | @media (min-width: $amount) { @content; }
15 | }
16 | }
17 |
18 | /* Cursors */
19 | @mixin pointer() {
20 | user-select: none;
21 | cursor: pointer;
22 | }
23 |
24 | @mixin default() {
25 | cursor: default;
26 | user-select: none;
27 | }
28 |
29 | @mixin text() {
30 | cursor: text;
31 | user-select: none;
32 | }
33 |
34 | @mixin grab-cursor {
35 | // http://www.google.com/intl/en_ALL/mapfiles/openhand.cur
36 | cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8='), all-scroll;
37 | cursor: -webkit-grab;
38 | cursor: -moz-grab;
39 | cursor: -o-grab;
40 | cursor: -ms-grab;
41 | cursor: grab;
42 | }
43 |
44 | @mixin grabbing-cursor {
45 | // http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur
46 | cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8='), all-scroll;
47 | cursor: -webkit-grabbing;
48 | cursor: -moz-grabbing;
49 | cursor: -o-grabbing;
50 | cursor: -ms-grabbing;
51 | cursor: grabbing;
52 | }
53 |
--------------------------------------------------------------------------------
/src/sass/_typeTester.scss:
--------------------------------------------------------------------------------
1 | .content{
2 | overflow-x: hidden;
3 | }
4 |
5 |
6 | // TYPE TESTER
7 | .typeTester{
8 | &.odd {
9 | background: $grey;
10 | }
11 | &.even {
12 | background: $white;
13 | }
14 | &:before{
15 | content: "";
16 | display: block;
17 | width: 0;
18 | height: 0;
19 | margin: 0 auto;
20 | border-top: solid 20px $grey;
21 | border-left: solid 20px transparent;
22 | border-right: solid 20px transparent;
23 | position: absolute;
24 | left: 50%;
25 | margin-left: -10px;
26 | }
27 |
28 | &.odd:before{
29 | border-top: solid 20px $white;
30 | }
31 |
32 | &.withOptions{
33 | & + .typeTester:before{
34 | display: none;
35 | }
36 | }
37 |
38 | &.typeTester1{
39 | margin-top: 50px;
40 | }
41 | &.lastTypeTester{
42 | margin-bottom: 50px;
43 | &:after{
44 | content: "";
45 | display: block;
46 | width: 0;
47 | height: 0;
48 | margin: 0 auto;
49 | border-top: solid 20px $white;
50 | border-left: solid 20px transparent;
51 | border-right: solid 20px transparent;
52 | position: absolute;
53 | left: 50%;
54 | margin-left: -10px;
55 | }
56 | &.odd{
57 | &:after{
58 | border-top: solid 20px $grey;
59 | }
60 | }
61 | &.withOptions{
62 | &:after{
63 | display: none;
64 | }
65 | }
66 | }
67 | .enterTXT, .enterTXT:focus, .enterTXT:active{
68 | outline: none;
69 | border: none;
70 | padding: 0.5em 0;
71 | }
72 | .container:not(.testerFit){
73 | width: 100%;
74 | padding: 0;
75 | .type{
76 | display: flex;
77 | width: 100%;
78 | overflow: hidden;
79 | overflow-x: scroll;
80 | padding: 0 40px;
81 | margin: 0 auto;
82 | .enterTXT{
83 | white-space: nowrap;
84 | padding-right: 40px;
85 | width: 100%;
86 | }
87 | }
88 | }
89 | .options{
90 | height: 20px;
91 | color: $black;
92 | font-size: 17px;
93 | transition: all $fast;
94 | .active{
95 | background: $green;
96 | }
97 | &.width0{
98 | display: none;
99 | }
100 | &.width1{
101 | .option{
102 | width: 100%;
103 | }
104 | }
105 | &.width2{
106 | .option{
107 | width: 50%;
108 | @include m(max, 400px){
109 | width: 100%;
110 | }
111 | }
112 | }
113 | &.width3{
114 | .option{
115 | width: 33.33333333%;
116 | @include m(max, 500px){
117 | width: 100%;
118 | }
119 | }
120 | }
121 | &.width4{
122 | .option{
123 | width: 25%;
124 | @include m(max, 700px){
125 | width: 50%;
126 | }
127 | @include m(max, 400px){
128 | width: 100%;
129 | }
130 | }
131 | }
132 | &.width5{
133 | .option{
134 | width: 20%;
135 | @include m(max, 800px){
136 | width: 100%;
137 | }
138 | }
139 | }
140 | &.width6{
141 | .option{
142 | width: 16.6666666666%;
143 | @include m(max, 900px){
144 | width: 33.33333333%;
145 | }
146 | @include m(max, 500px){
147 | width: 100%;
148 | }
149 | }
150 | }
151 | &.width7{
152 | .option{
153 | width: 14.285714286%;
154 | @include m(max, 900px){
155 | width: 100%;
156 | }
157 | }
158 | }
159 | &.width8{
160 | .option{
161 | width: 12.5%;
162 | @include m(max, 900px){
163 | width: 25%;
164 | }
165 | @include m(max, 700px){
166 | width: 50%;
167 | }
168 | @include m(max, 400px){
169 | width: 100%;
170 | }
171 | }
172 | }
173 | &.width9{
174 | .option{
175 | width: 11.111111111%;
176 | @include m(max, 1000px){
177 | width: 100%;
178 | }
179 | }
180 | }
181 | &.width10{
182 | .option{
183 | width: 10%;
184 | @include m(max, 1300px){
185 | width: 20%;
186 | }
187 | @include m(max, 800px){
188 | width: 100%;
189 | }
190 | }
191 | }
192 | .slider, .optButton, .italicButton, .singlelineButton{
193 | border: 0;
194 | border-radius: 0;
195 | height: 20px;
196 | background: $black;
197 | .ui-slider-range{
198 | border-radius: 0;
199 | background: $green;
200 | }
201 | .ui-slider-handle{
202 | opacity: 0;
203 | }
204 | .ui-state-focus{
205 | border-radius: 0;
206 | border: 0;
207 | outline: 0;
208 | background: none;
209 | font-weight: 600;
210 | margin: 0;
211 | }
212 | }
213 | .option {
214 | float: left;
215 | .label, .amount, .dropdown span, {
216 | font-family: "Fakta Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
217 | font-size: 0px;
218 | color: $white;
219 | text-align: center;
220 | width: 100%;
221 | display: block;
222 | text-transform: uppercase;
223 | letter-spacing: .1em;
224 | opacity: 0;
225 | transition: all $fast;
226 | z-index: 99;
227 | height: 20px;
228 | line-height: 18px;
229 | position: relative;
230 | padding: 2px 5px;
231 | }
232 | &.slider{
233 | cursor: ew-resize;
234 | }
235 | &.optButton, &.italicButton, &.singlelineButton{
236 | @include pointer();
237 | &.active{
238 | background-color: $green;
239 | }
240 | .label{
241 | border-radius: 0;
242 | &:hover, &.active{
243 | background: $green;
244 | }
245 | }
246 | .dropdown{
247 | display: none;
248 | position: relative;
249 | background: $black;
250 | span{
251 | height: 20px;
252 | background: $black;
253 | display:block;
254 | font-weight: 600;
255 | transition: all $fast;
256 | &:hover, &.active{
257 | background: $green;
258 | transition: all $fast;
259 | }
260 | }
261 | }
262 | }
263 | }
264 | .optsupport{
265 | font-family: "Fakta Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
266 | font-size: 0px;
267 | color: $white;
268 | background: $black;
269 | text-align: center;
270 | width: 100%;
271 | display: block;
272 | letter-spacing: .1em;
273 | opacity: 0;
274 | transition: all $fast;
275 | z-index: 90;
276 | height: 0px;
277 | line-height: 19px;
278 | position: relative;
279 | float: left;
280 | display: block;
281 | text-decoration: none;
282 | &:hover{
283 | background: $salmon;
284 | }
285 | }
286 | &:hover, &:active, &:focus{
287 | height: 50px;
288 | transition: all $fast;
289 | box-shadow: none;
290 | outline: none;
291 | .optsupport{
292 | min-height: 20px;
293 | font-size: 11px;
294 | opacity: 1;
295 | }
296 | .slider, .optButton, .italicButton, .singlelineButton{
297 | height: 50px;
298 | transition: all $fast;
299 | }
300 | .option{
301 | .label, .amount, .dropdown span{
302 | font-size: 14px;
303 | height: 50px;
304 | line-height: 47px;
305 | opacity: 1;
306 | transition: all $fast;
307 | }
308 | .amount{
309 | display:none;
310 | font-weight: 600;
311 | font-size: 14px;
312 | line-height: 46px;
313 | text-transform: lowercase;
314 | }
315 | &.weightSlider, &.alignSlider{
316 |
317 | .amount{
318 | line-height: 47px;
319 | text-transform: uppercase;
320 | }
321 | }
322 | &.slider:active, &.slider:focus{
323 | .label{
324 | display:none;
325 | }
326 | .amount{
327 | display:block;
328 | }
329 | }
330 |
331 | &.optButton{
332 | .dropdown{
333 | span{
334 | height: 50px;
335 | transition: all $fast;
336 | }
337 | }
338 | }
339 | }
340 | .optButton{
341 | &.open, &:hover{
342 | .dropdown{
343 | display: block;
344 | }
345 | }
346 | }
347 | }
348 | }
349 |
350 | .type{
351 | padding: 0 10px;
352 | }
353 |
354 | .testerFit{
355 | text-align: center;
356 | span.enterTXT{
357 | margin-left: auto;
358 | margin-right: auto;
359 | }
360 | }
361 | }
362 |
363 |
--------------------------------------------------------------------------------
/src/sass/style.scss:
--------------------------------------------------------------------------------
1 | @import
2 | "config",
3 | "current",
4 | "typeTester";
5 |
--------------------------------------------------------------------------------
/vendor/js/bigtext.js:
--------------------------------------------------------------------------------
1 | (function(window, $) {
2 | "use strict";
3 |
4 | var counter = 0,
5 | $headCache = $('head'),
6 | oldBigText = window.BigText,
7 | oldjQueryMethod = $.fn.bigtext,
8 | BigText = {
9 | DEBUG_MODE: false,
10 | DEFAULT_MIN_FONT_SIZE_PX: null,
11 | DEFAULT_MAX_FONT_SIZE_PX: 528,
12 | GLOBAL_STYLE_ID: 'bigtext-style',
13 | STYLE_ID: 'bigtext-id',
14 | LINE_CLASS_PREFIX: 'bigtext-line',
15 | EXEMPT_CLASS: 'bigtext-exempt',
16 | noConflict: function(restore)
17 | {
18 | if(restore) {
19 | $.fn.bigtext = oldjQueryMethod;
20 | window.BigText = oldBigText;
21 | }
22 | return BigText;
23 | },
24 | supports: {
25 | wholeNumberFontSizeOnly: (function() {
26 | if( !( 'getComputedStyle' in window ) ) {
27 | return true;
28 | }
29 | var test = $('').css({
30 | position: 'absolute',
31 | 'font-size': '14.1px'
32 | }).insertBefore( $('script').eq(0) ),
33 | computedStyle = window.getComputedStyle( test[0], null );
34 |
35 | var ret = computedStyle && computedStyle.getPropertyValue( 'font-size' ) === '14px';
36 | test.remove();
37 | return ret;
38 | })()
39 | },
40 | init: function() {
41 | if(!$('#'+BigText.GLOBAL_STYLE_ID).length) {
42 | $headCache.append(BigText.generateStyleTag(BigText.GLOBAL_STYLE_ID, ['.bigtext * { white-space: nowrap; } .bigtext > * { display: block; }',
43 | '.bigtext .' + BigText.EXEMPT_CLASS + ', .bigtext .' + BigText.EXEMPT_CLASS + ' * { white-space: normal; }']));
44 | }
45 | },
46 | bindResize: function(eventName, resizeFunction) {
47 | var timeoutId;
48 | $(window).unbind(eventName).bind(eventName, function() {
49 | if( timeoutId ) {
50 | clearTimeout( timeoutId );
51 | }
52 | timeoutId = setTimeout( resizeFunction, 100 );
53 | });
54 | },
55 | getStyleId: function(id)
56 | {
57 | return BigText.STYLE_ID + '-' + id;
58 | },
59 | generateStyleTag: function(id, css)
60 | {
61 | return $('').attr('id', id);
62 | },
63 | clearCss: function(id)
64 | {
65 | var styleId = BigText.getStyleId(id);
66 | $('#' + styleId).remove();
67 | },
68 | generateCss: function(id, linesFontSizes, lineWordSpacings, minFontSizes)
69 | {
70 | var css = [];
71 |
72 | BigText.clearCss(id);
73 |
74 | for(var j=0, k=linesFontSizes.length; j= maxWidth) {
141 | // console.log(width, ' previous: ' + previousWidth, property + ' at ' + interval, 'prior: ' + (parseFloat(size) - interval), 'new:' + parseFloat(size));
142 | $line.css(property, '');
143 |
144 | if(width === maxWidth) {
145 | return {
146 | match: 'exact',
147 | size: parseFloat((parseFloat(size) - 0.1).toFixed(3))
148 | };
149 | }
150 |
151 | // Since this is an estimate, we calculate how far over the width we went with the new value.
152 | // If this is word-spacing (our last resort guess) and the over is less than the under, we keep the higher value.
153 | // Otherwise, we revert to the underestimate.
154 | var under = maxWidth - previousWidth,
155 | over = width - maxWidth;
156 |
157 | return {
158 | match: 'estimate',
159 | size: parseFloat((parseFloat(size) - (property === 'word-spacing' && previousWidth && ( over < under ) ? 0 : interval)).toFixed(3))
160 | };
161 | }
162 |
163 | return width;
164 | }
165 |
166 | function calculateSizes($t, $children, maxWidth, maxFontSize, minFontSize)
167 | {
168 | var $c = $t.clone(true)
169 | .addClass('bigtext-cloned')
170 | .css({
171 | fontFamily: $t.css('font-family'),
172 | textTransform: $t.css('text-transform'),
173 | wordSpacing: $t.css('word-spacing'),
174 | letterSpacing: $t.css('letter-spacing'),
175 | position: 'absolute',
176 | left: BigText.DEBUG_MODE ? 0 : -9999,
177 | top: BigText.DEBUG_MODE ? 0 : -9999
178 | })
179 | .appendTo(document.body);
180 |
181 | // font-size isn't the only thing we can modify, we can also mess with:
182 | // word-spacing and letter-spacing. WebKit does not respect subpixel
183 | // letter-spacing, word-spacing, or font-size.
184 | // TODO try -webkit-transform: scale() as a workaround.
185 | var fontSizes = [],
186 | wordSpacings = [],
187 | minFontSizes = [],
188 | ratios = [];
189 |
190 | $children.css('float', 'left').each(function() {
191 | var $line = $(this),
192 | // TODO replace 8, 4 with a proportional size to the calculated font-size.
193 | intervals = BigText.supports.wholeNumberFontSizeOnly ? [8, 4, 1] : [8, 4, 1, 0.1],
194 | lineMax,
195 | newFontSize;
196 |
197 | if($line.hasClass(BigText.EXEMPT_CLASS)) {
198 | fontSizes.push(null);
199 | ratios.push(null);
200 | minFontSizes.push(false);
201 | return;
202 | }
203 |
204 | // TODO we can cache this ratio?
205 | var autoGuessSubtraction = 32, // font size in px
206 | currentFontSize = parseFloat($line.css('font-size')),
207 | ratio = ( $line.width() / currentFontSize ).toFixed(6);
208 |
209 | newFontSize = parseInt( maxWidth / ratio, 10 ) - autoGuessSubtraction;
210 |
211 | outer: for(var m=0, n=intervals.length; m maxFontSize) {
214 | newFontSize = maxFontSize;
215 | break outer;
216 | }
217 |
218 | lineMax = testLineDimensions($line, maxWidth, 'font-size', newFontSize + j*intervals[m], intervals[m], 'px', lineMax);
219 | if(typeof lineMax !== 'number') {
220 | newFontSize = lineMax.size;
221 |
222 | if(lineMax.match === 'exact') {
223 | break outer;
224 | }
225 | break inner;
226 | }
227 | }
228 | }
229 |
230 | ratios.push(maxWidth / newFontSize);
231 |
232 | if(newFontSize > maxFontSize) {
233 | fontSizes.push(maxFontSize);
234 | minFontSizes.push(false);
235 | } else if(!!minFontSize && newFontSize < minFontSize) {
236 | fontSizes.push(minFontSize);
237 | minFontSizes.push(true);
238 | } else {
239 | fontSizes.push(newFontSize);
240 | minFontSizes.push(false);
241 | }
242 | }).each(function(lineNumber) {
243 | var $line = $(this),
244 | wordSpacing = 0,
245 | interval = 1,
246 | maxWordSpacing;
247 |
248 | if($line.hasClass(BigText.EXEMPT_CLASS)) {
249 | wordSpacings.push(null);
250 | return;
251 | }
252 |
253 | // must re-use font-size, even though it was removed above.
254 | $line.css('font-size', fontSizes[lineNumber] + 'px');
255 |
256 | for(var m=1, n=3; m