prime-rails 0.0.3

data/app/assets/javascripts/js/inputtextarea/inputtextarea.js

@@ -0,0 +1,360 @@
+/**
+ * PrimeUI inputtextarea widget
+ */
+$(function() {
+
+    $.widget("primeui.puiinputtextarea", {
+       
+        options: {
+             autoResize: false
+            ,autoComplete: false
+            ,maxlength: null
+            ,counter: null
+            ,counterTemplate: '{0}'
+            ,minQueryLength: 3
+            ,queryDelay: 700
+        },
+
+        _create: function() {
+            var $this = this;
+            
+            this.element.puiinputtext();
+            
+            if(this.options.autoResize) {
+                this.options.rowsDefault = this.element.attr('rows');
+                this.options.colsDefault = this.element.attr('cols');
+        
+                this.element.addClass('pui-inputtextarea-resizable');
+                
+                this.element.keyup(function() {
+                    $this._resize();
+                }).focus(function() {
+                    $this._resize();
+                }).blur(function() {
+                    $this._resize();
+                });
+            }
+            
+            if(this.options.maxlength) {
+                this.element.keyup(function(e) {
+                    var value = $this.element.val(),
+                    length = value.length;
+
+                    if(length > $this.options.maxlength) {
+                        $this.element.val(value.substr(0, $this.options.maxlength));
+                    }
+
+                    if($this.options.counter) {
+                        $this._updateCounter();
+                    }
+                });
+            }
+            
+            if(this.options.counter) {
+                this._updateCounter();
+            }
+            
+            if(this.options.autoComplete) {
+                this._initAutoComplete();
+            }
+        },
+        
+        _updateCounter: function() {
+            var value = this.element.val(),
+            length = value.length;
+
+            if(this.options.counter) {
+                var remaining = this.options.maxlength - length,
+                remainingText = this.options.counterTemplate.replace('{0}', remaining);
+
+                this.options.counter.text(remainingText);
+            }
+        },
+        
+        _resize: function() {
+            var linesCount = 0,
+            lines = this.element.val().split('\n');
+
+            for(var i = lines.length-1; i >= 0 ; --i) {
+                linesCount += Math.floor((lines[i].length / this.options.colsDefault) + 1);
+            }
+
+            var newRows = (linesCount >= this.options.rowsDefault) ? (linesCount + 1) : this.options.rowsDefault;
+
+            this.element.attr('rows', newRows);
+        },
+        
+        
+        _initAutoComplete: function() {
+            var panelMarkup = '<div id="' + this.id + '_panel" class="pui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div>',
+            $this = this;
+
+            this.panel = $(panelMarkup).appendTo(document.body);
+
+            this.element.keyup(function(e) {
+                var keyCode = $.ui.keyCode;
+
+                switch(e.which) {
+
+                    case keyCode.UP:
+                    case keyCode.LEFT:
+                    case keyCode.DOWN:
+                    case keyCode.RIGHT:
+                    case keyCode.ENTER:
+                    case keyCode.NUMPAD_ENTER:
+                    case keyCode.TAB:
+                    case keyCode.SPACE:
+                    case keyCode.CONTROL:
+                    case keyCode.ALT:
+                    case keyCode.ESCAPE:
+                    case 224:   //mac command
+                        //do not search
+                    break;
+
+                    default:
+                        var query = $this._extractQuery();           
+                        if(query && query.length >= $this.options.minQueryLength) {
+
+                             //Cancel the search request if user types within the timeout
+                            if($this.timeout) {
+                                $this._clearTimeout($this.timeout);
+                            }
+
+                            $this.timeout = setTimeout(function() {
+                                $this.search(query);
+                            }, $this.options.queryDelay);
+
+                        }
+                    break;
+                }
+
+            }).keydown(function(e) {
+                var overlayVisible = $this.panel.is(':visible'),
+                keyCode = $.ui.keyCode;
+
+                switch(e.which) {
+                    case keyCode.UP:
+                    case keyCode.LEFT:
+                        if(overlayVisible) {
+                            var highlightedItem = $this.items.filter('.ui-state-highlight'),
+                            prev = highlightedItem.length == 0 ? $this.items.eq(0) : highlightedItem.prev();
+
+                            if(prev.length == 1) {
+                                highlightedItem.removeClass('ui-state-highlight');
+                                prev.addClass('ui-state-highlight');
+
+                                if($this.options.scrollHeight) {
+                                    PUI.scrollInView($this.panel, prev);
+                                }
+                            }
+
+                            e.preventDefault();
+                        }
+                        else {
+                            $this._clearTimeout();
+                        }
+                    break;
+
+                    case keyCode.DOWN:
+                    case keyCode.RIGHT:
+                        if(overlayVisible) {
+                            var highlightedItem = $this.items.filter('.ui-state-highlight'),
+                            next = highlightedItem.length == 0 ? _self.items.eq(0) : highlightedItem.next();
+
+                            if(next.length == 1) {
+                                highlightedItem.removeClass('ui-state-highlight');
+                                next.addClass('ui-state-highlight');
+
+                                if($this.options.scrollHeight) {
+                                    PUI.scrollInView($this.panel, next);
+                                }
+                            }
+
+                            e.preventDefault();
+                        }
+                        else {
+                            $this._clearTimeout();
+                        }
+                    break;
+
+                    case keyCode.ENTER:
+                    case keyCode.NUMPAD_ENTER:
+                        if(overlayVisible) {
+                            $this.items.filter('.ui-state-highlight').trigger('click');
+
+                            e.preventDefault();
+                        }
+                        else {
+                            $this._clearTimeout();
+                        } 
+                    break;
+
+                    case keyCode.SPACE:
+                    case keyCode.CONTROL:
+                    case keyCode.ALT:
+                    case keyCode.BACKSPACE:
+                    case keyCode.ESCAPE:
+                    case 224:   //mac command
+                        $this._clearTimeout();
+
+                        if(overlayVisible) {
+                            $this._hide();
+                        }
+                    break;
+
+                    case keyCode.TAB:
+                        $this._clearTimeout();
+
+                        if(overlayVisible) {
+                            $this.items.filter('.ui-state-highlight').trigger('click');
+                            $this._hide();
+                        }
+                    break;
+                }
+            });
+
+            //hide panel when outside is clicked
+            $(document.body).bind('mousedown.puiinputtextarea', function (e) {
+                if($this.panel.is(":hidden")) {
+                    return;
+                }
+                var offset = $this.panel.offset();
+                if(e.target === $this.element.get(0)) {
+                    return;
+                }
+
+                if (e.pageX < offset.left ||
+                    e.pageX > offset.left + $this.panel.width() ||
+                    e.pageY < offset.top ||
+                    e.pageY > offset.top + $this.panel.height()) {
+                    $this._hide();
+                }
+            });
+
+            //Hide overlay on resize
+            var resizeNS = 'resize.' + this.id;
+            $(window).unbind(resizeNS).bind(resizeNS, function() {
+                if($this.panel.is(':visible')) {
+                    $this._hide();
+                }
+            });
+        },
+
+        _bindDynamicEvents: function() {
+            var $this = this;
+
+            //visuals and click handler for items
+            this.items.bind('mouseover', function() {
+                var item = $(this);
+
+                if(!item.hasClass('ui-state-highlight')) {
+                    $this.items.filter('.ui-state-highlight').removeClass('ui-state-highlight');
+                    item.addClass('ui-state-highlight');
+                }
+            })
+            .bind('click', function(event) {
+                var item = $(this),
+                itemValue = item.attr('data-item-value'),
+                insertValue = itemValue.substring($this.query.length);
+
+                $this.element.focus();
+
+                $this.element.insertText(insertValue, $this.element.getSelection().start, true);
+
+                $this._hide();
+                
+                $this._trigger("itemselect", event, item);
+            });
+        },
+
+        _clearTimeout: function() {
+            if(this.timeout) {
+                clearTimeout(this.timeout);
+            }
+
+            this.timeout = null;
+        },
+
+        _extractQuery: function() {
+            var end = this.element.getSelection().end,
+            result = /\S+$/.exec(this.element.get(0).value.slice(0, end)),
+            lastWord = result ? result[0] : null;
+
+            return lastWord;
+        },
+
+        search: function(q) {
+            this.query = q;
+
+            var request = {
+                query: q 
+            };
+
+            if(this.options.completeSource) {
+                this.options.completeSource.call(this, request, this._handleResponse);
+            }
+        },
+
+        _handleResponse: function(data) {
+            this.panel.html('');
+
+            var listContainer = $('<ul class="pui-autocomplete-items pui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset"></ul>');
+
+            for(var i = 0; i < data.length; i++) {
+                var item = $('<li class="pui-autocomplete-item pui-autocomplete-list-item ui-corner-all"></li>');
+                item.attr('data-item-value', data[i].value);
+                item.text(data[i].label);
+
+                listContainer.append(item);
+            }
+
+            this.panel.append(listContainer).show();
+            this.items = this.panel.find('.pui-autocomplete-item');
+
+            this._bindDynamicEvents();
+
+            if(this.items.length > 0) {                            
+                //highlight first item
+                this.items.eq(0).addClass('ui-state-highlight');
+
+                //adjust height
+                if(this.options.scrollHeight && this.panel.height() > this.options.scrollHeight) {
+                    this.panel.height(this.options.scrollHeight);
+                }
+
+                if(this.panel.is(':hidden')) {
+                    this._show();
+                } 
+                else {
+                    this._alignPanel(); //with new items
+                }
+
+            }
+            else {
+                this.panel.hide();
+            }
+        },
+
+        _alignPanel: function() {
+            var pos = this.element.getCaretPosition(),
+            offset = this.element.offset();
+
+            this.panel.css({
+                            'left': offset.left + pos.left,
+                            'top': offset.top + pos.top,
+                            'width': this.element.innerWidth()
+                    });
+        },
+
+        _show: function() {
+            this._alignPanel();
+
+            this.panel.show();
+        },
+
+        _hide: function() {        
+            this.panel.hide();
+        }
+    });
+    
+});

data/app/assets/javascripts/js/lightbox/lightbox.js

@@ -0,0 +1,343 @@
+/**
+ * PrimeUI Lightbox Widget
+ */
+$(function() {
+
+    $.widget("primeui.puilightbox", {
+       
+        options: {
+            iframeWidth: 640,
+            iframeHeight: 480,
+            iframe: false
+        },
+        
+        _create: function() { 
+            this.options.mode = this.options.iframe ? 'iframe' : (this.element.children('div').length == 1) ? 'inline' : 'image';
+            
+            var dom = '<div class="pui-lightbox ui-widget ui-helper-hidden ui-corner-all pui-shadow">';
+            dom += '<div class="pui-lightbox-content-wrapper">';
+            dom += '<a class="ui-state-default pui-lightbox-nav-left ui-corner-right ui-helper-hidden"><span class="ui-icon ui-icon-carat-1-w">go</span></a>';
+            dom += '<div class="pui-lightbox-content ui-corner-all"></div>';
+            dom += '<a class="ui-state-default pui-lightbox-nav-right ui-corner-left ui-helper-hidden"><span class="ui-icon ui-icon-carat-1-e">go</span></a>';
+            dom += '</div>';
+            dom += '<div class="pui-lightbox-caption ui-widget-header"><span class="pui-lightbox-caption-text"></span>';
+            dom += '<a class="pui-lightbox-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick"></span></a><div style="clear:both" /></div>';
+            dom += '</div>';
+
+            this.panel = $(dom).appendTo(document.body);
+            this.contentWrapper = this.panel.children('.pui-lightbox-content-wrapper');
+            this.content = this.contentWrapper.children('.pui-lightbox-content');
+            this.caption = this.panel.children('.pui-lightbox-caption');
+            this.captionText = this.caption.children('.pui-lightbox-caption-text');        
+            this.closeIcon = this.caption.children('.pui-lightbox-close');
+            
+            if(this.options.mode === 'image') {
+                this._setupImaging();
+            } 
+            else if(this.options.mode === 'inline') {
+                this._setupInline();
+            } 
+            else if(this.options.mode === 'iframe') {
+                this._setupIframe();
+            }
+            
+            this._bindCommonEvents();
+            
+            this.links.data('puilightbox-trigger', true).find('*').data('puilightbox-trigger', true);
+            this.closeIcon.data('puilightbox-trigger', true).find('*').data('puilightbox-trigger', true);
+        },
+        
+        _bindCommonEvents: function() {
+            var $this = this;
+
+            this.closeIcon.hover(function() {
+                $(this).toggleClass('ui-state-hover');
+            }).click(function(e) {
+                $this.hide();
+                e.preventDefault();
+            });
+
+            //hide when outside is clicked
+            $(document.body).bind('click.pui-lightbox', function (e) {            
+                if($this.isHidden()) {
+                    return;
+                }
+
+                //do nothing if target is the link
+                var target = $(e.target);
+                if(target.data('puilightbox-trigger')) {
+                    return;
+                }
+
+                //hide if mouse is outside of lightbox
+                var offset = $this.panel.offset();
+                if(e.pageX < offset.left ||
+                    e.pageX > offset.left + $this.panel.width() ||
+                    e.pageY < offset.top ||
+                    e.pageY > offset.top + $this.panel.height()) {
+
+                    $this.hide();
+                }
+            });
+
+            //sync window resize
+            $(window).resize(function() {
+                if(!$this.isHidden()) {
+                    $(document.body).children('.ui-widget-overlay').css({
+                        'width': $(document).width()
+                        ,'height': $(document).height()
+                    });
+                }
+            });
+        },
+                
+        _setupImaging: function() {
+            var $this = this;
+
+            this.links = this.element.children('a');
+            this.content.append('<img class="ui-helper-hidden"></img>');
+            this.imageDisplay = this.content.children('img');
+            this.navigators = this.contentWrapper.children('a');
+
+            this.imageDisplay.load(function() { 
+                var image = $(this);
+
+                $this._scaleImage(image);
+
+                //coordinates to center overlay
+                var leftOffset = ($this.panel.width() - image.width()) / 2,
+                topOffset = ($this.panel.height() - image.height()) / 2;
+
+                //resize content for new image
+                $this.content.removeClass('pui-lightbox-loading').animate({
+                    width: image.width()
+                    ,height: image.height()
+                },
+                500,
+                function() {            
+                    //show image
+                    image.fadeIn();
+                    $this._showNavigators();
+                    $this.caption.slideDown();
+                });
+
+                $this.panel.animate({
+                    left: '+=' + leftOffset
+                    ,top: '+=' + topOffset
+                }, 500);
+            });
+
+            this.navigators.hover(function() {
+                $(this).toggleClass('ui-state-hover'); 
+            })
+            .click(function(e) {
+                var nav = $(this);
+
+                $this._hideNavigators();
+
+                if(nav.hasClass('pui-lightbox-nav-left')) {
+                    var index = $this.current == 0 ? $this.links.length - 1 : $this.current - 1;
+
+                    $this.links.eq(index).trigger('click');
+                } 
+                else {
+                    var index = $this.current == $this.links.length - 1 ? 0 : $this.current + 1;
+
+                    $this.links.eq(index).trigger('click');
+                }
+
+                e.preventDefault(); 
+            });
+
+            this.links.click(function(e) {
+                var link = $(this);
+
+                if($this.isHidden()) {
+                    $this.content.addClass('pui-lightbox-loading').width(32).height(32);
+                    $this.show();
+                }
+                else {
+                    $this.imageDisplay.fadeOut(function() {
+                        //clear for onload scaling
+                        $(this).css({
+                            'width': 'auto'
+                            ,'height': 'auto'
+                        });
+
+                        $this.content.addClass('pui-lightbox-loading');
+                    });
+
+                    $this.caption.slideUp();
+                }
+
+                setTimeout(function() {
+                    $this.imageDisplay.attr('src', link.attr('href'));
+                    $this.current = link.index();
+
+                    var title = link.attr('title');
+                    if(title) {
+                        $this.captionText.html(title);
+                    }
+                }, 1000);
+
+
+                e.preventDefault();
+            });
+        },
+
+        _scaleImage: function(image) {
+            var win = $(window),
+            winWidth = win.width(),
+            winHeight = win.height(),
+            imageWidth = image.width(),
+            imageHeight = image.height(),
+            ratio = imageHeight / imageWidth;
+
+            if(imageWidth >= winWidth && ratio <= 1){
+                imageWidth = winWidth * 0.75;
+                imageHeight = imageWidth * ratio;
+            } 
+            else if(imageHeight >= winHeight){
+                imageHeight = winHeight * 0.75;
+                imageWidth = imageHeight / ratio;
+            }
+
+            image.css({
+                'width':imageWidth + 'px'
+                ,'height':imageHeight + 'px'
+            })
+        },
+        
+        _setupInline: function() {
+            this.links = this.element.children('a');
+            this.inline = this.element.children('div').addClass('pui-lightbox-inline');
+            this.inline.appendTo(this.content).show();
+            var $this = this;
+
+            this.links.click(function(e) {
+                $this.show();
+
+                var title = $(this).attr('title');
+                if(title) {
+                    $this.captionText.html(title);
+                    $this.caption.slideDown();
+                }
+
+                e.preventDefault();
+            });
+        },
+
+        _setupIframe: function() {
+            var $this = this;
+            this.links = this.element;
+            this.iframe = $('<iframe frameborder="0" style="width:' + this.options.iframeWidth + 'px;height:' 
+                            + this.options.iframeHeight + 'px;border:0 none; display: block;"></iframe>').appendTo(this.content);
+
+            if(this.options.iframeTitle) {
+                this.iframe.attr('title', this.options.iframeTitle);
+            }
+
+            this.element.click(function(e) {
+                if(!$this.iframeLoaded) {
+                    $this.content.addClass('pui-lightbox-loading').css({
+                        width: $this.options.iframeWidth
+                        ,height: $this.options.iframeHeight
+                    });
+                    
+                    $this.show();
+
+                    $this.iframe.on('load', function() {
+                                    $this.iframeLoaded = true;
+                                    $this.content.removeClass('pui-lightbox-loading');
+                                })
+                                .attr('src', $this.element.attr('href'));
+                }
+                else {
+                    $this.show();
+                }
+
+                var title = $this.element.attr('title');
+                if(title) {
+                    $this.caption.html(title);
+                    $this.caption.slideDown();
+                }
+
+                e.preventDefault();
+            });
+        },
+
+        show: function() {
+            this.center();
+
+            this.panel.css('z-index', ++PUI.zindex).show();
+
+            if(!this.modality) {
+                this._enableModality();
+            }
+
+            this._trigger('show');
+        },
+
+        hide: function() {
+            this.panel.fadeOut();
+            this._disableModality();
+            this.caption.hide();
+
+            if(this.options.mode === 'image') {
+                this.imageDisplay.hide().attr('src', '').removeAttr('style');
+                this._hideNavigators();
+            }
+
+            this._trigger('hide');
+        },
+
+        center: function() { 
+            var win = $(window),
+            left = (win.width() / 2 ) - (this.panel.width() / 2),
+            top = (win.height() / 2 ) - (this.panel.height() / 2);
+
+            this.panel.css({
+                'left': left,
+                'top': top
+            });
+        },
+
+        _enableModality: function() {
+            this.modality = $('<div class="ui-widget-overlay"></div>')
+                            .css({
+                                'width': $(document).width()
+                                ,'height': $(document).height()
+                                ,'z-index': this.panel.css('z-index') - 1
+                            })
+                            .appendTo(document.body);
+        },
+
+        _disableModality: function() {
+            this.modality.remove();
+            this.modality = null;
+        },
+
+        _showNavigators: function() {
+            this.navigators.zIndex(this.imageDisplay.zIndex() + 1).show();
+        },
+
+        _hideNavigators: function() {
+            this.navigators.hide();
+        },
+        
+        isHidden: function() {
+            return this.panel.is(':hidden');
+        },
+
+        showURL: function(opt) {
+            if(opt.width)
+                this.iframe.attr('width', opt.width);
+            if(opt.height)
+                this.iframe.attr('height', opt.height);
+
+            this.iframe.attr('src', opt.src); 
+
+            this.show();
+        }
+    });
+});