!(function ($) {
var UWidget = function (element, options) {
this.init($(element), options);
};
UWidget.prototype = {
options: {
url: null,
handler: null,
template: null,
sort: {
enabled: false,
name: 'sort',
values: ['id', 'date'],
labels: ['Identifier', 'Date']
},
direction: {
enabled: false,
name: 'direction',
values: ['desc', 'asc'],
labels: ['Descending', 'Ascending']
},
filters: {
ebabled: false,
name: 'filters',
values: [],
labels: []
}
},
init: function ($element, options) {
this.$element = $element;
this.options = $.extend(true, {}, this.options, options);
this._xhrCache = {};
if (!this.options.url || !this.options.handler || !this.options.template)
throw new Error('You must define a widget url, an ajax handler and a template');
this
._initActions()
._initFromDOM()
.fetch();
},
_initActions: function () {
var i, checked;
this.$actions = $('<span class="uwidget-actions"></span>');
if (this.options.sort.enabled) {
this.$sort = $('<select name="'+ this.options.sort.name +'"></select>')
.on('change', false, $.proxy(this._updateActions, this));
for (i = 0; i < this.options.sort.values.length; i++)
this.$sort.append('<option value="' + this.options.sort.values[i] + '">' + this.options.sort.labels[i] + '</option>');
this.$actions.append(this.$sort);
}
if (this.options.direction.enabled) {
this.$direction = $('<select name="'+ this.options.direction.name +'"></select>')
.on('change', false, $.proxy(this._updateActions, this));
for (i = 0; i < this.options.direction.values.length; i++)
this.$direction.append('<option value="' + this.options.direction.values[i] + '">' + this.options.direction.labels[i] + '</option>');
this.$actions.append(this.$direction);
}
if (this.options.filters.enabled) {
this.$filters = $('<span class="filters"></span>')
.on('change', false, $.proxy(this._updateActions, this));
for (i = 0; i < this.options.filters.values.length; i++) {
checked = this.$element.data('filters') && new RegExp(this.options.filters.labels[i], 'i').test(this.$element.data('filters'));
this.$filters.append(this.options.filters.labels[i] + ' <input type="checkbox" name="filters[]" value="' + this.options.filters.values[i] + '" ' + (checked ? 'checked' : '') + '/>');
}
this.$actions.append(this.$filters);
}
this.$container = $('<ul class="uwidget-container"></ul>');
this.$info = $('<span class="uwidget-info"><a href="#" target="_blank">UWidget</a></span>');
this.$element
.append(this.$actions)
.append(this.$container)
.append(this.$info);
this._updateActions();
return this;
},
_initFromDOM: function () {
if (this.$element.data('width'))
this.$element.css('width', this.$element.data('width'));
if (this.$element.data('height')) {
this.$element.css('height', this.$element.data('height'));
this.$container.css('height', this.$element.height() - this.$actions.height() - this.$info.height());
}
return this;
},
_updateActions: function () {
if (this.options.sort.enabled)
this.$element.data('sort', this.$sort.val());
if (this.options.direction.enabled)
this.$element.data('direction', this.$direction.val());
if (this.options.filters.enabled) {
var val = [];
this.$actions.find('input[type=checkbox]:checked').each(function () {
val.push($(this).val());
});
this.$element.data('filters', val.join(', '));
}
this.fetch();
},
getUrl: function () {
var url = ('function' === typeof this.options.url ? this.options.url(this.options) : this.options.url),
options = ['sort', 'direction', 'filters'],
value = '';
url += -1 !== url.indexOf('?') ? '&uwidget' : '?uwidget';
for (var i = 0; i < options.length; i++) {
value = this.$element.data([options[i]] + '');
if (this.options[options[i]].enabled && value.length)
url += '&' + this.options[options[i]].name + '=' + value;
}
return url;
},
fetch: function () {
var that = this,
url = that.getUrl();
this.$element
.removeClass('error')
.removeClass('fetched')
.addClass('fetching');
if ('undefined' !== typeof this._xhrCache[url])
return this._updateCollection.apply(this, this._xhrCache[url]);
$.ajax($.extend(true, {}, {
url: url
}, that.$element.data('remoteOptions')))
.done(function () {
that._updateCollection.apply(that, arguments);
that._xhrCache[url] = arguments;
})
.fail(function () {
that.$container.addClass('error');
})
.always(function () {
that.$container.removeClass('fetching');
});
},
_updateCollection: function (collection) {
this.$container.html('').addClass('fetched');
collection = this.options.handler.apply(this, arguments);
for (var i = 0; i < collection.length; i++)
this.$container.append(tmpl(this.options.template, collection[i]));
}
};
$.fn.UWidget = function (options) {
return new UWidget(this, options);
};
// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
var cache = {};
this.tmpl = function tmpl(str, data){
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
str
.replace(/[\r\t\n]/g, " ")
.split("<%").join("\t")
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'")
.split("\t").join("');")
.split("%>").join("p.push('")
.split("\r").join("\\'")
+ "');}return p.join('');");
// Provide some basic currying to the user
return data ? fn(data) : fn;
};
})();
})(window.jQuery);
|
Download
