├── .gitignore ├── Cakefile ├── Gemfile ├── Gemfile.lock ├── LICENSE.md ├── README.md ├── coffee ├── Color.coffee └── Transforms.coffee ├── config └── compass.rb ├── css ├── ie.css ├── sass_reference.css └── styles.css ├── docs ├── Color.html ├── Transforms.html └── docco.css ├── img ├── arc90-logo.png ├── arc90-logo@2x.png ├── background.png ├── kindling.png ├── kindling@2x.png ├── range-handle.png ├── range-handle@2x.png ├── sass-me-logo.png └── sass-me-logo@2x.png ├── index.html ├── js ├── Color.js ├── Transforms.js └── lib │ ├── html5shiv.js │ ├── jquery-ui-min.js │ ├── modernizr.custom.min.js │ └── underscore-min.js ├── scss ├── .DS_Store ├── _css.scss ├── _reset.scss ├── ie.scss ├── sass_reference.scss └── styles.scss └── tests ├── index.html ├── lib └── jasmine-1.2.0 │ ├── MIT.LICENSE │ ├── jasmine-html.js │ ├── jasmine.css │ └── jasmine.js └── spec ├── ColorSpec.js └── SpecHelper.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | 4 | *.scssc 5 | -------------------------------------------------------------------------------- /Cakefile: -------------------------------------------------------------------------------- 1 | fs = require 'fs' 2 | {spawn, exec} = require 'child_process' 3 | 4 | task 'watch', 'Watch source files and build JS & CSS', (options) -> 5 | runCommand = (name, args...) -> 6 | proc = spawn name, args 7 | proc.stderr.on 'data', (buffer) -> console.log buffer.toString() 8 | proc.stdout.on 'data', (buffer) -> console.log buffer.toString() 9 | proc.on 'exit', (status) -> process.exit(1) if status isnt 0 10 | runCommand 'coffee', '-wo', 'js', '-c', 'coffee' -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # SassMe Gemfile 2 | source "https://rubygems.org" 3 | 4 | gem "compass" 5 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | chunky_png (1.2.6) 5 | compass (0.12.2) 6 | chunky_png (~> 1.2) 7 | fssm (>= 0.2.7) 8 | sass (~> 3.1) 9 | fssm (0.2.9) 10 | sass (3.2.1) 11 | 12 | PLATFORMS 13 | ruby 14 | 15 | DEPENDENCIES 16 | compass 17 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | SassMe - an Arc90 Lab Project 2 | ============================= 3 | 4 | The MIT License (MIT) 5 | Copyright © 2012 Arc90 | http://arc90.com 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 8 | 9 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 10 | 11 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 12 | 13 | Authors: 14 | -------- 15 | 16 | Jim Nielsen / [@jimniels](https://github.com/jimniels) 17 | Darren Newton / [@DarrenN](https://github.com/DarrenN) 18 | Robert Petro / [@robertjpetro](https://github.com/robertjpetro) 19 | Matt Quintanilla / [@mattq](https://github.com/mattq) 20 | Jesse Reiner 21 | 22 | Documentation and source code can be found here: 23 | https://github.com/arc90/sass-color-picker -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NOTICE 2 | Due to organizational matters, this repo is no longer actively maintained. 3 | 4 | You can follow the currently maintained version at [https://github.com/jimniels/sassme](https://github.com/jimniels/sassme), which is hosted at [https://jim-nielsen.com/sassme](https://jim-nielsen.com/sassme). 5 | -------------------------------------------------------------------------------- /coffee/Color.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | Color 3 | ===== 4 | 5 | SassMe - an Arc90 Lab Project 6 | 7 | The MIT License (MIT) 8 | Copyright © 2012 Arc90 | http://arc90.com 9 | 10 | Permission is hereby granted, free of charge, to any person obtaining a copy of 11 | this software and associated documentation files (the “Software”), to deal in 12 | the Software without restriction, including without limitation the rights to 13 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 14 | the Software, and to permit persons to whom the Software is furnished to do so, 15 | subject to the following conditions: 16 | 17 | The above copyright notice and this permission notice shall be included in all 18 | copies or substantial portions of the Software. 19 | 20 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 22 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 23 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 24 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 25 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 26 | 27 | Authors: 28 | -------- 29 | 30 | Jim Nielsen 31 | Darren Newton 32 | Robert Petro 33 | Matt Quintanilla 34 | Jesse Reiner 35 | 36 | Color algorithms: 37 | ----------------- 38 | RGB/HSL Algorithms adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and- 39 | rgb-to-hsv-color-model-conversion-algorithms-in-javascript 40 | 41 | Syntactically Awesome Stylesheets: 42 | ---------------------------------- 43 | The overall structure of the SASS conversions is based on the Ruby 44 | SASS project: 45 | https://github.com/nex3/sass/blob/stable/lib/sass/script/color.rb 46 | Copyright (c) 2006-2009 Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein 47 | 48 | ### 49 | 50 | root = exports ? this 51 | 52 | # Stores different color values based on an initial Hexadecimal value. 53 | # The overall idea is to operate in a functional manner, so we don't modify 54 | # the state of the Color object once its initialized, we only return values. 55 | # 56 | # @param **color** _String_ 57 | # 58 | root.Color = class Color 59 | constructor: (color) -> 60 | @hex = if color.charAt(0) == "#" then color else "#" + color 61 | @rgb = @hex2rgb(@hex) if color? 62 | @hsl = @rgb2hsl(@rgb) if @rgb? 63 | return @ 64 | 65 | # Convert Hexadecimal color to rgb() 66 | # ------------ 67 | # 68 | # @param **color** _String_ 69 | # 70 | hex2rgb : (color) -> 71 | color = color.substr(1) if color.charAt(0) == '#' 72 | rgb = 73 | r : parseInt(color.charAt(0) + '' + color.charAt(1), 16), 74 | g : parseInt(color.charAt(2) + '' + color.charAt(3), 16), 75 | b : parseInt(color.charAt(4) + '' + color.charAt(5), 16) 76 | 77 | # Convert rgb to hsl values 78 | # ------------ 79 | # 80 | # @param **rgb** _Object_ 81 | # 82 | # Return and object with the HSL values converted for use in SASS 83 | # this now more or less a direct port of SASS's algo which 84 | # was take from Wikipedia 85 | # 86 | rgb2hsl : (rgb) -> 87 | [r, g, b] = [rgb.r, rgb.g, rgb.b] 88 | r /= 255 89 | g /= 255 90 | b /= 255 91 | 92 | max = Math.max(r, g, b) 93 | min = Math.min(r, g, b) 94 | 95 | d = max - min 96 | 97 | h = 98 | switch max 99 | when min then 0 100 | when r then 60 * (g - b) / d 101 | when g then 60 * (b - r) / d + 120 102 | when b then 60 * (r - g) / d + 240 103 | 104 | # Hue adjustment for negative numbers (facepalm) 105 | if h < 0 106 | h = 360 + h 107 | 108 | l = (max + min) / 2.0 109 | 110 | s = if max is min 111 | 0 112 | else if l < 0.5 113 | d / (2 * l) 114 | else 115 | d / (2 - 2 * l) 116 | 117 | hsl = 118 | h : Math.abs((h % 360).toFixed(5)) 119 | s : (s * 100).toFixed(5) 120 | l : (l * 100).toFixed(5) 121 | 122 | # Convert rgb to a hex number suitable for use in HTML 123 | # ------------ 124 | # http://stackoverflow.com/a/5623914/12799 125 | # 126 | # @param **rgb** _Object_ 127 | # 128 | rgb2hex : (rgb) -> 129 | "#" + ((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1); 130 | 131 | # Convert hue to rgb values 132 | # ------------ 133 | # 134 | # convenience method for hsl2rgb 135 | # 136 | # @param **p** _Integer_ 137 | # @param **q** _Integer_ 138 | # @param **t** _Integer_ 139 | # 140 | hue2rgb : (p, q, t) -> 141 | t += 1 if (t < 0) 142 | t -= 1 if (t > 1) 143 | return p + (q - p) * 6 * t if (t < 1/6) 144 | return q if (t < 1/2) 145 | return p + (q - p) * (2/3 - t) * 6 if (t < 2/3) 146 | p; 147 | 148 | # Convert hsl to rgb values 149 | # ------------ 150 | # 151 | # @param **hsl** _Object_ 152 | # 153 | hsl2rgb : (hsl) -> 154 | [h, s, l] = [parseFloat(hsl.h).toFixed(5) / 360, parseFloat(hsl.s).toFixed(5) / 100, parseFloat(hsl.l).toFixed(5) / 100] # We need to use the raw colors 155 | 156 | if s == 0 157 | r = g = b = l; # achromatic 158 | else 159 | q = if l < 0.5 then l * (1 + s) else l + s - l * s 160 | p = 2 * l - q; 161 | r = @hue2rgb(p, q, h + 1/3); 162 | g = @hue2rgb(p, q, h); 163 | b = @hue2rgb(p, q, h - 1/3); 164 | 165 | rgb = 166 | r : Math.round(r * 255) 167 | g : Math.round(g * 255) 168 | b : Math.round(b * 255) 169 | 170 | # Convert hsl to hex number suitable for use in HTML 171 | # ------------ 172 | # 173 | # @param **hsl** _Object_ 174 | # 175 | hsl2hex : (hsl) -> 176 | @rgb2hex @hsl2rgb(hsl) 177 | 178 | # Modify a color 179 | # ------------ 180 | # 181 | # @param **attr** _Object_ attributes you want to change 182 | # 183 | # NOT SAFE - doesn't check values for constraints! 184 | # Returns a copy of the color object with new values, 185 | # does not set the instance vars to the new values 186 | # Analogous to http://sass-lang.com/docs/yardoc/Sass/Script/Color.html#with-instance_method 187 | # 188 | mod : (attr) -> 189 | 190 | # Cannot modify RGB and HSL in the same attr 191 | if (_.intersection(_.keys(attr), ['h', 's', 'l']).length > 0) and (_.intersection(_.keys(attr), ['r', 'g', 'b']).length > 0) then return null 192 | 193 | # See what type of attributes we're dealing with in attr 194 | if _.intersection(_.keys(attr), ['r', 'g', 'b']).length > 0 195 | type = "rgb" 196 | else if _.intersection(_.keys(attr), ['h', 's', 'l']).length > 0 197 | type = "hsl" 198 | else return null 199 | 200 | # remove null values from attr obj 201 | _.each attr, (val, key, list) -> 202 | if val == null then delete list[key] 203 | 204 | # If the attr object is empty then send back unmodified object 205 | switch type 206 | when 'rgb' 207 | rgb = _.pick attr, 'r', 'g', 'b' 208 | if _.isEmpty(rgb) == false 209 | out = _.extend(_.clone(@rgb), rgb) 210 | else 211 | out = @rgb 212 | 213 | when 'hsl' 214 | hsl = _.pick attr, 'h', 's', 'l' 215 | if _.isEmpty(hsl) == false 216 | out = _.extend(_.clone(@hsl), hsl) 217 | else 218 | out = @hsl 219 | out 220 | 221 | # Ensure a computed value is within a threshold 222 | # ------------ 223 | # and if not, send back the upper or lower bounds 224 | # 225 | # @param **attr** _Integer_ start value, usually Color attribute 226 | # @param **amount** _Integer_ amount to change attr 227 | # @param **limit** _Array_ the upper and lower bounds 228 | # @param **direction** _String_ the math operator, +, -, *, etc. 229 | # 230 | constrain : (attr, amount, limit, direction) -> 231 | math = [attr, direction, amount].join ' ' 232 | val = eval math # do the math! 233 | test = limit[1] >= val >= limit[0] 234 | if test then val else 235 | if val < limit[0] then val = limit[0] 236 | if val > limit[1] then val = limit[1] 237 | Math.abs(val) # Make sure negative values are positive 238 | 239 | # Calculate correct # of degrees for shifting hues 240 | # ------------ 241 | # 242 | # @param **attr** _Integer_ start value, usually Color attribute 243 | # @param **amount** _Integer_ amount to change degrees 244 | # 245 | constrain_degrees : (attr, amount) -> 246 | val = attr + amount # do the math! 247 | if val > 360 then val -= 360 248 | if val < 0 then val += 360 249 | Math.abs(val) # Make sure negative values are positive 250 | 251 | # Getters for individual RGB & HSL values of color 252 | # ------------ 253 | red : -> 254 | @rgb.r 255 | 256 | green : -> 257 | @rgb.g 258 | 259 | blue: -> 260 | @rgb.b 261 | 262 | hue : -> 263 | @hsl.h 264 | 265 | saturation : -> 266 | @hsl.s 267 | 268 | lightness : -> 269 | @hsl.l -------------------------------------------------------------------------------- /coffee/Transforms.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | Transforms 3 | ========== 4 | 5 | SassMe - an Arc90 Lab Project 6 | 7 | The MIT License (MIT) 8 | Copyright © 2012 Arc90 | http://arc90.com 9 | 10 | Permission is hereby granted, free of charge, to any person obtaining a copy of 11 | this software and associated documentation files (the “Software”), to deal in 12 | the Software without restriction, including without limitation the rights to 13 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 14 | the Software, and to permit persons to whom the Software is furnished to do so, 15 | subject to the following conditions: 16 | 17 | The above copyright notice and this permission notice shall be included in all 18 | copies or substantial portions of the Software. 19 | 20 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 22 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 23 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 24 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 25 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 26 | 27 | Authors: 28 | -------- 29 | 30 | Jim Nielsen 31 | Darren Newton 32 | Robert Petro 33 | Matt Quintanilla 34 | Jesse Reiner 35 | 36 | Syntactically Awesome Stylesheets: 37 | ---------------------------------- 38 | 39 | Structure of the color functions ported from SASS - 40 | https://github.com/nex3/sass/blob/stable/lib/sass/script/functions.rb 41 | Copyright (c) 2006-2009 Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein 42 | 43 | ### 44 | 45 | root = exports ? this 46 | 47 | root.Transforms = 48 | 49 | #### Ligten a color 50 | # 51 | # @param **color** _String_ expects a hexadecimal 52 | # @param **percentage** _Integer_ expects 0-100 53 | # 54 | lighten : (color, percentage) -> 55 | hsl = color.mod 56 | l : color.constrain(color.lightness(), percentage, [0, 100], '+') 57 | color.rgb2hex(color.hsl2rgb(hsl)) 58 | 59 | #### Darken a color 60 | # 61 | # @param **color** _String_ expects a hexadecimal 62 | # @param **percentage** _Integer_ expects 0-100 63 | # 64 | darken : (color, percentage) -> 65 | hsl = color.mod 66 | l : color.constrain(color.lightness(), percentage, [0, 100], '-') 67 | color.rgb2hex(color.hsl2rgb(hsl)) 68 | 69 | #### Saturate a color 70 | # 71 | # @param **color** _String_ expects a hexadecimal 72 | # @param **percentage** _Integer_ expects 0-100 73 | # 74 | saturate : (color, percentage) -> 75 | hsl = color.mod 76 | s : color.constrain(color.saturation(), percentage, [0, 100], '+') 77 | color.rgb2hex(color.hsl2rgb(hsl)) 78 | 79 | #### Desaturate a color 80 | # 81 | # @param **color** _String_ expects a hexadecimal 82 | # @param **percentage** _Integer_ expects 0-100 83 | # 84 | desaturate : (color, percentage) -> 85 | hsl = color.mod 86 | s : color.constrain(color.saturation(), percentage, [0, 100], '-') 87 | color.rgb2hex(color.hsl2rgb(hsl)) 88 | 89 | #### Adjust the hue 90 | # 91 | # @param **color** _String_ expects a hexadecimal 92 | # @param **degrees** _Integer_ expects 0-360 93 | # 94 | adjust_hue : (color, degrees) -> 95 | hsl = color.mod 96 | h : color.constrain_degrees(color.hue(), degrees) 97 | color.rgb2hex(color.hsl2rgb(hsl)) 98 | -------------------------------------------------------------------------------- /config/compass.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "css" 6 | sass_dir = "scss" 7 | images_dir = "img" 8 | javascripts_dir = "js" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | output_style = :compact 12 | 13 | # To enable relative paths to assets via compass helper functions. Uncomment: 14 | # relative_assets = true 15 | 16 | # To disable debugging comments that display the original location of your selectors. Uncomment: 17 | line_comments = false 18 | 19 | 20 | # If you prefer the indented syntax, you might want to regenerate this 21 | # project again passing --syntax sass, or you can uncomment this: 22 | # preferred_syntax = :sass 23 | # and then run: 24 | # sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass 25 | -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | #container { border: 1px solid #cccccc!important; } 2 | 3 | .ui-slider-handle { background: transparent url(../img/range-handle.png) no-repeat !important; } 4 | 5 | #header h1 { background: url(../img/sass-me-logo.png) 0 0 no-repeat !important; } 6 | 7 | .swatchContainer input { height: 30px!important; } 8 | -------------------------------------------------------------------------------- /css/sass_reference.css: -------------------------------------------------------------------------------- 1 | .lighten_1 { color: #0055ff; } 2 | 3 | .lighten_2 { color: #99bbff; } 4 | 5 | .lighten_3 { color: white; } 6 | 7 | .lighten_4 { color: #003399; } 8 | 9 | .lighten_red_1 { color: #ff6666; } 10 | 11 | .darken_1 { color: #001133; } 12 | 13 | .darken_2 { color: black; } 14 | 15 | .darken_4 { color: #003399; } 16 | 17 | .adjust_hue_1 { color: #001a99; } 18 | 19 | .adjust_hue_2 { color: #990000; } 20 | 21 | .adjust_hue_3 { color: #990000; } 22 | 23 | .adjust_hue_4 { color: #003399; } 24 | 25 | .adjust_hue_5 { color: #996600; } 26 | 27 | .func_stack_a { color: #e675a0; } 28 | 29 | .func_stack_b { color: #d0cca4; } 30 | 31 | .func_stack_c { color: #e1df70; } 32 | 33 | .hue { color: 339.18367deg; } 34 | 35 | .sat { color: 42.6087%; } 36 | 37 | .light { color: 77.45098%; } 38 | 39 | .hue_blue { color: 220deg; } 40 | 41 | .sat_blue { color: 100%; } 42 | 43 | .light_blue { color: 30%; } 44 | 45 | .red { color: 222; } 46 | 47 | .rgb { color: #deadbe; } 48 | 49 | .darken_10 { color: #cf89a1; } 50 | 51 | .saturate_57 { color: #ff8cb4; } 52 | 53 | .adjust_hue_302 { color: #cfadde; } 54 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) 2 | */ 3 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 4 | 5 | /* HTML5 display-role reset for older browsers */ 6 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 7 | 8 | body { line-height: 1; } 9 | 10 | ol, ul { list-style: none; } 11 | 12 | blockquote, q { quotes: none; } 13 | 14 | blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 15 | 16 | table { border-collapse: collapse; border-spacing: 0; } 17 | 18 | /* PAGE & STRUCTURAL STYLES 19 | General page and structural styles 20 | */ 21 | * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 22 | 23 | body { padding: 0 20px; margin: 0; font: 16px/1.4em 'Droid Sans', Arial, sans-serif; color: #333; background: #eeeeee url(../img/background.png); background-size: 400px 300px; border-top: 3px solid #ce4ec6; } 24 | @media screen and (max-width: 565px) { body { padding: 0; } } 25 | 26 | .wrapper { max-width: 850px; width: 850px\9; margin: 0 auto; } 27 | 28 | #container { clear: both; background: #fdfdfd; overflow: hidden; margin-bottom: 10px; -webkit-box-shadow: #dedede 0 3px 0; -moz-box-shadow: #dedede 0 3px 0; box-shadow: #dedede 0 3px 0; border: 1px solid #eeeeee; } 29 | @media screen and (max-width: 565px) { #container { padding: 0; } } 30 | 31 | a, a:link, a:visited { color: #ce4ec6; text-decoration: none; } 32 | 33 | a:hover { color: #671c62; text-decoration: underline; } 34 | 35 | /* INPUT ELEMENTS 36 | Page styles for input elements 37 | 38 | */ 39 | label { color: #777777; padding-top: 5px; display: block; text-transform: uppercase; letter-spacing: .15em; } 40 | 41 | input#color { border: 1px solid #e0e0e0; border-bottom-color: #e5e5e5; color: #333333; box-shadow: inset 0 1px 2px #eee; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; padding-left: 2em; font-size: 1em; height: 44px; width: 100%; font-family: 'Droid Sans Mono', Courier, monospace; position: relative; z-index: 500; } 42 | input#color::-webkit-input-placeholder { color: #cccccc; } 43 | input#color:-moz-placeholder { color: #cccccc; } 44 | input#color:focus { outline: none; border: 1px solid #ce4ec6; box-shadow: 0 0 8px rgba(206, 78, 198, 0.6); } 45 | 46 | label[for="color"] { position: absolute; padding: 0 0 0 1.4em; color: #cccccc; z-index: 501; } 47 | 48 | .fakeSlider { margin: 0 auto; width: 80%; } 49 | 50 | .ui-slider { position: relative; } 51 | 52 | .ui-widget-content { border-top: 2px solid #C5C5C5; border-bottom: 2px solid #C5C5C5; height: 0px; } 53 | 54 | .ui-slider-handle { background: transparent url(../img/range-handle@2x.png) no-repeat; background-size: 20px 20px; position: absolute; z-index: 10; bottom: -9px; margin-top: -3px; width: 20px; height: 20px; margin-left: -1%; cursor: pointer; outline: none; } 55 | 56 | input[type='range'] { -webkit-appearance: none; background-color: #ddd; border-top: 1px solid #aaa; border-bottom: 1px solid #eee; height: 8px; border-radius: 6px; } 57 | 58 | input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; z-index: 100; position: relative; top: 0px; width: 20px; height: 20px; cursor: pointer; outline: none; background-repeat: no-repeat; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; background: transparent url(../img/range-handle@2x.png) no-repeat; background-size: 20px 20px; } 59 | 60 | /* PAGE HEADER 61 | SassMe page title styles 62 | */ 63 | #header { clear: both; padding: 20px 0; width: 100%; overflow: auto; } 64 | #header h1 { float: left; width: 230px; height: 53px; overflow: visible; background: url(../img/sass-me-logo@2x.png) 0 0 no-repeat; background-size: 230px 53px; text-indent: -999px; margin: 0 20px 0 15px; } 65 | #header #tagline { float: left; margin-top: 53px; width: 50%; position: relative; } 66 | @media screen and (max-width: 565px) { #header #tagline { width: 100px; } } 67 | #header #tagline p { position: absolute; bottom: 0; left: 0; font-size: 1em; line-height: 1.3em; color: #777777; text-shadow: 0 1px 0 white; } 68 | @media screen and (max-width: 565px) { #header #tagline p { font-size: 0.75em; line-height: 1.1em; } } 69 | 70 | /* LIST ITEMS 71 | Styles for each
  • item 72 | */ 73 | .listItem { text-align: center; position: relative; opacity: 1; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; -ms-transition: .5s all ease; -o-transition: .5s all ease; transition: .5s all ease; } 74 | .listItem.slider { margin: 25px 0; } 75 | .listItem.slider input { display: block; width: 80%; margin: 0 auto; } 76 | .listItem.slider label { font-size: 0.625em; } 77 | .listItem.slider a { position: absolute; right: 3%; top: -7px; font-size: 0.625em; } 78 | 79 | .focus label, .focus #help { color: #ce4ec6; } 80 | .focus #help { opacity: 1; } 81 | 82 | .inactive .listItem { opacity: .15; } 83 | .inactive .listItem#swatch1 { opacity: 1; } 84 | .inactive .listItem #colorOutput { opacity: 0; } 85 | 86 | /* SWATCHES 87 | Styles for the main content swatches 88 | */ 89 | @media only screen and (min-width: 565px) { #swatch1 .swatch { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; } 90 | #swatch2 .swatch { -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; } 91 | #container { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } } 92 | .swatchPointer { width: 0; height: 0; border-top: 150px solid transparent; border-bottom: 150px solid transparent; border-left: 40px solid #fff; position: absolute; z-index: 10; top: 0px; right: -40px; } 93 | 94 | .swatchContainer { color: #fff; float: left; position: relative; } 95 | .swatchContainer#swatch1 { width: 47%; } 96 | .swatchContainer#swatch2 { width: 53%; } 97 | .swatchContainer .swatch { height: 300px; line-height: 300px; width: 100%; font-size: 1.125em; font-family: 'Droid Sans Mono', Courier, monospace; } 98 | .swatchContainer #colorInput { position: relative; width: 130px; margin: 0 auto; } 99 | .swatchContainer #colorOutput { opacity: 1; width: 130px; background: rgba(0, 0, 0, 0.4); padding: 10px 20px; border: 0px solid #000; color: #fff; position: relative; z-index: 500; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset black 0 0 4px; -moz-box-shadow: inset black 0 0 4px; box-shadow: inset black 0 0 4px; } 100 | .swatchContainer .swatchLabel { position: absolute; width: 100%; display: none; padding: 20px 0; color: #777777; text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: 0.625em; } 101 | 102 | /* INDIVIDUAL ELEMENTS 103 | Styles for individual elements on the page 104 | */ 105 | .codeHelp { background-color: white; border: 1px solid #EBEBEB; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 -4px 6px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 -4px 6px; box-shadow: rgba(0, 0, 0, 0.1) 0 -4px 6px; color: #353535; display: none; left: 20%; padding: .5em; position: absolute; text-align: center; top: 260px; z-index: 400; width: 60%; } 106 | 107 | #codeOutput { clear: both; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; } 108 | #codeOutput input { font-family: 'Droid Sans Mono', Courier, monospace; padding: 14px 0; margin: 0; font-size: 0.875em; width: 100%; background: #eaeaea; cursor: pointer; outline: none; text-align: center; border: none; } 109 | #codeOutput input::-webkit-input-placeholder { font-family: 'Droid Sans', Arial, sans-serif; color: #ce4ec6; } 110 | #codeOutput input:-moz-placeholder { font-family: 'Droid Sans', Arial, sans-serif; color: #ce4ec6; } 111 | #codeOutput input:hover { color: #ce4ec6; } 112 | #codeOutput input:focus { background: #ce4ec6; color: #fff; } 113 | 114 | #initialHelp { opacity: 0; font-family: "Droid Sans", Helvetica, Arial; position: absolute; left: 80%; top: 40%; color: #777777; font-size: 0.875em; line-height: 4em; width: 400px; color: #ce4ec6; z-index: 400; } 115 | 116 | /* FOOTER 117 | 118 | */ 119 | #footer { font-size: 0.625em; font-weight: bold; line-height: 1.3em; padding: 5px 5px; color: #777777; text-shadow: 0 1px 0 white; clear: both; } 120 | #footer img { margin: 0 10px; position: relative; } 121 | #footer #arc90 { float: left; width: 50%; } 122 | #footer #arc90 img { float: left; width: 91px; height: 35px; top: -4px; } 123 | #footer #kindling { text-align: right; float: right; width: 50%; } 124 | #footer #kindling img { float: right; width: 100px; height: 35px; top: -2px; } 125 | @media screen and (max-width: 565px) { #footer div { width: 50% !important; border-bottom: 1px solid #ddd; padding: 0 20px 10px; } 126 | #footer img { float: none !important; margin: 0 0 !important; } } 127 | -------------------------------------------------------------------------------- /docs/Color.html: -------------------------------------------------------------------------------- 1 | Color.coffee

    Color.coffee

    #

    		 
    Color
  2 | =====
  3 | 
  4 | SassMe - an Arc90 Lab Project
  5 | 
  6 | The MIT License (MIT)
  7 | Copyright © 2012 Arc90 | http://arc90.com
  8 | 
  9 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 10 | this software and associated documentation files (the “Software”), to deal in
 11 | the Software without restriction, including without limitation the rights to
 12 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 13 | the Software, and to permit persons to whom the Software is furnished to do so,
 14 | subject to the following conditions:
 15 | 
 16 | The above copyright notice and this permission notice shall be included in all
 17 | copies or substantial portions of the Software.
 18 | 
 19 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 21 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 22 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 23 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 24 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 25 | 
 26 | Authors:
 27 | --------
 28 | 
 29 | Jim Nielsen
 30 | Darren Newton
 31 | Robert Petro
 32 | Matt Quintanilla
 33 | Jesse Reiner
 34 | 
 35 | Color algorithms:
 36 | -----------------
 37 | RGB/HSL Algorithms adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-
 38 | rgb-to-hsv-color-model-conversion-algorithms-in-javascript
 39 | 
 40 | Syntactically Awesome Stylesheets:
 41 | ----------------------------------
 42 | The overall structure of the SASS conversions is based on the Ruby
 43 | SASS project:
 44 | https://github.com/nex3/sass/blob/stable/lib/sass/script/color.rb
 45 | Copyright (c) 2006-2009 Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein

    #

    		 
    root = exports ? this

    Stores different color values based on an initial Hexadecimal value. 46 | The overall idea is to operate in a functional manner, so we don't modify 47 | the state of the Color object once its initialized, we only return values.

    48 | 49 |

    @param color String

    		 
    root.Color = class Color
 50 |   constructor: (color) ->  
 51 |     @hex = if color.charAt(0) == "#" then color else "#" + color
 52 |     @rgb = @hex2rgb(@hex) if color?
 53 |     @hsl = @rgb2hsl(@rgb) if @rgb?
 54 |     return @

    Convert Hexadecimal color to rgb()

    55 | 56 |

    @param color String

    		 
      hex2rgb : (color) ->
 57 |     color = color.substr(1) if color.charAt(0) == '#'
 58 |     rgb =
 59 |       r : parseInt(color.charAt(0) + '' + color.charAt(1), 16),
 60 |       g : parseInt(color.charAt(2) + '' + color.charAt(3), 16),
 61 |       b : parseInt(color.charAt(4) + '' + color.charAt(5), 16)

    Convert rgb to hsl values

    62 | 63 |

    @param rgb Object

    64 | 65 |

    Return and object with the HSL values converted for use in SASS 66 | this now more or less a direct port of SASS's algo which 67 | was take from Wikipedia

    		 
      rgb2hsl : (rgb) ->
 68 |     [r, g, b] = [rgb.r, rgb.g, rgb.b]
 69 |     r /= 255
 70 |     g /= 255
 71 |     b /= 255
 72 | 
 73 |     max = Math.max(r, g, b)
 74 |     min = Math.min(r, g, b)
 75 | 
 76 |     d = max - min
 77 | 
 78 |     h =
 79 |       switch max
 80 |         when min then 0
 81 |         when r then 60 * (g - b) / d
 82 |         when g then 60 * (b - r) / d + 120
 83 |         when b then 60 * (r - g) / d + 240

    Hue adjustment for negative numbers (facepalm)

    		 
        if h < 0
 84 |       h = 360 + h
 85 | 
 86 |     l = (max + min) / 2.0
 87 | 
 88 |     s = if max is min
 89 |           0 
 90 |         else if l < 0.5
 91 |           d / (2 * l)
 92 |         else
 93 |           d / (2 - 2 * l)
 94 | 
 95 |     hsl = 
 96 |       h : Math.abs((h % 360).toFixed(3))
 97 |       s : (s * 100).toFixed(3) 
 98 |       l : (l * 100).toFixed(3)

    Convert rgb to a hex number suitable for use in HTML

    99 | 100 |

    http://stackoverflow.com/a/5623914/12799

    101 | 102 |

    @param rgb Object 

      rgb2hex : (rgb) ->
103 |     "#" + ((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1);

    Convert hue to rgb values

    104 | 105 |

    convenience method for hsl2rgb

    106 | 107 |

    @param p Integer
    108 | @param q Integer
    109 | @param t Integer 

      hue2rgb : (p, q, t) ->
110 |     t += 1 if (t < 0)
111 |     t -= 1 if (t > 1)
112 |     return p + (q - p) * 6 * t if (t < 1/6) 
113 |     return q if (t < 1/2)
114 |     return p + (q - p) * (2/3 - t) * 6 if (t < 2/3)
115 |     p;

    Convert hsl to rgb values

    116 | 117 |

    @param hsl Object 

      hsl2rgb : (hsl) ->
118 |     [h, s, l] = [parseFloat(hsl.h).toFixed(3) / 360, parseFloat(hsl.s).toFixed(3) / 100, parseFloat(hsl.l).toFixed(3) / 100] # We need to use the raw colors
119 | 
120 |     if s == 0 
121 |       r = g = b = l; # achromatic
122 |     else 
123 |       q =  if l < 0.5 then l * (1 + s) else l + s - l * s
124 |       p = 2 * l - q;
125 |       r = @hue2rgb(p, q, h + 1/3);
126 |       g = @hue2rgb(p, q, h);
127 |       b = @hue2rgb(p, q, h - 1/3);
128 |   
129 |     rgb =
130 |       r : Math.round(r * 255)
131 |       g : Math.round(g * 255) 
132 |       b : Math.round(b * 255)

    Convert hsl to hex number suitable for use in HTML

    133 | 134 |

    @param hsl Object 

      hsl2hex : (hsl) ->
135 |     @rgb2hex @hsl2rgb(hsl)

    Modify a color

    136 | 137 |

    @param attr Object attributes you want to change

    138 | 139 |

    NOT SAFE - doesn't check values for constraints!
    140 | Returns a copy of the color object with new values, 141 | does not set the instance vars to the new values
    142 | Analogous to http://sass-lang.com/docs/yardoc/Sass/Script/Color.html#with-instance_method

    		 
      mod : (attr) ->

    Cannot modify RGB and HSL in the same attr

    		 
        if (_.intersection(_.keys(attr), ['h', 's', 'l']).length > 0) and (_.intersection(_.keys(attr), ['r', 'g', 'b']).length > 0) then return null

    See what type of attributes we're dealing with in attr

    		 
        if _.intersection(_.keys(attr), ['r', 'g', 'b']).length > 0
143 |       type = "rgb"
144 |     else if _.intersection(_.keys(attr), ['h', 's', 'l']).length > 0
145 |       type = "hsl"
146 |     else return null

    remove null values from attr obj

    		 
        _.each attr, (val, key, list) ->
147 |       if val == null then delete list[key]

    If the attr object is empty then send back unmodified object

    		 
        switch type
148 |       when 'rgb' 
149 |         rgb = _.pick attr, 'r', 'g', 'b'
150 |         if _.isEmpty(rgb) == false 
151 |           out = _.extend(_.clone(@rgb), rgb) 
152 |         else 
153 |           out = @rgb
154 | 
155 |       when 'hsl'
156 |         hsl = _.pick attr, 'h', 's', 'l'
157 |         if _.isEmpty(hsl) == false 
158 |           out = _.extend(_.clone(@hsl), hsl) 
159 |         else 
160 |           out = @hsl
161 |     out

    Ensure a computed value is within a threshold

    162 | 163 |

    and if not, send back the upper or lower bounds

    164 | 165 |

    @param attr Integer start value, usually Color attribute
    166 | @param amount Integer amount to change attr
    167 | @param limit Array the upper and lower bounds
    168 | @param direction String the math operator, +, -, *, etc. 

      constrain : (attr, amount, limit, direction) ->
169 |     math = [attr, direction, amount].join ' '
170 |     val = eval math # do the math!
171 |     test = limit[1] >= val >= limit[0]
172 |     if test then val else
173 |       if val < limit[0] then val = limit[0]
174 |       if val > limit[1] then val = limit[1]
175 |     Math.abs(val) # Make sure negative values are positive

    Calculate correct # of degrees for shifting hues

    176 | 177 |

    @param attr Integer start value, usually Color attribute
    178 | @param amount Integer amount to change degrees 

      constrain_degrees : (attr, amount) ->
179 |     val = attr + amount # do the math!   
180 |     if val > 360 then val -= 360
181 |     if val < 0 then val += 360
182 |     Math.abs(val) # Make sure negative values are positive

    Getters for individual RGB & HSL values of color

    		 
      red : ->
183 |     @rgb.r
184 | 
185 |   green : ->
186 |     @rgb.g
187 | 
188 |   blue: ->
189 |     @rgb.b
190 | 
191 |   hue : ->
192 |     @hsl.h 
193 | 
194 |   saturation : ->
195 |     @hsl.s
196 | 
197 |   lightness : ->
198 |     @hsl.l
199 | 
200 |
    -------------------------------------------------------------------------------- /docs/Transforms.html: -------------------------------------------------------------------------------- 1 | Transforms.coffee

    Transforms.coffee

    #

    		 
    Transforms
 2 | ==========
 3 | 
 4 | SassMe - an Arc90 Lab Project
 5 | 
 6 | The MIT License (MIT)
 7 | Copyright © 2012 Arc90 | http://arc90.com
 8 | 
 9 | Permission is hereby granted, free of charge, to any person obtaining a copy of
10 | this software and associated documentation files (the “Software”), to deal in
11 | the Software without restriction, including without limitation the rights to
12 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
13 | the Software, and to permit persons to whom the Software is furnished to do so,
14 | subject to the following conditions:
15 | 
16 | The above copyright notice and this permission notice shall be included in all
17 | copies or substantial portions of the Software.
18 | 
19 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
21 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
22 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
23 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
24 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
25 | 
26 | Authors:
27 | --------
28 | 
29 | Jim Nielsen
30 | Darren Newton
31 | Robert Petro
32 | Matt Quintanilla
33 | Jesse Reiner
34 | 
35 | Syntactically Awesome Stylesheets:
36 | ----------------------------------
37 | 
38 | Structure of the color functions ported from SASS -
39 | https://github.com/nex3/sass/blob/stable/lib/sass/script/functions.rb
40 | Copyright (c) 2006-2009 Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein

    #

    		 
    root = exports ? this
41 | 
42 | root.Transforms =

    Ligten a color

    43 | 44 |

    @param color String expects a hexadecimal
    45 | @param percentage Integer expects 0-100 

      lighten : (color, percentage) ->
46 |     hsl = color.mod
47 |       l : color.constrain(color.lightness(), percentage, [0, 100], '+')
48 |     color.rgb2hex(color.hsl2rgb(hsl))

    Darken a color

    49 | 50 |

    @param color String expects a hexadecimal
    51 | @param percentage Integer expects 0-100 

      darken : (color, percentage) ->
52 |     hsl = color.mod
53 |       l : color.constrain(color.lightness(), percentage, [0, 100], '-')
54 |     color.rgb2hex(color.hsl2rgb(hsl))

    Saturate a color

    55 | 56 |

    @param color String expects a hexadecimal
    57 | @param percentage Integer expects 0-100 

      saturate : (color, percentage) ->
58 |     hsl = color.mod
59 |       s : color.constrain(color.saturation(), percentage, [0, 100], '+')
60 |     color.rgb2hex(color.hsl2rgb(hsl))

    Desaturate a color

    61 | 62 |

    @param color String expects a hexadecimal
    63 | @param percentage Integer expects 0-100 

      desaturate : (color, percentage) ->
64 |     hsl = color.mod
65 |       s : color.constrain(color.saturation(), percentage, [0, 100], '-')
66 |     color.rgb2hex(color.hsl2rgb(hsl))

    Adjust the hue

    67 | 68 |

    @param color String expects a hexadecimal
    69 | @param degrees Integer expects 0-360 

      adjust_hue : (color, degrees) ->
70 |     hsl = color.mod
71 |       h : color.constrain_degrees(color.hue(), degrees)
72 |     color.rgb2hex(color.hsl2rgb(hsl))
73 | 
74 |
    -------------------------------------------------------------------------------- /docs/docco.css: -------------------------------------------------------------------------------- 1 | /*--------------------- Layout and Typography ----------------------------*/ 2 | body { 3 | font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 4 | font-size: 15px; 5 | line-height: 22px; 6 | color: #252519; 7 | margin: 0; padding: 0; 8 | } 9 | a { 10 | color: #261a3b; 11 | } 12 | a:visited { 13 | color: #261a3b; 14 | } 15 | p { 16 | margin: 0 0 15px 0; 17 | } 18 | h1, h2, h3, h4, h5, h6 { 19 | margin: 0px 0 15px 0; 20 | } 21 | h1 { 22 | margin-top: 40px; 23 | } 24 | hr { 25 | border: 0 none; 26 | border-top: 1px solid #e5e5ee; 27 | height: 1px; 28 | margin: 20px 0; 29 | } 30 | #container { 31 | position: relative; 32 | } 33 | #background { 34 | position: fixed; 35 | top: 0; left: 525px; right: 0; bottom: 0; 36 | background: #f5f5ff; 37 | border-left: 1px solid #e5e5ee; 38 | z-index: -1; 39 | } 40 | #jump_to, #jump_page { 41 | background: white; 42 | -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777; 43 | -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; 44 | font: 10px Arial; 45 | text-transform: uppercase; 46 | cursor: pointer; 47 | text-align: right; 48 | } 49 | #jump_to, #jump_wrapper { 50 | position: fixed; 51 | right: 0; top: 0; 52 | padding: 5px 10px; 53 | } 54 | #jump_wrapper { 55 | padding: 0; 56 | display: none; 57 | } 58 | #jump_to:hover #jump_wrapper { 59 | display: block; 60 | } 61 | #jump_page { 62 | padding: 5px 0 3px; 63 | margin: 0 0 25px 25px; 64 | } 65 | #jump_page .source { 66 | display: block; 67 | padding: 5px 10px; 68 | text-decoration: none; 69 | border-top: 1px solid #eee; 70 | } 71 | #jump_page .source:hover { 72 | background: #f5f5ff; 73 | } 74 | #jump_page .source:first-child { 75 | } 76 | table td { 77 | border: 0; 78 | outline: 0; 79 | } 80 | td.docs, th.docs { 81 | max-width: 450px; 82 | min-width: 450px; 83 | min-height: 5px; 84 | padding: 10px 25px 1px 50px; 85 | overflow-x: hidden; 86 | vertical-align: top; 87 | text-align: left; 88 | } 89 | .docs pre { 90 | margin: 15px 0 15px; 91 | padding-left: 15px; 92 | } 93 | .docs p tt, .docs p code { 94 | background: #f8f8ff; 95 | border: 1px solid #dedede; 96 | font-size: 12px; 97 | padding: 0 0.2em; 98 | } 99 | .pilwrap { 100 | position: relative; 101 | } 102 | .pilcrow { 103 | font: 12px Arial; 104 | text-decoration: none; 105 | color: #454545; 106 | position: absolute; 107 | top: 3px; left: -20px; 108 | padding: 1px 2px; 109 | opacity: 0; 110 | -webkit-transition: opacity 0.2s linear; 111 | } 112 | td.docs:hover .pilcrow { 113 | opacity: 1; 114 | } 115 | td.code, th.code { 116 | padding: 14px 15px 16px 25px; 117 | width: 100%; 118 | vertical-align: top; 119 | background: #f5f5ff; 120 | border-left: 1px solid #e5e5ee; 121 | } 122 | pre, tt, code { 123 | font-size: 12px; line-height: 18px; 124 | font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace; 125 | margin: 0; padding: 0; 126 | } 127 | 128 | 129 | /*---------------------- Syntax Highlighting -----------------------------*/ 130 | td.linenos { background-color: #f0f0f0; padding-right: 10px; } 131 | span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; } 132 | body .hll { background-color: #ffffcc } 133 | body .c { color: #408080; font-style: italic } /* Comment */ 134 | body .err { border: 1px solid #FF0000 } /* Error */ 135 | body .k { color: #954121 } /* Keyword */ 136 | body .o { color: #666666 } /* Operator */ 137 | body .cm { color: #408080; font-style: italic } /* Comment.Multiline */ 138 | body .cp { color: #BC7A00 } /* Comment.Preproc */ 139 | body .c1 { color: #408080; font-style: italic } /* Comment.Single */ 140 | body .cs { color: #408080; font-style: italic } /* Comment.Special */ 141 | body .gd { color: #A00000 } /* Generic.Deleted */ 142 | body .ge { font-style: italic } /* Generic.Emph */ 143 | body .gr { color: #FF0000 } /* Generic.Error */ 144 | body .gh { color: #000080; font-weight: bold } /* Generic.Heading */ 145 | body .gi { color: #00A000 } /* Generic.Inserted */ 146 | body .go { color: #808080 } /* Generic.Output */ 147 | body .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ 148 | body .gs { font-weight: bold } /* Generic.Strong */ 149 | body .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ 150 | body .gt { color: #0040D0 } /* Generic.Traceback */ 151 | body .kc { color: #954121 } /* Keyword.Constant */ 152 | body .kd { color: #954121; font-weight: bold } /* Keyword.Declaration */ 153 | body .kn { color: #954121; font-weight: bold } /* Keyword.Namespace */ 154 | body .kp { color: #954121 } /* Keyword.Pseudo */ 155 | body .kr { color: #954121; font-weight: bold } /* Keyword.Reserved */ 156 | body .kt { color: #B00040 } /* Keyword.Type */ 157 | body .m { color: #666666 } /* Literal.Number */ 158 | body .s { color: #219161 } /* Literal.String */ 159 | body .na { color: #7D9029 } /* Name.Attribute */ 160 | body .nb { color: #954121 } /* Name.Builtin */ 161 | body .nc { color: #0000FF; font-weight: bold } /* Name.Class */ 162 | body .no { color: #880000 } /* Name.Constant */ 163 | body .nd { color: #AA22FF } /* Name.Decorator */ 164 | body .ni { color: #999999; font-weight: bold } /* Name.Entity */ 165 | body .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ 166 | body .nf { color: #0000FF } /* Name.Function */ 167 | body .nl { color: #A0A000 } /* Name.Label */ 168 | body .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ 169 | body .nt { color: #954121; font-weight: bold } /* Name.Tag */ 170 | body .nv { color: #19469D } /* Name.Variable */ 171 | body .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ 172 | body .w { color: #bbbbbb } /* Text.Whitespace */ 173 | body .mf { color: #666666 } /* Literal.Number.Float */ 174 | body .mh { color: #666666 } /* Literal.Number.Hex */ 175 | body .mi { color: #666666 } /* Literal.Number.Integer */ 176 | body .mo { color: #666666 } /* Literal.Number.Oct */ 177 | body .sb { color: #219161 } /* Literal.String.Backtick */ 178 | body .sc { color: #219161 } /* Literal.String.Char */ 179 | body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */ 180 | body .s2 { color: #219161 } /* Literal.String.Double */ 181 | body .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ 182 | body .sh { color: #219161 } /* Literal.String.Heredoc */ 183 | body .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ 184 | body .sx { color: #954121 } /* Literal.String.Other */ 185 | body .sr { color: #BB6688 } /* Literal.String.Regex */ 186 | body .s1 { color: #219161 } /* Literal.String.Single */ 187 | body .ss { color: #19469D } /* Literal.String.Symbol */ 188 | body .bp { color: #954121 } /* Name.Builtin.Pseudo */ 189 | body .vc { color: #19469D } /* Name.Variable.Class */ 190 | body .vg { color: #19469D } /* Name.Variable.Global */ 191 | body .vi { color: #19469D } /* Name.Variable.Instance */ 192 | body .il { color: #666666 } /* Literal.Number.Integer.Long */ -------------------------------------------------------------------------------- /img/arc90-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/arc90-logo.png -------------------------------------------------------------------------------- /img/arc90-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/arc90-logo@2x.png -------------------------------------------------------------------------------- /img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/background.png -------------------------------------------------------------------------------- /img/kindling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/kindling.png -------------------------------------------------------------------------------- /img/kindling@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/kindling@2x.png -------------------------------------------------------------------------------- /img/range-handle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/range-handle.png -------------------------------------------------------------------------------- /img/range-handle@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/range-handle@2x.png -------------------------------------------------------------------------------- /img/sass-me-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/sass-me-logo.png -------------------------------------------------------------------------------- /img/sass-me-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/img/sass-me-logo@2x.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SassMe | A Tool for Visualizing SASS Color Functions 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 27 | 28 | 29 | 30 | 36 | 37 |
    38 | 39 |
    40 |
      41 | 42 |
    • 43 |

      Input color

      44 |
      45 |
      46 | 47 | 48 |
      49 | ← Go ahead, give us a hex code 50 |
      51 |
      52 | 53 |
      54 |
      55 |
      • 56 | 57 |
    • 58 |

      Output color

      59 |
      60 |
      • 61 | 62 |
    • 63 |
      64 | 65 |
      66 |
      67 |

      Copy and use the code below:

      68 |
      69 |
      • 70 | 71 |
    • 72 | Reset 73 | 74 | 75 |
      • 76 |
    • 77 | Reset 78 | 79 | 80 |
      • 81 |
    • 82 | Reset 83 | 84 | 85 |
      • 86 |
    87 |
    88 |
    89 | 90 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 504 | 505 | 506 | 549 | -------------------------------------------------------------------------------- /js/Color.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.3.3 2 | 3 | /* 4 | Color 5 | ===== 6 | 7 | SassMe - an Arc90 Lab Project 8 | 9 | The MIT License (MIT) 10 | Copyright © 2012 Arc90 | http://arc90.com 11 | 12 | Permission is hereby granted, free of charge, to any person obtaining a copy of 13 | this software and associated documentation files (the “Software”), to deal in 14 | the Software without restriction, including without limitation the rights to 15 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 16 | the Software, and to permit persons to whom the Software is furnished to do so, 17 | subject to the following conditions: 18 | 19 | The above copyright notice and this permission notice shall be included in all 20 | copies or substantial portions of the Software. 21 | 22 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 24 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 25 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 26 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 27 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 28 | 29 | Authors: 30 | -------- 31 | 32 | Jim Nielsen 33 | Darren Newton 34 | Robert Petro 35 | Matt Quintanilla 36 | Jesse Reiner 37 | 38 | Color algorithms: 39 | ----------------- 40 | RGB/HSL Algorithms adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and- 41 | rgb-to-hsv-color-model-conversion-algorithms-in-javascript 42 | 43 | Syntactically Awesome Stylesheets: 44 | ---------------------------------- 45 | The overall structure of the SASS conversions is based on the Ruby 46 | SASS project: 47 | https://github.com/nex3/sass/blob/stable/lib/sass/script/color.rb 48 | Copyright (c) 2006-2009 Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein 49 | */ 50 | 51 | 52 | (function() { 53 | var Color, root; 54 | 55 | root = typeof exports !== "undefined" && exports !== null ? exports : this; 56 | 57 | root.Color = Color = (function() { 58 | 59 | function Color(color) { 60 | this.hex = color.charAt(0) === "#" ? color : "#" + color; 61 | if (color != null) { 62 | this.rgb = this.hex2rgb(this.hex); 63 | } 64 | if (this.rgb != null) { 65 | this.hsl = this.rgb2hsl(this.rgb); 66 | } 67 | return this; 68 | } 69 | 70 | Color.prototype.hex2rgb = function(color) { 71 | var rgb; 72 | if (color.charAt(0) === '#') { 73 | color = color.substr(1); 74 | } 75 | return rgb = { 76 | r: parseInt(color.charAt(0) + '' + color.charAt(1), 16), 77 | g: parseInt(color.charAt(2) + '' + color.charAt(3), 16), 78 | b: parseInt(color.charAt(4) + '' + color.charAt(5), 16) 79 | }; 80 | }; 81 | 82 | Color.prototype.rgb2hsl = function(rgb) { 83 | var b, d, g, h, hsl, l, max, min, r, s, _ref; 84 | _ref = [rgb.r, rgb.g, rgb.b], r = _ref[0], g = _ref[1], b = _ref[2]; 85 | r /= 255; 86 | g /= 255; 87 | b /= 255; 88 | max = Math.max(r, g, b); 89 | min = Math.min(r, g, b); 90 | d = max - min; 91 | h = (function() { 92 | switch (max) { 93 | case min: 94 | return 0; 95 | case r: 96 | return 60 * (g - b) / d; 97 | case g: 98 | return 60 * (b - r) / d + 120; 99 | case b: 100 | return 60 * (r - g) / d + 240; 101 | } 102 | })(); 103 | if (h < 0) { 104 | h = 360 + h; 105 | } 106 | l = (max + min) / 2.0; 107 | s = max === min ? 0 : l < 0.5 ? d / (2 * l) : d / (2 - 2 * l); 108 | return hsl = { 109 | h: Math.abs((h % 360).toFixed(5)), 110 | s: (s * 100).toFixed(5), 111 | l: (l * 100).toFixed(5) 112 | }; 113 | }; 114 | 115 | Color.prototype.rgb2hex = function(rgb) { 116 | return "#" + ((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1); 117 | }; 118 | 119 | Color.prototype.hue2rgb = function(p, q, t) { 120 | if (t < 0) { 121 | t += 1; 122 | } 123 | if (t > 1) { 124 | t -= 1; 125 | } 126 | if (t < 1 / 6) { 127 | return p + (q - p) * 6 * t; 128 | } 129 | if (t < 1 / 2) { 130 | return q; 131 | } 132 | if (t < 2 / 3) { 133 | return p + (q - p) * (2 / 3 - t) * 6; 134 | } 135 | return p; 136 | }; 137 | 138 | Color.prototype.hsl2rgb = function(hsl) { 139 | var b, g, h, l, p, q, r, rgb, s, _ref; 140 | _ref = [parseFloat(hsl.h).toFixed(5) / 360, parseFloat(hsl.s).toFixed(5) / 100, parseFloat(hsl.l).toFixed(5) / 100], h = _ref[0], s = _ref[1], l = _ref[2]; 141 | if (s === 0) { 142 | r = g = b = l; 143 | } else { 144 | q = l < 0.5 ? l * (1 + s) : l + s - l * s; 145 | p = 2 * l - q; 146 | r = this.hue2rgb(p, q, h + 1 / 3); 147 | g = this.hue2rgb(p, q, h); 148 | b = this.hue2rgb(p, q, h - 1 / 3); 149 | } 150 | return rgb = { 151 | r: Math.round(r * 255), 152 | g: Math.round(g * 255), 153 | b: Math.round(b * 255) 154 | }; 155 | }; 156 | 157 | Color.prototype.hsl2hex = function(hsl) { 158 | return this.rgb2hex(this.hsl2rgb(hsl)); 159 | }; 160 | 161 | Color.prototype.mod = function(attr) { 162 | var hsl, out, rgb, type; 163 | if ((_.intersection(_.keys(attr), ['h', 's', 'l']).length > 0) && (_.intersection(_.keys(attr), ['r', 'g', 'b']).length > 0)) { 164 | return null; 165 | } 166 | if (_.intersection(_.keys(attr), ['r', 'g', 'b']).length > 0) { 167 | type = "rgb"; 168 | } else if (_.intersection(_.keys(attr), ['h', 's', 'l']).length > 0) { 169 | type = "hsl"; 170 | } else { 171 | return null; 172 | } 173 | _.each(attr, function(val, key, list) { 174 | if (val === null) { 175 | return delete list[key]; 176 | } 177 | }); 178 | switch (type) { 179 | case 'rgb': 180 | rgb = _.pick(attr, 'r', 'g', 'b'); 181 | if (_.isEmpty(rgb) === false) { 182 | out = _.extend(_.clone(this.rgb), rgb); 183 | } else { 184 | out = this.rgb; 185 | } 186 | break; 187 | case 'hsl': 188 | hsl = _.pick(attr, 'h', 's', 'l'); 189 | if (_.isEmpty(hsl) === false) { 190 | out = _.extend(_.clone(this.hsl), hsl); 191 | } else { 192 | out = this.hsl; 193 | } 194 | } 195 | return out; 196 | }; 197 | 198 | Color.prototype.constrain = function(attr, amount, limit, direction) { 199 | var math, test, val; 200 | math = [attr, direction, amount].join(' '); 201 | val = eval(math); 202 | test = (limit[1] >= val && val >= limit[0]); 203 | if (test) { 204 | val; 205 | 206 | } else { 207 | if (val < limit[0]) { 208 | val = limit[0]; 209 | } 210 | if (val > limit[1]) { 211 | val = limit[1]; 212 | } 213 | } 214 | return Math.abs(val); 215 | }; 216 | 217 | Color.prototype.constrain_degrees = function(attr, amount) { 218 | var val; 219 | val = attr + amount; 220 | if (val > 360) { 221 | val -= 360; 222 | } 223 | if (val < 0) { 224 | val += 360; 225 | } 226 | return Math.abs(val); 227 | }; 228 | 229 | Color.prototype.red = function() { 230 | return this.rgb.r; 231 | }; 232 | 233 | Color.prototype.green = function() { 234 | return this.rgb.g; 235 | }; 236 | 237 | Color.prototype.blue = function() { 238 | return this.rgb.b; 239 | }; 240 | 241 | Color.prototype.hue = function() { 242 | return this.hsl.h; 243 | }; 244 | 245 | Color.prototype.saturation = function() { 246 | return this.hsl.s; 247 | }; 248 | 249 | Color.prototype.lightness = function() { 250 | return this.hsl.l; 251 | }; 252 | 253 | return Color; 254 | 255 | })(); 256 | 257 | }).call(this); 258 | -------------------------------------------------------------------------------- /js/Transforms.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.3.3 2 | 3 | /* 4 | Transforms 5 | ========== 6 | 7 | SassMe - an Arc90 Lab Project 8 | 9 | The MIT License (MIT) 10 | Copyright © 2012 Arc90 | http://arc90.com 11 | 12 | Permission is hereby granted, free of charge, to any person obtaining a copy of 13 | this software and associated documentation files (the “Software”), to deal in 14 | the Software without restriction, including without limitation the rights to 15 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 16 | the Software, and to permit persons to whom the Software is furnished to do so, 17 | subject to the following conditions: 18 | 19 | The above copyright notice and this permission notice shall be included in all 20 | copies or substantial portions of the Software. 21 | 22 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 24 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 25 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 26 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 27 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 28 | 29 | Authors: 30 | -------- 31 | 32 | Jim Nielsen 33 | Darren Newton 34 | Robert Petro 35 | Matt Quintanilla 36 | Jesse Reiner 37 | 38 | Syntactically Awesome Stylesheets: 39 | ---------------------------------- 40 | 41 | Structure of the color functions ported from SASS - 42 | https://github.com/nex3/sass/blob/stable/lib/sass/script/functions.rb 43 | Copyright (c) 2006-2009 Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein 44 | */ 45 | 46 | 47 | (function() { 48 | var root; 49 | 50 | root = typeof exports !== "undefined" && exports !== null ? exports : this; 51 | 52 | root.Transforms = { 53 | lighten: function(color, percentage) { 54 | var hsl; 55 | hsl = color.mod({ 56 | l: color.constrain(color.lightness(), percentage, [0, 100], '+') 57 | }); 58 | return color.rgb2hex(color.hsl2rgb(hsl)); 59 | }, 60 | darken: function(color, percentage) { 61 | var hsl; 62 | hsl = color.mod({ 63 | l: color.constrain(color.lightness(), percentage, [0, 100], '-') 64 | }); 65 | return color.rgb2hex(color.hsl2rgb(hsl)); 66 | }, 67 | saturate: function(color, percentage) { 68 | var hsl; 69 | hsl = color.mod({ 70 | s: color.constrain(color.saturation(), percentage, [0, 100], '+') 71 | }); 72 | return color.rgb2hex(color.hsl2rgb(hsl)); 73 | }, 74 | desaturate: function(color, percentage) { 75 | var hsl; 76 | hsl = color.mod({ 77 | s: color.constrain(color.saturation(), percentage, [0, 100], '-') 78 | }); 79 | return color.rgb2hex(color.hsl2rgb(hsl)); 80 | }, 81 | adjust_hue: function(color, degrees) { 82 | var hsl; 83 | hsl = color.mod({ 84 | h: color.constrain_degrees(color.hue(), degrees) 85 | }); 86 | return color.rgb2hex(color.hsl2rgb(hsl)); 87 | } 88 | }; 89 | 90 | }).call(this); 91 | -------------------------------------------------------------------------------- /js/lib/html5shiv.js: -------------------------------------------------------------------------------- 1 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 2 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 3 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a"); 4 | var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a, 5 | b){a||(a=f);if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d").outerWidth(1).jquery||a.each(["Width","Height"],function(c,d){function h(b,c,d,f){return a.each(e,function(){c-=parseFloat(a.curCSS(b,"padding"+this,!0))||0,d&&(c-=parseFloat(a.curCSS(b,"border"+this+"Width",!0))||0),f&&(c-=parseFloat(a.curCSS(b,"margin"+this,!0))||0)}),c}var e=d==="Width"?["Left","Right"]:["Top","Bottom"],f=d.toLowerCase(),g={innerWidth:a.fn.innerWidth,innerHeight:a.fn.innerHeight,outerWidth:a.fn.outerWidth,outerHeight:a.fn.outerHeight};a.fn["inner"+d]=function(c){return c===b?g["inner"+d].call(this):this.each(function(){a(this).css(f,h(this,c)+"px")})},a.fn["outer"+d]=function(b,c){return typeof b!="number"?g["outer"+d].call(this,b):this.each(function(){a(this).css(f,h(this,b,!0,c)+"px")})}}),a.extend(a.expr[":"],{data:a.expr.createPseudo?a.expr.createPseudo(function(b){return function(c){return!!a.data(c,b)}}):function(b,c,d){return!!a.data(b,d[3])},focusable:function(b){return c(b,!isNaN(a.attr(b,"tabindex")))},tabbable:function(b){var d=a.attr(b,"tabindex"),e=isNaN(d);return(e||d>=0)&&c(b,!e)}}),a(function(){var b=document.body,c=b.appendChild(c=document.createElement("div"));c.offsetHeight,a.extend(c.style,{minHeight:"100px",height:"auto",padding:0,borderWidth:0}),a.support.minHeight=c.offsetHeight===100,a.support.selectstart="onselectstart"in c,b.removeChild(c).style.display="none"}),a.curCSS||(a.curCSS=a.css),a.extend(a.ui,{plugin:{add:function(b,c,d){var e=a.ui[b].prototype;for(var f in d)e.plugins[f]=e.plugins[f]||[],e.plugins[f].push([c,d[f]])},call:function(a,b,c){var d=a.plugins[b];if(!d||!a.element[0].parentNode)return;for(var e=0;e0?!0:(b[d]=1,e=b[d]>0,b[d]=0,e)},isOverAxis:function(a,b,c){return a>b&&a=9||!!b.button?this._mouseStarted?(this._mouseDrag(b),b.preventDefault()):(this._mouseDistanceMet(b)&&this._mouseDelayMet(b)&&(this._mouseStarted=this._mouseStart(this._mouseDownEvent,b)!==!1,this._mouseStarted?this._mouseDrag(b):this._mouseUp(b)),!this._mouseStarted):this._mouseUp(b)},_mouseUp:function(b){return a(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate),this._mouseStarted&&(this._mouseStarted=!1,b.target==this._mouseDownEvent.target&&a.data(b.target,this.widgetName+".preventClickEvent",!0),this._mouseStop(b)),!1},_mouseDistanceMet:function(a){return Math.max(Math.abs(this._mouseDownEvent.pageX-a.pageX),Math.abs(this._mouseDownEvent.pageY-a.pageY))>=this.options.distance},_mouseDelayMet:function(a){return this.mouseDelayMet},_mouseStart:function(a){},_mouseDrag:function(a){},_mouseStop:function(a){},_mouseCapture:function(a){return!0}})})(jQuery);;/*! jQuery UI - v1.8.22 - 2012-07-24 14 | * https://github.com/jquery/jquery-ui 15 | * Includes: jquery.ui.slider.js 16 | * Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ 17 | (function(a,b){var c=5;a.widget("ui.slider",a.ui.mouse,{widgetEventPrefix:"slide",options:{animate:!1,distance:0,max:100,min:0,orientation:"horizontal",range:!1,step:1,value:0,values:null},_create:function(){var b=this,d=this.options,e=this.element.find(".ui-slider-handle").addClass("ui-state-default ui-corner-all"),f="",g=d.values&&d.values.length||1,h=[];this._keySliding=!1,this._mouseSliding=!1,this._animateOff=!0,this._handleIndex=null,this._detectOrientation(),this._mouseInit(),this.element.addClass("ui-slider ui-slider-"+this.orientation+" ui-widget"+" ui-widget-content"+" ui-corner-all"+(d.disabled?" ui-slider-disabled ui-disabled":"")),this.range=a([]),d.range&&(d.range===!0&&(d.values||(d.values=[this._valueMin(),this._valueMin()]),d.values.length&&d.values.length!==2&&(d.values=[d.values[0],d.values[0]])),this.range=a("
    ").appendTo(this.element).addClass("ui-slider-range ui-widget-header"+(d.range==="min"||d.range==="max"?" ui-slider-range-"+d.range:"")));for(var i=e.length;ic&&(f=c,g=a(this),i=b)}),c.range===!0&&this.values(1)===c.min&&(i+=1,g=a(this.handles[i])),j=this._start(b,i),j===!1?!1:(this._mouseSliding=!0,h._handleIndex=i,g.addClass("ui-state-active").focus(),k=g.offset(),l=!a(b.target).parents().andSelf().is(".ui-slider-handle"),this._clickOffset=l?{left:0,top:0}:{left:b.pageX-k.left-g.width()/2,top:b.pageY-k.top-g.height()/2-(parseInt(g.css("borderTopWidth"),10)||0)-(parseInt(g.css("borderBottomWidth"),10)||0)+(parseInt(g.css("marginTop"),10)||0)},this.handles.hasClass("ui-state-hover")||this._slide(b,i,e),this._animateOff=!0,!0))},_mouseStart:function(a){return!0},_mouseDrag:function(a){var b={x:a.pageX,y:a.pageY},c=this._normValueFromMouse(b);return this._slide(a,this._handleIndex,c),!1},_mouseStop:function(a){return this.handles.removeClass("ui-state-active"),this._mouseSliding=!1,this._stop(a,this._handleIndex),this._change(a,this._handleIndex),this._handleIndex=null,this._clickOffset=null,this._animateOff=!1,!1},_detectOrientation:function(){this.orientation=this.options.orientation==="vertical"?"vertical":"horizontal"},_normValueFromMouse:function(a){var b,c,d,e,f;return this.orientation==="horizontal"?(b=this.elementSize.width,c=a.x-this.elementOffset.left-(this._clickOffset?this._clickOffset.left:0)):(b=this.elementSize.height,c=a.y-this.elementOffset.top-(this._clickOffset?this._clickOffset.top:0)),d=c/b,d>1&&(d=1),d<0&&(d=0),this.orientation==="vertical"&&(d=1-d),e=this._valueMax()-this._valueMin(),f=this._valueMin()+d*e,this._trimAlignValue(f)},_start:function(a,b){var c={handle:this.handles[b],value:this.value()};return this.options.values&&this.options.values.length&&(c.value=this.values(b),c.values=this.values()),this._trigger("start",a,c)},_slide:function(a,b,c){var d,e,f;this.options.values&&this.options.values.length?(d=this.values(b?0:1),this.options.values.length===2&&this.options.range===!0&&(b===0&&c>d||b===1&&c1){this.options.values[b]=this._trimAlignValue(c),this._refreshValue(),this._change(null,b);return}if(!arguments.length)return this._values();if(!a.isArray(arguments[0]))return this.options.values&&this.options.values.length?this._values(b):this.value();d=this.options.values,e=arguments[0];for(f=0;f=this._valueMax())return this._valueMax();var b=this.options.step>0?this.options.step:1,c=(a-this._valueMin())%b,d=a-c;return Math.abs(c)*2>=b&&(d+=c>0?b:-b),parseFloat(d.toFixed(5))},_valueMin:function(){return this.options.min},_valueMax:function(){return this.options.max},_refreshValue:function(){var b=this.options.range,c=this.options,d=this,e=this._animateOff?!1:c.animate,f,g={},h,i,j,k;this.options.values&&this.options.values.length?this.handles.each(function(b,i){f=(d.values(b)-d._valueMin())/(d._valueMax()-d._valueMin())*100,g[d.orientation==="horizontal"?"left":"bottom"]=f+"%",a(this).stop(1,1)[e?"animate":"css"](g,c.animate),d.options.range===!0&&(d.orientation==="horizontal"?(b===0&&d.range.stop(1,1)[e?"animate":"css"]({left:f+"%"},c.animate),b===1&&d.range[e?"animate":"css"]({width:f-h+"%"},{queue:!1,duration:c.animate})):(b===0&&d.range.stop(1,1)[e?"animate":"css"]({bottom:f+"%"},c.animate),b===1&&d.range[e?"animate":"css"]({height:f-h+"%"},{queue:!1,duration:c.animate}))),h=f}):(i=this.value(),j=this._valueMin(),k=this._valueMax(),f=k!==j?(i-j)/(k-j)*100:0,g[d.orientation==="horizontal"?"left":"bottom"]=f+"%",this.handle.stop(1,1)[e?"animate":"css"](g,c.animate),b==="min"&&this.orientation==="horizontal"&&this.range.stop(1,1)[e?"animate":"css"]({width:f+"%"},c.animate),b==="max"&&this.orientation==="horizontal"&&this.range[e?"animate":"css"]({width:100-f+"%"},{queue:!1,duration:c.animate}),b==="min"&&this.orientation==="vertical"&&this.range.stop(1,1)[e?"animate":"css"]({height:f+"%"},c.animate),b==="max"&&this.orientation==="vertical"&&this.range[e?"animate":"css"]({height:100-f+"%"},{queue:!1,duration:c.animate}))}}),a.extend(a.ui.slider,{version:"1.8.22"})})(jQuery);; -------------------------------------------------------------------------------- /js/lib/modernizr.custom.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.5.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-borderradius-boxshadow-hsla-rgba-textshadow-cssgradients-input-inputtypes-shiv-cssclasses-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(n.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+p.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),E(e,b,c))}function G(){e.input=function(c){for(var d=0,e=c.length;d",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.testProp=function(a){return D([a])},e.testAllProps=F,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+u.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f2;a==null&&(a=[]);if(A&& 12 | a.reduce===A){e&&(c=b.bind(c,e));return f?a.reduce(c,d):a.reduce(c)}j(a,function(a,b,i){if(f)d=c.call(e,d,a,b,i);else{d=a;f=true}});if(!f)throw new TypeError("Reduce of empty array with no initial value");return d};b.reduceRight=b.foldr=function(a,c,d,e){var f=arguments.length>2;a==null&&(a=[]);if(B&&a.reduceRight===B){e&&(c=b.bind(c,e));return f?a.reduceRight(c,d):a.reduceRight(c)}var g=b.toArray(a).reverse();e&&!f&&(c=b.bind(c,e));return f?b.reduce(g,c,d,e):b.reduce(g,c)};b.find=b.detect=function(a, 13 | c,b){var e;G(a,function(a,g,h){if(c.call(b,a,g,h)){e=a;return true}});return e};b.filter=b.select=function(a,c,b){var e=[];if(a==null)return e;if(C&&a.filter===C)return a.filter(c,b);j(a,function(a,g,h){c.call(b,a,g,h)&&(e[e.length]=a)});return e};b.reject=function(a,c,b){var e=[];if(a==null)return e;j(a,function(a,g,h){c.call(b,a,g,h)||(e[e.length]=a)});return e};b.every=b.all=function(a,c,b){var e=true;if(a==null)return e;if(D&&a.every===D)return a.every(c,b);j(a,function(a,g,h){if(!(e=e&&c.call(b, 14 | a,g,h)))return o});return!!e};var G=b.some=b.any=function(a,c,d){c||(c=b.identity);var e=false;if(a==null)return e;if(E&&a.some===E)return a.some(c,d);j(a,function(a,b,h){if(e||(e=c.call(d,a,b,h)))return o});return!!e};b.include=b.contains=function(a,c){var b=false;if(a==null)return b;if(q&&a.indexOf===q)return a.indexOf(c)!=-1;return b=G(a,function(a){return a===c})};b.invoke=function(a,c){var d=i.call(arguments,2);return b.map(a,function(a){return(b.isFunction(c)?c||a:a[c]).apply(a,d)})};b.pluck= 15 | function(a,c){return b.map(a,function(a){return a[c]})};b.max=function(a,c,d){if(!c&&b.isArray(a)&&a[0]===+a[0])return Math.max.apply(Math,a);if(!c&&b.isEmpty(a))return-Infinity;var e={computed:-Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b>=e.computed&&(e={value:a,computed:b})});return e.value};b.min=function(a,c,d){if(!c&&b.isArray(a)&&a[0]===+a[0])return Math.min.apply(Math,a);if(!c&&b.isEmpty(a))return Infinity;var e={computed:Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;bd?1:0}),"value")};b.groupBy=function(a,c){var d={},e=b.isFunction(c)?c:function(a){return a[c]}; 17 | j(a,function(a,b){var c=e(a,b);(d[c]||(d[c]=[])).push(a)});return d};b.sortedIndex=function(a,c,d){d||(d=b.identity);for(var e=0,f=a.length;e>1;d(a[g])=0})})};b.difference=function(a){var c=b.flatten(i.call(arguments,1),true);return b.filter(a,function(a){return!b.include(c,a)})};b.zip=function(){for(var a= 20 | i.call(arguments),c=b.max(b.pluck(a,"length")),d=Array(c),e=0;e=0;d--)b=[a[d].apply(this,b)];return b[0]}};b.after=function(a,b){return a<=0?b():function(){if(--a<1)return b.apply(this,arguments)}};b.keys=L||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var c=[],d;for(d in a)b.has(a,d)&&(c[c.length]=d);return c};b.values=function(a){return b.map(a,b.identity)};b.functions=b.methods=function(a){var c=[],d;for(d in a)b.isFunction(a[d])&& 25 | c.push(d);return c.sort()};b.extend=function(a){j(i.call(arguments,1),function(b){for(var d in b)a[d]=b[d]});return a};b.pick=function(a){var c={};j(b.flatten(i.call(arguments,1)),function(b){b in a&&(c[b]=a[b])});return c};b.defaults=function(a){j(i.call(arguments,1),function(b){for(var d in b)a[d]==null&&(a[d]=b[d])});return a};b.clone=function(a){return!b.isObject(a)?a:b.isArray(a)?a.slice():b.extend({},a)};b.tap=function(a,b){b(a);return a};b.isEqual=function(a,b){return r(a,b,[])};b.isEmpty= 26 | function(a){if(a==null)return true;if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(b.has(a,c))return false;return true};b.isElement=function(a){return!!(a&&a.nodeType==1)};b.isArray=p||function(a){return l.call(a)=="[object Array]"};b.isObject=function(a){return a===Object(a)};b.isArguments=function(a){return l.call(a)=="[object Arguments]"};b.isArguments(arguments)||(b.isArguments=function(a){return!(!a||!b.has(a,"callee"))});b.isFunction=function(a){return l.call(a)=="[object Function]"}; 27 | b.isString=function(a){return l.call(a)=="[object String]"};b.isNumber=function(a){return l.call(a)=="[object Number]"};b.isFinite=function(a){return b.isNumber(a)&&isFinite(a)};b.isNaN=function(a){return a!==a};b.isBoolean=function(a){return a===true||a===false||l.call(a)=="[object Boolean]"};b.isDate=function(a){return l.call(a)=="[object Date]"};b.isRegExp=function(a){return l.call(a)=="[object RegExp]"};b.isNull=function(a){return a===null};b.isUndefined=function(a){return a===void 0};b.has=function(a, 28 | b){return K.call(a,b)};b.noConflict=function(){s._=I;return this};b.identity=function(a){return a};b.times=function(a,b,d){for(var e=0;e/g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")};b.result=function(a,c){if(a==null)return null;var d=a[c];return b.isFunction(d)?d.call(a):d};b.mixin=function(a){j(b.functions(a),function(c){M(c,b[c]=a[c])})};var N=0;b.uniqueId= 29 | function(a){var b=N++;return a?a+b:b};b.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var u=/.^/,n={"\\":"\\","'":"'",r:"\r",n:"\n",t:"\t",u2028:"\u2028",u2029:"\u2029"},v;for(v in n)n[n[v]]=v;var O=/\\|'|\r|\n|\t|\u2028|\u2029/g,P=/\\(\\|'|r|n|t|u2028|u2029)/g,w=function(a){return a.replace(P,function(a,b){return n[b]})};b.template=function(a,c,d){d=b.defaults(d||{},b.templateSettings);a="__p+='"+a.replace(O,function(a){return"\\"+n[a]}).replace(d.escape|| 30 | u,function(a,b){return"'+\n_.escape("+w(b)+")+\n'"}).replace(d.interpolate||u,function(a,b){return"'+\n("+w(b)+")+\n'"}).replace(d.evaluate||u,function(a,b){return"';\n"+w(b)+"\n;__p+='"})+"';\n";d.variable||(a="with(obj||{}){\n"+a+"}\n");var a="var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n"+a+"return __p;\n",e=new Function(d.variable||"obj","_",a);if(c)return e(c,b);c=function(a){return e.call(this,a,b)};c.source="function("+(d.variable||"obj")+"){\n"+a+"}";return c}; 31 | b.chain=function(a){return b(a).chain()};var m=function(a){this._wrapped=a};b.prototype=m.prototype;var x=function(a,c){return c?b(a).chain():a},M=function(a,c){m.prototype[a]=function(){var a=i.call(arguments);J.call(a,this._wrapped);return x(c.apply(b,a),this._chain)}};b.mixin(b);j("pop,push,reverse,shift,sort,splice,unshift".split(","),function(a){var b=k[a];m.prototype[a]=function(){var d=this._wrapped;b.apply(d,arguments);var e=d.length;(a=="shift"||a=="splice")&&e===0&&delete d[0];return x(d, 32 | this._chain)}});j(["concat","join","slice"],function(a){var b=k[a];m.prototype[a]=function(){return x(b.apply(this._wrapped,arguments),this._chain)}});m.prototype.chain=function(){this._chain=true;return this};m.prototype.value=function(){return this._wrapped}}).call(this); 33 | -------------------------------------------------------------------------------- /scss/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arc90/sass-color-picker/70a66397ebe2bf64b23009f61962cec5be49315c/scss/.DS_Store -------------------------------------------------------------------------------- /scss/_css.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | $bodyFontSize : 16; 3 | $textColor : #333333; 4 | $lightBackgroundColor : #f7f7f7; 5 | $lightTextColor : #777; 6 | $highlightColor : #ce4ec6; 7 | $placeholderText : #cccccc; 8 | 9 | 10 | /* 11 | PAGE & STRUCTURAL STYLES 12 | 13 | General page and structural styles 14 | */ 15 | * { 16 | @include box-sizing(border-box); 17 | } 18 | 19 | body { 20 | padding: 0 20px; 21 | margin: 0; 22 | font: 16px/1.4em 'Droid Sans', Arial, sans-serif; 23 | color: #333; 24 | background: #eee url(../img/background.png); 25 | background-size: 400px 300px; 26 | border-top: 3px solid $highlightColor; 27 | 28 | @media screen and (max-width:565px) { 29 | padding: 0; 30 | } 31 | } 32 | 33 | .wrapper { 34 | max-width: 850px; 35 | width: 850px\9; // target IE7 and 8 only 36 | margin: 0 auto; 37 | } 38 | 39 | #container { 40 | clear: both; 41 | background: #fdfdfd; 42 | overflow: hidden; 43 | margin-bottom: 10px; 44 | @include box-shadow(#dedede 0 3px 0); 45 | border: 1px solid #eeeeee; 46 | 47 | @media screen and (max-width:565px) { 48 | padding: 0; 49 | } 50 | } 51 | 52 | a, 53 | a:link, 54 | a:visited { 55 | color: $highlightColor; 56 | text-decoration: none; 57 | } 58 | a:hover { 59 | color: darken($highlightColor, 30%); 60 | text-decoration: underline; 61 | } 62 | 63 | /* 64 | INPUT ELEMENTS 65 | 66 | Page styles for input elements 67 | 68 | */ 69 | 70 | label { 71 | color: $lightTextColor; 72 | padding-top: 5px; 73 | display: block; 74 | text-transform: uppercase; 75 | letter-spacing: .15em; 76 | } 77 | 78 | input#color { 79 | border: 1px solid #e0e0e0; 80 | border-bottom-color: #e5e5e5; 81 | color: $textColor; 82 | box-shadow: inset 0 1px 2px #eee; 83 | border-radius: 3px; 84 | -webkit-border-radius:3px; 85 | -moz-border-radius: 3px; 86 | -o-border-radius: 3px; 87 | -ms-border-radius: 3px; 88 | padding-left: 2em; 89 | font-size: 1em; 90 | height: 44px; 91 | width: 100%; 92 | font-family: 'Droid Sans Mono', Courier, monospace; 93 | // We need to float the input on top of BG or we can't 94 | // re-focus with ze mouse 95 | position: relative; 96 | z-index: 500; 97 | 98 | 99 | &::-webkit-input-placeholder { 100 | color: $placeholderText; 101 | } 102 | 103 | &:-moz-placeholder { 104 | color: $placeholderText; 105 | } 106 | 107 | &:focus { 108 | outline: none; 109 | border: 1px solid $highlightColor; 110 | box-shadow: 0 0 8px transparentize($highlightColor, .4); 111 | } 112 | } 113 | label[for="color"] { 114 | position: absolute; 115 | padding: 0 0 0 1.4em; 116 | color: $placeholderText; 117 | z-index: 501; 118 | } 119 | 120 | .fakeSlider { 121 | margin: 0 auto; 122 | width: 80%; 123 | } 124 | 125 | .ui-slider { 126 | position: relative; 127 | } 128 | 129 | .ui-widget-content { 130 | border-top: 2px solid #C5C5C5; 131 | border-bottom: 2px solid #C5C5C5; 132 | height: 0px; 133 | } 134 | 135 | .ui-slider-handle { 136 | background: transparent url(../img/range-handle@2x.png) no-repeat; 137 | background-size: 20px 20px; 138 | position: absolute; 139 | z-index: 10; 140 | bottom: -9px; 141 | margin-top: -3px; 142 | width: 20px; 143 | height: 20px; 144 | margin-left: -1%; 145 | cursor: pointer; 146 | outline: none; 147 | } 148 | 149 | 150 | input[type='range'] { 151 | -webkit-appearance: none; 152 | background-color: #ddd; 153 | border-top: 1px solid #aaa; 154 | border-bottom: 1px solid #eee; 155 | height: 8px; 156 | border-radius: 6px; 157 | } 158 | 159 | input[type='range']::-webkit-slider-thumb { 160 | -webkit-appearance: none; 161 | z-index: 100; 162 | position: relative; 163 | top: 0px; 164 | width: 20px; 165 | height: 20px; 166 | cursor: pointer; 167 | outline: none; 168 | background-repeat: no-repeat; 169 | -webkit-border-radius: 40px; 170 | -moz-border-radius: 40px; 171 | border-radius: 40px; 172 | background: transparent url(../img/range-handle@2x.png) no-repeat; 173 | background-size: 20px 20px; 174 | } 175 | 176 | /* 177 | PAGE HEADER 178 | 179 | SassMe page title styles 180 | */ 181 | 182 | #header { 183 | clear: both; 184 | padding: 20px 0; 185 | width: 100%; 186 | overflow: auto; 187 | 188 | h1 { 189 | float: left; 190 | width: 230px; 191 | height: 53px; 192 | overflow: visible; 193 | background: url(../img/sass-me-logo@2x.png) 0 0 no-repeat; 194 | background-size: 230px 53px; 195 | text-indent: -999px; 196 | margin: 0 20px 0 15px; 197 | } 198 | 199 | 200 | 201 | #tagline { 202 | float: left; 203 | margin-top: 53px; 204 | width: 50%; 205 | position: relative; 206 | 207 | @media screen and (max-width:565px) { 208 | width: 100px; 209 | } 210 | 211 | p { 212 | position: absolute; 213 | bottom: 0; 214 | left: 0; 215 | font-size: (16em / $bodyFontSize); 216 | line-height: 1.3em; 217 | color: $lightTextColor; 218 | @include text-shadow(0 1px 0 #fff); 219 | 220 | @media screen and (max-width:565px) { 221 | font-size: (12em / $bodyFontSize); 222 | line-height: 1.1em 223 | } 224 | } 225 | } 226 | } 227 | 228 | /* 229 | LIST ITEMS 230 | 231 | Styles for each
  • item 232 | */ 233 | .listItem { 234 | text-align: center; 235 | position: relative; 236 | opacity: 1; 237 | -webkit-transition: .5s all ease; 238 | -moz-transition: .5s all ease; 239 | -ms-transition: .5s all ease; 240 | -o-transition: .5s all ease; 241 | transition: .5s all ease; 242 | 243 | // Slider Controls 244 | // Would be cool to dynamically set a gradient on these 245 | // that way you could see what direction your colors are going... 246 | &.slider { 247 | margin: 25px 0; 248 | 249 | input { 250 | display: block; 251 | width: 80%; 252 | margin: 0 auto; 253 | } 254 | 255 | label { 256 | font-size: (10em / $bodyFontSize); 257 | } 258 | a { 259 | position: absolute; 260 | right: 3%; 261 | top: -7px; 262 | font-size: (10em / $bodyFontSize); 263 | } 264 | } 265 | } 266 | // This will be for when the color input is in focus 267 | // we should add some classes like "filled" and "unfilled" 268 | // for when the main color input is filled, then we can tone down 269 | .focus { 270 | label, 271 | #help { 272 | color: $highlightColor; 273 | } 274 | #help { 275 | opacity: 1; 276 | } 277 | } 278 | .inactive { 279 | 280 | .listItem { 281 | opacity: .15; 282 | 283 | 284 | &#swatch1 { 285 | opacity: 1; 286 | } 287 | 288 | #colorOutput{ 289 | opacity: 0; 290 | } 291 | 292 | } 293 | } 294 | 295 | /* 296 | SWATCHES 297 | 298 | Styles for the main content swatches 299 | */ 300 | 301 | 302 | // Rounding corners 303 | 304 | @media only screen and (min-width: 565px) { 305 | 306 | #swatch1 .swatch{ 307 | @include border-top-left-radius(10px); 308 | } 309 | 310 | #swatch2 .swatch{ 311 | @include border-top-right-radius(10px); 312 | } 313 | 314 | #container { 315 | @include border-radius(10px); 316 | } 317 | } 318 | 319 | // The pointer from Swatch 1 to Swatch 2 320 | 321 | .swatchPointer { 322 | width: 0; 323 | height: 0; 324 | border-top: 150px solid transparent; 325 | border-bottom: 150px solid transparent; 326 | border-left: 40px solid #fff; 327 | position: absolute; 328 | z-index: 10; 329 | top: 0px; 330 | right: -40px; 331 | } 332 | 333 | .swatchContainer { 334 | color: #fff; 335 | float: left; 336 | position: relative; 337 | 338 | &#swatch1{ 339 | width: 47%; 340 | } 341 | &#swatch2{ 342 | width: 53%; 343 | } 344 | 345 | .swatch { 346 | height: 300px; 347 | line-height: 300px; 348 | width: 100%; 349 | font-size: (18em / $bodyFontSize); 350 | font-family: 'Droid Sans Mono', Courier, monospace; 351 | } 352 | 353 | #colorInput { 354 | position: relative; 355 | width: 130px; 356 | margin: 0 auto; 357 | } 358 | 359 | #colorOutput { 360 | opacity: 1; 361 | width: 130px; 362 | background: rgba(0,0,0,.4); 363 | padding: 10px 20px; 364 | border: 0px solid #000; 365 | color: #fff; 366 | // We need to make this selectable 367 | position: relative; 368 | z-index: 500; 369 | @include border-radius(3px); 370 | @include box-shadow(inset #000 0 0 4px); 371 | } 372 | 373 | // Swatch labels 374 | .swatchLabel { 375 | position: absolute; 376 | width: 100%; 377 | display: none; 378 | padding: 20px 0; 379 | color: $lightTextColor; 380 | text-align: center; 381 | text-transform: uppercase; 382 | letter-spacing: .1em; 383 | font-size: (10em / $bodyFontSize); 384 | } 385 | 386 | } 387 | 388 | 389 | /* 390 | INDIVIDUAL ELEMENTS 391 | 392 | Styles for individual elements on the page 393 | */ 394 | 395 | .codeHelp { 396 | background-color: white; 397 | border: 1px solid #EBEBEB; 398 | @include border-top-left-radius(10px); 399 | @include border-top-right-radius(10px); 400 | @include box-shadow(rgba(0,0,0,.1) 0 -4px 6px); 401 | color: #353535; 402 | display: none; 403 | left: 20%; 404 | padding: .5em; 405 | position: absolute; 406 | text-align: center; 407 | top: 260px; 408 | z-index: 400; 409 | width: 60%; 410 | } 411 | 412 | #codeOutput { 413 | clear: both; 414 | border-top: 1px solid darken(#eee,4); 415 | border-bottom: 1px solid darken(#eee,4); 416 | 417 | input { 418 | font-family: 'Droid Sans Mono', Courier, monospace; 419 | padding: 14px 0; 420 | margin: 0; 421 | font-size: (14em / $bodyFontSize); 422 | width: 100%; 423 | background: darken($lightBackgroundColor,5); 424 | cursor: pointer; 425 | outline: none; 426 | text-align: center; 427 | border: none; 428 | 429 | &::-webkit-input-placeholder { 430 | font-family: 'Droid Sans', Arial, sans-serif; 431 | color: $highlightColor; 432 | } 433 | 434 | &:-moz-placeholder { 435 | font-family: 'Droid Sans', Arial, sans-serif; 436 | color: $highlightColor; 437 | } 438 | 439 | &:hover { 440 | color: $highlightColor; 441 | } 442 | 443 | &:focus { 444 | background: $highlightColor; 445 | color: #fff; 446 | } 447 | } 448 | } 449 | 450 | #initialHelp { 451 | opacity: 0; 452 | font-family: "Droid Sans", Helvetica, Arial; 453 | position: absolute; 454 | left: 80%; // Animates to 45% 455 | top: 40%; 456 | color: $lightTextColor; 457 | font-size: (14em / $bodyFontSize); 458 | line-height: 4em; 459 | width: 400px; 460 | color: $highlightColor; 461 | z-index: 400; 462 | } 463 | 464 | /* 465 | FOOTER 466 | 467 | */ 468 | #footer { 469 | font-size: (10em / $bodyFontSize); 470 | font-weight: bold; 471 | line-height: 1.3em; 472 | padding: 5px 5px; 473 | color: $lightTextColor; 474 | @include text-shadow(0 1px 0 #fff); 475 | clear: both; 476 | 477 | img { 478 | margin: 0 10px; 479 | position: relative; 480 | } 481 | 482 | #arc90 { 483 | float: left; 484 | width: 50%; 485 | 486 | img { 487 | float: left; 488 | width: 91px; 489 | height: 35px; 490 | top: -4px; 491 | } 492 | } 493 | 494 | #kindling { 495 | text-align: right; 496 | float: right; 497 | width: 50%; 498 | 499 | img { 500 | float: right; 501 | width: 100px; 502 | height: 35px; 503 | top: -2px; 504 | } 505 | } 506 | 507 | @media screen and (max-width:565px) { 508 | div { 509 | width: 50%!important; 510 | border-bottom: 1px solid #ddd; 511 | padding: 0 20px 10px; 512 | } 513 | img { 514 | float: none!important; 515 | margin: 0 0!important; 516 | } 517 | } 518 | } -------------------------------------------------------------------------------- /scss/_reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /scss/ie.scss: -------------------------------------------------------------------------------- 1 | #container { 2 | border: 1px solid #cccccc!important; 3 | } 4 | 5 | .ui-slider-handle { 6 | background: transparent url(../img/range-handle.png) no-repeat!important; 7 | } 8 | 9 | #header h1 { 10 | background: url(../img/sass-me-logo.png) 0 0 no-repeat!important; 11 | } 12 | 13 | .swatchContainer input { 14 | height: 30px!important; 15 | } 16 | -------------------------------------------------------------------------------- /scss/sass_reference.scss: -------------------------------------------------------------------------------- 1 | $ref : #003399; 2 | 3 | // Lighten 4 | 5 | .lighten_1 { 6 | color: lighten($ref, 20); 7 | } 8 | 9 | .lighten_2 { 10 | color: lighten($ref, 50); 11 | } 12 | 13 | .lighten_3 { 14 | color: lighten($ref, 100); 15 | } 16 | 17 | .lighten_4 { 18 | color: lighten($ref, 0); 19 | } 20 | 21 | .lighten_red_1 { 22 | color: lighten(#ff0000, 20); 23 | } 24 | 25 | // Darken 26 | 27 | .darken_1 { 28 | color: darken($ref, 20); 29 | } 30 | 31 | .darken_2 { 32 | color: darken($ref, 30); 33 | } 34 | 35 | // darken_3 : 200% is out of bounds for SASS; 36 | 37 | .darken_4 { 38 | color: darken($ref, 0); 39 | } 40 | 41 | // Adjust Hues 42 | 43 | .adjust_hue_1 { 44 | color: adjust_hue($ref, 10); 45 | } 46 | 47 | .adjust_hue_2 { 48 | color: adjust_hue($ref, 140); 49 | } 50 | 51 | .adjust_hue_3 { 52 | color: adjust_hue($ref, -220); 53 | } 54 | 55 | .adjust_hue_4 { 56 | color: adjust_hue($ref, 360); 57 | } 58 | 59 | .adjust_hue_5 { 60 | color: adjust_hue($ref, 540); 61 | } 62 | 63 | // Complete color stack 64 | 65 | .func_stack_a { 66 | color: adjust_hue(desaturate(lighten(#003399, 38), 31), 117); 67 | } 68 | 69 | .func_stack_b { 70 | color: adjust_hue(desaturate(lighten(#ff6600, 23), 68), 30); 71 | } 72 | 73 | .func_stack_c { 74 | color: adjust_hue(desaturate(lighten(#0183b7, 30), 34), 222); 75 | } 76 | 77 | // Color test HN 78 | 79 | $hn_color : #deadbe; 80 | 81 | .hue { 82 | color: hue($hn_color); 83 | } 84 | 85 | .sat { 86 | color: saturation($hn_color); 87 | } 88 | 89 | .light { 90 | color: lightness($hn_color); 91 | } 92 | 93 | .hue_blue { 94 | color: hue($ref); 95 | } 96 | 97 | .sat_blue { 98 | color: saturation($ref); 99 | } 100 | 101 | .light_blue { 102 | color: lightness($ref); 103 | } 104 | 105 | .red { 106 | color: red($hn_color); 107 | } 108 | 109 | .rgb { 110 | color: rgb(red($hn_color), green($hn_color), blue($hn_color)); 111 | } 112 | 113 | .darken_10 { 114 | color: darken($hn_color, 10); 115 | } 116 | 117 | .saturate_57 { 118 | color: saturate($hn_color, 57); 119 | } 120 | 121 | .adjust_hue_302 { 122 | color: adjust_hue($hn_color, 302); 123 | } -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | // Possibly break these up ... 2 | @import "compass/css3"; // Adding CSS3 mixins 3 | @import "reset"; // Eric Meyer's CSS reset 4 | @import "css"; // General CSS styles 5 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Jasmine Spec Runner 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /tests/lib/jasmine-1.2.0/MIT.LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2008-2011 Pivotal Labs 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /tests/lib/jasmine-1.2.0/jasmine-html.js: -------------------------------------------------------------------------------- 1 | jasmine.HtmlReporterHelpers = {}; 2 | 3 | jasmine.HtmlReporterHelpers.createDom = function(type, attrs, childrenVarArgs) { 4 | var el = document.createElement(type); 5 | 6 | for (var i = 2; i < arguments.length; i++) { 7 | var child = arguments[i]; 8 | 9 | if (typeof child === 'string') { 10 | el.appendChild(document.createTextNode(child)); 11 | } else { 12 | if (child) { 13 | el.appendChild(child); 14 | } 15 | } 16 | } 17 | 18 | for (var attr in attrs) { 19 | if (attr == "className") { 20 | el[attr] = attrs[attr]; 21 | } else { 22 | el.setAttribute(attr, attrs[attr]); 23 | } 24 | } 25 | 26 | return el; 27 | }; 28 | 29 | jasmine.HtmlReporterHelpers.getSpecStatus = function(child) { 30 | var results = child.results(); 31 | var status = results.passed() ? 'passed' : 'failed'; 32 | if (results.skipped) { 33 | status = 'skipped'; 34 | } 35 | 36 | return status; 37 | }; 38 | 39 | jasmine.HtmlReporterHelpers.appendToSummary = function(child, childElement) { 40 | var parentDiv = this.dom.summary; 41 | var parentSuite = (typeof child.parentSuite == 'undefined') ? 'suite' : 'parentSuite'; 42 | var parent = child[parentSuite]; 43 | 44 | if (parent) { 45 | if (typeof this.views.suites[parent.id] == 'undefined') { 46 | this.views.suites[parent.id] = new jasmine.HtmlReporter.SuiteView(parent, this.dom, this.views); 47 | } 48 | parentDiv = this.views.suites[parent.id].element; 49 | } 50 | 51 | parentDiv.appendChild(childElement); 52 | }; 53 | 54 | 55 | jasmine.HtmlReporterHelpers.addHelpers = function(ctor) { 56 | for(var fn in jasmine.HtmlReporterHelpers) { 57 | ctor.prototype[fn] = jasmine.HtmlReporterHelpers[fn]; 58 | } 59 | }; 60 | 61 | jasmine.HtmlReporter = function(_doc) { 62 | var self = this; 63 | var doc = _doc || window.document; 64 | 65 | var reporterView; 66 | 67 | var dom = {}; 68 | 69 | // Jasmine Reporter Public Interface 70 | self.logRunningSpecs = false; 71 | 72 | self.reportRunnerStarting = function(runner) { 73 | var specs = runner.specs() || []; 74 | 75 | if (specs.length == 0) { 76 | return; 77 | } 78 | 79 | createReporterDom(runner.env.versionString()); 80 | doc.body.appendChild(dom.reporter); 81 | 82 | reporterView = new jasmine.HtmlReporter.ReporterView(dom); 83 | reporterView.addSpecs(specs, self.specFilter); 84 | }; 85 | 86 | self.reportRunnerResults = function(runner) { 87 | reporterView && reporterView.complete(); 88 | }; 89 | 90 | self.reportSuiteResults = function(suite) { 91 | reporterView.suiteComplete(suite); 92 | }; 93 | 94 | self.reportSpecStarting = function(spec) { 95 | if (self.logRunningSpecs) { 96 | self.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...'); 97 | } 98 | }; 99 | 100 | self.reportSpecResults = function(spec) { 101 | reporterView.specComplete(spec); 102 | }; 103 | 104 | self.log = function() { 105 | var console = jasmine.getGlobal().console; 106 | if (console && console.log) { 107 | if (console.log.apply) { 108 | console.log.apply(console, arguments); 109 | } else { 110 | console.log(arguments); // ie fix: console.log.apply doesn't exist on ie 111 | } 112 | } 113 | }; 114 | 115 | self.specFilter = function(spec) { 116 | if (!focusedSpecName()) { 117 | return true; 118 | } 119 | 120 | return spec.getFullName().indexOf(focusedSpecName()) === 0; 121 | }; 122 | 123 | return self; 124 | 125 | function focusedSpecName() { 126 | var specName; 127 | 128 | (function memoizeFocusedSpec() { 129 | if (specName) { 130 | return; 131 | } 132 | 133 | var paramMap = []; 134 | var params = doc.location.search.substring(1).split('&'); 135 | 136 | for (var i = 0; i < params.length; i++) { 137 | var p = params[i].split('='); 138 | paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]); 139 | } 140 | 141 | specName = paramMap.spec; 142 | })(); 143 | 144 | return specName; 145 | } 146 | 147 | function createReporterDom(version) { 148 | dom.reporter = self.createDom('div', { id: 'HTMLReporter', className: 'jasmine_reporter' }, 149 | dom.banner = self.createDom('div', { className: 'banner' }, 150 | self.createDom('span', { className: 'title' }, "Jasmine "), 151 | self.createDom('span', { className: 'version' }, version)), 152 | 153 | dom.symbolSummary = self.createDom('ul', {className: 'symbolSummary'}), 154 | dom.alert = self.createDom('div', {className: 'alert'}), 155 | dom.results = self.createDom('div', {className: 'results'}, 156 | dom.summary = self.createDom('div', { className: 'summary' }), 157 | dom.details = self.createDom('div', { id: 'details' })) 158 | ); 159 | } 160 | }; 161 | jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter);jasmine.HtmlReporter.ReporterView = function(dom) { 162 | this.startedAt = new Date(); 163 | this.runningSpecCount = 0; 164 | this.completeSpecCount = 0; 165 | this.passedCount = 0; 166 | this.failedCount = 0; 167 | this.skippedCount = 0; 168 | 169 | this.createResultsMenu = function() { 170 | this.resultsMenu = this.createDom('span', {className: 'resultsMenu bar'}, 171 | this.summaryMenuItem = this.createDom('a', {className: 'summaryMenuItem', href: "#"}, '0 specs'), 172 | ' | ', 173 | this.detailsMenuItem = this.createDom('a', {className: 'detailsMenuItem', href: "#"}, '0 failing')); 174 | 175 | this.summaryMenuItem.onclick = function() { 176 | dom.reporter.className = dom.reporter.className.replace(/ showDetails/g, ''); 177 | }; 178 | 179 | this.detailsMenuItem.onclick = function() { 180 | showDetails(); 181 | }; 182 | }; 183 | 184 | this.addSpecs = function(specs, specFilter) { 185 | this.totalSpecCount = specs.length; 186 | 187 | this.views = { 188 | specs: {}, 189 | suites: {} 190 | }; 191 | 192 | for (var i = 0; i < specs.length; i++) { 193 | var spec = specs[i]; 194 | this.views.specs[spec.id] = new jasmine.HtmlReporter.SpecView(spec, dom, this.views); 195 | if (specFilter(spec)) { 196 | this.runningSpecCount++; 197 | } 198 | } 199 | }; 200 | 201 | this.specComplete = function(spec) { 202 | this.completeSpecCount++; 203 | 204 | if (isUndefined(this.views.specs[spec.id])) { 205 | this.views.specs[spec.id] = new jasmine.HtmlReporter.SpecView(spec, dom); 206 | } 207 | 208 | var specView = this.views.specs[spec.id]; 209 | 210 | switch (specView.status()) { 211 | case 'passed': 212 | this.passedCount++; 213 | break; 214 | 215 | case 'failed': 216 | this.failedCount++; 217 | break; 218 | 219 | case 'skipped': 220 | this.skippedCount++; 221 | break; 222 | } 223 | 224 | specView.refresh(); 225 | this.refresh(); 226 | }; 227 | 228 | this.suiteComplete = function(suite) { 229 | var suiteView = this.views.suites[suite.id]; 230 | if (isUndefined(suiteView)) { 231 | return; 232 | } 233 | suiteView.refresh(); 234 | }; 235 | 236 | this.refresh = function() { 237 | 238 | if (isUndefined(this.resultsMenu)) { 239 | this.createResultsMenu(); 240 | } 241 | 242 | // currently running UI 243 | if (isUndefined(this.runningAlert)) { 244 | this.runningAlert = this.createDom('a', {href: "?", className: "runningAlert bar"}); 245 | dom.alert.appendChild(this.runningAlert); 246 | } 247 | this.runningAlert.innerHTML = "Running " + this.completeSpecCount + " of " + specPluralizedFor(this.totalSpecCount); 248 | 249 | // skipped specs UI 250 | if (isUndefined(this.skippedAlert)) { 251 | this.skippedAlert = this.createDom('a', {href: "?", className: "skippedAlert bar"}); 252 | } 253 | 254 | this.skippedAlert.innerHTML = "Skipping " + this.skippedCount + " of " + specPluralizedFor(this.totalSpecCount) + " - run all"; 255 | 256 | if (this.skippedCount === 1 && isDefined(dom.alert)) { 257 | dom.alert.appendChild(this.skippedAlert); 258 | } 259 | 260 | // passing specs UI 261 | if (isUndefined(this.passedAlert)) { 262 | this.passedAlert = this.createDom('span', {href: "?", className: "passingAlert bar"}); 263 | } 264 | this.passedAlert.innerHTML = "Passing " + specPluralizedFor(this.passedCount); 265 | 266 | // failing specs UI 267 | if (isUndefined(this.failedAlert)) { 268 | this.failedAlert = this.createDom('span', {href: "?", className: "failingAlert bar"}); 269 | } 270 | this.failedAlert.innerHTML = "Failing " + specPluralizedFor(this.failedCount); 271 | 272 | if (this.failedCount === 1 && isDefined(dom.alert)) { 273 | dom.alert.appendChild(this.failedAlert); 274 | dom.alert.appendChild(this.resultsMenu); 275 | } 276 | 277 | // summary info 278 | this.summaryMenuItem.innerHTML = "" + specPluralizedFor(this.runningSpecCount); 279 | this.detailsMenuItem.innerHTML = "" + this.failedCount + " failing"; 280 | }; 281 | 282 | this.complete = function() { 283 | dom.alert.removeChild(this.runningAlert); 284 | 285 | this.skippedAlert.innerHTML = "Ran " + this.runningSpecCount + " of " + specPluralizedFor(this.totalSpecCount) + " - run all"; 286 | 287 | if (this.failedCount === 0) { 288 | dom.alert.appendChild(this.createDom('span', {className: 'passingAlert bar'}, "Passing " + specPluralizedFor(this.passedCount))); 289 | } else { 290 | showDetails(); 291 | } 292 | 293 | dom.banner.appendChild(this.createDom('span', {className: 'duration'}, "finished in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s")); 294 | }; 295 | 296 | return this; 297 | 298 | function showDetails() { 299 | if (dom.reporter.className.search(/showDetails/) === -1) { 300 | dom.reporter.className += " showDetails"; 301 | } 302 | } 303 | 304 | function isUndefined(obj) { 305 | return typeof obj === 'undefined'; 306 | } 307 | 308 | function isDefined(obj) { 309 | return !isUndefined(obj); 310 | } 311 | 312 | function specPluralizedFor(count) { 313 | var str = count + " spec"; 314 | if (count > 1) { 315 | str += "s" 316 | } 317 | return str; 318 | } 319 | 320 | }; 321 | 322 | jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.ReporterView); 323 | 324 | 325 | jasmine.HtmlReporter.SpecView = function(spec, dom, views) { 326 | this.spec = spec; 327 | this.dom = dom; 328 | this.views = views; 329 | 330 | this.symbol = this.createDom('li', { className: 'pending' }); 331 | this.dom.symbolSummary.appendChild(this.symbol); 332 | 333 | this.summary = this.createDom('div', { className: 'specSummary' }, 334 | this.createDom('a', { 335 | className: 'description', 336 | href: '?spec=' + encodeURIComponent(this.spec.getFullName()), 337 | title: this.spec.getFullName() 338 | }, this.spec.description) 339 | ); 340 | 341 | this.detail = this.createDom('div', { className: 'specDetail' }, 342 | this.createDom('a', { 343 | className: 'description', 344 | href: '?spec=' + encodeURIComponent(this.spec.getFullName()), 345 | title: this.spec.getFullName() 346 | }, this.spec.getFullName()) 347 | ); 348 | }; 349 | 350 | jasmine.HtmlReporter.SpecView.prototype.status = function() { 351 | return this.getSpecStatus(this.spec); 352 | }; 353 | 354 | jasmine.HtmlReporter.SpecView.prototype.refresh = function() { 355 | this.symbol.className = this.status(); 356 | 357 | switch (this.status()) { 358 | case 'skipped': 359 | break; 360 | 361 | case 'passed': 362 | this.appendSummaryToSuiteDiv(); 363 | break; 364 | 365 | case 'failed': 366 | this.appendSummaryToSuiteDiv(); 367 | this.appendFailureDetail(); 368 | break; 369 | } 370 | }; 371 | 372 | jasmine.HtmlReporter.SpecView.prototype.appendSummaryToSuiteDiv = function() { 373 | this.summary.className += ' ' + this.status(); 374 | this.appendToSummary(this.spec, this.summary); 375 | }; 376 | 377 | jasmine.HtmlReporter.SpecView.prototype.appendFailureDetail = function() { 378 | this.detail.className += ' ' + this.status(); 379 | 380 | var resultItems = this.spec.results().getItems(); 381 | var messagesDiv = this.createDom('div', { className: 'messages' }); 382 | 383 | for (var i = 0; i < resultItems.length; i++) { 384 | var result = resultItems[i]; 385 | 386 | if (result.type == 'log') { 387 | messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString())); 388 | } else if (result.type == 'expect' && result.passed && !result.passed()) { 389 | messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message)); 390 | 391 | if (result.trace.stack) { 392 | messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack)); 393 | } 394 | } 395 | } 396 | 397 | if (messagesDiv.childNodes.length > 0) { 398 | this.detail.appendChild(messagesDiv); 399 | this.dom.details.appendChild(this.detail); 400 | } 401 | }; 402 | 403 | jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.SpecView);jasmine.HtmlReporter.SuiteView = function(suite, dom, views) { 404 | this.suite = suite; 405 | this.dom = dom; 406 | this.views = views; 407 | 408 | this.element = this.createDom('div', { className: 'suite' }, 409 | this.createDom('a', { className: 'description', href: '?spec=' + encodeURIComponent(this.suite.getFullName()) }, this.suite.description) 410 | ); 411 | 412 | this.appendToSummary(this.suite, this.element); 413 | }; 414 | 415 | jasmine.HtmlReporter.SuiteView.prototype.status = function() { 416 | return this.getSpecStatus(this.suite); 417 | }; 418 | 419 | jasmine.HtmlReporter.SuiteView.prototype.refresh = function() { 420 | this.element.className += " " + this.status(); 421 | }; 422 | 423 | jasmine.HtmlReporterHelpers.addHelpers(jasmine.HtmlReporter.SuiteView); 424 | 425 | /* @deprecated Use jasmine.HtmlReporter instead 426 | */ 427 | jasmine.TrivialReporter = function(doc) { 428 | this.document = doc || document; 429 | this.suiteDivs = {}; 430 | this.logRunningSpecs = false; 431 | }; 432 | 433 | jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarArgs) { 434 | var el = document.createElement(type); 435 | 436 | for (var i = 2; i < arguments.length; i++) { 437 | var child = arguments[i]; 438 | 439 | if (typeof child === 'string') { 440 | el.appendChild(document.createTextNode(child)); 441 | } else { 442 | if (child) { el.appendChild(child); } 443 | } 444 | } 445 | 446 | for (var attr in attrs) { 447 | if (attr == "className") { 448 | el[attr] = attrs[attr]; 449 | } else { 450 | el.setAttribute(attr, attrs[attr]); 451 | } 452 | } 453 | 454 | return el; 455 | }; 456 | 457 | jasmine.TrivialReporter.prototype.reportRunnerStarting = function(runner) { 458 | var showPassed, showSkipped; 459 | 460 | this.outerDiv = this.createDom('div', { id: 'TrivialReporter', className: 'jasmine_reporter' }, 461 | this.createDom('div', { className: 'banner' }, 462 | this.createDom('div', { className: 'logo' }, 463 | this.createDom('span', { className: 'title' }, "Jasmine"), 464 | this.createDom('span', { className: 'version' }, runner.env.versionString())), 465 | this.createDom('div', { className: 'options' }, 466 | "Show ", 467 | showPassed = this.createDom('input', { id: "__jasmine_TrivialReporter_showPassed__", type: 'checkbox' }), 468 | this.createDom('label', { "for": "__jasmine_TrivialReporter_showPassed__" }, " passed "), 469 | showSkipped = this.createDom('input', { id: "__jasmine_TrivialReporter_showSkipped__", type: 'checkbox' }), 470 | this.createDom('label', { "for": "__jasmine_TrivialReporter_showSkipped__" }, " skipped") 471 | ) 472 | ), 473 | 474 | this.runnerDiv = this.createDom('div', { className: 'runner running' }, 475 | this.createDom('a', { className: 'run_spec', href: '?' }, "run all"), 476 | this.runnerMessageSpan = this.createDom('span', {}, "Running..."), 477 | this.finishedAtSpan = this.createDom('span', { className: 'finished-at' }, "")) 478 | ); 479 | 480 | this.document.body.appendChild(this.outerDiv); 481 | 482 | var suites = runner.suites(); 483 | for (var i = 0; i < suites.length; i++) { 484 | var suite = suites[i]; 485 | var suiteDiv = this.createDom('div', { className: 'suite' }, 486 | this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, "run"), 487 | this.createDom('a', { className: 'description', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, suite.description)); 488 | this.suiteDivs[suite.id] = suiteDiv; 489 | var parentDiv = this.outerDiv; 490 | if (suite.parentSuite) { 491 | parentDiv = this.suiteDivs[suite.parentSuite.id]; 492 | } 493 | parentDiv.appendChild(suiteDiv); 494 | } 495 | 496 | this.startedAt = new Date(); 497 | 498 | var self = this; 499 | showPassed.onclick = function(evt) { 500 | if (showPassed.checked) { 501 | self.outerDiv.className += ' show-passed'; 502 | } else { 503 | self.outerDiv.className = self.outerDiv.className.replace(/ show-passed/, ''); 504 | } 505 | }; 506 | 507 | showSkipped.onclick = function(evt) { 508 | if (showSkipped.checked) { 509 | self.outerDiv.className += ' show-skipped'; 510 | } else { 511 | self.outerDiv.className = self.outerDiv.className.replace(/ show-skipped/, ''); 512 | } 513 | }; 514 | }; 515 | 516 | jasmine.TrivialReporter.prototype.reportRunnerResults = function(runner) { 517 | var results = runner.results(); 518 | var className = (results.failedCount > 0) ? "runner failed" : "runner passed"; 519 | this.runnerDiv.setAttribute("class", className); 520 | //do it twice for IE 521 | this.runnerDiv.setAttribute("className", className); 522 | var specs = runner.specs(); 523 | var specCount = 0; 524 | for (var i = 0; i < specs.length; i++) { 525 | if (this.specFilter(specs[i])) { 526 | specCount++; 527 | } 528 | } 529 | var message = "" + specCount + " spec" + (specCount == 1 ? "" : "s" ) + ", " + results.failedCount + " failure" + ((results.failedCount == 1) ? "" : "s"); 530 | message += " in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s"; 531 | this.runnerMessageSpan.replaceChild(this.createDom('a', { className: 'description', href: '?'}, message), this.runnerMessageSpan.firstChild); 532 | 533 | this.finishedAtSpan.appendChild(document.createTextNode("Finished at " + new Date().toString())); 534 | }; 535 | 536 | jasmine.TrivialReporter.prototype.reportSuiteResults = function(suite) { 537 | var results = suite.results(); 538 | var status = results.passed() ? 'passed' : 'failed'; 539 | if (results.totalCount === 0) { // todo: change this to check results.skipped 540 | status = 'skipped'; 541 | } 542 | this.suiteDivs[suite.id].className += " " + status; 543 | }; 544 | 545 | jasmine.TrivialReporter.prototype.reportSpecStarting = function(spec) { 546 | if (this.logRunningSpecs) { 547 | this.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...'); 548 | } 549 | }; 550 | 551 | jasmine.TrivialReporter.prototype.reportSpecResults = function(spec) { 552 | var results = spec.results(); 553 | var status = results.passed() ? 'passed' : 'failed'; 554 | if (results.skipped) { 555 | status = 'skipped'; 556 | } 557 | var specDiv = this.createDom('div', { className: 'spec ' + status }, 558 | this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(spec.getFullName()) }, "run"), 559 | this.createDom('a', { 560 | className: 'description', 561 | href: '?spec=' + encodeURIComponent(spec.getFullName()), 562 | title: spec.getFullName() 563 | }, spec.description)); 564 | 565 | 566 | var resultItems = results.getItems(); 567 | var messagesDiv = this.createDom('div', { className: 'messages' }); 568 | for (var i = 0; i < resultItems.length; i++) { 569 | var result = resultItems[i]; 570 | 571 | if (result.type == 'log') { 572 | messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString())); 573 | } else if (result.type == 'expect' && result.passed && !result.passed()) { 574 | messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message)); 575 | 576 | if (result.trace.stack) { 577 | messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack)); 578 | } 579 | } 580 | } 581 | 582 | if (messagesDiv.childNodes.length > 0) { 583 | specDiv.appendChild(messagesDiv); 584 | } 585 | 586 | this.suiteDivs[spec.suite.id].appendChild(specDiv); 587 | }; 588 | 589 | jasmine.TrivialReporter.prototype.log = function() { 590 | var console = jasmine.getGlobal().console; 591 | if (console && console.log) { 592 | if (console.log.apply) { 593 | console.log.apply(console, arguments); 594 | } else { 595 | console.log(arguments); // ie fix: console.log.apply doesn't exist on ie 596 | } 597 | } 598 | }; 599 | 600 | jasmine.TrivialReporter.prototype.getLocation = function() { 601 | return this.document.location; 602 | }; 603 | 604 | jasmine.TrivialReporter.prototype.specFilter = function(spec) { 605 | var paramMap = {}; 606 | var params = this.getLocation().search.substring(1).split('&'); 607 | for (var i = 0; i < params.length; i++) { 608 | var p = params[i].split('='); 609 | paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]); 610 | } 611 | 612 | if (!paramMap.spec) { 613 | return true; 614 | } 615 | return spec.getFullName().indexOf(paramMap.spec) === 0; 616 | }; 617 | -------------------------------------------------------------------------------- /tests/lib/jasmine-1.2.0/jasmine.css: -------------------------------------------------------------------------------- 1 | body { background-color: #eeeeee; padding: 0; margin: 5px; overflow-y: scroll; } 2 | 3 | #HTMLReporter { font-size: 11px; font-family: Monaco, "Lucida Console", monospace; line-height: 14px; color: #333333; } 4 | #HTMLReporter a { text-decoration: none; } 5 | #HTMLReporter a:hover { text-decoration: underline; } 6 | #HTMLReporter p, #HTMLReporter h1, #HTMLReporter h2, #HTMLReporter h3, #HTMLReporter h4, #HTMLReporter h5, #HTMLReporter h6 { margin: 0; line-height: 14px; } 7 | #HTMLReporter .banner, #HTMLReporter .symbolSummary, #HTMLReporter .summary, #HTMLReporter .resultMessage, #HTMLReporter .specDetail .description, #HTMLReporter .alert .bar, #HTMLReporter .stackTrace { padding-left: 9px; padding-right: 9px; } 8 | #HTMLReporter #jasmine_content { position: fixed; right: 100%; } 9 | #HTMLReporter .version { color: #aaaaaa; } 10 | #HTMLReporter .banner { margin-top: 14px; } 11 | #HTMLReporter .duration { color: #aaaaaa; float: right; } 12 | #HTMLReporter .symbolSummary { overflow: hidden; *zoom: 1; margin: 14px 0; } 13 | #HTMLReporter .symbolSummary li { display: block; float: left; height: 7px; width: 14px; margin-bottom: 7px; font-size: 16px; } 14 | #HTMLReporter .symbolSummary li.passed { font-size: 14px; } 15 | #HTMLReporter .symbolSummary li.passed:before { color: #5e7d00; content: "\02022"; } 16 | #HTMLReporter .symbolSummary li.failed { line-height: 9px; } 17 | #HTMLReporter .symbolSummary li.failed:before { color: #b03911; content: "x"; font-weight: bold; margin-left: -1px; } 18 | #HTMLReporter .symbolSummary li.skipped { font-size: 14px; } 19 | #HTMLReporter .symbolSummary li.skipped:before { color: #bababa; content: "\02022"; } 20 | #HTMLReporter .symbolSummary li.pending { line-height: 11px; } 21 | #HTMLReporter .symbolSummary li.pending:before { color: #aaaaaa; content: "-"; } 22 | #HTMLReporter .bar { line-height: 28px; font-size: 14px; display: block; color: #eee; } 23 | #HTMLReporter .runningAlert { background-color: #666666; } 24 | #HTMLReporter .skippedAlert { background-color: #aaaaaa; } 25 | #HTMLReporter .skippedAlert:first-child { background-color: #333333; } 26 | #HTMLReporter .skippedAlert:hover { text-decoration: none; color: white; text-decoration: underline; } 27 | #HTMLReporter .passingAlert { background-color: #a6b779; } 28 | #HTMLReporter .passingAlert:first-child { background-color: #5e7d00; } 29 | #HTMLReporter .failingAlert { background-color: #cf867e; } 30 | #HTMLReporter .failingAlert:first-child { background-color: #b03911; } 31 | #HTMLReporter .results { margin-top: 14px; } 32 | #HTMLReporter #details { display: none; } 33 | #HTMLReporter .resultsMenu, #HTMLReporter .resultsMenu a { background-color: #fff; color: #333333; } 34 | #HTMLReporter.showDetails .summaryMenuItem { font-weight: normal; text-decoration: inherit; } 35 | #HTMLReporter.showDetails .summaryMenuItem:hover { text-decoration: underline; } 36 | #HTMLReporter.showDetails .detailsMenuItem { font-weight: bold; text-decoration: underline; } 37 | #HTMLReporter.showDetails .summary { display: none; } 38 | #HTMLReporter.showDetails #details { display: block; } 39 | #HTMLReporter .summaryMenuItem { font-weight: bold; text-decoration: underline; } 40 | #HTMLReporter .summary { margin-top: 14px; } 41 | #HTMLReporter .summary .suite .suite, #HTMLReporter .summary .specSummary { margin-left: 14px; } 42 | #HTMLReporter .summary .specSummary.passed a { color: #5e7d00; } 43 | #HTMLReporter .summary .specSummary.failed a { color: #b03911; } 44 | #HTMLReporter .description + .suite { margin-top: 0; } 45 | #HTMLReporter .suite { margin-top: 14px; } 46 | #HTMLReporter .suite a { color: #333333; } 47 | #HTMLReporter #details .specDetail { margin-bottom: 28px; } 48 | #HTMLReporter #details .specDetail .description { display: block; color: white; background-color: #b03911; } 49 | #HTMLReporter .resultMessage { padding-top: 14px; color: #333333; } 50 | #HTMLReporter .resultMessage span.result { display: block; } 51 | #HTMLReporter .stackTrace { margin: 5px 0 0 0; max-height: 224px; overflow: auto; line-height: 18px; color: #666666; border: 1px solid #ddd; background: white; white-space: pre; } 52 | 53 | #TrivialReporter { padding: 8px 13px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; background-color: white; font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif; /*.resultMessage {*/ /*white-space: pre;*/ /*}*/ } 54 | #TrivialReporter a:visited, #TrivialReporter a { color: #303; } 55 | #TrivialReporter a:hover, #TrivialReporter a:active { color: blue; } 56 | #TrivialReporter .run_spec { float: right; padding-right: 5px; font-size: .8em; text-decoration: none; } 57 | #TrivialReporter .banner { color: #303; background-color: #fef; padding: 5px; } 58 | #TrivialReporter .logo { float: left; font-size: 1.1em; padding-left: 5px; } 59 | #TrivialReporter .logo .version { font-size: .6em; padding-left: 1em; } 60 | #TrivialReporter .runner.running { background-color: yellow; } 61 | #TrivialReporter .options { text-align: right; font-size: .8em; } 62 | #TrivialReporter .suite { border: 1px outset gray; margin: 5px 0; padding-left: 1em; } 63 | #TrivialReporter .suite .suite { margin: 5px; } 64 | #TrivialReporter .suite.passed { background-color: #dfd; } 65 | #TrivialReporter .suite.failed { background-color: #fdd; } 66 | #TrivialReporter .spec { margin: 5px; padding-left: 1em; clear: both; } 67 | #TrivialReporter .spec.failed, #TrivialReporter .spec.passed, #TrivialReporter .spec.skipped { padding-bottom: 5px; border: 1px solid gray; } 68 | #TrivialReporter .spec.failed { background-color: #fbb; border-color: red; } 69 | #TrivialReporter .spec.passed { background-color: #bfb; border-color: green; } 70 | #TrivialReporter .spec.skipped { background-color: #bbb; } 71 | #TrivialReporter .messages { border-left: 1px dashed gray; padding-left: 1em; padding-right: 1em; } 72 | #TrivialReporter .passed { background-color: #cfc; display: none; } 73 | #TrivialReporter .failed { background-color: #fbb; } 74 | #TrivialReporter .skipped { color: #777; background-color: #eee; display: none; } 75 | #TrivialReporter .resultMessage span.result { display: block; line-height: 2em; color: black; } 76 | #TrivialReporter .resultMessage .mismatch { color: black; } 77 | #TrivialReporter .stackTrace { white-space: pre; font-size: .8em; margin-left: 10px; max-height: 5em; overflow: auto; border: 1px inset red; padding: 1em; background: #eef; } 78 | #TrivialReporter .finished-at { padding-left: 1em; font-size: .6em; } 79 | #TrivialReporter.show-passed .passed, #TrivialReporter.show-skipped .skipped { display: block; } 80 | #TrivialReporter #jasmine_content { position: fixed; right: 100%; } 81 | #TrivialReporter .runner { border: 1px solid gray; display: block; margin: 5px 0; padding: 2px 0 2px 10px; } 82 | -------------------------------------------------------------------------------- /tests/spec/ColorSpec.js: -------------------------------------------------------------------------------- 1 | describe("Color", function() { 2 | var color; 3 | 4 | beforeEach(function() { 5 | color = new Color("#003399"); // Reference Color 6 | }); 7 | 8 | it("should have a hex color", function() { 9 | expect(color.hex).toEqual("#003399"); 10 | }); 11 | 12 | it("should have an RGB representation", function() { 13 | expect(color.rgb).toEqual({r: 0, g: 51, b: 153}); 14 | }); 15 | 16 | it("should have an HSL representation", function() { 17 | expect(color.hsl).toEqual({h: 220, s: 100, l: 30}); 18 | }); 19 | 20 | it("should be able to convert HSL to RGB", function() { 21 | expect(color.hsl2rgb(color.hsl)).toEqual({r: 0, g: 51, b: 153}); 22 | }); 23 | 24 | it("should be able to convert RGB to HSL", function() { 25 | expect(color.rgb2hsl(color.rgb)).toEqual({h: 220, s: 100, l: 30}); 26 | }); 27 | 28 | it("should be able to convert from hex to RGB to hex", function() { 29 | expect(color.rgb2hex(color.rgb)).toEqual("#003399"); 30 | }); 31 | 32 | it("should be able to convert from hex to HSL to hex", function() { 33 | expect(color.hsl2hex(color.hsl)).toEqual("#003399"); 34 | }); 35 | 36 | it("should be able to constrain a number between values", function() { 37 | expect(color.constrain(color.blue(), 20, [0, 255], '+')).toEqual(173); 38 | expect(color.constrain(color.blue(), 200, [0, 255], '+')).toEqual(255); 39 | expect(color.constrain(color.blue(), 200, [0, 255], '-')).toEqual(0); 40 | expect(color.constrain(color.hue(), -20, [-360, 360], '+')).toEqual(200); 41 | expect(color.constrain(color.hue(), -400, [-360, 360], '+')).toEqual(180); 42 | expect(color.constrain(color.hue(), 400, [-360, 360], '+')).toEqual(360); 43 | expect(color.constrain(color.hue(), -220, [-360, 360], '+')).toEqual(0); 44 | }); 45 | 46 | it("should be able to modify an RGB value (r: 20)", function() { 47 | expect(color.mod({r : 20})).toEqual({r : 20, g : 51, b : 153}); 48 | }); 49 | 50 | it("should be able to modify an HSL value (h: 180, l: 20)", function() { 51 | expect(color.mod({h : 180, l: 20})).toEqual({h : 180, s : 100, l : 20}); 52 | }); 53 | 54 | it("should NOT be able to modify an HSL value with an empty param ({h: null})", function() { 55 | expect(color.mod({h : null})).toEqual({h : 220, s : 100, l : 30}); 56 | }); 57 | 58 | it("should NOT be able to modify an HSL and RGB value at the same time (null)", function() { 59 | expect(color.mod({h : 100, r: 30})).toBeNull(); 60 | }); 61 | 62 | }); 63 | 64 | describe("Transforms", function() { 65 | var color, transforms; 66 | 67 | describe("Lighten", function() { 68 | var color, transforms; 69 | 70 | beforeEach(function() { 71 | color = new Color("#003399"); // Reference Color 72 | }); 73 | 74 | it("should lighten a color by 20% (#0055ff)", function() { 75 | expect(Transforms.lighten(color, 20)).toEqual('#0055ff'); 76 | }); 77 | 78 | it("should lighten a color by 50% (#99bbff)", function() { 79 | expect(Transforms.lighten(color, 50)).toEqual('#99bbff'); 80 | }); 81 | 82 | it("should lighten a color to white due to 100% (#ffffff)", function() { 83 | expect(Transforms.lighten(color, 100)).toEqual('#ffffff'); 84 | }); 85 | 86 | it("should NOT lighten a color due to 0% (#003399)", function() { 87 | expect(Transforms.lighten(color, 0)).toEqual('#003399'); 88 | }); 89 | 90 | it("should darken a color due to a negative percent -10% (#002266)", function() { 91 | expect(Transforms.lighten(color, -10)).toEqual('#002266'); 92 | }); 93 | 94 | it("should lighten #ff0000 by 20% (#ff6666)", function() { 95 | expect(Transforms.lighten(new Color("#ff0000"), 20)).toEqual('#ff6666'); 96 | }); 97 | }) 98 | 99 | describe("Darken", function() { 100 | var color, transforms; 101 | 102 | beforeEach(function() { 103 | color = new Color("#003399"); // Reference Color 104 | }); 105 | 106 | it("should darken a color by 20% (#001133)", function() { 107 | expect(Transforms.darken(color, 20)).toEqual('#001133'); 108 | }); 109 | 110 | it("should darken a color to black by reducing to 0 with 30% (#000000)", function() { 111 | expect(Transforms.darken(color, 30)).toEqual('#000000'); 112 | }); 113 | 114 | it("should darken a color to black by using a crazy value like 200% (#000000)", function() { 115 | expect(Transforms.darken(color, 200)).toEqual('#000000'); 116 | }); 117 | 118 | it("should NOT darken a color due to 0% (#003399)", function() { 119 | expect(Transforms.darken(color, 0)).toEqual('#003399'); 120 | }); 121 | 122 | it("should lighten a color due to using a negative value of -5% (#003bb3)", function() { 123 | expect(Transforms.darken(color, -5)).toEqual('#003bb3'); 124 | }); 125 | }) 126 | 127 | describe("Saturate/Desaturate", function() { 128 | var color, transforms; 129 | 130 | beforeEach(function() { 131 | color = new Color("#003399"); // Reference Color 132 | }); 133 | 134 | it("should desaturate a color by 50% (#264073)", function() { 135 | expect(Transforms.desaturate(color, 50)).toEqual('#264073'); 136 | }); 137 | 138 | it("should saturate a color by 50% to 100% (#264073 -> #003399)", function() { 139 | expect(Transforms.saturate(new Color('#264073'), 50)).toEqual('#003399'); 140 | }); 141 | 142 | }) 143 | 144 | describe("Adjust Hue", function() { 145 | var color, transforms; 146 | 147 | beforeEach(function() { 148 | color = new Color("#003399"); // Reference Color 149 | }); 150 | 151 | it("should rotate hue by 10deg (#003399 -> #001A99)", function() { 152 | expect(Transforms.adjust_hue(color, 10)).toEqual('#001a99'); 153 | }); 154 | 155 | it("should rotate hue by 140deg (#003399 -> #990000)", function() { 156 | expect(Transforms.adjust_hue(color, 140)).toEqual('#990000'); 157 | }); 158 | 159 | it("should rotate hue by -220deg (#003399 -> #990000)", function() { 160 | expect(Transforms.adjust_hue(color, -220)).toEqual('#990000'); 161 | }); 162 | 163 | it("should rotate hue by 360deg (#003399 -> #003399)", function() { 164 | expect(Transforms.adjust_hue(color, 360)).toEqual('#003399'); 165 | }); 166 | 167 | it("should rotate hue by 360deg (#003399 -> #996600)", function() { 168 | expect(Transforms.adjust_hue(color, 540)).toEqual('#996600'); 169 | }); 170 | }) 171 | 172 | }); -------------------------------------------------------------------------------- /tests/spec/SpecHelper.js: -------------------------------------------------------------------------------- 1 | beforeEach(function() { 2 | this.addMatchers({ 3 | toBePlaying: function(expectedSong) { 4 | var player = this.actual; 5 | return player.currentlyPlayingSong === expectedSong && 6 | player.isPlaying; 7 | } 8 | }); 9 | }); 10 | --------------------------------------------------------------------------------