diff options
Diffstat (limited to 'railties/html')
-rw-r--r-- | railties/html/javascripts/controls.js | 38 | ||||
-rw-r--r-- | railties/html/javascripts/dragdrop.js | 7 | ||||
-rw-r--r-- | railties/html/javascripts/effects.js | 146 |
3 files changed, 128 insertions, 63 deletions
diff --git a/railties/html/javascripts/controls.js b/railties/html/javascripts/controls.js index a8e7ec7452..3307f2e2fa 100644 --- a/railties/html/javascripts/controls.js +++ b/railties/html/javascripts/controls.js @@ -221,14 +221,13 @@ Autocompleter.Base.prototype = { this.options.updateElement(selectedElement); return; } - var value = ''; if (this.options.select) { var nodes = document.getElementsByClassName(this.options.select, selectedElement) || []; if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select); } else value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal'); - + var lastTokenPos = this.findLastToken(); if (lastTokenPos != -1) { var newValue = this.element.value.substr(0, lastTokenPos + 1); @@ -454,7 +453,9 @@ Ajax.InPlaceEditor.prototype = { this.element = $(element); this.options = Object.extend({ + okButton: true, okText: "ok", + cancelLink: true, cancelText: "cancel", savingText: "Saving...", clickToEditText: "Click to edit", @@ -477,6 +478,7 @@ Ajax.InPlaceEditor.prototype = { highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor, highlightendcolor: "#FFFFFF", externalControl: null, + submitOnBlur: false, ajaxOptions: {} }, options || {}); @@ -542,16 +544,20 @@ Ajax.InPlaceEditor.prototype = { this.form.appendChild(br); } - okButton = document.createElement("input"); - okButton.type = "submit"; - okButton.value = this.options.okText; - this.form.appendChild(okButton); + if (this.options.okButton) { + okButton = document.createElement("input"); + okButton.type = "submit"; + okButton.value = this.options.okText; + this.form.appendChild(okButton); + } - cancelLink = document.createElement("a"); - cancelLink.href = "#"; - cancelLink.appendChild(document.createTextNode(this.options.cancelText)); - cancelLink.onclick = this.onclickCancel.bind(this); - this.form.appendChild(cancelLink); + if (this.options.cancelLink) { + cancelLink = document.createElement("a"); + cancelLink.href = "#"; + cancelLink.appendChild(document.createTextNode(this.options.cancelText)); + cancelLink.onclick = this.onclickCancel.bind(this); + this.form.appendChild(cancelLink); + } }, hasHTMLLineBreaks: function(string) { if (!this.options.handleLineBreaks) return false; @@ -567,24 +573,32 @@ Ajax.InPlaceEditor.prototype = { } else { text = this.getText(); } + + var obj = this; if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) { this.options.textarea = false; var textField = document.createElement("input"); + textField.obj = this; textField.type = "text"; textField.name = "value"; textField.value = text; textField.style.backgroundColor = this.options.highlightcolor; var size = this.options.size || this.options.cols || 0; if (size != 0) textField.size = size; + if (this.options.submitOnBlur) + textField.onblur = this.onSubmit.bind(this); this.editField = textField; } else { this.options.textarea = true; var textArea = document.createElement("textarea"); + textArea.obj = this; textArea.name = "value"; textArea.value = this.convertHTMLLineBreaks(text); textArea.rows = this.options.rows; textArea.cols = this.options.cols || 40; + if (this.options.submitOnBlur) + textArea.onblur = this.onSubmit.bind(this); this.editField = textArea; } @@ -753,4 +767,4 @@ Form.Element.DelayedObserver.prototype = { this.timer = null; this.callback(this.element, $F(this.element)); } -};
\ No newline at end of file +}; diff --git a/railties/html/javascripts/dragdrop.js b/railties/html/javascripts/dragdrop.js index 92d1f73162..818ef5e0ed 100644 --- a/railties/html/javascripts/dragdrop.js +++ b/railties/html/javascripts/dragdrop.js @@ -146,6 +146,7 @@ var Draggables = { if(!this.activeDraggable) return; this._lastPointer = null; this.activeDraggable.endDrag(event); + this.activeDraggable = null; }, keyPress: function(event) { @@ -191,7 +192,7 @@ Draggable.prototype = { }, reverteffect: function(element, top_offset, left_offset) { var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02; - element._revert = new Effect.MoveBy(element, -top_offset, -left_offset, {duration:dur}); + element._revert = new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur}); }, endeffect: function(element) { new Effect.Opacity(element, {duration:0.2, from:0.7, to:1.0}); @@ -227,8 +228,8 @@ Draggable.prototype = { currentDelta: function() { return([ - parseInt(this.element.style.left || '0'), - parseInt(this.element.style.top || '0')]); + parseInt(Element.getStyle(this.element,'left') || '0'), + parseInt(Element.getStyle(this.element,'top') || '0')]); }, initDrag: function(event) { diff --git a/railties/html/javascripts/effects.js b/railties/html/javascripts/effects.js index 035a63e62f..d3940a82b5 100644 --- a/railties/html/javascripts/effects.js +++ b/railties/html/javascripts/effects.js @@ -22,7 +22,7 @@ String.prototype.parseColor = function() { } } return(color.length==7 ? color : (arguments[0] || this)); -} +} Element.collectTextNodes = function(element) { return $A($(element).childNodes).collect( function(node) { @@ -39,7 +39,6 @@ Element.collectTextNodesIgnoreClass = function(element, className) { }).flatten().join(''); } - Element.setStyle = function(element, style) { element = $(element); for(k in style) element.style[k.camelize()] = style[k]; @@ -128,6 +127,20 @@ var Effect = { $A(elements).each( function(element, index) { new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay })); }); + }, + PAIRS: { + 'slide': ['SlideDown','SlideUp'], + 'blind': ['BlindDown','BlindUp'], + 'appear': ['Appear','Fade'] + }, + toggle: function(element, effect) { + element = $(element); + effect = (effect || 'appear').toLowerCase(); + var options = Object.extend({ + queue: { position:'end', scope:(element.id || 'global') } + }, arguments[2] || {}); + Effect[Element.visible(element) ? + Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options); } }; @@ -165,16 +178,22 @@ Effect.Transitions.full = function(pos) { /* ------------- core effects ------------- */ -Effect.Queue = { - effects: [], +Effect.ScopedQueue = Class.create(); +Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { + initialize: function() { + this.effects = []; + this.interval = null; + }, _each: function(iterator) { this.effects._each(iterator); }, - interval: null, add: function(effect) { var timestamp = new Date().getTime(); - switch(effect.options.queue) { + var position = (typeof effect.options.queue == 'string') ? + effect.options.queue : effect.options.queue.position; + + switch(position) { case 'front': // move unstarted effects after this effect this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) { @@ -205,32 +224,45 @@ Effect.Queue = { var timePos = new Date().getTime(); this.effects.invoke('loop', timePos); } +}); + +Effect.Queues = { + instances: $H(), + get: function(queueName) { + if(typeof queueName != 'string') return queueName; + + if(!this.instances[queueName]) + this.instances[queueName] = new Effect.ScopedQueue(); + + return this.instances[queueName]; + } +} +Effect.Queue = Effect.Queues.get('global'); + +Effect.DefaultOptions = { + transition: Effect.Transitions.sinoidal, + duration: 1.0, // seconds + fps: 25.0, // max. 25fps due to Effect.Queue implementation + sync: false, // true for combining + from: 0.0, + to: 1.0, + delay: 0.0, + queue: 'parallel' } -Object.extend(Effect.Queue, Enumerable); Effect.Base = function() {}; Effect.Base.prototype = { position: null, - setOptions: function(options) { - this.options = Object.extend({ - transition: Effect.Transitions.sinoidal, - duration: 1.0, // seconds - fps: 25.0, // max. 25fps due to Effect.Queue implementation - sync: false, // true for combining - from: 0.0, - to: 1.0, - delay: 0.0, - queue: 'parallel' - }, options || {}); - }, start: function(options) { - this.setOptions(options || {}); + this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {}); this.currentFrame = 0; this.state = 'idle'; this.startOn = this.options.delay*1000; this.finishOn = this.startOn + (this.options.duration*1000); this.event('beforeStart'); - if(!this.options.sync) Effect.Queue.add(this); + if(!this.options.sync) + Effect.Queues.get(typeof this.options.queue == 'string' ? + 'global' : this.options.queue.scope).add(this); }, loop: function(timePos) { if(timePos >= this.startOn) { @@ -268,7 +300,9 @@ Effect.Base.prototype = { } }, cancel: function() { - if(!this.options.sync) Effect.Queue.remove(this); + if(!this.options.sync) + Effect.Queues.get(typeof this.options.queue == 'string' ? + 'global' : this.options.queue.scope).remove(this); this.state = 'finished'; }, event: function(eventName) { @@ -318,13 +352,16 @@ Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), { } }); -Effect.MoveBy = Class.create(); -Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), { - initialize: function(element, toTop, toLeft) { - this.element = $(element); - this.toTop = toTop; - this.toLeft = toLeft; - this.start(arguments[3]); +Effect.Move = Class.create(); +Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), { + initialize: function(element) { + this.element = $(element); + var options = Object.extend({ + x: 0, + y: 0, + mode: 'relative' + }, arguments[1] || {}); + this.start(options); }, setup: function() { // Bug in Opera: Opera returns the "real" position of a static element or @@ -332,17 +369,28 @@ Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), { // ==> Always set top and left for position relative elements in your stylesheets // (to 0 if you do not need them) Element.makePositioned(this.element); - this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0'); this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0'); + this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0'); + if(this.options.mode == 'absolute') { + // absolute movement, so we need to calc deltaX and deltaY + this.options.x = this.options.x - this.originalLeft; + this.options.y = this.options.y - this.originalTop; + } }, update: function(position) { Element.setStyle(this.element, { - top: this.toTop * position + this.originalTop + 'px', - left: this.toLeft * position + this.originalLeft + 'px' + left: this.options.x * position + this.originalLeft + 'px', + top: this.options.y * position + this.originalTop + 'px' }); } }); +// for backwards compatibility +Effect.MoveBy = function(element, toTop, toLeft) { + return new Effect.Move(element, + Object.extend({ x: toLeft, y: toTop }, arguments[3] || {})); +}; + Effect.Scale = Class.create(); Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { initialize: function(element, percent) { @@ -584,7 +632,7 @@ Effect.DropOut = function(element) { left: Element.getStyle(element, 'left'), opacity: Element.getInlineOpacity(element) }; return new Effect.Parallel( - [ new Effect.MoveBy(element, 100, 0, { sync: true }), + [ new Effect.Move(element, {x: 0, y: 100, sync: true }), new Effect.Opacity(element, { sync: true, to: 0.0 }) ], Object.extend( { duration: 0.5, @@ -601,18 +649,18 @@ Effect.Shake = function(element) { var oldStyle = { top: Element.getStyle(element, 'top'), left: Element.getStyle(element, 'left') }; - return new Effect.MoveBy(element, 0, 20, - { duration: 0.05, afterFinishInternal: function(effect) { - new Effect.MoveBy(effect.element, 0, -40, - { duration: 0.1, afterFinishInternal: function(effect) { - new Effect.MoveBy(effect.element, 0, 40, - { duration: 0.1, afterFinishInternal: function(effect) { - new Effect.MoveBy(effect.element, 0, -40, - { duration: 0.1, afterFinishInternal: function(effect) { - new Effect.MoveBy(effect.element, 0, 40, - { duration: 0.1, afterFinishInternal: function(effect) { - new Effect.MoveBy(effect.element, 0, -20, - { duration: 0.05, afterFinishInternal: function(effect) { with(Element) { + return new Effect.Move(element, + { x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { + new Effect.Move(effect.element, + { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + new Effect.Move(effect.element, + { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + new Effect.Move(effect.element, + { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + new Effect.Move(effect.element, + { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + new Effect.Move(effect.element, + { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { with(Element) { undoPositioned(effect.element); setStyle(effect.element, oldStyle); }}}) }}) }}) }}) }}) }}); @@ -736,7 +784,9 @@ Effect.Grow = function(element) { break; } - return new Effect.MoveBy(element, initialMoveY, initialMoveX, { + return new Effect.Move(element, { + x: initialMoveX, + y: initialMoveY, duration: 0.01, beforeSetup: function(effect) { with(Element) { hide(effect.element); @@ -746,7 +796,7 @@ Effect.Grow = function(element) { afterFinishInternal: function(effect) { new Effect.Parallel( [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }), - new Effect.MoveBy(effect.element, moveY, moveX, { sync: true, transition: options.moveTransition }), + new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }), new Effect.Scale(effect.element, 100, { scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true}) @@ -806,7 +856,7 @@ Effect.Shrink = function(element) { return new Effect.Parallel( [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }), new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}), - new Effect.MoveBy(element, moveY, moveX, { sync: true, transition: options.moveTransition }) + new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }) ], Object.extend({ beforeStartInternal: function(effect) { with(Element) { [makePositioned, makeClipping].call(effect.effects[0].element) }}, |