prime-rails 0.0.3

data/app/assets/javascripts/js/progressbar/progressbar.js

@@ -0,0 +1,92 @@
+/**
+ * PrimeUI progressbar widget
+ */
+$(function() {
+
+    $.widget("primeui.puiprogressbar", {
+       
+        options: {
+            value: 0,
+            labelTemplate: '{value}%',
+            complete: null,
+            easing: 'easeInOutCirc',
+            effectSpeed: 'normal',
+            showLabel: true
+        },
+       
+        _create: function() {
+            this.element.addClass('pui-progressbar ui-widget ui-widget-content ui-corner-all')
+                    .append('<div class="pui-progressbar-value ui-widget-header ui-corner-all"></div>')
+                    .append('<div class="pui-progressbar-label"></div>');
+            
+            this.jqValue = this.element.children('.pui-progressbar-value');
+            this.jqLabel = this.element.children('.pui-progressbar-label');
+            
+            if(this.options.value !==0) {
+                this._setValue(this.options.value, false);
+            }
+
+            this.enableARIA();
+        },
+        
+        _setValue: function(value, animate) {
+            var anim = (animate === undefined || animate) ? true : false; 
+            
+            if(value >= 0 && value <= 100) {
+                if(value === 0) {
+                    this.jqValue.hide().css('width', '0%').removeClass('ui-corner-right');
+
+                    this.jqLabel.hide();
+                }
+                else {
+                    if(anim) {
+                        this.jqValue.show().animate({
+                            'width': value + '%' 
+                        }, this.options.effectSpeed, this.options.easing);
+                    }
+                    else {
+                        this.jqValue.show().css('width', value + '%');
+                    }
+
+                    if(this.options.labelTemplate && this.options.showLabel) {
+                        var formattedLabel = this.options.labelTemplate.replace(/{value}/gi, value);
+
+                        this.jqLabel.html(formattedLabel).show();
+                    }
+                    
+                    if(value === 100) {
+                        this._trigger('complete');
+                    }
+                }
+
+                this.options.value = value;
+                this.element.attr('aria-valuenow', value);
+            }
+        },
+
+        _getValue: function() {
+            return this.options.value;
+        },
+
+        enableARIA: function() {
+            this.element.attr('role', 'progressbar')
+                    .attr('aria-valuemin', 0)
+                    .attr('aria-valuenow', this.options.value)
+                    .attr('aria-valuemax', 100);
+        },
+                
+        _setOption: function(key, value) {
+            if(key === 'value') {
+                this._setValue(value);
+            }
+            
+            $.Widget.prototype._setOption.apply(this, arguments);
+        },
+        
+        _destroy: function() {
+            
+        }
+        
+    });
+    
+});

data/app/assets/javascripts/js/radiobutton/radiobutton.js

@@ -0,0 +1,94 @@
+/**
+ * PrimeUI radiobutton widget
+ */
+$(function() {
+
+    var checkedRadios = {};
+
+    $.widget("primeui.puiradiobutton", {
+       
+        _create: function() {
+            this.element.wrap('<div class="pui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"></div></div>');
+            this.container = this.element.parent().parent();
+            this.box = $('<div class="pui-radiobutton-box ui-widget pui-radiobutton-relative ui-state-default">').appendTo(this.container);
+            this.icon = $('<span class="pui-radiobutton-icon pui-c"></span>').appendTo(this.box);
+            this.disabled = this.element.prop('disabled');
+            this.label = $('label[for="' + this.element.attr('id') + '"]');
+            
+            if(this.element.prop('checked')) {
+                this.box.addClass('ui-state-active');
+                this.icon.addClass('ui-icon ui-icon-bullet');
+                checkedRadios[this.element.attr('name')] = this.box;
+            }
+            
+            if(this.disabled) {
+                this.box.addClass('ui-state-disabled');
+            } else {
+                this._bindEvents();
+            }
+        },
+        
+        _bindEvents: function() {
+            var $this = this;
+        
+            this.box.on('mouseover.puiradiobutton', function() {
+                if(!$this._isChecked()) 
+                    $this.box.addClass('ui-state-hover');
+            }).on('mouseout.puiradiobutton', function() {
+                if(!$this._isChecked())
+                    $this.box.removeClass('ui-state-hover');
+            }).on('click.puiradiobutton', function() {
+                if(!$this._isChecked()) {
+                    $this.element.trigger('click');
+
+                    if($.browser.msie && parseInt($.browser.version) < 9) {
+                        $this.element.trigger('change');
+                    }
+                }
+            });
+            
+            if(this.label.length > 0) {
+                this.label.on('click.puiradiobutton', function(e) {
+                    $this.element.trigger('click');
+
+                    e.preventDefault();
+                });
+            }
+            
+            this.element.focus(function() {
+                if($this._isChecked()) {
+                    $this.box.removeClass('ui-state-active');
+                }
+
+                $this.box.addClass('ui-state-focus');
+            })
+            .blur(function() {
+                if($this._isChecked()) {
+                    $this.box.addClass('ui-state-active');
+                }
+
+                $this.box.removeClass('ui-state-focus');
+            })
+            .change(function(e) {
+                var name = $this.element.attr('name');
+                if(checkedRadios[name]) {
+                    checkedRadios[name].removeClass('ui-state-active ui-state-focus ui-state-hover').children('.pui-radiobutton-icon').removeClass('ui-icon ui-icon-bullet');
+                }
+
+                $this.icon.addClass('ui-icon ui-icon-bullet');
+                if(!$this.element.is(':focus')) {
+                    $this.box.addClass('ui-state-active');
+                }
+
+                checkedRadios[name] = $this.box;
+                
+                $this._trigger('change', null);
+            });
+        },
+        
+        _isChecked: function() {
+            return this.element.prop('checked');
+        }
+    });
+    
+});

data/app/assets/javascripts/js/rating/rating.js

@@ -0,0 +1,87 @@
+/**
+ * PrimeUI rating widget
+ */
+$(function() {
+
+    $.widget("primeui.puirating", {
+       
+        options: {
+            stars: 5,
+            cancel: true
+        },
+        
+        _create: function() {
+            var input = this.element;
+            
+            input.wrap('<div />');
+            this.container = input.parent();
+            this.container.addClass('pui-rating');
+            
+            var inputVal = input.val(),
+            value = inputVal == '' ? null : parseInt(inputVal);
+            
+            if(this.options.cancel) {
+                this.container.append('<div class="pui-rating-cancel"><a></a></div>');
+            }
+
+            for(var i = 0; i < this.options.stars; i++) {
+                var styleClass = (value > i) ? "pui-rating-star pui-rating-star-on" : "pui-rating-star";
+
+                this.container.append('<div class="' + styleClass + '"><a></a></div>');
+            }
+            
+            this.stars = this.container.children('.pui-rating-star');
+
+            if(input.prop('disabled')) {
+                this.container.addClass('ui-state-disabled');
+            }
+            else if(!input.prop('readonly')){
+                this._bindEvents();
+            }
+        },
+        
+        _bindEvents: function() {
+            var $this = this;
+
+            this.stars.click(function() {
+                var value = $this.stars.index(this) + 1;   //index starts from zero
+
+                $this.setValue(value);
+            });
+
+            this.container.children('.pui-rating-cancel').hover(function() {
+                $(this).toggleClass('pui-rating-cancel-hover');
+            })
+            .click(function() {
+                $this.cancel();
+            });
+        },
+        
+        cancel: function() {
+            this.element.val('');
+        
+            this.stars.filter('.pui-rating-star-on').removeClass('pui-rating-star-on');
+            
+            this._trigger('cancel', null);
+        },
+        
+        getValue: function() {
+            var inputVal = this.element.val();
+
+            return inputVal == '' ? null : parseInt(inputVal);
+        },
+
+        setValue: function(value) {
+            this.element.val(value);
+
+            //update visuals
+            this.stars.removeClass('pui-rating-star-on');
+            for(var i = 0; i < value; i++) {
+                this.stars.eq(i).addClass('pui-rating-star-on');
+            }
+            
+            this._trigger('rate', null, value);
+        }
+    });
+    
+});

data/app/assets/javascripts/js/spinner/spinner.js

@@ -0,0 +1,227 @@
+/**
+ * PrimeUI spinner widget
+ */
+$(function() {
+
+    $.widget("primeui.puispinner", {
+       
+        options: {
+            step: 1.0
+        },
+        
+        _create: function() {
+            var input = this.element,
+            disabled = input.prop('disabled');
+            
+            input.puiinputtext().addClass('pui-spinner-input').wrap('<span class="pui-spinner ui-widget ui-corner-all" />');
+            this.wrapper = input.parent();
+            this.wrapper.append('<a class="pui-spinner-button pui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n"></span></span></a><a class="pui-spinner-button pui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s"></span></span></a>');
+            this.upButton = this.wrapper.children('a.pui-spinner-up');
+            this.downButton = this.wrapper.children('a.pui-spinner-down');
+            this.options.step = this.options.step||1;
+            
+            if(parseInt(this.options.step) === 0) {
+                this.options.precision = this.options.step.toString().split(/[,]|[.]/)[1].length;
+            }
+            
+            this._initValue();
+    
+            if(!disabled&&!input.prop('readonly')) {
+                this._bindEvents();
+            }
+            
+            if(disabled) {
+                this.wrapper.addClass('ui-state-disabled');
+            }
+
+            //aria
+            input.attr({
+                'role': 'spinner'
+                ,'aria-multiline': false
+                ,'aria-valuenow': this.value
+            });
+            
+            if(this.options.min != undefined) 
+                input.attr('aria-valuemin', this.options.min);
+
+            if(this.options.max != undefined) 
+                input.attr('aria-valuemax', this.options.max);
+
+            if(input.prop('disabled'))
+                input.attr('aria-disabled', true);
+
+            if(input.prop('readonly'))
+                input.attr('aria-readonly', true);
+        },
+        
+
+        _bindEvents: function() {
+            var $this = this;
+            
+            //visuals for spinner buttons
+            this.wrapper.children('.pui-spinner-button')
+                .mouseover(function() {
+                    $(this).addClass('ui-state-hover');
+                }).mouseout(function() {
+                    $(this).removeClass('ui-state-hover ui-state-active');
+
+                    if($this.timer) {
+                        clearInterval($this.timer);
+                    }
+                }).mouseup(function() {
+                    clearInterval($this.timer);
+                    $(this).removeClass('ui-state-active').addClass('ui-state-hover');
+                }).mousedown(function(e) {
+                    var element = $(this),
+                    dir = element.hasClass('pui-spinner-up') ? 1 : -1;
+
+                    element.removeClass('ui-state-hover').addClass('ui-state-active');
+
+                    if($this.element.is(':not(:focus)')) {
+                        $this.element.focus();
+                    }
+
+                    $this._repeat(null, dir);
+
+                    //keep focused
+                    e.preventDefault();
+            });
+
+            this.element.keydown(function (e) {        
+                var keyCode = $.ui.keyCode;
+
+                switch(e.which) {            
+                    case keyCode.UP:
+                        $this._spin($this.options.step);
+                    break;
+
+                    case keyCode.DOWN:
+                        $this._spin(-1 * $this.options.step);
+                    break;
+
+                    default:
+                        //do nothing
+                    break;
+                }
+            })
+            .keyup(function () { 
+                $this._updateValue();
+            })
+            .blur(function () { 
+                $this._format();
+            })
+            .focus(function () {
+                //remove formatting
+                $this.element.val($this.value);
+            });
+
+            //mousewheel
+            this.element.bind('mousewheel', function(event, delta) {
+                if($this.element.is(':focus')) {
+                    if(delta > 0)
+                        $this._spin($this.options.step);
+                    else
+                        $this._spin(-1 * $this.options.step);
+
+                    return false;
+                }
+            });
+        },
+
+        _repeat: function(interval, dir) {
+            var $this = this,
+            i = interval || 500;
+
+            clearTimeout(this.timer);
+            this.timer = setTimeout(function() {
+                $this._repeat(40, dir);
+            }, i);
+
+            this._spin(this.options.step * dir);
+        },
+                
+        _toFixed: function (value, precision) {
+            var power = Math.pow(10, precision||0);
+            return String(Math.round(value * power) / power);
+        },
+                
+        _spin: function(step) {
+            var newValue;
+            currentValue = this.value ? this.value : 0;
+        
+            if(this.options.precision)
+                newValue = parseFloat(this._toFixed(currentValue + step, this.options.precision));
+            else
+                newValue = parseInt(currentValue + step);
+
+            if(this.options.min != undefined && newValue < this.options.min) {
+                newValue = this.options.min;
+            }
+
+            if(this.options.max != undefined && newValue > this.options.max) {
+                newValue = this.options.max;
+            }
+
+            this.element.val(newValue).attr('aria-valuenow', newValue);
+            this.value = newValue;
+
+            this.element.trigger('change');
+        },
+
+        _updateValue: function() {
+            var value = this.element.val();
+
+            if(value == '') {
+                if(this.options.min != undefined)
+                    this.value = this.options.min;
+                else
+                    this.value = 0;
+            }
+            else {
+                if(this.options.step)
+                    value = parseFloat(value);
+                else
+                    value = parseInt(value);
+
+                if(!isNaN(value)) {
+                    this.value = value;
+                }
+            }
+        },
+
+        _initValue: function() {
+            var value = this.element.val();
+
+            if(value == '') {
+                if(this.options.min != undefined)
+                    this.value = this.options.min;
+                else
+                    this.value = 0;
+            }
+            else {
+                if(this.options.prefix)
+                    value = value.split(this.options.prefix)[1];
+
+                if(this.options.suffix)
+                    value = value.split(this.options.suffix)[0];
+
+                if(this.options.step)
+                    this.value = parseFloat(value);
+                else
+                    this.value = parseInt(value);
+            }
+        },
+
+        _format: function() {
+            var value = this.value;
+
+            if(this.options.prefix)
+                value = this.options.prefix + value;
+
+            if(this.options.suffix)
+                value = value + this.options.suffix;
+
+            this.element.val(value);
+        }
+    });
+});

data/app/assets/javascripts/js/tabview/tabview.js

@@ -0,0 +1,153 @@
+/**
+ * PrimeUI tabview widget
+ */
+$(function() {
+
+    $.widget("primeui.puitabview", {
+       
+        options: {
+             activeIndex:0
+            ,orientation:'top'
+        },
+        
+        _create: function() {
+            var element = this.element;
+            
+            element.addClass('pui-tabview ui-widget ui-widget-content ui-corner-all ui-hidden-container')
+                .children('ul').addClass('pui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all')
+                .children('li').addClass('ui-state-default ui-corner-top');
+                
+            element.addClass('pui-tabview-' + this.options.orientation);
+
+            element.children('div').addClass('pui-tabview-panels').children().addClass('pui-tabview-panel ui-widget-content ui-corner-bottom');
+
+            element.find('> ul.pui-tabview-nav > li').eq(this.options.activeIndex).addClass('pui-tabview-selected ui-state-active');
+            element.find('> div.pui-tabview-panels > div.pui-tabview-panel:not(:eq(' + this.options.activeIndex + '))').addClass('ui-helper-hidden');
+            
+            this.navContainer = element.children('.pui-tabview-nav');
+            this.panelContainer = element.children('.pui-tabview-panels');
+
+            this._bindEvents();
+        },
+        
+        _bindEvents: function() {
+            var $this = this;
+
+            //Tab header events
+            this.navContainer.children('li')
+                    .on('mouseover.tabview', function(e) {
+                        var element = $(this);
+                        if(!element.hasClass('ui-state-disabled')&&!element.hasClass('ui-state-active')) {
+                            element.addClass('ui-state-hover');
+                        }
+                    })
+                    .on('mouseout.tabview', function(e) {
+                        var element = $(this);
+                        if(!element.hasClass('ui-state-disabled')&&!element.hasClass('ui-state-active')) {
+                            element.removeClass('ui-state-hover');
+                        }
+                    })
+                    .on('click.tabview', function(e) {
+                        var element = $(this);
+
+                        if($(e.target).is(':not(.ui-icon-close)')) {
+                            var index = element.index();
+
+                            if(!element.hasClass('ui-state-disabled') && index != $this.options.selected) {
+                                $this.select(index);
+                            }
+                        }
+
+                        e.preventDefault();
+                    });
+
+            //Closable tabs
+            this.navContainer.find('li .ui-icon-close')
+                .on('click.tabview', function(e) {
+                    var index = $(this).parent().index();
+
+                    $this.remove(index);
+
+                    e.preventDefault();
+                });
+        },
+        
+        select: function(index) {
+           this.options.selected = index;
+
+           var newPanel = this.panelContainer.children().eq(index),
+           headers = this.navContainer.children(),
+           oldHeader = headers.filter('.ui-state-active'),
+           newHeader = headers.eq(newPanel.index()),
+           oldPanel = this.panelContainer.children('.pui-tabview-panel:visible'),
+           $this = this;
+
+           //aria
+           oldPanel.attr('aria-hidden', true);
+           oldHeader.attr('aria-expanded', false);
+           newPanel.attr('aria-hidden', false);
+           newHeader.attr('aria-expanded', true);
+
+           if(this.options.effect) {
+                oldPanel.hide(this.options.effect.name, null, this.options.effect.duration, function() {
+                   oldHeader.removeClass('pui-tabview-selected ui-state-active');
+
+                   newHeader.removeClass('ui-state-hover').addClass('pui-tabview-selected ui-state-active');
+                   newPanel.show($this.options.name, null, $this.options.effect.duration, function() {
+                       $this._trigger('change', null, index);
+                   });
+               });
+           }
+           else {
+               oldHeader.removeClass('pui-tabview-selected ui-state-active');
+               oldPanel.hide();
+
+               newHeader.removeClass('ui-state-hover').addClass('pui-tabview-selected ui-state-active');
+               newPanel.show();
+
+               this._trigger('change', null, index);
+           }
+       },
+
+       remove: function(index) {    
+           var header = this.navContainer.children().eq(index),
+           panel = this.panelContainer.children().eq(index);
+
+           this._trigger('close', null, index);
+
+           header.remove();
+           panel.remove();
+
+           //active next tab if active tab is removed
+           if(index == this.options.selected) {
+               var newIndex = this.options.selected == this.getLength() ? this.options.selected - 1: this.options.selected;
+               this.select(newIndex);
+           }
+       },
+
+       getLength: function() {
+           return this.navContainer.children().length;
+       },
+
+       getActiveIndex: function() {
+           return this.options.selected;
+       },
+
+       _markAsLoaded: function(panel) {
+           panel.data('loaded', true);
+       },
+
+       _isLoaded: function(panel) {
+           return panel.data('loaded') == true;
+       },
+
+       disable: function(index) {
+           this.navContainer.children().eq(index).addClass('ui-state-disabled');
+       },
+
+       enable: function(index) {
+           this.navContainer.children().eq(index).removeClass('ui-state-disabled');
+       }
+
+    });
+});