//
var JSEnlargeImage = Behavior.create({
initialize : function() {
// Determine CSS
all_css = this.element.readAttribute( 'class' ).split( ' ' )
for ( var i=0; i < all_css.length; i++ ) {
css = all_css[ i ].split( '_' ).reverse()
if ( css.pop() == 'js' && css.pop() == 'enlarge' && css.pop() == 'image' ) {
break
}
}
// Get normal image dimensions
if ( this.element.firstDescendant() ) {
normal_image_dimensions = this.element.firstDescendant().getDimensions()
} else {
this.logFBError()
return
}
// Determine image size from CSS
if ( css.length == 2 ) {
w = parseFloat( css[ 1 ] )
h = parseFloat( css[ 0 ] )
} else {
this.logFBError()
return
}
// Create larger images
this.larger_image = Element.extend( document.createElement( 'img' ) )
this.larger_image.hide()
this.larger_image.setAttribute( 'src', this.element.readAttribute( 'href' ) )
this.larger_image.setStyle({
position : 'absolute',
cursor : 'pointer',
width : w + 'px',
height : h + 'px',
marginTop : ( ( normal_image_dimensions.height - h ) / 2 ) + 'px'
})
this.element.insert( { 'before' : this.larger_image } )
// Create larger image behavior
var temp_behavior = Behavior.create({
onclick : function() {
this.element.hide()
}
})
new temp_behavior( this.larger_image )
},
onclick : function() {
this.larger_image.show()
return false
},
logFBError : function() {
if ( AB_GLOBALS.get( 'RAILS_ENV' ) != 'production' ) {
console.group( 'JSEnlargeImage Error' )
console.error( 'Could not apply image enlargement to link' )
console.log( this.element )
console.group( 'trace' )
console.trace()
console.groupEnd()
console.groupEnd()
}
}
})
Event.addBehavior( { 'a[class*=js_enlarge_image_]': JSEnlargeImage() } )
// Applies rounded corners to div elements (see curvy_corners_lite.js for additional info and instructions)
// DIVs only due to limitation of curvyCorners
//
// === Applied Via
// * Note: if this changes, updated JSDropShadow
// * class "js_rounded_corners_X" --- the X specifies the roundedness of the 4 corners
// * X can be a number, this will then be applied to all 4 corners
// * X can be a set of 4 numbers: tl_tr_bl_br
//
// === Example
// *
//
var JSRoundedCorners = Behavior.create({
initialize : function() {
// Grab js_rounded_corners_X from class CSS
rc_css_array = null
all_css = this.element.readAttribute( 'class' ).split( ' ' )
for ( var i=0; i < all_css.length; i++ ) {
css = all_css[ i ].split( '_' ).reverse()
if ( css.pop() == 'js' && css.pop() == 'rounded' && css.pop() == 'corners' ) {
rc_css_array = css
}
}
// Determine corner radii from rc_css_array
if ( rc_css_array.length == 1 ) {
tl = tr = bl = br = parseInt( rc_css_array[ 0 ] )
} else if ( rc_css_array.length == 4 ) {
tl = parseInt( rc_css_array[ 3 ] )
tr = parseInt( rc_css_array[ 2 ] )
bl = parseInt( rc_css_array[ 1 ] )
br = parseInt( rc_css_array[ 0 ] )
} else {
this.logFBError()
return
}
// Set options
settings = {
tl: { radius: tl },
tr: { radius: tr },
bl: { radius: bl },
br: { radius: br },
antiAlias: true,
autoPad: false
}
// Round corners
var temp = new curvyCorners(settings, this.element )
temp.applyCornersToAll()
},
logFBError : function() {
if ( AB_GLOBALS.get( 'RAILS_ENV' ) != 'production' ) {
console.group( 'JSRoundedCorners Error' )
console.error( 'Could not apply rounded corners to element' )
console.log( this.element )
console.group( 'trace' )
console.trace()
console.groupEnd()
console.groupEnd()
}
}
})
Event.addBehavior( { 'div[class*=js_rounded_corners_]': JSRoundedCorners() } )
// Sets margin of elements (usually to offset some other JS effect that does not appear when JS is disabled)
//
// === Applied Via
// * class "js_set_margin_UOM_X" --- UOM is either 'px' or 'em' and X specifies the margin of the 4 sides.
// * X can be a number, this will then be applied to all 4 sides
// * X can be a set of 4 numbers: t_r_b_l (numbers can be left blank to leave that setting unchanged)
//
// === Example
// *
//
var JSSetMargin = Behavior.create({
initialize : function() {
// Determine CSS
all_css = this.element.readAttribute( 'class' ).split( ' ' )
for ( var i=0; i < all_css.length; i++ ) {
css = all_css[ i ].split( '_' ).reverse()
if ( css.pop() == 'js' && css.pop() == 'set' && css.pop() == 'margin' ) {
break
}
}
// Determine unit of measure
uom = css.pop()
if ( uom != 'px' && uom != 'em' ) {
this.logFBError()
return
}
// Determine margin from CSS
if ( css.length == 1 ) {
t = r = b = l = parseFloat( css[ 0 ] )
} else if ( css.length == 4 ) {
t = parseFloat( css[ 3 ] )
r = parseFloat( css[ 2 ] )
b = parseFloat( css[ 1 ] )
l = parseFloat( css[ 0 ] )
} else {
this.logFBError()
return
}
// Set new margin
this.element.setStyle({
margin : t + uom + ' ' + r + uom + ' ' + b + uom + ' ' + l + uom
})
},
logFBError : function() {
if ( AB_GLOBALS.get( 'RAILS_ENV' ) != 'production' ) {
console.group( 'JSSetMargin Error' )
console.error( 'Could not apply margin to element' )
console.log( this.element )
console.group( 'trace' )
console.trace()
console.groupEnd()
console.groupEnd()
}
}
})
Event.addBehavior( { 'a[class*=js_set_margin_]': JSSetMargin() } )
Event.addBehavior( { 'div[class*=js_set_margin_]': JSSetMargin() } )
// Sets padding of elements (usually to offset some other JS effect that does not appear when JS is disabled)
//
// === Applied Via
// * class "js_set_padding_UOM_X" --- UOM is either 'px' or 'em' and X specifies the margin of the 4 sides.
// * X can be a number, this will then be applied to all 4 sides
// * X can be a set of 4 numbers: t_r_b_l (numbers can be left blank to leave that setting unchanged)
//
// === Example
// *
//
var JSSetPadding = Behavior.create({
initialize : function() {
// Determine CSS
all_css = this.element.readAttribute( 'class' ).split( ' ' )
for ( var i=0; i < all_css.length; i++ ) {
css = all_css[ i ].split( '_' ).reverse()
if ( css.pop() == 'js' && css.pop() == 'set' && css.pop() == 'padding' ) {
break
}
}
// Determine unit of measure
uom = css.pop()
if ( uom != 'px' && uom != 'em' ) {
this.logFBError()
return
}
// Determine padding from CSS
if ( css.length == 1 ) {
t = r = b = l = parseFloat( css[ 0 ] )
} else if ( css.length == 4 ) {
t = parseFloat( css[ 3 ] )
r = parseFloat( css[ 2 ] )
b = parseFloat( css[ 1 ] )
l = parseFloat( css[ 0 ] )
} else {
this.logFBError()
return
}
// Set new padding
if ( t !== NaN ) { this.element.setStyle( { paddingTop : t + uom } ) }
if ( r !== NaN ) { this.element.setStyle( { paddingRight : r + uom } ) }
if ( b !== NaN ) { this.element.setStyle( { paddingBottom : b + uom } ) }
if ( l !== NaN ) { this.element.setStyle( { paddingLeft : l + uom } ) }
},
logFBError : function() {
if ( AB_GLOBALS.get( 'RAILS_ENV' ) != 'production' ) {
console.group( 'JSSetPadding Error' )
console.error( 'Could not apply padding to element' )
console.log( this.element )
console.group( 'trace' )
console.trace()
console.groupEnd()
console.groupEnd()
}
}
})
Event.addBehavior( { 'div[class*=js_set_padding_]': JSSetPadding() } )
// Focuses on field when page loads.
// Note: To avoid problems, only one element per page should have this or SelectOnPageLoad set.
//
// === Applied Via
// * class "focus_on_page_load"
//
// === Example
// *
//
var FocusOnPageLoad = Behavior.create({
initialize : function() {
this.element.focus()
}
})
Event.addBehavior( { '.focus_on_page_load': FocusOnPageLoad() } )
// Enables js #link scrolling effect
//
// === Applied Via
// * any link that begins with "#"
//
var JSScroll = Behavior.create({
onclick : function() {
temp = this.element.readAttribute( 'href' ).split( '#' )
Effect.ScrollTo( temp[ 1 ] )
return false
}
})
Event.addBehavior( { 'a[href^=#]:not([href=#])': JSScroll() } )
/*Event.observe( window, 'load', function() {
$$( 'a[href^=#]:not([href=#])' ).each( function( element ) {
new JSScroll( element )
})
})*/
// Selects field when page loads.
// Note: To avoid problems, only one element per page should have this or FocusOnPageLoad set.
//
// === Applied Via
// * class "select_on_page_load"
//
// === Example
// *
//
var SelectOnPageLoad = Behavior.create({
initialize : function() {
this.element.select()
}
})
Event.addBehavior( { '.select_on_page_load': SelectOnPageLoad() } )