javascript - Replace Vote Count with a Percentage System for Jquery upVote -
javascript - Replace Vote Count with a Percentage System for Jquery upVote -
i want replace vote counts of 0 default, 1 upvote, , -1 downwards vote not rated default, 100% upvote, , 0% downwards vote.
note: need accomplish without going server side, frontside solution involving jquery, javascript, html, , css only.
here's fiddle: http://jsfiddle.net/3ec67gne/3/
html:
<div class="examples" id="examples"></div> <div id="templates" class="hidden"> <div class="upvote"> <a class="upvote" title="this stuff. vote up! (click 1 time again undo)"></a> <span class="count" title="total number of votes"></span> <a class="downvote" title="this not useful. vote down. (click 1 time again undo)"></a> <div class="examples" id="examples"></div> <div id="templates" class="hidden"> <div class="upvote"> <a class="upvote" title="this stuff. vote up! (click 1 time again undo)"></a> <span class="count" title="total number of votes"></span> <a class="downvote" title="this not useful. vote down. (click 1 time again undo)"></a> javascript:
function gen(target, cssclass, params) { var obj = $('#templates .upvote').clone(); obj.addclass(cssclass); $(target).append(obj); homecoming obj.upvote(params); } $(function() { function gen_examples(params) { gen('#examples', '', params); } function gen_unix(params) { gen('#unix', 'upvote-unix', params); } function gen_programmers(params) { gen('#programmers', 'upvote-programmers', params); } function gen_serverfault(params) { gen('#serverfault', 'upvote-serverfault', params); } var functions = [gen_examples, gen_unix, gen_programmers, gen_serverfault]; (var in functions) { var fun = functions[i]; fun(); } }); ;(function($) { "use strict"; var namespace = 'upvote'; var dot_namespace = '.' + namespace; var upvote_css = 'upvote'; var dot_upvote_css = '.' + upvote_css; var upvoted_css = 'upvote-on'; var dot_upvoted_css = '.' + upvoted_css; var downvote_css = 'downvote'; var dot_downvote_css = '.' + downvote_css; var downvoted_css = 'downvote-on'; var dot_downvoted_css = '.' + downvoted_css; var star_css = 'star'; var dot_star_css = '.' + star_css; var starred_css = 'star-on'; var dot_starred_css = '.' + starred_css; var count_css = 'count'; var dot_count_css = '.' + count_css; var enabled_css = 'upvote-enabled'; function init(dom, options) { homecoming dom.each(function() { var jqdom = $(this); methods.destroy(jqdom); var count = parseint(jqdom.find(dot_count_css).text(), 10); count = isnan(count) ? 0 : count; var initial = { id: jqdom.attr('data-id'), count: count, upvoted: jqdom.find(dot_upvoted_css).size(), downvoted: jqdom.find(dot_downvoted_css).size(), starred: jqdom.find(dot_starred_css).size(), callback: function() {} }; var info = $.extend(initial, options); if (data.upvoted && data.downvoted) { data.downvoted = false; } jqdom.data(namespace, data); render(jqdom); setupui(jqdom); }); } function setupui(jqdom) { jqdom.find(dot_upvote_css).addclass(enabled_css); jqdom.find(dot_downvote_css).addclass(enabled_css); jqdom.find(dot_star_css).addclass(enabled_css); jqdom.find(dot_upvote_css).on('click.' + namespace, function() { jqdom.upvote('upvote'); }); jqdom.find('.downvote').on('click.' + namespace, function() { jqdom.upvote('downvote'); }); jqdom.find('.star').on('click.' + namespace, function() { jqdom.upvote('star'); }); } function _click_upvote(jqdom) { jqdom.find(dot_upvote_css).click(); } function _click_downvote(jqdom) { jqdom.find(dot_downvote_css).click(); } function _click_star(jqdom) { jqdom.find(dot_star_css).click(); } function render(jqdom) { var info = jqdom.data(namespace); jqdom.find(dot_count_css).text(data.count); if (data.upvoted) { jqdom.find(dot_upvote_css).addclass(upvoted_css); jqdom.find(dot_downvote_css).removeclass(downvoted_css); } else if (data.downvoted) { jqdom.find(dot_upvote_css).removeclass(upvoted_css); jqdom.find(dot_downvote_css).addclass(downvoted_css); } else { jqdom.find(dot_upvote_css).removeclass(upvoted_css); jqdom.find(dot_downvote_css).removeclass(downvoted_css); } if (data.starred) { jqdom.find(dot_star_css).addclass(starred_css); } else { jqdom.find(dot_star_css).removeclass(starred_css); } } function callback(jqdom) { var info = jqdom.data(namespace); data.callback(data); } function upvote(jqdom) { var info = jqdom.data(namespace); if (data.upvoted) { data.upvoted = false; --data.count; } else { data.upvoted = true; ++data.count; if (data.downvoted) { data.downvoted = false; ++data.count; } } render(jqdom); callback(jqdom); homecoming jqdom; } function downvote(jqdom) { var info = jqdom.data(namespace); if (data.downvoted) { data.downvoted = false; ++data.count; } else { data.downvoted = true; --data.count; if (data.upvoted) { data.upvoted = false; --data.count; } } render(jqdom); callback(jqdom); homecoming jqdom; } function star(jqdom) { var info = jqdom.data(namespace); data.starred = ! data.starred; render(jqdom); callback(jqdom); homecoming jqdom; } function count(jqdom) { homecoming jqdom.data(namespace).count; } function upvoted(jqdom) { homecoming jqdom.data(namespace).upvoted; } function downvoted(jqdom) { homecoming jqdom.data(namespace).downvoted; } function starred(jqdom) { homecoming jqdom.data(namespace).starred; } var methods = { init: init, count: count, upvote: upvote, upvoted: upvoted, downvote: downvote, downvoted: downvoted, starred: starred, star: star, _click_upvote: _click_upvote, _click_downvote: _click_downvote, _click_star: _click_star, destroy: destroy }; function destroy(jqdom) { homecoming jqdom.each(function() { $(window).unbind(dot_namespace); $(this).removeclass(enabled_css); $(this).removedata(namespace); }); } $.fn.upvote = function(method) { var args; if (methods[method]) { args = array.prototype.slice.call(arguments, 1); args.unshift(this); homecoming methods[method].apply(this, args); } if (typeof method === 'object' || ! method) { args = array.prototype.slice.call(arguments); args.unshift(this); homecoming methods.init.apply(this, args); } $.error('method ' + method + ' not exist on jquery.upvote'); }; })(jquery); and css:
.hidden { display: none; } .examples { overflow: auto; } .examples div.upvote { float: left; } div.upvote { text-align: center; } div.upvote a.upvote-enabled { cursor: pointer; } div.upvote { color: transparent; background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-stackoverflow.png?v=1'); background-repeat: no-repeat; overflow: hidden; display: block; margin: 0 auto; width: 41px; height: 25px; } div.upvote span.count { display: block; font-size: 24px; font-family: arial, liberation, sans, dejavu sans, sans-serif; color: #555; text-align: center; line-height: 1; } div.upvote a.upvote { background-position: 0px -265px; } div.upvote a.upvote.upvote-on { background-position: 0px -230px; } div.upvote a.downvote { background-position: 0px -300px; } div.upvote a.downvote.downvote-on { background-position: 0px -330px; } div.upvote-serverfault { background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-serverfault.png?v=1'); } div.upvote-meta-stackoverflow { background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-meta-stackoverflow.png?v=1'); } div.upvote-superuser { background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-superuser.png?v=1'); } div.upvote-unix { background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-unix.png?v=1'); width: 42px; height: 27px; } div.upvote-unix a.upvote { background-position: 0px -237px; } div.upvote-unix a.upvote.upvote-on { background-position: 0px -198px; } div.upvote-unix a.downvote { background-position: 0px -281px; } div.upvote-unix a.downvote.downvote-on { background-position: 0px -319px; } div.upvote-unix a.star { width: 42px; height: 30px; background-position: 0px -126px; } div.upvote-unix a.star.star-on { background-position: 0px -164px; } div.upvote-unix span.count { color: #333; line-height: 15px; padding: 9px 0; font-family: "dejavu sans mono","bitstream vera sans mono","courier new",courier,consolas,"andale mono wt","andale mono","lucida console","lucida sans typewriter",monospace; text-shadow: 1px 1px 0 #ffffff; font-weight: bold; margin: 0; border: 0; vertical-align: baseline; } div.upvote-programmers { background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); width: 42px; height: 20px; } div.upvote-programmers a.upvote { background-position: 5px -248px; } div.upvote-programmers a.upvote.upvote-on { background-position: 5px -211px; } div.upvote-programmers a.downvote { background-position: 5px -282px; } div.upvote-programmers a.downvote.downvote-on { background-position: 5px -320px; } div.upvote-programmers a.star { width: 42px; height: 30px; background-position: 6px -128px; } div.upvote-programmers a.star.star-on { background-position: 6px -166px; } div.upvote-programmers span.count { color: #333; line-height: 15px; padding: 5px 0 7px; font-size: 20px; font-weight: bold; font-family: tahoma,geneva,arial,sans-serif; }
you can solve problem add together array!
function render(jqdom) { ... var info = jqdom.data(namespace); // values votes var votes = ["100%", "not rated", "0%"]; jqdom.find(dot_count_css).text(votes[data.count+1]); if (data.upvoted) { ... } i have increased +1 in order avoid error handling array!
javascript jquery
Comments
Post a Comment