From: yomguy Date: Mon, 17 Dec 2012 10:47:40 +0000 (+0100) Subject: add dynamic color to each progessbar X-Git-Tag: 0.9-probarreau~246 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=142f18a882a50e2ae1224521f5d9819cf592110f;p=teleforma.git add dynamic color to each progessbar --- diff --git a/teleforma/static/teleforma/css/teleforma.css b/teleforma/static/teleforma/css/teleforma.css index 39bcbce9..99885692 100644 --- a/teleforma/static/teleforma/css/teleforma.css +++ b/teleforma/static/teleforma/css/teleforma.css @@ -1764,6 +1764,7 @@ form .exceed{ border-radius: 8px 0px 8px 8px; } +/* #progressbar-general .ui-progressbar-value { background-color: #4f628a; } @@ -1774,11 +1775,9 @@ form .exceed{ } -#progressbar-answer .ui-progressbar-value { - background-color: #bb0000; - } .ui-progressbar.beginning .ui-progressbar-value { background: red; } .ui-progressbar.middle .ui-progressbar-value { background: yellow; } .ui-progressbar.end .ui-progressbar-value { background: green; } +*/ \ No newline at end of file diff --git a/teleforma/static/teleforma/js/application.js b/teleforma/static/teleforma/js/application.js index dc35f927..4187e27a 100644 --- a/teleforma/static/teleforma/js/application.js +++ b/teleforma/static/teleforma/js/application.js @@ -25,3 +25,6 @@ * Requires jQuery */ + +var rainbow = new Rainbow(); +rainbow.setSpectrum('#bb0000', '#e65911', '#f3ad17', 'green'); diff --git a/teleforma/static/teleforma/js/charCount.js b/teleforma/static/teleforma/js/charCount.js index 5307208c..fd415dd2 100644 --- a/teleforma/static/teleforma/js/charCount.js +++ b/teleforma/static/teleforma/js/charCount.js @@ -13,6 +13,7 @@ * */ + (function($) { $.fn.charCount = function(options){ @@ -46,8 +47,10 @@ if ( percent >= 100 ) { percent = 100; } + var color = '#' + rainbow.colourAt(percent); $('#answer-progress').html(percent); $('#progressbar-answer').progressbar({ value: percent }); + $('#progressbar-answer div').css({"background": color}); }; this.each(function() { diff --git a/teleforma/static/teleforma/js/rainbowvis.js b/teleforma/static/teleforma/js/rainbowvis.js new file mode 100755 index 00000000..a0e311cd --- /dev/null +++ b/teleforma/static/teleforma/js/rainbowvis.js @@ -0,0 +1,170 @@ +/* +RainbowVis-JS +Released under MIT License +*/ + +function Rainbow() +{ + var gradients = null; + var minNum = 0; + var maxNum = 100; + var colours = ['ff0000', 'ffff00', '00ff00', '0000ff']; + setColours(colours); + + function setColours (spectrum) + { + if (spectrum.length < 2) { + throw new Error('Rainbow must have two or more colours.'); + } else { + var increment = (maxNum - minNum)/(spectrum.length - 1); + var firstGradient = new ColourGradient(); + firstGradient.setGradient(spectrum[0], spectrum[1]); + firstGradient.setNumberRange(minNum, minNum + increment); + gradients = [ firstGradient ]; + + for (var i = 1; i < spectrum.length - 1; i++) { + var colourGradient = new ColourGradient(); + colourGradient.setGradient(spectrum[i], spectrum[i + 1]); + colourGradient.setNumberRange(minNum + increment * i, minNum + increment * (i + 1)); + gradients[i] = colourGradient; + } + + colours = spectrum; + } + } + this.setColors = this.setColours; + + this.setSpectrum = function () + { + setColours(arguments); + } + + this.setSpectrumByArray = function (array) + { + setColours(array); + } + + this.colourAt = function (number) + { + if (isNaN(number)) { + throw new TypeError(number + ' is not a number'); + } else if (gradients.length === 1) { + return gradients[0].colourAt(number); + } else { + var segment = (maxNum - minNum)/(gradients.length); + var index = Math.min(Math.floor((Math.max(number, minNum) - minNum)/segment), gradients.length - 1); + return gradients[index].colourAt(number); + } + } + this.colorAt = this.colourAt; + + this.setNumberRange = function (minNumber, maxNumber) + { + if (maxNumber > minNumber) { + minNum = minNumber; + maxNum = maxNumber; + setColours(colours); + } else { + throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')'); + } + } +} + +function ColourGradient() +{ + var startColour = 'ff0000'; + var endColour = '0000ff'; + var minNum = 0; + var maxNum = 100; + + this.setGradient = function (colourStart, colourEnd) + { + startColour = getHexColour(colourStart); + endColour = getHexColour(colourEnd); + } + + this.setNumberRange = function (minNumber, maxNumber) + { + if (maxNumber > minNumber) { + minNum = minNumber; + maxNum = maxNumber; + } else { + throw new RangeError('maxNumber (' + maxNumber + ') is not greater than minNumber (' + minNumber + ')'); + } + } + + this.colourAt = function (number) + { + return calcHex(number, startColour.substring(0,2), endColour.substring(0,2)) + + calcHex(number, startColour.substring(2,4), endColour.substring(2,4)) + + calcHex(number, startColour.substring(4,6), endColour.substring(4,6)); + } + + function calcHex(number, channelStart_Base16, channelEnd_Base16) + { + var num = number; + if (num < minNum) { + num = minNum; + } + if (num > maxNum) { + num = maxNum; + } + var numRange = maxNum - minNum; + var cStart_Base10 = parseInt(channelStart_Base16, 16); + var cEnd_Base10 = parseInt(channelEnd_Base16, 16); + var cPerUnit = (cEnd_Base10 - cStart_Base10)/numRange; + var c_Base10 = Math.round(cPerUnit * (num - minNum) + cStart_Base10); + return formatHex(c_Base10.toString(16)); + } + + formatHex = function (hex) + { + if (hex.length === 1) { + return '0' + hex; + } else { + return hex; + } + } + + function isHexColour(string) + { + var regex = /^#?[0-9a-fA-F]{6}$/i; + return regex.test(string); + } + + function getHexColour(string) + { + if (isHexColour(string)) { + return string.substring(string.length - 6, string.length); + } else { + var colourNames = + [ + ['red', 'ff0000'], + ['lime', '00ff00'], + ['blue', '0000ff'], + ['yellow', 'ffff00'], + ['orange', 'ff8000'], + ['aqua', '00ffff'], + ['fuchsia', 'ff00ff'], + ['white', 'ffffff'], + ['black', '000000'], + ['gray', '808080'], + ['grey', '808080'], + ['silver', 'c0c0c0'], + ['maroon', '800000'], + ['olive', '808000'], + ['green', '008000'], + ['teal', '008080'], + ['navy', '000080'], + ['purple', '800080'] + ]; + for (var i = 0; i < colourNames.length; i++) { + if (string.toLowerCase() === colourNames[i][0]) { + return colourNames[i][1]; + } + } + throw new Error(string + ' is not a valid colour.'); + } + } +} + diff --git a/teleforma/templates/teleforma/inc/question_list.html b/teleforma/templates/teleforma/inc/question_list.html index d1fea1ef..96fd3841 100644 --- a/teleforma/templates/teleforma/inc/question_list.html +++ b/teleforma/templates/teleforma/inc/question_list.html @@ -12,7 +12,7 @@ {% for question in questions.all %} {{ question.title }} n°{{ question.rank }} - {% if question|submitted:user %}{% trans "submitted on" %}{% else %}{% trans "saved on" %}{% endif %} {{ question|submitted:user }} + {% if question|submitted:user %}{% trans "submitted on" %} {{ question|submitted:user }}{% elif question|saved:user %}{% trans "saved on" %} {{ question|saved:user }}{% endif %} {% if question|submitted:user %}{% endif %} {% endfor %} diff --git a/teleforma/templates/teleforma/seminar_detail.html b/teleforma/templates/teleforma/seminar_detail.html index ffcb2271..c9a9289e 100644 --- a/teleforma/templates/teleforma/seminar_detail.html +++ b/teleforma/templates/teleforma/seminar_detail.html @@ -10,6 +10,8 @@ $(function() { $( "#progressbar-general" ).progressbar({ value: {{ total_progress }} }); + var color = '#' + rainbow.colourAt({{total_progress}}); + $('#progressbar-general div').css({"background": color}); }); diff --git a/teleforma/templates/teleforma/seminars.html b/teleforma/templates/teleforma/seminars.html index cf7ce4ec..e5518b19 100644 --- a/teleforma/templates/teleforma/seminars.html +++ b/teleforma/templates/teleforma/seminars.html @@ -18,9 +18,9 @@ $(function () { {% block infra_javascript %} {% endblock infra_javascript %} diff --git a/teleforma/templates/telemeta/base.html b/teleforma/templates/telemeta/base.html index ed4a869d..c06b3539 100644 --- a/teleforma/templates/telemeta/base.html +++ b/teleforma/templates/telemeta/base.html @@ -41,13 +41,15 @@ {% block javascript %} - - - - + + + + + + {% if user.is_authenticated %} diff --git a/teleforma/templatetags/teleforma_tags.py b/teleforma/templatetags/teleforma_tags.py index a27b1296..00f298c6 100644 --- a/teleforma/templatetags/teleforma_tags.py +++ b/teleforma/templatetags/teleforma_tags.py @@ -225,10 +225,11 @@ def submitted(question, user): return False @register.filter -def submitted(question, user): - answers = Answer.objects.filter(question=question, user=user) +def saved(question, user): + answers = Answer.objects.filter(question=question, user=user, status=2) if answers: return answers[0].date_submitted else: return '' + \ No newline at end of file