Extend taggable-mixin to support different Tag models.
Usage is pretty simple. Tag model is default in Taggable constructor but you
can call it with different model like GHOPTaskType that inherits from Tag model.
Both Taggable and Tag models have been updated and they don't use hardcoded Tag
model anymore and instead use cls of class methods or self.__class__. In case
of Taggable it's self.__tag_model.
/*
* jQuery Progress Bar plugin
* Version 1.1.0 (06/20/2008)
* @requires jQuery v1.2.1 or later
*
* Copyright (c) 2008 Gary Teo
* http://t.wits.sg
USAGE:
$(".someclass").progressBar();
$("#progressbar").progressBar();
$("#progressbar").progressBar(45); // percentage
$("#progressbar").progressBar({showText: false }); // percentage with config
$("#progressbar").progressBar(45, {showText: false }); // percentage with config
*/
(function($) {
$.extend({
progressBar: new function() {
this.defaults = {
increment : 2,
speed : 15,
showText : true, // show text with percentage in next to the progressbar? - default : true
width : 120, // Width of the progressbar - don't forget to adjust your image too!!!
boxImage : '/soc/content/images/progressbar.gif', // boxImage : image around the progress bar
barImage : '/soc/content/images/progressbg_green.gif', // Image to use in the progressbar. Can be an array of images too.
height : 12 // Height of the progressbar - don't forget to adjust your image too!!!
};
/* public methods */
this.construct = function(arg1, arg2) {
var argpercentage = null;
var argconfig = null;
if (arg1 != null) {
if (!isNaN(arg1)) {
argpercentage = arg1;
if (arg2 != null) {
argconfig = arg2; }
} else {
argconfig = arg1;
}
}
return this.each(function(child) {
var pb = this;
if (argpercentage != null && this.bar != null && this.config != null) {
this.config.tpercentage = argpercentage;
if (argconfig != null)
pb.config = $.extend(this.config, argconfig);
} else {
var $this = $(this);
var config = $.extend({}, $.progressBar.defaults, argconfig);
var percentage = argpercentage;
if (argpercentage == null)
var percentage = $this.html().replace("%",""); // parsed percentage
$this.html("");
var bar = document.createElement('img');
var text = document.createElement('span');
bar.id = this.id + "_percentImage";
text.id = this.id + "_percentText";
bar.src = config.boxImage;
bar.width = config.width;
var $bar = $(bar);
var $text = $(text);
this.bar = $bar;
this.ntext = $text;
this.config = config;
this.config.cpercentage = 0;
this.config.tpercentage = percentage;
$bar.css("width", config.width + "px");
$bar.css("height", config.height + "px");
$bar.css("background-image", "url(" + config.barImage + ")");
$bar.css("padding", "0");
$bar.css("margin", "0");
$this.append($bar);
$this.append($text);
bar.alt = this.tpercentage;
bar.title = this.tpercentage;
}
var t = setInterval(function() {
var config = pb.config;
var cpercentage = parseInt(config.cpercentage);
var tpercentage = parseInt(config.tpercentage);
var increment = parseInt(config.increment);
var bar = pb.bar;
var text = pb.ntext;
var pixels = config.width / 100; // Define how many pixels go into 1%
bar.css("background-position", (((config.width * -1)) + (cpercentage * pixels)) + 'px 50%');
if (config.showText)
text.html(" " + Math.round(cpercentage) + "%");
if (cpercentage > tpercentage) {
if (cpercentage - increment < tpercentage) {
pb.config.cpercentage = 0 + tpercentage
} else {
pb.config.cpercentage -= increment;
}
}
else if (pb.config.cpercentage < pb.config.tpercentage) {
if (cpercentage + increment > tpercentage) {
pb.config.cpercentage = tpercentage
} else {
pb.config.cpercentage += increment;
}
}
else {
clearInterval(t);
}
}, pb.config.speed);
});
};
}
});
$.fn.extend({
progressBar: $.progressBar.construct
});
})(jQuery);