source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/demo-apps/colour/index.html @ 609

Last change on this file since 609 was 609, checked in by vmipsl, 12 years ago

images
File size: 9.7 KB
RevLine 
[609]1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Colorinator</title>
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="viewport" content="width=410">
8    <!-- jQuery -->
9    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
10    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
11    <!-- Wijmo CSS and script -->
12    <link type="text/css" href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" />
13    <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.5.min.css" rel="stylesheet" />
14    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.5.min.js"></script>
15    <!-- KnockoutJS for MVVM-->
16    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script>
17    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
18    <script type="text/javascript">
19
20        //Create ViewModel
21        var viewModel = function () {
22            var self = this;
23            self.red = ko.observable(120);
24            self.green = ko.observable(120);
25            self.blue = ko.observable(120);
26            self.minRGB = ko.observable(0);
27            self.maxRGB = ko.observable(255);
28            self.rgbColor = ko.computed(function () {
29                // Knockout tracks dependencies automatically. It knows that rgbColor depends on hue, saturation and lightness, because these get called when evaluating rgbColor.
30                return "rgb(" + self.red() + ", " + self.green() + ", " + self.blue() + ")";
31            }, self);
32            self.hslColor = ko.computed(function () {
33                //Convert red, green and blue numbers to hue (degree), saturation (percentage) and lightness (percentage)
34                var r = self.red() / 255, g = self.green() / 255, b = self.blue() / 255;
35                var max = Math.max(r, g, b), min = Math.min(r, g, b);
36                var h, s, l = (max + min) / 2;
37                var hue, saturation, lightness;
38
39                if (max == min) {
40                    h = s = 0;
41                } else {
42                    var d = max - min;
43                    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
44                    switch (max) {
45                        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
46                        case g: h = (b - r) / d + 2; break;
47                        case b: h = (r - g) / d + 4; break;
48                    }
49                    h /= 6;
50                }
51                hue = Math.round(h * 360);
52                saturation = Math.round(s * 100) + "%";
53                lightness = Math.round(l * 100) + "%";
54                return "hsl(" + hue + ", " + saturation + ", " + lightness + ")";
55            }, self);
56
57            self.hexColor = ko.computed({
58                read: function () {
59                    //Convert red, green and blue numbers to base 16 strings
60                    var r = self.red(), g = self.green(), b = self.blue();
61                    var hex = 1 << 24 | r << 16 | g << 8 | b;
62                    return '#' + hex.toString(16).substr(1);
63                },
64                write: function (value) {
65                    //This is a writable computed observable so that one can type in a hex color to update the RGB values.
66                    var r, g, b;
67                    if (value[0] === "#") {
68                        value = value.substr(1);
69                    }
70                    if (value.length < 3) {
71                        return;
72                    }
73                    else if (value.length > 6) {
74                        value = value.substr(0, 6);
75                    }
76                    else if (value.length === 3) {
77                        //Short code hex converted to full hex
78                        r = value.substr(0, 1) + value.substr(0, 1);
79                        g = value.substr(1, 1) + value.substr(1, 1);
80                        b = value.substr(2, 1) + value.substr(2, 1);
81                        value = r + g + b;
82                    }
83                    //Update ViewModel red, green and blue values
84                    self.red(parseInt(value.substr(0, 2), 16));
85                    self.green(parseInt(value.substr(2, 2), 16));
86                    self.blue(parseInt(value.substr(4, 2), 16));
87                },
88                owner: self
89            });
90        };
91
92        //Bind ViewModel and Event Handlers
93        $(document).ready(function () {
94            var vm = new viewModel();
95            //check for hex color passed in URL
96            getColorFromHash();
97            //Apply ViewModel bindings in markup
98            ko.applyBindings(vm);
99            //Trigger CSS3 animation to show color picker pane when ViewModel is initialized
100            $(".wait").addClass("show").removeClass("wait");
101
102            //Check if browser supports hashchange event
103            if ("onhashchange" in window) {
104                window.onhashchange = getColorFromHash;
105            }
106
107            //Get hex color from URL and update ViewModel with value
108            function getColorFromHash() {
109                if (window.location.hash && window.location.hash != vm.hexColor()) {
110                    vm.hexColor(window.location.hash);
111                }
112            }
113
114        });
115    </script>
116    <style type="text/css">
117        body
118        {
119            font-family: "Segoe UI Light" , Frutiger, "Frutiger Linotype" , "Dejavu Sans" , "Helvetica Neue" , Arial, sans-serif;
120            font-size: 14px;
121            background: #000;
122        }
123        h1
124        {
125            font-size: 2.4em;
126            color: #fff;
127            padding: 20px 0 0 6px;
128            margin: 0;
129        }
130        .container
131        {
132            margin: 0 auto;
133            width: 400px;
134        }
135        .wait
136        {
137            height: 1px;
138        }
139        .show
140        {
141            height: 530px;
142            -webkit-transition: all 1.2s ease-out;
143            -moz-transition: all 1.2s ease-out;
144            -o-transition: all 1.2s ease-out;
145            transition: all 1.2s ease-out;
146        }
147        .color-picker
148        {
149            overflow: hidden;
150            background: #fff;
151            padding: 20px;
152            box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.5);
153        }
154        .swatch
155        {
156            margin: 20px;
157            width: 320px;
158            height: 200px;
159            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5) inset;
160        }
161        .color-section
162        {
163            padding: 6px 0 0 0;
164        }
165        .color-label
166        {
167            width: 70px;
168            display: inline-block;
169        }
170        .unit
171        {
172            width: 30px;
173        }
174        .color-value
175        {
176            width: 140px;
177        }
178        .color-slider
179        {
180            width: 200px;
181        }
182        .wijmo-wijslider-horizontal
183        {
184            display: inline-block;
185        }
186    </style>
187</head>
188<body data-bind="style: { background: hexColor }">
189    <div class="container">
190        <h1>
191            Colorinator</h1>
192        <div class="color-picker wait">
193            <div class="swatch" data-bind="style: { background: hexColor }">
194            </div>
195            <div class="color-section">
196                <label class="color-label">
197                    Red</label>
198                <div data-bind="wijslider: { value: red, min: minRGB, max: maxRGB }" class="color-slider">
199                </div>
200                <input type="text" data-bind="value: red, valueUpdate: 'keyup', wijtextbox: {}" class="unit" />
201            </div>
202            <div class="color-section">
203                <label class="color-label">
204                    Green</label>
205                <div data-bind="wijslider: { value: green, min: minRGB, max: maxRGB }" class="color-slider">
206                </div>
207                <input type="text" data-bind="value: green, valueUpdate: 'keyup', wijtextbox: {}" class="unit" />
208            </div>
209            <div class="color-section">
210                <label class="color-label">
211                    Blue</label>
212                <div data-bind="wijslider: { value: blue, min: minRGB, max: maxRGB }" class="color-slider">
213                </div>
214                <input type="text" data-bind="value: blue, valueUpdate: 'keyup', wijtextbox: {}" class="unit" />
215            </div>
216            <div class="color-section">
217                <label class="color-label">
218                    RGB Color</label>
219                <input type="text" data-bind="value: rgbColor, disable: true, wijtextbox: { disabled: true }" class="color-value" />
220                <span data-bind="text: rgbColor"></span>
221            </div>
222            <div class="color-section">
223                <label class="color-label">
224                    HSL Color</label>
225                <input type="text" data-bind="value: hslColor, disable: true, wijtextbox: { disabled: true }" class="color-value" />
226                <span data-bind="text: hslColor"></span>
227            </div>
228            <div class="color-section">
229                <label class="color-label">
230                    HEX Color</label>
231                <input type="text" data-bind="value: hexColor, wijtextbox: { }" class="color-value" />
232                <a data-bind="text: hexColor, attr: { href: hexColor }" title="Link to this color"></a>
233            </div>
234            <p>
235                Made with <a href="http://knockoutjs.com">KnockoutJS</a> and <a href="http://wijmo.com">Wijmo</a></p>
236        </div>
237    </div>
238</body>
239</html>
Note: See TracBrowser for help on using the repository browser.