Current state

This commit is contained in:
2026-02-07 08:23:18 +01:00
commit 0a4372c40d
22479 changed files with 1553543 additions and 0 deletions

View File

@@ -0,0 +1,4 @@
/*! Backstretch - v2.0.4 - 2013-06-19
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2013 Scott Robbin; Licensed MIT */
(function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);

View File

@@ -0,0 +1,962 @@
/* =========================================================
* bootstrap-datepicker.js
* http://www.eyecon.ro/bootstrap-datepicker
* =========================================================
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function( $ ) {
function UTCDate(){
return new Date(Date.UTC.apply(Date, arguments));
}
function UTCToday(){
var today = new Date();
return UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
}
// Picker object
var Datepicker = function(element, options) {
var that = this;
this.element = $(element);
this.language = options.language||this.element.data('date-language')||"en";
this.language = this.language in dates ? this.language : "en";
this.isRTL = dates[this.language].rtl||false;
this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'mm/dd/yyyy');
this.isInline = false;
this.isInput = this.element.is('input');
this.component = this.element.is('.date') ? this.element.find('.add-on') : false;
this.hasInput = this.component && this.element.find('input').length;
if(this.component && this.component.length === 0)
this.component = false;
this._attachEvents();
this.forceParse = true;
if ('forceParse' in options) {
this.forceParse = options.forceParse;
} else if ('dateForceParse' in this.element.data()) {
this.forceParse = this.element.data('date-force-parse');
}
this.picker = $(DPGlobal.template)
.appendTo(this.isInline ? this.element : 'body')
.on({
click: $.proxy(this.click, this),
mousedown: $.proxy(this.mousedown, this)
});
if(this.isInline) {
this.picker.addClass('datepicker-inline');
} else {
this.picker.addClass('datepicker-dropdown dropdown-menu');
}
if (this.isRTL){
this.picker.addClass('datepicker-rtl');
this.picker.find('.prev i, .next i')
.toggleClass('icon-arrow-left icon-arrow-right');
}
$(document).on('mousedown', function (e) {
// Clicked outside the datepicker, hide it
if ($(e.target).closest('.datepicker').length === 0) {
that.hide();
}
});
this.autoclose = false;
if ('autoclose' in options) {
this.autoclose = options.autoclose;
} else if ('dateAutoclose' in this.element.data()) {
this.autoclose = this.element.data('date-autoclose');
}
this.keyboardNavigation = true;
if ('keyboardNavigation' in options) {
this.keyboardNavigation = options.keyboardNavigation;
} else if ('dateKeyboardNavigation' in this.element.data()) {
this.keyboardNavigation = this.element.data('date-keyboard-navigation');
}
this.viewMode = this.startViewMode = 0;
switch(options.startView || this.element.data('date-start-view')){
case 2:
case 'decade':
this.viewMode = this.startViewMode = 2;
break;
case 1:
case 'year':
this.viewMode = this.startViewMode = 1;
break;
}
this.todayBtn = (options.todayBtn||this.element.data('date-today-btn')||false);
this.todayHighlight = (options.todayHighlight||this.element.data('date-today-highlight')||false);
this.weekStart = ((options.weekStart||this.element.data('date-weekstart')||dates[this.language].weekStart||0) % 7);
this.weekEnd = ((this.weekStart + 6) % 7);
this.startDate = -Infinity;
this.endDate = Infinity;
this.daysOfWeekDisabled = [];
this.setStartDate(options.startDate||this.element.data('date-startdate'));
this.setEndDate(options.endDate||this.element.data('date-enddate'));
this.setDaysOfWeekDisabled(options.daysOfWeekDisabled||this.element.data('date-days-of-week-disabled'));
this.fillDow();
this.fillMonths();
this.update();
this.showMode();
if(this.isInline) {
this.show();
}
};
Datepicker.prototype = {
constructor: Datepicker,
_events: [],
_attachEvents: function(){
this._detachEvents();
if (this.isInput) { // single input
this._events = [
[this.element, {
focus: $.proxy(this.show, this),
keyup: $.proxy(this.update, this),
keydown: $.proxy(this.keydown, this)
}]
];
}
else if (this.component && this.hasInput){ // component: input + button
this._events = [
// For components that are not readonly, allow keyboard nav
[this.element.find('input'), {
focus: $.proxy(this.show, this),
keyup: $.proxy(this.update, this),
keydown: $.proxy(this.keydown, this)
}],
[this.component, {
click: $.proxy(this.show, this)
}]
];
}
else if (this.element.is('div')) { // inline datepicker
this.isInline = true;
}
else {
this._events = [
[this.element, {
click: $.proxy(this.show, this)
}]
];
}
for (var i=0, el, ev; i<this._events.length; i++){
el = this._events[i][0];
ev = this._events[i][1];
el.on(ev);
}
},
_detachEvents: function(){
for (var i=0, el, ev; i<this._events.length; i++){
el = this._events[i][0];
ev = this._events[i][1];
el.off(ev);
}
this._events = [];
},
show: function(e) {
this.picker.show();
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
this.update();
this.place();
$(window).on('resize', $.proxy(this.place, this));
if (e ) {
e.stopPropagation();
e.preventDefault();
}
this.element.trigger({
type: 'show',
date: this.date
});
},
hide: function(e){
if(this.isInline) return;
this.picker.hide();
$(window).off('resize', this.place);
this.viewMode = this.startViewMode;
this.showMode();
if (!this.isInput) {
$(document).off('mousedown', this.hide);
}
if (
this.forceParse &&
(
this.isInput && this.element.val() ||
this.hasInput && this.element.find('input').val()
)
)
this.setValue();
this.element.trigger({
type: 'hide',
date: this.date
});
},
remove: function() {
this._detachEvents();
this.picker.remove();
delete this.element.data().datepicker;
},
getDate: function() {
var d = this.getUTCDate();
return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
},
getUTCDate: function() {
return this.date;
},
setDate: function(d) {
this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
},
setUTCDate: function(d) {
this.date = d;
this.setValue();
},
setValue: function() {
var formatted = this.getFormattedDate();
if (!this.isInput) {
if (this.component){
this.element.find('input').val(formatted);
}
this.element.data('date', formatted);
} else {
this.element.val(formatted);
}
},
getFormattedDate: function(format) {
if (format === undefined)
format = this.format;
return DPGlobal.formatDate(this.date, format, this.language);
},
setStartDate: function(startDate){
this.startDate = startDate||-Infinity;
if (this.startDate !== -Infinity) {
this.startDate = DPGlobal.parseDate(this.startDate, this.format, this.language);
}
this.update();
this.updateNavArrows();
},
setEndDate: function(endDate){
this.endDate = endDate||Infinity;
if (this.endDate !== Infinity) {
this.endDate = DPGlobal.parseDate(this.endDate, this.format, this.language);
}
this.update();
this.updateNavArrows();
},
setDaysOfWeekDisabled: function(daysOfWeekDisabled){
this.daysOfWeekDisabled = daysOfWeekDisabled||[];
if (!$.isArray(this.daysOfWeekDisabled)) {
this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
}
this.daysOfWeekDisabled = $.map(this.daysOfWeekDisabled, function (d) {
return parseInt(d, 10);
});
this.update();
this.updateNavArrows();
},
place: function(){
if(this.isInline) return;
var zIndex = parseInt(this.element.parents().filter(function() {
return $(this).css('z-index') != 'auto';
}).first().css('z-index'))+10;
var offset = this.component ? this.component.offset() : this.element.offset();
var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(true);
this.picker.css({
top: offset.top + height,
left: offset.left,
zIndex: zIndex
});
},
update: function(){
var date, fromArgs = false;
if(arguments && arguments.length && (typeof arguments[0] === 'string' || arguments[0] instanceof Date)) {
date = arguments[0];
fromArgs = true;
} else {
date = this.isInput ? this.element.val() : this.element.data('date') || this.element.find('input').val();
}
this.date = DPGlobal.parseDate(date, this.format, this.language);
if(fromArgs) this.setValue();
var oldViewDate = this.viewDate;
if (this.date < this.startDate) {
this.viewDate = new Date(this.startDate);
} else if (this.date > this.endDate) {
this.viewDate = new Date(this.endDate);
} else {
this.viewDate = new Date(this.date);
}
if (oldViewDate && oldViewDate.getTime() != this.viewDate.getTime()){
this.element.trigger({
type: 'changeDate',
date: this.viewDate
});
}
this.fill();
},
fillDow: function(){
var dowCnt = this.weekStart,
html = '<tr>';
while (dowCnt < this.weekStart + 7) {
html += '<th class="dow">'+dates[this.language].daysMin[(dowCnt++)%7]+'</th>';
}
html += '</tr>';
this.picker.find('.datepicker-days thead').append(html);
},
fillMonths: function(){
var html = '',
i = 0;
while (i < 12) {
html += '<span class="month">'+dates[this.language].monthsShort[i++]+'</span>';
}
this.picker.find('.datepicker-months td').html(html);
},
fill: function() {
var d = new Date(this.viewDate),
year = d.getUTCFullYear(),
month = d.getUTCMonth(),
startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
currentDate = this.date && this.date.valueOf(),
today = new Date();
this.picker.find('.datepicker-days thead th:eq(1)')
.text(dates[this.language].months[month]+' '+year);
this.picker.find('tfoot th.today')
.text(dates[this.language].today)
.toggle(this.todayBtn !== false);
this.updateNavArrows();
this.fillMonths();
var prevMonth = UTCDate(year, month-1, 28,0,0,0,0),
day = DPGlobal.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
prevMonth.setUTCDate(day);
prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
var nextMonth = new Date(prevMonth);
nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
nextMonth = nextMonth.valueOf();
var html = [];
var clsName;
while(prevMonth.valueOf() < nextMonth) {
if (prevMonth.getUTCDay() == this.weekStart) {
html.push('<tr>');
}
clsName = '';
if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
clsName += ' old';
} else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
clsName += ' new';
}
// Compare internal UTC date with local today, not UTC today
if (this.todayHighlight &&
prevMonth.getUTCFullYear() == today.getFullYear() &&
prevMonth.getUTCMonth() == today.getMonth() &&
prevMonth.getUTCDate() == today.getDate()) {
clsName += ' today';
}
if (currentDate && prevMonth.valueOf() == currentDate) {
clsName += ' active';
}
if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate ||
$.inArray(prevMonth.getUTCDay(), this.daysOfWeekDisabled) !== -1) {
clsName += ' disabled';
}
html.push('<td class="day'+clsName+'">'+prevMonth.getUTCDate() + '</td>');
if (prevMonth.getUTCDay() == this.weekEnd) {
html.push('</tr>');
}
prevMonth.setUTCDate(prevMonth.getUTCDate()+1);
}
this.picker.find('.datepicker-days tbody').empty().append(html.join(''));
var currentYear = this.date && this.date.getUTCFullYear();
var months = this.picker.find('.datepicker-months')
.find('th:eq(1)')
.text(year)
.end()
.find('span').removeClass('active');
if (currentYear && currentYear == year) {
months.eq(this.date.getUTCMonth()).addClass('active');
}
if (year < startYear || year > endYear) {
months.addClass('disabled');
}
if (year == startYear) {
months.slice(0, startMonth).addClass('disabled');
}
if (year == endYear) {
months.slice(endMonth+1).addClass('disabled');
}
html = '';
year = parseInt(year/10, 10) * 10;
var yearCont = this.picker.find('.datepicker-years')
.find('th:eq(1)')
.text(year + '-' + (year + 9))
.end()
.find('td');
year -= 1;
for (var i = -1; i < 11; i++) {
html += '<span class="year'+(i == -1 || i == 10 ? ' old' : '')+(currentYear == year ? ' active' : '')+(year < startYear || year > endYear ? ' disabled' : '')+'">'+year+'</span>';
year += 1;
}
yearCont.html(html);
},
updateNavArrows: function() {
var d = new Date(this.viewDate),
year = d.getUTCFullYear(),
month = d.getUTCMonth();
switch (this.viewMode) {
case 0:
if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
this.picker.find('.prev').css({visibility: 'hidden'});
} else {
this.picker.find('.prev').css({visibility: 'visible'});
}
if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
this.picker.find('.next').css({visibility: 'hidden'});
} else {
this.picker.find('.next').css({visibility: 'visible'});
}
break;
case 1:
case 2:
if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
this.picker.find('.prev').css({visibility: 'hidden'});
} else {
this.picker.find('.prev').css({visibility: 'visible'});
}
if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
this.picker.find('.next').css({visibility: 'hidden'});
} else {
this.picker.find('.next').css({visibility: 'visible'});
}
break;
}
},
click: function(e) {
e.stopPropagation();
e.preventDefault();
var target = $(e.target).closest('span, td, th');
if (target.length == 1) {
switch(target[0].nodeName.toLowerCase()) {
case 'th':
switch(target[0].className) {
case 'switch':
this.showMode(1);
break;
case 'prev':
case 'next':
var dir = DPGlobal.modes[this.viewMode].navStep * (target[0].className == 'prev' ? -1 : 1);
switch(this.viewMode){
case 0:
this.viewDate = this.moveMonth(this.viewDate, dir);
break;
case 1:
case 2:
this.viewDate = this.moveYear(this.viewDate, dir);
break;
}
this.fill();
break;
case 'today':
var date = new Date();
date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
this.showMode(-2);
var which = this.todayBtn == 'linked' ? null : 'view';
this._setDate(date, which);
break;
}
break;
case 'span':
if (!target.is('.disabled')) {
this.viewDate.setUTCDate(1);
if (target.is('.month')) {
var month = target.parent().find('span').index(target);
this.viewDate.setUTCMonth(month);
this.element.trigger({
type: 'changeMonth',
date: this.viewDate
});
} else {
var year = parseInt(target.text(), 10)||0;
this.viewDate.setUTCFullYear(year);
this.element.trigger({
type: 'changeYear',
date: this.viewDate
});
}
this.showMode(-1);
this.fill();
}
break;
case 'td':
if (target.is('.day') && !target.is('.disabled')){
var day = parseInt(target.text(), 10)||1;
var year = this.viewDate.getUTCFullYear(),
month = this.viewDate.getUTCMonth();
if (target.is('.old')) {
if (month === 0) {
month = 11;
year -= 1;
} else {
month -= 1;
}
} else if (target.is('.new')) {
if (month == 11) {
month = 0;
year += 1;
} else {
month += 1;
}
}
this._setDate(UTCDate(year, month, day,0,0,0,0));
}
break;
}
}
},
_setDate: function(date, which){
if (!which || which == 'date')
this.date = date;
if (!which || which == 'view')
this.viewDate = date;
this.fill();
this.setValue();
this.element.trigger({
type: 'changeDate',
date: this.date
});
var element;
if (this.isInput) {
element = this.element;
} else if (this.component){
element = this.element.find('input');
}
if (element) {
element.change();
if (this.autoclose && (!which || which == 'date')) {
this.hide();
}
}
},
moveMonth: function(date, dir){
if (!dir) return date;
var new_date = new Date(date.valueOf()),
day = new_date.getUTCDate(),
month = new_date.getUTCMonth(),
mag = Math.abs(dir),
new_month, test;
dir = dir > 0 ? 1 : -1;
if (mag == 1){
test = dir == -1
// If going back one month, make sure month is not current month
// (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
? function(){ return new_date.getUTCMonth() == month; }
// If going forward one month, make sure month is as expected
// (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
: function(){ return new_date.getUTCMonth() != new_month; };
new_month = month + dir;
new_date.setUTCMonth(new_month);
// Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
if (new_month < 0 || new_month > 11)
new_month = (new_month + 12) % 12;
} else {
// For magnitudes >1, move one month at a time...
for (var i=0; i<mag; i++)
// ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
new_date = this.moveMonth(new_date, dir);
// ...then reset the day, keeping it in the new month
new_month = new_date.getUTCMonth();
new_date.setUTCDate(day);
test = function(){ return new_month != new_date.getUTCMonth(); };
}
// Common date-resetting loop -- if date is beyond end of month, make it
// end of month
while (test()){
new_date.setUTCDate(--day);
new_date.setUTCMonth(new_month);
}
return new_date;
},
moveYear: function(date, dir){
return this.moveMonth(date, dir*12);
},
dateWithinRange: function(date){
return date >= this.startDate && date <= this.endDate;
},
keydown: function(e){
if (this.picker.is(':not(:visible)')){
if (e.keyCode == 27) // allow escape to hide and re-show picker
this.show();
return;
}
var dateChanged = false,
dir, day, month,
newDate, newViewDate;
switch(e.keyCode){
case 27: // escape
this.hide();
e.preventDefault();
break;
case 37: // left
case 39: // right
if (!this.keyboardNavigation) break;
dir = e.keyCode == 37 ? -1 : 1;
if (e.ctrlKey){
newDate = this.moveYear(this.date, dir);
newViewDate = this.moveYear(this.viewDate, dir);
} else if (e.shiftKey){
newDate = this.moveMonth(this.date, dir);
newViewDate = this.moveMonth(this.viewDate, dir);
} else {
newDate = new Date(this.date);
newDate.setUTCDate(this.date.getUTCDate() + dir);
newViewDate = new Date(this.viewDate);
newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
}
if (this.dateWithinRange(newDate)){
this.date = newDate;
this.viewDate = newViewDate;
this.setValue();
this.update();
e.preventDefault();
dateChanged = true;
}
break;
case 38: // up
case 40: // down
if (!this.keyboardNavigation) break;
dir = e.keyCode == 38 ? -1 : 1;
if (e.ctrlKey){
newDate = this.moveYear(this.date, dir);
newViewDate = this.moveYear(this.viewDate, dir);
} else if (e.shiftKey){
newDate = this.moveMonth(this.date, dir);
newViewDate = this.moveMonth(this.viewDate, dir);
} else {
newDate = new Date(this.date);
newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
newViewDate = new Date(this.viewDate);
newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
}
if (this.dateWithinRange(newDate)){
this.date = newDate;
this.viewDate = newViewDate;
this.setValue();
this.update();
e.preventDefault();
dateChanged = true;
}
break;
case 13: // enter
this.hide();
e.preventDefault();
break;
case 9: // tab
this.hide();
break;
}
if (dateChanged){
this.element.trigger({
type: 'changeDate',
date: this.date
});
var element;
if (this.isInput) {
element = this.element;
} else if (this.component){
element = this.element.find('input');
}
if (element) {
element.change();
}
}
},
showMode: function(dir) {
if (dir) {
this.viewMode = Math.max(0, Math.min(2, this.viewMode + dir));
}
/*
vitalets: fixing bug of very special conditions:
jquery 1.7.1 + webkit + show inline datepicker in bootstrap popover.
Method show() does not set display css correctly and datepicker is not shown.
Changed to .css('display', 'block') solve the problem.
See https://github.com/vitalets/x-editable/issues/37
In jquery 1.7.2+ everything works fine.
*/
//this.picker.find('>div').hide().filter('.datepicker-'+DPGlobal.modes[this.viewMode].clsName).show();
this.picker.find('>div').hide().filter('.datepicker-'+DPGlobal.modes[this.viewMode].clsName).css('display', 'block');
this.updateNavArrows();
}
};
$.fn.datepicker = function ( option ) {
var args = Array.apply(null, arguments);
args.shift();
return this.each(function () {
var $this = $(this),
data = $this.data('datepicker'),
options = typeof option == 'object' && option;
if (!data) {
$this.data('datepicker', (data = new Datepicker(this, $.extend({}, $.fn.datepicker.defaults,options))));
}
if (typeof option == 'string' && typeof data[option] == 'function') {
data[option].apply(data, args);
}
});
};
$.fn.datepicker.defaults = {
};
$.fn.datepicker.Constructor = Datepicker;
var dates = $.fn.datepicker.dates = {
en: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: "Today"
}
};
var DPGlobal = {
modes: [
{
clsName: 'days',
navFnc: 'Month',
navStep: 1
},
{
clsName: 'months',
navFnc: 'FullYear',
navStep: 1
},
{
clsName: 'years',
navFnc: 'FullYear',
navStep: 10
}],
isLeapYear: function (year) {
return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0));
},
getDaysInMonth: function (year, month) {
return [31, (DPGlobal.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
},
validParts: /dd?|DD?|mm?|MM?|yy(?:yy)?/g,
nonpunctuation: /[^ -\/:-@\[\u3400-\u9fff-`{-~\t\n\r]+/g,
parseFormat: function(format){
// IE treats \0 as a string end in inputs (truncating the value),
// so it's a bad format delimiter, anyway
var separators = format.replace(this.validParts, '\0').split('\0'),
parts = format.match(this.validParts);
if (!separators || !separators.length || !parts || parts.length === 0){
throw new Error("Invalid date format.");
}
return {separators: separators, parts: parts};
},
parseDate: function(date, format, language) {
if (date instanceof Date) return date;
if (/^[\-+]\d+[dmwy]([\s,]+[\-+]\d+[dmwy])*$/.test(date)) {
var part_re = /([\-+]\d+)([dmwy])/,
parts = date.match(/([\-+]\d+)([dmwy])/g),
part, dir;
date = new Date();
for (var i=0; i<parts.length; i++) {
part = part_re.exec(parts[i]);
dir = parseInt(part[1]);
switch(part[2]){
case 'd':
date.setUTCDate(date.getUTCDate() + dir);
break;
case 'm':
date = Datepicker.prototype.moveMonth.call(Datepicker.prototype, date, dir);
break;
case 'w':
date.setUTCDate(date.getUTCDate() + dir * 7);
break;
case 'y':
date = Datepicker.prototype.moveYear.call(Datepicker.prototype, date, dir);
break;
}
}
return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 0, 0, 0);
}
var parts = date && date.match(this.nonpunctuation) || [],
date = new Date(),
parsed = {},
setters_order = ['yyyy', 'yy', 'M', 'MM', 'm', 'mm', 'd', 'dd'],
setters_map = {
yyyy: function(d,v){ return d.setUTCFullYear(v); },
yy: function(d,v){ return d.setUTCFullYear(2000+v); },
m: function(d,v){
v -= 1;
while (v<0) v += 12;
v %= 12;
d.setUTCMonth(v);
while (d.getUTCMonth() != v)
d.setUTCDate(d.getUTCDate()-1);
return d;
},
d: function(d,v){ return d.setUTCDate(v); }
},
val, filtered, part;
setters_map['M'] = setters_map['MM'] = setters_map['mm'] = setters_map['m'];
setters_map['dd'] = setters_map['d'];
date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
var fparts = format.parts.slice();
// Remove noop parts
if (parts.length != fparts.length) {
fparts = $(fparts).filter(function(i,p){
return $.inArray(p, setters_order) !== -1;
}).toArray();
}
// Process remainder
if (parts.length == fparts.length) {
for (var i=0, cnt = fparts.length; i < cnt; i++) {
val = parseInt(parts[i], 10);
part = fparts[i];
if (isNaN(val)) {
switch(part) {
case 'MM':
filtered = $(dates[language].months).filter(function(){
var m = this.slice(0, parts[i].length),
p = parts[i].slice(0, m.length);
return m == p;
});
val = $.inArray(filtered[0], dates[language].months) + 1;
break;
case 'M':
filtered = $(dates[language].monthsShort).filter(function(){
var m = this.slice(0, parts[i].length),
p = parts[i].slice(0, m.length);
return m == p;
});
val = $.inArray(filtered[0], dates[language].monthsShort) + 1;
break;
}
}
parsed[part] = val;
}
for (var i=0, s; i<setters_order.length; i++){
s = setters_order[i];
if (s in parsed && !isNaN(parsed[s]))
setters_map[s](date, parsed[s]);
}
}
return date;
},
formatDate: function(date, format, language){
var val = {
d: date.getUTCDate(),
D: dates[language].daysShort[date.getUTCDay()],
DD: dates[language].days[date.getUTCDay()],
m: date.getUTCMonth() + 1,
M: dates[language].monthsShort[date.getUTCMonth()],
MM: dates[language].months[date.getUTCMonth()],
yy: date.getUTCFullYear().toString().substring(2),
yyyy: date.getUTCFullYear()
};
val.dd = (val.d < 10 ? '0' : '') + val.d;
val.mm = (val.m < 10 ? '0' : '') + val.m;
var date = [],
seps = $.extend([], format.separators);
for (var i=0, cnt = format.parts.length; i < cnt; i++) {
if (seps.length)
date.push(seps.shift());
date.push(val[format.parts[i]]);
}
return date.join('');
},
headTemplate: '<thead>'+
'<tr>'+
'<th class="prev"><i class="icon-arrow-left"/></th>'+
'<th colspan="5" class="switch"></th>'+
'<th class="next"><i class="icon-arrow-right"/></th>'+
'</tr>'+
'</thead>',
contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>',
footTemplate: '<tfoot><tr><th colspan="7" class="today"></th></tr></tfoot>'
};
DPGlobal.template = '<div class="datepicker">'+
'<div class="datepicker-days">'+
'<table class=" table-condensed">'+
DPGlobal.headTemplate+
'<tbody></tbody>'+
DPGlobal.footTemplate+
'</table>'+
'</div>'+
'<div class="datepicker-months">'+
'<table class="table-condensed">'+
DPGlobal.headTemplate+
DPGlobal.contTemplate+
DPGlobal.footTemplate+
'</table>'+
'</div>'+
'<div class="datepicker-years">'+
'<table class="table-condensed">'+
DPGlobal.headTemplate+
DPGlobal.contTemplate+
DPGlobal.footTemplate+
'</table>'+
'</div>'+
'</div>';
$.fn.datepicker.DPGlobal = DPGlobal;
}( window.jQuery );

View File

@@ -0,0 +1,97 @@
/*
* Project: Bootstrap Hover Dropdown
* Author: Cameron Spear
* Contributors: Mattia Larentis
*
* Dependencies: Bootstrap's Dropdown plugin, jQuery
*
* A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
*
* License: MIT
*
* http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
*/
;(function($, window, undefined) {
// don't do anything if touch is supported
// (plugin causes some issues on mobile)
if('ontouchstart' in document) return;
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this),
$parent = $this.parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$parent.hover(function(event) {
// so a neighbor can't open the dropdown
if(!$parent.hasClass('open') && !$this.is(event.target)) {
return true;
}
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
$parent.trigger($.Event('show.bs.dropdown'));
}, function() {
timeout = window.setTimeout(function() {
$parent.removeClass('open');
$parent.trigger('hide.bs.dropdown');
}, settings.delay);
});
// this helps with button groups!
$this.hover(function() {
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
$parent.trigger($.Event('show.bs.dropdown'));
});
// handle submenus
$parent.find('.dropdown-submenu').each(function(){
var $this = $(this);
var subTimeout;
$this.hover(function() {
window.clearTimeout(subTimeout);
$this.children('.dropdown-menu').show();
// always close submenu siblings instantly
$this.siblings().children('.dropdown-menu').hide();
}, function() {
var $submenu = $this.children('.dropdown-menu');
subTimeout = window.setTimeout(function() {
$submenu.hide();
}, settings.delay);
});
});
});
};
$(document).ready(function() {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);

View File

@@ -0,0 +1,13 @@
/*
* Project: Bootstrap Hover Dropdown
* Author: Cameron Spear
* Contributors: Mattia Larentis
*
* Dependencies: Bootstrap's Dropdown plugin, jQuery
*
* A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
*
* License: MIT
*
* http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
*/(function(e,t,n){if("ontouchstart"in document)return;var r=e();e.fn.dropdownHover=function(n){r=r.add(this.parent());return this.each(function(){var i=e(this),s=i.parent(),o={delay:500,instantlyCloseOthers:!0},u={delay:e(this).data("delay"),instantlyCloseOthers:e(this).data("close-others")},a=e.extend(!0,{},o,n,u),f;s.hover(function(n){if(!s.hasClass("open")&&!i.is(n.target))return!0;a.instantlyCloseOthers===!0&&r.removeClass("open");t.clearTimeout(f);s.addClass("open");s.trigger(e.Event("show.bs.dropdown"))},function(){f=t.setTimeout(function(){s.removeClass("open");s.trigger("hide.bs.dropdown")},a.delay)});i.hover(function(){a.instantlyCloseOthers===!0&&r.removeClass("open");t.clearTimeout(f);s.addClass("open");s.trigger(e.Event("show.bs.dropdown"))});s.find(".dropdown-submenu").each(function(){var n=e(this),r;n.hover(function(){t.clearTimeout(r);n.children(".dropdown-menu").show();n.siblings().children(".dropdown-menu").hide()},function(){var e=n.children(".dropdown-menu");r=t.setTimeout(function(){e.hide()},a.delay)})})})};e(document).ready(function(){e('[data-hover="dropdown"]').dropdownHover()})})(jQuery,this);

View File

@@ -0,0 +1,81 @@
/** Contains the default Ladda button theme styles */
@import 'ladda.scss';
/*************************************
* CONFIG
*/
$green: #2aca76;
$blue: #53b5e6;
$red: #ea8557;
$purple: #9973C2;
$mint: #16a085;
/*************************************
* BUTTON THEME
*/
.ladda-button {
background: #666;
border: 0;
padding: 14px 18px;
font-size: 18px;
cursor: pointer;
color: #fff;
border-radius: 2px;
border: 1px solid transparent;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&:hover {
border-color: rgba( 0, 0, 0, 0.07 );
background-color: #888;
}
@include buttonColor( 'green', $green );
@include buttonColor( 'blue', $blue );
@include buttonColor( 'red', $red );
@include buttonColor( 'purple', $purple );
@include buttonColor( 'mint', $mint );
&[disabled],
&[data-loading] {
border-color: rgba( 0, 0, 0, 0.07 );
cursor: default;
background-color: #999;
&:hover {
cursor: default;
background-color: #999;
}
}
&[data-size=xs] {
padding: 4px 8px;
.ladda-label {
font-size: 0.7em;
}
}
&[data-size=s] {
padding: 6px 10px;
.ladda-label {
font-size: 0.9em;
}
}
&[data-size=l] .ladda-label {
font-size: 1.2em;
}
&[data-size=xl] .ladda-label {
font-size: 1.5em;
}
}

View File

@@ -0,0 +1,483 @@
/*!
* Ladda
* http://lab.hakim.se/ladda
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/
/*************************************
* CONFIG
*/
$spinnerSize: 32px;
/*************************************
* MIXINS
*/
@mixin prefix ( $property, $value ) {
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-ms-#{$property}: $value;
-o-#{$property}: $value;
#{$property}: $value;
}
@mixin transition( $value ) {
-webkit-transition: $value !important; // important to override bootstrap
-moz-transition: $value !important;
-ms-transition: $value !important;
-o-transition: $value !important;
transition: $value !important;
}
@mixin transform( $value ) {
@include prefix( transform, $value );
}
@mixin transform-origin( $value ) {
@include prefix( transform-origin, $value );
}
@mixin buttonColor( $name, $color ) {
&[data-color=#{$name}] {
background: $color;
&:hover {
background-color: lighten( $color, 5% );
}
}
}
/*************************************
* BUTTON BASE
*/
.ladda-button {
position: relative;
}
/* Spinner animation */
.ladda-button .ladda-spinner {
position: absolute;
z-index: 2;
display: inline-block;
width: $spinnerSize;
height: $spinnerSize;
top: 50%;
margin-top: -$spinnerSize/2;
opacity: 0;
pointer-events: none;
}
/* Button label */
.ladda-button .ladda-label {
position: relative;
z-index: 3;
}
/* Progress bar */
.ladda-button .ladda-progress {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
background: rgba( 0, 0, 0, 0.2 );
visibility: hidden;
opacity: 0;
@include transition( 0.1s linear all );
}
.ladda-button[data-loading] .ladda-progress {
opacity: 1;
visibility: visible;
}
/*************************************
* EASING
*/
.ladda-button,
.ladda-button .ladda-spinner,
.ladda-button .ladda-label {
@include transition( 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) all );
}
.ladda-button[data-style=zoom-in],
.ladda-button[data-style=zoom-in] .ladda-spinner,
.ladda-button[data-style=zoom-in] .ladda-label,
.ladda-button[data-style=zoom-out],
.ladda-button[data-style=zoom-out] .ladda-spinner,
.ladda-button[data-style=zoom-out] .ladda-label {
@include transition( 0.3s ease all );
}
/*************************************
* EXPAND LEFT
*/
.ladda-button[data-style=expand-right] {
.ladda-spinner {
right: 14px;
}
&[data-size="s"] .ladda-spinner,
&[data-size="xs"] .ladda-spinner {
right: 4px;
}
&[data-loading] {
padding-right: 56px;
.ladda-spinner {
opacity: 1;
}
&[data-size="s"],
&[data-size="xs"] {
padding-right: 40px;
}
}
}
/*************************************
* EXPAND RIGHT
*/
.ladda-button[data-style=expand-left] {
.ladda-spinner {
left: 14px;
}
&[data-size="s"] .ladda-spinner,
&[data-size="xs"] .ladda-spinner {
left: 4px;
}
&[data-loading] {
padding-left: 56px;
.ladda-spinner {
opacity: 1;
}
&[data-size="s"],
&[data-size="xs"] {
padding-left: 40px;
}
}
}
/*************************************
* EXPAND UP
*/
.ladda-button[data-style=expand-up] {
overflow: hidden;
.ladda-spinner {
top: -$spinnerSize;
left: 50%;
margin-left: -$spinnerSize/2;
}
&[data-loading] {
padding-top: 54px;
.ladda-spinner {
opacity: 1;
top: 14px;
margin-top: 0;
}
&[data-size="s"],
&[data-size="xs"] {
padding-top: 32px;
.ladda-spinner {
top: 4px;
}
}
}
}
/*************************************
* EXPAND DOWN
*/
.ladda-button[data-style=expand-down] {
overflow: hidden;
.ladda-spinner {
top: 62px;
left: 50%;
margin-left: -$spinnerSize/2;
}
&[data-size="s"] .ladda-spinner,
&[data-size="xs"] .ladda-spinner {
top: 40px;
}
&[data-loading] {
padding-bottom: 54px;
.ladda-spinner {
opacity: 1;
}
&[data-size="s"],
&[data-size="xs"] {
padding-bottom: 32px;
}
}
}
/*************************************
* SLIDE LEFT
*/
.ladda-button[data-style=slide-left] {
overflow: hidden;
.ladda-label {
position: relative;
}
.ladda-spinner {
left: 100%;
margin-left: -$spinnerSize/2;
}
&[data-loading] {
.ladda-label {
opacity: 0;
left: -100%;
}
.ladda-spinner {
opacity: 1;
left: 50%;
}
}
}
/*************************************
* SLIDE RIGHT
*/
.ladda-button[data-style=slide-right] {
overflow: hidden;
.ladda-label {
position: relative;
}
.ladda-spinner {
right: 100%;
margin-left: -$spinnerSize/2;
}
&[data-loading] {
.ladda-label {
opacity: 0;
left: 100%;
}
.ladda-spinner {
opacity: 1;
left: 50%;
}
}
}
/*************************************
* SLIDE UP
*/
.ladda-button[data-style=slide-up] {
overflow: hidden;
.ladda-label {
position: relative;
}
.ladda-spinner {
left: 50%;
margin-left: -$spinnerSize/2;
margin-top: 1em;
}
&[data-loading] {
.ladda-label {
opacity: 0;
top: -1em;
}
.ladda-spinner {
opacity: 1;
margin-top: -$spinnerSize/2;
}
}
}
/*************************************
* SLIDE DOWN
*/
.ladda-button[data-style=slide-down] {
overflow: hidden;
.ladda-label {
position: relative;
}
.ladda-spinner {
left: 50%;
margin-left: -$spinnerSize/2;
margin-top: -2em;
}
&[data-loading] {
.ladda-label {
opacity: 0;
top: 1em;
}
.ladda-spinner {
opacity: 1;
margin-top: -$spinnerSize/2;
}
}
}
/*************************************
* ZOOM-OUT
*/
.ladda-button[data-style=zoom-out] {
overflow: hidden;
}
.ladda-button[data-style=zoom-out] .ladda-spinner {
left: 50%;
margin-left: -$spinnerSize/2;
@include transform( scale( 2.5 ) );
}
.ladda-button[data-style=zoom-out] .ladda-label {
position: relative;
display: inline-block;
}
.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
opacity: 0;
@include transform( scale( 0.5 ) );
}
.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
opacity: 1;
@include transform( none );
}
/*************************************
* ZOOM-IN
*/
.ladda-button[data-style=zoom-in] {
overflow: hidden;
}
.ladda-button[data-style=zoom-in] .ladda-spinner {
left: 50%;
margin-left: -$spinnerSize/2;
@include transform( scale( 0.2 ) );
}
.ladda-button[data-style=zoom-in] .ladda-label {
position: relative;
display: inline-block;
}
.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
opacity: 0;
@include transform( scale( 2.2 ) );
}
.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
opacity: 1;
@include transform( none );
}
/*************************************
* CONTRACT
*/
.ladda-button[data-style=contract] {
overflow: hidden;
width: 100px;
}
.ladda-button[data-style=contract] .ladda-spinner {
left: 50%;
margin-left: -16px;
}
.ladda-button[data-style=contract][data-loading] {
border-radius: 50%;
width: 52px;
}
.ladda-button[data-style=contract][data-loading] .ladda-label {
opacity: 0;
}
.ladda-button[data-style=contract][data-loading] .ladda-spinner {
opacity: 1;
}
/*************************************
* OVERLAY
*/
.ladda-button[data-style=contract-overlay] {
overflow: hidden;
width: 100px;
box-shadow: 0px 0px 0px 3000px rgba(0,0,0,0);
}
.ladda-button[data-style=contract-overlay] .ladda-spinner {
left: 50%;
margin-left: -16px;
}
.ladda-button[data-style=contract-overlay][data-loading] {
border-radius: 50%;
width: 52px;
/*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/
box-shadow: 0px 0px 0px 3000px rgba(0,0,0,0.8);
}
.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
opacity: 0;
}
.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
opacity: 1;
}

View File

@@ -0,0 +1,119 @@
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: hsla(0,0%,100%,.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.regex,
.token.important {
color: #e90;
}
.token.important {
font-weight: bold;
}
.token.entity {
cursor: help;
}

View File

@@ -0,0 +1,330 @@
/*!
* Ladda
* http://lab.hakim.se/ladda
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/
/*************************************
* CONFIG
*/
/*************************************
* MIXINS
*/
/*************************************
* BUTTON BASE
*/
.ladda-button {
position: relative; }
/* Spinner animation */
.ladda-button .ladda-spinner {
position: absolute;
z-index: 2;
display: inline-block;
width: 32px;
height: 32px;
top: 50%;
margin-top: -16px;
opacity: 0;
pointer-events: none; }
/* Button label */
.ladda-button .ladda-label {
position: relative;
z-index: 3; }
/* Progress bar */
.ladda-button .ladda-progress {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
-webkit-transition: 0.1s linear all !important;
-moz-transition: 0.1s linear all !important;
-ms-transition: 0.1s linear all !important;
-o-transition: 0.1s linear all !important;
transition: 0.1s linear all !important; }
.ladda-button[data-loading] .ladda-progress {
opacity: 1;
visibility: visible; }
/*************************************
* EASING
*/
.ladda-button,
.ladda-button .ladda-spinner,
.ladda-button .ladda-label {
-webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; }
.ladda-button[data-style=zoom-in],
.ladda-button[data-style=zoom-in] .ladda-spinner,
.ladda-button[data-style=zoom-in] .ladda-label,
.ladda-button[data-style=zoom-out],
.ladda-button[data-style=zoom-out] .ladda-spinner,
.ladda-button[data-style=zoom-out] .ladda-label {
-webkit-transition: 0.3s ease all !important;
-moz-transition: 0.3s ease all !important;
-ms-transition: 0.3s ease all !important;
-o-transition: 0.3s ease all !important;
transition: 0.3s ease all !important; }
/*************************************
* EXPAND LEFT
*/
.ladda-button[data-style=expand-right] .ladda-spinner {
right: 14px; }
.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner {
right: 4px; }
.ladda-button[data-style=expand-right][data-loading] {
padding-right: 56px; }
.ladda-button[data-style=expand-right][data-loading] .ladda-spinner {
opacity: 1; }
.ladda-button[data-style=expand-right][data-loading][data-size="s"], .ladda-button[data-style=expand-right][data-loading][data-size="xs"] {
padding-right: 40px; }
/*************************************
* EXPAND RIGHT
*/
.ladda-button[data-style=expand-left] .ladda-spinner {
left: 14px; }
.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner {
left: 4px; }
.ladda-button[data-style=expand-left][data-loading] {
padding-left: 56px; }
.ladda-button[data-style=expand-left][data-loading] .ladda-spinner {
opacity: 1; }
.ladda-button[data-style=expand-left][data-loading][data-size="s"], .ladda-button[data-style=expand-left][data-loading][data-size="xs"] {
padding-left: 40px; }
/*************************************
* EXPAND UP
*/
.ladda-button[data-style=expand-up] {
overflow: hidden; }
.ladda-button[data-style=expand-up] .ladda-spinner {
top: -32px;
left: 50%;
margin-left: -16px; }
.ladda-button[data-style=expand-up][data-loading] {
padding-top: 54px; }
.ladda-button[data-style=expand-up][data-loading] .ladda-spinner {
opacity: 1;
top: 14px;
margin-top: 0; }
.ladda-button[data-style=expand-up][data-loading][data-size="s"], .ladda-button[data-style=expand-up][data-loading][data-size="xs"] {
padding-top: 32px; }
.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner {
top: 4px; }
/*************************************
* EXPAND DOWN
*/
.ladda-button[data-style=expand-down] {
overflow: hidden; }
.ladda-button[data-style=expand-down] .ladda-spinner {
top: 62px;
left: 50%;
margin-left: -16px; }
.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner {
top: 40px; }
.ladda-button[data-style=expand-down][data-loading] {
padding-bottom: 54px; }
.ladda-button[data-style=expand-down][data-loading] .ladda-spinner {
opacity: 1; }
.ladda-button[data-style=expand-down][data-loading][data-size="s"], .ladda-button[data-style=expand-down][data-loading][data-size="xs"] {
padding-bottom: 32px; }
/*************************************
* SLIDE LEFT
*/
.ladda-button[data-style=slide-left] {
overflow: hidden; }
.ladda-button[data-style=slide-left] .ladda-label {
position: relative; }
.ladda-button[data-style=slide-left] .ladda-spinner {
left: 100%;
margin-left: -16px; }
.ladda-button[data-style=slide-left][data-loading] .ladda-label {
opacity: 0;
left: -100%; }
.ladda-button[data-style=slide-left][data-loading] .ladda-spinner {
opacity: 1;
left: 50%; }
/*************************************
* SLIDE RIGHT
*/
.ladda-button[data-style=slide-right] {
overflow: hidden; }
.ladda-button[data-style=slide-right] .ladda-label {
position: relative; }
.ladda-button[data-style=slide-right] .ladda-spinner {
right: 100%;
margin-left: -16px; }
.ladda-button[data-style=slide-right][data-loading] .ladda-label {
opacity: 0;
left: 100%; }
.ladda-button[data-style=slide-right][data-loading] .ladda-spinner {
opacity: 1;
left: 50%; }
/*************************************
* SLIDE UP
*/
.ladda-button[data-style=slide-up] {
overflow: hidden; }
.ladda-button[data-style=slide-up] .ladda-label {
position: relative; }
.ladda-button[data-style=slide-up] .ladda-spinner {
left: 50%;
margin-left: -16px;
margin-top: 1em; }
.ladda-button[data-style=slide-up][data-loading] .ladda-label {
opacity: 0;
top: -1em; }
.ladda-button[data-style=slide-up][data-loading] .ladda-spinner {
opacity: 1;
margin-top: -16px; }
/*************************************
* SLIDE DOWN
*/
.ladda-button[data-style=slide-down] {
overflow: hidden; }
.ladda-button[data-style=slide-down] .ladda-label {
position: relative; }
.ladda-button[data-style=slide-down] .ladda-spinner {
left: 50%;
margin-left: -16px;
margin-top: -2em; }
.ladda-button[data-style=slide-down][data-loading] .ladda-label {
opacity: 0;
top: 1em; }
.ladda-button[data-style=slide-down][data-loading] .ladda-spinner {
opacity: 1;
margin-top: -16px; }
/*************************************
* ZOOM-OUT
*/
.ladda-button[data-style=zoom-out] {
overflow: hidden; }
.ladda-button[data-style=zoom-out] .ladda-spinner {
left: 50%;
margin-left: -16px;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5); }
.ladda-button[data-style=zoom-out] .ladda-label {
position: relative;
display: inline-block; }
.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5); }
.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
/*************************************
* ZOOM-IN
*/
.ladda-button[data-style=zoom-in] {
overflow: hidden; }
.ladda-button[data-style=zoom-in] .ladda-spinner {
left: 50%;
margin-left: -16px;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2); }
.ladda-button[data-style=zoom-in] .ladda-label {
position: relative;
display: inline-block; }
.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
opacity: 0;
-webkit-transform: scale(2.2);
-moz-transform: scale(2.2);
-ms-transform: scale(2.2);
-o-transform: scale(2.2);
transform: scale(2.2); }
.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
/*************************************
* CONTRACT
*/
.ladda-button[data-style=contract] {
overflow: hidden;
width: 100px; }
.ladda-button[data-style=contract] .ladda-spinner {
left: 50%;
margin-left: -16px; }
.ladda-button[data-style=contract][data-loading] {
border-radius: 50%;
width: 52px; }
.ladda-button[data-style=contract][data-loading] .ladda-label {
opacity: 0; }
.ladda-button[data-style=contract][data-loading] .ladda-spinner {
opacity: 1; }
/*************************************
* OVERLAY
*/
.ladda-button[data-style=contract-overlay] {
overflow: hidden;
width: 100px;
box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0); }
.ladda-button[data-style=contract-overlay] .ladda-spinner {
left: 50%;
margin-left: -16px; }
.ladda-button[data-style=contract-overlay][data-loading] {
border-radius: 50%;
width: 52px;
/*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/
box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0.8); }
.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
opacity: 0; }
.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
opacity: 1; }

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,392 @@
/** Contains the default Ladda button theme styles */
/*!
* Ladda
* http://lab.hakim.se/ladda
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/
/*************************************
* CONFIG
*/
/*************************************
* MIXINS
*/
/*************************************
* BUTTON BASE
*/
.ladda-button {
position: relative; }
/* Spinner animation */
.ladda-button .ladda-spinner {
position: absolute;
z-index: 2;
display: inline-block;
width: 32px;
height: 32px;
top: 50%;
margin-top: -16px;
opacity: 0;
pointer-events: none; }
/* Button label */
.ladda-button .ladda-label {
position: relative;
z-index: 3; }
/* Progress bar */
.ladda-button .ladda-progress {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
-webkit-transition: 0.1s linear all !important;
-moz-transition: 0.1s linear all !important;
-ms-transition: 0.1s linear all !important;
-o-transition: 0.1s linear all !important;
transition: 0.1s linear all !important; }
.ladda-button[data-loading] .ladda-progress {
opacity: 1;
visibility: visible; }
/*************************************
* EASING
*/
.ladda-button,
.ladda-button .ladda-spinner,
.ladda-button .ladda-label {
-webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; }
.ladda-button[data-style=zoom-in],
.ladda-button[data-style=zoom-in] .ladda-spinner,
.ladda-button[data-style=zoom-in] .ladda-label,
.ladda-button[data-style=zoom-out],
.ladda-button[data-style=zoom-out] .ladda-spinner,
.ladda-button[data-style=zoom-out] .ladda-label {
-webkit-transition: 0.3s ease all !important;
-moz-transition: 0.3s ease all !important;
-ms-transition: 0.3s ease all !important;
-o-transition: 0.3s ease all !important;
transition: 0.3s ease all !important; }
/*************************************
* EXPAND LEFT
*/
.ladda-button[data-style=expand-right] .ladda-spinner {
right: 14px; }
.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner {
right: 4px; }
.ladda-button[data-style=expand-right][data-loading] {
padding-right: 56px; }
.ladda-button[data-style=expand-right][data-loading] .ladda-spinner {
opacity: 1; }
.ladda-button[data-style=expand-right][data-loading][data-size="s"], .ladda-button[data-style=expand-right][data-loading][data-size="xs"] {
padding-right: 40px; }
/*************************************
* EXPAND RIGHT
*/
.ladda-button[data-style=expand-left] .ladda-spinner {
left: 14px; }
.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner {
left: 4px; }
.ladda-button[data-style=expand-left][data-loading] {
padding-left: 56px; }
.ladda-button[data-style=expand-left][data-loading] .ladda-spinner {
opacity: 1; }
.ladda-button[data-style=expand-left][data-loading][data-size="s"], .ladda-button[data-style=expand-left][data-loading][data-size="xs"] {
padding-left: 40px; }
/*************************************
* EXPAND UP
*/
.ladda-button[data-style=expand-up] {
overflow: hidden; }
.ladda-button[data-style=expand-up] .ladda-spinner {
top: -32px;
left: 50%;
margin-left: -16px; }
.ladda-button[data-style=expand-up][data-loading] {
padding-top: 54px; }
.ladda-button[data-style=expand-up][data-loading] .ladda-spinner {
opacity: 1;
top: 14px;
margin-top: 0; }
.ladda-button[data-style=expand-up][data-loading][data-size="s"], .ladda-button[data-style=expand-up][data-loading][data-size="xs"] {
padding-top: 32px; }
.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner {
top: 4px; }
/*************************************
* EXPAND DOWN
*/
.ladda-button[data-style=expand-down] {
overflow: hidden; }
.ladda-button[data-style=expand-down] .ladda-spinner {
top: 62px;
left: 50%;
margin-left: -16px; }
.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner {
top: 40px; }
.ladda-button[data-style=expand-down][data-loading] {
padding-bottom: 54px; }
.ladda-button[data-style=expand-down][data-loading] .ladda-spinner {
opacity: 1; }
.ladda-button[data-style=expand-down][data-loading][data-size="s"], .ladda-button[data-style=expand-down][data-loading][data-size="xs"] {
padding-bottom: 32px; }
/*************************************
* SLIDE LEFT
*/
.ladda-button[data-style=slide-left] {
overflow: hidden; }
.ladda-button[data-style=slide-left] .ladda-label {
position: relative; }
.ladda-button[data-style=slide-left] .ladda-spinner {
left: 100%;
margin-left: -16px; }
.ladda-button[data-style=slide-left][data-loading] .ladda-label {
opacity: 0;
left: -100%; }
.ladda-button[data-style=slide-left][data-loading] .ladda-spinner {
opacity: 1;
left: 50%; }
/*************************************
* SLIDE RIGHT
*/
.ladda-button[data-style=slide-right] {
overflow: hidden; }
.ladda-button[data-style=slide-right] .ladda-label {
position: relative; }
.ladda-button[data-style=slide-right] .ladda-spinner {
right: 100%;
margin-left: -16px; }
.ladda-button[data-style=slide-right][data-loading] .ladda-label {
opacity: 0;
left: 100%; }
.ladda-button[data-style=slide-right][data-loading] .ladda-spinner {
opacity: 1;
left: 50%; }
/*************************************
* SLIDE UP
*/
.ladda-button[data-style=slide-up] {
overflow: hidden; }
.ladda-button[data-style=slide-up] .ladda-label {
position: relative; }
.ladda-button[data-style=slide-up] .ladda-spinner {
left: 50%;
margin-left: -16px;
margin-top: 1em; }
.ladda-button[data-style=slide-up][data-loading] .ladda-label {
opacity: 0;
top: -1em; }
.ladda-button[data-style=slide-up][data-loading] .ladda-spinner {
opacity: 1;
margin-top: -16px; }
/*************************************
* SLIDE DOWN
*/
.ladda-button[data-style=slide-down] {
overflow: hidden; }
.ladda-button[data-style=slide-down] .ladda-label {
position: relative; }
.ladda-button[data-style=slide-down] .ladda-spinner {
left: 50%;
margin-left: -16px;
margin-top: -2em; }
.ladda-button[data-style=slide-down][data-loading] .ladda-label {
opacity: 0;
top: 1em; }
.ladda-button[data-style=slide-down][data-loading] .ladda-spinner {
opacity: 1;
margin-top: -16px; }
/*************************************
* ZOOM-OUT
*/
.ladda-button[data-style=zoom-out] {
overflow: hidden; }
.ladda-button[data-style=zoom-out] .ladda-spinner {
left: 50%;
margin-left: -16px;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5); }
.ladda-button[data-style=zoom-out] .ladda-label {
position: relative;
display: inline-block; }
.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5); }
.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
/*************************************
* ZOOM-IN
*/
.ladda-button[data-style=zoom-in] {
overflow: hidden; }
.ladda-button[data-style=zoom-in] .ladda-spinner {
left: 50%;
margin-left: -16px;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2); }
.ladda-button[data-style=zoom-in] .ladda-label {
position: relative;
display: inline-block; }
.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
opacity: 0;
-webkit-transform: scale(2.2);
-moz-transform: scale(2.2);
-ms-transform: scale(2.2);
-o-transform: scale(2.2);
transform: scale(2.2); }
.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
/*************************************
* CONTRACT
*/
.ladda-button[data-style=contract] {
overflow: hidden;
width: 100px; }
.ladda-button[data-style=contract] .ladda-spinner {
left: 50%;
margin-left: -16px; }
.ladda-button[data-style=contract][data-loading] {
border-radius: 50%;
width: 52px; }
.ladda-button[data-style=contract][data-loading] .ladda-label {
opacity: 0; }
.ladda-button[data-style=contract][data-loading] .ladda-spinner {
opacity: 1; }
/*************************************
* OVERLAY
*/
.ladda-button[data-style=contract-overlay] {
overflow: hidden;
width: 100px;
box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0); }
.ladda-button[data-style=contract-overlay] .ladda-spinner {
left: 50%;
margin-left: -16px; }
.ladda-button[data-style=contract-overlay][data-loading] {
border-radius: 50%;
width: 52px;
/*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/
box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0.8); }
.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
opacity: 0; }
.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
opacity: 1; }
/*************************************
* CONFIG
*/
/*************************************
* BUTTON THEME
*/
.ladda-button {
background: #666;
border: 0;
padding: 14px 18px;
font-size: 18px;
cursor: pointer;
color: #fff;
border-radius: 2px;
border: 1px solid transparent;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.ladda-button:hover {
border-color: rgba(0, 0, 0, 0.07);
background-color: #888; }
.ladda-button[data-color=green] {
background: #2aca76; }
.ladda-button[data-color=green]:hover {
background-color: #38d683; }
.ladda-button[data-color=blue] {
background: #53b5e6; }
.ladda-button[data-color=blue]:hover {
background-color: #69bfe9; }
.ladda-button[data-color=red] {
background: #ea8557; }
.ladda-button[data-color=red]:hover {
background-color: #ed956e; }
.ladda-button[data-color=purple] {
background: #9973c2; }
.ladda-button[data-color=purple]:hover {
background-color: #a685ca; }
.ladda-button[data-color=mint] {
background: #16a085; }
.ladda-button[data-color=mint]:hover {
background-color: #19b698; }
.ladda-button[disabled], .ladda-button[data-loading] {
border-color: rgba(0, 0, 0, 0.07);
cursor: default;
background-color: #999; }
.ladda-button[disabled]:hover, .ladda-button[data-loading]:hover {
cursor: default;
background-color: #999; }
.ladda-button[data-size=xs] {
padding: 4px 8px; }
.ladda-button[data-size=xs] .ladda-label {
font-size: 0.7em; }
.ladda-button[data-size=s] {
padding: 6px 10px; }
.ladda-button[data-size=s] .ladda-label {
font-size: 0.9em; }
.ladda-button[data-size=l] .ladda-label {
font-size: 1.2em; }
.ladda-button[data-size=xl] .ladda-label {
font-size: 1.5em; }

View File

@@ -0,0 +1,157 @@
(function(root, factory) {
if (typeof exports === "object") {
module.exports = factory();
} else if (typeof define === "function" && define.amd) {
define([ "spin" ], factory);
} else {
root.Ladda = factory(root.Spinner);
}
})(this, function(Spinner) {
"use strict";
var ALL_INSTANCES = [];
function create(button) {
if (typeof button === "undefined") {
console.warn("Ladda button target must be defined.");
return;
}
if (!button.querySelector(".ladda-label")) {
button.innerHTML = '<span class="ladda-label">' + button.innerHTML + "</span>";
}
var spinner = createSpinner(button);
var spinnerWrapper = document.createElement("span");
spinnerWrapper.className = "ladda-spinner";
button.appendChild(spinnerWrapper);
var timer;
var instance = {
start: function() {
button.setAttribute("disabled", "");
button.setAttribute("data-loading", "");
clearTimeout(timer);
spinner.spin(spinnerWrapper);
this.setProgress(0);
return this;
},
startAfter: function(delay) {
clearTimeout(timer);
timer = setTimeout(function() {
instance.start();
}, delay);
return this;
},
stop: function() {
button.removeAttribute("disabled");
button.removeAttribute("data-loading");
clearTimeout(timer);
timer = setTimeout(function() {
spinner.stop();
}, 1e3);
return this;
},
toggle: function() {
if (this.isLoading()) {
this.stop();
} else {
this.start();
}
return this;
},
setProgress: function(progress) {
progress = Math.max(Math.min(progress, 1), 0);
var progressElement = button.querySelector(".ladda-progress");
if (progress === 0 && progressElement && progressElement.parentNode) {
progressElement.parentNode.removeChild(progressElement);
} else {
if (!progressElement) {
progressElement = document.createElement("div");
progressElement.className = "ladda-progress";
button.appendChild(progressElement);
}
progressElement.style.width = (progress || 0) * button.offsetWidth + "px";
}
},
enable: function() {
this.stop();
return this;
},
disable: function() {
this.stop();
button.setAttribute("disabled", "");
return this;
},
isLoading: function() {
return button.hasAttribute("data-loading");
}
};
ALL_INSTANCES.push(instance);
return instance;
}
function bind(target, options) {
options = options || {};
var targets = [];
if (typeof target === "string") {
targets = toArray(document.querySelectorAll(target));
} else if (typeof target === "object" && typeof target.nodeName === "string") {
targets = [ target ];
}
for (var i = 0, len = targets.length; i < len; i++) {
(function() {
var element = targets[i];
if (typeof element.addEventListener === "function") {
var instance = create(element);
var timeout = -1;
element.addEventListener("click", function() {
instance.startAfter(1);
if (typeof options.timeout === "number") {
clearTimeout(timeout);
timeout = setTimeout(instance.stop, options.timeout);
}
if (typeof options.callback === "function") {
options.callback.apply(null, [ instance ]);
}
}, false);
}
})();
}
}
function stopAll() {
for (var i = 0, len = ALL_INSTANCES.length; i < len; i++) {
ALL_INSTANCES[i].stop();
}
}
function createSpinner(button) {
var height = button.offsetHeight, spinnerColor;
if (height > 32) {
height *= .8;
}
if (button.hasAttribute("data-spinner-size")) {
height = parseInt(button.getAttribute("data-spinner-size"), 10);
}
if (button.hasAttribute("data-spinner-color")) {
spinnerColor = button.getAttribute("data-spinner-color");
}
var lines = 12, radius = height * .2, length = radius * .6, width = radius < 7 ? 2 : 3;
return new Spinner({
color: spinnerColor || "#fff",
lines: lines,
radius: radius,
length: length,
width: width,
zIndex: "auto",
top: "auto",
left: "auto",
className: ""
});
}
function toArray(nodes) {
var a = [];
for (var i = 0; i < nodes.length; i++) {
a.push(nodes[i]);
}
return a;
}
return {
bind: bind,
create: create,
stopAll: stopAll
};
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(["spin"],b):a.Ladda=b(a.Spinner)}(this,function(a){"use strict";function b(a){if("undefined"==typeof a)return console.warn("Ladda button target must be defined."),void 0;a.querySelector(".ladda-label")||(a.innerHTML='<span class="ladda-label">'+a.innerHTML+"</span>");var b=e(a),c=document.createElement("span");c.className="ladda-spinner",a.appendChild(c);var d,f={start:function(){return a.setAttribute("disabled",""),a.setAttribute("data-loading",""),clearTimeout(d),b.spin(c),this.setProgress(0),this},startAfter:function(a){return clearTimeout(d),d=setTimeout(function(){f.start()},a),this},stop:function(){return a.removeAttribute("disabled"),a.removeAttribute("data-loading"),clearTimeout(d),d=setTimeout(function(){b.stop()},1e3),this},toggle:function(){return this.isLoading()?this.stop():this.start(),this},setProgress:function(b){b=Math.max(Math.min(b,1),0);var c=a.querySelector(".ladda-progress");0===b&&c&&c.parentNode?c.parentNode.removeChild(c):(c||(c=document.createElement("div"),c.className="ladda-progress",a.appendChild(c)),c.style.width=(b||0)*a.offsetWidth+"px")},enable:function(){return this.stop(),this},disable:function(){return this.stop(),a.setAttribute("disabled",""),this},isLoading:function(){return a.hasAttribute("data-loading")}};return g.push(f),f}function c(a,c){c=c||{};var d=[];"string"==typeof a?d=f(document.querySelectorAll(a)):"object"==typeof a&&"string"==typeof a.nodeName&&(d=[a]);for(var e=0,g=d.length;g>e;e++)!function(){var a=d[e];if("function"==typeof a.addEventListener){var f=b(a),g=-1;a.addEventListener("click",function(){f.startAfter(1),"number"==typeof c.timeout&&(clearTimeout(g),g=setTimeout(f.stop,c.timeout)),"function"==typeof c.callback&&c.callback.apply(null,[f])},!1)}}()}function d(){for(var a=0,b=g.length;b>a;a++)g[a].stop()}function e(b){var c,d=b.offsetHeight;d>32&&(d*=.8),b.hasAttribute("data-spinner-size")&&(d=parseInt(b.getAttribute("data-spinner-size"),10)),b.hasAttribute("data-spinner-color")&&(c=b.getAttribute("data-spinner-color"));var e=12,f=.2*d,g=.6*f,h=7>f?2:3;return new a({color:c||"#fff",lines:e,radius:f,length:g,width:h,zIndex:"auto",top:"auto",left:"auto",className:""})}function f(a){for(var b=[],c=0;c<a.length;c++)b.push(a[c]);return b}var g=[];return{bind:c,create:b,stopAll:d}});

View File

@@ -0,0 +1,218 @@
(function(root, factory) {
if (typeof exports == "object") module.exports = factory(); else if (typeof define == "function" && define.amd) define(factory); else root.Spinner = factory();
})(this, function() {
"use strict";
var prefixes = [ "webkit", "Moz", "ms", "O" ], animations = {}, useCssAnimations;
function createEl(tag, prop) {
var el = document.createElement(tag || "div"), n;
for (n in prop) el[n] = prop[n];
return el;
}
function ins(parent) {
for (var i = 1, n = arguments.length; i < n; i++) parent.appendChild(arguments[i]);
return parent;
}
var sheet = function() {
var el = createEl("style", {
type: "text/css"
});
ins(document.getElementsByTagName("head")[0], el);
return el.sheet || el.styleSheet;
}();
function addAnimation(alpha, trail, i, lines) {
var name = [ "opacity", trail, ~~(alpha * 100), i, lines ].join("-"), start = .01 + i / lines * 100, z = Math.max(1 - (1 - alpha) / trail * (100 - start), alpha), prefix = useCssAnimations.substring(0, useCssAnimations.indexOf("Animation")).toLowerCase(), pre = prefix && "-" + prefix + "-" || "";
if (!animations[name]) {
sheet.insertRule("@" + pre + "keyframes " + name + "{" + "0%{opacity:" + z + "}" + start + "%{opacity:" + alpha + "}" + (start + .01) + "%{opacity:1}" + (start + trail) % 100 + "%{opacity:" + alpha + "}" + "100%{opacity:" + z + "}" + "}", sheet.cssRules.length);
animations[name] = 1;
}
return name;
}
function vendor(el, prop) {
var s = el.style, pp, i;
if (s[prop] !== undefined) return prop;
prop = prop.charAt(0).toUpperCase() + prop.slice(1);
for (i = 0; i < prefixes.length; i++) {
pp = prefixes[i] + prop;
if (s[pp] !== undefined) return pp;
}
}
function css(el, prop) {
for (var n in prop) el.style[vendor(el, n) || n] = prop[n];
return el;
}
function merge(obj) {
for (var i = 1; i < arguments.length; i++) {
var def = arguments[i];
for (var n in def) if (obj[n] === undefined) obj[n] = def[n];
}
return obj;
}
function pos(el) {
var o = {
x: el.offsetLeft,
y: el.offsetTop
};
while (el = el.offsetParent) o.x += el.offsetLeft, o.y += el.offsetTop;
return o;
}
var defaults = {
lines: 12,
length: 7,
width: 5,
radius: 10,
rotate: 0,
corners: 1,
color: "#000",
direction: 1,
speed: 1,
trail: 100,
opacity: 1 / 4,
fps: 20,
zIndex: 2e9,
className: "spinner",
top: "auto",
left: "auto",
position: "relative"
};
function Spinner(o) {
if (typeof this == "undefined") return new Spinner(o);
this.opts = merge(o || {}, Spinner.defaults, defaults);
}
Spinner.defaults = {};
merge(Spinner.prototype, {
spin: function(target) {
this.stop();
var self = this, o = self.opts, el = self.el = css(createEl(0, {
className: o.className
}), {
position: o.position,
width: 0,
zIndex: o.zIndex
}), mid = o.radius + o.length + o.width, ep, tp;
if (target) {
target.insertBefore(el, target.firstChild || null);
tp = pos(target);
ep = pos(el);
css(el, {
left: (o.left == "auto" ? tp.x - ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + "px",
top: (o.top == "auto" ? tp.y - ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + "px"
});
}
el.setAttribute("role", "progressbar");
self.lines(el, self.opts);
if (!useCssAnimations) {
var i = 0, start = (o.lines - 1) * (1 - o.direction) / 2, alpha, fps = o.fps, f = fps / o.speed, ostep = (1 - o.opacity) / (f * o.trail / 100), astep = f / o.lines;
(function anim() {
i++;
for (var j = 0; j < o.lines; j++) {
alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity);
self.opacity(el, j * o.direction + start, alpha, o);
}
self.timeout = self.el && setTimeout(anim, ~~(1e3 / fps));
})();
}
return self;
},
stop: function() {
var el = this.el;
if (el) {
clearTimeout(this.timeout);
if (el.parentNode) el.parentNode.removeChild(el);
this.el = undefined;
}
return this;
},
lines: function(el, o) {
var i = 0, start = (o.lines - 1) * (1 - o.direction) / 2, seg;
function fill(color, shadow) {
return css(createEl(), {
position: "absolute",
width: o.length + o.width + "px",
height: o.width + "px",
background: color,
boxShadow: shadow,
transformOrigin: "left",
transform: "rotate(" + ~~(360 / o.lines * i + o.rotate) + "deg) translate(" + o.radius + "px" + ",0)",
borderRadius: (o.corners * o.width >> 1) + "px"
});
}
for (;i < o.lines; i++) {
seg = css(createEl(), {
position: "absolute",
top: 1 + ~(o.width / 2) + "px",
transform: o.hwaccel ? "translate3d(0,0,0)" : "",
opacity: o.opacity,
animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + " " + 1 / o.speed + "s linear infinite"
});
if (o.shadow) ins(seg, css(fill("#000", "0 0 4px " + "#000"), {
top: 2 + "px"
}));
ins(el, ins(seg, fill(o.color, "0 0 1px rgba(0,0,0,.1)")));
}
return el;
},
opacity: function(el, i, val) {
if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
}
});
function initVML() {
function vml(tag, attr) {
return createEl("<" + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr);
}
sheet.addRule(".spin-vml", "behavior:url(#default#VML)");
Spinner.prototype.lines = function(el, o) {
var r = o.length + o.width, s = 2 * r;
function grp() {
return css(vml("group", {
coordsize: s + " " + s,
coordorigin: -r + " " + -r
}), {
width: s,
height: s
});
}
var margin = -(o.width + o.length) * 2 + "px", g = css(grp(), {
position: "absolute",
top: margin,
left: margin
}), i;
function seg(i, dx, filter) {
ins(g, ins(css(grp(), {
rotation: 360 / o.lines * i + "deg",
left: ~~dx
}), ins(css(vml("roundrect", {
arcsize: o.corners
}), {
width: r,
height: o.width,
left: o.radius,
top: -o.width >> 1,
filter: filter
}), vml("fill", {
color: o.color,
opacity: o.opacity
}), vml("stroke", {
opacity: 0
}))));
}
if (o.shadow) for (i = 1; i <= o.lines; i++) seg(i, -2, "progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");
for (i = 1; i <= o.lines; i++) seg(i);
return ins(el, g);
};
Spinner.prototype.opacity = function(el, i, val, o) {
var c = el.firstChild;
o = o.shadow && o.lines || 0;
if (c && i + o < c.childNodes.length) {
c = c.childNodes[i + o];
c = c && c.firstChild;
c = c && c.firstChild;
if (c) c.opacity = val;
}
};
}
var probe = css(createEl("group"), {
behavior: "url(#default#VML)"
});
if (!vendor(probe, "transform") && probe.adj) initVML(); else useCssAnimations = vendor(probe, "animation");
return Spinner;
});

View File

@@ -0,0 +1,5 @@
/* Spin */
!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(b):a.Spinner=b()}(this,function(){"use strict";function a(a,b){var c,d=document.createElement(a||"div");for(c in b)d[c]=b[c];return d}function b(a){for(var b=1,c=arguments.length;c>b;b++)a.appendChild(arguments[b]);return a}function c(a,b,c,d){var e=["opacity",b,~~(100*a),c,d].join("-"),f=.01+c/d*100,g=Math.max(1-(1-a)/b*(100-f),a),h=j.substring(0,j.indexOf("Animation")).toLowerCase(),i=h&&"-"+h+"-"||"";return l[e]||(m.insertRule("@"+i+"keyframes "+e+"{0%{opacity:"+g+"}"+f+"%{opacity:"+a+"}"+(f+.01)+"%{opacity:1}"+(f+b)%100+"%{opacity:"+a+"}100%{opacity:"+g+"}}",m.cssRules.length),l[e]=1),e}function d(a,b){var c,d,e=a.style;if(void 0!==e[b])return b;for(b=b.charAt(0).toUpperCase()+b.slice(1),d=0;d<k.length;d++)if(c=k[d]+b,void 0!==e[c])return c}function e(a,b){for(var c in b)a.style[d(a,c)||c]=b[c];return a}function f(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)void 0===a[d]&&(a[d]=c[d])}return a}function g(a){for(var b={x:a.offsetLeft,y:a.offsetTop};a=a.offsetParent;)b.x+=a.offsetLeft,b.y+=a.offsetTop;return b}function h(a){return"undefined"==typeof this?new h(a):(this.opts=f(a||{},h.defaults,n),void 0)}function i(){function c(b,c){return a("<"+b+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',c)}m.addRule(".spin-vml","behavior:url(#default#VML)"),h.prototype.lines=function(a,d){function f(){return e(c("group",{coordsize:j+" "+j,coordorigin:-i+" "+-i}),{width:j,height:j})}function g(a,g,h){b(l,b(e(f(),{rotation:360/d.lines*a+"deg",left:~~g}),b(e(c("roundrect",{arcsize:d.corners}),{width:i,height:d.width,left:d.radius,top:-d.width>>1,filter:h}),c("fill",{color:d.color,opacity:d.opacity}),c("stroke",{opacity:0}))))}var h,i=d.length+d.width,j=2*i,k=2*-(d.width+d.length)+"px",l=e(f(),{position:"absolute",top:k,left:k});if(d.shadow)for(h=1;h<=d.lines;h++)g(h,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(h=1;h<=d.lines;h++)g(h);return b(a,l)},h.prototype.opacity=function(a,b,c,d){var e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d<e.childNodes.length&&(e=e.childNodes[b+d],e=e&&e.firstChild,e=e&&e.firstChild,e&&(e.opacity=c))}}var j,k=["webkit","Moz","ms","O"],l={},m=function(){var c=a("style",{type:"text/css"});return b(document.getElementsByTagName("head")[0],c),c.sheet||c.styleSheet}(),n={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative"};h.defaults={},f(h.prototype,{spin:function(b){this.stop();var c,d,f=this,h=f.opts,i=f.el=e(a(0,{className:h.className}),{position:h.position,width:0,zIndex:h.zIndex}),k=h.radius+h.length+h.width;if(b&&(b.insertBefore(i,b.firstChild||null),d=g(b),c=g(i),e(i,{left:("auto"==h.left?d.x-c.x+(b.offsetWidth>>1):parseInt(h.left,10)+k)+"px",top:("auto"==h.top?d.y-c.y+(b.offsetHeight>>1):parseInt(h.top,10)+k)+"px"})),i.setAttribute("role","progressbar"),f.lines(i,f.opts),!j){var l,m=0,n=(h.lines-1)*(1-h.direction)/2,o=h.fps,p=o/h.speed,q=(1-h.opacity)/(p*h.trail/100),r=p/h.lines;!function s(){m++;for(var a=0;a<h.lines;a++)l=Math.max(1-(m+(h.lines-a)*r)%p*q,h.opacity),f.opacity(i,a*h.direction+n,l,h);f.timeout=f.el&&setTimeout(s,~~(1e3/o))}()}return f},stop:function(){var a=this.el;return a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=void 0),this},lines:function(d,f){function g(b,c){return e(a(),{position:"absolute",width:f.length+f.width+"px",height:f.width+"px",background:b,boxShadow:c,transformOrigin:"left",transform:"rotate("+~~(360/f.lines*i+f.rotate)+"deg) translate("+f.radius+"px,0)",borderRadius:(f.corners*f.width>>1)+"px"})}for(var h,i=0,k=(f.lines-1)*(1-f.direction)/2;i<f.lines;i++)h=e(a(),{position:"absolute",top:1+~(f.width/2)+"px",transform:f.hwaccel?"translate3d(0,0,0)":"",opacity:f.opacity,animation:j&&c(f.opacity,f.trail,k+i*f.direction,f.lines)+" "+1/f.speed+"s linear infinite"}),f.shadow&&b(h,e(g("#000","0 0 4px #000"),{top:"2px"})),b(d,b(h,g(f.color,"0 0 1px rgba(0,0,0,.1)")));return d},opacity:function(a,b,c){b<a.childNodes.length&&(a.childNodes[b].style.opacity=c)}});var o=e(a("group"),{behavior:"url(#default#VML)"});return!d(o,"transform")&&o.adj?i():j=d(o,"animation"),h});
/* Lada */
!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(["spin"],b):a.Ladda=b(a.Spinner)}(this,function(a){"use strict";function b(a){if("undefined"==typeof a)return console.warn("Ladda button target must be defined."),void 0;a.querySelector(".ladda-label")||(a.innerHTML='<span class="ladda-label">'+a.innerHTML+"</span>");var b=e(a),c=document.createElement("span");c.className="ladda-spinner",a.appendChild(c);var d,f={start:function(){return a.setAttribute("disabled",""),a.setAttribute("data-loading",""),clearTimeout(d),b.spin(c),this.setProgress(0),this},startAfter:function(a){return clearTimeout(d),d=setTimeout(function(){f.start()},a),this},stop:function(){return a.removeAttribute("disabled"),a.removeAttribute("data-loading"),clearTimeout(d),d=setTimeout(function(){b.stop()},1e3),this},toggle:function(){return this.isLoading()?this.stop():this.start(),this},setProgress:function(b){b=Math.max(Math.min(b,1),0);var c=a.querySelector(".ladda-progress");0===b&&c&&c.parentNode?c.parentNode.removeChild(c):(c||(c=document.createElement("div"),c.className="ladda-progress",a.appendChild(c)),c.style.width=(b||0)*a.offsetWidth+"px")},enable:function(){return this.stop(),this},disable:function(){return this.stop(),a.setAttribute("disabled",""),this},isLoading:function(){return a.hasAttribute("data-loading")}};return g.push(f),f}function c(a,c){c=c||{};var d=[];"string"==typeof a?d=f(document.querySelectorAll(a)):"object"==typeof a&&"string"==typeof a.nodeName&&(d=[a]);for(var e=0,g=d.length;g>e;e++)!function(){var a=d[e];if("function"==typeof a.addEventListener){var f=b(a),g=-1;a.addEventListener("click",function(){f.startAfter(1),"number"==typeof c.timeout&&(clearTimeout(g),g=setTimeout(f.stop,c.timeout)),"function"==typeof c.callback&&c.callback.apply(null,[f])},!1)}}()}function d(){for(var a=0,b=g.length;b>a;a++)g[a].stop()}function e(b){var c,d=b.offsetHeight;d>32&&(d*=.8),b.hasAttribute("data-spinner-size")&&(d=parseInt(b.getAttribute("data-spinner-size"),10)),b.hasAttribute("data-spinner-color")&&(c=b.getAttribute("data-spinner-color"));var e=12,f=.2*d,g=.6*f,h=7>f?2:3;return new a({color:c||"#fff",lines:e,radius:f,length:g,width:h,zIndex:"auto",top:"auto",left:"auto",className:""})}function f(a){for(var b=[],c=0;c<a.length;c++)b.push(a[c]);return b}var g=[];return{bind:c,create:b,stopAll:d}});

View File

@@ -0,0 +1,208 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ladda for Bootstrap 3 UI</title>
<meta name="description" content="Bootstrap 3 loading state for buttons">
<meta name="author" content="Maks Surguy">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/ladda-themeless.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Ladda UI for Bootstrap 3</h1>
<p>
This project was made by <a href="http://twitter.com/msurguy" target="_blank">@msurguy</a> and is used on the new <a href="http://bootsnipp.com" target="_blank">Bootsnipp</a> - a playground and collection of snippets for Bootstrap.
</p>
</p>
Original UI concept by <a href="http://twitter.com/hakimel" target="_blank">@hakimel</a> which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.
</p>
<h2>Demo <small>Click the buttons to see the effect</small></h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>
<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
<button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>
<button class="btn btn-primary ladda-button" data-style="expand-up"><span class="ladda-label">expand-up</span></button>
<button class="btn btn-primary ladda-button" data-style="expand-down"><span class="ladda-label">expand-down</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>
<button class="btn btn-info ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>
<button class="btn btn-info ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>
<button class="btn btn-warning ladda-button" data-style="slide-left"><span class="ladda-label">slide-left</span></button>
<button class="btn btn-warning ladda-button" data-style="slide-right"><span class="ladda-label">slide-right</span></button>
<button class="btn btn-warning ladda-button" data-style="slide-up"><span class="ladda-label">slide-up</span></button>
<button class="btn btn-warning ladda-button" data-style="slide-down"><span class="ladda-label">slide-down</span></button>
</p>
<p><button class="btn btn-warning ladda-button" data-style="contract"><span class="ladda-label">contract</span></button></p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center progress-demo">
<p>Built-in progress bar</p>
<p>
<button class="btn btn-danger ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>
<button class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
<button class="btn btn-danger ladda-button" data-style="contract"><span class="ladda-label">contract</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>Sizes</p>
<p>
<button class="btn btn-primary btn-xs ladda-button" data-style="expand-right" data-size="xs"><span class="ladda-label">extra small</span></button>
<button class="btn btn-primary btn-sm ladda-button" data-style="expand-right" data-size="s"><span class="ladda-label">small</span></button>
<button class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">large</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>Usage:</h2>
<hr>
<p>Include the CSS and Javascript for Spin.js and Ladda effect:</p>
<pre><code class="language-markup">&lt;link rel="stylesheet" href="dist/ladda-themeless.min.css"&gt;
&lt;script src="dist/spin.min.js"&gt;&lt;/script&gt;
&lt;script src="dist/ladda.min.js"&gt;&lt;/script&gt;</code></pre>
<p>Then to produce a button with the Ladda effect:</p>
<pre><code class="language-markup">&lt;button class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/button&gt;</code></pre>
<p>Or using &quot;a&quot; tag:</p>
<pre><code class="language-markup">&lt;a href="#" class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/a&gt;</code></pre>
<p>You can choose the style of the effect by setting the <code>data-style</code> attribute:</p>
<pre><code class="language-markup">data-style="expand-left"
data-style="expand-left"
data-style="expand-right"
data-style="expand-up"
data-style="zoom-in"
data-style="zoom-out"
data-style="slide-left"
data-style="slide-right"
data-style="slide-up"
data-style="slide-down"
data-style="contract"</code></pre>
<p>You can choose the size of the spinner by setting the <code>data-size</code> attribute:</p>
<pre><code class="language-markup">data-size="xs"
data-size="s"
data-size="l"
</code></pre>
<p>You can choose the color of the spinner by setting the <code>data-spinner-color</code> attribute (HEX code):</p>
<pre><code class="language-markup">data-spinner-color="#FF0000"</code></pre>
<h2>Control the UI state with Javascript:</h2>
<p>To activate the effect you can bind Ladda to all buttons that submit a form</p>
<pre><code class="language-javascript">Ladda.bind( 'input[type=submit]' );</code></pre>
<p>When using AJAX forms, you can use the following syntax:</p>
<pre><code class="language-markup">&lt;a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"&gt;&lt;span class="ladda-label"&gt;Submit form&lt;/span&gt;&lt;/a&gt;</code></pre>
<pre><code class="language-javascript">$(function() {
$('#form-submit').click(function(e){
e.preventDefault();
var l = Ladda.create(this);
l.start();
$.post("your-url",
{ data : data },
function(response){
console.log(response);
}, "json")
.always(function() { l.stop(); });
return false;
});
});</code></pre>
<p>Other methods available through Javascript</p>
<pre><code class="language-javascript">l.stop();
l.toggle();
l.isLoading();
l.setProgress( 0-1 );</code></pre>
<p> Love this? Tweet it!
<a href="http://twitter.com/share" class="twitter-share-button" data-text="Ladda Bootstrap - Buttons with built-in loading indicators for Bootstrap" data-url="https://github.com/msurguy/ladda-bootstrap" data-count="small" data-related="bootsnipp"></a></p>
<p style="margin-bottom:100px;">
Original Ladda UI concept by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a>, examples adapted to work with Bootstrap 3 by <a href="http://twitter.com/msurguy" target="_blank">@msurguy</a>
</p>
</div>
</div>
</div>
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script>
<script>
// Bind normal buttons
Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );
// Bind progress buttons and simulate loading progress
Ladda.bind( '.progress-demo button', {
callback: function( instance ) {
var progress = 0;
var interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
if( progress === 1 ) {
instance.stop();
clearInterval( interval );
}
}, 200 );
}
} );
// You can control loading explicitly using the JavaScript API
// as outlined below:
// var l = Ladda.create( document.querySelector( 'button' ) );
// l.start();
// l.stop();
// l.toggle();
// l.isLoading();
// l.setProgress( 0-1 );
</script>
<a class="fork" href="https://github.com/msurguy/Ladda-bootstrap"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="js/prism.js"></script>
</body>
</html>

View File

@@ -0,0 +1,317 @@
/*!
* Ladda 0.8.0
* http://lab.hakim.se/ladda
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/
(function( root, factory ) {
// CommonJS
if( typeof exports === 'object' ) {
module.exports = factory();
}
// AMD module
else if( typeof define === 'function' && define.amd ) {
define( [ './spin' ], factory );
}
// Browser global
else {
root.Ladda = factory( root.Spinner );
}
}
(this, function( Spinner ) {
'use strict';
// All currently instantiated instances of Ladda
var ALL_INSTANCES = [];
/**
* Creates a new instance of Ladda which wraps the
* target button element.
*
* @return An API object that can be used to control
* the loading animation state.
*/
function create( button ) {
if( typeof button === 'undefined' ) {
console.warn( "Ladda button target must be defined." );
return;
}
// The text contents must be wrapped in a ladda-label
// element, create one if it doesn't already exist
if( !button.querySelector( '.ladda-label' ) ) {
button.innerHTML = '<span class="ladda-label">'+ button.innerHTML +'</span>';
}
// Create the spinner
var spinner = createSpinner( button );
// Wrapper element for the spinner
var spinnerWrapper = document.createElement( 'span' );
spinnerWrapper.className = 'ladda-spinner';
button.appendChild( spinnerWrapper );
// Timer used to delay starting/stopping
var timer;
var instance = {
/**
* Enter the loading state.
*/
start: function() {
button.setAttribute( 'disabled', '' );
button.setAttribute( 'data-loading', '' );
clearTimeout( timer );
spinner.spin( spinnerWrapper );
this.setProgress( 0 );
return this; // chain
},
/**
* Enter the loading state, after a delay.
*/
startAfter: function( delay ) {
clearTimeout( timer );
timer = setTimeout( function() { instance.start(); }, delay );
return this; // chain
},
/**
* Exit the loading state.
*/
stop: function() {
button.removeAttribute( 'disabled' );
button.removeAttribute( 'data-loading' );
// Kill the animation after a delay to make sure it
// runs for the duration of the button transition
clearTimeout( timer );
timer = setTimeout( function() { spinner.stop(); }, 1000 );
return this; // chain
},
/**
* Toggle the loading state on/off.
*/
toggle: function() {
if( this.isLoading() ) {
this.stop();
}
else {
this.start();
}
return this; // chain
},
/**
* Sets the width of the visual progress bar inside of
* this Ladda button
*
* @param {Number} progress in the range of 0-1
*/
setProgress: function( progress ) {
// Cap it
progress = Math.max( Math.min( progress, 1 ), 0 );
var progressElement = button.querySelector( '.ladda-progress' );
// Remove the progress bar if we're at 0 progress
if( progress === 0 && progressElement && progressElement.parentNode ) {
progressElement.parentNode.removeChild( progressElement );
}
else {
if( !progressElement ) {
progressElement = document.createElement( 'div' );
progressElement.className = 'ladda-progress';
button.appendChild( progressElement );
}
progressElement.style.width = ( ( progress || 0 ) * button.offsetWidth ) + 'px';
}
},
enable: function() {
this.stop();
return this; // chain
},
disable: function () {
this.stop();
button.setAttribute( 'disabled', '' );
return this; // chain
},
isLoading: function() {
return button.hasAttribute( 'data-loading' );
},
getTarget : function() {
return button;
}
};
ALL_INSTANCES.push( instance );
return instance;
}
/**
* Binds the target buttons to automatically enter the
* loading state when clicked.
*
* @param target Either an HTML element or a CSS selector.
* @param options
* - timeout Number of milliseconds to wait before
* automatically cancelling the animation.
*/
function bind( target, options ) {
options = options || {};
var targets = [];
if( typeof target === 'string' ) {
targets = toArray( document.querySelectorAll( target ) );
}
else if( typeof target === 'object' && typeof target.nodeName === 'string' ) {
targets = [ target ];
}
for( var i = 0, len = targets.length; i < len; i++ ) {
(function() {
var element = targets[i];
// Make sure we're working with a DOM element
if( typeof element.addEventListener === 'function' ) {
var instance = create( element );
var timeout = -1;
element.addEventListener( 'click', function() {
// This is asynchronous to avoid an issue where setting
// the disabled attribute on the button prevents forms
// from submitting
instance.startAfter( 1 );
// Set a loading timeout if one is specified
if( typeof options.timeout === 'number' ) {
clearTimeout( timeout );
timeout = setTimeout( instance.stop, options.timeout );
}
// Invoke callbacks
if( typeof options.callback === 'function' ) {
options.callback.apply( null, [ instance ] );
}
}, false );
}
})();
}
}
/**
* Stops ALL current loading animations.
*/
function stopAll() {
for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) {
ALL_INSTANCES[i].stop();
}
}
function createSpinner( button ) {
var height = button.offsetHeight,
spinnerColor;
// If the button is tall we can afford some padding
if( height > 32 ) {
height *= 0.8;
}
// Prefer an explicit height if one is defined
if( button.hasAttribute( 'data-spinner-size' ) ) {
height = parseInt( button.getAttribute( 'data-spinner-size' ), 10 );
}
// Allow buttons to specify the color of the spinner element
if (button.hasAttribute('data-spinner-color' ) ) {
spinnerColor = button.getAttribute( 'data-spinner-color' );
}
var lines = 12,
radius = height * 0.2,
length = radius * 0.6,
width = radius < 7 ? 2 : 3;
return new Spinner( {
color: spinnerColor || '#fff',
lines: lines,
radius: radius,
length: length,
width: width,
zIndex: 'auto',
top: 'auto',
left: 'auto',
className: ''
} );
}
function toArray( nodes ) {
var a = [];
for ( var i = 0; i < nodes.length; i++ ) {
a.push( nodes[ i ] );
}
return a;
}
// Public API
return {
bind: bind,
create: create,
stopAll: stopAll
};
}));

View File

@@ -0,0 +1,11 @@
/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
Prism.languages.markup={comment:/&lt;!--[\w\W]*?-->/g,prolog:/&lt;\?.+?\?>/,doctype:/&lt;!DOCTYPE.+?>/,cdata:/&lt;!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^&lt;\/?[\w:-]+/i,inside:{punctuation:/^&lt;\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&amp;#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|&lt;=?|>=?|={1,3}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
;
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});
;

View File

@@ -0,0 +1,349 @@
//fgnass.github.com/spin.js#v1.3
/*!
* Copyright (c) 2011-2013 Felix Gnass
* Licensed under the MIT license
*/
(function(root, factory) {
/* CommonJS */
if (typeof exports == 'object') module.exports = factory()
/* AMD module */
else if (typeof define == 'function' && define.amd) define(factory)
/* Browser global */
else root.Spinner = factory()
}
(this, function() {
"use strict";
var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
, animations = {} /* Animation rules keyed by their name */
, useCssAnimations /* Whether to use CSS animations or setTimeout */
/**
* Utility function to create elements. If no tag name is given,
* a DIV is created. Optionally properties can be passed.
*/
function createEl(tag, prop) {
var el = document.createElement(tag || 'div')
, n
for(n in prop) el[n] = prop[n]
return el
}
/**
* Appends children and returns the parent.
*/
function ins(parent /* child1, child2, ...*/) {
for (var i=1, n=arguments.length; i<n; i++)
parent.appendChild(arguments[i])
return parent
}
/**
* Insert a new stylesheet to hold the @keyframe or VML rules.
*/
var sheet = (function() {
var el = createEl('style', {type : 'text/css'})
ins(document.getElementsByTagName('head')[0], el)
return el.sheet || el.styleSheet
}())
/**
* Creates an opacity keyframe animation rule and returns its name.
* Since most mobile Webkits have timing issues with animation-delay,
* we create separate rules for each line/segment.
*/
function addAnimation(alpha, trail, i, lines) {
var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-')
, start = 0.01 + i/lines * 100
, z = Math.max(1 - (1-alpha) / trail * (100-start), alpha)
, prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase()
, pre = prefix && '-' + prefix + '-' || ''
if (!animations[name]) {
sheet.insertRule(
'@' + pre + 'keyframes ' + name + '{' +
'0%{opacity:' + z + '}' +
start + '%{opacity:' + alpha + '}' +
(start+0.01) + '%{opacity:1}' +
(start+trail) % 100 + '%{opacity:' + alpha + '}' +
'100%{opacity:' + z + '}' +
'}', sheet.cssRules.length)
animations[name] = 1
}
return name
}
/**
* Tries various vendor prefixes and returns the first supported property.
*/
function vendor(el, prop) {
var s = el.style
, pp
, i
if(s[prop] !== undefined) return prop
prop = prop.charAt(0).toUpperCase() + prop.slice(1)
for(i=0; i<prefixes.length; i++) {
pp = prefixes[i]+prop
if(s[pp] !== undefined) return pp
}
}
/**
* Sets multiple style properties at once.
*/
function css(el, prop) {
for (var n in prop)
el.style[vendor(el, n)||n] = prop[n]
return el
}
/**
* Fills in default values.
*/
function merge(obj) {
for (var i=1; i < arguments.length; i++) {
var def = arguments[i]
for (var n in def)
if (obj[n] === undefined) obj[n] = def[n]
}
return obj
}
/**
* Returns the absolute page-offset of the given element.
*/
function pos(el) {
var o = { x:el.offsetLeft, y:el.offsetTop }
while((el = el.offsetParent))
o.x+=el.offsetLeft, o.y+=el.offsetTop
return o
}
// Built-in defaults
var defaults = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 5, // The line thickness
radius: 10, // The radius of the inner circle
rotate: 0, // Rotation offset
corners: 1, // Roundness (0..1)
color: '#000', // #rgb or #rrggbb
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 1, // Rounds per second
trail: 100, // Afterglow percentage
opacity: 1/4, // Opacity of the lines
fps: 20, // Frames per second when using setTimeout()
zIndex: 2e9, // Use a high z-index by default
className: 'spinner', // CSS class to assign to the element
top: 'auto', // center vertically
left: 'auto', // center horizontally
position: 'relative' // element position
}
/** The constructor */
function Spinner(o) {
if (typeof this == 'undefined') return new Spinner(o)
this.opts = merge(o || {}, Spinner.defaults, defaults)
}
// Global defaults that override the built-ins:
Spinner.defaults = {}
merge(Spinner.prototype, {
/**
* Adds the spinner to the given target element. If this instance is already
* spinning, it is automatically removed from its previous target b calling
* stop() internally.
*/
spin: function(target) {
this.stop()
var self = this
, o = self.opts
, el = self.el = css(createEl(0, {className: o.className}), {position: o.position, width: 0, zIndex: o.zIndex})
, mid = o.radius+o.length+o.width
, ep // element position
, tp // target position
if (target) {
target.insertBefore(el, target.firstChild||null)
tp = pos(target)
ep = pos(el)
css(el, {
left: (o.left == 'auto' ? tp.x-ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + 'px',
top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px'
})
}
el.setAttribute('role', 'progressbar')
self.lines(el, self.opts)
if (!useCssAnimations) {
// No CSS animation support, use setTimeout() instead
var i = 0
, start = (o.lines - 1) * (1 - o.direction) / 2
, alpha
, fps = o.fps
, f = fps/o.speed
, ostep = (1-o.opacity) / (f*o.trail / 100)
, astep = f/o.lines
;(function anim() {
i++;
for (var j = 0; j < o.lines; j++) {
alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity)
self.opacity(el, j * o.direction + start, alpha, o)
}
self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
})()
}
return self
},
/**
* Stops and removes the Spinner.
*/
stop: function() {
var el = this.el
if (el) {
clearTimeout(this.timeout)
if (el.parentNode) el.parentNode.removeChild(el)
this.el = undefined
}
return this
},
/**
* Internal method that draws the individual lines. Will be overwritten
* in VML fallback mode below.
*/
lines: function(el, o) {
var i = 0
, start = (o.lines - 1) * (1 - o.direction) / 2
, seg
function fill(color, shadow) {
return css(createEl(), {
position: 'absolute',
width: (o.length+o.width) + 'px',
height: o.width + 'px',
background: color,
boxShadow: shadow,
transformOrigin: 'left',
transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)',
borderRadius: (o.corners * o.width>>1) + 'px'
})
}
for (; i < o.lines; i++) {
seg = css(createEl(), {
position: 'absolute',
top: 1+~(o.width/2) + 'px',
transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
opacity: o.opacity,
animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite'
})
if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}))
ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')))
}
return el
},
/**
* Internal method that adjusts the opacity of a single line.
* Will be overwritten in VML fallback mode below.
*/
opacity: function(el, i, val) {
if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
}
})
function initVML() {
/* Utility function to create a VML tag */
function vml(tag, attr) {
return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
}
// No CSS transforms but VML support, add a CSS rule for VML elements:
sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
Spinner.prototype.lines = function(el, o) {
var r = o.length+o.width
, s = 2*r
function grp() {
return css(
vml('group', {
coordsize: s + ' ' + s,
coordorigin: -r + ' ' + -r
}),
{ width: s, height: s }
)
}
var margin = -(o.width+o.length)*2 + 'px'
, g = css(grp(), {position: 'absolute', top: margin, left: margin})
, i
function seg(i, dx, filter) {
ins(g,
ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
ins(css(vml('roundrect', {arcsize: o.corners}), {
width: r,
height: o.width,
left: o.radius,
top: -o.width>>1,
filter: filter
}),
vml('fill', {color: o.color, opacity: o.opacity}),
vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
)
)
)
}
if (o.shadow)
for (i = 1; i <= o.lines; i++)
seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
for (i = 1; i <= o.lines; i++) seg(i)
return ins(el, g)
}
Spinner.prototype.opacity = function(el, i, val, o) {
var c = el.firstChild
o = o.shadow && o.lines || 0
if (c && i+o < c.childNodes.length) {
c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild
if (c) c.opacity = val
}
}
}
var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
if (!vendor(probe, 'transform') && probe.adj) initVML()
else useCssAnimations = vendor(probe, 'animation')
return Spinner
}));

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,5 @@
/* Spin */
!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(b):a.Spinner=b()}(this,function(){"use strict";function a(a,b){var c,d=document.createElement(a||"div");for(c in b)d[c]=b[c];return d}function b(a){for(var b=1,c=arguments.length;c>b;b++)a.appendChild(arguments[b]);return a}function c(a,b,c,d){var e=["opacity",b,~~(100*a),c,d].join("-"),f=.01+c/d*100,g=Math.max(1-(1-a)/b*(100-f),a),h=j.substring(0,j.indexOf("Animation")).toLowerCase(),i=h&&"-"+h+"-"||"";return l[e]||(m.insertRule("@"+i+"keyframes "+e+"{0%{opacity:"+g+"}"+f+"%{opacity:"+a+"}"+(f+.01)+"%{opacity:1}"+(f+b)%100+"%{opacity:"+a+"}100%{opacity:"+g+"}}",m.cssRules.length),l[e]=1),e}function d(a,b){var c,d,e=a.style;if(void 0!==e[b])return b;for(b=b.charAt(0).toUpperCase()+b.slice(1),d=0;d<k.length;d++)if(c=k[d]+b,void 0!==e[c])return c}function e(a,b){for(var c in b)a.style[d(a,c)||c]=b[c];return a}function f(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)void 0===a[d]&&(a[d]=c[d])}return a}function g(a){for(var b={x:a.offsetLeft,y:a.offsetTop};a=a.offsetParent;)b.x+=a.offsetLeft,b.y+=a.offsetTop;return b}function h(a){return"undefined"==typeof this?new h(a):(this.opts=f(a||{},h.defaults,n),void 0)}function i(){function c(b,c){return a("<"+b+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',c)}m.addRule(".spin-vml","behavior:url(#default#VML)"),h.prototype.lines=function(a,d){function f(){return e(c("group",{coordsize:j+" "+j,coordorigin:-i+" "+-i}),{width:j,height:j})}function g(a,g,h){b(l,b(e(f(),{rotation:360/d.lines*a+"deg",left:~~g}),b(e(c("roundrect",{arcsize:d.corners}),{width:i,height:d.width,left:d.radius,top:-d.width>>1,filter:h}),c("fill",{color:d.color,opacity:d.opacity}),c("stroke",{opacity:0}))))}var h,i=d.length+d.width,j=2*i,k=2*-(d.width+d.length)+"px",l=e(f(),{position:"absolute",top:k,left:k});if(d.shadow)for(h=1;h<=d.lines;h++)g(h,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(h=1;h<=d.lines;h++)g(h);return b(a,l)},h.prototype.opacity=function(a,b,c,d){var e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d<e.childNodes.length&&(e=e.childNodes[b+d],e=e&&e.firstChild,e=e&&e.firstChild,e&&(e.opacity=c))}}var j,k=["webkit","Moz","ms","O"],l={},m=function(){var c=a("style",{type:"text/css"});return b(document.getElementsByTagName("head")[0],c),c.sheet||c.styleSheet}(),n={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative"};h.defaults={},f(h.prototype,{spin:function(b){this.stop();var c,d,f=this,h=f.opts,i=f.el=e(a(0,{className:h.className}),{position:h.position,width:0,zIndex:h.zIndex}),k=h.radius+h.length+h.width;if(b&&(b.insertBefore(i,b.firstChild||null),d=g(b),c=g(i),e(i,{left:("auto"==h.left?d.x-c.x+(b.offsetWidth>>1):parseInt(h.left,10)+k)+"px",top:("auto"==h.top?d.y-c.y+(b.offsetHeight>>1):parseInt(h.top,10)+k)+"px"})),i.setAttribute("role","progressbar"),f.lines(i,f.opts),!j){var l,m=0,n=(h.lines-1)*(1-h.direction)/2,o=h.fps,p=o/h.speed,q=(1-h.opacity)/(p*h.trail/100),r=p/h.lines;!function s(){m++;for(var a=0;a<h.lines;a++)l=Math.max(1-(m+(h.lines-a)*r)%p*q,h.opacity),f.opacity(i,a*h.direction+n,l,h);f.timeout=f.el&&setTimeout(s,~~(1e3/o))}()}return f},stop:function(){var a=this.el;return a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=void 0),this},lines:function(d,f){function g(b,c){return e(a(),{position:"absolute",width:f.length+f.width+"px",height:f.width+"px",background:b,boxShadow:c,transformOrigin:"left",transform:"rotate("+~~(360/f.lines*i+f.rotate)+"deg) translate("+f.radius+"px,0)",borderRadius:(f.corners*f.width>>1)+"px"})}for(var h,i=0,k=(f.lines-1)*(1-f.direction)/2;i<f.lines;i++)h=e(a(),{position:"absolute",top:1+~(f.width/2)+"px",transform:f.hwaccel?"translate3d(0,0,0)":"",opacity:f.opacity,animation:j&&c(f.opacity,f.trail,k+i*f.direction,f.lines)+" "+1/f.speed+"s linear infinite"}),f.shadow&&b(h,e(g("#000","0 0 4px #000"),{top:"2px"})),b(d,b(h,g(f.color,"0 0 1px rgba(0,0,0,.1)")));return d},opacity:function(a,b,c){b<a.childNodes.length&&(a.childNodes[b].style.opacity=c)}});var o=e(a("group"),{behavior:"url(#default#VML)"});return!d(o,"transform")&&o.adj?i():j=d(o,"animation"),h});
/* Lada */
!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(["spin"],b):a.Ladda=b(a.Spinner)}(this,function(a){"use strict";function b(a){if("undefined"==typeof a)return console.warn("Ladda button target must be defined."),void 0;a.querySelector(".ladda-label")||(a.innerHTML='<span class="ladda-label">'+a.innerHTML+"</span>");var b=e(a),c=document.createElement("span");c.className="ladda-spinner",a.appendChild(c);var d,f={start:function(){return a.setAttribute("disabled",""),a.setAttribute("data-loading",""),clearTimeout(d),b.spin(c),this.setProgress(0),this},startAfter:function(a){return clearTimeout(d),d=setTimeout(function(){f.start()},a),this},stop:function(){return a.removeAttribute("disabled"),a.removeAttribute("data-loading"),clearTimeout(d),d=setTimeout(function(){b.stop()},1e3),this},toggle:function(){return this.isLoading()?this.stop():this.start(),this},setProgress:function(b){b=Math.max(Math.min(b,1),0);var c=a.querySelector(".ladda-progress");0===b&&c&&c.parentNode?c.parentNode.removeChild(c):(c||(c=document.createElement("div"),c.className="ladda-progress",a.appendChild(c)),c.style.width=(b||0)*a.offsetWidth+"px")},enable:function(){return this.stop(),this},disable:function(){return this.stop(),a.setAttribute("disabled",""),this},isLoading:function(){return a.hasAttribute("data-loading")}};return g.push(f),f}function c(a,c){c=c||{};var d=[];"string"==typeof a?d=f(document.querySelectorAll(a)):"object"==typeof a&&"string"==typeof a.nodeName&&(d=[a]);for(var e=0,g=d.length;g>e;e++)!function(){var a=d[e];if("function"==typeof a.addEventListener){var f=b(a),g=-1;a.addEventListener("click",function(){f.startAfter(1),"number"==typeof c.timeout&&(clearTimeout(g),g=setTimeout(f.stop,c.timeout)),"function"==typeof c.callback&&c.callback.apply(null,[f])},!1)}}()}function d(){for(var a=0,b=g.length;b>a;a++)g[a].stop()}function e(b){var c,d=b.offsetHeight;d>32&&(d*=.8),b.hasAttribute("data-spinner-size")&&(d=parseInt(b.getAttribute("data-spinner-size"),10)),b.hasAttribute("data-spinner-color")&&(c=b.getAttribute("data-spinner-color"));var e=12,f=.2*d,g=.6*f,h=7>f?2:3;return new a({color:c||"#fff",lines:e,radius:f,length:g,width:h,zIndex:"auto",top:"auto",left:"auto",className:""})}function f(a){for(var b=[],c=0;c<a.length;c++)b.push(a[c]);return b}var g=[];return{bind:c,create:b,stopAll:d}});

View File

@@ -0,0 +1,164 @@
/*!
* bootstrap-progressbar v0.7.0 by @minddust
* Copyright (c) 2012-2014 Stephan Gross
*
* https://www.minddust.com/bootstrap-progressbar
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
(function($) {
'use strict';
// PROGRESSBAR CLASS DEFINITION
// ============================
var Progressbar = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, Progressbar.defaults, options);
};
Progressbar.defaults = {
transition_delay: 300,
refresh_speed: 50,
display_text: 'none',
use_percentage: true,
percent_format: function(percent) { return percent + '%'; },
amount_format: function(amount_part, amount_total) { return amount_part + ' / ' + amount_total; },
update: $.noop,
done: $.noop,
fail: $.noop
};
Progressbar.prototype.transition = function() {
var $this = this.$element;
var $parent = $this.parent();
var $back_text = this.$back_text;
var $front_text = this.$front_text;
var options = this.options;
var aria_valuetransitiongoal = $this.attr('data-aria-valuetransitiongoal');
var aria_valuemin = $this.attr('aria-valuemin') || 0;
var aria_valuemax = $this.attr('aria-valuemax') || 100;
var is_vertical = $parent.hasClass('vertical');
var update = options.update && typeof options.update === 'function' ? options.update : Progressbar.defaults.update;
var done = options.done && typeof options.done === 'function' ? options.done : Progressbar.defaults.done;
var fail = options.fail && typeof options.fail === 'function' ? options.fail : Progressbar.defaults.fail;
if (!aria_valuetransitiongoal) {
fail('data-aria-valuetransitiongoal not set');
return;
}
var percentage = Math.round(100 * (aria_valuetransitiongoal - aria_valuemin) / (aria_valuemax - aria_valuemin));
if (options.display_text === 'center' && !$back_text && !$front_text) {
this.$back_text = $back_text = $('<span>', {class: 'progressbar-back-text'}).prependTo($parent);
this.$front_text = $front_text = $('<span>', {class: 'progressbar-front-text'}).prependTo($this);
var parent_size;
if (is_vertical) {
parent_size = $parent.css('height');
$back_text.css({height: parent_size, 'line-height': parent_size});
$front_text.css({height: parent_size, 'line-height': parent_size});
$(window).resize(function() {
parent_size = $parent.css('height');
$back_text.css({height: parent_size, 'line-height': parent_size});
$front_text.css({height: parent_size, 'line-height': parent_size});
}); // normal resizing would brick the structure because width is in px
}
else {
parent_size = $parent.css('width');
$front_text.css({width: parent_size});
$(window).resize(function() {
parent_size = $parent.css('width');
$front_text.css({width: parent_size});
}); // normal resizing would brick the structure because width is in px
}
}
setTimeout(function() {
var current_percentage;
var current_value;
var this_size;
var parent_size;
var text;
if (is_vertical) {
$this.css('height', percentage + '%');
}
else {
$this.css('width', percentage + '%');
}
var progress = setInterval(function() {
if (is_vertical) {
this_size = $this.height();
parent_size = $parent.height();
}
else {
this_size = $this.width();
parent_size = $parent.width();
}
current_percentage = Math.round(100 * this_size / parent_size);
current_value = Math.round(this_size / parent_size * (aria_valuemax - aria_valuemin));
if (current_percentage >= percentage) {
current_percentage = percentage;
current_value = aria_valuetransitiongoal;
done();
clearInterval(progress);
}
if (options.display_text !== 'none') {
text = options.use_percentage ? options.percent_format(current_percentage) : options.amount_format(current_value, aria_valuemax);
if (options.display_text === 'fill') {
$this.text(text);
}
else if (options.display_text === 'center') {
$back_text.text(text);
$front_text.text(text);
}
}
$this.attr('aria-valuenow', current_value);
update(current_percentage);
}, options.refresh_speed);
}, options.transition_delay);
};
// PROGRESSBAR PLUGIN DEFINITION
// =============================
var old = $.fn.progressbar;
$.fn.progressbar = function(option) {
return this.each(function () {
var $this = $(this);
var data = $this.data('bs.progressbar');
var options = typeof option === 'object' && option;
if (!data) {
$this.data('bs.progressbar', (data = new Progressbar(this, options)));
}
data.transition();
});
};
$.fn.progressbar.Constructor = Progressbar;
// PROGRESSBAR NO CONFLICT
// =======================
$.fn.progressbar.noConflict = function () {
$.fn.progressbar = old;
return this;
};
})(window.jQuery);

View File

@@ -0,0 +1,325 @@
/*!
* bootstrap-select v1.5.4
* http://silviomoreto.github.io/bootstrap-select/
*
* Copyright 2013 bootstrap-select
* Licensed under the MIT license
*/
.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="span"] {
float: none;
display: inline-block;
margin-bottom: 10px;
margin-left: 0;
}
.form-search .bootstrap-select.btn-group,
.form-inline .bootstrap-select.btn-group,
.form-horizontal .bootstrap-select.btn-group {
margin-bottom: 0;
}
.bootstrap-select.form-control {
margin-bottom: 0;
padding: 0;
border: none;
}
.bootstrap-select.btn-group.pull-right,
.bootstrap-select.btn-group[class*="span"].pull-right,
.row-fluid .bootstrap-select.btn-group[class*="span"].pull-right {
float: right;
}
.input-append .bootstrap-select.btn-group {
margin-left: -1px;
}
.input-prepend .bootstrap-select.btn-group {
margin-right: -1px;
}
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: auto;
min-width: 220px;
}
.bootstrap-select {
/*width: 220px\9; IE8 and below*/
width: 220px\0; /*IE9 and below*/
}
.bootstrap-select.form-control:not([class*="span"]) {
width: 100%;
}
.bootstrap-select > .btn.input-sm{
font-size: 12px;
}
.bootstrap-select > .btn.input-lg{
font-size: 16px;
}
.bootstrap-select > .btn {
width: 100%;
padding-right: 25px;
}
.error .bootstrap-select .btn {
border: 1px solid #b94a48;
}
.bootstrap-select.show-menu-arrow.open > .btn {
z-index: 2051;
}
.bootstrap-select .btn:focus {
outline: thin dotted #333333 !important;
outline: 5px auto -webkit-focus-ring-color !important;
outline-offset: -2px;
}
.bootstrap-select.btn-group .btn .filter-option {
display: inline-block;
overflow: hidden;
width: 100%;
float: left;
text-align: left;
}
.bootstrap-select.btn-group .btn .filter-option {
display: inline-block;
overflow: hidden;
width: 100%;
float: left;
text-align: left;
}
.bootstrap-select.btn-group .btn .caret {
position: absolute;
top: 50%;
right: 12px;
margin-top: -2px;
vertical-align: middle;
}
.bootstrap-select.btn-group > .disabled,
.bootstrap-select.btn-group .dropdown-menu li.disabled > a {
cursor: not-allowed;
}
.bootstrap-select.btn-group > .disabled:focus {
outline: none !important;
}
.bootstrap-select.btn-group[class*="span"] .btn {
width: 100%;
}
.bootstrap-select.btn-group .dropdown-menu {
min-width: 100%;
z-index: 2000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bootstrap-select.btn-group .dropdown-menu.inner {
position: static;
border: 0;
padding: 0;
margin: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.bootstrap-select.btn-group .dropdown-menu dt {
display: block;
padding: 3px 20px;
cursor: default;
}
.bootstrap-select.btn-group .div-contain {
overflow: hidden;
}
.bootstrap-select.btn-group .dropdown-menu li {
position: relative;
}
.bootstrap-select.btn-group .dropdown-menu li > a.opt {
position: relative;
padding-left: 35px;
}
.bootstrap-select.btn-group .dropdown-menu li > a {
cursor: pointer;
}
.bootstrap-select.btn-group .dropdown-menu li > dt small {
font-weight: normal;
}
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a i.check-mark {
position: absolute;
display: inline-block;
right: 15px;
margin-top: 2.5px;
}
.bootstrap-select.btn-group .dropdown-menu li a i.check-mark {
display: none;
}
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
margin-right: 34px;
}
.bootstrap-select.btn-group .dropdown-menu li small {
padding-left: 0.5em;
}
/*
.bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:hover small,
.bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:focus small,
.bootstrap-select.btn-group .dropdown-menu li.active:not(.disabled) > a small {
color: #64b1d8;
color: rgba(255,255,255,0.4);
}
*/
.bootstrap-select.btn-group .dropdown-menu li > dt small {
font-weight: normal;
}
.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #CCC;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: -4px;
left: 9px;
display: none;
}
.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
position: absolute;
bottom: -4px;
left: 10px;
display: none;
}
.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
bottom: auto;
top: -3px;
border-top: 7px solid #ccc;
border-bottom: 0;
border-top-color: rgba(0, 0, 0, 0.2);
}
.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
bottom: auto;
top: -3px;
border-top: 6px solid #ffffff;
border-bottom: 0;
}
.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
right: 12px;
left: auto;
}
.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
right: 13px;
left: auto;
}
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before,
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {
display: block;
}
.bootstrap-select.btn-group .no-results {
padding: 3px;
background: #f5f5f5;
margin: 0 5px;
}
.bootstrap-select.btn-group .dropdown-menu .notify {
position: absolute;
bottom: 5px;
width: 96%;
margin: 0 2%;
min-height: 26px;
padding: 3px 5px;
background: #f5f5f5;
border: 1px solid #e3e3e3;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
pointer-events: none;
opacity: 0.9;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mobile-device {
position: absolute;
top: 0;
left: 0;
display: block !important;
width: 100%;
height: 100% !important;
opacity: 0;
}
.bootstrap-select.fit-width {
width: auto !important;
}
.bootstrap-select.btn-group.fit-width .btn .filter-option {
position: static;
}
.bootstrap-select.btn-group.fit-width .btn .caret {
position: static;
top: auto;
margin-top: -1px;
}
.control-group.error .bootstrap-select .dropdown-toggle{
border-color: #b94a48;
}
.bootstrap-select-searchbox,
.bootstrap-select .bs-actionsbox {
padding: 4px 8px;
}
.bootstrap-select .bs-actionsbox {
float: left;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bootstrap-select-searchbox + .bs-actionsbox {
padding: 0 8px 4px;
}
.bootstrap-select-searchbox input {
margin-bottom: 0;
}
.bootstrap-select .bs-actionsbox .btn-group button {
width: 50%;
}

View File

@@ -0,0 +1,974 @@
/*!
* bootstrap-select v1.5.4
* http://silviomoreto.github.io/bootstrap-select/
*
* Copyright 2013 bootstrap-select
* Licensed under the MIT license
*/
!function($) {
'use strict';
$.expr[':'].icontains = function(obj, index, meta) {
return $(obj).text().toUpperCase().indexOf(meta[3].toUpperCase()) >= 0;
};
var Selectpicker = function(element, options, e) {
if (e) {
e.stopPropagation();
e.preventDefault();
}
this.$element = $(element);
this.$newElement = null;
this.$button = null;
this.$menu = null;
this.$lis = null;
//Merge defaults, options and data-attributes to make our options
this.options = $.extend({}, $.fn.selectpicker.defaults, this.$element.data(), typeof options == 'object' && options);
//If we have no title yet, check the attribute 'title' (this is missed by jq as its not a data-attribute
if (this.options.title === null) {
this.options.title = this.$element.attr('title');
}
//Expose public methods
this.val = Selectpicker.prototype.val;
this.render = Selectpicker.prototype.render;
this.refresh = Selectpicker.prototype.refresh;
this.setStyle = Selectpicker.prototype.setStyle;
this.selectAll = Selectpicker.prototype.selectAll;
this.deselectAll = Selectpicker.prototype.deselectAll;
this.init();
};
Selectpicker.prototype = {
constructor: Selectpicker,
init: function() {
var that = this,
id = this.$element.attr('id');
this.$element.hide();
this.multiple = this.$element.prop('multiple');
this.autofocus = this.$element.prop('autofocus');
this.$newElement = this.createView();
this.$element.after(this.$newElement);
this.$menu = this.$newElement.find('> .dropdown-menu');
this.$button = this.$newElement.find('> button');
this.$searchbox = this.$newElement.find('input');
if (id !== undefined) {
this.$button.attr('data-id', id);
$('label[for="' + id + '"]').click(function(e) {
e.preventDefault();
that.$button.focus();
});
}
this.checkDisabled();
this.clickListener();
if (this.options.liveSearch) this.liveSearchListener();
this.render();
this.liHeight();
this.setStyle();
this.setWidth();
if (this.options.container) this.selectPosition();
this.$menu.data('this', this);
this.$newElement.data('this', this);
},
createDropdown: function() {
//If we are multiple, then add the show-tick class by default
var multiple = this.multiple ? ' show-tick' : '';
var inputGroup = this.$element.parent().hasClass('input-group') ? ' input-group-btn' : '';
var autofocus = this.autofocus ? ' autofocus' : '';
var header = this.options.header ? '<div class="popover-title"><button type="button" class="close" aria-hidden="true">&times;</button>' + this.options.header + '</div>' : '';
var searchbox = this.options.liveSearch ? '<div class="bootstrap-select-searchbox"><input type="text" class="input-block-level form-control" /></div>' : '';
var actionsbox = this.options.actionsBox ? '<div class="bs-actionsbox">' +
'<div class="btn-group btn-block">' +
'<button class="actions-btn bs-select-all btn btn-sm btn-default">' +
'Select All' +
'</button>' +
'<button class="actions-btn bs-deselect-all btn btn-sm btn-default">' +
'Deselect All' +
'</button>' +
'</div>' +
'</div>' : '';
var drop =
'<div class="btn-group bootstrap-select' + multiple + inputGroup + '">' +
'<button type="button" class="btn dropdown-toggle selectpicker" data-toggle="dropdown"'+ autofocus +'>' +
'<span class="filter-option pull-left"></span>&nbsp;' +
'<span class="caret"></span>' +
'</button>' +
'<div class="dropdown-menu open">' +
header +
searchbox +
actionsbox +
'<ul class="dropdown-menu inner selectpicker" role="menu">' +
'</ul>' +
'</div>' +
'</div>';
return $(drop);
},
createView: function() {
var $drop = this.createDropdown();
var $li = this.createLi();
$drop.find('ul').append($li);
return $drop;
},
reloadLi: function() {
//Remove all children.
this.destroyLi();
//Re build
var $li = this.createLi();
this.$menu.find('ul').append( $li );
},
destroyLi: function() {
this.$menu.find('li').remove();
},
createLi: function() {
var that = this,
_liA = [],
_liHtml = '';
this.$element.find('option').each(function() {
var $this = $(this);
//Get the class and text for the option
var optionClass = $this.attr('class') || '';
var inline = $this.attr('style') || '';
var text = $this.data('content') ? $this.data('content') : $this.html();
var subtext = $this.data('subtext') !== undefined ? '<small class="muted text-muted">' + $this.data('subtext') + '</small>' : '';
var icon = $this.data('icon') !== undefined ? '<i class="' + that.options.iconBase + ' ' + $this.data('icon') + '"></i> ' : '';
if (icon !== '' && ($this.is(':disabled') || $this.parent().is(':disabled'))) {
icon = '<span>'+icon+'</span>';
}
if (!$this.data('content')) {
//Prepend any icon and append any subtext to the main text.
text = icon + '<span class="text">' + text + subtext + '</span>';
}
if (that.options.hideDisabled && ($this.is(':disabled') || $this.parent().is(':disabled'))) {
_liA.push('<a style="min-height: 0; padding: 0"></a>');
} else if ($this.parent().is('optgroup') && $this.data('divider') !== true) {
if ($this.index() === 0) {
//Get the opt group label
var label = $this.parent().attr('label');
var labelSubtext = $this.parent().data('subtext') !== undefined ? '<small class="muted text-muted">'+$this.parent().data('subtext')+'</small>' : '';
var labelIcon = $this.parent().data('icon') ? '<i class="'+$this.parent().data('icon')+'"></i> ' : '';
label = labelIcon + '<span class="text">' + label + labelSubtext + '</span>';
if ($this[0].index !== 0) {
_liA.push(
'<div class="div-contain"><div class="divider"></div></div>'+
'<dt>'+label+'</dt>'+
that.createA(text, 'opt ' + optionClass, inline )
);
} else {
_liA.push(
'<dt>'+label+'</dt>'+
that.createA(text, 'opt ' + optionClass, inline ));
}
} else {
_liA.push(that.createA(text, 'opt ' + optionClass, inline ));
}
} else if ($this.data('divider') === true) {
_liA.push('<div class="div-contain"><div class="divider"></div></div>');
} else if ($(this).data('hidden') === true) {
_liA.push('<a></a>');
} else {
_liA.push(that.createA(text, optionClass, inline ));
}
});
$.each(_liA, function(i, item) {
var hide = item === '<a></a>' ? 'class="hide is-hidden"' : '';
_liHtml += '<li rel="' + i + '"' + hide + '>' + item + '</li>';
});
//If we are not multiple, and we dont have a selected item, and we dont have a title, select the first element so something is set in the button
if (!this.multiple && this.$element.find('option:selected').length===0 && !this.options.title) {
this.$element.find('option').eq(0).prop('selected', true).attr('selected', 'selected');
}
return $(_liHtml);
},
createA: function(text, classes, inline) {
return '<a tabindex="0" class="'+classes+'" style="'+inline+'">' +
text +
'<i class="' + this.options.iconBase + ' ' + this.options.tickIcon + ' icon-ok check-mark"></i>' +
'</a>';
},
render: function(updateLi) {
var that = this;
//Update the LI to match the SELECT
if (updateLi !== false) {
this.$element.find('option').each(function(index) {
that.setDisabled(index, $(this).is(':disabled') || $(this).parent().is(':disabled') );
that.setSelected(index, $(this).is(':selected') );
});
}
this.tabIndex();
var selectedItems = this.$element.find('option:selected').map(function() {
var $this = $(this);
var icon = $this.data('icon') && that.options.showIcon ? '<i class="' + that.options.iconBase + ' ' + $this.data('icon') + '"></i> ' : '';
var subtext;
if (that.options.showSubtext && $this.attr('data-subtext') && !that.multiple) {
subtext = ' <small class="muted text-muted">'+$this.data('subtext') +'</small>';
} else {
subtext = '';
}
if ($this.data('content') && that.options.showContent) {
return $this.data('content');
} else if ($this.attr('title') !== undefined) {
return $this.attr('title');
} else {
return icon + $this.html() + subtext;
}
}).toArray();
//Fixes issue in IE10 occurring when no default option is selected and at least one option is disabled
//Convert all the values into a comma delimited string
var title = !this.multiple ? selectedItems[0] : selectedItems.join(this.options.multipleSeparator);
//If this is multi select, and the selectText type is count, the show 1 of 2 selected etc..
if (this.multiple && this.options.selectedTextFormat.indexOf('count') > -1) {
var max = this.options.selectedTextFormat.split('>');
var notDisabled = this.options.hideDisabled ? ':not([disabled])' : '';
if ( (max.length>1 && selectedItems.length > max[1]) || (max.length==1 && selectedItems.length>=2)) {
title = this.options.countSelectedText.replace('{0}', selectedItems.length).replace('{1}', this.$element.find('option:not([data-divider="true"]):not([data-hidden="true"])'+notDisabled).length);
}
}
this.options.title = this.$element.attr('title');
//If we dont have a title, then use the default, or if nothing is set at all, use the not selected text
if (!title) {
title = this.options.title !== undefined ? this.options.title : this.options.noneSelectedText;
}
this.$button.attr('title', $.trim(title));
this.$newElement.find('.filter-option').html(title);
},
setStyle: function(style, status) {
if (this.$element.attr('class')) {
this.$newElement.addClass(this.$element.attr('class').replace(/selectpicker|mobile-device/gi, ''));
}
var buttonClass = style ? style : this.options.style;
if (status == 'add') {
this.$button.addClass(buttonClass);
} else if (status == 'remove') {
this.$button.removeClass(buttonClass);
} else {
this.$button.removeClass(this.options.style);
this.$button.addClass(buttonClass);
}
},
liHeight: function() {
if (this.options.size === false) return;
var $selectClone = this.$menu.parent().clone().find('> .dropdown-toggle').prop('autofocus', false).end().appendTo('body'),
$menuClone = $selectClone.addClass('open').find('> .dropdown-menu'),
liHeight = $menuClone.find('li > a').outerHeight(),
headerHeight = this.options.header ? $menuClone.find('.popover-title').outerHeight() : 0,
searchHeight = this.options.liveSearch ? $menuClone.find('.bootstrap-select-searchbox').outerHeight() : 0,
actionsHeight = this.options.actionsBox ? $menuClone.find('.bs-actionsbox').outerHeight() : 0;
$selectClone.remove();
this.$newElement
.data('liHeight', liHeight)
.data('headerHeight', headerHeight)
.data('searchHeight', searchHeight)
.data('actionsHeight', actionsHeight);
},
setSize: function() {
var that = this,
menu = this.$menu,
menuInner = menu.find('.inner'),
selectHeight = this.$newElement.outerHeight(),
liHeight = this.$newElement.data('liHeight'),
headerHeight = this.$newElement.data('headerHeight'),
searchHeight = this.$newElement.data('searchHeight'),
actionsHeight = this.$newElement.data('actionsHeight'),
divHeight = menu.find('li .divider').outerHeight(true),
menuPadding = parseInt(menu.css('padding-top')) +
parseInt(menu.css('padding-bottom')) +
parseInt(menu.css('border-top-width')) +
parseInt(menu.css('border-bottom-width')),
notDisabled = this.options.hideDisabled ? ':not(.disabled)' : '',
$window = $(window),
menuExtras = menuPadding + parseInt(menu.css('margin-top')) + parseInt(menu.css('margin-bottom')) + 2,
menuHeight,
selectOffsetTop,
selectOffsetBot,
posVert = function() {
selectOffsetTop = that.$newElement.offset().top - $window.scrollTop();
selectOffsetBot = $window.height() - selectOffsetTop - selectHeight;
};
posVert();
if (this.options.header) menu.css('padding-top', 0);
if (this.options.size == 'auto') {
var getSize = function() {
var minHeight,
lisVis = that.$lis.not('.hide');
posVert();
menuHeight = selectOffsetBot - menuExtras;
if (that.options.dropupAuto) {
that.$newElement.toggleClass('dropup', (selectOffsetTop > selectOffsetBot) && ((menuHeight - menuExtras) < menu.height()));
}
if (that.$newElement.hasClass('dropup')) {
menuHeight = selectOffsetTop - menuExtras;
}
if ((lisVis.length + lisVis.find('dt').length) > 3) {
minHeight = liHeight*3 + menuExtras - 2;
} else {
minHeight = 0;
}
menu.css({'max-height' : menuHeight + 'px', 'overflow' : 'hidden', 'min-height' : minHeight + headerHeight + searchHeight + actionsHeight + 'px'});
menuInner.css({'max-height' : menuHeight - headerHeight - searchHeight - actionsHeight - menuPadding + 'px', 'overflow-y' : 'auto', 'min-height' : Math.max(minHeight - menuPadding, 0) + 'px'});
};
getSize();
this.$searchbox.off('input.getSize propertychange.getSize').on('input.getSize propertychange.getSize', getSize);
$(window).off('resize.getSize').on('resize.getSize', getSize);
$(window).off('scroll.getSize').on('scroll.getSize', getSize);
} else if (this.options.size && this.options.size != 'auto' && menu.find('li'+notDisabled).length > this.options.size) {
var optIndex = menu.find('li'+notDisabled+' > *').filter(':not(.div-contain)').slice(0,this.options.size).last().parent().index();
var divLength = menu.find('li').slice(0,optIndex + 1).find('.div-contain').length;
menuHeight = liHeight*this.options.size + divLength*divHeight + menuPadding;
if (that.options.dropupAuto) {
this.$newElement.toggleClass('dropup', (selectOffsetTop > selectOffsetBot) && (menuHeight < menu.height()));
}
menu.css({'max-height' : menuHeight + headerHeight + searchHeight + actionsHeight + 'px', 'overflow' : 'hidden'});
menuInner.css({'max-height' : menuHeight - menuPadding + 'px', 'overflow-y' : 'auto'});
}
},
setWidth: function() {
if (this.options.width == 'auto') {
this.$menu.css('min-width', '0');
// Get correct width if element hidden
var selectClone = this.$newElement.clone().appendTo('body');
var ulWidth = selectClone.find('> .dropdown-menu').css('width');
var btnWidth = selectClone.css('width', 'auto').find('> button').css('width');
selectClone.remove();
// Set width to whatever's larger, button title or longest option
this.$newElement.css('width', Math.max(parseInt(ulWidth), parseInt(btnWidth)) + 'px');
} else if (this.options.width == 'fit') {
// Remove inline min-width so width can be changed from 'auto'
this.$menu.css('min-width', '');
this.$newElement.css('width', '').addClass('fit-width');
} else if (this.options.width) {
// Remove inline min-width so width can be changed from 'auto'
this.$menu.css('min-width', '');
this.$newElement.css('width', this.options.width);
} else {
// Remove inline min-width/width so width can be changed
this.$menu.css('min-width', '');
this.$newElement.css('width', '');
}
// Remove fit-width class if width is changed programmatically
if (this.$newElement.hasClass('fit-width') && this.options.width !== 'fit') {
this.$newElement.removeClass('fit-width');
}
},
selectPosition: function() {
var that = this,
drop = '<div />',
$drop = $(drop),
pos,
actualHeight,
getPlacement = function($element) {
$drop.addClass($element.attr('class').replace(/form-control/gi, '')).toggleClass('dropup', $element.hasClass('dropup'));
pos = $element.offset();
actualHeight = $element.hasClass('dropup') ? 0 : $element[0].offsetHeight;
$drop.css({'top' : pos.top + actualHeight, 'left' : pos.left, 'width' : $element[0].offsetWidth, 'position' : 'absolute'});
};
this.$newElement.on('click', function() {
if (that.isDisabled()) {
return;
}
getPlacement($(this));
$drop.appendTo(that.options.container);
$drop.toggleClass('open', !$(this).hasClass('open'));
$drop.append(that.$menu);
});
$(window).resize(function() {
getPlacement(that.$newElement);
});
$(window).on('scroll', function() {
getPlacement(that.$newElement);
});
$('html').on('click', function(e) {
if ($(e.target).closest(that.$newElement).length < 1) {
$drop.removeClass('open');
}
});
},
mobile: function() {
this.$element.addClass('mobile-device').appendTo(this.$newElement);
if (this.options.container) this.$menu.hide();
},
refresh: function() {
this.$lis = null;
this.reloadLi();
this.render();
this.setWidth();
this.setStyle();
this.checkDisabled();
this.liHeight();
},
update: function() {
this.reloadLi();
this.setWidth();
this.setStyle();
this.checkDisabled();
this.liHeight();
},
setSelected: function(index, selected) {
if (this.$lis == null) this.$lis = this.$menu.find('li');
$(this.$lis[index]).toggleClass('selected', selected);
},
setDisabled: function(index, disabled) {
if (this.$lis == null) this.$lis = this.$menu.find('li');
if (disabled) {
$(this.$lis[index]).addClass('disabled').find('a').attr('href', '#').attr('tabindex', -1);
} else {
$(this.$lis[index]).removeClass('disabled').find('a').removeAttr('href').attr('tabindex', 0);
}
},
isDisabled: function() {
return this.$element.is(':disabled');
},
checkDisabled: function() {
var that = this;
if (this.isDisabled()) {
this.$button.addClass('disabled').attr('tabindex', -1);
} else {
if (this.$button.hasClass('disabled')) {
this.$button.removeClass('disabled');
}
if (this.$button.attr('tabindex') == -1) {
if (!this.$element.data('tabindex')) this.$button.removeAttr('tabindex');
}
}
this.$button.click(function() {
return !that.isDisabled();
});
},
tabIndex: function() {
if (this.$element.is('[tabindex]')) {
this.$element.data('tabindex', this.$element.attr('tabindex'));
this.$button.attr('tabindex', this.$element.data('tabindex'));
}
},
clickListener: function() {
var that = this;
$('body').on('touchstart.dropdown', '.dropdown-menu', function(e) {
e.stopPropagation();
});
this.$newElement.on('click', function() {
that.setSize();
if (!that.options.liveSearch && !that.multiple) {
setTimeout(function() {
that.$menu.find('.selected a').focus();
}, 10);
}
});
this.$menu.on('click', 'li a', function(e) {
var clickedIndex = $(this).parent().index(),
prevValue = that.$element.val(),
prevIndex = that.$element.prop('selectedIndex');
//Dont close on multi choice menu
if (that.multiple) {
e.stopPropagation();
}
e.preventDefault();
//Dont run if we have been disabled
if (!that.isDisabled() && !$(this).parent().hasClass('disabled')) {
var $options = that.$element.find('option'),
$option = $options.eq(clickedIndex),
state = $option.prop('selected'),
$optgroup = $option.parent('optgroup'),
maxOptions = that.options.maxOptions,
maxOptionsGrp = $optgroup.data('maxOptions') || false;
//Deselect all others if not multi select box
if (!that.multiple) {
$options.prop('selected', false);
$option.prop('selected', true);
that.$menu.find('.selected').removeClass('selected');
that.setSelected(clickedIndex, true);
}
//Else toggle the one we have chosen if we are multi select.
else {
$option.prop('selected', !state);
that.setSelected(clickedIndex, !state);
if ((maxOptions !== false) || (maxOptionsGrp !== false)) {
var maxReached = maxOptions < $options.filter(':selected').length,
maxReachedGrp = maxOptionsGrp < $optgroup.find('option:selected').length,
maxOptionsArr = that.options.maxOptionsText,
maxTxt = maxOptionsArr[0].replace('{n}', maxOptions),
maxTxtGrp = maxOptionsArr[1].replace('{n}', maxOptionsGrp),
$notify = $('<div class="notify"></div>');
if ((maxOptions && maxReached) || (maxOptionsGrp && maxReachedGrp)) {
// If {var} is set in array, replace it
if (maxOptionsArr[2]) {
maxTxt = maxTxt.replace('{var}', maxOptionsArr[2][maxOptions > 1 ? 0 : 1]);
maxTxtGrp = maxTxtGrp.replace('{var}', maxOptionsArr[2][maxOptionsGrp > 1 ? 0 : 1]);
}
$option.prop('selected', false);
that.$menu.append($notify);
if (maxOptions && maxReached) {
$notify.append($('<div>' + maxTxt + '</div>'));
that.$element.trigger('maxReached.bs.select');
}
if (maxOptionsGrp && maxReachedGrp) {
$notify.append($('<div>' + maxTxtGrp + '</div>'));
that.$element.trigger('maxReachedGrp.bs.select');
}
setTimeout(function() {
that.setSelected(clickedIndex, false);
}, 10);
$notify.delay(750).fadeOut(300, function() { $(this).remove(); });
}
}
}
if (!that.multiple) {
that.$button.focus();
} else if (that.options.liveSearch) {
that.$searchbox.focus();
}
// Trigger select 'change'
if ((prevValue != that.$element.val() && that.multiple) || (prevIndex != that.$element.prop('selectedIndex') && !that.multiple)) {
that.$element.change();
}
}
});
this.$menu.on('click', 'li.disabled a, li dt, li .div-contain, .popover-title, .popover-title :not(.close)', function(e) {
if (e.target == this) {
e.preventDefault();
e.stopPropagation();
if (!that.options.liveSearch) {
that.$button.focus();
} else {
that.$searchbox.focus();
}
}
});
this.$menu.on('click', '.popover-title .close', function() {
that.$button.focus();
});
this.$searchbox.on('click', function(e) {
e.stopPropagation();
});
this.$menu.on('click', '.actions-btn', function(e) {
if (that.options.liveSearch) {
that.$searchbox.focus();
} else {
that.$button.focus();
}
e.preventDefault();
e.stopPropagation();
if ($(this).is('.bs-select-all')) {
that.selectAll();
} else {
that.deselectAll();
}
that.$element.change();
});
this.$element.change(function() {
that.render(false);
});
},
liveSearchListener: function() {
var that = this,
no_results = $('<li class="no-results"></li>');
this.$newElement.on('click.dropdown.data-api', function() {
that.$menu.find('.active').removeClass('active');
if (!!that.$searchbox.val()) {
that.$searchbox.val('');
that.$lis.not('.is-hidden').removeClass('hide');
if (!!no_results.parent().length) no_results.remove();
}
if (!that.multiple) that.$menu.find('.selected').addClass('active');
setTimeout(function() {
that.$searchbox.focus();
}, 10);
});
this.$searchbox.on('input propertychange', function() {
if (that.$searchbox.val()) {
that.$lis.not('.is-hidden').removeClass('hide').find('a').not(':icontains(' + that.$searchbox.val() + ')').parent().addClass('hide');
if (!that.$menu.find('li').filter(':visible:not(.no-results)').length) {
if (!!no_results.parent().length) no_results.remove();
no_results.html(that.options.noneResultsText + ' "'+ that.$searchbox.val() + '"').show();
that.$menu.find('li').last().after(no_results);
} else if (!!no_results.parent().length) {
no_results.remove();
}
} else {
that.$lis.not('.is-hidden').removeClass('hide');
if (!!no_results.parent().length) no_results.remove();
}
that.$menu.find('li.active').removeClass('active');
that.$menu.find('li').filter(':visible:not(.divider)').eq(0).addClass('active').find('a').focus();
$(this).focus();
});
this.$menu.on('mouseenter', 'a', function(e) {
that.$menu.find('.active').removeClass('active');
$(e.currentTarget).parent().not('.disabled').addClass('active');
});
this.$menu.on('mouseleave', 'a', function() {
that.$menu.find('.active').removeClass('active');
});
},
val: function(value) {
if (value !== undefined) {
this.$element.val( value );
this.$element.change();
return this.$element;
} else {
return this.$element.val();
}
},
selectAll: function() {
if (this.$lis == null) this.$lis = this.$menu.find('li');
this.$element.find('option:enabled').prop('selected', true);
$(this.$lis).filter(':not(.disabled)').addClass('selected');
this.render(false);
},
deselectAll: function() {
if (this.$lis == null) this.$lis = this.$menu.find('li');
this.$element.find('option:enabled').prop('selected', false);
$(this.$lis).filter(':not(.disabled)').removeClass('selected');
this.render(false);
},
keydown: function(e) {
var $this,
$items,
$parent,
index,
next,
first,
last,
prev,
nextPrev,
that,
prevIndex,
isActive,
keyCodeMap = {
32:' ', 48:'0', 49:'1', 50:'2', 51:'3', 52:'4', 53:'5', 54:'6', 55:'7', 56:'8', 57:'9', 59:';',
65:'a', 66:'b', 67:'c', 68:'d', 69:'e', 70:'f', 71:'g', 72:'h', 73:'i', 74:'j', 75:'k', 76:'l',
77:'m', 78:'n', 79:'o', 80:'p', 81:'q', 82:'r', 83:'s', 84:'t', 85:'u', 86:'v', 87:'w', 88:'x',
89:'y', 90:'z', 96:'0', 97:'1', 98:'2', 99:'3', 100:'4', 101:'5', 102:'6', 103:'7', 104:'8', 105:'9'
};
$this = $(this);
$parent = $this.parent();
if ($this.is('input')) $parent = $this.parent().parent();
that = $parent.data('this');
if (that.options.liveSearch) $parent = $this.parent().parent();
if (that.options.container) $parent = that.$menu;
$items = $('[role=menu] li:not(.divider) a', $parent);
isActive = that.$menu.parent().hasClass('open');
if (!isActive && /([0-9]|[A-z])/.test(String.fromCharCode(e.keyCode))) {
if (!that.options.container) {
that.setSize();
that.$menu.parent().addClass('open');
isActive = that.$menu.parent().hasClass('open');
} else {
that.$newElement.trigger('click');
}
that.$searchbox.focus();
}
if (that.options.liveSearch) {
if (/(^9$|27)/.test(e.keyCode) && isActive && that.$menu.find('.active').length === 0) {
e.preventDefault();
that.$menu.parent().removeClass('open');
that.$button.focus();
}
$items = $('[role=menu] li:not(.divider):visible', $parent);
if (!$this.val() && !/(38|40)/.test(e.keyCode)) {
if ($items.filter('.active').length === 0) {
$items = that.$newElement.find('li').filter(':icontains(' + keyCodeMap[e.keyCode] + ')');
}
}
}
if (!$items.length) return;
if (/(38|40)/.test(e.keyCode)) {
index = $items.index($items.filter(':focus'));
first = $items.parent(':not(.disabled):visible').first().index();
last = $items.parent(':not(.disabled):visible').last().index();
next = $items.eq(index).parent().nextAll(':not(.disabled):visible').eq(0).index();
prev = $items.eq(index).parent().prevAll(':not(.disabled):visible').eq(0).index();
nextPrev = $items.eq(next).parent().prevAll(':not(.disabled):visible').eq(0).index();
if (that.options.liveSearch) {
$items.each(function(i) {
if ($(this).is(':not(.disabled)')) {
$(this).data('index', i);
}
});
index = $items.index($items.filter('.active'));
first = $items.filter(':not(.disabled):visible').first().data('index');
last = $items.filter(':not(.disabled):visible').last().data('index');
next = $items.eq(index).nextAll(':not(.disabled):visible').eq(0).data('index');
prev = $items.eq(index).prevAll(':not(.disabled):visible').eq(0).data('index');
nextPrev = $items.eq(next).prevAll(':not(.disabled):visible').eq(0).data('index');
}
prevIndex = $this.data('prevIndex');
if (e.keyCode == 38) {
if (that.options.liveSearch) index -= 1;
if (index != nextPrev && index > prev) index = prev;
if (index < first) index = first;
if (index == prevIndex) index = last;
}
if (e.keyCode == 40) {
if (that.options.liveSearch) index += 1;
if (index == -1) index = 0;
if (index != nextPrev && index < next) index = next;
if (index > last) index = last;
if (index == prevIndex) index = first;
}
$this.data('prevIndex', index);
if (!that.options.liveSearch) {
$items.eq(index).focus();
} else {
e.preventDefault();
if (!$this.is('.dropdown-toggle')) {
$items.removeClass('active');
$items.eq(index).addClass('active').find('a').focus();
$this.focus();
}
}
} else if (!$this.is('input')) {
var keyIndex = [],
count,
prevKey;
$items.each(function() {
if ($(this).parent().is(':not(.disabled)')) {
if ($.trim($(this).text().toLowerCase()).substring(0,1) == keyCodeMap[e.keyCode]) {
keyIndex.push($(this).parent().index());
}
}
});
count = $(document).data('keycount');
count++;
$(document).data('keycount',count);
prevKey = $.trim($(':focus').text().toLowerCase()).substring(0,1);
if (prevKey != keyCodeMap[e.keyCode]) {
count = 1;
$(document).data('keycount', count);
} else if (count >= keyIndex.length) {
$(document).data('keycount', 0);
if (count > keyIndex.length) count = 1;
}
$items.eq(keyIndex[count - 1]).focus();
}
// Select focused option if "Enter", "Spacebar", "Tab" are pressed inside the menu.
if (/(13|32|^9$)/.test(e.keyCode) && isActive) {
if (!/(32)/.test(e.keyCode)) e.preventDefault();
if (!that.options.liveSearch) {
$(':focus').click();
} else if (!/(32)/.test(e.keyCode)) {
that.$menu.find('.active a').click();
$this.focus();
}
$(document).data('keycount',0);
}
if ((/(^9$|27)/.test(e.keyCode) && isActive && (that.multiple || that.options.liveSearch)) || (/(27)/.test(e.keyCode) && !isActive)) {
that.$menu.parent().removeClass('open');
that.$button.focus();
}
},
hide: function() {
this.$newElement.hide();
},
show: function() {
this.$newElement.show();
},
destroy: function() {
this.$newElement.remove();
this.$element.remove();
}
};
$.fn.selectpicker = function(option, event) {
//get the args of the outer function..
var args = arguments;
var value;
var chain = this.each(function() {
if ($(this).is('select')) {
var $this = $(this),
data = $this.data('selectpicker'),
options = typeof option == 'object' && option;
if (!data) {
$this.data('selectpicker', (data = new Selectpicker(this, options, event)));
} else if (options) {
for(var i in options) {
data.options[i] = options[i];
}
}
if (typeof option == 'string') {
//Copy the value of option, as once we shift the arguments
//it also shifts the value of option.
var property = option;
if (data[property] instanceof Function) {
[].shift.apply(args);
value = data[property].apply(data, args);
} else {
value = data.options[property];
}
}
}
});
if (value !== undefined) {
return value;
} else {
return chain;
}
};
$.fn.selectpicker.defaults = {
style: 'btn-default',
size: 'auto',
title: null,
selectedTextFormat : 'values',
noneSelectedText : 'Nothing selected',
noneResultsText : 'No results match',
countSelectedText: '{0} of {1} selected',
maxOptionsText: ['Limit reached ({n} {var} max)', 'Group limit reached ({n} {var} max)', ['items','item']],
width: false,
container: false,
hideDisabled: false,
showSubtext: false,
showIcon: true,
showContent: true,
dropupAuto: true,
header: false,
liveSearch: false,
actionsBox: false,
multipleSeparator: ', ',
iconBase: 'fa',
tickIcon: 'fa-check',
maxOptions: false
};
$(document)
.data('keycount', 0)
.on('keydown', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role=menu], .bootstrap-select-searchbox input', Selectpicker.prototype.keydown)
.on('focusin.modal', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role=menu], .bootstrap-select-searchbox input', function (e) { e.stopPropagation(); });
}(window.jQuery);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,29 @@
/*
* Translated default messages for bootstrap-select.
* Locale: ES (Spanish)
* Region: CL (Chile)
*/
(function($) {
$.fn.selectpicker.defaults = {
style: 'btn-default',
size: 'auto',
title: null,
selectedTextFormat : 'values',
noneSelectedText : 'No hay selección',
noneResultsText : 'No hay resultados',
countSelectedText : 'Seleccionados {0} de {1}',
maxOptionsText: ['Límite alcanzado ({n} {var} max)', 'Límite del grupo alcanzado({n} {var} max)', ['elementos','element']],
width: false,
container: false,
hideDisabled: false,
showSubtext: false,
showIcon: true,
showContent: true,
dropupAuto: true,
header: false,
liveSearch: false,
multipleSeparator: ', ',
iconBase: 'glyphicon',
tickIcon: 'glyphicon-ok'
};
}(jQuery));

View File

@@ -0,0 +1,6 @@
/*
* Translated default messages for bootstrap-select.
* Locale: ES (Spanish)
* Region: CL (Chile)
*/
(function(e){e.fn.selectpicker.defaults={style:"btn-default",size:"auto",title:null,selectedTextFormat:"values",noneSelectedText:"No hay selección",noneResultsText:"No hay resultados",countSelectedText:"Seleccionados {0} de {1}",maxOptionsText:["Límite alcanzado ({n} {var} max)","Límite del grupo alcanzado({n} {var} max)",["elementos","element"]],width:false,container:false,hideDisabled:false,showSubtext:false,showIcon:true,showContent:true,dropupAuto:true,header:false,liveSearch:false,multipleSeparator:", ",iconBase:"glyphicon",tickIcon:"glyphicon-ok"}})(jQuery)

View File

@@ -0,0 +1,30 @@
/*
* Translated default messages for bootstrap-select.
* Locale: EU (Basque)
* Region:
*/
(function($) {
$.fn.selectpicker.defaults = {
style: 'btn-default',
size: 'auto',
title: null,
selectedTextFormat : 'values',
noneSelectedText : 'Hautapenik ez',
noneResultsText : 'Emaitzarik ez',
countSelectedText : '{1}(e)tik {0} hautatuta',
maxOptionsText: ['Mugara iritsita ({n} {var} gehienez)', 'Taldearen mugara iritsita ({n} {var} gehienez)', ['elementu','elementu']],
width: false,
container: false,
hideDisabled: false,
showSubtext: false,
showIcon: true,
showContent: true,
dropupAuto: true,
header: false,
liveSearch: false,
multipleSeparator: ', ',
iconBase: 'glyphicon',
tickIcon: 'glyphicon-ok'
};
}(jQuery));

View File

@@ -0,0 +1,6 @@
/*
* Translated default messages for bootstrap-select.
* Locale: EU (Basque)
* Region:
*/
(function(e){e.fn.selectpicker.defaults={style:"btn-default",size:"auto",title:null,selectedTextFormat:"values",noneSelectedText:"Hautapenik ez",noneResultsText:"Emaitzarik ez",countSelectedText:"{1}(e)tik {0} hautatuta",maxOptionsText:["Mugara iritsita ({n} {var} gehienez)","Taldearen mugara iritsita ({n} {var} gehienez)",["elementu","elementu"]],width:false,container:false,hideDisabled:false,showSubtext:false,showIcon:true,showContent:true,dropupAuto:true,header:false,liveSearch:false,multipleSeparator:", ",iconBase:"glyphicon",tickIcon:"glyphicon-ok"}})(jQuery)

View File

@@ -0,0 +1,33 @@
/*
* Translated default messages for bootstrap-select.
* Locale: PT (Portuguese; português)
* Region: BR (Brazil; Brasil)
* Author: Rodrigo de Avila <rodrigo@avila.net.br>
*/
(function($) {
$.fn.selectpicker.defaults = {
style: 'btn-default',
size: 'auto',
title: null,
selectedTextFormat : 'values',
noneSelectedText : 'Nada selecionado',
noneResultsText : 'Nada encontrado contendo',
countSelectedText : 'Selecionado {0} de {1}',
maxOptionsText: ['Limite excedido (máx. {n} {var})', 'Limite do grupo excedido (máx. {n} {var})', ['itens','item']],
width: false,
container: false,
hideDisabled: false,
showSubtext: false,
showIcon: true,
showContent: true,
dropupAuto: true,
header: false,
liveSearch: false,
actionsBox: false,
multipleSeparator: ', ',
iconBase: 'glyphicon',
tickIcon: 'glyphicon-ok',
maxOptions: false
};
}(jQuery));

View File

@@ -0,0 +1,7 @@
/*
* Translated default messages for bootstrap-select.
* Locale: PT (Portuguese; português)
* Region: BR (Brazil; Brasil)
* Author: Rodrigo de Avila <rodrigo@avila.net.br>
*/
!function(a){a.fn.selectpicker.defaults={style:"btn-default",size:"auto",title:null,selectedTextFormat:"values",noneSelectedText:"Nada selecionado",noneResultsText:"Nada encontrado contendo",countSelectedText:"Selecionado {0} de {1}",maxOptionsText:["Limite excedido (m\xe1x. {n} {var})","Limite do grupo excedido (m\xe1x. {n} {var})",["itens","item"]],width:!1,container:!1,hideDisabled:!1,showSubtext:!1,showIcon:!0,showContent:!0,dropupAuto:!0,header:!1,liveSearch:!1,actionsBox:!1,multipleSeparator:", ",iconBase:"glyphicon",tickIcon:"glyphicon-ok",maxOptions:!1}}(jQuery);

View File

@@ -0,0 +1,31 @@
/*
* Translated default messages for bootstrap-select.
* Locale: RU (Russian; русский)
* Region: RU (Russian Federation)
*/
(function($) {
$.fn.selectpicker.defaults = {
style: 'btn-default',
size: 'auto',
title: null,
selectedTextFormat : 'values',
noneSelectedText : 'Ничего не выбрано',
noneResultsText : 'Не нейдено совпадений',
countSelectedText : 'Выбрано {0} из {1}',
maxOptionsText: ['Достигнут предел ({n} {var} максимум)', 'Достигнут предел в группе ({n} {var} максимум)', ['items','item']],
width: false,
container: false,
hideDisabled: false,
showSubtext: false,
showIcon: true,
showContent: true,
dropupAuto: true,
header: false,
liveSearch: false,
actionsBox: false,
multipleSeparator: ', ',
iconBase: 'glyphicon',
tickIcon: 'glyphicon-ok',
maxOptions: false
};
}(jQuery));

View File

@@ -0,0 +1,6 @@
/*
* Translated default messages for bootstrap-select.
* Locale: RU (Russian; русский)
* Region: RU (Russian Federation)
*/
(function(e){e.fn.selectpicker.defaults={style:"btn-default",size:"auto",title:null,selectedTextFormat:"values",noneSelectedText:"Ничего не выбрано",noneResultsText:"Не нейдено совпадений",countSelectedText:"Выбрано {0} из {1}",maxOptionsText:["Достигнут предел ({n} {var} максимум)","Достигнут предел в группе ({n} {var} максимум)",["items","item"]],width:false,container:false,hideDisabled:false,showSubtext:false,showIcon:true,showContent:true,dropupAuto:true,header:false,liveSearch:false,actionsBox:false,multipleSeparator:", ",iconBase:"glyphicon",tickIcon:"glyphicon-ok",maxOptions:false}})(jQuery)

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-select.css">
<!-- 3.0 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- 2.3.2
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
-->
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});
// $('.selectpicker').selectpicker('hide');
});
</script>
</head>
<body>
<label for="id_select">Test label YEag</label>
<select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">
<option>cow</option>
<option>bull</option>
<option class="get-class" disabled>ox</option>
<optgroup label="test" data-subtext="another test" data-icon="icon-ok">
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</optgroup>
</select>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="bs3Select" class="col-lg-2 control-label">Test bootstrap 3 form</label>
<div class="col-lg-10">
<select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">
<option>cow</option>
<option>bull</option>
<option class="get-class" disabled>ox</option>
<optgroup label="test" data-subtext="another test" data-icon="icon-ok">
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</optgroup>
</select>
</div>
</div>
<form>
</div>
</body>
</html>

View File

@@ -0,0 +1,124 @@
/*!
* Slider for Bootstrap
*
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
}
.slider.slider-horizontal {
width: 100%;
height: 20px;
}
.slider.slider-horizontal .slider-track {
height: 10px;
width: 100%;
margin-top: -5px;
top: 50%;
left: 0;
}
.slider.slider-horizontal .slider-selection {
height: 100%;
top: 0;
bottom: 0;
}
.slider.slider-horizontal .slider-handle {
margin-left: -10px;
margin-top: -5px;
}
.slider.slider-horizontal .slider-handle.triangle {
border-width: 0 10px 10px 10px;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
.slider.slider-vertical {
height: 210px;
width: 20px;
margin-right:70px;
}
.slider.slider-vertical .slider-track {
width: 10px;
height: 100%;
margin-left: -5px;
left: 50%;
top: 0;
}
.slider.slider-vertical .slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider.slider-vertical .slider-handle {
margin-left: -5px;
margin-top: -10px;
}
.slider.slider-vertical .slider-handle.triangle {
border-width: 10px 0 10px 10px;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
.slider input {
display: none;
}
.slider .tooltip-inner {
white-space: nowrap;
}
.slider-track {
position: absolute;
cursor: pointer;
background-color: #2B3647;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider-selection {
position: absolute;
background-color: #2B3647;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider-handle {
position: absolute;
width: 20px;
height: 20px;
background-color: #00A2D9;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(to bottom, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
border: 0px solid transparent;
}
.slider-handle.round {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.slider-handle.triangle {
background: transparent none;
}

View File

@@ -0,0 +1,723 @@
/* =========================================================
* bootstrap-slider.js v3.0.0
* http://www.eyecon.ro/bootstrap-slider
* =========================================================
* Copyright 2012 Stefan Petre
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
(function( $ ) {
var ErrorMsgs = {
formatInvalidInputErrorMsg : function(input) {
return "Invalid input value '" + input + "' passed in";
},
callingContextNotSliderInstance : "Calling context element does not have instance of Slider bound to it. Check your code to make sure the JQuery object returned from the call to the slider() initializer is calling the method"
};
var Slider = function(element, options) {
var el = this.element = $(element).hide();
var origWidth = $(element)[0].style.width;
var updateSlider = false;
var parent = this.element.parent();
if (parent.hasClass('slider') === true) {
updateSlider = true;
this.picker = parent;
} else {
this.picker = $('<div class="slider">'+
'<div class="slider-track">'+
'<div class="slider-selection"></div>'+
'<div class="slider-handle"></div>'+
'<div class="slider-handle"></div>'+
'</div>'+
'<div id="tooltip" class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'+
'<div id="tooltip_min" class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'+
'<div id="tooltip_max" class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'+
'</div>')
.insertBefore(this.element)
.append(this.element);
}
this.id = this.element.data('slider-id')||options.id;
if (this.id) {
this.picker[0].id = this.id;
}
if (typeof Modernizr !== 'undefined' && Modernizr.touch) {
this.touchCapable = true;
}
var tooltip = this.element.data('slider-tooltip')||options.tooltip;
this.tooltip = this.picker.find('#tooltip');
this.tooltipInner = this.tooltip.find('div.tooltip-inner');
this.tooltip_min = this.picker.find('#tooltip_min');
this.tooltipInner_min = this.tooltip_min.find('div.tooltip-inner');
this.tooltip_max = this.picker.find('#tooltip_max');
this.tooltipInner_max= this.tooltip_max.find('div.tooltip-inner');
if (updateSlider === true) {
// Reset classes
this.picker.removeClass('slider-horizontal');
this.picker.removeClass('slider-vertical');
this.tooltip.removeClass('hide');
this.tooltip_min.removeClass('hide');
this.tooltip_max.removeClass('hide');
}
this.orientation = this.element.data('slider-orientation')||options.orientation;
switch(this.orientation) {
case 'vertical':
this.picker.addClass('slider-vertical');
this.stylePos = 'top';
this.mousePos = 'pageY';
this.sizePos = 'offsetHeight';
this.tooltip.addClass('right')[0].style.left = '100%';
this.tooltip_min.addClass('right')[0].style.left = '100%';
this.tooltip_max.addClass('right')[0].style.left = '100%';
break;
default:
this.picker
.addClass('slider-horizontal')
.css('width', origWidth);
this.orientation = 'horizontal';
this.stylePos = 'left';
this.mousePos = 'pageX';
this.sizePos = 'offsetWidth';
this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
this.tooltip_min.addClass('top')[0].style.top = -this.tooltip_min.outerHeight() - 14 + 'px';
this.tooltip_max.addClass('top')[0].style.top = -this.tooltip_max.outerHeight() - 14 + 'px';
break;
}
var self = this;
$.each(['min', 'max', 'step', 'value'], function(i, attr) {
if (typeof el.data('slider-' + attr) !== 'undefined') {
self[attr] = el.data('slider-' + attr);
} else if (typeof options[attr] !== 'undefined') {
self[attr] = options[attr];
} else if (typeof el.prop(attr) !== 'undefined') {
self[attr] = el.prop(attr);
} else {
self[attr] = 0; // to prevent empty string issues in calculations in IE
}
});
if (this.value instanceof Array) {
if (updateSlider && !this.range) {
this.value = this.value[0];
} else {
this.range = true;
}
} else if (this.range) {
// User wants a range, but value is not an array
this.value = [this.value, this.max];
}
this.selection = this.element.data('slider-selection')||options.selection;
this.selectionEl = this.picker.find('.slider-selection');
if (this.selection === 'none') {
this.selectionEl.addClass('hide');
}
this.selectionElStyle = this.selectionEl[0].style;
this.handle1 = this.picker.find('.slider-handle:first');
this.handle1Stype = this.handle1[0].style;
this.handle2 = this.picker.find('.slider-handle:last');
this.handle2Stype = this.handle2[0].style;
if (updateSlider === true) {
// Reset classes
this.handle1.removeClass('round triangle');
this.handle2.removeClass('round triangle hide');
}
var handle = this.element.data('slider-handle')||options.handle;
switch(handle) {
case 'round':
this.handle1.addClass('round');
this.handle2.addClass('round');
break;
case 'triangle':
this.handle1.addClass('triangle');
this.handle2.addClass('triangle');
break;
}
if (this.range) {
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
} else {
this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
this.handle2.addClass('hide');
if (this.selection === 'after') {
this.value[1] = this.max;
} else {
this.value[1] = this.min;
}
}
this.diff = this.max - this.min;
this.percentage = [
(this.value[0]-this.min)*100/this.diff,
(this.value[1]-this.min)*100/this.diff,
this.step*100/this.diff
];
this.offset = this.picker.offset();
this.size = this.picker[0][this.sizePos];
this.formater = options.formater;
this.tooltip_separator = options.tooltip_separator;
this.tooltip_split = options.tooltip_split;
this.reversed = this.element.data('slider-reversed')||options.reversed;
this.layout();
this.layout();
this.handle1.on({
keydown: $.proxy(this.keydown, this, 0)
});
this.handle2.on({
keydown: $.proxy(this.keydown, this, 1)
});
if (this.touchCapable) {
// Touch: Bind touch events:
this.picker.on({
touchstart: $.proxy(this.mousedown, this)
});
} else {
this.picker.on({
mousedown: $.proxy(this.mousedown, this)
});
}
if(tooltip === 'hide') {
this.tooltip.addClass('hide');
this.tooltip_min.addClass('hide');
this.tooltip_max.addClass('hide');
} else if(tooltip === 'always') {
this.showTooltip();
this.alwaysShowTooltip = true;
} else {
this.picker.on({
mouseenter: $.proxy(this.showTooltip, this),
mouseleave: $.proxy(this.hideTooltip, this)
});
this.handle1.on({
focus: $.proxy(this.showTooltip, this),
blur: $.proxy(this.hideTooltip, this)
});
this.handle2.on({
focus: $.proxy(this.showTooltip, this),
blur: $.proxy(this.hideTooltip, this)
});
}
this.enabled = options.enabled &&
(this.element.data('slider-enabled') === undefined || this.element.data('slider-enabled') === true);
if(this.enabled) {
this.enable();
} else {
this.disable();
}
};
Slider.prototype = {
constructor: Slider,
over: false,
inDrag: false,
showTooltip: function(){
if (this.tooltip_split === false ){
this.tooltip.addClass('in');
} else {
this.tooltip_min.addClass('in');
this.tooltip_max.addClass('in');
}
this.over = true;
},
hideTooltip: function(){
if (this.inDrag === false && this.alwaysShowTooltip !== true) {
this.tooltip.removeClass('in');
this.tooltip_min.removeClass('in');
this.tooltip_max.removeClass('in');
}
this.over = false;
},
layout: function(){
var positionPercentages;
if(this.reversed) {
positionPercentages = [ 100 - this.percentage[0], this.percentage[1] ];
} else {
positionPercentages = [ this.percentage[0], this.percentage[1] ];
}
this.handle1Stype[this.stylePos] = positionPercentages[0]+'%';
this.handle2Stype[this.stylePos] = positionPercentages[1]+'%';
if (this.orientation === 'vertical') {
this.selectionElStyle.top = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
this.selectionElStyle.height = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';
} else {
this.selectionElStyle.left = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
this.selectionElStyle.width = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';
var offset_min = this.tooltip_min[0].getBoundingClientRect();
var offset_max = this.tooltip_max[0].getBoundingClientRect();
if (offset_min.right > offset_max.left) {
this.tooltip_max.removeClass('top');
this.tooltip_max.addClass('bottom')[0].style.top = 18 + 'px';
} else {
this.tooltip_max.removeClass('bottom');
this.tooltip_max.addClass('top')[0].style.top = -30 + 'px';
}
}
if (this.range) {
this.tooltipInner.text(
this.formater(this.value[0]) + this.tooltip_separator + this.formater(this.value[1])
);
this.tooltip[0].style[this.stylePos] = this.size * (positionPercentages[0] + (positionPercentages[1] - positionPercentages[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
this.tooltipInner_min.text(
this.formater(this.value[0])
);
this.tooltipInner_max.text(
this.formater(this.value[1])
);
this.tooltip_min[0].style[this.stylePos] = this.size * ( (positionPercentages[0])/100) - (this.orientation === 'vertical' ? this.tooltip_min.outerHeight()/2 : this.tooltip_min.outerWidth()/2) +'px';
this.tooltip_max[0].style[this.stylePos] = this.size * ( (positionPercentages[1])/100) - (this.orientation === 'vertical' ? this.tooltip_max.outerHeight()/2 : this.tooltip_max.outerWidth()/2) +'px';
} else {
this.tooltipInner.text(
this.formater(this.value[0])
);
this.tooltip[0].style[this.stylePos] = this.size * positionPercentages[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
}
},
mousedown: function(ev) {
if(!this.isEnabled()) {
return false;
}
// Touch: Get the original event:
if (this.touchCapable && ev.type === 'touchstart') {
ev = ev.originalEvent;
}
this.triggerFocusOnHandle();
this.offset = this.picker.offset();
this.size = this.picker[0][this.sizePos];
var percentage = this.getPercentage(ev);
if (this.range) {
var diff1 = Math.abs(this.percentage[0] - percentage);
var diff2 = Math.abs(this.percentage[1] - percentage);
this.dragged = (diff1 < diff2) ? 0 : 1;
} else {
this.dragged = 0;
}
this.percentage[this.dragged] = this.reversed ? 100 - percentage : percentage;
this.layout();
if (this.touchCapable) {
// Touch: Bind touch events:
$(document).on({
touchmove: $.proxy(this.mousemove, this),
touchend: $.proxy(this.mouseup, this)
});
} else {
$(document).on({
mousemove: $.proxy(this.mousemove, this),
mouseup: $.proxy(this.mouseup, this)
});
}
this.inDrag = true;
var val = this.calculateValue();
this.setValue(val);
this.element.trigger({
type: 'slideStart',
value: val
}).trigger({
type: 'slide',
value: val
});
return true;
},
triggerFocusOnHandle: function(handleIdx) {
if(handleIdx === 0) {
this.handle1.focus();
}
if(handleIdx === 1) {
this.handle2.focus();
}
},
keydown: function(handleIdx, ev) {
if(!this.isEnabled()) {
return false;
}
var dir;
switch (ev.which) {
case 37: // left
case 40: // down
dir = -1;
break;
case 39: // right
case 38: // up
dir = 1;
break;
}
if (!dir) {
return;
}
var oneStepValuePercentageChange = dir * this.percentage[2];
var percentage = this.percentage[handleIdx] + oneStepValuePercentageChange;
if (percentage > 100) {
percentage = 100;
} else if (percentage < 0) {
percentage = 0;
}
this.dragged = handleIdx;
this.adjustPercentageForRangeSliders(percentage);
this.percentage[this.dragged] = percentage;
this.layout();
var val = this.calculateValue();
this.setValue(val);
this.element
.trigger({
type: 'slide',
value: val
})
.trigger({
type: 'slideStop',
value: val
})
.data('value', val)
.prop('value', val);
return false;
},
mousemove: function(ev) {
if(!this.isEnabled()) {
return false;
}
// Touch: Get the original event:
if (this.touchCapable && ev.type === 'touchmove') {
ev = ev.originalEvent;
}
var percentage = this.getPercentage(ev);
this.adjustPercentageForRangeSliders(percentage);
this.percentage[this.dragged] = this.reversed ? 100 - percentage : percentage;
this.layout();
var val = this.calculateValue();
this.setValue(val);
this.element
.trigger({
type: 'slide',
value: val
})
.data('value', val)
.prop('value', val);
return false;
},
adjustPercentageForRangeSliders: function(percentage) {
if (this.range) {
if (this.dragged === 0 && this.percentage[1] < percentage) {
this.percentage[0] = this.percentage[1];
this.dragged = 1;
} else if (this.dragged === 1 && this.percentage[0] > percentage) {
this.percentage[1] = this.percentage[0];
this.dragged = 0;
}
}
},
mouseup: function() {
if(!this.isEnabled()) {
return false;
}
if (this.touchCapable) {
// Touch: Bind touch events:
$(document).off({
touchmove: this.mousemove,
touchend: this.mouseup
});
} else {
$(document).off({
mousemove: this.mousemove,
mouseup: this.mouseup
});
}
this.inDrag = false;
if (this.over === false) {
this.hideTooltip();
}
var val = this.calculateValue();
this.layout();
this.element
.data('value', val)
.prop('value', val)
.trigger({
type: 'slideStop',
value: val
});
return false;
},
calculateValue: function() {
var val;
if (this.range) {
val = [this.min,this.max];
if (this.percentage[0] !== 0){
val[0] = (Math.max(this.min, this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step));
}
if (this.percentage[1] !== 100){
val[1] = (Math.min(this.max, this.min + Math.round((this.diff * this.percentage[1]/100)/this.step)*this.step));
}
this.value = val;
} else {
val = (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step);
if (val < this.min) {
val = this.min;
}
else if (val > this.max) {
val = this.max;
}
val = parseFloat(val);
this.value = [val, this.value[1]];
}
return val;
},
getPercentage: function(ev) {
if (this.touchCapable) {
ev = ev.touches[0];
}
var percentage = (ev[this.mousePos] - this.offset[this.stylePos])*100/this.size;
percentage = Math.round(percentage/this.percentage[2])*this.percentage[2];
return Math.max(0, Math.min(100, percentage));
},
getValue: function() {
if (this.range) {
return this.value;
}
return this.value[0];
},
setValue: function(val) {
this.value = this.validateInputValue(val);
if (this.range) {
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
} else {
this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
this.handle2.addClass('hide');
if (this.selection === 'after') {
this.value[1] = this.max;
} else {
this.value[1] = this.min;
}
}
this.diff = this.max - this.min;
this.percentage = [
(this.value[0]-this.min)*100/this.diff,
(this.value[1]-this.min)*100/this.diff,
this.step*100/this.diff
];
this.layout();
this.element
.trigger({
'type': 'slide',
'value': this.value
})
.data('value', this.value)
.prop('value', this.value);
},
validateInputValue : function(val) {
if(typeof val === 'number') {
return val;
} else if(val instanceof Array) {
$.each(val, function(i, input) { if (typeof input !== 'number') { throw new Error( ErrorMsgs.formatInvalidInputErrorMsg(input) ); }});
return val;
} else {
throw new Error( ErrorMsgs.formatInvalidInputErrorMsg(val) );
}
},
destroy: function(){
this.handle1.off();
this.handle2.off();
this.element.off().show().insertBefore(this.picker);
this.picker.off().remove();
$(this.element).removeData('slider');
},
disable: function() {
this.enabled = false;
this.handle1.removeAttr("tabindex");
this.handle2.removeAttr("tabindex");
this.picker.addClass('slider-disabled');
this.element.trigger('slideDisabled');
},
enable: function() {
this.enabled = true;
this.handle1.attr("tabindex", 0);
this.handle2.attr("tabindex", 0);
this.picker.removeClass('slider-disabled');
this.element.trigger('slideEnabled');
},
toggle: function() {
if(this.enabled) {
this.disable();
} else {
this.enable();
}
},
isEnabled: function() {
return this.enabled;
},
setAttribute: function(attribute, value) {
this[attribute] = value;
}
};
var publicMethods = {
getValue : Slider.prototype.getValue,
setValue : Slider.prototype.setValue,
setAttribute : Slider.prototype.setAttribute,
destroy : Slider.prototype.destroy,
disable : Slider.prototype.disable,
enable : Slider.prototype.enable,
toggle : Slider.prototype.toggle,
isEnabled: Slider.prototype.isEnabled
};
$.fn.slider = function (option) {
if (typeof option === 'string' && option !== 'refresh') {
var args = Array.prototype.slice.call(arguments, 1);
return invokePublicMethod.call(this, option, args);
} else {
return createNewSliderInstance.call(this, option);
}
};
function invokePublicMethod(methodName, args) {
if(publicMethods[methodName]) {
var sliderObject = retrieveSliderObjectFromElement(this);
var result = publicMethods[methodName].apply(sliderObject, args);
if (typeof result === "undefined") {
return $(this);
} else {
return result;
}
} else {
throw new Error("method '" + methodName + "()' does not exist for slider.");
}
}
function retrieveSliderObjectFromElement(element) {
var sliderObject = $(element).data('slider');
if(sliderObject && sliderObject instanceof Slider) {
return sliderObject;
} else {
throw new Error(ErrorMsgs.callingContextNotSliderInstance);
}
}
function createNewSliderInstance(opts) {
var $this = $(this);
$this.each(function() {
var $this = $(this),
slider = $this.data('slider'),
options = typeof opts === 'object' && opts;
// If slider already exists, use its attributes
// as options so slider refreshes properly
if (slider && !options) {
options = {};
$.each($.fn.slider.defaults, function(key) {
options[key] = slider[key];
});
}
$this.data('slider', (new Slider(this, $.extend({}, $.fn.slider.defaults, options))));
});
return $this;
}
$.fn.slider.defaults = {
min: 0,
max: 10,
step: 1,
orientation: 'horizontal',
value: 5,
range: false,
selection: 'before',
tooltip: 'show',
tooltip_separator: ':',
tooltip_split: false,
handle: 'round',
reversed : false,
enabled: true,
formater: function(value) {
return value;
}
};
$.fn.slider.Constructor = Slider;
})( window.jQuery );

View File

@@ -0,0 +1,138 @@
/*!
* Slider for Bootstrap
*
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
}
.slider.slider-horizontal {
width: 210px;
height: 20px;
}
.slider.slider-horizontal .slider-track {
height: 10px;
width: 100%;
margin-top: -5px;
top: 50%;
left: 0;
}
.slider.slider-horizontal .slider-selection {
height: 100%;
top: 0;
bottom: 0;
}
.slider.slider-horizontal .slider-handle {
margin-left: -10px;
margin-top: -5px;
}
.slider.slider-horizontal .slider-handle.triangle {
border-width: 0 10px 10px 10px;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
.slider.slider-vertical {
height: 210px;
width: 20px;
}
.slider.slider-vertical .slider-track {
width: 10px;
height: 100%;
margin-left: -5px;
left: 50%;
top: 0;
}
.slider.slider-vertical .slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider.slider-vertical .slider-handle {
margin-left: -5px;
margin-top: -10px;
}
.slider.slider-vertical .slider-handle.triangle {
border-width: 10px 0 10px 10px;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
.slider input {
display: none;
}
.slider .tooltip-inner {
white-space: nowrap;
}
.slider-track {
position: absolute;
cursor: pointer;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider-selection {
position: absolute;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider-handle {
position: absolute;
width: 20px;
height: 20px;
background-color: #0e90d2;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(to bottom, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
opacity: 0.8;
border: 0px solid transparent;
}
.slider-handle.round {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.slider-handle.triangle {
background: transparent none;
}

View File

@@ -0,0 +1,388 @@
/* =========================================================
* bootstrap-slider.js v2.0.0
* http://www.eyecon.ro/bootstrap-slider
* =========================================================
* Copyright 2012 Stefan Petre
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function( $ ) {
var Slider = function(element, options) {
this.element = $(element);
this.picker = $('<div class="slider">'+
'<div class="slider-track">'+
'<div class="slider-selection"></div>'+
'<div class="slider-handle"></div>'+
'<div class="slider-handle"></div>'+
'</div>'+
'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'+
'</div>')
.insertBefore(this.element)
.append(this.element);
this.id = this.element.data('slider-id')||options.id;
if (this.id) {
this.picker[0].id = this.id;
}
if (typeof Modernizr !== 'undefined' && Modernizr.touch) {
this.touchCapable = true;
}
var tooltip = this.element.data('slider-tooltip')||options.tooltip;
this.tooltip = this.picker.find('.tooltip');
this.tooltipInner = this.tooltip.find('div.tooltip-inner');
this.orientation = this.element.data('slider-orientation')||options.orientation;
switch(this.orientation) {
case 'vertical':
this.picker.addClass('slider-vertical');
this.stylePos = 'top';
this.mousePos = 'pageY';
this.sizePos = 'offsetHeight';
this.tooltip.addClass('right')[0].style.left = '100%';
break;
default:
this.picker
.addClass('slider-horizontal')
.css('width', this.element.outerWidth());
this.orientation = 'horizontal';
this.stylePos = 'left';
this.mousePos = 'pageX';
this.sizePos = 'offsetWidth';
this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
break;
}
this.min = this.element.data('slider-min')||options.min;
this.max = this.element.data('slider-max')||options.max;
this.step = this.element.data('slider-step')||options.step;
this.value = this.element.data('slider-value')||options.value;
if (this.value[1]) {
this.range = true;
}
this.selection = this.element.data('slider-selection')||options.selection;
this.selectionEl = this.picker.find('.slider-selection');
if (this.selection === 'none') {
this.selectionEl.addClass('hide');
}
this.selectionElStyle = this.selectionEl[0].style;
this.handle1 = this.picker.find('.slider-handle:first');
this.handle1Stype = this.handle1[0].style;
this.handle2 = this.picker.find('.slider-handle:last');
this.handle2Stype = this.handle2[0].style;
var handle = this.element.data('slider-handle')||options.handle;
switch(handle) {
case 'round':
this.handle1.addClass('round');
this.handle2.addClass('round');
break
case 'triangle':
this.handle1.addClass('triangle');
this.handle2.addClass('triangle');
break
}
if (this.range) {
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
} else {
this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
this.handle2.addClass('hide');
if (this.selection == 'after') {
this.value[1] = this.max;
} else {
this.value[1] = this.min;
}
}
this.diff = this.max - this.min;
this.percentage = [
(this.value[0]-this.min)*100/this.diff,
(this.value[1]-this.min)*100/this.diff,
this.step*100/this.diff
];
this.offset = this.picker.offset();
this.size = this.picker[0][this.sizePos];
this.formater = options.formater;
this.layout();
if (this.touchCapable) {
// Touch: Bind touch events:
this.picker.on({
touchstart: $.proxy(this.mousedown, this)
});
} else {
this.picker.on({
mousedown: $.proxy(this.mousedown, this)
});
}
if (tooltip === 'show') {
this.picker.on({
mouseenter: $.proxy(this.showTooltip, this),
mouseleave: $.proxy(this.hideTooltip, this)
});
} else {
this.tooltip.addClass('hide');
}
};
Slider.prototype = {
constructor: Slider,
over: false,
inDrag: false,
showTooltip: function(){
this.tooltip.addClass('in');
//var left = Math.round(this.percent*this.width);
//this.tooltip.css('left', left - this.tooltip.outerWidth()/2);
this.over = true;
},
hideTooltip: function(){
if (this.inDrag === false) {
this.tooltip.removeClass('in');
}
this.over = false;
},
layout: function(){
this.handle1Stype[this.stylePos] = this.percentage[0]+'%';
this.handle2Stype[this.stylePos] = this.percentage[1]+'%';
if (this.orientation == 'vertical') {
this.selectionElStyle.top = Math.min(this.percentage[0], this.percentage[1]) +'%';
this.selectionElStyle.height = Math.abs(this.percentage[0] - this.percentage[1]) +'%';
} else {
this.selectionElStyle.left = Math.min(this.percentage[0], this.percentage[1]) +'%';
this.selectionElStyle.width = Math.abs(this.percentage[0] - this.percentage[1]) +'%';
}
if (this.range) {
this.tooltipInner.text(
this.formater(this.value[0]) +
' : ' +
this.formater(this.value[1])
);
this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
} else {
this.tooltipInner.text(
this.formater(this.value[0])
);
this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
}
},
mousedown: function(ev) {
// Touch: Get the original event:
if (this.touchCapable && ev.type === 'touchstart') {
ev = ev.originalEvent;
}
this.offset = this.picker.offset();
this.size = this.picker[0][this.sizePos];
var percentage = this.getPercentage(ev);
if (this.range) {
var diff1 = Math.abs(this.percentage[0] - percentage);
var diff2 = Math.abs(this.percentage[1] - percentage);
this.dragged = (diff1 < diff2) ? 0 : 1;
} else {
this.dragged = 0;
}
this.percentage[this.dragged] = percentage;
this.layout();
if (this.touchCapable) {
// Touch: Bind touch events:
$(document).on({
touchmove: $.proxy(this.mousemove, this),
touchend: $.proxy(this.mouseup, this)
});
} else {
$(document).on({
mousemove: $.proxy(this.mousemove, this),
mouseup: $.proxy(this.mouseup, this)
});
}
this.inDrag = true;
var val = this.calculateValue();
this.element.trigger({
type: 'slideStart',
value: val
}).trigger({
type: 'slide',
value: val
});
return false;
},
mousemove: function(ev) {
// Touch: Get the original event:
if (this.touchCapable && ev.type === 'touchmove') {
ev = ev.originalEvent;
}
var percentage = this.getPercentage(ev);
if (this.range) {
if (this.dragged === 0 && this.percentage[1] < percentage) {
this.percentage[0] = this.percentage[1];
this.dragged = 1;
} else if (this.dragged === 1 && this.percentage[0] > percentage) {
this.percentage[1] = this.percentage[0];
this.dragged = 0;
}
}
this.percentage[this.dragged] = percentage;
this.layout();
var val = this.calculateValue();
this.element
.trigger({
type: 'slide',
value: val
})
.data('value', val)
.prop('value', val);
return false;
},
mouseup: function(ev) {
if (this.touchCapable) {
// Touch: Bind touch events:
$(document).off({
touchmove: this.mousemove,
touchend: this.mouseup
});
} else {
$(document).off({
mousemove: this.mousemove,
mouseup: this.mouseup
});
}
this.inDrag = false;
if (this.over == false) {
this.hideTooltip();
}
this.element;
var val = this.calculateValue();
this.element
.trigger({
type: 'slideStop',
value: val
})
.data('value', val)
.prop('value', val);
return false;
},
calculateValue: function() {
var val;
if (this.range) {
val = [
(this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step),
(this.min + Math.round((this.diff * this.percentage[1]/100)/this.step)*this.step)
];
this.value = val;
} else {
val = (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step);
this.value = [val, this.value[1]];
}
return val;
},
getPercentage: function(ev) {
if (this.touchCapable) {
ev = ev.touches[0];
}
var percentage = (ev[this.mousePos] - this.offset[this.stylePos])*100/this.size;
percentage = Math.round(percentage/this.percentage[2])*this.percentage[2];
return Math.max(0, Math.min(100, percentage));
},
getValue: function() {
if (this.range) {
return this.value;
}
return this.value[0];
},
setValue: function(val) {
this.value = val;
if (this.range) {
this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
} else {
this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
this.handle2.addClass('hide');
if (this.selection == 'after') {
this.value[1] = this.max;
} else {
this.value[1] = this.min;
}
}
this.diff = this.max - this.min;
this.percentage = [
(this.value[0]-this.min)*100/this.diff,
(this.value[1]-this.min)*100/this.diff,
this.step*100/this.diff
];
this.layout();
}
};
$.fn.slider = function ( option, val ) {
return this.each(function () {
var $this = $(this),
data = $this.data('slider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options))));
}
if (typeof option == 'string') {
data[option](val);
}
})
};
$.fn.slider.defaults = {
min: 0,
max: 10,
step: 1,
orientation: 'horizontal',
value: 5,
selection: 'before',
tooltip: 'show',
handle: 'round',
formater: function(value) {
return value;
}
};
$.fn.slider.Constructor = Slider;
}( window.jQuery );

View File

@@ -0,0 +1,104 @@
/*!
* Slider for Bootstrap
*
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
&.slider-horizontal {
width: 210px;
height: @baseLineHeight;
.slider-track {
height: @baseLineHeight/2;
width: 100%;
margin-top: -@baseLineHeight/4;
top: 50%;
left: 0;
}
.slider-selection {
height: 100%;
top: 0;
bottom: 0;
}
.slider-handle {
margin-left: -@baseLineHeight/2;
margin-top: -@baseLineHeight/4;
&.triangle {
border-width: 0 @baseLineHeight/2 @baseLineHeight/2 @baseLineHeight/2;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
}
}
&.slider-vertical {
height: 210px;
width: @baseLineHeight;
.slider-track {
width: @baseLineHeight/2;
height: 100%;
margin-left: -@baseLineHeight/4;
left: 50%;
top: 0;
}
.slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider-handle {
margin-left: -@baseLineHeight/4;
margin-top: -@baseLineHeight/2;
&.triangle {
border-width: @baseLineHeight/2 0 @baseLineHeight/2 @baseLineHeight/2;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
}
}
input {
display: none;
}
.tooltip-inner {
white-space: nowrap;
}
}
.slider-track {
position: absolute;
cursor: pointer;
#gradient > .vertical(#f5f5f5, #f9f9f9);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
.border-radius(@baseBorderRadius);
}
.slider-selection {
position: absolute;
#gradient > .vertical(#f9f9f9, #f5f5f5);
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.box-sizing(border-box);
.border-radius(@baseBorderRadius);
}
.slider-handle {
position: absolute;
width: @baseLineHeight;
height: @baseLineHeight;
#gradient > .vertical(#149bdf, #0480be);
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
opacity: 0.8;
border: 0px solid transparent;
&.round {
.border-radius(@baseLineHeight);
}
&.triangle {
background: transparent none;
}
}

View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2013 - Vincent Gabriel & Jason Gill
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@@ -0,0 +1,231 @@
Twitter Bootstrap Wizard
============================
This Twitter Bootstrap plugin builds a wizard using a formatted tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.
<a href="http://vadimg.com/twitter-bootstrap-wizard-example/" target="_blank">Website & Demo</a>
<a href='https://twitter.com/gabrielva' target='_blank'>Follow @gabrielva</a>
Requirements
-------------
* Requires jQuery v1.3.2 or later
* Bootstrap 2.2.x, 2.3.x, 3.0
Code Examples
-------------
```javascript
//basic wizard
$(document).ready(function() {
$('#rootwizard').bootstrapWizard();
});
```
```javascript
//wizard with options and events
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
tabClass: 'nav nav-pills',
onNext: function(tab, navigation, index) {
alert('next');
}
});
});
```
```javascript
//calling a method
$('#rootwizard').bootstrapWizard('show',3);
```
Options
-------
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Key</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>tabClass</td>
<td>'nav nav-pills'</td>
<td>ul navigation class</td>
</tr>
<tr>
<td>nextSelector</td>
<td>'.wizard li.next'</td>
<td>next element selector</td>
</tr>
<tr>
<td>previousSelector</td>
<td>'.wizard li.previous'</td>
<td>previous element selector</td>
</tr>
<tr>
<td>firstSelector</td>
<td>'.wizard li.first'</td>
<td>first element selector</td>
</tr>
<tr>
<td>lastSelector</td>
<td>'.wizard li.last'</td>
<td>last element selector</td>
</tr>
</tbody>
</table>
Events
------
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onInit</td>
<td>Fired when plugin is initialized</td>
</tr>
<tr>
<td>onShow</td>
<td>Fired when plugin data is shown</td>
</tr>
<tr>
<td>onNext</td>
<td>Fired when next button is clicked (return false to disable moving to the next step)</td>
</tr>
<tr>
<td>onPrevious</td>
<td>Fired when previous button is clicked (return false to disable moving to the previous step)</td>
</tr>
<tr>
<td>onFirst</td>
<td>Fired when first button is clicked (return false to disable moving to the first step)</td>
</tr>
<tr>
<td>onLast</td>
<td>Fired when last button is clicked (return false to disable moving to the last step)</td>
</tr>
<tr>
<td>onTabChange</td>
<td>Fired when a tab is changed (return false to disable moving to that tab and showing its contents)</td>
</tr>
<tr>
<td>onTabClick</td>
<td>Fired when a tab is clicked (return false to disable moving to that tab and showing its contents)</td>
</tr>
<tr>
<td>onTabShow</td>
<td>Fired when a tab content is shown (return false to disable showing that tab content)</td>
</tr>
</tbody>
</table>
Methods
-------
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Key</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td></td>
<td>Moves to the next tab</td>
</tr>
<tr>
<td>previous</td>
<td></td>
<td>Moves to the previous tab</td>
</tr>
<tr>
<td>first</td>
<td></td>
<td>Jumps to the first tab</td>
</tr>
<tr>
<td>last</td>
<td></td>
<td>Jumps to the last tab</td>
</tr>
<tr>
<td>show</td>
<td>zero based index</td>
<td>Jumps to the specified tab</td>
</tr>
<tr>
<td>currentIndex</td>
<td></td>
<td>Returns the zero based index number for the current tab</td>
</tr>
<tr>
<td>navigationLength</td>
<td></td>
<td>Returns the number of tabs</td>
</tr>
<tr>
<td>enable</td>
<td>zero based index</td>
<td>Enables a tab, allows a user to click it (removes .disabled if the item has that class)</td>
</tr>
<tr>
<td>disable</td>
<td>zero based index</td>
<td>Disables a tab, disallows a user to click it (adds .disabled to the li element)</td>
</tr>
<tr>
<td>display</td>
<td>zero based index</td>
<td>Displays the li element if it was previously hidden</td>
</tr>
<tr>
<td>hide</td>
<td>zero based index</td>
<td>Hides the li element (will not remove it from the DOM)</td>
</tr>
<tr>
<td>remove</td>
<td>zero based index, optinal bool remove tab-pane element or not false by default</td>
<td>Removes the li element from the DOM if second argument is true will also remove the tab-pane element</td>
</tr>
</tbody>
</table>
<p>&copy; <a href='http://vadimg.com' target="_blank">Vadim Vincent Gabriel</a> <a href='https://twitter.com/gabrielva' target='_blank'>Follow @gabrielva</a> 2012</p>
License
===============
The MIT License (MIT)
Copyright (c) 2013 - Vincent Gabriel & Jason Gill
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,36 @@
{
"name": "twitter-bootstrap-wizard",
"version": "1.2",
"ignore": [
"**/.*",
"examples",
"README.md",
"*.txt",
"*.html",
"prettify.js",
"prettify.css",
"bower.json",
"node_modules",
"bower_components",
"test",
"tests"
],
"main": [
"jquery.bootstrap.wizard.min.js"
],
"dependencies": {
"jquery": ">=1.9.1",
"bootstrap": ">=2.3.0"
},
"homepage": "https://github.com/VinceG/twitter-bootstrap-wizard",
"authors": [
"Vincent Gabriel <vadimg88@gmail.com>"
],
"description": "This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.",
"keywords": [
"twitter",
"bootstrap",
"wizard"
],
"license": "MIT"
}

View File

@@ -0,0 +1,214 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Custom Example</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- custom styles -->
<link href="custom.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Basic Custom Wizard</h1>
</div>
<div id="rootwizard">
<ul>
<li><a href="#tab1" data-toggle="tab"><span class="label">1</span> First</a></li>
<li><a href="#tab2" data-toggle="tab"><span class="label">2</span> Second</a></li>
<li><a href="#tab3" data-toggle="tab"><span class="label">3</span> Third</a></li>
<li><a href="#tab4" data-toggle="tab"><span class="label">4</span> Forth</a></li>
<li><a href="#tab5" data-toggle="tab"><span class="label">5</span> Fifth</a></li>
<li><a href="#tab6" data-toggle="tab"><span class="label">6</span> Sixth</a></li>
<li><a href="#tab7" data-toggle="tab"><span class="label">7</span> Seventh</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">&lt;span class="label">1&lt;/span> First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">&lt;span class="label">2&lt;/span> Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">&lt;span class="label">3&lt;/span> Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">&lt;span class="label">4&lt;/span> Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">&lt;span class="label">5&lt;/span> Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">&lt;span class="label">6&lt;/span> Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">&lt;span class="label">7&lt;/span> Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'bwizard-steps'});
});
</pre>
<h3>CSS</h3>
<pre class="prettyprint linenums">
.bwizard-steps {
display: inline-block;
margin: 0; padding: 0;
background: #fff }
.bwizard-steps .active {
color: #fff;
background: #007ACC }
.bwizard-steps .active:after {
border-left-color: #007ACC }
.bwizard-steps .active a {
color: #fff;
cursor: default }
.bwizard-steps .label {
position: relative;
top: -1px;
margin: 0 5px 0 0; padding: 1px 5px 2px }
.bwizard-steps .active .label {
background-color: #333;}
.bwizard-steps li {
display: inline-block; position: relative;
margin-right: 5px;
padding: 12px 17px 10px 30px;
*display: inline;
*padding-left: 17px;
background: #efefef;
line-height: 18px;
list-style: none;
zoom: 1; }
.bwizard-steps li:first-child {
padding-left: 12px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
.bwizard-steps li:first-child:before {
border: none }
.bwizard-steps li:last-child {
margin-right: 0;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
.bwizard-steps li:last-child:after {
border: none }
.bwizard-steps li:before {
position: absolute;
left: 0; top: 0;
height: 0; width: 0;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
border-top: 20px inset transparent;
content: "" }
.bwizard-steps li:after {
position: absolute;
right: -20px; top: 0;
height: 0; width: 0;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
border-top: 20px inset transparent;
content: "";
z-index: 2; }
.bwizard-steps a {
color: #333 }
.bwizard-steps a:hover {
text-decoration: none }
.bwizard-steps.clickable li:not(.active) {
cursor: pointer }
.bwizard-steps.clickable li:hover:not(.active) {
background: #ccc }
.bwizard-steps.clickable li:hover:not(.active):after {
border-left-color: #ccc }
.bwizard-steps.clickable li:hover:not(.active) a {
color: #08c }
@media (max-width: 480px) {
/* badges only on small screens */
.bwizard-steps li:after,
.bwizard-steps li:before {
border: none }
.bwizard-steps li,
.bwizard-steps li.active,
.bwizard-steps li:first-child,
.bwizard-steps li:last-child {
margin-right: 0;
padding: 0;
background-color: transparent }
}
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'bwizard-steps'});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html>
<head>
<title>Wizard With Custom Tabs Example</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Wizard With Custom Tabs Example</h1>
</div>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<div style="float:right">
<input type='button' class='btn button-next' name='next' value='Next' />
</div>
<div style="float:left">
<input type='button' class='btn button-previous' name='previous' value='Previous' />
</div>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;div class="navbar">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;div style="float:right">
&lt;input type='button' class='btn button-next' name='next' value='Next' />
&lt;/div>
&lt;div style="float:left">
&lt;input type='button' class='btn button-previous' name='previous' value='Previous' />
&lt;/div>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous'});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous'});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html>
<head>
<title>Wizard With Custom Next/Previous Buttons & First and Last buttons</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Wizard With Custom Next/Previous Buttons & First and Last buttons</h1>
</div>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<div style="float:right">
<input type='button' class='btn button-next' name='next' value='Next' />
<input type='button' class='btn button-last' name='last' value='Last' />
</div>
<div style="float:left">
<input type='button' class='btn button-first' name='first' value='First' />
<input type='button' class='btn button-previous' name='previous' value='Previous' />
</div>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;div class="navbar">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;div style="float:right">
&lt;input type='button' class='btn button-next' name='next' value='Next' />
&lt;input type='button' class='btn button-last' name='last' value='Last' />
&lt;/div>
&lt;div style="float:left">
&lt;input type='button' class='btn button-first' name='first' value='First' />
&lt;input type='button' class='btn button-previous' name='previous' value='Previous' />
&lt;/div>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous', 'firstSelector': '.button-first', 'lastSelector': '.button-last'});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous', 'firstSelector': '.button-first', 'lastSelector': '.button-last'});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html>
<head>
<title>Wizard With Disabled Tab Click</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Wizard With Disabled Tab Click</h1>
</div>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;div class="navbar">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onTabClick: function(tab, navigation, index) {
alert('on tab click disabled');
return false;
}});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onTabClick: function(tab, navigation, index) {
alert('on tab click disabled');
return false;
}});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,178 @@
<!DOCTYPE html>
<html>
<head>
<title>Wizard With Finish Button On last tab</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Wizard With Finish Button On last tab</h1>
</div>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first"><a href="javascript:;">First</a></li>
<li class="previous"><a href="javascript:;">Previous</a></li>
<li class="next last"><a href="javascript:;">Last</a></li>
<li class="next"><a href="javascript:;">Next</a></li>
<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;div class="navbar">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first">&lt;a href="javascript:;">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="javascript:;">Previous&lt;/a>&lt;/li>
&lt;li class="next last">&lt;a href="javascript:;">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="javascript:;">Next&lt;/a>&lt;/li>
&lt;li class="next finish" style="display:none;">&lt;a href="javascript:;">Finish&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show();
$('#rootwizard').find('.pager .finish').removeClass('disabled');
} else {
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
}});
$('#rootwizard .finish').click(function() {
alert('Finished!, Starting over!');
$('#rootwizard').find("a[href*='tab1']").trigger('click');
});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show();
$('#rootwizard').find('.pager .finish').removeClass('disabled');
} else {
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
}});
$('#rootwizard .finish').click(function() {
alert('Finished!, Starting over!');
$('#rootwizard').find("a[href*='tab1']").trigger('click');
});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html>
<head>
<title>Wizard With Form Validation</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Wizard With Form Validation</h1>
</div>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
<p>
<input type='text' name='name' id='name' placeholder='Enter Your Name'>
</p>
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;div class="navbar">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div id="bar" class="progress progress-striped active">
&lt;div class="bar">&lt;/div>
&lt;/div>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
&lt;p>
&lt;input type='text' name='name' id='name' placeholder='Enter Your Name'>
&lt;/p>
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
if(index==2) {
// Make sure we entered the name
if(!$('#name').val()) {
alert('You must enter your name');
$('#name').focus();
return false;
}
}
// Set the name for the next tab
$('#tab3').html('Hello, ' + $('#name').val());
}, onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
}});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
if(index==2) {
// Make sure we entered the name
if(!$('#name').val()) {
alert('You must enter your name');
$('#name').focus();
return false;
}
}
// Set the name for the next tab
$('#tab3').html('Hello, ' + $('#name').val());
}, onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
}});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Inverse Example</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Basic Inverse Wizard</h1>
</div>
<div id="rootwizard">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;div class="navbar navbar-inverse">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard();
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard();
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Pills Example</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Basic Pills Wizard</h1>
</div>
<div id="rootwizard">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html>
<head>
<title>Wizard With Progress Bar using events</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Wizard With Progress Bar using events</h1>
</div>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;div class="navbar">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div id="bar" class="progress progress-striped active">
&lt;div class="bar">&lt;/div>
&lt;/div>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
}});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
}});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Tabs Left Example</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Basic Tabs Left Wizard</h1>
</div>
<div id="rootwizard" class="tabbable tabs-left">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard" class="tabbable tabs-left">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-tabs'});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-tabs'});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Example</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Basic Wizard</h1>
</div>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;div class="navbar">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard();
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard();
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,84 @@
.bwizard-steps {
display: inline-block;
margin: 0; padding: 0;
background: #fff }
.bwizard-steps .active {
color: #fff;
background: #007ACC }
.bwizard-steps .active:after {
border-left-color: #007ACC }
.bwizard-steps .active a {
color: #fff;
cursor: default }
.bwizard-steps .label {
position: relative;
top: -1px;
margin: 0 5px 0 0; padding: 1px 5px 2px }
.bwizard-steps .active .label {
background-color: #333;}
.bwizard-steps li {
display: inline-block; position: relative;
margin-right: 5px;
padding: 12px 17px 10px 30px;
*display: inline;
*padding-left: 17px;
background: #efefef;
line-height: 18px;
list-style: none;
zoom: 1; }
.bwizard-steps li:first-child {
padding-left: 12px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
.bwizard-steps li:first-child:before {
border: none }
.bwizard-steps li:last-child {
margin-right: 0;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
.bwizard-steps li:last-child:after {
border: none }
.bwizard-steps li:before {
position: absolute;
left: 0; top: 0;
height: 0; width: 0;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
border-top: 20px inset transparent;
content: "" }
.bwizard-steps li:after {
position: absolute;
right: -20px; top: 0;
height: 0; width: 0;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
border-top: 20px inset transparent;
content: "";
z-index: 2; }
.bwizard-steps a {
color: #333 }
.bwizard-steps a:hover {
text-decoration: none }
.bwizard-steps.clickable li:not(.active) {
cursor: pointer }
.bwizard-steps.clickable li:hover:not(.active) {
background: #ccc }
.bwizard-steps.clickable li:hover:not(.active):after {
border-left-color: #ccc }
.bwizard-steps.clickable li:hover:not(.active) a {
color: #08c }
@media (max-width: 480px) {
/* badges only on small screens */
.bwizard-steps li:after,
.bwizard-steps li:before {
border: none }
.bwizard-steps li,
.bwizard-steps li.active,
.bwizard-steps li:first-child,
.bwizard-steps li:last-child {
margin-right: 0;
padding: 0;
background-color: transparent }
}

View File

@@ -0,0 +1,328 @@
<!DOCTYPE html>
<html>
<head>
<title>Multiple Wizards</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span9">
<section id="wizard">
<div class="page-header">
<h1>Multiple Wizards</h1>
</div>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<div id="pills">
<ul>
<li><a href="#pills-tab1" data-toggle="tab">First</a></li>
<li><a href="#pills-tab2" data-toggle="tab">Second</a></li>
<li><a href="#pills-tab3" data-toggle="tab">Third</a></li>
<li><a href="#pills-tab4" data-toggle="tab">Forth</a></li>
<li><a href="#pills-tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#pills-tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#pills-tab7" data-toggle="tab">Seventh</a></li>
</ul>
<div class="progress progress-danger progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="pills-tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="pills-tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="pills-tab3">
3
</div>
<div class="tab-pane" id="pills-tab4">
4
</div>
<div class="tab-pane" id="pills-tab5">
5
</div>
<div class="tab-pane" id="pills-tab6">
6
</div>
<div class="tab-pane" id="pills-tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<div id="inverse">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#inverse-tab1" data-toggle="tab">First</a></li>
<li><a href="#inverse-tab2" data-toggle="tab">Second</a></li>
<li><a href="#inverse-tab3" data-toggle="tab">Third</a></li>
<li><a href="#inverse-tab4" data-toggle="tab">Forth</a></li>
<li><a href="#inverse-tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#inverse-tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#inverse-tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-info progress-striped">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="inverse-tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="inverse-tab2">
<p>
<input type='text' name='name' id='name' placeholder='Enter Your Name'>
</p>
</div>
<div class="tab-pane" id="inverse-tab3">
3
</div>
<div class="tab-pane" id="inverse-tab4">
4
</div>
<div class="tab-pane" id="inverse-tab5">
5
</div>
<div class="tab-pane" id="inverse-tab6">
6
</div>
<div class="tab-pane" id="inverse-tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<div id="tabsleft" class="tabbable tabs-left">
<ul>
<li><a href="#tabsleft-tab1" data-toggle="tab">First</a></li>
<li><a href="#tabsleft-tab2" data-toggle="tab">Second</a></li>
<li><a href="#tabsleft-tab3" data-toggle="tab">Third</a></li>
<li><a href="#tabsleft-tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tabsleft-tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tabsleft-tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tabsleft-tab7" data-toggle="tab">Seventh</a></li>
</ul>
<div class="progress progress-info progress-striped">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tabsleft-tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tabsleft-tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tabsleft-tab3">
3
</div>
<div class="tab-pane" id="tabsleft-tab4">
4
</div>
<div class="tab-pane" id="tabsleft-tab5">
5
</div>
<div class="tab-pane" id="tabsleft-tab6">
6
</div>
<div class="tab-pane" id="tabsleft-tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first"><a href="javascript:;">First</a></li>
<li class="previous"><a href="javascript:;">Previous</a></li>
<li class="next last"><a href="javascript:;">Last</a></li>
<li class="next"><a href="javascript:;">Next</a></li>
<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
</ul>
</div>
</div>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav', 'debug': false, onShow: function(tab, navigation, index) {
console.log('onShow');
}, onNext: function(tab, navigation, index) {
console.log('onNext');
}, onPrevious: function(tab, navigation, index) {
console.log('onPrevious');
}, onLast: function(tab, navigation, index) {
console.log('onLast');
}, onTabClick: function(tab, navigation, index) {
console.log('onTabClick');
alert('on tab click disabled');
}, onTabShow: function(tab, navigation, index) {
console.log('onTabShow');
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
}});
$('#pills').bootstrapWizard({'tabClass': 'nav nav-pills', 'debug': false, onShow: function(tab, navigation, index) {
console.log('onShow');
}, onNext: function(tab, navigation, index) {
console.log('onNext');
}, onPrevious: function(tab, navigation, index) {
console.log('onPrevious');
}, onLast: function(tab, navigation, index) {
console.log('onLast');
}, onTabClick: function(tab, navigation, index) {
console.log('onTabClick');
alert('on tab click disabled');
}, onTabShow: function(tab, navigation, index) {
console.log('onTabShow');
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#pills').find('.bar').css({width:$percent+'%'});
}});
$('#tabsleft').bootstrapWizard({'tabClass': 'nav nav-tabs', 'debug': false, onShow: function(tab, navigation, index) {
console.log('onShow');
}, onNext: function(tab, navigation, index) {
console.log('onNext');
}, onPrevious: function(tab, navigation, index) {
console.log('onPrevious');
}, onLast: function(tab, navigation, index) {
console.log('onLast');
}, onTabClick: function(tab, navigation, index) {
console.log('onTabClick');
}, onTabShow: function(tab, navigation, index) {
console.log('onTabShow');
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#tabsleft').find('.bar').css({width:$percent+'%'});
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$('#tabsleft').find('.pager .next').hide();
$('#tabsleft').find('.pager .finish').show();
$('#tabsleft').find('.pager .finish').removeClass('disabled');
} else {
$('#tabsleft').find('.pager .next').show();
$('#tabsleft').find('.pager .finish').hide();
}
}});
$('#inverse').bootstrapWizard({'tabClass': 'nav', 'debug': false, onShow: function(tab, navigation, index) {
console.log('onShow');
}, onNext: function(tab, navigation, index) {
console.log('onNext');
if(index==2) {
// Make sure we entered the name
if(!$('#name').val()) {
alert('You must enter your name');
$('#name').focus();
return false;
}
}
// Set the name for the next tab
$('#inverse-tab3').html('Hello, ' + $('#name').val());
}, onPrevious: function(tab, navigation, index) {
console.log('onPrevious');
}, onLast: function(tab, navigation, index) {
console.log('onLast');
}, onTabClick: function(tab, navigation, index) {
console.log('onTabClick');
alert('on tab click disabled');
return false;
}, onTabShow: function(tab, navigation, index) {
console.log('onTabShow');
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#inverse').find('.bar').css({width:$percent+'%'});
}});
$('#tabsleft .finish').click(function() {
alert('Finished!, Starting over!');
$('#tabsleft').find("a[href*='tabsleft-tab1']").trigger('click');
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Example</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Basic Wizard</h1>
</div>
<div id="rootwizard">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
<div class="span12">
<input type='text' name='stepid' id='stepid' value='1' size='2' style='width:20px;' />
<input type='button' class='btn' id='disable-step' value='Disable' />
<input type='button' class='btn' id='enable-step' value='Enable' />
<input type='button' class='btn' id='show-step' value='Show' />
<input type='button' class='btn' id='hide-step' value='Hide' />
<input type='button' class='btn' id='remove-step' value='Remove' />
</div>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;div id="rootwizard">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;div class="span12">
&lt;input type='text' name='stepid' id='stepid' value='1' size='2' style='width:20px;' />
&lt;input type='button' class='btn' id='disable-step' value='Disable' />
&lt;input type='button' class='btn' id='enable-step' value='Enable' />
&lt;input type='button' class='btn' id='show-step' value='Show' />
&lt;input type='button' class='btn' id='hide-step' value='Hide' />
&lt;input type='button' class='btn' id='remove-step' value='Remove' />
&lt;/div>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
// Disable step
$('#disable-step').on('click', function() {
$('#rootwizard').bootstrapWizard('disable', $('#stepid').val());
});
// Enable step
$('#enable-step').on('click', function() {
$('#rootwizard').bootstrapWizard('enable', $('#stepid').val());
});
// Remove step
$('#remove-step').on('click', function() {
$('#rootwizard').bootstrapWizard('remove', $('#stepid').val(), true);
});
// Show step
$('#show-step').on('click', function() {
$('#rootwizard').bootstrapWizard('display', $('#stepid').val());
});
// Hide step
$('#hide-step').on('click', function() {
$('#rootwizard').bootstrapWizard('hide', $('#stepid').val());
});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
window.prettyPrint && prettyPrint();
// Disable step
$('#disable-step').on('click', function() {
$('#rootwizard').bootstrapWizard('disable', $('#stepid').val());
});
// Enable step
$('#enable-step').on('click', function() {
$('#rootwizard').bootstrapWizard('enable', $('#stepid').val());
});
// Remove step
$('#remove-step').on('click', function() {
$('#rootwizard').bootstrapWizard('remove', $('#stepid').val(), true);
});
// Show step
$('#show-step').on('click', function() {
$('#rootwizard').bootstrapWizard('display', $('#stepid').val());
});
// Hide step
$('#hide-step').on('click', function() {
$('#rootwizard').bootstrapWizard('hide', $('#stepid').val());
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Pills Example</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>
<div class="span12">
<section id="wizard">
<div class="page-header">
<h1>Basic Pills Wizard</h1>
</div>
<form id="commentForm" method="get" action="" class="form-horizontal">
<div id="rootwizard">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" id="emailfield" name="emailfield" class="required email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" id="namefield" name="namefield" class="required">
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="control-group">
<label class="control-label" for="url">URL</label>
<div class="controls">
<input type="text" id="urlfield" name="urlfield" class="required url">
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
3
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
</form>
<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;form id="commentForm" method="get" action="" class="form-horizontal">
&lt;div id="rootwizard">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;/ul>
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
&lt;div class="control-group">
&lt;label class="control-label" for="email">Email&lt;/label>
&lt;div class="controls">
&lt;input type="text" id="emailfield" name="emailfield" class="required email">
&lt;/div>
&lt;/div>
&lt;div class="control-group">
&lt;label class="control-label" for="name">Name&lt;/label>
&lt;div class="controls">
&lt;input type="text" id="namefield" name="namefield" class="required">
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="tab-pane" id="tab2">
&lt;div class="control-group">
&lt;label class="control-label" for="url">URL&lt;/label>
&lt;div class="controls">
&lt;input type="text" id="urlfield" name="urlfield" class="required url">
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/form>
</pre>
<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
var $validator = $("#commentForm").validate({
rules: {
emailfield: {
required: true,
email: true,
minlength: 3
},
namefield: {
required: true,
minlength: 3
},
urlfield: {
required: true,
minlength: 3,
url: true
}
}
});
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'onNext': function(tab, navigation, index) {
var $valid = $("#commentForm").valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
}
});
});
</pre>
</section>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
var $validator = $("#commentForm").validate({
rules: {
emailfield: {
required: true,
email: true,
minlength: 3
},
namefield: {
required: true,
minlength: 3
},
urlfield: {
required: true,
minlength: 3,
url: true
}
}
});
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'onNext': function(tab, navigation, index) {
var $valid = $("#commentForm").valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
}
});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>

View File

@@ -0,0 +1,246 @@
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap Wizard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Twitter Bootstrap Wizard Plugin">
<meta name="author" content="Vincent Gabriel">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Twitter Bootstrap Wizard</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
<a href="http://twitter.com/gabrielva" class="navbar-link">@gabrielva</a>
</p>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#docs">Documentation</a></li>
<li><a href="#demo">Demo</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
<h1>Twitter Bootstrap Wizard Plugin</h1>
<p>This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.</p>
<p><a class="btn btn-primary btn-large" href="https://github.com/VinceG/twitter-bootstrap-wizard" target="_blank">Fork It &raquo;</a></p>
</div>
<div class="row-fluid">
<div class="row-fluid">
<div class="span12">
<a name="examples"></a>
<h2>Examples</h2>
<p>Following are just a set of examples using this plugin.</p>
<ul>
<li><a href="examples/basic.html">Basic Usage</a></li>
<li><a href="examples/basic-pills.html">Basic Pills Usage</a></li>
<li><a href="examples/basic-inverse.html">Basic Inverse Usage</a></li>
<li><a href="examples/basic-tabsleft.html">Basic Tabs Left Usage</a></li>
<li><a href="examples/basic-custombuttons.html">Wizard With Custom Next/Previous Buttons</a></li>
<li><a href="examples/basic-custombuttonsfirstlast.html">Wizard With Custom Next/Previous Buttons & First and Last buttons</a></li>
<li><a href="examples/basic-progressbar.html">Wizard With Progress Bar using events</a></li>
<li><a href="examples/basic-formvalidation.html">Wizard With Form Validation</a></li>
<li><a href="examples/basic-disabletabclick.html">Wizard With Disabled Tab Click</a></li>
<li><a href="examples/basic-finishbutton.html">Wizard With Finish Button On last tab</a></li>
<li><a href="examples/multiple.html">Multiple Wizards</a></li>
<li><a href="examples/remove-step.html">Disabling/Enabling/Showing/Hiding/Removing Steps</a></li>
<li><a href="examples/validation.html">jQuery Validation Plugin With Step Validation</a></li>
</ul>
</div><!--/span-->
<div class="span11">
<a name="docs"></a>
<h2>Documentation</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Key</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>tabClass</td>
<td>nav nav-pills</td>
<td>ul navigation class</td>
</tr>
<tr>
<td>nextSelector</td>
<td>.wizard li.next</td>
<td>next element selector</td>
</tr>
<tr>
<td>previousSelector</td>
<td>.wizard li.previous</td>
<td>previous element selector</td>
</tr>
<tr>
<td>firstSelector</td>
<td>.wizard li.first</td>
<td>first element selector</td>
</tr>
<tr>
<td>lastSelector</td>
<td>.wizard li.last</td>
<td>last element selector</td>
</tr>
<tr>
<td>onInit</td>
<td>null</td>
<td>Fired when plugin is initialized</td>
</tr>
<tr>
<td>onShow</td>
<td>null</td>
<td>Fired when plugin data is shown</td>
</tr>
<tr>
<td>onNext</td>
<td>null</td>
<td>Fired when next button is clicked (return false to disable moving to the next step)</td>
</tr>
<tr>
<td>onPrevious</td>
<td>null</td>
<td>Fired when previous button is clicked (return false to disable moving to the previous step)</td>
</tr>
<tr>
<td>onFirst</td>
<td>null</td>
<td>Fired when first button is clicked (return false to disable moving to the first step)</td>
</tr>
<tr>
<td>onLast</td>
<td>null</td>
<td>Fired when last button is clicked (return false to disable moving to the last step)</td>
</tr>
<tr>
<td>onTabClick</td>
<td>null</td>
<td>Fired when a tab is clicked (return false to disable moving to that tab and showing it's contents)</td>
</tr>
<tr>
<td>onTabShow</td>
<td>null</td>
<td>Fired when a tab content is shown (return false to disable showing that tab content)</td>
</tr>
</tbody>
</table>
</div><!--/span-->
<div class="span11">
<a name="demo"></a>
<h2>Demo</h2>
<p>Basic Demo Example.</p>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="javascript:;">First</a></li>
<li class="previous"><a href="javascript:;">Previous</a></li>
<li class="next last" style="display:none;"><a href="javascript:;">Last</a></li>
<li class="next"><a href="javascript:;">Next</a></li>
</ul>
</div>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>&copy; <a href='http://vadimg.com' target="_blank">Vadim Vincent Gabriel</a> 2012</p>
</footer>
</div><!--/.fluid-container-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="jquery.bootstrap.wizard.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
}});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,280 @@
/*!
* jQuery twitter bootstrap wizard plugin
* Examples and documentation at: http://github.com/VinceG/twitter-bootstrap-wizard
* version 1.0
* Requires jQuery v1.3.2 or later
* Supports Bootstrap 2.2.x, 2.3.x, 3.0
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Authors: Vadim Vincent Gabriel (http://vadimg.com), Jason Gill (www.gilluminate.com)
*/
;(function($) {
var bootstrapWizardCreate = function(element, options) {
var element = $(element);
var obj = this;
// selector skips any 'li' elements that do not contain a child with a tab data-toggle
var baseItemSelector = 'li:has([data-toggle="tab"])';
// Merge options with defaults
var $settings = $.extend({}, $.fn.bootstrapWizard.defaults, options);
var $activeTab = null;
var $navigation = null;
this.rebindClick = function(selector, fn)
{
selector.unbind('click', fn).bind('click', fn);
}
this.fixNavigationButtons = function() {
// Get the current active tab
if(!$activeTab.length) {
// Select first one
$navigation.find('a:first').tab('show');
$activeTab = $navigation.find(baseItemSelector + ':first');
}
// See if we're currently in the first/last then disable the previous and last buttons
$($settings.previousSelector, element).toggleClass('disabled', (obj.firstIndex() >= obj.currentIndex()));
$($settings.nextSelector, element).toggleClass('disabled', (obj.currentIndex() >= obj.navigationLength()));
// We are unbinding and rebinding to ensure single firing and no double-click errors
obj.rebindClick($($settings.nextSelector, element), obj.next);
obj.rebindClick($($settings.previousSelector, element), obj.previous);
obj.rebindClick($($settings.lastSelector, element), obj.last);
obj.rebindClick($($settings.firstSelector, element), obj.first);
if($settings.onTabShow && typeof $settings.onTabShow === 'function' && $settings.onTabShow($activeTab, $navigation, obj.currentIndex())===false){
return false;
}
};
this.next = function(e) {
// If we clicked the last then dont activate this
if(element.hasClass('last')) {
return false;
}
if($settings.onNext && typeof $settings.onNext === 'function' && $settings.onNext($activeTab, $navigation, obj.nextIndex())===false){
return false;
}
// Did we click the last button
$index = obj.nextIndex();
if($index > obj.navigationLength()) {
} else {
$navigation.find(baseItemSelector + ':eq('+$index+') a').tab('show');
}
};
this.previous = function(e) {
// If we clicked the first then dont activate this
if(element.hasClass('first')) {
return false;
}
if($settings.onPrevious && typeof $settings.onPrevious === 'function' && $settings.onPrevious($activeTab, $navigation, obj.previousIndex())===false){
return false;
}
$index = obj.previousIndex();
if($index < 0) {
} else {
$navigation.find(baseItemSelector + ':eq('+$index+') a').tab('show');
}
};
this.first = function(e) {
if($settings.onFirst && typeof $settings.onFirst === 'function' && $settings.onFirst($activeTab, $navigation, obj.firstIndex())===false){
return false;
}
// If the element is disabled then we won't do anything
if(element.hasClass('disabled')) {
return false;
}
$navigation.find(baseItemSelector + ':eq(0) a').tab('show');
};
this.last = function(e) {
if($settings.onLast && typeof $settings.onLast === 'function' && $settings.onLast($activeTab, $navigation, obj.lastIndex())===false){
return false;
}
// If the element is disabled then we won't do anything
if(element.hasClass('disabled')) {
return false;
}
$navigation.find(baseItemSelector + ':eq('+obj.navigationLength()+') a').tab('show');
};
this.currentIndex = function() {
return $navigation.find(baseItemSelector).index($activeTab);
};
this.firstIndex = function() {
return 0;
};
this.lastIndex = function() {
return obj.navigationLength();
};
this.getIndex = function(e) {
return $navigation.find(baseItemSelector).index(e);
};
this.nextIndex = function() {
return $navigation.find(baseItemSelector).index($activeTab) + 1;
};
this.previousIndex = function() {
return $navigation.find(baseItemSelector).index($activeTab) - 1;
};
this.navigationLength = function() {
return $navigation.find(baseItemSelector).length - 1;
};
this.activeTab = function() {
return $activeTab;
};
this.nextTab = function() {
return $navigation.find(baseItemSelector + ':eq('+(obj.currentIndex()+1)+')').length ? $navigation.find(baseItemSelector + ':eq('+(obj.currentIndex()+1)+')') : null;
};
this.previousTab = function() {
if(obj.currentIndex() <= 0) {
return null;
}
return $navigation.find(baseItemSelector + ':eq('+parseInt(obj.currentIndex()-1)+')');
};
this.show = function(index) {
return element.find(baseItemSelector + ':eq(' + index + ') a').tab('show');
};
this.disable = function(index) {
$navigation.find(baseItemSelector + ':eq('+index+')').addClass('disabled');
};
this.enable = function(index) {
$navigation.find(baseItemSelector + ':eq('+index+')').removeClass('disabled');
};
this.hide = function(index) {
$navigation.find(baseItemSelector + ':eq('+index+')').hide();
};
this.display = function(index) {
$navigation.find(baseItemSelector + ':eq('+index+')').show();
};
this.remove = function(args) {
var $index = args[0];
var $removeTabPane = typeof args[1] != 'undefined' ? args[1] : false;
var $item = $navigation.find(baseItemSelector + ':eq('+$index+')');
// Remove the tab pane first if needed
if($removeTabPane) {
var $href = $item.find('a').attr('href');
$($href).remove();
}
// Remove menu item
$item.remove();
};
var innerTabClick = function (e) {
// Get the index of the clicked tab
var clickedIndex = $navigation.find(baseItemSelector).index($(e.currentTarget).parent(baseItemSelector));
if($settings.onTabClick && typeof $settings.onTabClick === 'function' && $settings.onTabClick($activeTab, $navigation, obj.currentIndex(), clickedIndex)===false){
return false;
}
};
var innerTabShown = function (e) { // use shown instead of show to help prevent double firing
$element = $(e.target).parent();
var nextTab = $navigation.find(baseItemSelector).index($element);
// If it's disabled then do not change
if($element.hasClass('disabled')) {
return false;
}
if($settings.onTabChange && typeof $settings.onTabChange === 'function' && $settings.onTabChange($activeTab, $navigation, obj.currentIndex(), nextTab)===false){
return false;
}
$activeTab = $element; // activated tab
obj.fixNavigationButtons();
};
this.resetWizard = function() {
// remove the existing handlers
$('a[data-toggle="tab"]', $navigation).off('click', innerTabClick);
$('a[data-toggle="tab"]', $navigation).off('shown shown.bs.tab', innerTabShown);
// reset elements based on current state of the DOM
$navigation = element.find('ul:first', element);
$activeTab = $navigation.find(baseItemSelector + '.active', element);
// re-add handlers
$('a[data-toggle="tab"]', $navigation).on('click', innerTabClick);
$('a[data-toggle="tab"]', $navigation).on('shown shown.bs.tab', innerTabShown);
obj.fixNavigationButtons();
};
$navigation = element.find('ul:first', element);
$activeTab = $navigation.find(baseItemSelector + '.active', element);
if(!$navigation.hasClass($settings.tabClass)) {
$navigation.addClass($settings.tabClass);
}
// Load onInit
if($settings.onInit && typeof $settings.onInit === 'function'){
$settings.onInit($activeTab, $navigation, 0);
}
// Load onShow
if($settings.onShow && typeof $settings.onShow === 'function'){
$settings.onShow($activeTab, $navigation, obj.nextIndex());
}
$('a[data-toggle="tab"]', $navigation).on('click', innerTabClick);
// attach to both shown and shown.bs.tab to support Bootstrap versions 2.3.2 and 3.0.0
$('a[data-toggle="tab"]', $navigation).on('shown shown.bs.tab', innerTabShown);
this.fixNavigationButtons();
};
$.fn.bootstrapWizard = function(options) {
//expose methods
if (typeof options == 'string') {
var args = Array.prototype.slice.call(arguments, 1)
if(args.length === 1) {
args.toString();
}
return this.data('bootstrapWizard')[options](args);
}
return this.each(function(index){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('bootstrapWizard')) return;
// pass options to plugin constructor
var wizard = new bootstrapWizardCreate(element, options);
// Store plugin object in this element's data
element.data('bootstrapWizard', wizard);
});
};
// expose options
$.fn.bootstrapWizard.defaults = {
tabClass: 'nav nav-pills',
nextSelector: '.wizard li.next',
previousSelector: '.wizard li.previous',
firstSelector: '.wizard li.first',
lastSelector: '.wizard li.last',
onShow: null,
onInit: null,
onNext: null,
onPrevious: null,
onLast: null,
onFirst: null,
onTabChange: null,
onTabClick: null,
onTabShow: null
};
})(jQuery);

View File

@@ -0,0 +1,21 @@
/*!
* jQuery twitter bootstrap wizard plugin
* Examples and documentation at: http://github.com/VinceG/twitter-bootstrap-wizard
* version 1.0
* Requires jQuery v1.3.2 or later
* Supports Bootstrap 2.2.x, 2.3.x, 3.0
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Authors: Vadim Vincent Gabriel (http://vadimg.com), Jason Gill (www.gilluminate.com)
*/
(function(e){var m=function(d,g){d=e(d);var c=this,a=e.extend({},e.fn.bootstrapWizard.defaults,g),f=null,b=null;this.rebindClick=function(b,a){b.unbind("click",a).bind("click",a)};this.fixNavigationButtons=function(){f.length||(b.find("a:first").tab("show"),f=b.find('li:has([data-toggle="tab"]):first'));e(a.previousSelector,d).toggleClass("disabled",c.firstIndex()>=c.currentIndex());e(a.nextSelector,d).toggleClass("disabled",c.currentIndex()>=c.navigationLength());c.rebindClick(e(a.nextSelector,d),
c.next);c.rebindClick(e(a.previousSelector,d),c.previous);c.rebindClick(e(a.lastSelector,d),c.last);c.rebindClick(e(a.firstSelector,d),c.first);if(a.onTabShow&&"function"===typeof a.onTabShow&&!1===a.onTabShow(f,b,c.currentIndex()))return!1};this.next=function(h){if(d.hasClass("last")||a.onNext&&"function"===typeof a.onNext&&!1===a.onNext(f,b,c.nextIndex()))return!1;$index=c.nextIndex();$index>c.navigationLength()||b.find('li:has([data-toggle="tab"]):eq('+$index+") a").tab("show")};this.previous=
function(h){if(d.hasClass("first")||a.onPrevious&&"function"===typeof a.onPrevious&&!1===a.onPrevious(f,b,c.previousIndex()))return!1;$index=c.previousIndex();0>$index||b.find('li:has([data-toggle="tab"]):eq('+$index+") a").tab("show")};this.first=function(h){if(a.onFirst&&"function"===typeof a.onFirst&&!1===a.onFirst(f,b,c.firstIndex())||d.hasClass("disabled"))return!1;b.find('li:has([data-toggle="tab"]):eq(0) a').tab("show")};this.last=function(h){if(a.onLast&&"function"===typeof a.onLast&&!1===
a.onLast(f,b,c.lastIndex())||d.hasClass("disabled"))return!1;b.find('li:has([data-toggle="tab"]):eq('+c.navigationLength()+") a").tab("show")};this.currentIndex=function(){return b.find('li:has([data-toggle="tab"])').index(f)};this.firstIndex=function(){return 0};this.lastIndex=function(){return c.navigationLength()};this.getIndex=function(a){return b.find('li:has([data-toggle="tab"])').index(a)};this.nextIndex=function(){return b.find('li:has([data-toggle="tab"])').index(f)+1};this.previousIndex=
function(){return b.find('li:has([data-toggle="tab"])').index(f)-1};this.navigationLength=function(){return b.find('li:has([data-toggle="tab"])').length-1};this.activeTab=function(){return f};this.nextTab=function(){return b.find('li:has([data-toggle="tab"]):eq('+(c.currentIndex()+1)+")").length?b.find('li:has([data-toggle="tab"]):eq('+(c.currentIndex()+1)+")"):null};this.previousTab=function(){return 0>=c.currentIndex()?null:b.find('li:has([data-toggle="tab"]):eq('+parseInt(c.currentIndex()-1)+")")};
this.show=function(b){return d.find('li:has([data-toggle="tab"]):eq('+b+") a").tab("show")};this.disable=function(a){b.find('li:has([data-toggle="tab"]):eq('+a+")").addClass("disabled")};this.enable=function(a){b.find('li:has([data-toggle="tab"]):eq('+a+")").removeClass("disabled")};this.hide=function(a){b.find('li:has([data-toggle="tab"]):eq('+a+")").hide()};this.display=function(a){b.find('li:has([data-toggle="tab"]):eq('+a+")").show()};this.remove=function(a){var c="undefined"!=typeof a[1]?a[1]:
!1;a=b.find('li:has([data-toggle="tab"]):eq('+a[0]+")");c&&(c=a.find("a").attr("href"),e(c).remove());a.remove()};var k=function(d){d=b.find('li:has([data-toggle="tab"])').index(e(d.currentTarget).parent('li:has([data-toggle="tab"])'));if(a.onTabClick&&"function"===typeof a.onTabClick&&!1===a.onTabClick(f,b,c.currentIndex(),d))return!1},l=function(d){$element=e(d.target).parent();d=b.find('li:has([data-toggle="tab"])').index($element);if($element.hasClass("disabled")||a.onTabChange&&"function"===
typeof a.onTabChange&&!1===a.onTabChange(f,b,c.currentIndex(),d))return!1;f=$element;c.fixNavigationButtons()};this.resetWizard=function(){e('a[data-toggle="tab"]',b).off("click",k);e('a[data-toggle="tab"]',b).off("shown shown.bs.tab",l);b=d.find("ul:first",d);f=b.find('li:has([data-toggle="tab"]).active',d);e('a[data-toggle="tab"]',b).on("click",k);e('a[data-toggle="tab"]',b).on("shown shown.bs.tab",l);c.fixNavigationButtons()};b=d.find("ul:first",d);f=b.find('li:has([data-toggle="tab"]).active',
d);b.hasClass(a.tabClass)||b.addClass(a.tabClass);if(a.onInit&&"function"===typeof a.onInit)a.onInit(f,b,0);if(a.onShow&&"function"===typeof a.onShow)a.onShow(f,b,c.nextIndex());e('a[data-toggle="tab"]',b).on("click",k);e('a[data-toggle="tab"]',b).on("shown shown.bs.tab",l);this.fixNavigationButtons()};e.fn.bootstrapWizard=function(d){if("string"==typeof d){var g=Array.prototype.slice.call(arguments,1);1===g.length&&g.toString();return this.data("bootstrapWizard")[d](g)}return this.each(function(c){c=
e(this);if(!c.data("bootstrapWizard")){var a=new m(c,d);c.data("bootstrapWizard",a)}})};e.fn.bootstrapWizard.defaults={tabClass:"nav nav-pills",nextSelector:".wizard li.next",previousSelector:".wizard li.previous",firstSelector:".wizard li.first",lastSelector:".wizard li.last",onShow:null,onInit:null,onNext:null,onPrevious:null,onLast:null,onFirst:null,onTabChange:null,onTabClick:null,onTabShow:null}})(jQuery);

View File

@@ -0,0 +1,30 @@
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .prettyprint .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
.prettyprint {
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0 0 0 33px; /* IE indents via margin-left */
}
ol.linenums li {
padding-left: 12px;
color: #bebec5;
line-height: 20px;
text-shadow: 0 1px 0 #fff;
}

View File

@@ -0,0 +1,28 @@
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,90 @@
/*
Breakpoints.js
version 1.0
Creates handy events for your responsive design breakpoints
Copyright 2011 XOXCO, Inc
http://xoxco.com/
Documentation for this plugin lives here:
http://xoxco.com/projects/code/breakpoints
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
var lastSize = 0;
var interval = null;
$.fn.resetBreakpoints = function() {
$(window).unbind('resize');
if (interval) {
clearInterval(interval);
}
lastSize = 0;
};
$.fn.setBreakpoints = function(settings) {
var options = jQuery.extend({
distinct: true,
breakpoints: new Array(320,480,768,1024)
},settings);
interval = setInterval(function() {
var w = $(window).width();
var done = false;
for (var bp in options.breakpoints.sort(function(a,b) { return (b-a) })) {
// fire onEnter when a browser expands into a new breakpoint
// if in distinct mode, remove all other breakpoints first.
if (!done && w >= options.breakpoints[bp] && lastSize < options.breakpoints[bp]) {
if (options.distinct) {
for (var x in options.breakpoints.sort(function(a,b) { return (b-a) })) {
if ($('body').hasClass('breakpoint-' + options.breakpoints[x])) {
$('body').removeClass('breakpoint-' + options.breakpoints[x]);
$(window).trigger('exitBreakpoint' + options.breakpoints[x]);
}
}
done = true;
}
$('body').addClass('breakpoint-' + options.breakpoints[bp]);
$(window).trigger('enterBreakpoint' + options.breakpoints[bp]);
}
// fire onExit when browser contracts out of a larger breakpoint
if (w < options.breakpoints[bp] && lastSize >= options.breakpoints[bp]) {
$('body').removeClass('breakpoint-' + options.breakpoints[bp]);
$(window).trigger('exitBreakpoint' + options.breakpoints[bp]);
}
// if in distinct mode, fire onEnter when browser contracts into a smaller breakpoint
if (
options.distinct && // only one breakpoint at a time
w >= options.breakpoints[bp] && // and we are in this one
w < options.breakpoints[bp-1] && // and smaller than the bigger one
lastSize > w && // and we contracted
lastSize >0 && // and this is not the first time
!$('body').hasClass('breakpoint-' + options.breakpoints[bp]) // and we aren't already in this breakpoint
) {
$('body').addClass('breakpoint-' + options.breakpoints[bp]);
$(window).trigger('enterBreakpoint' + options.breakpoints[bp]);
}
}
// set up for next call
if (lastSize != w) {
lastSize = w;
}
},250);
};
})(jQuery);

View File

@@ -0,0 +1,20 @@
.circliful {
position: relative;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
width: 100%;
position: absolute;
text-align: center;
display: inline-block;
}
.circle-info, .circle-info-half {
color: #999;
}
.circliful .fa {
margin: -10px 3px 0 3px;
position: relative;
bottom: 4px;
}

View File

@@ -0,0 +1,191 @@
(function( $ ) {
$.fn.circliful = function(options) {
var settings = $.extend({
// These are the defaults.
foregroundColor: "#556b2f",
backgroundColor: "#eee",
fillColor: false,
width: 15,
dimension: 200,
size: 15,
percent: 50,
animationStep: 1.0
}, options );
return this.each(function() {
var dimension = '';
var text = '';
var info = '';
var width = '';
var size = 0;
var percent = 0;
var endPercent = 100;
var fgcolor = '';
var bgcolor = '';
var icon = '';
var animationstep = 0.0;
$(this).addClass('circliful');
if($(this).data('dimension') != undefined) {
dimension = $(this).data('dimension');
} else {
dimension = settings.dimension;
}
if($(this).data('width') != undefined) {
width = $(this).data('width');
} else {
width = settings.width;
}
if($(this).data('fontsize') != undefined) {
size = $(this).data('fontsize');
} else {
size = settings.size;
}
if($(this).data('percent') != undefined) {
percent = $(this).data('percent') / 100;
endPercent = $(this).data('percent');
} else {
percent = settings.percent / 100;
}
if($(this).data('fgcolor') != undefined) {
fgcolor = $(this).data('fgcolor');
} else {
fgcolor = settings.foregroundColor;
}
if($(this).data('bgcolor') != undefined) {
bgcolor = $(this).data('bgcolor');
} else {
bgcolor = settings.backgroundColor;
}
if($(this).data('animation-step') != undefined) {
animationstep = parseFloat($(this).data('animation-step'));
} else {
animationstep = settings.animationStep;
}
if($(this).data('text') != undefined) {
text = $(this).data('text');
if($(this).data('icon') != undefined) {
icon = '<i class="fa ' + $(this).data('icon') + '"></i>';
}
if($(this).data('type') != undefined) {
type = $(this).data('type');
if(type == 'half') {
$(this).append('<span class="circle-text-half">' + icon + text + '</span>');
$(this).find('.circle-text-half').css({'line-height': (dimension / 1.45) + 'px', 'font-size' : size + 'px' });
} else {
$(this).append('<span class="circle-text">' + icon + text + '</span>');
$(this).find('.circle-text').css({'line-height': dimension + 'px', 'font-size' : size + 'px' });
}
} else {
$(this).append('<span class="circle-text">' + icon + text + '</span>');
$(this).find('.circle-text').css({'line-height': dimension + 'px', 'font-size' : size + 'px' });
}
} else if($(this).data('icon') != undefined) {
}
if($(this).data('info') != undefined) {
info = $(this).data('info');
if($(this).data('type') != undefined) {
type = $(this).data('type');
if(type == 'half') {
$(this).append('<span class="circle-info-half">' + info + '</span>');
$(this).find('.circle-info-half').css({'line-height': (dimension * 0.9) + 'px', });
} else {
$(this).append('<span class="circle-info">' + info + '</span>');
$(this).find('.circle-info').css({'line-height': (dimension * 1.25) + 'px', });
}
} else {
$(this).append('<span class="circle-info">' + info + '</span>');
$(this).find('.circle-info').css({'line-height': (dimension * 1.25) + 'px', });
}
}
$(this).width(dimension + 'px');
var canvas = $('<canvas></canvas>').attr({ width: dimension, height: dimension }).appendTo($(this)).get(0);
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var degrees = percent * 360.0;
var radians = degrees * (Math.PI / 180);
var radius = canvas.width / 2.5;
var startAngle = 2.3 * Math.PI;
var endAngle = 0;
var counterClockwise = false;
var curPerc = animationstep === 0.0 ? endPercent : 0.0;
var curStep = Math.max(animationstep, 0.0);
var circ = Math.PI * 2;
var quart = Math.PI / 2;
var type = '';
var fill = false;
if($(this).data('type') != undefined) {
type = $(this).data('type');
if(type == 'half') {
var startAngle = 2.0 * Math.PI;
var endAngle = 3.13;
var circ = Math.PI * 1.0;
var quart = Math.PI / 0.996;
}
}
if($(this).data('fill') != undefined) {
fill = $(this).data('fill');
} else {
fill = settings.fillColor;
}
//animate foreground circle
function animate(current) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, endAngle, startAngle, false);
context.lineWidth = width - 1;
// line color
context.strokeStyle = bgcolor;
context.stroke();
if(fill) {
context.fillStyle = fill;
context.fill();
}
context.beginPath();
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.lineWidth = width;
// line color
context.strokeStyle = fgcolor;
context.stroke();
if (curPerc < endPercent) {
curPerc += curStep;
requestAnimationFrame(function () {
animate(Math.min(curPerc, endPercent) / 100);
});
}
}
animate(curPerc / 100);
});
};
}( jQuery ));

View File

@@ -0,0 +1 @@
(function(a){a.fn.circliful=function(b){var c=a.extend({foregroundColor:"#556b2f",backgroundColor:"#eee",fillColor:false,width:15,dimension:200,size:15,percent:50,animationStep:1},b);return this.each(function(){var F="";var s="";var E="";var v="";var t=0;var e=0;var l=100;var B="";var d="";var D="";var q=0;a(this).addClass("circliful");if(a(this).data("dimension")!=undefined){F=a(this).data("dimension")}else{F=c.dimension}if(a(this).data("width")!=undefined){v=a(this).data("width")}else{v=c.width}if(a(this).data("fontsize")!=undefined){t=a(this).data("fontsize")}else{t=c.size}if(a(this).data("percent")!=undefined){e=a(this).data("percent")/100;l=a(this).data("percent")}else{e=c.percent/100}if(a(this).data("fgcolor")!=undefined){B=a(this).data("fgcolor")}else{B=c.foregroundColor}if(a(this).data("bgcolor")!=undefined){d=a(this).data("bgcolor")}else{d=c.backgroundColor}if(a(this).data("animation-step")!=undefined){q=parseFloat(a(this).data("animation-step"))}else{q=c.animationStep}if(a(this).data("text")!=undefined){s=a(this).data("text");if(a(this).data("icon")!=undefined){D='<i class="fa '+a(this).data("icon")+'"></i>'}if(a(this).data("type")!=undefined){i=a(this).data("type");if(i=="half"){a(this).append('<span class="circle-text-half">'+D+s+"</span>");a(this).find(".circle-text-half").css({"line-height":(F/1.45)+"px","font-size":t+"px"})}else{a(this).append('<span class="circle-text">'+D+s+"</span>");a(this).find(".circle-text").css({"line-height":F+"px","font-size":t+"px"})}}else{a(this).append('<span class="circle-text">'+D+s+"</span>");a(this).find(".circle-text").css({"line-height":F+"px","font-size":t+"px"})}}else{if(a(this).data("icon")!=undefined){}}if(a(this).data("info")!=undefined){E=a(this).data("info");if(a(this).data("type")!=undefined){i=a(this).data("type");if(i=="half"){a(this).append('<span class="circle-info-half">'+E+"</span>");a(this).find(".circle-info-half").css({"line-height":(F*0.9)+"px",})}else{a(this).append('<span class="circle-info">'+E+"</span>");a(this).find(".circle-info").css({"line-height":(F*1.25)+"px",})}}else{a(this).append('<span class="circle-info">'+E+"</span>");a(this).find(".circle-info").css({"line-height":(F*1.25)+"px",})}}a(this).width(F+"px");var h=a("<canvas></canvas>").attr({width:F,height:F}).appendTo(a(this)).get(0);var f=h.getContext("2d");var p=h.width/2;var o=h.height/2;var A=e*360;var G=A*(Math.PI/180);var j=h.width/2.5;var z=2.3*Math.PI;var u=0;var C=false;var m=q===0?l:0;var n=Math.max(q,0);var r=Math.PI*2;var g=Math.PI/2;var i="";var w=false;if(a(this).data("type")!=undefined){i=a(this).data("type");if(i=="half"){var z=2*Math.PI;var u=3.13;var r=Math.PI*1;var g=Math.PI/0.996}}if(a(this).data("fill")!=undefined){w=a(this).data("fill")}else{w=c.fillColor}function k(x){f.clearRect(0,0,h.width,h.height);f.beginPath();f.arc(p,o,j,u,z,false);f.lineWidth=v-1;f.strokeStyle=d;f.stroke();if(w){f.fillStyle=w;f.fill()}f.beginPath();f.arc(p,o,j,-(g),((r)*x)-g,false);f.lineWidth=v;f.strokeStyle=B;f.stroke();if(m<l){m+=n;requestAnimationFrame(function(){k(Math.min(m,l)/100)})}}k(m/100)})}}(jQuery));

8436
public/assets/plugins/charts-d3/d3.v3.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,768 @@
/********************
* HTML CSS
*/
.chartWrap {
margin: 0;
padding: 0;
overflow: hidden;
}
/********************
Box shadow and border radius styling
*/
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/********************
* TOOLTIP CSS
*/
.nvtooltip {
position: absolute;
background-color: rgba(255,255,255,1.0);
padding: 1px;
border: 1px solid rgba(0,0,0,.2);
z-index: 10000;
font-size: 13px;
text-align: left;
pointer-events: none;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Give tooltips that old fade in transition by
putting a "with-transitions" class on the container div.
*/
.nvtooltip.with-transitions, .with-transitions .nvtooltip {
transition: opacity 250ms linear;
-moz-transition: opacity 250ms linear;
-webkit-transition: opacity 250ms linear;
transition-delay: 250ms;
-moz-transition-delay: 250ms;
-webkit-transition-delay: 250ms;
}
.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
padding: 8px;
}
.nvtooltip h3 {
margin: 0;
padding: 4px 14px;
line-height: 18px;
font-weight: normal;
background-color: rgba(247,247,247,0.75);
text-align: center;
border-bottom: 1px solid #ebebeb;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.nvtooltip p {
margin: 0;
padding: 5px 14px;
text-align: center;
}
.nvtooltip span {
display: inline-block;
margin: 2px 0;
}
.nvtooltip table {
margin: 6px;
border-spacing:0;
}
.nvtooltip table td {
padding: 2px 9px 2px 0;
vertical-align: middle;
}
.nvtooltip table td.key {
font-weight:normal;
}
.nvtooltip table td.value {
text-align: right;
font-weight: bold;
}
.nvtooltip table tr.highlight td {
padding: 1px 9px 1px 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-style: solid;
border-top-width: 1px;
}
.nvtooltip table td.legend-color-guide div {
width: 8px;
height: 8px;
vertical-align: middle;
}
.nvtooltip .footer {
padding: 3px;
text-align: center;
}
.nvtooltip-pending-removal {
position: absolute;
pointer-events: none;
}
/********************
* SVG CSS
*/
svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Trying to get SVG to act like a greedy block in all browsers */
display: block;
width:100%;
height:100%;
}
svg text {
font: normal 12px 'Open sans';
}
svg .title {
font: bold 14px 'Open sans';
}
.nvd3 .nv-background {
fill: white;
fill-opacity: 0;
/*
pointer-events: none;
*/
}
.nvd3.nv-noData {
font-size: 18px;
font-weight: bold;
}
/**********
* Brush
*/
.nv-brush .extent {
fill-opacity: .125;
shape-rendering: crispEdges;
}
/**********
* Legend
*/
.nvd3 .nv-legend .nv-series {
cursor: pointer;
}
.nvd3 .nv-legend .disabled circle {
fill-opacity: 0;
}
/**********
* Axes
*/
.nvd3 .nv-axis {
pointer-events:none;
}
.nvd3 .nv-axis path {
fill: none;
stroke: #000;
stroke-opacity: .75;
shape-rendering: crispEdges;
}
.nvd3 .nv-axis path.domain {
stroke-opacity: .75;
}
.nvd3 .nv-axis.nv-x path.domain {
stroke-opacity: 0;
}
.nvd3 .nv-axis line {
fill: none;
stroke: #e5e5e5;
shape-rendering: crispEdges;
}
.nvd3 .nv-axis .zero line,
/*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
stroke-opacity: .75;
}
.nvd3 .nv-axis .nv-axisMaxMin text {
font-weight: bold;
}
.nvd3 .x .nv-axis .nv-axisMaxMin text,
.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
text-anchor: middle
}
/**********
* Brush
*/
.nv-brush .resize path {
fill: #eee;
stroke: #666;
}
/**********
* Bars
*/
.nvd3 .nv-bars .negative rect {
zfill: brown;
}
.nvd3 .nv-bars rect {
zfill: steelblue;
fill-opacity: .75;
transition: fill-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear;
}
.nvd3 .nv-bars rect.hover {
fill-opacity: 1;
}
.nvd3 .nv-bars .hover rect {
fill: lightblue;
}
.nvd3 .nv-bars text {
fill: rgba(0,0,0,0);
}
.nvd3 .nv-bars .hover text {
fill: rgba(0,0,0,1);
}
/**********
* Bars
*/
.nvd3 .nv-multibar .nv-groups rect,
.nvd3 .nv-multibarHorizontal .nv-groups rect,
.nvd3 .nv-discretebar .nv-groups rect {
stroke-opacity: 0;
transition: fill-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear;
}
.nvd3 .nv-multibar .nv-groups rect:hover,
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
.nvd3 .nv-discretebar .nv-groups rect:hover {
fill-opacity: 1;
}
.nvd3 .nv-discretebar .nv-groups text,
.nvd3 .nv-multibarHorizontal .nv-groups text {
font-weight: bold;
fill: rgba(0,0,0,1);
stroke: rgba(0,0,0,0);
}
/***********
* Pie Chart
*/
.nvd3.nv-pie path {
stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
}
.nvd3.nv-pie .nv-slice text {
stroke: #000;
stroke-width: 0;
}
.nvd3.nv-pie path {
stroke: #fff;
stroke-width: 1px;
stroke-opacity: 1;
}
.nvd3.nv-pie .hover path {
fill-opacity: .7;
}
.nvd3.nv-pie .nv-label {
pointer-events: none;
}
.nvd3.nv-pie .nv-label rect {
fill-opacity: 0;
stroke-opacity: 0;
}
/**********
* Lines
*/
.nvd3 .nv-groups path.nv-line {
fill: none;
stroke-width: 1.5px;
/*
stroke-linecap: round;
shape-rendering: geometricPrecision;
transition: stroke-width 250ms linear;
-moz-transition: stroke-width 250ms linear;
-webkit-transition: stroke-width 250ms linear;
transition-delay: 250ms
-moz-transition-delay: 250ms;
-webkit-transition-delay: 250ms;
*/
}
.nvd3 .nv-groups path.nv-line.nv-thin-line {
stroke-width: 1px;
}
.nvd3 .nv-groups path.nv-area {
stroke: none;
/*
stroke-linecap: round;
shape-rendering: geometricPrecision;
stroke-width: 2.5px;
transition: stroke-width 250ms linear;
-moz-transition: stroke-width 250ms linear;
-webkit-transition: stroke-width 250ms linear;
transition-delay: 250ms
-moz-transition-delay: 250ms;
-webkit-transition-delay: 250ms;
*/
}
.nvd3 .nv-line.hover path {
stroke-width: 6px;
}
/*
.nvd3.scatter .groups .point {
fill-opacity: 0.1;
stroke-opacity: 0.1;
}
*/
.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
fill-opacity: 0;
stroke-opacity: 0;
}
.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
fill-opacity: .5 !important;
stroke-opacity: .5 !important;
}
.with-transitions .nvd3 .nv-groups .nv-point {
transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
}
.nvd3.nv-scatter .nv-groups .nv-point.hover,
.nvd3 .nv-groups .nv-point.hover {
stroke-width: 7px;
fill-opacity: .95 !important;
stroke-opacity: .95 !important;
}
.nvd3 .nv-point-paths path {
stroke: #aaa;
stroke-opacity: 0;
fill: #eee;
fill-opacity: 0;
}
.nvd3 .nv-indexLine {
cursor: ew-resize;
}
/**********
* Distribution
*/
.nvd3 .nv-distribution {
pointer-events: none;
}
/**********
* Scatter
*/
/* **Attempting to remove this for useVoronoi(false), need to see if it's required anywhere
.nvd3 .nv-groups .nv-point {
pointer-events: none;
}
*/
.nvd3 .nv-groups .nv-point.hover {
stroke-width: 20px;
stroke-opacity: .5;
}
.nvd3 .nv-scatter .nv-point.hover {
fill-opacity: 1;
}
/*
.nv-group.hover .nv-point {
fill-opacity: 1;
}
*/
/**********
* Stacked Area
*/
.nvd3.nv-stackedarea path.nv-area {
fill-opacity: .7;
/*
stroke-opacity: .65;
fill-opacity: 1;
*/
stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
/*
transition-delay: 500ms;
-moz-transition-delay: 500ms;
-webkit-transition-delay: 500ms;
*/
}
.nvd3.nv-stackedarea path.nv-area.hover {
fill-opacity: .9;
/*
stroke-opacity: .85;
*/
}
/*
.d3stackedarea .groups path {
stroke-opacity: 0;
}
*/
.nvd3.nv-stackedarea .nv-groups .nv-point {
stroke-opacity: 0;
fill-opacity: 0;
}
/*
.nvd3.nv-stackedarea .nv-groups .nv-point.hover {
stroke-width: 20px;
stroke-opacity: .75;
fill-opacity: 1;
}*/
/**********
* Line Plus Bar
*/
.nvd3.nv-linePlusBar .nv-bar rect {
fill-opacity: .75;
}
.nvd3.nv-linePlusBar .nv-bar rect:hover {
fill-opacity: 1;
}
/**********
* Bullet
*/
.nvd3.nv-bullet { font: 10px sans-serif; }
.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
.nvd3.nv-bullet .nv-subtitle { fill: #999; }
.nvd3.nv-bullet .nv-range {
fill: #bababa;
fill-opacity: .4;
}
.nvd3.nv-bullet .nv-range:hover {
fill-opacity: .7;
}
/**********
* Sparkline
*/
.nvd3.nv-sparkline path {
fill: none;
}
.nvd3.nv-sparklineplus g.nv-hoverValue {
pointer-events: none;
}
.nvd3.nv-sparklineplus .nv-hoverValue line {
stroke: #333;
stroke-width: 1.5px;
}
.nvd3.nv-sparklineplus,
.nvd3.nv-sparklineplus g {
pointer-events: all;
}
.nvd3 .nv-hoverArea {
fill-opacity: 0;
stroke-opacity: 0;
}
.nvd3.nv-sparklineplus .nv-xValue,
.nvd3.nv-sparklineplus .nv-yValue {
/*
stroke: #666;
*/
stroke-width: 0;
font-size: .9em;
font-weight: normal;
}
.nvd3.nv-sparklineplus .nv-yValue {
stroke: #f66;
}
.nvd3.nv-sparklineplus .nv-maxValue {
stroke: #2ca02c;
fill: #2ca02c;
}
.nvd3.nv-sparklineplus .nv-minValue {
stroke: #C9625F;
fill: #C9625F;
}
.nvd3.nv-sparklineplus .nv-currentValue {
/*
stroke: #444;
fill: #000;
*/
font-weight: bold;
font-size: 1.1em;
}
/**********
* historical stock
*/
.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
stroke-width: 2px;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
stroke-width: 4px;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
stroke: #2ca02c;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
stroke: #C9625F;
}
.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
font-weight: bold;
}
.nvd3.nv-historicalStockChart .nv-dragTarget {
fill-opacity: 0;
stroke: none;
cursor: move;
}
.nvd3 .nv-brush .extent {
/*
cursor: ew-resize !important;
*/
fill-opacity: 0 !important;
}
.nvd3 .nv-brushBackground rect {
stroke: #000;
stroke-width: .4;
fill: #fff;
fill-opacity: .7;
}
/**********
* Indented Tree
*/
/**
* TODO: the following 3 selectors are based on classes used in the example. I should either make them standard and leave them here, or move to a CSS file not included in the library
*/
.nvd3.nv-indentedtree .name {
margin-left: 5px;
}
.nvd3.nv-indentedtree .clickable {
color: #08C;
cursor: pointer;
}
.nvd3.nv-indentedtree span.clickable:hover {
color: #005580;
text-decoration: underline;
}
.nvd3.nv-indentedtree .nv-childrenCount {
display: inline-block;
margin-left: 5px;
}
.nvd3.nv-indentedtree .nv-treeicon {
cursor: pointer;
/*
cursor: n-resize;
*/
}
.nvd3.nv-indentedtree .nv-treeicon.nv-folded {
cursor: pointer;
/*
cursor: s-resize;
*/
}
/**********
* Parallel Coordinates
*/
.nvd3 .background path {
fill: none;
stroke: #ccc;
stroke-opacity: .4;
shape-rendering: crispEdges;
}
.nvd3 .foreground path {
fill: none;
stroke: steelblue;
stroke-opacity: .7;
}
.nvd3 .brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.nvd3 .axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.nvd3 .axis text {
text-shadow: 0 1px 0 #fff;
}
/****
Interactive Layer
*/
.nvd3 .nv-interactiveGuideLine {
pointer-events:none;
}
.nvd3 line.nv-guideline {
stroke: #ccc;
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,180 @@
/* Plugin for jQuery for working with colors.
*
* Version 1.1.
*
* Inspiration from jQuery color animation plugin by John Resig.
*
* Released under the MIT license by Ole Laursen, October 2009.
*
* Examples:
*
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
* var c = $.color.extract($("#mydiv"), 'background-color');
* console.log(c.r, c.g, c.b, c.a);
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
*
* Note that .scale() and .add() return the same modified object
* instead of making a new one.
*
* V. 1.1: Fix error handling so e.g. parsing an empty string does
* produce a color rather than just crashing.
*/
(function($) {
$.color = {};
// construct color object with some convenient chainable helpers
$.color.make = function (r, g, b, a) {
var o = {};
o.r = r || 0;
o.g = g || 0;
o.b = b || 0;
o.a = a != null ? a : 1;
o.add = function (c, d) {
for (var i = 0; i < c.length; ++i)
o[c.charAt(i)] += d;
return o.normalize();
};
o.scale = function (c, f) {
for (var i = 0; i < c.length; ++i)
o[c.charAt(i)] *= f;
return o.normalize();
};
o.toString = function () {
if (o.a >= 1.0) {
return "rgb("+[o.r, o.g, o.b].join(",")+")";
} else {
return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")";
}
};
o.normalize = function () {
function clamp(min, value, max) {
return value < min ? min: (value > max ? max: value);
}
o.r = clamp(0, parseInt(o.r), 255);
o.g = clamp(0, parseInt(o.g), 255);
o.b = clamp(0, parseInt(o.b), 255);
o.a = clamp(0, o.a, 1);
return o;
};
o.clone = function () {
return $.color.make(o.r, o.b, o.g, o.a);
};
return o.normalize();
}
// extract CSS color property from element, going up in the DOM
// if it's "transparent"
$.color.extract = function (elem, css) {
var c;
do {
c = elem.css(css).toLowerCase();
// keep going until we find an element that has color, or
// we hit the body or root (have no parent)
if (c != '' && c != 'transparent')
break;
elem = elem.parent();
} while (elem.length && !$.nodeName(elem.get(0), "body"));
// catch Safari's way of signalling transparent
if (c == "rgba(0, 0, 0, 0)")
c = "transparent";
return $.color.parse(c);
}
// parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
// returns color object, if parsing failed, you get black (0, 0,
// 0) out
$.color.parse = function (str) {
var res, m = $.color.make;
// Look for rgb(num,num,num)
if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
// Look for rgba(num,num,num,num)
if (res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
// Look for rgb(num%,num%,num%)
if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55);
// Look for rgba(num%,num%,num%,num)
if (res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4]));
// Look for #a0b1c2
if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
// Look for #fff
if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16));
// Otherwise, we're most likely dealing with a named color
var name = $.trim(str).toLowerCase();
if (name == "transparent")
return m(255, 255, 255, 0);
else {
// default to black
res = lookupColors[name] || [0, 0, 0];
return m(res[0], res[1], res[2]);
}
}
var lookupColors = {
aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]
};
})(jQuery);

View File

@@ -0,0 +1 @@
(function($){$.color={};$.color.make=function(r,g,b,a){var o={};o.r=r||0;o.g=g||0;o.b=b||0;o.a=a!=null?a:1;o.add=function(c,d){for(var i=0;i<c.length;++i)o[c.charAt(i)]+=d;return o.normalize()};o.scale=function(c,f){for(var i=0;i<c.length;++i)o[c.charAt(i)]*=f;return o.normalize()};o.toString=function(){if(o.a>=1){return"rgb("+[o.r,o.g,o.b].join(",")+")"}else{return"rgba("+[o.r,o.g,o.b,o.a].join(",")+")"}};o.normalize=function(){function clamp(min,value,max){return value<min?min:value>max?max:value}o.r=clamp(0,parseInt(o.r),255);o.g=clamp(0,parseInt(o.g),255);o.b=clamp(0,parseInt(o.b),255);o.a=clamp(0,o.a,1);return o};o.clone=function(){return $.color.make(o.r,o.b,o.g,o.a)};return o.normalize()};$.color.extract=function(elem,css){var c;do{c=elem.css(css).toLowerCase();if(c!=""&&c!="transparent")break;elem=elem.parent()}while(elem.length&&!$.nodeName(elem.get(0),"body"));if(c=="rgba(0, 0, 0, 0)")c="transparent";return $.color.parse(c)};$.color.parse=function(str){var res,m=$.color.make;if(res=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))return m(parseInt(res[1],10),parseInt(res[2],10),parseInt(res[3],10));if(res=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))return m(parseInt(res[1],10),parseInt(res[2],10),parseInt(res[3],10),parseFloat(res[4]));if(res=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))return m(parseFloat(res[1])*2.55,parseFloat(res[2])*2.55,parseFloat(res[3])*2.55);if(res=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))return m(parseFloat(res[1])*2.55,parseFloat(res[2])*2.55,parseFloat(res[3])*2.55,parseFloat(res[4]));if(res=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))return m(parseInt(res[1],16),parseInt(res[2],16),parseInt(res[3],16));if(res=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))return m(parseInt(res[1]+res[1],16),parseInt(res[2]+res[2],16),parseInt(res[3]+res[3],16));var name=$.trim(str).toLowerCase();if(name=="transparent")return m(255,255,255,0);else{res=lookupColors[name]||[0,0,0];return m(res[0],res[1],res[2])}};var lookupColors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery);

View File

@@ -0,0 +1,11 @@
/* jQuery Flot Animator version 1.0.
Flot Animator is a free jQuery Plugin that will add fluid animations to Flot charts.
Copyright (c) 2012-2013 Chtiwi Malek
http://www.codicode.com/art/jquery_flot_animator.aspx
Licensed under Creative Commons Attribution 3.0 Unported License.
*/
eval(function(p,a,c,k,e,d){while(c--)if(k[c])p=p.replace(new RegExp('\\b'+c.toString(a)+'\\b','g'),k[c]);return p;}('$.1m({1w:b(e,t,n){b h(){3 e=o[0][0];3 t=o[o.8-1][0];3 n=(t-e)/a;3 r=[];r.6(o[0]);3 i=1;7=o[0];4=o[i];q(3 s=e+n;s<t+n;s+=n){9(s>t){s=t}$("#18").19(s);1a(s>4[0]){7=4;4=o[i++]}9(s==4[0]){r.6([s,4[1]]);7=4;4=o[i++]}11{3 u=(4[1]-7[1])/(4[0]-7[0]);16=u*s+(7[1]-u*7[0]);r.6([s,16])}}j r}b v(){3 n=[];p++;1b(c){14"1c":n=d.w(-1*p);y;14"1h":n=d.w(d.8/2-p/2,d.8/2+p/2);y;1d:n=d.w(0,p);y}9(!u){13=n[0][0];12=n[n.8-1][0];n=[];q(3 i=0;i<o.8;i++){9(o[i][0]>=13&&o[i][0]<=12){n.6(o[i])}}}t[r].x=p<a?n:o;g.1j(t);g.1i();9(p<a){15(v,f/a)}11{e.1g("1f")}}b m(i){3 s=[];s.6([i[0][0],k.1e.10(k,i.z(b(e){j e[1]}))]);s.6([i[0][0],17]);s.6([i[0][0],k.1k.10(k,i.z(b(e){j e[1]}))]);q(3 o=0;o<i.8;o++){s.6([i[o][0],17])}t[r].x=s;j $.1l(e,t,n)}3 r=0;q(3 i=0;i<t.8;i++){9(t[i].5){r=i}}3 s=t[r];3 o=s.x;3 u=t[r].1v?1x:1t;3 a=t[r].5&&t[r].5.1r||1q;3 f=t[r].5&&t[r].5.1p||1o;3 l=t[r].5&&t[r].5.1n||0;3 c=t[r].5&&t[r].5.1u||"1s";3 p=0;3 d=h();3 g=m(o);15(v,l);j g}})',36,70,'|||var|nPoint|animator|push|lPoint|length|if||function||||||||return|Math||||||for||||||slice|data|break|map|apply|else|laV|inV|case|setTimeout|curV|null|m2|html|while|switch|left|default|max|animatorComplete|trigger|center|draw|setData|min|plot|extend|start|1e3|duration|135|steps|right|false|direction|lines|plotAnimator|true'.split('|')))

View File

@@ -0,0 +1,345 @@
/* Flot plugin for drawing all elements of a plot on the canvas.
Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license.
Flot normally produces certain elements, like axis labels and the legend, using
HTML elements. This permits greater interactivity and customization, and often
looks better, due to cross-browser canvas text inconsistencies and limitations.
It can also be desirable to render the plot entirely in canvas, particularly
if the goal is to save it as an image, or if Flot is being used in a context
where the HTML DOM does not exist, as is the case within Node.js. This plugin
switches out Flot's standard drawing operations for canvas-only replacements.
Currently the plugin supports only axis labels, but it will eventually allow
every element of the plot to be rendered directly to canvas.
The plugin supports these options:
{
canvas: boolean
}
The "canvas" option controls whether full canvas drawing is enabled, making it
possible to toggle on and off. This is useful when a plot uses HTML text in the
browser, but needs to redraw with canvas text when exporting as an image.
*/
(function($) {
var options = {
canvas: true
};
var render, getTextInfo, addText;
// Cache the prototype hasOwnProperty for faster access
var hasOwnProperty = Object.prototype.hasOwnProperty;
function init(plot, classes) {
var Canvas = classes.Canvas;
// We only want to replace the functions once; the second time around
// we would just get our new function back. This whole replacing of
// prototype functions is a disaster, and needs to be changed ASAP.
if (render == null) {
getTextInfo = Canvas.prototype.getTextInfo,
addText = Canvas.prototype.addText,
render = Canvas.prototype.render;
}
// Finishes rendering the canvas, including overlaid text
Canvas.prototype.render = function() {
if (!plot.getOptions().canvas) {
return render.call(this);
}
var context = this.context,
cache = this._textCache;
// For each text layer, render elements marked as active
context.save();
context.textBaseline = "middle";
for (var layerKey in cache) {
if (hasOwnProperty.call(cache, layerKey)) {
var layerCache = cache[layerKey];
for (var styleKey in layerCache) {
if (hasOwnProperty.call(layerCache, styleKey)) {
var styleCache = layerCache[styleKey],
updateStyles = true;
for (var key in styleCache) {
if (hasOwnProperty.call(styleCache, key)) {
var info = styleCache[key],
positions = info.positions,
lines = info.lines;
// Since every element at this level of the cache have the
// same font and fill styles, we can just change them once
// using the values from the first element.
if (updateStyles) {
context.fillStyle = info.font.color;
context.font = info.font.definition;
updateStyles = false;
}
for (var i = 0, position; position = positions[i]; i++) {
if (position.active) {
for (var j = 0, line; line = position.lines[j]; j++) {
context.fillText(lines[j].text, line[0], line[1]);
}
} else {
positions.splice(i--, 1);
}
}
if (positions.length == 0) {
delete styleCache[key];
}
}
}
}
}
}
}
context.restore();
};
// Creates (if necessary) and returns a text info object.
//
// When the canvas option is set, the object looks like this:
//
// {
// width: Width of the text's bounding box.
// height: Height of the text's bounding box.
// positions: Array of positions at which this text is drawn.
// lines: [{
// height: Height of this line.
// widths: Width of this line.
// text: Text on this line.
// }],
// font: {
// definition: Canvas font property string.
// color: Color of the text.
// },
// }
//
// The positions array contains objects that look like this:
//
// {
// active: Flag indicating whether the text should be visible.
// lines: Array of [x, y] coordinates at which to draw the line.
// x: X coordinate at which to draw the text.
// y: Y coordinate at which to draw the text.
// }
Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
if (!plot.getOptions().canvas) {
return getTextInfo.call(this, layer, text, font, angle, width);
}
var textStyle, layerCache, styleCache, info;
// Cast the value to a string, in case we were given a number
text = "" + text;
// If the font is a font-spec object, generate a CSS definition
if (typeof font === "object") {
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family;
} else {
textStyle = font;
}
// Retrieve (or create) the cache for the text's layer and styles
layerCache = this._textCache[layer];
if (layerCache == null) {
layerCache = this._textCache[layer] = {};
}
styleCache = layerCache[textStyle];
if (styleCache == null) {
styleCache = layerCache[textStyle] = {};
}
info = styleCache[text];
if (info == null) {
var context = this.context;
// If the font was provided as CSS, create a div with those
// classes and examine it to generate a canvas font spec.
if (typeof font !== "object") {
var element = $("<div>&nbsp;</div>")
.css("position", "absolute")
.addClass(typeof font === "string" ? font : null)
.appendTo(this.getTextLayer(layer));
font = {
lineHeight: element.height(),
style: element.css("font-style"),
variant: element.css("font-variant"),
weight: element.css("font-weight"),
family: element.css("font-family"),
color: element.css("color")
};
// Setting line-height to 1, without units, sets it equal
// to the font-size, even if the font-size is abstract,
// like 'smaller'. This enables us to read the real size
// via the element's height, working around browsers that
// return the literal 'smaller' value.
font.size = element.css("line-height", 1).height();
element.remove();
}
textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px " + font.family;
// Create a new info object, initializing the dimensions to
// zero so we can count them up line-by-line.
info = styleCache[text] = {
width: 0,
height: 0,
positions: [],
lines: [],
font: {
definition: textStyle,
color: font.color
}
};
context.save();
context.font = textStyle;
// Canvas can't handle multi-line strings; break on various
// newlines, including HTML brs, to build a list of lines.
// Note that we could split directly on regexps, but IE < 9 is
// broken; revisit when we drop IE 7/8 support.
var lines = (text + "").replace(/<br ?\/?>|\r\n|\r/g, "\n").split("\n");
for (var i = 0; i < lines.length; ++i) {
var lineText = lines[i],
measured = context.measureText(lineText);
info.width = Math.max(measured.width, info.width);
info.height += font.lineHeight;
info.lines.push({
text: lineText,
width: measured.width,
height: font.lineHeight
});
}
context.restore();
}
return info;
};
// Adds a text string to the canvas text overlay.
Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
if (!plot.getOptions().canvas) {
return addText.call(this, layer, x, y, text, font, angle, width, halign, valign);
}
var info = this.getTextInfo(layer, text, font, angle, width),
positions = info.positions,
lines = info.lines;
// Text is drawn with baseline 'middle', which we need to account
// for by adding half a line's height to the y position.
y += info.height / lines.length / 2;
// Tweak the initial y-position to match vertical alignment
if (valign == "middle") {
y = Math.round(y - info.height / 2);
} else if (valign == "bottom") {
y = Math.round(y - info.height);
} else {
y = Math.round(y);
}
// FIXME: LEGACY BROWSER FIX
// AFFECTS: Opera < 12.00
// Offset the y coordinate, since Opera is off pretty
// consistently compared to the other browsers.
if (!!(window.opera && window.opera.version().split(".")[0] < 12)) {
y -= 2;
}
// Determine whether this text already exists at this position.
// If so, mark it for inclusion in the next render pass.
for (var i = 0, position; position = positions[i]; i++) {
if (position.x == x && position.y == y) {
position.active = true;
return;
}
}
// If the text doesn't exist at this position, create a new entry
position = {
active: true,
lines: [],
x: x,
y: y
};
positions.push(position);
// Fill in the x & y positions of each line, adjusting them
// individually for horizontal alignment.
for (var i = 0, line; line = lines[i]; i++) {
if (halign == "center") {
position.lines.push([Math.round(x - line.width / 2), y]);
} else if (halign == "right") {
position.lines.push([Math.round(x - line.width), y]);
} else {
position.lines.push([Math.round(x), y]);
}
y += line.height;
}
};
}
$.plot.plugins.push({
init: init,
options: options,
name: "canvas",
version: "1.0"
});
})(jQuery);

View File

@@ -0,0 +1 @@
(function($){var options={canvas:true};var render,getTextInfo,addText;var hasOwnProperty=Object.prototype.hasOwnProperty;function init(plot,classes){var Canvas=classes.Canvas;if(render==null){getTextInfo=Canvas.prototype.getTextInfo,addText=Canvas.prototype.addText,render=Canvas.prototype.render}Canvas.prototype.render=function(){if(!plot.getOptions().canvas){return render.call(this)}var context=this.context,cache=this._textCache;context.save();context.textBaseline="middle";for(var layerKey in cache){if(hasOwnProperty.call(cache,layerKey)){var layerCache=cache[layerKey];for(var styleKey in layerCache){if(hasOwnProperty.call(layerCache,styleKey)){var styleCache=layerCache[styleKey],updateStyles=true;for(var key in styleCache){if(hasOwnProperty.call(styleCache,key)){var info=styleCache[key],positions=info.positions,lines=info.lines;if(updateStyles){context.fillStyle=info.font.color;context.font=info.font.definition;updateStyles=false}for(var i=0,position;position=positions[i];i++){if(position.active){for(var j=0,line;line=position.lines[j];j++){context.fillText(lines[j].text,line[0],line[1])}}else{positions.splice(i--,1)}}if(positions.length==0){delete styleCache[key]}}}}}}}context.restore()};Canvas.prototype.getTextInfo=function(layer,text,font,angle,width){if(!plot.getOptions().canvas){return getTextInfo.call(this,layer,text,font,angle,width)}var textStyle,layerCache,styleCache,info;text=""+text;if(typeof font==="object"){textStyle=font.style+" "+font.variant+" "+font.weight+" "+font.size+"px "+font.family}else{textStyle=font}layerCache=this._textCache[layer];if(layerCache==null){layerCache=this._textCache[layer]={}}styleCache=layerCache[textStyle];if(styleCache==null){styleCache=layerCache[textStyle]={}}info=styleCache[text];if(info==null){var context=this.context;if(typeof font!=="object"){var element=$("<div>&nbsp;</div>").css("position","absolute").addClass(typeof font==="string"?font:null).appendTo(this.getTextLayer(layer));font={lineHeight:element.height(),style:element.css("font-style"),variant:element.css("font-variant"),weight:element.css("font-weight"),family:element.css("font-family"),color:element.css("color")};font.size=element.css("line-height",1).height();element.remove()}textStyle=font.style+" "+font.variant+" "+font.weight+" "+font.size+"px "+font.family;info=styleCache[text]={width:0,height:0,positions:[],lines:[],font:{definition:textStyle,color:font.color}};context.save();context.font=textStyle;var lines=(text+"").replace(/<br ?\/?>|\r\n|\r/g,"\n").split("\n");for(var i=0;i<lines.length;++i){var lineText=lines[i],measured=context.measureText(lineText);info.width=Math.max(measured.width,info.width);info.height+=font.lineHeight;info.lines.push({text:lineText,width:measured.width,height:font.lineHeight})}context.restore()}return info};Canvas.prototype.addText=function(layer,x,y,text,font,angle,width,halign,valign){if(!plot.getOptions().canvas){return addText.call(this,layer,x,y,text,font,angle,width,halign,valign)}var info=this.getTextInfo(layer,text,font,angle,width),positions=info.positions,lines=info.lines;y+=info.height/lines.length/2;if(valign=="middle"){y=Math.round(y-info.height/2)}else if(valign=="bottom"){y=Math.round(y-info.height)}else{y=Math.round(y)}if(!!(window.opera&&window.opera.version().split(".")[0]<12)){y-=2}for(var i=0,position;position=positions[i];i++){if(position.x==x&&position.y==y){position.active=true;return}}position={active:true,lines:[],x:x,y:y};positions.push(position);for(var i=0,line;line=lines[i];i++){if(halign=="center"){position.lines.push([Math.round(x-line.width/2),y])}else if(halign=="right"){position.lines.push([Math.round(x-line.width),y])}else{position.lines.push([Math.round(x),y])}y+=line.height}}}$.plot.plugins.push({init:init,options:options,name:"canvas",version:"1.0"})})(jQuery);

View File

@@ -0,0 +1,190 @@
/* Flot plugin for plotting textual data or categories.
Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license.
Consider a dataset like [["February", 34], ["March", 20], ...]. This plugin
allows you to plot such a dataset directly.
To enable it, you must specify mode: "categories" on the axis with the textual
labels, e.g.
$.plot("#placeholder", data, { xaxis: { mode: "categories" } });
By default, the labels are ordered as they are met in the data series. If you
need a different ordering, you can specify "categories" on the axis options
and list the categories there:
xaxis: {
mode: "categories",
categories: ["February", "March", "April"]
}
If you need to customize the distances between the categories, you can specify
"categories" as an object mapping labels to values
xaxis: {
mode: "categories",
categories: { "February": 1, "March": 3, "April": 4 }
}
If you don't specify all categories, the remaining categories will be numbered
from the max value plus 1 (with a spacing of 1 between each).
Internally, the plugin works by transforming the input data through an auto-
generated mapping where the first category becomes 0, the second 1, etc.
Hence, a point like ["February", 34] becomes [0, 34] internally in Flot (this
is visible in hover and click events that return numbers rather than the
category labels). The plugin also overrides the tick generator to spit out the
categories as ticks instead of the values.
If you need to map a value back to its label, the mapping is always accessible
as "categories" on the axis object, e.g. plot.getAxes().xaxis.categories.
*/
(function ($) {
var options = {
xaxis: {
categories: null
},
yaxis: {
categories: null
}
};
function processRawData(plot, series, data, datapoints) {
// if categories are enabled, we need to disable
// auto-transformation to numbers so the strings are intact
// for later processing
var xCategories = series.xaxis.options.mode == "categories",
yCategories = series.yaxis.options.mode == "categories";
if (!(xCategories || yCategories))
return;
var format = datapoints.format;
if (!format) {
// FIXME: auto-detection should really not be defined here
var s = series;
format = [];
format.push({ x: true, number: true, required: true });
format.push({ y: true, number: true, required: true });
if (s.bars.show || (s.lines.show && s.lines.fill)) {
var autoscale = !!((s.bars.show && s.bars.zero) || (s.lines.show && s.lines.zero));
format.push({ y: true, number: true, required: false, defaultValue: 0, autoscale: autoscale });
if (s.bars.horizontal) {
delete format[format.length - 1].y;
format[format.length - 1].x = true;
}
}
datapoints.format = format;
}
for (var m = 0; m < format.length; ++m) {
if (format[m].x && xCategories)
format[m].number = false;
if (format[m].y && yCategories)
format[m].number = false;
}
}
function getNextIndex(categories) {
var index = -1;
for (var v in categories)
if (categories[v] > index)
index = categories[v];
return index + 1;
}
function categoriesTickGenerator(axis) {
var res = [];
for (var label in axis.categories) {
var v = axis.categories[label];
if (v >= axis.min && v <= axis.max)
res.push([v, label]);
}
res.sort(function (a, b) { return a[0] - b[0]; });
return res;
}
function setupCategoriesForAxis(series, axis, datapoints) {
if (series[axis].options.mode != "categories")
return;
if (!series[axis].categories) {
// parse options
var c = {}, o = series[axis].options.categories || {};
if ($.isArray(o)) {
for (var i = 0; i < o.length; ++i)
c[o[i]] = i;
}
else {
for (var v in o)
c[v] = o[v];
}
series[axis].categories = c;
}
// fix ticks
if (!series[axis].options.ticks)
series[axis].options.ticks = categoriesTickGenerator;
transformPointsOnAxis(datapoints, axis, series[axis].categories);
}
function transformPointsOnAxis(datapoints, axis, categories) {
// go through the points, transforming them
var points = datapoints.points,
ps = datapoints.pointsize,
format = datapoints.format,
formatColumn = axis.charAt(0),
index = getNextIndex(categories);
for (var i = 0; i < points.length; i += ps) {
if (points[i] == null)
continue;
for (var m = 0; m < ps; ++m) {
var val = points[i + m];
if (val == null || !format[m][formatColumn])
continue;
if (!(val in categories)) {
categories[val] = index;
++index;
}
points[i + m] = categories[val];
}
}
}
function processDatapoints(plot, series, datapoints) {
setupCategoriesForAxis(series, "xaxis", datapoints);
setupCategoriesForAxis(series, "yaxis", datapoints);
}
function init(plot) {
plot.hooks.processRawData.push(processRawData);
plot.hooks.processDatapoints.push(processDatapoints);
}
$.plot.plugins.push({
init: init,
options: options,
name: 'categories',
version: '1.0'
});
})(jQuery);

View File

@@ -0,0 +1 @@
(function($){var options={xaxis:{categories:null},yaxis:{categories:null}};function processRawData(plot,series,data,datapoints){var xCategories=series.xaxis.options.mode=="categories",yCategories=series.yaxis.options.mode=="categories";if(!(xCategories||yCategories))return;var format=datapoints.format;if(!format){var s=series;format=[];format.push({x:true,number:true,required:true});format.push({y:true,number:true,required:true});if(s.bars.show||s.lines.show&&s.lines.fill){var autoscale=!!(s.bars.show&&s.bars.zero||s.lines.show&&s.lines.zero);format.push({y:true,number:true,required:false,defaultValue:0,autoscale:autoscale});if(s.bars.horizontal){delete format[format.length-1].y;format[format.length-1].x=true}}datapoints.format=format}for(var m=0;m<format.length;++m){if(format[m].x&&xCategories)format[m].number=false;if(format[m].y&&yCategories)format[m].number=false}}function getNextIndex(categories){var index=-1;for(var v in categories)if(categories[v]>index)index=categories[v];return index+1}function categoriesTickGenerator(axis){var res=[];for(var label in axis.categories){var v=axis.categories[label];if(v>=axis.min&&v<=axis.max)res.push([v,label])}res.sort(function(a,b){return a[0]-b[0]});return res}function setupCategoriesForAxis(series,axis,datapoints){if(series[axis].options.mode!="categories")return;if(!series[axis].categories){var c={},o=series[axis].options.categories||{};if($.isArray(o)){for(var i=0;i<o.length;++i)c[o[i]]=i}else{for(var v in o)c[v]=o[v]}series[axis].categories=c}if(!series[axis].options.ticks)series[axis].options.ticks=categoriesTickGenerator;transformPointsOnAxis(datapoints,axis,series[axis].categories)}function transformPointsOnAxis(datapoints,axis,categories){var points=datapoints.points,ps=datapoints.pointsize,format=datapoints.format,formatColumn=axis.charAt(0),index=getNextIndex(categories);for(var i=0;i<points.length;i+=ps){if(points[i]==null)continue;for(var m=0;m<ps;++m){var val=points[i+m];if(val==null||!format[m][formatColumn])continue;if(!(val in categories)){categories[val]=index;++index}points[i+m]=categories[val]}}}function processDatapoints(plot,series,datapoints){setupCategoriesForAxis(series,"xaxis",datapoints);setupCategoriesForAxis(series,"yaxis",datapoints)}function init(plot){plot.hooks.processRawData.push(processRawData);plot.hooks.processDatapoints.push(processDatapoints)}$.plot.plugins.push({init:init,options:options,name:"categories",version:"1.0"})})(jQuery);

View File

@@ -0,0 +1,176 @@
/* Flot plugin for showing crosshairs when the mouse hovers over the plot.
Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license.
The plugin supports these options:
crosshair: {
mode: null or "x" or "y" or "xy"
color: color
lineWidth: number
}
Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical
crosshair that lets you trace the values on the x axis, "y" enables a
horizontal crosshair and "xy" enables them both. "color" is the color of the
crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of
the drawn lines (default is 1).
The plugin also adds four public methods:
- setCrosshair( pos )
Set the position of the crosshair. Note that this is cleared if the user
moves the mouse. "pos" is in coordinates of the plot and should be on the
form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple
axes), which is coincidentally the same format as what you get from a
"plothover" event. If "pos" is null, the crosshair is cleared.
- clearCrosshair()
Clear the crosshair.
- lockCrosshair(pos)
Cause the crosshair to lock to the current location, no longer updating if
the user moves the mouse. Optionally supply a position (passed on to
setCrosshair()) to move it to.
Example usage:
var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
$("#graph").bind( "plothover", function ( evt, position, item ) {
if ( item ) {
// Lock the crosshair to the data point being hovered
myFlot.lockCrosshair({
x: item.datapoint[ 0 ],
y: item.datapoint[ 1 ]
});
} else {
// Return normal crosshair operation
myFlot.unlockCrosshair();
}
});
- unlockCrosshair()
Free the crosshair to move again after locking it.
*/
(function ($) {
var options = {
crosshair: {
mode: null, // one of null, "x", "y" or "xy",
color: "rgba(170, 0, 0, 0.80)",
lineWidth: 1
}
};
function init(plot) {
// position of crosshair in pixels
var crosshair = { x: -1, y: -1, locked: false };
plot.setCrosshair = function setCrosshair(pos) {
if (!pos)
crosshair.x = -1;
else {
var o = plot.p2c(pos);
crosshair.x = Math.max(0, Math.min(o.left, plot.width()));
crosshair.y = Math.max(0, Math.min(o.top, plot.height()));
}
plot.triggerRedrawOverlay();
};
plot.clearCrosshair = plot.setCrosshair; // passes null for pos
plot.lockCrosshair = function lockCrosshair(pos) {
if (pos)
plot.setCrosshair(pos);
crosshair.locked = true;
};
plot.unlockCrosshair = function unlockCrosshair() {
crosshair.locked = false;
};
function onMouseOut(e) {
if (crosshair.locked)
return;
if (crosshair.x != -1) {
crosshair.x = -1;
plot.triggerRedrawOverlay();
}
}
function onMouseMove(e) {
if (crosshair.locked)
return;
if (plot.getSelection && plot.getSelection()) {
crosshair.x = -1; // hide the crosshair while selecting
return;
}
var offset = plot.offset();
crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
plot.triggerRedrawOverlay();
}
plot.hooks.bindEvents.push(function (plot, eventHolder) {
if (!plot.getOptions().crosshair.mode)
return;
eventHolder.mouseout(onMouseOut);
eventHolder.mousemove(onMouseMove);
});
plot.hooks.drawOverlay.push(function (plot, ctx) {
var c = plot.getOptions().crosshair;
if (!c.mode)
return;
var plotOffset = plot.getPlotOffset();
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
if (crosshair.x != -1) {
var adj = plot.getOptions().crosshair.lineWidth % 2 === 0 ? 0 : 0.5;
ctx.strokeStyle = c.color;
ctx.lineWidth = c.lineWidth;
ctx.lineJoin = "round";
ctx.beginPath();
if (c.mode.indexOf("x") != -1) {
var drawX = Math.round(crosshair.x) + adj;
ctx.moveTo(drawX, 0);
ctx.lineTo(drawX, plot.height());
}
if (c.mode.indexOf("y") != -1) {
var drawY = Math.round(crosshair.y) + adj;
ctx.moveTo(0, drawY);
ctx.lineTo(plot.width(), drawY);
}
ctx.stroke();
}
ctx.restore();
});
plot.hooks.shutdown.push(function (plot, eventHolder) {
eventHolder.unbind("mouseout", onMouseOut);
eventHolder.unbind("mousemove", onMouseMove);
});
}
$.plot.plugins.push({
init: init,
options: options,
name: 'crosshair',
version: '1.0'
});
})(jQuery);

View File

@@ -0,0 +1 @@
(function($){var options={crosshair:{mode:null,color:"rgba(170, 0, 0, 0.80)",lineWidth:1}};function init(plot){var crosshair={x:-1,y:-1,locked:false};plot.setCrosshair=function setCrosshair(pos){if(!pos)crosshair.x=-1;else{var o=plot.p2c(pos);crosshair.x=Math.max(0,Math.min(o.left,plot.width()));crosshair.y=Math.max(0,Math.min(o.top,plot.height()))}plot.triggerRedrawOverlay()};plot.clearCrosshair=plot.setCrosshair;plot.lockCrosshair=function lockCrosshair(pos){if(pos)plot.setCrosshair(pos);crosshair.locked=true};plot.unlockCrosshair=function unlockCrosshair(){crosshair.locked=false};function onMouseOut(e){if(crosshair.locked)return;if(crosshair.x!=-1){crosshair.x=-1;plot.triggerRedrawOverlay()}}function onMouseMove(e){if(crosshair.locked)return;if(plot.getSelection&&plot.getSelection()){crosshair.x=-1;return}var offset=plot.offset();crosshair.x=Math.max(0,Math.min(e.pageX-offset.left,plot.width()));crosshair.y=Math.max(0,Math.min(e.pageY-offset.top,plot.height()));plot.triggerRedrawOverlay()}plot.hooks.bindEvents.push(function(plot,eventHolder){if(!plot.getOptions().crosshair.mode)return;eventHolder.mouseout(onMouseOut);eventHolder.mousemove(onMouseMove)});plot.hooks.drawOverlay.push(function(plot,ctx){var c=plot.getOptions().crosshair;if(!c.mode)return;var plotOffset=plot.getPlotOffset();ctx.save();ctx.translate(plotOffset.left,plotOffset.top);if(crosshair.x!=-1){var adj=plot.getOptions().crosshair.lineWidth%2===0?0:.5;ctx.strokeStyle=c.color;ctx.lineWidth=c.lineWidth;ctx.lineJoin="round";ctx.beginPath();if(c.mode.indexOf("x")!=-1){var drawX=Math.round(crosshair.x)+adj;ctx.moveTo(drawX,0);ctx.lineTo(drawX,plot.height())}if(c.mode.indexOf("y")!=-1){var drawY=Math.round(crosshair.y)+adj;ctx.moveTo(0,drawY);ctx.lineTo(plot.width(),drawY)}ctx.stroke()}ctx.restore()});plot.hooks.shutdown.push(function(plot,eventHolder){eventHolder.unbind("mouseout",onMouseOut);eventHolder.unbind("mousemove",onMouseMove)})}$.plot.plugins.push({init:init,options:options,name:"crosshair",version:"1.0"})})(jQuery);

View File

@@ -0,0 +1,353 @@
/* Flot plugin for plotting error bars.
Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license.
Error bars are used to show standard deviation and other statistical
properties in a plot.
* Created by Rui Pereira - rui (dot) pereira (at) gmail (dot) com
This plugin allows you to plot error-bars over points. Set "errorbars" inside
the points series to the axis name over which there will be error values in
your data array (*even* if you do not intend to plot them later, by setting
"show: null" on xerr/yerr).
The plugin supports these options:
series: {
points: {
errorbars: "x" or "y" or "xy",
xerr: {
show: null/false or true,
asymmetric: null/false or true,
upperCap: null or "-" or function,
lowerCap: null or "-" or function,
color: null or color,
radius: null or number
},
yerr: { same options as xerr }
}
}
Each data point array is expected to be of the type:
"x" [ x, y, xerr ]
"y" [ x, y, yerr ]
"xy" [ x, y, xerr, yerr ]
Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
error-bars on X and asymmetric on Y would be:
[ x, y, xerr, yerr_lower, yerr_upper ]
By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will
draw a small cap perpendicular to the error bar. They can also be set to a
user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg.
function drawSemiCircle( ctx, x, y, radius ) {
ctx.beginPath();
ctx.arc( x, y, radius, 0, Math.PI, false );
ctx.moveTo( x - radius, y );
ctx.lineTo( x + radius, y );
ctx.stroke();
}
Color and radius both default to the same ones of the points series if not
set. The independent radius parameter on xerr/yerr is useful for the case when
we may want to add error-bars to a line, without showing the interconnecting
points (with radius: 0), and still showing end caps on the error-bars.
shadowSize and lineWidth are derived as well from the points series.
*/
(function ($) {
var options = {
series: {
points: {
errorbars: null, //should be 'x', 'y' or 'xy'
xerr: { err: 'x', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null},
yerr: { err: 'y', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null}
}
}
};
function processRawData(plot, series, data, datapoints){
if (!series.points.errorbars)
return;
// x,y values
var format = [
{ x: true, number: true, required: true },
{ y: true, number: true, required: true }
];
var errors = series.points.errorbars;
// error bars - first X then Y
if (errors == 'x' || errors == 'xy') {
// lower / upper error
if (series.points.xerr.asymmetric) {
format.push({ x: true, number: true, required: true });
format.push({ x: true, number: true, required: true });
} else
format.push({ x: true, number: true, required: true });
}
if (errors == 'y' || errors == 'xy') {
// lower / upper error
if (series.points.yerr.asymmetric) {
format.push({ y: true, number: true, required: true });
format.push({ y: true, number: true, required: true });
} else
format.push({ y: true, number: true, required: true });
}
datapoints.format = format;
}
function parseErrors(series, i){
var points = series.datapoints.points;
// read errors from points array
var exl = null,
exu = null,
eyl = null,
eyu = null;
var xerr = series.points.xerr,
yerr = series.points.yerr;
var eb = series.points.errorbars;
// error bars - first X
if (eb == 'x' || eb == 'xy') {
if (xerr.asymmetric) {
exl = points[i + 2];
exu = points[i + 3];
if (eb == 'xy')
if (yerr.asymmetric){
eyl = points[i + 4];
eyu = points[i + 5];
} else eyl = points[i + 4];
} else {
exl = points[i + 2];
if (eb == 'xy')
if (yerr.asymmetric) {
eyl = points[i + 3];
eyu = points[i + 4];
} else eyl = points[i + 3];
}
// only Y
} else if (eb == 'y')
if (yerr.asymmetric) {
eyl = points[i + 2];
eyu = points[i + 3];
} else eyl = points[i + 2];
// symmetric errors?
if (exu == null) exu = exl;
if (eyu == null) eyu = eyl;
var errRanges = [exl, exu, eyl, eyu];
// nullify if not showing
if (!xerr.show){
errRanges[0] = null;
errRanges[1] = null;
}
if (!yerr.show){
errRanges[2] = null;
errRanges[3] = null;
}
return errRanges;
}
function drawSeriesErrors(plot, ctx, s){
var points = s.datapoints.points,
ps = s.datapoints.pointsize,
ax = [s.xaxis, s.yaxis],
radius = s.points.radius,
err = [s.points.xerr, s.points.yerr];
//sanity check, in case some inverted axis hack is applied to flot
var invertX = false;
if (ax[0].p2c(ax[0].max) < ax[0].p2c(ax[0].min)) {
invertX = true;
var tmp = err[0].lowerCap;
err[0].lowerCap = err[0].upperCap;
err[0].upperCap = tmp;
}
var invertY = false;
if (ax[1].p2c(ax[1].min) < ax[1].p2c(ax[1].max)) {
invertY = true;
var tmp = err[1].lowerCap;
err[1].lowerCap = err[1].upperCap;
err[1].upperCap = tmp;
}
for (var i = 0; i < s.datapoints.points.length; i += ps) {
//parse
var errRanges = parseErrors(s, i);
//cycle xerr & yerr
for (var e = 0; e < err.length; e++){
var minmax = [ax[e].min, ax[e].max];
//draw this error?
if (errRanges[e * err.length]){
//data coordinates
var x = points[i],
y = points[i + 1];
//errorbar ranges
var upper = [x, y][e] + errRanges[e * err.length + 1],
lower = [x, y][e] - errRanges[e * err.length];
//points outside of the canvas
if (err[e].err == 'x')
if (y > ax[1].max || y < ax[1].min || upper < ax[0].min || lower > ax[0].max)
continue;
if (err[e].err == 'y')
if (x > ax[0].max || x < ax[0].min || upper < ax[1].min || lower > ax[1].max)
continue;
// prevent errorbars getting out of the canvas
var drawUpper = true,
drawLower = true;
if (upper > minmax[1]) {
drawUpper = false;
upper = minmax[1];
}
if (lower < minmax[0]) {
drawLower = false;
lower = minmax[0];
}
//sanity check, in case some inverted axis hack is applied to flot
if ((err[e].err == 'x' && invertX) || (err[e].err == 'y' && invertY)) {
//swap coordinates
var tmp = lower;
lower = upper;
upper = tmp;
tmp = drawLower;
drawLower = drawUpper;
drawUpper = tmp;
tmp = minmax[0];
minmax[0] = minmax[1];
minmax[1] = tmp;
}
// convert to pixels
x = ax[0].p2c(x),
y = ax[1].p2c(y),
upper = ax[e].p2c(upper);
lower = ax[e].p2c(lower);
minmax[0] = ax[e].p2c(minmax[0]);
minmax[1] = ax[e].p2c(minmax[1]);
//same style as points by default
var lw = err[e].lineWidth ? err[e].lineWidth : s.points.lineWidth,
sw = s.points.shadowSize != null ? s.points.shadowSize : s.shadowSize;
//shadow as for points
if (lw > 0 && sw > 0) {
var w = sw / 2;
ctx.lineWidth = w;
ctx.strokeStyle = "rgba(0,0,0,0.1)";
drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w + w/2, minmax);
ctx.strokeStyle = "rgba(0,0,0,0.2)";
drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w/2, minmax);
}
ctx.strokeStyle = err[e].color? err[e].color: s.color;
ctx.lineWidth = lw;
//draw it
drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, 0, minmax);
}
}
}
}
function drawError(ctx,err,x,y,upper,lower,drawUpper,drawLower,radius,offset,minmax){
//shadow offset
y += offset;
upper += offset;
lower += offset;
// error bar - avoid plotting over circles
if (err.err == 'x'){
if (upper > x + radius) drawPath(ctx, [[upper,y],[Math.max(x + radius,minmax[0]),y]]);
else drawUpper = false;
if (lower < x - radius) drawPath(ctx, [[Math.min(x - radius,minmax[1]),y],[lower,y]] );
else drawLower = false;
}
else {
if (upper < y - radius) drawPath(ctx, [[x,upper],[x,Math.min(y - radius,minmax[0])]] );
else drawUpper = false;
if (lower > y + radius) drawPath(ctx, [[x,Math.max(y + radius,minmax[1])],[x,lower]] );
else drawLower = false;
}
//internal radius value in errorbar, allows to plot radius 0 points and still keep proper sized caps
//this is a way to get errorbars on lines without visible connecting dots
radius = err.radius != null? err.radius: radius;
// upper cap
if (drawUpper) {
if (err.upperCap == '-'){
if (err.err=='x') drawPath(ctx, [[upper,y - radius],[upper,y + radius]] );
else drawPath(ctx, [[x - radius,upper],[x + radius,upper]] );
} else if ($.isFunction(err.upperCap)){
if (err.err=='x') err.upperCap(ctx, upper, y, radius);
else err.upperCap(ctx, x, upper, radius);
}
}
// lower cap
if (drawLower) {
if (err.lowerCap == '-'){
if (err.err=='x') drawPath(ctx, [[lower,y - radius],[lower,y + radius]] );
else drawPath(ctx, [[x - radius,lower],[x + radius,lower]] );
} else if ($.isFunction(err.lowerCap)){
if (err.err=='x') err.lowerCap(ctx, lower, y, radius);
else err.lowerCap(ctx, x, lower, radius);
}
}
}
function drawPath(ctx, pts){
ctx.beginPath();
ctx.moveTo(pts[0][0], pts[0][1]);
for (var p=1; p < pts.length; p++)
ctx.lineTo(pts[p][0], pts[p][1]);
ctx.stroke();
}
function draw(plot, ctx){
var plotOffset = plot.getPlotOffset();
ctx.save();
ctx.translate(plotOffset.left, plotOffset.top);
$.each(plot.getData(), function (i, s) {
if (s.points.errorbars && (s.points.xerr.show || s.points.yerr.show))
drawSeriesErrors(plot, ctx, s);
});
ctx.restore();
}
function init(plot) {
plot.hooks.processRawData.push(processRawData);
plot.hooks.draw.push(draw);
}
$.plot.plugins.push({
init: init,
options: options,
name: 'errorbars',
version: '1.0'
});
})(jQuery);

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,226 @@
/* Flot plugin for computing bottoms for filled line and bar charts.
Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license.
The case: you've got two series that you want to fill the area between. In Flot
terms, you need to use one as the fill bottom of the other. You can specify the
bottom of each data point as the third coordinate manually, or you can use this
plugin to compute it for you.
In order to name the other series, you need to give it an id, like this:
var dataset = [
{ data: [ ... ], id: "foo" } , // use default bottom
{ data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
];
$.plot($("#placeholder"), dataset, { lines: { show: true, fill: true }});
As a convenience, if the id given is a number that doesn't appear as an id in
the series, it is interpreted as the index in the array instead (so fillBetween:
0 can also mean the first series).
Internally, the plugin modifies the datapoints in each series. For line series,
extra data points might be inserted through interpolation. Note that at points
where the bottom line is not defined (due to a null point or start/end of line),
the current line will show a gap too. The algorithm comes from the
jquery.flot.stack.js plugin, possibly some code could be shared.
*/
(function ( $ ) {
var options = {
series: {
fillBetween: null // or number
}
};
function init( plot ) {
function findBottomSeries( s, allseries ) {
var i;
for ( i = 0; i < allseries.length; ++i ) {
if ( allseries[ i ].id === s.fillBetween ) {
return allseries[ i ];
}
}
if ( typeof s.fillBetween === "number" ) {
if ( s.fillBetween < 0 || s.fillBetween >= allseries.length ) {
return null;
}
return allseries[ s.fillBetween ];
}
return null;
}
function computeFillBottoms( plot, s, datapoints ) {
if ( s.fillBetween == null ) {
return;
}
var other = findBottomSeries( s, plot.getData() );
if ( !other ) {
return;
}
var ps = datapoints.pointsize,
points = datapoints.points,
otherps = other.datapoints.pointsize,
otherpoints = other.datapoints.points,
newpoints = [],
px, py, intery, qx, qy, bottom,
withlines = s.lines.show,
withbottom = ps > 2 && datapoints.format[2].y,
withsteps = withlines && s.lines.steps,
fromgap = true,
i = 0,
j = 0,
l, m;
while ( true ) {
if ( i >= points.length ) {
break;
}
l = newpoints.length;
if ( points[ i ] == null ) {
// copy gaps
for ( m = 0; m < ps; ++m ) {
newpoints.push( points[ i + m ] );
}
i += ps;
} else if ( j >= otherpoints.length ) {
// for lines, we can't use the rest of the points
if ( !withlines ) {
for ( m = 0; m < ps; ++m ) {
newpoints.push( points[ i + m ] );
}
}
i += ps;
} else if ( otherpoints[ j ] == null ) {
// oops, got a gap
for ( m = 0; m < ps; ++m ) {
newpoints.push( null );
}
fromgap = true;
j += otherps;
} else {
// cases where we actually got two points
px = points[ i ];
py = points[ i + 1 ];
qx = otherpoints[ j ];
qy = otherpoints[ j + 1 ];
bottom = 0;
if ( px === qx ) {
for ( m = 0; m < ps; ++m ) {
newpoints.push( points[ i + m ] );
}
//newpoints[ l + 1 ] += qy;
bottom = qy;
i += ps;
j += otherps;
} else if ( px > qx ) {
// we got past point below, might need to
// insert interpolated extra point
if ( withlines && i > 0 && points[ i - ps ] != null ) {
intery = py + ( points[ i - ps + 1 ] - py ) * ( qx - px ) / ( points[ i - ps ] - px );
newpoints.push( qx );
newpoints.push( intery );
for ( m = 2; m < ps; ++m ) {
newpoints.push( points[ i + m ] );
}
bottom = qy;
}
j += otherps;
} else { // px < qx
// if we come from a gap, we just skip this point
if ( fromgap && withlines ) {
i += ps;
continue;
}
for ( m = 0; m < ps; ++m ) {
newpoints.push( points[ i + m ] );
}
// we might be able to interpolate a point below,
// this can give us a better y
if ( withlines && j > 0 && otherpoints[ j - otherps ] != null ) {
bottom = qy + ( otherpoints[ j - otherps + 1 ] - qy ) * ( px - qx ) / ( otherpoints[ j - otherps ] - qx );
}
//newpoints[l + 1] += bottom;
i += ps;
}
fromgap = false;
if ( l !== newpoints.length && withbottom ) {
newpoints[ l + 2 ] = bottom;
}
}
// maintain the line steps invariant
if ( withsteps && l !== newpoints.length && l > 0 &&
newpoints[ l ] !== null &&
newpoints[ l ] !== newpoints[ l - ps ] &&
newpoints[ l + 1 ] !== newpoints[ l - ps + 1 ] ) {
for (m = 0; m < ps; ++m) {
newpoints[ l + ps + m ] = newpoints[ l + m ];
}
newpoints[ l + 1 ] = newpoints[ l - ps + 1 ];
}
}
datapoints.points = newpoints;
}
plot.hooks.processDatapoints.push( computeFillBottoms );
}
$.plot.plugins.push({
init: init,
options: options,
name: "fillbetween",
version: "1.0"
});
})(jQuery);

View File

@@ -0,0 +1 @@
(function($){var options={series:{fillBetween:null}};function init(plot){function findBottomSeries(s,allseries){var i;for(i=0;i<allseries.length;++i){if(allseries[i].id===s.fillBetween){return allseries[i]}}if(typeof s.fillBetween==="number"){if(s.fillBetween<0||s.fillBetween>=allseries.length){return null}return allseries[s.fillBetween]}return null}function computeFillBottoms(plot,s,datapoints){if(s.fillBetween==null){return}var other=findBottomSeries(s,plot.getData());if(!other){return}var ps=datapoints.pointsize,points=datapoints.points,otherps=other.datapoints.pointsize,otherpoints=other.datapoints.points,newpoints=[],px,py,intery,qx,qy,bottom,withlines=s.lines.show,withbottom=ps>2&&datapoints.format[2].y,withsteps=withlines&&s.lines.steps,fromgap=true,i=0,j=0,l,m;while(true){if(i>=points.length){break}l=newpoints.length;if(points[i]==null){for(m=0;m<ps;++m){newpoints.push(points[i+m])}i+=ps}else if(j>=otherpoints.length){if(!withlines){for(m=0;m<ps;++m){newpoints.push(points[i+m])}}i+=ps}else if(otherpoints[j]==null){for(m=0;m<ps;++m){newpoints.push(null)}fromgap=true;j+=otherps}else{px=points[i];py=points[i+1];qx=otherpoints[j];qy=otherpoints[j+1];bottom=0;if(px===qx){for(m=0;m<ps;++m){newpoints.push(points[i+m])}bottom=qy;i+=ps;j+=otherps}else if(px>qx){if(withlines&&i>0&&points[i-ps]!=null){intery=py+(points[i-ps+1]-py)*(qx-px)/(points[i-ps]-px);newpoints.push(qx);newpoints.push(intery);for(m=2;m<ps;++m){newpoints.push(points[i+m])}bottom=qy}j+=otherps}else{if(fromgap&&withlines){i+=ps;continue}for(m=0;m<ps;++m){newpoints.push(points[i+m])}if(withlines&&j>0&&otherpoints[j-otherps]!=null){bottom=qy+(otherpoints[j-otherps+1]-qy)*(px-qx)/(otherpoints[j-otherps]-qx)}i+=ps}fromgap=false;if(l!==newpoints.length&&withbottom){newpoints[l+2]=bottom}}if(withsteps&&l!==newpoints.length&&l>0&&newpoints[l]!==null&&newpoints[l]!==newpoints[l-ps]&&newpoints[l+1]!==newpoints[l-ps+1]){for(m=0;m<ps;++m){newpoints[l+ps+m]=newpoints[l+m]}newpoints[l+1]=newpoints[l-ps+1]}}datapoints.points=newpoints}plot.hooks.processDatapoints.push(computeFillBottoms)}$.plot.plugins.push({init:init,options:options,name:"fillbetween",version:"1.0"})})(jQuery);

View File

@@ -0,0 +1,241 @@
/* Flot plugin for plotting images.
Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license.
The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and
(x2, y2) are where you intend the two opposite corners of the image to end up
in the plot. Image must be a fully loaded Javascript image (you can make one
with new Image()). If the image is not complete, it's skipped when plotting.
There are two helpers included for retrieving images. The easiest work the way
that you put in URLs instead of images in the data, like this:
[ "myimage.png", 0, 0, 10, 10 ]
Then call $.plot.image.loadData( data, options, callback ) where data and
options are the same as you pass in to $.plot. This loads the images, replaces
the URLs in the data with the corresponding images and calls "callback" when
all images are loaded (or failed loading). In the callback, you can then call
$.plot with the data set. See the included example.
A more low-level helper, $.plot.image.load(urls, callback) is also included.
Given a list of URLs, it calls callback with an object mapping from URL to
Image object when all images are loaded or have failed loading.
The plugin supports these options:
series: {
images: {
show: boolean
anchor: "corner" or "center"
alpha: [ 0, 1 ]
}
}
They can be specified for a specific series:
$.plot( $("#placeholder"), [{
data: [ ... ],
images: { ... }
])
Note that because the data format is different from usual data points, you
can't use images with anything else in a specific data series.
Setting "anchor" to "center" causes the pixels in the image to be anchored at
the corner pixel centers inside of at the pixel corners, effectively letting
half a pixel stick out to each side in the plot.
A possible future direction could be support for tiling for large images (like
Google Maps).
*/
(function ($) {
var options = {
series: {
images: {
show: false,
alpha: 1,
anchor: "corner" // or "center"
}
}
};
$.plot.image = {};
$.plot.image.loadDataImages = function (series, options, callback) {
var urls = [], points = [];
var defaultShow = options.series.images.show;
$.each(series, function (i, s) {
if (!(defaultShow || s.images.show))
return;
if (s.data)
s = s.data;
$.each(s, function (i, p) {
if (typeof p[0] == "string") {
urls.push(p[0]);
points.push(p);
}
});
});
$.plot.image.load(urls, function (loadedImages) {
$.each(points, function (i, p) {
var url = p[0];
if (loadedImages[url])
p[0] = loadedImages[url];
});
callback();
});
}
$.plot.image.load = function (urls, callback) {
var missing = urls.length, loaded = {};
if (missing == 0)
callback({});
$.each(urls, function (i, url) {
var handler = function () {
--missing;
loaded[url] = this;
if (missing == 0)
callback(loaded);
};
$('<img />').load(handler).error(handler).attr('src', url);
});
};
function drawSeries(plot, ctx, series) {
var plotOffset = plot.getPlotOffset();
if (!series.images || !series.images.show)
return;
var points = series.datapoints.points,
ps = series.datapoints.pointsize;
for (var i = 0; i < points.length; i += ps) {
var img = points[i],
x1 = points[i + 1], y1 = points[i + 2],
x2 = points[i + 3], y2 = points[i + 4],
xaxis = series.xaxis, yaxis = series.yaxis,
tmp;
// actually we should check img.complete, but it
// appears to be a somewhat unreliable indicator in
// IE6 (false even after load event)
if (!img || img.width <= 0 || img.height <= 0)
continue;
if (x1 > x2) {
tmp = x2;
x2 = x1;
x1 = tmp;
}
if (y1 > y2) {
tmp = y2;
y2 = y1;
y1 = tmp;
}
// if the anchor is at the center of the pixel, expand the
// image by 1/2 pixel in each direction
if (series.images.anchor == "center") {
tmp = 0.5 * (x2-x1) / (img.width - 1);
x1 -= tmp;
x2 += tmp;
tmp = 0.5 * (y2-y1) / (img.height - 1);
y1 -= tmp;
y2 += tmp;
}
// clip
if (x1 == x2 || y1 == y2 ||
x1 >= xaxis.max || x2 <= xaxis.min ||
y1 >= yaxis.max || y2 <= yaxis.min)
continue;
var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
if (x1 < xaxis.min) {
sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
x1 = xaxis.min;
}
if (x2 > xaxis.max) {
sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
x2 = xaxis.max;
}
if (y1 < yaxis.min) {
sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
y1 = yaxis.min;
}
if (y2 > yaxis.max) {
sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
y2 = yaxis.max;
}
x1 = xaxis.p2c(x1);
x2 = xaxis.p2c(x2);
y1 = yaxis.p2c(y1);
y2 = yaxis.p2c(y2);
// the transformation may have swapped us
if (x1 > x2) {
tmp = x2;
x2 = x1;
x1 = tmp;
}
if (y1 > y2) {
tmp = y2;
y2 = y1;
y1 = tmp;
}
tmp = ctx.globalAlpha;
ctx.globalAlpha *= series.images.alpha;
ctx.drawImage(img,
sx1, sy1, sx2 - sx1, sy2 - sy1,
x1 + plotOffset.left, y1 + plotOffset.top,
x2 - x1, y2 - y1);
ctx.globalAlpha = tmp;
}
}
function processRawData(plot, series, data, datapoints) {
if (!series.images.show)
return;
// format is Image, x1, y1, x2, y2 (opposite corners)
datapoints.format = [
{ required: true },
{ x: true, number: true, required: true },
{ y: true, number: true, required: true },
{ x: true, number: true, required: true },
{ y: true, number: true, required: true }
];
}
function init(plot) {
plot.hooks.processRawData.push(processRawData);
plot.hooks.drawSeries.push(drawSeries);
}
$.plot.plugins.push({
init: init,
options: options,
name: 'image',
version: '1.1'
});
})(jQuery);

View File

@@ -0,0 +1 @@
(function($){var options={series:{images:{show:false,alpha:1,anchor:"corner"}}};$.plot.image={};$.plot.image.loadDataImages=function(series,options,callback){var urls=[],points=[];var defaultShow=options.series.images.show;$.each(series,function(i,s){if(!(defaultShow||s.images.show))return;if(s.data)s=s.data;$.each(s,function(i,p){if(typeof p[0]=="string"){urls.push(p[0]);points.push(p)}})});$.plot.image.load(urls,function(loadedImages){$.each(points,function(i,p){var url=p[0];if(loadedImages[url])p[0]=loadedImages[url]});callback()})};$.plot.image.load=function(urls,callback){var missing=urls.length,loaded={};if(missing==0)callback({});$.each(urls,function(i,url){var handler=function(){--missing;loaded[url]=this;if(missing==0)callback(loaded)};$("<img />").load(handler).error(handler).attr("src",url)})};function drawSeries(plot,ctx,series){var plotOffset=plot.getPlotOffset();if(!series.images||!series.images.show)return;var points=series.datapoints.points,ps=series.datapoints.pointsize;for(var i=0;i<points.length;i+=ps){var img=points[i],x1=points[i+1],y1=points[i+2],x2=points[i+3],y2=points[i+4],xaxis=series.xaxis,yaxis=series.yaxis,tmp;if(!img||img.width<=0||img.height<=0)continue;if(x1>x2){tmp=x2;x2=x1;x1=tmp}if(y1>y2){tmp=y2;y2=y1;y1=tmp}if(series.images.anchor=="center"){tmp=.5*(x2-x1)/(img.width-1);x1-=tmp;x2+=tmp;tmp=.5*(y2-y1)/(img.height-1);y1-=tmp;y2+=tmp}if(x1==x2||y1==y2||x1>=xaxis.max||x2<=xaxis.min||y1>=yaxis.max||y2<=yaxis.min)continue;var sx1=0,sy1=0,sx2=img.width,sy2=img.height;if(x1<xaxis.min){sx1+=(sx2-sx1)*(xaxis.min-x1)/(x2-x1);x1=xaxis.min}if(x2>xaxis.max){sx2+=(sx2-sx1)*(xaxis.max-x2)/(x2-x1);x2=xaxis.max}if(y1<yaxis.min){sy2+=(sy1-sy2)*(yaxis.min-y1)/(y2-y1);y1=yaxis.min}if(y2>yaxis.max){sy1+=(sy1-sy2)*(yaxis.max-y2)/(y2-y1);y2=yaxis.max}x1=xaxis.p2c(x1);x2=xaxis.p2c(x2);y1=yaxis.p2c(y1);y2=yaxis.p2c(y2);if(x1>x2){tmp=x2;x2=x1;x1=tmp}if(y1>y2){tmp=y2;y2=y1;y1=tmp}tmp=ctx.globalAlpha;ctx.globalAlpha*=series.images.alpha;ctx.drawImage(img,sx1,sy1,sx2-sx1,sy2-sy1,x1+plotOffset.left,y1+plotOffset.top,x2-x1,y2-y1);ctx.globalAlpha=tmp}}function processRawData(plot,series,data,datapoints){if(!series.images.show)return;datapoints.format=[{required:true},{x:true,number:true,required:true},{y:true,number:true,required:true},{x:true,number:true,required:true},{y:true,number:true,required:true}]}function init(plot){plot.hooks.processRawData.push(processRawData);plot.hooks.drawSeries.push(drawSeries)}$.plot.plugins.push({init:init,options:options,name:"image",version:"1.1"})})(jQuery);

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More