# HG changeset patch # User hertzhaft # Date 1333200440 -7200 # Node ID c7fd2f23995362c0a72de38735c17d42017ba61f # Parent 95d28c6ad0188b6a8e6b12fe40770c0977842010 rgb slider: color labels, first step to color indicator diff -r 95d28c6ad018 -r c7fd2f239953 webapp/src/main/webapp/jquery/jquery.digilib.css --- a/webapp/src/main/webapp/jquery/jquery.digilib.css Sat Mar 31 12:10:34 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Sat Mar 31 15:27:20 2012 +0200 @@ -178,7 +178,34 @@ border: 2px solid lightcyan; background-color: lightgrey; width: 400px; - padding: 10px; + padding: 10px; + position: absolute; + top: 0px; + } + +div.dl-digilib div.dl-rgbslidergrey span, +div.dl-digilib div.dl-rgbsliderindicator span { + padding: 0px 20px; + } + +div.dl-digilib td.dl-color div { + color: lightcyan; + border: 2px solid lightcyan; + text-align: center; + padding: 20px 0px; + margin: 10px; + } + +div.dl-digilib td.dl-r div { + background-color: #800000; + } + +div.dl-digilib td.dl-g div { + background-color: #008000; + } + +div.dl-digilib td.dl-b div { + background-color: #000080; } div.dl-digilib div.dl-singleslider { @@ -186,7 +213,9 @@ border: 2px solid lightcyan; background-color: lightgrey; width: 300px; - padding: 10px; + padding: 10px; + position: absolute; + top: 0px; } div.dl-digilib div.dl-slider { @@ -262,9 +291,9 @@ width: 100%; } -div.dl-digilib table.dl-rgbslider td.rgb { +div.dl-digilib table.dl-rgbslider td.dl-rgb { width: 40%; - padding: 10px; + padding: 6px; border: 2px solid lightcyan; } diff -r 95d28c6ad018 -r c7fd2f239953 webapp/src/main/webapp/jquery/jquery.digilib.sliders.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Sat Mar 31 12:10:34 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Sat Mar 31 15:27:20 2012 +0200 @@ -140,8 +140,8 @@ var data = this; setStartValues(data, 'a'); setStartValues(data, 'm'); - var idSlider = '#'+ data.settings.cssPrefix + 'slider'; - fn.centerOnScreen(data, fn.find(data, idSlider)); + var sliderSelector = '#'+ data.settings.cssPrefix + 'slider'; + fn.centerOnScreen(data, fn.find(data, sliderSelector)); }; // set m/a start values for sliders @@ -251,21 +251,43 @@ the new values are passed to the "callback" function. */ var rgbSlider = function (data, callback) { - var cls = data.settings.cssPrefix + 'rgbslider'; - var $table = $(''); + var css = data.settings.cssPrefix; + var cls = css + 'rgbslider'; + var html = '\ +
\ +
\ +
\ + \ +
\ +
\ + \ +
\ + '; + var $div = $(html); + var $table = $div.find('table'); var setupTableRow = function(index, value) { var color = rgb[value]; // start values are set in "handleSetup" + var $tr = $('').appendTo($table); + var html = '\ + '; + $(html).appendTo($tr); var $brgt = tinySlider(data, 'brgt', color.a); var $cont = tinySlider(data, 'cont', color.m); $table.data(value+'a', $brgt.data('$text')); $table.data(value+'m', $cont.data('$text')); - var $tr = $('').appendTo($table); - var $td = $('').appendTo($tr); - var $td = $('
\ +
'+color.label+'
\ +
'+color.label+'').append($brgt).appendTo($tr); - var $td = $('').append($cont).appendTo($tr); + $('').append($brgt).appendTo($tr); + $('').append($cont).appendTo($tr); } $.each(primaryColors, setupTableRow); + var greyValues = function (index) { + var val = index * 32; + $(this).css('background-color', 'rgb('+val+','+val+','+val+')'); + }; + $div.find('div.'+cls+'grey span').each(greyValues); + $div.find('div.'+cls+'indicator span').each(greyValues); var getValues = function () { // get values from sliders var input = $table.data(); @@ -273,7 +295,7 @@ var rgbm = input['rm'].val() + '/' + input['gm'].val() + '/' + input['bm'].val(); callback(rgbm, rgba); }; - setupFormDiv(data, $table, 'rgbslider', getValues); + setupFormDiv(data, $div, 'rgbslider', getValues); }; // plugin object with name and init