Mercurial > hg > digilib-old
annotate webapp/src/main/webapp/jquery/jquery.digilib.sliders.js @ 1079:9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
fixed bug with dismissing the rgb sliders window.
| author | robcast |
|---|---|
| date | Thu, 24 May 2012 14:35:43 +0200 |
| parents | b41dc00af960 |
| children |
| rev | line source |
|---|---|
| 1022 | 1 /** |
| 2 digilib sliders plugin | |
| 3 */ | |
| 1070 | 4 |
| 1071 | 5 // TODO: |
| 6 // IE sets rgb contrast sliders initially to 0.4 instead of 0 - ??? | |
| 1022 | 7 |
| 8 (function($) { | |
| 9 // plugin object with digilib data | |
| 10 var digilib = null; | |
| 11 // the functions made available by digilib | |
| 12 var fn = null; | |
| 13 // affine geometry plugin | |
| 14 var geom = null; | |
| 15 | |
| 1057 | 16 var defaults = {}; |
| 1022 | 17 |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
18 var sliderOptions = { |
| 1022 | 19 rot : { |
| 20 label : "Rotation angle", | |
| 21 tooltip : "rotate image", | |
| 22 icon : "rotate.png", | |
| 1070 | 23 preview : false, |
| 1071 | 24 min : 0, |
| 25 max : 360, | |
|
1079
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
26 step : 5, |
| 1076 | 27 start : 0 |
| 1022 | 28 }, |
| 29 brgt : { | |
| 30 label : "Brightness", | |
| 31 tooltip : "set numeric value to be added", | |
| 32 icon : "brightness.png", | |
| 1070 | 33 preview : true, |
| 1071 | 34 min : -255, |
| 35 max : 255, | |
| 36 step : 10, | |
| 37 start : 0 | |
| 1022 | 38 }, |
| 39 cont : { | |
| 40 label : "Contrast", | |
| 41 tooltip : "set numeric value to be multiplied", | |
| 42 icon : "contrast.png", | |
| 1070 | 43 preview : true, |
| 1071 | 44 min : -4, |
| 45 max : 4, | |
| 46 step : 0.1, | |
| 47 start : 0 | |
| 1057 | 48 } |
| 1022 | 49 }; |
| 50 | |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
51 var primaryColors = ['r', 'g', 'b']; |
| 1070 | 52 var colorVals = { |
| 1057 | 53 r : { |
| 54 label : "red", | |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
55 color : "#800000", |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
56 a : 0, |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
57 m : 0 |
| 1057 | 58 }, |
| 59 g : { | |
| 60 label : "green", | |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
61 color : "#008000", |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
62 a : 0, |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
63 m : 0 |
| 1057 | 64 }, |
| 65 b : { | |
| 66 label : "blue", | |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
67 color : "#000080", |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
68 a : 0, |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
69 m : 0 |
| 1070 | 70 }, |
| 71 brgt : 0, | |
| 72 cont : 0 | |
|
1079
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
73 }; |
| 1070 | 74 |
| 1022 | 75 var actions = { |
| 1038 | 76 // shows brightness slider |
| 1070 | 77 sliderBrgt : function (data) { |
|
1079
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
78 // adjust min and max for contrast value (not nice to change sliderOptions) |
|
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
79 var maxBrgt = Math.max(Math.round(255 * Math.pow(2, data.settings.cont)), 255); |
|
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
80 sliderOptions.brgt.min = -maxBrgt; |
|
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
81 sliderOptions.brgt.max = maxBrgt; |
| 1070 | 82 var onChange = function($slider, val) { |
| 83 colorVals['brgt'] = parseFloat(val); | |
| 84 updatePreview($slider); | |
| 85 }; | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
86 var onSubmit = function(val) { |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
87 digilib.actions.brightness(data, val); |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
88 }; |
| 1070 | 89 singleSlider(data, 'brgt', onChange, onSubmit); |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
90 }, |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
91 |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
92 // shows contrast slider |
| 1070 | 93 sliderCont : function (data) { |
| 94 var onChange = function($slider, val) { | |
| 95 var m = Math.pow(2, parseFloat(val)); | |
| 96 colorVals['cont'] = val; | |
| 97 colorVals['brgt'] = 127 - (127 * m); | |
| 98 updatePreview($slider); | |
| 99 }; | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
100 var onSubmit = function(val) { |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
101 digilib.actions.contrast(data, val, true); |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
102 }; |
| 1070 | 103 singleSlider(data, 'cont', onChange, onSubmit); |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
104 }, |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
105 |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
106 // shows rotate slider |
| 1070 | 107 sliderRot : function (data) { |
| 108 var onChange = null; | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
109 var onSubmit = function(val) { |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
110 digilib.actions.rotate(data, val); |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
111 }; |
| 1070 | 112 singleSlider(data, 'rot', onChange, onSubmit); |
| 1057 | 113 }, |
| 1022 | 114 |
| 1057 | 115 // shows RGB sliders |
| 1070 | 116 sliderRGB : function (data) { |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
117 var onSubmit = function(m, a) { |
| 1057 | 118 digilib.actions.setRGB(data, m, a); |
| 119 }; | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
120 rgbSlider(data, onSubmit); |
| 1057 | 121 } |
| 1022 | 122 }; |
| 123 | |
| 1070 | 124 // update preview values for a given slider |
| 125 var updatePreview = function ($slider) { | |
| 126 if ($slider == null) return; | |
|
1066
555f6f0d6be5
prepare for making rgb indicator an independent widget
hertzhaft
parents:
1065
diff
changeset
|
127 var cls = $slider.data('cls'); |
| 1070 | 128 var $preview = $slider.data('preview'); |
|
1079
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
129 if ($preview == null) { |
|
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
130 console.error("slider updatePreview without preview!"); |
|
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
131 return; |
|
9c2abceb05c5
brightness min- and max- values scale with contrast settings (not yet for rgb).
robcast
parents:
1076
diff
changeset
|
132 } |
| 1070 | 133 var $td2 = $preview.find('table.'+cls+'preview td'); |
| 134 // account for current brgt/cont/rgbm/rgba values | |
| 135 var calcRGBValue = function (code, val) { | |
| 136 var c = colorVals[code]; | |
| 137 var cm = Math.pow(2, c.m) * val; | |
| 138 var colorVal = cm + c.a; | |
| 139 var cont = Math.pow(2, colorVals.cont) * colorVal; | |
| 140 var brgt = colorVals.brgt; | |
| 141 var resultVal = cont + brgt; | |
| 142 return Math.min(Math.max(Math.round(resultVal), 0), 255); | |
| 143 }; | |
| 144 // color one table cell according to index position | |
| 145 var setRGBValues = function (index) { | |
|
1066
555f6f0d6be5
prepare for making rgb indicator an independent widget
hertzhaft
parents:
1065
diff
changeset
|
146 var val = index * 32; |
| 1070 | 147 var r = calcRGBValue('r', val); |
| 148 var g = calcRGBValue('g', val); | |
| 149 var b = calcRGBValue('b', val); | |
|
1066
555f6f0d6be5
prepare for making rgb indicator an independent widget
hertzhaft
parents:
1065
diff
changeset
|
150 $(this).css('background-color', 'rgb('+r+','+g+','+b+')'); |
|
555f6f0d6be5
prepare for making rgb indicator an independent widget
hertzhaft
parents:
1065
diff
changeset
|
151 }; |
| 1070 | 152 $td2.each(setRGBValues); |
|
1066
555f6f0d6be5
prepare for making rgb indicator an independent widget
hertzhaft
parents:
1065
diff
changeset
|
153 }; |
|
555f6f0d6be5
prepare for making rgb indicator an independent widget
hertzhaft
parents:
1065
diff
changeset
|
154 |
| 1045 | 155 // assign button actions to sliders (rotate, brightness, contrast) |
| 156 var setButtonActions = function () { | |
| 157 if (fn.setButtonAction == null) { | |
| 158 console.debug('sliders: could not assign button actions. Maybe jquery.digilib.buttons.js was not loaded?'); | |
| 1022 | 159 return; |
| 160 } | |
| 1045 | 161 console.debug('sliders: assign new button actions. digilib:', digilib); |
| 1070 | 162 fn.setButtonAction('brgt', 'sliderBrgt'); |
| 163 fn.setButtonAction('cont', 'sliderCont'); | |
| 164 fn.setButtonAction('rot', 'sliderRot'); | |
| 165 fn.setButtonAction('rgb', 'sliderRGB'); | |
| 1022 | 166 }; |
| 167 | |
| 168 // plugin installation called by digilib on plugin object. | |
| 169 var install = function (plugin) { | |
| 170 digilib = plugin; | |
| 171 console.debug('installing sliders plugin. digilib:', digilib); | |
| 172 fn = digilib.fn; | |
| 173 // import geometry classes | |
| 174 geom = fn.geometry; | |
| 175 // add defaults, actions, buttons | |
| 176 $.extend(true, digilib.defaults, defaults); // make deep copy | |
| 177 $.extend(digilib.actions, actions); | |
| 1038 | 178 setButtonActions(digilib.buttons); |
| 1022 | 179 // export functions |
| 180 }; | |
| 181 | |
| 182 // plugin initialization | |
| 183 var init = function (data) { | |
| 184 console.debug('initialising sliders plugin. data:', data); | |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
185 var $data = $(data); |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
186 $data.bind('update', handleUpdate); |
| 1022 | 187 }; |
| 188 | |
| 1070 | 189 // get brgt/cont/rgba/rgbm params (brightness/contrast/color) |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
190 var handleUpdate = function (evt) { |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
191 console.debug("sliders: handleUpdate"); |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
192 var data = this; |
| 1070 | 193 var settings = data.settings; |
| 194 colorVals.brgt = parseFloat(settings.brgt) || 0; | |
| 195 colorVals.cont = parseFloat(settings.cont) || 0; | |
| 196 setRGBcolorVals(data, 'a'); | |
| 197 setRGBcolorVals(data, 'm'); | |
| 198 var sliderSelector = '#'+ settings.cssPrefix + 'slider'; | |
| 199 var $slider = fn.find(data, sliderSelector); | |
| 200 fn.centerOnScreen(data, $slider); | |
| 201 updatePreview($slider); | |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
202 }; |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
203 |
| 1070 | 204 // read rgb m/a parameters and set start values for sliders |
| 205 var setRGBcolorVals = function (data, code) { | |
| 1065 | 206 var colorparts = data.settings['rgb'+code] || '0/0/0'; |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
207 var values = colorparts.split("/"); |
| 1070 | 208 colorVals.r[code] = parseFloat(values[0]) || 0; |
| 209 colorVals.g[code] = parseFloat(values[1]) || 0; | |
| 210 colorVals.b[code] = parseFloat(values[2]) || 0; | |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
211 }; |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
212 |
| 1057 | 213 /** creates a div with a form, setup events and callback |
| 1022 | 214 */ |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
215 var setupFormDiv = function (data, $content, cssSuffix, onSubmit) { |
| 1057 | 216 var cssPrefix = data.settings.cssPrefix; |
| 217 var cls = cssPrefix + cssSuffix; | |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
218 var tiny = cssPrefix + 'tinyslider'; |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
219 var $elem = data.$elem; |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
220 var sliderSelector = '#'+cssPrefix+'slider'; |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
221 if (fn.isOnScreen(data, sliderSelector)) return; // already onscreen |
| 1026 | 222 var html = '\ |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
223 <div id="'+cssPrefix+'slider" class="'+cls+'">\ |
| 1057 | 224 <form class="'+cls+'">\ |
| 225 <input class="'+cls+'cancel" type="button" value="Cancel"/>\ | |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
226 <input class="'+cls+'reset" type="button" value="Reset"/>\ |
| 1071 | 227 <input class="'+cls+'default" type="button" value="Default"/>\ |
| 1057 | 228 <input type="submit" name="sub" value="Ok"/>\ |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
229 </form>\ |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
230 </div>'; |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
231 $div = $(html).appendTo($elem); |
| 1057 | 232 var $form = $div.find('form'); |
| 233 $form.prepend($content); | |
| 234 // handle submit | |
| 235 $form.on('submit', function () { | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
236 onSubmit(); |
| 1057 | 237 fn.withdraw($div); |
| 238 return false; | |
| 239 }); | |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
240 // handle reset |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
241 $form.find('.'+cls+'reset').on('click', function () { |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
242 var sliders = $form.find('div.'+tiny); |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
243 sliders.each(function () { |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
244 var reset = $(this).data('reset'); |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
245 reset(); |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
246 }); |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
247 }); |
| 1071 | 248 // handle default |
| 249 $form.find('.'+cls+'default').on('click', function () { | |
| 250 var sliders = $form.find('div.'+tiny); | |
| 251 sliders.each(function () { | |
| 252 var reset = $(this).data('default'); | |
| 253 reset(); | |
| 254 }); | |
| 255 }); | |
| 1057 | 256 // handle cancel |
| 257 $form.find('.'+cls+'cancel').on('click', function () { | |
| 258 fn.withdraw($div); | |
| 259 }); | |
| 260 // show div | |
| 261 $div.fadeIn(); | |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
262 // fix non-HTML5 slider |
| 1057 | 263 var $range = $form.find('input.'+tiny+'range'); |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
264 var HTML5 = $range.prop('type') === 'range'; |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
265 if (!HTML5) { |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
266 console.debug('fix input type=range'); |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
267 $range.range({change: function (val) { |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
268 $range.trigger('change'); |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
269 }}); |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
270 } |
| 1057 | 271 fn.centerOnScreen(data, $div); |
| 272 return $div; | |
| 273 }; | |
| 274 | |
| 1070 | 275 /** creates a TinyRange slider |
| 1057 | 276 */ |
| 1063 | 277 var tinySlider = function (data, paramname, startvalue) { |
| 1057 | 278 var $elem = data.$elem; |
| 279 var opts = sliderOptions[paramname]; | |
| 280 var cssPrefix = data.settings.cssPrefix; | |
| 281 var cls = cssPrefix + 'tinyslider'; | |
| 282 var html = '\ | |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
283 <div class="'+cls+'">\ |
| 1057 | 284 <span>'+opts.label+'</span>\ |
| 1063 | 285 <input type="range" class="'+cls+'range" name="'+paramname+'" step="'+opts.step+'" min="'+opts.min+'" max="'+opts.max+'" value="'+startvalue+'"/>\ |
| 286 <input type="text" class="'+cls+'text" name="'+paramname+'" size="4" value="'+startvalue+'"/>\ | |
| 1057 | 287 </div>'; |
| 288 var $slider = $(html); | |
| 289 var $range = $slider.find('input.'+cls+'range'); | |
| 290 var $text = $slider.find('input.'+cls+'text'); | |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
291 var rangeChange = function () { |
|
1058
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
292 // crop floating point imprecision |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
293 var val = parseFloat($range.val()).toFixed(4); |
|
95d28c6ad018
rgb slider now gets/sets values, plus some refactoring
hertzhaft
parents:
1057
diff
changeset
|
294 $text.val(parseFloat(val)); |
| 1063 | 295 var update = $slider.data('update'); |
| 296 if ($.isFunction(update)) { | |
| 297 update($slider, val); | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
298 } |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
299 }; |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
300 var textChange = function () { |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
301 var val = $text.val(); |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
302 $range.val(val); |
| 1057 | 303 // val doesn't change the slider handle position in Tinyrange |
| 304 // can't use a jQuery "valHook" here because input type is reported as "text" (???) | |
| 305 var HTML5 = $range.prop('type') === 'range'; | |
| 1044 | 306 if (!HTML5) { |
| 307 $range.range('set', val); | |
| 308 } | |
| 1063 | 309 var update = $slider.data('update'); |
| 310 if ($.isFunction(update)) { | |
| 311 update($slider, val); | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
312 } |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
313 }; |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
314 var reset = function () { |
| 1063 | 315 $text.val(startvalue); |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
316 textChange(); |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
317 }; |
| 1071 | 318 var resetdefault = function () { |
| 319 $text.val(opts.start); | |
| 320 textChange(); | |
| 321 }; | |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
322 // connect slider and input |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
323 $range.on('change', rangeChange); |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
324 $text.on('change', textChange); |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
325 $slider.data({ |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
326 '$text' : $text, |
|
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
327 '$range' : $range, |
| 1063 | 328 'reset' : reset, |
| 1071 | 329 'default' : resetdefault, |
| 1063 | 330 'update' : null |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
331 }); |
| 1057 | 332 return $slider; |
| 333 }; | |
| 334 | |
| 335 /** creates a single TinyRangeSlider for param "paramname", | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
336 the new value is passed to the "onSubmit" function. |
| 1057 | 337 */ |
| 1070 | 338 var singleSlider = function (data, paramname, onChange, onSubmit) { |
| 1063 | 339 var classname = 'singleslider'; |
| 340 var $div = $('<div/>'); | |
| 341 var opts = sliderOptions[paramname]; | |
| 342 var startvalue = data.settings[paramname] || opts.start; | |
| 343 var $slider = tinySlider(data, paramname, startvalue); | |
| 1057 | 344 var getValue = function () { |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
345 // get the new value and do something with it |
| 1057 | 346 var val = $slider.data('$text').val(); |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
347 onSubmit(val); |
| 1057 | 348 }; |
| 1063 | 349 $div.append($slider); |
| 350 setupFormDiv(data, $div, classname, getValue); | |
| 1070 | 351 var hasPreview = opts.preview; |
| 352 if (hasPreview) { | |
| 1063 | 353 var cls = data.settings.cssPrefix + classname; |
| 1070 | 354 var $preview = preview(cls); |
| 355 $div.append($preview); | |
| 1063 | 356 $slider.data({ |
| 357 'cls' : cls, | |
| 1070 | 358 'preview' : $preview, |
| 359 'update' : onChange | |
| 1063 | 360 }); |
| 1070 | 361 onChange($slider, startvalue); |
| 1063 | 362 } |
| 1057 | 363 }; |
| 364 | |
| 365 /** creates a compound RGB slider | |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
366 the new values are passed to the "onSubmit" function. |
| 1057 | 367 */ |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
368 var rgbSlider = function (data, onSubmit) { |
|
1059
c7fd2f239953
rgb slider: color labels, first step to color indicator
hertzhaft
parents:
1058
diff
changeset
|
369 var css = data.settings.cssPrefix; |
|
c7fd2f239953
rgb slider: color labels, first step to color indicator
hertzhaft
parents:
1058
diff
changeset
|
370 var cls = css + 'rgbslider'; |
| 1063 | 371 var $div = $('<div/>'); |
| 372 var $table = $('<table class="'+cls+'" />'); | |
| 1070 | 373 var $preview = preview(cls); |
| 1063 | 374 $div.append($table); |
| 1070 | 375 $div.append($preview); |
| 376 // create slider rows for the 3 primary colors | |
| 1063 | 377 var insertTableRow = function(index, value) { |
| 1070 | 378 var color = colorVals[value]; |
| 1063 | 379 // start values are set in "handleSetup" |
| 380 var $tr = $('<tr/>').appendTo($table); | |
| 381 var html = '\ | |
| 382 <td class="'+css+'color '+css+value+'">\ | |
| 383 <div>'+color.label+'</div>\ | |
| 384 </td>'; | |
| 385 $(html).appendTo($tr); | |
| 386 var $brgt = tinySlider(data, 'brgt', color.a); | |
| 387 var $cont = tinySlider(data, 'cont', color.m); | |
| 388 $table.data(value+'a', $brgt.data('$text')); | |
| 389 $table.data(value+'m', $cont.data('$text')); | |
| 390 $('<td class="'+css+'rgb"/>').append($brgt).appendTo($tr); | |
| 391 $('<td class="'+css+'rgb"/>').append($cont).appendTo($tr); | |
| 392 }; | |
| 1070 | 393 var onChange = function ($slider) { |
| 394 // show effects of color brightness/contrast on a grey scale | |
| 395 var input = $table.data(); | |
| 396 $.each(primaryColors, function (index, value) { | |
| 397 colorVals[value].a = parseFloat(input[value+'a'].val()); | |
| 398 colorVals[value].m = parseFloat(input[value+'m'].val()); | |
| 399 }); | |
| 400 updatePreview($slider); | |
| 401 }; | |
| 402 var submitSliderValues = function () { | |
| 1063 | 403 // get values from sliders |
| 404 var input = $table.data(); | |
| 405 var rgba = input['ra'].val() + '/' + input['ga'].val() + '/' + input['ba'].val(); | |
| 406 var rgbm = input['rm'].val() + '/' + input['gm'].val() + '/' + input['bm'].val(); | |
| 407 onSubmit(rgbm, rgba); | |
| 408 }; | |
| 409 $.each(primaryColors, insertTableRow); | |
| 1070 | 410 setupFormDiv(data, $div, 'rgbslider', submitSliderValues); |
| 411 // update callback is made known to each slider | |
| 412 var $sliders = $div.find('div.'+css+'tinyslider'); | |
| 413 $sliders.data({ | |
| 414 'cls' : cls, | |
| 415 'preview' : $preview, | |
| 416 'update' : onChange | |
| 417 }); | |
| 418 onChange($sliders); | |
| 1063 | 419 }; |
| 420 | |
| 1070 | 421 /** creates a new preview div with 2 x 9 cells in scaled grey values |
| 1063 | 422 */ |
| 1070 | 423 var preview = function (cls) { |
| 1063 | 424 var td = new Array(10).join('<td/>'); |
| 425 var html = '\ | |
| 1070 | 426 <div class="'+cls+'preview">\ |
| 1063 | 427 <table class="'+cls+'grey">\ |
| 428 <tr>'+td+'</tr>\ | |
| 429 </table>\ | |
| 1070 | 430 <table class="'+cls+'preview">\ |
| 1063 | 431 <tr>'+td+'</tr>\ |
| 432 </table>\ | |
| 433 </div>'; | |
| 434 var $div = $(html); | |
| 1070 | 435 // creates a table with a series of scaled grey values |
|
1061
4f5c5c578aa4
rgb slider: color indicator functional, reset works only partially
hertzhaft
parents:
1060
diff
changeset
|
436 var setGreyScale = function (index) { |
|
1059
c7fd2f239953
rgb slider: color labels, first step to color indicator
hertzhaft
parents:
1058
diff
changeset
|
437 var val = index * 32; |
|
c7fd2f239953
rgb slider: color labels, first step to color indicator
hertzhaft
parents:
1058
diff
changeset
|
438 $(this).css('background-color', 'rgb('+val+','+val+','+val+')'); |
|
c7fd2f239953
rgb slider: color labels, first step to color indicator
hertzhaft
parents:
1058
diff
changeset
|
439 }; |
|
1062
41991d1598f1
rgb slider: reset now functional, minor refactoring
hertzhaft
parents:
1061
diff
changeset
|
440 $div.find('table.'+cls+'grey td').each(setGreyScale); |
| 1063 | 441 return $div; |
|
1042
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
442 }; |
|
2c5a48a624c5
TinyRange sliders now work for brgt,cont,rot (not perfect)
hertzhaft
parents:
1039
diff
changeset
|
443 |
| 1022 | 444 // plugin object with name and init |
| 445 // shared objects filled by digilib on registration | |
| 446 var plugin = { | |
| 447 name : 'sliders', | |
| 448 install : install, | |
| 449 init : init, | |
| 450 buttons : {}, | |
| 451 actions : {}, | |
| 452 fn : {}, | |
| 453 plugins : {} | |
| 454 }; | |
| 455 | |
| 456 if ($.fn.digilib == null) { | |
| 457 $.error("jquery.digilib.sliders must be loaded after jquery.digilib!"); | |
| 458 } else { | |
| 459 $.fn.digilib('plugin', plugin); | |
| 460 } | |
| 461 })(jQuery); |