right-rails 1.0.9 → 1.0.10

data/CHANGELOG

@@ -1,3 +1,16 @@
+2010-10-24 Nikolay Nemshilov
+  o Version 1.0.10
+    * RightJS builds update
+    * Dialog module
+    * Billboard module
+    * Table module
+
+2010-10-17 Nikolay Nemshilov
+  o Version 1.0.9
+    * RightJS 2.1.1 build
+    * Selectable module update
+    * tooltip -> tooltips rename
+
 2010-10-11 Nikolay Nemshilov
   o Version 1.0.8
     * RightJS 2.1.0 build

data/public/javascripts/right/billboard-src.js

@@ -0,0 +1,544 @@
+/**
+ * Standard billboard widget for RightJS
+ * http://rightjs.org/ui/billboard
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+var Billboard = RightJS.Billboard = (function(RightJS) {
+/**
+ * This module defines the basic widgets constructor
+ * it creates an abstract proxy with the common functionality
+ * which then we reuse and override in the actual widgets
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+
+/**
+ * Billboard initialization script
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+var R      = RightJS,
+    $      = RightJS.$,
+    $$     = RightJS.$$,
+    $w     = RightJS.$w,
+    $E     = RightJS.$E,
+    Fx     = RightJS.Fx,
+    Class  = RightJS.Class,
+    Object = RightJS.Object;
+
+
+
+
+/**
+ * The widget units constructor
+ *
+ * @param String tag-name or Object methods
+ * @param Object methods
+ * @return Widget wrapper
+ */
+function Widget(tag_name, methods) {
+  if (!methods) {
+    methods = tag_name;
+    tag_name = 'DIV';
+  }
+
+  /**
+   * An Abstract Widget Unit
+   *
+   * Copyright (C) 2010 Nikolay Nemshilov
+   */
+  var AbstractWidget = new RightJS.Wrapper(RightJS.Element.Wrappers[tag_name] || RightJS.Element, {
+    /**
+     * The common constructor
+     *
+     * @param Object options
+     * @param String optional tag name
+     * @return void
+     */
+    initialize: function(key, options) {
+      this.key = key;
+      var args = [{'class': 'rui-' + key}];
+
+      // those two have different constructors
+      if (!(this instanceof RightJS.Input || this instanceof RightJS.Form)) {
+        args.unshift(tag_name);
+      }
+      this.$super.apply(this, args);
+
+      if (RightJS.isString(options)) {
+        options = RightJS.$(options);
+      }
+
+      // if the options is another element then
+      // try to dynamically rewrap it with our widget
+      if (options instanceof RightJS.Element) {
+        this._ = options._;
+        if ('$listeners' in options) {
+          options.$listeners = options.$listeners;
+        }
+        options = {};
+      }
+      this.setOptions(options, this);
+      return this;
+    },
+
+  // protected
+
+    /**
+     * Catches the options
+     *
+     * @param Object user-options
+     * @param Element element with contextual options
+     * @return void
+     */
+    setOptions: function(options, element) {
+      element = element || this;
+      RightJS.Options.setOptions.call(this,
+        RightJS.Object.merge(options, eval("("+(
+          element.get('data-'+ this.key) || '{}'
+        )+")"))
+      );
+      return this;
+    }
+  });
+
+  /**
+   * Creating the actual widget class
+   *
+   */
+  var Klass = new RightJS.Wrapper(AbstractWidget, methods);
+
+  // creating the widget related shortcuts
+  RightJS.Observer.createShortcuts(Klass.prototype, Klass.EVENTS || []);
+
+  return Klass;
+}
+
+
+/**
+ * Billboards basic class
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+var Billboard = new Widget('UL', {
+  extend: {
+    version: '2.0.1',
+
+    EVENTS:  $w('change first last'),
+
+    Options: {
+      fxName:      'stripe',  // visual effect name
+      fxDuration:  'long',    // visual effect duration
+
+      autostart:   true,      // if it should automatically start rotate things
+      delay:       4000,      // delay between item shows
+      loop:        true,      // loop after reaching the last one
+
+      showButtons: true,      // should it show the next/prev buttons or not
+      prevButton:  'native',  // prev item button, 'native' or an ID of your own
+      nextButton:  'native',  // next item button, 'native' or an ID of your own
+
+      stripes:     10,        // the number of stripes
+
+      cssRule:     '*.rui-billboard'
+    }
+  },
+
+  /**
+   * Basic constructor
+   *
+   * @param mixed an element reference
+   * @return void
+   */
+  initialize: function(element) {
+    this.$super('billboard', element);
+
+    // initializing the buttons
+    if (this.options.showButtons) {
+      this.prevButton = this.options.prevButton !== 'native' ? $(this.options.prevButton) :
+        $E('div', {'class': 'rui-billboard-button-prev', 'html': '‹'}).insertTo(this);
+      this.nextButton = this.options.nextButton !== 'native' ? $(this.options.nextButton) :
+        $E('div', {'class': 'rui-billboard-button-next', 'html': '›'}).insertTo(this);
+
+      this.prevButton.onClick(R(function(event) {
+        event.stop(); this.showPrev();
+      }).bind(this));
+      this.nextButton.onClick(R(function(event) {
+        event.stop(); this.showNext();
+      }).bind(this));
+    }
+
+    // catching the 'first'/'last' events
+    this.onChange(function(event) {
+      if (event.item === this.items().first()) {
+        this.fire('first');
+      } else if (event.item === this.items().last()) {
+        this.fire('last');
+      }
+    });
+
+    // stopping/starting the slideshow with mouse over/out events
+    this.on({
+      mouseover: function() {
+        this.stop();
+      },
+
+      mouseout: function(event) {
+        if (this.options.autostart && !event.find('.rui-billboard')) {
+          this.start();
+        }
+      }
+    });
+
+    // autostart
+    if (this.options.autostart) {
+      this.start();
+    }
+  },
+
+  /**
+   * Returns the list of items to swap
+   *
+   * @return Array swappable items
+   */
+  items: function() {
+    return this.children().without(this.prevButton, this.nextButton);
+  },
+
+  /**
+   * Show next item on the list
+   *
+   * @return Billboard this
+   */
+  showNext: function() {
+    var items = this.items(), index = items.indexOf(this.current()) + 1;
+
+    if (index == items.length && this.options.loop) {
+      index = 0;
+    }
+
+    return this.current(index);
+  },
+
+  /**
+   * Show prev item on the list
+   *
+   * @return Billboard this
+   */
+  showPrev: function() {
+    var items = this.items(), index = items.indexOf(this.current()) - 1;
+
+    if (index < 0 && this.options.loop) {
+      index = items.length - 1;
+    }
+
+    return this.current(index);
+  },
+
+  /**
+   * Gets/sets the current item
+   *
+   * @param mixed integer index or a LI element reference
+   * @return Billboard this or current LI element
+   */
+  current: function(index) {
+    var items = this.items();
+
+    if (arguments.length) {
+      if (index instanceof Element) {
+        index = items.indexOf(index);
+      }
+
+      this.runFx(items[index]);
+    } else {
+      return items.length ? (
+        items.first('hasClass', 'rui-billboard-current')  ||
+        items.first().addClass('rui-billboard-current')
+      ) : null;
+    }
+
+    return this;
+  },
+
+  /**
+   * Starts the slide show
+   *
+   * @return Billboard this
+   */
+  start: function() {
+    this.timer = R(this.showNext).bind(this).periodical(this.options.delay);
+  },
+
+  /**
+   * stops the slideshow
+   *
+   * @return Billboard this
+   */
+  stop: function() {
+    if (this.timer) {
+      this.timer.stop();
+    }
+  },
+
+  /**
+   * Wrapping the event trigger so it always sent the
+   * current element references
+   *
+   * @param String event name
+   * @param Object options
+   * @return Billboard this
+   */
+  fire: function(name, options) {
+    return this.$super(name, Object.merge({
+      index: this.items().indexOf(this.current()),
+      item:  this.current()
+    }, options));
+  },
+
+// protected
+
+  /**
+   * Runs the fx transition
+   *
+   * @param Element new LI element
+   * @return void
+   */
+  runFx: function(item) {
+    if (item && !this._running) {
+      var Fx = Billboard.Fx[R(this.options.fxName || '').capitalize()];
+
+      if (Fx) {
+        new Fx(this).start(this.current(), item);
+      } else {
+        this.current().removeClass('rui-billboard-current');
+        item.addClass('rui-billboard-current');
+      }
+    }
+  }
+});
+
+/**
+ * Basic billboard visual effect
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+Billboard.Fx = new Class(Fx, {
+
+  /**
+   * basic constructor
+   *
+   * @param Billboard billboard
+   * @return void
+   */
+  initialize: function(billboard) {
+    this.container = $E('div', {'class': 'rui-billboard-fx-container'});
+
+    this.$super(billboard, {
+      duration: billboard.options.fxDuration,
+      onStart: function() {
+        billboard._running = true;
+        billboard.insert(this.container);
+      },
+      onFinish: function() {
+        this.container.remove();
+        billboard._running = false;
+        billboard.fire('change');
+      }
+    });
+  },
+
+  /**
+   * Starts an fx on the given item
+   *
+   * @param {Element} old LI element
+   * @param {Element} new LI element
+   * @return void
+   */
+  prepare: function(old_item, new_item) {
+    old_item.removeClass('rui-billboard-current');
+    new_item.addClass('rui-billboard-current');
+
+    this.clone = old_item.clone();
+
+    this.container.update(this.clone);
+  }
+
+});
+
+/**
+ * Fade visual effects class
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+Billboard.Fx.Fade = new Class(Billboard.Fx, {
+
+  /**
+   * Starts an fx on the given item
+   *
+   * @param {Element} old LI element
+   * @param {Element} new LI element
+   * @return void
+   */
+  prepare: function(old_item, new_item) {
+    this.$super(old_item, new_item);
+  },
+
+  /**
+   * Rendering the effect
+   *
+   * @param Float delta value
+   * @return void
+   */
+  render: function(delta) {
+    this.container.setStyle({opacity: 1 - delta});
+  }
+
+});
+
+/**
+ * The slide visual effects class
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+Billboard.Fx.Slide = new Class(Billboard.Fx, {
+
+  /**
+   * overloading the 'prepare' method to add some stuff
+   * to the container depending on which direction do we slide
+   *
+   * @param {Element} old LI element
+   * @param {Element} new LI element
+   * @return void
+   */
+  prepare: function(old_item, new_item) {
+    this._width = this.element.current().size().x;
+    this._direction = old_item.nextSiblings().include(new_item) ? -1 : 1;
+
+    this.$super(old_item, new_item);
+
+    this.clone.setStyle({width: this._width + 'px'});
+  },
+
+  /**
+   * Rendering the Fx
+   *
+   * @param Float delta
+   * @return void
+   */
+  render: function(delta) {
+    this.clone._.style.left = this._direction * this._width * delta + 'px';
+  }
+
+});
+
+/**
+ * Stripe visual effects class
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+Billboard.Fx.Stripe = new Class(Billboard.Fx, {
+
+  directions: ['down', 'up', 'left', 'right'],
+
+  /**
+   * Breaking the original element onto sripes in here
+   *
+   * @param {Element} old LI element
+   * @param {Element} new LI element
+   * @return void
+   */
+  prepare: function(old_item, new_item) {
+    this.$super(old_item, new_item);
+
+    var length    = this.element.options.stripes,
+        width     = this.element.items()[0].size().x / length,
+        delay     = 100,
+        direction = this.directions.shift();
+
+    this.directions.push(direction);
+    this.container.clean();
+
+    for (var i=0; i < length; i++) {
+      var stripe = $E('div', {
+        'class': 'rui-billboard-stripe',
+        'style': {
+          width: width + 1 + 'px',
+          left:  i * width + 'px'
+        }
+      }).insert(old_item.clone().setStyle({
+        width: width * length + 'px',
+        left: - i * width  + 'px'
+      }));
+
+      this.container.append(stripe);
+      var options = {
+        duration: this.options.duration
+      };
+
+      if (direction !== 'right' && i === (length - 1) || (direction === 'right' && i === 0)) {
+        options.onFinish = R(this.finish).bind(this);
+      }
+
+      switch (direction) {
+        case 'up':
+          R(function(stripe, options) {
+            stripe.morph({height: '0px'}, options);
+          }).bind(this, stripe, options).delay(i * delay);
+          break;
+
+        case 'down':
+          stripe.setStyle('top: auto; bottom: 0px');
+          R(function(stripe, options) {
+            stripe.morph({height: '0px'}, options);
+          }).bind(this, stripe, options).delay(i * delay);
+          break;
+
+        case 'left':
+          R(function(stripe, options) {
+            stripe.morph({width: '0px'}, options);
+          }).bind(this, stripe, options).delay(i * delay);
+          break;
+
+        case 'right':
+          R(function(stripe, options) {
+            stripe.morph({width: '0px'}, options);
+          }).bind(this, stripe, options).delay((length - i -1) * delay);
+          break;
+
+        default:
+          this.finish();
+      }
+    }
+  },
+
+
+  /**
+   * Stubbing the timer so it didn't count nothing
+   *
+   * @return Fx this
+   */
+  start: function() {
+    this.$super.apply(this, arguments);
+    return this.pause();
+  }
+
+});
+
+/**
+ * Document level hooks for billboards
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+$(document).onReady(function() {
+  $$(Billboard.Options.cssRule).each(function(element) {
+    if (!(element instanceof Billboard)) {
+      element = new Billboard(element);
+    }
+  });
+});
+
+document.write("<style type=\"text/css\"> *.rui-billboard, *.rui-billboard> *{margin:0;padding:0;list-style:none} *.rui-billboard{display:inline-block; *display:inline; *zoom:1;position:relative} *.rui-billboard> *{display:none;width:100%;height:100%} *.rui-billboard> *:first-child, *.rui-billboard> *.rui-billboard-current:first-child{display:block;position:relative} *.rui-billboard> *>img{margin:0;padding:0} *.rui-billboard-current{position:absolute;left:0;top:0;display:block;z-index:999} *.rui-billboard-button-prev, *.rui-billboard-button-next{position:absolute;z-index:99999;left:.25em;top:auto;bottom:.25em;display:block;width:.5em;height:auto;text-align:center;font-size:200%;font-family:Arial;font-weight:bold;padding:0em .5em .2em .5em;background:white;opacity:0;filter:alpha(opacity:0);cursor:pointer;border:.12em solid #888;border-radius:.2em;-moz-border-radius:.2em;-webkit-border-radius:.2em;user-select:none;-moz-user-select:none;-webkit-user-select:none;transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out} *.rui-billboard-button-next{left:auto;right:.25em;text-align:right} *.rui-billboard-button-prev:active{text-indent:-.1em} *.rui-billboard-button-next:active{text-indent:.2em} *.rui-billboard:hover *.rui-billboard-button-prev, *.rui-billboard:hover *.rui-billboard-button-next{opacity:0.4;filter:alpha(opacity:40)} *.rui-billboard:hover *.rui-billboard-button-prev:hover, *.rui-billboard:hover *.rui-billboard-button-next:hover{opacity:0.7;filter:alpha(opacity:70)}.rui-billboard-fx-container{position:absolute;left:0;top:0;display:block;z-index:9999;overflow:hidden}.rui-billboard-fx-container> *{position:absolute;left:0;top:0}.rui-billboard-stripe{overflow:hidden}.rui-billboard-stripe> *{position:relative}</style>");
+
+return Billboard;
+})(RightJS);

data/public/javascripts/right/billboard.js

@@ -0,0 +1,17 @@
+/**
+ * Standard billboard widget for RightJS
+ * http://rightjs.org/ui/billboard
+ *
+ * Copyright (C) 2010 Nikolay Nemshilov
+ */
+var Billboard=RightJS.Billboard=function(c){var o=c.$,p=c.$$,q=c.$w,m=c.$E,r=c.Fx,n=c.Class,s=c.Object,f=new (function(a,b){if(!b){b=a;a="DIV"}var g=new c.Wrapper(c.Element.Wrappers[a]||c.Element,{initialize:function(h,d){this.key=h;var e=[{"class":"rui-"+h}];this instanceof c.Input||this instanceof c.Form||e.unshift(a);this.$super.apply(this,e);if(c.isString(d))d=c.$(d);if(d instanceof c.Element){this._=d._;if("$listeners"in d)d.$listeners=d.$listeners;d={}}this.setOptions(d,this);return this},setOptions:function(h,
+d){d=d||this;c.Options.setOptions.call(this,c.Object.merge(h,eval("("+(d.get("data-"+this.key)||"{}")+")")));return this}});g=new c.Wrapper(g,b);c.Observer.createShortcuts(g.prototype,g.EVENTS||[]);return g})("UL",{extend:{version:"2.0.1",EVENTS:q("change first last"),Options:{fxName:"stripe",fxDuration:"long",autostart:true,delay:4E3,loop:true,showButtons:true,prevButton:"native",nextButton:"native",stripes:10,cssRule:"*.rui-billboard"}},initialize:function(a){this.$super("billboard",a);if(this.options.showButtons){this.prevButton=
+this.options.prevButton!=="native"?o(this.options.prevButton):m("div",{"class":"rui-billboard-button-prev",html:"‹"}).insertTo(this);this.nextButton=this.options.nextButton!=="native"?o(this.options.nextButton):m("div",{"class":"rui-billboard-button-next",html:"›"}).insertTo(this);this.prevButton.onClick(c(function(b){b.stop();this.showPrev()}).bind(this));this.nextButton.onClick(c(function(b){b.stop();this.showNext()}).bind(this))}this.onChange(function(b){if(b.item===this.items().first())this.fire("first");
+else b.item===this.items().last()&&this.fire("last")});this.on({mouseover:function(){this.stop()},mouseout:function(b){this.options.autostart&&!b.find(".rui-billboard")&&this.start()}});this.options.autostart&&this.start()},items:function(){return this.children().without(this.prevButton,this.nextButton)},showNext:function(){var a=this.items(),b=a.indexOf(this.current())+1;if(b==a.length&&this.options.loop)b=0;return this.current(b)},showPrev:function(){var a=this.items(),b=a.indexOf(this.current())-
+1;if(b<0&&this.options.loop)b=a.length-1;return this.current(b)},current:function(a){var b=this.items();if(arguments.length){if(a instanceof Element)a=b.indexOf(a);this.runFx(b[a])}else return b.length?b.first("hasClass","rui-billboard-current")||b.first().addClass("rui-billboard-current"):null;return this},start:function(){this.timer=c(this.showNext).bind(this).periodical(this.options.delay)},stop:function(){this.timer&&this.timer.stop()},fire:function(a,b){return this.$super(a,s.merge({index:this.items().indexOf(this.current()),
+item:this.current()},b))},runFx:function(a){if(a&&!this._running){var b=f.Fx[c(this.options.fxName||"").capitalize()];if(b)(new b(this)).start(this.current(),a);else{this.current().removeClass("rui-billboard-current");a.addClass("rui-billboard-current")}}}});f.Fx=new n(r,{initialize:function(a){this.container=m("div",{"class":"rui-billboard-fx-container"});this.$super(a,{duration:a.options.fxDuration,onStart:function(){a._running=true;a.insert(this.container)},onFinish:function(){this.container.remove();
+a._running=false;a.fire("change")}})},prepare:function(a,b){a.removeClass("rui-billboard-current");b.addClass("rui-billboard-current");this.clone=a.clone();this.container.update(this.clone)}});f.Fx.Fade=new n(f.Fx,{prepare:function(a,b){this.$super(a,b)},render:function(a){this.container.setStyle({opacity:1-a})}});f.Fx.Slide=new n(f.Fx,{prepare:function(a,b){this._width=this.element.current().size().x;this._direction=a.nextSiblings().include(b)?-1:1;this.$super(a,b);this.clone.setStyle({width:this._width+
+"px"})},render:function(a){this.clone._.style.left=this._direction*this._width*a+"px"}});f.Fx.Stripe=new n(f.Fx,{directions:["down","up","left","right"],prepare:function(a,b){this.$super(a,b);var g=this.element.options.stripes,h=this.element.items()[0].size().x/g,d=this.directions.shift();this.directions.push(d);this.container.clean();for(var e=0;e<g;e++){var k=m("div",{"class":"rui-billboard-stripe",style:{width:h+1+"px",left:e*h+"px"}}).insert(a.clone().setStyle({width:h*g+"px",left:-e*h+"px"}));
+this.container.append(k);var l={duration:this.options.duration};if(d!=="right"&&e===g-1||d==="right"&&e===0)l.onFinish=c(this.finish).bind(this);switch(d){case "up":c(function(i,j){i.morph({height:"0px"},j)}).bind(this,k,l).delay(e*100);break;case "down":k.setStyle("top: auto; bottom: 0px");c(function(i,j){i.morph({height:"0px"},j)}).bind(this,k,l).delay(e*100);break;case "left":c(function(i,j){i.morph({width:"0px"},j)}).bind(this,k,l).delay(e*100);break;case "right":c(function(i,j){i.morph({width:"0px"},
+j)}).bind(this,k,l).delay((g-e-1)*100);break;default:this.finish()}}},start:function(){this.$super.apply(this,arguments);return this.pause()}});o(document).onReady(function(){p(f.Options.cssRule).each(function(a){a instanceof f||new f(a)})});document.write('<style type="text/css"> *.rui-billboard, *.rui-billboard> *{margin:0;padding:0;list-style:none} *.rui-billboard{display:inline-block; *display:inline; *zoom:1;position:relative} *.rui-billboard> *{display:none;width:100%;height:100%} *.rui-billboard> *:first-child, *.rui-billboard> *.rui-billboard-current:first-child{display:block;position:relative} *.rui-billboard> *>img{margin:0;padding:0} *.rui-billboard-current{position:absolute;left:0;top:0;display:block;z-index:999} *.rui-billboard-button-prev, *.rui-billboard-button-next{position:absolute;z-index:99999;left:.25em;top:auto;bottom:.25em;display:block;width:.5em;height:auto;text-align:center;font-size:200%;font-family:Arial;font-weight:bold;padding:0em .5em .2em .5em;background:white;opacity:0;filter:alpha(opacity:0);cursor:pointer;border:.12em solid #888;border-radius:.2em;-moz-border-radius:.2em;-webkit-border-radius:.2em;user-select:none;-moz-user-select:none;-webkit-user-select:none;transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out} *.rui-billboard-button-next{left:auto;right:.25em;text-align:right} *.rui-billboard-button-prev:active{text-indent:-.1em} *.rui-billboard-button-next:active{text-indent:.2em} *.rui-billboard:hover *.rui-billboard-button-prev, *.rui-billboard:hover *.rui-billboard-button-next{opacity:0.4;filter:alpha(opacity:40)} *.rui-billboard:hover *.rui-billboard-button-prev:hover, *.rui-billboard:hover *.rui-billboard-button-next:hover{opacity:0.7;filter:alpha(opacity:70)}.rui-billboard-fx-container{position:absolute;left:0;top:0;display:block;z-index:9999;overflow:hidden}.rui-billboard-fx-container> *{position:absolute;left:0;top:0}.rui-billboard-stripe{overflow:hidden}.rui-billboard-stripe> *{position:relative}</style>');
+return f}(RightJS);