Created
April 17, 2014 22:54
-
-
Save hbrysiewicz/11016021 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Put your CSS here */ | |
| html, body { | |
| margin: 20px; | |
| } | |
| input: { | |
| padding: 8px; | |
| border-radius: 4px; | |
| } | |
| .color-swatch { | |
| height: 50px; | |
| width: 50px; | |
| border-radius: 4px; | |
| border: 1px solid #000; | |
| } | |
| .rgb-input, | |
| .hex-input { | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| } | |
| .hex { | |
| width: 100px; | |
| padding: 8px; | |
| border-radius: 4px; | |
| } | |
| .rgb { | |
| width: 40px; | |
| margin-left: 4px; | |
| margin-right: 4px; | |
| padding: 8px; | |
| border-radius: 4px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Ember Starter Kit</title> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css"> | |
| <link rel='stylesheet' href='http://bgrins.github.io/spectrum/spectrum.css'> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script> | |
| <script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script> | |
| <script src='http://bgrins.github.io/spectrum/spectrum.js'></script> | |
| </head> | |
| <body> | |
| <script type="text/x-handlebars"> | |
| <h2> Welcome to Ember.js</h2> | |
| {{color-picker}} | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="components/color-picker"> | |
| <div id='color-swatch' {{bind-attr style=style}} class='color-swatch'></div> | |
| <div class='hex-input'> | |
| Hex: {{input type='text' value=hexValue class='hex' placeholder='#00000'}} | |
| </div> | |
| <div class='rgb-input'> | |
| RGB: | |
| {{input type='text' value=rgbR class='rgb' placeholder='RRR'}} | |
| {{input type='text' value=rgbG class='rgb' placeholder='GGG'}} | |
| {{input type='text' value=rgbB class='rgb' placeholder='BBB'}} | |
| </div> | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| App = Ember.Application.create(); | |
| App.Router.map(function() { | |
| // put your routes here | |
| }); | |
| App.ColorPickerComponent = Ember.Component.extend({ | |
| color: '#ff0000', | |
| style: function() { | |
| return 'background-color:' + this.get('color'); | |
| }.property('color'), | |
| hexValue: function(key, val) { | |
| if (arguments.length == 2) { | |
| if (val.length == 7) | |
| this.set('color', val); | |
| } | |
| return this.get('color'); | |
| }.property('color'), | |
| rgbR: function() { | |
| var hex = this.get('hexValue'); | |
| return parseInt(hex.substring(1,3),16); | |
| }.property('color'), | |
| rgbG: function() { | |
| var hex = this.get('hexValue'); | |
| return parseInt(hex.substring(3,5),16); | |
| }.property('color'), | |
| rgbB: function() { | |
| var hex = this.get('hexValue'); | |
| return parseInt(hex.substring(5,7),16); | |
| }.property('color'), | |
| rgbToHex: function(n) { | |
| if (n === null) return "00"; | |
| n = parseInt(n, 10); | |
| if (n === 0 || isNaN(n)) return "00"; | |
| n = Math.max(0,n); | |
| n = Math.min(n,255); | |
| n = Math.round(n); | |
| return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16); | |
| }, | |
| watchRgb: function() { | |
| var r = this.get('rgbR'); | |
| var g = this.get('rgbG'); | |
| var b = this.get('rgbB'); | |
| var color = '#' + this.rgbToHex(r) + this.rgbToHex(g) + this.rgbToHex(b); | |
| this.set('color',color); | |
| }.observes('rgbR','rgbG','rgbB'), | |
| didInsertElement: function() { | |
| var _this = this; | |
| var color = this.get('color'); | |
| $("#color-swatch").spectrum({ | |
| showInput: false, | |
| allowEmpty: true, | |
| showButtons: false, | |
| color: color, | |
| change: function(newColor) { | |
| _this.set('color', newColor.toHexString()); | |
| } | |
| }); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment